Skip to content

Commit cc86bcd

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 69
1 parent f263fce commit cc86bcd

File tree

2 files changed

+146
-1
lines changed

2 files changed

+146
-1
lines changed

‎public/68/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
left: 50%;
111111
transform: translate(-50%, 0%);
112112
width: 4.8px;
113-
height: 0%;
113+
height: 4.8px;
114114
border-radius: 1000px;
115115
background-color: #000;
116116
opacity: 0;

‎public/69/index.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
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 65/100</title>
7+
</head>
8+
<body>
9+
<main>
10+
<div class="offmark-circle" id="offmark-circle">
11+
<svg
12+
class="offmark-circle-icon"
13+
version="1.1"
14+
xmlns="http://www.w3.org/2000/svg"
15+
xmlns:xlink="http://www.w3.org/1999/xlink"
16+
viewBox="0 0 50 50"
17+
>
18+
<circle class="offmark-circle-inner" cx="25" cy="25" r="23" />
19+
</svg>
20+
<div class="offmark-icon">
21+
<div class="offmark-icon-line"></div>
22+
</div>
23+
</div>
24+
</main>
25+
26+
<style>
27+
@font-face {
28+
font-family: "SpaceMono";
29+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
30+
font-weight: 700;
31+
}
32+
33+
body {
34+
margin: 0;
35+
overflow: hidden;
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
align-items: center;
40+
-webkit-tap-highlight-color: transparent;
41+
width: 100vw;
42+
height: 100vh;
43+
background-color: #fff;
44+
}
45+
46+
.offmark-circle {
47+
position: relative;
48+
cursor: pointer;
49+
width: 60px;
50+
height: 60px;
51+
52+
transition: all 0.5s ease-in-out;
53+
}
54+
55+
.offmark-circle::before {
56+
content: "";
57+
position: absolute;
58+
top: 0;
59+
left: 0;
60+
width: 100%;
61+
height: 100%;
62+
border-radius: 50%;
63+
outline: 4.8px solid rgba(235, 235, 235, 1);
64+
outline-offset: -4.8px;
65+
z-index: 1;
66+
opacity: 1;
67+
transition: opacity 0.5s 0.5s ease-in-out;
68+
}
69+
70+
.offmark-circle-icon {
71+
position: absolute;
72+
top: 50%;
73+
left: 50%;
74+
transform: translate(-50%, -50%);
75+
width: 100%;
76+
height: 100%;
77+
z-index: 2;
78+
overflow: visible;
79+
}
80+
81+
.offmark-circle-inner {
82+
fill: none;
83+
transform-origin: center;
84+
rotate: -90deg;
85+
stroke: #000;
86+
stroke-width: 4px;
87+
stroke-linecap: round;
88+
stroke-dasharray: 314.1592653589793;
89+
stroke-dashoffset: 314.1592653589793;
90+
opacity: 0;
91+
transition: stroke-dashoffset 1s ease-in-out,
92+
opacity 0.2s 0.8s ease-in-out;
93+
}
94+
95+
.offmark-icon {
96+
position: absolute;
97+
top: 50%;
98+
left: 50%;
99+
transform: translate(-50%, -50%);
100+
width: 32px;
101+
height: 32px;
102+
z-index: 2;
103+
overflow: visible;
104+
}
105+
106+
.offmark-icon-line {
107+
position: absolute;
108+
top: 50%;
109+
left: 50%;
110+
transform: translate(-50%, -50%);
111+
width: 4.8px;
112+
height: 4.8px;
113+
border-radius: 1000px;
114+
background-color: #000;
115+
opacity: 0;
116+
transition: width 0.5s 0.2s ease-in-out, opacity 0.2s 0.5s ease-in-out;
117+
}
118+
119+
.offmark-circle-selected::before {
120+
opacity: 0;
121+
transition: opacity 0.5s ease-in-out;
122+
}
123+
124+
.offmark-circle-selected .offmark-circle-inner {
125+
stroke-dashoffset: 0;
126+
opacity: 1;
127+
transition: stroke-dashoffset 1s ease-in-out, opacity 0.2s ease-in-out;
128+
}
129+
130+
.offmark-circle-selected .offmark-icon-line {
131+
width: calc(100%);
132+
opacity: 1;
133+
transition: width 0.5s 0.3s ease-in-out, opacity 0.2s 0.3s ease-in-out;
134+
}
135+
</style>
136+
137+
<script>
138+
const offmarkCircle = document.getElementById("offmark-circle");
139+
140+
offmarkCircle.addEventListener("click", () => {
141+
offmarkCircle.classList.toggle("offmark-circle-selected");
142+
});
143+
</script>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)