forked from apu52/Travel_Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
newLogin.html
108 lines (101 loc) · 4.1 KB
/
newLogin.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
<!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">
<title>Tourguide</title>
<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">
<title>TOUR GUIDE</title>
<link rel="icon" type="image/x-icon" href="log/favicon.ico">
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./login/login.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container register-container">
<form action="#" id="registerForm">
<h1>Tour Guide</h1>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<div id="register-section">
<input type="password" placeholder="Password" id="registerPassword">
<button type="button" id="toggleRegisterPassword">
<i id="registerIcon" class="fas fa-eye"></i>
</button>
</div>
<button type="submit">Register</button>
<span id="registerMessage" style="display: none;">Account created successfully</span>
<div class="social-container">
<a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
<a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>
<div class="form-container login-container">
<form action="#" id="loginForm">
<h1>Tour Guide</h1>
<input type="email" placeholder="Email">
<div id="login-section">
<input type="password" placeholder="Password" id="loginPassword">
<button type="button" id="toggleLoginPassword">
<i id="loginIcon" class="fas fa-eye"></i>
</button>
</div>
<div class="content">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox">
<label>Remember me</label>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
</div>
<button type="submit">Login</button>
<span>or use your account</span>
<div class="social-container">
<a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
<a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1 class="title">Hello <br> friends</h1>
<p>if you have an account, login here and have fun</p>
<button class="ghost" id="login">Login
<i class="lni lni-arrow-left login"></i>
</button>
</div>
<div class="overlay-panel overlay-right">
<h1 class="title">Start your <br> journey now</h1>
<p>if you don't have an account yet, join us and start your journey.</p>
<button class="ghost" id="register">Register
<i class="lni lni-arrow-right register"></i>
</button>
</div>
</div>
</div>
</div>
<script src="login\script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const registerButton = document.getElementById("register");
const container = document.getElementById("container");
registerButton.addEventListener("click", (event) => {
event.preventDefault();
container.classList.add("right-panel-active");
document.getElementById("registerForm").scrollIntoView({ behavior: "smooth" });
});
});
</script>
</body>
</html>