diff --git a/index.php b/index.php index b803e17..b0902f3 100644 --- a/index.php +++ b/index.php @@ -482,6 +482,26 @@ $liveIndex = get_live_index($schedule); letter-spacing: 0.02em; position: relative; z-index: 2; + margin-top: 1rem; + } + + .track-cover { + width: 120px; + height: 120px; + border-radius: 20px; + margin: 0 auto 1.5rem; + display: block; + object-fit: cover; + box-shadow: 0 15px 30px rgba(0,0,0,0.3); + position: relative; + z-index: 2; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.5s ease; + } + + .track-cover:hover { + transform: scale(1.05); + border-color: var(--primary-color); } .play-btn { @@ -661,6 +681,7 @@ $liveIndex = get_live_index($schedule);
@@ -718,6 +739,7 @@ $liveIndex = get_live_index($schedule); const audio = document.getElementById("radio-audio"); const playIcon = document.getElementById("play-icon"); const trackTitle = document.getElementById("track-title"); + const trackCover = document.getElementById("track-cover"); const bgContainer = document.querySelector(".background-container"); const appContainer = document.querySelector(".app-container"); const canvas = document.getElementById("visualizer"); @@ -954,6 +976,13 @@ $liveIndex = get_live_index($schedule); const data = await res.json(); if (data && data.title) { let full = data.artist ? `${data.artist} - ${data.title}` : data.title; + + if (data.cover) { + trackCover.src = data.cover; + } else { + trackCover.src = "assets/pasted-20260214-203540-699a2e6a.png"; + } + if (currentTrackTitle !== full) { currentTrackTitle = full; trackTitle.textContent = full;