Add data_visualization/index.html

This commit is contained in:
Mika 2026-01-18 16:36:58 +00:00
commit a501269e77

View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nachtfotografie ISS-Jagd Datenanalyse</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="app-header flex-row" role="banner">
<h1 class="app-header__title">Nachtfotografie ISS-Jagd</h1>
</header>
<main>
<aside class="filter-panel sidebar" aria-label="Filtereinstellungen">
<h2 class="filter-panel__title">Filter</h2>
<form id="filter-form" class="filter-panel__form">
<label for="filter-iso">ISO-Wert:</label>
<select id="filter-iso" name="iso">
<option value="">Alle</option>
<option value="100">100</option>
<option value="400">400</option>
<option value="800">800</option>
<option value="1600">1600</option>
</select>
<label for="filter-exposure">Belichtungszeit (s):</label>
<input type="number" id="filter-exposure" name="exposure_time" min="0" step="0.1" />
<label for="filter-date-start">Zeitraum Anfang:</label>
<input type="date" id="filter-date-start" name="start_date" />
<label for="filter-date-end">Zeitraum Ende:</label>
<input type="date" id="filter-date-end" name="end_date" />
<button type="submit" class="filter-panel__apply">Anwenden</button>
</form>
</aside>
<section class="chart-panel" id="data-chart" aria-label="Messdaten Diagramm">
<h2 class="visually-hidden">Messdaten-Visualisierung</h2>
<div id="chart-container" aria-live="polite"></div>
</section>
<section class="summary-panel" id="data-summary" aria-label="Datenzusammenfassung">
<h2>Zusammenfassung</h2>
<ul class="summary-panel__list">
<li><strong>Temperatur:</strong> <span id="summary-temperature"></span> °C</li>
<li><strong>Luftfeuchte:</strong> <span id="summary-humidity"></span> %</li>
</ul>
</section>
</main>
<footer class="app-footer" role="contentinfo">
<p>© 2026 Donau2Space.de Datenanalyse zur Nachtfotografie-ISS-Beobachtung</p>
</footer>
<script type="module" src="js/app.js"></script>
</body>
</html>