<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fahrplan Linie 4</title>
<style>
body {
font-family: "Inter", sans-serif;
max-width: 700px;
margin: 2rem auto;
padding: 1rem;
background: #fafafa;
color: #222;
}
header {
text-align: center;
margin-bottom: 2rem;
}
h1 {
color: #c62828;
}
section {
background: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 0.75rem 1rem;
border-bottom: 1px solid #eee;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s;
}
li:hover {
background: #f9f9f9;
}
li:last-child {
border-bottom: none;
}
.play-icon {
font-size: 1.2rem;
color: #c62828;
opacity: 0.7;
}
.play-icon.playing {
opacity: 1;
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
footer {
text-align: center;
font-size: 0.9rem;
color: #777;
}
</style>
</head>
<body>
<header>
<h1>Linie 4 – Horn-Lehe ↔ Arsten</h1>
<p>Alle 10 Minuten · Montag–Freitag</p>
</header>
<section id="fahrplan">
<h2>Fahrplan</h2>
<p>
<strong>Richtung Arsten:</strong> 05:10 · 05:20 · 05:30 · …<br>
<strong>Richtung Horn-Lehe:</strong> 05:05 · 05:15 · 05:25 · …
</p>
</section>
<section id="haltestellen">
<h2>Haltestellen (Richtung Arsten)</h2>
<ul>
<li data-audio="audio/hornlehe.mp3">Horn-Lehe <span class="play-icon">▶</span></li>
<li data-audio="audio/universitat.mp3">Universität/Zentralbereich <span class="play-icon">▶</span></li>
<li data-audio="audio/theater.mp3">Theater am Goetheplatz <span class="play-icon">▶</span></li>
<li data-audio="audio/am-brill.mp3">Am Brill <span class="play-icon">▶</span></li>
<li data-audio="audio/domsheide.mp3">Domsheide <span class="play-icon">▶</span></li>
<li data-audio="audio/ardenneplatz.mp3">Ardenneplatz <span class="play-icon">▶</span></li>
<li data-audio="audio/arsten.mp3">Arsten <span class="play-icon">▶</span></li>
</ul>
</section>
<audio id="player"></audio>
<footer>
© 2025 Beispielprojekt – Straßenbahnlinie 4
</footer>
<script>
const player = document.getElementById('player');
const haltestellen = document.querySelectorAll('#haltestellen li');
haltestellen.forEach(li => {
li.addEventListener('click', () => {
const audioFile = li.getAttribute('data-audio');
const icon = li.querySelector('.play-icon');
// Alle Icons zurücksetzen
document.querySelectorAll('.play-icon').forEach(i => i.classList.remove('playing'));
// Neues Audio laden und abspielen
player.src = audioFile;
player.play();
// Animation aktivieren
icon.classList.add('playing');
player.onended = () => {
icon.classList.remove('playing');
};
});
});
</script>
</body>
</html>