<div class="container"> <div class="row align-items-end speedometertop"> <div class="col-12"> <span class="speed"> {{ speed }} </span> MPH </div> </div> <div class="row mt-2"> <div class="col-3 px-0"> <div class="container px-0 tirePreassure mt-5"> <div class="row"> <div class="col-12 no-gutters text-right"> <small> LEFT FRONT TIRE </small> </div> </div> <div class="row value"> <div class="col-12 text-right"> <small class="text-success"> {{ tires.front.left }} PSI <i class="far fa-check-circle"></i> </small> </div> </div> </div> <div class="container px-0 tirePreassure mb-5 position-absolute" style="bottom: 0;"> <div class="row"> <div class="col-12 no-gutters text-right"> <small> LEFT REAR TIRE </small> </div> </div> <div class="row value"> <div class="col-12 text-right"> <small class="text-warning"> {{ tires.rear.left }} PSI <i class="fas fa-exclamation-circle"></i> </small> </div> </div> </div> </div> <div class="col-6 text-center car" onclick="app.simulate()"> <img src="images/HMI_Dashboard_Car_720.png"> {{ #isWarning }} <div class="warning text-danger position-absolute"> <i class="fa-4x fas fa-exclamation-triangle"></i> </div> {{ /isWarning }} </div> <div class="col-3 px-0"> <div class="container px-0 tirePreassure mt-5"> <div class="row"> <div class="col-12 no-gutters text-left"> <small> RIGHT FRONT TIRE </small> </div> </div> <div class="row value"> <div class="col-12 text-left"> <small class="text-danger"> <i class="far fa-times-circle"></i> {{ tires.front.right }} PSI </small> </div> </div> </div> <div class="container px-0 tirePreassure mb-5 position-absolute" style="bottom: 0;"> <div class="row"> <div class="col-12 no-gutters text-left"> <small> RIGHT REAR TIRE </small> </div> </div> <div class="row value"> <div class="col-12 text-left"> <small class="text-success"> <i class="far fa-check-circle"></i> {{ tires.rear.right }} PSI </small> </div> </div> </div> </div> </div> <div class="row mt-5 inforow"> <div class="col-6 offset-6"> <div class="container"> <div class="row align-items-center"> <div class="col-9 offset-3"> <div class="container"> <div class="row"> <small class="col-5 text-right"> LEVEL: </small> <small class="col-7 px-0 text-left text-primary"> {{ fuel.level }} GALLONS </small> </div> </div> </div> </div> </div> </div> </div> <div class="row inforow"> <div class="col-6"> <div class="container speedometerbottom"> <div class="row align-items-center"> <div class="col-9 offset-3"> <div class="container"> <div class="row"> <small class="col-5 text-right"> SPEED: </small> <small class="col-7 px-0 text-left text-primary"> {{ speed }} MPH </small> </div> </div> </div> </div> </div> </div> <div class="col-6 inforow"> <div class="container"> <div class="row align-items-center"> <div class="col-9 offset-3"> <div class="container"> <div class="row"> <small class="col-5 text-right"> RANGE: </small> <small class="col-7 px-0 text-left text-primary"> {{ fuel.range }} MI </small> </div> </div> </div> </div> </div> </div> </div> <div class="row inforow"> <div class="col-6"> <div class="container"> <div class="row align-items-center"> <div class="col-9 offset-3"> <div class="container"> <div class="row"> <small class="col-5 text-right"> RPM: </small> <small class="col-7 px-0 text-left text-primary"> {{ rpm.value }} </small> </div> </div> </div> </div> </div> </div> <div class="col-6"> <div class="container"> <div class="row align-items-center"> <div class="col-9 offset-3"> <div class="container"> <div class="row"> <small class="col-5 text-right"> AVG: </small> <small class="col-7 px-0 text-left text-primary"> {{ fuel.avg }} MPG </small> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="container"> <div class="row align-items-center"> <div class="col-3"> <i class="fa-2x fas fa-tachometer-alt"></i> </div> <div class="col-9"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: {{ rpm.percent }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> <div class="col-6"> <div class="container"> <div class="row align-items-center"> <div class="col-3"> <i class="fa-2x fas fa-gas-pump"></i> </div> <div class="col-9"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: {{ fuel.percent }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> </div> </div>