forked from anuragverma108/SwapReads
-
Notifications
You must be signed in to change notification settings - Fork 0
/
signup1.html
135 lines (116 loc) · 5.23 KB
/
signup1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<style>
/* Circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 50%;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
transition: transform 0.1s ease-out;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; background-color: #fddde6; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;">
<!-- Circles -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div style="background-color: white; padding: 60px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 350px; text-align: center;">
<h2 style="color: #b30000; margin-bottom: 20px;">Create Account</h2>
<!-- Username Field -->
<input type="text" placeholder="Username" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;">
<!-- Email Field -->
<input type="email" placeholder="Email" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;">
<!-- Password Field -->
<input type="password" placeholder="Password" style="width: 100%; padding: 10px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;">
<!-- Password Requirements -->
<p style="color: #b30000; font-size: 12px; text-align: left; margin-bottom: 15px; padding-left: 5px;">
• Lowercase & Uppercase <br>
• Number (0-9) <br>
• Special Character (!@#$%^&*) <br>
• At least 8 characters
</p>
<!-- Confirm Password Field -->
<input type="password" placeholder="Confirm Password" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;">
<!-- Sign in with Google Button -->
<button style="background-color: #4285f4; color: white; border: none; padding: 10px; width: 100%; border-radius: 5px; font-size: 16px; cursor: pointer; margin-bottom: 20px;">
<img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="Google Icon" style="margin-right: 5px; vertical-align: middle;"> Sign In with Google
</button>
<!-- Register Button -->
<button style="background-color: #b30000; color: white; border: none; padding: 10px; width: 100%; border-radius: 5px; font-size: 16px; cursor: pointer;">
Register
</button>
</div>
<script>
// Coordinates for the cursor
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
// Colors for the circles
const colors = [
"#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
"#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
"#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
"#680060", "#60005f", "#48005f", "#3d005e"
];
// Assign colors and initial position to each circle
circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});
// Update the coordinates when the mouse moves
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});
// Animation function to move the circles
function animateCircles() {
let x = coords.x;
let y = coords.y;
circles.forEach(function (circle, index) {
// Update the position and scale of each circle
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;
circle.x = x;
circle.y = y;
// Get the next circle in the sequence
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
// Repeat the animation
requestAnimationFrame(animateCircles);
}
// Start the animation
animateCircles();
</script>
</body>
</html>