3 files changed, 84 insertions, 0 deletions
diff --git a/card/card.css b/card/card.css
new file mode 100644
index 0000000..2e41631
--- /dev/null
+++ b/card/card.css
@@ -0,0 +1,25 @@
+.card {
+	text-align: center;
+}
+
+.card span {
+	display: block;
+}
+
+hr {
+	height: 10px;
+	border: none;
+}
+
+.card.front .target-word-reading,
+.card.front .target-word-translation,
+.card.front .sentence-translation,
+.card.front hr,
+.card.front ruby rt {
+	display: none;
+}
+
+.sentence-translation {
+	margin-top: 1em;
+}
+
diff --git a/card/card.html b/card/card.html
new file mode 100644
index 0000000..f0bdb77
--- /dev/null
+++ b/card/card.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset='utf-8'>
+	<title>card template test</title>
+	<link rel='stylesheet' type='text/css' media='screen' href='./card.css'>
+	<script defer src='./card.js'></script>
+</head>
+<body>
+
+<div class="card back">
+<span class="sentence">[俺](おれ)の[目](め)の[前](まえ)に[全](ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\*escape\* (test)</span>
+<hr class="split">
+<span class="target-word-reading">立つ【た・つ】</span>
+<span class="target-word-translation">To stand</span>
+<span class="sentence-translation">Before my eyes stood Alice, butt-naked.</span>
+</div>
+
+<button onclick="document.getElementsByClassName('card')[0].classList.toggle('back'); document.getElementsByClassName('card')[0].classList.toggle('front')">toggle view</button>
+
+</span>
+</html>
diff --git a/card/card.js b/card/card.js
new file mode 100644
index 0000000..ad744b7
--- /dev/null
+++ b/card/card.js
@@ -0,0 +1,37 @@
+function parseSentence(input) {
+	var bold = false; // currently bold
+	var mode = "normal"; // normal, kanji, reading
+	var out = ""; // output html
+
+	var kanji = ""; // current kanji
+	var reading = ""; // current kanji reading
+
+	for (var i = 0; i < input.length; i++) {
+		// escape all characters preceded by \
+		if (input[i] == "\\") { out += input[i+1]; i++; continue; }
+		// parse *test* into <b>test</b>
+		if (input[i] == "*") { bold = !bold; out += `<${bold ? "" : "/"}b>`; continue; }
+
+		// parse [kanji](reading) into ruby text
+		if (mode == "normal" && input[i] == "[") { kanji = ""; mode = "kanji"; continue; }
+		if (mode == "kanji" && input[i] == "]") { mode = "normal"; continue; }
+		if (mode == "normal" && kanji.length > 0 && input[i-1] == "]" && input[i] == "(") { reading = ""; mode = "reading"; continue; }
+		if (mode == "reading" && input[i] == ")") { mode = "normal"; out += `<ruby>${kanji}<rt>${reading}</rt></ruby>`; continue; }
+
+		// add current character to selected mode buffer
+		if (mode == "normal") out += input[i];
+		if (mode == "kanji") kanji += input[i];
+		if (mode == "reading") reading += input[i];
+	}
+
+	return out;
+}
+
+function run() {
+	var sentences = document.getElementsByClassName("sentence");
+
+	for (var sentence of sentences)
+		sentence.innerHTML = parseSentence(sentence.innerText);
+}
+
+run();