1 files changed, 104 insertions, 0 deletions
diff --git a/monitor.html b/monitor.html
new file mode 100644
index 0000000..c800543
--- /dev/null
+++ b/monitor.html
@@ -0,0 +1,104 @@
+<html>
+	<head>
+		<title>Aktuelles Balkonwetter</title>
+		<meta charset="UTF-8">
+
+		<style type="text/css">
+			.light {
+				background: white;
+				color: black;
+			}
+
+			.dark {
+				background: black;
+				color: white;
+			}
+
+			.grid {
+				display: grid;
+				grid-template-columns: auto auto auto;
+				grid-template-rows: 5% 35%;
+				gap: 3em;
+				height: 70%;
+				margin-top: 5%;
+				margin-bottom: 5%;
+			}
+
+			.item {
+				font-size: 2vw;
+				text-align: center;
+			}
+
+			.item span:first-of-type {
+				font-size: 5vw;
+				font-weight: bold;
+			}
+
+			.item .unit {
+				font-size: 3vw;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="grid">
+			<div class="item">Temperatur</div>
+			<div class="item">Luftfeuchte</div>
+			<div class="item">Luftdruck</div>
+
+			<div class="item">
+				<span id="temperature"></span><br/> <span class="unit">°C</span>
+			</div>
+			<div class="item">
+				<span id="humidity"></span><br/> <span class="unit">%</span>
+			</div>
+			<div class="item">
+				<span id="pressure"></span><br/> <span class="unit">hPa</span>
+			</div>
+
+			<div class="item">Licht</div>
+			<div class="item">Infrarot</div>
+			<div class="item">Breitband</div>
+
+			<div class="item">
+				<span id="lux"></span><br/> <span class="unit">lux</span>
+			</div>
+			<div class="item">
+				<span id="luxIr"></span><br/> <span class="unit">lux</span>
+			</div>
+			<div class="item">
+				<span id="luxBs"></span><br/> <span class="unit">lux</span>
+			</div>
+		</div>
+
+		<script>
+			function dot(num) {
+				return num.toString().replace('.', ',');
+			}
+
+			function p(data) {
+				document.getElementById("temperature").innerHTML = dot(data.temperature / 100.0);
+				document.getElementById("humidity").innerHTML = dot(data.humidity / 1000.0);
+				document.getElementById("pressure").innerHTML = dot(data.pressure / 1000.0);
+				document.getElementById("lux").innerHTML = data.lux;
+				document.getElementById("luxIr").innerHTML = data.lux_ir;
+				document.getElementById("luxBs").innerHTML = data.lux_bs;
+
+				if (data.lux < 100) {
+					document.body.className = "dark";
+				} else {
+					document.body.className = "light";
+				}
+			}
+
+			function refresh() {
+				fetch("http://sensor.example.net")
+					.then(res => res.json())
+					.then((json) => p(json))
+					.catch(err => { throw err });
+			}
+
+			window.setInterval(refresh, 15000);
+			window.setTimeout(refresh, 100);
+		</script>
+	</body>
+</html>