Prototype some styling

1 files changed, 75 insertions, 7 deletions

diff --git a/src/templates/language.html.tmpl b/src/templates/language.html.tmpl
index 13a8e85..78703fc 100644
--- a/src/templates/language.html.tmpl
+++ b/src/templates/language.html.tmpl
@@ -1,16 +1,84 @@
+{{ define "header" }}
+<style>
+	*:has(> .lang-fade-in-out) {
+		line-height: 1.1;
+	}
+
+	.lang-fade-in-out {
+		opacity: 0.5;
+		transition: opacity 1s;
+
+		&.hide {
+			opacity: 0;
+		}
+	}
+</style>
+
+<script>
+	(() => {
+		let i = 0;
+		let nodes;
+		const Δt = 5000; /* Total time a text is shown */
+		const Δf = 1000; /* Fade duration */
+		const texts = [
+			// ["en", "Select Your Language",    "Eurozone Languages",  "Other Languages"],
+			["nl", "Kies uw taal",            "Eurozone talen",      "Andere talen"],
+			["sv", "Välj ditt språk",         "Eurozonens språk",    "Andra språk"],
+			["fi", "Valitse kieli",           "Euroalueen kielet",   "Muut kielet"],
+			["de", "Wählen Sie Ihre Sprache", "Eurozone Sprachen",   "Weitere Sprachen"],
+			["el", "Επιλέξτε τη γλώσσα σας",  "Γλώσσες Ευρωζώνης",   "Άλλες γλώσσες"],
+			["bg", "Изберете език",           "Езици на еврозоната", "Други езици"],
+		];
+
+		const updateTexts = () => {
+			nodes.forEach((n, j) => {
+				const [lang, ...strs] = texts[i];
+				n.lang = lang;
+				n.textContent = strs[j];
+				n.classList.remove("hide");
+			});
+		};
+
+		const change = () => {
+			nodes.forEach(n => n.classList.add("hide"));
+			setTimeout(() => {
+				i = (i + 1) % texts.length;
+				updateTexts();
+			}, Δf);
+		};
+
+		document.addEventListener("DOMContentLoaded", _ => {
+			nodes = $$('.lang-fade-in-out');
+			updateTexts();
+			/* When you first do a page load there is no fade-in for the initial
+			   text, so we want to trigger a fade-out Δf milliseconds earlier */
+			setTimeout(() => {
+				change();
+				setInterval(change, Δt);
+			}, Δt - Δf);
+		});
+	})();
+</script>
+{{ end }}
+
 {{ define "content" }}
 <header>
 	{{ template "navbar" . }}
-	<h1>{{ .Get "Select Your Language" }}</h1>
+	<h1>
+		{{ .Get "Select Your Language" }}
+		<br><span class="lang-fade-in-out"></span>
+	</h1>
 </header>
 <main>
-	<p>
-		{{ .Get "Select your preferred language to use on the site." }}
-	</p>
-	<hr />
-	<h2>{{ .Get "Eurozone Languages" }}</h2>
+	<h2>
+		{{ .Get "Eurozone Languages" }}
+		<br><span class="lang-fade-in-out"></span>
+	</h2>
 	{{ template "langgrid" true }}
-	<h2>{{ .Get "Other Languages" }}</h2>
+	<h2>
+		{{ .Get "Other Languages" }}
+		<br><span class="lang-fade-in-out"></span>
+	</h2>
 	{{ template "langgrid" false }}
 </main>
 {{ end }}