Skip to content

Commit 319f122

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 56
1 parent 5e31b62 commit 319f122

1 file changed

Lines changed: 100 additions & 0 deletions

File tree

‎public/56/index.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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 56/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="toggle" id="toggle">
12+
<div class="toggle-indicator" id="toggle-indicator">
13+
<div class="circle"></div>
14+
<div class="line"></div>
15+
</div>
16+
</div>
17+
</main>
18+
19+
<style>
20+
body {
21+
margin: 0;
22+
overflow: hidden;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
-webkit-tap-highlight-color: transparent;
27+
width: 100vw;
28+
height: 100vh;
29+
background-color: #000;
30+
}
31+
32+
.toggle {
33+
position: relative;
34+
cursor: pointer;
35+
width: 200px;
36+
height: 100px;
37+
outline: 8px solid #fff;
38+
}
39+
40+
.toggle-indicator {
41+
position: absolute;
42+
top: 0%;
43+
left: 0%;
44+
width: 100px;
45+
height: 100px;
46+
border-radius: 100px;
47+
background-color: #fff;
48+
transform-origin: center;
49+
transition: all 0.5s ease-in-out;
50+
}
51+
52+
.circle {
53+
position: absolute;
54+
top: 50%;
55+
left: 50%;
56+
transform: translate(-50%, -50%);
57+
width: 60px;
58+
height: 60px;
59+
border-radius: 100px;
60+
outline: 8px solid #000;
61+
opacity: 1;
62+
transition: all 0.5s ease-in-out;
63+
}
64+
65+
.line {
66+
position: absolute;
67+
top: 50%;
68+
left: 50%;
69+
transform: translate(-50%, -50%);
70+
width: 8px;
71+
height: 76px;
72+
border-radius: 8px;
73+
background-color: #000;
74+
opacity: 0;
75+
transition: all 0.5s ease-in-out;
76+
}
77+
78+
.toggle-on .toggle-indicator {
79+
left: calc(100% - 100px);
80+
rotate: 180deg;
81+
}
82+
83+
.toggle-on .circle {
84+
opacity: 0;
85+
}
86+
87+
.toggle-on .line {
88+
opacity: 1;
89+
}
90+
</style>
91+
92+
<script>
93+
const toggle = document.getElementById("toggle");
94+
95+
toggle.addEventListener("click", () => {
96+
toggle.classList.toggle("toggle-on");
97+
});
98+
</script>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)