<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="nui://game/ui/jquery.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

        body {
            font-family: Inter !important;
        }

        /* General styles for the HUD */
        #hud {
            position: absolute;
            bottom: 20px;
            right: 5px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Speedometer Section */
        #vehicle {
            display: none;  /* Initially hidden */
            position: relative;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 30px;
            border-radius: 50%;
            width: 180px;
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
        }

        .speed-placeholder {
            font-size: 35px;
            color: rgba(255, 255, 255, 0.5);
        }

        .speed-value {
            font-size: 70px;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
        }

        .mph-label {
            font-size: 18px;
            font-weight: 500;
            color: white;
            background-color: rgba(67, 56, 202, 0.9);
            padding: 6px 15px;
            border-radius: 8px;
            margin-top: 10px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
        }

        /* Icons for Seatbelt, Engine, and Headlight */
        .icon-container {
            display: flex;
            flex-direction: column;
            /* Stack icons vertically */
            gap: 6px;
            /* Maintain space between icons */
            position: absolute;
            right: -50px;
            /* Increase this value to move further right */
            top: 50%;
            /* Center vertically */
            transform: translateY(-50%);
            /* Ensure it's centered */
            align-items: center;
            /* Keep icons aligned properly */
            width: auto;
            /* Prevent unintended shrinking */
            flex-shrink: 0;
            /* Ensure icons don't shrink */
        }

        .icon-container img {
            width: 30px;
            /* Maintain size */
            height: auto;
            /* Keep aspect ratio */
        }

        /* Footer Location Section */
        #foot {
            display: none; /* Initially hidden */
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 12px;
            display: flex;
            gap: 15px;
            align-items: center;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
            width: 280px;
        }

        .footer-direction-indicator {
            background-color: rgba(67, 56, 202, 0.8);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: white;
        }

        .footer-street-info {
            font-size: 16px;
            color: white;
        }
    </style>
</head>

<body>
    <div id="hud">
        <!-- Vehicle HUD (Speedometer and Icons) -->
        <div id="vehicle">
            <span class="speed-value" id="speed">0</span>
            <div class="mph-label">MPH</div>

            <!-- Icons (Seatbelt, Engine, Headlight) -->
            <div class="icon-container">
                <img id="seatbelt" src="./media/seatbelt.png">
                <img id="engine" src="./media/engine.png">
                <img id="headlight" src="./media/headlight.png">
            </div>
        </div>

        <!-- Foot HUD (Location Display) -->
        <div id="foot">
            <div class="footer-direction-indicator" id="direction-2">E</div>
            <div class="footer-street-info">
                <div class="street-name" id="street-2">Sinner Street</div>
                <div class="postcode" id="postcode-2">Beverley</div>
            </div>
        </div>
    </div>

    <script src="index.js"></script>
</body>

</html>
