WM-Ticker2026

<!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>

Sample Page

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!