-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
368 lines (352 loc) · 19.3 KB
/
index.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!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">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap"
as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap" rel="stylesheet">
</noscript>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="/assets/css/main.css?v=2">
<link rel="preload" href="/assets/images/main.png" as="image">
<link rel="stylesheet" href="/assets/css/chatbot.css">
<link rel="icon" href="/assets/logo/CoviUlt.jpg" type="image/jpg">
<title>CoviUlt</title>
</head>
<body id="main_body">
<!-- navbar start -->
<nav class="header shadow-lg p-3 bg-white rounded">
<div class="logo"><a href="/" class="logo-link">CoviUlt</a></div>
<div class="header-links">
<a class="underline" href="/">Home</a>
<a class="underline" href="/impact.html">Impact</a>
<a class="underline" href="/vaccine.html">Vaccine</a>
<a class="underline" href="/history.html">History</a>
<a class="underline" href="/know-more.html">Know More</a>
</div>
</nav>
<nav class="mobile-menu shadow-lg p-3 bg-white rounded sticky-top w-100">
<div class="container-nav">
<div class="logo px-3"><a href="/" class="logo-link">CoviUlt</a></div>
<input type="checkbox" class="toggle">
<div class="hamburger"><span></span></div>
<div class="menu">
<ul class="menu-links">
<li><a class="underline" href="/">Home</a></li>
<li><a class="underline" href="/impact.html">Impact</a></li>
<li><a class="underline" href="/vaccine.html">Vaccine</a></li>
<li><a class="underline" href="/history.html">History</a></li>
<li><a class="underline" href="/know-more.html">Know More</a></li>
</ul>
</div>
</div>
</nav>
<!-- navbar ends -->
<img src="/assets/images/float_covid.png" alt="Floating Design" class="Floating_Design">
<section id="mainHome" class="row gx-5 overflow-hidden align-items-center d-flex justify-content-between">
<div class="col-lg-6">
<span>COVID-19</span> <br>
<h3 class="quotes"></h3>
<p>Coronavirus disease 2019 (COVID-19) is a contagious disease caused by a virus, the severe acute
respiratory syndrome coronavirus 2 (SARS-CoV-2).</p>
<button class="btn know-more" onclick="window.location.href='/know-more.html'">Know More</button>
</div>
<div class="col-lg-4 col-md-6" id="image" data-aos="fade-up" data-aos-duration="1500">
<img class="img-fluid position-relative scale-home" src="/assets/images/main.png" alt="Covid 19">
</div>
</section>
<div class="scroll">
<i class="fas fa-chevron-down fa-2x"></i>
</div>
<section id="protect">
<h2 class="text-muted text-center mb-5">Steps To <span style="color: #F24472;">Protect</span> Yourself</h2>
<div class="card-deck mt-5">
<div class="card shadow-lg align-items-center">
<img src="/assets/images/MAsk.png" class="card-img-top p-3" style="width: 204px; height: 220px;"
alt="Wear a mask">
<div class="card-body">
<h5 class="card-title">Wear A Face Mask</h5>
<p class="card-text">Wear a properly fitted mask when physical distancing is not possible and in
poorly ventilated settings.</p>
</div>
</div>
<div class="card shadow-lg align-items-center">
<img src="/assets/images/Soap.png" class="card-img-top p-3" style="width: 155px; height: 196px;"
alt="Wash Your Hand">
<div class="card-body">
<h5 class="card-title">Wash Your Hand</h5>
<p class="card-text">Clean your hands frequently with alcohol-based hand rub or soap and water.
</p>
</div>
</div>
<div class="card shadow-lg align-items-center">
<img src="/assets/images/injection.png" class="card-img-top p-3" style="width: 200px; height: 200px;"
alt="Vaccine">
<div class="card-body">
<h5 class="card-title">Get Yourself Vaccinated</h5>
<p class="card-text">Get vaccinated as soon as it’s your turn and follow local guidance on
vaccination</p>
</div>
</div>
</div>
<div class="card-deck mt-5">
<div class="card shadow-lg align-items-center">
<img src="/assets/images/Crowd.png" class="card-img-top p-3" style="width: 204px; height: 220px;"
alt="Avoid Close Contact">
<div class="card-body">
<h5 class="card-title">Avoid Close Contact</h5>
<p class="card-text">Keep physical distance of at least 1 metre from others, even if they don’t
appear to be sick. Avoid crowds and close contact.</p>
</div>
</div>
<div class="card shadow-lg align-items-center">
<img src="/assets/images/disinfection.png" class="card-img-top p-3" style="width: 155px; height: 196px;"
alt="Disinfect Surfaces">
<div class="card-body">
<h5 class="card-title">Disinfect Surfaces</h5>
<p class="card-text">Clean and disinfect surfaces frequently, especially those which are regularly
touched, such as door handles, faucets and phone screens.
</p>
</div>
</div>
<div class="card shadow-lg align-items-center">
<img src="/assets/images/shake hand.png" class="card-img-top p-3" style="width: 200px; height: 200px;"
alt="Avoid Shaking Hands">
<div class="card-body">
<h5 class="card-title">Avoid Shaking Hands</h5>
<p class="card-text">Avoid shaking hands to help protect yourself and others from
COVID-19.Respiratory viruses can be passed by shaking hands and touching your eyes, nose and/or
mouth.</p>
</div>
</div>
</div>
</section>
<section id="thingsNotToDo">
<div class="container no-flow py-5">
<div class="row align-items-center">
<div class="col-lg-4 p-5" data-aos="fade-up-right" data-aos-duration="1500">
<img class="img-fluid" src="/assets/images/dont_touch_face.png" alt="Don't touch your face">
</div>
<div class="col-lg-8 p-5" data-aos="fade-up-left" data-aos-duration="1500">
<h1>Do not touch your face</h1>
<p class="lead text-muted">
Medical advisories from the World Health Organisation (WHO) has reminded us time and again not
to touch our face, nose and mouth too often. This helps reduce the chances of catching the virus
as infection from your hands do not reach the nose or mouth from where it can infect the body.
Keeping your hands clean will also help reduce the chances of the infection spreading any
further.
</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-8 p-5" data-aos="fade-up-right" data-aos-duration="1500">
<h1>Do not panic!</h1>
<p class="lead text-muted">
The coronavirus pandemic has taken everybody by alarm. The internet is filled with information
about the virus and its spread, many of it also wrong, causing panic among the people.
</p>
</div>
<div class="col-lg-4 p-5" data-aos="fade-up-left" data-aos-duration="1500">
<img class="img-fluid" src="/assets/images/dont_panic.png" alt="Do not panic">
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-4 p-5" data-aos="fade-up-right" data-aos-duration="1500">
<img class="img-fluid" src="/assets/images/social_distancing.jpg" alt="Do not go to crowded places">
</div>
<div class="col-lg-8 p-5" data-aos="fade-up-left" data-aos-duration="1500">
<h1>Do not go to crowded places</h1>
<p class="lead text-muted">
Public transport, metros, gyms and any other crowded place should be avoided. The more the
number of people, the more likely of the spread of the virus. If you have symptoms,
self-quarantine yourself other than to visit the doctor. Staying isolated and not coming in
contact with a lot of people is the only way to contain the spread of the disease
</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-8 p-5" data-aos="fade-up-right" data-aos-duration="1500">
<h1>Do not believe everything on the internet</h1>
<p class="lead text-muted">
The internet is filled with information about the symptoms and cure available for coronavirus.
Do not believe anything unless it comes from a reliable source or a reliable medical
practitioner. Spreading false information and promises about the cure for the disease has added
to the panic and kept a large percentage of the population misinformed. Advertisements about
health kits and alternative ways to cure the infection are also doing the rounds of the
internet. Do not fall into the trap yourself or propagate any information that is not from a
reliable source.
</p>
</div>
<div class="col-lg-4 p-5" data-aos="fade-up-left" data-aos-duration="1500">
<img class="img-fluid" src="/assets/images/internet.jpg"
alt="Do not believe everything on the internet">
</div>
</div>
<div class="container py-5"></div>
</div>
</div>
</section>
<button class="float button row justify-content-center align-items-center" id="readAloud" title="Read Aloud">
<i class="fa fa-volume-up my-float"></i> Read
</button>
<button class="float button row justify-content-center align-items-center" id="muteSpeech" title="Turn off Read Aloud" style="display: none;">
<i class="fa fa-volume-mute my-float"></i> Mute
</button>
<div class="chatBot">
<input type="checkbox" id="click" class="click" />
<label for="click" id="openChat" style="position: fixed;">
<i class="far fa-comment-dots"></i>
</label>
<div class="wrapper" style="position: fixed;">
<div class="chat-box-header d-flex justify-content-between align-items-center">
<div class="icon_header p-2 ml-2 rounded-circle">
<img class="img-fluid" src="/assets/images/chatbot.png" />
</div>
<div class="name">CoviBot</div>
<span class="chat-box-toggle"><label id="showFAB" for="click">
<i class="fas fa-times"></i>
</label></span>
</div>
<div class="form">
<div class="bot-inbox align-items-center inbox">
<div class="icon">
<img class="bot-dp img-fluid" src="/assets/images/chatbot.png" />
</div>
<div class="msg-header">
<div>Hello I'm CoviBot, I'm here to answer your Questions regarding Covid-19</div>
</div>
</div><br>
<div class="bot-inbox align-items-center inbox">
<div class="icon">
<img class="bot-dp img-fluid" src="/assets/images/chatbot.png" />
</div>
<div class="msg-header">
<div>If you are experiencing a life-threatening emergency, please call <a
href="tel:1075">1075</a> immediately <br> This system does not replace the judgement of
healthcare professionals or the performance of any clinical assessment.</div>
</div>
</div>
</div>
<div class="typing-field">
<div class="input-data">
<input id="data" type="text" placeholder="Type something here.." required />
<button id="send-btn">Send</button>
</div>
</div>
</div>
</div>
<!-- footer start -->
<footer class="text-center text-lg-start bg-light text-muted">
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<div class=" d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<div>
<a href="#" class="m-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="m-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="m-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="m-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
</div>
</section>
<section class="">
<div class="container text-center text-md-start mt-5">
<div class="row mt-3">
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4">
CoviUlt
</h6>
<p>
The Ultimate Knowledgebase for information regarding COVID-19 Pandemic
</p>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4">
Navigation
</h6>
<p>
<a href="/" class="text-reset">Home</a>
</p>
<p>
<a href="/impact.html" class="text-reset">Impact</a>
</p>
<p>
<a href="/vaccine.html" class="text-reset">Vaccine</a>
</p>
<p>
<a class="text-reset" href="/history.html">History</a>
</p>
<p>
<a href="/know-more.html" class="text-reset">Know More</a>
</p>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="/know-more/faq-covid.html" class="text-reset">FAQ COVID-19</a>
</p>
<p>
<a href="/know-more/faq-vaccine.html" class="text-reset">FAQ Vaccine</a>
</p>
<p>
<a href="/know-more/faq-vaccine.html" class="text-reset">FAQ CoviShield</a>
</p>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<h6 class="text-uppercase fw-bold mb-4">
Contact US
</h6>
<p><i class="fas fa-home me-3"></i> Tripura, India</p>
<p>
<i class="fas fa-envelope me-3"></i>
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p><i class="fas fa-phone me-3 text-decoration-none"></i> <a href="tel:+0000 000 000">+0000 000
000</a></p>
</div>
</div>
</div>
</section>
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright:
<a class="text-reset fw-bold" href="https://coviult.codewithbishal.com">coviult.codewithbishal.com</a>
</div>
</footer>
<!-- footer ends -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"
integrity="sha512-3J8teBiHrSyaaRBajZyIEtpDsXdPq1gsznKWIVb5CnorQuFhjWGhWe54z8YNnHHr7MZuExb9m5kvf964HiT1Sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"
integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/assets/js/typing.js"></script>
<script src="/assets/js/chatbot.js"></script>
<script src="/assets/js/speech.js"></script>
</body>
</html>