IT-Works/Wegwichtel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Navigation Arrow and simplify static page

Browse Source
This commit is contained in:
Florian Zumpe
2026-06-16 16:20:09 +02:00
parent 278813fba6
commit 4dfa7da08b
9 changed files with 667 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+63 -38
View File
@@ -4,16 +4,18 @@
<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>
<title>Wegwichtel</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>
<section aria-label="Anwendung wird initialisiert">
<span aria-hidden="true">🧭</span>
<h1>Wegwichtel</h1>
<p>Atlas bereitet Routen und Medien vor.</p>
<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>
@@ -22,80 +24,103 @@
<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>
</section>
</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>
<section id="routes-page" class="app-page" aria-label="Routenauswahl">
<header>
<h1>Wegwichtel</h1>
</header>
<div class="app-content">
<div id="location-hint" class="notice">Standort wird ermittelt.</div>
<section class="route-section" aria-labelledby="nearby-routes-heading">
<h2 id="nearby-routes-heading">Routen in deiner Nähe</h2>
<ul id="nearby-route-list" class="card-list" aria-live="polite"></ul>
<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 class="route-section" aria-labelledby="all-routes-heading">
<div class="section-heading-row">
<h2 id="all-routes-heading">Alle Routen</h2>
<div class="route-search-controls">
<label for="route-search">Routen durchsuchen</label>
<div class="route-search-row">
<input id="route-search" type="search" autocomplete="off"
placeholder="Name, Schule oder Beschreibung">
<button id="clear-route-search" type="button">Suche leeren</button>
</div>
</div>
<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" class="route-list-summary" aria-live="polite"></p>
<ul id="all-route-list" class="card-list" aria-live="polite"></ul>
<p id="all-routes-summary" aria-live="polite"></p>
<ul id="all-route-list" class="route-list" aria-live="polite"></ul>
</section>
</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">
<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="app-content">
<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>
<div id="tracking-status" class="notice" hidden></div>
<p id="tracking-status" class="notice" hidden></p>
<h2>Stationen</h2>
<ul id="poi-list" class="card-list"></ul>
<ul id="poi-list" class="route-list"></ul>
</div>
</section>
<section class="app-page" id="poi-page" aria-labelledby="poi-title" hidden>
<header class="app-header app-header-with-back">
<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="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">
<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>