forked from as1605/DevClub-Assignment4
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
265 lines (238 loc) · 7.12 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
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/2019-nCoV-CDC-23312_without_background.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link type="image/png" sizes="16x16" rel="icon" href="./images/favicon/favicon-16.png">
<link type="image/png" sizes="32x32" rel="icon" href="./images/favicon/favicon-32.png">
<link type="image/png" sizes="96x96" rel="icon" href="./images/favicon/favicon-96.png">
<title>
Covid Charts
</title>
</head>
<body>
<!-- home section -->
<div class="home" id="Home">
<div class="topnav">
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Charts">Charts</a></li>
<li><a href="#Tips">Tips</a></li>
<li><a href="#Symptoms">Symptoms</a></li>
<li><a href="#FAQs">FAQs</a></li>
<li><a href="#YouTube">YouTube</a></li>
</ul>
</div>
<div class="home-content-container">
<div class="home-content">
<div class="quote1">
<h3>Confused about where to get the right information about COVID-19?</h3>
</div>
<div class="quote-and-image">
<div class="quote2">
<h2>Don't Worry, we Got You!</h2>
</div>
<div class="covid-image-container">
<img src="images/covid1.png" alt="covid-19 anim">
</div>
</div>
</div>
</div>
</div>
<!-- chart section -->
<div class="chart-container" id="Charts">
<div class="heading">
<h2>Stats and charts</h2>
</div>
<div class = "case-table-container">
<div class="case-table">
<h2>Global</h2>
<table>
<tbody>
<tr>
<td>
<div class="covid-topic">Cases</div>
<div class="total-value">
<div id="tgc"></div>
</div>
<div class="today-value" role="text">
<span id="ngc"></span>
</div>
</td>
<td>
<div class="covid-topic">Deaths</div>
<div class="total-value" >
<span id="tgd"></span>
</div>
<div class="today-value" role="text">
<span id="ngd"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="case-table">
<h2>India</h2>
<table>
<tbody>
<tr>
<td>
<div class="covid-topic">Cases</div>
<div class="total-value" role="text">
<span id="tic">4.3Cr</span>
</div>
<div class="today-value" role="text">
<span id="nic">+1,938</span>
</div>
</td>
<td>
<div class="covid-topic">Deaths</div>
<div class="total-value" role="text">
<span id="tid">5.17L</span>
</div>
<div class="today-value" role="text">
<span id="nid">+67</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="covid-chart">
<canvas id="covid-linechart"></canvas>
</div>
</div>
<!-- tip section -->
<div class="tip-container" id="Tips">
<div class="heading">
<h2>Tips</h2>
</div>
<div class="tip">
<div class="tip-image">
<img src="images/wash_hands.png" alt="wash_hands anim">
</div>
<div class="tip-text">
<h3>Wash Hands Regularly</h3>
</div>
</div>
<div class="tip">
<div class="tip-image2">
<img src="images/wear_mask.png" alt="wear mask anim">
</div>
<div class="tip-text2">
<h3 class="caption">Wear Mask</h3>
</div>
</div>
</div>
<!-- Symptomps section -->
<div class="symptoms" id="Symptoms">
<div class="heading">
<h2>Symptoms</h2>
</div>
<table class="table">
<thead>
<tr>
<th>Symptom</th>
<th>Severity</th>
<th>Advice</th>
</tr>
</thead>
<tr>
<td>Tiredness</td>
<td>Mild</td>
<td>Drink plenty of fluids,<br> particularly water.</td>
</tr>
<tr>
<td>Cold</td>
<td>Mild</td>
<td>Drink plenty of fluids,<br> particularly water.</td>
</tr>
<tr>
<td>Cough</td>
<td>Mild</td>
<td>Drink plenty of fluids, <br> particularly water.</td>
</tr>
<tr>
<td>Tiredness</td>
<td>Mild</td>
<td>Drink plenty of fluids, <br> particularly water.</td>
</tr>
</table>
</div>
<!-- FAQs Section -->
<div class="faqs" id="FAQs">
<div class="heading">
<h2>FAQs</h2>
</div>
<section>
<div class="faqsitem">
<h3>What is COVID-19?</h3>
<p>
COVID-19 is a disease caused by a virus called SARS-CoV-2.
Most people with COVID-19 have mild symptoms, but some people can become severely ill.
Although most people with COVID-19 get better within weeks of illness, some people experience
post-COVID conditions.
Post-COVID conditions are a wide range of new, returning, or ongoing health problems people can
experience more than four weeks after first being infected with the virus that causes COVID-19.
Older people and those who have certain underlying medical conditions are more likely to get
severely ill from COVID-19.
Vaccines against COVID-19 are safe and effective.
</p>
</div>
<div class="faqsitem">
<h3>Should I use soap and water or hand sanitizer to protect myself?</h3>
<p>
Handwashing is one of the best ways to protect yourself and your family from getting sick. Wash your
hands often with soap and water for at least 20 seconds, especially after blowing your nose,
coughing, or sneezing; going to the bathroom; and before eating or preparing food. If soap and water
are not readily available, use an alcohol-based hand sanitizer with at least 60% alcohol.
</p>
</div>
<div class="faqsitem">
<h3>What are the symptoms and complications that COVID-19 can cause?</h3>
<p>
People with COVID-19 have reported a wide range of symptoms – from mild symptoms to severe illness.
Symptoms may appear 2-14 days after exposure to the virus. If you have fever, cough, or other
symptoms, you might have COVID-19.
</p>
</div>
</section>
</div>
<!-- youtube section -->
<div class="ytsec5" id="YouTube">
<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/qHksVwOrpbE" title="YouTube video"
frameborder="0" allow="autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>
<!-- footer begins here -->
<div class="footer">
<div class="social-media-links">
<ul>
<li><a href="https://www.instagram.com/ajeet_.kt/" target="_blank"><img src="images/003-instagram.png"
alt="insta"></a></li>
<li><a href="https://www.linkedin.com/in/ajeet-kumar-3150641b5/" target="_blank"><img
src="images/001-linkedin.png" alt="linked in"></a></li>
<li><a href="https://wa.me/+919712095870" target="_blank"><img src="images/002-whatsapp.png"
alt="whatsapp"></a></li>
<li><a href="https://github.com/akki01133" target="_blank"><img src="images/004-github.png"
alt="github"></a></li>
</ul>
</div>
<div class="build-info">
<ul>
<li>© Copyright 2022 Akki01133</li>
<li>Created By <a href="https://github.com/akki01133" title="Styleshout" target="_blank">Ajeet Kumar</a>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script src="script.js"></script>
</body>
</html>