<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UEFA Europa League 2025</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #0d1117;
    }

    .bracket-container {
      min-width: 1200px;
      position: relative;
      padding: 20px;
      background-color: #0d1117;
    }

    .team-card {
      transition: all 0.3s ease;
    }

    .team-card:hover {
      transform: translateY(-2px);
    }

    .qualified-team {
      background-color: #b85c00 !important;
    }

    .qualifier-box {
      background-color: #b85c00;
      padding: 0.5rem;
      text-align: center;
      color: white;
      font-weight: 500;
      border-radius: 0.25rem;
      margin-bottom: 0.5rem;
    }

    .bg-bracket {
      background-color: #1a1f2e;
    }

    .match-card {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pulse {
      animation: pulse 1s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    .round-title {
      color: #ffc107;
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 1rem;
      text-align: center;
    }

    .champion-box {
      background-color: #1a1f2e;
      border-radius: 0.25rem;
      width: 200px;
      padding: 0.5rem;
      margin: 0 0.5rem;
    }

    @media (max-width: 1200px) {
      .scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    .team-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      border-radius: 0.25rem;
      margin-bottom: 0.5rem;
      background-color: #1a1f2e;
    }

    .team-item img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .team-item span {
      color: white;
      font-size: 0.875rem;
    }
  </style>
</head>

<body>
  <div class="container mx-auto px-4 py-8">
    <header class="text-center mb-12">
      <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">UEFA Europa League 2025</h1>
    </header>

    <div class="text-center mb-8">
      <button id="drawButton"
        class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105">
        Start Round of 16 Draw
      </button>
    </div>

    <div id="drawingStatus" class="text-center mb-8 hidden">
      <p class="text-xl text-yellow-500 pulse">Drawing matches...</p>
    </div>

    <div id="matches" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
      <!-- Draw matches will appear here -->
    </div>

    <div class="scroll-container">
      <div class="bracket-container">
        <div class="grid grid-cols-5 gap-8">
          <!-- Round of 16 - Left Side -->
          <div>
            <div class="round-title">Round of 16</div>
            <div class="space-y-2">
              <div id="r16-1" class="team-item"></div>
              <div id="r16-2" class="team-item"></div>
            </div>
            <div class="mt-8 space-y-2">
              <div id="r16-3" class="team-item"></div>
              <div id="r16-4" class="team-item"></div>
            </div>
          </div>

          <!-- Quarter Finals - Left Side -->
          <div>
            <div class="round-title">Quarter Finals</div>
            <div>
              <div class="qualifier-box">Winner Group A</div>
              <div id="qf1" class="qualified-team team-item">
                <img src="https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/d858d088-3cb1-41c0-b89b-9f1079a7d500/4k"
                  alt="Manchester City">
                <span>Manchester City FC</span>
              </div>
            </div>
            <div class="mt-8">
              <div class="qualifier-box">Winner Group B</div>
              <div id="qf2" class="qualified-team team-item">
                <img src="https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/05bb6454-b2ce-411a-9a11-38c171a91300/4k"
                  alt="Villarreal">
                <span>Villarreal CF</span>
              </div>
            </div>
          </div>

          <!-- Semi Finals and Final -->
          <div class="flex flex-col items-center">
            <div class="round-title">Semi Finals</div>
            <div class="qualifier-box w-full">Semi Final 1</div>
            <div id="sf1" class="team-item w-full"></div>

            <div class="my-8">
              <img src="Trophy.png" class="h-32 object-contain" alt="Trophy">
              <div class="text-white text-xl font-bold text-center mt-4">Champion</div>
            </div>

            <div class="flex space-x-2 w-full">
              <div id="final1" class="champion-box"></div>
              <div id="final2" class="champion-box"></div>
            </div>

            <div class="mt-8 w-full">
              <div class="qualifier-box">Semi Final 2</div>
              <div id="sf2" class="team-item"></div>
            </div>
          </div>

          <!-- Quarter Finals - Right Side -->
          <div>
            <div class="round-title">Quarter Finals</div>
            <div>
              <div class="qualifier-box">Winner Group C</div>
              <div id="qf3" class="qualified-team team-item">
                <img src="https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/d56104b5-56f3-4193-8abf-ccf3d9c49100/4k"
                  alt="Arsenal">
                <span>Arsenal FC</span>
              </div>
            </div>
            <div class="mt-8">
              <div class="qualifier-box">Winner Group D</div>
              <div id="qf4" class="qualified-team team-item">
                <img src="https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/af313c62-d15d-4373-c4ce-3abdf020e600/4k"
                  alt="Manchester United">
                <span>Manchester United FC</span>
              </div>
            </div>
          </div>

          <!-- Round of 16 - Right Side -->
          <div>
            <div class="round-title">Round of 16</div>
            <div class="space-y-2">
              <div id="r16-5" class="team-item"></div>
              <div id="r16-6" class="team-item"></div>
            </div>
            <div class="mt-8 space-y-2">
              <div id="r16-7" class="team-item"></div>
              <div id="r16-8" class="team-item"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script>
    const teams = [
      {
        name: "Stade Rennais Football Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b19d31d3-7ea7-42c7-6c4b-55d40f27d000/4k"
      },
      {
        name: "Real Madrid Club de Fútbol",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/a57950e7-cf70-445d-3986-551ff3e4fa00/4k"
      },
      {
        name: "Club Atlético de Madrid, S.A.D.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/505347f8-785a-4fcd-3fe7-da7ef5c8c000/4k"
      },
      {
        name: "Futbol Club Barcelona",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/a2d32a57-b096-4821-ccf1-bd55f276cc00/4k"
      },
      {
        name: "Associazione Calcio Milan",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/8068def8-d96f-4c86-0f80-97885dfcd900/4k"
      },
      {
        name: "Fußball-Club Bayern München e.V.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/53e25818-555c-43b0-26c8-4fab67be2f00/4k"
      },
      {
        name: "Liverpool Football Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b9d09c08-7d0d-4fc3-90ab-98fdd3cdee00/4k"
      },
      {
        name: "Società Sportiva Calcio Napoli",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/0f509e90-881c-4bdc-eb45-643bde396400/4k"
      }
    ];

    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

    function generateMatches() {
      const shuffledTeams = shuffleArray([...teams]);
      const matches = [];

      for (let i = 0; i < shuffledTeams.length; i += 2) {
        matches.push({
          homeTeam: shuffledTeams[i],
          awayTeam: shuffledTeams[i + 1]
        });
      }

      return matches;
    }

    function createTeamElement(team) {
      return `
        <div class="flex items-center space-x-3">
          <img src="${team.image}" alt="${team.name}" class="w-8 h-8 object-contain">
          <span class="text-white text-sm">${team.name}</span>
        </div>
      `;
    }

    function displayMatch(match, index) {
      const delay = index * 0.5;
      const matchHTML = `
        <div class="match-card bg-gray-800 rounded-lg p-4 shadow-lg" style="animation-delay: ${delay}s">
          <div class="flex flex-col items-center space-y-4">
            <div class="team-card w-full bg-gray-700 rounded-lg p-4 flex items-center space-x-4">
              <img src="${match.homeTeam.image}" alt="${match.homeTeam.name}" class="w-16 h-16 object-contain">
              <span class="text-white font-semibold text-sm md:text-base">${match.homeTeam.name}</span>
            </div>
            <div class="text-yellow-500 text-2xl font-bold">VS</div>
            <div class="team-card w-full bg-gray-700 rounded-lg p-4 flex items-center space-x-4">
              <img src="${match.awayTeam.image}" alt="${match.awayTeam.name}" class="w-16 h-16 object-contain">
              <span class="text-white font-semibold text-sm md:text-base">${match.awayTeam.name}</span>
            </div>
          </div>
        </div>
      `;

      document.getElementById('matches').insertAdjacentHTML('beforeend', matchHTML);
    }

    function displayRoundOf16(matches) {
      matches.forEach((match, index) => {
        document.getElementById(`r16-${index * 2 + 1}`).innerHTML = createTeamElement(match.homeTeam);
        document.getElementById(`r16-${index * 2 + 2}`).innerHTML = createTeamElement(match.awayTeam);
      });
    }

    document.getElementById('drawButton').addEventListener('click', async function () {
      this.disabled = true;
      this.classList.add('opacity-50');
      document.getElementById('matches').innerHTML = '';
      document.getElementById('drawingStatus').classList.remove('hidden');

      // Clear previous Round of 16 positions
      for (let i = 1; i <= 8; i++) {
        document.getElementById(`r16-${i}`).innerHTML = '';
      }

      // Clear previous Semi-Finals positions
      document.getElementById('sf1').innerHTML = '';
      document.getElementById('sf2').innerHTML = '';
      // Clear previous Final positions
      document.getElementById('final1').innerHTML = '';
      document.getElementById('final2').innerHTML = '';

      const matches = generateMatches();

      await new Promise(resolve => setTimeout(resolve, 3000));

      document.getElementById('drawingStatus').classList.add('hidden');

      matches.forEach((match, index) => {
        displayMatch(match, index);
      });

      setTimeout(() => {
        displayRoundOf16(matches);
      }, matches.length * 500 + 500);

      setTimeout(() => {
        this.disabled = false;
        this.classList.remove('opacity-50');
      }, matches.length * 500 + 1000);
    });
  </script>
</body>

</html>