Session 2026-04-19: Navigation, Kompass, Übungsfortschritt

Routen-Navigation:
- POI-Marker: farbige Kreise mit Phosphor-Icons (wie Hauptkarte)
- Screensaver: Navi-Pfeil dreht sich via DeviceOrientationEvent (iOS+Android)
- Pfeil-Dämpfung: EMA α=0.12 mit Wrap-Around
- GPS-Distanz-Bug: Fortschritt nur wenn <500m zur Route
- fitBounds: User-Position nur wenn <20km von Route
- Screensaver: "zur Route" vs "verbleibend" kontextabhängig
- Richtungspfeile entlang Route (blau, max 7 Stück)
- Umkehren ins Route-Detail verschoben, Detail-Map rebuildet sich
- rk-header z-index:10 (Leaflet-Tiles liefen drüber)
- 2-Sek. Screensaver-Entsperrung

km-Tracking:
- route_walks Tabelle
- POST /api/routes/{id}/walked (≥50%)
- total_km = erstellte Routes + gelaufene route_walks
- Toast bei neuem Badge

Übungsfortschritt:
- exercise_progress + training_plan_progress Tabellen
- GET/POST /api/training/progress, /plan-progress, /suggestions
- uebungen.js: API-first + localStorage-Fallback + Auto-Migration
- Empfehlungs-Banner (regelbasiert)
- Toast bei "sitzt"

backend/static/js/pages/settings.js

@@ -36,7 +36,7 @@ window.Page_settings = (() => {
   // ----------------------------------------------------------
   // EINGELOGGT — Account-Übersicht
   // ----------------------------------------------------------
-  function _renderAccount() {
+  async function _renderAccount() {
     const u = _appState.user;
 
     // Avatar: Bild oder Buchstabe
@@ -61,7 +61,7 @@ window.Page_settings = (() => {
     };
 
     _container.innerHTML = `
-      <div style="max-width:400px;margin:0 auto;padding:var(--space-4) 0">
+      <div style="width:100%;max-width:640px;margin:0 auto;box-sizing:border-box;overflow-x:hidden;align-self:center">
 
         <div class="card" style="padding:var(--space-5);margin-bottom:var(--space-4)">
           <div style="display:flex;align-items:center;gap:var(--space-4)">
@@ -145,6 +145,26 @@ window.Page_settings = (() => {
           </div>
         </div>
 
+        <div class="card" id="settings-stats-card" style="margin-bottom:var(--space-4)">
+          <div style="padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:600;
+                      color:var(--c-text-secondary);text-transform:uppercase;letter-spacing:0.05em;
+                      border-bottom:1px solid var(--c-border)">Aktivität</div>
+          <div id="settings-stats-body" style="padding:var(--space-4);display:flex;justify-content:space-around">
+            <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</div>
+          </div>
+          <div id="settings-streak" style="display:flex;align-items:center;gap:8px;
+               padding:0 var(--space-4) var(--space-3);flex-wrap:wrap"></div>
+        </div>
+
+        <div class="card" style="margin-bottom:var(--space-4)">
+          <div style="padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:600;
+                      color:var(--c-text-secondary);text-transform:uppercase;letter-spacing:0.05em;
+                      border-bottom:1px solid var(--c-border)">Trophäen</div>
+          <div id="settings-badges-body" style="padding:var(--space-4)">
+            <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</div>
+          </div>
+        </div>
+
         <div class="card" style="margin-bottom:var(--space-4)">
           <div class="card-body" style="padding:0">
             <div class="sidebar-item" data-page="dog-profile"
@@ -208,22 +228,6 @@ window.Page_settings = (() => {
               </select>
             </div>
 
-            <div style="display:flex;align-items:center;gap:var(--space-3);
-                        padding:var(--space-4);border-bottom:1px solid var(--c-border)">
-              <svg class="ph-icon" aria-hidden="true" style="width:1.25rem;height:1.25rem"><use href="/icons/phosphor.svg#eye-slash"></use></svg>
-              <div style="flex:1">
-                <div style="font-weight:500">Pocket-Modus beim Aufzeichnen</div>
-                <div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
-                  Schwarzes Overlay hält den Bildschirm aktiv (GPS läuft) — ideal für die Hosentasche.
-                  Helligkeit auf Minimum reduzieren für optimalen Akku-Schutz.
-                </div>
-              </div>
-              <label class="toggle" style="flex-shrink:0">
-                <input type="checkbox" id="toggle-pocket-mode"
-                       ${localStorage.getItem('by_pocket_mode') === 'true' ? 'checked' : ''}>
-                <span class="toggle-slider"></span>
-              </label>
-            </div>
           </div>
         </div>
 
@@ -265,6 +269,109 @@ window.Page_settings = (() => {
       </div>
     `;
 
+    // Achievements laden (Streak + Stats + Badges)
+    API.get('/achievements/me').then(a => {
+      const statsEl  = document.getElementById('settings-stats-body');
+      const badgesEl = document.getElementById('settings-badges-body');
+      if (!statsEl) return;
+
+      const s = a.stats || {}, streak = a.streak || {};
+      const stat = (val, label) => `
+        <div style="text-align:center">
+          <div style="font-size:1.3rem;font-weight:700;color:var(--c-text)">${val}</div>
+          <div style="font-size:10px;color:var(--c-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-top:2px">${label}</div>
+        </div>`;
+      statsEl.innerHTML =
+        stat((s.total_km ?? 0) + ' km', 'gelaufen') +
+        stat(s.routen ?? 0, 'Routen') +
+        stat(s.pois ?? 0, 'POIs') +
+        stat('#' + (a.rang ?? '–'), 'Rang');
+
+      const streakEl = document.getElementById('settings-streak');
+      if (streakEl) {
+        const cur = streak.current || 0, mx = streak.max || 0;
+        streakEl.innerHTML = cur > 0
+          ? `<span style="font-size:1.3rem">🔥</span>
+             <span style="font-weight:700;font-size:1.05rem">${cur} Tage Streak</span>
+             ${mx > cur ? `<span style="color:var(--c-text-muted);font-size:11px;margin-left:auto">Best: ${mx}</span>` : ''}`
+          : `<span style="color:var(--c-text-muted);font-size:var(--text-sm)">🔥 Noch kein Streak — heute aktiv werden!</span>`;
+      }
+
+      if (badgesEl && a.categories) {
+        // SVG-Schild für jede Kategorie
+        const shield = (color, dark, emoji, opacity = 1) => `
+          <svg viewBox="0 0 60 72" xmlns="http://www.w3.org/2000/svg"
+               style="width:56px;height:56px;filter:drop-shadow(0 2px 6px ${color}66)">
+            <defs>
+              <linearGradient id="g_${color.replace('#','')}" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stop-color="${color}"/>
+                <stop offset="100%" stop-color="${dark}"/>
+              </linearGradient>
+            </defs>
+            <path d="M30 3 L57 15 L57 38 Q57 60 30 70 Q3 60 3 38 L3 15 Z"
+                  fill="url(#g_${color.replace('#','')})" opacity="${opacity}"/>
+            <path d="M30 3 L57 15 L57 38 Q57 60 30 70 Q3 60 3 38 L3 15 Z"
+                  fill="none" stroke="rgba(255,255,255,.25)" stroke-width="1.5"/>
+            <text x="30" y="43" text-anchor="middle" dominant-baseline="middle"
+                  font-size="22" style="user-select:none">${emoji}</text>
+          </svg>`;
+
+        badgesEl.innerHTML = (a.categories || []).map(cat => {
+          const cur = cat.current_tier;
+          const nxt = cat.next_tier;
+          const val = cat.current_value;
+
+          // Alle Stufen als kleine Punkte
+          const dots = (cat.alle_stufen || []).map(s =>
+            `<div title="${_esc(s.name)}" style="width:8px;height:8px;border-radius:50%;
+             background:${s.earned ? s.color : 'var(--c-border)'}"></div>`
+          ).join('');
+
+          // Aktuelles Schild
+          const shieldSvg = cur
+            ? shield(cur.color, cur.dark, cat.emoji)
+            : shield('#9ca3af', '#6b7280', cat.emoji, 0.5);
+
+          // Fortschrittsbalken
+          const progressBar = nxt ? `
+            <div style="font-size:10px;color:var(--c-text-muted);margin-top:4px">
+              ${val}${cat.einheit} / ${nxt.schwelle}${cat.einheit} → ${_esc(nxt.name)}
+            </div>
+            <div style="height:4px;background:var(--c-border);border-radius:2px;margin-top:4px;overflow:hidden">
+              <div style="height:100%;width:${cat.progress}%;background:${nxt.color};border-radius:2px;transition:width .4s"></div>
+            </div>` : `
+            <div style="font-size:10px;color:var(--c-primary);font-weight:600;margin-top:4px">
+              Höchste Stufe erreicht! 🎉
+            </div>`;
+
+          return `
+            <div style="display:flex;gap:14px;align-items:flex-start;padding:12px 0;
+                        border-bottom:1px solid var(--c-border)">
+              ${shieldSvg}
+              <div style="flex:1;min-width:0">
+                <div style="display:flex;align-items:center;gap:6px;margin-bottom:2px">
+                  <span style="font-weight:700;font-size:var(--text-sm)">${_esc(cat.name)}</span>
+                  ${cur ? `<span style="font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;
+                            background:${cur.color};color:${cur.text}">${_esc(cur.name)}</span>` : ''}
+                </div>
+                <div style="display:flex;gap:4px;margin-bottom:6px">${dots}</div>
+                ${progressBar}
+              </div>
+            </div>`;
+        }).join('');
+      }
+
+      // Neue Badges als Toast
+      if (a.new_badges?.length) {
+        a.new_badges.forEach(b => {
+          UI.toast.success(`${b.emoji} ${b.name} — ${b.tier} freigeschaltet!`);
+        });
+      }
+    }).catch(() => {
+      const el = document.getElementById('settings-stats-body');
+      if (el) el.innerHTML = '<div style="color:var(--c-text-muted);font-size:var(--text-sm)">–</div>';
+    });
+
     // Avatar-Hover-Overlay
     const avatarBtn = document.getElementById('settings-avatar-btn');
     const avatarOverlay = avatarBtn?.querySelector('.avatar-overlay');
@@ -495,7 +602,7 @@ window.Page_settings = (() => {
       const r = await API.auth.referral();
       el.innerHTML = `
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
-          <div style="flex:1;background:var(--c-surface-2);border-radius:var(--radius-md);
+          <div style="flex:1;min-width:0;background:var(--c-surface-2);border-radius:var(--radius-md);
                       padding:var(--space-2) var(--space-3);font-family:monospace;font-size:var(--text-sm);
                       overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${r.link}</div>
           <button class="btn btn-primary btn-sm" id="ref-share-btn">${UI.icon('arrow-square-out')} Teilen</button>
@@ -518,7 +625,7 @@ window.Page_settings = (() => {
           UI.toast.success('Link kopiert!');
         }
       });
-    } catch { el.innerHTML = '<p style="color:var(--c-text-muted)">Nicht verfügbar.</p>'; }
+    } catch { el.innerHTML = ''; }
   }
 
   // ----------------------------------------------------------
@@ -677,6 +784,7 @@ window.Page_settings = (() => {
           _appState.activeDog = _appState.dogs[0] || null;
         } catch { /* keine Hunde = okay */ }
 
+        document.getElementById('header-login-btn')?.remove();
         UI.toast.success(`Willkommen zurück, ${_appState.user.name}!`);
 
         // Push-Benachrichtigungen anbieten wenn noch nicht entschieden
@@ -721,8 +829,8 @@ window.Page_settings = (() => {
         _appState.dogs      = [];
         _appState.activeDog = null;
 
+        document.getElementById('header-login-btn')?.remove();
         UI.toast.success(`Willkommen bei Ban Yaro, ${_appState.user.name}!`);
-        // Onboarding-Modal direkt zeigen (SPA — kein Reload)
         App.showOnboarding();
       });
     });