From 55ae22615ddc5e0d949683c19fac46c7ed166c9d Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Fri, 8 May 2026 13:20:03 +0200
Subject: [PATCH] Feature: Geburtstags-Banner mit Feuerwerk-Animationen im
 world-reminder Stil (SW by-v777)

---
 backend/main.py             |  2 +-
 backend/static/index.html   |  2 +-
 backend/static/js/app.js    |  2 +-
 backend/static/js/worlds.js | 37 +++++++++++++++++++++++++++++--------
 backend/static/sw.js        |  2 +-
 5 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index a3f8685..dcf19f7 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -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 = "776"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "777"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():
diff --git a/backend/static/index.html b/backend/static/index.html
index 74e7a38..4b0cf7d 100644
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -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=776"></script>
+<script src="/js/worlds.js?v=777"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index aedf1a8..b3d9d01 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '776'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '777'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.5.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen
diff --git a/backend/static/js/worlds.js b/backend/static/js/worlds.js
index 8086b5b..25a824b 100644
--- a/backend/static/js/worlds.js
+++ b/backend/static/js/worlds.js
@@ -1312,17 +1312,38 @@ window.Worlds = (() => {
           </div>
         </div>
         ${bday ? `
-        <div style="background:linear-gradient(135deg,rgba(196,132,58,0.25),rgba(232,168,87,0.15));
-                    border:1px solid rgba(196,132,58,0.5);border-radius:16px;
-                    padding:14px 16px;text-align:center;animation:wc-pulse 2s ease-in-out 3">
-          <div style="font-size:2rem;margin-bottom:4px">${bday === 'today' ? '🎂' : '🎁'}</div>
-          <div style="font-weight:700;font-size:var(--text-sm);color:rgba(255,255,255,0.95)">
+        <style>
+          @keyframes bday-pop {
+            0%   { transform: scale(0.7) rotate(-8deg); opacity:0; }
+            60%  { transform: scale(1.15) rotate(4deg); }
+            100% { transform: scale(1) rotate(0deg); opacity:1; }
+          }
+          @keyframes bday-fw1 { 0%,100%{transform:translateY(0) scale(1);opacity:1} 50%{transform:translateY(-8px) scale(1.3);opacity:0.7} }
+          @keyframes bday-fw2 { 0%,100%{transform:translateY(0) scale(1);opacity:1} 50%{transform:translateY(-12px) scale(1.4);opacity:0.6} }
+          @keyframes bday-fw3 { 0%,100%{transform:translateY(0) scale(1);opacity:1} 50%{transform:translateY(-6px) scale(1.2);opacity:0.8} }
+          .bday-pop  { animation: bday-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
+          .bday-fw1  { display:inline-block; animation: bday-fw1 1.4s ease-in-out infinite; }
+          .bday-fw2  { display:inline-block; animation: bday-fw2 1.1s ease-in-out infinite .2s; }
+          .bday-fw3  { display:inline-block; animation: bday-fw3 1.6s ease-in-out infinite .4s; }
+        </style>
+        <div class="world-reminder bday-pop" style="flex-direction:column;align-items:center;
+                    text-align:center;gap:6px;padding:14px 16px;
+                    background:rgba(0,0,0,0.42);border-color:rgba(196,132,58,0.6)">
+          <div style="display:flex;gap:6px;font-size:1.5rem;line-height:1">
+            <span class="bday-fw1">🎆</span>
+            <span style="font-size:2rem">${bday === 'today' ? '🎂' : '🎁'}</span>
+            <span class="bday-fw2">🎇</span>
+          </div>
+          <div style="font-weight:800;font-size:var(--text-sm);color:#fff;letter-spacing:0.01em">
             ${bday === 'today'
-              ? `Alles Gute zum ${bdayYear}. Geburtstag, ${_esc(dog.name)}! 🎉`
+              ? `Alles Gute zum ${bdayYear}. Geburtstag, ${_esc(dog.name)}!`
               : `Morgen hat ${_esc(dog.name)} Geburtstag! 🥳`}
           </div>
-          ${bdayYear ? `<div style="font-size:10px;color:rgba(255,255,255,0.55);margin-top:3px">
-            ${bday === 'today' ? `${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} gemeinsam` : `Wird ${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} alt`}
+          <div style="display:flex;gap:4px;font-size:1.1rem">
+            <span class="bday-fw3">🎉</span><span class="bday-fw1">✨</span><span class="bday-fw2">🎊</span><span class="bday-fw3">✨</span><span class="bday-fw1">🎉</span>
+          </div>
+          ${bdayYear ? `<div style="font-size:10px;color:rgba(255,255,255,0.55)">
+            ${bday === 'today' ? `${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} gemeinsam 🐾` : `Wird ${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} alt`}
           </div>` : ''}
         </div>` : ''}
       </div>
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 63dcb19..58e5d1b 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v776';
+const CACHE_VERSION = 'by-v777';
 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