71 lines
2.6 KiB
HTML
71 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Niko – Zimmersteuerung</title>
|
||
<link href="formV3.css" rel="stylesheet" type="text/css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div class="v3-page">
|
||
<div class="v3-grid">
|
||
|
||
<!-- ============ STROMZÄHLER ============ -->
|
||
<section class="v3-card v3-card--wide">
|
||
<div class="v3-card-title"><span>⚡</span><span>Stromzähler</span><span class="v3-status" id="api_status" style="margin-left:auto">verbinde…</span></div>
|
||
<div class="v3-strom-layout">
|
||
<div class="v3-gauge-container">
|
||
<canvas id="v3_gauge" width="360" height="180"></canvas>
|
||
</div>
|
||
<div class="v3-strom-values">
|
||
<div class="v3-info-item"><span class="v3-info-label">Bezug</span><span class="v3-info-value" id="sz_bezug">–</span></div>
|
||
<div class="v3-info-item"><span class="v3-info-label">Einspeisung</span><span class="v3-info-value" id="sz_einsp">–</span></div>
|
||
<div class="v3-info-item"><span class="v3-info-label">Wemos RC</span><span class="v3-info-value" id="sz_wemos">–</span></div>
|
||
</div>
|
||
<div class="v3-chart-container">
|
||
<canvas id="v3_power_chart" width="360" height="180"></canvas>
|
||
</div>
|
||
<div class="v3-chart-container">
|
||
<canvas id="v3_daily_chart" width="360" height="180"></canvas>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ LICHT NIKO ============ -->
|
||
<section class="v3-card">
|
||
<div class="v3-card-title"><span>💡</span><span>Licht Niko</span></div>
|
||
<div class="v3-rows">
|
||
<div class="v3-room-row">
|
||
<span class="v3-room-name">Niko</span>
|
||
<span class="v3-room-controls">
|
||
<span class="v3-status-dot v3-status-dot--off" id="li_dot_7"></span>
|
||
<button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Niko"' data-value="true">schalten</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ ROLLADEN NIKO ============ -->
|
||
<section class="v3-card">
|
||
<div class="v3-card-title"><span>🪟</span><span>Rolladen Niko</span></div>
|
||
<div class="v3-rows">
|
||
<div class="v3-room-row">
|
||
<span class="v3-room-name">Niko</span>
|
||
<span class="v3-btn-group">
|
||
<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Niko auf"' data-value="true">hoch</button>
|
||
<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Niko ab"' data-value="true">runter</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script src="Script/tth_v3_api.js" type="text/javascript"></script>
|
||
</body>
|
||
|
||
</html>
|