<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal HUD</title>
    <link rel="stylesheet" href="style.css">
    <!-- Add Font Awesome CDN -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div id="hud-container">
        <!-- First Row: Health and Armor -->
        <div id="stats-row">
            <div id="health-background" class="hud-item text-background">
                <i class="fas fa-heart icon"></i>
                <span id="health-value">0</span>
            </div>
            <div id="armor-background" class="hud-item text-background">
                <i class="fas fa-shield-alt icon"></i>
                <span id="armor-value">0</span>
            </div>
        </div>
        <!-- Second Row: Bank -->
        <div id="bank-background" class="hud-item text-background">
            <i class="fa-solid fa-coins icon"></i>
            <span id="money-value">0</span>
        </div>
        <!-- Third Row: Location -->
        <div id="location-background" class="hud-item">
            <i class="fa-solid fa-street-view icon"></i>
            <div>
                <span id="location-name">La Puerta</span>
                <br>
                <span id="street-name">La Puerta Fwy</span>
            </div>
        </div>
    </div>
    <div id="vehicle-container">
        <div id="speed-container">
            <i class="fa-solid fa-gauge hud-icon" id="speed-icon"></i>
            <span id="speed-value">0 km/h</span>
        </div>
        <div id="status-container">
            <div id="lock-status" class="vehicle-status">
                <i class="fa-solid fa-key"></i>
            </div>
            <div id="separator-line"></div>
            <div id="engine-status" class="vehicle-status">
                <i class="fa-solid fa-wrench"></i>
            </div>
        </div>
    </div>

    <div id="xp-container">
        <div id="xp-header">Žaidėjo patirtis</div>
        <div id="xp-content">
            <div id="xp-level-box" class="xp-level">
                <div id="current-level">lvl 1</div>
            </div>
            <div id="xp-progress-wrapper">
                <div id="xp-progress-bar">
                    <div id="xp-progress-fill-green"></div>
                    <div id="xp-progress-fill-white"></div>
                </div>
                <div id="xp-details">
                    <span id="xp-amount">100 XP</span><span id="xp-next-level"> / 200 XP</span>
                    <span id="xp-gain">+50 XP</span> 
                </div>
            </div>
            <div id="next-level-box" class="xp-nextlevel">
                <div id="next-level">lvl 2</div>
            </div>
        </div>
    </div>
    <div class="compassui">
        <div class="compass-bar">
            <svg id="compass1">
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="-90"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-81"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-72"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-63"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-54"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="-45"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-36"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-27"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-18"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="-9"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="0"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="9"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="18"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="27"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="36"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="45"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="54"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="63"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="72"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="81"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="90"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="99"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="108"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="117"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="126"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="135"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="144"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="153"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="162"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="171"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="180"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="189"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="198"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="207"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="216"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="225"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="234"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="243"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="252"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="261"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="270"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="279"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="288"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="297"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="306"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="315"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="324"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="333"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="342"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="351"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="360"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="369"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="378"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="387"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="396"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="405"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="414"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="423"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="432"/>
                <rect width="1" fill="#949494" stroke-width="0.3" stroke-opacity="0.6" height="4" x="441"/>
                <rect width="1" fill="white" stroke-width="0.3" height="6" x="450"/>
            </svg>

            <svg id="compass2">
                <text x="0"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">N</text>
                <text x="360"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">N</text>

                <text x="315"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">NW</text>
                <text x="-45"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">NW</text>
                
                <text x="45"  y="1.5"  fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">NE</text>
                <text x="405"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">NE</text>
                
                <text x="90"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">E</text>
                <text x="135"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">SE</text>
                <text x="180"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">SE</text>
                <text x="225"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">SW</text>
                <text x="270"  y="1.5" fill="white" stroke-width="0.4" stroke-opacity="0.8" text-anchor="middle">W</text>
            </svg>
        </div>

        <div class="compas-line">
            <div class="compass-bar">|</div>
            <div class="compass"></div>
        </div>
    </div>

    <div id="killfeed-container"></div>
    
    <div id="killstreak-container" class="killstreak-hidden">
        <div class="killstreak-content">
            <div id="killstreak-number">2</div>
            <i class="fas fa-fire-flame-curved"></i>
        </div>
        <div class="killstreak-label">Killstreak</div>
    </div>
    

    <div id="time-logo-container">
        <a href="https://i.ibb.co/LdmG3B3S/5sides-logo.png" target="_blank">
            <img src="https://i.ibb.co/LdmG3B3S/5sides-logo.png" alt="Logo" id="logo">
        </a>
        <div id="time-container">
            <i class="fa-solid fa-clock"></i>
            <span id="time-display">14:53 2024.08.23</span>
        </div>
        <div id="players-container">
            <i class="fa-solid fa-users"></i>
            <span id="players-display">Prisijungta žaidėjų: 20</span>
        </div>
        <div id="id-container">
            <i class="fa-solid fa-user"></i>
            <span id="id-display">Jūsų ID: 0</span>
        </div>
    </div>
    

    <div class="combat-indicator" id="combatIndicator">
        <i class="fa-solid fa-location-crosshairs"></i>
        KOVOS REŽIMAS
    
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
