Implemented Lighting Control

static/lighting.css

@@ -0,0 +1,78 @@
+main {
+    padding: 2em;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1em;
+}
+
+.group {
+    border: 1px solid var(--color);
+    background-color: var(--color-bg1);
+}
+
+.group>div {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+    padding: 0.5em;
+    width: fit-content;
+}
+
+.light {
+    border: 1px solid var(--color);
+    background-color: var(--color-bg2);
+    width: 12em;
+    height: 15em;
+    display: flex;
+    flex-direction: column;
+}
+
+.light .view {
+    display: flex;
+    flex-direction: row;
+
+    .view-symb {
+        flex-grow: 1;
+        font-size: 8em;
+        text-align: center;
+    }
+}
+
+input[type=range][orient=vertical] {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    appearance: slider-vertical;
+    width: 0.5em;
+    height: 11em;
+    vertical-align: bottom;
+}
+
+h3 {
+    text-wrap: nowrap;
+    overflow-x: hidden;
+}
+
+.colormode {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    margin: 1px;
+    gap: 1px;
+
+    >output {
+        flex-basis: 2em;
+        text-align: center;
+        align-content: center;
+        font-weight: bold;
+    }
+
+    >input {
+        flex-grow: 1;
+        text-align: center;
+    }
+
+    >input[type=color] {
+        height: 100%;
+    }
+}

static/lighting.js

@@ -0,0 +1,53 @@
+function getFirst(item, className) {
+    return item.getElementsByClassName(className)[0]
+}
+
+for (lform of document.getElementsByTagName("form")) {
+    var toggleBtn = getFirst(lform, "symb-btn")
+    if (toggleBtn) {
+        toggleBtn.onclick = (event) => {
+            event.preventDefault(true);
+            var parent = event.target.closest("form");
+            var actionField = getFirst(parent, "action")
+            actionField.value = "toggle";
+            parent.submit();
+        }
+    }
+
+    var brightBar = getFirst(lform, "brightness")
+    if (brightBar) {
+        brightBar.onchange = (event) => {
+            event.preventDefault(true);
+            var parent = event.target.closest("form");
+            var actionField = getFirst(parent, "action")
+            actionField.value = "bright";
+            parent.submit();
+        }
+    }
+
+    var ctInput = getFirst(lform, "ctsel")
+    if (ctInput) {
+        ctInput.onkeydown = (event) => {
+            if (event.key == "Enter") {
+                event.preventDefault(true);
+                var parent = event.target.closest("form");
+                var actionField = getFirst(parent, "action")
+                actionField.value = "ctsel";
+                parent.submit();
+            }
+        }
+        console.log(ctInput)
+    }
+
+    var hsInput = getFirst(lform, "hssel")
+    if (hsInput) {
+        hsInput.onchange = (event) => {
+            event.preventDefault(true);
+            var parent = event.target.closest("form");
+            var actionField = getFirst(parent, "action")
+            actionField.value = "hssel";
+            parent.submit();
+        }
+        console.log(hsInput)
+    }
+}