175 lines
9.3 KiB
HTML
175 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>HAUS-BRÜCKE V4</title>
|
||
<link href="formV4.css" rel="stylesheet" type="text/css" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Boot-Sequence -->
|
||
<div class="v4-boot" id="v4_boot">
|
||
<div class="v4-boot-inner">
|
||
<div class="v4-boot-logo">◢ HAUS-BRÜCKE SYSTEM V4.0 ◣</div>
|
||
<div class="v4-boot-line"><span>VERBINDE ZUR SPS</span><span class="v4-boot-status" id="boot_sps">…</span></div>
|
||
<div class="v4-boot-line"><span>LADE ENERGIE-MODUL</span><span class="v4-boot-status" id="boot_energie">…</span></div>
|
||
<div class="v4-boot-line"><span>LADE KOMMANDO-MODUL</span><span class="v4-boot-status" id="boot_kommando">…</span></div>
|
||
<div class="v4-boot-line"><span>LADE STATUS-MODUL</span><span class="v4-boot-status" id="boot_status">…</span></div>
|
||
<div class="v4-boot-bar"><div class="v4-boot-bar-fill" id="boot_bar"></div></div>
|
||
<div class="v4-boot-done" id="boot_done">SYSTEM ONLINE</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scanline-Overlay -->
|
||
<div class="v4-scanlines" id="v4_scanlines"></div>
|
||
|
||
<div class="v4-page" id="v4_page">
|
||
|
||
<!-- ============ HEADER ============ -->
|
||
<header class="v4-header">
|
||
<div class="v4-header-logo">◢ HAUS-BRÜCKE</div>
|
||
<div class="v4-header-clock">
|
||
<span class="v4-clock-time" id="clock_time">--:--:--</span>
|
||
<span class="v4-clock-date" id="clock_date">--.--.----</span>
|
||
</div>
|
||
<div class="v4-header-sun">
|
||
<span class="v4-sun-item" title="Sonnenaufgang">☀ <span id="sun_up">--:--</span></span>
|
||
<span class="v4-sun-item" title="Sonnenuntergang">☾ <span id="sun_down">--:--</span></span>
|
||
</div>
|
||
<div class="v4-header-status">
|
||
<span class="v4-status-orb" id="api_status_orb"></span>
|
||
<span class="v4-status-text" id="api_status">verbinde…</span>
|
||
<button class="v4-btn v4-btn--icon" id="scan_toggle" title="Scanlines umschalten">▦</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ HAUPTGRID ============ -->
|
||
<div class="v4-grid">
|
||
|
||
<!-- ===== ZONE 1: ENERGIE ===== -->
|
||
<section class="v4-zone v4-zone--energy">
|
||
<div class="v4-zone-title"><span class="v4-zone-icon">⚡</span> ENERGIE</div>
|
||
|
||
<div class="v4-gauge-wrap">
|
||
<canvas id="v4_gauge" width="360" height="200"></canvas>
|
||
</div>
|
||
|
||
<div class="v4-energy-stats">
|
||
<div class="v4-stat"><span class="v4-stat-label">Bezug</span><span class="v4-stat-value" id="sz_bezug">–</span></div>
|
||
<div class="v4-stat"><span class="v4-stat-label">Einspeisung</span><span class="v4-stat-value" id="sz_einsp">–</span></div>
|
||
<div class="v4-stat"><span class="v4-stat-label">Leistung</span><span class="v4-stat-value" id="sz_leist">–</span></div>
|
||
<div class="v4-stat"><span class="v4-stat-label">Heute</span><span class="v4-stat-value" id="sz_tag">–</span></div>
|
||
</div>
|
||
|
||
<div class="v4-chart-wrap">
|
||
<canvas id="v4_power_chart" width="360" height="180"></canvas>
|
||
</div>
|
||
<div class="v4-wemos" id="sz_wemos">–</div>
|
||
|
||
<div class="v4-chart-wrap">
|
||
<canvas id="v4_daily_chart" width="360" height="180"></canvas>
|
||
</div>
|
||
|
||
<div class="v4-water">
|
||
<div class="v4-water-item"><span class="v4-water-label">Wasser</span><span class="v4-water-value" id="hdr_wtemp">–</span></div>
|
||
<div class="v4-water-item"><span class="v4-water-label">Stand</span><span class="v4-water-value" id="hdr_wstand">–</span></div>
|
||
<div class="v4-water-item"><span class="v4-water-label">seit Ablesung</span><span class="v4-water-value" id="hdr_wseit">–</span></div>
|
||
</div>
|
||
<div class="v4-chart-wrap">
|
||
<canvas id="v4_water_chart" width="360" height="180"></canvas>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== ZONE 2: KOMMANDO ===== -->
|
||
<section class="v4-zone v4-zone--command">
|
||
<div class="v4-zone-title"><span class="v4-zone-icon">🎛</span> KOMMANDO</div>
|
||
|
||
<div class="v4-sub-title">LICHT</div>
|
||
<div class="v4-tiles" id="v4_light_tiles"></div>
|
||
|
||
<div class="v4-sub-title">WLED BAD</div>
|
||
<div class="v4-wled">
|
||
<div class="v4-wled-row">
|
||
<button class="v4-btn" type="button" data-var='"wled_DB".Befehl' data-value="1">Umschalten</button>
|
||
</div>
|
||
<div class="v4-wled-row">
|
||
<span class="v4-wled-label">Helligkeit</span>
|
||
<input class="v4-slider" id="wled_bright" type="range" min="1" max="255" value="180">
|
||
<button class="v4-btn v4-btn--primary" type="button" data-wled="bright">schreiben</button>
|
||
</div>
|
||
<div class="v4-wled-row">
|
||
<span class="v4-wled-label">Farbe</span>
|
||
<input class="v4-color" id="wled_color" type="color" value="#ff0000">
|
||
<button class="v4-btn v4-btn--primary" type="button" data-wled="color">schreiben</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="v4-sub-title">ROLLADEN</div>
|
||
<div class="v4-rolladen">
|
||
<div class="v4-roll-row">
|
||
<span class="v4-roll-name">alle Rollladen</span>
|
||
<span class="v4-btn-group">
|
||
<button class="v4-btn v4-btn--sm" type="button" data-vars='"Rolladenmerker Küc l auf","Rolladenmerker Küc r auf","Rolladenmerker Ess l auf","Rolladenmerker Ess m auf","Rolladenmerker Ess r auf","Rolladenmerker Woh l auf","Rolladenmerker Woh r auf","Rolladenmerker Wohtü auf"' data-value="true">Wochenende morgens</button>
|
||
<button class="v4-btn v4-btn--sm v4-btn--on" type="button" data-var='"Rolladen alle auf"' data-value="true">hoch</button>
|
||
<button class="v4-btn v4-btn--sm v4-btn--off" type="button" data-var='"Rolladen alle ab"' data-value="true">runter</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="v4-rolladen" id="v4_rolladen"></div>
|
||
|
||
<div class="v4-sub-title">STECKDOSEN</div>
|
||
<div class="v4-sockets" id="v4_sockets"></div>
|
||
|
||
<div class="v4-sub-title">FUNKSTECKDOSEN</div>
|
||
<div class="v4-funk">
|
||
<div class="v4-funk-row"><span class="v4-funk-name">Funksteckdose 1</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="Funksteckdose 1" data-var='"Arduino Settimio"."Funksteckdose 1 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="Funksteckdose 1" data-var='"Arduino Settimio"."Funksteckdose 1 aus"' data-value="true">aus</button></span></div>
|
||
<div class="v4-funk-row"><span class="v4-funk-name">Saunalampe</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="Saunalampe" data-var='"Arduino Settimio"."KDY 1 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="Saunalampe" data-var='"Arduino Settimio"."KDY 1 aus"' data-value="true">aus</button></span></div>
|
||
<div class="v4-funk-row"><span class="v4-funk-name">KDY2</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="KDY2" data-var='"Arduino Settimio"."KDY 2 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="KDY2" data-var='"Arduino Settimio"."KDY 2 aus"' data-value="true">aus</button></span></div>
|
||
<div class="v4-funk-row"><span class="v4-funk-name">Poolpumpe</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="Poolpumpe" data-var='"Arduino Settimio"."Funksteckdose 4 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="Poolpumpe" data-var='"Arduino Settimio"."Funksteckdose 4 aus"' data-value="true">aus</button></span></div>
|
||
</div>
|
||
|
||
<div class="v4-sub-title">HAUS</div>
|
||
<div class="v4-house">
|
||
<button class="v4-btn v4-btn--primary v4-btn--big" type="button" data-var='"Türöffner Handy"' data-value="true">🚪 Haustür öffnen</button>
|
||
<button class="v4-btn v4-btn--big" type="button" data-var='"Arduino Settimio"."Garagentor 1"' data-value="true">🚗 Garage links</button>
|
||
<button class="v4-btn v4-btn--big" type="button" data-var='"Arduino Settimio"."Garagentor 2"' data-value="true">🚗 Garage rechts</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== ZONE 3: STATUS ===== -->
|
||
<section class="v4-zone v4-zone--status">
|
||
<div class="v4-zone-title"><span class="v4-zone-icon">📊</span> STATUS</div>
|
||
|
||
<div class="v4-sub-title">HEIZUNG</div>
|
||
<div class="v4-heat" id="v4_heat"></div>
|
||
|
||
<div class="v4-sub-title">POOLPUMPE</div>
|
||
<div class="v4-pool">
|
||
<div class="v4-pool-bar"><div class="v4-pool-bar-fill" id="sd_pool_bar"></div><span class="v4-pool-bar-label" id="sd_pool_bar_label">– / –</span></div>
|
||
<div class="v4-pool-set">
|
||
<span class="v4-pool-set-label">SOLL min</span>
|
||
<input class="v4-input" id="sd_pool_max_input" type="number" min="0" placeholder="min">
|
||
<button class="v4-btn v4-btn--primary" type="button" data-write-input="sd_pool_max_input" data-pool-max="1" data-var='"Funksteckdosen_DB"."Poolpumpe min Laufzeit/Tag"'>OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="v4-sub-title">URLAUB</div>
|
||
<div class="v4-urlaub">
|
||
<span class="v4-urlaub-indicator" id="roll_urlaub_dot"></span>
|
||
<span class="v4-urlaub-text" id="roll_urlaub_text">AUS</span>
|
||
<button class="v4-btn v4-btn--on" type="button" data-var='"Jalousie_DB".Urlaub' data-value="true">an</button>
|
||
<button class="v4-btn v4-btn--off" type="button" data-var='"Jalousie_DB".Urlaub' data-value="false">aus</button>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Toast-Container -->
|
||
<div class="v4-toasts" id="v4_toasts"></div>
|
||
|
||
<script src="Script/tth_v4.js" type="text/javascript"></script>
|
||
</body>
|
||
</html> |