<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>BLUME HUD</title>
	<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap"
		rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
</head>

<body>
	<div id="Textform"></div>
	<div class="movie-top"></div>
	<div class="movie-bottom"></div>
	<div class="container">
		<div class="logo-server">
			<img src="./images/img/logo.png" alt="logo" />
		</div>
		<div class="container-body">
			<div class="inside-car">
				<div class="speed-icons">
					<div class="speed"><span></span><span></span></div>
					<div class="icons">
						<div class="kmh">KMH</div>
						<div class="belt-locked">
							<img class="belt" src="./images/svg/car/belt.svg" />
							<img class="locked" src="./images/svg/car/locked.svg" />
						</div>
						<div class="arrow">
							<img class="right-arrow" src="./images/svg/car/right-arrow.svg" />
							<img class="left-arrow" src="./images/svg/car/left-arrow.svg" />
						</div>
					</div>
				</div>
				<div class="infos-speed">
					<div style="display: none;" class="weapon-block-car">
						<div style="transform: skewX(13deg); margin-bottom: -7px;" class="weapon-bullets">
							<img />
							<p></p><span></span>
						</div>
						<div class="weapon-image">
							<img />
						</div>
					</div>

					<div class="march">
						0
					</div>
					<div class='block-infomations'>
						<div class="block-acceleration">
							<div class="block-acceleration-gas">
								<div class="acceleration"></div>
								<div class="gas-outline">
									<div class="gas"></div>
								</div>
							</div>
							<div class="final-acceleration"></div>
						</div>

						<div style="display: none;" class="weapon-block">
							<div class="weapon-bullets">
								<img />
								<p></p><span></span>
							</div>
							<div class="weapon-image">
								<img />
							</div>
						</div>
						<div class="status">
							<div style="display: none;" class="status-block oxygen-block">
								<div class="status-shadow oxygen-shadow"></div>
								<div class="status-box">
									<div class="oxygen">
										<img src="./images/svg/status/oxygen.svg" />
									</div>
								</div>
							</div>
							<div class="status-block">
								<div class="status-shadow stress-shadow"></div>
								<div class="status-box">
									<div class="stress">
										<img src="./images/svg/status/stress.svg" />
									</div>
								</div>
							</div>
							<div class="status-block bullet-vest-block">
								<div class="status-shadow bullet-vest-shadow"></div>
								<div class="status-box">
									<div class="bullet-vest">
										<img src="./images/svg/status/bullet-vest.svg" />
									</div>
								</div>
							</div>
							<div class="status-block">
								<div class="status-shadow life-shadow"></div>
								<div class="status-box">
									<div class="life">
										<img src="./images/svg/status/life.svg" />
									</div>
								</div>
							</div>
							<div class="status-block">
								<div class="status-shadow hunger-shadow"></div>
								<div class="status-box">
									<div class="hunger">
										<img src="./images/svg/status/hunger.svg" />
									</div>
								</div>
							</div>
							<div class="status-block">
								<div class="status-shadow thirst-shadow"></div>
								<div class="status-box">
									<div class="thirst">
										<img src="./images/svg/status/thirst.svg" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="top">
				<div style="display: none;" class="wanted">
					<p></p>
					<img src="./images/svg/wanted.svg" />
					<img src="./images/svg/wanted.svg" />
					<img src="./images/svg/wanted.svg" />
					<img src="./images/svg/wanted.svg" />
					<img src="./images/svg/wanted.svg" />
				</div>
				<div class="hours">
					<img src="./images/svg/hours.svg" />
					<p></p>
				</div>
				<div style="display: none;" class="radio">
					<img src="./images/svg/radio.svg" />
					<p>0Mhz</p>
				</div>
				<div class="voip">
					<img src="./images/svg/voice/off.svg" />
					<p>Médio</p>
				</div>
			</div>

			<div style="display: none;" class="progress-bar">
				<div class="circle-background">
					<svg style=" position: absolute; margin-top: 5.5px; margin-left: 4.5px;" width="69" height="69" fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<path class="background-1"
							d="M31.5316 3.06936C31.6255 1.47814 32.9957 0.249622 34.5696 0.501951C38.0979 1.06763 41.4992 2.2851 44.5964 4.10067C48.5258 6.40403 51.8542 9.60464 54.3095 13.4408C56.7649 17.277 58.2775 21.6398 58.7236 26.1726C59.0753 29.7455 58.7565 33.344 57.7926 36.785C57.3626 38.3199 55.6733 39.0496 54.1889 38.4686V38.4686C52.7046 37.8875 51.9915 36.2154 52.383 34.6702C53.0373 32.0875 53.2415 29.4039 52.9791 26.738C52.6221 23.1118 51.4121 19.6215 49.4478 16.5526C47.4835 13.4837 44.8208 10.9232 41.6773 9.08049C39.3663 7.72582 36.8438 6.78738 34.2246 6.3C32.6575 6.0084 31.4376 4.66057 31.5316 3.06936V3.06936Z"
							fill="#11242C" fill-opacity="0.5" stroke-width="0.5" />
						<path class="background-2"
							d="M51.6564 43.3443C52.9853 44.2246 53.3597 46.0264 52.3512 47.2607C50.0902 50.028 47.3295 52.3581 44.2042 54.1248C40.2392 56.3663 35.8001 57.6376 31.2497 57.8347C26.6993 58.0318 22.1668 57.1491 18.0229 55.2589C14.7565 53.769 11.8046 51.6864 9.31289 49.125C8.20143 47.9824 8.41863 46.155 9.66644 45.1631V45.1631C10.9143 44.1713 12.7184 44.3942 13.8581 45.5086C15.763 47.3713 17.9813 48.8954 20.4184 50.0071C23.7336 51.5193 27.3595 52.2254 30.9999 52.0677C34.6402 51.9101 38.1915 50.8931 41.3635 49.0999C43.6954 47.7816 45.7736 46.0714 47.5103 44.051C48.5493 42.8422 50.3275 42.4641 51.6564 43.3443V43.3443Z"
							fill="#11242C" fill-opacity="0.5" stroke="#EEEEEE" stroke-width="0.5" />
						<path class="background-3"
							d="M6.51141 40.0907C5.07001 40.7712 3.33493 40.1579 2.80167 38.6558C1.6062 35.2883 1.04364 31.7197 1.15174 28.1312C1.28888 23.5786 2.50154 19.1231 4.69058 15.1289C6.87961 11.1348 9.98287 7.71543 13.7466 5.15042C16.7133 3.1286 20.024 1.68284 23.5058 0.878735C25.0589 0.520051 26.5094 1.65263 26.7112 3.23379V3.23379C26.9131 4.81495 25.7876 6.24255 24.244 6.63994C21.6639 7.30416 19.2109 8.41183 16.9974 9.92038C13.9864 11.9724 11.5038 14.7079 9.75253 17.9032C8.0013 21.0985 7.03117 24.6629 6.92146 28.305C6.84081 30.9825 7.22685 33.6461 8.05511 36.1783C8.55066 37.6933 7.95281 39.4101 6.51141 40.0907V40.0907Z"
							fill="#11242C" fill-opacity="0.5" stroke="#EEEEEE" stroke-width="0.5" />
					</svg>
				</div>

				<svg class="circle-1" width="69" height="69" viewBox="0 0 69 69" xmlns="http://www.w3.org/2000/svg">
					<circle cx="34.5" cy="34.5" r="26" stroke="#00bfff" stroke-width="6.6" fill="none" />
				</svg>

				<svg class="circle-2" width="69" height="69" viewBox="0 0 69 69" xmlns="http://www.w3.org/2000/svg">
					<circle cx="34.5" cy="34.5" r="26" stroke="#00bfff" stroke-width="6.6" fill="none" />
				</svg>

				<svg class="circle-3" width="69" height="69" viewBox="0 0 69 69" xmlns="http://www.w3.org/2000/svg">
					<circle cx="34.5" cy="34.5" r="26" stroke="#00bfff" stroke-width="6.6" fill="none" />
				</svg>

				<p class="percentage"><i></i></p>

			</div>

			<div class="road-div">
				<img src="./images/svg/road.svg" />
				<p></p>
			</div>
		</div>
	</div>

	<script src="blume.js" type="text/javascript"></script>
</body>

</html>