-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathOtp.html
93 lines (86 loc) · 3.51 KB
/
Otp.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
<!DOCTYPE html>
<html>
<head>
<title>OTP</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
rel="stylesheet">
<link rel="stylesheet"
type="text/css"
href="css/otp.css">
</head>
<body>
<div class="container">
<div class="nav_bar">
<a href="/"><img src="images/recharge-logo.png" /></a>
<span id="nav_prev">
<svg width="18px" height="18px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Selecting-Network-Operator-Copy-2" transform="translate(-1061.000000, -207.000000)" fill-rule="nonzero" fill="#979797">
<path d="M1063.52266,213.640675 L1074.63269,213.640675 L1074.63269,214.640675 L1063.45232,214.640675 L1069.30491,219.97559 L1068.63125,220.714626 L1061.51829,214.230835 L1068.61453,207.134598 L1069.32164,207.841705 L1063.52266,213.640675 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
<div class="otp_form">
<h3>Enter OTP received on your registered mobile no</h3>
<div class="form-group">
<div class="input-group">
<input type="number"
pattern="[0-9]*"
inputmode="numeric"
class="form-control"
id="otp">
</div>
</div>
<br />
<button disabled=true class="button fullwidth" id="confirm_otp">Continue</button>
<br />
<br />
<button class="button white resend_otp">Resend OTP</button>
<p class="form_message">Try this fast and secure OTP experience brought to you by your bank and BillDesk</p>
</div>
</div>
<div class="billdesk-about">
<img src="images/powered-by-billdesk.png"
class="powered-by">
<img src="images/city-mobile.png"
class="billdesk-city">
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" ></script>
<script type="text/javascript">
$(function() {
$("#nav_prev").on("click", function(e) {
window.history.back();
});
$("#otp").on('input', function() {
var length = $(this).val().length;
if (length >= 4) {
$("#confirm_otp").removeAttr('disabled');
$("#confirm_otp").addClass('primary');
} else {
$("#confirm_otp").attr('disabled', true);
$("#confirm_otp").removeClass('primary');
}
})
});
</script>
</body>
</html>