-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtemplate.html
172 lines (169 loc) · 6.85 KB
/
template.html
1
2
3
4
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Quando torneremo alla normalità? Analisi dei dati della campagna vaccinale in Italia.">
<meta name="keywords" content="COVID 19, coronavirus, vaccini, vaccinazioni">
<title>Quanto manca?</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
const options = {
bottom: '32px', // default: '32px'
right: '32px', // default: '32px'
left: 'unset', // default: 'unset'
time: '0.3s', // default: '0.3s'
mixColor: '#ededed', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
function addDarkmodeWidget() {
new Darkmode(options).showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
<style>
.text-big {
font-size: 130%;
font-weight: bold;
position: relative;
top: -5px;
margin-bottom: -4px;
}
.text-bigger {
font-size: 200%;
font-weight: bold;
position: relative;
top: -6px;
margin-bottom: -4px;
}
.darkmode--activated .text-bigger {
color: white;
}
.darkmode--activated .text-big {
color: white;
}
.darkmode--activated .text {
color: #ccc8c4;
}
</style>
</head>
<body>
<div class="container mt-2 pt-2 px-xl-5">
<h1>Quando torneremo alla normalità?</h1>
<p>
La domanda non ha una risposta precisa.
<a href="https://www.who.int/news-room/q-a-detail/herd-immunity-lockdowns-and-covid-19">Non è ancora chiaro</a>
quale è la percentuale di popolazione che deve essere vaccinata per avere la cosidetta
<b>immunità di gregge</b> o di massa dal virus SARS-Cov-2.
Realisticamente, questo numero si aggira intorno all'<b>80% della popolazione</b>
ovvero circa 48 milioni di persone.
</p>
<h3>Analisi dei dati della campagna vaccinale</h3>
<div class="text-center">
In Italia ci sono <br />
<span class="text-big">
<!-- totalVaccinations -->
persone vaccinate</span> <br />
che corrispondono al <br />
<span class="text-big">
<!-- totalVaccinationsPerc -->
della popolazione.
</span> <br />
Ne abbiamo vaccinate <br />
<span class="text-big">
<!-- totalVaccinationsLastWeek -->
nell'ultima settimana,</span> <br />
con un ritmo di <br />
<span class="text-big">
<!-- vaccinesPerDay -->
vaccinati al giorno.</span> <br />
Continuando di questo passo, raggiungeremo l'immunità di gregge il <br />
<span class="text-bigger">
<!-- hitDate -->
<span class="d-none d-sm-inline">
<!-- hitHour -->
</span>
</span> <br />
<span class="text" style="position: relative; top: -5px">ovvero fra</span> <br />
<span class="text-bigger" style="position: relative; top: -15px;">
<!-- daysRemaining -->
giorni.
</span>
</div>
<img alt="Grafico vaccinati ultima settimana" src="
plot.png
" class="img-fluid">
<h3 class="mt-2">Frequently Asked Questions</h3>
<p>
<b><i>Perché i dati non sono aggiornati ad oggi?</i></b> <br />
I dati del giorno attuale sono (per ovvi motivi) incompleti, quindi vengono ignorati.
</p>
<p>
<b><i>Le dosi sono due, devi raddoppiare il numero di giorni!</i></b> <br />
<u>Dal 27 gennaio 2021 il sito mostra esclusivamente i dati
delle <b>persone vaccinate</b>, ovvero chi ha ricevuto sia la prima che la seconda dose.</u>
</p>
<p>
<b><i>Perché consideri solo i dati dell'ultima settimana?</i></b> <br />
Come abbiamo imparato con i dati dei contagi, 7 giorni è un periodo di tempo ragionevole per fare
analisi di questo tipo.
</p>
<p>
<b><i>I vaccini fanno X! Non ne usciremo mai!</i></b> <br />
Non mi interessa della tua opinione e non mi interessa discutere con te.
Questo sito vuole solo mostrare i dati come stanno, senza nessuna polemica o allusione.
</p>
<p>
<b><i>Il progetto è open-source?</i></b> <br />
Sì! Oltre ad essere open-source, è anche <b>software libero</b>.
Puoi accedere al codice e leggere i dettagli della licenza sulla
<a href="https://github.com/MarcoBuster/quanto-manca">pagina GitHub dedicata</a>.
</p>
<p>
<b><i>Da dove prendi i dati?</i></b> <br />
Dal <a href="https://github.com/italia/covid19-opendata-vaccini/">dataset ufficiale</a> del
Dipartimento per la Trasformazione Digitale e dell'Agenzia per l'Italia Digitale, che ringrazio molto
per il loro contributo.
</p>
<p>
<b><i>Come funziona, a livello tecnico?</i></b> <br />
Il funzionamento è semplice. Ad ogni commit, manualmente o ogni giorno all'01:00 di notte (UTC), viene
attivata una GitHub Action che scarica l'ultimo dataset ed esegue lo script che aggiorna la pagina e
genera i grafici. Viene quindi fatto un commit sul branch <code>gh-pages</code> dove risiedono i sorgenti
computati della pagina, serviti da GitHub Pages.
Tutta l'infrastruttura è quindi completamente serverless e automaticamente gestita da GitHub. <br />
Lo script è scritto in Python ed utilizza le librerie di analisi numerica numpy, pandas e la libreria
per grafici matplotlib. Per la pagina utilizzo Bootstrap e del CSS scritto male; sicuramente questo sarà
oggetto di miglioramento in futuro.
</p>
<p>
<b><i>Aggiungi dato X?</i></b> <br />
Se è inerente al progetto, certo! Ultimamente ho molto poco tempo, quindi se fai una pull request su GitHub
lo apprezzerò.
</p>
<p>
<b><i>Ho trovato un errore!</i></b> oppure <b><i>Ho qualche altra domanda</i></b> <br />
<b>Non leggo i messaggi privati su Telegram</b>, per favore scrivimi una email all'indirizzo che trovi in basso.
Sarò felice di risponderti.
</p>
</div>
<div class="container-fluid mt-2 pb-4">
<hr />
<div class="container pt-2 px-xl-5">
Creato con ♥ da <a href="https://marcoaceti.it">Marco Aceti</a>
(<a href="https://github.com/MarcoBuster">GitHub</a>,
<a href="https://t.me/MarcoBuster">Telegram</a>,
<a href="mailto:quantomanca@marco.anonaddy.com">email</a>). <br />
<span class="text-muted">Copyleft 🄯 Marco Aceti, 2020. <i>Some rights reserved.</i></span> <br />
</div>
</div>
<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "63740d0c782741779da5ffb48f532282"}'></script><!-- End Cloudflare Web Analytics -->
</body>
</html>