<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
caption {
font-size: 2.2em;
font-weight: bold;
margin-bottom: 10px;
}
.time {
text-align: center;
font-size: 2em;
margin-top: 20px;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}
table {
border-color: #fff;
}
th, td {
border-color: #fff;
}
th {
background-color: #555;
}
caption {
color: #fff;
}
}
</style>
</head>
<body>
<table>
<caption>London Station</caption>
<thead>
<tr>
<th>Arriving in MM:SS</th>
<th>Platform</th>
<th>Destination</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<tr>
<td>0:17</td>
<td>1</td>
<td>Central</td>
<td>White City</td></tr><tr> <td>2:43</td>
<td>1</td>
<td>Central</td>
<td>Ealing Broadway</td></tr><tr> <td>12:13</td>
<td>2</td>
<td>Central</td>
<td>Hainault</td></tr><tr> <td>22:13</td>
<td>2</td>
<td>Central</td>
<td>Hainault via Newbury Park</td>
</tr>
</tbody>
</table>
<div class="time" id="clock"></div>
<script>
function displayTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
document.getElementById('clock').textContent = timeString;
}
displayTime();
setInterval(displayTime, 1000);
</script>
</body>
</html>
Ask Each Time
