diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..8f1e261
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+ Climate-Measuring-Box
+
+
+
+
+
+
+
+
+
+
+
+
Temperatuur:
Not connected
+
+
+
+
+
Luchtvochtigheid:
Not connected
+
+
+
+
+
Lichtintensiteit:
Not connected
+
+
+
+
+
+
+
+
+
+
Time until POST request to API:
Connect to port
+
+
+
+
+
+
+
+
diff --git a/web/main.js b/web/main.js
new file mode 100644
index 0000000..dcb0137
--- /dev/null
+++ b/web/main.js
@@ -0,0 +1,63 @@
+// Make lines in the graph of the live data
+Plotly.plot("liveGraph", [
+ {
+ x: timeArray, // Use timeArray as x values
+ y: newArrayTemp,
+ mode: "lines",
+ line: { color: "#80CAF6" },
+ name: "Temperature",
+ },
+ {
+ x: timeArray, // Use timeArray as x values
+ y: newArrayHumid,
+ mode: "lines",
+ line: { color: "#FFA500" },
+ name: "Humidity",
+ },
+ {
+ x: timeArray, // Use timeArray as x values
+ y: newArrayLight,
+ mode: "lines",
+ line: { color: "#00FF00" },
+ name: "Light / 100",
+ },
+]);
+
+let cnt = 0;
+
+// Update the graph every 1 ms
+let interval = setInterval(function () {
+ var time = new Date();
+
+ var update = {
+ x: [[time]],
+ y: [[newArrayTemp], [newArrayHumid], [newArrayLight]],
+ };
+
+ var olderTime = time.setMinutes(time.getMinutes() - 1);
+ var futureTime = time.setMinutes(time.getMinutes() + 1);
+
+ var minuteView = {
+ xaxis: {
+ type: "date",
+ range: [olderTime, futureTime],
+ },
+ };
+ Plotly.relayout("liveGraph", minuteView);
+
+ apiGraph = document.getElementById("apiGraph");
+ Plotly.newPlot(
+ apiGraph,
+ [
+ {
+ x: dateArray,
+ y: valueArray,
+ },
+ ],
+ {
+ margin: { t: 0 },
+ }
+ );
+
+ if (cnt === 100) clearInterval(interval);
+}, 1);
diff --git a/web/styles.css b/web/styles.css
new file mode 100644
index 0000000..ac30244
--- /dev/null
+++ b/web/styles.css
@@ -0,0 +1,128 @@
+body {
+ background-color: white;
+ align-content: center;
+ text-align: center;
+ font-family: "inter", sans-serif;
+ margin: 0;
+ }
+
+ h1 {
+ opacity: 0.8;
+ color: black;
+ margin: auto;
+ width: 50%;
+ }
+
+ h2 {
+ text-align: center;
+ color: black;
+ opacity: 0.8;
+ }
+
+ p1 {
+ color: solid white;
+ }
+
+ .liveGraph{
+ width: 90%;
+ height: 100%;
+
+ }
+
+ .divCnt{
+ text-align: begin;
+ }
+
+ .apiGraph{
+ height: 100%;
+ width: 90%;
+ }
+
+ .statusElement{
+ display:inline-block;
+ border: solid #1f82d3 2px;
+ border-radius: 10px;
+ width: 90%;
+ }
+
+ .statusText{
+ font-size: 20px;
+ }
+
+ .flex-LiveData {
+ display: flex;
+ align-content: begin;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: space-evenly;
+ gap: 5px;
+ padding: 10px;
+ }
+
+ .flex-LiveData > div {
+ border: solid #1f82d3 2px;
+ padding: 15px 0;
+ font-size: 30px;
+ border-radius: 10px;
+ height: fit-content;
+ width: 30%;
+ }
+
+ .flex-graph {
+ display: flex;
+ align-content: begin;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ gap: 5px;
+ padding: 10px;
+
+ }
+
+ .flex-graph > div {
+ position: relative;
+ border: solid #1f82d3 2px;
+ padding: 15px 0;
+ font-size: 30px;
+ border-radius: 10px;
+ flex-basis: 95%;
+ }
+
+ @media screen and (max-width: 850px) {
+ .flex-LiveData>div {
+ width: 100%;
+ }
+ }
+
+ ul {
+ margin: 0;
+ padding: 20px 0;
+ }
+
+ .navbar {
+ text-align: center;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ }
+
+ a{
+ padding: 10px;
+ color: black;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ li{
+ display: inline-block;
+ padding: 10px;
+ margin: 0 5px;
+ border-radius: 5px;
+ transition: 0.3s;
+ }
+ .navbar a:hover {
+ background-color: #196bad;
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+
\ No newline at end of file