-
Notifications
You must be signed in to change notification settings - Fork 147
/
login.html
133 lines (119 loc) · 4.89 KB
/
login.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
<!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>Login</title>
<link rel="stylesheet" href="login.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="Username" class="input-field">
<input type="password" id="password" placeholder="Password" class="input-field">
<button type="submit" class="submit-button">Login</button>
</form>
<p class="already-signed-up">
Don't have an account? <a href="./signup.html"> Sign Up</a>
</p>
<p class="forgot password">
Forgot Password? <a href="./forgot-password.html">Click Here</a>
</p>
</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);
</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>