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

Feature: Startseite in 3 Sektionen (Mein Hund, Community, Entdecken)

Browse source
This commit is contained in:
rene 2026-04-19 09:57:32 +02:00
parent f05ef9eeca
commit 16150ced89
3 changed files with 62 additions and 44 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 = '206'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '207'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => { const App = (() => {

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

@ -68,48 +68,30 @@ window.Page_welcome = (() => {
</div> </div>
</button> </button>
<!-- Features --> <!-- Features: Mein Hund -->
<div class="card" style="margin-bottom:var(--space-5)"> ${_featureCard('Mein Hund', [
<div style="padding:var(--space-3) var(--space-4); ['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten', 'diary'],
font-size:var(--text-xs);font-weight:600; ['syringe', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente', 'health'],
color:var(--c-text-secondary);text-transform:uppercase; ['target', 'Training', 'Übungen, Pläne und KI-Trainer', 'uebungen'],
letter-spacing:0.05em;border-bottom:1px solid var(--c-border)"> ['books', 'Wiki & Wissen', 'Rassen, Ernährung, Erste Hilfe', 'wiki'],
Was Ban Yaro kann ])}
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0"> <!-- Features: Community -->
${[ ${_featureCard('Community', [
['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten', 'diary'], ['users', 'Freunde', 'Verbinde dich mit anderen Hundebesitzern', 'friends'],
['syringe', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente', 'health'], ['chat-circle-dots', 'Nachrichten', 'Private Chats mit deinen Freunden', 'chat'],
['map-trifold', 'Karte & Routen', 'Hundefreundliche Orte und Spazierwege', 'map'], ['chats', 'Forum', 'Diskussionen, Tipps und Austausch', 'forum'],
['warning-octagon','Giftköder-Alarm', 'Community-Warnungen in deiner Nähe', 'poison'], ['paw-print', 'Gassi-Treffen', 'Hunde-Dates mit anderen Besitzern', 'walks'],
['paw-print', 'Gassi-Treffen', 'Hunde-Dates mit anderen Besitzern', 'walks'], ['house-line', 'Sitting', 'Dogsitter finden oder selbst anbieten', 'sitting'],
['house-line', 'Sitting', 'Dogsitter finden oder selbst anbieten', 'sitting'], ['magnifying-glass', 'Verlorene Hunde','Hilf gesuchte Hunde zu finden', 'lost'],
['target', 'Training', 'Übungen, Pläne und KI-Trainer', 'uebungen'], ])}
['books', 'Wiki & Wissen', 'Rassen, Ernährung, Erste Hilfe', 'wiki'],
].map(([icon, title, desc, page], i) => ` <!-- Features: Entdecken -->
<button data-nav="${page}" ${_featureCard('Entdecken', [
style="display:flex;gap:var(--space-3);align-items:flex-start; ['map-trifold', 'Karte & Routen', 'Hundefreundliche Orte und Spazierwege', 'map'],
padding:var(--space-4);text-align:left;background:none;border:none; ['calendar-dots', 'Events', 'Veranstaltungen in deiner Nähe', 'events'],
cursor:pointer;width:100%;transition:background var(--transition-fast); ['warning-octagon','Giftköder-Alarm', 'Community-Warnungen in deiner Nähe', 'poison'],
${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);
background:var(--c-primary-subtle);flex-shrink:0;
display:flex;align-items:center;justify-content:center">
<svg style="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>
<!-- App installieren --> <!-- App installieren -->
<div class="card" style="margin-bottom:var(--space-5)" id="install-section"> <div class="card" style="margin-bottom:var(--space-5)" id="install-section">
@ -221,6 +203,42 @@ window.Page_welcome = (() => {
`; `;
} }
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="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>`;
}
function _steps(list) { function _steps(list) {
return ` return `
<ol style="margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)"> <ol style="margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)">

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-v229'; const CACHE_VERSION = 'by-v230';
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