<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUD</title>
    <link rel="stylesheet" href="styles.css">  
</head>
<body>
    <div id="kill-feed">
    </div>

    
    <div id="hud">
        <div id="hud-container">
            <img id="logo" src="logo.png" alt="Logo">
            <div id="hud-content">
                Id unique: <span id="uuid" class="text-red"></span> | 
                Mode: <span id="game" class="text-red"></span>
            </div>
        </div>
    </div>
    
    <div id="hud1-status-bar-wrapper">
        <div id="hud1-bars-container">
            <div class="hud1-bar-wrapper">
                <div id="hud1-health-bar-container">
                    <div id="hud1-health-bar"></div>
                </div>
            </div>
            <div class="hud1-bar-wrapper">
                <div id="hud1-armor-bar-container">
                    <div id="hud1-armor-bar"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="hud2-status-bar-wrapper">
        <div id="hud2-bars-container">
            <div class="hud2-bar-wrapper">
                <img class="hud2-bar-icon" id="hud2-health-icon" src="health.png" alt="Health Icon">
                <div id="hud2-health-bar-container">
                    <div id="hud2-health-bar"></div>
                </div>
            </div>
            <div class="hud2-bar-wrapper">
                <img class="hud2-bar-icon" id="hud2-armor-icon" src="armor.png" alt="Armor Icon">
                <div id="hud2-armor-bar-container">
                    <div id="hud2-armor-bar"></div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="progressBarsContainer" class="progress-bar-container"></div>


    <div id="speedometer">
        <div id="speed-display">0</div>
        <div id="unit">km/h</div>
    </div>
    
    <div class="annonce">
        <div class="header-annonce">
            <img src="logo.png" alt="Logo" class="logo">
            <h2>ANNONCE CVC</h2>
        </div>
        <p id="texte-annonce">text</p>
    </div>

    <script src="main.js"></script>  
</body>
</html>
