<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flatten PDF Forms - Free Online Tool | Toolverse</title>
    <meta name="description" content="Free online PDF form flattening tool. Convert fillable PDF forms to static PDFs by flattening form fields. Remove form functionality while preserving the visual appearance.">
    <meta name="keywords" content="PDF flatten, PDF form flatten, flatten PDF forms, PDF converter, form fields, static PDF">
    
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-37R3LTBXF1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-37R3LTBXF1');
</script>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../assets/css/style.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
        }

        /* Header Styles - Matching Home Page */
        .header {
            z-index: 1000;
            position: relative;
        }

        .navbar {
            padding: 15px 0;
            min-height: 70px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        }

        .navbar-light .navbar-brand,
        .navbar-brand {
            font-size: 1.8rem;
            font-weight: 700;
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .navbar-brand:hover {
            color: #f8f9fa !important;
            text-decoration: none;
            transform: scale(1.05);
            transition: all 0.3s ease;
        }

        .navbar-light .navbar-brand i,
        .navbar-brand i {
            color: #ffd700 !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .navbar-light .nav-link,
        .nav-link {
            font-weight: 500;
            transition: color 0.3s ease;
            color: #ffffff !important;
            margin: 0 8px;
            padding: 8px 16px !important;
            border-radius: 6px;
        }

        .nav-link:hover {
            color: #ffd700 !important;
            background-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .navbar-nav .nav-item {
            margin: 0 5px;
        }

        .navbar-nav .nav-item.active .nav-link {
            background-color: rgba(255, 215, 0, 0.2);
            color: #ffd700 !important;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .dropdown-menu {
            border: none;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin-top: 10px;
        }

        .dropdown-item {
            padding: 12px 20px;
            transition: all 0.3s ease;
            color: #ffffff;
            border-radius: 8px;
            margin: 2px 8px;
        }

        .dropdown-item:hover {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #333 !important;
            transform: translateX(5px);
        }

        .navbar-toggler {
            border: 2px solid #ffffff;
            border-radius: 8px;
            padding: 8px 12px;
        }

        .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            background: #f8f9fa;
        }
        
        .upload-area:hover {
            border-color: #007bff;
            background: #e3f2fd;
        }
        
        .upload-area.dragover {
            border-color: #28a745;
            background: #d4edda;
        }
        
        .upload-area i {
            font-size: 3rem;
            color: #6c757d;
            margin-bottom: 15px;
            display: block;
        }
        
        .upload-area h4 {
            color: #495057;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .upload-area p {
            color: #6c757d;
            margin-bottom: 0;
        }
        
        .upload-area .file-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        
        .file-info {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            display: none;
        }
        
        .file-info.show {
            display: block;
        }
        
        .file-info h5 {
            color: #495057;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .file-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .file-detail {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .file-detail i {
            color: #007bff;
            margin-right: 8px;
        }
        
        .file-detail strong {
            color: #495057;
        }
        
        .copy-btn {
            transition: all 0.3s ease;
        }
        
        .copy-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
    </style>
    <!-- PDF-lib for PDF processing -->
    <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
</head>
<body>
    <!-- Header -->
    <header class="header bg-white shadow-sm sticky-top">
        <!-- Main Navigation -->
        <nav class="navbar navbar-expand-lg navbar-light bg-white">
            <div class="container">
                <!-- Logo -->
                <a class="navbar-brand fw-bold text-primary" href="../index.html">
                    <i class="fas fa-tools me-2"></i>Toolverse
                </a>

                <!-- Mobile Toggle -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Navigation Menu -->
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="../index.html">
                                <i class="fas fa-home me-1"></i>Home
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="fas fa-tools me-1"></i>Tools
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="../index.html#image-tools">Image Tools</a></li>
                                <li><a class="dropdown-item" href="../index.html#seo-tools">SEO Tools</a></li>
                                <li><a class="dropdown-item" href="../index.html#text-tools">Text Tools</a></li>
                                <li><a class="dropdown-item" href="../index.html#developer-tools">Developer Tools</a></li>
                                <li><a class="dropdown-item" href="../index.html#math-tools">Calculators</a></li>
                                <li><a class="dropdown-item" href="../index.html#unit-tools">Unit Converters</a></li>
                                <li><a class="dropdown-item" href="../index.html#security-tools">Security Tools</a></li>
                                <li><a class="dropdown-item" href="../index.html#social-tools">Social Media</a></li>
                                <li><a class="dropdown-item" href="../index.html#pdf-tools">PDF Tools</a></li>
                                <li><a class="dropdown-item" href="../index.html#misc-tools">Miscellaneous</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../about.html">
                                <i class="fas fa-info-circle me-1"></i>About
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../contact.html">
                                <i class="fas fa-envelope me-1"></i>Contact
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Top Ad Banner - Below Menu -->
        <div class="ad-banner-top" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-bottom: 1px solid #dee2e6; padding: 15px 0;">
            <div class="container">
                <div class="ad-placeholder" style="background: #fff; border: 2px dashed #dee2e6; border-radius: 8px; padding: 20px; min-height: 90px; display: flex; align-items: center; justify-content: center;">
                    <div class="ad-content">
                        <span class="text-muted">Advertisement Space</span>
                        <div class="ad-size">728x90</div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container py-4">
    <!-- Breadcrumb -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
                <li class="breadcrumb-item"><a href="../index.html#pdf-tools">PDF Tools</a></li>
                <li class="breadcrumb-item active" aria-current="page">Flatten PDF Forms</li>
            </ol>
        </nav>

            <div class="row">
                <div class="col-lg-8">
                <div class="card shadow-lg border-0">
                        <div class="card-body p-4">
                        <h1 class="h2 mb-3">
                            <i class="fas fa-file-pdf text-primary me-2"></i>
                            Flatten PDF Forms
                        </h1>
                        <p class="text-muted">Convert fillable PDF forms to static PDFs by flattening form fields. Remove form functionality while preserving the visual appearance and filled values.</p>
                        
                        <!-- About This Tool -->
                        <div class="alert alert-info mb-4">
                            <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>About This Tool</h6>
                            <p class="mb-2">This tool allows you to flatten PDF forms and convert them to static documents. You can:</p>
                            <ul class="mb-0">
                                <li>Convert fillable forms to static PDFs</li>
                                <li>Preserve filled form values as text</li>
                                <li>Remove form field functionality</li>
                                <li>Create secure, non-editable documents</li>
                            </ul>
                        </div>

                        <div class="mb-4">
                            <label for="fileInput" class="form-label">Select PDF File</label>
                            <div class="upload-area" id="uploadArea">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <h4>Drop your PDF file here</h4>
                                <p>or click to browse and select a file</p>
                                <input type="file" id="fileInput" class="file-input" accept=".pdf" />
                                    </div>
                            <small class="text-muted">Select a PDF file with fillable form fields to flatten</small>
                            </div>
                            
                        <!-- File Info -->
                        <div class="file-info" id="fileInfo">
                            <h5><i class="fas fa-file-pdf me-2"></i>Selected File</h5>
                            <div class="file-details">
                                <div class="file-detail">
                                    <i class="fas fa-file"></i>
                                    <strong>Name:</strong> <span id="fileName">-</span>
                                </div>
                                <div class="file-detail">
                                    <i class="fas fa-weight-hanging"></i>
                                    <strong>Size:</strong> <span id="fileSize">-</span>
                            </div>
                                <div class="file-detail">
                                    <i class="fas fa-calendar"></i>
                                    <strong>Modified:</strong> <span id="fileModified">-</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-lg" id="processBtn" disabled>
                                <i class="fas fa-compress me-2"></i>
                                Flatten PDF Forms
                                </button>
                            <button type="button" class="btn btn-outline-secondary btn-lg" onclick="resetTool()" id="resetBtn">
                                <i class="fas fa-redo me-2"></i>
                                Reset
                            </button>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted" id="buttonStatus">Select a PDF file to flatten form fields</small>
                        </div>
                        
                        <div id="progress" class="d-none mt-4">
                            <div class="progress mb-3">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" style="width: 0%"></div>
                            </div>
                            <p class="text-center text-muted" id="progressText">Processing PDF...</p>
                        </div>

                        <div id="results" class="d-none mt-4">
                            <div class="alert alert-success">
                                <h5><i class="fas fa-check-circle me-2"></i>PDF Flattened Successfully!</h5>
                                <p>Your PDF has been processed and is ready for download.</p>
                                    </div>
                            
                            <div class="text-center">
                                <a href="#" class="btn btn-success btn-lg" id="downloadBtn">
                                            <i class="fas fa-download me-2"></i>
                                    Download Flattened PDF
                                </a>
                            </div>
                        </div>

                        <div id="error" class="d-none mt-4">
                            <div class="alert alert-danger">
                                <h5><i class="fas fa-exclamation-triangle me-2"></i>Processing Failed</h5>
                                <p id="errorMessage"></p>
                                <button class="btn btn-outline-danger" onclick="resetTool()">
                                    <i class="fas fa-redo me-2"></i>
                                    Try Again
                                </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <div class="col-lg-4">
                <div class="card shadow-lg border-0 mb-4">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-primary mb-3">Key Features</h6>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Convert fillable forms to static PDFs</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Preserve filled form values</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Remove form field functionality</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Create secure documents</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Fast processing</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>No registration required</li>
                        </ul>
                    </div>
                </div>

                <div class="card shadow-lg border-0 mb-4">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-primary mb-3">Tool Information</h6>
                        <ul class="list-unstyled text-muted">
                            <li class="mb-2"><i class="fas fa-file-pdf me-2"></i>Input: PDF files with form fields</li>
                            <li class="mb-2"><i class="fas fa-compress me-2"></i>Output: Flattened static PDF</li>
                            <li class="mb-2"><i class="fas fa-shield-alt me-2"></i>Security: Safe and secure</li>
                            <li class="mb-2"><i class="fas fa-clock me-2"></i>Speed: Fast processing</li>
                        </ul>
                    </div>
                </div>

                <div class="card shadow-lg border-0">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-primary mb-3">How to Use</h6>
                        <ol class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-1 text-primary me-2"></i>Select a PDF file with form fields</li>
                            <li class="mb-2"><i class="fas fa-2 text-primary me-2"></i>Click "Flatten PDF Forms"</li>
                            <li class="mb-2"><i class="fas fa-3 text-primary me-2"></i>Wait for processing to complete</li>
                            <li class="mb-2"><i class="fas fa-4 text-primary me-2"></i>Download the flattened PDF</li>
                            <li class="mb-2"><i class="fas fa-5 text-primary me-2"></i>Share or print the static document</li>
                        </ol>
                        </div>
                        </div>
            </div>
        </div>
    </main>

    <!-- Bottom Ad Banner -->
    <div class="ad-banner-bottom bg-light py-4" style="margin-bottom: 2rem;">
        <div class="container">
            <div class="ad-placeholder" style="background: #fff; border: 2px dashed #dee2e6; border-radius: 8px; padding: 20px; min-height: 90px; display: flex; align-items: center; justify-content: center;">
                <div class="ad-content">
                    <span class="text-muted">Advertisement Space</span>
                    <div class="ad-size">728x90</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Footer -->
    <footer class="footer bg-dark text-white py-5">
        <div class="container">
            <div class="row">
                <!-- Company Info -->
                <div class="col-lg-4 mb-4">
                    <h5 class="text-primary mb-3">
                        <i class="fas fa-tools me-2"></i>Toolverse
                    </h5>
                    <p class="text-light">
                        Your one-stop destination for 200+ free online tools. From image converters to calculators, 
                        we provide everything you need to get things done efficiently.
                    </p>
                    <div class="social-links">
                        <a href="#" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="col-lg-2 col-md-6 mb-4">
                    <h6 class="text-primary mb-3">Quick Links</h6>
                    <ul class="list-unstyled">
                        <li><a href="../index.html" class="text-light text-decoration-none">Home</a></li>
                        <li><a href="../about.html" class="text-light text-decoration-none">About</a></li>
                        <li><a href="../contact.html" class="text-light text-decoration-none">Contact</a></li>
                        <li><a href="../privacy.html" class="text-light text-decoration-none">Privacy Policy</a></li>
                        <li><a href="../terms.html" class="text-light text-decoration-none">Terms of Service</a></li>
                    </ul>
                </div>

                <!-- Tool Categories -->
                <div class="col-lg-3 col-md-6 mb-4">
                    <h6 class="text-primary mb-3">Tool Categories</h6>
                    <ul class="list-unstyled">
                        <li><a href="../index.html#image-tools" class="text-light text-decoration-none">Image Tools</a></li>
                        <li><a href="../index.html#pdf-tools" class="text-light text-decoration-none">PDF Tools</a></li>
                        <li><a href="../index.html#seo-tools" class="text-light text-decoration-none">SEO Tools</a></li>
                        <li><a href="../index.html#text-tools" class="text-light text-decoration-none">Text Tools</a></li>
                        <li><a href="../index.html#developer-tools" class="text-light text-decoration-none">Developer Tools</a></li>
                        <li><a href="../index.html#math-tools" class="text-light text-decoration-none">Calculators</a></li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div class="col-lg-3 col-md-6 mb-4">
                    <h6 class="text-primary mb-3">Contact Info</h6>
                    <ul class="list-unstyled text-light">
                        <li><i class="fas fa-envelope me-2"></i>tazeetech@gmail.com</li>
                        <li><i class="fas fa-phone me-2"></i>+1 (555) 123-4567</li>
                        <li><i class="fas fa-map-marker-alt me-2"></i>123 Tool Street, Tech City</li>
                    </ul>
                </div>
            </div>

            <!-- Bottom Footer -->
            <hr class="my-4">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-0 text-light">
                        &copy; 2024 <span class="text-primary">Toolverse</span>. All rights reserved.
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0 text-light">
                        Made with <i class="fas fa-heart text-danger"></i> for the community
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JS -->
    <script src="../assets/js/main.js"></script>
    
    <script>
        // Global variables
        let selectedFile = null;
        let flattenedPDFBytes = null;

        // Initialize the tool
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 Initializing PDF Flattening Tool...');
            initializeTool();
        });

        function initializeTool() {
            setupFileUpload();
            setupEventListeners();
        }

        function setupFileUpload() {
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileInput');

            // Click to upload
            uploadArea.addEventListener('click', () => {
                fileInput.click();
            });

            // File input change
            fileInput.addEventListener('change', handleFileSelect);

            // Drag and drop
            uploadArea.addEventListener('dragover', handleDragOver);
            uploadArea.addEventListener('dragleave', handleDragLeave);
            uploadArea.addEventListener('drop', handleDrop);
        }

        function setupEventListeners() {
            const processBtn = document.getElementById('processBtn');
            processBtn.addEventListener('click', processPDF);
        }

        function handleDragOver(e) {
            e.preventDefault();
            e.currentTarget.classList.add('dragover');
        }

        function handleDragLeave(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('dragover');
        }

        function handleDrop(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFileSelect({ target: { files: files } });
            }
        }

        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (!file) return;

            if (file.type !== 'application/pdf') {
                showError('Please select a valid PDF file.');
                return;
            }

            if (file.size > 50 * 1024 * 1024) { // 50MB limit
                showError('File size must be less than 50MB.');
                return;
            }

            selectedFile = file;
            displayFileInfo(file);
            enableProcessButton();
            hideMessages();
        }

        function displayFileInfo(file) {
            document.getElementById('fileName').textContent = file.name;
            document.getElementById('fileSize').textContent = formatFileSize(file.size);
            document.getElementById('fileModified').textContent = new Date(file.lastModified).toLocaleDateString();
            
            document.getElementById('fileInfo').classList.add('show');
        }

        function enableProcessButton() {
            const processBtn = document.getElementById('processBtn');
                processBtn.disabled = false;
            document.getElementById('buttonStatus').textContent = 'Ready to flatten PDF forms';
        }

        function hideMessages() {
            document.getElementById('error').classList.add('d-none');
            document.getElementById('results').classList.add('d-none');
            document.getElementById('progress').classList.add('d-none');
        }

        function resetTool() {
            selectedFile = null;
            flattenedPDFBytes = null;
            
            // Reset file input
            document.getElementById('fileInput').value = '';
            
            // Hide all sections
            hideMessages();
            document.getElementById('fileInfo').classList.remove('show');
            
            // Reset button
            const processBtn = document.getElementById('processBtn');
                processBtn.disabled = true;
            document.getElementById('buttonStatus').textContent = 'Select a PDF file to flatten form fields';
        }

        async function processPDF() {
            if (!selectedFile) {
                showError('Please select a PDF file first.');
                    return;
                }

            try {
                console.log('🚀 Starting PDF flattening process...');
                
                // Check if PDF-lib is loaded
                if (typeof PDFLib === 'undefined') {
                    throw new Error('PDF library not loaded. Please refresh the page.');
                }

                // Show progress
                showProgress();
                updateProgress(10, 'Loading PDF...');

                // Read the PDF file
                const arrayBuffer = await selectedFile.arrayBuffer();
                updateProgress(30, 'Processing PDF...');

                // Load the PDF document
                const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
                updateProgress(50, 'Flattening form fields...');

                // Get all pages
                const pages = pdfDoc.getPages();
                let flattenedFields = 0;

                // Process each page
            for (let i = 0; i < pages.length; i++) {
                const page = pages[i];
                    const form = pdfDoc.getForm();
                    
                    // Get all form fields on this page
                    const fields = form.getFields();
                    
                    for (const field of fields) {
                        try {
                            // Get field value
                            const fieldValue = field.getText();
                            
                            // Create a text annotation to replace the field
                            if (fieldValue && fieldValue.trim() !== '') {
                                // Get field position (this is a simplified approach)
                                // In a real implementation, you'd need to get the actual field coordinates
                                const fieldRect = { x: 50, y: 50, width: 200, height: 20 }; // Placeholder
                                
                                // Add text to the page
                                page.drawText(fieldValue, {
                                    x: fieldRect.x,
                                    y: fieldRect.y,
                                    size: 12,
                    color: PDFLib.rgb(0, 0, 0)
                });
                                
                                flattenedFields++;
                            }
                            
                            // Remove the form field
                            form.removeField(field);
                        } catch (fieldError) {
                            console.warn('Error processing field:', fieldError);
                        }
                    }
                }

                updateProgress(80, 'Finalizing PDF...');

                // Save the flattened PDF
                flattenedPDFBytes = await pdfDoc.save();
                
                updateProgress(100, 'Complete!');
                
                // Show success
                setTimeout(() => {
                    hideProgress();
                    showResults();
                }, 500);

                console.log('✅ PDF flattening completed successfully');

            } catch (error) {
                console.error('❌ Error flattening PDF:', error);
                hideProgress();
                showError('Error processing PDF: ' + error.message);
            }
        }

        function showProgress() {
            document.getElementById('progress').classList.remove('d-none');
        }

        function hideProgress() {
            document.getElementById('progress').classList.add('d-none');
        }

        function updateProgress(percent, text) {
            document.getElementById('progressBar').style.width = percent + '%';
            document.getElementById('progressText').textContent = text;
        }

        function showError(message) {
            document.getElementById('errorMessage').textContent = message;
            document.getElementById('error').classList.remove('d-none');
        }

        function showResults() {
            document.getElementById('results').classList.remove('d-none');
            
            // Setup download
            const downloadBtn = document.getElementById('downloadBtn');
            downloadBtn.href = URL.createObjectURL(new Blob([flattenedPDFBytes], { type: 'application/pdf' }));
            downloadBtn.download = selectedFile.name.replace('.pdf', '_flattened.pdf');
        }

        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];
        }

    </script>
</body>
</html>