Welcome: Redesign — Hero-Gradient, Icon-Grid, luftiger — SW by-v411
- Hero: warmer Gradient-Hintergrund, großes Icon, CTA direkt darin - Features: 4×4 Icon-Grid (Desktop 8-spaltig) statt dense Kachel-Karten - Eingeloggte User: persönliche Begrüßung im Hero - Install: kompakte Karte am Ende - Burger-Hinweis entfernt (unnötig)
This commit is contained in:
parent
a698bec817
commit
1400033862
3 changed files with 208 additions and 233 deletions
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '390'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '391'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
|
||||
const App = (() => {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* ============================================================
|
||||
BAN YARO — Willkommensseite
|
||||
Über die App, Features, Installations-Anleitung.
|
||||
============================================================ */
|
||||
|
||||
window.Page_welcome = (() => {
|
||||
|
|
@ -8,9 +7,6 @@ window.Page_welcome = (() => {
|
|||
let _container = null;
|
||||
let _appState = null;
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INIT
|
||||
// ----------------------------------------------------------
|
||||
async function init(container, appState) {
|
||||
_container = container;
|
||||
_appState = appState;
|
||||
|
|
@ -20,144 +16,208 @@ window.Page_welcome = (() => {
|
|||
function refresh() { _render(); }
|
||||
function onDogChange() {}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// FEATURES — Icon, Titel, Beschreibung, Zielseite
|
||||
// ----------------------------------------------------------
|
||||
const FEATURES = [
|
||||
{ icon: 'book-open', label: 'Tagebuch', page: 'diary' },
|
||||
{ icon: 'first-aid', label: 'Gesundheit', page: 'health' },
|
||||
{ icon: 'map-trifold', label: 'Karte', page: 'map' },
|
||||
{ icon: 'path', label: 'Routen', page: 'routes' },
|
||||
{ icon: 'target', label: 'Training', page: 'uebungen' },
|
||||
{ icon: 'warning-octagon', label: 'Giftköder', page: 'poison' },
|
||||
{ icon: 'users', label: 'Freunde', page: 'friends' },
|
||||
{ icon: 'chat-circle-dots', label: 'Nachrichten', page: 'chat' },
|
||||
{ icon: 'paw-print', label: 'Gassi-Treffen', page: 'walks' },
|
||||
{ icon: 'house-line', label: 'Sitting', page: 'sitting' },
|
||||
{ icon: 'push-pin', label: 'Forum', page: 'forum' },
|
||||
{ icon: 'books', label: 'Rassen-Wiki', page: 'wiki' },
|
||||
{ icon: 'calendar-dots', label: 'Events', page: 'events' },
|
||||
{ icon: 'bell', label: 'Neuigkeiten', page: 'notifications' },
|
||||
{ icon: 'handshake', label: 'Knigge', page: 'knigge' },
|
||||
{ icon: 'magnifying-glass', label: 'Vermisste', page: 'lost' },
|
||||
];
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// RENDER
|
||||
// ----------------------------------------------------------
|
||||
function _render() {
|
||||
const isInstalled = window.matchMedia('(display-mode: standalone)').matches
|
||||
|| window.navigator.standalone === true;
|
||||
const user = _appState?.user;
|
||||
|
||||
_container.innerHTML = `
|
||||
<div class="welcome-layout" style="margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)">
|
||||
<div class="welcome-layout" style="margin:0 auto">
|
||||
|
||||
<!-- Hero -->
|
||||
<div style="text-align:center;margin-bottom:var(--space-8)">
|
||||
<img src="/icons/icon-180.png" alt="Ban Yaro"
|
||||
style="width:88px;height:88px;border-radius:var(--radius-xl);
|
||||
box-shadow:var(--shadow-md);margin:0 auto var(--space-4);display:block">
|
||||
<h1 style="font-size:var(--text-2xl);font-weight:var(--weight-bold);
|
||||
color:var(--c-text);margin:0 0 var(--space-2)">Ban Yaro</h1>
|
||||
<p style="font-size:var(--text-base);color:var(--c-text-secondary);
|
||||
margin:0;line-height:1.5">
|
||||
Die Plattform für Hundebesitzer —<br>Tagebuch, Gesundheit, Community und mehr.
|
||||
<!-- ── Hero ─────────────────────────────────────────── -->
|
||||
<div class="wc-hero">
|
||||
<img src="/icons/icon-180.png" alt="Ban Yaro" class="wc-hero-icon">
|
||||
<h1 class="wc-hero-title">Ban Yaro</h1>
|
||||
<p class="wc-hero-sub">
|
||||
${user
|
||||
? `Schön, dass du wieder da bist${user.name ? ', <strong>' + UI.escape(user.name) + '</strong>' : ''}! 🐾`
|
||||
: 'Die Community für Hundebesitzer — Tagebuch, Gesundheit, Karte und mehr.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Burger-Menü-Hinweis (nur Mobile, auf Desktop gibt es die Sidebar) -->
|
||||
<button id="welcome-menu-hint" class="mobile-only"
|
||||
style="display:flex;align-items:center;gap:var(--space-3);
|
||||
background:var(--c-primary-subtle);border-radius:var(--radius-md);
|
||||
padding:var(--space-3) var(--space-4);margin-bottom:var(--space-5);
|
||||
border:none;width:100%;text-align:left;cursor:pointer">
|
||||
<div id="welcome-burger-icon"
|
||||
style="width:36px;height:36px;border-radius:var(--radius-md);
|
||||
background:var(--c-primary);flex-shrink:0;
|
||||
display:flex;align-items:center;justify-content:center">
|
||||
<svg style="fill:currentColor;width:20px;height:20px;color:#fff" aria-hidden="true">
|
||||
<use href="/icons/phosphor.svg#list"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
||||
color:var(--c-primary);margin-bottom:2px">
|
||||
Alle Funktionen im Menü oben rechts
|
||||
${!user ? `
|
||||
<div class="wc-hero-cta">
|
||||
<button class="btn btn-primary" id="welcome-register-btn">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user-plus"></use></svg>
|
||||
Kostenlos registrieren
|
||||
</button>
|
||||
<button class="btn btn-ghost" id="welcome-login-btn">Anmelden</button>
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.4">
|
||||
Tippe auf das ☰-Symbol für Karte, Routen, Giftköder-Alarm, Forum und vieles mehr.
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<!-- ── Feature-Grid ──────────────────────────────────── -->
|
||||
<div class="page-container" style="padding:var(--space-6) var(--space-4)">
|
||||
|
||||
<h2 class="wc-section-title">Was Ban Yaro kann</h2>
|
||||
|
||||
<div class="wc-grid">
|
||||
${FEATURES.map(f => `
|
||||
<button class="wc-tile" data-nav="${f.page}">
|
||||
<div class="wc-tile-icon">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${f.icon}"></use></svg>
|
||||
</div>
|
||||
<span class="wc-tile-label">${f.label}</span>
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
|
||||
<!-- ── App installieren ──────────────────────────── -->
|
||||
${!isInstalled ? `
|
||||
<div class="card wc-install-card">
|
||||
<div class="wc-install-header">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
|
||||
App installieren
|
||||
</div>
|
||||
<div style="padding:var(--space-4)">
|
||||
${_installHTML()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
` : ''}
|
||||
|
||||
<!-- Feature-Abschnitte (auf Desktop 2-spaltig) -->
|
||||
<div class="welcome-sections">
|
||||
|
||||
${_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'],
|
||||
])}
|
||||
<!-- ── Footer ────────────────────────────────────── -->
|
||||
<p class="wc-footer">
|
||||
Ban Yaro · Deine Daten auf eigenem Server in Deutschland
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- App installieren -->
|
||||
<div class="card" style="margin-bottom:var(--space-5)" id="install-section">
|
||||
<div style="padding:var(--space-3) var(--space-4);
|
||||
font-size:var(--text-xs);font-weight:600;
|
||||
color:var(--c-text-secondary);text-transform:uppercase;
|
||||
letter-spacing:0.05em;border-bottom:1px solid var(--c-border)">
|
||||
App installieren
|
||||
</div>
|
||||
<div style="padding:var(--space-4)">
|
||||
${isInstalled
|
||||
? `<div style="display:flex;gap:var(--space-3);align-items:center;
|
||||
color:var(--c-success)">
|
||||
<svg style="width:20px;height:20px;flex-shrink:0" aria-hidden="true">
|
||||
<use href="/icons/phosphor.svg#check"></use>
|
||||
</svg>
|
||||
<span style="font-size:var(--text-sm);font-weight:var(--weight-semibold)">
|
||||
Ban Yaro ist bereits installiert.
|
||||
</span>
|
||||
</div>`
|
||||
: _installHTML()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA wenn nicht eingeloggt -->
|
||||
${!_appState.user ? `
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-3)">
|
||||
<button class="btn btn-primary" id="welcome-register-btn">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user-plus"></use></svg>
|
||||
Kostenlos registrieren
|
||||
</button>
|
||||
<button class="btn btn-ghost" id="welcome-login-btn">
|
||||
Bereits registriert? Anmelden
|
||||
</button>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Footer -->
|
||||
<p style="text-align:center;font-size:var(--text-xs);color:var(--c-text-muted);
|
||||
margin-top:var(--space-6)">
|
||||
Ban Yaro · Deine Daten auf eigenem Server in Deutschland.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
_injectStyles();
|
||||
_bindEvents();
|
||||
_pulseMenuBtn();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INSTALLATIONS-ANLEITUNG (plattformabhängig)
|
||||
// STYLES (einmalig injizieren)
|
||||
// ----------------------------------------------------------
|
||||
function _injectStyles() {
|
||||
if (document.getElementById('wc-styles')) return;
|
||||
const s = document.createElement('style');
|
||||
s.id = 'wc-styles';
|
||||
s.textContent = `
|
||||
/* Hero */
|
||||
.wc-hero {
|
||||
background: linear-gradient(160deg, var(--c-primary-subtle) 0%, var(--c-bg) 70%);
|
||||
text-align: center;
|
||||
padding: var(--space-8) var(--space-4) var(--space-6);
|
||||
border-bottom: 1px solid var(--c-border-light);
|
||||
}
|
||||
.wc-hero-icon {
|
||||
width: 96px; height: 96px;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,0.15);
|
||||
display: block; margin: 0 auto var(--space-4);
|
||||
}
|
||||
.wc-hero-title {
|
||||
font-size: var(--text-2xl); font-weight: var(--weight-bold);
|
||||
color: var(--c-text); margin: 0 0 var(--space-2);
|
||||
}
|
||||
.wc-hero-sub {
|
||||
font-size: var(--text-base); color: var(--c-text-secondary);
|
||||
margin: 0; line-height: 1.6; max-width: 420px; margin: 0 auto;
|
||||
}
|
||||
.wc-hero-cta {
|
||||
display: flex; gap: var(--space-3); justify-content: center;
|
||||
flex-wrap: wrap; margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
/* Section title */
|
||||
.wc-section-title {
|
||||
font-size: var(--text-sm); font-weight: var(--weight-semibold);
|
||||
color: var(--c-text-secondary); text-transform: uppercase;
|
||||
letter-spacing: 0.06em; margin: 0 0 var(--space-4);
|
||||
}
|
||||
|
||||
/* Feature Grid */
|
||||
.wc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.wc-tile {
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; gap: var(--space-2);
|
||||
padding: var(--space-4) var(--space-2);
|
||||
background: var(--c-surface);
|
||||
border: 1px solid var(--c-border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer; transition: background var(--transition-fast), transform 0.1s;
|
||||
}
|
||||
.wc-tile:hover { background: var(--c-surface-2); }
|
||||
.wc-tile:active { transform: scale(0.96); }
|
||||
.wc-tile-icon {
|
||||
width: 44px; height: 44px; border-radius: var(--radius-md);
|
||||
background: var(--c-primary-subtle);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.wc-tile-icon .ph-icon {
|
||||
width: 22px; height: 22px; color: var(--c-primary);
|
||||
}
|
||||
.wc-tile-label {
|
||||
font-size: var(--text-xs); font-weight: var(--weight-semibold);
|
||||
color: var(--c-text); text-align: center; line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Install card */
|
||||
.wc-install-card { margin-bottom: var(--space-5); }
|
||||
.wc-install-header {
|
||||
display: flex; align-items: center; gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-size: var(--text-xs); font-weight: 600;
|
||||
color: var(--c-text-secondary); text-transform: uppercase;
|
||||
letter-spacing: 0.05em; border-bottom: 1px solid var(--c-border);
|
||||
}
|
||||
.wc-install-header .ph-icon { width: 14px; height: 14px; }
|
||||
|
||||
/* Footer */
|
||||
.wc-footer {
|
||||
text-align: center; font-size: var(--text-xs);
|
||||
color: var(--c-text-muted); margin: 0;
|
||||
}
|
||||
|
||||
/* Desktop: 8-spaltig */
|
||||
@media (min-width: 1024px) {
|
||||
.wc-grid { grid-template-columns: repeat(8, 1fr); }
|
||||
}
|
||||
|
||||
/* Pulse animation */
|
||||
@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);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INSTALLATIONS-ANLEITUNG
|
||||
// ----------------------------------------------------------
|
||||
function _installHTML() {
|
||||
const ua = navigator.userAgent;
|
||||
|
|
@ -166,117 +226,63 @@ window.Page_welcome = (() => {
|
|||
const isAndroid = /android/i.test(ua);
|
||||
const hasPrompt = !!App.getInstallPrompt();
|
||||
|
||||
// Android/Chrome mit nativem Prompt
|
||||
if ((isAndroid || hasPrompt) && hasPrompt) {
|
||||
return `
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);
|
||||
margin:0 0 var(--space-3);line-height:1.5">
|
||||
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.
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3);line-height:1.5">
|
||||
Kein App Store nötig — direkt installieren.
|
||||
</p>
|
||||
<button class="btn btn-primary" id="install-android-btn" style="width:100%">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
|
||||
Ban Yaro installieren
|
||||
</button>
|
||||
`;
|
||||
</button>`;
|
||||
}
|
||||
|
||||
// iOS Safari
|
||||
if (isIOS && isSafari) {
|
||||
return `
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);
|
||||
margin:0 0 var(--space-4);line-height:1.5">
|
||||
Installiere Ban Yaro auf deinem iPhone oder iPad:
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-4);line-height:1.5">
|
||||
Auf iPhone/iPad installieren:
|
||||
</p>
|
||||
${_steps([
|
||||
['share', 'Tippe auf das <strong>Teilen-Symbol</strong> in Safari (Rechteck mit Pfeil nach oben)'],
|
||||
['plus', 'Scrolle nach unten und tippe auf <strong>„Zum Home-Bildschirm"</strong>'],
|
||||
['check', 'Tippe rechts oben auf <strong>„Hinzufügen"</strong> — fertig!'],
|
||||
['1', 'Teilen-Symbol <svg class="ph-icon" style="width:14px;height:14px;vertical-align:-2px"><use href="/icons/phosphor.svg#share"></use></svg> in Safari tippen'],
|
||||
['2', '<strong>„Zum Home-Bildschirm"</strong> wählen'],
|
||||
['3', 'Rechts oben <strong>„Hinzufügen"</strong> tippen'],
|
||||
])}
|
||||
<p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:var(--space-3) 0 0">
|
||||
Funktioniert nur in Safari, nicht in anderen Browsern auf iOS.
|
||||
</p>
|
||||
`;
|
||||
Nur in Safari verfügbar, nicht in anderen Browsern.
|
||||
</p>`;
|
||||
}
|
||||
|
||||
// Desktop oder andere Browser
|
||||
return `
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);
|
||||
margin:0 0 var(--space-4);line-height:1.5">
|
||||
Ban Yaro lässt sich in Chrome, Edge und anderen modernen Browsern installieren:
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-4);line-height:1.5">
|
||||
In Chrome oder Edge installieren:
|
||||
</p>
|
||||
${_steps([
|
||||
['globe', 'Öffne Ban Yaro in <strong>Chrome</strong> oder <strong>Edge</strong>'],
|
||||
['download-simple','Klicke in der Adressleiste auf das <strong>Installieren-Symbol</strong> (↓ mit Kreis)'],
|
||||
['check', 'Bestätige die Installation — Ban Yaro öffnet sich dann wie eine Desktop-App'],
|
||||
])}
|
||||
<p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:var(--space-3) 0 0">
|
||||
Auf Android: Menü (⋮) → <strong>„App installieren"</strong> oder
|
||||
<strong>„Zum Startbildschirm hinzufügen"</strong>.
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
|
||||
function _featureCard(heading, items) {
|
||||
return `
|
||||
<div class="card" style="margin-bottom:var(--space-5)">
|
||||
<div style="padding:var(--space-3) var(--space-4);
|
||||
font-size:var(--text-xs);font-weight:600;
|
||||
color:var(--c-text-secondary);text-transform:uppercase;
|
||||
letter-spacing:0.05em;border-bottom:1px solid var(--c-border)">
|
||||
${heading}
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0">
|
||||
${items.map(([icon, title, desc, page], i) => `
|
||||
<button data-nav="${page}"
|
||||
style="display:flex;gap:var(--space-3);align-items:flex-start;
|
||||
padding:var(--space-4);text-align:left;background:none;border:none;
|
||||
cursor:pointer;width:100%;transition:background var(--transition-fast);
|
||||
${i % 2 === 0 ? 'border-right:1px solid var(--c-border);' : ''}
|
||||
${i < items.length - (items.length % 2 === 0 ? 2 : 1) ? 'border-bottom:1px solid var(--c-border);' : ''}">
|
||||
<div style="width:34px;height:34px;border-radius:var(--radius-md);
|
||||
background:var(--c-primary-subtle);flex-shrink:0;
|
||||
display:flex;align-items:center;justify-content:center">
|
||||
<svg style="fill:currentColor;width:18px;height:18px;color:var(--c-primary)" aria-hidden="true">
|
||||
<use href="/icons/phosphor.svg#${icon}"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
||||
color:var(--c-text);margin-bottom:2px">${title}</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
|
||||
line-height:1.4">${desc}</div>
|
||||
</div>
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>`;
|
||||
['1', 'Seite in <strong>Chrome</strong> oder <strong>Edge</strong> öffnen'],
|
||||
['2', 'Installations-Symbol in der Adressleiste klicken'],
|
||||
['3', 'Bestätigen — fertig!'],
|
||||
])}`;
|
||||
}
|
||||
|
||||
function _steps(list) {
|
||||
return `
|
||||
<ol style="margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)">
|
||||
${list.map(([icon, text], i) => `
|
||||
${list.map(([num, text]) => `
|
||||
<li style="display:flex;gap:var(--space-3);align-items:flex-start">
|
||||
<div style="width:28px;height:28px;border-radius:50%;flex-shrink:0;
|
||||
background:var(--c-primary);color:#fff;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:var(--text-xs);font-weight:var(--weight-bold)">
|
||||
${i + 1}
|
||||
<div style="width:24px;height:24px;border-radius:50%;flex-shrink:0;
|
||||
background:var(--c-primary);color:#fff;font-size:var(--text-xs);
|
||||
font-weight:var(--weight-bold);display:flex;align-items:center;justify-content:center">
|
||||
${num}
|
||||
</div>
|
||||
<span style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5;
|
||||
padding-top:4px">${text}</span>
|
||||
<span style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5;padding-top:2px">${text}</span>
|
||||
</li>
|
||||
`).join('')}
|
||||
</ol>
|
||||
`;
|
||||
</ol>`;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// EVENTS
|
||||
// ----------------------------------------------------------
|
||||
function _bindEvents() {
|
||||
// Android-Install-Button
|
||||
_container.querySelector('#install-android-btn')?.addEventListener('click', async () => {
|
||||
const prompt = App.getInstallPrompt();
|
||||
if (!prompt) return;
|
||||
|
|
@ -284,58 +290,27 @@ window.Page_welcome = (() => {
|
|||
const { outcome } = await prompt.userChoice;
|
||||
if (outcome === 'accepted') {
|
||||
UI.toast.success('Ban Yaro wird installiert!');
|
||||
_render(); // zeigt "bereits installiert"
|
||||
_render();
|
||||
}
|
||||
});
|
||||
|
||||
// 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');
|
||||
});
|
||||
_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 };
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue