Landing: Phosphor Icons statt Emoji, SW by-v733

This commit is contained in:
rene 2026-05-06 18:36:23 +02:00
parent 87a655e32f
commit bcc7c27556
5 changed files with 92 additions and 40 deletions

View file

@ -327,7 +327,7 @@ MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
os.makedirs(MEDIA_DIR, exist_ok=True)
app.mount("/media", StaticFiles(directory=MEDIA_DIR), name="media")
APP_VER = "732" # muss mit APP_VER in app.js übereinstimmen
APP_VER = "733" # muss mit APP_VER in app.js übereinstimmen
@app.get("/api/version")
async def app_version():

View file

@ -578,7 +578,7 @@
<script src="/js/api.js?v=94"></script>
<script src="/js/ui.js?v=94"></script>
<script src="/js/app.js?v=94"></script>
<script src="/js/worlds.js?v=732"></script>
<script src="/js/worlds.js?v=733"></script>
<!-- Feature-Seiten werden lazy geladen -->

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '732'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '733'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.4.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';

View file

@ -391,8 +391,32 @@
box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.outcome-card .oc-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
font-size: 0; /* Emoji-Fallback ausblenden */
width: 3rem;
height: 3rem;
background: var(--primary-light);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
flex-shrink: 0;
}
.outcome-card .oc-icon svg {
width: 1.6rem;
height: 1.6rem;
color: var(--primary);
}
.feature-card .feature-icon svg {
width: 1.4rem;
height: 1.4rem;
color: var(--primary);
}
.feature-card .feature-icon {
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
}
.outcome-card h3 {
font-size: 1.05rem;
@ -521,42 +545,58 @@
<div class="outcome-grid">
<div class="outcome-card">
<div class="oc-icon">📖</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#book-open"></use></svg>
</div>
<h3>Meine persönlichen Highlights</h3>
<p>Ein Tagebuch das wirklich lebt — Fotos, GPS-Orte, Stimmungen. Schau in einem Jahr zurück und erinnere dich an jeden besonderen Moment.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">🗺️</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#map-trifold"></use></svg>
</div>
<h3>Gassi ohne Fragezeichen</h3>
<p>Wo ist der nächste Mülleimer? Gibt es einen Kotbeutelspender? Mein Hund hat Durst — wo kann er trinken? Die Karte hat alle Antworten.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">🛤️</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#path"></use></svg>
</div>
<h3>Lieblingsrouten für immer</h3>
<p>Speichere deine schönsten Strecken und teile sie mit anderen. Oder lass dir täglich eine neue Route vorschlagen — 2, 4 oder 6 km, direkt navigierbar.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">🌤️</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#cloud-sun"></use></svg>
</div>
<h3>Das Gassiwetter</h3>
<p>Nicht einfach nur Wetter — ein Gassi-Score von 110. Zu heiß, zu windig, Regen im Anzug? Du weißt es bevor du die Tür aufmachst.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">💊</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#heartbeat"></use></svg>
</div>
<h3>Gesundheit und Ausgaben im Blick</h3>
<p>Impfpass, Tierarztbesuche, Medikamente — alles digital. Und was kostet mein Hund mich eigentlich? Ausgaben-Tracker inklusive.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">🎓</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#graduation-cap"></use></svg>
</div>
<h3>Mein virtueller Trainer</h3>
<p>104 Übungen mit Schritt-für-Schritt-Anleitungen. Der KI-Trainer analysiert euren Stand täglich und beantwortet auch spezielle Probleme — wie ein Profi, immer dabei.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">💬</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg>
</div>
<h3>Leute unter sich</h3>
<p>Ein Forum nur für Hundemenschen. Fragen stellen, Erfahrungen teilen, lokale Gassi-Treffen organisieren — ohne Algorithmen, ohne Werbung.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">🏡</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#house-line"></use></svg>
</div>
<h3>Jemanden für die Gassi gesucht?</h3>
<p>Du musst da oder dort hin — finde jemanden der auf deinen Hund aufpasst. Hundesitting-Vermittlung mit nur 8% Provision statt 20% bei anderen.</p>
</div>
@ -569,43 +609,43 @@
<div class="feature-group-label">Mein Hund</div>
<div class="feature-grid">
<div class="feature-card">
<span class="feature-icon">🏠</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#house-line"></use></svg></span>
<div><h3>Personalisiertes Dashboard</h3><p>Täglich wechselndes Foto deines Hundes, aktuelle Stats, nächster Termin, Gewicht, Übung des Tages.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">📓</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#book-open"></use></svg></span>
<div><h3>Tagebuch</h3><p>Fotos, Videos, Texte und GPS-Orte — alle Momente mit deinem Hund. Kalender-, Karten- und Medien-Ansicht.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">💉</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#heartbeat"></use></svg></span>
<div><h3>Gesundheit &amp; Impfpass</h3><p>Impfungen, Tierarztbesuche, Medikamente digital verwalten. Automatische Erinnerungen per Push-Notification.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🎯</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#target"></use></svg></span>
<div><h3>Training &amp; KI-Trainer</h3><p>104 Übungen, Einheiten loggen, Fortschritt in 5 Stufen. Virtueller Trainer mit täglichen Empfehlungen, Streaks und Abzeichen.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🏥</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#first-aid"></use></svg></span>
<div><h3>Symptom-Checker</h3><p>KI-gestützte Ersteinschätzung: beobachten, Tierarzt oder Notfall?</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🛁</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#sparkle"></use></svg></span>
<div><h3>Pflege-System</h3><p>43 rassenspezifische Pflegetipps in 10 Kategorien — Tipp des Tages automatisch ausgewählt.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🌤️</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#cloud-sun"></use></svg></span>
<div><h3>Wetter, Gassi-Score &amp; Zecken-Alarm</h3><p>7-Tage-Wetter, tägliche Bewertung 110 für Gassi-Eignung, automatische Zecken-Warnung.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🍖</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#fork-knife"></use></svg></span>
<div><h3>Ernährung &amp; Futter</h3><p>Kalorienbedarf berechnen, BARF-Guide, Giftliste und KI-Futterberater.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">✈️</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#airplane"></use></svg></span>
<div><h3>Reise mit Hund</h3><p>Reisecheckliste und EU-Länder-Guide mit länderspezifischen Einreiseregeln und Impfvorschriften.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🆔</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#certificate"></use></svg></span>
<div><h3>NFC-Halsband-Tags</h3><p>Öffentliche Profilseite für jeden Hund. Finder kontaktiert dich anonym — ohne deine Nummer preiszugeben.</p></div>
</div>
</div>
@ -615,27 +655,27 @@
<div class="feature-group-label">Community &amp; Entdecken</div>
<div class="feature-grid">
<div class="feature-card">
<span class="feature-icon">⚠️</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#skull"></use></svg></span>
<div><h3>Giftköder-Alarm</h3><p>GPS-Meldungen mit Foto, sofortige Push-Notification für alle Nutzer im Umkreis.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🚨</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#dog"></use></svg></span>
<div><h3>Verlorener Hund</h3><p>Sofortalarm für alle Nutzer in der Nähe — mit Foto, letzter GPS-Position und direktem Kontakt.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🧭</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#path"></use></svg></span>
<div><h3>Tages-Gassirunde</h3><p>Täglich neue Rundroute — 2, 4 oder 6 km ab deinem Standort. Berechnet via OpenRouteService.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">🐕</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#paw-print"></use></svg></span>
<div><h3>Gassi-Treffen</h3><p>Spontane oder geplante Gassi-Treffen erstellen und finden.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">💬</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg></span>
<div><h3>Forum</h3><p>Öffentlich lesbar ohne Anmeldung. Kategorien nach Rasse, Region, Gesundheit und Erziehung.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon">📚</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#books"></use></svg></span>
<div><h3><a href="/wiki/rassen">Hunde-Wiki</a></h3><p>1003 Hunderassen — Wikipedia-grounded und von KI angereichert. Community-Fotos und Rassen-Quiz.</p></div>
</div>
</div>
@ -652,17 +692,23 @@
<div class="outcome-grid">
<div class="outcome-card">
<div class="oc-icon">🧬</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#shield-check"></use></svg>
</div>
<h3>Transparenz die Vertrauen schafft</h3>
<p>Stammbaum bis 4 Generationen, Gesundheitstests, Gentests — alles für Käufer sichtbar. Die erste Plattform die Zucht wirklich transparent macht.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">⚖️</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#scales"></use></svg>
</div>
<h3>Tierschutz automatisch</h3>
<p>Der Tierschutz-Check läuft bei jeder Verpaarung automatisch. Nicht abschaltbar — weil die Tiere zählen. Dein stärkstes Argument gegenüber Käufern.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">📋</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#calendar-dots"></use></svg>
</div>
<h3>Von der Verpaarung bis zum Kaufvertrag</h3>
<p>Wurfbörse, Welpen-Verwaltung, automatischer Kaufvertrag. Interessenten schreiben direkt per Chat — du hast alles an einem Ort.</p>
</div>
@ -680,17 +726,23 @@
<div class="outcome-grid">
<div class="outcome-card">
<div class="oc-icon">🔍</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
</div>
<h3>Nur verifizierte Züchter</h3>
<p>Jeder Züchter auf Ban Yaro wurde geprüft. Stammbaum und Gesundheitstests öffentlich einsehbar — bevor du fragst.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">💬</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg>
</div>
<h3>Direkt zum Züchter</h3>
<p>Kein Umweg über Kleinanzeigen. Schreib direkt per Nachricht, sieh Fotos der Eltern und des Wurfs.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">🏠</div>
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#paw-print"></use></svg>
</div>
<h3>Vorbereitet wenn der Welpe kommt</h3>
<p>Starte direkt mit Tagebuch, Training und Gesundheitsakte. Alles bereit für den ersten Tag.</p>
</div>
@ -976,7 +1028,7 @@
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;text-align:left;margin-top:3rem">
<div class="feature-card">
<span class="feature-icon">🗓️</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#calendar-dots"></use></svg></span>
<div>
<h3>Gegründet 2026</h3>
<p>Ebersberg, Bayern. Ein-Mann-Projekt von René Degelmann — mit großem Herz für Hunde.</p>
@ -984,7 +1036,7 @@
</div>
<div class="feature-card">
<span class="feature-icon">🇩🇪</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#shield"></use></svg></span>
<div>
<h3>Server in Deutschland</h3>
<p>Alle Daten bleiben in Deutschland. Kein US-Konzern, kein Datenhändler.</p>
@ -992,7 +1044,7 @@
</div>
<div class="feature-card">
<span class="feature-icon">🔒</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#lock"></use></svg></span>
<div>
<h3>Deine Daten. Dein Eigentum.</h3>
<p>Vollständige Datenschutzerklärung, keine Tracker, keine Werbung.</p>
@ -1000,7 +1052,7 @@
</div>
<div class="feature-card">
<span class="feature-icon">✉️</span>
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#envelope"></use></svg></span>
<div>
<h3>Direkt erreichbar</h3>
<p><a href="mailto:hallo@banyaro.app">hallo@banyaro.app</a> — kein Support-Ticket-System, echte Menschen.</p>

View file

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