Skip to content

Commit 004b467

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 94
1 parent 8580239 commit 004b467

File tree

1 file changed

+159
-0
lines changed

1 file changed

+159
-0
lines changed

‎public/94/index.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
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 94/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="toggle" id="toggle">
12+
<div class="toggle-space" id="toggle-space"></div>
13+
<div class="toggle-1" id="toggle-1">
14+
<svg
15+
version="1.1"
16+
xmlns="http://www.w3.org/2000/svg"
17+
xmlns:xlink="http://www.w3.org/1999/xlink"
18+
viewBox="0 0 16.7236 23.5156"
19+
class="icon"
20+
>
21+
<g>
22+
<rect height="23.5156" opacity="0" width="16.7236" x="0" y="0" />
23+
<path
24+
d="M8.18359 14.3262C10.2148 14.3262 11.8994 12.7881 11.8994 10.4883L11.8994 3.84277C11.8994 1.54297 10.2148 0 8.18359 0C6.14258 0 4.44336 1.53809 4.44336 3.83789L4.44336 10.4883C4.44336 12.7881 6.14258 14.3262 8.18359 14.3262ZM8.18359 18.5742C12.8564 18.5742 16.3623 15.5664 16.3623 10.8154L16.3623 8.96484C16.3623 8.29102 15.8057 7.77344 15.1221 7.77344C14.4434 7.77344 13.8721 8.29102 13.8721 8.96484L13.8721 10.7373C13.8721 14.0625 11.4893 16.2158 8.18359 16.2158C4.87305 16.2158 2.49023 14.0625 2.49023 10.7373L2.49023 8.96484C2.49023 8.29102 1.92383 7.77344 1.23535 7.77344C0.551758 7.77344 0 8.29102 0 8.96484L0 10.8154C0 15.5664 3.50098 18.5742 8.18359 18.5742ZM3.49121 22.4805L12.8662 22.4805C13.5449 22.4805 14.126 21.9287 14.126 21.2646C14.126 20.5859 13.5449 20.0391 12.8662 20.0391L3.49121 20.0391C2.81738 20.0391 2.23633 20.5859 2.23633 21.2646C2.23633 21.9287 2.81738 22.4805 3.49121 22.4805ZM8.18848 21.8994C8.83301 21.8994 9.35059 21.3477 9.35059 20.6982L9.35059 17.832C9.35059 17.1826 8.83301 16.6309 8.18848 16.6309C7.54395 16.6309 7.01172 17.1826 7.01172 17.832L7.01172 20.6982C7.01172 21.3477 7.54395 21.8994 8.18848 21.8994Z"
25+
/>
26+
</g>
27+
</svg>
28+
<span>Mute</span>
29+
</div>
30+
<div class="toggle-2" id="toggle-2">
31+
<svg
32+
version="1.1"
33+
xmlns="http://www.w3.org/2000/svg"
34+
xmlns:xlink="http://www.w3.org/1999/xlink"
35+
viewBox="0 0 21.2512 24.0161"
36+
class="icon"
37+
>
38+
<g>
39+
<rect height="24.0161" opacity="0" width="21.2512" x="0" y="0" />
40+
<path
41+
d="M4.75404 9.21509L4.75404 10.9875C4.75404 14.3127 7.14174 16.4661 10.4425 16.4661C11.5179 16.4661 12.4967 16.2382 13.3252 15.8127L15.1189 17.6027C14.1105 18.2149 12.9256 18.6102 11.6193 18.7506L11.6193 20.2893L15.1349 20.2893C15.8087 20.2893 16.3849 20.8362 16.3849 21.5149C16.3849 22.179 15.8087 22.7307 15.1349 22.7307L5.75502 22.7307C5.08119 22.7307 4.50013 22.179 4.50013 21.5149C4.50013 20.8362 5.08119 20.2893 5.75502 20.2893L9.27552 20.2893L9.27552 18.7516C5.19332 18.2982 2.26869 15.411 2.26869 11.0657L2.26869 9.21509C2.26869 8.54126 2.82045 8.02368 3.50404 8.02368C4.18275 8.02368 4.75404 8.54126 4.75404 9.21509ZM11.8287 14.3193C11.3997 14.4879 10.9311 14.5764 10.4425 14.5764C8.40638 14.5764 6.70228 13.0383 6.70228 10.7385L6.70228 9.20354ZM18.6261 9.21509L18.6261 11.0657C18.6261 12.3071 18.3871 13.4295 17.9454 14.4067L15.9696 12.4332C16.084 11.9841 16.1408 11.4997 16.1408 10.9875L16.1408 9.21509C16.1408 8.54126 16.7023 8.02368 17.3859 8.02368C18.0695 8.02368 18.6261 8.54126 18.6261 9.21509ZM14.1681 4.09302L14.1681 10.6339L6.78123 3.25576C7.13758 1.42469 8.66328 0.250244 10.4425 0.250244C12.4786 0.250244 14.1681 1.79321 14.1681 4.09302Z"
42+
/>
43+
<path
44+
d="M18.548 19.1809C18.8703 19.4983 19.3927 19.5032 19.7101 19.1809C20.0177 18.8586 20.0324 18.3411 19.7101 18.0188L3.22572 1.54907C2.90834 1.23169 2.37611 1.22681 2.05385 1.54907C1.74623 1.86646 1.74623 2.40356 2.05385 2.71118Z"
45+
/>
46+
</g>
47+
</svg>
48+
<span>Unmute</span>
49+
</div>
50+
</div>
51+
</main>
52+
53+
<style>
54+
@font-face {
55+
font-family: "SpaceMono";
56+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
57+
font-weight: 700;
58+
}
59+
60+
body {
61+
margin: 0;
62+
overflow: hidden;
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
min-height: 100vh;
67+
background-color: #000;
68+
}
69+
70+
.toggle {
71+
position: relative;
72+
cursor: pointer;
73+
overflow: hidden;
74+
border-radius: 1000px;
75+
outline: 3px solid #fff;
76+
transition: background-color 0.3s ease-in-out;
77+
}
78+
79+
.toggle:hover {
80+
background-color: #fff;
81+
}
82+
83+
.toggle-1,
84+
.toggle-2 {
85+
position: absolute;
86+
top: 50%;
87+
left: 0%;
88+
transform: translate(0%, -50%);
89+
display: flex;
90+
align-items: center;
91+
gap: 10px;
92+
color: #fff;
93+
font-family: "SpaceMono";
94+
font-size: 22px;
95+
font-weight: 700;
96+
text-align: center;
97+
line-height: 1;
98+
transition: translate 0.5s ease-in-out, color 0.3s ease-in-out;
99+
}
100+
101+
.icon {
102+
width: 24px;
103+
height: 24px;
104+
fill: #fff;
105+
transition: fill 0.3s ease-in-out;
106+
}
107+
108+
.toggle:hover .toggle-1,
109+
.toggle:hover .toggle-2 {
110+
color: #000;
111+
}
112+
113+
.toggle:hover .icon {
114+
fill: #000;
115+
}
116+
117+
.toggle-1 {
118+
translate: 0% 0%;
119+
}
120+
121+
.toggle-2 {
122+
translate: 0% 200%;
123+
}
124+
125+
.toggle-on .toggle-1 {
126+
translate: 0% -200%;
127+
}
128+
129+
.toggle-on .toggle-2 {
130+
translate: 0% 0%;
131+
}
132+
</style>
133+
134+
<script>
135+
let toggle = document.getElementById("toggle");
136+
let toggleSpace = document.getElementById("toggle-space");
137+
let toggle1 = document.getElementById("toggle-1");
138+
let toggle2 = document.getElementById("toggle-2");
139+
140+
function updateToggleSpace() {
141+
const width = Math.max(toggle1.offsetWidth, toggle2.offsetWidth);
142+
const height = Math.max(toggle1.offsetHeight, toggle2.offsetHeight);
143+
toggleSpace.style.width = `${width + height * 1.25}px`;
144+
toggleSpace.style.height = `${height * 2}px`;
145+
toggle1.style.left = `${height * 0.625}px`;
146+
toggle2.style.left = `${height * 0.625}px`;
147+
}
148+
149+
document.onresize = () => {
150+
updateToggleSpace();
151+
};
152+
updateToggleSpace();
153+
154+
toggle.onclick = () => {
155+
toggle.classList.toggle("toggle-on");
156+
};
157+
</script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)