forked from PankajkandpalL/Project1MG-TATA
-
Notifications
You must be signed in to change notification settings - Fork 0
/
otp2.html
116 lines (112 loc) · 6.2 KB
/
otp2.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
<!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>Confirming</title>
<link
rel="icon"
type="image/x-icon"
href="data:image/png;base64,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"
/>
<style>
body{
background-image: url(https://www.curtainsjs.com/images/intro-background.jpg);
display: flex;
position: relative;
}
#form{
background-color: rgb(241, 233, 233);
box-shadow: rgba(136, 165, 191, 0.349) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
padding-left: 20px;
border-radius: 15px;
width: 350px;
margin: auto;
padding-top: 30px;
padding-bottom: 20px;
margin-bottom: 20px;
position: absolute;
left: 570px;
top: 200px;
}
input:hover{
transform: scale(1.1);
cursor: text;
box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
}
input{
transition: all 1s ease;
padding: 12px;
border-radius: 9px;
margin-top: 10px;
border: 1px solid grey;
width: 80%;
border:rgb(209, 204, 204);
background-color:whitesmoke;
color: rgb(46, 106, 66);
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}
img{
width: 130px;
height: 87px;
position: absolute;
top: 0px;
left: 120px;
border-radius: 70%;
}
#submit{
width: 40%;
font-size: 15px;
color: whitesmoke;
background-color: rgb(209, 204, 204);
position: absolute;
transition: all 500ms ease;
left: 120px;
top: 210px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#submit:hover{
cursor: pointer;
transform: scale(1.2);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
label{
font-size: 20px;
color: rgba(97, 24, 109, 0.589);
filter: blur(0);
font-display: swap;
font-family: 'Archivo', sans-serif;
}
p{
color: red;
}
</style>
</head>
<body>
<div>
<form id="form">
<label for="">ENTER OTP</label><br>
<i><p>*Enter the OTP sent to your mobile number +9195******20 to confirm the order.</p></i>
<input type="number" id="number" required="required" placeholder="Enter OTP"><br><br>
<input type="submit" id="submit" value="SUBMIT">
</form>
</div>
</body>
</html>
<script>
var form=document.querySelector("#form");
form.addEventListener("submit", reset);
function reset(){
event.preventDefault();
if(form.number.value=="1234")
{
alert("OTP Verified")
window.location.href="Order Completion.html"
}
else if(form.number.value!="1234")
{
alert("Wrong Credentials")
}
}
</script>