feat: multi-language without full reload of page

AnnikaStein · Nov 14, 2023 · 8455d30 · 8455d30
1 parent 41b95dc
commit 8455d30
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 70 deletions.
diff --git a/index.html b/index.html
@@ -14,9 +14,9 @@
 
   <body>
     <!-- Content container -->
-    <div class="container">
+    <div class="container" id="main-de">
       <div class="icons w3-padding">
-        <a href="index_en.html" class="w3-button w3-round link flag">
+        <a onclick="toggleLang()" class="w3-button w3-round link flag">
           🇬🇧
         </a>
       </div>
@@ -61,8 +61,56 @@
 
     </div>
 
+    <div class="container hidden" id="main-en" style="display:none;">
+      <div class="icons w3-padding">
+        <a onclick="toggleLang()" class="w3-button w3-round link flag">
+          🇩🇪
+        </a>
+      </div>
+
+      <!-- Name container. -->
+      <div class="" style="text-align: center">
+        <p class="name"><span class="w3-padding w3-theme-l1 w3-round" style="font-weight: bolder; font-size: large;">Welcome!</span></p>
+        <p><span class="w3-padding w3-theme-d5 w3-round" style="font-weight: bolder;">Kölner Kubing 2023</span></p><br>
+      </div>
+
+      <!-- Links section. -->
+      <div class="links-container">
+
+        <a href="https://live.worldcubeassociation.org/competitions/3693" class="w3-button w3-round w3-theme-d3 w3-border link" target="_blank"><i class="fa-solid fa-ranking-star"></i> WCA Live</a>
+        <br>
+        <a href="https://www.competitiongroups.com/competitions/KoelnerKubing2023" class="w3-button w3-round w3-theme-d3 w3-border link" target="_blank"><i class="fa-solid fa-users"></i> Assignments</a>
+        <br>
+        <a href="https://www.worldcubeassociation.org/competitions/KoelnerKubing2023#competition-schedule" class="w3-button w3-round w3-theme-d3 w3-border link" target="_blank"><i class="fa-regular fa-clock"></i> Schedule</a>
+        <br>
+        <a href="https://www.worldcubeassociation.org/competitions/KoelnerKubing2023#general-info" class="w3-button w3-round w3-theme-d3 w3-border link" target="_blank"><i class="fa-solid fa-circle-info"></i> All info</a>
+        <br>
+        <a href="https://www.worldcubeassociation.org/edudoc/competitor-tutorial/tutorial.pdf" class="w3-button w3-round w3-theme-d3 w3-border link" target="_blank"><i class="fa-regular fa-lightbulb"></i> Competitor tutorial</a>
+        <br>
+        <a href="https://www.worldcubeassociation.org/edudoc/judge-tutorial/judge-tutorial.pdf" class="w3-button w3-round w3-theme-d3 w3-border link" target="_blank"><i class="fa-solid fa-scale-balanced"></i> Judging tutorial</a>
+        <br>
+        <a href="https://www.germancubeassociation.de/verein/" class="w3-button w3-round w3-theme-d3 w3-border link" target="_blank"><i class="fa-solid fa-crown"></i> Become GCA member</a><br>
+        <br>
+
+        <!-- Icons section. -->
+        <div class="icons w3-padding">
+          <a href="https://www.twitch.tv/germanonlinecubing2020/" target="_blank">
+            <i data-feather="twitch"></i>
+          </a>
+          <a href="https://www.instagram.com/germancubeassociation/" target="_blank">
+            <i data-feather="instagram"></i>
+          </a>
+          <a href="https://discord.gg/vUaxGnYGP2" target="_blank">
+            <i class="fa-brands fa-discord" style="color: #c7dfee;"></i>
+          </a>
+        </div>
+      </div>
+
+    </div>
+
     <script>
       feather.replace()
     </script>
+    <script src="js/script.js"></script>
   </body>
 </html>
diff --git a/index_en.html b/index_en.html
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,15 @@
+function toggleLang() {
+  var german = document.getElementById("main-de");
+  var english = document.getElementById("main-en");
+
+  var lang_divs = [german, english];
+
+  for (i=0; i < lang_divs.length; i++) {
+    if (lang_divs[i].classList.contains("hidden")) {
+      lang_divs[i].style.display = "block";
+    } else {
+      lang_divs[i].style.display = "none";
+    }
+    lang_divs[i].classList.toggle("hidden");
+  }
+}