index.html 7.4 KB
Newer Older
1
2
<html>
    <head>
Michał Woźniak's avatar
fix    
Michał Woźniak committed
3
4
        <script src="./wtf_wikipedia-client.min.js"></script>
        <script src="./covid.js"></script>
Michał Woźniak's avatar
Michał Woźniak committed
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        <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
Michał Woźniak committed
21
22
23
                display: flex;
                flex-direction: column;
                min-height:100vh;
Michał Woźniak's avatar
Michał Woźniak committed
24
25
26
27
28
29
30
31
32
33
            }
            body > * {
                padding-left:5vw;
                padding-right:5vw;
            }
            body > * > * {
                text-shadow: none;
            }
            h1 {
                text-align:center;
Michał Woźniak's avatar
Michał Woźniak committed
34
35
36
37
38
39
                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
Michał Woźniak committed
40
            }
Michał Woźniak's avatar
Michał Woźniak committed
41
            h2, h3, h4, h5, h6, h7, strong {
Michał Woźniak's avatar
Michał Woźniak committed
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
                font-family: "Play Bold";
            }
            a {
                color: yellow;
            }
            
            #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
Michał Woźniak committed
62
                align-self: end;
Michał Woźniak's avatar
Michał Woźniak committed
63
            }
Michał Woźniak's avatar
Michał Woźniak committed
64
            #covid-stats h2,
65
            .site-data-container h2 {
Michał Woźniak's avatar
Michał Woźniak committed
66
67
68
69
70
                font-size: 140%;
                font-family: "Play Regular";
                font-weight: bold;
                text-transform: uppercase;
            }
Michał Woźniak's avatar
Michał Woźniak committed
71
72
            #covid-stats h2 {
                color: #444;
Michał Woźniak's avatar
Michał Woźniak committed
73
                opacity: 0.4;
Michał Woźniak's avatar
Michał Woźniak committed
74
75
            }
            .sources {
Michał Woźniak's avatar
Michał Woźniak committed
76
77
78
79
80
81
                font-size: 80%;
                font-style: italic;
                margin-top: 0.4em;
                text-align: right;
                opacity: 0.5;
            }
82
            .site-data {
Michał Woźniak's avatar
Michał Woźniak committed
83
                display: grid;
Michał Woźniak's avatar
Michał Woźniak committed
84
                grid-template-columns: auto auto auto;
Michał Woźniak's avatar
Michał Woźniak committed
85
86
                grid-template-rows: auto auto auto;
                grid-template-areas: 
Michał Woźniak's avatar
Michał Woźniak committed
87
88
89
                    "auto auto auto"
                    "auto auto auto"
                    "sources sources sources";
Michał Woźniak's avatar
Michał Woźniak committed
90
91
92
                grid-auto-flow: row;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
Michał Woźniak committed
93
            }
94
            .site-data > * {
Michał Woźniak's avatar
Michał Woźniak committed
95
                display: grid;
Michał Woźniak's avatar
Michał Woźniak committed
96
97
98
                margin:0px;
                padding:0.5em;
            }
99
            .site-data > h2 {
Michał Woźniak's avatar
Michał Woźniak committed
100
101
                grid-area: header;
            }
102
            .site-data > .sources {
Michał Woźniak's avatar
Michał Woźniak committed
103
                grid-area: sources;
Michał Woźniak's avatar
Michał Woźniak committed
104
            }
105
            .site-data > * .value {
Michał Woźniak's avatar
Michał Woźniak committed
106
107
108
                font-weight: bold;
                font-family: "Play Bold";
            }
109
            #sites-data-container {
Michał Woźniak's avatar
Michał Woźniak committed
110
                flex-grow:1;
111
112
113
114
115
116
117
                display: flex;
                flex-direction: row;
                align-items:flex-start;
                justify-content: center;
                flex-wrap: wrap;
            }
            #sites-data-container .site-data-container {
Michał Woźniak's avatar
Michał Woźniak committed
118
                display: flex;
Michał Woźniak's avatar
Michał Woźniak committed
119
                flex-direction: column;
120
121
                align-items:center;
                width:23em;
Michał Woźniak's avatar
Michał Woźniak committed
122
            }
Michał Woźniak's avatar
Michał Woźniak committed
123
124
125
126
127
128
129
130
            footer {
                font-size: 70%;
                text-align:center;
                opacity:0.8;
                line-height:150%;
                font-family: Monospace;
                background: black;
            }
131
            .site-data-container .sites-select {
Michał Woźniak's avatar
Michał Woźniak committed
132
133
134
135
136
137
138
139
140
141
                display: inline;
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                border:dotted 1px springgreen;
                padding:0.25em;
                background:none;
                color:springgreen;
                font-family: inherit;
                font-size:inherit;
142
                min-width:15em;
Michał Woźniak's avatar
Michał Woźniak committed
143
            }
144
            .site-data-container .sites-select option {
145
146
                font-size:70%;
            }
147
            .site-data-container h2 {
Michał Woźniak's avatar
Michał Woźniak committed
148
149
                position:relative;
            }
150
            .site-data-container h2::after {
Michał Woźniak's avatar
Michał Woźniak committed
151
152
153
154
155
156
157
                position:absolute;
                right:0.5em;
                top:0.25em;
                content: "▾";
                display: block;
                color: springgreen;
            }
158
159
            #add-site-container {
                order:99;
160
161
                width:0px;
                height:0px;
162
163
164
165
166
167
            }
            #add-site {
                font-size: 250%;
                text-decoration: none;
                border: dotted 1px springgreen;
                width: 1em;
168
                height: 0.97em;
169
170
171
172
173
                line-height: 90%;
                outline:none;
                text-align: Center;
                margin-top: 0.47em;
                color: springgreen;
Michał Woźniak's avatar
Michał Woźniak committed
174
175
176
177
                display:none;
            }
            #add-site.visible {
                display: inline-block;
178
            }
Michał Woźniak's avatar
Michał Woźniak committed
179
        </style>
180
181
    </head>
    <body>
182
183
184
185
186
187
188
189
        <h1>Scary COVID-19 data</h1>
        <div id="covid-stats">
            <h2>Global stats</h2>
            <div id="confirmed"><span class="label">Confirmed cases:</span> <span class="value"></span></div>
            <div id="deaths"><span class="label">Deaths:</span> <span class="value"></span></div>
            <div id="recovered"><span class="label">Recovered:</span> <span class="value"></span></div>
            <div id="mortality"><span class="label">Mortality rate:</span> <span class="value"></span></div>
        </div>
Michał Woźniak's avatar
Michał Woźniak committed
190
        <div class="sources"><a href="https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic">source</a></div>
191
        <div id="sites-data-container">
192
            <div id="add-site-container"><a href="#add-site" id="add-site">+</a></div>
193
194
195
196
197
198
            <div class="site-data-container">
                <h2><select class="sites-select" tabindex="1">
                    <option value="select one">(select an area)</option>
                </select></h2>
                <div class="site-data">
                </div>
Michał Woźniak's avatar
Michał Woźniak committed
199
            </div>
200
        </div>
201
        <p><strong>Disclaimer:</strong> this is all back-of-the-napkin math using data from Wikipedia. Take with a grain (or preferably, a spoonfull) of salt. Check your own sources; some great resources: <a href="http://covid.hi.is/">University of Iceland's COVID data model</a> (and its <a href="https://github.com/bgautijonsson/covid19/">sources</a>).</p>
202
        <footer>
Michał Woźniak's avatar
Michał Woźniak committed
203
204
205
            <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/>
            uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a> (<a href="./LICENSE.wtf_wikipedia.txt">MIT-licensed</a>) and the Play font (licensed under the <a href="./Play/OFL.txt">OFL</a>)<br/>
            data from Wikipedia</p>
206
        </footer>
207
208
    </body>
</html>