Mika/wlan_sternenhimmel_ilzstausee
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add data_visualization/index.html

Browse source
This commit is contained in:
Mika 2026-04-26 02:07:48 +00:00
commit 6c0f4da7a3
1 changed files with 50 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
data_visualization/index.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Echtzeit-Heatmap zur Darstellung von WLAN-Signalstärken am Ilzstausee">
<title>WLAN Heatmap – Ilzstausee</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app-shell">
<header class="app-header" role="banner">
<h1>WLAN-Heatmap Ilzstausee</h1>
<nav aria-label="Hauptsteuerung">
<form class="filter-form" aria-label="Filteroptionen">
<label for="freq-filter">Frequenzband:</label>
<select id="freq-filter" name="frequency">
<option value="all">Alle</option>
<option value="2.4">2.4 GHz</option>
<option value="5">5 GHz</option>
</select>
<button type="button" id="refresh-button" aria-label="Daten aktualisieren">Aktualisieren</button>
</form>
</nav>
</header>
<main class="app-main heatmap-panel" role="main">
<div id="map" class="heatmap-container" aria-label="Heatmap-Darstellung der WLAN-Signalstärken"></div>
</main>
<aside class="sidebar stats-panel" role="complementary" aria-label="Statistikbereich">
<h2>Signal-Statistiken</h2>
<ul id="stats-list">
<li>Durchschnittlicher RSSI: <span id="avg-rssi">–</span></li>
<li>Stärkster Empfang: <span id="max-rssi">–</span></li>
<li>Schwächster Empfang: <span id="min-rssi">–</span></li>
<li>2.4GHz Netze: <span id="count-24">–</span></li>
<li>5GHz Netze: <span id="count-5">–</span></li>
</ul>
</aside>
<footer class="app-footer" role="contentinfo">
<p>© 2026 Donau2Space.de – WLAN-Datenvisualisierung Ilzstausee</p>
<p>Messzeitraum: Laufender Echtzeitbetrieb</p>
</footer>
</div>
<script type="module" src="js/app.js"></script>
</body>
</html>