There are several issues with your page as is. When trying to assemble an HTML document I suggest you put a basic skeleton for the page layout together first, and keep testing in your browser until you have something near to your design objectives.
Importantly you should also keep running the markup through an online validator to fix any errors before the markup gets to complex. I've done a skeleton example, of your page to show what I mean. Pick the 'bones' out of it and add your websocket handlers etc.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32 WebSocket Server</title>
<style>
.dynRectangle1 {
width: 0px;
height: 50px; // bar thickness
background-color: red;
z-index: -1;
margin-top: 50px;
margin-bottom: 50px; // bar y position
}
.dynRectangle2 {
width: 0px;
height: 50px; // bar thickness
background-color: green;
z-index: -1;
margin-top: 50px; // bar y position
}
body {
background-color: rgba(128, 128, 128, 0.322);
font-family: calibri
}
h1 {
font-size: 40px;
height:60px;
color: black;
text-align: center
}
h2 {
font-size: 30px;
color: blue
}
h3 {
font-size: 17px;
color: blue
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log("DOM LOADED");
})
var count = 0;
function barGen() {
var pot1 = Math.round(Math.random() * 500);
var pot2 = Math.round(Math.random() * 500);
document.getElementById('dynRectangle1').style.width = pot1 + "px";
document.getElementById('dynRectangle2').style.width = pot2 + "px";
if (count < 20) setTimeout(barGen, 1000);
count++;
}
window.onload = function() {
setTimeout(barGen, 1000);
}
</script>
</head>
<body>
<div style="height:60px;background-color:skyblue;">
<h1>ESP32 WebSocket Server</h1>
</div>
<h2>
POT voltage: <span style="color:rgb(216, 3, 3)" id="POTvalue">0</span> V
</h2>
<h3>
0V             
            
     &5         
            3.5V
</h3>
<div class="row">
<div class="dynRectangle1" id="dynRectangle1" style="background-color:red;"></div>
</div>
<div class="row">
<div class="dynRectangle2" id="dynRectangle2" style="background-color:green;"></div>
</div>
</body>
</html>
Have fun...
Edit: The above will run in your browser and demonstrate the red and green bars you are after
Where you see the "quote" error, prefix it with an "escape" character: "\" (note: I needed to put two "\" characters in this post to make one show up... the first one being the "escape" character.
If adding the "escape" caused this... remove the "escape."
Sometimes a line-break sneaks into the code, breaking up the string between the double-quotes. Maximize your window to verify the text goes from the left border to the right border without a line-break.
