diff --git a/index.html b/index.html
index b6921ca..5119b6b 100644
--- a/index.html
+++ b/index.html
@@ -71,6 +71,15 @@
PDF Preview - Page 1
+
+
+
+
+
+
+
+
+
diff --git a/static/app.js b/static/app.js
index b922a6a..e8f7d43 100644
--- a/static/app.js
+++ b/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();
diff --git a/static/styles.css b/static/styles.css
index f7c1aeb..a849533 100644
--- a/static/styles.css
+++ b/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);
+ }
}
\ No newline at end of file