First prototype
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..bbab102
--- /dev/null
+++ b/index.php
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>COVID-19 sandbox</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <style>
+ body {
+ font-family: 'Helvetica', 'Arial', sans-serif;
+ }
+
+ .graphs {
+ max-width: 100%;
+ }
+
+ .key-container {
+ display: inline-block;
+ position: fixed;
+ bottom: 8px;
+ right: 8px;
+ padding: 8px;
+
+ background: white;
+ border-radius: 4px;
+ }
+
+ .key-container h3 {
+ margin: 8px 0 12px 0;
+ }
+
+ .key {
+ border-collapse: collapse;
+ }
+
+ .key td {
+ border: solid 1px black;
+ padding: 2px;
+ }
+
+ .risk {
+ width: 40px;
+ }
+
+ .low-risk {
+ background-color: #a0ff94;
+ }
+
+ .intermediate-risk {
+ background-color: #dbff94;
+ }
+
+ .intermediate-high-risk {
+ background-color: #ffe494;
+ }
+
+ .high-risk {
+ background-color: #ff9494;
+ }
+ </style>
+ </head>
+ <body>
+ <img class="graphs" src="output/graph.svg">
+
+ <div class="key-container">
+ <h3>Llegenda</h3>
+ <table class="key">
+ <tr>
+ <td class="risk low-risk"></td>
+ <td>Risc baix</td>
+ </tr>
+ <tr>
+ <td class="risk intermediate-risk"></td>
+ <td>Risc mitjà</td>
+ </tr>
+ <tr>
+ <td class="risk intermediate-high-risk"></td>
+ <td>Risc mitjà-alt</td>
+ </tr>
+ <tr>
+ <td class="risk high-risk"></td>
+ <td>Risc alt</td>
+ </tr>
+ </table>
+ </div>
+ </body>
+</html>