0UT1S's

document.addEventListener('DOMContentLoaded', () => {
    const uploadContainer = document.getElementById('uploadContainer');
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const clearButton = document.getElementById('clearButton');
    const thumbnailsContainer = document.getElementById('thumbnailsContainer');
    const convertForm = document.getElementById('uploadForm');
    const progressLoader = document.getElementById('progressLoader');
    const compressedSection = document.getElementById('compressedSection');
    const downloadLinks = document.getElementById('downloadLinks');

let selectedFiles = [];

// Generate CAPTCHA
    const generateCaptcha = () => {
        const num1 = Math.floor(Math.random() * 10);
        const num2 = Math.floor(Math.random() * 10);
        const answer = num1 + num2;
        document.getElementById('captchaQuestion').textContent = `${num1} + ${num2}`;
        document.getElementById('captchaAnswer').value = answer;
    };

generateCaptcha();

// Drag-and-drop handling
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
        uploadContainer.addEventListener(eventName, preventDefaults, false);
    });

function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

// Highlight on drag-over
    ['dragenter', 'dragover'].forEach((eventName) => {
        uploadContainer.addEventListener(eventName, () => {
            uploadContainer.classList.add('highlight');
        }, false);
    });

['dragleave', 'drop'].forEach((eventName) => {
        uploadContainer.addEventListener(eventName, () => {
            uploadContainer.classList.remove('highlight');
        }, false);
    });

// Handle dropped files
    uploadContainer.addEventListener('drop', (e) => {
        const files = e.dataTransfer.files;
        handleFiles(files);
    });

// Upload button trigger
    uploadButton.addEventListener('click', () => {
        fileInput.click();
    });

// File selection handler
    fileInput.addEventListener('change', (e) => {
        handleFiles(e.target.files);
    });

function handleFiles(files) {
        const newFiles = Array.from(files).slice(0, 50);
        selectedFiles = [...selectedFiles, ...newFiles].slice(0, 50);
        displayThumbnails(selectedFiles);
        clearButton.style.display = 'inline-block';
    }

function displayThumbnails(files) {
        thumbnailsContainer.innerHTML = '';
        files.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                const thumbnail = document.createElement('div');
                thumbnail.className = 'position-relative';
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = file.name;
                img.style = 'width: 150px; height: 150px; object-fit: cover;';
                img.className = 'rounded';

const closeButton = document.createElement('button');
                closeButton.className = 'btn-close position-absolute top-0 end-0 m-1';
                closeButton.onclick = () => removeFile(index);

thumbnail.appendChild(img);
                thumbnail.appendChild(closeButton);
                thumbnailsContainer.appendChild(thumbnail);
            };
            reader.readAsDataURL(file);
        });
    }

function removeFile(index) {
        selectedFiles.splice(index, 1);
        displayThumbnails(selectedFiles);
    }

// Clear all files
    clearButton.addEventListener('click', () => {
        selectedFiles = [];
        fileInput.value = '';
        thumbnailsContainer.innerHTML = '';
        clearButton.style.display = 'none';
    });

// Form submission
    convertForm.addEventListener('submit', async (e) => {
        e.preventDefault();

// Validate CAPTCHA
        const captchaInput = document.getElementById('captchaInput');
        const captchaAnswer = document.getElementById('captchaAnswer');
        if (parseInt(captchaInput.value) !== parseInt(captchaAnswer.value)) {
            alert('Invalid CAPTCHA. Please try again.');
            generateCaptcha();
            return;
        }

// Validate files
        if (selectedFiles.length === 0) {
            alert('Please select images to compress.');
            return;
        }

progressLoader.classList.remove('d-none');

// Prepare FormData
        const formData = new FormData();
        selectedFiles.forEach((file) => {
            formData.append('image[]', file);
        });
        formData.append('compressionLevel', document.getElementById('compressionLevel').value);
        formData.append('outputFormat', document.getElementById('outputFormat').value);

try {
            const response = await fetch('/compressor/compress.php', {
                method: 'POST',
                body: formData,
            });

if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }

const result = await response.json();
            progressLoader.classList.add('d-none');

if (result.error) {
                alert(result.error);
            } else {
                compressedSection.classList.remove('d-none');
                displayDownloadLinks(result);
            }
        } catch (error) {
            progressLoader.classList.add('d-none');
            alert(`Error: ${error.message}`);
        }
    });

By Order of Mr.0UT1S