Skip to content

Commit e04b76f

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 58
1 parent 37edd91 commit e04b76f

1 file changed

Lines changed: 99 additions & 0 deletions

File tree

‎public/58/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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 57/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="clock-circle">
12+
<div class="clock-text" id="clock-text">12:00:00</div>
13+
</div>
14+
</main>
15+
16+
<style>
17+
@font-face {
18+
font-family: "SpaceMono";
19+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
20+
font-weight: 700;
21+
}
22+
23+
body {
24+
margin: 0;
25+
overflow: hidden;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
-webkit-tap-highlight-color: transparent;
30+
width: 100vw;
31+
height: 100vh;
32+
background-color: #fff;
33+
}
34+
35+
.clock-text {
36+
cursor: default;
37+
font-family: "SpaceMono", sans-serif;
38+
font-weight: 700;
39+
font-size: min(10vw, 10vh);
40+
color: #000;
41+
transition: letter-spacing 0.5s ease-in-out,
42+
text-indent 0.5s ease-in-out;
43+
}
44+
45+
.clock-circle {
46+
position: fixed;
47+
top: 50%;
48+
left: 50%;
49+
transform: translate(-50%, -50%);
50+
width: min(75vw, 75vh);
51+
aspect-ratio: 1 / 1;
52+
border: min(1.2vw, 1.2vh) solid rgba(0, 0, 0, 0.1);
53+
border-radius: 100%;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
transition: border 0.5s ease-in-out;
58+
}
59+
60+
.clock-circle:hover {
61+
border: min(1.2vw, 1.2vh) solid rgba(0, 0, 0, 1);
62+
}
63+
64+
.clock-circle:hover .clock-text {
65+
text-indent: min(2vw, 2vh);
66+
letter-spacing: min(2vw, 2vh);
67+
}
68+
</style>
69+
70+
<script>
71+
let clockText = document.getElementById("clock-text");
72+
73+
function startSmoothClock() {
74+
function tick() {
75+
const now = new Date();
76+
let milliseconds = now.getMilliseconds();
77+
let seconds = now.getSeconds();
78+
let minutes = now.getMinutes();
79+
let hours = now.getHours();
80+
81+
clockText.textContent = `${hours
82+
.toString()
83+
.padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds
84+
.toString()
85+
.padStart(2, "0")}`;
86+
clockText.style.transform = `rotate(${
87+
(seconds + milliseconds / 1000) * 6 - 90
88+
}deg)`;
89+
90+
requestAnimationFrame(tick);
91+
}
92+
93+
tick();
94+
}
95+
96+
startSmoothClock();
97+
</script>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)