diff --git a/assets/css/main.css b/assets/css/main.css index f11f5df..368108a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -950,52 +950,107 @@ footer.site-footer { } /* ========================================================================== - SPOTIFY-PLAYER — Musik direkt auf der Seite hören, ohne wegzuklicken + MUSIK-KNOPF — kleiner schwebender Knopf unten rechts, auf jeder Seite + + Klick öffnet ein Feld mit den Spotify-Playern von Hasidog und Van-Van. + Bewusst schwebend (position:fixed) statt als eigener Seitenabschnitt: + so ist die Musik überall mit einem Klick erreichbar, nimmt aber nirgends + Platz weg. Die Player werden erst beim ersten Öffnen geladen. ========================================================================== */ -.music-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.4rem; - max-width: 900px; - margin: 0 auto; +.music-widget { + position: fixed; + right: 22px; + bottom: 22px; + z-index: 120; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 12px; } -.music-player { - background: var(--card-bg); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 1.2rem; - box-shadow: var(--shadow); - transition: border-color .3s ease; -} -.music-player:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } -.music-player h3 { - margin: 0 0 .2rem; - font-size: 1.05rem; +.music-toggle { + width: 54px; + height: 54px; + flex: none; + border-radius: 999px; + font-size: 1.45rem; + line-height: 1; display: flex; align-items: center; - gap: .45rem; justify-content: center; + cursor: pointer; + color: var(--accent-contrast); + border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); + background: linear-gradient(135deg, var(--accent), var(--accent-2)); + box-shadow: 0 12px 30px rgba(0, 0, 0, .45), + 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); + transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; } -.music-player .music-sub { - margin: 0 0 .9rem; - font-size: .82rem; +.music-toggle:hover, +.music-toggle:focus-visible { + transform: translateY(-2px) scale(1.05); + filter: brightness(1.12); + box-shadow: 0 16px 38px rgba(0, 0, 0, .5), + 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); +} +.music-widget.open .music-toggle { transform: rotate(12deg); } + +.music-panel { + width: min(330px, calc(100vw - 44px)); + max-height: min(74vh, 640px); + overflow-y: auto; + padding: 1rem 1.1rem 1.2rem; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--card-bg); + box-shadow: 0 24px 60px rgba(0, 0, 0, .6); + animation: music-panel-in .22s ease-out; +} +.music-panel[hidden] { display: none; } +@keyframes music-panel-in { + from { opacity: 0; transform: translateY(10px) scale(.97); } + to { opacity: 1; transform: none; } +} +.music-panel-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: .6rem; +} +.music-panel-head strong { font-size: .95rem; } +.music-close { + background: none; + border: 0; color: var(--text-muted); - text-align: center; + font-size: 1rem; + line-height: 1; + padding: .2rem .3rem; + cursor: pointer; + border-radius: 6px; } -/* Spotify liefert einen eigenen, abgerundeten Rahmen mit — deshalb hier - nur Höhe/Breite setzen und nicht doppelt umrahmen. */ -.music-player iframe { +.music-close:hover { color: var(--accent); } +.music-artist-label { + margin: .9rem 0 .4rem; + font-size: .7rem; + font-weight: 800; + letter-spacing: .06em; + text-transform: uppercase; + color: var(--text-muted); +} +/* Spotify bringt seinen eigenen abgerundeten Rahmen mit — hier nur Größe setzen. */ +.music-panel iframe { display: block; width: 100%; border: 0; border-radius: 12px; } -.music-note { - text-align: center; - font-size: .8rem; - color: var(--text-muted); - margin: 1.2rem auto 0; - max-width: 56ch; +@media (max-width: 620px) { + .music-widget { right: 14px; bottom: 14px; } + .music-toggle { width: 48px; height: 48px; font-size: 1.25rem; } +} +@media print { .music-widget { display: none !important; } } +@media (prefers-reduced-motion: reduce) { + .music-panel { animation: none; } + .music-toggle { transition: none; } } /* ---------- Live-Status-Punkt ---------- */ diff --git a/assets/js/main.js b/assets/js/main.js index a62ff79..ba8d110 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -190,9 +190,80 @@ document.body.prepend(layer); } + /* =================================================================== + Musik-Knopf (unten rechts, auf jeder Seite) + + Kleiner schwebender Knopf, der ein Feld mit den Spotify-Playern von + Hasidog und Van-Van aufklappt. Genauso gelöst wie im Analyse-Tool. + + Zwei bewusste Entscheidungen: + 1. Das Feld hängt direkt am
, nicht in einem Abschnitt — so + kann kein Neuaufbau der Seite den laufenden Player unterbrechen. + 2. Die Player werden ERST beim ersten Öffnen geladen (src wird dann + gesetzt). Sonst würde jede Seite zwei fremde Einbettungen laden, + auch wenn niemand Musik hören will. + =================================================================== */ + const SPOTIFY_ARTISTS = [ + { name: "Hasidog", id: "2INiE1VVJGUQdEURsltuJU" }, + { name: "Van-Van", id: "4J9PcKZBkh6V8dVY3CGliw" }, + ]; + + function renderMusicWidget() { + if (document.getElementById("music-widget")) return; + + const widget = document.createElement("div"); + widget.className = "music-widget"; + widget.id = "music-widget"; + widget.innerHTML = ` +Läuft weiter, solange du auf dieser Seite bleibst. 🩵
+ ${SPOTIFY_ARTISTS.map( + (a) => ` +${a.name}
+ ` + ).join("")} +Direkt hier reinhören — kein Wegklicken nötig.
-Dogfathers eigenes Musikprojekt
- -- Die Songs von Hasidog und Van-Van — einfach abspielen, ohne die Seite zu verlassen. -
-Dogfathers eigenes Musikprojekt
- -Musik von VanVan, der rechten Hand
- -- Wiedergabe läuft über Spotify. Mit einem kostenlosen Konto hörst du Ausschnitte, - mit Premium die vollen Songs. 🩵 -
-- Hasidog und Van-Van auf Spotify — abspielen, ohne die Seite zu verlassen. -
-Dogfathers eigenes Musikprojekt
- -Musik von VanVan, der rechten Hand
- -VanVans eigene Songs — direkt hier abspielbar.
-Musik von VanVan
- -