Image To Website Interface Finder

function processImage(originalImg, url = "website.com", paddingParam = 40, bgColor = "#e0e5ec", uiTheme = "light", addShadowParam = 1) {
    const padding = parseInt(paddingParam, 10);
    const addShadow = parseInt(addShadowParam, 10);
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const isDark = uiTheme.toLowerCase() === 'dark';
    const titleBarColor = isDark ? "#2d2d2d" : "#ffffff";
    const titleBarBorder = isDark ? "#000000" : "#dfdfdf";
    const addressBarColor = isDark ? "#1e1e1e" : "#f1f3f4";
    const addressTextColor = isDark ? "#c0c0c0" : "#5f6368";
    
    // Website / Mac OS window controls colors
    const dotColors = ['#ff5f56', '#ffbd2e', '#27c93f'];

    const titleBarHeight = 50;
    const radius = 12;

    // Set combined dimensions
    canvas.width = originalImg.width + padding * 2;
    canvas.height = originalImg.height + titleBarHeight + padding * 2;

    // 1. Draw Background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.save();

    const wX = padding;
    const wY = padding;
    const wWidth = originalImg.width;
    const wHeight = originalImg.height + titleBarHeight;

    function drawRoundRect(context, x, y, width, height, r) {
        context.moveTo(x + r, y);
        context.lineTo(x + width - r, y);
        context.quadraticCurveTo(x + width, y, x + width, y + r);
        context.lineTo(x + width, y + height - r);
        context.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
        context.lineTo(x + r, y + height);
        context.quadraticCurveTo(x, y + height, x, y + height - r);
        context.lineTo(x, y + r);
        context.quadraticCurveTo(x, y, x + r, y);
        context.closePath();
    }

    // 2. Set Drop Shadow (if enabled)
    if (addShadow === 1) {
        ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
        ctx.shadowBlur = 20;
        ctx.shadowOffsetY = 10;
    }
    
    // 3. Draw rounded window and apply shadow
    ctx.beginPath();
    if (ctx.roundRect) {
        ctx.roundRect(wX, wY, wWidth, wHeight, radius);
    } else {
        drawRoundRect(ctx, wX, wY, wWidth, wHeight, radius);
    }
    ctx.fillStyle = titleBarColor;
    ctx.fill();

    // Turn off shadow for inner elements
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;
    
    // Create soft clipping mask to keep window content inside rounded corners
    ctx.clip(); 

    // 4. Draw Title Bar
    ctx.fillStyle = titleBarColor;
    ctx.fillRect(wX, wY, wWidth, titleBarHeight);

    // Title bar bottom border
    ctx.beginPath();
    ctx.moveTo(wX, wY + titleBarHeight);
    ctx.lineTo(wX + wWidth, wY + titleBarHeight);
    ctx.strokeStyle = titleBarBorder;
    ctx.lineWidth = 1;
    ctx.stroke();

    // 5. Draw interface dots (close, minimize, maximize)
    let dotX = wX + 20;
    const dotY = wY + titleBarHeight / 2;
    for (let color of dotColors) {
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(dotX, dotY, 6, 0, Math.PI * 2);
        ctx.fill();
        dotX += 20;
    }

    // 6. Draw Address Bar
    if (url) {
        const aWidth = Math.min(wWidth * 0.5, 500);
        const aHeight = 28;
        const aX = wX + (wWidth - aWidth) / 2;
        const aY = wY + (titleBarHeight - aHeight) / 2;

        ctx.fillStyle = addressBarColor;
        ctx.beginPath();
        if (ctx.roundRect) {
            ctx.roundRect(aX, aY, aWidth, aHeight, 6);
        } else {
            drawRoundRect(ctx, aX, aY, aWidth, aHeight, 6);
        }
        ctx.fill();

        ctx.fillStyle = addressTextColor;
        ctx.font = '13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('🔒 ' + url, aX + aWidth / 2, aY + aHeight / 2 + 1);
    }

    // 7. Draw the original image below title bar
    ctx.drawImage(originalImg, wX, wY + titleBarHeight);
    ctx.restore();

    return canvas;
}