index.html 4.32 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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
        <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;
                padding-top:5vw;
            }
            body > * {
                padding-left:5vw;
                padding-right:5vw;
                text-shadow:-1px -1px 1px black, 1px 1px 0px #888;
            }
            body > * > * {
                text-shadow: none;
            }
            h1 {
                text-align:center;
                padding-top:1em;
                padding-bottom:1em;
            }
            h1, h2, h3, h4, h5, h6, h7, strong {
                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";
            }
            #covid-stats h2 {
                font-size: 140%;
                color: #444;
                font-family: "Play Regular";
                opacity: 0.4;
                font-weight: bold;
                text-transform: uppercase;
                align-self:center;
            }
            #sources {
                font-size: 80%;
                font-style: italic;
                margin-top: 0.4em;
                text-align: right;
                opacity: 0.5;
            }
            #site-data {
                display: grid;
Michał Woźniak's avatar
Michał Woźniak committed
76
77
78
79
80
81
82
                grid-template-columns: auto auto auto auto;
                grid-template-rows: auto auto;
                grid-auto-flow: row;
                grid-column-gap:0.5em;
                grid-column-gap:0.5em;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
Michał Woźniak committed
83
84
85
86
87
88
89
90
91
            }
            #site-data > * {
                display: grid;
            }
            #site-data > * .value {
                font-weight: bold;
                font-family: "Play Bold";
            }
        </style>
92
93
    </head>
    <body>
94
        <h1>Scary COVID-19 data</h1>
Michał Woźniak's avatar
Michał Woźniak committed
95
        <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>
96
97
98
99
100
101
102
        <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
103
        <p id="sources">data sourced directly <a href="https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic">from Wikipedia</a></p>
104
        <div>
Michał Woźniak's avatar
Michał Woźniak committed
105
            <label for="sites">Choose an infection site/area:</label>
106
            <select id="sites" tabindex="1">
107
108
109
                <option value="select one">(select one)</option>
            </select>
        </div>
110
        <div id="site-data"></div>
111
112
        <hr/>
        <footer>
113
            <p><a href="https://git.rys.io/rysiek/covid/">Code</a>. License: <a href="./LICENSE">Affero GPL</a>; uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a>, licensed under the MIT license. Data from Wikipedia.</p>
114
        </footer>
115
116
    </body>
</html>