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

UX: Auth-Gate mit Screenshot-Preview (blur+lock), bessere Texte, Register-CTA prominent, SW by-v569

Browse source
This commit is contained in:
rene 2026-04-30 19:19:08 +02:00
parent 7b25eac286
commit 6aae03191e
2 changed files with 38 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '545'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '546'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.1.4'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
@ -76,13 +76,15 @@ const App = (() => {
// AUTH GUARD — Login-Gate Texte pro Seite
// ----------------------------------------------------------
const AUTH_GATE = {
diary: { icon: 'book-open', text: 'Halte besondere Momente mit deinem Hund fest — Spaziergänge, Meilensteine, Fotos.' },
health: { icon: 'syringe', text: 'Impfungen, Tierarztbesuche, Medikamente und Allergien deines Hundes immer im Blick.' },
'dog-profile':{ icon: 'paw-print', text: 'Erstelle ein Profil für deinen Hund — mit Foto, Bio und NFC-Tag.' },
friends: { icon: 'users', text: 'Finde Hundebesitzer in deiner Nähe und baue ein Netzwerk auf.' },
chat: { icon: 'chat-circle-dots', text: 'Schreibe direkt mit anderen Hundebesitzern.' },
walks: { icon: 'paw-print', text: 'Organisiere Gassi-Treffen und triff andere Hunde in deiner Gegend.' },
sitting: { icon: 'house-line', text: 'Finde einen Dogsitter oder biete selbst Sitting an.' },
diary: { icon: 'book-open', text: 'Dein persönliches Hunde-Tagebuch — Fotos, Notizen, Stimmungen. Nur für dich, privat und sicher.', preview: '/img/screenshots/screen-1.jpg' },
health: { icon: 'syringe', text: 'Impfungen, Tierarztbesuche, Gewicht und Medikamente — alles an einem Ort, immer abrufbar.', preview: '/img/screenshots/screen-3.jpg' },
'dog-profile':{ icon: 'paw-print', text: 'Erstelle ein Profil für deinen Hund mit Foto, Bio, Chip-Nr. und NFC-Tag.', preview: null },
friends: { icon: 'users', text: 'Finde Hundebesitzer in deiner Nähe und tausche dich aus.', preview: null },
chat: { icon: 'chat-circle-dots', text: 'Schreibe direkt mit anderen Hundebesitzern.', preview: null },
walks: { icon: 'paw-print', text: 'Organisiere Gassi-Treffen und triff andere Hunde.', preview: '/img/screenshots/screen-5.jpg' },
sitting: { icon: 'house-line', text: 'Finde einen Dogsitter oder biete selbst Sitting an.', preview: null },
uebungen: { icon: 'target', text: 'Über 100 Übungen mit Anleitungen — tracke deinen Trainingsfortschritt.', preview: '/img/screenshots/screen-4.jpg' },
notes: { icon: 'note-pencil', text: 'Dein persönlicher Notizblock — für alles was du nicht vergessen willst.', preview: null },
};
// ----------------------------------------------------------
@ -188,16 +190,34 @@ const App = (() => {
container.innerHTML = `
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:60vh;padding:var(--space-8) var(--space-5);text-align:center;gap:var(--space-5)">
min-height:60vh;padding:var(--space-6) var(--space-5);text-align:center;gap:var(--space-4)">
<!-- Icon -->
<div style="width:72px;height:72px;border-radius:50%;
<!-- Preview-Screenshot (wenn vorhanden) -->
${gate.preview ? `
<div style="position:relative;width:100%;max-width:280px;border-radius:var(--radius-lg);
overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15)">
<img src="${gate.preview}" alt="${UI.escape(title)}"
style="width:100%;display:block;filter:blur(3px) brightness(0.7);transform:scale(1.05)">
<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center">
<div style="background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);
border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
border:1px solid rgba(255,255,255,0.3)">
<svg style="width:28px;height:28px;color:#fff;display:block;margin:0 auto" aria-hidden="true">
<use href="/icons/phosphor.svg#lock-simple"></use>
</svg>
<span style="font-size:var(--text-xs);color:#fff;font-weight:700;display:block;margin-top:4px">
Nur für Mitglieder
</span>
</div>
</div>
</div>` : `
<div style="width:64px;height:64px;border-radius:50%;
background:var(--c-primary-subtle);
display:flex;align-items:center;justify-content:center">
<svg style="width:36px;height:36px;color:var(--c-primary)" aria-hidden="true">
<svg style="width:32px;height:32px;color:var(--c-primary)" aria-hidden="true">
<use href="/icons/phosphor.svg#${UI.escape(gate.icon)}"></use>
</svg>
</div>
</div>`}
<!-- Text -->
<div style="max-width:300px">
@ -213,14 +233,13 @@ const App = (() => {
<!-- CTAs -->
<div style="display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:280px">
<button class="btn btn-primary" id="gate-login-btn">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#sign-out"></use></svg>
Anmelden
</button>
<button class="btn btn-secondary" id="gate-register-btn">
<button class="btn btn-primary" id="gate-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="gate-login-btn" style="font-size:var(--text-sm)">
Schon dabei? Anmelden
</button>
</div>
<!-- Hinweis was sonst frei ist -->