1 files changed, 145 insertions, 0 deletions
diff --git a/views/index.html b/views/index.html
new file mode 100644
index 0000000..2b8c937
--- /dev/null
+++ b/views/index.html
@@ -0,0 +1,145 @@
+<!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: 40vh;
+            height: 30vh;
+        }
+
+        .menu-inner-body {
+            width: 85%;
+        }
+
+        .flex-adaptive {
+            flex-direction: row;
+        }
+
+        .language-icon {
+            max-width: calc(80% / {{ .AvailableLanguages | len }});
+            max-height: 80%;
+        }
+
+        @media (max-aspect-ratio: 0.8/1) {
+            .menu-outer-body {
+                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: 92.5%;
+            }
+
+            .flex-adaptive {
+                flex-direction: column;
+            }
+        }
+    </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-[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='/{{ .Name }}/blog';" 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>
+        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>