Skip to content

Commit 7c1e732

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 67
1 parent d7b2055 commit 7c1e732

File tree

3 files changed

+187
-19
lines changed

3 files changed

+187
-19
lines changed

‎public/65/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@
6969
width: 100%;
7070
height: 100%;
7171
border-radius: 50%;
72-
outline: 4px solid rgba(235, 235, 235, 1);
73-
outline-offset: -4px;
72+
outline: 4.8px solid rgba(235, 235, 235, 1);
73+
outline-offset: -4.8px;
7474
z-index: 1;
7575
opacity: 1;
7676
transition: opacity 0.5s 0.5s ease-in-out;

‎public/66/index.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
</head>
88
<body>
99
<main>
10-
<div class="checkmark-circle" id="checkmark-circle">
10+
<div class="xmark-circle" id="xmark-circle">
1111
<svg
12-
class="checkmark-circle-icon"
12+
class="xmark-circle-icon"
1313
version="1.1"
1414
xmlns="http://www.w3.org/2000/svg"
1515
xmlns:xlink="http://www.w3.org/1999/xlink"
1616
viewBox="0 0 50 50"
1717
>
18-
<circle class="checkmark-circle-inner" cx="25" cy="25" r="23" />
18+
<circle class="xmark-circle-inner" cx="25" cy="25" r="23" />
1919
</svg>
2020
<div class="xmark">
2121
<div class="x-1"></div>
@@ -44,7 +44,7 @@
4444
background-color: #fff;
4545
}
4646

47-
.checkmark-circle {
47+
.xmark-circle {
4848
position: relative;
4949
cursor: pointer;
5050
width: 60px;
@@ -53,22 +53,22 @@
5353
transition: all 0.5s ease-in-out;
5454
}
5555

56-
.checkmark-circle::before {
56+
.xmark-circle::before {
5757
content: "";
5858
position: absolute;
5959
top: 0;
6060
left: 0;
6161
width: 100%;
6262
height: 100%;
6363
border-radius: 50%;
64-
outline: 4px solid rgba(235, 235, 235, 1);
65-
outline-offset: -4px;
64+
outline: 4.8px solid rgba(235, 235, 235, 1);
65+
outline-offset: -4.8px;
6666
z-index: 1;
6767
opacity: 1;
6868
transition: opacity 0.5s 0.5s ease-in-out;
6969
}
7070

71-
.checkmark-circle-icon {
71+
.xmark-circle-icon {
7272
position: absolute;
7373
top: 50%;
7474
left: 50%;
@@ -79,7 +79,7 @@
7979
overflow: visible;
8080
}
8181

82-
.checkmark-circle-inner {
82+
.xmark-circle-inner {
8383
fill: none;
8484
transform-origin: center;
8585
rotate: -90deg;
@@ -93,7 +93,7 @@
9393
opacity 0.2s 0.8s ease-in-out;
9494
}
9595

96-
.checkmark-icon {
96+
.xmark-icon {
9797
position: absolute;
9898
top: 50%;
9999
left: 50%;
@@ -122,30 +122,30 @@
122122
transform: translate(-50%, -50%) rotate(-45deg);
123123
}
124124

125-
.checkmark-circle-selected::before {
125+
.xmark-circle-selected::before {
126126
opacity: 0;
127127
transition: opacity 0.5s ease-in-out;
128128
}
129129

130-
.checkmark-circle-selected .checkmark-circle-inner {
130+
.xmark-circle-selected .xmark-circle-inner {
131131
stroke-dashoffset: 0;
132132
opacity: 1;
133133
transition: stroke-dashoffset 1s ease-in-out, opacity 0.2s ease-in-out;
134134
}
135135

136-
.checkmark-circle-selected .x-1,
137-
.checkmark-circle-selected .x-2 {
136+
.xmark-circle-selected .x-1,
137+
.xmark-circle-selected .x-2 {
138138
width: 50%;
139139
opacity: 1;
140140
transition: width 0.5s 0.3s ease-in-out, opacity 0.2s 0.3s ease-in-out;
141141
}
142142
</style>
143143

144144
<script>
145-
const checkmarkCircle = document.getElementById("checkmark-circle");
145+
const xmarkCircle = document.getElementById("xmark-circle");
146146

147-
checkmarkCircle.addEventListener("click", () => {
148-
checkmarkCircle.classList.toggle("checkmark-circle-selected");
147+
xmarkCircle.addEventListener("click", () => {
148+
xmarkCircle.classList.toggle("xmark-circle-selected");
149149
});
150150
</script>
151151
</body>

‎public/67/index.html‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
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="questionmark-circle" id="questionmark-circle">
11+
<svg
12+
class="questionmark-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="questionmark-circle-inner" cx="25" cy="25" r="23" />
19+
</svg>
20+
<svg
21+
class="questionmark-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 10.44 20"
26+
>
27+
<path
28+
class="questionmark-icon-line"
29+
d="M5.02,13.69v-1.11c0-1.53.48-2.29,2.24-3.56,1.96-1.43,2.68-2.55,2.68-4.16C9.94,2.38,7.92.5,5.24.5,2.98.5,1.21,1.94.66,3.88c-.12.42-.16.73-.16.94"
30+
/>
31+
<circle class="questionmark-icon-circle" cx="5.02" cy="20" r="1.75" />
32+
</svg>
33+
</div>
34+
</main>
35+
36+
<style>
37+
@font-face {
38+
font-family: "SpaceMono";
39+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
40+
font-weight: 700;
41+
}
42+
43+
body {
44+
margin: 0;
45+
overflow: hidden;
46+
display: flex;
47+
flex-direction: column;
48+
justify-content: center;
49+
align-items: center;
50+
-webkit-tap-highlight-color: transparent;
51+
width: 100vw;
52+
height: 100vh;
53+
background-color: #fff;
54+
}
55+
56+
.questionmark-circle {
57+
position: relative;
58+
cursor: pointer;
59+
width: 60px;
60+
height: 60px;
61+
62+
transition: all 0.5s ease-in-out;
63+
}
64+
65+
.questionmark-circle::before {
66+
content: "";
67+
position: absolute;
68+
top: 0;
69+
left: 0;
70+
width: 100%;
71+
height: 100%;
72+
border-radius: 50%;
73+
outline: 4.8px solid rgba(235, 235, 235, 1);
74+
outline-offset: -4.8px;
75+
z-index: 1;
76+
opacity: 1;
77+
transition: opacity 0.5s 0.5s ease-in-out;
78+
}
79+
80+
.questionmark-circle-icon {
81+
position: absolute;
82+
top: 50%;
83+
left: 50%;
84+
transform: translate(-50%, -50%);
85+
width: 100%;
86+
height: 100%;
87+
z-index: 2;
88+
overflow: visible;
89+
}
90+
91+
.questionmark-circle-inner {
92+
fill: none;
93+
transform-origin: center;
94+
rotate: -90deg;
95+
stroke: #000;
96+
stroke-width: 4px;
97+
stroke-linecap: round;
98+
stroke-dasharray: 314.1592653589793;
99+
stroke-dashoffset: 314.1592653589793;
100+
opacity: 0;
101+
transition: stroke-dashoffset 1s ease-in-out,
102+
opacity 0.2s 0.8s ease-in-out;
103+
}
104+
105+
.questionmark-icon {
106+
position: absolute;
107+
top: 50%;
108+
left: 50%;
109+
transform: translate(-50%, -50%);
110+
height: 28px;
111+
z-index: 2;
112+
overflow: visible;
113+
}
114+
115+
.questionmark-icon-line {
116+
fill: none;
117+
stroke: #000;
118+
stroke-width: 3.5px;
119+
stroke-linecap: round;
120+
stroke-dasharray: 40;
121+
stroke-dashoffset: 55;
122+
opacity: 0;
123+
transition: stroke-dashoffset 0.5s ease-in-out,
124+
opacity 0.2s 0.3s ease-in-out;
125+
}
126+
127+
.questionmark-icon-circle {
128+
fill: #000;
129+
opacity: 0;
130+
scale: 0;
131+
transform-origin: center center;
132+
transition: opacity 0.3s ease-in-out, scale 0.3s ease-in-out;
133+
}
134+
135+
.questionmark-circle-selected::before {
136+
opacity: 0;
137+
transition: opacity 0.5s ease-in-out;
138+
}
139+
140+
.questionmark-circle-selected .questionmark-circle-inner {
141+
stroke-dashoffset: 0;
142+
opacity: 1;
143+
transition: stroke-dashoffset 1s ease-in-out, opacity 0.2s ease-in-out;
144+
}
145+
146+
.questionmark-circle-selected .questionmark-icon-line {
147+
stroke-dashoffset: 80;
148+
opacity: 1;
149+
transition: stroke-dashoffset 0.5s 0.5s ease-in-out,
150+
opacity 0.2s 0.5s ease-in-out;
151+
}
152+
153+
.questionmark-circle-selected .questionmark-icon-circle {
154+
opacity: 1;
155+
scale: 1;
156+
transition: opacity 0.3s 0.7s ease-in-out, scale 0.3s 0.7s ease-in-out;
157+
}
158+
</style>
159+
160+
<script>
161+
const questionmarkCircle = document.getElementById("questionmark-circle");
162+
163+
questionmarkCircle.addEventListener("click", () => {
164+
questionmarkCircle.classList.toggle("questionmark-circle-selected");
165+
});
166+
</script>
167+
</body>
168+
</html>

0 commit comments

Comments
 (0)