<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abfahrtsinformationen</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0; /* Hintergrundfarbe im Standardmodus */
color: #333; /* Textfarbe im Standardmodus */
position: relative;
}
/* Dark-Mode-Stile */
body.dark-mode {
background-color: #333; /* Hintergrundfarbe im Dark-Mode */
color: #ffff; /* Textfarbe im Dark-Mode */
}
/* Dark-Mode-Stile für die Tabelle */
body.dark-mode table {
color: #fff; /* Textfarbe in der Tabelle im Dark-Mode */
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
form {
display: flex;
justify-content: center;
margin-top: 20px;
}
label {
font-weight: bold;
margin-right: 10px;
}
input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #007bff;
color: white;
}
/* Dark-Mode-Schalter */
#dark-mode-toggle {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 20px;
color: #007bff;
}
</style>
<script>
function updateDepartures() {
// Hier setzen Sie den Namen Ihrer Flask-Route, die die Abfahrtsdaten zurückgibt.
const apiUrl = "/update_departures";
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// Aktualisieren Sie die Tabelle mit den neuen Daten
const tableBody = document.querySelector('table tbody');
tableBody.innerHTML = '';
data.departures.forEach(leg => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${leg.train}<br>(${leg.trainNumber})</td>
<td>${leg.destination}</td>
<td>${leg.via.join(', ')}</td>
<td>${leg.scheduledDeparture}</td>
<td>${leg.delayDeparture}</td>
<td>${leg.scheduledPlatform}</td>
`;
tableBody.appendChild(row);
});
});
}
// Führen Sie die Aktualisierungsfunktion alle 10 Sekunden aus
setInterval(updateDepartures, 10000);
</script>
</head>
<body class="{{ station_name }}">
<button id="dark-mode-toggle">🌙</button> <!-- Mond-Emoji als Dark-Mode-Symbol -->
<h1>Abfahrten / Departures</h1>
<h2>Station: {{ station_name }}</h2>
<form method="POST">
<label for="station_name">Station:</label>
<input type="text" name="station_name" id="station_name" value="{{ station_name }}">
<button type="submit">Suchen</button>
</form>
{% if departures %}
<table>
<thead>
<tr>
<th>Name</th>
<th>Richtung / Direction</th>
<th>Über/ via</th>
<th>Geplante Abfahrtszeit / Planned departure</th>
<th>Verspätung (Minuten) / Delay (minutes)</th>
<th>Bahnsteig / Platform</th>
</tr>
</thead>
<tbody>
{% for leg in departures %}
<tr>
<td>{{ leg.train }}<br>({{leg.trainNumber}})</td>
<td>{{ leg.destination }}</td>
<td>{{ leg.via | join(', ') }}</td>
<td>{{ leg.scheduledDeparture }}</td>
<td>{{ leg.delayDeparture }}</td>
<td>{{ leg.scheduledPlatform }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<script>
// JavaScript, um zwischen Dark-Mode und Standardmodus zu wechseln
const darkModeToggle = document.getElementById('dark-mode-toggle');
const body = document.body;
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});
</script>
<script>
// JavaScript, um zwischen Dark-Mode und Standardmodus zu wechseln
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
// Prüfe, ob der Browser im Dark-Mode geöffnet wurde
if (prefersDarkMode.matches) {
// Füge die CSS-Klasse `dark-mode` zum Body-Element hinzu
const body = document.body;
body.classList.add('dark-mode');
}
// Registriere den `change`-Ereignishandler
prefersDarkMode.addEventListener('change', () => {
const body = document.body;
if (prefersDarkMode.matches) {
body.classList.add('dark-mode');
} else {
body.classList.remove('dark-mode');
}
});
</script>
</body>
</html>