Skip to content

Commit 2eb328f

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 28
1 parent d0cde00 commit 2eb328f

2 files changed

Lines changed: 379 additions & 0 deletions

File tree

‎public/28/index.html‎

Lines changed: 379 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,379 @@
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 28/100</title>
7+
</head>
8+
<body class="show-sundial">
9+
<main>
10+
<div class="sundial">
11+
<div class="sundial-base">
12+
<div class="sundial-base-circle-1"></div>
13+
<div class="sundial-base-circle-2"></div>
14+
<div class="sundial-base-circle-3"></div>
15+
<div class="sundial-bottom-circle"></div>
16+
<div class="sundial-pointer"></div>
17+
<div
18+
class="sundial-mark"
19+
style="transform: translate(0%, -50%) rotate(-90deg)"
20+
>
21+
<div class="sundial-mark-text">XII</div>
22+
</div>
23+
<div
24+
class="sundial-mark"
25+
style="transform: translate(0%, -50%) rotate(-72deg)"
26+
>
27+
<div class="sundial-mark-text">I</div>
28+
</div>
29+
<div
30+
class="sundial-mark"
31+
style="transform: translate(0%, -50%) rotate(-54deg)"
32+
>
33+
<div class="sundial-mark-text">II</div>
34+
</div>
35+
<div
36+
class="sundial-mark"
37+
style="transform: translate(0%, -50%) rotate(-36deg)"
38+
>
39+
<div class="sundial-mark-text">III</div>
40+
</div>
41+
<div
42+
class="sundial-mark"
43+
style="transform: translate(0%, -50%) rotate(-18deg)"
44+
>
45+
<div class="sundial-mark-text">IV</div>
46+
</div>
47+
<div
48+
class="sundial-mark"
49+
style="transform: translate(0%, -50%) rotate(0deg)"
50+
>
51+
<div class="sundial-mark-text">V</div>
52+
</div>
53+
<div
54+
class="sundial-mark"
55+
style="transform: translate(0%, -50%) rotate(18deg)"
56+
>
57+
<div class="sundial-mark-text">VI</div>
58+
</div>
59+
<div
60+
class="sundial-mark"
61+
style="transform: translate(0%, -50%) rotate(36deg)"
62+
>
63+
<div class="sundial-mark-text">VII</div>
64+
</div>
65+
<div
66+
class="sundial-mark"
67+
style="transform: translate(0%, -50%) rotate(144deg)"
68+
>
69+
<div class="sundial-mark-text">V</div>
70+
</div>
71+
<div
72+
class="sundial-mark"
73+
style="transform: translate(0%, -50%) rotate(162deg)"
74+
>
75+
<div class="sundial-mark-text">VI</div>
76+
</div>
77+
<div
78+
class="sundial-mark"
79+
style="transform: translate(0%, -50%) rotate(180deg)"
80+
>
81+
<div class="sundial-mark-text">VII</div>
82+
</div>
83+
<div
84+
class="sundial-mark"
85+
style="transform: translate(0%, -50%) rotate(198deg)"
86+
>
87+
<div class="sundial-mark-text">VIII</div>
88+
</div>
89+
<div
90+
class="sundial-mark"
91+
style="transform: translate(0%, -50%) rotate(216deg)"
92+
>
93+
<div class="sundial-mark-text">IX</div>
94+
</div>
95+
<div
96+
class="sundial-mark"
97+
style="transform: translate(0%, -50%) rotate(234deg)"
98+
>
99+
<div class="sundial-mark-text">X</div>
100+
</div>
101+
<div
102+
class="sundial-mark"
103+
style="transform: translate(0%, -50%) rotate(252deg)"
104+
>
105+
<div class="sundial-mark-text">XI</div>
106+
</div>
107+
<div class="sundial-shadow-right"></div>
108+
<div class="sundial-shadow-left"></div>
109+
</div>
110+
</div>
111+
</main>
112+
113+
<style>
114+
@font-face {
115+
font-family: "NewYork";
116+
src: url("/assets/NewYork-Semibold.woff2") format("woff2");
117+
font-weight: 600;
118+
}
119+
120+
:root {
121+
--sundial-shadow-angle-right: -90deg;
122+
--sundial-shadow-angle-left: -90deg;
123+
}
124+
125+
body {
126+
background-color: #fff;
127+
overflow: hidden;
128+
display: flex;
129+
justify-content: center;
130+
align-items: center;
131+
width: 100vw;
132+
height: 100vh;
133+
margin: 0;
134+
}
135+
136+
/* Sundial */
137+
.sundial {
138+
position: fixed;
139+
top: 0%;
140+
left: 0%;
141+
width: 100vw;
142+
height: 100vh;
143+
display: flex;
144+
justify-content: center;
145+
align-items: center;
146+
scale: 0.8;
147+
opacity: 0;
148+
pointer-events: none;
149+
transition: scale 0.5s ease-in-out, opacity 0.5s ease-in-out;
150+
}
151+
152+
.show-sundial {
153+
background-color: #fff;
154+
}
155+
156+
.show-sundial .sundial {
157+
display: flex;
158+
scale: 1;
159+
opacity: 1;
160+
pointer-events: auto;
161+
}
162+
163+
.sundial-base {
164+
position: relative;
165+
width: min(90vw, 90vh);
166+
aspect-ratio: 1/1;
167+
border-radius: 50%;
168+
169+
border: min(max(1vw, 3px), 6px) solid #000;
170+
}
171+
172+
.sundial-base-circle-1 {
173+
content: "";
174+
position: absolute;
175+
top: 50%;
176+
left: 50%;
177+
transform: translate(-50%, -50%);
178+
width: calc(100% - min(max(6.67vw, 16px), 40px) * 4);
179+
aspect-ratio: 1/1;
180+
border-radius: 50%;
181+
182+
border: min(max(0.5vw, 1.5px), 3px) solid #000;
183+
}
184+
185+
.sundial-base-circle-2 {
186+
content: "";
187+
position: absolute;
188+
top: 50%;
189+
left: 50%;
190+
transform: translate(-50%, -50%);
191+
width: calc(100% - min(max(6.67vw, 16px), 40px) * 6);
192+
aspect-ratio: 1/1;
193+
border-radius: 50%;
194+
195+
border: min(max(0.5vw, 1.5px), 3px) solid #000;
196+
}
197+
198+
.sundial-base-circle-3 {
199+
content: "";
200+
position: absolute;
201+
top: 50%;
202+
left: 50%;
203+
transform: translate(-50%, -50%);
204+
width: calc(100% - min(max(6.67vw, 16px), 40px) * 8);
205+
aspect-ratio: 1/1;
206+
border-radius: 50%;
207+
208+
border: min(max(0.5vw, 1.5px), 3px) solid #000;
209+
}
210+
211+
.sundial-bottom-circle {
212+
display: none;
213+
position: absolute;
214+
bottom: 0%;
215+
left: 50%;
216+
transform: translate(-50%, 0%);
217+
width: 35%;
218+
aspect-ratio: 1/1;
219+
border-radius: 50%;
220+
background-color: #fff;
221+
border: min(max(0.5vw, 1.5px), 3px) solid #000;
222+
}
223+
224+
.sundial-pointer {
225+
position: absolute;
226+
overflow: visible;
227+
top: calc(min(max(6.67vw, 16px), 40px) * 2.2);
228+
left: 50%;
229+
transform: translate(-50%, 0%);
230+
width: calc(min(max(2.67vw, 8px), 16px) * 3);
231+
height: calc(50% - min(max(6.67vw, 16px), 40px) * 2.2);
232+
233+
z-index: 2;
234+
}
235+
236+
.sundial-pointer::before {
237+
content: "";
238+
position: absolute;
239+
top: 0%;
240+
left: 0%;
241+
width: 100%;
242+
height: 100%;
243+
clip-path: polygon(
244+
30% 0%,
245+
70% 0%,
246+
100% 95%,
247+
70% 100%,
248+
30% 100%,
249+
0% 95%
250+
);
251+
background-color: rgba(200, 200, 200, 1);
252+
}
253+
254+
.sundial-pointer::after {
255+
content: "";
256+
position: absolute;
257+
top: 0%;
258+
left: 30%;
259+
width: 40%;
260+
height: 100%;
261+
background-color: #fff;
262+
outline: min(max(0.5vw, 1.5px), 3px) solid #000;
263+
outline-offset: calc(min(max(0.5vw, 1.5px), 3px) * -1);
264+
}
265+
266+
.sundial-shadow-right {
267+
position: absolute;
268+
top: calc(min(max(6.67vw, 16px), 40px) * 2.2);
269+
left: 50%;
270+
height: calc(100% - min(max(6.67vw, 16px), 40px) * 4.4);
271+
aspect-ratio: 1/2;
272+
background-color: rgba(0, 0, 0, 0.4);
273+
274+
clip-path: polygon(
275+
0% 0%,
276+
calc(100% * sin(var(--sundial-shadow-angle-right)))
277+
calc(50% - 50% * cos(var(--sundial-shadow-angle-right))),
278+
0% 50%
279+
);
280+
281+
transition: clip-path 0.5s ease-in-out;
282+
}
283+
284+
.sundial-shadow-left {
285+
position: absolute;
286+
top: calc(min(max(6.67vw, 16px), 40px) * 2.2);
287+
right: 50%;
288+
height: calc(100% - min(max(6.67vw, 16px), 40px) * 4.4);
289+
aspect-ratio: 1/2;
290+
background-color: rgba(0, 0, 0, 0.4);
291+
292+
clip-path: polygon(
293+
calc(100% - 100% * sin(var(--sundial-shadow-angle-left)))
294+
calc(50% - 50% * cos(var(--sundial-shadow-angle-left))),
295+
100% 0%,
296+
100% 50%
297+
);
298+
299+
transition: clip-path 0.5s ease-in-out;
300+
}
301+
302+
.sundial-mark {
303+
position: absolute;
304+
top: 50%;
305+
left: 50%;
306+
transform: translate(0%, -50%);
307+
transform-origin: center left;
308+
width: 50%;
309+
display: flex;
310+
justify-content: flex-end;
311+
align-items: center;
312+
}
313+
314+
.sundial-mark::after {
315+
content: "";
316+
position: absolute;
317+
top: 50%;
318+
right: calc(min(max(6.67vw, 16px), 40px) * 2.5);
319+
transform: translate(0%, -50%);
320+
width: 50%;
321+
height: min(max(0.5vw, 1.5px), 3px);
322+
background-color: #000;
323+
}
324+
325+
.sundial-mark-text {
326+
width: calc(min(max(6.67vw, 16px), 40px) * 2);
327+
overflow: visible;
328+
font-family: "NewYork";
329+
font-size: min(max(6.67vw, 16px), 40px);
330+
font-weight: 600;
331+
color: #000;
332+
display: flex;
333+
justify-content: center;
334+
align-items: center;
335+
text-align: center;
336+
transform: rotate(90deg);
337+
}
338+
</style>
339+
340+
<script>
341+
function startSmoothClock() {
342+
function tick() {
343+
const now = new Date();
344+
let milliseconds = now.getMilliseconds();
345+
let seconds = now.getSeconds();
346+
let minutes = now.getMinutes();
347+
let hours = now.getHours();
348+
349+
let angle = ((hours % 12) + minutes / 60 + seconds / 3600) * 18;
350+
if (hours % 12 < 7) {
351+
document.documentElement.style.setProperty(
352+
"--sundial-shadow-angle-right",
353+
angle + "deg"
354+
);
355+
document.documentElement.style.setProperty(
356+
"--sundial-shadow-angle-left",
357+
"0deg"
358+
);
359+
} else {
360+
document.documentElement.style.setProperty(
361+
"--sundial-shadow-angle-right",
362+
"0deg"
363+
);
364+
document.documentElement.style.setProperty(
365+
"--sundial-shadow-angle-left",
366+
216 - angle + "deg"
367+
);
368+
}
369+
370+
requestAnimationFrame(tick);
371+
}
372+
373+
tick();
374+
}
375+
376+
startSmoothClock();
377+
</script>
378+
</body>
379+
</html>

‎public/assets/NewYork-Semibold.woff2‎

71.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)