<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D HUD</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- Player ID Display -->
    <div id="player-id-display">ID: <span id="player-id">1</span></div>

    <div id="job-grade-container">
        <div class="job-grade" id="job">Police</div>
        <div class="job-grade" id="grade">Boss</div>
    </div>

    <!-- Money HUD Container -->
    <div id="money-hud-container">
        <!-- Cash Display -->
        <div id="cash-display">$<span id="cash-amount">1500</span></div>
        <!-- Bank Display -->
        <div id="bank-display">
            <i class="fa fa-bank"></i> $<span id="bank-amount">2468000</span>
        </div>
    </div>

    <!-- Main HUD Container for other elements -->
    <div id="hud-container">
        <!-- HUD Icons -->
        <div id="hud-icons">
            <div class="icon" id="direction-icon">N</div>
            <div id="mic-container">
                <img id="mic-off" src="mic.svg" alt="Mic Off" />
                <img id="mic-on" src="mic_Normal.svg" alt="Mic On" style="display: none;" />
            </div>
        </div>
        
        <!-- Mic Status and Ammo Display -->
        <div id="mic-status-container">
            
            <div id="mic-status"><span id="mic-status-text">Normal</span></div>
            <div id="radio-status" style="display: none;">Radio: </div>



            <div id="ammo-display">Ammo: <span id="ammo-count">0/0</span></div>

            
        </div>
    </div>

    <!-- Zone Status Container -->
    <div id="zone-status-container">

        <div id="safezone-status">Safe Zone</div>
        <div id="niz-status">NiZ  Zone</div>
    </div>

    <!-- JavaScript File -->
    <script src="script.js"></script>
</body>
</html>
