-
Notifications
You must be signed in to change notification settings - Fork 1
/
signup.html
131 lines (109 loc) · 4.6 KB
/
signup.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
<!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>Signup &Signin Page</title>
</head>
<body>
<div id="navbar">
<img src="https://www.netmeds.com/assets/gloryweb/images/home-logo-netmeds-new.svg" alt="" />
<div id="bar">
<input type="text" placeholder="Deliver to 11002" name="" id="">
<i class="fa-solid fa-angle-down fa-1x" style="color: #6d7583;"></i>
<p style="color: #6d7583">|</p>
<input placeholder="Search for medicine and wellness products.." type="text" name="" id="">
<button id="search" type="submit"><i class="fa-solid fa-magnifying-glass-plus fa-2x" style="color:#2874F0;"></i></button>
</div>
<div>
<i class="fa-solid fa-receipt fa-2x"></i>
<p>Upload</p>
</div>
<div>
<i class="fa-solid fa-cart-shopping fa-2x"></i>
<p>Cart</p>
</div>
</div>
<div id="parent">
<div>
<img src="https://www.netmeds.com/images/cms/wysiwyg/cms/1680000865_New_Dest_deal.png" alt="netmeds images">
</div>
<div>
<h3>Sign In / Sign Up</h3>
<p>Sign up or Sign in to access your orders, special offers, health tips and more!</p>
<div id="userinformation">
<label for=""> EMAIL</label>
<br>
<input type="email" id="email-input" placeholder="Enter your email" />
<br>
<br>
<label for="">NAME</label>
<br>
<input type="text" placeholder="Enter your name" />
<br>
<br>
<label for=""> LAST NAME</label>
<br>
<input type="text" placeholder="Enter your last name" />
</div>
<div id="number_show">
<h5>
VERIFYING NUMBER</h5>
<div >
<p>We have sent 6 digit OTP on 91+ <b>9802705402</b> </p>
<a href="/Netmeds/signupp.html" >change</a>
</div>
</div>
<form action="">
<div class="otp-box">
<div class="otp-inputs">
<input type="text" maxlength="1" pattern="[0-9]" />
<input type="text" maxlength="1" pattern="[0-9]" />
<input type="text" maxlength="1" pattern="[0-9]" />
<input type="text" maxlength="1" pattern="[0-9]" />
<input type="text" maxlength="1" pattern="[0-9]" />
<input type="text" maxlength="1" pattern="[0-9]" />
</div>
</div>
<div id="verifybox">
<button id="verify-btn" type="submit">VERIFY</button>
</div>
</form>
</div>
</div>
<div id="noneatnid">
<h2>Please rotate your device</h2>
<br>
<br>
<p>We don't support landscape mode yet. Please go back to portrait mode for the best experience</p>
</div>
</body>
<script>
const otpInputs = document.querySelectorAll('.otp-inputs input');
const verifyBtn = document.querySelector('#verify-btn');
otpInputs.forEach((input, index) => {
input.addEventListener('input', (event) => {
if (event.target.value && index < otpInputs.length - 1) {
otpInputs[index + 1].focus();
} else if (!event.target.value && index > 0) {
otpInputs[index - 1].focus();
}
});
});
const emailInput = document.getElementById('email-input');
emailInput.addEventListener('blur', () => {
const email = emailInput.value;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert('Please enter a valid email address');
}
});
verifyBtn.addEventListener('click', () => {
const otpValue = Array.from(otpInputs).map(input => input.value).join('');
if (otpValue === '') {
alert('Please enter the OTP');
}
});
</script>
</html>