-
Notifications
You must be signed in to change notification settings - Fork 1
/
index-forgot.html
121 lines (109 loc) · 4.3 KB
/
index-forgot.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edification:Forgot Password/Roll No.?</title>
<link rel="stylesheet" href="css/styles-sign-in.css" />
<link rel="stylesheet" href="css/style-sign-in-responsive.css">
<link rel="icon" href="images/favicon.png" />
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet" />
</head>
<body>
<div class="top-container">
<div class="left-top">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Edification!", "Finishing Step to JEE.", "Main and Advanced Level Mock Test.", "Tips and Tricks and Much More.", "Thank you!!" ]'>
<span class="wrap"></span>
</a>
</h1>
</div>
<img class="wave" src="images/graphic-3053767_1280s.png" alt="wave-img" />
<div class="right-top">
<div class="logo">
<img src="images/logo.png" alt="Logo-img" />
</div>
<div class="message">
<p>Thank you for using Edification.</p>
<p>But it seems you are getting an issue while Logging-in.</p>
<p>Don't worry with few Simple Steps you can again Log-in.</p>
<h3 style="color: #00d1ff;">Please Enter your Details.</h3>
<p style="color: red;" id="msg"></p>
</div>
<div class="log-in">
<input type="number" name="roll-no." id="" placeholder="Roll No." /><br />
<input type="number" name="number" id="" placeholder="Registerd Mobile No." /><br />
<input type="number" name="number" id="" placeholder="Enter OTP" /><br />
<button onclick="mymsg()" type="button" class="button-submit">
Generate OTP</button
><br />
<button type="button" id="myButton" class="button-submit">
Next Step
</button>
<br />
</div>
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById("myButton").onclick = function() {
location.href = "index-forgot-next.html";
};
function mymsg() {
document.getElementById("msg").innerHTML =
"An OTP has been send to your E-Mail and Mobile.";
}
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = "";
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) {
delta /= 2;
}
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === "") {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName("typewrite");
for (var i = 0; i < elements.length; i++) {
var toRotate = elements[i].getAttribute("data-type");
var period = elements[i].getAttribute("data-period");
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML =
".typewrite > .wrap { border-right: 0.08em solid #393e46}";
document.body.appendChild(css);
};
</script>
</html>