Mika/city_breathing_measurements
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-07-05 02:07:30 +00:00
commit 12782d8ee7
1 changed files with 58 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
data_visualization/index.html Normal file
View file

@ -0,0 +1,58 @@
<!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>