Skip to content

GitLab

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