From 3a4c583a4486c89e35754389f92243b5817e382d Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Wed, 6 Aug 2025 21:44:06 +0700
Subject: feat: new index page layout (pick a language) feat: blog main pages
 are now looking at a picked language dir feat: "/blog" redirects to index
 page format: correct yaml layout of ansible playbook feat: enable no_log back
 again

---
 views/index.html             |  60 +++++++++---------
 views/layouts/blog-main.html | 147 +++++++++++++++++++++++++++++++++++++++++++
 views/layouts/blog-page.html |   8 +--
 3 files changed, 180 insertions(+), 35 deletions(-)
 create mode 100644 views/layouts/blog-main.html

(limited to 'views')

diff --git a/views/index.html b/views/index.html
index 731def6..1c57bd1 100644
--- a/views/index.html
+++ b/views/index.html
@@ -12,33 +12,45 @@
     <style>
         .menu-outer-body {
             border-radius: 10%;
-            width: 60vw;
-            height: 40vh;
+            width: 40vh;
+            height: 30vh;
         }
 
         .menu-inner-body {
             width: 85%;
         }
 
-        @media (max-aspect-ratio: 1.2/1) {
-            .menu-outer-body {
-                border-radius: 5%;
-            }
+        .flex-adaptive {
+            flex-direction: row;
+        }
 
-            .menu-inner-body {
-                width: 92.5%;
-            }
+        .language-icon {
+            max-width: calc(80% / {{ .AvailableLanguages | len }});
+            max-height: 80%;
         }
 
         @media (max-aspect-ratio: 0.8/1) {
             .menu-outer-body {
-                width: 100vw;
-                height: 80vh;
+                border-radius: 5%;
+            }
+
+            .menu-outer-body {
+                width: min(40vh, 100vw);
+                height: 40vh;
                 border-radius: 0;
             }
 
+            .language-icon {
+                max-width: 40%;
+                max-height: calc(80% / {{ .AvailableLanguages | len }});
+            }
+
             .menu-inner-body {
-                width: 100%;
+                width: 92.5%;
+            }
+
+            .flex-adaptive {
+                flex-direction: column;
             }
         }
     </style>
@@ -91,27 +103,13 @@
     </script>
 
     <div class="menu-outer-body p-4 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70">
-        <p class="font-patua mx-auto text-[2.5vmax] mt-[0.8vmin] mb-[1.6vmin]">saya.today</p>
-        <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-[1.6vmin] overflow-y-auto opacity-100">
-            {{- range .BlogPages }}
-            <div class="m-2 flex flex-row justify-center justify-items-center gap-4">
-                <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-[4vmax] h-[4vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
-                <div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium">
-                    <a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a>
-                    <a href="/blog/{{ .Link }}" class="block italic text-[1vmax] text-secondary">{{ .ActionDate }}</a>
-                    <p>{{ .ShortDescription }}</p>
-                </div>
-                <div class="flex-3 justify-self-center flex flex-col text-right">
-                    <p class="grow text-[1vmax]">
-                        Тэги: {{ .Tags }}
-                    </p>
-                    <p class="italic text-secondary text-[1vmax]">
-                        {{ .PublishedTime }}
-                    </p>
-                </div>
-            </div>
+        <p class="font-patua mx-auto text-[2.5vmax] mt-[0.8vmin] mb-[0.8vmin]">saya.today</p>
+        <div class="menu-inner-body grow bg-background-light flex flex-adaptive mx-auto opacity-100">
+            {{- range .AvailableLanguages }}
+            <img onclick="location.href='/blog/{{ .Name }}';" class="object-scale-down cursor-pointer flex-1 rounded-[20%] language-icon mx-auto my-auto relative" src="{{ .Flag }}" alt="{{ .Alt }}">
             {{- end }}
         </div>
+        <p class="font-spectral mx-auto text-[1.5vmax] text-secondary mt-[0.8vmin] mb-[0.8vmin]">Choose your language</p>
     </div>
 
     <script>
diff --git a/views/layouts/blog-main.html b/views/layouts/blog-main.html
new file mode 100644
index 0000000..1b8e149
--- /dev/null
+++ b/views/layouts/blog-main.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SAYA TODAY // Заглавная</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
+    <link href="/output.css" rel="stylesheet">
+    <style>
+        .menu-outer-body {
+            border-radius: 10%;
+            width: 60vw;
+            height: 40vh;
+        }
+
+        .menu-inner-body {
+            width: 85%;
+        }
+
+        @media (max-aspect-ratio: 1.2/1) {
+            .menu-outer-body {
+                border-radius: 5%;
+            }
+
+            .menu-inner-body {
+                width: 92.5%;
+            }
+        }
+
+        @media (max-aspect-ratio: 0.8/1) {
+            .menu-outer-body {
+                width: 100vw;
+                height: 80vh;
+                border-radius: 0;
+            }
+
+            .menu-inner-body {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+
+<body data-theme="night" class="font-spectral text-main-dark text-[1.5vmax] overflow-hidden bg-interlocked-hexagons h-screen flex flex-col">
+
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+    <div class="absolute star z-0">*</div>
+
+    <script>
+        function switchTheme(theme) {
+            if (theme == "" || typeof theme == "undefined") {
+                const currentTheme = document.body.getAttribute('data-theme');
+                switch (currentTheme) {
+                    case "olive": theme = "lettuce"; break;
+                    case "lettuce": theme = "night"; break;
+                    case "night": theme = "olive"; break;
+                }
+            }
+            // localStorage.setItem('theme', theme);
+            document.body.setAttribute('data-theme', theme);
+        }
+
+        const savedTheme = 'night';
+        switchTheme(savedTheme);
+    </script>
+
+    <div class="menu-outer-body p-4 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70">
+        <p class="font-patua mx-auto text-[2.5vmax] mt-[0.8vmin] mb-[1.6vmin]">saya.today</p>
+        <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-[1.6vmin] overflow-y-auto opacity-100">
+            {{- range .BlogPages }}
+            <div class="m-2 flex flex-row justify-center justify-items-center gap-4">
+                <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-[4vmax] h-[4vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
+                <div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium">
+                    <a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a>
+                    <a href="/blog/{{ .Link }}" class="block italic text-[1vmax] text-secondary">{{ .ActionDate }}</a>
+                    <p>{{ .ShortDescription }}</p>
+                </div>
+                <div class="flex-3 justify-self-center flex flex-col text-right">
+                    <p class="grow text-[1vmax]">
+                        {{ .Tags }}
+                    </p>
+                    <p class="italic text-secondary text-[1vmax]">
+                        {{ .PublishedTime }}
+                    </p>
+                </div>
+            </div>
+            {{- end }}
+        </div>
+    </div>
+
+    <script>
+        function generateStars() {
+            var clWidth = document.documentElement.clientWidth;
+            var clHeight = document.documentElement.clientHeight;
+
+            stars = document.getElementsByClassName("star");
+            for (let starIndex = 0; starIndex < stars.length; starIndex++) {
+                const star = stars[starIndex];
+                const x = Math.floor(Math.random() * clWidth);
+                const y = Math.floor(Math.random() * clHeight * 0.8);
+                const rot = Math.random() * 90;
+                const animDuration = (Math.random() * 10) + 3;
+                const sz = Math.floor(Math.random() * 8) + 12;
+                star.style.transform = `translateX(${x}px) translateY(${y}px) rotate(${rot}deg)`;
+                star.style.animationDuration = `${animDuration}s`;
+                star.style.fontSize = `${sz}px`;
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', generateStars);
+
+        let generateStarsTimer;
+        window.addEventListener("resize", () => {
+            clearTimeout(generateStarsTimer);
+            generateStarsTimer = setTimeout(() => {
+                generateStars();
+            }, 1000);
+        });
+    </script>
+</body>
+</html>
diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html
index 08a6f93..3552d00 100644
--- a/views/layouts/blog-page.html
+++ b/views/layouts/blog-page.html
@@ -49,7 +49,7 @@
             saya.today
         </div>
         <div class="flex flex-col gap-0 relative z-20">
-            <i onclick="location.href='/';" class="fas fa-home nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
+            <i onclick="location.href='../';" class="fas fa-home nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
             <i class="fas fa-search nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
             <i class="fas fa-images nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
             <i onclick="switchTheme('')" class="fas fa-swatchbook nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
@@ -61,7 +61,7 @@
 
         <div class="content-square flex flex-col bg-background-dark relative mt-[1.6vmin] mx-[1.6vmin]">
             <div class="flex flex-row mb-[0.4vmin]">
-                <i onclick="location.href='/';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
+                <i onclick="location.href='../';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
                 <p class="text-[2vmax] font-spectral italic font-extrabold select-none mt-auto pl-[0.8vmin] pr-[1.2vmin]">//</p>
                 <p class="text-[2vmax] font-spectral italic text-left mt-auto">{{ .Title }}</p>
                 <p class="grow text-[1.5vmax] font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
@@ -94,7 +94,7 @@
 
     <div class="mobile-topbar-custom fixed bg-squares-and-triangles bg-repeat flex-row items-center shadow-2xl w-[90vw] z-20 mobile">
         <div class="flex flex-row gap-0 relative z-20">
-            <i onclick="location.href='/';" class="fas fa-home nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
+            <i onclick="location.href='../';" class="fas fa-home nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
             <i class="fas fa-search nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
             <i class="fas fa-images nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
             <i onclick="switchTheme('')" class="fas fa-swatchbook nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
@@ -109,7 +109,7 @@
 
         <div class="content-square flex flex-col bg-background-dark relative mt-[1.6vmin] mx-[1.6vmin]">
             <div class="flex flex-row mb-[0.4vmin]">
-                <i onclick="location.href='/';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
+                <i onclick="location.href='../';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
                 <p class="text-[2vmax] font-spectral italic font-extrabold select-none mt-auto pl-[0.8vmin] pr-[1.2vmin]">//</p>
                 <p class="text-[2vmax] font-spectral italic text-left mt-auto">{{ .Title }}</p>
                 <p class="grow text-[1.5vmax] font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
-- 
cgit v1.3.1+13