164d0eb6a8
modified: app.py modified: requirements.txt modified: static/css/style.css modified: templates/base.html modified: templates/index.html modified: templates/weather.html
86 lines
3.3 KiB
HTML
86 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Skywatcher – Wetter für Deutschland{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="home-wrap">
|
||
<div class="home-bg-text" aria-hidden="true">WETTER</div>
|
||
|
||
<div class="home-center">
|
||
<p class="home-eyebrow">Präzise Vorhersagen · Daten via DWD Open Data</p>
|
||
<h1 class="home-title">Wo willst du<br>das Wetter wissen?</h1>
|
||
|
||
<form class="home-form" action="/wetter" method="get" autocomplete="off">
|
||
<div class="home-input-wrap">
|
||
<svg class="home-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||
</svg>
|
||
<input type="text" name="ort" id="home-ort" placeholder="Stadt, Gemeinde oder PLZ …" required autofocus/>
|
||
<ul class="ac-list" id="home-ac"></ul>
|
||
</div>
|
||
<button type="submit" class="home-btn">
|
||
Abrufen
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</button>
|
||
</form>
|
||
|
||
{% if error %}<p class="home-error">{{ error }}</p>{% endif %}
|
||
|
||
<div class="home-chips" id="home-chips">
|
||
{% for city in ["Berlin","Hamburg","München","Köln","Frankfurt","Dresden","Düsseldorf","Stuttgart"] %}
|
||
<a href="/wetter?ort={{ city }}" class="chip">{{ city }}</a>
|
||
{% endfor %}
|
||
</div>
|
||
<button class="btn-location" id="btn-location" title="Meinen Standort nutzen">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/><circle cx="12" cy="12" r="9" opacity=".3"/></svg>
|
||
Meinen Standort nutzen
|
||
</button>
|
||
</div>
|
||
|
||
<div class="home-deco" aria-hidden="true">
|
||
<div class="deco-sun"></div>
|
||
<div class="deco-cloud c1"></div>
|
||
<div class="deco-cloud c2"></div>
|
||
<div class="deco-rain">
|
||
{% for i in range(18) %}<span></span>{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// Standort-Button
|
||
document.getElementById("btn-location").addEventListener("click", function() {
|
||
if (!navigator.geolocation) { alert("Geolocation nicht unterstützt."); return; }
|
||
this.textContent = "Wird ermittelt …";
|
||
this.disabled = true;
|
||
navigator.geolocation.getCurrentPosition(
|
||
pos => { window.location = `/wetter?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&ort=Mein+Standort`; },
|
||
() => { this.textContent = "Standort nicht verfügbar"; this.disabled = false; }
|
||
);
|
||
});
|
||
|
||
// Letzte Suchen aus localStorage als Chips anzeigen
|
||
(function(){
|
||
const recent = JSON.parse(localStorage.getItem("sw_recent") || "[]");
|
||
if (!recent.length) return;
|
||
const wrap = document.getElementById("home-chips");
|
||
const div = document.createElement("div");
|
||
div.className = "recent-label";
|
||
div.textContent = "Zuletzt gesucht:";
|
||
wrap.before(div);
|
||
const strip = document.createElement("div");
|
||
strip.className = "home-chips home-chips--recent";
|
||
recent.forEach(name => {
|
||
const a = document.createElement("a");
|
||
a.href = `/wetter?ort=${encodeURIComponent(name)}`;
|
||
a.className = "chip chip--recent";
|
||
a.textContent = name;
|
||
strip.appendChild(a);
|
||
});
|
||
wrap.before(strip);
|
||
})();
|
||
</script>
|
||
<script>setupAC(document.getElementById("home-ort"), document.getElementById("home-ac"));</script>
|
||
{% endblock %}
|