-
Notifications
You must be signed in to change notification settings - Fork 1
/
login.html
118 lines (104 loc) · 4.74 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
<!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, user-scalable=no">
<meta name="theme-color" content="black">
<title>Aquaregia-Login</title>
<link rel="icon" type="image/x-icon" href="faviconjpground.png">
<!-- aos cdn -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!-- stylesheet -->
<link rel="stylesheet" href="login.css">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
</head>
<body>
<main>
<div class="bigdaddy-flexbox">
<!-- login div on left side -->
<div class="login-main-container">
<!-- form -->
<form class="login" action="/login" method="post">
<div class="back-to-home-div"><div id="arrow-left" onclick="history.back()"></div>></div>
<div class="login-heading-div"><h1 id="big-login-heading">LOGIN</h1></div>
<!-- email password div -->
<div class="email-password-div">
<div class="email-div"><label for="email" id="email-label">Email ID</label>
<input type="text" id="email" required>
</div>
<div class="password-div">
<label for="password" id="password-label">Password</label>
<div id="eyetoggle">
<i class="fas fa-eye" id="show"></i>
<i class="fas fa-eye-slash" id="hide"></i>
</div>
<input type="password" id="password" required>
</div>
</div>
<div class="login-btn-div"><button id="login-btn">Login</button></div>
</form>
<div class="registeration-link-div">
<p>Don't have an account? <a href="register.html">Register here</a></p>
</div>
</div>
<!-- login div on left ends here -->
<!-- side wallpaper div -->
<div class="side-wallpaper-main-container"></div>
</div>
</main>
<script>
let emailField = document.getElementById("email");
let passwordField = document.getElementById("password");
emailField.addEventListener('focus',focusemailFunction)
function focusemailFunction(e) {
document.getElementById("email-label").classList.add("active");
document.getElementById('big-login-heading').classList.add("login-heading-opacity-function");
}
emailField.addEventListener('blur',bluremailFunction)
function bluremailFunction(e) {
if (emailField.value === "") {
document.getElementById("email-label").classList.remove("active");
document.getElementById('big-login-heading').classList.remove("login-heading-opacity-function");
}
else{
document.getElementById('big-login-heading').classList.remove("login-heading-opacity-function");
}
}
passwordField.addEventListener('focus', focusFunctionpassword)
function focusFunctionpassword(f) {
document.getElementById("password-label").classList.add("active");
document.getElementById('big-login-heading').classList.add("login-heading-opacity-function");
}
passwordField.addEventListener('blur', blurFunctionpassword)
function blurFunctionpassword(f) {
if (passwordField.value === "") {
document.getElementById("password-label").classList.remove("active");
document.getElementById('big-login-heading').classList.remove("login-heading-opacity-function");
}
else{
document.getElementById('big-login-heading').classList.remove("login-heading-opacity-function");
}
}
let eyeBtn = document.getElementById("eyetoggle");
let hide = document.getElementById("hide");
let show = document.getElementById("show");
eyeBtn.addEventListener('click',passwordSee);
function passwordSee(g){
if (passwordField.type === "password"){
passwordField.type = "text";
show.style.display = "block";
hide.style.display = "none";
}
else{
passwordField.type = "password";
show.style.display = "none";
hide.style.display = "block";
}
}
</script>
</body>
</html>