UX: Hero-Rotation mit 9 Themen, Kacheln einklappbar — SW by-v445, APP_VER 424
- 9 rotierende Hero-Slides (alle 4s, Fade + Dot-Indikatoren) - Themen: Tagebuch, Karte, Gesundheit+KI, Giftköder, PWA-Erklärung, Routen, Gassi-Treffen, Training, Forum - "Und noch mehr"-Kacheln standardmäßig eingeklappt (Toggle)
This commit is contained in:
parent
f3742ed7a9
commit
86d1642fba
3 changed files with 99 additions and 16 deletions
|
|
@ -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 = (() => {
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = (() => {
|
|||
<!-- ── Hero ─────────────────────────────────────────── -->
|
||||
<div class="wc-lhero">
|
||||
<img src="/icons/icon-180.png" alt="Ban Yaro" class="wc-lhero-icon">
|
||||
<h1 class="wc-lhero-headline">Alles für<br>deinen Hund.</h1>
|
||||
<p class="wc-lhero-sub">
|
||||
Tagebuch, Gesundheit, Karte, Community —<br>
|
||||
auf einem Server in Deutschland. Kostenlos.
|
||||
</p>
|
||||
<h1 class="wc-lhero-headline" id="wc-hero-headline">${HERO_SLIDES[0].headline}</h1>
|
||||
<p class="wc-lhero-sub" id="wc-hero-sub">${HERO_SLIDES[0].sub}</p>
|
||||
<div class="wc-hero-dots" id="wc-hero-dots">
|
||||
${HERO_SLIDES.map((_, i) => `<span class="wc-hero-dot${i === 0 ? ' wc-hero-dot--active' : ''}"></span>`).join('')}
|
||||
</div>
|
||||
|
||||
<div class="wc-lhero-cta">
|
||||
${hasPrompt ? `
|
||||
|
|
@ -174,10 +192,13 @@ window.Page_welcome = (() => {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Und noch mehr ─────────────────────────────────── -->
|
||||
<!-- ── Und noch mehr (einklappbar) ─────────────────────── -->
|
||||
<div class="wc-more">
|
||||
<p class="wc-more-label">Und noch viel mehr</p>
|
||||
<div class="wc-grid">
|
||||
<button class="wc-more-toggle" id="wc-more-toggle" aria-expanded="false">
|
||||
<span>Und noch viel mehr</span>
|
||||
<svg class="ph-icon wc-more-chevron" aria-hidden="true"><use href="/icons/phosphor.svg#caret-down"></use></svg>
|
||||
</button>
|
||||
<div class="wc-grid wc-grid--collapsed" id="wc-more-grid">
|
||||
${FEATURES.map(f => `
|
||||
<div class="wc-tile wc-tile--static">
|
||||
<div class="wc-tile-icon">
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue