<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ImageCompress Pro | Free Online Image Optimizer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-dark: #3a56d4;
            --secondary: #7209b7;
            --success: #06d6a0;
            --danger: #ef476f;
            --warning: #ffd166;
            --dark: #1e1e2c;
            --darker: #151521;
            --light: #f8f9fa;
            --gray: #6c757d;
            --glass: rgba(255, 255, 255, 0.08);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            color: var(--light);
            line-height: 1.6;
            min-height: 100vh;
            padding-bottom: 60px;
        }

        .glass-header {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 1rem 5%;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }

        .logo-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-container h1 {
            font-size: 2.2rem;
            background: linear-gradient(to right, #f3ec78, #af4261);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 800;
        }

        .logo-container p {
            color: #c0c0c0;
            font-size: 1rem;
        }

        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
        }

        @media (min-width: 992px) {
            .container {
                grid-template-columns: 1fr 1fr;
            }
        }

        .card {
            background: rgba(30, 30, 44, 0.7);
            border-radius: 16px;
            padding: 2.5rem;
            margin-bottom: 1rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            height: 100%;
        }

        .upload-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .upload-area {
            border: 2px dashed rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 3rem 2rem;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            background: rgba(20, 20, 36, 0.4);
            margin-bottom: 1.5rem;
        }

        .upload-area:hover {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.1);
        }

        .upload-area i {
            font-size: 4rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

        .upload-area h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .upload-area p {
            color: var(--gray);
            margin-bottom: 1.5rem;
        }

        .btn {
            display: inline-block;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 28px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
        }

        .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }

        .btn:active {
            transform: translateY(0);
        }

        .settings-section {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .setting-group {
            background: rgba(20, 20, 36, 0.5);
            padding: 1.5rem;
            border-radius: 12px;
        }

        .setting-group h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 1.2rem;
            color: #f0f0f0;
        }

        .setting-group h3 i {
            color: var(--primary);
        }

        .slider-container {
            margin: 1.5rem 0;
        }

        .slider-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .slider-label span {
            font-size: 0.9rem;
        }

        .slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            outline: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            border: 2px solid var(--darker);
        }

        .preview-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .preview-box {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: space-between;
        }

        .preview-image {
            max-width: 100%;
            max-height: 400px;
            display: none;
        }

        .placeholder-text {
            color: var(--gray);
            text-align: center;
            padding: 40px 20px;
        }

        .placeholder-text i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.1);
        }

        .file-info {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            background: rgba(0, 0, 0, 0.3);
            padding: 12px 15px;
            border-radius: 8px;
        }

        .info-item {
            text-align: center;
        }

        .info-value {
            font-weight: bold;
            font-size: 1.1rem;
            color: var(--success);
        }

        .info-label {
            font-size: 0.85rem;
            color: var(--gray);
        }

        .compression-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding: 15px;
            background: rgba(6, 214, 160, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(6, 214, 160, 0.2);
        }

        .stat {
            text-align: center;
        }

        .stat-value {
            font-size: 1.4rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--gray);
        }

        .savings {
            color: var(--success);
        }

        .download-section {
            text-align: center;
            margin-top: 20px;
        }

        .btn-download {
            background: var(--success);
            padding: 15px 40px;
            font-size: 1.1rem;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-download:hover {
            background: #05c293;
        }

        .btn-download:disabled {
            background: var(--gray);
            cursor: not-allowed;
            transform: none;
        }

        .disclaimer {
            background: rgba(239, 71, 111, 0.15);
            border: 1px solid rgba(239, 71, 111, 0.3);
            padding: 15px;
            border-radius: 8px;
            margin-top: 25px;
            font-size: 0.9rem;
        }

        .disclaimer h3 {
            color: #ff7e9c;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        footer {
            text-align: center;
            padding: 30px 20px 20px;
            color: var(--gray);
            margin-top: 2rem;
            font-size: 0.9rem;
        }

        .footer-links {
            margin-top: 15px;
            display: flex;
            justify-content: center;
            gap: 25px;
        }

        .footer-links a {
            color: var(--gray);
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: var(--light);
        }

        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 15px 25px;
            background: var(--dark);
            color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.4s ease;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1;
        }

        .toast.error {
            background: var(--danger);
        }

        .toast.success {
            background: var(--success);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }
            
            .card {
                padding: 1.5rem;
            }
            
            .compression-stats {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <header class="glass-header">
        <div class="logo-container">
            <i class="fas fa-compress-alt"></i>
            <div>
                <h1>ImageCompress Pro</h1>
                <p>Free Online Image Optimization Tool</p>
            </div>
        </div>
    </header>

    <div class="container">
        <!-- Upload Section -->
        <div class="card upload-section">
            <div class="upload-area" id="uploadArea">
                <i class="fas fa-cloud-upload-alt"></i>
                <h3>Upload Your Image</h3>
                <p>Drag & drop your image here or click to browse</p>
                <p class="disclaimer">Supports JPG, JPEG, PNG, WebP formats</p>
                <input type="file" id="fileInput" accept="image/*" style="display: none;">
                <button class="btn" id="browseBtn">Browse Files</button>
            </div>
            
            <div class="settings-section">
                <div class="setting-group">
                    <h3><i class="fas fa-sliders-h"></i> Compression Settings</h3>
                    <div class="slider-container">
                        <div class="slider-label">
                            <span>Quality</span>
                            <span id="qualityValue">80%</span>
                        </div>
                        <input type="range" min="10" max="100" value="80" class="slider" id="qualitySlider">
                    </div>
                    
                    <div class="slider-container">
                        <div class="slider-label">
                            <span>Max Width</span>
                            <span id="widthValue">Original</span>
                        </div>
                        <input type="range" min="100" max="2000" value="2000" class="slider" id="widthSlider">
                    </div>
                </div>
                
                <div class="setting-group">
                    <h3><i class="fas fa-cog"></i> Output Settings</h3>
                    <div style="display: flex; gap: 15px; margin-top: 15px;">
                        <div style="flex: 1;">
                            <label for="formatSelect" style="display: block; margin-bottom: 8px;">Output Format</label>
                            <select id="formatSelect" style="width: 100%; padding: 10px; background: rgba(20, 20, 36, 0.8); color: white; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;">
                                <option value="webp">WebP (Recommended)</option>
                                <option value="jpeg">JPEG</option>
                                <option value="png">PNG</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Preview Section -->
        <div class="card preview-section">
            <div class="preview-container">
                <div>
                    <h3 style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                        <i class="fas fa-image"></i> Preview
                    </h3>
                    <div class="preview-box">
                        <div class="preview-header">
                            <span>Original Image</span>
                            <span id="originalSize">0 KB</span>
                        </div>
                        <img id="originalPreview" class="preview-image">
                        <div class="placeholder-text" id="originalPlaceholder">
                            <i class="fas fa-file-image"></i>
                            <p>Original image will appear here</p>
                        </div>
                    </div>
                    <div class="file-info">
                        <div class="info-item">
                            <div class="info-value" id="originalDimensions">0x0</div>
                            <div class="info-label">Dimensions</div>
                        </div>
                        <div class="info-item">
                            <div class="info-value" id="originalFileSize">0 KB</div>
                            <div class="info-label">File Size</div>
                        </div>
                        <div class="info-item">
                            <div class="info-value" id="originalType">—</div>
                            <div class="info-label">Format</div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="preview-box">
                        <div class="preview-header">
                            <span>Compressed Image</span>
                            <span id="compressedSize">0 KB</span>
                        </div>
                        <img id="compressedPreview" class="preview-image">
                        <div class="placeholder-text" id="compressedPlaceholder">
                            <i class="fas fa-compress-alt"></i>
                            <p>Compressed version will appear here</p>
                        </div>
                    </div>
                    <div class="file-info">
                        <div class="info-item">
                            <div class="info-value" id="compressedDimensions">0x0</div>
                            <div class="info-label">Dimensions</div>
                        </div>
                        <div class="info-item">
                            <div class="info-value" id="compressedFileSize">0 KB</div>
                            <div class="info-label">File Size</div>
                        </div>
                        <div class="info-item">
                            <div class="info-value" id="compressedType">—</div>
                            <div class="info-label">Format</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="compression-stats">
                <div class="stat">
                    <div class="stat-value savings" id="savingsPercent">0%</div>
                    <div class="stat-label">Size Reduced</div>
                </div>
                <div class="stat">
                    <div class="stat-value" id="savingsSize">0 KB</div>
                    <div class="stat-label">Savings</div>
                </div>
            </div>
            
            <div class="download-section">
                <button class="btn btn-download" id="downloadBtn" disabled>
                    <i class="fas fa-download"></i> Download Compressed Image
                </button>
            </div>
            
            <div class="disclaimer">
                <h3><i class="fas fa-exclamation-triangle"></i> Important Notice</h3>
                <p>All image processing happens in your browser. Your images are never uploaded to any server, ensuring complete privacy and security.</p>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2023 ImageCompress Pro | Free Online Image Optimization Tool</p>
        <div class="footer-links">
            <a href="#" aria-label="Privacy Policy">Privacy</a>
            <a href="#" aria-label="Terms of Service">Terms</a>
            <a href="#" aria-label="Contact">Contact</a>
            <a href="#" aria-label="How it Works">How it Works</a>
        </div>
    </footer>

    <div id="toast" class="toast">
        <i class="fas fa-info-circle"></i>
        <span>Toast message here</span>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Elements
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileInput');
            const browseBtn = document.getElementById('browseBtn');
            const qualitySlider = document.getElementById('qualitySlider');
            const widthSlider = document.getElementById('widthSlider');
            const qualityValue = document.getElementById('qualityValue');
            const widthValue = document.getElementById('widthValue');
            const formatSelect = document.getElementById('formatSelect');
            const originalPreview = document.getElementById('originalPreview');
            const compressedPreview = document.getElementById('compressedPreview');
            const originalPlaceholder = document.getElementById('originalPlaceholder');
            const compressedPlaceholder = document.getElementById('compressedPlaceholder');
            const downloadBtn = document.getElementById('downloadBtn');
            const toast = document.getElementById('toast');
            
            // Info elements
            const originalSize = document.getElementById('originalSize');
            const compressedSize = document.getElementById('compressedSize');
            const originalDimensions = document.getElementById('originalDimensions');
            const compressedDimensions = document.getElementById('compressedDimensions');
            const originalFileSize = document.getElementById('originalFileSize');
            const compressedFileSize = document.getElementById('compressedFileSize');
            const originalType = document.getElementById('originalType');
            const compressedType = document.getElementById('compressedType');
            const savingsPercent = document.getElementById('savingsPercent');
            const savingsSize = document.getElementById('savingsSize');
            
            // State
            let originalImage = null;
            let compressedImage = null;
            let originalImageData = null;
            
            // Event listeners
            browseBtn.addEventListener('click', () => fileInput.click());
            fileInput.addEventListener('change', handleFileSelect);
            uploadArea.addEventListener('dragover', handleDragOver);
            uploadArea.addEventListener('dragleave', handleDragLeave);
            uploadArea.addEventListener('drop', handleDrop);
            qualitySlider.addEventListener('input', updateQualityValue);
            widthSlider.addEventListener('input', updateWidthValue);
            qualitySlider.addEventListener('change', compressImage);
            widthSlider.addEventListener('change', compressImage);
            formatSelect.addEventListener('change', compressImage);
            downloadBtn.addEventListener('click', downloadCompressedImage);
            
            // Initialize values
            updateQualityValue();
            updateWidthValue();
            
            // Functions
            function handleDragOver(e) {
                e.preventDefault();
                e.stopPropagation();
                uploadArea.style.borderColor = 'var(--primary)';
                uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.2)';
            }
            
            function handleDragLeave(e) {
                e.preventDefault();
                e.stopPropagation();
                uploadArea.style.borderColor = '';
                uploadArea.style.backgroundColor = '';
            }
            
            function handleDrop(e) {
                e.preventDefault();
                e.stopPropagation();
                uploadArea.style.borderColor = '';
                uploadArea.style.backgroundColor = '';
                
                const files = e.dataTransfer.files;
                if (files.length) {
                    fileInput.files = files;
                    handleFileSelect();
                }
            }
            
            function handleFileSelect() {
                const file = fileInput.files[0];
                if (!file) return;
                
                // Check if file is an image
                if (!file.type.match('image.*')) {
                    showToast('Please select an image file (JPG, PNG, etc.)', 'error');
                    return;
                }
                
                // File size limit (10MB)
                if (file.size > 10 * 1024 * 1024) {
                    showToast('File size exceeds 10MB limit', 'error');
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Create image to get dimensions
                    const img = new Image();
                    img.onload = function() {
                        originalImage = img;
                        originalImageData = e.target.result;
                        
                        // Display original image
                        originalPreview.src = e.target.result;
                        originalPreview.style.display = 'block';
                        originalPlaceholder.style.display = 'none';
                        
                        // Update original info
                        originalSize.textContent = formatFileSize(file.size);
                        originalDimensions.textContent = `${img.width}×${img.height}`;
                        originalFileSize.textContent = formatFileSize(file.size);
                        originalType.textContent = file.type.split('/')[1].toUpperCase();
                        
                        // Reset compressed preview
                        compressedPreview.style.display = 'none';
                        compressedPlaceholder.style.display = 'block';
                        compressedSize.textContent = '0 KB';
                        compressedDimensions.textContent = '0×0';
                        compressedFileSize.textContent = '0 KB';
                        compressedType.textContent = '—';
                        savingsPercent.textContent = '0%';
                        savingsSize.textContent = '0 KB';
                        downloadBtn.disabled = true;
                        
                        // Compress the image
                        compressImage();
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
            
            function updateQualityValue() {
                qualityValue.textContent = `${qualitySlider.value}%`;
            }
            
            function updateWidthValue() {
                const value = widthSlider.value;
                widthValue.textContent = value === '2000' ? 'Original' : `${value}px`;
            }
            
            function compressImage() {
                if (!originalImage) return;
                
                const quality = parseInt(qualitySlider.value) / 100;
                const maxWidth = parseInt(widthSlider.value);
                const format = formatSelect.value;
                
                // Calculate new dimensions
                let width = originalImage.width;
                let height = originalImage.height;
                
                if (width > maxWidth) {
                    height = (maxWidth / width) * height;
                    width = maxWidth;
                }
                
                // Create canvas for compression
                const canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;
                
                const ctx = canvas.getContext('2d');
                ctx.drawImage(originalImage, 0, 0, width, height);
                
                // Convert to selected format
                let mimeType = 'image/jpeg';
                if (format === 'png') mimeType = 'image/png';
                if (format === 'webp') mimeType = 'image/webp';
                
                // Get compressed data
                const dataURL = canvas.toDataURL(mimeType, quality);
                compressedImage = dataURL;
                
                // Display compressed image
                compressedPreview.src = dataURL;
                compressedPreview.style.display = 'block';
                compressedPlaceholder.style.display = 'none';
                
                // Calculate compressed size (approximate)
                const sizeInBytes = Math.round((dataURL.length - 'data:image/jpeg;base64,'.length) * 0.75);
                const sizeKB = Math.round(sizeInBytes / 1024);
                compressedSize.textContent = `${sizeKB} KB`;
                compressedDimensions.textContent = `${Math.round(width)}×${Math.round(height)}`;
                compressedFileSize.textContent = `${sizeKB} KB`;
                compressedType.textContent = format.toUpperCase();
                
                // Calculate savings (approximate original size from the data URL of the original)
                const originalSizeInBytes = Math.round((originalImageData.length - 'data:image/jpeg;base64,'.length) * 0.75);
                const originalSizeKB = Math.round(originalSizeInBytes / 1024);
                const savingsKB = originalSizeKB - sizeKB;
                const percent = Math.round((savingsKB / originalSizeKB) * 100);
                
                savingsPercent.textContent = `${percent}%`;
                savingsSize.textContent = `${savingsKB} KB`;
                
                // Enable download button
                downloadBtn.disabled = false;
            }
            
            function downloadCompressedImage() {
                if (!compressedImage) return;
                
                const format = formatSelect.value;
                const link = document.createElement('a');
                link.href = compressedImage;
                link.download = `compressed-image.${format}`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                showToast('Download started!', 'success');
            }
            
            function formatFileSize(bytes) {
                if (bytes < 1024) return bytes + ' B';
                else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
                else return (bytes / 1048576).toFixed(1) + ' MB';
            }
            
            function showToast(message, type = '') {
                toast.innerHTML = `<i class="fas fa-${type === 'error' ? 'exclamation-triangle' : type === 'success' ? 'check-circle' : 'info-circle'}"></i> <span>${message}</span>`;
                toast.className = 'toast show';
                if (type) toast.classList.add(type);
                
                setTimeout(() => {
                    toast.className = 'toast';
                }, 5000);
            }
        });
    </script>
</body>
</html>