157 lines
5.7 KiB
HTML
157 lines
5.7 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.12">
|
||
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui-1.14.2.min.css?v=0.12.12">
|
||
<link rel="stylesheet" href="css/app.css?v=0.12.12">
|
||
</head>
|
||
<body>
|
||
<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>
|
||
|
||
<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-error" hidden></p>
|
||
<button id="bootstrap-retry" type="button" hidden>Erneut versuchen</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>
|
||
|
||
<script src="js/bootstrap-loader.js?v=0.12.12"></script>
|
||
</body>
|
||
</html>
|