Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelPDF Features | Premium PDF-Image Converter</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%); | |
| min-height: 100vh; | |
| } | |
| .card { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| } | |
| .feature-card { | |
| transition: all 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen py-8 px-4 sm:px-6 lg:px-8"> | |
| <!-- Header --> | |
| <header class="max-w-7xl mx-auto mb-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <div class="bg-indigo-600 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-image text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-gray-900">Pixel<span class="text-indigo-600">PDF</span></h1> | |
| </div> | |
| <nav class="flex space-x-1 sm:space-x-4"> | |
| <a href="index.html" class="px-4 py-2 rounded-lg hover:bg-indigo-50 text-gray-900 font-medium">Home</a> | |
| <a href="features.html" class="px-4 py-2 rounded-lg bg-indigo-50 text-indigo-600 font-medium">Features</a> | |
| <a href="pricing.html" class="px-4 py-2 rounded-lg hover:bg-indigo-50 text-gray-900 font-medium">Pricing</a> | |
| <a href="contact.html" class="px-4 py-2 rounded-lg hover:bg-indigo-50 text-gray-900 font-medium">Contact</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Features Section --> | |
| <section class="max-w-7xl mx-auto mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Premium Conversion Features</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need for professional document conversion</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature cards from original index.html --> | |
| <div class="feature-card card p-8"> | |
| <div class="bg-indigo-100 w-14 h-14 rounded-xl flex items-center justify-center mb-6"> | |
| <i class="fas fa-lock text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Military-Grade Security</h3> | |
| <p class="text-gray-600">All processing happens locally in your browser. Your files never touch our servers.</p> | |
| </div> | |
| <!-- Include all other feature cards here --> | |
| <!-- ... --> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="max-w-7xl mx-auto pt-8 border-t border-gray-200"> | |
| <!-- Footer content from original index.html --> | |
| </footer> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Swarnabha123/toolz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelPDF | Premium PDF-Image Converter</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%); | |
| min-height: 100vh; | |
| } | |
| .card { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); | |
| } | |
| .drop-zone { | |
| border: 2px dashed #c7d2fe; | |
| border-radius: 16px; | |
| transition: all 0.3s; | |
| } | |
| .drop-zone.active { | |
| border-color: #6366f1; | |
| background-color: #eef2ff; | |
| } | |
| .tab-btn { | |
| transition: all 0.3s; | |
| position: relative; | |
| } | |
| .tab-btn.active { | |
| color: #6366f1; | |
| } | |
| .tab-btn.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: #6366f1; | |
| border-radius: 3px; | |
| } | |
| .preview-container { | |
| transition: all 0.3s; | |
| } | |
| .preview-item { | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.2s; | |
| } | |
| .preview-item:hover { | |
| transform: scale(1.02); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| transition: all 0.3s; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 7px 15px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .floating-btn { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .feature-card { | |
| transition: all 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen py-8 px-4 sm:px-6 lg:px-8"> | |
| <!-- Header --> | |
| <header class="max-w-7xl mx-auto mb-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-image text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-dark">Pixel<span class="text-primary">PDF</span></h1> | |
| </div> | |
| <nav class="flex space-x-1 sm:space-x-4"> | |
| <a href="index.html" class="px-4 py-2 rounded-lg hover:bg-indigo-50 text-dark font-medium">Home</a> | |
| <a href="features.html" class="px-4 py-2 rounded-lg hover:bg-indigo-50 text-dark font-medium">Features</a> | |
| <a href="pricing.html" class="px-4 py-2 rounded-lg hover:bg-indigo-50 text-dark font-medium">Pricing</a> | |
| <a href="contact.html" class="px-4 py-2 rounded-lg hover:bg-indigo-50 text-dark font-medium">Contact</a> | |
| </nav> | |
| <div class="mt-6 md:mt-0"> | |
| <button class="bg-white text-primary font-semibold py-2 px-6 rounded-lg border border-primary hover:bg-indigo-50 transition">Login</button> | |
| <button class="bg-primary text-white font-semibold py-2 px-6 rounded-lg ml-3 hover:bg-indigo-700 transition">Sign Up</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="max-w-7xl mx-auto mb-20"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-dark mb-6">Convert PDFs to Images & Images to PDFs</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">Premium quality conversions with our state-of-the-art processing technology. Fast, secure, and completely free!</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <div class="bg-white card py-3 px-6 rounded-xl flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-bolt text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Lightning Fast</p> | |
| <p class="text-sm text-gray-500">Convert in seconds</p> | |
| </div> | |
| </div> | |
| <div class="bg-white card py-3 px-6 rounded-xl flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-shield-alt text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Secure Processing</p> | |
| <p class="text-sm text-gray-500">Files never leave your device</p> | |
| </div> | |
| </div> | |
| <div class="bg-white card py-3 px-6 rounded-xl flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-infinity text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Unlimited Conversions</p> | |
| <p class="text-sm text-gray-500">No restrictions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Converter Section --> | |
| <section class="max-w-4xl mx-auto mb-20"> | |
| <div class="card p-1 bg-indigo-50 rounded-xl mb-8"> | |
| <div class="flex"> | |
| <button id="pdfToImageTab" class="tab-btn flex-1 py-4 px-6 text-center font-semibold text-gray-500 rounded-xl active">PDF to Image</button> | |
| <button id="imageToPdfTab" class="tab-btn flex-1 py-4 px-6 text-center font-semibold text-gray-500 rounded-xl">Image to PDF</button> | |
| </div> | |
| </div> | |
| <!-- PDF to Image Converter --> | |
| <div id="pdfToImageConverter" class="card p-8"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-bold text-dark mb-2">Convert PDF to Images</h2> | |
| <p class="text-gray-600">Upload your PDF file and convert each page to high-quality images</p> | |
| </div> | |
| <div class="drop-zone p-10 text-center mb-8 cursor-pointer" id="pdfDropZone"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-cloud-upload-alt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-2">Drag & Drop your PDF here</h3> | |
| <p class="text-gray-500 mb-4">or</p> | |
| <button class="btn-primary text-white font-semibold py-3 px-8 rounded-lg">Browse Files</button> | |
| <p class="text-gray-500 mt-4">Supports PDF files up to 50MB</p> | |
| </div> | |
| <input type="file" id="pdfInput" accept=".pdf" class="hidden"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Image Format</label> | |
| <select class="w-full p-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"> | |
| <option>JPG (High Quality)</option> | |
| <option>PNG (Lossless)</option> | |
| <option>WebP (Efficient)</option> | |
| </select> | |
| </div> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Image Quality</label> | |
| <select class="w-full p-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"> | |
| <option>High (300 DPI)</option> | |
| <option>Medium (200 DPI)</option> | |
| <option>Low (150 DPI)</option> | |
| </select> | |
| </div> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Page Range</label> | |
| <select class="w-full p-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"> | |
| <option>All Pages</option> | |
| <option>Custom Range</option> | |
| <option>Current Page Only</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="btn-primary text-white font-semibold py-3 px-12 rounded-lg mb-4">Convert to Images</button> | |
| <p class="text-gray-500">Your files are processed locally - no uploads to our servers</p> | |
| </div> | |
| </div> | |
| <!-- Image to PDF Converter (Hidden by default) --> | |
| <div id="imageToPdfConverter" class="card p-8 hidden"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-bold text-dark mb-2">Convert Images to PDF</h2> | |
| <p class="text-gray-600">Upload multiple images and combine them into a single PDF document</p> | |
| </div> | |
| <div class="drop-zone p-10 text-center mb-8 cursor-pointer" id="imageDropZone"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-cloud-upload-alt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-2">Drag & Drop your Images here</h3> | |
| <p class="text-gray-500 mb-4">or</p> | |
| <button class="btn-primary text-white font-semibold py-3 px-8 rounded-lg">Browse Files</button> | |
| <p class="text-gray-500 mt-4">Supports JPG, PNG, WebP up to 50MB total</p> | |
| </div> | |
| <input type="file" id="imageInput" accept="image/*" multiple class="hidden"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Page Size</label> | |
| <select class="w-full p-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"> | |
| <option>A4 (210 × 297mm)</option> | |
| <option>Letter (8.5 × 11in)</option> | |
| <option>Legal (8.5 × 14in)</option> | |
| <option>Custom Size</option> | |
| </select> | |
| </div> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Page Orientation</label> | |
| <select class="w-full p-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"> | |
| <option>Portrait</option> | |
| <option>Landscape</option> | |
| <option>Auto Detect</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="btn-primary text-white font-semibold py-3 px-12 rounded-lg mb-4">Create PDF</button> | |
| <p class="text-gray-500">Your files are processed locally - no uploads to our servers</p> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div id="previewSection" class="card p-8 mt-8 hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-dark">Conversion Preview</h3> | |
| <button class="text-primary font-semibold flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download All | |
| </button> | |
| </div> | |
| <div class="preview-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"> | |
| <!-- Preview items will be added here dynamically --> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button class="bg-white text-primary font-semibold py-2 px-6 rounded-lg border border-primary hover:bg-indigo-50 transition"> | |
| <i class="fas fa-redo mr-2"></i> Convert Another File | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="max-w-4xl mx-auto mb-20"> | |
| <div class="card p-12 bg-gradient-to-r from-primary to-secondary text-center text-white rounded-2xl relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-opacity-5 bg-white"></div> | |
| <div class="relative z-10"> | |
| <h2 class="text-3xl font-bold mb-4">Ready to Transform Your Documents?</h2> | |
| <p class="text-indigo-100 mb-8 text-lg max-w-2xl mx-auto">Join thousands of professionals who use PixelPDF for their document conversion needs</p> | |
| <button class="bg-white text-primary font-bold py-3 px-8 rounded-lg hover:bg-indigo-50 transition">Get Started for Free</button> | |
| </div> | |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-white bg-opacity-20 rounded-full"></div> | |
| <div class="absolute -top-8 -left-8 w-40 h-40 bg-white bg-opacity-10 rounded-full"></div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="max-w-7xl mx-auto pt-8 border-t border-gray-200"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary w-8 h-8 rounded-lg flex items-center justify-center mr-2"> | |
| <i class="fas fa-file-image text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">PixelPDF</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Premium document conversion tools for professionals.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-dark mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Features</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Pricing</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Use Cases</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-dark mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Documentation</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Blog</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-dark mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary">GDPR</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-center py-6 text-gray-500 border-t border-gray-200"> | |
| <p>© 2023 PixelPDF. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-8 right-8"> | |
| <button class="floating-btn bg-primary text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg glow"> | |
| <i class="fas fa-comment-alt text-xl"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| const pdfToImageTab = document.getElementById('pdfToImageTab'); | |
| const imageToPdfTab = document.getElementById('imageToPdfTab'); | |
| const pdfToImageConverter = document.getElementById('pdfToImageConverter'); | |
| const imageToPdfConverter = document.getElementById('imageToPdfConverter'); | |
| pdfToImageTab.addEventListener('click', () => { | |
| pdfToImageTab.classList.add('active'); | |
| imageToPdfTab.classList.remove('active'); | |
| pdfToImageConverter.classList.remove('hidden'); | |
| imageToPdfConverter.classList.add('hidden'); | |
| }); | |
| imageToPdfTab.addEventListener('click', () => { | |
| imageToPdfTab.classList.add('active'); | |
| pdfToImageTab.classList.remove('active'); | |
| imageToPdfConverter.classList.remove('hidden'); | |
| pdfToImageConverter.classList.add('hidden'); | |
| }); | |
| // Drop zone functionality | |
| const pdfDropZone = document.getElementById('pdfDropZone'); | |
| const imageDropZone = document.getElementById('imageDropZone'); | |
| const pdfInput = document.getElementById('pdfInput'); | |
| const imageInput = document.getElementById('imageInput'); | |
| const previewSection = document.getElementById('previewSection'); | |
| const previewContainer = document.querySelector('.preview-container'); | |
| // PDF Drop Zone | |
| pdfDropZone.addEventListener('click', () => { | |
| pdfInput.click(); | |
| }); | |
| pdfDropZone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| pdfDropZone.classList.add('active'); | |
| }); | |
| pdfDropZone.addEventListener('dragleave', () => { | |
| pdfDropZone.classList.remove('active'); | |
| }); | |
| pdfDropZone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| pdfDropZone.classList.remove('active'); | |
| const file = e.dataTransfer.files[0]; | |
| if (file && file.type === 'application/pdf') { | |
| handleFile(file); | |
| } else { | |
| alert('Please drop a valid PDF file'); | |
| } | |
| }); | |
| pdfInput.addEventListener('change', (e) => { | |
| if (e.target.files.length) { | |
| handleFile(e.target.files[0]); | |
| } | |
| }); | |
| // Image Drop Zone | |
| imageDropZone.addEventListener('click', () => { | |
| imageInput.click(); | |
| }); | |
| imageDropZone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| imageDropZone.classList.add('active'); | |
| }); | |
| imageDropZone.addEventListener('dragleave', () => { | |
| imageDropZone.classList.remove('active'); | |
| }); | |
| imageDropZone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| imageDropZone.classList.remove('active'); | |
| const files = e.dataTransfer.files; | |
| if (files.length) { | |
| handleImageFiles(files); | |
| } | |
| }); | |
| imageInput.addEventListener('change', (e) => { | |
| if (e.target.files.length) { | |
| handleImageFiles(e.target.files); | |
| } | |
| }); | |
| // Handle file function | |
| function handleFile(file) { | |
| // In a real app, you would process the PDF here | |
| // For this demo, we'll simulate processing | |
| // Show preview section | |
| previewSection.classList.remove('hidden'); | |
| // Clear previous previews | |
| previewContainer.innerHTML = ''; | |
| // Simulate processing 3 pages | |
| for (let i = 1; i <= 3; i++) { | |
| const previewItem = document.createElement('div'); | |
| previewItem.className = 'preview-item bg-white rounded-xl overflow-hidden'; | |
| previewItem.innerHTML = ` | |
| <div class="relative"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48"></div> | |
| <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold py-1 px-2 rounded">Page ${i}</div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="font-semibold text-dark mb-1">${file.name.replace('.pdf', '')}_page${i}.jpg</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">1.2 MB</span> | |
| <button class="text-primary hover:text-indigo-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| previewContainer.appendChild(previewItem); | |
| } | |
| // Scroll to preview section | |
| previewSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Handle image files function | |
| function handleImageFiles(files) { | |
| // Show preview section | |
| previewSection.classList.remove('hidden'); | |
| // Clear previous previews | |
| previewContainer.innerHTML = ''; | |
| // Show up to 4 images | |
| const fileCount = Math.min(files.length, 4); | |
| for (let i = 0; i < fileCount; i++) { | |
| const file = files[i]; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const previewItem = document.createElement('div'); | |
| previewItem.className = 'preview-item bg-white rounded-xl overflow-hidden'; | |
| previewItem.innerHTML = ` | |
| <div class="relative"> | |
| <img src="${e.target.result}" alt="Preview" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold py-1 px-2 rounded">${i+1}</div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="font-semibold text-dark mb-1 truncate">${file.name}</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">${formatFileSize(file.size)}</span> | |
| <button class="text-primary hover:text-indigo-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| previewContainer.appendChild(previewItem); | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| // If more than 4 files, show a count | |
| if (files.length > 4) { | |
| const extraCount = files.length - 4; | |
| const previewItem = document.createElement('div'); | |
| previewItem.className = 'preview-item bg-indigo-50 rounded-xl flex items-center justify-center h-full'; | |
| previewItem.innerHTML = ` | |
| <div class="text-center p-4"> | |
| <div class="bg-primary bg-opacity-10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-plus text-primary"></i> | |
| </div> | |
| <p class="font-semibold text-dark">+${extraCount} more</p> | |
| </div> | |
| `; | |
| previewContainer.appendChild(previewItem); | |
| } | |
| // Scroll to preview section | |
| previewSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Format file size | |
| function formatFileSize(bytes) { | |
| if (bytes === 0) return '0 Bytes'; | |
| const k = 1024; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; | |
| } | |
| // Convert buttons functionality | |
| document.querySelectorAll('#pdfToImageConverter button, #imageToPdfConverter button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Simulate conversion process | |
| const progressBar = document.createElement('div'); | |
| progressBar.className = 'w-full bg-gray-200 rounded-full h-2.5 mb-4'; | |
| progressBar.innerHTML = '<div class="progress-bar bg-primary h-2.5 rounded-full" style="width: 0%"></div>'; | |
| button.parentNode.insertBefore(progressBar, button); | |
| button.disabled = true; | |
| button.textContent = 'Processing...'; | |
| let width = 0; | |
| const interval = setInterval(() => { | |
| width += 5; | |
| progressBar.querySelector('.progress-bar').style.width = width + '%'; | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| button.textContent = 'Download Results'; | |
| button.classList.add('glow'); | |
| button.disabled = false; | |
| // Show preview section if not already shown | |
| previewSection.classList.remove('hidden'); | |
| }, 500); | |
| } | |
| }, 50); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |