125 lines
5.8 KiB
HTML
125 lines
5.8 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||
<meta name="theme-color" content="#006680" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||
<meta name="apple-mobile-web-app-title" content="StaySense" />
|
||
<title>StaySense Quellen & Attribution</title>
|
||
<link rel="manifest" href="manifest.json" />
|
||
<link rel="icon" type="image/svg+xml" href="icons/icon.svg" />
|
||
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png" />
|
||
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png" />
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="background haze-a"></div>
|
||
<div class="background haze-b"></div>
|
||
|
||
<header class="top">
|
||
<h1>Quellen & Attribution</h1>
|
||
<p>Transparenz zu Datenquellen, Lizenzen und rechtlichen Hinweisen.</p>
|
||
<small><a href="/" style="color: inherit">Zurück zur App</a></small>
|
||
</header>
|
||
|
||
<main class="grid" style="max-width: 980px">
|
||
<section class="panel">
|
||
<h2>Attribution (Pflichtangaben)</h2>
|
||
<ul class="legal">
|
||
<li>OpenStreetMap-Mitwirkende, Lizenz ODbL 1.0: <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">openstreetmap.org/copyright</a></li>
|
||
<li>Nominatim Geocoding (OSM Foundation), basierend auf OSM-Daten: <a href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank" rel="noopener noreferrer">API-Dokumentation</a></li>
|
||
<li>OpenData-Quellen der Stadt Köln / Open.NRW, Lizenz: Datenlizenz Deutschland – Zero – Version 2.0</li>
|
||
</ul>
|
||
<p class="small">
|
||
Stand dieser Seite: <span id="attribution-date">-</span>. Bei Aktualisierung der Datenquellen werden die Angaben entsprechend angepasst.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Verwendete Datenquellen</h2>
|
||
<div class="admin-list">
|
||
<div class="admin-list-item">
|
||
Kartendarstellung und Kachelgrundlage: OpenStreetMap (ODbL) | Nutzung in StaySense: Kartenhintergrund, Standortauswahl, POI-Kontext.
|
||
</div>
|
||
<div class="admin-list-item">
|
||
Ortssuche: Nominatim (OSM Foundation) | Nutzung in StaySense: Adress-/Ortssuche zur Koordinatenauswahl.
|
||
</div>
|
||
<div class="admin-list-item">
|
||
Verkehrsbeeinträchtigungen Stadt Köln (ArcGIS JSON) | Lizenz: DL-DE-Zero-2.0 |
|
||
Quelle: <a href="https://offenedaten-koeln.de/dataset/verkehrsbeeintr%C3%A4chtigungen-stadt-k%C3%B6ln" target="_blank" rel="noopener noreferrer">offenedaten-koeln.de Datensatz</a>
|
||
</div>
|
||
<div class="admin-list-item">
|
||
Baustellen Köln (WFS, Layer Notfall) | Lizenz: DL-DE-Zero-2.0 |
|
||
Quelle: <a href="https://offenedaten-koeln.de/dataset/baustellen-k%C3%B6ln" target="_blank" rel="noopener noreferrer">offenedaten-koeln.de Datensatz</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Live-Importstatus (API)</h2>
|
||
<p class="small" id="source-status">Lade Datenquellen ...</p>
|
||
<div id="source-list" class="admin-list">-</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Was bedeutet Attribution?</h2>
|
||
<p class="small">
|
||
Attribution bedeutet die verpflichtende Nennung der Datenurheber, Lizenzen und Quellen-Links direkt im Produkt.
|
||
Für StaySense betrifft das insbesondere OpenStreetMap/ODbL, Nominatim und kommunale OpenData-Quellen.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Rechtliches</h2>
|
||
<ul class="legal">
|
||
<li><a href="https://vanityontour.de/impressum/" target="_blank" rel="noopener noreferrer">Impressum</a></li>
|
||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||
</ul>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="pwa.js"></script>
|
||
<script>
|
||
const DEFAULT_API_BASE =
|
||
window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"
|
||
? "http://127.0.0.1:8787"
|
||
: "/api";
|
||
const API_BASE = window.STAYSENSE_API_BASE || DEFAULT_API_BASE;
|
||
|
||
async function loadSources() {
|
||
const statusEl = document.getElementById("source-status");
|
||
const listEl = document.getElementById("source-list");
|
||
const dateEl = document.getElementById("attribution-date");
|
||
dateEl.textContent = new Date().toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
|
||
try {
|
||
const response = await fetch(`${API_BASE}/health`, { cache: "no-store" });
|
||
if (!response.ok) {
|
||
throw new Error("health_failed");
|
||
}
|
||
const payload = await response.json();
|
||
const sources = payload.sources || [];
|
||
if (!sources.length) {
|
||
statusEl.textContent = "Keine Quellenmetadaten vorhanden.";
|
||
listEl.textContent = "Keine Einträge.";
|
||
return;
|
||
}
|
||
statusEl.textContent = `Geladen: ${sources.length} Quelle(n), letzter API-Check: ${new Date().toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" })}`;
|
||
listEl.innerHTML = "";
|
||
sources.forEach((src) => {
|
||
const div = document.createElement("div");
|
||
div.className = "admin-list-item";
|
||
div.textContent = `${src.source_name} | ${src.record_count} records | ${src.imported_at} | ${src.notes}`;
|
||
listEl.appendChild(div);
|
||
});
|
||
} catch {
|
||
statusEl.textContent = "Quellen konnten nicht geladen werden.";
|
||
listEl.textContent = "API nicht erreichbar.";
|
||
}
|
||
}
|
||
|
||
loadSources();
|
||
</script>
|
||
</body>
|
||
</html>
|