Feature: Scan-Fortschritt als SVG-Ring um das Zoom-Statusfeld

backend/static/css/components.css

@@ -2036,66 +2036,6 @@ textarea.form-control {
 .map-place-btns .btn { flex: 1; }
 
 /* Statusleiste: nur Info, unten links */
-/* Scan-Fortschrittsbalken — oben im Kartenfenster */
-.map-scan-bar {
-  position:       absolute;
-  top:            0;
-  left:           0;
-  right:          0;
-  z-index:        1001;
-  height:         40px;
-  background:     rgba(255,255,255,0.92);
-  backdrop-filter: blur(6px);
-  border-bottom:  1px solid var(--c-border-light);
-  display:        flex;
-  align-items:    center;
-  gap:            var(--space-3);
-  padding:        0 var(--space-4);
-  opacity:        0;
-  pointer-events: none;
-  transition:     opacity 0.25s;
-  overflow:       hidden;
-}
-.map-scan-bar.active {
-  opacity:        1;
-}
-.map-scan-bar__track {
-  flex:           1;
-  height:         6px;
-  background:     var(--c-border-light);
-  border-radius:  var(--radius-full);
-  overflow:       hidden;
-  position:       relative;
-}
-.map-scan-bar__fill {
-  height:         6px;
-  background:     var(--c-primary);
-  border-radius:  var(--radius-full);
-  width:          0%;
-  transition:     width 0.4s ease;
-  position:       relative;
-}
-.map-scan-bar__fill::after {
-  content:        '';
-  position:       absolute;
-  top:            0; right: 0; bottom: 0;
-  width:          60px;
-  background:     linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
-  animation:      scan-shimmer 1.2s ease-in-out infinite;
-}
-@keyframes scan-shimmer {
-  0%   { transform: translateX(-60px); opacity: 0; }
-  50%  { opacity: 1; }
-  100% { transform: translateX(60px);  opacity: 0; }
-}
-.map-scan-bar__label {
-  font-size:      12px;
-  font-weight:    600;
-  color:          var(--c-primary);
-  min-width:      80px;
-  white-space:    nowrap;
-}
-
 .map-statusbar {
   position:      absolute;
   bottom:        var(--space-3);

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '97'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '98'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 

backend/static/js/pages/map.js

@@ -183,13 +183,6 @@ window.Page_map = (() => {
           <button class="map-fab" id="map-locate-btn" title="Meinen Standort"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg></button>
         </div>
 
-        <div class="map-scan-bar" id="map-scan-bar">
-          <span class="map-scan-bar__label" id="map-scan-label"></span>
-          <div class="map-scan-bar__track">
-            <div class="map-scan-bar__fill" id="map-scan-fill"></div>
-          </div>
-        </div>
-
         <div class="map-statusbar" id="map-statusbar">
           <span id="map-zoom-info"></span>
           <span id="map-osm-status"></span>
@@ -412,29 +405,82 @@ window.Page_map = (() => {
   function _setOsmStatus(text, pct = null) {
     const el = document.getElementById('map-osm-status');
     if (el) el.textContent = text;
+    _updateScanRing(text ? pct : null);
+  }
 
-    const bar   = document.getElementById('map-scan-bar');
+  function _updateScanRing(pct) {
-    const fill  = document.getElementById('map-scan-fill');
+    const statusbar = document.getElementById('map-statusbar');
-    const label = document.getElementById('map-scan-label');
+    if (!statusbar) return;
-    if (!bar || !fill || !label) return;
+    const mapEl = statusbar.closest('.map-main') || statusbar.parentElement;
+    if (!mapEl) return;
 
-    if (!text) {
+    let svg = document.getElementById('map-scan-ring');
-      bar.classList.remove('active');
+
+    // Ring ausblenden / entfernen
+    if (pct === null) {
+      if (svg) { svg.style.opacity = '0'; setTimeout(() => svg?.remove(), 600); }
+      statusbar.style.border = '';
       return;
     }
-    bar.classList.add('active');
+
-    if (pct !== null) {
+    // SVG einmalig erzeugen
-      fill.style.width = `${pct}%`;
+    if (!svg) {
-      label.textContent = pct < 100 ? `Scanne ${pct}\u202f%` : '';
+      svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    } else {
+      svg.id = 'map-scan-ring';
-      fill.style.width = '30%';
+      svg.setAttribute('overflow', 'visible');
-      fill.classList.add('indeterminate');
+      svg.style.cssText = 'position:absolute;pointer-events:none;z-index:1002;transition:opacity 0.55s ease';
-      label.textContent = text;
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      path.id = 'map-scan-ring-rect';
+      path.setAttribute('fill',             'none');
+      path.setAttribute('stroke',           '#C4843A');
+      path.setAttribute('stroke-width',     '3');
+      path.setAttribute('stroke-linecap',   'round');
+      svg.appendChild(path);
+      mapEl.appendChild(svg);
     }
-    if (pct === 100) {
+
-      fill.style.width = '100%';
+    // Position relativ zum Map-Container berechnen
-      label.textContent = '';
+    const sr = statusbar.getBoundingClientRect();
-      setTimeout(() => bar.classList.remove('active'), 600);
+    const mr = mapEl.getBoundingClientRect();
+    const w  = sr.width;
+    const h  = sr.height;
+    const r  = h / 2;          // border-radius-full = Hälfte der Höhe
+    const p  = 2;              // Abstand zur inneren Kante
+
+    // Umfang der Pill: gerades Stück + zwei Halbkreise
+    const perim  = 2 * (w - h) + Math.PI * h;
+    // Stroke beginnt oben-links und läuft im Uhrzeigersinn
+    // Um bei 12 Uhr zu starten: Offset um das linke Halbkreis-Viertel + halbe Geraden verschieben
+    const startShift = (w - h) / 2 + (Math.PI * h) / 4;
+    const progress   = Math.min(100, Math.max(0, pct));
+    const dashOffset = perim * (1 - progress / 100) + startShift;
+
+    svg.style.left    = (sr.left - mr.left - p) + 'px';
+    svg.style.top     = (sr.top  - mr.top  - p) + 'px';
+    svg.style.width   = (w + p * 2) + 'px';
+    svg.style.height  = (h + p * 2) + 'px';
+    svg.style.opacity = '1';
+
+    const rect = document.getElementById('map-scan-ring-rect');
+    rect.setAttribute('x',                  String(p));
+    rect.setAttribute('y',                  String(p));
+    rect.setAttribute('width',              String(w));
+    rect.setAttribute('height',             String(h));
+    rect.setAttribute('rx',                 String(r));
+    rect.setAttribute('ry',                 String(r));
+    rect.setAttribute('stroke-dasharray',   perim.toFixed(2));
+    rect.setAttribute('stroke-dashoffset',  dashOffset.toFixed(2));
+
+    // Original-Rahmen verstecken während Ring aktiv ist
+    statusbar.style.border = 'none';
+
+    if (progress >= 100) {
+      setTimeout(() => {
+        const s = document.getElementById('map-scan-ring');
+        if (s) s.style.opacity = '0';
+        statusbar.style.border = '';
+        setTimeout(() => s?.remove(), 600);
+      }, 500);
     }
   }
 

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v122';
+const CACHE_VERSION = 'by-v123';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten