Skip to content

Commit 7cbdc5c

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 98
1 parent 2494341 commit 7cbdc5c

File tree

1 file changed

+177
-0
lines changed

1 file changed

+177
-0
lines changed

‎public/98/index.html‎

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

0 commit comments

Comments
 (0)