feat: add dynamic green highlighting for bottom scroll and zoom controls

- Add green background (#27ae60) to info and back-to-top buttons when at page bottom
- Implement bottom detection (within 50px threshold) in scroll handler
- Add conditional green hover to zoom reset button (only when zoom ≠ 100%)
- Enhance UX with visual feedback for scroll position and zoom state

static/js/main.js

@@ -375,6 +375,7 @@
     function updateZoomDisplay(zoomValue) {
         const slider = document.getElementById('zoom-slider');
         const display = document.getElementById('zoom-value-current');
+        const resetBtn = document.getElementById('zoom-reset');
 
         if (display) {
             display.textContent = zoomValue;
@@ -384,6 +385,15 @@
             slider.setAttribute('aria-valuenow', zoomValue);
             slider.setAttribute('aria-valuetext', `${zoomValue}%`);
         }
+
+        // Add/remove class to enable green hover only when zoom is not 100
+        if (resetBtn) {
+            if (zoomValue !== 100) {
+                resetBtn.classList.add('zoom-not-default');
+            } else {
+                resetBtn.classList.remove('zoom-not-default');
+            }
+        }
     }
 
     /**
@@ -676,9 +686,15 @@
             const actionBar = document.querySelector('.action-bar');
             const navMenu = document.querySelector('.navigation-menu');
             const backToTopBtn = document.getElementById('back-to-top');
+            const infoBtn = document.querySelector('.info-button');
             const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
             const isMenuOpen = navMenu.classList.contains('menu-open');
 
+            // Check if at bottom of page (within 50px threshold)
+            const scrollHeight = document.documentElement.scrollHeight;
+            const clientHeight = document.documentElement.clientHeight;
+            const isAtBottom = (scrollHeight - currentScroll - clientHeight) < 50;
+
             // If scrolling up, reset the keepHeaderVisible flag
             if (currentScroll < lastScrollTop) {
                 keepHeaderVisible = false;
@@ -717,6 +733,15 @@
                 backToTopBtn.style.display = 'none';
             }
 
+            // Add/remove at-bottom class for both buttons
+            if (isAtBottom) {
+                if (backToTopBtn) backToTopBtn.classList.add('at-bottom');
+                if (infoBtn) infoBtn.classList.add('at-bottom');
+            } else {
+                if (backToTopBtn) backToTopBtn.classList.remove('at-bottom');
+                if (infoBtn) infoBtn.classList.remove('at-bottom');
+            }
+
             lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
         }, false);