Add Next album navigation button to album cards

- Add "Next" button to album cards for sequential navigation through rankings
- Button shows "Next (#rank+1)" and uses existing jump-to-rank functionality
- Button only appears on albums 1-499 (not on album #500)
- Styled to match Wikipedia and Spotify links with theme-aware colors
- Uses right arrow SVG icon and hover effects consistent with other links
- Clicking Next button jumps to the next sequential album in the ranking

Features:
• Sequential navigation through the Top 500 albums
• Smart button hiding on the last album (#500)
• Theme-aware styling with CSS custom properties
• Consistent visual design with existing link buttons
• Smooth scroll navigation using existing jump functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

script.js

@@ -295,6 +295,14 @@ function createAlbumCard(album) {
                 </svg>
                 Listen on Spotify
             </a>
+            ${album.Rank < 500 ? `
+            <button class="next-album-link" data-rank="${album.Rank}" title="Go to next album (#${album.Rank + 1})">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 0.5rem;">
+                    <polyline points="9,18 15,12 9,6"></polyline>
+                </svg>
+                Next (#${album.Rank + 1})
+            </button>
+            ` : ''}
         </div>
         <button class="album-share" title="Share this album" data-rank="${album.Rank}">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -315,6 +323,19 @@ function createAlbumCard(album) {
         handleAlbumShare(rank, this);
     });
     
+    // Add click handler for next button
+    const nextBtn = card.querySelector('.next-album-link');
+    if (nextBtn) {
+        nextBtn.addEventListener('click', function(e) {
+            e.stopPropagation(); // Prevent card click
+            const currentRank = parseInt(this.getAttribute('data-rank'));
+            const nextRank = currentRank + 1;
+            if (nextRank <= 500) {
+                jumpToRankNumber(nextRank);
+            }
+        });
+    }
+    
     return card;
 }
 

styles.css

@@ -790,6 +790,37 @@ body {
     color: #1ed760; /* Slightly brighter Spotify green for dark themes */
 }
 
+.next-album-link {
+    display: inline-block;
+    color: var(--primary-color);
+    background: none;
+    border: none;
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    background: var(--hover-background);
+    border: 1px solid var(--primary-color);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    font-family: inherit;
+}
+
+.next-album-link:hover {
+    background: var(--primary-color);
+    color: var(--text-light);
+    transform: translateY(-1px);
+}
+
+.next-album-link:active {
+    transform: translateY(0);
+}
+
+.next-album-link svg {
+    color: inherit;
+}
+
 
 /* Loading and error states */
 .loading {