image handling update for route creation

public/index.html

@@ -91,6 +91,8 @@
         </div>
       </div>
 
+      <p id="android-browser-hint" class="android-browser-hint" hidden></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">
@@ -104,7 +106,7 @@
         <label class="switch-row">
           <span>
             <strong>Streckenfortschritt lokal speichern</strong>
-            <small>Speichert ausgewählte Routen und besuchte Stationen ausschließlich in diesem Browser.</small>
+            <small>Speichert ausgewählte Routen und besuchte Streckenpunkte ausschließlich in diesem Browser.</small>
           </span>
           <input class="progress-storage-toggle" type="checkbox" role="switch" aria-checked="false">
           <span class="switch-track" aria-hidden="true"></span>
@@ -126,9 +128,12 @@
   </div>
   <main id="app-shell" hidden>
     <div class="route-control">
-      <button id="route-control-button" class="route-control-button" type="button" aria-label="Strecke auswählen oder wechseln" title="Strecke auswählen oder wechseln" aria-haspopup="true" aria-expanded="false" aria-controls="route-control-dropdown">
+      <div class="route-control-summary" aria-live="polite">
         <strong id="route-control-title">Route wählen</strong>
         <small id="route-control-next">Aktive und lokale Strecken</small>
+      </div>
+      <button id="route-control-button" class="route-control-button" type="button" aria-label="Strecke auswählen oder wechseln" title="Strecke auswählen oder wechseln" aria-haspopup="true" aria-expanded="false" aria-controls="route-control-dropdown">
+        <img src="images/icons/route-management.svg" alt="" aria-hidden="true">
       </button>
       <nav id="route-control-dropdown" class="route-control-dropdown" aria-label="Streckenauswahl und Streckenverwaltung" hidden>
         <section aria-labelledby="route-control-server-title">
@@ -140,9 +145,7 @@
           <ul id="route-control-local-list" class="route-control-list" aria-live="polite"></ul>
         </section>
         <div class="route-control-actions">
-          <button id="editor-button" class="editor-button" type="button" aria-label="Streckenverwaltung öffnen" title="Streckenverwaltung öffnen" aria-haspopup="dialog" aria-expanded="false" aria-controls="editor-dialog">
-            <img src="images/icons/route-management.svg" alt="" aria-hidden="true">
-          </button>
+          <button id="editor-button" class="editor-button" type="button" aria-label="Streckenverwaltung öffnen" title="Streckenverwaltung öffnen" aria-haspopup="dialog" aria-expanded="false" aria-controls="editor-dialog">Strecken verwalten</button>
           <button id="route-control-new" class="editor-primary-button" type="button">Neue lokale Strecke</button>
         </div>
       </nav>
@@ -198,7 +201,7 @@
         <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>
+          <div><dt>Streckenpunkte</dt><dd id="route-poi-count">–</dd></div>
         </dl>
         <fieldset>
           <legend>Routensteuerung</legend>
@@ -213,7 +216,7 @@
           </button>
         </fieldset>
         <p id="tracking-status" class="notice" hidden></p>
-        <h2>Stationen</h2>
+        <h2>Streckenpunkte</h2>
         <ul id="poi-list" class="route-list"></ul>
       </div>
     </section>
@@ -222,7 +225,7 @@
         <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>
+        <h1 id="poi-title">Streckenpunkt</h1>
       </header>
       <div class="content">
         <div id="slideshow" aria-live="polite">
@@ -244,7 +247,7 @@
           </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>
+        <audio id="poi-audio" controls preload="metadata" aria-label="Audiowiedergabe zum Streckenpunkt" hidden>Audio kann auf diesem Gerät nicht wiedergegeben werden.</audio>
       </div>
     </section>
     <footer id="navigation-footer" hidden aria-live="polite">
@@ -252,7 +255,7 @@
         <path d="M32 4 53 54 32 44 11 54Z"/>
       </svg>
       <p>
-        <span id="navigation-mode">Richtung zum nächsten POI</span>
+        <span id="navigation-mode">Richtung zum nächsten Streckenpunkt</span>
         <strong id="navigation-distance">–</strong>
       </p>
     </footer>
@@ -291,7 +294,7 @@
           <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>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 Streckenpunkte, 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>
@@ -302,7 +305,7 @@
             <span class="switch-track" aria-hidden="true"></span>
           </label>
           <h3>5. Lokale Streckenentwürfe</h3>
-          <p>Neu angelegte Strecken werden zunächst ausschließlich im Local Storage dieses Browsers gespeichert. Die GPX-Daten enthalten den Streckenverlauf und die POI-Koordinaten. Ergänzende JSON-Daten ordnen den POIs Texte, Audiodateien und Bilder zu. Medien werden dafür als lokale Browserdaten gespeichert.</p>
+          <p>Neu angelegte Strecken werden zunächst ausschließlich im Local Storage dieses Browsers gespeichert. Die GPX-Daten enthalten den Streckenverlauf und die Koordinaten der Streckenpunkte. Ergänzende JSON-Daten ordnen den Streckenpunkten Texte und Medienreferenzen zu. Bilder und Audiodateien werden platzsparend im lokalen Browser-Medienspeicher gespeichert.</p>
           <p>Lokale Streckenentwürfe sind bewusst von der freiwilligen Fortschrittsspeicherung getrennt. Sie werden nicht durch die 24-Stunden-Bereinigung entfernt und beim Ausschalten der Fortschrittsspeicherung nicht gelöscht. Sie verbleiben im Browser, bis sie ausdrücklich gelöscht werden oder die Browserdaten entfernt werden. Eine Übertragung an den Server erfolgt nur nach ausdrücklicher Betätigung des Upload-Buttons im Editor.</p>
           <h3>6. 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>
@@ -366,7 +369,7 @@
           </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>
-          <p>Lokale Streckenentwürfe werden getrennt davon unter <code>wegwichtel.local-routes.v1.*</code> gespeichert. Pro Entwurf werden GPX- und JSON-Daten vorgehalten; Bilder und Audiodateien liegen als Bestandteil der lokalen JSON-Daten im Browser. Diese Entwürfe werden nicht nach 24 Stunden bereinigt und sind nicht vom Schalter für den Streckenfortschritt abhängig. Durch Mediendateien kann das Speicherlimit des Browsers vergleichsweise schnell erreicht werden. Eine Serverübertragung erfolgt ausschließlich nach ausdrücklicher Betätigung des Upload-Buttons im Editor.</p>
+          <p>Lokale Streckenentwürfe werden getrennt davon unter <code>wegwichtel.local-routes.v1.*</code> gespeichert. Pro Entwurf werden GPX- und JSON-Daten im Local Storage vorgehalten; Bilder und Audiodateien liegen getrennt davon im lokalen Browser-Medienspeicher (IndexedDB). Diese Entwürfe werden nicht nach 24 Stunden bereinigt und sind nicht vom Schalter für den Streckenfortschritt abhängig. Durch Mediendateien kann das Speicherlimit des Browsers vergleichsweise schnell erreicht werden. Eine Serverübertragung erfolgt ausschließlich nach ausdrücklicher Betätigung des Upload-Buttons im Editor.</p>
           <label class="switch-row compact-switch">
             <span>
               <strong>Streckenfortschritt lokal speichern</strong>
@@ -386,13 +389,13 @@
           <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>Vibration API für Hinweise bei erreichten Streckenpunkten,</li>
             <li>HTML-Audio und HTML-Bilder für lokal bereitgestellte Medien,</li>
-            <li>FileReader und XML-Schnittstellen zum lokalen Verarbeiten von GPX-, Bild- und Audiodateien,</li>
+            <li>File System Access API und IndexedDB für lokale Medienreferenzen sowie FileReader und XML-Schnittstellen zum Verarbeiten von GPX-Dateien,</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. Für lokale Streckenentwürfe gilt zusätzlich das vom Browser vorgegebene Local-Storage-Limit.</p>
+          <p>Browser und Betriebssystem können Standort, Kompass, Audio, Vibration oder lokale Speicherfunktionen sperren. Die Anwendung bleibt grundsätzlich nutzbar, einzelne Komfortfunktionen können dann jedoch fehlen. Lokale Streckenmetadaten liegen im Local Storage; Medienreferenzen beziehungsweise der kompatible Blob-Fallback liegen getrennt in IndexedDB.</p>
         </article>
       </div>
     </div>
@@ -427,8 +430,10 @@
 
           <label for="editor-route-description">Beschreibung</label>
           <textarea id="editor-route-description" rows="4"></textarea>
-          <label for="editor-route-gpx">GPX-Datei importieren oder ersetzen</label>
-          <input id="editor-route-gpx" type="file" accept=".gpx,application/gpx+xml,text/xml,application/xml">
+          <div id="editor-route-gpx-group" class="editor-gpx-group">
+            <label for="editor-route-gpx">GPX-Datei importieren oder ersetzen</label>
+            <input id="editor-route-gpx" type="file" accept=".gpx,application/gpx+xml,text/xml,application/xml">
+          </div>
 
           <p id="editor-route-activated" class="editor-muted">Neue Strecken werden zunächst lokal gespeichert. Der Upload-Button überträgt den Entwurf als unveröffentlichte Strecke zur Prüfung an den Server.</p>
 
@@ -438,8 +443,8 @@
           </div>
         </form>
         <div class="editor-toolbar editor-poi-toolbar">
-          <h3>Trackpunkte</h3>
-          <button id="editor-add-poi" class="editor-round-button" type="button" aria-label="Trackpunkt hinzufügen" title="Trackpunkt hinzufügen">
+          <h3>Streckenpunkte</h3>
+          <button id="editor-add-poi" class="editor-round-button" type="button" aria-label="Streckenpunkt hinzufügen" title="Streckenpunkt hinzufügen">
             <span aria-hidden="true">+</span>
           </button>
         </div>
@@ -448,7 +453,7 @@
       <section id="editor-poi-form-view" class="editor-view" aria-labelledby="editor-poi-form-title" hidden>
         <div class="editor-toolbar editor-toolbar-back">
           <button id="editor-poi-cancel" class="editor-secondary-button" type="button">Zurück zur Strecke</button>
-          <h3 id="editor-poi-form-title">Trackpunkt bearbeiten</h3>
+          <h3 id="editor-poi-form-title">Streckenpunkt bearbeiten</h3>
         </div>
 
         <form id="editor-poi-form" class="editor-form">
@@ -463,7 +468,7 @@
           <input id="editor-poi-lon" type="hidden">
           <input id="editor-poi-radius" type="hidden" value="25">
 
-          <div class="editor-media-actions" aria-label="Medien zum Trackpunkt hinzufügen">
+          <div class="editor-media-actions" aria-label="Medien zum Streckenpunkt hinzufügen">
             <button id="editor-poi-audio-add" class="editor-media-button" type="button" title="Audio hinzufügen">
               <svg class="editor-media-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                 <path d="M18 5v15.2a5 5 0 1 1-2-4V9l10-2v9.2a5 5 0 1 1-2-4V4.6z"/>
@@ -486,10 +491,10 @@
           <p id="editor-poi-media-status" class="editor-muted" aria-live="polite"></p>
 
           <div class="editor-form-actions">
-            <button id="editor-poi-save" class="editor-primary-button" type="submit">Trackpunkt speichern</button>
+            <button id="editor-poi-save" class="editor-primary-button" type="submit">Streckenpunkt speichern</button>
             <button id="editor-poi-delete" class="editor-danger-button" type="button" hidden>
               <span class="editor-danger-icon" aria-hidden="true">−</span>
-              <span>Trackpunkt entfernen</span>
+              <span>Streckenpunkt entfernen</span>
             </button>
           </div>
         </form>