Skip to content

Commit 497cdb8

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 42
1 parent 0d2ca65 commit 497cdb8

1 file changed

Lines changed: 234 additions & 0 deletions

File tree

‎public/42/index.html‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
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 42/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="dropdown" id="dropdown">
12+
<div class="dropdown-item placeholder" id="dropdown-placeholder">
13+
September
14+
</div>
15+
<div class="dropdown-content" id="dropdown-content">
16+
<div class="dropdown-item">January</div>
17+
<div class="dropdown-item">February</div>
18+
<div class="dropdown-item">March</div>
19+
<div class="dropdown-item">April</div>
20+
<div class="dropdown-item">May</div>
21+
<div class="dropdown-item">June</div>
22+
<div class="dropdown-item">July</div>
23+
<div class="dropdown-item">August</div>
24+
<div class="dropdown-item">September</div>
25+
<div class="dropdown-item">October</div>
26+
<div class="dropdown-item">November</div>
27+
<div class="dropdown-item">December</div>
28+
</div>
29+
<svg
30+
class="dropdown-icon"
31+
version="1.1"
32+
xmlns="http://www.w3.org/2000/svg"
33+
xmlns:xlink="http://www.w3.org/1999/xlink"
34+
viewBox="0 0 12.5093 17.5529"
35+
>
36+
<g>
37+
<rect height="17.5529" opacity="0" width="12.5093" x="0" y="0" />
38+
<path
39+
d="M12.5093 8.77158C12.5031 8.37216 12.3588 8.03887 12.0366 7.72645L4.52897 0.371912C4.27244 0.12205 3.97065 0 3.60184 0C2.874 0 2.28152 0.579605 2.28152 1.31101C2.28152 1.67005 2.42886 2.00335 2.6938 2.26873L9.37463 8.76847L2.6938 15.2744C2.43197 15.5367 2.28152 15.8664 2.28152 16.2353C2.28152 16.9635 2.874 17.5463 3.60184 17.5463C3.96444 17.5463 4.27244 17.4242 4.52897 17.1677L12.0366 9.8167C12.3619 9.49762 12.5093 9.16788 12.5093 8.77158Z"
40+
/>
41+
</g>
42+
</svg>
43+
</div>
44+
</main>
45+
46+
<style>
47+
@font-face {
48+
font-family: "SpaceMono";
49+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
50+
font-weight: 700;
51+
}
52+
53+
:root {
54+
--dropdown-height: 44px;
55+
--dropdown-top: 0px;
56+
}
57+
58+
body {
59+
margin: 0;
60+
overflow: hidden;
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
user-select: none;
65+
-webkit-user-select: none;
66+
-webkit-tap-highlight-color: transparent;
67+
width: 100vw;
68+
height: 100vh;
69+
background-color: #000;
70+
}
71+
72+
main {
73+
width: 100vw;
74+
max-width: 300px;
75+
height: 100vh;
76+
display: flex;
77+
flex-direction: column;
78+
align-items: center;
79+
}
80+
81+
.dropdown {
82+
position: relative;
83+
cursor: pointer;
84+
display: flex;
85+
flex-direction: column;
86+
overflow: hidden;
87+
height: var(--dropdown-height);
88+
89+
margin-top: max(5vw, 20px);
90+
outline: 3px solid #fff;
91+
outline-offset: 6px;
92+
border-radius: 22px;
93+
94+
transition: height 0.5s ease-in-out;
95+
}
96+
97+
.dropdown-icon {
98+
position: absolute;
99+
top: 14px;
100+
right: 10px;
101+
width: 16px;
102+
height: 16px;
103+
fill: #fff;
104+
105+
transition: right 0.5s ease-in-out;
106+
}
107+
108+
.dropdown.open .dropdown-icon {
109+
right: -16px;
110+
}
111+
112+
.dropdown-content {
113+
position: absolute;
114+
top: var(--dropdown-top);
115+
left: 0;
116+
width: 100%;
117+
display: flex;
118+
flex-direction: column;
119+
120+
transition: top 0.5s ease-in-out;
121+
}
122+
123+
.dropdown-item {
124+
position: relative;
125+
cursor: pointer;
126+
color: #fff;
127+
font-family: "SpaceMono", monospace;
128+
font-weight: 700;
129+
font-size: 16px;
130+
padding: 10px;
131+
padding-left: 15px;
132+
padding-right: 35px;
133+
134+
transition: color 0.25s ease-in-out;
135+
}
136+
137+
.dropdown-item::after {
138+
content: "";
139+
position: absolute;
140+
top: 0;
141+
left: 0;
142+
width: 100%;
143+
height: 100%;
144+
border-radius: 22px;
145+
background-color: rgba(255, 255, 255, 0.15);
146+
scale: 0.7;
147+
opacity: 0%;
148+
transition: scale 0.25s ease-in-out, opacity 0.25s ease-in-out;
149+
}
150+
151+
.dropdown-item:hover::after {
152+
scale: 1;
153+
opacity: 100%;
154+
}
155+
156+
.placeholder {
157+
visibility: hidden;
158+
pointer-events: none;
159+
}
160+
</style>
161+
162+
<script>
163+
let months = [
164+
"January",
165+
"February",
166+
"March",
167+
"April",
168+
"May",
169+
"June",
170+
"July",
171+
"August",
172+
"September",
173+
"October",
174+
"November",
175+
"December",
176+
];
177+
let month = new Date().getMonth();
178+
let monthName = months[month];
179+
const dropdown = document.getElementById("dropdown");
180+
const dropdownContent = document.getElementById("dropdown-content");
181+
const dropdownItem = document.getElementById("dropdown-item");
182+
const dropdownPlaceholder = document.getElementById(
183+
"dropdown-placeholder"
184+
);
185+
186+
function updateDropdownHeight() {
187+
if (dropdown.classList.contains("open")) {
188+
document.documentElement.style.setProperty(
189+
"--dropdown-height",
190+
`${dropdownContent.offsetHeight}px`
191+
);
192+
} else {
193+
document.documentElement.style.setProperty(
194+
"--dropdown-height",
195+
`${dropdownPlaceholder.offsetHeight}px`
196+
);
197+
}
198+
}
199+
200+
const observer = new ResizeObserver(() => {
201+
updateDropdownHeight();
202+
});
203+
204+
for (const index in dropdownContent.children) {
205+
dropdownContent.children[index].onclick = (e) => {
206+
e.preventDefault();
207+
e.stopPropagation();
208+
if (dropdown.classList.contains("open")) {
209+
monthName = dropdownContent.children[index].textContent;
210+
document.documentElement.style.setProperty(
211+
"--dropdown-top",
212+
`${index * dropdownPlaceholder.offsetHeight * -1}px`
213+
);
214+
} else {
215+
document.documentElement.style.setProperty(
216+
"--dropdown-top",
217+
`${0}px`
218+
);
219+
}
220+
dropdown.classList.toggle("open");
221+
updateDropdownHeight();
222+
};
223+
}
224+
225+
document.documentElement.style.setProperty(
226+
"--dropdown-top",
227+
`${month * -44}px`
228+
);
229+
230+
updateDropdownHeight();
231+
observer.observe(dropdownContent);
232+
</script>
233+
</body>
234+
</html>

0 commit comments

Comments
 (0)