Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 22.5 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
minor style changes    
Michał Woźniak committed
27 
                min-width:600px;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
28
29
30
31
32
33
34
35
36
37 
            }
            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
38
39
40
41
42
43 
                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
44 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
45 
            h2, h3, h4, h5, h6, h7, strong {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
46
47
48
49
50
51 
                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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73 
            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
74
75
76
77
78
79
80
81
82
83
84
85
86
87 
            #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
88 
                align-self: end;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
89 
            }
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
90 
            #covid-stats h2 {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
91
92
93
94 
                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
95 
                color: #444;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
96 
                opacity: 0.4;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
97
98
99
100
101
102
103 
                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
104 
            #main-menu-container {
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
105
106 
                padding-top: 1.2rem;
                padding-bottom: 1.2rem;
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
107 
                font-size:80%;
Michał Woźniak's avatar
minor UI fix    
Michał Woźniak committed
108
109 
                max-width:1077pt;
                margin:auto;
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
110
111
112
113
114
115 
            }
            #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
116 
            #internal-main-menu-container p {
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
117
118
119
120
121
122 
                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
123
124 
                flex-grow:1;
                flex-shrink:1;
Michał Woźniak's avatar
added population data for 6 new sites; minor UI fixes    
Michał Woźniak committed
125
126 
                padding-left:0.5em;
                padding-right:0.5em;
Michał Woźniak's avatar
minor style changes    
Michał Woźniak committed
127 
                min-width:15em;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
128 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
129 
            .sources {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
130
131
132
133
134
135 
                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
136 
            .site-data {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
137 
                display: grid;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
138 
                grid-template-columns: auto auto auto;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
139
140 
                grid-template-rows: auto auto auto;
                grid-template-areas:
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
141
142
143 
                    "auto auto auto"
                    "auto auto auto"
                    "sources sources sources";
Michał Woźniak's avatar
moar style    
Michał Woźniak committed
144
145
146 
                grid-auto-flow: row;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
147 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
148 
            .site-data > * {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
149 
                display: grid;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
150
151
152 
                margin:0px;
                padding:0.5em;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
153 
            .site-data > h2 {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
154
155 
                grid-area: header;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
156 
            .site-data > .sources {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
157 
                grid-area: sources;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
158 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
159 
            .site-data > * .value {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
160
161
162 
                font-weight: bold;
                font-family: "Play Bold";
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
163 
            #sites-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
164 
                flex-grow:1;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
165
166 
                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
167 
                align-items:stretch;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
168
169 
                justify-content: center;
                flex-wrap: wrap;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
170 
                min-height:8em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
171
172 
            }
            #sites-data-container .site-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
173 
                display: flex;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
174 
                flex-direction: column;
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
175 
                align-items:center;
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
176
177 
                width:30rem;
                padding: 1rem;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
178 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
179
180
181
182
183
184
185
186 
            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
187 
            .site-data-container .sites-select {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
188
189
190
191 
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                border:dotted 1px springgreen;
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
192 
                padding:0 0.5em;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
193
194
195
196 
                background:none;
                color:springgreen;
                font-family: inherit;
                font-size:inherit;
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
197 
                min-width:27rem;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
198 
                transition: box-shadow 0.5s;
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
199
200
201
202 
                height: 3.2rem;
                box-sizing: content-box;
                display: block;
                flex-grow: 1;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
203 
            }
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
204
205
206 
            .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
207 
            .site-data-container .sites-select option {
Michał Woźniak's avatar
the select options font size fixed    
Michał Woźniak committed
208
209 
                font-size:70%;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
210 
            .site-data-container h2 {
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
211
212
213
214
215 
                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
216 
                position:relative;
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
217 
                font-size:140%;
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
218
219
220
221 
                margin: 0;
                padding: 0px;
                display: flex;
                width: 100%;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
222 
            }
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
223 
            .site-data-container h2.for-select::after {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
224
225
226
227
228
229 
                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
230
231 
                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
232 
            .sites-menu-container {
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
233
234 
                width:0px;
                padding-top: 1rem;
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
235 
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
236
237
238 
            .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
239 
            .sites-menu-container > a {
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
240
241
242
243
244
245
246 
                font-size: 250%;
                text-decoration: none;
                border: dotted 1px springgreen;
                line-height: 90%;
                outline:none;
                text-align: Center;
                color: springgreen;
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
247 
                display: none;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
248 
                cursor: pointer;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
249 
                transition: box-shadow 0.5s;
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
250
251
252 
                width: 3.2rem;
                height: 3.2rem;
                margin-bottom: 0.5rem;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
253
254
255 
            }
            .sites-menu-container > a:hover {
                box-shadow: 0px 0px 5px springgreen;
Michał Woźniak's avatar
various fixes    
Michał Woźniak committed
256
257
258 
            }
            #add-site.visible {
                display: inline-block;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
259 
            }
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
260 
            .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
261
262 
                display:none;
            }
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
263 
            .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
264
265 
                display:inline-block;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
266 
            .sites-menu-container.left > a {
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
267 
                display: inline-block;
Michał Woźniak's avatar
necessary fixes were necessary; one-pixel differences are infuriating    
Michał Woźniak committed
268
269
270
271
272 
                margin-left: -4.2rem;
            }
            .sites-menu-container.right {
                position: relative;
                left: 1rem;
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
273 
            }
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
274 
            #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
275
276 
                height:80vh;
                min-height:600px;
Michał Woźniak's avatar
some styling changes    
Michał Woźniak committed
277
278
279 
                background: #333;
                padding-top: 1em;
                padding-bottom: 1em;
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
280 
            }
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
281 
            #the-chart {
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
282 
                display:block;
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
283 
            }
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
284
285
286 
            #disclaimers-container {
                font-size:80%;
            }
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
287
288
289
290
291 
            .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
292 
                flex-wrap: wrap;
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
293
294
295 
            }
            .chart-config-container input {
                display:none;
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
296
297
298
299
300
301
302
303 
            }
            .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
304
305 
            .chart-config-container #chart-reset-settings {
                display:inline-block;
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
306 
            }
Michał Woźniak's avatar
menu UI done (inshallah!); a few small UI fixes    
Michał Woźniak committed
307 
            .chart-config-container label {
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
308
309
310
311
312 
                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
313
314
315 
            /*
             * chart controls mechanics
             */
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
316
317
318 
            .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
319 
            .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
320
321
322
323
324
325 
            .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
326 
            .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
327
328
329
330 
            .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
331
332
333
334 
                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
335
336
337 
            .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
338
339
340 
            .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
341
342
343
344
345 
                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
346 
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
347
348
349 
            .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
350
351 
            .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
352
353 
                display:none;
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
354
355
356 
            .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
357
358 
            .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
359
360 
                display:inline;
            }
Michał Woźniak's avatar
implemented rolling average for new case mode    
Michał Woźniak committed
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381 
            .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
382
383
384
385 
            .chart-config-container .break {
                flex-basis: 100%;
                height: 0;
            }
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
386 
        </style>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
387
388 
    </head>
    <body>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
389
390 
        <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
391
392
393
394 
            <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>
Michał Woźniak's avatar
mortality is actually death-to-case ratio; also, added a load-six-sites menu...    
Michał Woźniak committed
395 
            <div id="death-to-case"><span class="label">Death-to-case ratio:</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
396 
        </div>
Michał Woźniak's avatar
source acknowledgements, some Disclaimers removed since we are not using messy...    
Michał Woźniak committed
397 
        <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
398 
        <div id="main-menu-container">
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
399 
            <div id="internal-main-menu-container">
Michał Woźniak's avatar
stylistic fixes in the load-six-sites menu    
Michał Woźniak committed
400 
                <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
401
402
403 
                <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
mortality is actually death-to-case ratio; also, added a load-six-sites menu...    
Michał Woźniak committed
404 
                <input type="button" id="site-menu-button-death-to-case" value="highest death-to-case ratio"/>
Michał Woźniak's avatar
menu-button-recovered added; buttons now set best chart settings for them    
Michał Woźniak committed
405 
                <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
406 
                <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
407 
            </div>
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
408
409 
        </div>
        <div id="sites-data-container">
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
410 
            <div class="sites-menu-container left">
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
411 
                <a href="#clear-all" id="clear-all-sites">×</a>
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
412 
            </div>
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
413 
            <div class="site-data-container">
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
414 
                <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
415
416
417
418 
                    <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
419 
            </div>
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
420 
            <div  class="sites-menu-container right">
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
421
422
423 
                <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
424 
        </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
425
426 
        <div id="the-chart-container">
            <canvas id="the-chart"></canvas>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
427
428 
        </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
429 
            <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
430 
            <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
431 
            <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
432 
            <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
433
434
435
436
437
438 
            <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
439 
            <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
440
441
442
443 
            <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
444 
            <div class="chart-config-group">
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
445
446
447
448 
                <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
449 
                <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
450 
            </div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
451
452
453
454
455 
            <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
456 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
457
458
459
460
461 
            <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
462
463
464
465
466 
            <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
467
468
469
470
471 
            <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
472 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
473 
            <div class="chart-config-group">
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
474 
                <p>Start</p>
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
475 
                <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
476 
                <p>or from:</p>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
477
478
479
480 
                <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
481 
                <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
482 
            </div>
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
483
484
485
486 
            <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
487 
        </div>
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
488
489
490 
        <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
491
492 
                <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
493
494
495 
            </ul>
            <h3>Some great resources:</h3>
            <ul>
Michał Woźniak's avatar
IS model is in EN now! wooo!    
Michał Woźniak committed
496 
                <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
497
498 
                <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
499 
                <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
500
501 
            </ul>
        </div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
502 
        <footer>
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
503 
            <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
504 
            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
505
506 
            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
507 
        </footer>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
508
509 
    </body>
</html>