diff --git a/VERSION b/VERSION index 1f5e025..254aba4 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1295 \ No newline at end of file +1297 \ No newline at end of file diff --git a/backend/static/css/components.css b/backend/static/css/components.css index cad9fcd..91dfd2d 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -8290,6 +8290,33 @@ svg.empty-state-icon { #worlds-anthem:active { transform: scale(0.92); } #worlds-anthem.playing { background: var(--c-primary); border-color: transparent; } +/* Album-Modal — Ban Yaro Songs (Bottom-Sheet) */ +#album-modal { + position: fixed; inset: 0; z-index: 2000; + background: rgba(0,0,0,.55); + display: flex; align-items: flex-end; justify-content: center; +} +.album-sheet { + background: var(--c-surface); + border-radius: var(--radius-xl) var(--radius-xl) 0 0; + width: 100%; max-width: 480px; + padding: var(--space-5) var(--space-4) calc(env(safe-area-inset-bottom,0px) + var(--space-5)); + box-shadow: 0 -4px 24px rgba(0,0,0,.2); +} +.album-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); } +.album-title { font-size: var(--text-base); font-weight: 700; color: var(--c-text); } +.album-subtitle { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 2px; } +.album-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--c-text-muted); cursor: pointer; padding: 0 4px; } +.album-list { display: flex; flex-direction: column; gap: var(--space-2); } +.album-song { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); cursor: pointer; transition: background .15s; } +.album-song:active { background: var(--c-border); } +.album-song--active { background: var(--c-primary-subtle); } +.album-song-play { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; } +.album-song-play svg { width: 18px; height: 18px; } +.album-song-meta { display: flex; flex-direction: column; min-width: 0; } +.album-song-title { font-size: var(--text-sm); font-weight: 600; color: var(--c-text); } +.album-song-sub { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 1px; } + /* Header + Bottom-Nav: vollständig entfernt — Welten übernehmen Navigation */ #app-header { display: none !important; } #bottom-nav { display: none !important; } diff --git a/backend/static/index.html b/backend/static/index.html index 58232ad..2ace3fa 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -86,14 +86,14 @@ Ban Yaro - + - - - - - + + + + + @@ -596,10 +596,10 @@
- - + + +
+ ${SONGS.map((s, i) => ` +
+ + + ${_esc(s.title)} + ${_esc(s.sub)} + +
`).join('')} +
+ `; + document.body.appendChild(ov); + ov.addEventListener('click', e => { if (e.target === ov) _closeAlbum(); }); + ov.querySelector('.album-close').addEventListener('click', _closeAlbum); + ov.querySelectorAll('.album-song').forEach(row => { + const i = parseInt(row.dataset.i, 10); + row.addEventListener('click', () => _play(i)); + row.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _play(i); } }); + }); + _sync(); } function updateButton() { document.getElementById('worlds-anthem')?.classList.toggle('hidden', !(_cur === 2 && heard())); } - // Bei jedem WELT-Render aufrufen: Audio-Listener sichern, Klicks binden, Status setzen. + // Bei jedem WELT-Render: Audio-Listener sichern, Klicks binden, Status setzen. function initWelt() { _bindAudio(); const card = document.getElementById('ww-anthem-card'); if (card && !card._anthemBound) { card._anthemBound = true; - card.addEventListener('click', toggle); - card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }); + card.addEventListener('click', openAlbum); + card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openAlbum(); } }); } const btn = document.getElementById('worlds-anthem'); - if (btn && !btn._anthemBound) { btn._anthemBound = true; btn.addEventListener('click', toggle); } + if (btn && !btn._anthemBound) { btn._anthemBound = true; btn.addEventListener('click', openAlbum); } _sync(); updateButton(); } - return { heard, toggle, updateButton, initWelt }; + return { heard, toggle: openAlbum, updateButton, initWelt }; })(); function _renderWelt() { @@ -2042,13 +2091,13 @@ window.Worlds = (() => { style="margin-top:10px;display:flex;align-items:center;gap:14px;cursor:pointer">
- +
-
Ban Yaro Blues
-
unsere Hymne · anhören
+
Ban Yaro — das Album
+
3 Songs · zum Anhören
- + `}
diff --git a/backend/static/landing.html b/backend/static/landing.html index 9d02698..0058b2d 100644 --- a/backend/static/landing.html +++ b/backend/static/landing.html @@ -4,7 +4,7 @@ - + Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz diff --git a/backend/static/sounds/amy.mp3 b/backend/static/sounds/amy.mp3 new file mode 100644 index 0000000..88db993 Binary files /dev/null and b/backend/static/sounds/amy.mp3 differ diff --git a/backend/static/sounds/ban-yaro-blues.mp3 b/backend/static/sounds/ban-yaro-blues.mp3 index db17c6a..55a0f9f 100644 Binary files a/backend/static/sounds/ban-yaro-blues.mp3 and b/backend/static/sounds/ban-yaro-blues.mp3 differ diff --git a/backend/static/sounds/ban-yaro-mobil.mp3 b/backend/static/sounds/ban-yaro-mobil.mp3 new file mode 100644 index 0000000..5e8b6f9 Binary files /dev/null and b/backend/static/sounds/ban-yaro-mobil.mp3 differ diff --git a/backend/static/sw.js b/backend/static/sw.js index 536a579..2b7e45e 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -4,7 +4,7 @@ ============================================================ */ // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab -const VER = '1295'; +const VER = '1297'; const CACHE_VERSION = `by-v${VER}`; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten