130 lines
3.4 KiB
Plaintext
130 lines
3.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.button {
|
|
padding: 10px 20px;
|
|
font-size: 18px;
|
|
background-color: #0074d9;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.speed {
|
|
font-size: 24px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.speed-control {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.output {
|
|
font-size: 24px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pid-output {
|
|
font-size: 24px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.orientation-output {
|
|
font-size: 24px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.maze-map {
|
|
margin-top: 20px;
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Car Control Panel</h1>
|
|
<div class="container">
|
|
<div class="time">
|
|
<p id="elapsed-time">0 seconds</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<a href="/status.cgi?status=1" ><button class="button" >Start</button></a>
|
|
|
|
<a href="/status.cgi?status=0" ><button class="button" >Stop</button></a>
|
|
|
|
</div>
|
|
<div class="speed">
|
|
<p>Speed: <!--#speed--></span></p>
|
|
<div class="speed-control">
|
|
<a href="/speed.cgi?speed=0" ><button class="button" >-</button></a>
|
|
<a href="/speed.cgi?speed=1" ><button class="button" >+</button></a>
|
|
</div>
|
|
</div>
|
|
<div class="output">
|
|
<p>Barcode Scanner Output: <!--#barcode--></span></p>
|
|
</div>
|
|
<div class="pid-output">
|
|
<p>PID Controller Output: <!--#pid--></p>
|
|
</div>
|
|
<div class="orientation-output">
|
|
<p>Orientation: <!--#orient--></p>
|
|
</div>
|
|
<div class="maze-map" id="maze-map">
|
|
<!-- maze map part -->
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Function to update and display elapsed time
|
|
function updateElapsedTime() {
|
|
// Check if the start time is stored in localStorage
|
|
let startTime = localStorage.getItem('startTime');
|
|
|
|
if (!startTime) {
|
|
// If no start time is stored, set the current time as the start time
|
|
startTime = Date.now();
|
|
localStorage.setItem('startTime', startTime);
|
|
}
|
|
|
|
// Calculate the elapsed time in seconds
|
|
const currentTime = Date.now();
|
|
const elapsedTime = Math.floor((currentTime - startTime) / 1000);
|
|
|
|
// Update the displayed elapsed time
|
|
document.getElementById('elapsed-time').textContent = `${elapsedTime} seconds`;
|
|
}
|
|
|
|
// Call the updateElapsedTime function when the page loads
|
|
window.onload = updateElapsedTime;
|
|
|
|
// Update the elapsed time every second
|
|
setInterval(updateElapsedTime, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|