Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 22 KB
Newer Older
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
1
2 
<html>
    <head>
Michał Woźniak's avatar
The Czech Republic, eh! also, UTF-8 charset now    
Michał Woźniak committed
3 
        <meta charset="utf-8"/>
Michał Woźniak's avatar
yet more improvements in the graph    
Michał Woźniak committed
4 
        <title>Scary COVID-19 Data</title>
Michał Woźniak's avatar
fix    
Michał Woźniak committed
5 
        <script src="./wtf_wikipedia-client.min.js"></script>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
6 
        <script src="./Chart.bundle.min.js"></script>
Michał Woźniak's avatar
fix    
Michał Woźniak committed
7 
        <script src="./covid.js"></script>
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 
        <style>
            @font-face {
                font-family: "Play Regular";
                src: url(./Play/Play-Regular.ttf);
            }
            @font-face {
                font-family: "Play Bold";
                src: url(./Play/Play-Bold.ttf);
            }
            body {
                background: #444;
                color: springgreen;
                font-family: "Play Regular";
                padding:0px;
                margin:0px;
                font-size: 16pt;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
24
25
26 
                display: flex;
                flex-direction: column;
                min-height:100vh;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
27
28
29
30
31
32
33
34
35
36 
            }
            body > * {
                padding-left:5vw;
                padding-right:5vw;
            }
            body > * > * {
                text-shadow: none;
            }
            h1 {
                text-align:center;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
37
38
39
40
41
42 
                padding-top:2em;
                padding-bottom:0.7em;
                font-family: "Play Regular";
                font-weight: normal;
                font-size: 260%;
                text-shadow:-1px -1px 1px black, 1px 1px 0px #888;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
43 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
44 
            h2, h3, h4, h5, h6, h7, strong {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
45
46
47
48
49
50 
                font-family: "Play Bold";
            }
            a {
                color: yellow;
            }
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 
            input[type=button] {
                display:inline-block;
                border:none;
                border-radius:0.2em;
                color:springgreen;
                font-family: "Play Bold";
                font-size: 100%;
                padding:0.4em 1em 0.5em 1em;
                background:#555;
                box-shadow:0px 0px 2px #555;
                font-variant: all-small-caps;
                transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
            }
            input[type=button]:hover {
                color:black;
                background:springgreen;
                box-shadow:0px 0px 2px springgreen;
            }
            input[type=button]:active {
                box-shadow:inset 0px 0px 2px #444;
            }
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
73
74
75
76
77
78
79
80
81
82
83
84
85
86 
            #covid-stats {
                display: grid;
                grid-auto-flow: column;
                background: springgreen;
                color: #444;
            }
            #covid-stats > * {
                margin:0em;
                padding:0.5em;
                display: grid;
            }
            #covid-stats .value {
                font-weight: bold;
                font-family: "Play Bold";
Michał Woźniak's avatar
various fixes    
Michał Woźniak committed
87 
                align-self: end;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
88 
            }
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
89 
            #covid-stats h2 {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
90
91
92
93 
                font-size: 140%;
                font-family: "Play Regular";
                font-weight: bold;
                text-transform: uppercase;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
94 
                color: #444;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
95 
                opacity: 0.4;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
96
97
98
99
100
101
102 
                margin:0px;
            }
            #covid-stats .item-container {
                display: flex;
                justify-content: center;
                align-items: center;
            }
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
103
104
105
106
107
108
109
110
111
112
113 
            #main-menu-container {
                padding-top:1em;
                overflow:hidden;
                transition:max-height 1s;
                font-size:80%;
            }
            #internal-main-menu-container {
                display:flex;
                flex-wrap:wrap;
                justify-content:center;
            }
Michał Woźniak's avatar
stylistic fixes in the load-six-sites menu    
Michał Woźniak committed
114 
            #internal-main-menu-container p {
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
115
116
117
118
119
120 
                font-size: 100%;
                margin: 0.3em 0.2em;
                padding: 0.5em 1em 0.5em 0.2em;
            }
            #internal-main-menu-container input[type=button] {
                margin: 0.3em;
Michał Woźniak's avatar
stylistic fixes in the load-six-sites menu    
Michał Woźniak committed
121
122
123
124 
                flex-grow:1;
                flex-shrink:1;
                padding-left:1em;
                padding-right:1em;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
125 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
126 
            .sources {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
127
128
129
130
131
132 
                font-size: 80%;
                font-style: italic;
                margin-top: 0.4em;
                text-align: right;
                opacity: 0.5;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
133 
            .site-data {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
134 
                display: grid;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
135 
                grid-template-columns: auto auto auto;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
136
137 
                grid-template-rows: auto auto auto;
                grid-template-areas:
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
138
139
140 
                    "auto auto auto"
                    "auto auto auto"
                    "sources sources sources";
Michał Woźniak's avatar
moar style    
Michał Woźniak committed
141
142
143 
                grid-auto-flow: row;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
144 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
145 
            .site-data > * {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
146 
                display: grid;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
147
148
149 
                margin:0px;
                padding:0.5em;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
150 
            .site-data > h2 {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
151
152 
                grid-area: header;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
153 
            .site-data > .sources {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
154 
                grid-area: sources;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
155 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
156 
            .site-data > * .value {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
157
158
159 
                font-weight: bold;
                font-family: "Play Bold";
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
160 
            #sites-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
161 
                flex-grow:1;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
162
163 
                display: flex;
                flex-direction: row;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
164 
                align-items:stretch;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
165
166 
                justify-content: center;
                flex-wrap: wrap;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
167 
                min-height:8em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
168
169 
            }
            #sites-data-container .site-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
170 
                display: flex;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
171 
                flex-direction: column;
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
172
173 
                align-items:center;
                width:23em;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
174 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
175
176
177
178
179
180
181
182 
            footer {
                font-size: 70%;
                text-align:center;
                opacity:0.8;
                line-height:150%;
                font-family: Monospace;
                background: black;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
183 
            .site-data-container .sites-select {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
184
185
186
187
188
189
190
191
192
193 
                display: inline;
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                border:dotted 1px springgreen;
                padding:0.25em;
                background:none;
                color:springgreen;
                font-family: inherit;
                font-size:inherit;
Michał Woźniak's avatar
infection sites now gotten from Wikipedia too    
Michał Woźniak committed
194 
                min-width:15em;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
195 
                transition: box-shadow 0.5s;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
196 
            }
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
197
198
199 
            .site-data-container .sites-select:hover {
                box-shadow: 0px 0px 5px springgreen;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
200 
            .site-data-container .sites-select option {
Michał Woźniak's avatar
the select options font size fixed    
Michał Woźniak committed
201
202 
                font-size:70%;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
203 
            .site-data-container h2 {
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
204
205
206
207
208 
                font-family: "Play Regular";
                font-weight: normal;
                margin-top:0.35em;
            }
            .site-data-container h2.for-select {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
209 
                position:relative;
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
210
211 
                font-size:140%;
                margin-top:0.85em;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
212 
            }
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
213 
            .site-data-container h2.for-select::after {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
214
215
216
217
218
219 
                position:absolute;
                right:0.5em;
                top:0.25em;
                content: "▾";
                display: block;
                color: springgreen;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
220
221 
                z-index: -10; /* needed to not obscure the select box from clicks */
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
222 
            .sites-menu-container {
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
223
224
225 
                width:1px;
                height:0px;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
226
227
228 
            .sites-menu-container > input {
                display:none;
            }
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
229 
            .sites-menu-container > a {
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
230
231
232
233 
                font-size: 250%;
                text-decoration: none;
                border: dotted 1px springgreen;
                width: 1em;
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
234 
                height: 0.97em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
235
236
237 
                line-height: 90%;
                outline:none;
                text-align: Center;
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
238 
                margin-top: 0.49em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
239 
                color: springgreen;
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
240 
                display: none;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
241 
                cursor: pointer;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
242 
                transition: box-shadow 0.5s;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
243
244
245 
            }
            .sites-menu-container > a:hover {
                box-shadow: 0px 0px 5px springgreen;
Michał Woźniak's avatar
various fixes    
Michał Woźniak committed
246
247
248 
            }
            #add-site.visible {
                display: inline-block;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
249 
            }
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
250 
            .site-data-container:nth-of-type(7) + .sites-menu-container > #add-site {
Michał Woźniak's avatar
six sites max please    
Michał Woźniak committed
251
252 
                display:none;
            }
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
253 
            .site-data-container:nth-of-type(3) ~ .sites-menu-container > #remove-site {
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
254
255 
                display:inline-block;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
256 
            .sites-menu-container.left > a {
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
257
258 
                display: inline-block;
                margin-left: -1em;
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
259 
            }
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
260 
            #the-chart-container {
Michał Woźniak's avatar
legend + title take more space now, so we need to add more height for the chart    
Michał Woźniak committed
261
262 
                height:80vh;
                min-height:600px;
Michał Woźniak's avatar
some styling changes    
Michał Woźniak committed
263
264
265 
                background: #333;
                padding-top: 1em;
                padding-bottom: 1em;
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
266 
            }
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
267 
            #the-chart {
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
268 
                display:block;
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
269 
            }
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
270
271
272 
            #disclaimers-container {
                font-size:80%;
            }
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
273
274
275
276
277 
            .chart-config-container {
                margin-top:1em;
                display:flex;
                justify-content: center;
                font-size:80%;
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
278 
                flex-wrap: wrap;
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
279
280
281 
            }
            .chart-config-container input {
                display:none;
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
282
283
284
285
286
287
288
289 
            }
            .chart-config-container label input {
                display:inline-block;
                background:none;
                border:none;
                font-weight: bold;
                color:springgreen;
            }
Michał Woźniak's avatar
bugfix for reset-all-settings button    
Michał Woźniak committed
290
291 
            .chart-config-container #chart-reset-settings {
                display:inline-block;
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
292 
            }
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
293 
            .chart-config-container label {
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
294
295
296
297
298 
                padding: 0.5em;
                border-radius:0.2em;
                background:#404040;
                box-shadow: inset 0px 0px 2px #333;
            }
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
299
300
301 
            /*
             * chart controls mechanics
             */
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
302
303
304 
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group label[for=chart-data-confirmed],
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group label[for=chart-data-recovered],
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group label[for=chart-data-deaths],
Michał Woźniak's avatar
active cases graph added    
Michał Woźniak committed
305 
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group label[for=chart-data-active],
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
306
307
308
309
310
311 
            .chart-config-container input#chart-type-logarithmic:checked ~ .chart-config-group label[for=chart-type-logarithmic],
            .chart-config-container input#chart-type-linear:checked ~ .chart-config-group label[for=chart-type-linear],
            .chart-config-container input#chart-cases-cumulative:checked ~ .chart-config-group label[for=chart-cases-cumulative],
            .chart-config-container input#chart-cases-new:checked ~ .chart-config-group label[for=chart-cases-new],
            .chart-config-container input#chart-values-absolute:checked ~ .chart-config-group label[for=chart-values-absolute],
            .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group label[for=chart-values-per-million],
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
312 
            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date],
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
313
314
315
316 
            .chart-config-container input#chart-start-first:checked ~ .chart-config-group label[for=chart-start-first],
            .chart-config-container input#chart-start-tenth:checked ~ .chart-config-group label[for=chart-start-tenth],
            .chart-config-container input#chart-start-hundredth:checked ~ .chart-config-group label[for=chart-start-hundredth],
            .chart-config-container input#chart-start-thousandth:checked ~ .chart-config-group label[for=chart-start-thousandth] {
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
317
318
319
320 
                background:springgreen;
                color:black;
                box-shadow: 0px 0px 2px springgreen;
            }
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
321
322
323 
            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date] > input {
                color:black;
            }
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
324
325
326 
            .chart-config-group {
                display:flex;
                justify-content: center;
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
327
328
329
330
331 
                margin:0.5em 1em;
            }
            .chart-config-group > p {
                margin:0em;
                padding:0.5em;
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
332 
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
333
334
335 
            .chart-config-group .per-million,
            .chart-config-group .data-confirmed,
            .chart-config-group .data-recovered,
Michał Woźniak's avatar
UI bugfix    
Michał Woźniak committed
336
337 
            .chart-config-group .data-deaths,
            .chart-config-group .data-active {
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
338
339 
                display:none;
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
340
341
342 
            .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group .per-million,
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .data-confirmed,
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .data-recovered,
Michał Woźniak's avatar
UI bugfix    
Michał Woźniak committed
343
344 
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .data-deaths,
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group .data-active {
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
345
346 
                display:inline;
            }
Michał Woźniak's avatar
implemented rolling average for new case mode    
Michał Woźniak committed
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367 
            .chart-config-group.chart-average {
                display:none;
            }
            .chart-config-container input#chart-cases-new:checked ~ .chart-config-group.chart-average {
                display:flex;
            }
            .chart-config-container #chart-average {
                display: inline;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                color:springgreen;
                width: 4em;
                text-align: center;
                padding: 0.5em;
                border: none;
                border-radius:0.2em;
                background:#404040;
                box-shadow: inset 0px 0px 2px #333;
                font-weight:bold;
            }
Michał Woźniak's avatar
some sanity in the chart controls layout    
Michał Woźniak committed
368
369
370
371 
            .chart-config-container .break {
                flex-basis: 100%;
                height: 0;
            }
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
372 
        </style>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
373
374 
    </head>
    <body>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
375
376 
        <h1>Scary COVID-19 data</h1>
        <div id="covid-stats">
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
377
378
379
380
381 
            <div class="item-container"><h2>Global stats</h2></div>
            <div id="confirmed"><span class="label">Confirmed cases:</span> <span class="value">(loading...)</span></div>
            <div id="deaths"><span class="label">Deaths:</span> <span class="value">(loading...)</span></div>
            <div id="recovered"><span class="label">Recovered:</span> <span class="value">(loading...)</span></div>
            <div id="mortality"><span class="label">Mortality rate:</span> <span class="value">(loading...)</span></div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
382 
        </div>
Michał Woźniak's avatar
source acknowledgements, some Disclaimers removed since we are not using messy...    
Michał Woźniak committed
383 
        <div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
384 
        <div id="main-menu-container">
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
385 
            <div id="internal-main-menu-container">
Michał Woźniak's avatar
stylistic fixes in the load-six-sites menu    
Michał Woźniak committed
386 
                <p>Load 6 sites with at least 100 confirmed cases and:</p>
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
387
388
389 
                <input type="button" id="site-menu-button-rate" value="largest growth rate"/>
                <input type="button" id="site-menu-button-percentage" value="highest percentage of population infected"/>
                <input type="button" id="site-menu-button-deaths" value="most deaths"/>
Michał Woźniak's avatar
menu-button-recovered added; buttons now set best chart settings for them    
Michał Woźniak committed
390 
                <input type="button" id="site-menu-button-recovered" value="most recoveries"/>
Michał Woźniak's avatar
all menu buttons implemented! yay    
Michał Woźniak committed
391 
                <input type="button" id="site-menu-button-active-drop" value="greatest daily drop of number of active cases"/>
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
392 
            </div>
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
393
394 
        </div>
        <div id="sites-data-container">
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
395 
            <div class="sites-menu-container left">
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
396 
                <a href="#clear-all" id="clear-all-sites">×</a>
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
397 
            </div>
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
398 
            <div class="site-data-container">
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
399 
                <h2 class="for-select"><select class="sites-select" tabindex="1">
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
400
401
402
403 
                    <option value="select one">(select an area)</option>
                </select></h2>
                <div class="site-data">
                </div>
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
404 
            </div>
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
405 
            <div  class="sites-menu-container right">
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
406
407
408 
                <a href="#add-site" id="add-site">+</a>
                <a href="#remove-site" id="remove-site">-</a>
            </div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
409 
        </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
410
411 
        <div id="the-chart-container">
            <canvas id="the-chart"></canvas>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
412
413 
        </div>
        <div class="chart-config-container">
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
414 
            <input type="radio" id="chart-data-confirmed" name="chart-data" value="confirmed" checked="checked"/>
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
415 
            <input type="radio" id="chart-data-recovered" name="chart-data" value="recovered"/>
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
416 
            <input type="radio" id="chart-data-deaths" name="chart-data" value="deaths"/>
Michał Woźniak's avatar
active cases graph added    
Michał Woźniak committed
417 
            <input type="radio" id="chart-data-active" name="chart-data" value="active"/>
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
418
419
420
421
422
423 
            <input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
            <input type="radio" id="chart-type-linear" name="chart-type" value="linear"/>
            <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
            <input type="radio" id="chart-cases-new" name="chart-cases" value="new"/>
            <input type="radio" id="chart-values-absolute" name="chart-values" value="absolute" checked="checked"/>
            <input type="radio" id="chart-values-per-million" name="chart-values" value="per-million"/>
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
424 
            <input type="radio" id="chart-start-date" name="chart-start" value="date"/>
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
425
426
427
428 
            <input type="radio" id="chart-start-first" name="chart-start" value="1"/>
            <input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/>
            <input type="radio" id="chart-start-hundredth" name="chart-start" value="100"/>
            <input type="radio" id="chart-start-thousandth" name="chart-start" value="1000"/>
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
429 
            <div class="chart-config-group">
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
430
431
432
433 
                <p>Show:</p>
                <label for="chart-data-confirmed">confirmed cases</label>
                <label for="chart-data-recovered">recoveries</label>
                <label for="chart-data-deaths">deaths</label>
Michał Woźniak's avatar
active cases graph added    
Michał Woźniak committed
434 
                <label for="chart-data-active">active cases</label>
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
435 
            </div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
436
437
438
439
440 
            <div class="chart-config-group">
                <p>Scale:</p>
                <label for="chart-type-logarithmic">logarithmic</label>
                <label for="chart-type-linear">linear</label>
            </div>
Michał Woźniak's avatar
some sanity in the chart controls layout    
Michał Woźniak committed
441 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
442
443
444
445
446 
            <div class="chart-config-group">
                <p>Cases:</p>
                <label for="chart-cases-cumulative">cumulative</label>
                <label for="chart-cases-new">new</label>
            </div>
Michał Woźniak's avatar
implemented rolling average for new case mode    
Michał Woźniak committed
447
448
449
450
451 
            <div class="chart-config-group chart-average">
                <p>Average over:</p>
                <input type="number" min="1" max="15" step="2" value="1" name="chart-average" id="chart-average"/>
                <p>datapoints</p>
            </div>
Michał Woźniak's avatar
added per-million display    
Michał Woźniak committed
452
453
454
455
456 
            <div class="chart-config-group">
                <p>Values:</p>
                <label for="chart-values-absolute">absolute</label>
                <label for="chart-values-per-million">per 1M</label>
            </div>
Michał Woźniak's avatar
some sanity in the chart controls layout    
Michał Woźniak committed
457 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
458 
            <div class="chart-config-group">
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
459 
                <p>Start</p>
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
460 
                <label for="chart-start-date">on: <input type="date" name="chart-start-date" value="2020-01-22" min="2020-01-22"/></label>
Michał Woźniak's avatar
working on the date select interface    
Michał Woźniak committed
461 
                <p>or from:</p>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
462
463
464
465 
                <label for="chart-start-first">1st</label>
                <label for="chart-start-tenth">10th</label>
                <label for="chart-start-hundredth">100th</label>
                <label for="chart-start-thousandth">1000th</label>
Michał Woźniak's avatar
UI bugfix    
Michał Woźniak committed
466 
                <p><span class="data-confirmed">case</span><span class="data-recovered">recovery</span><span class="data-deaths">death</span><span class="data-active">active case</span><span class="per-million"> per 1M</span></p>
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
467 
            </div>
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
468
469
470
471 
            <div class="break"></div>
            <div class="chart-config-group">
                <input type="button" id="chart-reset-settings" value="Reset all settings"/>
            </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
472 
        </div>
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
473
474
475 
        <div id="disclaimers-container">
            <h3>Disclaimers:</h3>
            <ul>
Michał Woźniak's avatar
source acknowledgements, some Disclaimers removed since we are not using messy...    
Michał Woźniak committed
476
477 
                <li><p>This is all back-of-the-napkin math. Take with a grain (or preferably, a spoonfull) of salt. Check your own sources. Make your own analysis.</p></li>
                <li><p>There are bugs. A reasonable attempt is made to clean the data before displaying it.</p></li>
Michał Woźniak's avatar
resources are now a separate list from discplaiers    
Michał Woźniak committed
478
479
480 
            </ul>
            <h3>Some great resources:</h3>
            <ul>
Michał Woźniak's avatar
IS model is in EN now! wooo!    
Michał Woźniak committed
481 
                <li><p><a href="https://covid.hi.is/english/">University of Iceland's COVID data model</a> (and its <a href="https://github.com/bgautijonsson/covid19/">sources</a>);</p></li>
Michał Woźniak's avatar
resources are now a separate list from discplaiers    
Michał Woźniak committed
482
483 
                <li><p><a href="https://covid-cases.now.sh/">COVID-19 Statistics</a> with some decent models and predictions;</p></li>
                <li><p><a href="https://aatishb.com/covidtrends/">a brilliant chart</a> showing very clearly when a country starts being able to control the outbreak;</p></li>
Michał Woźniak's avatar
It's John Hopkins, not John Hopkin's    
Michał Woźniak committed
484 
                <li><p>John Hopkins University's <a href="https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6">COVID-19 dashboard</a>, and their <a href="https://github.com/CSSEGISandData/COVID-19">cleaned global data in CSVs</a>, updated daily (this is the base data for this site).</p></li>
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
485
486 
            </ul>
        </div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
487 
        <footer>
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
488 
            <p>cobbled together by <a href="https://mastodon.social/@rysiek/">@rysiek</a>; <a href="https://git.rys.io/rysiek/covid/">code is here</a>; license: <a href="./LICENSE">Affero GPL</a><br/>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
489 
            uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a> and <a href="https://www.chartjs.org/">Charts.js</a> (both <a href="./LICENSE.wtf_wikipedia-charts.js.txt">MIT-licensed</a>) and the Play font (licensed under the <a href="./Play/OFL.txt">OFL</a>)<br/>
Michał Woźniak's avatar
remove the footer disclaimer about privacy; that is fixed already    
Michał Woźniak committed
490
491 
            data from <a href="https://github.com/CSSEGISandData/COVID-19">John Hopkins University</a> via <a href="https://github.com/pomber/covid19"><code>pomber/covid19</code></a></p>
            <p>there are no <a href="https://barnacles.online">barnacle trackers</a> on this page:<br/>no fonts, styles, scripts, nor images fetched from third-party servers</p>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
492 
        </footer>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
493
494 
    </body>
</html>