Google Scanner Identifier Image Viewer

function processImage(originalImg, themeColor = "#4285f4", scanSpeed = "2") {
    const speedInSeconds = parseFloat(scanSpeed) > 0 ? parseFloat(scanSpeed) : 2;

    const container = document.createElement("div");
    container.style.position = "relative";
    container.style.display = "inline-block";
    container.style.overflow = "hidden";
    container.style.fontFamily = "Arial, sans-serif";
    container.style.lineHeight = "0";

    // Use a canvas to clone the image strictly visually to avoid path/src CORS issues
    const displayCanvas = document.createElement("canvas");
    displayCanvas.width = originalImg.naturalWidth || originalImg.width;
    displayCanvas.height = originalImg.naturalHeight || originalImg.height;
    displayCanvas.style.display = "block";
    displayCanvas.style.maxWidth = "100%";
    displayCanvas.style.height = "auto";
    const ctx = displayCanvas.getContext("2d");
    ctx.drawImage(originalImg, 0, 0);
    container.appendChild(displayCanvas);

    // Creates the overlay container wrapper (transparent)
    const overlay = document.createElement("div");
    overlay.style.position = "absolute";
    overlay.style.top = "0";
    overlay.style.left = "0";
    overlay.style.width = "100%";
    overlay.style.height = "100%";
    overlay.style.display = "flex";
    overlay.style.alignItems = "center";
    overlay.style.justifyContent = "center";
    container.appendChild(overlay);

    // Creates the targeted scanning box with an outer shadow for dimming 
    const targetBox = document.createElement("div");
    targetBox.style.position = "relative";
    targetBox.style.width = "65%";
    targetBox.style.height = "65%";
    targetBox.style.boxShadow = "0 0 0 9999px rgba(0,0,0,0.55)";
    targetBox.style.borderRadius = "12px";
    overlay.appendChild(targetBox);

    // Draws corners of the scanner box
    const cornerSize = "24px";
    const cornerThickness = "4px";
    const boxColor = "white";
    
    const corners = [
        { top: "-2px", left: "-2px", borderTop: cornerThickness + " solid " + boxColor, borderLeft: cornerThickness + " solid " + boxColor, borderTopLeftRadius: "12px" },
        { top: "-2px", right: "-2px", borderTop: cornerThickness + " solid " + boxColor, borderRight: cornerThickness + " solid " + boxColor, borderTopRightRadius: "12px" },
        { bottom: "-2px", left: "-2px", borderBottom: cornerThickness + " solid " + boxColor, borderLeft: cornerThickness + " solid " + boxColor, borderBottomLeftRadius: "12px" },
        { bottom: "-2px", right: "-2px", borderBottom: cornerThickness + " solid " + boxColor, borderRight: cornerThickness + " solid " + boxColor, borderBottomRightRadius: "12px" }
    ];

    corners.forEach(coords => {
        const c = document.createElement("div");
        c.style.position = "absolute";
        c.style.width = cornerSize;
        c.style.height = cornerSize;
        c.style.boxSizing = "border-box";
        Object.assign(c.style, coords);
        targetBox.appendChild(c);
    });

    const styleSheet = document.createElement("style");
    
    // Creates the sweeping scanner line
    const scanLine = document.createElement("div");
    scanLine.style.position = "absolute";
    scanLine.style.left = "0";
    scanLine.style.width = "100%";
    scanLine.style.height = "2px";
    scanLine.style.backgroundColor = themeColor;
    scanLine.style.boxShadow = "0 0 8px 1px " + themeColor;
    scanLine.style.opacity = "0.9";
    
    const scanAnimName = "scanLineAnim_" + Math.random().toString(36).substring(2);
    styleSheet.textContent += `
        @keyframes ${scanAnimName} {
            0% { top: 5%; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 95%; opacity: 0; }
        }
    `;
    scanLine.style.animation = `${scanAnimName} ${speedInSeconds}s linear infinite`;
    targetBox.appendChild(scanLine);

    // Adds abstract identification floating dots like Google Lens
    for (let i = 0; i < 4; i++) {
        const dot = document.createElement("div");
        dot.style.position = "absolute";
        dot.style.width = "8px";
        dot.style.height = "8px";
        dot.style.borderRadius = "50%";
        dot.style.backgroundColor = "white";
        dot.style.boxShadow = "0 0 5px rgba(0,0,0,0.5)";
        
        const dotAnimName = "dotAnim_" + Math.random().toString(36).substring(2);
        styleSheet.textContent += `
            @keyframes ${dotAnimName} {
                0% { transform: scale(0.5); opacity: 0; }
                50% { transform: scale(1.3); opacity: 0.9; }
                100% { transform: scale(0.5); opacity: 0; }
            }
        `;
        
        dot.style.left = (15 + Math.random() * 70) + "%";
        dot.style.top = (15 + Math.random() * 70) + "%";
        dot.style.animation = `${dotAnimName} ${1.5 + Math.random() * 2}s ease-in-out infinite`;
        dot.style.animationDelay = (Math.random() * 2) + "s";
        targetBox.appendChild(dot);
    }
    
    // Bottom Identifier Label Strip
    const labelContainer = document.createElement("div");
    labelContainer.style.position = "absolute";
    labelContainer.style.bottom = "24px";
    labelContainer.style.left = "50%";
    labelContainer.style.transform = "translateX(-50%)";
    labelContainer.style.display = "flex";
    labelContainer.style.alignItems = "center";
    labelContainer.style.gap = "8px";
    labelContainer.style.backgroundColor = "rgba(0,0,0,0.65)";
    labelContainer.style.padding = "8px 16px";
    labelContainer.style.borderRadius = "20px";
    labelContainer.style.boxShadow = "0 2px 10px rgba(0,0,0,0.3)";
    labelContainer.style.zIndex = "10";

    // Beautiful SVG Google 'G' Icon built with raw paths
    const iconWrapper = document.createElement("div");
    iconWrapper.style.lineHeight = "0";
    iconWrapper.innerHTML = `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
    </svg>`;
    
    const label = document.createElement("span");
    label.style.color = "white";
    label.style.fontSize = "14px";
    label.style.fontWeight = "600";
    label.style.letterSpacing = "0.5px";
    label.textContent = "Google Scanner Identifier";

    labelContainer.appendChild(iconWrapper);
    labelContainer.appendChild(label);
    
    container.appendChild(labelContainer);
    container.appendChild(styleSheet);

    return container;
}