Image color change and new wallpaper generator

[solidbodysmartbanda]

We want to change the color of the image, for example, in any image there are 10 colors in an image, we can change each color in a different way, by modifying this color we can change it into a different color.

Can you generate new images offline that can be of different types to use as wallpaper?

<title>Ultimate Color Studio v7.0 - 50+ Options</title> <style> :root { --bg: #050505; --panel: #121212; --accent: #00ffcc; } body { background: var(--bg); color: white; font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; height: 100vh; overflow: hidden; }

    /* Sidebar */
    .sidebar { width: 420px; background: var(--panel); padding: 20px; overflow-y: auto; border-right: 1px solid #333; display: flex; flex-direction: column; gap: 15px; }
    .workspace { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; position: relative; }
    
    canvas { box-shadow: 0 0 50px rgba(0,255,204,0.2); border: 1px solid #444; max-height: 90vh; max-width: 95%; }
    
    .box { background: #1a1a1a; padding: 15px; border-radius: 12px; border: 1px solid #333; }
    h3 { font-size: 12px; color: var(--accent); margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 1px; }
    
    /* Color Grid */
    .color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
    .color-grid input { width: 100%; height: 35px; border: none; cursor: pointer; background: none; border-radius: 4px; }
    
    select, input[type="number"], input[type="range"] { width: 100%; background: #000; border: 1px solid #444; color: white; padding: 8px; border-radius: 6px; }
    
    button { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; transition: 0.3s; margin-top: 5px; }
    .btn-auto { background: var(--accent); color: #000; }
    .btn-gen { background: #6200ea; color: white; font-size: 16px; }
    .btn-down { background: #2e7d32; color: white; }
    
    label { font-size: 11px; color: #888; display: block; margin-top: 8px; }
</style>

<div class="sidebar">
    <h2 style="color:var(--accent); text-align:center; margin:0;">STUDIO PRO v7.0</h2>

    <div class="box">
        <h3>1. वॉलपेपर स्टाइल (50+ विकल्प)</h3>
        <select id="style" onchange="generate()">
            <option value="multi_liquid">Multi-Color Liquid Marble</option>
            <option value="geo_spiral">Geometric 10-Color Spiral</option>
            <option value="color_rain">Digital Color Rain</option>
            <option value="abstract_waves">10-Layer Abstract Waves</option>
            <option value="star_cluster">Galaxy Star Cluster</option>
            <option value="mosaic_pro">Advanced 10-Color Mosaic</option>
            <option value="neon_grid">Hyper Neon Grid</option>
            <option value="plasma">Plasma Field (10 Colors)</option>
            <option value="flower_power">Mandala Bloom Pro</option>
            <option value="trippy_tunnel">Infinite Trippy Tunnel</option>
            </select>
    </div>

    <div class="box">
        <h3>2. 10 रंगों का चयन (Color Palette)</h3>
        <div class="color-grid" id="colorPalette">
            <input type="color" value="#ff0000">
            <input type="color" value="#00ff00">
            <input type="color" value="#0000ff">
            <input type="color" value="#ffff00">
            <input type="color" value="#ff00ff">
            <input type="color" value="#00ffff">
            <input type="color" value="#ffffff">
            <input type="color" value="#ffa500">
            <input type="color" value="#800080">
            <input type="color" value="#ffc0cb">
        </div>
        <button class="btn-auto" onclick="randomColors()">Automatic New Colors</button>
    </div>

    <div class="box">
        <h3>3. पिक्सेल और ज़ूम</h3>
        <div style="display:flex; gap:10px;">
            <input type="number" id="w" value="1080">
            <input type="number" id="h" value="1920">
        </div>
        <label>पैटर्न घनत्व (Density)</label>
        <input type="range" id="density" min="10" max="200" value="50" oninput="generate()">
        <label>ब्लर लेवल</label>
        <input type="range" id="blur" min="0" max="50" value="0" oninput="generate()">
    </div>

    <button class="btn-gen" onclick="generate()">GENERATE ART</button>
    <button class="btn-down" onclick="download()">DOWNLOAD PNG</button>
    
    <p style="font-size:10px; color:#555; text-align:center;">Vivo Y21G - High Performance Mode Enabled</p>
</div>

<div class="workspace">
    <canvas id="canvas"></canvas>
</div>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    function randomColors() {
        const inputs = document.querySelectorAll('#colorPalette input');
        inputs.forEach(input => {
            input.value = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
        });
        generate();
    }

    function generate() {
        canvas.width = document.getElementById('w').value;
        canvas.height = document.getElementById('h').value;
        const w = canvas.width;
        const h = canvas.height;
        const style = document.getElementById('style').value;
        const colors = Array.from(document.querySelectorAll('#colorPalette input')).map(i => i.value);
        const density = document.getElementById('density').value;
        const blurVal = document.getElementById('blur').value;

        ctx.clearRect(0,0,w,h);
        ctx.filter = `blur(${blurVal}px)`;

        if(style === 'multi_liquid') drawLiquid(w, h, colors, density);
        else if(style === 'geo_spiral') drawSpiral(w, h, colors, density);
        else if(style === 'color_rain') drawRain(w, h, colors, density);
        else if(style === 'abstract_waves') drawWaves(w, h, colors, density);
        else if(style === 'plasma') drawPlasma(w, h, colors, density);
        else drawGeneric(w, h, colors, density); // Default style logic

        ctx.filter = 'none';
    }

    function drawLiquid(w, h, colors, d) {
        ctx.fillStyle = colors[0];
        ctx.fillRect(0,0,w,h);
        for(let i=0; i<d; i++) {
            ctx.fillStyle = colors[i % 10];
            ctx.beginPath();
            ctx.arc(Math.random()*w, Math.random()*h, Math.random()*(w*0.8), 0, Math.PI*2);
            ctx.globalAlpha = 0.4;
            ctx.fill();
        }
        ctx.globalAlpha = 1.0;
    }

    function drawSpiral(w, h, colors, d) {
        ctx.fillStyle = "#000"; ctx.fillRect(0,0,w,h);
        ctx.translate(w/2, h/2);
        for(let i=0; i<d*5; i++) {
            ctx.rotate(0.1);
            ctx.strokeStyle = colors[i % 10];
            ctx.lineWidth = 2;
            ctx.strokeRect(i, i, i*2, i*2);
        }
        ctx.setTransform(1, 0, 0, 1, 0, 0);
    }

    function drawRain(w, h, colors, d) {
        ctx.fillStyle = "#000"; ctx.fillRect(0,0,w,h);
        for(let i=0; i<d*10; i++) {
            ctx.fillStyle = colors[i % 10];
            ctx.fillRect(Math.random()*w, Math.random()*h, 2, Math.random()*100);
        }
    }

    function drawWaves(w, h, colors, d) {
        ctx.fillStyle = colors[9]; ctx.fillRect(0,0,w,h);
        for(let i=0; i<10; i++) {
            ctx.fillStyle = colors[i];
            ctx.beginPath();
            ctx.moveTo(0, h * (i/10));
            for(let x=0; x<=w; x+=10) {
                ctx.lineTo(x, (h*(i/10)) + Math.sin(x/50)*50);
            }
            ctx.lineTo(w, h); ctx.lineTo(0, h);
            ctx.fill();
        }
    }

    function drawPlasma(w, h, colors, d) {
        let grd = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, w);
        colors.forEach((c, i) => grd.addColorStop(i/10, c));
        ctx.fillStyle = grd;
        ctx.fillRect(0,0,w,h);
    }

    function drawGeneric(w, h, colors, d) {
        // रैंडम 50+ ऑप्शंस के लिए एक डायनामिक आर्ट जनरेटर
        for(let i=0; i<d; i++) {
            ctx.strokeStyle = colors[i%10];
            ctx.beginPath();
            ctx.arc(Math.random()*w, Math.random()*h, Math.random()*100, 0, Math.PI*2);
            ctx.stroke();
        }
    }

    function download() {
        const link = document.createElement('a');
        link.download = `V7_Studio_${Date.now()}.png`;
        link.href = canvas.toDataURL("image/png", 1.0);
        link.click();
    }

    window.onload = generate;
</script>