129 lines
4.3 KiB
HTML
129 lines
4.3 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">
|
||
</head>
|
||
<body>
|
||
<div id="bootstrap-screen" role="status" aria-live="polite">
|
||
<section aria-label="Anwendung wird initialisiert">
|
||
<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" aria-label="Routenauswahl">
|
||
<header>
|
||
<h1>Wegwichtel</h1>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<p id="location-hint" class="notice">Standort wird ermittelt.</p>
|
||
|
||
<section aria-label="Routen in der Nähe">
|
||
<h2>Routen in deiner Nähe</h2>
|
||
<ul id="nearby-route-list" class="route-list" aria-live="polite"></ul>
|
||
</section>
|
||
|
||
<section aria-label="Alle Routen">
|
||
<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"></p>
|
||
<ul id="all-route-list" class="route-list" aria-live="polite"></ul>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="route-page" class="app-page" aria-label="Ausgewählte Route" hidden>
|
||
<header>
|
||
<button class="back-button" type="button" data-page-target="#routes-page">Zurück</button>
|
||
<h1 id="route-title">Route</h1>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<p id="route-description"></p>
|
||
|
||
<dl class="route-facts">
|
||
<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>
|
||
|
||
<button id="start-tracking" type="button">GPS-Begleitung starten</button>
|
||
<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" aria-label="Station" hidden>
|
||
<header>
|
||
<button class="back-button" type="button" data-page-target="#route-page">Zurück</button>
|
||
<h1 id="poi-title">Station</h1>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div id="slideshow" aria-live="polite">
|
||
<figure>
|
||
<img id="slide-image" alt="">
|
||
<figcaption id="slide-caption"></figcaption>
|
||
</figure>
|
||
|
||
<div id="slide-controls">
|
||
<button id="slide-prev" type="button">Vorheriges Bild</button>
|
||
<span id="slide-position" aria-live="polite">0 / 0</span>
|
||
<button id="slide-next" type="button">Nächstes Bild</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p id="poi-description"></p>
|
||
<audio id="poi-audio" controls preload="metadata"></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 Routenpunkt</span>
|
||
<strong id="navigation-distance">–</strong>
|
||
</p>
|
||
</footer>
|
||
</main>
|
||
|
||
<script src="js/bootstrap-loader.js"></script>
|
||
</body>
|
||
</html>
|