Feature: Dark-Mode Overlay auf Welten-Panorama (rgba 0,0,0,0.45), SW by-v1033

This commit is contained in:
rene 2026-05-16 13:01:33 +02:00
parent a1c4d2ab2b
commit a65e5a2723
4 changed files with 22 additions and 5 deletions

View file

@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.")
return _media_response(filepath)
APP_VER = "1032" # muss mit APP_VER in app.js übereinstimmen
APP_VER = "1033" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json")
async def assetlinks():

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1032'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1033'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen

View file

@ -982,6 +982,19 @@ window.Worlds = (() => {
let _bgUrl = null; // aktuell gesetztes Hintergrundbild
function _isDarkMode() {
const t = document.documentElement.getAttribute('data-theme');
if (t === 'dark') return true;
if (t === 'light') return false;
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
function _bgWithOverlay(url) {
return _isDarkMode()
? `linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url('${url}')`
: `url('${url}')`;
}
function _applyBgOrientation() {
const ov = document.getElementById('worlds-overlay');
const track = document.getElementById('worlds-track');
@ -990,14 +1003,14 @@ window.Worlds = (() => {
if (portrait) {
// Panorama: Bild über alle drei Welten, scrollt mit dem Swipe
ov.style.backgroundImage = '';
track.style.backgroundImage = `url('${_bgUrl}')`;
track.style.backgroundImage = _bgWithOverlay(_bgUrl);
track.style.backgroundSize = 'cover';
track.style.backgroundPosition = 'center 40%';
track.style.backgroundRepeat = 'no-repeat';
} else {
// Vollbild pro Welt (Landscape / Desktop)
track.style.backgroundImage = '';
ov.style.backgroundImage = `url('${_bgUrl}')`;
ov.style.backgroundImage = _bgWithOverlay(_bgUrl);
ov.style.backgroundSize = 'cover';
ov.style.backgroundPosition = 'center 40%';
ov.style.backgroundRepeat = 'no-repeat';
@ -1007,6 +1020,10 @@ window.Worlds = (() => {
// Orientierungswechsel → Bild neu setzen
window.matchMedia('(orientation: portrait)').addEventListener('change', _applyBgOrientation);
// Theme-Wechsel → Overlay-Intensität anpassen
new MutationObserver(_applyBgOrientation)
.observe(document.documentElement, { attributeFilter: ['data-theme'] });
function _applyBgImage(url) {
const ov = document.getElementById('worlds-overlay');
const track = document.getElementById('worlds-track');

View file

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