<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUD Stats</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="hud">
        <div class="profile">
            <img src="https://cdn.discordapp.com/embed/avatars/0.png" alt="Avatar" class="avatar" id="avatar">
            <div class="username" id="username">Player</div>
        </div>
        <div class="stats">
            <div class="stat">
                <span class="label">Kills</span>
                <span class="value" id="kills">0</span>
            </div>
            <div class="stat">
                <span class="label">Deaths</span>
                <span class="value" id="deaths">0</span>
            </div>
            <div class="stat">
                <span class="label">K/D</span>
                <span class="value" id="kd">0</span>
            </div>
            <div class="stat">
                <span class="label">Level</span>
                <span class="value" id="level">0</span>
            </div>
        </div>
    </div>

    <script>
        if ('alt' in window) {
    alt.on('updateStats', (data) => {
        const kills = parseInt(data.kills, 10) || 0;
        const deaths = parseInt(data.deaths, 10) || 0;
        const kd = deaths > 0 ? (kills / deaths).toFixed(2) : kills;

        document.getElementById('kd').innerText = kd || 0;
        document.getElementById('level').innerText = data.level || 0;
        document.getElementById('kills').innerText = data.kills || 0;
        document.getElementById('deaths').innerText = data.deaths || 0;

        if (data.avatarUrl) {
            document.getElementById('avatar').src = data.avatarUrl;
        }

        if (data.username) {
            document.getElementById('username').innerText = data.username;
        }
    });
}
    </script>
</body>
</html>