mirror of
https://github.com/HendrikRauh/dmx-interface.git
synced 2025-05-19 10:32:56 +00:00
187 lines
7.5 KiB
HTML
187 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Konfiguration</title>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<script type="module" src="/input-visibility.js" defer></script>
|
|
<script type="module" src="/loading-screen.js" defer></script>
|
|
<script type="module" src="/load-data.js" defer></script>
|
|
<script type="module" src="/networks.js" defer></script>
|
|
<script type="module" src="/submit.js" defer></script>
|
|
<script type="module" src="/reset.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="loading-screen">
|
|
<div class="spinner-container">
|
|
<!-- h2 is filled dynamically -->
|
|
<h2></h2>
|
|
<div class="spinner"></div>
|
|
<button
|
|
class="reload"
|
|
type="button"
|
|
onclick="window.location.reload()"
|
|
>
|
|
Seite neu laden
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<form class="hidden">
|
|
<h1>Konfiguration</h1>
|
|
<fieldset>
|
|
<legend>Verbindung</legend>
|
|
<label>
|
|
<span>IP-Zuweisung:</span>
|
|
<select
|
|
name="ip-method"
|
|
id="input-ip-method"
|
|
title="IP-"
|
|
>
|
|
<option value="0">Statisch</option>
|
|
<option value="1">DHCP</option>
|
|
</select>
|
|
</label>
|
|
<div data-field="input-ip-method" data-values="0">
|
|
<label>
|
|
<span>IP-Adresse:</span>
|
|
<input
|
|
type="text"
|
|
name="ip"
|
|
id="input-ip"
|
|
placeholder="IP-Adresse"
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>Subnetzmaske:</span>
|
|
<input
|
|
type="text"
|
|
name="subnet"
|
|
id="input-subnet"
|
|
placeholder="Subnetzmaske"
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>Gateway:</span>
|
|
<input
|
|
type="text"
|
|
name="gateway"
|
|
id="input-gateway"
|
|
placeholder="Gateway"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label>
|
|
<span>Verbindungsmethode:</span>
|
|
<select
|
|
name="connection"
|
|
id="input-connection"
|
|
title="Verbindung"
|
|
>
|
|
<option value="0">WiFi-Station</option>
|
|
<option value="1">WiFi-AccessPoint</option>
|
|
<option value="2">Ethernet</option>
|
|
</select>
|
|
</label>
|
|
<div data-field="input-connection" data-values="1">
|
|
<label>
|
|
<span>SSID:</span>
|
|
<input
|
|
type="text"
|
|
name="ssid"
|
|
id="input-ssid"
|
|
placeholder="SSID"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div data-field="input-connection" data-values="0">
|
|
<label>
|
|
<span>Netzwerk:</span>
|
|
<select
|
|
name="ssid"
|
|
id="select-network"
|
|
title="Netzwerk"
|
|
></select>
|
|
<button
|
|
type="button"
|
|
id="refresh-networks"
|
|
class="icon-button"
|
|
>
|
|
<img src="/icons/refresh.svg" alt="Neu laden" />
|
|
</button>
|
|
</label>
|
|
</div>
|
|
<div data-field="input-connection" data-values="0|1">
|
|
<label>
|
|
<span>Password:</span>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="input-password"
|
|
placeholder="Passwort"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Input/Output 1</legend>
|
|
<label class="switch">
|
|
<span>Output</span>
|
|
<input
|
|
type="checkbox"
|
|
name="direction-1"
|
|
id="input-direction-1"
|
|
data-value-not-checked="0"
|
|
data-value-checked="1"
|
|
/>
|
|
<span class="slider"></span>
|
|
<span>Input</span>
|
|
</label>
|
|
<label>
|
|
ArtNet-Universe:
|
|
<input
|
|
type="number"
|
|
name="universe-1"
|
|
id="universe-1"
|
|
placeholder="Universe"
|
|
min="0"
|
|
max="15"
|
|
/>
|
|
</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Input/Output 2</legend>
|
|
<label class="switch">
|
|
<span>Output</span>
|
|
<input
|
|
type="checkbox"
|
|
name="direction-2"
|
|
id="input-direction-2"
|
|
data-value-not-checked="0"
|
|
data-value-checked="1"
|
|
/>
|
|
<span class="slider"></span>
|
|
<span>Input</span>
|
|
</label>
|
|
<label>
|
|
ArtNet-Universe:
|
|
<input
|
|
type="number"
|
|
name="universe-2"
|
|
id="universe-2"
|
|
placeholder="Universe"
|
|
min="0"
|
|
max="15"
|
|
/>
|
|
</label>
|
|
</fieldset>
|
|
<div class="buttons">
|
|
<button type="reset">Zurücksetzen</button>
|
|
<button type="submit">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</body>
|
|
</html>
|