diff --git a/index.html b/index.html index 03e18df..dfbd11f 100644 --- a/index.html +++ b/index.html @@ -143,6 +143,14 @@ + + + + + + + + diff --git a/js/app.js b/js/app.js index 78e1b8e..44833f5 100644 --- a/js/app.js +++ b/js/app.js @@ -248,6 +248,14 @@ document.addEventListener('DOMContentLoaded', async () => { ui.closeFullscreenCover(); }); + document.getElementById('nav-back')?.addEventListener('click', () => { + window.history.back(); + }); + + document.getElementById('nav-forward')?.addEventListener('click', () => { + window.history.forward(); + }); + document.getElementById('toggle-lyrics-btn')?.addEventListener('click', async (e) => { e.stopPropagation(); if (!player.currentTrack) { @@ -636,6 +644,34 @@ document.addEventListener('DOMContentLoaded', async () => { router(); window.addEventListener('hashchange', router); + // Simple Navigation History + const navStack = [window.location.hash]; + let navIndex = 0; + + const updateNavButtons = () => { + const backBtn = document.getElementById('nav-back'); + const fwdBtn = document.getElementById('nav-forward'); + if (backBtn) backBtn.disabled = navIndex <= 0; + if (fwdBtn) fwdBtn.disabled = navIndex >= navStack.length - 1; + }; + + window.addEventListener('hashchange', () => { + const hash = window.location.hash; + if (hash === navStack[navIndex]) return; + + if (navIndex > 0 && hash === navStack[navIndex - 1]) { + navIndex--; // User went back + } else if (navIndex < navStack.length - 1 && hash === navStack[navIndex + 1]) { + navIndex++; // User went forward + } else { + navIndex++; + navStack.splice(navIndex); // Truncate forward history + navStack.push(hash); + } + updateNavButtons(); + }); + updateNavButtons(); + audioPlayer.addEventListener('play', () => { updateTabTitle(player); }); diff --git a/styles.css b/styles.css index d020fec..0c4becc 100644 --- a/styles.css +++ b/styles.css @@ -430,6 +430,37 @@ kbd { position: relative; } +.navigation-controls { + display: flex; + gap: 0.5rem; + align-items: center; +} + +.nav-btn { + width: 32px; + height: 32px; + border-radius: 50%; + background-color: var(--card); + border: none; + color: var(--foreground); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease; +} + +.nav-btn:hover { + background-color: var(--secondary); + transform: scale(1.05); +} + +.nav-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; +} + .hamburger-menu { display: none; background: transparent;