ما رايك في هذا الكود ؟ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="max-age=31536000, public">
    <meta name="description" content="Merge PDF - Combine multiple PDF files into a single document with ease.">
    <meta name="keywords" content="PDF, Merge, Combine, Online PDF Tools">
    <meta name="author" content="Your Name">
    <title>Merge PDF</title>

    <!-- Add CSS and JavaScript Links -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- DOMPurify library (for input sanitization against XSS) -->
    <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.0/dist/purify.min.js"></script>

    <!-- pdf-lib library (for PDF manipulation) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>

    <!-- jsPDF library (for creating PDFs) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>



    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        body {
            font-family: Arial, sans-serif;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            background: linear-gradient(135deg, #f5f5dc, #ffffff);
            color: #444;
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
        }

        footer {
            background-color: #000;
            color: #fff;
            padding: 20px 0;
            border-top: 2px solid #ddd;
            margin-top: auto;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-content p {
            margin: 0;
        }

        .footer-links a {
            text-decoration: none;
            color: #fff;
            padding: 0 10px;
        }

        .footer-links a:hover {
            color: #007bff;
        }

        .language-selector label {
            margin-right: 10px;
            color: #fff;
        }

        .language-selector select {
            padding: 5px;
            background-color: #444;
            color: #fff;
        }

        header {
            background-color: #333;
            color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* تخصيص الشعار */
.logo {
    font-family: 'Times New Roman', sans-serif; /* خط عصري وجميل */
    font-size: 24px;  /* تصغير حجم الخط ليصبح مناسبًا */
    font-weight: 610;
    letter-spacing: 0.5px; /* تباعد بسيط بين الحروف */
    text-transform: uppercase; /* تحويل النص إلى حروف كبيرة */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); /* تأثير الظل الخفيف لتحسين الوضوح */
    display: flex;
    align-items: center;
}

/* تخصيص جزء "PDF TOOLS" ليكون أصغر وأنيق */
.tools {
    font-size: 14px;  /* حجم أصغر لـ "PDF TOOLS" */
    font-family: 'Times New Roman', sans-serif; /* خط آخر يضيف أناقة */
    font-weight: 350;
    font-weight: bold; /* تغيير اللون إلى رمادي داكن بدلاً من الأزرق */
    margin-left: 1px; /* مسافة بين "GAVIOTA" و "PDF TOOLS" */
}

        .nav-links {
            display: flex;
            justify-content: center;
            gap: 30px;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            padding: 5px 10px;
            border-radius: 5px;
            transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease, background-color 0.4s ease;
        }

        .nav-links a:hover {
            color: #ff9933;
            background-color: rgba(255, 153, 0, 0.2);
            transform: scale(1.1);
            box-shadow: 0 8px 15px rgba(255, 153, 0, 0.3);
        }

        .auth-buttons {
            display: flex;
            gap: 15px;
        }

        .auth-buttons a {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .auth-buttons a:hover {
            background-color: #0056b3;
        }

        .menu-toggle {
            display: none;
            font-size: 30px;
            cursor: pointer;
        }

        @media (max-width: 600px) {
            .logo {
                font-size: 20px;
            }

            .nav-links a {
                font-size: 14px;
            }

            .auth-buttons a {
                padding: 6px 12px;
                font-size: 14px;
            }

            .menu-toggle {
                display: block;
            }

            .nav-links {
                display: none;
                flex-direction: column;
                align-items: center;
            }

            .nav-links.open {
                display: flex;
            }
        }

        .advanced-settings-container {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 700px;
            margin: 100px auto;
            text-align: center;
            min-height: 300px;
        }

        .advanced-settings-container h2 {
            color: #333;
            font-size: 24px;
            margin-bottom: 15px;
        }

        .advanced-settings-container p {
            color: #555;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .advanced-settings-container input[type="file"] {
            margin-bottom: 20px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 100%;
        }

        .advanced-settings-container button {
            padding: 12px 20px;
            font-size: 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .advanced-settings-container button:hover {
            background-color: #218838;
        }
/* تعديل زر القائمة المنبثقة */
.nav-links.open {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0;
}

    </style>
</head>
<body>
      
<header>
    
<div class="logo">GAVIOTA. <span class="tools">PDF TOOLS</span></div>

    <div class="nav-links" style="display: flex; justify-content: flex-end; gap: 40px; margin-right: 20px;">
        <a href="index.html">Home</a>
  <a href="PDF Tools.html" data-i18n="Pdf Tools">Pdf Tools</a>
        <a href="about.html" data-i18n="about_us">About Us</a>
        <a href="pricing.html" data-i18n="pricing">Pricing</a>
      
    </div>

    <!-- Dropdown menu for Services -->
    <div class="services-dropdown" style="position: relative; display: inline-block;">
        <!-- Services button (this is the label that will be clicked) -->
        <button onclick="toggleDropdown()" id="servicesButton" style="padding: 6px 12px; font-size: 14px; border-radius: 5px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; display: flex; align-items: center;">
            Services
            <!-- Arrow icon (for dropdown indication) -->
            <span id="arrow" style="margin-left: 6px; font-size: 12px; transition: transform 0.3s;">
                &#9662; <!-- down arrow symbol -->
            </span>
        </button>

        <!-- Dropdown content (the list of services) -->
        <div id="servicesMenu" class="dropdown-content" style="display: none; position: absolute; background-color: #fff; min-width: 180px; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); z-index: 1; border-radius: 5px; padding: 10px;">
            <a href="unlock.html">Unlock PDF</a>
            <a href="add-watermark.html">Add Watermark</a>
            <a href="merge.html">Merge PDFs</a>
            <a href="split.html">Split PDF</a>
            <a href="compress.html">Compress PDF</a>
            <a href="pdf-to-word.html">PDF to Word</a>
            <a href="pdf-to-powerpoint.html">PDF to PowerPoint</a>
            <a href="pdf-to-excel.html">PDF to Excel</a>
            <a href="word-to-pdf.html">Word to PDF</a>
            <a href="powerpoint-to-pdf.html">PowerPoint to PDF</a>
            <a href="edit-pdf.html">Edit PDF</a>
            <a href="excel-to-pdf.html">Excel to PDF</a>
            <a href="convert-to-pdf.html">Convert to PDF</a>
            <a href="image-to-pdf.html">Convert Image to PDF</a>
            <a href="share-pdf.html">Share PDF</a>
            <a href="search-pdf.html">Search PDF</a>
            <a href="pdf-to-text.html">PDF to Text</a>
            <a href="pdf-to-image.html">PDF to Image</a>
            <a href="annotate-pdf.html">Annotate PDF</a>
          
            <a href="pdf-encryption.html">PDF Encryption</a>
            <a href="verify-pdf.html">Verify PDF</a>
            <a href="rotate-pdf.html">Rotate PDF</a>
            <a href="crop-pdf.html">Crop PDF</a>
            <a href="print-pdf.html">Print PDF</a>
            <a href="pdf-to-archive.html">Convert PDF to Archive</a>
            <a href="extract-data.html">Extract Data from PDF</a>
            <a href="view-pdf.html">View PDF</a>
            <a href="batch-conversion.html">Batch PDF Conversion</a>
           
            <a href="schedule-pdf.html">Schedule PDF</a>
            <a href="pdf-form-filling.html">PDF Form Filling</a>
            <a href="queue-conversion.html">Convert with Queue</a>
         
        </div>
    </div>

    <!-- Auth Buttons -->
    <div class="auth-buttons">
        <a href="signup.html" class="btn signup-btn" data-i18n="signup">Sign Up</a>
        <a href="login.html" class="btn login-btn" data-i18n="login">Login</a>
    </div>
</header>

<script>
    function toggleDropdown() {
        var menu = document.getElementById("servicesMenu");
        var arrow = document.getElementById("arrow");

        // Toggle the display of the menu (either show or hide it)
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
            arrow.style.transform = "rotate(180deg)"; // Rotate the arrow down
        } else {
            menu.style.display = "none";
            arrow.style.transform = "rotate(0deg)"; // Reset the arrow to point down
        }
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
        if (!event.target.matches('.services-dropdown button')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.style.display === "block") {
                    openDropdown.style.display = "none";
                    document.getElementById("arrow").style.transform = "rotate(0deg)"; // Reset arrow
                }
            }
        }
    }
</script>

<!-- Main Content -->
<main>
    <div class="advanced-settings-container">
        <h1>Merge PDF Files</h1>
        <p>Merge multiple PDFs into a single document.</p>
        <label for="pdf-files" id="select-pdf-label">Select PDFs to Merge:</label>
        <input type="file" id="pdf-files" accept="application/pdf" multiple />
        <p id="file-limit-message" style="color: red; display: none;">You can only select up to 5 files.</p> <!-- Message for file limit -->
        <div id="file-preview-container"></div> <!-- File preview container -->
        <button id="merge-button" onclick="applySettings()" disabled>Merge PDFs</button>

        <div id="additional-options" style="display: none; margin-top: 20px;">
            <button id="save-google-drive">Save to Google Drive</button>
            <button id="share-link">Share Download Link</button>
            <button id="delete-files">Delete Files</button>
            <div id="qr-code-container"></div>
        </div>
        
        <!-- Progress bar -->
        <div class="progress-container" id="progress-container" style="display: none;">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        
        <!-- Status message -->
        <div id="status-message"></div>
    </div>
</main>

<style>
/* Progress bar styling */
.progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 20px;
}

.progress-bar {
    height: 20px;
    width: 0;
    background-color: #4caf50;
    text-align: center;
    color: white;
    transition: width 0.5s ease-out; /* Smooth transition effect */
}

/* Status message styling */
#status-message {
    margin-top: 10px;
    font-size: 16px;
}

/* Disabled button */
button:disabled {
    background-color: #ccc;
}

/* While merging */
#merge-button:disabled {
    background-color: #888;
    cursor: not-allowed;
}

/* File preview styling */
.file-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    position: relative;
}

/* Remove button styling */
.file-preview-item button {
    background-color: #f44336; /* Red color for remove button */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

/* Hover effect on remove button */
.file-preview-item button:hover {
    background-color: #d32f2f;
}

/* File name styling */
.file-preview-item span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}






footer {
    position: relative;  /* جعل الفوتر يتحرك مع الصفحة */
    width: 100%;
    background-color: #000;
    color: white;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
    margin-top: 0;  /* تأكد من إزالة أي هوامش زائدة */
}

.footer-content {
    margin: 0; /* تأكد من أن المحتوى داخل الفوتر لا يحتوي على هوامش */
}

body {
    margin-bottom: 0; /* تأكد من إزالة الهوامش السفلية */
    padding-bottom: 0; /* إزالة المسافة بين المحتوى والفوتر */
}

</style>

<script>
// PDF Merge enhancements

class PDFMergeApp {
    constructor() {
        this.initializeElements();
        this.setupEventListeners();
        this.supportedFeatures = {
            maxFiles: 5,
            maxFileSize: 4 * 1024 * 1024 * 1024, // 4 GB
            supportedTypes: ['application/pdf']
        };

        this.mergeState = {
            files: [],
            progress: 0,
            status: 'idle'
        };
    }

    initializeElements() {
        this.elements = {
            fileInput: document.getElementById('pdf-files'),
            filePreviewContainer: document.getElementById('file-preview-container'),
            mergeButton: document.getElementById('merge-button'),
            statusMessage: document.getElementById('status-message'),
            progressContainer: document.getElementById('progress-container'),
            progressBar: document.getElementById('progress-bar'),
            additionalOptions: document.getElementById('additional-options')
        };
    }

    setupEventListeners() {
        this.elements.fileInput.addEventListener('change', this.handleFileSelection.bind(this));
        this.elements.mergeButton.addEventListener('click', this.startMergeProcess.bind(this));
    }

    handleFileSelection(event) {
        const files = Array.from(event.target.files);
        
        try {
            this.validateFiles(files);
            this.previewFiles(files);
            this.updateMergeButtonState();
        } catch (error) {
            this.showErrorNotification(error.message);
        }
    }

    validateFiles(files) {
        const errors = {
            NO_FILE: 'Please select PDF files to merge.',
            INVALID_TYPE: 'Please select valid PDF files.',
            FILE_TOO_LARGE: 'One of the files is too large. The maximum allowed size is 4 GB.',
            FILE_LIMIT: 'You can only select up to 5 files.'
        };

        if (files.length === 0) throw new Error(errors.NO_FILE);
        if (files.length > this.supportedFeatures.maxFiles) throw new Error(errors.FILE_LIMIT);

        files.forEach(file => {
            if (!this.supportedFeatures.supportedTypes.includes(file.type)) 
                throw new Error(errors.INVALID_TYPE);
            
            if (file.size > this.supportedFeatures.maxFileSize) 
                throw new Error(errors.FILE_TOO_LARGE);
        });

        this.mergeState.files = files;
    }

    previewFiles(files) {
        this.elements.filePreviewContainer.innerHTML = '';
        
        files.forEach((file, index) => {
            const previewItem = document.createElement('div');
            previewItem.classList.add('file-preview-item');
            
            const fileNameSpan = document.createElement('span');
            fileNameSpan.textContent = file.name;
            
            const removeButton = document.createElement('button');
            removeButton.textContent = '✖';
            removeButton.onclick = () => this.removeFile(index);
            
            previewItem.appendChild(fileNameSpan);
            previewItem.appendChild(removeButton);
            
            this.elements.filePreviewContainer.appendChild(previewItem);
        });
    }

    removeFile(index) {
        this.mergeState.files.splice(index, 1);
        this.elements.fileInput.files = this.arrayToFileList(this.mergeState.files);
        this.previewFiles(this.mergeState.files);
        this.updateMergeButtonState();
    }

    arrayToFileList(files) {
        const dataTransfer = new DataTransfer();
        files.forEach(file => dataTransfer.items.add(file));
        return dataTransfer.files;
    }

    updateMergeButtonState() {
        this.elements.mergeButton.disabled = this.mergeState.files.length === 0;
    }

    showErrorNotification(message) {
        const notification = document.createElement('div');
        notification.classList.add('error-notification');
        notification.textContent = message;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }

    startMergeProcess() {
        this.updateUIForMerging();
        this.simulateMergeProcess();
    }

    updateUIForMerging() {
        this.elements.mergeButton.disabled = true;
        this.elements.progressContainer.style.display = 'block';
        this.elements.progressBar.style.width = '0%';
        this.elements.statusMessage.textContent = 'Merging the PDFs...';
    }

    simulateMergeProcess() {
        const stages = [
            { progress: 25, message: 'Preparing the files...' },
            { progress: 50, message: 'Merging the files...' },
            { progress: 75, message: 'Finalizing the merge...' },
            { progress: 100, message: 'Merge complete! You can download the merged PDF now.' }
        ];

        let currentStage = 0;
        let currentProgress = 0;

        const progressInterval = setInterval(() => {
            if (currentStage >= stages.length) {
                clearInterval(progressInterval);
                this.completeMergeProcess();
                return;
            }

            const stage = stages[currentStage];
            currentProgress += 5;

            this.elements.progressBar.style.width = `${currentProgress}%`;
            this.elements.statusMessage.textContent = stage.message;

            if (currentProgress >= stage.progress) {
                currentStage++;
            }
        }, 200);
    }

    completeMergeProcess() {
        this.elements.mergeButton.disabled = false;
        this.elements.mergeButton.textContent = 'Download Merged PDF';
        
        this.showAdditionalOptions();
        this.setupPostMergeActions();
    }

    showAdditionalOptions() {
        this.elements.additionalOptions.style.display = 'block';
    }

    setupPostMergeActions() {
        document.getElementById('save-google-drive').onclick = this.saveToGoogleDrive.bind(this);
        document.getElementById('share-link').onclick = this.generateShareLink.bind(this);
        document.getElementById('delete-files').onclick = this.resetMergeProcess.bind(this);
    }

    saveToGoogleDrive() {
        // Google Drive API integration (will require real implementation)
        alert('Working on Google Drive integration');
    }

    generateShareLink() {
        const downloadLink = 'https://example.com/merged_document.pdf';
        
        // Generate QR code
        const qrContainer = document.getElementById('qr-code-container');
        qrContainer.innerHTML = '';
        
        new QRCode(qrContainer, {
            text: downloadLink,
            width: 128,
            height: 128
        });

        // Copy link
        navigator.clipboard.writeText(downloadLink).then(() => {
            alert('Share link copied');
        });
    }

    resetMergeProcess() {
        this.elements.fileInput.value = '';
        this.elements.progressContainer.style.display = 'none';
        this.elements.additionalOptions.style.display = 'none';
        this.elements.statusMessage.textContent = 'Files deleted. Ready to upload again.';
        this.mergeState.files = [];
        this.updateMergeButtonState();
    }
}

// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
    const pdfMergeApp = new PDFMergeApp();
});
</script>




<!-- Footer -->
<footer>
    <div class="footer-content">
        <p>&copy; 2024 PDF Services. All Rights Reserved.</p>
        <div class="footer-links">
            <a href="contact.html">Contact Us</a> |
            <a href="terms.html">Terms of Service</a> |
            <a href="privacy.html">Privacy Policy</a> |
            <a href="FAQ.html" data-i18n="FAQ">FAQ</a>
        </div>
    </div>
</footer>



</body>
</html>