-
Notifications
You must be signed in to change notification settings - Fork 149
/
forgot-password.html
137 lines (120 loc) · 4.98 KB
/
forgot-password.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
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/logo1.png" type="image/png">
<title>Forgot Password</title>
<link rel="stylesheet" href="forgot-password.css" />
<style>
.circle {
height: 18px;
width: 18px;
border-radius: 24px;
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
z-index: 1000; /* Ensure the trail is above everything */
pointer-events: none; /* Prevent the circles from interfering with mouse events */
}
</style>
</head>
<body>
<!-- 20 circle elements -->
<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 class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="container">
<div class="left-section">
<button class="back-button" onclick="window.location.href='index.html'"><img src="img/back_button.png"
width="50px" height="50px" /></button>
<h1 class="animated-heading">Cab Rental<span class="blinking-cursor">|</span></h1>
<p class="description">
Welcome to Cab Rental, your go-to platform for sharing or renting a cab effortlessly. Whether you're
planning a quick trip across town or a long-distance journey, we provide a convenient and cost-effective
solution to meet your travel needs.
</p>
<form id="loginForm" class="login-form" action="register.php">
<input type="text" id="username" placeholder="Enter Username" class="input-field">
<input type="text" id="email" placeholder="Enter Email Id" class="input-field">
<button type="submit" class="submit-button">Send verification Code</button>
</form>
</div>
<div class="right-section">
<img src="./img/login_1.jpg" alt="car_pics" class="transition-image">
<img src="./img/login_2.jpg" alt="car_pics" class="transition-image">
<img src="./img/login_3.jpg" alt="car_pics" class="transition-image">
<img src="./img/login_4.jpg" alt="car_pics" class="transition-image">
<img src="./img/login_5.jpg" alt="car_pics" class="transition-image">
<img src="./img/login_6.jpg" alt="car_pics" class="transition-image">
<img src="./img/login_7.jpg" alt="car_pics" class="transition-image">
</div>
</div>
<script>
const images = document.querySelectorAll('.transition-image');
let currentImageIndex = 0;
function showNextImage() {
images[currentImageIndex].style.opacity = 0;
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.opacity = 1;
}
setInterval(showNextImage, 3000);
const clicked = document.querySelector('.submit-button');
clicked.addEventListener('click', () => {
alert("Verification Email sent");
});
</script>
<script>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
// Assign initial positions to the circles
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});
window.addEventListener("mousemove", function (e) {
// Use pageX and pageY to account for scroll distance
coords.x = e.pageX;
coords.y = e.pageY;
});
function animateCircles() {
let x = coords.x;
let y = coords.y;
circles.forEach(function (circle, index) {
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;
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
requestAnimationFrame(animateCircles);
}
animateCircles();
</script>
</body>
</html>