add lyrics to player

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;

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, '<br>');
+    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);

themes/one-pager/layouts/index.html

@@ -61,13 +61,10 @@
                 <img id="musicLightboxImage" src="" alt="Album art">
             </div>
 
-            <!-- In the info section -->
             <div class="music-lightbox-info">
                 <h2 id="musicLightboxTitle">Title</h2>
                 <p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
                 <p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>
-                <!-- ... rest ... -->
-            </div>
 
                 <div class="music-lightbox-progress">
                     <span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
@@ -84,10 +81,14 @@
                     </button>
                     <button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
                 </div>
+
+                <!-- Lyrics moved here - below the controls -->
+                <div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
             </div>
         </div>
     </div>
 
+
     {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
     <script src="{{ $js.RelPermalink }}"></script>
 </body>