Commit 1aebaee6 authored by Thomas Dennis's avatar Thomas Dennis

Loads more work on the kana page + various small tweaks elsewhere.

parent f2cdb03e
......@@ -8,21 +8,19 @@
</head>
<body>
<div id="navbar" class="custom-navbar custom-header">
<a href="index.html" class="custom-brand">
あ naniJSore
</a>
<a href="index.html" class="custom-brand">あ naniJSore</a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="particles.html">Particles</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
<!--yield-->
</div>
<div class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<a href="readme.md">About</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
......
......@@ -8,14 +8,12 @@
</head>
<body>
<div id="navbar" class="custom-navbar custom-header">
<a href="index.html" class="custom-brand">
あ naniJSore
</a>
<a href="index.html" class="custom-brand">あ naniJSore</a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="particles.html">Particles</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
......@@ -55,7 +53,7 @@
<!--content-->
</div>
<div class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<a href="readme.md">About</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
......
/*
If possible, import/use Noto Sans (to ensure that we have a CJK-capable font).
This isn't compulsory - the default "sans" font is used as a fallback if it's
not possible to use this.
*/
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
/* Default styling stuff. */
* { box-sizing: border-box; }
.body-content { margin: 8px; }
h1 {
margin: 0;
text-align: center;
}
h1, h2, h3 { color: #800; }
table {
background: #000;
margin-left: auto;
margin-right: auto;
}
th, td {
padding: 4px;
text-align: center;
}
th {
color: #FF0;
font-weight: bold;
}
td { background: #FFF; }
input {
padding: 8px;
border-radius: 8px;
border: 1px solid #BBB;
background: #FFF;
color: #000;
}
a {
text-decoration: none;
color: #F00;
}
a:hover { text-decoration: underline; }
/* These CSS rules are used to create the basic "navbar" layout stuff. */
......@@ -13,7 +63,7 @@ body {
margin: 0;
margin-bottom: 36px; /* Total footer height + body-content padding. */
background: #EEF;
font: 10pt sans-serif;
font: 12pt 'Noto Sans', sans-serif;
}
.custom-navbar {
......@@ -51,23 +101,22 @@ body {
}
.custom-brand {
font: bold 14pt sans-serif;
font-size: 14pt;
font-weight: bold;
text-shadow: 0 0 3px #08F;
color: #def !important;
}
/* Misc. stylistic bits. */
.body-content { margin: 8px; }
/* Misc. */
h1 {
margin: 0;
text-align: center;
}
.half-width { width: 50%; }
h1, h2, h3 { color: #800; }
.two-thirds { width: 67%; }
.centered-box {
.centred-box {
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}
......@@ -87,12 +136,14 @@ h1, h2, h3 { color: #800; }
background: #DDD;
text-decoration: none;
font: normal sans-serif;
overflow: hidden;
}
.jslink:hover, .jslink:focus { background: #EEE; }
.jslink:hover, .jslink:focus {
text-decoration: none;
background: #EEE;
}
.jslink-huge {
font-size: 32pt;
......@@ -112,13 +163,15 @@ h1, h2, h3 { color: #800; }
/* These classes are used for the kana grids on the kana page. */
.kana-grid td {
background: #FFF;
font-size: 24pt;
.kana-grid td { font-size: 24pt; }
.kana-grid div {
color: #777;
font-size: 8pt;
}
td.kana-special { color: #00F; }
td.kana-blank { background: none; }
td.kana-blank { background: #888; }
/* This is used to style the "Score" text at the bottom of the page. */
......@@ -126,11 +179,12 @@ td.kana-blank { background: none; }
display: inline-block;
padding: 6px;
color: #008;
font: bold 16pt sans-serif;
font-weight: bold;
font-size: 16pt;
overflow: hidden;
}
/* Used in various places. */
/* Used in various places. Not always a table! */
.section-box {
background: #DDF;
......@@ -141,12 +195,15 @@ td.kana-blank { background: none; }
margin: 16px;
}
th {
.section-box th {
color: #000;
font-weight: bold;
font-size: 12pt;
padding: 4px;
}
.section-box td { background: none; }
/* These classes are used by the big kanji boxes on the Kanji page. */
.kanji-box {
......@@ -159,16 +216,21 @@ th {
width: 128px;
}
.big-kanji { font: bold 64px sans-serif; }
.big-kanji {
font-weight: bold;
font-size: 48pt; }
/* Used on the Kanji page. */
.answer-grid {
display: table-cell;
vertical-align: top;
background: none;
}
.answer-grid th { padding: 16px; }
.answer-grid td { background: none; }
/* Used to highlight important text containers. */
......@@ -184,7 +246,8 @@ th {
.logo-text {
text-align: center;
font: bold 64pt sans-serif;
font-weight: bold;
font-size: 64pt;
color: #AAF;
text-shadow: 4px 4px 0 #444;
}
......@@ -193,13 +256,5 @@ th {
/* These classes are used to style the "answer" text-boxes. */
input {
padding: 8px;
border-radius: 8px;
border: 1px solid #BBB;
font: large sans-serif;
}
.blank_answer { background: #FFF; color: #000; }
.right_answer { background: #AFA; color: #000; }
.wrong_answer { background: #FAA; color: #000; }
.right_answer { background: #AFA; }
.wrong_answer { background: #FAA; }
......@@ -8,31 +8,33 @@
</head>
<body>
<div id="navbar" class="custom-navbar custom-header">
<a href="index.html" class="custom-brand">
あ naniJSore
</a>
<a href="index.html" class="custom-brand">あ naniJSore</a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="particles.html">Particles</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
<!--content-->
<div class="logo-text">nani<span>JS</span>ore</div>
<div class="centered-box">
<p class="two-thirds centred-box">
Each page covers a different aspect of the Japanese language. Most pages offer
an interactive "quiz" of some kind, allowing you to test your own knowledge of
the language in a way that aims to be more fun than simply reading a textbook.
</p>
<div class="half-width centred-box">
<a class="jslink jslink-huge jslink-primary" href="kana.html">Kana</a><br>
<a class="jslink jslink-huge jslink-primary" href="kanji.html">Kanji</a><br>
<a class="jslink jslink-huge jslink-primary" href="nouns.html">Nouns</a><br>
<a class="jslink jslink-huge jslink-primary" href="particles.html">Particles</a>
<a class="jslink jslink-huge jslink-primary" href="conjugate.html">Conjugations</a><br>
<a class="jslink jslink-huge" onclick="alert('Unimplemented :(')">Particles</a>
</div>
<!--content-->
</div>
<div class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<a href="readme.md">About</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
......
......@@ -8,16 +8,26 @@
/**
@brief Replace the contents of all kana table cells with hiragana/katakana.
@param katakana_mode True = Switch to katakana, false = Switch to hiragana.
This function also changes the visual styles of the hiragana/katakana buttons.
@param katakana True = Switch to katakana, false = Switch to hiragana.
*/
function kana_change(katakana_mode)
function kana_change(katakana)
{
var btns = document.querySelectorAll(".js-hiragana-btn, .js-katakana-btn");
for (var b = 0; b < btns.length; ++b)
{
var c = btns[b].getAttribute("class").replace("jslink-primary", "").trim();
if (katakana != (c.indexOf("js-katakana-btn") < 0)) c += " jslink-primary";
btns[b].setAttribute("class", c);
}
var kana = document.querySelectorAll(".kana-grid td");
for (var k = 0; k < kana.length; ++k)
{
if (katakana_mode) { kana[k].innerHTML = kana[k].innerHTML.toKatakana(); }
else { kana[k].innerHTML = kana[k].innerHTML.toHiragana(); }
if (katakana) { kana[k].innerHTML = kana[k].innerHTML.toKatakana(); }
else { kana[k].innerHTML = kana[k].innerHTML.toHiragana(); }
}
}
......@@ -27,11 +37,11 @@ function kana_change(katakana_mode)
function setup()
{
var hiragana_buttons = document.querySelectorAll(".js-hiragana-button");
var hiragana_buttons = document.querySelectorAll(".js-hiragana-btn");
for (var i = 0; i < hiragana_buttons.length; ++i)
{ hiragana_buttons[i].onclick = function() { kana_change(false); }; }
var katakana_buttons = document.querySelectorAll(".js-katakana-button");
var katakana_buttons = document.querySelectorAll(".js-katakana-btn");
for (var i = 0; i < katakana_buttons.length; ++i)
{ katakana_buttons[i].onclick = function() { kana_change(true); }; }
}
......
......@@ -110,12 +110,11 @@ function setup()
var kanji_box = section.appendChild(document.createElement("div"));
kanji_box.setAttribute("class", "kanji-box");
var kanji = kanji_box.appendChild(document.createElement("span"));
var kanji = kanji_box.appendChild(document.createElement("div"));
kanji.setAttribute("class", "big-kanji");
kanji.innerHTML = k;
kanji_box.appendChild(document.createElement("br"));
var english = kanji_box.appendChild(document.createElement("span"));
var english = kanji_box.appendChild(document.createElement("div"));
english.innerHTML = KANJI_DICTIONARY[k]['translation'].join(', ');
var readings = section.appendChild(document.createElement("table"));
......
This diff is collapsed.
......@@ -8,14 +8,12 @@
</head>
<body>
<div id="navbar" class="custom-navbar custom-header">
<a href="index.html" class="custom-brand">
あ naniJSore
</a>
<a href="index.html" class="custom-brand">あ naniJSore</a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="particles.html">Particles</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
......@@ -31,7 +29,7 @@
<!--content-->
</div>
<div class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<a href="readme.md">About</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
......
......@@ -8,14 +8,12 @@
</head>
<body>
<div id="navbar" class="custom-navbar custom-header">
<a href="index.html" class="custom-brand">
あ naniJSore
</a>
<a href="index.html" class="custom-brand">あ naniJSore</a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="particles.html">Particles</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
......@@ -30,7 +28,7 @@
<!--content-->
</div>
<div class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<a href="readme.md">About</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
<script src="js/util.js"></script>
<title>naniJSore</title>
</head>
<body>
<div id="navbar" class="custom-navbar custom-header">
<a href="index.html" class="custom-brand">あ naniJSore</a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="particles.html">Particles</a>
<a href="conjugate.html">Conjugations</a>
<span class="custom-expand"></span>
</div>
<div class="body-content">
<!--content-->
<p>
This page hasn't been written yet - Sorry!
</p>
<!--content-->
</div>
<div class="custom-navbar custom-footer">
<a href="readme.md">About</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="mailto:goDOTbusto@gmail.com">
Contact
</a>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment