<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDFConverter | Client-Side PNG⇄PDF</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <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/jszip/3.10.1/jszip.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #4cc9f0;
            --accent: #7209b7;
            --success: #4ade80;
            --warning: #f97316;
            --error: #ef4444;
            --light: #f8fafc;
            --dark: #0f172a;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --border-radius: 12px;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        .dark-mode {
            --primary: #60a5fa;
            --secondary: #7dd3fc;
            --accent: #a78bfa;
            --light: #1e293b;
            --dark: #f1f5f9;
            --gray: #94a3b8;
            --light-gray: #334155;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            transition: var(--transition);
            min-height: 100vh;
        }

        header {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            padding: 1.5rem 2rem;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            font-size: 1.6rem;
        }

        .logo i {
            background: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 10px;
        }

        .privacy-note {
            background: rgba(255, 255, 255, 0.15);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }

        .controls {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .theme-toggle {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: white;
            font-size: 1.2rem;
        }

        .main-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }

        .tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            background: var(--light-gray);
            padding: 0.5rem;
            border-radius: var(--border-radius);
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 1rem;
            border-radius: var(--border-radius);
            background: transparent;
            border: none;
            color: var(--dark);
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .tab.active {
            background: white;
            box-shadow: var(--shadow);
            color: var(--primary);
        }

        .converter-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .card-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--light-gray);
            background: var(--light);
        }

        .card-title {
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-body {
            padding: 2rem;
        }

        .dropzone {
            border: 2px dashed var(--light-gray);
            border-radius: var(--border-radius);
            padding: 3rem 2rem;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            background: var(--light);
        }

        .dropzone:hover, .dropzone.dragover {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.05);
        }

        .dropzone-content {
            max-width: 400px;
            margin: 0 auto;
        }

        .dropzone-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .dropzone h3 {
            margin-bottom: 0.5rem;
            color: var(--dark);
        }

        .dropzone p {
            color: var(--gray);
            margin-bottom: 1.5rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0.8rem 1.5rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: var(--light-gray);
            color: var(--dark);
        }

        .btn-success {
            background: var(--success);
        }

        .btn-warning {
            background: var(--warning);
        }

        .file-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .file-item {
            border: 1px solid var(--light-gray);
            border-radius: var(--border-radius);
            overflow: hidden;
            background: white;
            box-shadow: var(--shadow);
            position: relative;
        }

        .file-thumb {
            width: 100%;
            aspect-ratio: 1/1.414; /* Standard paper ratio */
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .file-thumb img, .file-thumb canvas {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }

        .page-number {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border-radius: 50%;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        .file-info {
            padding: 1rem;
            border-top: 1px solid var(--light-gray);
        }

        .file-name {
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0.5rem;
        }

        .file-size {
            color: var(--gray);
            font-size: 0.85rem;
        }

        .file-actions {
            position: absolute;
            top: 8px;
            left: 8px;
            display: flex;
            gap: 5px;
        }

        .action-btn {
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.8rem;
        }

        .options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .option-group {
            background: var(--light);
            border-radius: var(--border-radius);
            padding: 1.5rem;
        }

        .option-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark);
        }

        select, input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid var(--light-gray);
            border-radius: var(--border-radius);
            background: white;
            color: var(--dark);
            font-size: 1rem;
        }

        input[type="range"] {
            height: 6px;
            -webkit-appearance: none;
            background: var(--light-gray);
            border-radius: 3px;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: var(--primary);
            border-radius: 50%;
            cursor: pointer;
        }

        .progress-container {
            margin: 2rem 0;
            background: var(--light);
            border-radius: var(--border-radius);
            padding: 1.5rem;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .progress-bar {
            height: 10px;
            background: var(--light-gray);
            border-radius: 5px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--primary);
            width: 0%;
            transition: width 0.3s ease;
        }

        .result-stats {
            display: flex;
            justify-content: space-between;
            background: var(--light);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin: 2rem 0;
            align-items: center;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--gray);
            font-size: 0.9rem;
        }

        .result-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin: 2rem 0;
        }

        footer {
            background: var(--dark);
            color: white;
            text-align: center;
            padding: 3rem 2rem;
            margin-top: 4rem;
        }

        .footer-content {
            max-width: 800px;
            margin: 0 auto;
        }

        /* Drag and drop styling */
        .drag-handle {
            cursor: move;
            padding: 5px;
            opacity: 0.6;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
            }
            
            .file-list {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
            
            .options-grid {
                grid-template-columns: 1fr;
            }
            
            .result-actions {
                flex-direction: column;
            }
            
            .result-stats {
                flex-direction: column;
                gap: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="logo">
                <i class="fas fa-file-contract"></i>
                <span>SecureConverter</span>
            </div>
            <div class="privacy-note">
                <i class="fas fa-lock"></i>
            
            </div>
            <div class="controls">
                <button class="theme-toggle" id="themeToggle">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
        </div>
    </header>
    
    <main class="main-container">
        <div class="tabs">
            <button class="tab active" data-tab="png-to-pdf">
                <i class="fas fa-file-image"></i> PNG to PDF
            </button>
            <button class="tab" data-tab="pdf-to-png">
                <i class="fas fa-file-pdf"></i> PDF to PNG
            </button>
        </div>
        
        <!-- PNG to PDF Section -->
        <div class="converter-card" id="pngToPdf">
            <div class="card-header">
                <h2 class="card-title">
                    <i class="fas fa-file-image"></i> Convert PNG to PDF
                </h2>
                <p>Convert images to PDF documents with full privacy</p>
            </div>
            
            <div class="card-body">
                <div class="dropzone" id="pngDropzone">
                    <div class="dropzone-content">
                        <div class="dropzone-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                        <h3>Drag & Drop Images</h3>
                        <p>PNG, JPG, or WebP files. Max 20MB per file.</p>
                        <button class="btn">
                            <i class="fas fa-folder-open"></i> Select Files
                        </button>
                    </div>
                </div>
                
                <div class="file-list" id="pngFileList">
                    <!-- Files will be added here dynamically -->
                </div>
                
                <div class="options-grid">
                    <div class="option-group">
                        <h3 class="option-title">
                            <i class="fas fa-cog"></i> Page Settings
                        </h3>
                        <div class="form-group">
                            <label for="pageSize">Page Size</label>
                            <select id="pageSize">
                                <option value="a4">A4 (210×297mm)</option>
                                <option value="letter">Letter (8.5×11in)</option>
                                <option value="legal">Legal (8.5×14in)</option>
                                <option value="fit">Fit to Image</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="orientation">Orientation</label>
                            <select id="orientation">
                                <option value="auto">Auto (Detect from image)</option>
                                <option value="portrait">Portrait</option>
                                <option value="landscape">Landscape</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="margins">Margins</label>
                            <select id="margins">
                                <option value="none">None</option>
                                <option value="small" selected>Small (10mm)</option>
                                <option value="medium">Medium (20mm)</option>
                                <option value="large">Large (30mm)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <h3 class="option-title">
                            <i class="fas fa-image"></i> Image Settings
                        </h3>
                        <div class="form-group">
                            <label for="scaling">Scaling</label>
                            <select id="scaling">
                                <option value="fit" selected>Fit to Page</option>
                                <option value="fill">Fill Page</option>
                                <option value="actual">Actual Size (100%)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="transparency">
                                <input type="checkbox" id="transparency" checked>
                                Preserve Transparency
                            </label>
                        </div>
                        <div class="form-group">
                            <label for="quality">Compression Quality: <span id="qualityValue">0.8</span></label>
                            <input type="range" id="quality" min="0.5" max="1" step="0.1" value="0.8">
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <h3 class="option-title">
                            <i class="fas fa-file-archive"></i> Output Settings
                        </h3>
                        <div class="form-group">
                            <label for="outputType">Output Type</label>
                            <select id="outputType">
                                <option value="single">Single PDF (all images)</option>
                                <option value="multiple">Multiple PDFs (one per image)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="pdfFormat">PDF Format</label>
                            <select id="pdfFormat">
                                <option value="standard">Standard PDF (smaller)</option>
                                <option value="highQuality">High Quality PDF (larger)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="compressPdf">
                                Compress Final PDF
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="result-stats">
                    <div class="stat-item">
                        <div class="stat-value" id="pageCount">0</div>
                        <div class="stat-label">Pages</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="fileCount">0</div>
                        <div class="stat-label">Files</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="estSize">0 MB</div>
                        <div class="stat-label">Est. Size</div>
                    </div>
                </div>
                
                <div class="result-actions">
                    <button class="btn btn-secondary" id="resetPng">
                        <i class="fas fa-trash-alt"></i> Clear All
                    </button>
                    <button class="btn btn-success" id="convertPng">
                        <i class="fas fa-file-pdf"></i> Convert to PDF
                    </button>
                    <button class="btn" id="downloadPng" disabled>
                        <i class="fas fa-download"></i> Download Results
                    </button>
                </div>
            </div>
        </div>
        
        <!-- PDF to PNG Section -->
        <div class="converter-card" id="pdfToPng" style="display: none;">
            <div class="card-header">
                <h2 class="card-title">
                    <i class="fas fa-file-pdf"></i> Convert PDF to PNG
                </h2>
                <p>Extract PDF pages as high-quality PNG images</p>
            </div>
            
            <div class="card-body">
                <div class="dropzone" id="pdfDropzone">
                    <div class="dropzone-content">
                        <div class="dropzone-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                        <h3>Drag & Drop PDF File</h3>
                        <p>Upload a PDF file to convert to images</p>
                        <button class="btn">
                            <i class="fas fa-folder-open"></i> Select PDF
                        </button>
                    </div>
                </div>
                
                <div class="file-list" id="pdfFileList">
                    <!-- PDF preview will be added here -->
                </div>
                
                <div class="options-grid">
                    <div class="option-group">
                        <h3 class="option-title">
                            <i class="fas fa-image"></i> Image Settings
                        </h3>
                        <div class="form-group">
                            <label for="dpi">Resolution (DPI)</label>
                            <select id="dpi">
                                <option value="72">72 DPI (Web)</option>
                                <option value="150" selected>150 DPI (Good)</option>
                                <option value="300">300 DPI (Print)</option>
                                <option value="600">600 DPI (High Quality)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="bgColor">Background Color</label>
                            <select id="bgColor">
                                <option value="white">White</option>
                                <option value="transparent">Transparent</option>
                                <option value="custom">Custom Color</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="antiAlias" checked>
                                Enable Anti-Aliasing
                            </label>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <h3 class="option-title">
                            <i class="fas fa-crop-alt"></i> Page Selection
                        </h3>
                        <div class="form-group">
                            <label for="pageRange">Page Range</label>
                            <input type="text" id="pageRange" placeholder="e.g. 1-5, 7, 9-12">
                            <small>Leave blank for all pages</small>
                        </div>
                        <div class="form-group">
                            <label for="pageType">Page Type</label>
                            <select id="pageType">
                                <option value="all">All Pages</option>
                                <option value="even">Even Pages Only</option>
                                <option value="odd">Odd Pages Only</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="maxPages">Max Pages to Convert</label>
                            <input type="number" id="maxPages" min="1" max="100" value="20">
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <h3 class="option-title">
                            <i class="fas fa-file-archive"></i> Output Settings
                        </h3>
                        <div class="form-group">
                            <label for="outputFormat">Output Format</label>
                            <select id="outputFormat">
                                <option value="png">PNG (Lossless)</option>
                                <option value="jpg">JPEG (Smaller files)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="outputQuality">Image Quality: <span id="qualityValuePdf">90</span>%</label>
                            <input type="range" id="outputQuality" min="50" max="100" value="90">
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="zipOutput" checked>
                                Zip all images together
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-header">
                        <span>Conversion Progress</span>
                        <span id="progressPercent">0%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                </div>
                
                <div class="result-stats">
                    <div class="stat-item">
                        <div class="stat-value" id="pdfPageCount">0</div>
                        <div class="stat-label">Pages</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="estSizePdf">0 MB</div>
                        <div class="stat-label">Est. Size</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="estTime">0s</div>
                        <div class="stat-label">Est. Time</div>
                    </div>
                </div>
                
                <div class="result-actions">
                    <button class="btn btn-secondary" id="resetPdf">
                        <i class="fas fa-trash-alt"></i> Clear
                    </button>
                    <button class="btn btn-success" id="convertPdf">
                        <i class="fas fa-image"></i> Convert to PNG
                    </button>
                    <button class="btn" id="downloadPdf" disabled>
                        <i class="fas fa-download"></i> Download Results
                    </button>
                </div>
            </div>
        </div>
    </main>
    
   
    </footer>

    <script>
        // Initialize PDF.js worker
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
        const { jsPDF } = window.jspdf;
        
        // DOM elements
        const themeToggle = document.getElementById('themeToggle');
        const tabs = document.querySelectorAll('.tab');
        const pngToPdf = document.getElementById('pngToPdf');
        const pdfToPng = document.getElementById('pdfToPng');
        const pngDropzone = document.getElementById('pngDropzone');
        const pdfDropzone = document.getElementById('pdfDropzone');
        const pngFileList = document.getElementById('pngFileList');
        const pdfFileList = document.getElementById('pdfFileList');
        const convertPngBtn = document.getElementById('convertPng');
        const downloadPngBtn = document.getElementById('downloadPng');
        const resetPngBtn = document.getElementById('resetPng');
        const convertPdfBtn = document.getElementById('convertPdf');
        const downloadPdfBtn = document.getElementById('downloadPdf');
        const resetPdfBtn = document.getElementById('resetPdf');
        const qualitySlider = document.getElementById('quality');
        const qualityValue = document.getElementById('qualityValue');
        const progressFill = document.getElementById('progressFill');
        const progressPercent = document.getElementById('progressPercent');
        
        // State
        let currentTab = 'png-to-pdf';
        let isDarkMode = false;
        let pngFiles = [];
        let pdfFile = null;
        let pdfDoc = null;
        
        // Theme toggle
        themeToggle.addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                document.body.classList.remove('dark-mode');
                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        });
        
        // Tab switching
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                currentTab = tab.dataset.tab;
                
                if (currentTab === 'png-to-pdf') {
                    pngToPdf.style.display = 'block';
                    pdfToPng.style.display = 'none';
                } else {
                    pngToPdf.style.display = 'none';
                    pdfToPng.style.display = 'block';
                }
            });
        });
        
        // Quality slider display
        qualitySlider.addEventListener('input', function() {
            qualityValue.textContent = this.value;
        });
        
        // PNG to PDF file handling
        pngDropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
            pngDropzone.classList.add('dragover');
        });
        
        pngDropzone.addEventListener('dragleave', () => {
            pngDropzone.classList.remove('dragover');
        });
        
        pngDropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            pngDropzone.classList.remove('dragover');
            handleFileSelection(e.dataTransfer.files);
        });
        
        pngDropzone.querySelector('.btn').addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.multiple = true;
            input.click();
            input.addEventListener('change', (e) => {
                handleFileSelection(e.target.files);
            });
        });
        
        // Handle file selection
        function handleFileSelection(files) {
            const maxSize = 20 * 1024 * 1024; // 20MB
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                if (file.size > maxSize) {
                    alert(`File ${file.name} is too large (max 20MB)`);
                    continue;
                }
                
                if (!file.type.match('image.*')) {
                    alert(`File ${file.name} is not an image`);
                    continue;
                }
                
                pngFiles.push(file);
                renderFileThumbnail(file, pngFileList, pngFiles.length - 1);
            }
            
            updateFileStats();
        }
        
        // Render file thumbnail
        function renderFileThumbnail(file, container, index, pageNum = null) {
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            fileItem.dataset.index = index;
            
            const fileThumb = document.createElement('div');
            fileThumb.className = 'file-thumb';
            
            // Create image preview
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                fileThumb.appendChild(img);
            };
            reader.readAsDataURL(file);
            
            // Page number for PDF pages
            if (pageNum !== null) {
                const pageNumber = document.createElement('div');
                pageNumber.className = 'page-number';
                pageNumber.textContent = pageNum + 1;
                fileThumb.appendChild(pageNumber);
            }
            
            // File actions
            const fileActions = document.createElement('div');
            fileActions.className = 'file-actions';
            
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'action-btn';
            deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';
            deleteBtn.onclick = () => removeFile(index, currentTab);
            
            const dragHandle = document.createElement('button');
            dragHandle.className = 'action-btn drag-handle';
            dragHandle.innerHTML = '<i class="fas fa-grip-lines"></i>';
            
            fileActions.appendChild(deleteBtn);
            if (pageNum === null) {
                fileActions.appendChild(dragHandle);
            }
            
            fileThumb.appendChild(fileActions);
            
            // File info
            const fileInfo = document.createElement('div');
            fileInfo.className = 'file-info';
            
            const fileName = document.createElement('div');
            fileName.className = 'file-name';
            fileName.textContent = file.name;
            
            const fileSize = document.createElement('div');
            fileSize.className = 'file-size';
            fileSize.textContent = formatFileSize(file.size);
            
            fileInfo.appendChild(fileName);
            fileInfo.appendChild(fileSize);
            
            // Assemble file item
            fileItem.appendChild(fileThumb);
            fileItem.appendChild(fileInfo);
            
            container.appendChild(fileItem);
        }
        
        // Remove file
        function removeFile(index, tab) {
            if (tab === 'png-to-pdf') {
                pngFiles.splice(index, 1);
                updateFileList(pngFileList, pngFiles);
            } else {
                pdfFile = null;
                pdfFileList.innerHTML = '';
                pdfDoc = null;
            }
            updateFileStats();
        }
        
        // Update file list display
        function updateFileList(container, files) {
            container.innerHTML = '';
            files.forEach((file, index) => {
                renderFileThumbnail(file, container, index);
            });
        }
        
        // Update file statistics
        function updateFileStats() {
            document.getElementById('fileCount').textContent = pngFiles.length;
            document.getElementById('pageCount').textContent = pngFiles.length;
            
            // Calculate estimated size (very rough estimate)
            const totalSize = pngFiles.reduce((sum, file) => sum + file.size, 0);
            const estSize = totalSize > 0 ? (totalSize * 0.5) / (1024 * 1024) : 0;
            document.getElementById('estSize').textContent = estSize.toFixed(1) + ' MB';
        }
        
        // 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];
        }
        
        // PDF to PDF file handling
        pdfDropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
            pdfDropzone.classList.add('dragover');
        });
        
        pdfDropzone.addEventListener('dragleave', () => {
            pdfDropzone.classList.remove('dragover');
        });
        
        pdfDropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            pdfDropzone.classList.remove('dragover');
            handlePdfFileSelection(e.dataTransfer.files);
        });
        
        pdfDropzone.querySelector('.btn').addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.pdf';
            input.click();
            input.addEventListener('change', (e) => {
                handlePdfFileSelection(e.target.files);
            });
        });
        
        // Handle PDF file selection
        function handlePdfFileSelection(files) {
            if (files.length === 0) return;
            
            const file = files[0];
            const maxSize = 200 * 1024 * 1024; // 200MB
            
            if (file.size > maxSize) {
                alert('PDF is too large (max 200MB)');
                return;
            }
            
            if (!file.type.match('application/pdf')) {
                alert('Please select a PDF file');
                return;
            }
            
            pdfFile = file;
            pdfFileList.innerHTML = '';
            
            // Load PDF to get preview
            const reader = new FileReader();
            reader.onload = function(e) {
                const typedarray = new Uint8Array(e.target.result);
                
                // Load the PDF
                pdfjsLib.getDocument(typedarray).promise.then(pdf => {
                    pdfDoc = pdf;
                    document.getElementById('pdfPageCount').textContent = pdf.numPages;
                    
                    // Estimate output size and time
                    const estSize = (file.size * 1.5) / (1024 * 1024);
                    document.getElementById('estSizePdf').textContent = estSize.toFixed(1) + ' MB';
                    
                    const estTime = Math.min(Math.floor(pdf.numPages * 0.5), 30);
                    document.getElementById('estTime').textContent = estTime + 's';
                    
                    // Render first page as preview
                    renderPdfPreview(pdf, 0);
                }).catch(error => {
                    console.error('Error loading PDF:', error);
                    alert('Error loading PDF. The file may be corrupted or password protected.');
                });
            };
            reader.readAsArrayBuffer(file);
        }
        
        // Render PDF preview
        function renderPdfPreview(pdf, pageNumber) {
            pdf.getPage(pageNumber + 1).then(page => {
                const viewport = page.getViewport({ scale: 0.5 });
                
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                
                page.render(renderContext).promise.then(() => {
                    const fileItem = document.createElement('div');
                    fileItem.className = 'file-item';
                    
                    const fileThumb = document.createElement('div');
                    fileThumb.className = 'file-thumb';
                    fileThumb.appendChild(canvas);
                    
                    const pageNumber = document.createElement('div');
                    pageNumber.className = 'page-number';
                    pageNumber.textContent = '1';
                    fileThumb.appendChild(pageNumber);
                    
                    const fileInfo = document.createElement('div');
                    fileInfo.className = 'file-info';
                    
                    const fileName = document.createElement('div');
                    fileName.className = 'file-name';
                    fileName.textContent = pdfFile.name;
                    
                    const fileSize = document.createElement('div');
                    fileSize.className = 'file-size';
                    fileSize.textContent = formatFileSize(pdfFile.size);
                    
                    fileInfo.appendChild(fileName);
                    fileInfo.appendChild(fileSize);
                    
                    fileItem.appendChild(fileThumb);
                    fileItem.appendChild(fileInfo);
                    
                    pdfFileList.appendChild(fileItem);
                });
            });
        }
        
        // Initialize file download names
        document.getElementById('downloadPng').innerHTML = 
            '<i class="fas fa-download"></i> Download PDF';
        document.getElementById('downloadPdf').innerHTML = 
            '<i class="fas fa-download"></i> Download PNG';
        
        // Simulate conversion process
        convertPngBtn.addEventListener('click', () => {
            if (pngFiles.length === 0) {
                alert('Please add at least one image to convert');
                return;
            }
            
            convertPngBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Converting...';
            convertPngBtn.disabled = true;
            
            // Simulate conversion process
            setTimeout(() => {
                convertPngBtn.innerHTML = '<i class="fas fa-file-pdf"></i> Convert to PDF';
                convertPngBtn.disabled = false;
                downloadPngBtn.disabled = false;
                downloadPngBtn.classList.add('btn-success');
            }, 2000);
        });
        
        convertPdfBtn.addEventListener('click', () => {
            if (!pdfFile) {
                alert('Please add a PDF file to convert');
                return;
            }
            
            convertPdfBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Converting...';
            convertPdfBtn.disabled = true;
            
            // Simulate conversion process
            let progress = 0;
            const interval = setInterval(() => {
                progress += 5;
                if (progress > 100) progress = 100;
                
                progressFill.style.width = progress + '%';
                progressPercent.textContent = progress + '%';
                
                if (progress === 100) {
                    clearInterval(interval);
                    convertPdfBtn.innerHTML = '<i class="fas fa-image"></i> Convert to PNG';
                    convertPdfBtn.disabled = false;
                    downloadPdfBtn.disabled = false;
                    downloadPdfBtn.classList.add('btn-success');
                }
            }, 200);
        });
        
        // Reset buttons
        resetPngBtn.addEventListener('click', () => {
            pngFiles = [];
            pngFileList.innerHTML = '';
            downloadPngBtn.disabled = true;
            downloadPngBtn.classList.remove('btn-success');
            updateFileStats();
        });
        
        resetPdfBtn.addEventListener('click', () => {
            pdfFile = null;
            pdfFileList.innerHTML = '';
            pdfDoc = null;
            downloadPdfBtn.disabled = true;
            downloadPdfBtn.classList.remove('btn-success');
            progressFill.style.width = '0%';
            progressPercent.textContent = '0%';
            document.getElementById('pdfPageCount').textContent = '0';
            document.getElementById('estSizePdf').textContent = '0 MB';
            document.getElementById('estTime').textContent = '0s';
        });
    </script>
</body>
</html>