-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
313 lines (271 loc) · 13.4 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
<title>Corona in Charts</title>
<meta name="keywords" content="Corona, Virus, Covid, Pandemic, Corona Charts, Corona Countries">
<meta name="description" content="See information about the Corona pandemic in charts for each country! Tracking total cases, active cases, recovered etc.">
<meta property="og:url" content="https://coronaincharts.com/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Corona in Charts" />
<meta property="og:description" content="See information about the Corona pandemic in charts for each country!" />
<meta property="og:image" content="https://cdn.pixabay.com/photo/2020/03/23/10/26/covid-19-4960246_1280.jpg" />
<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/assets/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<header class="site-header">
<div class="wrapper">
<h1 class="site-header__title">Corona in Charts</h1>
<p class="site-header__subtitle">See information about the Corona pandemic in charts for each country. <span class="site-header__subtitle__important">Updated Daily!</span></p>
</div>
</header>
<div class="social-share">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://coronaincharts.com/">
<div class="social-share__icon social-share__icon--fb">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>
</div>
</a>
<a href="http://twitter.com/share?url=https://coronaincharts.com/&text=Corona+in+Charts">
<div class="social-share__icon social-share__icon--twitter">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
</div>
</a>
</div>
<div class="country-selector bb-div">
<div class="wrapper">
<h2 class="country-selector__title heading heading--uppercase">Search Country</h2>
<div class="country-selector__input-container">
<input class="country-selector__input js-country-selector" type="text" placeholder="Germany" />
<button class="country-selector__input__btn js-search-btn">Search</button>
</div>
<!-- <div class="country-selector__input-container country-selector__input-container--margin-top js-compare-div">
<input class="country-selector__input js-country-selector-compare" type="text" placeholder="Country name" />
<button class="country-selector__input__btn js-search-btn-compare">Compare</button>
</div> -->
<div class="alert">
<span class="alert__text js-alert-text"></span>
</div>
</div>
</div>
<div class="location bb-div">
<div class="wrapper">
<h2 class="heading heading--uppercase">
Displaying data for <span class="js-location">Germany</span>
</h2>
<div class="location__flag js-location-flag"></div>
<div class="location__last-updated">
<p class="location__last-updated__title">
Last Updated
</p>
<p class="location__last-updated__text js-last-updated"></p>
</div>
<div class="location__notice">
<a href="#data-policy" class="location__notice__link js-to-data-policy">
How is the data collected?
</a>
</div>
</div>
</div>
<div class="basic-numbers bb-div">
<div class="wrapper">
<h3 class="basic-numbers__title heading heading--medium">
Quick Stats for <span class="js-location">Germany</span>
</h3>
<div class="basic-numbers__container">
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Total Cases
</p>
<p class="basic-numbers__box__text js-total">
</p>
</div>
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Active Cases
</p>
<p class="basic-numbers__box__text js-active">
</p>
</div>
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Recovered
</p>
<p class="basic-numbers__box__text js-recovered">
</p>
</div>
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Deaths
</p>
<p class="basic-numbers__box__text js-deaths">
</p>
</div>
</div>
<div class="basic-numbers__container">
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Total Cases/Million Pop.
</p>
<p class="basic-numbers__box__text js-total-million">
</p>
</div>
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Active Cases/Million Pop.
</p>
<p class="basic-numbers__box__text js-active-million">
</p>
</div>
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Recovered/Million Pop.
</p>
<p class="basic-numbers__box__text js-recovered-million">
</p>
</div>
<div class="basic-numbers__box">
<p class="basic-numbers__box__title">
Deaths/Million Pop.
</p>
<p class="basic-numbers__box__text js-deaths-million">
</p>
</div>
</div>
</div>
</div>
<div class="chart-total bb-div">
<div class="wrapper">
<h3 class="chart-total__title heading heading--medium">
Total Cases Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-total" width="400" height="400" aria-label="Corona Total Cases Chart" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-total-diff bb-div">
<div class="wrapper">
<h3 class="chart-total-diff__title heading heading--medium">
New Cases Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-total-diff" width="400" height="400" aria-label="Increase in Total Cases per Day" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-active bb-div">
<div class="wrapper">
<h3 class="chart-active__title heading heading--medium">
Active cases Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-active" width="400" height="400" aria-label="Corona Active Chart" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-active-diff bb-div">
<div class="wrapper">
<h3 class="chart-active-diff__title heading heading--medium">
Increase/Decrease in Active Cases Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-active-diff" width="400" height="400" aria-label="Increase in Active Cases per Day" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-recovered bb-div">
<div class="wrapper">
<h3 class="chart-recovered__title heading heading--medium">
Recovered Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-recovered" width="400" height="400" aria-label="Corona Recovered Chart" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-recovered-diff bb-div">
<div class="wrapper">
<h3 class="chart-recovered-diff__title heading heading--medium">
New Recovered Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-recovered-diff" width="400" height="400" aria-label="Increase in Recovered per Day" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-fatality bb-div">
<div class="wrapper">
<h3 class="chart-fatality__title heading heading--medium">
Fatalities Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-fatality" width="400" height="400" aria-label="Corona Fatality Chart" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-fatality-diff bb-div">
<div class="wrapper">
<h3 class="chart-fatality-diff__title heading heading--medium">
New Fatalities Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-fatality-diff" width="400" height="400" aria-label="Increase in Fatalities per Day" role="img"></canvas>
</div>
</div>
</div>
<div class="chart-fatality-comparison-million bb-div">
<div class="wrapper">
<h3 class="chart-fatality-comparison-million__title heading heading--medium">
Comparison Chart: <span class="js-location">Germany</span> to Italy
</h3>
<p class="chart-fatality-comparison-million__text">
This chart compares total fatalities per million population of <span class="js-location">Germany</span> to total fatalities per million population of Italy, since the first confirmed case in each country. Fatalities are the most suitable metric to track the widespread of pandemic for each country because countries differ a lot in testing capabilities.
</p>
<div class="chart-container">
<canvas class="js-chart-comparison" width="400" height="400" aria-label="Comparison Chart" role="img"></canvas>
</div>
</div>
</div>
<!-- <div class="chart-per-million bb-div">
<div class="wrapper">
<h3 class="chart-per-million__title heading heading--medium">
Active, Recovered and Fatality per Million Population Chart for <span class="js-location">Germany</span>
</h3>
<div class="chart-container">
<canvas class="js-chart-million" width="400" height="400" aria-label="Corona per Million Details Chart" role="img"></canvas>
</div>
</div>
</div> -->
<div class="data-policy js-data-policy" id="data-policy">
<div class="wrapper">
<h3 class="data-policy__title heading heading--medium">
How is the data collected?
</h3>
<p class="data-policy__text">The data about the Corona pandemic is collected through the <a href="https://github.com/pomber/covid19" target="__blank">pomber's covid19 API</a> which provides time-series of coronavirus cases (confirmed, deaths and recovered) per country and is updated daily. The API relies on Johns Hopkins University (<a href="https://systems.jhu.edu/research/public-health/ncov/" target="__blank">JHU CSSE</a>) data. While all parties try to provide as accurate data as possible, errors may occur. It is recommended that you compare the data here with other sources.</p>
</div>
</div>
<footer class="site-footer">
<div class="wrapper">
<p class="site-footer__text">Made by <a class="site-footer__text__link" target="_blank" href="https://blazzdev.com">BlazzDev</a></p>
</div>
</footer>
<script src="js/app.js"></script>
</body>
</html>