Skip to content

Commit d0dab83

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 22
1 parent 794a8ec commit d0dab83

2 files changed

Lines changed: 229 additions & 20 deletions

File tree

‎public/15/index.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -208,28 +208,28 @@
208208
const hours = now.getHours();
209209

210210
let totalSeconds = seconds + milliseconds / 1000;
211-
let totalMinutes = minutes + seconds / 60;
212-
let totalHours = hours + minutes / 60;
211+
let totalMinutes = minutes + totalSeconds / 60;
212+
let totalHours = hours + totalMinutes / 60;
213213

214214
if (totalSeconds > 0 && totalSeconds <= 15) {
215215
secondTop.style.width = `${(totalSeconds * 100) / 15}%`;
216216
secondRight.style.height = `0%`;
217217
secondBottom.style.width = `0%`;
218218
secondLeft.style.height = `0%`;
219219
} else if (totalSeconds > 15 && totalSeconds <= 30) {
220-
secondTop.style.width = '100%'
220+
secondTop.style.width = "100%";
221221
secondRight.style.height = `${((totalSeconds - 15) * 100) / 15}%`;
222222
secondBottom.style.width = `0%`;
223223
secondLeft.style.height = `0%`;
224224
} else if (totalSeconds > 30 && totalSeconds <= 45) {
225-
secondTop.style.width = '100%'
226-
secondRight.style.height = '100%'
225+
secondTop.style.width = "100%";
226+
secondRight.style.height = "100%";
227227
secondBottom.style.width = `${((totalSeconds - 30) * 100) / 15}%`;
228228
secondLeft.style.height = `0%`;
229229
} else if (totalSeconds > 45 && totalSeconds <= 60) {
230-
secondTop.style.width = '100%'
231-
secondRight.style.height = '100%'
232-
secondBottom.style.width = '100%'
230+
secondTop.style.width = "100%";
231+
secondRight.style.height = "100%";
232+
secondBottom.style.width = "100%";
233233
secondLeft.style.height = `${((totalSeconds - 45) * 100) / 15}%`;
234234
}
235235

@@ -239,19 +239,19 @@
239239
minuteBottom.style.width = `0%`;
240240
minuteLeft.style.height = `0%`;
241241
} else if (totalMinutes > 15 && totalMinutes <= 30) {
242-
minuteTop.style.width = '100%'
242+
minuteTop.style.width = "100%";
243243
minuteRight.style.height = `${((totalMinutes - 15) * 100) / 15}%`;
244244
minuteBottom.style.width = `0%`;
245245
minuteLeft.style.height = `0%`;
246246
} else if (totalMinutes > 30 && totalMinutes <= 45) {
247-
minuteTop.style.width = '100%'
248-
minuteRight.style.height = '100%'
247+
minuteTop.style.width = "100%";
248+
minuteRight.style.height = "100%";
249249
minuteBottom.style.width = `${((totalMinutes - 30) * 100) / 15}%`;
250250
minuteLeft.style.height = `0%`;
251251
} else if (totalMinutes > 45 && totalMinutes <= 60) {
252-
minuteTop.style.width = '100%'
253-
minuteRight.style.height = '100%'
254-
minuteBottom.style.width = '100%'
252+
minuteTop.style.width = "100%";
253+
minuteRight.style.height = "100%";
254+
minuteBottom.style.width = "100%";
255255
minuteLeft.style.height = `${((totalMinutes - 45) * 100) / 15}%`;
256256
}
257257

@@ -265,19 +265,19 @@
265265
hourBottom.style.width = `0%`;
266266
hourLeft.style.height = `0%`;
267267
} else if (totalHours > 3 && totalHours <= 6) {
268-
hourTop.style.width = '100%'
268+
hourTop.style.width = "100%";
269269
hourRight.style.height = `${((totalHours - 3) * 100) / 3}%`;
270270
hourBottom.style.width = `0%`;
271271
hourLeft.style.height = `0%`;
272272
} else if (totalHours > 6 && totalHours <= 9) {
273-
hourTop.style.width = '100%'
274-
hourRight.style.height = '100%'
273+
hourTop.style.width = "100%";
274+
hourRight.style.height = "100%";
275275
hourBottom.style.width = `${((totalHours - 6) * 100) / 3}%`;
276276
hourLeft.style.height = `0%`;
277277
} else if (totalHours > 9 && totalHours <= 12) {
278-
hourTop.style.width = '100%'
279-
hourRight.style.height = '100%'
280-
hourBottom.style.width = '100%'
278+
hourTop.style.width = "100%";
279+
hourRight.style.height = "100%";
280+
hourBottom.style.width = "100%";
281281
hourLeft.style.height = `${((totalHours - 9) * 100) / 3}%`;
282282
}
283283

‎public/22/index.html‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
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 22/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="grid" id="grid"></div>
12+
<div class="point-wrapper">
13+
<div class="vertical-line" id="vertical-line"></div>
14+
<div class="horizontal-line" id="horizontal-line"></div>
15+
<div class="point" id="point"></div>
16+
</div>
17+
<div class="labels">
18+
<div class="label-hours" id="label-hours"></div>
19+
<div class="label-minutes" id="label-minutes"></div>
20+
</div>
21+
</main>
22+
23+
<style>
24+
@font-face {
25+
font-family: "SpaceMonoBold";
26+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
27+
font-weight: bold;
28+
}
29+
30+
body {
31+
margin: 0;
32+
overflow: hidden;
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
width: 100vw;
37+
height: 100vh;
38+
background-color: #fff;
39+
}
40+
41+
main {
42+
width: 100vw;
43+
height: 100vh;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
}
48+
49+
.grid {
50+
width: 100vw;
51+
height: 100vh;
52+
display: grid;
53+
grid-template-columns: repeat(12, 1fr);
54+
grid-template-rows: repeat(60, 1fr);
55+
gap: min(max(0.25vw, 2px), 3px);
56+
background-color: rgba(240, 240, 240, 1);
57+
}
58+
59+
.grid-item {
60+
background-color: #fff;
61+
}
62+
63+
.point-wrapper,
64+
.labels {
65+
position: fixed;
66+
top: 0;
67+
left: 0;
68+
width: 100vw;
69+
height: 100vh;
70+
71+
z-index: 1;
72+
}
73+
74+
.point-wrapper {
75+
z-index: 2;
76+
}
77+
78+
.vertical-line {
79+
position: fixed;
80+
top: 0;
81+
left: 0;
82+
translate: -100% 0%;
83+
width: min(max(0.25vw, 2px), 3px);
84+
height: 100%;
85+
background-color: #000;
86+
}
87+
88+
.horizontal-line {
89+
position: fixed;
90+
top: 0;
91+
left: 0;
92+
translate: 0% -100%;
93+
width: 100%;
94+
height: min(max(0.25vw, 2px), 3px);
95+
background-color: #000;
96+
}
97+
98+
.point {
99+
position: fixed;
100+
top: 0;
101+
left: 0;
102+
translate: calc(-50% - min(max(0.25vw, 2px), 3px) / 2)
103+
calc(-50% - min(max(0.25vw, 2px), 3px) / 2);
104+
width: min(max(1.25vw, 10px), 15px);
105+
aspect-ratio: 1 / 1;
106+
border-radius: 100%;
107+
background-color: #000;
108+
109+
outline: min(max(0.25vw, 2px), 3px) solid
110+
rgba(0, 0, 0, calc(1 - var(--milliseconds-percent)));
111+
outline-offset: calc(
112+
var(--milliseconds-percent) * min(max(2vw, 16px), 24px) -
113+
min(max(0.25vw, 2px), 3px)
114+
);
115+
}
116+
117+
.label-hours,
118+
.label-minutes {
119+
position: fixed;
120+
top: 0;
121+
left: 0;
122+
width: 100vw;
123+
height: 100vh;
124+
display: grid;
125+
grid-template-columns: repeat(12, 1fr);
126+
grid-template-rows: 1fr;
127+
gap: min(max(0.25vw, 2px), 3px);
128+
}
129+
130+
.label-minutes {
131+
grid-template-columns: 1fr;
132+
grid-template-rows: repeat(12, 1fr);
133+
}
134+
135+
.label-text {
136+
padding-left: min(max(0.7vw, 6px), 8px);
137+
padding-right: min(max(0.7vw, 6px), 8px);
138+
font-family: "SpaceMonoBold", sans-serif;
139+
font-size: min(max(1.6vw, 12px), 20px);
140+
font-weight: bold;
141+
color: rgba(190, 190, 190, 1);
142+
}
143+
</style>
144+
145+
<script>
146+
const grid = document.getElementById("grid");
147+
const labelHours = document.getElementById("label-hours");
148+
const labelMinutes = document.getElementById("label-minutes");
149+
150+
const verticalLine = document.getElementById("vertical-line");
151+
const horizontalLine = document.getElementById("horizontal-line");
152+
const point = document.getElementById("point");
153+
154+
for (let i = 0; i < 12 * 60; i++) {
155+
const gridItem = document.createElement("div");
156+
gridItem.classList.add("grid-item");
157+
grid.appendChild(gridItem);
158+
}
159+
160+
for (let i = 0; i < 12; i++) {
161+
const labelText = document.createElement("div");
162+
labelText.classList.add("label-text");
163+
labelText.textContent = i.toString().padStart(2, "0");
164+
labelHours.appendChild(labelText);
165+
}
166+
167+
for (let i = 0; i < 12; i++) {
168+
const labelText = document.createElement("div");
169+
labelText.classList.add("label-text");
170+
labelText.textContent = (i * 5).toString().padStart(2, "0");
171+
labelMinutes.appendChild(labelText);
172+
}
173+
174+
function startSmoothClock() {
175+
function tick() {
176+
const now = new Date();
177+
const milliseconds = now.getMilliseconds();
178+
const seconds = now.getSeconds();
179+
const minutes = now.getMinutes();
180+
const hours = now.getHours();
181+
182+
let totalSeconds = seconds + milliseconds / 1000;
183+
let totalMinutes = minutes + totalSeconds / 60;
184+
let totalHours = hours + totalMinutes / 60;
185+
186+
if (totalHours > 12) {
187+
totalHours -= 12;
188+
}
189+
190+
verticalLine.style.left = `${(totalHours / 12) * 100}%`;
191+
horizontalLine.style.top = `${(totalMinutes / 60) * 100}%`;
192+
point.style.left = `${(totalHours / 12) * 100}%`;
193+
point.style.top = `${(totalMinutes / 60) * 100}%`;
194+
195+
document.documentElement.style.setProperty(
196+
"--milliseconds-percent",
197+
`${milliseconds / 1000}`
198+
);
199+
200+
requestAnimationFrame(tick);
201+
}
202+
203+
tick();
204+
}
205+
206+
startSmoothClock();
207+
</script>
208+
</body>
209+
</html>

0 commit comments

Comments
 (0)