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

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '204'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '205'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => { const App = (() => {

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

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

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v227'; const CACHE_VERSION = 'by-v228';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten