From e9379d1e23c507d35d24aa6a17efd04c1923c5f4 Mon Sep 17 00:00:00 2001
From: hexlocation pc <hex@clatter.cc>
Date: Sat, 13 Jul 2024 10:44:23 +0200
Subject: [PATCH] feat(index): add appriopriate 'section buttons' for each
 about-section.

---
 templates/index.html.tera | 54 +++++++++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/templates/index.html.tera b/templates/index.html.tera
index 17abbce..d3b773d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -9,18 +9,30 @@
       <a id="anim-4" href="https://blog.iwakura.rip">&nbsp;[ blog ]&nbsp;</a>
     </div>
     <div class="link-container" id="main-container">
-      <a onclick="showAbout()">&nbsp;[ about ]&nbsp;</a>
+      <a onclick="showContainer(aboutContainer)">&nbsp;[ about ]&nbsp;</a>
       <a onclick="showContainer(serviceContainer)">&nbsp;[ services ]&nbsp;</a>
+      <a href="/guestbook">&nbsp;[ guestbook ]&nbsp;</a>
+    </div>
+    <div class="link-container" id="about-container">
+      <a onclick="showSect(aboutSect)">&nbsp;[ i ]&nbsp;</a>
+      <a onclick="showSect(explaSect)">&nbsp;[ ? ]&nbsp;</a>
+      <a onclick="showSect(disclSect)">&nbsp;[ ! ]&nbsp;</a>
     </div>
   </div>
   <br>
   <div id="about-box" class="fadeIn">
-    <bu>About</bu>
-    <p>iwakura.rip is a collection of servers hosting mostly-private services for hexlocation & friends.</p>
-    <bu>Explanation</bu>
-    <p>Most of the gifs/art/names/ui design is inspired by/based on <a href="https://en.wikipedia.org/wiki/Serial_Experiments_Lain"><b>Serial Experiments Lain</b></a>, an anime series about Lain <u>Iwakura</u></p>
-    <bu>Disclaimer</bu>
-    <p>Serial Experiments Lain is the property of Triangle Studios. iwakura.rip is not affiliated with Triangle Studios.</p>
+    <div id="about-sect">
+      <bu>About</bu>
+      <p>iwakura.rip is a collection of servers hosting mostly-private services for hexlocation & friends.</p>
+    </div>
+    <div id="expla-sect">
+      <bu>Explanation</bu>
+      <p>Most of the gifs/art/names/ui design is inspired by/based on <a href="https://en.wikipedia.org/wiki/Serial_Experiments_Lain"><b>Serial Experiments Lain</b></a>, an anime series about Lain <u>Iwakura</u></p>
+    </div>
+    <div id="discl-sect">
+      <bu>Disclaimer</bu>
+      <p>Serial Experiments Lain is the property of Triangle Studios. iwakura.rip is not affiliated with Triangle Studios.</p>
+    </div>
   </div>
 </div>
 <style>
@@ -41,7 +53,7 @@ bu {
   font-weight: bold;
   text-decoration: underline;
 }
-#about-box{
+#expla-sect, #discl-sect, #about-sect {
   opacity:0;
   display:none;
 }
@@ -99,13 +111,20 @@ a {
 </style>
 <script>
   let getId = (i) => document.getElementById(i);
+
   let serviceContainer = getId('service-container');
   let mainContainer = getId('main-container');
-  let aboutContainer = getId('about-box');
+  let aboutContainer = getId('about-container');
+
+  let aboutSect = getId('about-sect');
+  let disclSect = getId('discl-sect');
+  let explaSect = getId('expla-sect');
+
+  let sections = [aboutSect, disclSect, explaSect];
 
   mainContainer.classList.add("fadeIn");
 
-  let containers = [serviceContainer, mainContainer];
+  let containers = [serviceContainer, mainContainer, aboutContainer];
   function showContainer(container){
     for (let _container of containers) {
       //_container.style.display = "none";
@@ -116,8 +135,23 @@ a {
     container.classList.add("fadeIn");
     container.style.display = "flex";
   }
+
+  let showSect = (s) => {
+    for (let _s of sections) {
+      console.log(_s)
+      if (_s == s) continue;
+      _s.style.display = "none";
+    }
+    s.style.display = "block";
+    s.classList.add("fadeIn");
+  }
+
   let showAbout = () => document.getElementById('about-box').style.display = "block";
   document.getElementById("main-img").onclick = () => {
     showContainer(mainContainer)
+    for (let _s of sections) {
+      _s.style.display="none";
+      _s.classList.remove("fadeIn");
+    }
   }
 </script>