diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 2f96495..702f5ac 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 = '423'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '424'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const App = (() => { diff --git a/backend/static/js/pages/welcome.js b/backend/static/js/pages/welcome.js index 53f744a..36d74f7 100644 --- a/backend/static/js/pages/welcome.js +++ b/backend/static/js/pages/welcome.js @@ -4,9 +4,25 @@ window.Page_welcome = (() => { - let _container = null; - let _appState = null; + let _container = null; + let _appState = null; let _showInstall = false; + let _heroInterval = null; + + // ---------------------------------------------------------- + // HERO-SLIDES — rotieren alle 4 Sekunden + // ---------------------------------------------------------- + const HERO_SLIDES = [ + { headline: 'Jeder Moment zählt.', sub: 'Fotos, Notizen, Stimmungen — das Tagebuch deines Hundes.' }, + { headline: 'Deine Gegend. Sein Revier.', sub: 'Hundeparks, Gassi-Spots und mehr — alles auf der Karte.' }, + { headline: 'Kein Termin verpasst.', sub: 'Impfungen, Gewicht, Tierarzt — mit KI, individuell auf deinen Hund angepasst.' }, + { headline: 'Wir achten auf deinen Hund.', sub: 'Gefahren in deiner Nähe — damit ihr gezielt aus dem Weg gehen könnt.' }, + { headline: 'Wie eine App. Nur ohne App Store.', sub: 'Einmal auf „Zum Homescreen" — fertig. Kein Store, keine Updates, kein Stress.' }, + { headline: 'Lieblingsrouten für immer.', sub: 'Speichere eure besten Strecken — und entdecke neue in der Nähe.' }, + { headline: 'Gassi ist kein Solosport.', sub: 'Triff andere Hundebesitzer — spontan, in deiner Umgebung.' }, + { headline: '100+ Übungen. Ein Trainer, der deinen Hund kennt.', sub: 'Schritt für Schritt — mit KI, die sich an euch anpasst.' }, + { headline: 'Frag nach. Du bist nicht allein.', sub: 'Erfahrungen, Tipps, Hilfe — von Hundebesitzern für Hundebesitzer.' }, + ]; async function init(container, appState, params = {}) { _container = container; @@ -49,6 +65,8 @@ window.Page_welcome = (() => { // RENDER // ---------------------------------------------------------- function _render() { + if (_heroInterval) { clearInterval(_heroInterval); _heroInterval = null; } + const isInstalled = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true; const user = _appState?.user; @@ -77,11 +95,11 @@ window.Page_welcome = (() => {
Ban Yaro -

Alles für
deinen Hund.

-

- Tagebuch, Gesundheit, Karte, Community —
- auf einem Server in Deutschland. Kostenlos. -

+

${HERO_SLIDES[0].headline}

+

${HERO_SLIDES[0].sub}

+
+ ${HERO_SLIDES.map((_, i) => ``).join('')} +
${hasPrompt ? ` @@ -174,10 +192,13 @@ window.Page_welcome = (() => {

- +
-

Und noch viel mehr

-
+ +
${FEATURES.map(f => `
@@ -313,11 +334,26 @@ window.Page_welcome = (() => { text-shadow: 0 2px 12px rgba(0,0,0,0.15); letter-spacing: -0.02em; position: relative; + transition: opacity 0.4s ease; } .wc-lhero-sub { font-size: var(--text-base); color: rgba(255,255,255,0.88); - line-height: 1.6; margin: 0 0 var(--space-6); + line-height: 1.6; margin: 0 0 var(--space-3); position: relative; + transition: opacity 0.4s ease; + } + .wc-hero-dots { + display: flex; justify-content: center; gap: 6px; + margin-bottom: var(--space-6); position: relative; + } + .wc-hero-dot { + width: 6px; height: 6px; border-radius: 50%; + background: rgba(255,255,255,0.35); + transition: background 0.3s, transform 0.3s; + } + .wc-hero-dot--active { + background: rgba(255,255,255,0.9); + transform: scale(1.3); } .wc-lhero-cta { display: flex; flex-direction: column; @@ -402,15 +438,24 @@ window.Page_welcome = (() => { /* Und noch mehr */ .wc-more { - padding: var(--space-6) var(--space-4); + padding: var(--space-4) var(--space-4); background: var(--c-bg); border-top: 1px solid var(--c-border-light); } - .wc-more-label { + .wc-more-toggle { + display: flex; align-items: center; justify-content: center; + gap: var(--space-2); width: 100%; + background: none; border: none; cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--c-text-secondary); text-transform: uppercase; - letter-spacing: 0.07em; margin: 0 0 var(--space-4); text-align: center; + letter-spacing: 0.07em; padding: var(--space-2) 0; + margin-bottom: var(--space-3); } + .wc-more-chevron { + width: 14px; height: 14px; + transition: transform 0.25s ease; + } + .wc-grid--collapsed { display: none; } /* Bottom CTA */ .wc-bottom-cta { @@ -520,6 +565,31 @@ window.Page_welcome = (() => { document.head.appendChild(s); } + // ---------------------------------------------------------- + // HERO-ROTATION + // ---------------------------------------------------------- + function _startHeroRotation() { + let idx = 0; + const headline = _container.querySelector('#wc-hero-headline'); + const sub = _container.querySelector('#wc-hero-sub'); + const dots = _container.querySelectorAll('.wc-hero-dot'); + if (!headline || !sub) return; + + _heroInterval = setInterval(() => { + headline.style.opacity = '0'; + sub.style.opacity = '0'; + + setTimeout(() => { + idx = (idx + 1) % HERO_SLIDES.length; + headline.textContent = HERO_SLIDES[idx].headline; + sub.textContent = HERO_SLIDES[idx].sub; + headline.style.opacity = '1'; + sub.style.opacity = '1'; + dots.forEach((d, i) => d.classList.toggle('wc-hero-dot--active', i === idx)); + }, 400); + }, 4000); + } + // ---------------------------------------------------------- // INSTALLATIONS-ANLEITUNG // ---------------------------------------------------------- @@ -682,10 +752,23 @@ window.Page_welcome = (() => { _container.querySelector('#inst-tab-android').style.cssText = 'flex:1'; }); + // "Und noch mehr"-Toggle + const moreToggle = _container.querySelector('#wc-more-toggle'); + const moreGrid = _container.querySelector('#wc-more-grid'); + moreToggle?.addEventListener('click', () => { + const open = moreToggle.getAttribute('aria-expanded') === 'true'; + moreToggle.setAttribute('aria-expanded', String(!open)); + moreGrid.classList.toggle('wc-grid--collapsed', open); + moreToggle.querySelector('.wc-more-chevron').style.transform = open ? '' : 'rotate(180deg)'; + }); + // Feature-Tiles (nur eingeloggte Ansicht) _container.querySelectorAll('[data-nav]').forEach(btn => { btn.addEventListener('click', () => App.navigate(btn.dataset.nav)); }); + + // Hero-Rotation starten (nur Landing) + if (!_appState?.user) _startHeroRotation(); } function _pulseMenuBtn() { diff --git a/backend/static/sw.js b/backend/static/sw.js index 8f003c6..cf34bc0 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-v444'; +const CACHE_VERSION = 'by-v445'; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten