<!DOCTYPE html>
<html>
<head>
    <style>
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
        body{
            font-family: 'Inter', sans-serif;
        }
        .stats-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            gap: 20px;
            font-family: 'Inter', sans-serif;
        }

        /* Health and Armor styles remain the same */
        .vitals-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .vital-box {
            background: #0000006c;
            border-radius: 10px;
            padding: 4px 8px;
            color: white;
            transition: all 0.3s ease;
            width: 150px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-left: 2px solid;
        }

        .points-container {
            position: fixed;
            top: 300px;
            right: 10px;
            padding: 4px 8px;
            font-family: 'Inter', sans-serif;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .points-display {
            background: #0000006c;
            border-radius: 12px;
            padding: 7px 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 150px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .points-display::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #67ff73, transparent);
            animation: scan 4s linear infinite;
        }

        .points-icon {
            position: relative;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .points-icon i {
            font-size: 14px;
            color: #67ff73;
            z-index: 1;
        }

        .points-icon::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00f5b41a;
            border-radius: 12px;
            animation: pulse 2s infinite;
        }

        .points-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .points-label {
            font-size: 9px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 2px;
            font-weight: 500;
        }

        .points-value {
            font-size: 18px;
            font-weight: 700;
            color: #67ff73;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .points-rank {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.8);
            background: rgba(0, 245, 180, 0.1);
            padding: 4px 4px;
            border-radius: 8px;
            margin-left: 0;
            margin-right: -20px;
            text-align: right;
        }

        /* Health and Armor Components */
        .icon-container {
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 18px;
        }

        .stats-info {
            flex: 1;
        }

        .stat-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.7;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .stat-value {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            transition: width 0.3s ease;
        }

        .health {
            border-color: #FF4D6B;
        }

        .health .icon-container {
            background: rgba(255, 77, 107, 0.2);
            color: #FF4D6B;
        }

        .health .progress-fill {
            background: linear-gradient(90deg, #FF4D6B, #FF8F9D);
        }

        .armor {
            border-color: #4BB3FD;
        }

        .armor .icon-container {
            background: rgba(75, 179, 253, 0.2);
            color: #4BB3FD;
        }

        .armor .progress-fill {
            background: linear-gradient(90deg, #4BB3FD, #80D0FF);
        }

        /* Speedometer */
        .speedometer-container {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #0000006c;
            border-radius: 12px;
            padding: 5px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: color 0.3s ease; /* Smooth color transition */
            color: white; /* Default color */


        }

        .speedometer-icon {
            font-size: 23px;
            color: #ffffff;
        }

        .speedometer-value {
            font-size: 26px;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(0, 81, 255, 0.445);
        }

        .speedometer-label {
            font-size: 9px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: 1px;
        }

        /* Player ID and Player Count */
        .player-id-container {
            position: fixed;
            bottom: 810px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .player-id {
            background: #0000006c;
            color: white;
            padding: 6px 8px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .player-id i {
            color: #ffee00;
            font-size: 20px;
        }

        .player-count-container {
            position: fixed;
            bottom: 850px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .player-count {
            background: #0000006c;
            color: white;
            padding: 6px 8px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .player-count i {
            color: #ffee00;
            font-size: 18px;
        }

    </style>
</head>
<body>
    <!-- Stats Section -->
    <div class="stats-container">
        <div class="vitals-container">
            <div class="vital-box health" id="health-box">
                <div class="icon-container"><i class="fas fa-heart"></i></div>
                <div class="stats-info">
                    <div class="stat-label">Health</div>
                    <div class="stat-value" id="health-value">100</div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="health-progress"></div>
                    </div>
                </div>
            </div>
            <div class="vital-box armor" id="armor-box">
                <div class="icon-container"><i class="fas fa-shield-alt"></i></div>
                <div class="stats-info">
                    <div class="stat-label">Armor</div>
                    <div class="stat-value" id="armor-value">75</div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="armor-progress"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Points Display -->
    <div class="points-container">
        <div class="points-display" id="points-display">
            <div class="points-icon"><i class="fas fa-star"></i></div>
            <div class="points-info">
                <div class="points-label">Points</div>
                <div class="points-value" id="points-value">10k <span class="points-rank" id="points-rank">Elite</span></div>
            </div>
        </div>
    </div>

    <!-- Speedometer -->
    <div class="speedometer-container">
        <div class="speedometer-icon"><i class="fas fa-tachometer-alt"></i></div>
        <div class="speedometer-info">
            <div class="speedometer-label">Speed</div>
            <div class="speedometer-value" id="speed-value">120 KM/H</div>
        </div>
    </div>

    <!-- Player ID -->
    <div class="player-id-container">
        <div class="player-id" id="player-id">
            <i class="fas fa-user"></i><span>ID: 5</span>
        </div>
    </div>

    <!-- Player Count -->
    <div class="player-count-container">
        <div class="player-count" id="player-count">
            <i class="fas fa-users"></i><span>Players: 50</span>
        </div>
    </div>

    <!-- Add your JavaScript to handle backend interactions -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="nativescript.js"></script>
    <script src="script.js"></script>

</body>
</html>
