164d0eb6a8
modified: app.py modified: requirements.txt modified: static/css/style.css modified: templates/base.html modified: templates/index.html modified: templates/weather.html
64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>{% block title %}Skywatcher{% endblock %}</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet"/>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}?v=4"/>
|
||
{% block head %}{% endblock %}
|
||
</head>
|
||
<body>
|
||
<nav class="nav">
|
||
<a href="/" class="nav-logo">Sky<span>watcher</span></a>
|
||
<form class="nav-search" action="/wetter" method="get" autocomplete="off">
|
||
<div class="nav-search-wrap">
|
||
<svg class="nav-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="nav-ort" placeholder="Ort suchen …" value="{{ request.args.get('ort','') }}"/>
|
||
<ul class="ac-list" id="nav-ac"></ul>
|
||
</div>
|
||
</form>
|
||
</nav>
|
||
|
||
<main>{% block content %}{% endblock %}</main>
|
||
|
||
<footer class="footer">
|
||
Wetterdaten: <a href="https://opendata.dwd.de" target="_blank">Deutscher Wetterdienst – Open Data (MOSMIX)</a>
|
||
</footer>
|
||
|
||
<script>
|
||
function setupAC(input, list) {
|
||
if (!input || !list) return;
|
||
let t;
|
||
input.addEventListener("input", () => {
|
||
clearTimeout(t);
|
||
const q = input.value.trim();
|
||
if (q.length < 2) { list.hidden = true; list.innerHTML = ""; return; }
|
||
t = setTimeout(async () => {
|
||
const r = await fetch(`/api/suggest?q=${encodeURIComponent(q)}`);
|
||
const data = await r.json();
|
||
list.innerHTML = "";
|
||
if (!data.length) { list.hidden = true; return; }
|
||
data.forEach(item => {
|
||
const li = document.createElement("li");
|
||
li.textContent = item.name;
|
||
li.addEventListener("click", () => {
|
||
input.value = item.name;
|
||
list.hidden = true;
|
||
input.closest("form").submit();
|
||
});
|
||
list.appendChild(li);
|
||
});
|
||
list.hidden = false;
|
||
}, 220);
|
||
});
|
||
document.addEventListener("click", e => { if (!list.contains(e.target) && e.target !== input) list.hidden = true; });
|
||
}
|
||
setupAC(document.getElementById("nav-ort"), document.getElementById("nav-ac"));
|
||
window.setupAC = setupAC;
|
||
</script>
|
||
{% block scripts %}{% endblock %}
|
||
</body>
|
||
</html>
|