Viewing a saved revision (read-only)
5c199c02313843c9834299ddf5963f1d
Fork of React & D3 Starter
This interactive timeline visualizes the key events of a Champions League match between Bayern Munich and Real Madrid. It presents a two-column layout with event cards positioned on the left or right side of a central axis, detailing goals and cards with timestamps, player names, and descriptions. The visualization is built with vanilla JavaScript, HTML5, and CSS3, using a `Player` class system to manage player data and images. Clicking on a Bayern goal triggers a sound effect via JavaScript, while the timeline structure and responsive design are implemented using a CSS Grid and Flexbox.
AI-generated descriptionBayern vs. Real Madrid - Match Timeline
Eine interaktive Timeline der wichtigsten Spielereignisse aus dem Champions League Viertelfinal-Rückspiel zwischen Bayern München und Real Madrid vom 15. April 2026.
Features
- Responsive Design - Funktioniert auf Desktop, Tablet und Mobile
- Zwei-Säulen Timeline - Bayern-Events auf der linken, Real Madrid auf der rechten Seite
- Interaktive Bayern-Tore - Klick auf Bayern-Tore für einen Sound-Effekt
- Event-Kategorien - Tore, Karten und weitere Informationen
Technologie
- HTML5
- CSS3 (CSS Grid, Flexbox)
- Vanilla JavaScript
Verwendung
index.htmlim Browser öffnen.- Auf ein Bayern-Tor in der Timeline klicken – der Tor-Sound wird direkt von Google Drive abgespielt.
Keine weiteren Dependencies oder lokalen Audio-Dateien erforderlich.
Projektstruktur
index.html– Markup und Stylesapp.js– Timeline-Daten und Rendering-Logik
Hinweis zum Audio
Der Tor-Sound wird über Google Drive gehostet. Die Datei muss in Google Drive auf "Jeder mit dem Link kann anzeigen" gesetzt sein, damit der Browser sie laden kann.