Add page selector

index.html

@@ -71,6 +71,15 @@
             <!-- PDF Preview -->
             <div id="pdf-preview-container" class="hidden">
                 <h4>PDF Preview - Page <span id="preview-page-num">1</span></h4>
+                <div class="preview-controls">
+                    <button class="nav-btn" onclick="changePreviewPage(-1)">❮ Previous</button>
+                    <div class="page-selector">
+                        <label>Page:</label>
+                        <input type="number" id="preview-page-input" min="1" value="1" class="page-input">
+                        <button class="go-btn" onclick="goToPreviewPage()">Go</button>
+                    </div>
+                    <button class="nav-btn" onclick="changePreviewPage(1)">Next ❯</button>
+                </div>
                 <img id="pdf-preview-image" src="" alt="PDF Preview">
             </div>
 

static/app.js

@@ -21,6 +21,12 @@ function loadPDFPreview() {
     // Update page number display
     document.getElementById('preview-page-num').textContent = pageNum;
 
+    // Update preview page input
+    const previewPageInput = document.getElementById('preview-page-input');
+    if (previewPageInput) {
+        previewPageInput.value = pageNum;
+    }
+
     // Load the preview image
     const previewImg = document.getElementById('pdf-preview-image');
     previewImg.src = `/pdf-preview/${encodeURIComponent(pdfFile)}/${pageNum}`;
@@ -35,6 +41,38 @@ function loadPDFPreview() {
     };
 }
 
+// Navigate to a specific page in the preview
+function navigateToPage(pageNum) {
+    const pdfFile = document.getElementById('pdf_file').value;
+    if (!pdfFile) return;
+
+    // Update the main page number input
+    document.getElementById('page_num').value = pageNum;
+
+    // Reload the preview
+    loadPDFPreview();
+}
+
+// Handle preview page navigation
+function changePreviewPage(delta) {
+    const currentPage = parseInt(document.getElementById('page_num').value);
+    const newPage = Math.max(1, currentPage + delta);
+    navigateToPage(newPage);
+}
+
+// Handle direct page input in preview
+function goToPreviewPage() {
+    const pageInput = document.getElementById('preview-page-input');
+    const pageNum = parseInt(pageInput.value);
+
+    if (pageNum && pageNum > 0) {
+        navigateToPage(pageNum);
+    } else {
+        // Reset to current page if invalid
+        pageInput.value = document.getElementById('page_num').value;
+    }
+}
+
 // Tab switching functionality
 function switchTab(tabName) {
     // Hide all tab contents
@@ -220,6 +258,16 @@ window.addEventListener('DOMContentLoaded', function() {
     document.getElementById('pdf_file').addEventListener('change', loadPDFPreview);
     document.getElementById('page_num').addEventListener('change', loadPDFPreview);
 
+    // Add event listener for preview page input (if it exists)
+    const previewPageInput = document.getElementById('preview-page-input');
+    if (previewPageInput) {
+        previewPageInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                goToPreviewPage();
+            }
+        });
+    }
+
     // Run an environment check on startup
     checkEnvironment();
 

static/styles.css

@@ -441,6 +441,77 @@ button:disabled {
     font-weight: 500;
 }
 
+/* Preview Controls */
+.preview-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+    padding: var(--spacing-md);
+    background: var(--surface-white);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-light);
+}
+
+.nav-btn {
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--primary-medium);
+    color: white;
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+}
+
+.nav-btn:hover {
+    background: var(--primary-dark);
+}
+
+.page-selector {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.page-selector label {
+    margin: 0;
+    font-weight: 500;
+    color: var(--text-medium);
+    font-size: 0.875rem;
+}
+
+.page-input {
+    width: 60px;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-sm);
+    text-align: center;
+    font-size: 0.875rem;
+}
+
+.go-btn {
+    padding: var(--spacing-xs) var(--spacing-md);
+    background: var(--accent-mint);
+    color: var(--primary-dark);
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.go-btn:hover {
+    background: var(--primary-medium);
+    color: white;
+}
+
 #pdf-preview-image {
     max-width: 100%;
     max-height: 600px;
@@ -762,4 +833,15 @@ button:disabled {
     #modal-image {
         max-height: 60vh;
     }
+
+    /* Preview controls responsive */
+    .preview-controls {
+        flex-wrap: wrap;
+        gap: var(--spacing-sm);
+    }
+
+    .nav-btn {
+        font-size: 0.8rem;
+        padding: var(--spacing-xs) var(--spacing-sm);
+    }
 }