diff --git a/themes/one-pager/assets/css/style.css b/themes/one-pager/assets/css/style.css index 5a07fb6..041f4fd 100644 --- a/themes/one-pager/assets/css/style.css +++ b/themes/one-pager/assets/css/style.css @@ -767,7 +767,52 @@ button { font-size: 0.9rem; white-space: pre-wrap; } +/* Music lightbox lyrics - below controls */ +.music-lightbox-lyrics { + margin-top: 1.5rem; + padding: 1.2rem 1.5rem; + background: rgba(0, 0, 0, 0.4); + border: 1px solid var(--accent-yellow); + border-radius: 0 8px 8px 0; + color: rgba(255, 255, 255, 0.85); + font-family: 'Poppins', sans-serif; + font-weight: 300; + font-size: 0.85rem; + line-height: 1.8; + max-height: 200px; + overflow-y: auto; + text-align: left; + width: 100%; + max-width: 500px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + scrollbar-width: thin; + scrollbar-color: var(--accent-yellow) rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 20px #0000008a; +} +.music-lightbox-lyrics::-webkit-scrollbar { + width: 4px; +} + +.music-lightbox-lyrics::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; +} + +.music-lightbox-lyrics::-webkit-scrollbar-thumb { + background: var(--accent-yellow); + border-radius: 2px; +} + +.music-lightbox-lyrics p { + margin-bottom: 0.5rem; +} + +.music-lightbox-lyrics br { + display: block; + margin: 0.2rem 0; +} /* Photo Grid - KEEP SKEW ON CARDS */ .photo-grid { display: grid; diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js index fc96e78..0f2002a 100644 --- a/themes/one-pager/assets/js/scripts.js +++ b/themes/one-pager/assets/js/scripts.js @@ -592,6 +592,8 @@ function openMusicLightbox(index) { const progressFill = document.getElementById('musicLightboxProgressFill'); const playBtn2 = document.getElementById('musicLightboxPlayBtn2'); const playIcon2 = document.getElementById('musicPlayIcon2'); + // Get the lyrics element + const lyricsDisplay = document.getElementById('musicLightboxLyrics'); // Set album art const artUrl = track.image || '/images/default-album.jpg'; @@ -603,13 +605,38 @@ function openMusicLightbox(index) { artist.textContent = track.artist || 'Unknown Artist'; album.textContent = track.album || ''; + // Set lyrics - find the original track data to get content + let lyricsContent = ''; + // Find the original track data + const originalTrack = window.allMusicData ? window.allMusicData.find(t => { + let url = ''; + if (t.tags) { + t.tags.forEach(tag => { + if (tag[0] === 'url') url = tag[1]; + }); + } + return url === track.url; + }) : null; + + if (originalTrack && originalTrack.content) { + lyricsContent = originalTrack.content; + } + + // Display lyrics if they exist + if (lyricsContent) { + lyricsDisplay.innerHTML = lyricsContent.replace(/\n/g, '
'); + lyricsDisplay.style.display = 'block'; + } else { + lyricsDisplay.style.display = 'none'; + } + // Reset progress progressFill.style.width = '0%'; currentTimeDisplay.textContent = '0:00'; durationDisplay.textContent = track.duration ? formatTime(track.duration) : '0:00'; // Set play buttons to play state - playIcon2.textContent = '▶️'; + playIcon2.textContent = '▶'; // Create audio player musicPlayer = new Audio(track.url); diff --git a/themes/one-pager/layouts/index.html b/themes/one-pager/layouts/index.html index fda64ef..5db3a5e 100644 --- a/themes/one-pager/layouts/index.html +++ b/themes/one-pager/layouts/index.html @@ -61,13 +61,10 @@ Album art -

Title

Artist

Album

- -
0:00 @@ -84,10 +81,14 @@
+ + + + {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}