summaryrefslogtreecommitdiff
path: root/views/index.html
diff options
from:
to:
context:
space:
mode:
Diffstat (limited to 'views/index.html')
-rw-r--r--views/index.html141
1 files changed, 0 insertions, 141 deletions
diff --git a/views/index.html b/views/index.html
deleted file mode 100644
index cbb4c57..0000000
--- a/views/index.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Choose Language // SAYA TODAY</title>
- <link href="/output.css" rel="stylesheet">
- <style>
- .menu-outer-body {
- border-radius: 10%;
- width: 40dvh;
- height: 30dvh;
- }
-
- .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(40dvh, 100dvw);
- height: 40dvh;
- 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-andika text-main-hard text-2xl overflow-hidden bg-interlocked-hexagons h-[100dvh] 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-2 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70">
- <p class="font-andika mx-auto text-4xl mt-1 mb-2">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 }}';" 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-andika mx-auto text-2xl text-secondary mt-1 mb-2">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>