Skip to content

Commit 655dc0b

Browse files
its-acromaticits-acromatic
authored
Create temp-signin-or-up-v2.html
1 parent dd6ef31 commit 655dc0b

1 file changed

Lines changed: 283 additions & 0 deletions

File tree

‎temp-signin-or-up-v2.html‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
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+
<title>Interactive Bubbles Login</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
font-family: 'Segoe UI', sans-serif;
13+
}
14+
15+
body {
16+
background: #0b0b0b;
17+
min-height: 100vh;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
padding: 20px;
22+
}
23+
24+
.wrapper {
25+
width: 100%;
26+
max-width: 950px;
27+
display: flex;
28+
background: #121212;
29+
border-radius: 20px;
30+
overflow: hidden;
31+
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
32+
flex-wrap: wrap;
33+
position: relative;
34+
}
35+
36+
.left, .right {
37+
flex: 1 1 400px;
38+
min-width: 300px;
39+
}
40+
41+
.left {
42+
padding: 50px;
43+
background: #181818;
44+
color: #ffffff;
45+
position: relative;
46+
overflow: hidden;
47+
}
48+
49+
.left h1 {
50+
font-size: 36px;
51+
margin-bottom: 10px;
52+
z-index: 2;
53+
position: relative;
54+
}
55+
56+
.left h3 {
57+
font-size: 16px;
58+
color: #aaa;
59+
margin-bottom: 20px;
60+
z-index: 2;
61+
position: relative;
62+
}
63+
64+
.left p {
65+
font-size: 14px;
66+
color: #bbbbbb;
67+
z-index: 2;
68+
position: relative;
69+
}
70+
71+
/* Wrapper floats */
72+
.bubble-wrapper {
73+
position: absolute;
74+
animation: float 8s ease-in-out infinite;
75+
}
76+
77+
@keyframes float {
78+
0% { transform: translateY(0); }
79+
50% { transform: translateY(-25px); }
80+
100% { transform: translateY(0); }
81+
}
82+
83+
/* Actual bubble inside */
84+
.bubble {
85+
border-radius: 50%;
86+
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 60%),
87+
conic-gradient(from 90deg, #4fa3ff, #ff4f81, #4fff9d, #4fa3ff);
88+
background-blend-mode: screen;
89+
opacity: 0.3;
90+
filter: blur(1px) brightness(1.2);
91+
box-shadow: inset -8px -8px 20px rgba(255,255,255,0.05),
92+
inset 8px 8px 20px rgba(0,0,0,0.2),
93+
0 0 40px rgba(255, 255, 255, 0.06);
94+
z-index: 1;
95+
transition: transform 0.15s ease-out;
96+
}
97+
98+
/* Individual bubble positions */
99+
.bubble1 {
100+
width: 140px;
101+
height: 140px;
102+
}
103+
104+
.bubble2 {
105+
width: 200px;
106+
height: 200px;
107+
}
108+
109+
.bubble-wrapper.bubble1 {
110+
bottom: -20px;
111+
left: -30px;
112+
animation-delay: 0s;
113+
}
114+
115+
.bubble-wrapper.bubble2 {
116+
top: 80px;
117+
right: -50px;
118+
animation-delay: 3s;
119+
}
120+
121+
.right {
122+
padding: 60px 40px;
123+
background: linear-gradient(to bottom right, #2a2a2a, #1e1e1e);
124+
color: #fff;
125+
}
126+
127+
.right h2 {
128+
font-size: 24px;
129+
margin-bottom: 30px;
130+
}
131+
132+
.form-group {
133+
display: flex;
134+
flex-direction: column;
135+
gap: 15px;
136+
}
137+
138+
.form-group input {
139+
padding: 12px;
140+
background: #2c2c2c;
141+
border: none;
142+
border-radius: 6px;
143+
color: #fff;
144+
}
145+
146+
.form-group input::placeholder {
147+
color: #888;
148+
}
149+
150+
.options {
151+
display: flex;
152+
justify-content: space-between;
153+
align-items: center;
154+
font-size: 13px;
155+
color: #aaa;
156+
margin: 10px 0 20px 0;
157+
}
158+
159+
.options a {
160+
color: #4fa3ff;
161+
text-decoration: none;
162+
}
163+
164+
.btn-primary {
165+
width: 100%;
166+
padding: 12px;
167+
background: #4fa3ff;
168+
border: none;
169+
color: #fff;
170+
border-radius: 6px;
171+
font-weight: bold;
172+
margin-bottom: 15px;
173+
cursor: pointer;
174+
}
175+
176+
.divider {
177+
text-align: center;
178+
color: #777;
179+
margin: 10px 0;
180+
}
181+
182+
.btn-secondary {
183+
width: 100%;
184+
padding: 12px;
185+
background: transparent;
186+
border: 2px solid #4fa3ff;
187+
color: #4fa3ff;
188+
border-radius: 6px;
189+
font-weight: bold;
190+
cursor: pointer;
191+
}
192+
193+
.signup-text {
194+
text-align: center;
195+
font-size: 13px;
196+
color: #aaa;
197+
margin-top: 20px;
198+
}
199+
200+
.signup-text a {
201+
color: #4fa3ff;
202+
text-decoration: none;
203+
}
204+
205+
@media (max-width: 768px) {
206+
.wrapper {
207+
flex-direction: column;
208+
border-radius: 12px;
209+
}
210+
211+
.left, .right {
212+
padding: 30px 20px;
213+
}
214+
215+
.left h1 {
216+
font-size: 28px;
217+
}
218+
}
219+
</style>
220+
</head>
221+
<body>
222+
<div class="wrapper">
223+
<div class="left">
224+
<h1>WELCOME</h1>
225+
<h3>Your Headline Name</h3>
226+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
227+
228+
<!-- Bubble wrappers -->
229+
<div class="bubble-wrapper bubble1">
230+
<div class="bubble bubble1" id="bubble1"></div>
231+
</div>
232+
<div class="bubble-wrapper bubble2">
233+
<div class="bubble bubble2" id="bubble2"></div>
234+
</div>
235+
</div>
236+
237+
<div class="right">
238+
<h2>Sign in</h2>
239+
<form>
240+
<div class="form-group">
241+
<input type="text" placeholder="User Name" />
242+
<input type="password" placeholder="Password" />
243+
</div>
244+
<div class="options">
245+
<label><input type="checkbox" /> Remember me</label>
246+
<a href="#">Forgot Password?</a>
247+
</div>
248+
<button class="btn-primary" type="submit">Sign in</button>
249+
<div class="divider">or</div>
250+
<button class="btn-secondary" type="button">Sign in with other</button>
251+
<p class="signup-text">Don't have an account? <a href="#">Sign Up</a></p>
252+
</form>
253+
</div>
254+
</div>
255+
256+
<script>
257+
const bubbles = document.querySelectorAll('.bubble');
258+
259+
document.addEventListener('mousemove', (e) => {
260+
bubbles.forEach((bubble) => {
261+
const rect = bubble.getBoundingClientRect();
262+
const centerX = rect.left + rect.width / 2;
263+
const centerY = rect.top + rect.height / 2;
264+
265+
const dx = e.clientX - centerX;
266+
const dy = e.clientY - centerY;
267+
const dist = Math.sqrt(dx * dx + dy * dy);
268+
269+
const maxDist = 150;
270+
const strength = 30;
271+
272+
if (dist < maxDist) {
273+
const offsetX = -(dx / dist) * strength;
274+
const offsetY = -(dy / dist) * strength;
275+
bubble.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
276+
} else {
277+
bubble.style.transform = `translate(0px, 0px)`;
278+
}
279+
});
280+
});
281+
</script>
282+
</body>
283+
</html>

0 commit comments

Comments
 (0)