<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
        <script src="assets/progressbar.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
            <div id="wrapper">
                <div id="topHud">
                    <div id="logoContainer">
                        <img id="serverLogo" src="https://i.ibb.co/CtSrZYN/ELITE-PVP-LOGO-CUTOUT.png" alt="Server Logo">
                    </div>
                    <div id="infoDisplay" style="display: flex; justify-content: space-between; width: 100%;">
                        <div id="idDisplay" style="display: flex; flex-direction: column; align-items: center; margin-right: 1vw;">
                            <div style="display: flex; align-items: center;">
                                <i class="fa-solid fa-circle-dot neon-animation" style="color: rgb(255, 187, 0);"></i>
                                <div class="upperText" style="margin-left: 0.4vw;">Jūsų ID</div>
                            </div>
                            <div id="playerId" class="lowerText">1</div>
                        </div>
                        <div id="playersDisplay" style="display: flex; flex-direction: column; align-items: center;">
                            <div style="display: flex; align-items: center;">
                                <i class="fa-regular fa-circle-dot neon-animation2" style="color: rgb(12, 185, 0);"></i>
                                <div class="upperText" style="margin-left: 0.4vw;">Aktyvūs žaidėjai</div>
                            </div>
                            <div id="playerCount" class="lowerText">xx iš xx</div>
                        </div>
                    </div>
            
                    <!-- Money and Time in the Same Line -->
                    <div id="moneyAndTimeDisplay" style="display: flex; justify-content: space-between; width: 100%; margin-top: 1vw;">
                        <!-- Money Display -->
                        <div id="MoneyDisplay" style="display: flex; flex-direction: column; align-items: center; margin-right: 2vw;">
                            <div style="display: flex; align-items: center;">
                                <i class="fa-solid fa-coins" style="color: rgb(205, 182, 6);"></i>
                                <div class="upperText" style="margin-left: 0.4vw;">Jūsų pinigai</div>
                            </div>
                            <div id="moneyAmount" class="lowerText">0</div>
                        </div>
                        <!-- Timer Clock Display -->
                        <div id="timeDisplay" style="display: flex; flex-direction: column; align-items: center;">
                            <div style="display: flex; align-items: center;">
                                <i class="fa-regular fa-clock" style="color: rgb(255, 255, 255);"></i>
                                <div class="upperText" style="margin-left: 0.4vw;">Laikas</div>
                            </div>
                            <div id="currentTime" class="lowerText">00:00</div>
                        </div>
                    </div>
            
                </div>
            </div>
            
        

        <div id="speedHud">
            <div id="fuelTrail"></div>
            <div id="fuelDisplay"></div>
            <div id="fuelIcon" class=""></div>

            <svg id="rpmTrail" width="100" height="100">
                <path id="rpmTrailPath" d="M 50 100 Q 25 90 0 100 L 0 150" fill="none"></path>
            </svg>

            <svg id="rpmDisplay" width="100" height="100">
                <path id="rpmDisplayPath" d="M 50 100 Q 25 90 0 100 L 0 150" fill="none"></path>
            </svg>

            <div id="speedDisplay">
                <div id="speedText" class="speedText">000</div>
                <div id="speedUnit" class="speedText">KM/H</div>
            </div>

            <div id="speedBottom">
                <div id="beltDisplay" class="" style="margin-right: 0.3vw"></div>
                <div id="lockDisplay" class=""></div>
            </div>
        </div>
    </body>
</html>

    <div id="rankContainer">
        <div id="rankUI">
            <h1 id="rankName">Krauna</h1>
            <p id="xpDisplay">0 / 1000 XP</p>
            <div class="progress-bar">
                <div id="progress"></div>
                <div id="xpGainProgress"></div>
                <div id="xpGain"></div>
            </div>
        </div>
    </div>
</body>
</html>

