buatkan halaman statistik liga mengikuti design tailwind ini, dan juga manfaatkan API dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#ffffff">
    <title>GoalStream App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
</head>
<body class="bg-white-700">
    <div class="max-w-md mx-auto bg-white-700 p-4">
        <header class="flex justify-between items-center mb-4">
            <h1 class="text-cyan-700 text-2xl font-bold">GoalStream</h1>
            <button class="text-cyan-700">
                <i class="fas fa-redo-alt"></i>
            </button>
        </header>
		
		

        <div class="bg-gradient-to-r from-cyan-700 to-cyan-900 rounded-lg p-4 mb-4 shadow-md">
			<div class="flex justify-between items-center mb-2">
				<div>
					<h2 class="font-bold text-white">PENCINTA BOLA</h2>
				</div>
				<button id="lihatJadwal" class="text-cyan-100 font-semibold">Lihat Jadwal</button>
			</div>
			<p class="text-sm text-white">Liga Favorit: Premier League</p>
			<div id="jadwalDisplay" class="hidden mt-2">
				<p class="font-bold text-white">Jadwal Selanjutnya:</p>
				<p class="text-white">Man Utd vs Liverpool, 28 Jun 2024 20:00</p>
			</div>
		</div>



        <div class="grid grid-cols-3 gap-4 mb-4 shadow-md py-2">
            <div class="flex flex-col items-center">
                <div class="bg-white p-2 rounded-full mb-2 shadow-xl active:bg-gray-200">
                    <i class="fas fa-futbol text-cyan-700 text-2xl"></i>
                </div>
                <span class="text-sm">Live Match</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="bg-white p-2 rounded-full mb-2 shadow-xl active:bg-gray-200">
                    <i class="fas fa-trophy text-cyan-700 text-2xl"></i>
                </div>
                <span class="text-sm">Kompetisi</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="bg-white p-2 rounded-full mb-2 shadow-xl active:bg-gray-200">
                    <i class="fas fa-chart-line text-cyan-700 text-2xl"></i>
                </div>
                <span class="text-sm">Statistik</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="bg-white p-2 rounded-full mb-2 shadow-xl active:bg-gray-200">
                    <i class="fas fa-newspaper text-cyan-700 text-2xl"></i>
                </div>
                <span class="text-sm">Berita</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="bg-white p-2 rounded-full mb-2 shadow-xl active:bg-gray-200">
                    <i class="fas fa-users text-cyan-700 text-2xl"></i>
                </div>
                <span class="text-sm">Tim</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="bg-white p-2 rounded-full mb-2 shadow-xl active:bg-gray-200">
                    <i class="fas fa-cog text-cyan-700 text-2xl"></i>
                </div>
                <span class="text-sm">Pengaturan</span>
            </div>
        </div>

        <!-- Swiper -->
		<div class="swiper mySwiper mb-4">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="relative">
						<img src="https://images.unsplash.com/photo-1589487391730-58f20eb2c308?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Pertandingan 1" class="w-full rounded-lg">
						<div class="absolute inset-x-0 bottom-0 bg-gray-800 bg-opacity-75 text-white py-2 px-4">
							<h2 class="text-lg font-bold">Judul Artikel 1</h2>
							<p class="text-sm">John Doe</p>
						</div>
					</div>

				</div>
				<div class="swiper-slide">
					<div class="relative">
						<img src="https://images.unsplash.com/photo-1543326727-cf6c39e8f84c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pertandingan 2" class="w-full rounded-lg">
						<div class="absolute inset-x-0 bottom-0 bg-gray-800 bg-opacity-75 text-white py-2 px-4">
							<h2 class="text-lg font-bold">Judul Artikel 2</h2>
							<p class="text-sm">Penulis: Jane Smith</p>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="relative">
						<img src="https://images.unsplash.com/photo-1522778119026-d647f0596c20?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pertandingan 3" class="w-full rounded-lg">
						<div class="absolute inset-x-0 bottom-0 bg-gray-800 bg-opacity-75 text-white py-2 px-4">
							<h2 class="text-lg font-bold">Judul Artikel 3</h2>
							<p class="text-sm">Penulis: Adam Johnson</p>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>


        <div class="bg-white rounded-lg p-4 mb-20 shadow-md">
            <h3 class="font-bold mb-2">Pertandingan Hari Ini</h3>
            <div class="space-y-2">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-semibold">Man City vs Arsenal</p>
                        <p class="text-sm text-gray-600">27 Jun 2024 19:00</p>
                    </div>
                    <button class="bg-cyan-700 text-white px-2 py-1 rounded-md text-sm">Tonton</button>
                </div>
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-semibold">Real Madrid vs Barcelona</p>
                        <p class="text-sm text-gray-600">27 Jun 2024 21:30</p>
                    </div>
                    <button class="bg-cyan-700 text-white px-2 py-1 rounded-md text-sm">Tonton</button>
                </div>
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-semibold">Juventus vs Inter Milan</p>
                        <p class="text-sm text-gray-600">27 Jun 2024 23:45</p>
                    </div>
                    <button class="bg-cyan-700 text-white px-2 py-1 rounded-md text-sm">Tonton</button>
                </div>
            </div>
		
		
        </div>

        <nav class="fixed bottom-0 left-0 right-0 bg-white flex justify-around py-4">
            <button class="text-cyan-700 flex flex-col items-center hover:text-cyan-700">
                <i class="fas fa-home"></i>
                <span class="text-xs">Beranda</span>
            </button>
            <button class="text-gray-500 flex flex-col items-center hover:text-cyan-700">
                <i class="fas fa-calendar-alt"></i>
                <span class="text-xs">Jadwal</span>
            </button>
            <button class="text-gray-500 flex flex-col items-center hover:text-cyan-700">
                <i class="fas fa-play-circle"></i>
                <span class="text-xs">Live</span>
            </button>
            <button class="text-gray-500 flex flex-col items-center hover:text-cyan-700">
                <i class="fas fa-star"></i>
                <span class="text-xs">Favorit</span>
            </button>
            <button class="text-gray-500 flex flex-col items-center hover:text-cyan-700">
                <i class="fas fa-ellipsis-h"></i>
                <span class="text-xs">Lainnya</span>
            </button>
        </nav>
    </div>

    <script>
        document.getElementById('lihatJadwal').addEventListener('click', function() {
            var jadwalDisplay = document.getElementById('jadwalDisplay');
            if (jadwalDisplay.classList.contains('hidden')) {
                jadwalDisplay.classList.remove('hidden');
                this.textContent = 'Sembunyikan Jadwal';
            } else {
                jadwalDisplay.classList.add('hidden');
                this.textContent = 'Lihat Jadwal';
            }
        });
    </script>
</body>
</html>

document.addEventListener('DOMContentLoaded', function () {
    fetchLeagues();
});

async function fetchLeagues() {
    const response = await fetch('http://api-football-standings.azharimm.dev/leagues');
    const data = await response.json();
    displayLeagues(data.data);
}

function displayLeagues(leagues) {
    const leaguesList = document.getElementById('leagues-list');
    leaguesList.innerHTML = '';
    leagues.forEach(league => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <img src="${league.logos.light}" alt="${league.name}">
            <div class="league-info">
                <span class="league-name">${league.name}</span>
                <span class="league-abbr">${league.abbr}</span>
            </div>
        `;
        listItem.addEventListener('click', () => {
            fetchLeagueDetails(league.id);
            fetchStandings(league.id);
            fetchSeasons(league.id);
        });
        leaguesList.appendChild(listItem);
    });
}

async function fetchLeagueDetails(leagueId) {
    const response = await fetch(`http://api-football-standings.azharimm.dev/leagues/${leagueId}`);
    const data = await response.json();
    displayLeagueDetails(data.data);
}

function displayLeagueDetails(details) {
    const leagueDetails = document.getElementById('league-details');
    leagueDetails.innerHTML = `
        <h3>${details.name}</h3>
        <p>Abbreviation: ${details.abbr}</p>
        <p>Country: ${details.country}</p>
    `;
}

async function fetchStandings(leagueId) {
    const response = await fetch(`http://api-football-standings.azharimm.dev/leagues/${leagueId}/standings?season=2020&sort=asc`);
    const data = await response.json();
    displayStandings(data.data.standings);
}

function displayStandings(standings) {
    const leagueStandings = document.getElementById('league-standings');
    leagueStandings.innerHTML = '<h3 class="text-2xl font-bold mb-4">Standings</h3>';

    standings.forEach(team => {
        const stats = team.stats.reduce((acc, stat) => {
            acc[stat.name] = stat.displayValue;
            return acc;
        }, {});

        const teamDiv = document.createElement('div');
        teamDiv.classList.add('bg-white', 'rounded', 'p-4', 'shadow-md', 'mb-4');

        const teamName = team.team.displayName || 'Team Name Not Available'; // Handling undefined team name

        const teamLogo = team.team.logos?.[0]?.href || ''; // Using optional chaining to access logo href safely

        const teamNoteDescription = team.note?.description || 'No Description Available'; // Handling undefined note description

        teamDiv.innerHTML = `
            <img src="${teamLogo}" alt="${teamName}" class="w-16 h-16 rounded-full">
            <div class="ml-2">
                <p class="text-lg font-bold">${teamName} (${teamNoteDescription})</p>
                <p class="mb-2">Rank: ${stats.rank}</p>
                <p class="mb-2">Games Played: ${stats.gamesPlayed}</p>
                <p class="mb-2">Wins: ${stats.wins}</p>
                <p class="mb-2">Draws: ${stats.ties}</p>
                <p class="mb-2">Losses: ${stats.losses}</p>
                <p class="mb-2">Goals For: ${stats.pointsFor}</p>
                <p class="mb-2">Goals Against: ${stats.pointsAgainst}</p>
                <p class="mb-2">Goal Difference: ${stats.pointDifferential}</p>
                <p class="mb-2">Points: ${stats.points}</p>
            </div>
        `;

        leagueStandings.appendChild(teamDiv);
    });
}





async function fetchSeasons(leagueId) {
    const response = await fetch(`http://api-football-standings.azharimm.dev/leagues/${leagueId}/seasons`);
    const data = await response.json();
    displaySeasons(data.data.seasons);
}

function displaySeasons(seasons) {
    const leagueSeasons = document.getElementById('league-seasons');
    leagueSeasons.innerHTML = '<h3>Seasons</h3>';
    seasons.forEach(season => {
        const seasonDiv = document.createElement('div');
        seasonDiv.innerHTML = `
            <p><strong>${season.displayName}</strong></p>
            <p>Year: ${season.year}</p>
            <p>Start Date: ${new Date(season.startDate).toLocaleDateString()}</p>
            <p>End Date: ${new Date(season.endDate).toLocaleDateString()}</p>
        `;
        leagueSeasons.appendChild(seasonDiv);
    });
}