Skip to content

Commit 831113c

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 26
1 parent 9e53f82 commit 831113c

2 files changed

Lines changed: 362 additions & 0 deletions

File tree

‎public/26/index.html‎

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

‎public/assets/Queen.woff2‎

4.45 KB
Binary file not shown.

0 commit comments

Comments
 (0)