Mika/licht_im_leeren_nebel
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-03-29 03:07:23 +00:00
commit d46bd5f848
1 changed files with 53 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
data_visualization/index.html Normal file
View file

@ -0,0 +1,53 @@
<!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="Visualisierung und Analyse der Logger-Sensordaten des Experiments zur Lichtsichtbarkeit ohne Streumittel.">
<title>Licht im leeren Nebel – Datenvisualisierung</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="app-header flex-row" role="banner">
<h1 class="app-header__title">Experiment: Licht im leeren Nebel</h1>
<div id="data-filter" class="data-filter filter-panel" aria-label="Filterbereich">
<form id="filter-form" class="filter-form" aria-label="Zeitraum-Filter">
<label for="start-date">Startdatum:</label>
<input type="date" id="start-date" name="start-date">
<label for="end-date">Enddatum:</label>
<input type="date" id="end-date" name="end-date">
<label for="sensor-id">Sensor-ID:</label>
<select id="sensor-id" name="sensor-id">
<option value="">Alle</option>
</select>
<button type="submit">Filter anwenden</button>
</form>
</div>
</header>
<main class="main-content" role="main">
<section id="data-chart" class="data-chart chart-panel" aria-label="Diagramm der Messdaten">
<h2 class="visually-hidden">Datenvisualisierung</h2>
<div id="chart-container" class="chart-container" aria-live="polite"></div>
</section>
<aside id="data-summary" class="data-summary summary-panel" aria-label="Datenstatistik">
<h2>Datenstatistik</h2>
<ul id="summary-list">
<li><strong>Durchschnittsintensität:</strong> <span id="avg-intensity">–</span></li>
<li><strong>Maximale Intensität:</strong> <span id="max-intensity">–</span></li>
<li><strong>Minimale Intensität:</strong> <span id="min-intensity">–</span></li>
<li><strong>Anzahl Anomalien:</strong> <span id="anomaly-count">–</span></li>
</ul>
</aside>
</main>
<footer id="app-footer" class="app-footer" role="contentinfo">
<p>Messzeitraum: <span id="data-period">–</span></p>
<p>Datenquelle: <span id="data-source">/data</span></p>
<p>© 2026 Donau2Space.de</p>
</footer>
<script type="module" src="js/app.js"></script>
</body>
</html>