dashboard/templates/dashboard.html

<!--./templates/dashboard.html --> 
<!DOCTYPE html>
<html>
<head>
    <title>Rover Sensor Dashboard</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
</head>
<body>
    <h1>Rover Sensor Dashboard</h1>

    <h2>Ultrasonic Data</h2>
    <p><strong>Left:</strong> <span id="ultrasonic-left"></span></p>
    <p><strong>Central:</strong> <span id="ultrasonic-central"></span></p>
    <p><strong>Right:</strong> <span id="ultrasonic-right"></span></p>

    <h2>MPU6050 Data</h2>
    <p><strong>Acceleration X:</strong> <span id="mpu6050-acceleration-x"></span></p>
    <p><strong>Acceleration Y:</strong> <span id="mpu6050-acceleration-y"></span></p>
    <p><strong>Acceleration Z:</strong> <span id="mpu6050-acceleration-z"></span></p>
    <p><strong>Gyro X:</strong> <span id="mpu6050-gyro-x"></span></p>
    <p><strong>Gyro Y:</strong> <span id="mpu6050-gyro-y"></span></p>
    <p><strong>Gyro Z:</strong> <span id="mpu6050-gyro-z"></span></p>
    <p><strong>Temperature:</strong> <span id="mpu6050-temperature"></span></p>

    <script src="{{ url_for('static', filename='js/socketio.js') }}"></script>
</body>
</html>