script.js

document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const fileInput = document.getElementById('fileInput');
    const dropZone = document.getElementById('dropZone');
    const previewImage = document.getElementById('previewImage');
    const previewContainer = document.getElementById('previewContainer');
    const placeholderText = document.getElementById('placeholderText');
    const overlayContainer = document.getElementById('overlayContainer');
    const overlayOptions = document.querySelectorAll('.overlay-option');
    const positionSelect = document.getElementById('positionSelect');
    const sizeSelect = document.getElementById('sizeSelect');
    const downloadPng = document.getElementById('downloadPng');
    const downloadJpg = document.getElementById('downloadJpg');
    const downloadSvg = document.getElementById('downloadSvg');

    // Current state
    let currentOverlay = null;
    let currentFile = null;

    // File handling
    fileInput.addEventListener('change', handleFileSelect);
    
    // Drag and drop events
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('drag-over');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
        if (e.dataTransfer.files.length) {
            fileInput.files = e.dataTransfer.files;
            handleFileSelect({ target: fileInput });
        }
    });

    // Overlay selection
    overlayOptions.forEach(option => {
        option.addEventListener('click', function() {
            overlayOptions.forEach(opt => opt.classList.remove('active'));
            this.classList.add('active');
            
            const type = this.dataset.type;
            const color = this.dataset.color;
            applyOverlay(type, color);
        });
    });

    // Position and size changes
    positionSelect.addEventListener('change', updateOverlay);
    sizeSelect.addEventListener('change', updateOverlay);

    // Download buttons
    downloadPng.addEventListener('click', () => downloadImage('png'));
    downloadJpg.addEventListener('click', () => downloadImage('jpg'));
    downloadSvg.addEventListener('click', () => downloadImage('svg'));

    // Functions
    function handleFileSelect(e) {
        const file = e.target.files[0];
        if (!file) return;

        if (!file.type.match('image.*')) {
            alert('Please select an image file');
            return;
        }

        if (file.size > 2 * 1024 * 1024) {
            alert('File size must be less than 2MB');
            return;
        }

        currentFile = file;
        
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImage.src = e.target.result;
            previewImage.classList.remove('hidden');
            placeholderText.classList.add('hidden');
            currentFile = e.target.result; // Store the data URL
        };
        reader.readAsDataURL(file);
    }
    function applyOverlay(type, color) {
        // Clear previous overlay
        overlayContainer.innerHTML = '';
        
        // Create new overlay
        const overlay = document.createElement('div');
        overlay.className = `overlay ${type} ${color}`;
        
        // Position and size
        const position = positionSelect.value;
        const size = sizeSelect.value;
        
        overlay.classList.add(position);
        overlay.classList.add(size);
        
        // Add visual feedback
        const preview = document.createElement('div');
        preview.style.position = 'absolute';
        preview.style.borderRadius = type === 'badge' ? '50%' : '0';
        
        // Set color
        preview.style.backgroundColor = color === 'red' ? '#ef4444' :
                                      color === 'blue' ? '#3b82f6' :
                                      color === 'green' ? '#10b981' : '#eab308';
        
        // Set size and position based on selections
        if (type === 'banner') {
            preview.style.width = '100%';
            preview.style.height = size === 'small' ? '10%' :
                                  size === 'medium' ? '15%' : '20%';
            preview.style.top = position.includes('bottom') ? 'auto' : '0';
            preview.style.bottom = position.includes('bottom') ? '0' : 'auto';
        } else { // badge
            const badgeSize = size === 'small' ? '20%' :
                             size === 'medium' ? '25%' : '30%';
            preview.style.width = badgeSize;
            preview.style.height = badgeSize;
            
            if (position.includes('top')) preview.style.top = '0';
            if (position.includes('bottom')) preview.style.bottom = '0';
            if (position.includes('left')) preview.style.left = '0';
            if (position.includes('right')) preview.style.right = '0';
        }
        
        overlay.appendChild(preview);
        overlayContainer.appendChild(overlay);
        currentOverlay = overlay;
    }
function updateOverlay() {
        if (!currentOverlay) return;
        
        // Remove all position and size classes
        const positions = ['top', 'bottom', 'left', 'right', 'top-right', 'top-left', 'bottom-right', 'bottom-left'];
        const sizes = ['small', 'medium', 'large'];
        
        positions.forEach(pos => currentOverlay.classList.remove(pos));
        sizes.forEach(size => currentOverlay.classList.remove(size));
        
        // Add new classes
        currentOverlay.classList.add(positionSelect.value);
        currentOverlay.classList.add(sizeSelect.value);
    }
    function downloadImage(format) {
        if (!currentFile) {
            alert('Please upload an image first');
            return;
        }
        
        // Create canvas to combine image and overlay
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            
            // Draw overlay if exists
            if (currentOverlay) {
                const overlayColor = currentOverlay.classList.contains('red') ? 'rgba(239, 68, 68, 0.7)' :
                                    currentOverlay.classList.contains('blue') ? 'rgba(59, 130, 246, 0.7)' :
                                    currentOverlay.classList.contains('green') ? 'rgba(16, 185, 129, 0.7)' :
                                    'rgba(234, 179, 8, 0.7)';
                
                ctx.fillStyle = overlayColor;
                
                // Draw based on overlay type
                if (currentOverlay.classList.contains('banner')) {
                    const height = canvas.height * 0.1;
                    ctx.fillRect(0, 0, canvas.width, height);
                } else if (currentOverlay.classList.contains('badge')) {
                    const size = canvas.width * 0.2;
                    ctx.beginPath();
                    ctx.arc(canvas.width - size/2, size/2, size/2, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // Trigger download
            const link = document.createElement('a');
            link.download = `icon-with-overlay.${format}`;
            link.href = canvas.toDataURL(`image/${format}`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        };
        
        img.src = currentFile;
    }
});