Skip to content

Commit ed6da9f

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 33
1 parent 905569c commit ed6da9f

1 file changed

Lines changed: 196 additions & 0 deletions

File tree

‎public/33/index.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
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 33/100</title>
8+
</head>
9+
<body class="show-quantum-clock">
10+
<div class="quantum-clock">
11+
<div class="quantum-clock-main" id="quantum-clock-main">
12+
<div
13+
class="quantum-clock-digit"
14+
id="quantum-clock-digit-1"
15+
data-value="0"
16+
>
17+
0
18+
</div>
19+
<div
20+
class="quantum-clock-digit"
21+
id="quantum-clock-digit-2"
22+
data-value="0"
23+
>
24+
0
25+
</div>
26+
<div
27+
class="quantum-clock-digit"
28+
id="quantum-clock-digit-3"
29+
data-value="0"
30+
>
31+
0
32+
</div>
33+
<div
34+
class="quantum-clock-digit"
35+
id="quantum-clock-digit-4"
36+
data-value="0"
37+
>
38+
0
39+
</div>
40+
<div
41+
class="quantum-clock-digit"
42+
id="quantum-clock-digit-5"
43+
data-value="0"
44+
>
45+
0
46+
</div>
47+
<div
48+
class="quantum-clock-digit"
49+
id="quantum-clock-digit-6"
50+
data-value="0"
51+
>
52+
0
53+
</div>
54+
</div>
55+
</div>
56+
</body>
57+
58+
<style>
59+
@font-face {
60+
font-family: "SpaceMono";
61+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
62+
font-weight: 700;
63+
}
64+
65+
/* Quantum Clock */
66+
.quantum-clock {
67+
position: fixed;
68+
top: 0%;
69+
left: 0%;
70+
width: 100vw;
71+
height: 100vh;
72+
display: flex;
73+
justify-content: center;
74+
align-items: center;
75+
pointer-events: none;
76+
}
77+
78+
.show-quantum-clock {
79+
background-color: #000;
80+
}
81+
82+
.show-quantum-clock .quantum-clock {
83+
pointer-events: auto;
84+
}
85+
86+
.quantum-clock-main {
87+
display: flex;
88+
cursor: pointer;
89+
justify-content: center;
90+
align-items: center;
91+
gap: min(max(2vw, 4px), 9px);
92+
}
93+
94+
.quantum-clock-digit {
95+
font-family: "SpaceMono";
96+
font-size: min(max(20vw, 40px), 90px);
97+
font-weight: 700;
98+
color: #fff;
99+
text-align: center;
100+
line-height: 0.8;
101+
102+
transform: scale(0);
103+
opacity: 0;
104+
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
105+
}
106+
107+
.show-quantum-clock .quantum-clock-digit {
108+
transform: scale(1);
109+
opacity: 1;
110+
}
111+
</style>
112+
113+
<script>
114+
function updateClock() {
115+
const now = new Date();
116+
let milliseconds = now.getMilliseconds();
117+
let seconds = now.getSeconds();
118+
let minutes = now.getMinutes();
119+
let hours = now.getHours();
120+
121+
let timeString =
122+
hours.toString().padStart(2, "0") +
123+
minutes.toString().padStart(2, "0") +
124+
seconds.toString().padStart(2, "0");
125+
let display1 = document.getElementById("quantum-clock-digit-1");
126+
let display2 = document.getElementById("quantum-clock-digit-2");
127+
let display3 = document.getElementById("quantum-clock-digit-3");
128+
let display4 = document.getElementById("quantum-clock-digit-4");
129+
let display5 = document.getElementById("quantum-clock-digit-5");
130+
let display6 = document.getElementById("quantum-clock-digit-6");
131+
132+
display1.setAttribute("data-value", timeString[0]);
133+
display2.setAttribute("data-value", timeString[1]);
134+
display3.setAttribute("data-value", timeString[2]);
135+
display4.setAttribute("data-value", timeString[3]);
136+
display5.setAttribute("data-value", timeString[4]);
137+
display6.setAttribute("data-value", timeString[5]);
138+
139+
const millisecondsToNextSecond = 1000 - now.getMilliseconds();
140+
setTimeout(updateClock, millisecondsToNextSecond);
141+
}
142+
143+
updateClock();
144+
145+
// Quantum Clock
146+
const quantumClockMain = document.getElementById("quantum-clock-main");
147+
148+
const quantumDigit1 = document.getElementById("quantum-clock-digit-1");
149+
const quantumDigit2 = document.getElementById("quantum-clock-digit-2");
150+
const quantumDigit3 = document.getElementById("quantum-clock-digit-3");
151+
const quantumDigit4 = document.getElementById("quantum-clock-digit-4");
152+
const quantumDigit5 = document.getElementById("quantum-clock-digit-5");
153+
const quantumDigit6 = document.getElementById("quantum-clock-digit-6");
154+
155+
let interval;
156+
157+
function getRandomDigit() {
158+
let digit = Math.floor(Math.random() * 11);
159+
if (digit == 10) {
160+
digit = "?";
161+
}
162+
return digit;
163+
}
164+
165+
function startFlicker() {
166+
interval = setInterval(() => {
167+
quantumDigit1.textContent = getRandomDigit();
168+
quantumDigit2.textContent = getRandomDigit();
169+
quantumDigit3.textContent = getRandomDigit();
170+
quantumDigit4.textContent = getRandomDigit();
171+
quantumDigit5.textContent = getRandomDigit();
172+
quantumDigit6.textContent = getRandomDigit();
173+
}, 50);
174+
}
175+
176+
function stopFlicker() {
177+
clearInterval(interval);
178+
quantumDigit1.textContent = quantumDigit1.getAttribute("data-value");
179+
quantumDigit2.textContent = quantumDigit2.getAttribute("data-value");
180+
quantumDigit3.textContent = quantumDigit3.getAttribute("data-value");
181+
quantumDigit4.textContent = quantumDigit4.getAttribute("data-value");
182+
quantumDigit5.textContent = quantumDigit5.getAttribute("data-value");
183+
quantumDigit6.textContent = quantumDigit6.getAttribute("data-value");
184+
}
185+
186+
quantumClockMain.onmouseenter = () => {
187+
stopFlicker();
188+
};
189+
190+
quantumClockMain.onmouseleave = () => {
191+
startFlicker();
192+
};
193+
194+
startFlicker();
195+
</script>
196+
</html>

0 commit comments

Comments
 (0)