ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-19 10:32:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added basic website for config

Browse source
This commit is contained in:
RaffaelW 2024-10-24 17:24:14 +02:00
parent bb71af176e
commit ace5addd8b
3 changed files with 160 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
static/index.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/static/style.css" />
<script src="/static/script.js" defer></script>
</head>
<body>
<h1>Konfiguration</h1>
<form action="" method="post">
<fieldset>
<legend>Verbindung</legend>
<select
name="ip-method"
id="input-ip-method"
title="IP-Methode"
>
<option value="static">Statisch</option>
<option value="dhcp">DHCP</option>
</select>
<div data-field="input-ip-method" data-values="static">
<input
type="text"
name="ip"
id="input-ip"
placeholder="IP-Adresse/CIDR"
/>
</div>
<select
name="connection"
id="input-connection"
title="Verbindung"
>
<option value="wifi-sta">WiFi-Station</option>
<option value="wifi-ap">WiFi-AccessPoint</option>
<option value="ethernet">Ethernet</option>
</select>
<div data-field="input-connection" data-values="wifi-sta">
<input
type="text"
name="ssid"
id="input-ssid"
placeholder="SSID"
/>
</div>
<div data-field="input-connection" data-values="wifi-ap">
<select
name="network"
id="input-network"
title="Netzwerk"
></select>
</div>
<div
data-field="input-connection"
data-values="wifi-sta|wifi-ap"
>
<input
type="password"
name="password"
id="input-password"
placeholder="Passwort"
/>
</div>
</fieldset>
<fieldset>
<legend>Art-Net</legend>
<input
type="number"
name="universe"
id="universe"
placeholder="Universe"
/>
</fieldset>
<button type="submit">Speichern</button>
</form>
</body>
</html>

17
static/script.js Normal file
View file

@ -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();

54
static/style.css Normal file
View file

@ -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;
}