From 4da20880747fab52aeeb4c1376703f060b7049d8 Mon Sep 17 00:00:00 2001 From: rene Date: Sun, 3 May 2026 10:31:21 +0200 Subject: [PATCH] =?UTF-8?q?Feature:=20Welten=20=E2=80=94=20Profil-Chip=20e?= =?UTF-8?q?ntfernt,=20Footer-Links=20(Impressum/Die100/Datenschutz),=20SW?= =?UTF-8?q?=20by-v642?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/css/components.css | 299 ++++++++++++++++++++++++++++++ backend/static/index.html | 4 +- backend/static/js/app.js | 2 +- backend/static/js/worlds.js | 11 +- backend/static/sw.js | 2 +- 5 files changed, 313 insertions(+), 5 deletions(-) diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 9e16ea7..1d2190b 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -7516,3 +7516,302 @@ svg.empty-state-icon { background: var(--c-primary); border-color: var(--c-primary); } + +/* ================================================================ + DREI WELTEN NAVIGATION — JETZT | HUND | WELT + ================================================================ */ + +/* Overlay */ +#worlds-overlay { + position: fixed; + inset: 0; + z-index: 50; + overflow: hidden; + background: var(--c-bg); + display: none; + opacity: 0; + transition: opacity 0.2s; +} +#worlds-overlay.worlds-visible { opacity: 1; } + +/* Track */ +#worlds-track { + display: flex; + width: 300%; + height: 100%; + will-change: transform; + transform: translateX(-33.333%); +} +.world-panel { + width: 33.333%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + overscroll-behavior-y: contain; +} +#wp-welt { overflow: hidden; position: relative; } + +/* Navigation-Punkte */ +#world-dots { + position: fixed; + top: calc(env(safe-area-inset-top, 0px) + 14px); + left: 0; right: 0; + display: flex; + justify-content: center; + gap: 5px; + z-index: 60; + pointer-events: none; +} +.wdot { + width: 6px; height: 6px; + border-radius: 50%; + background: var(--c-text); + opacity: 0.2; + transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); + cursor: pointer; +} +.wdot.active { + width: 22px; + border-radius: 3px; + opacity: 1; + background: var(--c-primary); +} + +/* Welt-Labels */ +#world-labels { + position: fixed; + top: calc(env(safe-area-inset-top, 0px) + 28px); + left: 0; right: 0; + display: flex; + justify-content: center; + gap: 28px; + z-index: 59; + pointer-events: none; +} +.wlabel { + font-size: 9px; + font-weight: 800; + letter-spacing: 0.12em; + color: var(--c-text-secondary); + opacity: 0.4; + text-transform: uppercase; +} + +/* Settings-Button */ +#worlds-settings { + position: fixed; + top: calc(env(safe-area-inset-top, 0px) + 6px); + right: 10px; + width: 38px; height: 38px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 61; + color: var(--c-text-secondary); + border: none; + background: none; + border-radius: 50%; +} + +/* FAB */ +#worlds-fab { + position: fixed; + bottom: calc(env(safe-area-inset-bottom, 16px) + 16px); + right: 20px; + width: 54px; height: 54px; + border-radius: 50%; + background: var(--c-primary); + color: white; + border: none; + cursor: pointer; + z-index: 60; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 20px rgba(196,132,58,0.45); + transition: transform 0.12s, box-shadow 0.12s; +} +#worlds-fab:active { transform: scale(0.92); box-shadow: 0 2px 10px rgba(196,132,58,0.3); } + +/* Back-Button */ +#worlds-back { + position: fixed; + top: 0; left: 0; right: 0; + height: calc(env(safe-area-inset-top, 0px) + 44px); + padding-top: env(safe-area-inset-top, 0px); + display: none; + align-items: center; + gap: 8px; + padding-left: 16px; + background: var(--c-bg); + border-bottom: 1px solid var(--c-border); + z-index: 200; + cursor: pointer; + color: var(--c-primary); + font-weight: 600; + font-size: var(--text-sm); +} +#worlds-back.worlds-back-visible { display: flex; } + +/* Hide existing header + bottom-nav when worlds are active */ +.worlds-hidden { display: none !important; } + +/* ── JETZT WORLD ─────────────────────────────────────────── */ + +/* ═══════════════════════════════════════════════════════════════ + DREI WELTEN — PANORAMA-BILD + FROSTED GLASS CHIPS + ═══════════════════════════════════════════════════════════════ */ + +/* Bild auf dem Track: alle 3 Panels teilen dasselbe Panorama */ +#worlds-track { + background-size: 100% auto; + background-position: 0 40%; + background-repeat: no-repeat; +} + +/* World Panel: dunkles Overlay über dem Hintergrundbild */ +.world-panel { + background: rgba(0, 0, 0, 0.44); + display: flex; + flex-direction: column; + justify-content: space-between; /* Info oben, Chips unten */ + padding: calc(env(safe-area-inset-top, 0px) + 58px) 14px + calc(env(safe-area-inset-bottom, 0px) + 88px); + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + overscroll-behavior-y: contain; +} + +/* Content-Divs füllen den Panel und verteilen Top/Bottom */ +#wj-content, #wh-content, #ww-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100%; +} + +/* Oberer Bereich: Info + Reminders */ +.world-top { display: flex; flex-direction: column; gap: 10px; } + +/* Unterer Bereich: Chips (Daumen-Zone) */ +.world-bottom { display: flex; flex-direction: column; gap: 8px; } + +/* Frosted-Glass Info-Card (oben in jeder Welt) */ +.world-info-card { + background: rgba(0, 0, 0, 0.38); + backdrop-filter: blur(18px) saturate(1.6); + -webkit-backdrop-filter: blur(18px) saturate(1.6); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 20px; + padding: 16px 18px; + color: white; + flex-shrink: 0; +} +.world-info-title { + font-size: var(--text-xl); + font-weight: 800; + line-height: 1.1; + color: white; +} +.world-info-sub { + font-size: var(--text-xs); + color: rgba(255, 255, 255, 0.65); + margin-top: 4px; +} + +/* Frosted-Glass Reminder-Card (für Streak, Alerts) */ +.world-reminder { + background: rgba(0, 0, 0, 0.32); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 16px; + padding: 12px 16px; + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + color: white; + flex-shrink: 0; +} +.world-reminder:active { background: rgba(0,0,0,0.55); } + +/* Chip-Grid: GLEICH auf allen drei Welten */ +.world-chips-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 80px; /* alle Chips gleich hoch */ + gap: 8px; + margin-top: auto; +} + +/* Einzelner Chip: Frosted Glass */ +.world-chip { + background: rgba(0, 0, 0, 0.35); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 16px; + padding: 14px 6px 11px; + text-align: center; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + gap: 7px; + color: white; + transition: background 0.12s, transform 0.1s; + -webkit-tap-highlight-color: transparent; + user-select: none; +} +.world-chip:active { + background: rgba(0, 0, 0, 0.6); + transform: scale(0.93); +} +.world-chip svg { color: white; } +.world-chip-label { + font-size: 10px; + font-weight: 600; + color: rgba(255, 255, 255, 0.9); + line-height: 1.2; +} + +/* Chip-Umrandung je Welt */ +#wp-jetzt .world-chip { border: 1px solid rgba(196, 132, 58, 0.55); } +#wp-hund .world-chip { border: 1px solid rgba(196, 132, 58, 0.65); } +#wp-welt .world-chip { border: 1px solid rgba(99, 130, 220, 0.55); } + +/* Sektion-Label über Chip-Gruppen */ +.world-section-label { + font-size: 9px; + font-weight: 800; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.45); + padding: 4px 2px 0; +} + +/* Footer-Links (Impressum / Die 100 / Datenschutz) */ +.world-footer-links { + text-align: center; + padding: 10px 0 2px; +} +.world-footer-links span { + font-size: 10px; + color: rgba(255, 255, 255, 0.35); + cursor: pointer; + letter-spacing: 0.04em; + transition: color 0.15s; +} +.world-footer-links span:hover, +.world-footer-links span:active { + color: rgba(255, 255, 255, 0.65); +} + +/* ── KEYFRAMES ───────────────────────────────────────────── */ +@keyframes pulse { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 0.25; } +} diff --git a/backend/static/index.html b/backend/static/index.html index 0cc63ca..5917bde 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -95,7 +95,7 @@ - + @@ -566,7 +566,7 @@ - + diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 5ae66ae..683e098 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '641'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '642'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VERSION = '1.2.1'; // ← semantische Version, wird bei make release gesetzt const IS_STAGING = location.hostname === 'staging.banyaro.app'; diff --git a/backend/static/js/worlds.js b/backend/static/js/worlds.js index 3b96a26..154289f 100644 --- a/backend/static/js/worlds.js +++ b/backend/static/js/worlds.js @@ -253,7 +253,7 @@ window.Worlds = (() => { { icon:'handshake', label:'Playdate', page:'playdate' }, { icon:'chat-circle-dots', label:'Nachrichten', page:'chat' }, { icon:'sun', label:'Wetter', page:'wetter' }, - { icon:'gear', label:'Profil', page:'settings', pinned:true }, + { icon:'book-open', label:'Tagebuch', page:'diary' }, { icon:'heartbeat', label:'Gesundheit', page:'health' }, { icon:'target', label:'Übungen', page:'uebungen' }, @@ -723,6 +723,9 @@ window.Worlds = (() => {
${features.map(f => _chip(f.icon, f.label, f.page)).join('')}
+
+ Impressum +
`; el.querySelectorAll('[data-wnav]').forEach(e => e.addEventListener('click', () => navigateTo(e.dataset.wnav))); @@ -830,6 +833,9 @@ window.Worlds = (() => {
${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
+
+ Die 100 Gründer +
`; @@ -921,6 +927,9 @@ window.Worlds = (() => {
${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
+
+ Datenschutz +
`; el.querySelectorAll('[data-wnav]').forEach(e => e.addEventListener('click', () => navigateTo(e.dataset.wnav))); diff --git a/backend/static/sw.js b/backend/static/sw.js index 030a8be..c6a9de3 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v641'; +const CACHE_VERSION = 'by-v642'; 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