58 lines
No EOL
2.2 KiB
HTML
58 lines
No EOL
2.2 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 nächtlicher Mikroklima-Daten">
|
|
<title>City Breathing Measurements</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="app-header fixed-top" role="banner">
|
|
<h1>City Breathing Measurements</h1>
|
|
</header>
|
|
|
|
<section class="filter-controls toolbar" role="region" aria-label="Filtersteuerung">
|
|
<form id="filter-form" class="filter-form" aria-label="Datenfilter">
|
|
<div class="filter-group">
|
|
<label for="date-start">Startdatum:</label>
|
|
<input type="date" id="date-start" name="date-start">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="date-end">Enddatum:</label>
|
|
<input type="date" id="date-end" name="date-end">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="sensor-location">Sensorposition:</label>
|
|
<select id="sensor-location" name="sensor-location">
|
|
<option value="all">Alle</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="filter-submit">Aktualisieren</button>
|
|
</form>
|
|
</section>
|
|
|
|
<main class="app-main dashboard" role="main">
|
|
<section class="chart-section" aria-label="Temperaturdiagramm">
|
|
<h2>Temperatur</h2>
|
|
<canvas id="chart-temperature" class="chart-panel temperature-chart" aria-label="Temperaturverlauf" role="img"></canvas>
|
|
</section>
|
|
|
|
<section class="chart-section" aria-label="Feuchtigkeitsdiagramm">
|
|
<h2>Feuchtigkeit</h2>
|
|
<canvas id="chart-humidity" class="chart-panel humidity-chart" aria-label="Feuchtigkeitsverlauf" role="img"></canvas>
|
|
</section>
|
|
|
|
<section class="chart-section" aria-label="Lichtintensitätsdiagramm">
|
|
<h2>Lichtintensität</h2>
|
|
<canvas id="chart-light" class="chart-panel light-chart" aria-label="Lichtintensitätsverlauf" role="img"></canvas>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="app-footer" role="contentinfo">
|
|
<p>© 2026 Donau2Space.de — Experiment: City Breathing Measurements</p>
|
|
</footer>
|
|
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
</html> |