Android Dual Ringtone Creator

function processImage(originalImg, sim1Ringtone = "Over the Horizon", sim2Ringtone = "Helium") {
    // Creates a mock "Android Dual Ringtone Settings" interface overlaying the provided image
    const canvas = document.createElement('canvas');
    // Set standard portrait smartphone aspect ratio width
    canvas.width = 400;
    // Calculate aspect ratio height, with a minimum of 700px
    canvas.height = Math.max((originalImg.height * (canvas.width / originalImg.width)), 700);
    const ctx = canvas.getContext('2d');

    // 1. Draw the original image as the background
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 2. Apply a dark dimming overlay to simulate an Android Dark Mode background
    ctx.fillStyle = 'rgba(15, 15, 15, 0.85)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 3. Draw standard Android Status Bar (Time, Signal, Battery)
    ctx.fillStyle = '#ffffff';
    ctx.font = '500 14px "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    
    const now = new Date();
    const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
    ctx.fillText(timeString, 20, 15);

    ctx.textAlign = 'right';
    ctx.fillText('5G  |  100%', canvas.width - 20, 15);

    // 4. Draw App Bar / Top Navigation
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.font = '400 24px "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    ctx.fillText('←    Ringtone', 20, 70);

    // Helper function to draw a simple SIM card icon
    function drawSimIcon(x, y) {
        ctx.beginPath();
        ctx.moveTo(x + 2, y);
        ctx.lineTo(x + 12, y);
        ctx.lineTo(x + 16, y + 4);
        ctx.lineTo(x + 16, y + 20);
        ctx.lineTo(x + 2, y + 20);
        ctx.closePath();
        ctx.strokeStyle = '#a8c7fa';
        ctx.lineWidth = 1.5;
        ctx.stroke();

        ctx.beginPath();
        // Inner chip lines
        ctx.moveTo(x + 5, y + 8);  ctx.lineTo(x + 13, y + 8);
        ctx.moveTo(x + 5, y + 12); ctx.lineTo(x + 13, y + 12);
        ctx.moveTo(x + 5, y + 16); ctx.lineTo(x + 13, y + 16);
        ctx.strokeStyle = '#a8c7fa';
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    // 5. Draw SIM 1 Settings Block
    const sim1y = 140;
    drawSimIcon(25, sim1y - 5);
    
    ctx.fillStyle = '#a8c7fa'; // Material Design 3 Primary color for dark mode
    ctx.font = '600 14px "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    ctx.fillText('SIM 1', 60, sim1y);
    
    ctx.fillStyle = '#e3e3e3';
    ctx.font = '400 18px "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    ctx.fillText(sim1Ringtone, 60, sim1y + 25);

    // Draw separator line
    ctx.fillStyle = '#333333';
    ctx.fillRect(60, sim1y + 50, canvas.width - 80, 1);

    // 6. Draw SIM 2 Settings Block
    const sim2y = 220;
    drawSimIcon(25, sim2y - 5);
    
    ctx.fillStyle = '#a8c7fa';
    ctx.font = '600 14px "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    ctx.fillText('SIM 2', 60, sim2y);
    
    ctx.fillStyle = '#e3e3e3';
    ctx.font = '400 18px "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    ctx.fillText(sim2Ringtone, 60, sim2y + 25);

    // Draw separator line
    ctx.fillStyle = '#333333';
    ctx.fillRect(60, sim2y + 50, canvas.width - 80, 1);

    // 7. Draw "Add Ringtone" Button (Create/Add Two Ringtones)
    const btnX = 25;
    const btnY = 310;
    const btnW = canvas.width - 50;
    const btnH = 50;
    const btnR = 25;

    ctx.fillStyle = '#a8c7fa'; // Button Background
    ctx.beginPath();
    ctx.moveTo(btnX + btnR, btnY);
    ctx.lineTo(btnX + btnW - btnR, btnY);
    ctx.quadraticCurveTo(btnX + btnW, btnY, btnX + btnW, btnY + btnR);
    ctx.lineTo(btnX + btnW, btnY + btnH - btnR);
    ctx.quadraticCurveTo(btnX + btnW, btnY + btnH, btnX + btnW - btnR, btnY + btnH);
    ctx.lineTo(btnX + btnR, btnY + btnH);
    ctx.quadraticCurveTo(btnX, btnY + btnH, btnX, btnY + btnH - btnR);
    ctx.lineTo(btnX, btnY + btnR);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnR, btnY);
    ctx.closePath();
    ctx.fill();

    // Button Text
    ctx.fillStyle = '#000000';
    ctx.textAlign = 'center';
    ctx.font = '600 16px "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    ctx.fillText('+ Add Dual Ringtones', canvas.width / 2, btnY + (btnH / 2));

    return canvas;
}