ui look

index.html

@@ -3,6 +3,11 @@
   <title id="title"></title>
   <link rel="icon" type="image/svg" href="icon.svg">
   <style>
+    body {
+      font-family: sans-serif;
+      margin: 0;
+    }
+
     .relay {
       display: flex;
       flex-direction: row;
@@ -11,10 +16,12 @@
 
     .relay > * {
       flex: 1;
+      margin: 0.25em;
+      padding: 0.25em;
     }
 
     .name {
-          flex: 3;
+      flex: 2;
     }
 
     .header {
@@ -29,6 +36,17 @@
       text-align: right;
     }
 
+    .state {
+    }
+
+    .stateOn {
+      background-color: palegreen;
+    }
+
+    .stateOff {
+      background-color: indianred;
+    }
+
     #info {
       display: none;
     }
@@ -78,6 +96,19 @@
     }
   }
 
+  function updateState(relayTag, state) {
+    const tag = relayTag.getElementsByClassName("state")[0];
+    if (state) {
+      tag.innerText = "Ein";
+      tag.classList.add("stateOn");
+      tag.classList.remove("stateOff");
+    } else {
+      tag.innerText = "Aus";
+      tag.classList.add("stateOff");
+      tag.classList.remove("stateOn");
+    }
+  }
+
   function request(query = "") {
     if (timeout) {
       clearTimeout(timeout);
@@ -94,7 +125,7 @@
           const relayData = data.relays[index];
           const relayTag = document.getElementById("relay" + index) || create(index);
           updateValue(relayTag, "name", "input", relayData.name);
-          relayTag.getElementsByClassName("state")[0].innerText = relayData.state ? "Ein" : "Aus";
+          updateState(relayTag, relayData.state);
           updateValue(relayTag, "onMillis", "input", relayData.onMillis);
           updateValue(relayTag, "offMillis", "input", relayData.offMillis);
           updateValue(relayTag, "initial", "select", relayData.initial);