Bienvenue sur votre Panel, ... !

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap" rel="stylesheet">

<div class="simple-goal-container">
    <span id="goal-current">0</span>
</div>

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

.simple-goal-container {
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

#goal-current {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(30px, 12vw, 55px); 
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 8px #00d2ff, 0 0 15px #d900ff;
    letter-spacing: 2px;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s ease;
}

.counting {
    animation: neon-pulse 0.2s infinite;
}

.random-glitch {
    filter: hue-rotate(180deg) brightness(2);
    transform: scale(1.1) skewX(10deg);
    text-shadow: 0 0 30px #ff007a;
}

@keyframes neon-pulse {
    0% { text-shadow: 0 0 8px #00d2ff, 0 0 15px #d900ff; }
    50% { text-shadow: 0 0 15px #00d2ff, 0 0 25px #d900ff; }
    100% { text-shadow: 0 0 8px #00d2ff, 0 0 15px #d900ff; }
}

#goal-current::after {
    content: "€";
    margin-left: 8px;
    color: #d900ff;
    text-shadow: 0 0 10px #d900ff;
}

let globalCurrentAmount = 0;

function animateCount($element, from, to, duration) {
    to = parseFloat(to) || 0;
    from = parseFloat(from) || 0;
    const range = to - from;
    
    if (Math.abs(range) < 0.01) {
        $element.text(to.toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 2 }));
        globalCurrentAmount = to;
        return;
    }

    $element.addClass('counting');
    const steps = 120; 
    const stepTime = duration / steps;
    let current = from;
    const increment = range / steps;

    const interval = setInterval(() => {
        current += increment;
        const displayValue = current.toLocaleString('fr-FR', { 
            minimumFractionDigits: 0, 
            maximumFractionDigits: 2 
        });

        if (Math.random() < 0.07) {
            const glyphs = ["X", "9", "0", "1", "!", "#", "$"];
            $element.text(displayValue + glyphs[Math.floor(Math.random() * glyphs.length)]);
        } else {
            $element.text(displayValue);
        }

        if (Math.random() < 0.02) {
            $element.addClass('random-glitch');
            setTimeout(() => $element.removeClass('random-glitch'), 100);
        }

        if ((increment > 0 && current >= to) || (increment < 0 && current <= to)) {
            current = to;
            clearInterval(interval);
            $element.text(current.toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 2 }));
            $element.removeClass('counting');
            $element.removeClass('random-glitch');
            globalCurrentAmount = to;
        }
    }, stepTime);
}

document.addEventListener('goalLoad', function (obj) {
    const amount = obj.detail.amount.current;
    animateCount($('#goal-current'), 0, amount, 5000); 
});

document.addEventListener('goalEvent', function (obj) {
    const newAmount = obj.detail.amount.current;
    const $goal = $('#goal-current');
    animateCount($goal, globalCurrentAmount, newAmount, 3000);
});