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.
============================================================ */
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 = (() => {

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

@ -68,48 +68,30 @@ window.Page_welcome = (() => {
</div>
</button>
<!-- Features -->
<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)">
Was Ban Yaro kann
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0">
${[
['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);
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>
<!-- Features: Mein Hund -->
${_featureCard('Mein Hund', [
['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten', 'diary'],
['syringe', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente', 'health'],
['target', 'Training', 'Übungen, Pläne und KI-Trainer', 'uebungen'],
['books', 'Wiki & Wissen', 'Rassen, Ernährung, Erste Hilfe', 'wiki'],
])}
<!-- Features: Community -->
${_featureCard('Community', [
['users', 'Freunde', 'Verbinde dich mit anderen Hundebesitzern', 'friends'],
['chat-circle-dots', 'Nachrichten', 'Private Chats mit deinen Freunden', 'chat'],
['chats', 'Forum', 'Diskussionen, Tipps und Austausch', 'forum'],
['paw-print', 'Gassi-Treffen', 'Hunde-Dates mit anderen Besitzern', 'walks'],
['house-line', 'Sitting', 'Dogsitter finden oder selbst anbieten', 'sitting'],
['magnifying-glass', 'Verlorene Hunde','Hilf gesuchte Hunde zu finden', 'lost'],
])}
<!-- Features: Entdecken -->
${_featureCard('Entdecken', [
['map-trifold', 'Karte & Routen', 'Hundefreundliche Orte und Spazierwege', 'map'],
['calendar-dots', 'Events', 'Veranstaltungen in deiner Nähe', 'events'],
['warning-octagon','Giftköder-Alarm', 'Community-Warnungen in deiner Nähe', 'poison'],
])}
<!-- App installieren -->
<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) {
return `
<ol style="margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)">