Welten: adaptive Abdunklung getrennt für oben (Banner+JETZT-Chips) und unten (Feature-Chips) — obere/untere Bildhälfte separat gemessen, SW v1131

2026-05-29 09:31:32 +02:00 · 2026-05-29 09:31:32 +02:00 · cad34711b7
commit cad34711b7
parent ac5b26f767
7 changed files with 57 additions and 43 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-1130
+1131
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@ -8179,7 +8179,7 @@ svg.empty-state-icon {

 /* Frosted-Glass Info-Card (oben in jeder Welt) */
 .world-info-card {
-  background: rgba(0, 0, 0, var(--wbg-dim, 0.38));
+  background: rgba(0, 0, 0, var(--wbg-dim-top, 0.38));
  backdrop-filter: blur(var(--wbg-blur, 18px)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--wbg-blur, 18px)) saturate(1.6);
  border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
@ -8202,7 +8202,7 @@ svg.empty-state-icon {

 /* Frosted-Glass Reminder-Card (für Streak, Alerts) */
 .world-reminder {
-  background: rgba(0, 0, 0, var(--wbg-dim, 0.32));
+  background: rgba(0, 0, 0, var(--wbg-dim-top, 0.32));
  backdrop-filter: blur(var(--wbg-blur, 12px));
  -webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
  border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
@ -8242,7 +8242,7 @@ svg.empty-state-icon {

 /* Einzelner Chip: Frosted Glass */
 .world-chip {
-  background: rgba(0, 0, 0, var(--wbg-dim, 0.35));
+  background: rgba(0, 0, 0, var(--wbg-dim-bottom, 0.35));
  backdrop-filter: blur(var(--wbg-blur, 12px));
  -webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
  border-radius: 16px;
@ -8278,8 +8278,10 @@ svg.empty-state-icon {
  -webkit-box-orient: vertical;
 }

-/* Chip/Banner-Abdunklung + Blur: einheitlich auf allen drei Welten (reduziert) */
-.world-panel { --wbg-dim: 0.14; --wbg-blur: 3px; }
+/* Chip/Banner-Abdunklung + Blur. --wbg-dim-top/-bottom werden in worlds.js
+   adaptiv je nach Bildhelligkeit der oberen/unteren Bildhälfte gesetzt;
+   hier nur die Fallback-Defaults (falls JS nicht misst). */
+.world-panel { --wbg-dim-top: 0.14; --wbg-dim-bottom: 0.14; --wbg-blur: 3px; }

 /* Rahmenfarbe je Welt (Alpha einheitlich 0.55) — gilt für Chips + Banner oben
   Gedämpfte Erdtöne: JETZT orange, HUND naturgrün, WELT blaugrau */
@ -8306,7 +8308,7 @@ svg.empty-state-icon {
 .wj-chip {
  flex: 1;
  min-width: 0;
-  background: rgba(0, 0, 0, var(--wbg-dim, 0.32));
+  background: rgba(0, 0, 0, var(--wbg-dim-top, 0.32));
  backdrop-filter: blur(var(--wbg-blur, 12px));
  -webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
  border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
--- a/backend/static/index.html
+++ b/backend/static/index.html
@ -86,14 +86,14 @@
  <title>Ban Yaro</title>

  <!-- Theme + theme-color Statusleiste vor CSS setzen -->
-  <script src="/js/boot-early.js?v=1130"></script>
+  <script src="/js/boot-early.js?v=1131"></script>

  <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
-  <link rel="stylesheet" href="/css/design-system.css?v=1130">
-  <link rel="stylesheet" href="/css/layout.css?v=1130">
-  <link rel="stylesheet" href="/css/components.css?v=1130">
-  <link rel="stylesheet" href="/css/utilities.css?v=1130">
-  <link rel="stylesheet" href="/css/lists.css?v=1130">
+  <link rel="stylesheet" href="/css/design-system.css?v=1131">
+  <link rel="stylesheet" href="/css/layout.css?v=1131">
+  <link rel="stylesheet" href="/css/components.css?v=1131">
+  <link rel="stylesheet" href="/css/utilities.css?v=1131">
+  <link rel="stylesheet" href="/css/lists.css?v=1131">
 </head>
 <body>

@ -617,11 +617,11 @@
 <div id="modal-container"></div>

 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=1130"></script>
-<script src="/js/ui.js?v=1130"></script>
-<script src="/js/app.js?v=1130"></script>
-<script src="/js/worlds.js?v=1130"></script>
-<script src="/js/offline-indicator.js?v=1130"></script>
+<script src="/js/api.js?v=1131"></script>
+<script src="/js/ui.js?v=1131"></script>
+<script src="/js/app.js?v=1131"></script>
+<script src="/js/worlds.js?v=1131"></script>
+<script src="/js/offline-indicator.js?v=1131"></script>

 <!-- Feature-Seiten werden lazy geladen -->

@ -631,7 +631,7 @@


 <!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
-<script src="/js/boot.js?v=1130"></script>
+<script src="/js/boot.js?v=1131"></script>


 </body>
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@ -3,7 +3,7 @@
   Router, State-Management, Navigation, Initialisierung.
   ============================================================ */

-const APP_VER     = '1130'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1131'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 window.APP_VER     = APP_VER;       // global verfügbar für andere Module (z.B. offline-indicator)
 window.APP_VERSION = APP_VERSION;
--- a/backend/static/js/worlds.js
+++ b/backend/static/js/worlds.js
@ -981,7 +981,7 @@ window.Worlds = (() => {
  }

  let _bgUrl = null; // aktuell gesetztes Hintergrundbild
-  let _bgBrightness = null; // gemessene Roh-Helligkeit des Bildes (0–255) für adaptive Abdunklung
+  let _bgBrightness = null; // { top, bottom } Roh-Helligkeit (0–255) je Bildhälfte für adaptive Abdunklung

  function _isDarkMode() {
    const t = document.documentElement.getAttribute('data-theme');
@ -1025,37 +1025,49 @@ window.Worlds = (() => {
  new MutationObserver(() => { _applyBgOrientation(); _applyAdaptiveDim(); })
    .observe(document.documentElement, { attributeFilter: ['data-theme'] });

-  // Durchschnittliche Helligkeit (0–255) eines geladenen Bildes via Mini-Canvas.
+  // Helligkeit (0–255) der oberen und unteren Bildhälfte via Mini-Canvas.
+  // Oben = Begrüßungs-Banner + JETZT-Chip-Reihe, unten = Feature-Chips.
  // Gibt null zurück bei CORS-Tainting oder Fehler (→ Fallback-Abdunklung).
-  function _measureBrightness(img) {
+  function _measureBrightnessRegions(img) {
    try {
      const c = document.createElement('canvas');
      const w = c.width = 32, h = c.height = 32;
      const ctx = c.getContext('2d', { willReadFrequently: true });
      ctx.drawImage(img, 0, 0, w, h);
      const data = ctx.getImageData(0, 0, w, h).data;
-      let sum = 0;
-      for (let i = 0; i < data.length; i += 4) {
-        sum += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+      const half = h / 2;
+      let sumTop = 0, sumBot = 0, nTop = 0, nBot = 0;
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const i = (y * w + x) * 4;
+          const lum = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+          if (y < half) { sumTop += lum; nTop++; } else { sumBot += lum; nBot++; }
+        }
      }
-      return sum / (data.length / 4);
+      return { top: sumTop / nTop, bottom: sumBot / nBot };
    } catch { return null; }
  }

-  // Setzt --wbg-dim adaptiv: helles Bild → mehr Abdunklung (Lesbarkeit),
-  // dunkles Bild → wenig. Im Dark Mode liegt zusätzlich ein 0.45-Overlay
-  // über dem Bild, daher wirkt es dort dunkler (effektive Helligkeit ↓).
+  // Helligkeit (0–255) → Abdunklungs-Alpha. Im Dark Mode liegt zusätzlich
+  // ein 0.45-Overlay über dem Bild, daher wirkt es dort dunkler.
+  function _dimForBrightness(b) {
+    if (_isDarkMode()) b *= 0.55;
+    if (b <= 90)  return 0.14;
+    if (b >= 190) return 0.48;
+    return 0.14 + (b - 90) / 100 * (0.48 - 0.14);
+  }
+
+  // Setzt --wbg-dim-top/-bottom adaptiv pro Bildbereich: heller Bereich →
+  // mehr Abdunklung (Lesbarkeit), dunkler → wenig.
  function _applyAdaptiveDim() {
-    let b = _bgBrightness;
-    if (b == null) b = 110; // neutraler Default wenn Messung fehlschlug
-    if (_isDarkMode()) b *= 0.55; // 0.45-Bild-Overlay reduziert sichtbare Helligkeit
-    let dim;
-    if (b <= 90)       dim = 0.14;
-    else if (b >= 190) dim = 0.48;
-    else               dim = 0.14 + (b - 90) / 100 * (0.48 - 0.14);
-    const val = dim.toFixed(2);
+    const r = _bgBrightness || { top: 110, bottom: 110 };
+    const dimTop = _dimForBrightness(r.top).toFixed(2);
+    const dimBot = _dimForBrightness(r.bottom).toFixed(2);
    ['wp-jetzt', 'wp-hund', 'wp-welt'].forEach(id => {
-      document.getElementById(id)?.style.setProperty('--wbg-dim', val);
+      const el = document.getElementById(id);
+      if (!el) return;
+      el.style.setProperty('--wbg-dim-top', dimTop);
+      el.style.setProperty('--wbg-dim-bottom', dimBot);
    });
  }

@ -1068,7 +1080,7 @@ window.Worlds = (() => {
      toLoad.onload = () => {
        _hasBgPhoto = true;
        _bgUrl = url;
-        _bgBrightness = _measureBrightness(toLoad);
+        _bgBrightness = _measureBrightnessRegions(toLoad);
        _applyAdaptiveDim();
        _applyBgOrientation();
        const hint = document.getElementById('wh-photo-hint');
@ -1091,7 +1103,7 @@ window.Worlds = (() => {
    } else {
      _hasBgPhoto = false;
      _bgUrl = null;
-      _bgBrightness = 20; // dunkler Fallback-Gradient → minimale Abdunklung
+      _bgBrightness = { top: 20, bottom: 20 }; // dunkler Fallback-Gradient → minimale Abdunklung
      _applyAdaptiveDim();
      track.style.backgroundImage    = '';
      ov.style.backgroundImage = 'linear-gradient(160deg,#1a1f35 0%,#16213e 33%,#1a2535 67%,#0f1921 100%)';
--- a/backend/static/landing.html
+++ b/backend/static/landing.html
@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
-  <script src="/js/landing-init.js?v=1130"></script>
+  <script src="/js/landing-init.js?v=1131"></script>
  <title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
  <meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
  <meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@ -4,7 +4,7 @@
   ============================================================ */

 // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
-const VER           = '1130';
+const VER           = '1131';
 const CACHE_VERSION = `by-v${VER}`;
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten