your-everyday-tools/templates/tools/css_formatter.html

{% extends "base.html" %}
{% block title %}CSS Formatter - EveryTools{% endblock %}
{% block top_title %}CSS Formatter{% endblock %}

{% block content %}
<div class="client-tool">
    <div class="tool-header">
        <h1>CSS Formatter</h1>
        <p>Beautify or minify CSS</p>
    </div>
    <div class="split-pane">
        <div class="pane">
            <div class="pane-header">
                <span>Input</span>
                <div>
                    <button class="btn btn-small" onclick="formatCSS()">Beautify</button>
                    <button class="btn btn-small" onclick="minifyCSS()">Minify</button>
                </div>
            </div>
            <div class="pane-body">
                <textarea id="css-input" placeholder=".example { color: red; background: #fff; }"></textarea>
            </div>
        </div>
        <div class="pane">
            <div class="pane-header">
                <span>Output</span>
                <button class="btn btn-small" onclick="copyOutput()"><i class="bi bi-clipboard"></i> Copy</button>
            </div>
            <div class="pane-body">
                <pre id="css-output"></pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function formatCSS() {
    let src = document.getElementById("css-input").value;
    src = src.replace(/\/\*[\s\S]*?\*\//g, m => "\u0000COMMENT" + btoa(unescape(encodeURIComponent(m))) + "\u0000");

    const out = [];
    let depth = 0;
    let i = 0;
    let buf = "";
    const pad = () => "  ".repeat(depth);

    while (i < src.length) {
        const ch = src[i];
        if (ch === "{") {
            out.push(pad() + buf.trim() + " {");
            depth++;
            buf = "";
        } else if (ch === "}") {
            if (buf.trim()) out.push(pad() + buf.trim() + (buf.trim().endsWith(";") ? "" : ";"));
            depth = Math.max(0, depth - 1);
            out.push(pad() + "}");
            buf = "";
        } else if (ch === ";") {
            const line = buf.trim();
            if (line) out.push(pad() + line + ";");
            buf = "";
        } else {
            buf += ch;
        }
        i++;
    }
    if (buf.trim()) out.push(pad() + buf.trim());

    let result = out.join("\n").replace(/\u0000COMMENT([A-Za-z0-9+/=]+)\u0000/g, (_, b) => {
        try { return decodeURIComponent(escape(atob(b))); } catch (e) { return ""; }
    });
    document.getElementById("css-output").textContent = result;
}

function minifyCSS() {
    const src = document.getElementById("css-input").value;
    const out = src
        .replace(/\/\*[\s\S]*?\*\//g, "")
        .replace(/\s*([{}:;,>~+])\s*/g, "$1")
        .replace(/;}/g, "}")
        .replace(/\s+/g, " ")
        .trim();
    document.getElementById("css-output").textContent = out;
}

function copyOutput() {
    navigator.clipboard.writeText(document.getElementById("css-output").textContent);
}
</script>
{% endblock %}