Skip to content

Commit 586e824

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 34
1 parent ed6da9f commit 586e824

2 files changed

Lines changed: 359 additions & 0 deletions

File tree

‎public/34/index.html‎

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="/assets/icon.png" />
7+
<title>Day 34/100</title>
8+
</head>
9+
<body class="show-nixie-clock">
10+
<main>
11+
<div class="nixie-clock">
12+
<div class="nixie-clock-main-container">
13+
<div class="nixie-clock-main">
14+
<div
15+
class="nixie-clock-display nixie-1-1-on"
16+
id="nixie-clock-display-1"
17+
>
18+
<div class="nixie-clock-digit nixie-clock-digit-placeholder">
19+
0
20+
</div>
21+
22+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-0">0</div>
23+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-1">1</div>
24+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-2">2</div>
25+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-3">3</div>
26+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-4">4</div>
27+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-5">5</div>
28+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-6">6</div>
29+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-7">7</div>
30+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-8">8</div>
31+
<div class="nixie-clock-digit" id="nixie-clock-digit-1-9">9</div>
32+
</div>
33+
<div
34+
class="nixie-clock-display nixie-2-9-on"
35+
id="nixie-clock-display-2"
36+
>
37+
<div class="nixie-clock-digit nixie-clock-digit-placeholder">
38+
0
39+
</div>
40+
41+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-0">0</div>
42+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-1">1</div>
43+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-2">2</div>
44+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-3">3</div>
45+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-4">4</div>
46+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-5">5</div>
47+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-6">6</div>
48+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-7">7</div>
49+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-8">8</div>
50+
<div class="nixie-clock-digit" id="nixie-clock-digit-2-9">9</div>
51+
</div>
52+
<div
53+
class="nixie-clock-display nixie-3-0-on"
54+
id="nixie-clock-display-3"
55+
>
56+
<div class="nixie-clock-digit nixie-clock-digit-placeholder">
57+
0
58+
</div>
59+
60+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-0">0</div>
61+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-1">1</div>
62+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-2">2</div>
63+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-3">3</div>
64+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-4">4</div>
65+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-5">5</div>
66+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-6">6</div>
67+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-7">7</div>
68+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-8">8</div>
69+
<div class="nixie-clock-digit" id="nixie-clock-digit-3-9">9</div>
70+
</div>
71+
<div
72+
class="nixie-clock-display nixie-4-0-on"
73+
id="nixie-clock-display-4"
74+
>
75+
<div class="nixie-clock-digit nixie-clock-digit-placeholder">
76+
0
77+
</div>
78+
79+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-0">0</div>
80+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-1">1</div>
81+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-2">2</div>
82+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-3">3</div>
83+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-4">4</div>
84+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-5">5</div>
85+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-6">6</div>
86+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-7">7</div>
87+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-8">8</div>
88+
<div class="nixie-clock-digit" id="nixie-clock-digit-4-9">9</div>
89+
</div>
90+
<div
91+
class="nixie-clock-display nixie-5-0-on"
92+
id="nixie-clock-display-5"
93+
>
94+
<div class="nixie-clock-digit nixie-clock-digit-placeholder">
95+
0
96+
</div>
97+
98+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-0">0</div>
99+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-1">1</div>
100+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-2">2</div>
101+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-3">3</div>
102+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-4">4</div>
103+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-5">5</div>
104+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-6">6</div>
105+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-7">7</div>
106+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-8">8</div>
107+
<div class="nixie-clock-digit" id="nixie-clock-digit-5-9">9</div>
108+
</div>
109+
<div
110+
class="nixie-clock-display nixie-6-0-on"
111+
id="nixie-clock-display-6"
112+
>
113+
<div class="nixie-clock-digit nixie-clock-digit-placeholder">
114+
0
115+
</div>
116+
117+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-0">0</div>
118+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-1">1</div>
119+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-2">2</div>
120+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-3">3</div>
121+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-4">4</div>
122+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-5">5</div>
123+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-6">6</div>
124+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-7">7</div>
125+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-8">8</div>
126+
<div class="nixie-clock-digit" id="nixie-clock-digit-6-9">9</div>
127+
</div>
128+
</div>
129+
</div>
130+
</div>
131+
</main>
132+
133+
<style>
134+
@font-face {
135+
font-family: "NixieOne";
136+
src: url("/assets/NixieOne-Regular.woff2") format("woff2");
137+
font-weight: 400;
138+
}
139+
140+
:root {
141+
--nixie-orange: 255, 184, 110;
142+
--nixie-red: 222, 80, 35;
143+
}
144+
145+
/* Nixie Clock */
146+
.nixie-clock {
147+
position: fixed;
148+
top: 0%;
149+
left: 0%;
150+
width: 100vw;
151+
height: 100vh;
152+
display: flex;
153+
justify-content: center;
154+
align-items: center;
155+
pointer-events: none;
156+
}
157+
158+
.show-nixie-clock {
159+
background-color: #000;
160+
}
161+
162+
.show-nixie-clock .nixie-clock {
163+
pointer-events: auto;
164+
}
165+
166+
.nixie-clock-main-container {
167+
width: 100%;
168+
display: flex;
169+
justify-content: center;
170+
align-items: center;
171+
overflow: hidden;
172+
}
173+
174+
.nixie-clock-main {
175+
position: relative;
176+
width: 90vw;
177+
margin-bottom: min(max(1vw, 3px), 6px);
178+
display: flex;
179+
justify-content: center;
180+
align-items: center;
181+
gap: 4vw;
182+
}
183+
184+
.nixie-clock-main::after {
185+
content: "";
186+
position: absolute;
187+
top: calc(100% - min(max(0.5vw, 1.5px), 3px));
188+
left: 50%;
189+
transform: translate(-50%, 0%);
190+
height: min(max(0.5vw, 1.5px), 3px);
191+
width: 100vw;
192+
background-color: #000;
193+
border-top: min(max(0.5vw, 1.5px), 3px) solid rgba(60, 60, 60, 1);
194+
border-bottom: min(max(0.5vw, 1.5px), 3px) solid rgba(60, 60, 60, 1);
195+
opacity: 0;
196+
width: 0%;
197+
transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
198+
}
199+
200+
.show-nixie-clock .nixie-clock-main::after {
201+
width: 100vw;
202+
opacity: 1;
203+
}
204+
205+
.nixie-clock-display {
206+
position: relative;
207+
width: fit-content;
208+
aspect-ratio: 1/2;
209+
210+
border-radius: min(max(2.5vw, 8px), 15px) min(max(2.5vw, 8px), 15px) 0%
211+
0%;
212+
border: min(max(0.5vw, 1.5px), 3px) solid rgba(60, 60, 60, 1);
213+
opacity: 0;
214+
translate: 0% 100%;
215+
transition: opacity 0.5s ease-in-out, translate 0.5s ease-in-out;
216+
}
217+
218+
.show-nixie-clock .nixie-clock-display {
219+
opacity: 1;
220+
translate: 0% 0%;
221+
}
222+
223+
.nixie-clock-display::after {
224+
content: "";
225+
position: absolute;
226+
bottom: 0%;
227+
left: 50%;
228+
transform: translate(-50%, 0%);
229+
height: 50%;
230+
width: min(max(0.5vw, 1.5px), 3px);
231+
background-color: rgba(30, 30, 30, 1);
232+
}
233+
234+
.nixie-clock-digit {
235+
position: absolute;
236+
top: 50%;
237+
left: 50%;
238+
transform: translate(-50%, -50%);
239+
font-family: "NixieOne";
240+
font-size: min(max(16.67vw, 20px), 100px);
241+
font-weight: 400;
242+
text-align: center;
243+
color: rgba(30, 30, 30, 1);
244+
245+
transition: color 0.25s ease-in-out, text-shadow 0.25s ease-in-out;
246+
}
247+
248+
.nixie-clock-digit-placeholder {
249+
position: relative;
250+
visibility: hidden;
251+
}
252+
253+
.nixie-1-0-on #nixie-clock-digit-1-0,
254+
.nixie-1-1-on #nixie-clock-digit-1-1,
255+
.nixie-1-2-on #nixie-clock-digit-1-2,
256+
.nixie-1-3-on #nixie-clock-digit-1-3,
257+
.nixie-1-4-on #nixie-clock-digit-1-4,
258+
.nixie-1-5-on #nixie-clock-digit-1-5,
259+
.nixie-1-6-on #nixie-clock-digit-1-6,
260+
.nixie-1-7-on #nixie-clock-digit-1-7,
261+
.nixie-1-8-on #nixie-clock-digit-1-8,
262+
.nixie-1-9-on #nixie-clock-digit-1-9,
263+
.nixie-2-0-on #nixie-clock-digit-2-0,
264+
.nixie-2-1-on #nixie-clock-digit-2-1,
265+
.nixie-2-2-on #nixie-clock-digit-2-2,
266+
.nixie-2-3-on #nixie-clock-digit-2-3,
267+
.nixie-2-4-on #nixie-clock-digit-2-4,
268+
.nixie-2-5-on #nixie-clock-digit-2-5,
269+
.nixie-2-6-on #nixie-clock-digit-2-6,
270+
.nixie-2-7-on #nixie-clock-digit-2-7,
271+
.nixie-2-8-on #nixie-clock-digit-2-8,
272+
.nixie-2-9-on #nixie-clock-digit-2-9,
273+
.nixie-3-0-on #nixie-clock-digit-3-0,
274+
.nixie-3-1-on #nixie-clock-digit-3-1,
275+
.nixie-3-2-on #nixie-clock-digit-3-2,
276+
.nixie-3-3-on #nixie-clock-digit-3-3,
277+
.nixie-3-4-on #nixie-clock-digit-3-4,
278+
.nixie-3-5-on #nixie-clock-digit-3-5,
279+
.nixie-3-6-on #nixie-clock-digit-3-6,
280+
.nixie-3-7-on #nixie-clock-digit-3-7,
281+
.nixie-3-8-on #nixie-clock-digit-3-8,
282+
.nixie-3-9-on #nixie-clock-digit-3-9,
283+
.nixie-4-0-on #nixie-clock-digit-4-0,
284+
.nixie-4-1-on #nixie-clock-digit-4-1,
285+
.nixie-4-2-on #nixie-clock-digit-4-2,
286+
.nixie-4-3-on #nixie-clock-digit-4-3,
287+
.nixie-4-4-on #nixie-clock-digit-4-4,
288+
.nixie-4-5-on #nixie-clock-digit-4-5,
289+
.nixie-4-6-on #nixie-clock-digit-4-6,
290+
.nixie-4-7-on #nixie-clock-digit-4-7,
291+
.nixie-4-8-on #nixie-clock-digit-4-8,
292+
.nixie-4-9-on #nixie-clock-digit-4-9,
293+
.nixie-5-0-on #nixie-clock-digit-5-0,
294+
.nixie-5-1-on #nixie-clock-digit-5-1,
295+
.nixie-5-2-on #nixie-clock-digit-5-2,
296+
.nixie-5-3-on #nixie-clock-digit-5-3,
297+
.nixie-5-4-on #nixie-clock-digit-5-4,
298+
.nixie-5-5-on #nixie-clock-digit-5-5,
299+
.nixie-5-6-on #nixie-clock-digit-5-6,
300+
.nixie-5-7-on #nixie-clock-digit-5-7,
301+
.nixie-5-8-on #nixie-clock-digit-5-8,
302+
.nixie-5-9-on #nixie-clock-digit-5-9,
303+
.nixie-6-0-on #nixie-clock-digit-6-0,
304+
.nixie-6-1-on #nixie-clock-digit-6-1,
305+
.nixie-6-2-on #nixie-clock-digit-6-2,
306+
.nixie-6-3-on #nixie-clock-digit-6-3,
307+
.nixie-6-4-on #nixie-clock-digit-6-4,
308+
.nixie-6-5-on #nixie-clock-digit-6-5,
309+
.nixie-6-6-on #nixie-clock-digit-6-6,
310+
.nixie-6-7-on #nixie-clock-digit-6-7,
311+
.nixie-6-8-on #nixie-clock-digit-6-8,
312+
.nixie-6-9-on #nixie-clock-digit-6-9 {
313+
color: rgba(var(--nixie-orange), 1);
314+
text-shadow: 0 0 10px rgba(var(--nixie-red), 1),
315+
0 0 20px rgba(var(--nixie-red), 1), 0 0 30px rgba(var(--nixie-red), 1);
316+
z-index: 10;
317+
}
318+
</style>
319+
320+
<script>
321+
function updateClock() {
322+
const now = new Date();
323+
let milliseconds = now.getMilliseconds();
324+
let seconds = now.getSeconds();
325+
let minutes = now.getMinutes();
326+
let hours = now.getHours();
327+
328+
let timeString =
329+
hours.toString().padStart(2, "0") +
330+
minutes.toString().padStart(2, "0") +
331+
seconds.toString().padStart(2, "0");
332+
let display1 = document.getElementById("nixie-clock-display-1");
333+
let display2 = document.getElementById("nixie-clock-display-2");
334+
let display3 = document.getElementById("nixie-clock-display-3");
335+
let display4 = document.getElementById("nixie-clock-display-4");
336+
let display5 = document.getElementById("nixie-clock-display-5");
337+
let display6 = document.getElementById("nixie-clock-display-6");
338+
339+
display1.classList =
340+
"nixie-clock-display nixie-1-" + timeString[0] + "-on";
341+
display2.classList =
342+
"nixie-clock-display nixie-2-" + timeString[1] + "-on";
343+
display3.classList =
344+
"nixie-clock-display nixie-3-" + timeString[2] + "-on";
345+
display4.classList =
346+
"nixie-clock-display nixie-4-" + timeString[3] + "-on";
347+
display5.classList =
348+
"nixie-clock-display nixie-5-" + timeString[4] + "-on";
349+
display6.classList =
350+
"nixie-clock-display nixie-6-" + timeString[5] + "-on";
351+
352+
const millisecondsToNextSecond = 1000 - now.getMilliseconds();
353+
setTimeout(updateClock, millisecondsToNextSecond);
354+
}
355+
356+
updateClock();
357+
</script>
358+
</body>
359+
</html>

‎public/assets/NixieOne-Regular.woff2‎

16 KB
Binary file not shown.

0 commit comments

Comments
 (0)