From ace5addd8bd6b3e05379aa4fa030ff314fe885aa Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Thu, 24 Oct 2024 17:24:14 +0200 Subject: [PATCH] added basic website for config --- static/index.html | 89 +++++++++++++++++++++++++++++++++++++++++++++++ static/script.js | 17 +++++++++ static/style.css | 54 ++++++++++++++++++++++++++++ 3 files changed, 160 insertions(+) create mode 100644 static/index.html create mode 100644 static/script.js create mode 100644 static/style.css diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..3adfe3c --- /dev/null +++ b/static/index.html @@ -0,0 +1,89 @@ + + + + + + Document + + + + +

Konfiguration

+ +
+
+ Verbindung + + + +
+ +
+ + + +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ Art-Net + + +
+ + +
+ + diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..5cb05b2 --- /dev/null +++ b/static/script.js @@ -0,0 +1,17 @@ +const form = document.querySelector("form"); +const dynamicInputs = form.querySelectorAll("[data-field][data-values]"); + +document.addEventListener("change", updateVisibility); + +function updateVisibility() { + dynamicInputs.forEach((element) => { + const input = form.querySelector(`#${element.dataset.field}`); + if (element.dataset.values.split("|").includes(input.value)) { + element.classList.remove("hidden"); + } else { + element.classList.add("hidden"); + } + }); +} + +updateVisibility(); diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..52f8086 --- /dev/null +++ b/static/style.css @@ -0,0 +1,54 @@ +:root { + --color-primary: #087e8b; + --color-on-primary: white; +} + +body { + background-color: #222; + color: white; + font-family: Arial, Helvetica, sans-serif; +} + +form > * { + margin-bottom: 16px; +} + +fieldset { + border-radius: 8px; +} + +input, +select { + display: block; + width: 300px; + background-color: #222; + color: white; + border: 1px solid white; + border-radius: 8px; + padding: 8px; + box-sizing: border-box; +} + +input:focus, +select:focus { + outline: none; + border-color: var(--color-primary); +} + +button { + border: none; + inset: none; + border-radius: 8px; + background-color: var(--color-primary); + color: var(--color-on-primary); + padding: 8px 16px; +} + +:is(div:has(:is(input, select)), input, select) + + :is(div:has(:is(input, select)), input, select) { + margin-top: 8px; +} + +.hidden { + display: none; +}