From c66b02d19a5d78081166dfe32c94892281867d5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Proch=C3=A1zka?= <michal@prochazkaml.eu>
Date: Tue, 15 Apr 2025 19:07:06 +0200
Subject: [PATCH] Added language selector

---
 Makefile                  |  4 ++--
 components/cz/head.html   |  1 +
 components/cz/header.html |  1 +
 components/en/head.html   |  1 +
 components/en/header.html |  1 +
 icons/lang_cz.svg         | 10 ++++++++++
 icons/lang_en.svg         | 22 ++++++++++++++++++++++
 pages/cz/info.html        |  1 -
 pages/en/404.html         |  2 +-
 pages/en/index.html       |  2 +-
 pages/en/info.html        |  3 +--
 scripts/lang.js           | 13 ++++---------
 styles/icons.css          |  2 ++
 styles/styles.css         | 11 +++++++++++
 14 files changed, 58 insertions(+), 16 deletions(-)
 create mode 100644 icons/lang_cz.svg
 create mode 100644 icons/lang_en.svg

diff --git a/Makefile b/Makefile
index 46626b4..fa15a60 100644
--- a/Makefile
+++ b/Makefile
@@ -1,8 +1,8 @@
 PAGES := index.html 404.html info.html
 SHARED_FILES := stallman.webp stallman_2024.webp favicon.ico poster.webp \
-				moon.svg sun.svg narrow_light.svg narrow_dark.svg wide_light.svg wide_dark.svg \
+				moon.svg sun.svg narrow_light.svg narrow_dark.svg wide_light.svg wide_dark.svg lang_cz.svg lang_en.svg \
 				styles.css icons.css \
-				countdown.js theme.js
+				countdown.js theme.js lang.js
 SEARCH_REPLACE := lib/search_and_replace/target/release/search_and_replace
 COMPONENTS := head.html header.html nav.html footer.html
 
diff --git a/components/cz/head.html b/components/cz/head.html
index 630cac9..5b4cb7d 100644
--- a/components/cz/head.html
+++ b/components/cz/head.html
@@ -5,3 +5,4 @@
 <link href="../icons.css" rel="stylesheet">
 <link href="../styles.css" rel="stylesheet">
 <script src="../theme.js"></script>
+<script src="../lang.js"></script>
diff --git a/components/cz/header.html b/components/cz/header.html
index 78661a1..65e348a 100644
--- a/components/cz/header.html
+++ b/components/cz/header.html
@@ -6,5 +6,6 @@
 	<div class="buttons">
 		<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
 		<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
+		<img src="data:," alt="Přepínač jazyka" class="lang-switch" onclick="switch_lang();">
 	</div>
 </header>
diff --git a/components/en/head.html b/components/en/head.html
index 630cac9..5b4cb7d 100644
--- a/components/en/head.html
+++ b/components/en/head.html
@@ -5,3 +5,4 @@
 <link href="../icons.css" rel="stylesheet">
 <link href="../styles.css" rel="stylesheet">
 <script src="../theme.js"></script>
+<script src="../lang.js"></script>
diff --git a/components/en/header.html b/components/en/header.html
index 8976d55..3f1123b 100644
--- a/components/en/header.html
+++ b/components/en/header.html
@@ -6,5 +6,6 @@
 	<div class="buttons">
 		<img src="data:," alt="Lightmode/darkmode switch" class="light-dark-switch" onclick="switch_theme();">
 		<img src="data:," alt="Wide/short layout switch" class="layout-switch" onclick="switch_layout();">
+		<img src="data:," alt="Language selector" class="lang-switch" onclick="switch_lang();">
 	</div>
 </header>
diff --git a/icons/lang_cz.svg b/icons/lang_cz.svg
new file mode 100644
index 0000000..2855a51
--- /dev/null
+++ b/icons/lang_cz.svg
@@ -0,0 +1,10 @@
+<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+  <g id="color">
+    <rect x="5" y="17" width="62" height="38" fill="#fff"/>
+    <rect x="5" y="36" width="62" height="19" fill="#d22f27"/>
+    <path fill="#1e50a0" d="m36 36-31 18.6v-37.2z"/>
+  </g>
+  <g id="line">
+    <rect x="5" y="17" width="62" height="38" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/icons/lang_en.svg b/icons/lang_en.svg
new file mode 100644
index 0000000..3f650dd
--- /dev/null
+++ b/icons/lang_en.svg
@@ -0,0 +1,22 @@
+<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+  <g id="color">
+    <rect x="5" y="17" width="62" height="38" fill="#1e50a0"/>
+    <g>
+      <polygon fill="#fff" points="40 28.856 40 32 50.181 32 67 21.691 67 17 59.346 17 40 28.856"/>
+      <polygon fill="#d22f27" points="67 17 67 17 63.173 17 40 31.203 40 32 43.482 32 67 17.586 67 17"/>
+      <polygon fill="#fff" points="59.347 55 67 55 67 55 67 50.308 50.182 40 40 40 40 43.143 59.347 55"/>
+      <polygon fill="#d22f27" points="67 55 67 52.653 46.355 40 41.568 40 66.042 55 67 55 67 55"/>
+      <polygon fill="#fff" points="32 43.144 32 40 21.819 40 5 50.309 5 55 12.654 55 32 43.144"/>
+      <polygon fill="#d22f27" points="5 55 5 55 8.827 55 32 40.797 32 40 28.518 40 5 54.414 5 55"/>
+      <polygon fill="#fff" points="12.653 17 5 17 5 17 5 21.692 21.818 32 32 32 32 28.857 12.653 17"/>
+      <polygon fill="#d22f27" points="5 17 5 19.347 25.646 32 30.432 32 5.958 17 5 17 5 17"/>
+      <rect x="5" y="31" width="62" height="10" fill="#fff"/>
+      <rect x="31" y="17" width="10" height="38" fill="#fff"/>
+      <rect x="5" y="33" width="62" height="6" fill="#d22f27"/>
+      <rect x="33" y="17" width="6" height="38" fill="#d22f27"/>
+    </g>
+  </g>
+  <g id="line">
+    <rect x="5" y="17" width="62" height="38" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/pages/cz/info.html b/pages/cz/info.html
index 65f1965..44c3475 100644
--- a/pages/cz/info.html
+++ b/pages/cz/info.html
@@ -4,7 +4,6 @@
 		<!--#include virtual="components/head.html" -->
 		<title>Info - Svobodný software Liberec</title>
 		<meta name="description" content="Krátký životopis pana Stallmana.">
-		<script src="../lang.js"></script>
 	</head>
 	<body>
 		<!--#include virtual="components/header.html" -->
diff --git a/pages/en/404.html b/pages/en/404.html
index 65bdca2..a70f349 100644
--- a/pages/en/404.html
+++ b/pages/en/404.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="cs">
+<html lang="en">
 	<head>
 		<!--#include virtual="components/head.html" -->
 		<title>Page not found - Software Libre Liberec</title>
diff --git a/pages/en/index.html b/pages/en/index.html
index e19e66d..cd38a95 100644
--- a/pages/en/index.html
+++ b/pages/en/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="cs">
+<html lang="en">
 	<head>
 		<!--#include virtual="components/head.html" -->
 		<title>Software Libre Liberec</title>
diff --git a/pages/en/info.html b/pages/en/info.html
index e08ec01..8427023 100644
--- a/pages/en/info.html
+++ b/pages/en/info.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<html lang="cs">
+<html lang="en">
 	<head>
 		<!--#include virtual="components/head.html" -->
 		<title>About - Software Libre Liberec</title>
 		<meta name="description" content="Short bio of mister Stallman.">
-		<script src="lang.js"></script>
 	</head>
 	<body>
 		<!--#include virtual="components/header.html" -->
diff --git a/scripts/lang.js b/scripts/lang.js
index 9d616a2..5481156 100644
--- a/scripts/lang.js
+++ b/scripts/lang.js
@@ -1,15 +1,10 @@
 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
 
-function change_lang(base) {
-	let cz = document.querySelector(base + "_cz");
-	let en = document.querySelector(base + "_en");
-
-	if(cz.style.display == "none") {
-		cz.style.display = "";
-		en.style.display = "none";
+function switch_lang() {
+	if(document.documentElement.lang == "en") {
+		window.location.href = window.location.href.replace("/en", "/cz");
 	} else {
-		cz.style.display = "none";
-		en.style.display = "";
+		window.location.href = window.location.href.replace("/cz", "/en");
 	}
 }
 
diff --git a/styles/icons.css b/styles/icons.css
index eeb4065..c7e7e1b 100644
--- a/styles/icons.css
+++ b/styles/icons.css
@@ -5,4 +5,6 @@
 	--light-wide-layout-switch-icon: url("./narrow_dark.svg");
 	--dark-narrow-layout-switch-icon: url("./wide_light.svg");
 	--dark-wide-layout-switch-icon: url("./narrow_light.svg");
+	--cz-lang-switch-icon: url("./lang_cz.svg");
+	--en-lang-switch-icon: url("./lang_en.svg");
 }
diff --git a/styles/styles.css b/styles/styles.css
index a9b9e5b..1c1215d 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -99,6 +99,11 @@
 
 :root {
 	--layout-switch-icon: var(--narrow-layout-switch-icon);
+	--lang-switch-icon: var(--en-lang-switch-icon);
+}
+
+[lang="en"] {
+	--lang-switch-icon: var(--cz-lang-switch-icon);
 }
 
 [data-layout="wide"] {
@@ -154,6 +159,12 @@ header .buttons {
 	width: 20px;
 }
 
+.lang-switch {
+	cursor: pointer;
+	content: var(--lang-switch-icon);
+	width: 20px;
+}
+
 a {
 	color: var(--link-idle-color);
 }