diff options
Diffstat (limited to 'views/index.html')
| -rw-r--r-- | views/index.html | 141 |
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> |