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

UX: Geburtstags-Banner Emojis → Phosphor Icons (confetti, cake/gift, sparkle, balloon, star, magic-wand) (SW by-v782)

Browse source
This commit is contained in:
rene 2026-05-08 18:47:49 +02:00
parent 34fe59a672
commit e0fb6a78e4
5 changed files with 22 additions and 17 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 = '781'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '782'; // ← 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

25
backend/static/js/worlds.js
View file

@ -1325,24 +1325,29 @@ window.Worlds = (() => {
<div class="world-reminder bday-pop" id="wh-bday-banner" style="flex-direction:column;align-items:center;
text-align:center;gap:6px;padding:14px 16px;cursor:pointer;
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 style="display:flex;gap:10px;align-items:center;justify-content:center">
<svg class="ph-icon bday-fw1" style="width:1.6rem;height:1.6rem;color:#f59e0b"><use href="/icons/phosphor.svg#confetti"></use></svg>
<svg class="ph-icon bday-pop" style="width:2.2rem;height:2.2rem;color:#fff"><use href="/icons/phosphor.svg#${bday === 'today' ? 'cake' : 'gift'}"></use></svg>
<svg class="ph-icon bday-fw2" style="width:1.6rem;height:1.6rem;color:#f59e0b"><use href="/icons/phosphor.svg#confetti"></use></svg>
</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)}!`
: `Morgen hat ${_esc(dog.name)} Geburtstag! 🥳`}
: `Morgen hat ${_esc(dog.name)} Geburtstag!`}
</div>
<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 style="display:flex;gap:8px;align-items:center">
<svg class="ph-icon bday-fw3" style="width:1rem;height:1rem;color:#e8c96e"><use href="/icons/phosphor.svg#sparkle"></use></svg>
<svg class="ph-icon bday-fw1" style="width:1rem;height:1rem;color:#f59e0b"><use href="/icons/phosphor.svg#star"></use></svg>
<svg class="ph-icon bday-fw2" style="width:1.1rem;height:1.1rem;color:#e8c96e"><use href="/icons/phosphor.svg#balloon"></use></svg>
<svg class="ph-icon bday-fw3" style="width:1rem;height:1rem;color:#f59e0b"><use href="/icons/phosphor.svg#star"></use></svg>
<svg class="ph-icon bday-fw1" style="width:1rem;height:1rem;color:#e8c96e"><use href="/icons/phosphor.svg#sparkle"></use></svg>
</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`}
${bday === 'today' ? `${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} gemeinsam` : `Wird ${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} alt`}
</div>` : ''}
<div style="font-size:10px;color:rgba(196,132,58,0.9);font-weight:700;margin-top:2px">
${bday === 'today' ? '🐾 Was hat sich Ban Yaro gewünscht? →' : '✨ KI-Überraschungsideen →'}
<div style="display:flex;align-items:center;gap:4px;font-size:10px;color:rgba(196,132,58,0.9);font-weight:700;margin-top:2px">
<svg class="ph-icon" style="width:11px;height:11px"><use href="/icons/phosphor.svg#magic-wand"></use></svg>
${bday === 'today' ? 'Was hat sich Ban Yaro gewünscht?' : 'KI-Überraschungsideen'}
</div>
</div>
${bday === 'today' && new Date().getHours() >= 18 ? `