/* ============================================================ BAN YARO — Willkommensseite Über die App, Features, Installations-Anleitung. ============================================================ */ window.Page_welcome = (() => { let _container = null; let _appState = null; // ---------------------------------------------------------- // INIT // ---------------------------------------------------------- async function init(container, appState) { _container = container; _appState = appState; _render(); } function refresh() { _render(); } function onDogChange() {} // ---------------------------------------------------------- // RENDER // ---------------------------------------------------------- function _render() { const isInstalled = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true; _container.innerHTML = `
Ban Yaro

Ban Yaro

Die Plattform für Hundebesitzer —
Tagebuch, Gesundheit, Community und mehr.

${_featureCard('Mein Hund', [ ['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten', 'diary'], ['first-aid', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente', 'health'], ['target', 'Übungen', 'Trainingsübungen mit KI-Unterstützung', 'uebungen'], ['clipboard-text', 'Trainingspläne', 'Strukturierte Pläne für jedes Lernziel', 'trainingsplaene'], ])} ${_featureCard('Entdecken', [ ['map-trifold', 'Karte', 'Orte, Routen und Meldungen in der Nähe', 'map'], ['path', 'Routen', 'GPS-Routen aufzeichnen und bewerten', 'routes'], ['calendar-dots', 'Events', 'Turniere und Veranstaltungen', 'events'], ])} ${_featureCard('Soziales', [ ['users', 'Freunde', 'Verbinde dich mit anderen Hundebesitzern', 'friends'], ['chat-circle-dots', 'Nachrichten', 'Private Chats mit deinen Freunden', 'chat'], ['bell', 'Aktuelles', 'Benachrichtigungen und Neuigkeiten', 'notifications'], ])} ${_featureCard('Community', [ ['warning-octagon', 'Giftköder-Alarm', 'Warnungen sofort melden und empfangen', 'poison'], ['paw-print', 'Gassi-Treffen', 'Hunde-Dates mit anderen Besitzern', 'walks'], ['house-line', 'Sitting', 'Sitter finden oder selbst anbieten', 'sitting'], ['push-pin', 'Forum', 'Diskussionen, Tipps und Austausch', 'forum'], ['magnifying-glass', 'Verlorene Hunde', 'Hilf vermisste Hunde zu finden', 'lost'], ])} ${_featureCard('Wissen', [ ['books', 'Wiki', 'Rassendatenbank, Gesundheits-Wiki, Quiz', 'wiki'], ['handshake', 'Knigge', 'Regeln, Begegnungen, Leinenpflicht', 'knigge'], ['film-slate', 'Filme', 'Stirbt der Hund? Die wichtigste Frage', 'movies'], ['first-aid', 'Erste Hilfe','Notfallratgeber für häufige Situationen', 'erste-hilfe'], ])}
App installieren
${isInstalled ? `
Ban Yaro ist bereits installiert.
` : _installHTML() }
${!_appState.user ? `
` : ''}

Ban Yaro · Deine Daten auf eigenem Server in Deutschland.

`; _bindEvents(); } // ---------------------------------------------------------- // INSTALLATIONS-ANLEITUNG (plattformabhängig) // ---------------------------------------------------------- function _installHTML() { const ua = navigator.userAgent; const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream; const isSafari = /^((?!chrome|android).)*safari/i.test(ua); const isAndroid = /android/i.test(ua); const hasPrompt = !!App.getInstallPrompt(); // Android/Chrome mit nativem Prompt if ((isAndroid || hasPrompt) && hasPrompt) { return `

Installiere Ban Yaro direkt auf deinem Gerät — kein App Store nötig. Die App verhält sich wie eine native App und funktioniert auch offline.

`; } // iOS Safari if (isIOS && isSafari) { return `

Installiere Ban Yaro auf deinem iPhone oder iPad:

${_steps([ ['share', 'Tippe auf das Teilen-Symbol in Safari (Rechteck mit Pfeil nach oben)'], ['plus', 'Scrolle nach unten und tippe auf „Zum Home-Bildschirm"'], ['check', 'Tippe rechts oben auf „Hinzufügen" — fertig!'], ])}

Funktioniert nur in Safari, nicht in anderen Browsern auf iOS.

`; } // Desktop oder andere Browser return `

Ban Yaro lässt sich in Chrome, Edge und anderen modernen Browsern installieren:

${_steps([ ['globe', 'Öffne Ban Yaro in Chrome oder Edge'], ['download-simple','Klicke in der Adressleiste auf das Installieren-Symbol (↓ mit Kreis)'], ['check', 'Bestätige die Installation — Ban Yaro öffnet sich dann wie eine Desktop-App'], ])}

Auf Android: Menü (⋮) → „App installieren" oder „Zum Startbildschirm hinzufügen".

`; } function _featureCard(heading, items) { return `
${heading}
${items.map(([icon, title, desc, page], i) => ` `).join('')}
`; } function _steps(list) { return `
    ${list.map(([icon, text], i) => `
  1. ${i + 1}
    ${text}
    2. `).join('')}
`; } // ---------------------------------------------------------- // EVENTS // ---------------------------------------------------------- function _bindEvents() { // Android-Install-Button _container.querySelector('#install-android-btn')?.addEventListener('click', async () => { const prompt = App.getInstallPrompt(); if (!prompt) return; prompt.prompt(); const { outcome } = await prompt.userChoice; if (outcome === 'accepted') { UI.toast.success('Ban Yaro wird installiert!'); _render(); // zeigt "bereits installiert" } }); // CTAs für nicht-eingeloggte User _container.querySelector('#welcome-register-btn')?.addEventListener('click', () => { App.navigate('settings'); }); _container.querySelector('#welcome-login-btn')?.addEventListener('click', () => { App.navigate('settings'); }); // Feature-Kacheln → navigieren _container.querySelectorAll('[data-nav]').forEach(btn => { btn.addEventListener('click', () => App.navigate(btn.dataset.nav)); btn.addEventListener('mouseenter', () => btn.style.background = 'var(--c-surface-2)'); btn.addEventListener('mouseleave', () => btn.style.background = ''); }); // Burger-Menü-Hinweis öffnet die Sidebar _container.querySelector('#welcome-menu-hint')?.addEventListener('click', () => { document.getElementById('header-menu-btn')?.click(); }); // Hamburger-Button 3× kurz pulsieren lassen _pulseMenuBtn(); } function _pulseMenuBtn() { const btn = document.getElementById('header-menu-btn'); if (!btn) return; if (!document.getElementById('welcome-pulse-style')) { const s = document.createElement('style'); s.id = 'welcome-pulse-style'; s.textContent = ` @keyframes wc-pulse { 0%,100% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.25); box-shadow: 0 0 0 6px var(--c-primary-subtle); } } .wc-pulsing { animation: wc-pulse 0.6s ease-in-out 3; border-radius: var(--radius-md); } `; document.head.appendChild(s); } setTimeout(() => { btn.classList.add('wc-pulsing'); btn.addEventListener('animationend', () => btn.classList.remove('wc-pulsing'), { once: true }); }, 800); } // ---------------------------------------------------------- // PUBLIC // ---------------------------------------------------------- return { init, refresh, onDogChange }; })();