326 lines
16 KiB
HTML
326 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#315d3a">
|
||
<title>Wegwichtel</title>
|
||
<link rel="stylesheet" href="css/bootstrap.css?v=0.12.14">
|
||
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui-1.14.2.min.css?v=0.12.14">
|
||
<link rel="stylesheet" href="css/app.css?v=0.12.14">
|
||
</head>
|
||
<body>
|
||
<button id="info-button" class="info-button" type="button" aria-label="Informationen, Datenschutz und Impressum öffnen" title="Informationen">
|
||
<span aria-hidden="true">i</span>
|
||
</button>
|
||
|
||
<div id="bootstrap-screen" aria-live="polite" aria-busy="true">
|
||
<section>
|
||
<span aria-hidden="true">🧭</span>
|
||
<h1>Wegwichtel</h1>
|
||
<p>Der Wegwichtel bereitet Routen und Medien vor.</p>
|
||
|
||
<div class="privacy-summary">
|
||
<p><strong>Cookies:</strong> Diese Anwendung setzt derzeit keine Cookies und verwendet weder Werbung noch Tracking.</p>
|
||
|
||
<label class="switch-row switch-disabled">
|
||
<span>
|
||
<strong>Optionale Cookies</strong>
|
||
<small>Nicht verwendet und deshalb dauerhaft ausgeschaltet.</small>
|
||
</span>
|
||
<input class="cookie-toggle" type="checkbox" role="switch" disabled>
|
||
<span class="switch-track" aria-hidden="true"></span>
|
||
</label>
|
||
|
||
<label class="switch-row">
|
||
<span>
|
||
<strong>Streckenfortschritt lokal speichern</strong>
|
||
<small>Speichert ausgewählte Routen, besuchte und angesehene Stationen sowie abgespielte Audiodateien ausschließlich in diesem Browser.</small>
|
||
</span>
|
||
<input class="progress-storage-toggle" type="checkbox" role="switch">
|
||
<span class="switch-track" aria-hidden="true"></span>
|
||
</label>
|
||
</div>
|
||
|
||
<p id="storage-cleanup-status" class="storage-cleanup-status" hidden></p>
|
||
|
||
<progress id="bootstrap-progress" max="6" value="0"></progress>
|
||
|
||
<ol id="bootstrap-steps">
|
||
<li data-step="jquery">jQuery laden</li>
|
||
<li data-step="jquery-ui">jQuery UI laden</li>
|
||
<li data-step="modules">Anwendungsmodule laden</li>
|
||
<li data-step="server">Server prüfen</li>
|
||
<li data-step="routes">Routen laden</li>
|
||
<li data-step="location">Standort ermitteln</li>
|
||
</ol>
|
||
|
||
<p id="bootstrap-ready" class="bootstrap-ready" hidden>Alles ist bereit. Tippe oder klicke auf diese Startseite, um die Anwendung zu öffnen.</p>
|
||
<p id="bootstrap-error" hidden></p>
|
||
<button id="bootstrap-retry" type="button" hidden>Erneut versuchen</button>
|
||
<button id="bootstrap-enter" type="button" hidden>Anwendung öffnen</button>
|
||
</section>
|
||
</div>
|
||
|
||
<main id="app-shell" hidden>
|
||
<section id="routes-page" class="app-page">
|
||
<header>
|
||
<h1>Wegwichtel</h1>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<p id="location-hint" class="notice">Standort wird für nahe Routen lokal auf diesem Gerät ermittelt.</p>
|
||
|
||
<section>
|
||
<h2>Routen in deiner Nähe</h2>
|
||
<ul id="nearby-route-list" class="route-list" aria-live="polite">
|
||
<li><p>Routen werden geladen …</p></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Alle Routen</h2>
|
||
<label for="route-search">Routen durchsuchen</label>
|
||
|
||
<div class="search-row">
|
||
<input
|
||
id="route-search"
|
||
type="search"
|
||
autocomplete="off"
|
||
inputmode="search"
|
||
placeholder="Name, Schule oder Beschreibung">
|
||
<button id="clear-route-search" type="button">Suche leeren</button>
|
||
</div>
|
||
|
||
<p id="all-routes-summary" aria-live="polite">Routen werden geladen …</p>
|
||
<ul id="all-route-list" class="route-list" aria-live="polite">
|
||
<li><p>Routen werden geladen …</p></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="route-page" class="app-page" hidden>
|
||
<header class="has-back-button">
|
||
<button class="back-button" type="button" data-page-target="#routes-page" aria-label="Zurück zur Routenauswahl" title="Zurück zur Routenauswahl">
|
||
<img src="images/icons/back.svg" alt="">
|
||
</button>
|
||
<h1 id="route-title">Route</h1>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<p id="route-description"></p>
|
||
|
||
<dl>
|
||
<div><dt>Länge</dt><dd id="route-distance">–</dd></div>
|
||
<div><dt>Höhenmeter</dt><dd id="route-elevation">–</dd></div>
|
||
<div><dt>POIs</dt><dd id="route-poi-count">–</dd></div>
|
||
</dl>
|
||
|
||
<fieldset>
|
||
<legend>Routensteuerung</legend>
|
||
<button id="start-route" type="button" aria-label="Route starten" title="Route starten">
|
||
<img src="images/icons/play.svg" alt="Route starten">
|
||
</button>
|
||
<button id="pause-route" type="button" aria-label="Route pausieren" title="Route pausieren" disabled>
|
||
<img src="images/icons/pause.svg" alt="Route pausieren">
|
||
</button>
|
||
<button id="stop-route" type="button" aria-label="Route beenden" title="Route beenden" disabled>
|
||
<img src="images/icons/stop.svg" alt="Route beenden">
|
||
</button>
|
||
</fieldset>
|
||
<p id="tracking-status" class="notice" hidden></p>
|
||
|
||
<h2>Stationen</h2>
|
||
<ul id="poi-list" class="route-list"></ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="poi-page" class="app-page" hidden>
|
||
<header class="has-back-button">
|
||
<button class="back-button" type="button" data-page-target="#route-page" aria-label="Zurück zur Route" title="Zurück zur Route">
|
||
<img src="images/icons/back.svg" alt="">
|
||
</button>
|
||
<h1 id="poi-title">Station</h1>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div id="slideshow" aria-live="polite">
|
||
<figure>
|
||
<img id="slide-image" alt="">
|
||
</figure>
|
||
|
||
<fieldset>
|
||
<legend>Bildnavigation</legend>
|
||
<button id="slide-prev" type="button" aria-label="Vorheriges Bild" title="Vorheriges Bild">
|
||
<img src="images/icons/chevron-left.svg" alt="Vorheriges Bild">
|
||
</button>
|
||
<div>
|
||
<p id="slide-caption"></p>
|
||
<span id="slide-position">0 / 0</span>
|
||
</div>
|
||
<button id="slide-next" type="button" aria-label="Nächstes Bild" title="Nächstes Bild">
|
||
<img src="images/icons/chevron-right.svg" alt="Nächstes Bild">
|
||
</button>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<p id="poi-description"></p>
|
||
<audio id="poi-audio" controls preload="metadata" aria-label="Audiowiedergabe zur Station" hidden>Audio kann auf diesem Gerät nicht wiedergegeben werden.</audio>
|
||
</div>
|
||
</section>
|
||
|
||
<footer id="navigation-footer" hidden aria-live="polite">
|
||
<svg id="navigation-arrow" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
|
||
<path d="M32 4 53 54 32 44 11 54Z"/>
|
||
</svg>
|
||
<p>
|
||
<span id="navigation-mode">Richtung zum nächsten POI</span>
|
||
<strong id="navigation-distance">–</strong>
|
||
</p>
|
||
</footer>
|
||
</main>
|
||
|
||
<dialog id="info-dialog" class="info-dialog" aria-labelledby="info-dialog-title">
|
||
<div class="info-dialog-shell">
|
||
<header class="info-dialog-header">
|
||
<button id="info-back" type="button" aria-label="Zurück zum Informationsmenü" title="Zurück" hidden>‹</button>
|
||
<h2 id="info-dialog-title">Informationen</h2>
|
||
<button id="info-close" type="button" aria-label="Informationsfenster schließen" title="Schließen">×</button>
|
||
</header>
|
||
|
||
<div class="info-dialog-content">
|
||
<nav id="info-menu" class="info-menu" aria-label="Rechtliche und technische Informationen">
|
||
<button type="button" data-info-target="privacy">Datenschutzerklärung</button>
|
||
<button type="button" data-info-target="imprint">Impressum</button>
|
||
<button type="button" data-info-target="technology">Cookies und verwendete JavaScripts</button>
|
||
</nav>
|
||
|
||
<article class="info-page" data-info-page="privacy" hidden>
|
||
<p class="legal-warning"><strong>Vor der öffentlichen Freigabe:</strong> Die gekennzeichneten Angaben müssen durch die verantwortliche Schule, Gemeinde, Initiative oder sonstige Betreiberin ergänzt und rechtlich geprüft werden.</p>
|
||
|
||
<h3>1. Verantwortliche Stelle</h3>
|
||
<p>
|
||
<strong>[Name der verantwortlichen Organisation ergänzen]</strong><br>
|
||
[Straße und Hausnummer ergänzen]<br>
|
||
[Postleitzahl und Ort ergänzen]<br>
|
||
E-Mail: [E-Mail-Adresse ergänzen]<br>
|
||
Telefon: [Telefonnummer ergänzen]
|
||
</p>
|
||
|
||
<h3>2. Bereitstellung der Website</h3>
|
||
<p>Beim Aufruf der Website können durch den Webserver technisch erforderliche Verbindungsdaten verarbeitet werden. Dazu können IP-Adresse, Zeitpunkt, aufgerufene Adresse, übertragene Datenmenge, Browsertyp und Betriebssystem gehören. Welche Protokolldaten tatsächlich gespeichert werden und wie lange dies geschieht, muss für den eingesetzten Hostingdienst ergänzt werden.</p>
|
||
<p>Hostinganbieter: <strong>[Anbieter, Anschrift und Speicherdauer ergänzen]</strong></p>
|
||
|
||
<h3>3. Standortdaten</h3>
|
||
<p>Die Standortfreigabe ist freiwillig. Sie wird benötigt, um nahe Routen vorzuschlagen und während einer gestarteten Route Entfernungen und Richtungen zu berechnen. Die Anwendung verarbeitet die laufende Position im Browser. Sie legt daraus keinen serverseitigen Standortverlauf an.</p>
|
||
|
||
<h3>4. Lokaler Streckenfortschritt</h3>
|
||
<p>Nach ausdrücklicher Aktivierung speichert die Anwendung ein JSON-Objekt im Local Storage dieses Browsers. Es enthält die aktuell ausgewählte Strecke, besuchte und angesehene Stationen, abgespielte Audioeinträge, den Routenstatus sowie Zeitstempel. Diese Angaben bleiben auf dem verwendeten Gerät und werden nicht mit dem Server synchronisiert.</p>
|
||
<p>Gespeicherte Streckendaten werden beim nächsten Öffnen entfernt, sobald ihre letzte Aktualisierung mindestens 24 Stunden zurückliegt. Beim Ausschalten der Funktion werden die Streckendaten sofort gelöscht.</p>
|
||
|
||
<label class="switch-row compact-switch">
|
||
<span>
|
||
<strong>Streckenfortschritt lokal speichern</strong>
|
||
<small>Freiwillige Browser-Speicherung ein- oder ausschalten.</small>
|
||
</span>
|
||
<input class="progress-storage-toggle" type="checkbox" role="switch">
|
||
<span class="switch-track" aria-hidden="true"></span>
|
||
</label>
|
||
|
||
<h3>5. Cookies und Tracking</h3>
|
||
<p>Die Anwendung setzt derzeit keine Cookies. Sie verwendet keine Reichweitenmessung, keine personalisierte Werbung und keine Trackingdienste. Eine technisch notwendige Local-Storage-Einstellung merkt sich lediglich, ob die freiwillige Speicherung des Streckenfortschritts aktiviert wurde.</p>
|
||
|
||
<h3>6. Inhalte von Schülerinnen und Schülern</h3>
|
||
<p>Fotos, Texte und Sprachaufnahmen dürfen nur veröffentlicht werden, wenn die erforderlichen Rechte und Einwilligungen vorliegen. Besonders bei erkennbaren Kindern sind die Vorgaben der Schule und die Einwilligungen der Sorgeberechtigten zu beachten.</p>
|
||
|
||
<h3>7. Rechte betroffener Personen</h3>
|
||
<p>Betroffene Personen können je nach rechtlicher Voraussetzung Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch verlangen. Erteilte Einwilligungen können für die Zukunft widerrufen werden.</p>
|
||
<p>Datenschutzkontakt: <strong>[Kontakt ergänzen]</strong><br>Zuständige Datenschutzaufsicht: <strong>[Behörde und Kontakt ergänzen]</strong></p>
|
||
</article>
|
||
|
||
<article class="info-page" data-info-page="imprint" hidden>
|
||
<p class="legal-warning"><strong>Platzhalter:</strong> Dieses Impressum ist vor der Veröffentlichung mit den Angaben der tatsächlichen Betreiberin zu vervollständigen.</p>
|
||
|
||
<h3>Anbieter und verantwortlich für dieses Angebot</h3>
|
||
<p>
|
||
<strong>[Vollständiger Name der Schule, Gemeinde, Initiative oder Person]</strong><br>
|
||
[Rechtsform oder Vertretungsberechtigung ergänzen]<br>
|
||
[Straße und Hausnummer]<br>
|
||
[Postleitzahl und Ort]
|
||
</p>
|
||
|
||
<h3>Kontakt</h3>
|
||
<p>
|
||
Telefon: [Telefonnummer ergänzen]<br>
|
||
E-Mail: [E-Mail-Adresse ergänzen]
|
||
</p>
|
||
|
||
<h3>Inhaltlich verantwortlich</h3>
|
||
<p>[Name und ladungsfähige Anschrift ergänzen]</p>
|
||
|
||
<h3>Weitere Pflichtangaben</h3>
|
||
<p>Je nach Betreiberin können zusätzliche Angaben erforderlich sein, zum Beispiel zur Aufsichtsbehörde, Registernummer, Umsatzsteuer-ID oder zuständigen Körperschaft. Nicht benötigte Angaben sind zu entfernen.</p>
|
||
|
||
<h3>Haftung für Inhalte und Verweise</h3>
|
||
<p>Die Inhalte werden sorgfältig erstellt und regelmäßig geprüft. Für Hinweise auf fehlerhafte, veraltete oder rechtsverletzende Inhalte steht der oben genannte Kontakt zur Verfügung. Für Inhalte externer Seiten sind deren Betreiber verantwortlich.</p>
|
||
|
||
<h3>Urheber- und Nutzungsrechte</h3>
|
||
<p>Texte, Bilder, Tonaufnahmen und Routendaten dürfen nur im Rahmen der jeweils eingeräumten Nutzungsrechte verwendet werden. Die Rechte der beteiligten Kinder, Familien, Lehrkräfte und weiteren Urheberinnen und Urheber bleiben unberührt.</p>
|
||
</article>
|
||
|
||
<article class="info-page" data-info-page="technology" hidden>
|
||
<h3>Cookies</h3>
|
||
<p>Wegwichtel setzt derzeit keine Cookies. Die Anwendung besitzt keine Werbe-, Analyse- oder Trackingfunktionen. Der Cookie-Schalter bleibt deshalb ausgeschaltet.</p>
|
||
|
||
<label class="switch-row switch-disabled compact-switch">
|
||
<span>
|
||
<strong>Optionale Cookies</strong>
|
||
<small>Derzeit nicht vorhanden.</small>
|
||
</span>
|
||
<input class="cookie-toggle" type="checkbox" role="switch" disabled>
|
||
<span class="switch-track" aria-hidden="true"></span>
|
||
</label>
|
||
|
||
<h3>Local Storage</h3>
|
||
<p>Der Browser kann auf Wunsch Streckenfortschritte lokal speichern. Verwendet werden die Schlüssel <code>wegwichtel.privacy.v1</code> für die gewählte Einstellung und <code>wegwichtel.route-progress.v1</code> für die freiwilligen Streckendaten. Die Streckendaten werden nach 24 Stunden bereinigt oder beim Ausschalten sofort entfernt.</p>
|
||
|
||
<label class="switch-row compact-switch">
|
||
<span>
|
||
<strong>Streckenfortschritt lokal speichern</strong>
|
||
<small>Die Änderung gilt sofort auf diesem Gerät.</small>
|
||
</span>
|
||
<input class="progress-storage-toggle" type="checkbox" role="switch">
|
||
<span class="switch-track" aria-hidden="true"></span>
|
||
</label>
|
||
|
||
<h3>Lokal eingebundene JavaScripts</h3>
|
||
<ul>
|
||
<li><strong>jQuery 4.0.0:</strong> DOM-Zugriffe, Ereignisbehandlung und API-Anfragen.</li>
|
||
<li><strong>jQuery UI 1.14.2:</strong> Schaltflächen und Suchvorschläge.</li>
|
||
<li><strong>Wegwichtel-Module:</strong> Routenanzeige, Navigation, Standort, Geräteausrichtung, Bilder, Audio, Vibration, Datenschutz und lokaler Fortschritt.</li>
|
||
</ul>
|
||
<p>Alle Bibliotheken werden vom eigenen Server ausgeliefert. Die Anwendung lädt keine JavaScripts, Schriftarten oder Analysepixel von externen Anbietern.</p>
|
||
|
||
<h3>Browser-Schnittstellen</h3>
|
||
<ul>
|
||
<li>Geolocation API für freiwillige Standortdaten,</li>
|
||
<li>Device Orientation API für den Richtungspfeil,</li>
|
||
<li>Vibration API für Hinweise bei erreichten Stationen,</li>
|
||
<li>HTML-Audio und HTML-Bilder für lokal bereitgestellte Medien,</li>
|
||
<li>History API für die Navigation zwischen den Ansichten.</li>
|
||
</ul>
|
||
|
||
<h3>Technische Grenzen</h3>
|
||
<p>Browser und Betriebssystem können Standort, Kompass, Audio, Vibration oder Local Storage sperren. Die Anwendung bleibt grundsätzlich nutzbar, einzelne Komfortfunktionen können dann jedoch fehlen.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<script src="js/privacy-storage.js?v=0.12.14"></script>
|
||
<script src="js/legal-ui.js?v=0.12.14"></script>
|
||
<script src="js/bootstrap-loader.js?v=0.12.14"></script>
|
||
</body>
|
||
</html>
|