Skip to content

Commit 905569c

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 32
1 parent 9a6116f commit 905569c

2 files changed

Lines changed: 328 additions & 0 deletions

File tree

‎public/32/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 32/100</title>
8+
</head>
9+
<body class="show-data-clock">
10+
<div class="data-clock">
11+
<div class="data-clock-phone">
12+
<div class="data-clock-phone-screen">
13+
<div class="data-clock-phone-screen-content">
14+
<div class="data-clock-phone-screen-content-scrolling">
15+
<div class="data-clock-phone-screen-content-scrolling-text">
16+
YouTube
17+
</div>
18+
<div class="data-clock-phone-screen-content-scrolling-text">
19+
TikTok
20+
</div>
21+
<div class="data-clock-phone-screen-content-scrolling-text">
22+
Instagram
23+
</div>
24+
<div class="data-clock-phone-screen-content-scrolling-text">
25+
Facebook
26+
</div>
27+
<div class="data-clock-phone-screen-content-scrolling-text">
28+
X/Twitter
29+
</div>
30+
<div class="data-clock-phone-screen-content-scrolling-text">
31+
Snapchat
32+
</div>
33+
<div class="data-clock-phone-screen-content-scrolling-text">
34+
Pinterest
35+
</div>
36+
<div class="data-clock-phone-screen-content-scrolling-text">
37+
Reddit
38+
</div>
39+
<div class="data-clock-phone-screen-content-scrolling-text">
40+
Discord
41+
</div>
42+
<div class="data-clock-phone-screen-content-scrolling-text">
43+
Steam
44+
</div>
45+
<div class="data-clock-phone-screen-content-scrolling-text">
46+
Twitch
47+
</div>
48+
<div class="data-clock-phone-screen-content-scrolling-text">
49+
WhatsApp
50+
</div>
51+
<div class="data-clock-phone-screen-content-scrolling-text">
52+
WeChat
53+
</div>
54+
<div class="data-clock-phone-screen-content-scrolling-text">
55+
RedNote
56+
</div>
57+
<div class="data-clock-phone-screen-content-scrolling-text">
58+
Bilibili
59+
</div>
60+
<div class="data-clock-phone-screen-content-scrolling-text">
61+
YouTube
62+
</div>
63+
<div class="data-clock-phone-screen-content-scrolling-text">
64+
TikTok
65+
</div>
66+
<div class="data-clock-phone-screen-content-scrolling-text">
67+
Instagram
68+
</div>
69+
<div class="data-clock-phone-screen-content-scrolling-text">
70+
Facebook
71+
</div>
72+
<div class="data-clock-phone-screen-content-scrolling-text">
73+
X/Twitter
74+
</div>
75+
<div class="data-clock-phone-screen-content-scrolling-text">
76+
Snapchat
77+
</div>
78+
<div class="data-clock-phone-screen-content-scrolling-text">
79+
Pinterest
80+
</div>
81+
<div class="data-clock-phone-screen-content-scrolling-text">
82+
Reddit
83+
</div>
84+
<div class="data-clock-phone-screen-content-scrolling-text">
85+
Discord
86+
</div>
87+
<div class="data-clock-phone-screen-content-scrolling-text">
88+
Steam
89+
</div>
90+
<div class="data-clock-phone-screen-content-scrolling-text">
91+
Twitch
92+
</div>
93+
<div class="data-clock-phone-screen-content-scrolling-text">
94+
WhatsApp
95+
</div>
96+
<div class="data-clock-phone-screen-content-scrolling-text">
97+
WeChat
98+
</div>
99+
<div class="data-clock-phone-screen-content-scrolling-text">
100+
RedNote
101+
</div>
102+
<div class="data-clock-phone-screen-content-scrolling-text">
103+
Bilibili
104+
</div>
105+
</div>
106+
</div>
107+
<div class="data-clock-phone-screen-time">
108+
<div class="data-clock-time" id="data-clock-time">20:07</div>
109+
<div class="data-clock-date" id="data-clock-date">
110+
September 30, 2025
111+
</div>
112+
<div class="data-clock-status-bar">
113+
<svg
114+
class="data-clock-status-icons"
115+
xmlns="http://www.w3.org/2000/svg"
116+
viewBox="0 0 52.73 9.91"
117+
>
118+
<g id="Layer_1-2" data-name="Layer_1">
119+
<path
120+
d="M18.64,4.2l-.82-.84c-.05-.06-.08-.12-.08-.19s.02-.13.06-.19c.47-.58,1.06-1.09,1.77-1.54s1.49-.8,2.35-1.06,1.74-.38,2.65-.38,1.79.13,2.65.38,1.64.61,2.35,1.06,1.3.96,1.77,1.54c.05.06.07.12.07.19s-.03.13-.09.19l-.82.82c-.06.07-.13.1-.22.1s-.15-.03-.21-.08c-.72-.77-1.55-1.35-2.48-1.75s-1.94-.6-3.01-.6-2.06.2-2.99.6-1.76.98-2.48,1.75c-.06.07-.14.1-.22.1s-.16-.03-.23-.09ZM21.09,6.64l-.92-.91c-.05-.05-.08-.12-.09-.18s.02-.13.07-.19c.3-.37.68-.69,1.14-.98s.96-.51,1.52-.68,1.15-.25,1.75-.25,1.2.08,1.76.25,1.07.39,1.52.68.84.61,1.14.98c.05.06.07.12.06.19s-.03.13-.09.18l-.92.9c-.07.07-.14.1-.22.1s-.15-.03-.21-.1c-.37-.39-.82-.71-1.36-.97s-1.1-.38-1.69-.38c-.58,0-1.14.12-1.67.37s-.99.57-1.34.96c-.07.07-.14.11-.23.11s-.16-.02-.23-.09ZM24.56,9.88c-.07,0-.14-.02-.21-.06s-.17-.12-.28-.23l-1.44-1.38c-.05-.05-.08-.1-.09-.16s0-.12.03-.17c.2-.27.48-.51.84-.7s.74-.29,1.16-.29.8.09,1.15.28.63.4.83.66c.05.06.07.12.06.19s-.04.13-.09.18l-1.44,1.38c-.12.12-.21.2-.28.23s-.15.06-.22.06Z"
121+
/>
122+
<path
123+
d="M.54,9.91c-.16,0-.29-.05-.39-.15-.1-.1-.15-.24-.15-.41v-2.3c0-.17.05-.3.15-.4.1-.1.23-.15.39-.15h1.24c.16,0,.29.05.39.15.1.1.15.23.15.4v2.3c0,.17-.05.3-.15.41-.1.1-.23.15-.39.15H.54ZM4.12,9.91c-.16,0-.29-.05-.39-.15-.1-.1-.15-.24-.15-.41v-3.9c0-.17.05-.3.15-.41.1-.1.23-.15.39-.15h1.24c.16,0,.29.05.39.15.1.1.15.24.15.41v3.9c0,.17-.05.3-.15.41-.1.1-.23.15-.39.15h-1.24ZM7.69,9.91c-.16,0-.29-.05-.39-.15-.1-.1-.15-.24-.15-.41V3.6c0-.17.05-.3.15-.4.1-.1.23-.15.39-.15h1.24c.16,0,.29.05.39.15.1.1.15.24.15.4v5.76c0,.17-.05.3-.15.41-.1.1-.23.15-.39.15h-1.24ZM11.27,9.91c-.16,0-.29-.05-.39-.15-.1-.1-.15-.24-.15-.41V1.57c0-.17.05-.3.15-.41.1-.1.23-.15.39-.15h1.24c.16,0,.29.05.39.15s.15.24.15.41v7.78c0,.17-.05.3-.15.41s-.23.15-.39.15h-1.24Z"
124+
/>
125+
<path
126+
d="M38.51,8.9c-.5,0-.96-.04-1.37-.12s-.77-.27-1.07-.57c-.3-.3-.49-.65-.57-1.06s-.12-.87-.12-1.37v-1.7c0-.49.04-.94.12-1.35s.27-.77.57-1.07c.3-.3.66-.49,1.07-.57s.86-.12,1.36-.12h9.22c.5,0,.96.04,1.37.12s.77.27,1.07.57.49.65.57,1.06.12.87.12,1.37v1.68c0,.5-.04.96-.12,1.37s-.27.77-.57,1.06-.66.49-1.07.57-.87.12-1.37.12h-9.21ZM38.35,7.96h9.53c.3,0,.6-.03.89-.08s.52-.17.7-.35.3-.41.35-.7.08-.58.08-.89v-2c0-.3-.03-.59-.08-.88s-.17-.52-.35-.7-.41-.29-.7-.35-.59-.08-.89-.08h-9.52c-.31,0-.61.03-.91.08s-.53.17-.71.35c-.18.18-.29.41-.35.7s-.08.59-.08.9v1.99c0,.3.03.6.08.89s.17.52.35.7c.18.18.42.29.71.35s.59.08.89.08ZM38.04,7.28c-.2,0-.36-.02-.49-.05s-.23-.09-.31-.17-.14-.19-.17-.31-.05-.29-.05-.49v-2.62c0-.21.02-.37.05-.5s.09-.23.17-.31c.08-.08.18-.14.31-.17s.3-.05.51-.05h7.08c.2,0,.36.02.49.05s.23.09.31.17.14.19.17.31.05.29.05.49v2.63c0,.38-.07.65-.22.8-.08.08-.19.14-.31.17s-.29.05-.49.05h-7.1ZM51.64,6.45v-3.03c.16,0,.32.08.49.21s.31.3.42.53.17.48.17.78-.06.56-.17.79-.26.4-.42.52-.33.2-.49.21Z"
127+
/>
128+
</g>
129+
</svg>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</body>
136+
137+
<style>
138+
@font-face {
139+
font-family: "DINCondensed";
140+
src: url("/assets/DIN-Condensed-Bold.woff2") format("woff2");
141+
font-weight: 700;
142+
}
143+
144+
/* Data Clock */
145+
.data-clock {
146+
position: fixed;
147+
top: 0%;
148+
left: 0%;
149+
width: 100vw;
150+
height: 100vh;
151+
display: flex;
152+
justify-content: center;
153+
align-items: center;
154+
pointer-events: none;
155+
}
156+
157+
.show-data-clock {
158+
background-color: #fff;
159+
}
160+
161+
.show-data-clock .data-clock {
162+
pointer-events: auto;
163+
}
164+
165+
.data-clock-phone {
166+
width: min(80vw, 40vh);
167+
aspect-ratio: 1/2;
168+
background-color: #fff;
169+
border-radius: min(max(10vw, 25px), 40px);
170+
border: min(max(0.75vw, 1.5px), 3px) solid #000;
171+
display: flex;
172+
justify-content: center;
173+
align-items: center;
174+
175+
translate: 0% 10%;
176+
opacity: 0;
177+
transition: opacity 0.5s ease-in-out, translate 0.5s ease-in-out;
178+
}
179+
180+
.show-data-clock .data-clock-phone {
181+
opacity: 1;
182+
translate: 0% 0%;
183+
}
184+
185+
.data-clock-phone-screen {
186+
position: relative;
187+
overflow: hidden;
188+
width: calc(
189+
100% - min(max(0.75vw, 1.5px), 3px) * 2 - min(max(1.5vw, 3px), 6px) * 2
190+
);
191+
height: calc(
192+
100% - min(max(0.75vw, 1.5px), 3px) * 2 - min(max(1.5vw, 3px), 6px) * 2
193+
);
194+
margin: min(max(0.75vw, 1.5px), 3px);
195+
border-radius: calc(
196+
min(max(10vw, 25px), 40px) - min(max(0.75vw, 1.5px), 3px) * 2
197+
);
198+
border: min(max(1.5vw, 3px), 6px) solid #000;
199+
display: flex;
200+
}
201+
202+
.data-clock-phone-screen-time,
203+
.data-clock-phone-screen-content {
204+
position: absolute;
205+
top: 0%;
206+
left: 0%;
207+
width: 100%;
208+
height: 100%;
209+
display: flex;
210+
flex-direction: column;
211+
align-items: center;
212+
}
213+
214+
.data-clock-phone-screen-time {
215+
transform: translate(0%, -100%);
216+
transition: transform 1s ease-in-out;
217+
border-bottom: min(max(0.75vw, 1.5px), 3px) solid #000;
218+
background-color: #fff;
219+
z-index: 2;
220+
}
221+
222+
.data-clock-phone-screen:hover .data-clock-phone-screen-time {
223+
transform: translate(0%, 0%);
224+
}
225+
226+
.data-clock-phone-screen-content-scrolling {
227+
width: 100%;
228+
overflow: visible;
229+
user-select: none;
230+
-webkit-user-select: none;
231+
-moz-user-select: none;
232+
-ms-user-select: none;
233+
display: flex;
234+
flex-direction: column;
235+
align-items: center;
236+
animation: data-clock-scrolling-animation 5s linear infinite;
237+
}
238+
239+
.data-clock-phone-screen-content-scrolling-text {
240+
font-family: "DINCondensed";
241+
font-size: min(max(20vw, 40px), 80px);
242+
font-weight: 700;
243+
text-align: center;
244+
}
245+
246+
@keyframes data-clock-scrolling-animation {
247+
0% {
248+
transform: translate(0%, 0%);
249+
}
250+
100% {
251+
transform: translate(0%, -50%);
252+
}
253+
}
254+
255+
.data-clock-phone-screen-time::after {
256+
content: "";
257+
position: absolute;
258+
bottom: min(max(1.5vw, 3px), 6px);
259+
left: 50%;
260+
transform: translate(-50%, 0%);
261+
width: 40%;
262+
height: min(max(1.5vw, 3px), 6px);
263+
border-radius: min(max(1.5vw, 3px), 6px);
264+
background-color: #000;
265+
}
266+
267+
.data-clock-time {
268+
font-family: "DINCondensed";
269+
font-size: min(max(30vw, 60px), 120px);
270+
font-weight: 700;
271+
text-align: center;
272+
color: #000;
273+
line-height: 0.8;
274+
275+
margin-top: min(max(25vw, 60px), 100px);
276+
}
277+
278+
.data-clock-date {
279+
font-family: "DINCondensed";
280+
font-size: min(max(6vw, 18px), 24px);
281+
font-weight: 700;
282+
text-align: center;
283+
color: #000;
284+
}
285+
286+
.data-clock-status-bar {
287+
position: absolute;
288+
top: 2.5%;
289+
right: 5%;
290+
display: flex;
291+
}
292+
293+
.data-clock-status-icons {
294+
height: min(max(3vw, 8px), 12px);
295+
}
296+
</style>
297+
298+
<script>
299+
function updateClock() {
300+
const now = new Date();
301+
let milliseconds = now.getMilliseconds();
302+
let seconds = now.getSeconds();
303+
let minutes = now.getMinutes();
304+
let hours = now.getHours();
305+
306+
let timeString =
307+
hours.toString().padStart(2, "0") +
308+
":" +
309+
minutes.toString().padStart(2, "0");
310+
document.getElementById("data-clock-time").textContent = timeString;
311+
document.getElementById("data-clock-date").textContent =
312+
new Date(
313+
hours.toString().padStart(2, "0") +
314+
minutes.toString().padStart(2, "0"),
315+
0,
316+
(seconds * 366) / 60
317+
).toLocaleDateString("en-US", { month: "long", day: "numeric" }) +
318+
", " +
319+
hours.toString().padStart(2, "0") +
320+
minutes.toString().padStart(2, "0");
321+
322+
const millisecondsToNextSecond = 1000 - now.getMilliseconds();
323+
setTimeout(updateClock, millisecondsToNextSecond);
324+
}
325+
326+
updateClock();
327+
</script>
328+
</html>

‎public/assets/DIN-Condensed-Bold.woff2‎

66.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)