mirror of
https://github.com/HendrikRauh/dmx-interface.git
synced 2025-07-05 05:38:54 +00:00
added class to form and added section to prepare next commit
This commit is contained in:
RaffaelW
parent
4ac0681a9a
commit
90f8d7c07e
6 changed files with 157 additions and 151 deletions
294
data/index.html
294
data/index.html
|
|
@ -11,6 +11,7 @@
|
|||
<script type="module" src="/networks.js" defer></script>
|
||||
<script type="module" src="/submit.js" defer></script>
|
||||
<script type="module" src="/reset.js" defer></script>
|
||||
<script type="module" src="/status.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
@ -29,159 +30,164 @@
|
|||
</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">
|
||||
<section class="content hidden">
|
||||
<form class="config">
|
||||
<h1>Konfiguration</h1>
|
||||
<fieldset>
|
||||
<legend>Verbindung</legend>
|
||||
<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>
|
||||
<span>IP-Zuweisung:</span>
|
||||
<select
|
||||
name="ssid"
|
||||
id="select-network"
|
||||
title="Netzwerk"
|
||||
></select>
|
||||
<button
|
||||
type="button"
|
||||
id="refresh-networks"
|
||||
class="icon-button"
|
||||
name="ip-method"
|
||||
id="input-ip-method"
|
||||
title="IP-"
|
||||
>
|
||||
<img src="/icons/refresh.svg" alt="Neu laden" />
|
||||
</button>
|
||||
<option value="0">Statisch</option>
|
||||
<option value="1">DHCP</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div data-field="input-connection" data-values="0|1">
|
||||
<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>Password:</span>
|
||||
<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="password"
|
||||
name="password"
|
||||
id="input-password"
|
||||
placeholder="Passwort"
|
||||
type="checkbox"
|
||||
name="direction-1"
|
||||
id="input-direction-1"
|
||||
data-value-not-checked="output"
|
||||
data-value-checked="input"
|
||||
/>
|
||||
<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="output"
|
||||
data-value-checked="input"
|
||||
/>
|
||||
<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>
|
||||
</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="output"
|
||||
data-value-checked="input"
|
||||
/>
|
||||
<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="output"
|
||||
data-value-checked="input"
|
||||
/>
|
||||
<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>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue