Promote version 4a5eddd to main

Promoted commit 4a5eddd862cbbbc2cd96e8c2318c0bd5af578841 to main branch

index.html

@@ -35,6 +35,7 @@
                                 </button>
                             </div>
                         </div>
+
                         <div class="mt-6">
                             <label for="page-count" class="block text-sm font-medium text-gray-700 mb-2">Number of A4 Pages</label>
                             <div class="flex items-center gap-4">
@@ -44,13 +45,6 @@
                         </div>
 
                         <div class="mt-6">
-                            <label for="overlap" class="block text-sm font-medium text-gray-700 mb-2">Overlap between pages (mm)</label>
-                            <div class="flex items-center gap-4">
-                                <input type="range" id="overlap" min="0" max="20" value="5" class="w-full">
-                                <span id="overlap-value" class="font-medium text-gray-800">5mm</span>
-                            </div>
-                        </div>
-<div class="mt-6">
                             <label for="orientation" class="block text-sm font-medium text-gray-700 mb-2">Orientation</label>
                             <div class="flex gap-4">
                                 <button id="portrait" class="orientation-btn active bg-indigo-100 text-indigo-700 px-4 py-2 rounded-lg">
@@ -86,17 +80,11 @@
             <div id="result-section" class="hidden">
                 <div class="flex justify-between items-center mb-4">
                     <h2 class="text-2xl font-bold text-gray-800">Your Poster Pages</h2>
-                    <div class="flex gap-2">
-                        <button id="download-all" class="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
-                            <i data-feather="download"></i>
-                            Download All
-                        </button>
-                        <button id="download-pdf" class="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
-                            <i data-feather="file-text"></i>
-                            PDF for Print
-                        </button>
-                    </div>
-</div>
+                    <button id="download-all" class="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
+                        <i data-feather="download"></i>
+                        Download All
+                    </button>
+                </div>
 
                 <div id="poster-pages" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                     <!-- Generated pages will appear here -->
@@ -120,11 +108,10 @@
     </main>
 
     <custom-footer></custom-footer>
+
     <script src="script.js"></script>
     <script>
-        document.addEventListener('jspdfLoaded', function() {
-            feather.replace();
-        });
+        feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

script.js

@@ -1,15 +1,5 @@
-
-// Load jsPDF library
-const script = document.createElement('script');
-script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
-script.onload = function() {
-    window.jspdf = window.jspdf.jsPDF;
-    document.dispatchEvent(new Event('jspdfLoaded'));
-};
-document.head.appendChild(script);
-
 document.addEventListener('DOMContentLoaded', function() {
-// DOM elements
+    // DOM elements
     const fileInput = document.getElementById('file-input');
     const uploadBtn = document.getElementById('upload-btn');
     const dropZone = document.getElementById('drop-zone');
@@ -25,66 +15,33 @@ document.addEventListener('DOMContentLoaded', function() {
     const resultSection = document.getElementById('result-section');
     const posterPages = document.getElementById('poster-pages');
     const downloadAllBtn = document.getElementById('download-all');
-    const downloadPdfBtn = document.getElementById('download-pdf');
-    const overlapInput = document.getElementById('overlap');
-    const overlapValue = document.getElementById('overlap-value');
 
     // Current image and settings
-let currentImage = null;
+    let currentImage = null;
     let currentOrientation = 'portrait';
     let currentPageCount = 4;
-    let currentOverlap = 5; // in mm
-// Event listeners
-    // Set up event listeners properly
-    if (uploadBtn && fileInput) {
-        uploadBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            fileInput.click();
-        });
-    }
 
-    if (fileInput) {
-        fileInput.addEventListener('change', handleFileSelect);
-    }
-
-    if (dropZone) {
-        dropZone.addEventListener('click', () => fileInput.click());
-        dropZone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            handleDragOver(e);
-        });
-        dropZone.addEventListener('dragleave', (e) => {
-            e.preventDefault();
-            handleDragLeave(e);
-        });
-        dropZone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            handleDrop(e);
-        });
-    }
-pageCountInput.addEventListener('input', updatePageCount);
-    overlapInput.addEventListener('input', updateOverlap);
-portraitBtn.addEventListener('click', () => setOrientation('portrait'));
+    // Event listeners
+    uploadBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', handleFileSelect);
+    dropZone.addEventListener('dragover', handleDragOver);
+    dropZone.addEventListener('dragleave', handleDragLeave);
+    dropZone.addEventListener('drop', handleDrop);
+    pageCountInput.addEventListener('input', updatePageCount);
+    portraitBtn.addEventListener('click', () => setOrientation('portrait'));
     landscapeBtn.addEventListener('click', () => setOrientation('landscape'));
     generateBtn.addEventListener('click', generatePosterPages);
     downloadAllBtn.addEventListener('click', downloadAllPages);
-    downloadPdfBtn.addEventListener('click', generatePDF);
 
     // Update page count display
-function updatePageCount() {
+    function updatePageCount() {
         currentPageCount = parseInt(pageCountInput.value);
         pageCountValue.textContent = currentPageCount;
     }
 
     // Set orientation
-    // Update overlap value
-    function updateOverlap() {
-        currentOverlap = parseInt(overlapInput.value);
-        overlapValue.textContent = `${currentOverlap}mm`;
-    }
-
     function setOrientation(orientation) {
-currentOrientation = orientation;
+        currentOrientation = orientation;
         if (orientation === 'portrait') {
             portraitBtn.classList.add('active', 'bg-indigo-100', 'text-indigo-700');
             portraitBtn.classList.remove('border', 'border-gray-300');
@@ -108,53 +65,44 @@ currentOrientation = orientation;
 
     // Handle drag over
     function handleDragOver(e) {
+        e.preventDefault();
         e.stopPropagation();
         dropZone.classList.add('highlight');
     }
 
     // Handle drag leave
     function handleDragLeave(e) {
+        e.preventDefault();
         e.stopPropagation();
         dropZone.classList.remove('highlight');
     }
+
     // Handle drop
     function handleDrop(e) {
+        e.preventDefault();
         e.stopPropagation();
         dropZone.classList.remove('highlight');
         
-        const dt = e.dataTransfer;
-        const file = dt.files[0];
-        
+        const file = e.dataTransfer.files[0];
         if (file && file.type.match('image.*')) {
             processImageFile(file);
-        } else {
-            alert('Please drop an image file only');
         }
     }
-// Process image file
-    function processImageFile(file) {
-        if (!file.type.match('image.*')) {
-            alert('Please select an image file (JPEG, PNG, etc.)');
-            return;
-        }
 
+    // Process image file
+    function processImageFile(file) {
         const reader = new FileReader();
         reader.onload = function(e) {
             currentImage = new Image();
             currentImage.onload = function() {
                 showPreview();
             };
-            currentImage.onerror = function() {
-                alert('Error loading image');
-            };
             currentImage.src = e.target.result;
         };
-        reader.onerror = function() {
-            alert('Error reading file');
-        };
         reader.readAsDataURL(file);
     }
-// Show preview
+
+    // Show preview
     function showPreview() {
         imagePreview.src = currentImage.src;
         imagePreviewContainer.classList.remove('hidden');
@@ -213,11 +161,12 @@ currentOrientation = orientation;
         
         // Draw the image on canvas
         ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
-        // Calculate each page's dimensions with overlap
-        const overlapPx = currentOverlap * canvas.width / (cols * 210); // Convert mm to pixels based on scale
-        const pageWidth = canvas.width / cols + overlapPx * 2;
-        const pageHeight = canvas.height / rows + overlapPx * 2;
-// Create individual pages
+        
+        // Calculate each page's dimensions
+        const pageWidth = canvas.width / cols;
+        const pageHeight = canvas.height / rows;
+        
+        // Create individual pages
         for (let row = 0; row < rows; row++) {
             for (let col = 0; col < cols; col++) {
                 const pageIndex = row * cols + col;
@@ -230,11 +179,12 @@ currentOrientation = orientation;
                 const pageCtx = pageCanvas.getContext('2d');
                 
                 // Calculate source dimensions
-                const sx = Math.max(0, col * (canvas.width / cols) - overlapPx);
-                const sy = Math.max(0, row * (canvas.height / rows) - overlapPx);
+                const sx = col * pageWidth;
+                const sy = row * pageHeight;
                 const sw = pageWidth;
                 const sh = pageHeight;
-// Draw the portion of the image on the page
+                
+                // Draw the portion of the image on the page
                 pageCtx.drawImage(
                     canvas,
                     sx, sy, sw, sh,
@@ -321,31 +271,4 @@ currentOrientation = orientation;
             document.body.removeChild(link);
         });
     }
-
-    // Generate PDF with all pages
-    function generatePDF() {
-        const { jsPDF } = window.jspdf;
-        const pdf = new jsPDF({
-            orientation: currentOrientation === 'portrait' ? 'p' : 'l',
-            unit: 'mm',
-            format: 'a4'
-        });
-
-        const pages = posterPages.querySelectorAll('.poster-page img');
-        
-        pages.forEach((img, index) => {
-            if (index > 0) {
-                pdf.addPage('a4', currentOrientation === 'portrait' ? 'p' : 'l');
-            }
-            
-            // Add image to PDF page (A4 dimensions: 210x297mm or 297x210mm)
-            const width = currentOrientation === 'portrait' ? 210 : 297;
-            const height = currentOrientation === 'portrait' ? 297 : 210;
-            
-            pdf.addImage(img.src, 'JPEG', 0, 0, width, height, undefined, 'FAST');
-        });
-
-        pdf.save('poster-pages.pdf');
-    }
-}
 });

style.css

@@ -7,17 +7,14 @@
 .orientation-btn.active {
     border: 2px solid #6366f1;
 }
+
 .poster-page {
     position: relative;
     background-color: white;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    break-inside: avoid;
 }
 
-#download-pdf {
-    transition: all 0.2s ease;
-}
 .poster-page::before {
     content: "";
     position: absolute;