Skip to content

Commit 9a6116f

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 29-31
1 parent 2eb328f commit 9a6116f

4 files changed

Lines changed: 986 additions & 0 deletions

File tree

‎public/29/index.html‎

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

0 commit comments

Comments
 (0)