Update index.html

index.html

@@ -137,14 +137,8 @@
         }
 
         @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
         .container {
@@ -219,9 +213,7 @@
             display: inline-block;
         }
 
-        input[type="file"] {
-            display: none;
-        }
+        input[type="file"] { display: none; }
 
         .upload-btn {
             background: var(--color-primary);
@@ -245,15 +237,12 @@
             width: 0;
             height: 0;
             border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(255,255,255,0.1);
             transform: translate(-50%, -50%);
             transition: width 0.6s, height 0.6s;
         }
 
-        .upload-btn:hover::before {
-            width: 300px;
-            height: 300px;
-        }
+        .upload-btn:hover::before { width: 300px; height: 300px; }
 
         .upload-btn:hover {
             transform: translateY(-2px);
@@ -276,13 +265,136 @@
             animation: fadeInUp 0.8s ease-out;
         }
 
+        .instructions {
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            padding: 24px;
+            border-radius: 16px;
+            margin-bottom: 24px;
+            font-size: 15px;
+            color: var(--color-text-muted);
+            border-left: 3px solid var(--color-primary);
+            line-height: 1.6;
+        }
+
+        .instructions strong {
+            color: var(--color-text);
+            font-weight: 600;
+        }
+
+        /* ─── Zoom controls ─── */
+        .zoom-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            justify-content: center;
+            margin-bottom: 16px;
+            flex-wrap: wrap;
+        }
+
+        .zoom-label {
+            font-size: 13px;
+            color: var(--color-text-muted);
+            font-weight: 500;
+        }
+
+        .zoom-btn {
+            width: 36px;
+            height: 36px;
+            border: 2px solid var(--color-border);
+            background: var(--color-surface);
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 18px;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            color: var(--color-text);
+        }
+
+        .zoom-btn:hover {
+            border-color: var(--color-accent);
+            background: var(--color-bg);
+            transform: translateY(-1px);
+        }
+
+        .zoom-value {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--color-text);
+            min-width: 52px;
+            text-align: center;
+            background: var(--color-bg);
+            border: 2px solid var(--color-border);
+            border-radius: 10px;
+            padding: 6px 10px;
+        }
+
+        .zoom-reset-btn {
+            font-size: 13px;
+            padding: 6px 14px;
+            border: 2px solid var(--color-border);
+            background: var(--color-surface);
+            border-radius: 10px;
+            cursor: pointer;
+            color: var(--color-text-muted);
+            font-weight: 500;
+            transition: all 0.2s;
+            font-family: 'DM Sans', sans-serif;
+        }
+
+        .zoom-reset-btn:hover {
+            border-color: var(--color-accent);
+            color: var(--color-text);
+        }
+
+        /* ─── Scrollable canvas viewport ─── */
+        .canvas-viewport {
+            width: 100%;
+            max-height: 600px;
+            overflow: auto;
+            border-radius: 16px;
+            border: 1px solid var(--color-border);
+            background: #e8ecf0;
+            margin: 0 auto 8px;
+            /* Custom scrollbar */
+            scrollbar-width: thin;
+            scrollbar-color: #94a3b8 transparent;
+        }
+
+        .canvas-viewport::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        .canvas-viewport::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .canvas-viewport::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+
+        .canvas-viewport::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+
+        /* Inner padding so canvas doesn't kiss the edges */
+        .canvas-inner {
+            display: inline-block;
+            padding: 24px;
+            min-width: 100%;
+            text-align: center;
+        }
+
         .canvas-wrapper {
             position: relative;
             display: inline-block;
-            margin: 32px auto;
-            border-radius: 12px;
+            border-radius: 8px;
             overflow: hidden;
-            box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
+            box-shadow: 0 8px 32px rgba(15, 23, 42, 0.15);
         }
 
         canvas {
@@ -298,20 +410,20 @@
             backdrop-filter: blur(2px);
         }
 
-        .instructions {
-            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-            padding: 24px;
-            border-radius: 16px;
-            margin-bottom: 32px;
-            font-size: 15px;
+        /* Scroll hint badge */
+        .scroll-hint {
+            text-align: center;
+            font-size: 12px;
             color: var(--color-text-muted);
-            border-left: 3px solid var(--color-primary);
-            line-height: 1.6;
+            margin-bottom: 20px;
+            display: none;
+            gap: 6px;
+            align-items: center;
+            justify-content: center;
         }
 
-        .instructions strong {
-            color: var(--color-text);
-            font-weight: 600;
+        .scroll-hint svg {
+            opacity: 0.5;
         }
 
         .button-group {
@@ -423,12 +535,10 @@
             100% { transform: rotate(360deg); }
         }
 
+        /* ─── Modal ─── */
         .modal-overlay {
             position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            top: 0; left: 0; right: 0; bottom: 0;
             background: rgba(15, 23, 42, 0.6);
             backdrop-filter: blur(8px);
             z-index: 1000;
@@ -438,9 +548,7 @@
             animation: fadeIn 0.3s ease-out;
         }
 
-        .modal-overlay.active {
-            display: flex;
-        }
+        .modal-overlay.active { display: flex; }
 
         @keyframes fadeIn {
             from { opacity: 0; }
@@ -456,30 +564,21 @@
             width: 90%;
             box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2);
             animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
         }
 
         @keyframes scaleIn {
-            from {
-                opacity: 0;
-                transform: scale(0.9);
-            }
-            to {
-                opacity: 1;
-                transform: scale(1);
-            }
+            from { opacity: 0; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1); }
         }
 
         .modal-icon {
             width: 80px;
             height: 80px;
             margin: 0 auto 24px;
-            position: relative;
         }
 
         .processing-spinner {
-            width: 80px;
-            height: 80px;
+            width: 80px; height: 80px;
             border: 3px solid var(--color-border);
             border-top: 3px solid var(--color-primary);
             border-radius: 50%;
@@ -487,8 +586,7 @@
         }
 
         .success-icon {
-            width: 80px;
-            height: 80px;
+            width: 80px; height: 80px;
             border-radius: 50%;
             background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
             display: flex;
@@ -505,17 +603,9 @@
         }
 
         @keyframes successPop {
-            0% {
-                transform: scale(0);
-                opacity: 0;
-            }
-            50% {
-                transform: scale(1.1);
-            }
-            100% {
-                transform: scale(1);
-                opacity: 1;
-            }
+            0% { transform: scale(0); opacity: 0; }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); opacity: 1; }
         }
 
         .modal-title {
@@ -550,18 +640,9 @@
         }
 
         @keyframes progressFlow {
-            0% {
-                width: 0%;
-                opacity: 1;
-            }
-            50% {
-                width: 100%;
-                opacity: 1;
-            }
-            100% {
-                width: 100%;
-                opacity: 0;
-            }
+            0% { width: 0%; opacity: 1; }
+            50% { width: 100%; opacity: 1; }
+            100% { width: 100%; opacity: 0; }
         }
 
         .modal-btn {
@@ -597,25 +678,12 @@
         }
 
         @media (max-width: 768px) {
-            h1 {
-                font-size: 36px;
-            }
-            
-            .container {
-                padding: 40px 20px;
-            }
-            
-            .upload-section {
-                padding: 60px 32px;
-            }
-            
-            .canvas-section {
-                padding: 32px 24px;
-            }
-            
-            .button-group {
-                flex-direction: column;
-            }
+            h1 { font-size: 36px; }
+            .container { padding: 40px 20px; }
+            .upload-section { padding: 60px 32px; }
+            .canvas-section { padding: 32px 16px; }
+            .button-group { flex-direction: column; }
+            .canvas-viewport { max-height: 450px; }
         }
     </style>
 </head>
@@ -649,13 +717,35 @@
 
         <div class="canvas-section" id="canvasSection">
             <div class="instructions">
-                <strong>Instructions:</strong> Click and drag on the first page to select the area you want to crop. This area will be applied to all pages of the document.
+                <strong>Instructions:</strong> Click and drag on the first page to select the area you want to crop.
+                Use the zoom controls or scroll/pan to navigate large documents.
+                The selection will be applied to all pages.
+            </div>
+
+            <!-- Zoom controls -->
+            <div class="zoom-bar">
+                <span class="zoom-label">Zoom</span>
+                <button class="zoom-btn" id="zoomOutBtn" title="Zoom out">−</button>
+                <span class="zoom-value" id="zoomValue">100%</span>
+                <button class="zoom-btn" id="zoomInBtn" title="Zoom in">+</button>
+                <button class="zoom-reset-btn" id="zoomResetBtn">Fit to view</button>
+            </div>
+
+            <!-- Scroll hint (shown only when content overflows) -->
+            <div class="scroll-hint" id="scrollHint">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+                </svg>
+                Scroll inside the preview area to navigate the document
             </div>
-            
-            <div style="text-align: center;">
-                <div class="canvas-wrapper" id="canvasWrapper">
-                    <canvas id="pdfCanvas"></canvas>
-                    <div class="selection-box" id="selectionBox"></div>
+
+            <!-- Scrollable viewport -->
+            <div class="canvas-viewport" id="canvasViewport">
+                <div class="canvas-inner">
+                    <div class="canvas-wrapper" id="canvasWrapper">
+                        <canvas id="pdfCanvas"></canvas>
+                        <div class="selection-box" id="selectionBox"></div>
+                    </div>
                 </div>
             </div>
 
@@ -699,6 +789,18 @@
         let startX, startY, endX, endY;
         let selection = null;
 
+        // Zoom state
+        let currentScale = 1.5;   // pdf.js render scale
+        let baseScale = 1.5;      // "fit-to-view" scale computed on load
+        const ZOOM_STEP = 0.25;
+        const MIN_SCALE = 0.5;
+        const MAX_SCALE = 5;
+
+        // ─── Viewport dimensions used for fit-to-view ───────────────────────
+        const VIEWPORT_MAX_WIDTH  = 1000; // matches canvas-section max inner width
+        const VIEWPORT_MAX_HEIGHT = 600;  // matches max-height of canvas-viewport
+
+        // ─── Event listeners ─────────────────────────────────────────────────
         document.getElementById('pdfInput').addEventListener('change', handleFileSelect);
         canvas.addEventListener('mousedown', handleMouseDown);
         canvas.addEventListener('mousemove', handleMouseMove);
@@ -708,25 +810,35 @@
         document.getElementById('downloadBtn').addEventListener('click', downloadPDF);
         document.getElementById('startOverBtn').addEventListener('click', startOver);
         document.getElementById('newDocBtn').addEventListener('click', startOver);
+        document.getElementById('zoomInBtn').addEventListener('click', () => zoom(currentScale + ZOOM_STEP));
+        document.getElementById('zoomOutBtn').addEventListener('click', () => zoom(currentScale - ZOOM_STEP));
+        document.getElementById('zoomResetBtn').addEventListener('click', () => zoom(baseScale));
 
+        // ─── File load ────────────────────────────────────────────────────────
         async function handleFileSelect(e) {
             const file = e.target.files[0];
             if (!file) return;
-
             try {
                 const originalBuffer = await file.arrayBuffer();
-                
                 pdfBytes = new Uint8Array(originalBuffer.slice(0));
-                
                 pdfArrayBuffer = originalBuffer.slice(0);
-                
-                const loadingTask = pdfjsLib.getDocument({data: pdfBytes});
+
+                const loadingTask = pdfjsLib.getDocument({ data: pdfBytes });
                 pdfDoc = await loadingTask.promise;
-                
+
+                // Compute a sensible initial scale so the PDF fits in the viewport
+                const page = await pdfDoc.getPage(1);
+                const rawVP = page.getViewport({ scale: 1 });
+                const scaleW = VIEWPORT_MAX_WIDTH  / rawVP.width;
+                const scaleH = VIEWPORT_MAX_HEIGHT / rawVP.height;
+                baseScale = Math.min(scaleW, scaleH, 1.5); // never zoom in beyond 1.5× on load
+                currentScale = baseScale;
+
                 await renderFirstPage();
-                
+
                 document.getElementById('uploadSection').style.display = 'none';
                 document.getElementById('canvasSection').style.display = 'block';
+                checkScrollHint();
                 showStatus('PDF loaded successfully. Select the area to crop.', 'success');
             } catch (error) {
                 showStatus('Error loading PDF: ' + error.message, 'error');
@@ -735,49 +847,96 @@
 
         async function renderFirstPage() {
             const page = await pdfDoc.getPage(1);
-            const viewport = page.getViewport({ scale: 1.5 });
-            
-            canvas.width = viewport.width;
+            const viewport = page.getViewport({ scale: currentScale });
+
+            canvas.width  = viewport.width;
             canvas.height = viewport.height;
-            
-            await page.render({
-                canvasContext: ctx,
-                viewport: viewport
-            }).promise;
+
+            await page.render({ canvasContext: ctx, viewport }).promise;
+            updateZoomUI();
+
+            // Reset selection overlay
+            resetSelection();
         }
 
-        function handleMouseDown(e) {
+        // ─── Zoom ─────────────────────────────────────────────────────────────
+        async function zoom(newScale) {
+            newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, newScale));
+            if (Math.abs(newScale - currentScale) < 0.001) return;
+
+            // Preserve scroll position ratio
+            const vp = document.getElementById('canvasViewport');
+            const ratioX = (vp.scrollLeft + vp.clientWidth  / 2) / vp.scrollWidth;
+            const ratioY = (vp.scrollTop  + vp.clientHeight / 2) / vp.scrollHeight;
+
+            currentScale = newScale;
+            await renderFirstPage();
+
+            // Restore scroll position
+            requestAnimationFrame(() => {
+                vp.scrollLeft = ratioX * vp.scrollWidth  - vp.clientWidth  / 2;
+                vp.scrollTop  = ratioY * vp.scrollHeight - vp.clientHeight / 2;
+            });
+
+            checkScrollHint();
+        }
+
+        function updateZoomUI() {
+            document.getElementById('zoomValue').textContent =
+                Math.round((currentScale / baseScale) * 100) + '%';
+        }
+
+        function checkScrollHint() {
+            const vp   = document.getElementById('canvasViewport');
+            const hint = document.getElementById('scrollHint');
+            const overflows = canvas.width  > vp.clientWidth ||
+                              canvas.height > vp.clientHeight;
+            hint.style.display = overflows ? 'flex' : 'none';
+        }
+
+        // ─── Mouse selection ─────────────────────────────────────────────────
+        function getCanvasPos(e) {
             const rect = canvas.getBoundingClientRect();
-            startX = e.clientX - rect.left;
-            startY = e.clientY - rect.top;
+            return {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top
+            };
+        }
+
+        function handleMouseDown(e) {
+            const pos = getCanvasPos(e);
+            startX = pos.x;
+            startY = pos.y;
+            endX   = pos.x;
+            endY   = pos.y;
             isSelecting = true;
         }
 
         function handleMouseMove(e) {
             if (!isSelecting) return;
-            
-            const rect = canvas.getBoundingClientRect();
-            endX = e.clientX - rect.left;
-            endY = e.clientY - rect.top;
-            
+            const pos = getCanvasPos(e);
+            endX = pos.x;
+            endY = pos.y;
             updateSelectionBox();
         }
 
         function handleMouseUp(e) {
             if (!isSelecting) return;
-            
             isSelecting = false;
-            const rect = canvas.getBoundingClientRect();
-            endX = e.clientX - rect.left;
-            endY = e.clientY - rect.top;
-            
-            const x = Math.min(startX, endX);
-            const y = Math.min(startY, endY);
-            const width = Math.abs(endX - startX);
-            const height = Math.abs(endY - startY);
-            
-            if (width > 5 && height > 5) {
-                selection = { x, y, width, height };
+            const pos = getCanvasPos(e);
+            endX = pos.x;
+            endY = pos.y;
+
+            const w = Math.abs(endX - startX);
+            const h = Math.abs(endY - startY);
+
+            if (w > 5 && h > 5) {
+                selection = {
+                    x: Math.min(startX, endX),
+                    y: Math.min(startY, endY),
+                    width: w,
+                    height: h
+                };
                 updateSelectionBox();
                 document.getElementById('cropBtn').disabled = false;
             }
@@ -787,13 +946,10 @@
             const box = document.getElementById('selectionBox');
             const x = Math.min(startX, endX);
             const y = Math.min(startY, endY);
-            const width = Math.abs(endX - startX);
-            const height = Math.abs(endY - startY);
-            
-            box.style.left = x + 'px';
-            box.style.top = y + 'px';
-            box.style.width = width + 'px';
-            box.style.height = height + 'px';
+            box.style.left    = x + 'px';
+            box.style.top     = y + 'px';
+            box.style.width   = Math.abs(endX - startX) + 'px';
+            box.style.height  = Math.abs(endY - startY) + 'px';
             box.style.display = 'block';
         }
 
@@ -803,54 +959,41 @@
             document.getElementById('cropBtn').disabled = true;
         }
 
+        // ─── PDF processing ───────────────────────────────────────────────────
         async function processPDF() {
             if (!selection || !pdfArrayBuffer) return;
-
             try {
                 showModal();
                 document.getElementById('cropBtn').disabled = true;
 
-                const page = await pdfDoc.getPage(1);
-                const viewport = page.getViewport({ scale: 1.5 });
-                
+                const page     = await pdfDoc.getPage(1);
+                const viewport = page.getViewport({ scale: currentScale });
+
+                // Map canvas pixels → PDF units (using the page's native size)
                 const scaleX = page.view[2] / viewport.width;
                 const scaleY = page.view[3] / viewport.height;
-                
+
                 const cropBox = {
-                    x: selection.x * scaleX,
-                    y: (viewport.height - selection.y - selection.height) * scaleY,
-                    width: selection.width * scaleX,
+                    x:      selection.x * scaleX,
+                    y:      (viewport.height - selection.y - selection.height) * scaleY,
+                    width:  selection.width  * scaleX,
                     height: selection.height * scaleY
                 };
 
                 const pdfLibDoc = await PDFLib.PDFDocument.load(pdfArrayBuffer);
-                const newPdf = await PDFLib.PDFDocument.create();
-                
-                const numPages = pdfLibDoc.getPageCount();
-                
+                const newPdf    = await PDFLib.PDFDocument.create();
+                const numPages  = pdfLibDoc.getPageCount();
+
                 for (let i = 0; i < numPages; i++) {
                     const [croppedPage] = await newPdf.copyPages(pdfLibDoc, [i]);
-                    
-                    croppedPage.setCropBox(
-                        cropBox.x,
-                        cropBox.y,
-                        cropBox.width,
-                        cropBox.height
-                    );
-                    
-                    croppedPage.setMediaBox(
-                        cropBox.x,
-                        cropBox.y,
-                        cropBox.width,
-                        cropBox.height
-                    );
-                    
+                    croppedPage.setCropBox (cropBox.x, cropBox.y, cropBox.width, cropBox.height);
+                    croppedPage.setMediaBox(cropBox.x, cropBox.y, cropBox.width, cropBox.height);
                     newPdf.addPage(croppedPage);
                 }
-                
+
                 const pdfBytesOutput = await newPdf.save();
                 processedPdfBlob = new Blob([pdfBytesOutput], { type: 'application/pdf' });
-                
+
                 showSuccess();
                 document.getElementById('cropBtn').disabled = false;
             } catch (error) {
@@ -860,29 +1003,29 @@
             }
         }
 
+        // ─── Modal helpers ────────────────────────────────────────────────────
         function showModal() {
             document.getElementById('modalOverlay').classList.add('active');
             document.getElementById('modalIcon').innerHTML = '<div class="processing-spinner"></div>';
             document.getElementById('modalTitle').textContent = 'Processing PDF';
-            document.getElementById('modalText').textContent = 'Please wait while we process your document...';
-            document.getElementById('progressBar').style.display = 'block';
+            document.getElementById('modalText').textContent  = 'Please wait while we process your document...';
+            document.getElementById('progressBar').style.display  = 'block';
             document.getElementById('modalButtons').style.display = 'none';
         }
 
         function showSuccess() {
             document.getElementById('modalIcon').innerHTML = '<div class="success-icon"></div>';
             document.getElementById('modalTitle').textContent = 'PDF Processed';
-            document.getElementById('modalText').textContent = 'Your document has been processed successfully and is ready to download.';
-            document.getElementById('progressBar').style.display = 'none';
+            document.getElementById('modalText').textContent  = 'Your document has been processed successfully and is ready to download.';
+            document.getElementById('progressBar').style.display  = 'none';
             document.getElementById('modalButtons').style.display = 'block';
         }
 
         function downloadPDF() {
             if (!processedPdfBlob) return;
-            
             const url = URL.createObjectURL(processedPdfBlob);
-            const a = document.createElement('a');
-            a.href = url;
+            const a   = document.createElement('a');
+            a.href     = url;
             a.download = 'cropped_document.pdf';
             a.click();
             URL.revokeObjectURL(url);
@@ -892,35 +1035,32 @@
             document.getElementById('modalOverlay').classList.remove('active');
         }
 
+        // ─── Start over ───────────────────────────────────────────────────────
         function startOver() {
-            pdfDoc = null;
-            pdfBytes = null;
-            pdfArrayBuffer = null;
-            processedPdfBlob = null;
-            selection = null;
-            
+            pdfDoc = pdfBytes = pdfArrayBuffer = processedPdfBlob = selection = null;
+            currentScale = baseScale = 1.5;
+
             document.getElementById('pdfInput').value = '';
             document.getElementById('selectionBox').style.display = 'none';
             document.getElementById('cropBtn').disabled = true;
             document.getElementById('status').style.display = 'none';
-            
+            document.getElementById('scrollHint').style.display = 'none';
+            document.getElementById('zoomValue').textContent = '100%';
+
             ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            document.getElementById('canvasSection').style.display = 'none';
-            document.getElementById('uploadSection').style.display = 'block';
-            
+
+            document.getElementById('canvasSection').style.display  = 'none';
+            document.getElementById('uploadSection').style.display  = 'block';
             closeModal();
         }
 
+        // ─── Status bar ───────────────────────────────────────────────────────
         function showStatus(message, type) {
             const status = document.getElementById('status');
             status.className = 'status ' + type;
-            
-            if (type === 'processing') {
-                status.innerHTML = '<span class="loader"></span>' + message;
-            } else {
-                status.textContent = message;
-            }
+            status.innerHTML = type === 'processing'
+                ? '<span class="loader"></span>' + message
+                : message;
         }
     </script>
 </body>