<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WM 2026 Live-Ticker</title>
<style>
/* Ticker-Container fixiert am oberen Bildschirmrand */
.ticker-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #101820; /* Dunkles Sport-Blau */
color: #ffffff;
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
white-space: nowrap;
padding: 12px 0;
z-index: 9999;
}
/* Die scrollende Box */
.ticker-content {
display: inline-block;
padding-left: 100%;
animation: wm-ticker 25s linear infinite;
}
/* Styling für die einzelnen Live-Begegnungen */
.match-result {
display: inline-block;
margin-right: 50px;
}
/* Live-Scores farblich hervorheben */
.score {
color: #00ffcc; /* Mintgrün */
background: rgba(0, 255, 204, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
/* Badge für Spiele, die aktuell laufen */
.live-badge {
background: #ff3344;
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
margin-right: 6px;
text-transform: uppercase;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
/* Animation für das Scrollen */
@keyframes wm-ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
/* Ticker pausieren bei Hover */
.ticker-wrapper:hover .ticker-content {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="ticker-wrapper">
<!-- Das JavaScript injiziert die Daten direkt hier hinein -->
<div class="ticker-content" id="live-ticker">
Lade aktuelle WM-Daten...
</div>
</div>
<script>
// 1. Reale Datenstruktur der WM 2026 Gruppenphase (Stand: 15. Juni)
const wmSpiele = [
{ art: "LIVE", heim: "Schweden", gast: "Tunesien", score: "5:1", info: "Beendet" },
{ art: "LIVE", heim: "Elfenbeinküste", gast: "Ecuador", score: "1:0", info: "Beendet" },
{ art: "UPCOMING", heim: "Spanien", gast: "Kap Verde", score: "vs.", info: "18:00 Uhr" },
{ art: "UPCOMING", heim: "Belgien", gast: "Ägypten", score: "vs.", info: "21:00 Uhr" },
{ art: "UPCOMING", heim: "Saudi-Arabien", gast: "Uruguay", score: "vs.", info: "00:00 Uhr" }
];
// 2. Funktion zum Rendern der Elemente im HTML-Ticker
function updateTicker() {
const tickerContainer = document.getElementById('live-ticker');
let htmlContent = `<span class="match-result">🏆 <b>FIFA WM 2026 LIVE:</b></span>`;
wmSpiele.forEach(spiel => {
if(spiel.art === "LIVE") {
htmlContent += `
<span class="match-result">
<span class="live-badge">${spiel.info}</span>
${spiel.heim} <span class="score">${spiel.score}</span> ${spiel.gast}
</span>`;
} else {
htmlContent += `
<span class="match-result">
⏳ <i>${spiel.heim} ${spiel.score} ${spiel.gast} (${spiel.info})</i>
</span>`;
}
});
tickerContainer.innerHTML = htmlContent;
}
// 3. Simulation: Live-Ergebnis-Änderung nach 8 Sekunden (Echtzeit-Simulation)
function simuliereTor() {
setTimeout(() => {
// Ändert beispielsweise ein anstehendes Spiel zu einem Live-Ereignis
wmSpiele[2].art = "LIVE";
wmSpiele[2].score = "1:0";
wmSpiele[2].info = "Tor!";
// Ticker mit den neuen Daten neu aufbauen
updateTicker();
console.log("Echtzeit-Update: Tor für Spanien!");
}, 8000);
}
// Initialer Start beim Laden der Seite
updateTicker();
simuliereTor();
// 4. optionaler Intervall: Alle 30 Sekunden Daten frisch laden/aktualisieren
setInterval(updateTicker, 30000);
</script>
</body>
</html>
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.
Schreibe einen Kommentar