script.js

function normalizeText(text, caseMode, skipPunctuation) {
    if (caseMode === "lower") text = text.toLowerCase();
    if (caseMode === "upper") text = text.toUpperCase();

    if (skipPunctuation) {
        text = text.replace(/[^a-zA-Z]/g, "");
    }

    return text;
}

function groupText(text, size, padChar) {
    const groups = [];
    for (let i = 0; i < text.length; i += size) {
        let chunk = text.slice(i, i + size);
        if (chunk.length < size) {
            chunk = chunk.padEnd(size, padChar);
        }
        groups.push(chunk);
    }
    return groups;
}

function groupToHexColor(group) {
    let hex = "";
    for (const char of group) {
        hex += char.charCodeAt(0).toString(16).padStart(2, "0");
    }
    return "#" + hex;
}

function generateBanner() {
    const text = document.getElementById("inputText").value;
    const caseMode = document.getElementById("caseMode").value;
    const skipPunctuation = document.getElementById("skipPunctuation").checked;
    const groupSize = parseInt(document.getElementById("groupSize").value);
    const padChar = document.getElementById("padChar").value || "0";
    const useGradient = document.getElementById("useGradient").checked;

    const normalized = normalizeText(text, caseMode, skipPunctuation);
    const groups = groupText(normalized, groupSize, padChar);
    const colors = groups.map(groupToHexColor);

    const banner = document.getElementById("banner");
    banner.innerHTML = "";

    if (useGradient) {
        // Smooth transition between all colors
        banner.style.background = `linear-gradient(to right, ${colors.join(", ")})`;
    } else {
        // Solid blocks
        banner.style.background = "none";
        colors.forEach(color => {
            const div = document.createElement("div");
            div.className = "color-block";
            div.style.backgroundColor = color;
            banner.appendChild(div);
        });
    }
}



function getDimensions(ratio) {
    switch (ratio) {
        case "2:3": return { width: 600, height: 400 };
        case "1:2": return { width: 700, height: 350 };
        case "1:1": return { width: 500, height: 500 };
    }
}

function exportPNG(colors, useGradient, ratio) {
    const { width, height } = getDimensions(ratio);
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");

    if (useGradient) {
        const grad = ctx.createLinearGradient(0, 0, width, 0);
        const step = 1 / (colors.length - 1);
        colors.forEach((color, i) => grad.addColorStop(i * step, color));
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, width, height);
    } else {
        const stripeWidth = width / colors.length;
        colors.forEach((color, i) => {
            ctx.fillStyle = color;
            ctx.fillRect(i * stripeWidth, 0, stripeWidth, height);
        });
    }

    const link = document.createElement("a");
    link.download = "flag.png";
    link.href = canvas.toDataURL("image/png");
    link.click();
}

function exportSVG(colors, useGradient, ratio) {
    const { width, height } = getDimensions(ratio);

    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">`;

    if (useGradient) {
        svg += `
        <defs>
            <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
                ${colors.map((c, i) => {
            const pct = (i / (colors.length - 1)) * 100;
            return `<stop offset="${pct}%" stop-color="${c}" />`;
        }).join("")}
            </linearGradient>
        </defs>
        <rect width="100%" height="100%" fill="url(#grad)" />
        `;
    } else {
        const stripeWidth = width / colors.length;
        colors.forEach((color, i) => {
            svg += `<rect x="${i * stripeWidth}" y="0" width="${stripeWidth}" height="${height}" fill="${color}" />`;
        });
    }

    svg += `</svg>`;

    const blob = new Blob([svg], { type: "image/svg+xml" });
    const link = document.createElement("a");
    link.download = "flag.svg";
    link.href = URL.createObjectURL(blob);
    link.click();
}

document.getElementById("generateBtn").addEventListener("click", generateBanner);

document.getElementById("themeToggle").addEventListener("click", () => {
    document.body.classList.toggle("dark");
    const btn = document.getElementById("themeToggle");
    btn.textContent = document.body.classList.contains("dark") ? "☀️" : "🌙";
});

document.getElementById("exportBtn").addEventListener("click", () => {
    const text = document.getElementById("inputText").value;
    const caseMode = document.getElementById("caseMode").value;
    const skipPunctuation = document.getElementById("skipPunctuation").checked;
    const groupSize = parseInt(document.getElementById("groupSize").value);
    const padChar = document.getElementById("padChar").value || "0";
    const useGradient = document.getElementById("useGradient").checked;

    const format = document.getElementById("exportFormat").value;
    const ratio = document.getElementById("exportRatio").value;

    const normalized = normalizeText(text, caseMode, skipPunctuation);
    const groups = groupText(normalized, groupSize, padChar);
    const colors = groups.map(groupToHexColor);

    if (format === "png") {
        exportPNG(colors, useGradient, ratio);
    } else {
        exportSVG(colors, useGradient, ratio);
    }
});