share button

themes/one-pager/assets/css/style.css

@@ -813,6 +813,86 @@ button {
   display: block;
   margin: 0.2rem 0;
 }
+
+/* Share button row - between controls and lyrics */
+.music-lightbox-share-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2rem 0;
+  width: 100%;
+}
+
+/* Clean share button - smaller, no circle mask */
+.music-lightbox-share-btn {
+  background: none;
+  border: 1.5px solid var(--accent-grey);
+  color: white;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 0.25rem 0.8rem;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  gap: 0.3rem;
+}
+
+.music-lightbox-share-btn:hover {
+  opacity: 1;
+  transform: scale(1.05);
+  border-color: var(--accent-yellow);
+  background: rgba(255, 215, 0, 0.1);
+}
+
+.music-lightbox-share-btn .share-icon {
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.music-lightbox-share-btn .share-label {
+  font-size: 0.5rem;
+  letter-spacing: 1.5px;
+  opacity: 0.8;
+  text-transform: uppercase;
+}
+
+/* Pop-out feedback for "✓ Copied!" */
+.share-feedback {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: rgba(0, 0, 0, 0.9);
+  color: var(--accent-yellow);
+  padding: 0.6rem 1.5rem;
+  border-radius: 8px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 0.8rem;
+  letter-spacing: 2px;
+  border: 1px solid var(--accent-yellow);
+  box-shadow: 0 4px 30px rgba(255, 215, 0, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  z-index: 99999;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
+}
+
+.share-feedback.visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.share-feedback .checkmark {
+  color: #4caf50;
+  margin-right: 0.5rem;
+}
+
 /* Photo Grid - KEEP SKEW ON CARDS */
 .photo-grid {
   display: grid;

themes/one-pager/assets/js/scripts.js

@@ -180,6 +180,9 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
   window.musicPlaylist = [];
   filteredTracks.forEach(track => {
     let title = '', url = '', image = '', artist = '', album = '', duration = '';
+    // ADD THIS: Store the track ID
+    const trackId = track.id || '';
+
     if (track.tags) {
       track.tags.forEach(tag => {
         const key = tag[0];
@@ -194,6 +197,7 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
     }
     if (url) {
       window.musicPlaylist.push({
+        id: trackId,  // ADD THIS LINE
         title: title || 'Untitled',
         url: url,
         image: image || '',
@@ -564,6 +568,8 @@ let musicPlayer = null;
 
 // Open music lightbox
 function openMusicLightbox(index) {
+
+
   if (!window.musicPlaylist || window.musicPlaylist.length === 0) return;
 
   // Stop any existing playback
@@ -595,6 +601,74 @@ function openMusicLightbox(index) {
   // Get the lyrics element
   const lyricsDisplay = document.getElementById('musicLightboxLyrics');
 
+  // Share button - in its own row
+  const shareBtn = document.getElementById('musicShareBtn');
+
+  // Create feedback element if it doesn't exist
+  let feedbackEl = document.getElementById('shareFeedbackPopout');
+  if (!feedbackEl) {
+    feedbackEl = document.createElement('div');
+    feedbackEl.id = 'shareFeedbackPopout';
+    feedbackEl.className = 'share-feedback';
+    feedbackEl.innerHTML = '<span class="checkmark">✓</span> Copied!';
+    document.body.appendChild(feedbackEl);
+  }
+
+  if (shareBtn) {
+    shareBtn.onclick = function() {
+      if (!track.id) {
+        feedbackEl.textContent = '⚠️ No ID';
+        feedbackEl.classList.add('visible');
+        setTimeout(() => {
+          feedbackEl.classList.remove('visible');
+        }, 2000);
+        return;
+      }
+
+      const shareUrl = `https://nostr.basspistol.org/notes/${track.id}`;
+
+      if (navigator.share) {
+        navigator.share({
+          title: track.title || 'Music Track',
+          text: `Check out "${track.title}" by ${track.artist || 'Unknown Artist'}`,
+          url: shareUrl
+        }).catch(err => {
+          console.log('Share cancelled or failed:', err);
+        });
+      } else {
+        navigator.clipboard.writeText(shareUrl).then(() => {
+          feedbackEl.innerHTML = '<span class="checkmark">✓</span> Copied!';
+          feedbackEl.classList.add('visible');
+          setTimeout(() => {
+            feedbackEl.classList.remove('visible');
+          }, 2000);
+        }).catch(err => {
+          console.error('Could not copy text: ', err);
+          const textArea = document.createElement('textarea');
+          textArea.value = shareUrl;
+          document.body.appendChild(textArea);
+          textArea.select();
+          try {
+            document.execCommand('copy');
+            feedbackEl.innerHTML = '<span class="checkmark">✓</span> Copied!';
+            feedbackEl.classList.add('visible');
+            setTimeout(() => {
+              feedbackEl.classList.remove('visible');
+            }, 2000);
+          } catch (err) {
+            console.error('Fallback copy failed:', err);
+            feedbackEl.textContent = '⚠️ Copy failed';
+            feedbackEl.classList.add('visible');
+            setTimeout(() => {
+              feedbackEl.classList.remove('visible');
+            }, 2000);
+          }
+          document.body.removeChild(textArea);
+        });
+      }
+    };
+  }
+
   // Set album art
   const artUrl = track.image || '/images/default-album.jpg';
   img.src = artUrl;

themes/one-pager/layouts/index.html

@@ -82,7 +82,15 @@
                     <button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
                 </div>
 
-                <!-- Lyrics moved here - below the controls -->
+                <!-- SHARE BUTTON - NEW ROW BETWEEN CONTROLS AND LYRICS -->
+                <div class="music-lightbox-share-row">
+                    <button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
+                        <span class="share-icon">🔗</span>
+                        <span class="share-label">Share</span>
+                    </button>
+                </div>
+
+                <!-- Lyrics -->
                 <div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
             </div>
         </div>

themes/one-pager/layouts/partials/footer.html

@@ -23,7 +23,7 @@
         <div class="footer-right">
             <div class="footer-meta-item">
                 <span class="icon">🕒</span>
-                <span class="label">Updated</span>
+                <span class="label">Last Built</span>
                 <span class="value">{{ now.Format "Jan 2, 2006 · 15:04" }}</span>
             </div>
             <div class="footer-meta-item">