1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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: 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-spectral text-main-dark 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-patua 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-spectral 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>
|
