Skip to content

Commit 9e53f82

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 25
1 parent 1c69084 commit 9e53f82

1 file changed

Lines changed: 259 additions & 0 deletions

File tree

‎public/25/index.html‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
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 25/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="candle-clock">
12+
<div class="candle-clock-board">
13+
<div class="candle-clock-marks" id="candle-clock-marks">
14+
<div class="candle-clock-mark" id="candle-clock-mark-1">I</div>
15+
<div class="candle-clock-mark">II</div>
16+
<div class="candle-clock-mark">III</div>
17+
<div class="candle-clock-mark">IV</div>
18+
<div class="candle-clock-mark">V</div>
19+
<div class="candle-clock-mark">VI</div>
20+
<div class="candle-clock-mark">VII</div>
21+
<div class="candle-clock-mark">VIII</div>
22+
<div class="candle-clock-mark">IX</div>
23+
<div class="candle-clock-mark">X</div>
24+
<div class="candle-clock-mark">XI</div>
25+
<div class="candle-clock-mark">XII</div>
26+
</div>
27+
</div>
28+
29+
<div class="candle-clock-candle">
30+
<div class="candle-clock-candle-body"></div>
31+
<div class="candle-clock-candle-flame-1-container">
32+
<div class="candle-clock-candle-flame-1"></div>
33+
</div>
34+
<div class="candle-clock-candle-flame-2-container">
35+
<div class="candle-clock-candle-flame-2"></div>
36+
</div>
37+
<div class="candle-clock-candle-flame-3-container">
38+
<div class="candle-clock-candle-flame-3"></div>
39+
</div>
40+
</div>
41+
</div>
42+
</main>
43+
44+
<style>
45+
@font-face {
46+
font-family: "SFMono";
47+
src: url("/assets/SFMono-Bold.woff2") format("woff2");
48+
font-weight: 700;
49+
}
50+
51+
@font-face {
52+
font-family: "SFMono";
53+
src: url("/assets/SFMono-Medium.woff2") format("woff2");
54+
font-weight: 500;
55+
}
56+
57+
@font-face {
58+
font-family: "SFMono";
59+
src: url("/assets/SFMono-Regular.woff2") format("woff2");
60+
font-weight: 400;
61+
}
62+
63+
:root {
64+
--candle-clock-height: 1;
65+
}
66+
67+
body {
68+
background-color: #fff;
69+
overflow: hidden;
70+
display: flex;
71+
justify-content: center;
72+
align-items: center;
73+
width: 100vw;
74+
height: 100vh;
75+
margin: 0;
76+
}
77+
78+
.candle-clock {
79+
width: 100vw;
80+
min-height: 100vh;
81+
background-color: #000;
82+
display: flex;
83+
flex-direction: column;
84+
justify-content: flex-end;
85+
align-items: center;
86+
}
87+
88+
.candle-clock-candle {
89+
position: relative;
90+
width: min(max(7vw, 60px), 80px);
91+
height: calc(85vh * var(--candle-clock-height));
92+
display: flex;
93+
}
94+
95+
.candle-clock-candle-body {
96+
background-color: #fff;
97+
border-radius: min(max(1vw, 8px), 12px) min(max(1vw, 8px), 12px) 0% 0%;
98+
width: 100%;
99+
height: 100%;
100+
101+
z-index: 10;
102+
}
103+
104+
.candle-clock-candle-flame-1-container,
105+
.candle-clock-candle-flame-2-container,
106+
.candle-clock-candle-flame-3-container {
107+
position: absolute;
108+
bottom: 101%;
109+
left: 50%;
110+
translate: -50% 0%;
111+
width: 50%;
112+
aspect-ratio: 1/1;
113+
display: flex;
114+
transform-origin: center bottom;
115+
animation: candle-flame-animation 4s ease-in-out infinite;
116+
117+
z-index: 1;
118+
}
119+
120+
.candle-clock-candle-flame-1,
121+
.candle-clock-candle-flame-2,
122+
.candle-clock-candle-flame-3 {
123+
width: 100%;
124+
aspect-ratio: 1/1;
125+
border-radius: 50% 10% 50% 0%;
126+
transform-origin: center center;
127+
rotate: -45deg;
128+
border: min(max(0.225vw, 1.5px), 3px) solid #fff;
129+
background-color: #000;
130+
131+
z-index: 1;
132+
}
133+
134+
.candle-clock-candle-flame-1-container {
135+
width: 20%;
136+
animation-duration: 6s;
137+
z-index: 3;
138+
}
139+
140+
.candle-clock-candle-flame-1 {
141+
background-color: #fff;
142+
}
143+
144+
.candle-clock-candle-flame-2-container {
145+
width: 35%;
146+
animation-duration: 5s;
147+
z-index: 2;
148+
}
149+
150+
@keyframes candle-flame-animation {
151+
0% {
152+
transform: scale(1);
153+
}
154+
50% {
155+
transform: scale(1.2);
156+
}
157+
100% {
158+
transform: scale(1);
159+
}
160+
}
161+
162+
.candle-clock-board {
163+
position: fixed;
164+
bottom: 0%;
165+
left: 50%;
166+
transform: translate(-50%, 0%);
167+
height: 100vh;
168+
aspect-ratio: 3/4;
169+
max-width: 95vw;
170+
display: flex;
171+
background-color: #000;
172+
border-left: min(max(0.225vw, 1.5px), 3px) solid #fff;
173+
border-right: min(max(0.225vw, 1.5px), 3px) solid #fff;
174+
}
175+
176+
.candle-clock-marks {
177+
position: relative;
178+
width: 100%;
179+
height: 85vh;
180+
margin-top: 15vh;
181+
display: flex;
182+
flex-direction: column;
183+
align-items: center;
184+
justify-content: space-evenly;
185+
}
186+
187+
.candle-clock-mark {
188+
position: relative;
189+
width: 90%;
190+
color: #fff;
191+
font-family: "SFMono";
192+
font-size: min(max(1.3vw, 10px), 16px);
193+
font-weight: 700;
194+
text-align: right;
195+
padding-bottom: min(max(0.5vw, 4px), 6px);
196+
}
197+
198+
.candle-clock-marks::before,
199+
.candle-clock-mark::before {
200+
content: "";
201+
position: absolute;
202+
bottom: 0%;
203+
right: 0%;
204+
width: 30%;
205+
height: min(max(0.125vw, 1px), 1.5px);
206+
background-color: #fff;
207+
}
208+
209+
.candle-clock-marks::before {
210+
bottom: 100%;
211+
right: 5%;
212+
width: 27%;
213+
}
214+
</style>
215+
216+
<script>
217+
const candleClockMarks = document.getElementById("candle-clock-marks");
218+
const candleClockMark = document.getElementById("candle-clock-mark-1");
219+
220+
let markHeight = candleClockMark.clientHeight;
221+
let markSpacing = (candleClockMarks.clientHeight - markHeight * 12) / 13;
222+
223+
function startSmoothClock() {
224+
function tick() {
225+
const now = new Date();
226+
let milliseconds = now.getMilliseconds();
227+
let seconds = now.getSeconds();
228+
let minutes = now.getMinutes();
229+
let hours = now.getHours();
230+
231+
if (hours >= 12) {
232+
hours -= 12;
233+
}
234+
235+
let timeRatio =
236+
hours / 12 +
237+
minutes / 720 +
238+
seconds / 43200 +
239+
milliseconds / 43200000;
240+
console.log(timeRatio * 12);
241+
document.documentElement.style.setProperty(
242+
"--candle-clock-height",
243+
`${
244+
1 -
245+
(timeRatio * 12 * (markSpacing + markHeight)) /
246+
candleClockMarks.clientHeight
247+
}`
248+
);
249+
250+
requestAnimationFrame(tick);
251+
}
252+
253+
tick();
254+
}
255+
256+
startSmoothClock();
257+
</script>
258+
</body>
259+
</html>

0 commit comments

Comments
 (0)