Skip to content

Commit af56404

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 64
1 parent 4fb1ef4 commit af56404

2 files changed

Lines changed: 154 additions & 1 deletion

File tree

‎public/63/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Day 62/100</title>
6+
<title>Day 63/100</title>
77
</head>
88
<body>
99
<main>

‎public/64/index.html‎

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

0 commit comments

Comments
 (0)