rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Welcome-Kacheln anklickbar + Hamburger-Puls-Effekt

Browse source
This commit is contained in:
rene 2026-04-19 09:50:24 +02:00
parent 08ec40228a
commit 8386e20ca1
3 changed files with 59 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

73
backend/static/js/pages/welcome.js
View file

@ -44,10 +44,13 @@ window.Page_welcome = (() => {
</div>
<!-- Burger-Menü-Hinweis (nur Mobile, auf Desktop gibt es die Sidebar) -->
<div class="mobile-only" style="display:flex;align-items:center;gap:var(--space-3);
<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)">
<div style="width:36px;height:36px;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="width:20px;height:20px;color:#fff" aria-hidden="true">
@ -63,7 +66,7 @@ window.Page_welcome = (() => {
Tippe auf das ☰-Symbol für Karte, Routen, Giftköder-Alarm, Forum und vieles mehr.
</div>
</div>
</div>
</button>
<!-- Features -->
<div class="card" style="margin-bottom:var(--space-5)">
@ -75,17 +78,19 @@ window.Page_welcome = (() => {
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0">
${[
['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten'],
['syringe', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente'],
['map-trifold', 'Karte & Routen', 'Hundefreundliche Orte und Spazierwege'],
['warning-octagon','Giftköder-Alarm', 'Community-Warnungen in deiner Nähe'],
['paw-print', 'Gassi-Treffen', 'Hunde-Dates mit anderen Besitzern'],
['house-line', 'Sitting', 'Dogsitter finden oder selbst anbieten'],
['target', 'Training', 'Übungen, Pläne und KI-Trainer'],
['books', 'Wiki & Wissen', 'Rassen, Ernährung, Erste Hilfe'],
].map(([icon, title, desc], i) => `
<div style="display:flex;gap:var(--space-3);align-items:flex-start;
padding:var(--space-4);
['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten', 'diary'],
['syringe', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente', 'health'],
['map-trifold', 'Karte & Routen', 'Hundefreundliche Orte und Spazierwege', 'map'],
['warning-octagon','Giftköder-Alarm', 'Community-Warnungen in deiner Nähe', 'poison'],
['paw-print', 'Gassi-Treffen', 'Hunde-Dates mit anderen Besitzern', 'walks'],
['house-line', 'Sitting', 'Dogsitter finden oder selbst anbieten', 'sitting'],
['target', 'Training', 'Übungen, Pläne und KI-Trainer', 'uebungen'],
['books', 'Wiki & Wissen', 'Rassen, Ernährung, Erste Hilfe', 'wiki'],
].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 < 6 ? 'border-bottom:1px solid var(--c-border);' : ''}">
<div style="width:34px;height:34px;border-radius:var(--radius-md);
@ -101,7 +106,7 @@ window.Page_welcome = (() => {
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
line-height:1.4">${desc}</div>
</div>
</div>
</button>
`).join('')}
</div>
</div>
@ -258,6 +263,42 @@ window.Page_welcome = (() => {
_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);
}
// ----------------------------------------------------------