smueller/HexaWetter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HexaWetter v1.3.0: Add precipitation map feature, update README, and enhance UI elements

Browse Source
This commit is contained in:
TheOnlyMace
2026-06-19 00:32:22 +02:00
parent 3589f7fdcf
commit c8bf80a2c8
11 changed files with 867 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/index.html
View File

@@ -69,7 +69,7 @@
<nav class="tabs" aria-label="Ansichten">
<button class="tab active" data-view="dashboard">Übersicht</button>
<button class="tab" data-view="radar">Radar-Karte</button>
<button class="tab" data-view="radar">Karte</button>
<button class="tab" data-view="warnings">Warnungen</button>
<button class="tab" data-view="hourly">Stunden</button>
<button class="tab" data-view="daily">7 Tage</button>
@@ -78,9 +78,9 @@
<section class="view active" data-view="dashboard">
<section class="grid">
<article class="glass-card card"><h2>Aktuelles Wetter</h2><p class="big" id="currentTemp">–</p><p id="currentMeta" class="muted">Lade…</p></article>
<article class="glass-card card card-accent"><h2>Aktuelles Wetter</h2><p class="big" id="currentTemp">–</p><p id="currentMeta" class="muted">Lade…</p></article>
<article class="glass-card card card-accent"><h2>Regen · 24 h</h2><p class="big" id="rainOutlookBig">–</p><p id="rainOutlookMeta" class="muted">Lade…</p></article>
<article class="glass-card card"><h2>DWD-Beobachtung</h2><p class="big" id="obsTemp">–</p><p id="obsMeta" class="muted">Lade…</p></article>
<article class="glass-card card"><h2>Radar-Status</h2><p class="big" id="radarCount">–</p><p id="radarMeta" class="muted">Lade…</p></article>
<article class="glass-card card"><h2>Warnungen</h2><p class="big" id="warnCount">–</p><p id="warnMeta" class="muted">Lade…</p></article>
</section>
<section class="glass-card">
@@ -96,12 +96,19 @@
<section class="view" data-view="radar">
<section class="glass-card map-panel">
<div class="section-head">
<div><h2>Radar-Karte</h2><p class="muted no-margin">DWD WMS · OpenStreetMap · Zeitleiste</p></div>
<div>
<h2>Wetterkarte</h2>
<p class="muted no-margin">DWD-Radar · Open-Meteo-Regenvorhersage · OpenStreetMap</p>
</div>
<span class="muted" id="mapMeta">Lade…</span>
</div>
<div class="map-mode-toggle" role="tablist" aria-label="Kartenmodus">
<button type="button" class="map-mode-btn active" data-map-mode="radar">Radar · Vergangenheit</button>
<button type="button" class="map-mode-btn" data-map-mode="forecast">Regenvorhersage · Zukunft</button>
</div>
<div id="map"></div>
<div class="panel-inner" id="radarTimeline">
<div class="section-head"><strong>Radar-Zeitleiste</strong><span class="muted" id="radarTimeLabel">–</span></div>
<div class="section-head"><strong id="timelineTitle">Zeitleiste</strong><span class="muted" id="radarTimeLabel">–</span></div>
<div class="timeline-controls">
<button id="radarFirstBtn" class="btn btn-secondary icon-btn">⏮</button>
<button id="radarPrevBtn" class="btn btn-secondary icon-btn">◀</button>
@@ -111,13 +118,20 @@
<input id="radarSlider" type="range" min="0" max="0" value="0" />
</div>
<div class="timeline-meta">
<label class="inline-check"><input type="checkbox" id="showWarningsOnMap" checked /> Warnungen</label>
<label class="inline-check map-mode-radar-only"><input type="checkbox" id="showWarningsOnMap" checked /> Warnungen</label>
<span class="muted" id="radarFrameInfo"></span>
</div>
<p class="muted no-margin" id="timelineHint" style="margin-top:8px;font-size:0.85rem">Vergangenheit · 5-Min-Schritte · DWD-Radar</p>
<div class="precip-legend map-mode-forecast-only hidden" id="precipLegend">
<span><i class="swatch light"></i> leicht</span>
<span><i class="swatch medium"></i> mäßig</span>
<span><i class="swatch heavy"></i> stark</span>
<span class="muted">Modell · ~25 km · Open-Meteo</span>
</div>
</div>
<div class="map-actions">
<button id="centerMapBtn" class="btn btn-secondary">Auf Standort zentrieren</button>
<button id="reloadRadarLayersBtn" class="btn btn-secondary">Layer neu laden</button>
<button id="reloadRadarLayersBtn" class="btn btn-secondary">Karte neu laden</button>
</div>
</section>
</section>
@@ -157,9 +171,15 @@
</section>
<section class="view" data-view="daily">
<section class="glass-card">
<div class="section-head"><h2>7-Tage Forecast</h2><span class="muted" id="dailySource"></span></div>
<div class="days" id="dailyForecast"></div>
<section class="glass-card daily-forecast-panel">
<div class="section-head">
<div>
<h2>7-Tage Forecast</h2>
<p class="muted no-margin">Temperatur, Regen &amp; Wind · Open-Meteo</p>
</div>
<span class="muted" id="dailySource"></span>
</div>
<div class="days days-forecast" id="dailyForecast"></div>
</section>
</section>
@@ -170,6 +190,7 @@
<label>Temperatureinheit<select id="unitTemp"><option value="celsius">°C</option><option value="fahrenheit">°F</option></select></label>
<label>Windeinheit<select id="unitWind"><option value="kmh">km/h</option><option value="ms">m/s</option><option value="kn">kn</option></select></label>
<label>Radar-Zeitleiste<select id="radarMinutes"><option value="60">60 Min.</option><option value="90">90 Min.</option><option value="120" selected>120 Min.</option></select></label>
<label>Regen-Karte<select id="forecastHours"><option value="6">6 h</option><option value="12">12 h</option><option value="24" selected>24 h</option></select></label>
<label>Standard-Standort<button id="saveDefaultLocationBtn" class="btn btn-secondary full-width">Aktuellen Ort speichern</button></label>
</div>
</section>