static/app.js

// =========================================================
// Theme Toggle (Light / Dark)
// =========================================================

document.addEventListener("DOMContentLoaded", () => {
    const html = document.documentElement;
    const toggleBtn = document.getElementById("themeToggle");

    // Load saved theme
    let theme = localStorage.getItem("theme") || "light";
    html.dataset.theme = theme;

    if (toggleBtn) {
        toggleBtn.addEventListener("click", () => {
            theme = theme === "light" ? "dark" : "light";
            html.dataset.theme = theme;
            localStorage.setItem("theme", theme);
        });
    }

    // =========================================================
    // Animate severity bar (confidence / aggression meter)
    // =========================================================
    const severityFill = document.querySelector(".severity-fill");
    if (severityFill) {
        const targetWidth = severityFill.getAttribute("data-width");
        if (targetWidth) {
            setTimeout(() => {
                severityFill.style.width = targetWidth + "%";
            }, 100);
        }
    }

    // =========================================================
    // Smooth fade-in for result cards
    // =========================================================
    const resultCard = document.querySelector(".result-card");
    if (resultCard) {
        resultCard.style.opacity = 0;
        setTimeout(() => {
            resultCard.style.transition = "opacity 0.4s ease, transform 0.4s ease";
            resultCard.style.opacity = 1;
            resultCard.style.transform = "translateY(0)";
        }, 80);
    }
});