| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BASKETBALL | NAGAS ATHLETICS</title> |
| <script src="https://cdn.tailwindcss.com"></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=Montserrat:wght@400;700&display=swap" rel="stylesheet"> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| body { |
| background-color: #121212; |
| color: #FFFFFF; |
| font-family: 'Montserrat', sans-serif; |
| overflow-x: hidden; |
| } |
| body::before { |
| content: ""; |
| position: fixed; |
| top: 0; left: 0; width: 100%; height: 100%; |
| opacity: 0.03; z-index: -1; pointer-events: none; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); |
| } |
| body::after { |
| content: ""; |
| position: fixed; |
| top: 0; left: 0; width: 100%; height: 100%; |
| z-index: -1; pointer-events: none; |
| background-image: linear-gradient(to right, #333333 1px, transparent 1px), linear-gradient(to bottom, #333333 1px, transparent 1px); |
| background-size: 50px 50px; opacity: 0.3; |
| } |
| .font-mono { font-family: 'Courier New', Courier, monospace; } |
| .hover-border-teal:hover { border-color: #5ec0cc !important; } |
| .mega-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #121212; border-top: 1px solid #333333; border-bottom: 1px solid #333333; z-index: 50; } |
| .mega-menu.active { display: block; } |
| .mega-menu-column { border-right: 1px solid #333333; } |
| .mega-menu-column:last-child { border-right: none; } |
| |
| .brutalist-table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| .brutalist-table th, .brutalist-table td { |
| border: 1px solid #333333; |
| padding: 12px; |
| text-align: left; |
| font-family: 'Courier New', Courier, monospace; |
| font-size: 14px; |
| } |
| .brutalist-table th { |
| color: #5ec0cc; |
| text-transform: uppercase; |
| font-weight: bold; |
| border-bottom: 2px solid #333333; |
| } |
| .brutalist-table tr:nth-child(even) { |
| background-color: rgba(255,255,255,0.03); |
| } |
| |
| .tab-btn { |
| border: 1px solid #333333; |
| padding: 8px 16px; |
| font-family: 'Courier New', Courier, monospace; |
| font-size: 12px; |
| text-transform: uppercase; |
| color: #CCCCCC; |
| cursor: pointer; |
| transition: all 0.3s; |
| } |
| .tab-btn:hover, .tab-btn.active { |
| border-color: #5ec0cc; |
| color: #5ec0cc; |
| } |
| |
| .collapsible-content { |
| max-height: 1000px; |
| overflow: hidden; |
| transition: max-height 0.3s ease; |
| } |
| .collapsible-content.collapsed { |
| max-height: 0; |
| } |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; left: 0; |
| width: 100%; height: 100%; |
| background-color: rgba(0,0,0,0.95); |
| z-index: 1000; |
| justify-content: center; |
| align-items: center; |
| } |
| .modal.active { display: flex; } |
| .gallery-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
| gap: 4px; |
| } |
| .gallery-item { |
| aspect-ratio: 1; |
| border: 1px solid #333333; |
| cursor: pointer; |
| overflow: hidden; |
| } |
| .gallery-item:hover { border-color: #5ec0cc; } |
| .gallery-item img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
|
|
| |
| <div class="w-full bg-[#121212] border-b border-[#333333] overflow-hidden py-2"> |
| <div class="whitespace-nowrap flex animate-[ticker_20s_linear_infinite]"> |
| <span class="text-[#5ec0cc] font-mono text-sm mx-8">BASKETBALL SEASON 2025-26 • GAMES EVERY SATURDAY • BASKETBALL SEASON 2025-26 • GAMES EVERY SATURDAY •</span> |
| <span class="text-[#5ec0cc] font-mono text-sm mx-8">BASKETBALL SEASON 2025-26 • GAMES EVERY SATURDAY • BASKETBALL SEASON 2025-26 • GAMES EVERY SATURDAY •</span> |
| </div> |
| </div> |
|
|
| |
| <header class="w-full border-b border-[#333333] relative"> |
| <div class="max-w-full px-4 sm:px-8 py-4 flex justify-between items-center"> |
| <a href="index.html" class="text-[#5ec0cc] font-bold text-2xl tracking-wider uppercase">NAGAS</a> |
| <div class="flex items-center gap-4"> |
| <nav class="hidden md:flex gap-6"> |
| <a href="teams.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Teams</a> |
| <a href="schedule.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Schedule</a> |
| <a href="council.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Council</a> |
| </nav> |
| <button id="menuBtn" class="hidden md:block border border-[#5ec0cc] px-6 py-2 text-[#5ec0cc] font-mono text-sm uppercase hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors">MENU</button> |
| <button id="mobileMenuBtn" class="md:hidden border border-[#5ec0cc] p-2"><i data-lucide="menu" class="w-6 h-6 text-[#5ec0cc]"></i></button> |
| </div> |
| </div> |
| |
| <div id="megaMenu" class="mega-menu"> |
| <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6"> |
| <div class="mega-menu-column p-6"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4 text-sm">TEAMS</h3> |
| <ul class="space-y-2"> |
| <li><a href="basketball.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Basketball</a></li> |
| <li><a href="volleyball.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Volleyball</a></li> |
| <li><a href="football.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Football</a></li> |
| </ul> |
| </div> |
| <div class="mega-menu-column p-6"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4 text-sm">ABOUT</h3> |
| <ul class="space-y-2"> |
| <li><a href="about.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">About Nagas</a></li> |
| </ul> |
| </div> |
| <div class="mega-menu-column p-6"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4 text-sm">SCHEDULE</h3> |
| <ul class="space-y-2"> |
| <li><a href="schedule.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Full Schedule</a></li> |
| </ul> |
| </div> |
| <div class="mega-menu-column p-6"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4 text-sm">NEWS & MEDIA</h3> |
| <ul class="space-y-2"> |
| <li><a href="news.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Latest News</a></li> |
| </ul> |
| </div> |
| <div class="mega-menu-column p-6"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4 text-sm">ATHLETIC COUNCIL</h3> |
| <ul class="space-y-2"> |
| <li><a href="council.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Council Members</a></li> |
| </ul> |
| </div> |
| <div class="mega-menu-column p-6"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4 text-sm">GET INVOLVED</h3> |
| <ul class="space-y-2"> |
| <li><a href="involved.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Tryouts</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobileMenu" class="hidden md:hidden border-t border-[#333333] bg-[#121212] p-4 space-y-4"> |
| <a href="teams.html" class="block text-[#CCCCCC] font-mono uppercase border-b border-[#333333] pb-2">TEAMS</a> |
| <a href="schedule.html" class="block text-[#CCCCCC] font-mono uppercase border-b border-[#333333] pb-2">SCHEDULE</a> |
| <a href="council.html" class="block text-[#CCCCCC] font-mono uppercase">COUNCIL</a> |
| </div> |
| </header> |
|
|
| |
| <main class="w-full px-4 md:px-8 py-16"> |
| <h1 class="text-[#5ec0cc] font-bold uppercase text-4xl md:text-6xl mb-2 tracking-wider">BASKETBALL</h1> |
| <h2 class="text-white font-mono uppercase text-lg mb-12 tracking-wider">2025-26 SEASON</h2> |
| |
| |
| <div class="mb-12 border-b border-[#333333] pb-6 overflow-x-auto"> |
| <div class="flex gap-2 min-w-max"> |
| <div class="flex gap-2 mr-6"> |
| <button class="tab-btn active" onclick="selectTab('male')">MALE</button> |
| <button class="tab-btn" onclick="selectTab('female')">FEMALE</button> |
| </div> |
| |
| <div id="levelTabs" class="flex gap-2 mr-6"> |
| <button class="tab-btn active" onclick="selectLevel('senior')">SENIOR</button> |
| <button class="tab-btn" onclick="selectLevel('junior')">JUNIOR</button> |
| </div> |
| |
| <div id="teamTabs" class="flex gap-2"> |
| <button class="tab-btn active" onclick="selectTeam('a')">A TEAM</button> |
| <button class="tab-btn" onclick="selectTeam('b')">B TEAM</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="mb-12 border-t border-[#333333] pt-8"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase text-xl mb-6 tracking-wider">ABOUT THE PROGRAM</h3> |
| <p class="text-white font-mono text-sm leading-[1.8] mb-4"> |
| The Nagas Basketball program is committed to developing well-rounded student-athletes who excel both on the court and in the classroom. Our philosophy emphasizes teamwork, discipline, and continuous improvement. With state-of-the-art facilities and experienced coaching staff, we provide opportunities for athletes at all levels to reach their full potential. |
| </p> |
| <p class="text-white font-mono text-sm leading-[1.8]"> |
| Training sessions focus on fundamental skills, tactical awareness, physical conditioning, and mental preparation. We compete in local leagues and international tournaments, representing Northbridge International School of Cambodia with pride and sportsmanship. |
| </p> |
| </section> |
|
|
| |
| <section class="mb-12 border-t border-[#333333] pt-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase text-xl tracking-wider">ACHIEVEMENTS</h3> |
| <button onclick="toggleCollapse('achievementsTable')" class="text-[#5ec0cc] font-mono text-sm uppercase hover:underline">[TOGGLE]</button> |
| </div> |
| |
| <div class="flex gap-4 mb-4"> |
| <select id="yearFilter" onchange="filterAchievements()" class="bg-[#121212] border border-[#333333] text-[#CCCCCC] font-mono text-sm p-2"> |
| <option value="all">ALL YEARS</option> |
| <option value="2024">2024</option> |
| <option value="2023">2023</option> |
| <option value="2022">2022</option> |
| </select> |
| <select id="teamFilter" onchange="filterAchievements()" class="bg-[#121212] border border-[#333333] text-[#CCCCCC] font-mono text-sm p-2"> |
| <option value="all">ALL TEAMS</option> |
| <option value="a">A TEAM</option> |
| <option value="b">B TEAM</option> |
| </select> |
| </div> |
| |
| <div id="achievementsTable" class="collapsible-content"> |
| <table class="brutalist-table"> |
| <thead> |
| <tr> |
| <th>YEAR</th> |
| <th>ACHIEVEMENT</th> |
| <th>TEAM</th> |
| </tr> |
| </thead> |
| <tbody id="achievementsBody"> |
| <tr data-year="2024" data-team="a"> |
| <td>2024</td> |
| <td>ISPP TOURNAMENT CHAMPIONS</td> |
| <td>MALE SENIOR A</td> |
| </tr> |
| <tr data-year="2024" data-team="a"> |
| <td>2024</td> |
| <td>RUNNERS-UP NATIONAL CHAMPIONSHIPS</td> |
| <td>MALE SENIOR A</td> |
| </tr> |
| <tr data-year="2023" data-team="b"> |
| <td>2023</td> |
| <td>THIRD PLACE REGIONAL CUP</td> |
| <td>MALE JUNIOR B</td> |
| </tr> |
| <tr data-year="2022" data-team="a"> |
| <td>2022</td> |
| <td>BEST DEFENSE AWARD</td> |
| <td>FEMALE SENIOR A</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12 border-t border-[#333333] pt-8"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase text-xl mb-6 tracking-wider">TEAM ROSTER</h3> |
| <div class="overflow-x-auto"> |
| <table class="brutalist-table"> |
| <thead> |
| <tr> |
| <th>PHOTO</th> |
| <th>JERSEY #</th> |
| <th>NAME</th> |
| <th>POSITION</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="p-2"><img src="http://static.photos/people/50x50/10" class="w-[50px] h-[50px] object-cover" alt="Player"></td> |
| <td class="font-mono text-[#5ec0cc]">10</td> |
| <td class="uppercase font-bold">SOKHA CHAN</td> |
| <td class="font-mono uppercase">POINT GUARD</td> |
| </tr> |
| <tr class="bg-[rgba(255,255,255,0.03)]"> |
| <td class="p-2"><img src="http://static.photos/people/50x50/11" class="w-[50px] h-[50px] object-cover" alt="Player"></td> |
| <td class="font-mono text-[#5ec0cc]">23</td> |
| <td class="uppercase font-bold">DAVID SMITH</td> |
| <td class="font-mono uppercase">CENTER</td> |
| </tr> |
| <tr> |
| <td class="p-2"><img src="http://static.photos/people/50x50/12" class="w-[50px] h-[50px] object-cover" alt="Player"></td> |
| <td class="font-mono text-[#5ec0cc]">7</td> |
| <td class="uppercase font-bold">MICHAEL BROWN</td> |
| <td class="font-mono uppercase">SHOOTING GUARD</td> |
| </tr> |
| <tr class="bg-[rgba(255,255,255,0.03)]"> |
| <td class="p-2"><img src="http://static.photos/people/50x50/13" class="w-[50px] h-[50px] object-cover" alt="Player"></td> |
| <td class="font-mono text-[#5ec0cc]">15</td> |
| <td class="uppercase font-bold">JAMES WILSON</td> |
| <td class="font-mono uppercase">SMALL FORWARD</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12 border-t border-[#333333] pt-8"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase text-xl mb-6 tracking-wider">2025-26 SEASON SCHEDULE</h3> |
| <div class="overflow-x-auto"> |
| <table class="brutalist-table"> |
| <thead> |
| <tr> |
| <th>DATE</th> |
| <th>OPPONENT</th> |
| <th>LOCATION</th> |
| <th>RESULT</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>2025-11-15</td> |
| <td>ISPP</td> |
| <td>HOME</td> |
| <td class="text-[#5ec0cc]">68-54 (W)</td> |
| </tr> |
| <tr class="bg-[rgba(255,255,255,0.03)]"> |
| <td>2025-11-22</td> |
| <td>CFL</td> |
| <td>AWAY</td> |
| <td class="text-white">--</td> |
| </tr> |
| <tr> |
| <td>2025-11-29</td> |
| <td>BISPP</td> |
| <td>HOME</td> |
| <td class="text-white">--</td> |
| </tr> |
| <tr class="bg-[rgba(255,255,255,0.03)]"> |
| <td>2025-12-06</td> |
| <td>ISHCMC</td> |
| <td>NEUTRAL</td> |
| <td class="text-white">--</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <a href="schedule.html?sport=basketball" class="inline-block mt-6 border border-[#5ec0cc] text-[#5ec0cc] px-6 py-3 font-mono uppercase text-sm hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors">VIEW FULL SCHEDULE →</a> |
| </section> |
|
|
| |
| <section class="mb-12 border-t border-[#333333] pt-8"> |
| <h3 class="text-[#5ec0cc] font-bold uppercase text-xl mb-6 tracking-wider">GALLERY</h3> |
| <div class="gallery-grid"> |
| <div class="gallery-item" onclick="openGalleryModal(0)"> |
| <img src="http://static.photos/sport/200x200/1" alt="Basketball"> |
| </div> |
| <div class="gallery-item" onclick="openGalleryModal(1)"> |
| <img src="http://static.photos/sport/200x200/2" alt="Basketball"> |
| </div> |
| <div class="gallery-item" onclick="openGalleryModal(2)"> |
| <img src="http://static.photos/sport/200x200/3" alt="Basketball"> |
| </div> |
| <div class="gallery-item" onclick="openGalleryModal(3)"> |
| <img src="http://static.photos/sport/200x200/4" alt="Basketball"> |
| </div> |
| <div class="gallery-item" onclick="openGalleryModal(4)"> |
| <img src="http://static.photos/sport/200x200/5" alt="Basketball"> |
| </div> |
| <div class="gallery-item" onclick="openGalleryModal(5)"> |
| <img src="http://static.photos/sport/200x200/6" alt="Basketball"> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <div id="galleryModal" class="modal"> |
| <button onclick="closeGalleryModal()" class="absolute top-4 right-4 text-[#5ec0cc] hover:text-white z-50"> |
| <i data-lucide="x" class="w-8 h-8"></i> |
| </button> |
| <img id="modalImage" src="" alt="Gallery Image" class="max-w-[90vw] max-h-[90vh] object-contain"> |
| </div> |
|
|
| |
| <footer class="w-full border-t border-[#333333] py-12 px-4 md:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-0"> |
| <div class="border border-[#333333] p-6 md:border-r-0"> |
| <h4 class="text-[#5ec0cc] font-bold uppercase mb-4 tracking-wider">CONTACT</h4> |
| <p class="text-[#CCCCCC] font-mono text-sm">nagas@nisc.edu.kh</p> |
| </div> |
| <div class="border border-[#333333] p-6 md:border-r-0"> |
| <h4 class="text-[#5ec0cc] font-bold uppercase mb-4 tracking-wider">QUICK LINKS</h4> |
| <ul class="space-y-2"> |
| <li><a href="index.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Home</a></li> |
| <li><a href="teams.html" class="text-[#CCCCCC] font-mono text-sm uppercase hover:text-[#5ec0cc]">Teams</a></li> |
| </ul> |
| </div> |
| <div class="border border-[#333333] p-6"> |
| <h4 class="text-[#5ec0cc] font-bold uppercase mb-4 tracking-wider">SOCIAL</h4> |
| <p class="text-[#CCCCCC] font-mono text-sm">@NAGAS</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| lucide.createIcons(); |
| |
| const menuBtn = document.getElementById('menuBtn'); |
| const megaMenu = document.getElementById('megaMenu'); |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| menuBtn.addEventListener('click', () => { |
| megaMenu.classList.toggle('active'); |
| }); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| let currentGender = 'male'; |
| let currentLevel = 'senior'; |
| let currentTeam = 'a'; |
| |
| function selectTab(gender) { |
| currentGender = gender; |
| document.querySelectorAll('.tab-btn').forEach(btn => { |
| if(btn.textContent.includes('MALE') || btn.textContent.includes('FEMALE')) { |
| btn.classList.remove('active'); |
| } |
| }); |
| event.target.classList.add('active'); |
| updateRoster(); |
| } |
| |
| function selectLevel(level) { |
| currentLevel = level; |
| document.querySelectorAll('#levelTabs .tab-btn').forEach(btn => btn.classList.remove('active')); |
| event.target.classList.add('active'); |
| updateRoster(); |
| } |
| |
| function selectTeam(team) { |
| currentTeam = team; |
| document.querySelectorAll('#teamTabs .tab-btn').forEach(btn => btn.classList.remove('active')); |
| event.target.classList.add('active'); |
| updateRoster(); |
| } |
| |
| function updateRoster() { |
| |
| console.log(`Loading roster for: ${currentGender} ${currentLevel} ${currentTeam} team`); |
| } |
| |
| |
| function toggleCollapse(id) { |
| const element = document.getElementById(id); |
| element.classList.toggle('collapsed'); |
| } |
| |
| |
| function filterAchievements() { |
| const year = document.getElementById('yearFilter').value; |
| const team = document.getElementById('teamFilter').value; |
| const rows = document.querySelectorAll('#achievementsBody tr'); |
| |
| rows.forEach(row => { |
| const rowYear = row.getAttribute('data-year'); |
| const rowTeam = row.getAttribute('data-team'); |
| let show = true; |
| |
| if (year !== 'all' && rowYear !== year) show = false; |
| if (team !== 'all' && rowTeam !== team) show = false; |
| |
| row.style.display = show ? 'table-row' : 'none'; |
| }); |
| } |
| |
| |
| const galleryImages = [ |
| "http://static.photos/sport/800x600/1", |
| "http://static.photos/sport/800x600/2", |
| "http://static.photos/sport/800x600/3", |
| "http://static.photos/sport/800x600/4", |
| "http://static.photos/sport/800x600/5", |
| "http://static.photos/sport/800x600/6" |
| ]; |
| |
| function openGalleryModal(index) { |
| document.getElementById('modalImage').src = galleryImages[index]; |
| document.getElementById('galleryModal').classList.add('active'); |
| } |
| |
| function closeGalleryModal() { |
| document.getElementById('galleryModal').classList.remove('active'); |
| } |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'Escape') { |
| closeGalleryModal(); |
| } |
| }); |
| |
| |
| document.getElementById('galleryModal').addEventListener('click', (e) => { |
| if (e.target === document.getElementById('galleryModal')) { |
| closeGalleryModal(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
