diff --git a/frontend/data.json b/frontend/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..cffb009d36b0aef52e40897f11e9ab0d92355e69
--- /dev/null
+++ b/frontend/data.json
@@ -0,0 +1,17 @@
+{
+ "incidents": [
+ {
+ "domain": "c3l.lu",
+ "date": 3
+ },
+ {
+ "domain": "social.c3l.lu",
+ "date": 5
+ },
+ {
+ "domain": "mail.c3l.lu",
+ "date": 10
+ }
+ ]
+ }
+
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index fcf54e05aa5539c1f4e6b9f19429a053f5860326..54f151ab27432bb05f7376e7b4a931a295f301b4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,7 @@
TLS Outage Tracker
+
@@ -12,24 +13,20 @@
since last outage caused by TLS expiry
-
-
Last incidents
+
+
Last incidents
-
-
-
+
+
+
| c3l.lu |
3 days ago |
-
-
-
+
| social.c3l.lu |
5 days ago |
-
-
-
+
| mail.c3l.lu |
10 days ago |
diff --git a/frontend/script.js b/frontend/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..82ace72bfda72f0420341d1d2c865bc75955bb7f
--- /dev/null
+++ b/frontend/script.js
@@ -0,0 +1,30 @@
+function generateTable(data) {
+ const tableBody = document.createElement("tbody");
+ tableBody.classList.add("logs__tbody");
+
+ for (let i = 0; i < data.length; i++) {
+ const row = document.createElement("tr");
+ row.classList.add("logs__trow");
+
+ const domain = document.createElement("td");
+ domain.classList.add("logs__item__name");
+ const domainText = document.createTextNode(data[i].domain);
+ domain.appendChild(domainText);
+ row.appendChild(domain);
+
+ const date = document.createElement("td");
+ date.classList.add("logs__item__date");
+ const dateText = document.createTextNode(data[i].date + " days ago");
+ date.appendChild(dateText);
+ row.appendChild(date);
+
+ tableBody.appendChild(row);
+ }
+
+ const table = document.createElement("table");
+ table.classList.add("logs__table");
+ table.appendChild(tableBody);
+ document.getElementById("logs").appendChild(table);
+}
+
+fetch("data.json").then(res => res.json()).then(data => generateTable(data.incidents));
\ No newline at end of file
diff --git a/frontend/style.css b/frontend/style.css
index f953d4e275eca5fd3249e5c7c2fb66ccbf1ec2be..e91c86c5f2a2e5a72418d5177caf1c7467f6cd4d 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -57,7 +57,7 @@ body {
max-width: 50vw;
min-width: 50vw;
- margin-top: 2.5vh;
+ margin-top: 3vh;
border-radius: 0.1rem;
border-style: solid;
border-color: #454545;
@@ -73,7 +73,7 @@ body {
.logs__title {
display: block;
margin-top: 1vh;
- margin-bottom: 1vh;
+ margin-bottom: 2vh;
font-size: 30px;
text-decoration: underline;
}