Skip to content

Commit 6db7bb3

Browse files
Pankaj-StrPankaj-Str
committed
Add Error.html, Login.html, Welcome.html, and logic.js for user authentication flow
1 parent 9b7f030 commit 6db7bb3

4 files changed

Lines changed: 391 additions & 0 deletions

File tree

‎Example/Lectures/04 Day/Error.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
10+
<div class="container mt-5 col-md-4">
11+
<h1>Error</h1>
12+
<p class="text-danger">An error occurred while processing your request.</p>
13+
<a href="Login.html" class="btn btn-primary">Go Back to Login</a>
14+
</div>
15+
16+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
17+
18+
</body>
19+
</html>

‎Example/Lectures/04 Day/Login.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
8+
9+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
10+
11+
<script src="logic.js"></script>
12+
</head>
13+
<body>
14+
15+
<div class="container mt-5 col-md-4">
16+
<h1>Login</h1>
17+
<form>
18+
<div class="mb-3">
19+
<label class="form-label">Username</label>
20+
<input type="text" class="form-control" id="username" required>
21+
</div>
22+
<div class="mb-3">
23+
<label class="form-label">Password</label>
24+
<input type="password" class="form-control" id="password" required>
25+
</div>
26+
<button type="button" class="btn btn-primary" onclick="login_logic()">Login</button>
27+
</form>
28+
29+
30+
</body>
31+
</html>

‎Example/Lectures/04 Day/Welcome.html‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<meta name="description" content="">
8+
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
9+
<meta name="generator" content="Hugo 0.72.0">
10+
<title>Album example · Bootstrap</title>
11+
12+
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/album/">
13+
14+
15+
16+
<!-- Bootstrap core CSS -->
17+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
18+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
19+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
20+
21+
<style>
22+
.bd-placeholder-img {
23+
font-size: 1.125rem;
24+
text-anchor: middle;
25+
-webkit-user-select: none;
26+
-moz-user-select: none;
27+
-ms-user-select: none;
28+
user-select: none;
29+
}
30+
31+
@media (min-width: 768px) {
32+
.bd-placeholder-img-lg {
33+
font-size: 3.5rem;
34+
}
35+
}
36+
</style>
37+
38+
39+
</head>
40+
41+
<body>
42+
43+
<header>
44+
<div class="collapse bg-dark" id="navbarHeader">
45+
<div class="container">
46+
<div class="row">
47+
<div class="col-sm-8 col-md-7 py-4">
48+
<h4 class="text-white">About</h4>
49+
<p class="text-muted">Add some information about the album below, the author, or any other background
50+
context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off
51+
to some social networking sites or contact information.</p>
52+
</div>
53+
<div class="col-sm-4 offset-md-1 py-4">
54+
<h4 class="text-white">Contact</h4>
55+
<ul class="list-unstyled">
56+
<li><a href="#" class="text-white">Follow on Twitter</a></li>
57+
<li><a href="#" class="text-white">Like on Facebook</a></li>
58+
<li><a href="#" class="text-white">Email me</a></li>
59+
</ul>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
<div class="navbar navbar-dark bg-dark shadow-sm">
65+
<div class="container">
66+
<a href="#" class="navbar-brand d-flex align-items-center">
67+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
68+
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2"
69+
viewBox="0 0 24 24">
70+
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
71+
<circle cx="12" cy="13" r="4" /></svg>
72+
<strong>Album</strong>
73+
</a>
74+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
75+
aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
76+
<span class="navbar-toggler-icon"></span>
77+
</button>
78+
</div>
79+
</div>
80+
</header>
81+
82+
<main>
83+
84+
<section class="py-5 text-center container">
85+
<div class="row py-lg-5">
86+
<div class="col-lg-6 col-md-8 mx-auto">
87+
<h1 class="font-weight-light">Album example</h1>
88+
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator,
89+
etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
90+
<p>
91+
<a href="#" class="btn btn-primary my-2">Main call to action</a>
92+
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
93+
</p>
94+
</div>
95+
</div>
96+
</section>
97+
98+
<div class="album py-5 bg-light">
99+
<div class="container">
100+
101+
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
102+
<div class="col">
103+
<div class="card shadow-sm">
104+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
105+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
106+
<title>Placeholder</title>
107+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
108+
dy=".3em">Thumbnail</text>
109+
</svg>
110+
111+
<div class="card-body">
112+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
113+
content. This content is a little bit longer.</p>
114+
<div class="d-flex justify-content-between align-items-center">
115+
<div class="btn-group">
116+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
117+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
118+
</div>
119+
<small class="text-muted">9 mins</small>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
<div class="col">
125+
<div class="card shadow-sm">
126+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
127+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
128+
<title>Placeholder</title>
129+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
130+
dy=".3em">Thumbnail</text>
131+
</svg>
132+
133+
<div class="card-body">
134+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
135+
content. This content is a little bit longer.</p>
136+
<div class="d-flex justify-content-between align-items-center">
137+
<div class="btn-group">
138+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
139+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
140+
</div>
141+
<small class="text-muted">9 mins</small>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
<div class="col">
147+
<div class="card shadow-sm">
148+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
149+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
150+
<title>Placeholder</title>
151+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
152+
dy=".3em">Thumbnail</text>
153+
</svg>
154+
155+
<div class="card-body">
156+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
157+
content. This content is a little bit longer.</p>
158+
<div class="d-flex justify-content-between align-items-center">
159+
<div class="btn-group">
160+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
161+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
162+
</div>
163+
<small class="text-muted">9 mins</small>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
169+
<div class="col">
170+
<div class="card shadow-sm">
171+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
172+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
173+
<title>Placeholder</title>
174+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
175+
dy=".3em">Thumbnail</text>
176+
</svg>
177+
178+
<div class="card-body">
179+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
180+
content. This content is a little bit longer.</p>
181+
<div class="d-flex justify-content-between align-items-center">
182+
<div class="btn-group">
183+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
184+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
185+
</div>
186+
<small class="text-muted">9 mins</small>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
<div class="col">
192+
<div class="card shadow-sm">
193+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
194+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
195+
<title>Placeholder</title>
196+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
197+
dy=".3em">Thumbnail</text>
198+
</svg>
199+
200+
<div class="card-body">
201+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
202+
content. This content is a little bit longer.</p>
203+
<div class="d-flex justify-content-between align-items-center">
204+
<div class="btn-group">
205+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
206+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
207+
</div>
208+
<small class="text-muted">9 mins</small>
209+
</div>
210+
</div>
211+
</div>
212+
</div>
213+
<div class="col">
214+
<div class="card shadow-sm">
215+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
216+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
217+
<title>Placeholder</title>
218+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
219+
dy=".3em">Thumbnail</text>
220+
</svg>
221+
222+
<div class="card-body">
223+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
224+
content. This content is a little bit longer.</p>
225+
<div class="d-flex justify-content-between align-items-center">
226+
<div class="btn-group">
227+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
228+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
229+
</div>
230+
<small class="text-muted">9 mins</small>
231+
</div>
232+
</div>
233+
</div>
234+
</div>
235+
236+
<div class="col">
237+
<div class="card shadow-sm">
238+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
239+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
240+
<title>Placeholder</title>
241+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
242+
dy=".3em">Thumbnail</text>
243+
</svg>
244+
245+
<div class="card-body">
246+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
247+
content. This content is a little bit longer.</p>
248+
<div class="d-flex justify-content-between align-items-center">
249+
<div class="btn-group">
250+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
251+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
252+
</div>
253+
<small class="text-muted">9 mins</small>
254+
</div>
255+
</div>
256+
</div>
257+
</div>
258+
<div class="col">
259+
<div class="card shadow-sm">
260+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
261+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
262+
<title>Placeholder</title>
263+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
264+
dy=".3em">Thumbnail</text>
265+
</svg>
266+
267+
<div class="card-body">
268+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
269+
content. This content is a little bit longer.</p>
270+
<div class="d-flex justify-content-between align-items-center">
271+
<div class="btn-group">
272+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
273+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
274+
</div>
275+
<small class="text-muted">9 mins</small>
276+
</div>
277+
</div>
278+
</div>
279+
</div>
280+
<div class="col">
281+
<div class="card shadow-sm">
282+
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
283+
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
284+
<title>Placeholder</title>
285+
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
286+
dy=".3em">Thumbnail</text>
287+
</svg>
288+
289+
<div class="card-body">
290+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
291+
content. This content is a little bit longer.</p>
292+
<div class="d-flex justify-content-between align-items-center">
293+
<div class="btn-group">
294+
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
295+
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
296+
</div>
297+
<small class="text-muted">9 mins</small>
298+
</div>
299+
</div>
300+
</div>
301+
</div>
302+
</div>
303+
</div>
304+
</div>
305+
306+
</main>
307+
308+
<footer class="text-muted py-5">
309+
<div class="container">
310+
<p class="float-right mb-1">
311+
<a href="#">Back to top</a>
312+
</p>
313+
<p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
314+
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a
315+
href="/docs/5.0/getting-started/introduction/">getting started guide</a>.</p>
316+
</div>
317+
</footer>
318+
319+
</body>
320+
321+
</html>

‎Example/Lectures/04 Day/logic.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
function login_logic(){
2+
3+
// get the username and password from the input fields
4+
var username = document.getElementById("username").value;
5+
var password = document.getElementById("password").value;
6+
7+
r_username = "admin";
8+
r_password = "admin@123";
9+
10+
// check if the username and password are correct
11+
if (username === r_username && password === r_password) {
12+
// if correct, redirect to the home page
13+
window.location.href = "welcome.html";
14+
15+
16+
}else{
17+
window.location.href = "Error.html";
18+
}
19+
20+
}

0 commit comments

Comments
 (0)