Image And Folder Scanner Tool

function processImage(originalImg, themeColor = "#21e6c1", scanDuration = 2.5) {
    // We create an outer wrapper that mimics a "File Folder" 
    const wrapper = document.createElement('div');
    wrapper.style.display = 'inline-block';
    wrapper.style.padding = '20px';
    wrapper.style.backgroundColor = '#e0e5ec'; // Neomorphic light gray
    wrapper.style.borderRadius = '8px';
    wrapper.style.boxShadow = '9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.7)';
    wrapper.style.fontFamily = 'monospace';
    wrapper.style.position = 'relative';
    wrapper.style.marginTop = '30px'; 
    wrapper.style.boxSizing = 'border-box';

    // "File Folder" Tab UI (Addresses "Файл папка")
    const tab = document.createElement('div');
    tab.style.position = 'absolute';
    tab.style.top = '-30px';
    tab.style.left = '0';
    tab.style.height = '30px';
    tab.style.padding = '0 20px';
    tab.style.backgroundColor = '#e0e5ec';
    tab.style.borderTopLeftRadius = '8px';
    tab.style.borderTopRightRadius = '15px';
    tab.style.display = 'flex';
    tab.style.alignItems = 'center';
    tab.style.fontWeight = 'bold';
    tab.style.color = '#4a5568';
    tab.style.fontSize = '14px';
    // Dropshadow on just the top left side to sell the folder look
    tab.style.boxShadow = '-3px -3px 6px rgba(255,255,255,0.8), 3px -3px 6px rgba(163,177,198,0.3)';
    tab.innerHTML = '📁 DIR / KINO_SCAN';
    wrapper.appendChild(tab);

    // Film Strip Container (Addresses "Кино" / Cinema)
    const filmStrip = document.createElement('div');
    filmStrip.style.backgroundColor = '#1a202c';
    filmStrip.style.padding = '24px 8px'; // Padding top/bottom acts as the sprocket area
    filmStrip.style.position = 'relative';
    filmStrip.style.overflow = 'hidden';
    filmStrip.style.borderRadius = '4px';
    // Creating film sprocket holes utilizing radial gradients
    filmStrip.style.backgroundImage = `
        radial-gradient(circle, #e0e5ec 4px, transparent 4.5px),
        radial-gradient(circle, #e0e5ec 4px, transparent 4.5px)
    `;
    filmStrip.style.backgroundSize = '24px 24px, 24px 24px';
    filmStrip.style.backgroundPosition = 'center top, center bottom';
    filmStrip.style.backgroundRepeat = 'repeat-x, repeat-x';

    // Canvas to process and hold the underlying target image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Apply a slight cinematic scanner tint (boost greens/blues slightly to fit the theme)
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    for(let i = 0; i < data.length; i += 4) {
        data[i] = data[i] * 0.9;     // R
        data[i+1] = data[i+1] * 1.05; // G
        data[i+2] = data[i+2] * 1.1;  // B
        // Uint8ClampedArray handles capping values at 255 natively
    }
    ctx.putImageData(imgData, 0, 0);

    canvas.style.display = 'block';
    canvas.style.maxWidth = '600px';
    canvas.style.width = '100%';
    canvas.style.height = 'auto';
    canvas.style.borderTop = '2px solid #000';
    canvas.style.borderBottom = '2px solid #000';
    
    filmStrip.appendChild(canvas);

    // Animated Scanner Overlay (Addresses "Сканер" / Scanner)
    const scannerBar = document.createElement('div');
    scannerBar.style.position = 'absolute';
    scannerBar.style.left = '0';
    scannerBar.style.width = '100%';
    scannerBar.style.height = '3px';
    scannerBar.style.backgroundColor = themeColor;
    scannerBar.style.boxShadow = `0 0 15px 5px ${themeColor}`;
    scannerBar.style.zIndex = '10';

    // Use Web Animations API to sweep the scanner up and down
    scannerBar.animate([
        { top: '24px' }, // Start directly below top holes
        { top: `calc(100% - 27px)` } // End directly above bottom holes
    ], {
        duration: parseFloat(scanDuration) * 1000,
        iterations: Infinity,
        direction: 'alternate',
        easing: 'ease-in-out'
    });

    filmStrip.appendChild(scannerBar);

    // Tech Grid Overlay to complete the Scanner UI
    const grid = document.createElement('div');
    grid.style.position = 'absolute';
    grid.style.top = '24px';
    grid.style.left = '0';
    grid.style.right = '0';
    grid.style.bottom = '24px';
    grid.style.backgroundImage = `
        linear-gradient(${themeColor} 1px, transparent 1px),
        linear-gradient(90deg, ${themeColor} 1px, transparent 1px)
    `;
    grid.style.backgroundSize = '20px 20px';
    grid.style.opacity = '0.2';
    grid.style.pointerEvents = 'none';

    filmStrip.appendChild(grid);
    wrapper.appendChild(filmStrip);

    return wrapper;
}