Scores en direct USLD

Scores en direct des matchs de l'USLD.

Les données : Equipe1, Equipe2, Jour de match, Ligue, Score, Chronometre.

Exemple de code pour récupérer les données :

Score Live API /* Conteneur principal qui aligne toutes les cartes */ #api-container { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px; } .match-card { width: 600px; background: #1a1a1a; color: white; padding: 20px; border-radius: 12px; font-family: 'Arial', sans-serif; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .chrono { font-size: 16px; color: #ffcc00; margin-bottom: 10px; font-weight: bold; display: block; } .scoreboard { display: flex; align-items: center; justify-content: space-between; } .team { flex: 1; font-size: 18px; font-weight: bold; } .score { flex: 0.5; font-size: 32px; font-weight: 900; background: #333; padding: 5px 15px; border-radius: 8px; margin: 0 10px; } .ligue { display: block; margin-top: 15px; font-size: 12px; color: #888; text-transform: uppercase; } </style>

<div id="api-container">
    Chargement des matchs...
</div>

<script>
    async function refreshScores() {
        try {
            const response = await fetch('https://ludwigboudeweel.fr/api/api-usld.php');
            const data = await response.json();

            const container = document.getElementById('api-container');
            container.innerHTML = ''; // On vide le conteneur avant d'afficher la liste fraîche

            // On boucle sur chaque objet du tableau JSON
            data.forEach(match => {
                const card = document.createElement('div');
                card.className = 'match-card';
                
                card.innerHTML = `
                    <span class="chrono">${match.Chrono}'</span>
                    <div class="scoreboard">
                        <div class="team">${match.Equipe1}</div>
                        <div class="score">${match.Score1} - ${match.Score2}</div>
                        <div class="team">${match.Equipe2}</div>
                    </div>
                    <span class="ligue">${match.Ligue}</span>
                `;
                
                container.appendChild(card);
            });

        } catch (error) {
            console.error("Erreur :", error);
            document.getElementById('api-container').innerHTML = "Erreur de chargement des données.";
        }
    }

    // Chargement initial et rafraîchissement
    refreshScores();
    setInterval(refreshScores, 30000);
</script>