Skip to content

Commit 6280628

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 37
1 parent 21b60c0 commit 6280628

1 file changed

Lines changed: 202 additions & 0 deletions

File tree

‎public/37/index.html‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
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 37/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="login">
12+
<div class="title">Login</div>
13+
<div class="inputs" id="inputs">
14+
<input class="empty-input" type="text" placeholder="Empty" />
15+
<input class="username-input" type="text" placeholder="Username" />
16+
<input
17+
class="password-input"
18+
type="password"
19+
placeholder="Password"
20+
/>
21+
</div>
22+
<button type="button" class="button" id="button">
23+
<div class="button-texts">
24+
<div class="button-text-placeholder">Continue</div>
25+
<div class="button-text-1">Continue</div>
26+
<div class="button-text-2">Submit</div>
27+
</div>
28+
</button>
29+
</div>
30+
</main>
31+
32+
<style>
33+
@font-face {
34+
font-family: "SpaceMono";
35+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
36+
font-weight: 700;
37+
}
38+
39+
body {
40+
margin: 0;
41+
overflow: hidden;
42+
display: flex;
43+
-webkit-user-select: none;
44+
user-select: none;
45+
-webkit-tap-highlight-color: transparent;
46+
justify-content: center;
47+
align-items: center;
48+
width: 100vw;
49+
height: 100vh;
50+
background-color: #000;
51+
}
52+
53+
main {
54+
width: calc(100vw - 40px);
55+
padding: 20px;
56+
max-width: 500px;
57+
height: 100vh;
58+
display: flex;
59+
justify-content: center;
60+
}
61+
62+
.login {
63+
width: 100%;
64+
display: flex;
65+
flex-direction: column;
66+
height: 90vh;
67+
}
68+
69+
.title {
70+
color: #fff;
71+
font-size: 60px;
72+
font-family: "SpaceMono", monospace;
73+
font-weight: 700;
74+
text-align: center;
75+
margin-top: auto;
76+
margin-bottom: auto;
77+
}
78+
79+
.inputs {
80+
position: relative;
81+
display: flex;
82+
flex-direction: column;
83+
transform-style: preserve-3d;
84+
transform: rotateX(0deg);
85+
86+
transition: transform 0.5s ease-in-out;
87+
}
88+
89+
.empty-input,
90+
.username-input,
91+
.password-input {
92+
position: absolute;
93+
top: 0;
94+
left: 0;
95+
width: calc(100% - 20px);
96+
border: none;
97+
outline: 3px solid #fff;
98+
outline-offset: -3px;
99+
border-radius: 0px;
100+
padding: 10px;
101+
background-color: #000;
102+
color: #fff;
103+
font-size: 20px;
104+
font-family: "SpaceMono", monospace;
105+
font-weight: 700;
106+
text-align: center;
107+
-webkit-backface-visibility: hidden;
108+
backface-visibility: hidden;
109+
}
110+
111+
input::placeholder {
112+
color: rgba(255, 255, 255, 0.3);
113+
}
114+
115+
.empty-input {
116+
position: relative;
117+
visibility: hidden;
118+
pointer-events: none;
119+
}
120+
121+
.password-input {
122+
transform: rotateX(180deg);
123+
}
124+
125+
.inputs-password {
126+
transform: rotateX(180deg);
127+
}
128+
129+
.button {
130+
position: relative;
131+
cursor: pointer;
132+
width: 100%;
133+
border: none;
134+
background-color: #fff;
135+
border-radius: 0px;
136+
padding: 10px;
137+
margin-bottom: auto;
138+
display: flex;
139+
justify-content: center;
140+
align-items: center;
141+
margin-top: 20px;
142+
143+
transition: background-color 0.25s ease-in-out;
144+
}
145+
146+
.button:hover {
147+
background-color: rgba(255, 255, 255, 0.8);
148+
}
149+
150+
.button-texts {
151+
position: relative;
152+
display: flex;
153+
transform-style: preserve-3d;
154+
transform: rotateX(0deg);
155+
transition: transform 0.5s ease-in-out;
156+
}
157+
158+
.button-text-placeholder,
159+
.button-text-1,
160+
.button-text-2 {
161+
position: absolute;
162+
top: 50%;
163+
left: 50%;
164+
translate: -50% -50%;
165+
color: #000;
166+
font-size: 20px;
167+
font-family: "SpaceMono", monospace;
168+
font-weight: 700;
169+
-webkit-backface-visibility: hidden;
170+
backface-visibility: hidden;
171+
}
172+
173+
.button-text-placeholder {
174+
position: relative;
175+
visibility: hidden;
176+
pointer-events: none;
177+
}
178+
179+
.button-text-2 {
180+
transform: rotateX(180deg);
181+
}
182+
183+
.button-submit .button-texts {
184+
transform: rotateX(180deg);
185+
}
186+
</style>
187+
188+
<script>
189+
const inputs = document.getElementById("inputs");
190+
const button = document.getElementById("button");
191+
192+
button.addEventListener("click", () => {
193+
inputs.classList.toggle("inputs-password");
194+
if (button.classList.contains("button-submit")) {
195+
location.href = "";
196+
} else {
197+
button.classList.add("button-submit");
198+
}
199+
});
200+
</script>
201+
</body>
202+
</html>

0 commit comments

Comments
 (0)