Vikas01 commited on
Commit
101870b
1 Parent(s): d92e68b

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +372 -27
templates/index.html CHANGED
@@ -1,30 +1,375 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
- <title>Document</title>
9
- <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
10
- crossorigin="anonymous"></script>
11
- <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> -->
12
- </head>
13
-
14
- <body>
15
- <button onclick="start_camera()">Capture</button>
16
- <button onclick="stop_camera()">stop</button>
17
- <div>
18
- <video autoplay="true" id="videoElement"></video>
19
- <canvas id="canvas" width="400" height="300"></canvas>
20
- </div>
21
- <!-- <div>
22
- <h1>Name: </h1><h3 id="name"></h3></div></br>
23
- <h1>confidence score: </h1><h3 id="score"></h3></div>
24
- </div> -->
25
- <script src="{{ url_for('static',filename='app.js') }}"></script>
26
- <img src="{{ myimage }}" alt="my image" height="100" width="100" border="1">
27
- Cname - {{cname}}
28
- </body>
29
-
30
- </html>
 
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, shrink-to-fit=no" />
6
+ <meta name="description" content="" />
7
+ <meta name="author" content="" />
8
+ <title>Attendance System</title>
9
+ <!-- Favicon-->
10
+ <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
11
+ <!-- Font Awesome icons (free version)-->
12
+ <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
13
+ <!-- Google fonts-->
14
+ <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
15
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
16
+ <!-- Core theme CSS (includes Bootstrap)-->
17
+ <!-- <link href="/css/styles.css" rel="stylesheet" /> -->
18
+ <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='styles/style.css')}}" >
19
+ </head>
20
+ <body id="page-top">
21
+ <!-- Navigation-->
22
+ <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
23
+ <div class="container">
24
+ <a class="navbar-brand" href="#page-top">Attendance System</a>
25
+ <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
26
+ Menu
27
+ <i class="fas fa-bars"></i>
28
+ </button>
29
+ <div class="collapse navbar-collapse" id="navbarResponsive">
30
+ <ul class="navbar-nav ms-auto">
31
+ <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Student</a></li>
32
+ <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
33
+ <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
34
+ </ul>
35
+ </div>
36
+ </div>
37
+ </nav>
38
+ <!-- Masthead-->
39
+ <header class="masthead bg-primary text-white text-center">
40
+ <div class="container d-flex align-items-center flex-column">
41
+ <!-- Masthead Avatar Image-->
42
+ <img src="{{url_for('static',filename='assets/img/avataaars.svg')}}" class="masthead-avatar mb-5" alt="..." />
43
+ <!-- Masthead Heading-->
44
+ <h1 class="masthead-heading text-uppercase mb-0">Attendance System</h1>
45
+ <!-- Icon Divider-->
46
+ <div class="divider-custom divider-light">
47
+ <div class="divider-custom-line"></div>
48
+ <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
49
+ <div class="divider-custom-line"></div>
50
+ </div>
51
+ <!-- Masthead Subheading-->
52
+ <p class="masthead-subheading font-weight-light mb-0">Face Recognition Attendance System</p>
53
+ </div>
54
+ </header>
55
+ <!-- Portfolio Section-->
56
+ <section class="page-section portfolio" id="portfolio">
57
+ <div class="container">
58
+ <!-- Portfolio Section Heading-->
59
+ <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Student</h2>
60
+ <!-- Icon Divider-->
61
+ <div class="divider-custom">
62
+ <div class="divider-custom-line"></div>
63
+ <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
64
+ <div class="divider-custom-line"></div>
65
+ </div>
66
+ <!-- Portfolio Grid Items-->
67
+ <div class="row justify-content-center">
68
+ <!-- Portfolio Item 1-->
69
+ <div class="col-md-6 col-lg-4 mb-5">
70
+ <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
71
+ <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
72
+ <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
73
+ </div>
74
+ <img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/camera.jpg')}}" alt="..." />
75
+ </div>
76
+ </div>
77
+ <!-- Portfolio Item 2-->
78
+ <div class="col-md-6 col-lg-4 mb-5" >
79
+ <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal2">
80
+ <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
81
+ <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
82
+ </div>
83
+ <img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/document.jpg')}}" alt="..." />
84
+ </div>
85
+ </div>
86
+ <!-- Portfolio Item 3-->
87
+ <!-- <div class="col-md-6 col-lg-4 mb-5">
88
+ <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal3">
89
+ <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
90
+ <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
91
+ </div>
92
+ <img class="img-fluid" src="assets/img/portfolio/circus.png" alt="..." />
93
+ </div>
94
+ </div> -->
95
+ <!-- Portfolio Item 4-->
96
+ <!-- <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
97
+ <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal4">
98
+ <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
99
+ <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
100
+ </div>
101
+ <img class="img-fluid" src="assets/img/portfolio/game.png" alt="..." />
102
+ </div>
103
+ </div> -->
104
+ <!-- Portfolio Item 5-->
105
+ <!-- <div class="col-md-6 col-lg-4 mb-5 mb-md-0">
106
+ <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal5">
107
+ <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
108
+ <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
109
+ </div>
110
+ <img class="img-fluid" src="assets/img/portfolio/safe.png" alt="..." />
111
+ </div>
112
+ </div> -->
113
+ <!-- Portfolio Item 6-->
114
+ <!-- <div class="col-md-6 col-lg-4">
115
+ <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal6">
116
+ <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
117
+ <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
118
+ </div>
119
+ <img class="img-fluid" src="assets/img/portfolio/submarine.png" alt="..." />
120
+ </div>
121
+ </div> -->
122
+ </div>
123
+ </div>
124
+ </section>
125
+ <!-- About Section-->
126
+ <section class="page-section bg-primary text-white mb-0" id="about">
127
+ <div class="container">
128
+ <!-- About Section Heading-->
129
+ <h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
130
+ <!-- Icon Divider-->
131
+ <div class="divider-custom divider-light">
132
+ <div class="divider-custom-line"></div>
133
+ <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
134
+ <div class="divider-custom-line"></div>
135
+ </div>
136
+ <!-- About Section Content-->
137
+ <div class="row">
138
+ <div class="col-lg-4 ms-auto"><p class="lead">The main objective of this project is to offer system that simplify and automate the process of recording and tracking students&#39; attendance through face recognition technology. It is biometric technology to identify or verify a person from a digital image or surveillance video. </p></div>
139
+ <div class="col-lg-4 ms-auto"><p class="lead">Face recognition technology can significantly reduce errors and eliminate instances of proxy attendance, where individuals fraudulently mark attendance on behalf of others. By accurately matching individuals based on their unique facial features, the system ensures that attendance records are reliable and trustworthy. </p></div>
140
+ <div class="col-lg-4 me-auto"><p class="lead"> Face recognition systems eliminate the need for manual check-ins, reducing administrative tasks such as taking roll calls and manually inputting attendance data. We aim to provide a system that will make the attendance process faster and more precisely. </p></div>
141
+ </div>
142
+ <!-- About Section Button-->
143
+ <div class="text-center mt-4">
144
+ <a class="btn btn-xl btn-outline-light" href="https://github.com/vikasv123/Attendance-System">
145
+ <i class="fas fa-download me-2"></i>
146
+ GitHub
147
+ </a>
148
+ </div>
149
+ </div>
150
+ </section>
151
+ <!-- Contact Section-->
152
+ <section class="page-section" id="contact">
153
+ <div class="container">
154
+ <!-- Contact Section Heading-->
155
+ <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Contact Me</h2>
156
+ <!-- Icon Divider-->
157
+ <div class="divider-custom">
158
+ <div class="divider-custom-line"></div>
159
+ <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
160
+ <div class="divider-custom-line"></div>
161
+ </div>
162
+ <!-- Contact Section Form-->
163
+ <div class="row justify-content-center">
164
+ <div class="col-lg-8 col-xl-7">
165
+ <!-- * * * * * * * * * * * * * * *-->
166
+ <!-- * * SB Forms Contact Form * *-->
167
+ <!-- * * * * * * * * * * * * * * *-->
168
+ <!-- This form is pre-integrated with SB Forms.-->
169
+ <!-- To make this form functional, sign up at-->
170
+ <!-- https://startbootstrap.com/solution/contact-forms-->
171
+ <!-- to get an API token!-->
172
+ <form id="contactForm" action="mailto:[email protected]">
173
+ <!-- Name input-->
174
+ <div class="form-floating mb-3">
175
+ <input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
176
+ <label for="name">Full name</label>
177
+ <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
178
+ </div>
179
+ <!-- Email address input-->
180
+ <div class="form-floating mb-3">
181
+ <input class="form-control" id="email" type="email" placeholder="[email protected]" data-sb-validations="required,email" />
182
+ <label for="email">Email address</label>
183
+ <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
184
+ <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
185
+ </div>
186
+ <!-- Phone number input-->
187
+ <div class="form-floating mb-3">
188
+ <input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
189
+ <label for="phone">Phone number</label>
190
+ <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
191
+ </div>
192
+ <!-- Message input-->
193
+ <div class="form-floating mb-3">
194
+ <textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
195
+ <label for="message">Message</label>
196
+ <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
197
+ </div>
198
+ <!-- Submit success message-->
199
+ <!---->
200
+ <!-- This is what your users will see when the form-->
201
+ <!-- has successfully submitted-->
202
+ <div class="d-none" id="submitSuccessMessage">
203
+ <div class="text-center mb-3">
204
+ <div class="fw-bolder">Form submission successful!</div>
205
+
206
+ <br />
207
+
208
+ </div>
209
+ </div>
210
+ <!-- Submit error message-->
211
+ <!---->
212
+ <!-- This is what your users will see when there is-->
213
+ <!-- an error submitting the form-->
214
+ <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
215
+ <!-- Submit Button-->
216
+ <button class="btn btn-primary btn-xl" type="submit">Send</button>
217
+ </form>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+ <!-- Footer-->
223
+ <footer class="footer text-center">
224
+ <div class="container">
225
+ <div class="row">
226
+ <!-- Footer Location-->
227
+ <div class="col-lg-4 mb-5 mb-lg-0">
228
+ <h4 class="text-uppercase mb-4">About Me</h4>
229
+ <p class="lead mb-0">
230
+ Vikas Verma
231
+ <br />
232
+ I&#39;m Full Stack Web Developer
233
+ </p>
234
+ </div>
235
+ <!-- Footer Social Icons-->
236
+ <div class="col-lg-4 mb-5 mb-lg-0">
237
+ <h4 class="text-uppercase mb-4">Around the Web</h4>
238
+ <a class="btn btn-outline-light btn-social mx-1" href="https://www.facebook.com/vikasv.verma.58?mibextid=ZbWKwL "><i class="fab fa-fw fa-facebook-f"></i></a>
239
+ <a class="btn btn-outline-light btn-social mx-1" href="https://github.com/vikasv123"><i class="fab fa-fw fa-github"></i></a>
240
+ <a class="btn btn-outline-light btn-social mx-1" href="https://www.linkedin.com/in/vikas-verma-34339a248/"><i class="fab fa-fw fa-linkedin-in"></i></a>
241
+ <a class="btn btn-outline-light btn-social mx-1" href="https://instagram.com/verma_vikas_v?igshid=NGExMmI2YTkyZg== "><i class="fab fa-fw fa-instagram"></i></a>
242
+ </div>
243
+ <!-- Footer About Text-->
244
+ <div class="col-lg-4">
245
+ <h4 class="text-uppercase mb-4">Contact Information</h4>
246
+ <p class="lead mb-0">Feel free to reach out to me via call or message at any time.</p>
247
+ <p class="lead mb-0">
248
+ Phone&minus;8894977978
249
+ Email&minus;<a href="mailto:[email protected]">[email protected]</a>
250
+
251
+
252
+ </p>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </footer>
257
+ <!-- Copyright Section-->
258
+ <div class="copyright py-4 text-center text-white">
259
+ <div class="container"><small>Copyright &copy; Attendance System 2023</small></div>
260
+ </div>
261
+ <!-- Portfolio Modals-->
262
+ <!-- Portfolio Modal 1-->
263
+ <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
264
+ <div class="modal-dialog modal-xl" style="width: 700px; height: 500px;">
265
+ <div class="modal-content">
266
+ <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
267
+ <div class="modal-body text-center pb-5">
268
+ <div class="container">
269
+ <div class="row justify-content-center">
270
+ <div class="col-lg-8">
271
+ <!-- Portfolio Modal - Title-->
272
+ <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Camera</h2>
273
+ <!-- Icon Divider-->
274
+ <div class="divider-custom">
275
+ <div class="divider-custom-line"></div>
276
+ <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
277
+ <div class="divider-custom-line"></div>
278
+ </div>
279
+ <!-- Portfolio Modal - Image-->
280
+ <img class="img-fluid rounded mb-5" src="{{url_for('static',filename='assets/img/portfolio/camera.jpg')}}" alt="..." />
281
+ <!-- Portfolio Modal - Text-->
282
+ <p class="mb-4">This is used for Student Face Recognition and mark attendance.</p>
283
+ <form action="/at">
284
+ <button class="btn btn-primary" type="submit">Click</button>
285
+ </form>
286
+ <br>
287
+ <button class="btn btn-primary" data-bs-dismiss="modal">
288
+ <i class="fas fa-xmark fa-fw"></i>
289
+ Close Window
290
+ </button>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ <!-- Portfolio Modal 2-->
299
+ <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" aria-labelledby="portfolioModal2" aria-hidden="true">
300
+ <div class="modal-dialog modal-xl" style="width: 700px; height: 500px;">
301
+ <div class="modal-content">
302
+ <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
303
+ <div class="modal-body text-center pb-5">
304
+ <div class="container">
305
+ <div class="row justify-content-center">
306
+ <div class="col-lg-8">
307
+ <!-- Portfolio Modal - Title-->
308
+ <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Attendance Log</h2>
309
+ <!-- Icon Divider-->
310
+ <div class="divider-custom">
311
+ <div class="divider-custom-line"></div>
312
+ <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
313
+ <div class="divider-custom-line"></div>
314
+ </div>
315
+ <!-- Portfolio Modal - Image-->
316
+ <img class="img-fluid rounded mb-5" src="{{url_for('static',filename='assets/img/portfolio/document.jpg')}}" alt="..." />
317
+ <!-- Portfolio Modal - Text-->
318
+ <p class="mb-4">It shows the data of attendance of studends.</p>
319
+ <form action="/table">
320
+ <button class="btn btn-primary">Click</button>
321
+ </form>
322
+ <br>
323
+ <button class="btn btn-primary" data-bs-dismiss="modal">
324
+ <i class="fas fa-xmark fa-fw"></i>
325
+ Close Window
326
+ </button>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <!-- Portfolio Modal 3-->
335
+ <!-- <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" aria-labelledby="portfolioModal3" aria-hidden="true">
336
+ <div class="modal-dialog modal-xl">
337
+ <div class="modal-content">
338
+ <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
339
+ <div class="modal-body text-center pb-5">
340
+ <div class="container">
341
+ <div class="row justify-content-center">
342
+ <div class="col-lg-8">-->
343
+ <!-- Portfolio Modal - Title-->
344
+ <!--<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Circus Tent</h2>-->
345
+ <!-- Icon Divider-->
346
+ <!--<div class="divider-custom">
347
+ <div class="divider-custom-line"></div>
348
+ <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
349
+ <div class="divider-custom-line"></div>
350
+ </div>-->
351
+ <!-- Portfolio Modal - Image-->
352
+ <!--<img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png" alt="..." />-->
353
+ <!-- Portfolio Modal - Text-->
354
+ <!--<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
355
+ <button class="btn btn-primary" data-bs-dismiss="modal">
356
+ <i class="fas fa-xmark fa-fw"></i>
357
+ Close Window
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>-->
366
+
367
+ <!-- Bootstrap core JS-->
368
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
369
+ <!-- Core theme JS-->
370
+ <script src="js/scripts.js"></script>
371
+
372
+
373
+ </body>
374
+ </html>
375