Skip to content

Commit e6d8e4a

Browse files
its-acromaticits-acromatic
authored
Create temp-signin-or-signup-v3.html
1 parent 655dc0b commit e6d8e4a

1 file changed

Lines changed: 281 additions & 0 deletions

File tree

‎temp-signin-or-signup-v3.html‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
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>Random Floating Bubbles</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+
position: relative;
40+
}
41+
42+
.left {
43+
padding: 50px;
44+
background: #181818;
45+
color: #ffffff;
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+
.bubble-wrapper {
72+
position: absolute;
73+
animation: float-anim linear infinite;
74+
}
75+
76+
77+
.bubble {
78+
border-radius: 50%;
79+
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 60%),
80+
conic-gradient(from 90deg, #4fa3ff, #ff4f81, #4fff9d, #4fa3ff);
81+
background-blend-mode: screen;
82+
opacity: 0.25;
83+
filter: blur(1px) brightness(1.2);
84+
box-shadow: inset -4px -4px 12px rgba(255,255,255,0.05),
85+
inset 4px 4px 12px rgba(0,0,0,0.2),
86+
0 0 20px rgba(255, 255, 255, 0.06);
87+
z-index: 1;
88+
transition: transform 0.15s ease-out;
89+
position: absolute;
90+
}
91+
92+
@keyframes float-anim {
93+
0% { transform: translate(0px, 0px); }
94+
50% { transform: translate(var(--x), var(--y)); }
95+
100% { transform: translate(0px, 0px); }
96+
}
97+
98+
.right {
99+
padding: 60px 40px;
100+
background: linear-gradient(to bottom right, #2a2a2a, #1e1e1e);
101+
color: #fff;
102+
}
103+
104+
.right h2 {
105+
font-size: 24px;
106+
margin-bottom: 30px;
107+
}
108+
109+
.form-group {
110+
display: flex;
111+
flex-direction: column;
112+
gap: 15px;
113+
}
114+
115+
.form-group input {
116+
padding: 12px;
117+
background: #2c2c2c;
118+
border: none;
119+
border-radius: 6px;
120+
color: #fff;
121+
}
122+
123+
.form-group input::placeholder {
124+
color: #888;
125+
}
126+
127+
.options {
128+
display: flex;
129+
justify-content: space-between;
130+
align-items: center;
131+
font-size: 13px;
132+
color: #aaa;
133+
margin: 10px 0 20px 0;
134+
}
135+
136+
.options a {
137+
color: #4fa3ff;
138+
text-decoration: none;
139+
}
140+
141+
.btn-primary {
142+
width: 100%;
143+
padding: 12px;
144+
background: #4fa3ff;
145+
border: none;
146+
color: #fff;
147+
border-radius: 6px;
148+
font-weight: bold;
149+
margin-bottom: 15px;
150+
cursor: pointer;
151+
}
152+
153+
.divider {
154+
text-align: center;
155+
color: #777;
156+
margin: 10px 0;
157+
}
158+
159+
.btn-secondary {
160+
width: 100%;
161+
padding: 12px;
162+
background: transparent;
163+
border: 2px solid #4fa3ff;
164+
color: #4fa3ff;
165+
border-radius: 6px;
166+
font-weight: bold;
167+
cursor: pointer;
168+
}
169+
170+
.signup-text {
171+
text-align: center;
172+
font-size: 13px;
173+
color: #aaa;
174+
margin-top: 20px;
175+
}
176+
177+
.signup-text a {
178+
color: #4fa3ff;
179+
text-decoration: none;
180+
}
181+
182+
@media (max-width: 768px) {
183+
.wrapper {
184+
flex-direction: column;
185+
border-radius: 12px;
186+
}
187+
188+
.left, .right {
189+
padding: 30px 20px;
190+
}
191+
192+
.left h1 {
193+
font-size: 28px;
194+
}
195+
}
196+
</style>
197+
</head>
198+
<body>
199+
<div class="wrapper">
200+
<div class="left" id="bubble-area">
201+
<h1>WELCOME</h1>
202+
<h3>Your Headline Name</h3>
203+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
204+
<!-- Bubbles will be injected by JS -->
205+
</div>
206+
207+
<div class="right">
208+
<h2>Sign in</h2>
209+
<form>
210+
<div class="form-group">
211+
<input type="text" placeholder="User Name" />
212+
<input type="password" placeholder="Password" />
213+
</div>
214+
<div class="options">
215+
<label><input type="checkbox" /> Remember me</label>
216+
<a href="#">Forgot Password?</a>
217+
</div>
218+
<button class="btn-primary" type="submit">Sign in</button>
219+
<div class="divider">or</div>
220+
<button class="btn-secondary" type="button">Sign in with other</button>
221+
<p class="signup-text">Don't have an account? <a href="#">Sign Up</a></p>
222+
</form>
223+
</div>
224+
</div>
225+
226+
<script>
227+
const area = document.getElementById('bubble-area');
228+
const bubbleCount = 8;
229+
230+
for (let i = 0; i < bubbleCount; i++) {
231+
const wrapper = document.createElement('div');
232+
wrapper.classList.add('bubble-wrapper');
233+
234+
const bubble = document.createElement('div');
235+
bubble.classList.add('bubble');
236+
237+
const size = 40 + Math.random() * 40;
238+
bubble.style.width = `${size}px`;
239+
bubble.style.height = `${size}px`;
240+
241+
// ✅ Now apply position to wrapper, not bubble
242+
wrapper.style.top = `${Math.random() * 85}%`;
243+
wrapper.style.left = `${Math.random() * 85}%`;
244+
245+
// Random animation movement
246+
const x = `${Math.random() * 40 - 20}px`;
247+
const y = `${Math.random() * 40 - 20}px`;
248+
wrapper.style.setProperty('--x', x);
249+
wrapper.style.setProperty('--y', y);
250+
wrapper.style.animationDuration = `${6 + Math.random() * 6}s`;
251+
252+
wrapper.appendChild(bubble);
253+
area.appendChild(wrapper);
254+
}
255+
256+
257+
// Repel Effect
258+
document.addEventListener('mousemove', (e) => {
259+
const bubbles = document.querySelectorAll('.bubble');
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+
const dx = e.clientX - centerX;
265+
const dy = e.clientY - centerY;
266+
const dist = Math.sqrt(dx * dx + dy * dy);
267+
const maxDist = 100;
268+
const strength = 25;
269+
270+
if (dist < maxDist) {
271+
const offsetX = -(dx / dist) * strength;
272+
const offsetY = -(dy / dist) * strength;
273+
bubble.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
274+
} else {
275+
bubble.style.transform = `translate(0px, 0px)`;
276+
}
277+
});
278+
});
279+
</script>
280+
</body>
281+
</html>

0 commit comments

Comments
 (0)