Feature: Läufigkeit-Spotlight in Züchter-Sektion (landing.html)
Zeigt ein realistisches Beispiel (Luna vom Bergwald) mit Deckdaten, Trächtigkeits-Meilensteinen und Progesteronkurve — im bestehenden Züchter-Abschnitt, kein neuer Section-Break. SW by-v1017, APP_VER 1017
This commit is contained in:
parent
835c0ada21
commit
9a60c160a1
4 changed files with 74 additions and 3 deletions
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '1016'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '1017'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
|
||||
const IS_STAGING = location.hostname === 'staging.banyaro.app';
|
||||
// Cache-Bust-Parameter nach Update-Reload sofort entfernen
|
||||
|
|
|
|||
|
|
@ -1115,6 +1115,77 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Läufigkeit Feature Spotlight -->
|
||||
<div style="margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center">
|
||||
<div>
|
||||
<p style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#C4843A;margin:0 0 .5rem">Läufigkeit & Trächtigkeit</p>
|
||||
<h3 style="margin:0 0 1rem;font-size:1.4rem">Kein Zettelkaos mehr.</h3>
|
||||
<p style="color:#555;line-height:1.7;margin:0 0 1.25rem">Progesterontests, Deckdaten und Trächtigkeits-Meilensteine an einem Ort. Die App berechnet automatisch wann der früheste Ultraschall möglich ist, wann der Bauch sichtbar wird — und erinnert dich rechtzeitig.</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;color:#444;font-size:.9rem">
|
||||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||||
Zykluskalender mit Beginn, Ende und Dauer
|
||||
</li>
|
||||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||||
Progesteronkurve: Werte, Labor, Übersicht
|
||||
</li>
|
||||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||||
8 automatische Trächtigkeits-Meilensteine
|
||||
</li>
|
||||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||||
Deckdaten: Rüde, Deckart, Ultraschall-Ergebnis
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);border-radius:16px;padding:1.25rem;font-size:.82rem;color:white">
|
||||
<div style="font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(196,132,58,.7);margin-bottom:.75rem">Beispiel — Luna vom Bergwald</div>
|
||||
<!-- Deckung -->
|
||||
<div style="background:rgba(255,255,255,.06);border:1px solid rgba(196,132,58,.3);border-radius:10px;padding:.75rem;margin-bottom:.5rem">
|
||||
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem">
|
||||
<svg viewBox="0 0 256 256" style="width:.9rem;height:.9rem;fill:#e74c7a;flex-shrink:0"><use href="/icons/phosphor.svg#heart"></use></svg>
|
||||
<span style="font-weight:700">Deckung 14.05.2026</span>
|
||||
<span style="background:rgba(34,197,94,.2);color:#4ade80;border-radius:4px;padding:1px 6px;font-size:.7rem;font-weight:600;margin-left:auto">Trächtig ✓</span>
|
||||
</div>
|
||||
<div style="color:rgba(255,255,255,.55);font-size:.75rem">Blitz vom Schwarzwaldforst ZB 44201 · Natürlich</div>
|
||||
<!-- Nächster Meilenstein -->
|
||||
<div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.4);border-radius:6px;padding:.4rem .6rem;margin-top:.5rem;font-size:.72rem;display:flex;align-items:center;gap:.35rem">
|
||||
<svg viewBox="0 0 256 256" style="width:.75rem;height:.75rem;fill:#C4843A;flex-shrink:0"><use href="/icons/phosphor.svg#calendar-check"></use></svg>
|
||||
<span style="color:#f5c07a;font-weight:600">Frühester Ultraschall · Tag 21 · 04.06.2026</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meilensteine -->
|
||||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||||
<div style="font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.1rem">Trächtigkeits-Meilensteine</div>
|
||||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.7)"><span style="background:rgba(196,132,58,.25);color:#f5c07a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0">21</span>04.06. Frühester Ultraschall möglich</div>
|
||||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.7)"><span style="background:rgba(196,132,58,.25);color:#f5c07a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0">25</span>08.06. Welpen erkennbar im Ultraschall</div>
|
||||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.7)"><span style="background:rgba(196,132,58,.25);color:#f5c07a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0">35</span>18.06. Bauch wird sichtbar</div>
|
||||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.5);font-size:.72rem;margin-top:.1rem">+ 5 weitere Meilensteine bis Geburtstermin</div>
|
||||
</div>
|
||||
<!-- Progesterontests -->
|
||||
<div style="border-top:1px solid rgba(255,255,255,.1);margin-top:.75rem;padding-top:.75rem">
|
||||
<div style="font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.4rem">Progesteronkurve</div>
|
||||
<div style="display:flex;gap:.5rem;align-items:flex-end;height:40px">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:2px;flex:1">
|
||||
<div style="background:#C4843A;width:100%;border-radius:2px 2px 0 0;height:30%"></div>
|
||||
<span style="font-size:.6rem;color:rgba(255,255,255,.4)">10.8</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:2px;flex:1">
|
||||
<div style="background:#C4843A;width:100%;border-radius:2px 2px 0 0;height:65%"></div>
|
||||
<span style="font-size:.6rem;color:rgba(255,255,255,.4)">17.5</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:2px;flex:1">
|
||||
<div style="background:#f5c07a;width:100%;border-radius:2px 2px 0 0;height:100%"></div>
|
||||
<span style="font-size:.6rem;color:rgba(255,255,255,.4)">22.3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:.65rem;color:rgba(255,255,255,.3);margin-top:.25rem">ng/ml · Ovulation erreicht</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Offline-Cache + Push Notifications + Tile-Cache
|
||||
============================================================ */
|
||||
|
||||
const CACHE_VERSION = 'by-v1016';
|
||||
const CACHE_VERSION = 'by-v1017';
|
||||
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue