53 lines
No EOL
2.3 KiB
HTML
53 lines
No EOL
2.3 KiB
HTML
<!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> |