Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Schedule & Results - NISC NAGAS</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| .bebas { font-family: 'Bebas Neue', sans-serif; } | |
| .montserrat { font-family: 'Montserrat', sans-serif; } | |
| .live-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| .active-filter { | |
| box-shadow: 0 0 15px rgba(98, 193, 205, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#020202] text-[#fcfdfd]"> | |
| <!-- Navigation --> | |
| <nav class="bg-[#62c1cd] text-[#020202] p-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/sport/200x200/42" alt="NAGAS Logo" class="h-12 w-12 rounded-full"> | |
| <div class="flex flex-col"> | |
| <span class="bebas text-2xl">NAGAS</span> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex justify-center"> | |
| <div class="hidden md:flex space-x-6 montserrat"> | |
| <a href="index.html" class="hover:text-[#62c1cd]">Home</a> | |
| <a href="teams.html" class="hover:text-[#62c1cd]">Teams</a> | |
| <a href="schedule.html" class="hover:text-[#62c1cd]">Schedule</a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button id="menuButton" class="hover:text-[#62c1cd]"> | |
| <i data-feather="more-vertical"></i> | |
| </button> | |
| <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-[#020202] rounded-md shadow-lg z-10"> | |
| <a href="#" class="block px-4 py-2 text-[#fcfdfd] hover:bg-[#62c1cd] hover:text-[#020202]">Gallery</a> | |
| <a href="#" class="block px-4 py-2 text-[#fcfdfd] hover:bg-[#62c1cd] hover:text-[#020202]">Contact</a> | |
| <a href="#" class="block px-4 py-2 text-[#fcfdfd] hover:bg-[#62c1cd] hover:text-[#020202]">NISC Athletics</a> | |
| </div> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Page Header --> | |
| <header class="py-12 bg-gradient-to-r from-[#62c1cd] to-[#020202]"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="bebas text-5xl md:text-6xl mb-4">SCHEDULE & RESULTS</h1> | |
| <p class="montserrat text-xl max-w-2xl mx-auto"> | |
| Stay updated with live scores, recent results, and upcoming games. | |
| </p> | |
| </div> | |
| </header> | |
| <!-- Live Scores Section --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="bebas text-3xl text-[#62c1cd] mb-8 text-center">LIVE NOW</h2> | |
| <div class="max-w-4xl mx-auto bg-[#62c1cd] rounded-xl p-6 shadow-lg relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-red-600 animate-pulse"></div> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold live-badge">LIVE</span> | |
| <span class="montserrat font-bold">Q3 05:30</span> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center justify-between mb-6"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <img src="http://static.photos/sport/200x200/1" alt="NAGAS" class="w-16 h-16 rounded-full mr-4"> | |
| <span class="bebas text-2xl">NAGAS</span> | |
| </div> | |
| <div class="text-5xl font-bold bebas">2 - 1</div> | |
| <div class="flex items-center mt-4 md:mt-0"> | |
| <span class="bebas text-2xl mr-4">CIS Tigers</span> | |
| <img src="http://static.photos/sport/200x200/2" alt="CIS Tigers" class="w-16 h-16 rounded-full"> | |
| </div> | |
| </div> | |
| <!-- Score Details Divider --> | |
| <div class="border-t border-[#020202] pt-4 mb-6"> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between montserrat text-sm animate-fadeIn"> | |
| <span>Sarah K. (NAGAS)</span> | |
| <span>25'</span> | |
| </div> | |
| <div class="flex justify-between montserrat text-sm animate-fadeIn"> | |
| <span>Mike T. (CIS Tigers)</span> | |
| <span>42'</span> | |
| </div> | |
| <div class="flex justify-between montserrat text-sm animate-fadeIn"> | |
| <span>Emma R. (NAGAS)</span> | |
| <span>67'</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="montserrat text-center mb-6">Last Play: Goal by Emma R. (NAGAS)</p> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="bg-[#020202] hover:bg-gray-800 text-[#fcfdfd] font-bold py-2 px-6 rounded-lg montserrat transition-transform hover:scale-105"> | |
| Watch Live | |
| </button> | |
| <button class="bg-[#020202] hover:bg-gray-800 text-[#fcfdfd] font-bold py-2 px-6 rounded-lg montserrat transition-transform hover:scale-105"> | |
| View Stats | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recent Results Section --> | |
| <section class="py-12 bg-[#0a0a0a]"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="bebas text-3xl text-[#62c1cd] mb-8 text-center">RECENT RESULTS</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Game 1 --> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6 border-l-4 border-green-500 hover:border-green-400 transition-all duration-300 transform hover:-translate-y-2 cursor-pointer"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="montserrat text-sm">May 10, 2023</span> | |
| <span class="bg-green-500 text-white px-2 py-1 rounded text-xs font-bold">W 3-1</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/sport/200x200/3" alt="NAGAS" class="w-12 h-12 rounded-full mr-2"> | |
| <span class="bebas">NAGAS</span> | |
| </div> | |
| <span>VS</span> | |
| <div class="flex items-center"> | |
| <span class="bebas mr-2">ISPP Dragons</span> | |
| <img src="http://static.photos/sport/200x200/4" alt="ISPP Dragons" class="w-12 h-12 rounded-full"> | |
| </div> | |
| </div> | |
| <p class="montserrat text-sm mb-4">Dominant win with great teamwork!</p> | |
| <button class="text-[#62c1cd] montserrat text-sm hover:underline">View Details</button> | |
| </div> | |
| <!-- Game 2 --> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6 border-l-4 border-red-500 hover:border-red-400 transition-all duration-300 transform hover:-translate-y-2 cursor-pointer"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="montserrat text-sm">May 5, 2023</span> | |
| <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-bold">L 0-2</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/sport/200x200/3" alt="NAGAS" class="w-12 h-12 rounded-full mr-2"> | |
| <span class="bebas">NAGAS</span> | |
| </div> | |
| <span>VS</span> | |
| <div class="flex items-center"> | |
| <span class="bebas mr-2">Logos Lions</span> | |
| <img src="http://static.photos/sport/200x200/5" alt="Logos Lions" class="w-12 h-12 rounded-full"> | |
| </div> | |
| </div> | |
| <p class="montserrat text-sm mb-4">Close game, great effort despite the loss.</p> | |
| <button class="text-[#62c1cd] montserrat text-sm hover:underline">View Details</button> | |
| </div> | |
| <!-- Game 3 --> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6 border-l-4 border-green-500 hover:border-green-400 transition-all duration-300 transform hover:-translate-y-2 cursor-pointer"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="montserrat text-sm">Apr 28, 2023</span> | |
| <span class="bg-green-500 text-white px-2 py-1 rounded text-xs font-bold">W 4-2</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/sport/200x200/3" alt="NAGAS" class="w-12 h-12 rounded-full mr-2"> | |
| <span class="bebas">NAGAS</span> | |
| </div> | |
| <span>VS</span> | |
| <div class="flex items-center"> | |
| <span class="bebas mr-2">CIS Tigers</span> | |
| <img src="http://static.photos/sport/200x200/2" alt="CIS Tigers" class="w-12 h-12 rounded-full"> | |
| </div> | |
| </div> | |
| <p class="montserrat text-sm mb-4">Strong offensive performance!</p> | |
| <button class="text-[#62c1cd] montserrat text-sm hover:underline">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upcoming Games Section --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="bebas text-3xl text-[#62c1cd] mb-8 text-center">UPCOMING GAMES</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- Game 1 --> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6 hover:bg-[#2a2a2a] transition-all duration-300 transform hover:-translate-y-1"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="montserrat text-sm">May 22, 2023 | 3:00 PM</span> | |
| <span class="bg-[#62c1cd] text-[#020202] px-2 py-1 rounded text-xs font-bold animate-pulse">3 DAYS TO GO</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/sport/200x200/3" alt="NAGAS" class="w-12 h-12 rounded-full mr-2"> | |
| <span class="bebas">NAGAS</span> | |
| </div> | |
| <span>VS</span> | |
| <div class="flex items-center"> | |
| <span class="bebas mr-2">CIS Eagles</span> | |
| <img src="http://static.photos/sport/200x200/6" alt="CIS Eagles" class="w-12 h-12 rounded-full"> | |
| </div> | |
| </div> | |
| <p class="montserrat text-sm mb-4">Location: NISC Gymnasium</p> | |
| <div class="flex space-x-2"> | |
| <button class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm transition-transform hover:scale-105"> | |
| Add to Calendar | |
| </button> | |
| <button class="bg-[#020202] hover:bg-gray-800 text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat text-sm transition-transform hover:scale-105"> | |
| RSVP | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Game 2 --> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6 hover:bg-[#2a2a2a] transition-all duration-300 transform hover:-translate-y-1"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="montserrat text-sm">May 29, 2023 | 4:30 PM</span> | |
| <span class="bg-[#62c1cd] text-[#020202] px-2 py-1 rounded text-xs font-bold">10 DAYS TO GO</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/sport/200x200/3" alt="NAGAS" class="w-12 h-12 rounded-full mr-2"> | |
| <span class="bebas">NAGAS</span> | |
| </div> | |
| <span>VS</span> | |
| <div class="flex items-center"> | |
| <span class="bebas mr-2">ISPP Dragons</span> | |
| <img src="http://static.photos/sport/200x200/4" alt="ISPP Dragons" class="w-12 h-12 rounded-full"> | |
| </div> | |
| </div> | |
| <p class="montserrat text-sm mb-4">Location: ISPP Sports Complex</p> | |
| <div class="flex space-x-2"> | |
| <button class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm transition-transform hover:scale-105"> | |
| Add to Calendar | |
| </button> | |
| <button class="bg-[#020202] hover:bg-gray-800 text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat text-sm transition-transform hover:scale-105"> | |
| RSVP | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- All Past Games Section --> | |
| <section class="py-12 bg-[#0a0a0a]"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="bebas text-3xl text-[#62c1cd] mb-8 text-center">ALL PAST GAMES</h2> | |
| <!-- Filters --> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <button class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105 active-filter"> | |
| All Results | |
| </button> | |
| <button class="bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105"> | |
| Wins | |
| </button> | |
| <button class="bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105"> | |
| Losses | |
| </button> | |
| <button class="bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105"> | |
| Ties | |
| </button> | |
| </div> | |
| <!-- Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-[#1a1a1a] rounded-lg"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="py-3 px-4 text-left montserrat cursor-pointer hover:bg-[#2a2a2a]">Date <span class="float-right">↑</span></th> | |
| <th class="py-3 px-4 text-left montserrat cursor-pointer hover:bg-[#2a2a2a]">Opponent</th> | |
| <th class="py-3 px-4 text-left montserrat cursor-pointer hover:bg-[#2a2a2a]">Result</th> | |
| <th class="py-3 px-4 text-left montserrat cursor-pointer hover:bg-[#2a2a2a]">Score</th> | |
| <th class="py-3 px-4 text-left montserrat">Recap/Stats</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-800 hover:bg-[#2a2a2a] transition-colors duration-200"> | |
| <td class="py-3 px-4 montserrat text-sm">May 10, 2023</td> | |
| <td class="py-3 px-4 montserrat">ISPP Dragons</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-green-500 text-white px-2 py-1 rounded text-xs font-bold">W</span> | |
| </td> | |
| <td class="py-3 px-4 montserrat">3 - 1</td> | |
| <td class="py-3 px-4"> | |
| <a href="#" class="text-[#62c1cd] hover:underline montserrat text-sm transition-colors">View</a> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-[#2a2a2a] transition-colors duration-200"> | |
| <td class="py-3 px-4 montserrat text-sm">May 5, 2023</td> | |
| <td class="py-3 px-4 montserrat">Logos Lions</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-bold">L</span> | |
| </td> | |
| <td class="py-3 px-4 montserrat">0 - 2</td> | |
| <td class="py-3 px-4"> | |
| <a href="#" class="text-[#62c1cd] hover:underline montserrat text-sm transition-colors">View</a> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-[#2a2a2a] transition-colors duration-200"> | |
| <td class="py-3 px-4 montserrat text-sm">Apr 28, 2023</td> | |
| <td class="py-3 px-4 montserrat">CIS Tigers</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-green-500 text-white px-2 py-1 rounded text-xs font-bold">W</span> | |
| </td> | |
| <td class="py-3 px-4 montserrat">4 - 2</td> | |
| <td class="py-3 px-4"> | |
| <a href="#" class="text-[#62c1cd] hover:underline montserrat text-sm transition-colors">View</a> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-[#2a2a2a] transition-colors duration-200"> | |
| <td class="py-3 px-4 montserrat text-sm">Apr 21, 2023</td> | |
| <td class="py-3 px-4 montserrat">NIS Falcons</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-bold">L</span> | |
| </td> | |
| <td class="py-3 px-4 montserrat">1 - 2</td> | |
| <td class="py-3 px-4"> | |
| <a href="#" class="text-[#62c1cd] hover:underline montserrat text-sm transition-colors">View</a> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-[#2a2a2a] transition-colors duration-200"> | |
| <td class="py-3 px-4 montserrat text-sm">Apr 14, 2023</td> | |
| <td class="py-3 px-4 montserrat">Logos Lions</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-green-500 text-white px-2 py-1 rounded text-xs font-bold">W</span> | |
| </td> | |
| <td class="py-3 px-4 montserrat">3 - 0</td> | |
| <td class="py-3 px-4"> | |
| <a href="#" class="text-[#62c1cd] hover:underline montserrat text-sm transition-colors">View</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105"> | |
| 1 | |
| </button> | |
| <button class="bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105"> | |
| 2 | |
| </button> | |
| <button class="bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105"> | |
| 3 | |
| </button> | |
| <button class="bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] font-bold py-2 px-4 rounded montserrat transition-transform hover:scale-105"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="bebas text-2xl mb-4">NISC NAGAS</h3> | |
| <p class="montserrat text-gray-400"> | |
| The official sports team of Northbridge International School of Cambodia. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Quick Links</h4> | |
| <ul class="montserrat space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Teams</a></li> | |
| <li><a href="schedule.html" class="text-gray-400 hover:text-white">Schedule</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Gallery</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Contact</h4> | |
| <address class="montserrat text-gray-400 not-italic"> | |
| Northbridge International School<br> | |
| Phnom Penh, Cambodia<br> | |
| Email: nisc.nagas@nisc.edu.kh<br> | |
| Phone: +855 23 123 4567 | |
| </address> | |
| </div> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center montserrat text-gray-400"> | |
| <p>© 2023 NISC NAGAS. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const menuButton = document.getElementById('menuButton'); | |
| const dropdownMenu = document.getElementById('dropdownMenu'); | |
| menuButton.addEventListener('click', function() { | |
| dropdownMenu.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!menuButton.contains(event.target) && !dropdownMenu.contains(event.target)) { | |
| dropdownMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Filter buttons interaction | |
| const filterButtons = document.querySelectorAll('.montserrat.rounded'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| filterButtons.forEach(btn => btn.classList.remove('active-filter')); | |
| // Add active class to clicked button | |
| this.classList.add('active-filter'); | |
| }); | |
| }); | |
| // Simulate live score updates | |
| setInterval(function() { | |
| const liveScore = document.querySelector('.text-5xl.font-bold.bebas'); | |
| if (liveScore) { | |
| // Add animation class | |
| liveScore.classList.add('animate-pulse'); | |
| // Remove animation class after animation completes | |
| setTimeout(() => { | |
| liveScore.classList.remove('animate-pulse'); | |
| }, 1000); | |
| } | |
| }, 30000); // Update every 30 seconds | |
| // Add hover effect to table headers | |
| const tableHeaders = document.querySelectorAll('th.cursor-pointer'); | |
| tableHeaders.forEach(header => { | |
| header.addEventListener('mouseenter', function() { | |
| this.classList.add('bg-[#2a2a2a]'); | |
| }); | |
| header.addEventListener('mouseleave', function() { | |
| this.classList.remove('bg-[#2a2a2a]'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |