Skip to content

Commit aef3e65

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 49
1 parent e0f2563 commit aef3e65

1 file changed

Lines changed: 169 additions & 0 deletions

File tree

‎public/49/index.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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 49/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="tabbar tabbar-1" id="tabbar">
12+
<div class="tab-selector"></div>
13+
<div class="tab-item tab-item-1" id="tab-item-1">Home</div>
14+
<div class="tab-item tab-item-2" id="tab-item-2">Events</div>
15+
<div class="tab-item tab-item-3" id="tab-item-3">Profile</div>
16+
</div>
17+
</main>
18+
19+
<style>
20+
@font-face {
21+
font-family: "SpaceMono";
22+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
23+
font-weight: 700;
24+
}
25+
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+
.tabbar {
38+
max-width: calc(100vw - 20px);
39+
margin: 10px;
40+
position: relative;
41+
display: grid;
42+
grid-template-columns: repeat(3, 1fr);
43+
overflow: scroll;
44+
border-radius: 9px;
45+
outline: 3px solid #fff;
46+
/* background-color: rgba(30, 30, 30, 1); */
47+
}
48+
49+
.tab-item {
50+
position: relative;
51+
color: #fff;
52+
padding: 20px;
53+
padding-top: 16px;
54+
padding-bottom: 16px;
55+
font-size: 18px;
56+
font-family: "SpaceMono", monospace;
57+
font-weight: 700;
58+
text-align: center;
59+
cursor: pointer;
60+
transition: color 0.5s ease-in-out;
61+
}
62+
63+
.tab-selector {
64+
position: absolute;
65+
bottom: 6px;
66+
left: 6px;
67+
width: calc(100% / 3 - 12px);
68+
height: calc(100% - 12px);
69+
border-radius: 4px;
70+
background-color: #fff;
71+
transition: left 0.5s ease-in-out, height 0.25s ease-in-out;
72+
}
73+
74+
.tabbar-hover-1 .tab-selector,
75+
.tabbar-hover-2 .tab-selector,
76+
.tabbar-hover-3 .tab-selector {
77+
height: 3px;
78+
}
79+
80+
.tabbar-1 .tab-selector {
81+
left: 6px;
82+
}
83+
.tabbar-2 .tab-selector {
84+
left: calc(100% / 3 + 6px);
85+
}
86+
.tabbar-3 .tab-selector {
87+
left: calc(100% / 3 * 2 + 6px);
88+
}
89+
90+
.tabbar-hover-1 .tab-selector {
91+
left: 6px;
92+
}
93+
.tabbar-hover-2 .tab-selector {
94+
left: calc(100% / 3 + 6px);
95+
}
96+
.tabbar-hover-3 .tab-selector {
97+
left: calc(100% / 3 * 2 + 6px);
98+
}
99+
100+
.tabbar-1.tabbar-hover-1 .tab-selector,
101+
.tabbar-2.tabbar-hover-2 .tab-selector,
102+
.tabbar-3.tabbar-hover-3 .tab-selector {
103+
height: calc(100% - 12px);
104+
}
105+
106+
.tabbar-1 .tab-item-1,
107+
.tabbar-2 .tab-item-2,
108+
.tabbar-3 .tab-item-3 {
109+
color: #000;
110+
}
111+
112+
.tabbar-hover-1 .tab-item,
113+
.tabbar-hover-2 .tab-item,
114+
.tabbar-hover-3 .tab-item {
115+
color: #fff;
116+
}
117+
118+
.tabbar-1.tabbar-hover-1 .tab-item-1,
119+
.tabbar-2.tabbar-hover-2 .tab-item-2,
120+
.tabbar-3.tabbar-hover-3 .tab-item-3 {
121+
color: #000;
122+
}
123+
</style>
124+
125+
<script>
126+
const tabbar = document.getElementById("tabbar");
127+
const tabitem1 = document.getElementById("tab-item-1");
128+
const tabitem2 = document.getElementById("tab-item-2");
129+
const tabitem3 = document.getElementById("tab-item-3");
130+
131+
tabbar.addEventListener("mousemove", (e) => {
132+
const rect = tabbar.getBoundingClientRect();
133+
const x = e.clientX - rect.left;
134+
const width = rect.width;
135+
const selectorPercent = (x / width) * 100;
136+
if (selectorPercent < 33.33) {
137+
tabbar.classList.add("tabbar-hover-1");
138+
tabbar.classList.remove("tabbar-hover-2", "tabbar-hover-3");
139+
} else if (selectorPercent < 66.66) {
140+
tabbar.classList.add("tabbar-hover-2");
141+
tabbar.classList.remove("tabbar-hover-1", "tabbar-hover-3");
142+
} else {
143+
tabbar.classList.add("tabbar-hover-3");
144+
tabbar.classList.remove("tabbar-hover-1", "tabbar-hover-2");
145+
}
146+
});
147+
148+
tabbar.addEventListener("mouseleave", () => {
149+
tabbar.classList.remove(
150+
"tabbar-hover-1",
151+
"tabbar-hover-2",
152+
"tabbar-hover-3"
153+
);
154+
});
155+
156+
tabitem1.addEventListener("click", () => {
157+
tabbar.classList = "tabbar tabbar-1";
158+
});
159+
160+
tabitem2.addEventListener("click", () => {
161+
tabbar.classList = "tabbar tabbar-2";
162+
});
163+
164+
tabitem3.addEventListener("click", () => {
165+
tabbar.classList = "tabbar tabbar-3";
166+
});
167+
</script>
168+
</body>
169+
</html>

0 commit comments

Comments
 (0)