Gitiles
Code Review Sign In
gerrit.avm99963.com / covid19 / cb3737f614b4d0c32b81cb6aa3a421c6b0ceca82 / . / index.html
blob: dc066d680ef59f29446ca2419046335b8eed691d [file] [log] [blame]
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]1<!DOCTYPE html>
avm99963001cfc82020-07-12 22:41:09 +0200[diff] [blame]2<html lang="ca">
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]3 <head>
4 <meta charset="utf-8">
avm99963001cfc82020-07-12 22:41:09 +0200[diff] [blame]5 <title>Diagrames de risc de la COVID-19 a Catalunya</title>
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]6 <meta name="viewport" content="width=device-width, initial-scale=1">
7
avm99963001cfc82020-07-12 22:41:09 +0200[diff] [blame]8 <!-- Social networks metadata -->
9 <meta name="twitter:card" content="summary" />
10 <meta name="twitter:site" content="@avm99963" />
11 <meta name="twitter:creator" content="@avm99963" />
12 <meta property="og:url" content="https://covid-19.sandbox.avm99963.com/" />
13 <meta property="og:title" content="Diagrames de risc de la COVID-19 a Catalunya" />
14 <meta property="og:description" content="Pàgina web actualitzada diàriament amb diagrames de risc de la COVID-19 per cada regió sanitària de Catalunya." />
15 <meta property="og:image" content="https://covid-19.sandbox.avm99963.com/output/graph.png" />
16
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]17 <style>
18 body {
19 font-family: 'Helvetica', 'Arial', sans-serif;
avm999630b3b4072020-05-17 02:39:07 +0200[diff] [blame]20 padding-bottom: 200px;
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]21 }
22
avm99963068b43e2020-07-08 15:45:18 +0200[diff] [blame]23 .note {
24 width: calc(100% - 32px);
25 padding: 16px;
26 margin-bottom: 16px;
27 border-radius: 4px;
28 background: #FFEB3B;
29 box-shadow: 0 1px 3px 0px rgba(0, 0, 0, .6);
30
31 font-size: 13px;
32 line-height: 1.4;
33 }
34
35 .note p:first-child {
36 margin-top: 0;
37 }
38
39 .note p:last-child {
40 margin-bottom: 0;
41 }
42
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]43 .graphs {
44 max-width: 100%;
45 }
46
47 .key-container {
48 display: inline-block;
49 position: fixed;
50 bottom: 8px;
51 right: 8px;
52 padding: 8px;
53
54 background: white;
55 border-radius: 4px;
avm99963068b43e2020-07-08 15:45:18 +0200[diff] [blame]56 box-shadow: 0 1px 3px 0px rgba(0, 0, 0, .3);
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]57 }
58
59 .key-container h3 {
60 margin: 8px 0 12px 0;
61 }
62
63 .key {
64 border-collapse: collapse;
65 }
66
67 .key td {
68 border: solid 1px black;
69 padding: 2px;
70 }
71
72 .risk {
73 width: 40px;
74 }
75
76 .low-risk {
77 background-color: #a0ff94;
78 }
79
80 .intermediate-risk {
81 background-color: #dbff94;
82 }
83
84 .intermediate-high-risk {
85 background-color: #ffe494;
86 }
87
88 .high-risk {
89 background-color: #ff9494;
90 }
91 </style>
92 </head>
93 <body>
avm99963068b43e2020-07-08 15:45:18 +0200[diff] [blame]94 <div class="note">
95 <p><b>Nota</b>: La implementació que s'ha realitzat per calcular les dades podria ser incorrecta ja que no ha estat revisada per cap tercer, així que les gràfiques d'aquesta pàgina podrien ser incorrectes.
avm99963c0578732020-07-12 21:43:02 +0200[diff] [blame]96 <p>Les dades s'obtenen directament de l'API de la Generalitat de Catalunya i les gràfiques es generen seguint un procediment similar al que segueix el <a href="https://biocomsc.upc.edu/en/covid-19">grup BIOCOMSC de la UPC</a>. <a href="https://biocomsc.upc.edu/en/shared/delays_spain_30062020.pdf">Segons un informe d'aquest grup</a>, les dades corresponents a l'última setmana no són fiables. Tot i així, es continuen graficant en aquesta pàgina totes les dades disponibles per tal de donar una fita inferior dels valors finals en les dades de l'última setmana.</p>
avm9996326232cc2020-07-08 16:51:07 +0200[diff] [blame]97 <p>Es pot trobar el codi font complet del càlcul i generació de les gràfiques <a href="https://gerrit.avm99963.com/plugins/gitiles/covid19/+/refs/heads/master/">aquí</a>.</p>
avm99963068b43e2020-07-08 15:45:18 +0200[diff] [blame]98 </div>
99
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]100 <img class="graphs" src="output/graph.svg">
101
102 <div class="key-container">
103 <h3>Llegenda</h3>
104 <table class="key">
105 <tr>
106 <td class="risk low-risk"></td>
107 <td>Risc baix</td>
108 </tr>
109 <tr>
110 <td class="risk intermediate-risk"></td>
avm9996358284b62020-05-07 21:30:33 +0200[diff] [blame]111 <td>Risc mig</td>
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]112 </tr>
113 <tr>
114 <td class="risk intermediate-high-risk"></td>
avm9996358284b62020-05-07 21:30:33 +0200[diff] [blame]115 <td>Risc mig-alt</td>
avm9996300a40032020-05-07 21:02:32 +0200[diff] [blame]116 </tr>
117 <tr>
118 <td class="risk high-risk"></td>
119 <td>Risc alt</td>
120 </tr>
121 </table>
122 </div>
123 </body>
124</html>