I am currently facing a dilemma and could really use some fresh perspectives on how to tackle this problem.
var vaction = "{{vaction}}";
if(vaction === "Driving")
document.getElementByClassName("cover").style.backgroundImage = url(https://media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018-04158-5_15590100.gif);
document.getElementByClassName("table1, table2").style.backgroundColor = 'lime';
else if(vaction === "Sounding The Alarm")
document.getElementByClassName("cover").style.backgroundImage= url(https://upload.wikimedia.org/wikipedia/commons/e/eb/Blinking_warning.gif);
document.getElementByClassName("table1, table2").style.backgroundColor = 'orange';
else if(vaction === "Pulling over")
document.getElementByClassName("cover").style.backgroundImage = url(https://browsifyapp.com/wp-content/uploads/2018/10/model-3-gif-yeah.gif);
document.getElementByClassName("table1, table2").style.backgroundColor = 'red';
</script><style>
table.table2, table.table1 {
width: 190.5px;
height: 50px;
text-align: left;
border-collapse: collapse;
}
table.table1, td, th, table.table2 td, th {
border: 1px solid black;
}
html , body {
height: 100%;
margin: 0;
padding: 0;
}
div.cover {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
</style><div class="cover">
<div>
<table class="table1">
<thead><tr><th>Focus</th><th>State</th><th>Alert Level</th></tr></thead>
<tr><td>Eyes</td><td> {{estate}} </td><td> {{elevel}} </td></tr>
<tr><td>Head</td><td> {{hstate}} </td><td> {{hlevel}} </td></tr>
<tr><td>Body</td><td> {{bstate}} </td><td> {{blevel}} </td></tr>
<tr><td>Vehicle</td><td> {{vstate}} </td><td> {{vlevel}} </td></tr>
</table>
<table class="table2">
<thead><tr><th>Current action</th></tr></thead>
<tr><td> {{vaction}} </td></tr>
</table>
</div>
</div>The main concept here is to dynamically adjust the background gif of the cover along with tweaking the colors of table1 and table2 based on the variable supplied. These values are extracted from flaks, so deciding on the aesthetics is my current obstacle.