Skip to content

Commit 8ae4383

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 21
1 parent f6deaf0 commit 8ae4383

2 files changed

Lines changed: 334 additions & 0 deletions

File tree

‎public/21/index.html‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
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 21/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="clock">
12+
<div class="digit" id="digit-1-1">
13+
<div class="circle"></div>
14+
<div class="square"></div>
15+
</div>
16+
<div class="digit" id="digit-1-2">
17+
<div class="circle"></div>
18+
<div class="square"></div>
19+
</div>
20+
<div class="digit" id="digit-1-3">
21+
<div class="circle"></div>
22+
<div class="square"></div>
23+
</div>
24+
<div class="digit" id="digit-1-4">
25+
<div class="circle"></div>
26+
<div class="square"></div>
27+
</div>
28+
<div class="digit" id="digit-1-5">
29+
<div class="circle"></div>
30+
<div class="square"></div>
31+
</div>
32+
<div class="digit" id="digit-1-6">
33+
<div class="circle"></div>
34+
<div class="square"></div>
35+
</div>
36+
37+
<div class="digit" id="digit-2-1">
38+
<div class="circle"></div>
39+
<div class="square"></div>
40+
</div>
41+
<div class="digit" id="digit-2-2">
42+
<div class="circle"></div>
43+
<div class="square"></div>
44+
</div>
45+
<div class="digit" id="digit-2-3">
46+
<div class="circle"></div>
47+
<div class="square"></div>
48+
</div>
49+
<div class="digit" id="digit-2-4">
50+
<div class="circle"></div>
51+
<div class="square"></div>
52+
</div>
53+
<div class="digit" id="digit-2-5">
54+
<div class="circle"></div>
55+
<div class="square"></div>
56+
</div>
57+
<div class="digit" id="digit-2-6">
58+
<div class="circle"></div>
59+
<div class="square"></div>
60+
</div>
61+
62+
<div class="digit" id="digit-3-1">
63+
<div class="circle"></div>
64+
<div class="square"></div>
65+
</div>
66+
<div class="digit" id="digit-3-2">
67+
<div class="circle"></div>
68+
<div class="square"></div>
69+
</div>
70+
<div class="digit" id="digit-3-3">
71+
<div class="circle"></div>
72+
<div class="square"></div>
73+
</div>
74+
<div class="digit" id="digit-3-4">
75+
<div class="circle"></div>
76+
<div class="square"></div>
77+
</div>
78+
<div class="digit" id="digit-3-5">
79+
<div class="circle"></div>
80+
<div class="square"></div>
81+
</div>
82+
<div class="digit" id="digit-3-6">
83+
<div class="circle"></div>
84+
<div class="square"></div>
85+
</div>
86+
87+
<div class="digit" id="digit-4-1">
88+
<div class="circle"></div>
89+
<div class="square"></div>
90+
</div>
91+
<div class="digit" id="digit-4-2">
92+
<div class="circle"></div>
93+
<div class="square"></div>
94+
</div>
95+
<div class="digit" id="digit-4-3">
96+
<div class="circle"></div>
97+
<div class="square"></div>
98+
</div>
99+
<div class="digit" id="digit-4-4">
100+
<div class="circle"></div>
101+
<div class="square"></div>
102+
</div>
103+
<div class="digit" id="digit-4-5">
104+
<div class="circle"></div>
105+
<div class="square"></div>
106+
</div>
107+
<div class="digit" id="digit-4-6">
108+
<div class="circle"></div>
109+
<div class="square"></div>
110+
</div>
111+
112+
<div class="digit" id="digit-5-1">
113+
<div class="circle"></div>
114+
<div class="square"></div>
115+
</div>
116+
<div class="digit" id="digit-5-2">
117+
<div class="circle"></div>
118+
<div class="square"></div>
119+
</div>
120+
<div class="digit" id="digit-5-3">
121+
<div class="circle"></div>
122+
<div class="square"></div>
123+
</div>
124+
<div class="digit" id="digit-5-4">
125+
<div class="circle"></div>
126+
<div class="square"></div>
127+
</div>
128+
<div class="digit" id="digit-5-5">
129+
<div class="circle"></div>
130+
<div class="square"></div>
131+
</div>
132+
<div class="digit" id="digit-5-6">
133+
<div class="circle"></div>
134+
<div class="square"></div>
135+
</div>
136+
</div>
137+
</main>
138+
139+
<style>
140+
body {
141+
margin: 0;
142+
overflow: hidden;
143+
display: flex;
144+
justify-content: center;
145+
align-items: center;
146+
width: 100vw;
147+
height: 100vh;
148+
background-color: #000;
149+
}
150+
151+
main {
152+
width: 100vw;
153+
height: 100vh;
154+
display: flex;
155+
justify-content: center;
156+
align-items: center;
157+
158+
transition: background-color 0.5s ease-in-out;
159+
}
160+
161+
.clock {
162+
display: grid;
163+
grid-template-columns: repeat(6, 1fr);
164+
grid-template-rows: repeat(5, 1fr);
165+
gap: min(1vw, 1vh);
166+
}
167+
168+
.digit {
169+
position: relative;
170+
width: min(12vw, 12vh);
171+
aspect-ratio: 1 / 1;
172+
transform-style: preserve-3d;
173+
transition: transform 0.5s ease-in-out;
174+
}
175+
176+
.circle,
177+
.square {
178+
position: absolute;
179+
width: 100%;
180+
height: 100%;
181+
left: 0;
182+
top: 0;
183+
background-color: #fff;
184+
-webkit-backface-visibility: hidden;
185+
backface-visibility: hidden;
186+
}
187+
188+
.circle {
189+
border-radius: 100%;
190+
transform: rotateX(180deg);
191+
}
192+
193+
.dash {
194+
transform: rotateX(0deg);
195+
}
196+
197+
.dot {
198+
transform: rotateX(180deg);
199+
}
200+
</style>
201+
202+
<!-- <script src="/lib/matter.min.js"></script> -->
203+
<script>
204+
window.onload = () => {
205+
function digitToMorse(digit) {
206+
if (digit === "0") {
207+
return "-----";
208+
} else if (digit === "1") {
209+
return ".----";
210+
} else if (digit === "2") {
211+
return "..---";
212+
} else if (digit === "3") {
213+
return "...--";
214+
} else if (digit === "4") {
215+
return "....-";
216+
} else if (digit === "5") {
217+
return ".....";
218+
} else if (digit === "6") {
219+
return "-....";
220+
} else if (digit === "7") {
221+
return "--...";
222+
} else if (digit === "8") {
223+
return "---..";
224+
} else if (digit === "9") {
225+
return "----.";
226+
}
227+
}
228+
229+
function updateClock() {
230+
const now = new Date();
231+
let milliseconds = now.getMilliseconds();
232+
let seconds = now.getSeconds();
233+
let minutes = now.getMinutes();
234+
let hours = now.getHours();
235+
236+
if (hours > 12) {
237+
hours -= 12;
238+
}
239+
240+
let hoursString = String(hours);
241+
let minutesString = String(minutes);
242+
let secondsString = String(seconds);
243+
244+
let digit1 = hoursString.length > 1 ? hoursString[0] : "0";
245+
let digit2 = hoursString.length > 1 ? hoursString[1] : hoursString[0];
246+
let digit3 = minutesString.length > 1 ? minutesString[0] : "0";
247+
let digit4 =
248+
minutesString.length > 1 ? minutesString[1] : minutesString[0];
249+
let digit5 = secondsString.length > 1 ? secondsString[0] : "0";
250+
let digit6 =
251+
secondsString.length > 1 ? secondsString[1] : secondsString[0];
252+
253+
let morse1 = digitToMorse(digit1);
254+
let morse2 = digitToMorse(digit2);
255+
let morse3 = digitToMorse(digit3);
256+
let morse4 = digitToMorse(digit4);
257+
let morse5 = digitToMorse(digit5);
258+
let morse6 = digitToMorse(digit6);
259+
260+
for (let i = 0; i < morse1.length; i++) {
261+
if (morse1[i] === ".") {
262+
document.getElementById(`digit-${i + 1}-1`).classList =
263+
"digit dot";
264+
} else if (morse1[i] === "-") {
265+
document.getElementById(`digit-${i + 1}-1`).classList =
266+
"digit dash";
267+
}
268+
}
269+
270+
for (let i = 0; i < morse2.length; i++) {
271+
if (morse2[i] === ".") {
272+
document.getElementById(`digit-${i + 1}-2`).classList =
273+
"digit dot";
274+
} else if (morse2[i] === "-") {
275+
document.getElementById(`digit-${i + 1}-2`).classList =
276+
"digit dash";
277+
}
278+
}
279+
280+
for (let i = 0; i < morse3.length; i++) {
281+
if (morse3[i] === ".") {
282+
document.getElementById(`digit-${i + 1}-3`).classList =
283+
"digit dot";
284+
} else if (morse3[i] === "-") {
285+
document.getElementById(`digit-${i + 1}-3`).classList =
286+
"digit dash";
287+
}
288+
}
289+
290+
for (let i = 0; i < morse4.length; i++) {
291+
if (morse4[i] === ".") {
292+
document.getElementById(`digit-${i + 1}-4`).classList =
293+
"digit dot";
294+
} else if (morse4[i] === "-") {
295+
document.getElementById(`digit-${i + 1}-4`).classList =
296+
"digit dash";
297+
}
298+
}
299+
300+
for (let i = 0; i < morse5.length; i++) {
301+
if (morse5[i] === ".") {
302+
document.getElementById(`digit-${i + 1}-5`).classList =
303+
"digit dot";
304+
} else if (morse5[i] === "-") {
305+
document.getElementById(`digit-${i + 1}-5`).classList =
306+
"digit dash";
307+
}
308+
}
309+
310+
for (let i = 0; i < morse6.length; i++) {
311+
if (morse6[i] === ".") {
312+
document.getElementById(`digit-${i + 1}-6`).classList =
313+
"digit dot";
314+
} else if (morse6[i] === "-") {
315+
document.getElementById(`digit-${i + 1}-6`).classList =
316+
"digit dash";
317+
}
318+
}
319+
320+
const millisecondsToNextSecond = 1000 - now.getMilliseconds();
321+
setTimeout(updateClock, millisecondsToNextSecond);
322+
}
323+
324+
updateClock();
325+
};
326+
</script>
327+
</body>
328+
</html>

‎public/lib/matter.min.js‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)