Skip to content

Commit e0f2563

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 47-48
1 parent 8a2a235 commit e0f2563

2 files changed

Lines changed: 257 additions & 0 deletions

File tree

‎public/47/index.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
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 47/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="toggle" id="toggle">
12+
<div class="pixel-1"></div>
13+
<div class="pixel-2"></div>
14+
<div class="pixel-3"></div>
15+
<div class="pixel-4"></div>
16+
<div class="pixel-5"></div>
17+
<div class="pixel-6"></div>
18+
<div class="pixel-7"></div>
19+
<div class="pixel-8"></div>
20+
<div class="pixel-9"></div>
21+
<div class="pixel-0"></div>
22+
</div>
23+
</main>
24+
25+
<style>
26+
body {
27+
margin: 0;
28+
overflow: hidden;
29+
display: flex;
30+
justify-content: center;
31+
align-items: center;
32+
width: 100vw;
33+
height: 100vh;
34+
background-color: #000;
35+
}
36+
37+
.toggle {
38+
position: relative;
39+
cursor: pointer;
40+
41+
height: 100px;
42+
aspect-ratio: 12/5;
43+
background-color: rgba(30, 30, 30, 1);
44+
}
45+
46+
.pixel-1,
47+
.pixel-2,
48+
.pixel-3,
49+
.pixel-4,
50+
.pixel-5,
51+
.pixel-6,
52+
.pixel-7,
53+
.pixel-8,
54+
.pixel-9,
55+
.pixel-0 {
56+
position: absolute;
57+
height: 20%;
58+
aspect-ratio: 1/1;
59+
background-color: #fff;
60+
transition: transform 0.5s ease-in-out,
61+
background-color 0.5s ease-in-out;
62+
}
63+
64+
.pixel-1 {
65+
top: 0%;
66+
left: 0%;
67+
}
68+
69+
.pixel-2 {
70+
top: 0%;
71+
transform: translate(400%, 0%);
72+
}
73+
74+
.pixel-3 {
75+
top: 20%;
76+
transform: translate(100%, 0%);
77+
}
78+
79+
.pixel-4 {
80+
top: 20%;
81+
transform: translate(300%, 0%);
82+
}
83+
84+
.pixel-5,
85+
.pixel-0 {
86+
top: 40%;
87+
transform: translate(200%, 0%);
88+
}
89+
90+
.pixel-6 {
91+
top: 60%;
92+
transform: translate(100%, 0%);
93+
}
94+
95+
.pixel-7 {
96+
top: 60%;
97+
transform: translate(300%, 0%);
98+
}
99+
100+
.pixel-8 {
101+
top: 80%;
102+
transform: translate(0%, 0%);
103+
}
104+
105+
.pixel-9 {
106+
top: 80%;
107+
transform: translate(400%, 0%);
108+
}
109+
110+
.toggle-on .pixel-1,
111+
.toggle-on .pixel-2,
112+
.toggle-on .pixel-3,
113+
.toggle-on .pixel-4,
114+
.toggle-on .pixel-5,
115+
.toggle-on .pixel-6,
116+
.toggle-on .pixel-7,
117+
.toggle-on .pixel-8,
118+
.toggle-on .pixel-9,
119+
.toggle-on .pixel-0 {
120+
background-color: #fff;
121+
}
122+
123+
.toggle-on .pixel-1,
124+
.toggle-on .pixel-2 {
125+
transform: translate(1100%, 0%);
126+
}
127+
128+
.toggle-on .pixel-3,
129+
.toggle-on .pixel-4 {
130+
transform: translate(1000%, 0%);
131+
}
132+
133+
.toggle-on .pixel-5 {
134+
transform: translate(900%, 0%);
135+
}
136+
137+
.toggle-on .pixel-0 {
138+
transform: translate(500%, 0%);
139+
}
140+
141+
.toggle-on .pixel-6 {
142+
transform: translate(600%, 0%);
143+
}
144+
145+
.toggle-on .pixel-7 {
146+
transform: translate(800%, 0%);
147+
}
148+
149+
.toggle-on .pixel-8,
150+
.toggle-on .pixel-9 {
151+
transform: translate(700%, 0%);
152+
}
153+
</style>
154+
</body>
155+
156+
<script>
157+
const toggle = document.getElementById("toggle");
158+
159+
toggle.addEventListener("click", () => {
160+
toggle.classList.toggle("toggle-on");
161+
});
162+
</script>
163+
</html>

‎public/48/index.html‎

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

0 commit comments

Comments
 (0)