Mika/donau_data_listener
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-05-03 02:07:35 +00:00
commit f25ec5001a
1 changed files with 62 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
data_visualization/index.html Normal file
View file

@ -0,0 +1,62 @@
<!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="Webanwendung zur Visualisierung akustischer Umweltdaten und Frequenzanalysen der Donau.">
<title>Donau-Daten-Visualisierung</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app-shell">
<header class="app-header" role="banner">
<h1>Donau-Daten-Visualisierung</h1>
<p>Analyse und Mustererkennung akustischer Umweltdaten der Donau</p>
</header>
<main>
<section class="filter-panel" aria-label="Filteroptionen">
<form id="filter-form">
<fieldset>
<legend>Zeitraum auswählen</legend>
<label for="start-date">Start:</label>
<input type="date" id="start-date" name="start-date">
<label for="end-date">Ende:</label>
<input type="date" id="end-date" name="end-date">
</fieldset>
<fieldset>
<legend>Datentypen</legend>
<label><input type="checkbox" name="data-type" value="water"> Wasserstand</label>
<label><input type="checkbox" name="data-type" value="vibration"> Vibration</label>
<label><input type="checkbox" name="data-type" value="frequency"> Frequenzanalyse</label>
</fieldset>
<button type="submit">Anzeigen</button>
</form>
</section>
<div class="chart-container" role="region" aria-label="Datenvisualisierung">
<canvas id="data-chart" aria-label="Visualisierungsdiagramm" role="img"></canvas>
</div>
<section class="summary-cards" aria-label="Statistische Zusammenfassungen">
<article class="summary-card" aria-live="polite">
<h2>Korrelation</h2>
<p id="correlation-value">-</p>
</article>
<article class="summary-card" aria-live="polite">
<h2>KI-Konfidenz</h2>
<p id="confidence-value">-</p>
</article>
</section>
</main>
<footer class="app-footer" role="contentinfo">
<p>© 2026 Donau2Space.de — Daten und Visualisierung unter Creative Commons Lizenz.</p>
</footer>
</div>
<script type="module" src="js/fetch_data.js"></script>
<script type="module" src="js/render_chart.js"></script>
<script type="module" src="js/main.js"></script>
</body>
</html>