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

Ban Yaro Album: 3 Songs + Album-Modal, Hymne auf Pro-Version getauscht

Browse source 
Aus der einzelnen Hymne wird ein Album (WELT-Welt): runder Button / Banner
öffnen jetzt ein Album-Modal mit Liste (Play je Titel, aktiver Song orange,
Auto-Next zum nächsten, zentrales Audio läuft über Welt-Wechsel weiter). Songs
als Array (statischer Content), on-demand-Cache pro Datei.

Songs — alle Suno Pro, kommerziell lizenziert:
- Ban Yaro Blues (Hymne) — Pro-Version ersetzt die Free-Aufnahme (Cache-Bust ?v=2)
- Ban Yaro Mobil — erste Anhänger-Fahrt durch die Prärie
- Amy — Liebesromanze (Jack-Russell-Mädchen)

audio-src in index.html geleert (Album setzt src dynamisch).
This commit is contained in:
rene 2026-06-14 22:32:56 +02:00
parent 0643cf87cc
commit 79c66f2469
10 changed files with 127 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

27
backend/static/css/components.css
View file

@ -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; }