blob: bbab1022a3e6485271457020b807fe3329d3af17 [file] [log] [blame]
avm9996300a40032020-05-07 21:02:32 +02001<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>COVID-19 sandbox</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7
8 <style>
9 body {
10 font-family: 'Helvetica', 'Arial', sans-serif;
11 }
12
13 .graphs {
14 max-width: 100%;
15 }
16
17 .key-container {
18 display: inline-block;
19 position: fixed;
20 bottom: 8px;
21 right: 8px;
22 padding: 8px;
23
24 background: white;
25 border-radius: 4px;
26 }
27
28 .key-container h3 {
29 margin: 8px 0 12px 0;
30 }
31
32 .key {
33 border-collapse: collapse;
34 }
35
36 .key td {
37 border: solid 1px black;
38 padding: 2px;
39 }
40
41 .risk {
42 width: 40px;
43 }
44
45 .low-risk {
46 background-color: #a0ff94;
47 }
48
49 .intermediate-risk {
50 background-color: #dbff94;
51 }
52
53 .intermediate-high-risk {
54 background-color: #ffe494;
55 }
56
57 .high-risk {
58 background-color: #ff9494;
59 }
60 </style>
61 </head>
62 <body>
63 <img class="graphs" src="output/graph.svg">
64
65 <div class="key-container">
66 <h3>Llegenda</h3>
67 <table class="key">
68 <tr>
69 <td class="risk low-risk"></td>
70 <td>Risc baix</td>
71 </tr>
72 <tr>
73 <td class="risk intermediate-risk"></td>
74 <td>Risc mitjà</td>
75 </tr>
76 <tr>
77 <td class="risk intermediate-high-risk"></td>
78 <td>Risc mitjà-alt</td>
79 </tr>
80 <tr>
81 <td class="risk high-risk"></td>
82 <td>Risc alt</td>
83 </tr>
84 </table>
85 </div>
86 </body>
87</html>