Skip to content

Commit 45eae3d

Browse files
ceo-uploadsceo-uploads
authored
Add files via upload
1 parent 7e20220 commit 45eae3d

File tree

2 files changed

+303
-0
lines changed

2 files changed

+303
-0
lines changed

‎Cy Login/login.css‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
/* --- Root Variables for the component --- */
2+
.glitch-form-wrapper {
3+
--bg-color: #0d0d0d;
4+
--primary-color: #00f2ea;
5+
--secondary-color: #a855f7;
6+
--text-color: #e5e5e5;
7+
--font-family: "Fira Code", Consolas, "Courier New", Courier, monospace;
8+
--glitch-anim-duration: 0.5s;
9+
}
10+
11+
.glitch-form-wrapper {
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
font-family: var(--font-family);
16+
background-color: #050505;
17+
}
18+
19+
/* --- Card Structure --- */
20+
.glitch-card {
21+
background-color: var(--bg-color);
22+
width: 100%;
23+
max-width: 380px;
24+
border: 1px solid rgba(0, 242, 234, 0.2);
25+
box-shadow:
26+
0 0 20px rgba(0, 242, 234, 0.1),
27+
inset 0 0 10px rgba(0, 0, 0, 0.5);
28+
overflow: hidden;
29+
margin: 1rem;
30+
}
31+
32+
.card-header {
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
background-color: rgba(0, 0, 0, 0.3);
37+
padding: 0.5em 1em;
38+
border-bottom: 1px solid rgba(0, 242, 234, 0.2);
39+
}
40+
41+
.card-title {
42+
color: var(--primary-color);
43+
font-size: 0.8rem;
44+
font-weight: 700;
45+
text-transform: uppercase;
46+
letter-spacing: 0.1em;
47+
display: flex;
48+
align-items: center;
49+
gap: 0.5em;
50+
}
51+
52+
.card-title svg {
53+
width: 1.2em;
54+
height: 1.2em;
55+
stroke: var(--primary-color);
56+
}
57+
58+
.card-dots span {
59+
display: inline-block;
60+
width: 8px;
61+
height: 8px;
62+
border-radius: 50%;
63+
background-color: #333;
64+
margin-left: 5px;
65+
}
66+
67+
.card-body {
68+
padding: 1.5rem;
69+
}
70+
71+
/* --- Form Elements --- */
72+
.form-group {
73+
position: relative;
74+
margin-bottom: 1.5rem;
75+
}
76+
77+
.form-label {
78+
position: absolute;
79+
top: 0.75em;
80+
left: 0;
81+
font-size: 1rem;
82+
color: var(--primary-color);
83+
opacity: 0.6;
84+
text-transform: uppercase;
85+
letter-spacing: 0.1em;
86+
pointer-events: none;
87+
transition: all 0.3s ease;
88+
}
89+
90+
.form-group input {
91+
width: 100%;
92+
background: transparent;
93+
border: none;
94+
border-bottom: 2px solid rgba(0, 242, 234, 0.3);
95+
padding: 0.75em 0;
96+
font-size: 1rem;
97+
color: var(--text-color);
98+
font-family: inherit;
99+
outline: none;
100+
transition: border-color 0.3s ease;
101+
}
102+
103+
.form-group input:focus {
104+
border-color: var(--primary-color);
105+
}
106+
107+
.form-group input:focus + .form-label,
108+
.form-group input:not(:placeholder-shown) + .form-label {
109+
top: -1.2em;
110+
font-size: 0.8rem;
111+
opacity: 1;
112+
}
113+
114+
.form-group input:focus + .form-label::before,
115+
.form-group input:focus + .form-label::after {
116+
content: attr(data-text);
117+
position: absolute;
118+
top: 0;
119+
left: 0;
120+
width: 100%;
121+
height: 100%;
122+
background-color: var(--bg-color);
123+
}
124+
125+
.form-group input:focus + .form-label::before {
126+
color: var(--secondary-color);
127+
animation: glitch-anim var(--glitch-anim-duration)
128+
cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
129+
}
130+
131+
.form-group input:focus + .form-label::after {
132+
color: var(--primary-color);
133+
animation: glitch-anim var(--glitch-anim-duration)
134+
cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
135+
}
136+
137+
@keyframes glitch-anim {
138+
0% {
139+
transform: translate(0);
140+
clip-path: inset(0 0 0 0);
141+
}
142+
20% {
143+
transform: translate(-5px, 3px);
144+
clip-path: inset(50% 0 20% 0);
145+
}
146+
40% {
147+
transform: translate(3px, -2px);
148+
clip-path: inset(20% 0 60% 0);
149+
}
150+
60% {
151+
transform: translate(-4px, 2px);
152+
clip-path: inset(80% 0 5% 0);
153+
}
154+
80% {
155+
transform: translate(4px, -3px);
156+
clip-path: inset(30% 0 45% 0);
157+
}
158+
100% {
159+
transform: translate(0);
160+
clip-path: inset(0 0 0 0);
161+
}
162+
}
163+
164+
/* --- Button Styling --- */
165+
.submit-btn {
166+
width: 100%;
167+
padding: 0.8em;
168+
margin-top: 1rem;
169+
background-color: transparent;
170+
border: 2px solid var(--primary-color);
171+
color: var(--primary-color);
172+
font-family: inherit;
173+
font-size: 1rem;
174+
font-weight: 700;
175+
text-transform: uppercase;
176+
letter-spacing: 0.2em;
177+
cursor: pointer;
178+
position: relative;
179+
transition: all 0.3s;
180+
overflow: hidden;
181+
}
182+
183+
.submit-btn:hover,
184+
.submit-btn:focus {
185+
background-color: var(--primary-color);
186+
color: var(--bg-color);
187+
box-shadow: 0 0 25px var(--primary-color);
188+
outline: none;
189+
}
190+
191+
.submit-btn:active {
192+
transform: scale(0.97);
193+
}
194+
195+
/* --- Glitch Effect for Button --- */
196+
.submit-btn .btn-text {
197+
position: relative;
198+
z-index: 1;
199+
transition: opacity 0.2s ease;
200+
}
201+
202+
.submit-btn:hover .btn-text {
203+
opacity: 0;
204+
}
205+
206+
.submit-btn::before,
207+
.submit-btn::after {
208+
content: attr(data-text);
209+
position: absolute;
210+
top: 0;
211+
left: 0;
212+
width: 100%;
213+
height: 100%;
214+
display: flex;
215+
align-items: center;
216+
justify-content: center;
217+
opacity: 0;
218+
background-color: var(--primary-color);
219+
transition: opacity 0.2s ease;
220+
}
221+
222+
.submit-btn:hover::before,
223+
.submit-btn:focus::before {
224+
opacity: 1;
225+
color: var(--secondary-color);
226+
animation: glitch-anim var(--glitch-anim-duration)
227+
cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
228+
}
229+
230+
.submit-btn:hover::after,
231+
.submit-btn:focus::after {
232+
opacity: 1;
233+
color: var(--bg-color);
234+
animation: glitch-anim var(--glitch-anim-duration)
235+
cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
236+
}
237+
238+
@media (prefers-reduced-motion: reduce) {
239+
.form-group input:focus + .form-label::before,
240+
.form-group input:focus + .form-label::after,
241+
.submit-btn:hover::before,
242+
.submit-btn:focus::before,
243+
.submit-btn:hover::after,
244+
.submit-btn:focus::after {
245+
animation: none;
246+
opacity: 0;
247+
}
248+
249+
.submit-btn:hover .btn-text {
250+
opacity: 1;
251+
}
252+
}

‎Cy Login/login.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Login</title>
8+
<link rel="stylesheet" href="login.css">
9+
</head>
10+
11+
<body>
12+
<!-- From Uiverse.io by pharmacist-sabot -->
13+
<div class="glitch-form-wrapper">
14+
<form class="glitch-card">
15+
<div class="card-header">
16+
<div class="card-title">
17+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
18+
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
19+
stroke-linejoin="round">
20+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
21+
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
22+
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
23+
<path d="M12 11.5a3 3 0 0 0 -3 2.824v1.176a3 3 0 0 0 6 0v-1.176a3 3 0 0 0 -3 -2.824z"></path>
24+
</svg>
25+
<span>Unreal_Key</span>
26+
</div>
27+
28+
<div class="card-dots"><span></span><span></span><span></span></div>
29+
</div>
30+
31+
<div class="card-body">
32+
<div class="form-group">
33+
<input type="text" id="username" name="username" required="" placeholder="" />
34+
<label for="username" class="form-label" data-text="USERNAME">USERNAME</label>
35+
</div>
36+
37+
<div class="form-group">
38+
<input type="password" id="password" name="password" required="" placeholder="" />
39+
<label for="password" class="form-label" data-text="ACCESS_KEY">ACCESS_KEY</label>
40+
</div>
41+
42+
<button data-text="INITIATE_CONNECTION" type="submit" class="submit-btn">
43+
<span class="btn-text">INITIATE_CONNECTION</span>
44+
</button>
45+
</div>
46+
</form>
47+
</div>
48+
49+
</body>
50+
51+
</html>

0 commit comments

Comments
 (0)