<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <div class="hud-container">
        <div class="icon-grid">
            <div class="icon-item icon-bg">
                <i class="fas fa-heartbeat text-2xl text-white"></i>
            </div>
            <div class="icon-item icon-bg">
                <i class="fas fa-shield-alt text-2xl text-white"></i>
            </div>
            <div class="icon-item icon-bg">
                <i class="fas fa-utensils text-2xl text-white"></i>
            </div>
            <div class="icon-item icon-bg">
                <i class="fas fa-tint text-2xl text-white"></i>
            </div>
            <div class="icon-item icon-bg">
                <i class="fas fa-running text-2xl text-white"></i>
            </div>
        </div>
    </div>

    <div class="huds">
        <div class="kilometers">12 KM</div>
        <div class="fuel">
            <svg class="circle" width="40" height="40">
                <circle class="background" stroke="#FFFFFF" stroke-width="3" fill="transparent" r="18" cx="20" cy="20"
                    stroke-dasharray="70 30" stroke-dashoffset="0" style="stroke-opacity: 0.2;"></circle>
                <circle class="progress" stroke="hsl(60, 100%, 50%)" stroke-width="3" fill="transparent" r="18" cx="20"
                    cy="20" stroke-dasharray="70 30" stroke-dashoffset="0"
                    style="stroke-opacity: 0.7; stroke-dasharray: 113.097, 113.097; stroke-dashoffset: 111;">
                </circle>
                <g opacity="1" clip-path="url(#clip0)">
                    <path
                        d="M9.2084 4.27568V1.82575V1.59168V0.920676C9.2084 0.795839 9.09531 0.686606 8.96607 0.686606C8.83683 0.686606 8.72375 0.795839 8.72375 0.920676V1.56047C8.65913 1.90377 8.43296 2.85566 8.01292 3.24577C7.96446 3.29259 7.9483 3.35501 7.9483 3.41743V3.90117C7.9483 4.02601 8.06139 4.13524 8.19063 4.13524H8.72375V4.44733V4.46294C8.72375 4.58778 8.83683 4.69701 8.96607 4.69701C9.27302 4.69701 9.51535 4.93108 9.51535 5.22757V9.58127C9.51535 9.87776 9.27302 10.1118 8.96607 10.1118C8.65913 10.1118 8.4168 9.87776 8.4168 9.58127V8.20806C8.4168 8.08322 8.30371 7.97399 8.17447 7.97399H7.67367V4.43173C7.67367 4.22887 7.57674 4.04161 7.4475 3.91677V0.905072C7.4475 0.405722 7.02746 0 6.5105 0H1.69628C1.17932 0 0.759289 0.405722 0.759289 0.905072V3.91677C0.613893 4.04161 0.533118 4.22887 0.533118 4.43173V11.5319H0.242326C0.113086 11.5319 0 11.6411 0 11.7659C0 11.8908 0.113086 12 0.242326 12H0.759289H7.1567H7.9483C8.07754 12 8.19063 11.8908 8.19063 11.7659C8.19063 11.6411 8.07754 11.5319 7.9483 11.5319H7.65751V8.45774H7.91599V9.59688C7.91599 10.143 8.38449 10.5956 8.94992 10.5956C9.51535 10.5956 9.98384 10.143 9.98384 9.59688V5.24317C10 4.77503 9.66074 4.36931 9.2084 4.27568ZM1.69628 0.780234H6.5105C6.57512 0.780234 6.63974 0.842653 6.63974 0.905072V3.72952H1.56704V0.905072C1.56704 0.842653 1.63166 0.780234 1.69628 0.780234Z"
                        fill="white">
                    </path>
                </g>
                <defs>
                    <clipPath id="clip0">
                        <rect width="12" height="13" fill="white"></rect>
                    </clipPath>
                </defs>
            </svg>
        </div>
        <div class="engine">
            <svg class="circle" width="40" height="40">
                <circle class="background" stroke="#FFFFFF" stroke-width="3" fill="transparent" r="18" cx="20" cy="20"
                    stroke-dasharray="70 30" stroke-dashoffset="0" style="stroke-opacity: 0.2;"></circle>
                <circle class="progress" stroke="hsl(0, 66%, 40%)" stroke-width="3" fill="transparent" r="18" cx="20"
                    cy="20" stroke-dasharray="70 30" stroke-dashoffset="0"
                    style="stroke-opacity: 0.7; stroke-dasharray: 113.097, 113.097; stroke-dashoffset: 30;">
                </circle>
                <g opacity="1" clip-path="url(#clip0)">
                    <path
                        d="M0.5 0.5V1.5H1C0.447715 1.5 0 1.94772 0 2.5V8.5C0 9.05228 0.447715 9.5 1 9.5H5V10H2C1.44772 10 1 10.4477 1 11V12H9V11C9 10.4477 8.55228 10 8 10H6V9.5H10C10.5523 9.5 11 9.05228 11 8.5V2.5C11 1.94772 10.5523 1.5 10 1.5H8.5V0.5H0.5Z"
                        fill="white"></path>
                </g>
                <defs>
                    <clipPath id="clip0">
                        <rect width="12" height="13" fill="white"></rect>
                    </clipPath>
                </defs>
            </svg>
        </div>
        <div class="speedometer"><svg class="circle">
                <circle class="outer" stroke="#FFFFFF" stroke-width="0.5" fill="transparent" r="18" cx="25" cy="25"
                    stroke-dasharray="70 30" style="stroke-opacity: 0.2;"></circle>
                <circle class="background" stroke="#FFFFFF" stroke-width="1.5" fill="transparent" r="18" cx="25" cy="25"
                    stroke-dasharray="70 30" style="stroke-opacity: 0.2;"></circle>
                <circle class="progress" stroke="url(#gradient)" stroke-width="1.5" fill="transparent" r="18" cx="25"
                    cy="25" stroke-dasharray="70 30" stroke-dashoffset="0"
                    style="stroke-opacity: 1; stroke-dasharray: 113.097, 113.097; stroke-dashoffset: 109.543;">
                </circle>
                <defs>
                    <linearGradient id="gradient">
                        <stop offset="30%" stop-color="hsl(110.4, 100%, 50%)"></stop>
                        <stop offset="100%" stop-color="hsl(110.4, 100%, 50%)"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <div class="text"><span class="speed">12</span>
                <div class="kmh">km/h</div>
            </div>
        </div>
    </div>

    <div class="helpnotifcontainer">
    </div>
</body>

</html>