<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>BLUME CAR MENU</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">
</head>

<body>
	<div style="display: none;" class="container">

		<div class="body-infos door">
			<i>PORTAS</i>
			<div class="door-container">

			</div>
		</div>

		<div class="body-infos window">
			<i>JANELAS</i>
			<div class="window-container">

			</div>
		</div>

		<div class="body-infos seat">
			<i>ASSENTOS</i>
			<div class="seat-container">

			</div>
		</div>

		<div class="body-infos">
			<i>ESTATÍSTICAS</i>

			<div class="wear-container">

				<div class="engine-container-bar">
					<div id="engine-background-container" class="info-container-bar">
						<div id="engine-bars" class="wear-bar bar"></div>
						<i>MOTOR</i>
						<div id="engine-bottom-container" class="bottom-container"></div>
					</div>
				</div>

				<div onclick="sendPost('statistic')" class="info-container statistic-container">
					<img src="images/svg/config.svg" />
					<div class="bottom-container bottom-statistic"></div>
				</div>

				<div class="body-container-bar">
					<div id="body-background-container" class="info-container-bar">
						<div id="body-bars" class="wear-bar bar"></div>
						<i>LATARIA</i>
						<div id="body-bottom-container" class="bottom-container"></div>
					</div>
				</div>

				<div onclick="sendPost('carOnOff')" class="info-container onoff-container">
					<img src="images/svg/onoff.svg" />
					<div class="bottom-container bottom-onOff"></div>
				</div>

				<!-- <div class="oil-container-bar">
					<div id="oil-background-container" class="info-container-bar">
						<div id="oil-bars" class="wear-bar bar"></div>
						<i>ÓLEO</i>
						<div id="oil-bottom-container" class="bottom-container"></div>
					</div>
				</div>

				<div class="tires-container-bar">
					<div id="tires-background-container" class="info-container-bar">
						<div id="tires-bars" class="wear-bar bar"></div>
						<i>PNEUS</i>
						<div id="tires-bottom-container" class="bottom-container"></div>
					</div>
				</div> -->

			</div>
		</div>

		<!-- <div class="body-infos">
			<i>PNEUS</i>
			<div class="tires-container">

			</div>
		</div> -->

	</div>

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

</html>