85 lines
3.4 KiB
HTML
85 lines
3.4 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 – Atlas</title>
|
||
<link rel="stylesheet" href="css/bootstrap.css">
|
||
</head>
|
||
<body>
|
||
<div id="bootstrap-screen" role="status" aria-live="polite">
|
||
<div class="bootstrap-card">
|
||
<div class="mascot" aria-hidden="true">🧭</div>
|
||
<h1>Wegwichtel</h1>
|
||
<p>Atlas 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>
|
||
</div>
|
||
</div>
|
||
|
||
<main id="app-shell" hidden>
|
||
<section class="app-page" id="routes-page" aria-labelledby="routes-heading">
|
||
<header class="app-header">
|
||
<h1 id="routes-heading">Wegwichtel <small>Atlas</small></h1>
|
||
</header>
|
||
<div class="app-content">
|
||
<div id="location-hint" class="notice">Standort wird ermittelt.</div>
|
||
<h2>Routen in deiner Nähe</h2>
|
||
<ul id="route-list" class="card-list" aria-live="polite"></ul>
|
||
</div>
|
||
<footer class="app-footer">GPS-Lernwege</footer>
|
||
</section>
|
||
|
||
<section class="app-page" id="route-page" aria-labelledby="route-title" hidden>
|
||
<header class="app-header app-header-with-back">
|
||
<button class="back-button" type="button" data-page-target="#routes-page">Zurück</button>
|
||
<h1 id="route-title">Route</h1>
|
||
</header>
|
||
<div class="app-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>
|
||
<div id="tracking-status" class="notice" hidden></div>
|
||
<h2>Stationen</h2>
|
||
<ul id="poi-list" class="card-list"></ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="app-page" id="poi-page" aria-labelledby="poi-title" hidden>
|
||
<header class="app-header app-header-with-back">
|
||
<button class="back-button" type="button" data-page-target="#route-page">Zurück</button>
|
||
<h1 id="poi-title">Station</h1>
|
||
</header>
|
||
<div class="app-content">
|
||
<div id="slideshow" class="slideshow" aria-live="polite">
|
||
<figure><img id="slide-image" alt=""><figcaption id="slide-caption"></figcaption></figure>
|
||
<div id="slide-controls" class="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>
|
||
</main>
|
||
|
||
<script src="js/bootstrap-loader.js"></script>
|
||
</body>
|
||
</html>
|