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 @@
-
Artist
Album
- -