🐳 12/04 - 17:13 - CREATE THE TEAMS OVERVIEW PAGE FOR NAGAS ATHLETICS WEBSITE WITH THE FOLLOWING BRUTALIST SPECIFICATIONS: DESIGN SYSTEM: Background: Pure black (#121212) with subtle noise texture an
5d1cac6 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NAGAS TEAMS | 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 ; | |
| } | |
| .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; | |
| } | |
| /* Modal Styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.9); | |
| z-index: 1000; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| /* Table Styles */ | |
| .player-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .player-table th, | |
| .player-table td { | |
| border-bottom: 1px solid #333333; | |
| padding: 12px; | |
| text-align: left; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 14px; | |
| } | |
| .player-table th { | |
| color: #5ec0cc; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .player-table tr:nth-child(even) { | |
| background-color: #1e1e1e; | |
| } | |
| .player-table tr:hover { | |
| border: 1px solid #5ec0cc; | |
| background-color: rgba(94, 192, 204, 0.05); | |
| } | |
| .sort-indicator { | |
| margin-left: 5px; | |
| color: #5ec0cc; | |
| } | |
| /* Filter buttons */ | |
| .filter-btn { | |
| border: 1px solid #333333; | |
| background: transparent; | |
| color: #CCCCCC; | |
| padding: 4px 12px; | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 700; | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .filter-btn:hover { | |
| border-color: #5ec0cc; | |
| } | |
| .filter-btn.active { | |
| border-color: #5ec0cc; | |
| color: #5ec0cc; | |
| background-color: rgba(94, 192, 204, 0.1); | |
| } | |
| /* Mobile sidebar */ | |
| .mobile-sidebar { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #121212; | |
| z-index: 200; | |
| padding: 2rem; | |
| border: 1px solid #333333; | |
| } | |
| .mobile-sidebar.active { | |
| display: block; | |
| } | |
| /* Diagram lines */ | |
| .diagram-line { | |
| width: 1px; | |
| background-color: #333333; | |
| height: 20px; | |
| margin: 0 auto; | |
| } | |
| .diagram-line-horizontal { | |
| height: 1px; | |
| background-color: #333333; | |
| flex: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="w-full border-b border-[#333333] relative bg-[#121212]"> | |
| <div class="max-w-full px-4 sm:px-8 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="text-[#5ec0cc] font-bold uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 2.5rem; letter-spacing: 0.1em;">NAGAS</a> | |
| <span class="text-[#5ec0cc] font-bold uppercase ml-8 hidden md:block" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;">TEAMS</span> | |
| </div> | |
| <!-- Desktop Menu Button --> | |
| <button id="menuBtn" class="hidden md:block border border-[#5ec0cc] px-4 py-2 text-[#5ec0cc] font-bold uppercase tracking-wider hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| MENU | |
| </button> | |
| <!-- Mobile Hamburger --> | |
| <button id="mobileMenuBtn" class="md:hidden border border-[#5ec0cc] p-2 hover-border-teal"> | |
| <i data-lucide="menu" class="w-6 h-6 text-[#5ec0cc]"></i> | |
| </button> | |
| </div> | |
| <!-- Mega Menu Desktop --> | |
| <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 tracking-wider" style="font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;">HOME</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">Home</a></li> | |
| </ul> | |
| </div> | |
| <div class="mega-menu-column p-6"> | |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4 text-sm tracking-wider" style="font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;">ABOUT</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="about.html" class="text-white 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 tracking-wider" style="font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;">SCHEDULE</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="schedule.html" class="text-white 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 tracking-wider" style="font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;">NEWS & MEDIA</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="news.html" class="text-white 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 tracking-wider" style="font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;">ATHLETIC COUNCIL</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="council.html" class="text-white 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 tracking-wider" style="font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;">GET INVOLVED</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="involved.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">Tryouts</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden md:hidden border-t border-[#333333] bg-[#121212]"> | |
| <div class="p-4 space-y-4"> | |
| <a href="index.html" class="block text-white font-mono uppercase border-b border-[#333333] pb-2">HOME</a> | |
| <a href="about.html" class="block text-white font-mono uppercase border-b border-[#333333] pb-2">ABOUT</a> | |
| <a href="schedule.html" class="block text-white font-mono uppercase border-b border-[#333333] pb-2">SCHEDULE</a> | |
| <a href="news.html" class="block text-white font-mono uppercase border-b border-[#333333] pb-2">NEWS & MEDIA</a> | |
| <a href="council.html" class="block text-white font-mono uppercase border-b border-[#333333] pb-2">ATHLETIC COUNCIL</a> | |
| <a href="involved.html" class="block text-white font-mono uppercase">GET INVOLVED</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="w-full border-b border-[#333333] py-12 px-4 md:px-8 bg-[#121212]"> | |
| <h1 class="text-[#5ec0cc] font-bold uppercase text-center leading-none" style="font-family: 'Montserrat', sans-serif; font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: 0.2em; line-height: 1;"> | |
| NAGAS TEAMS | |
| </h1> | |
| <h2 class="text-white uppercase text-center tracking-wider mt-4" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: clamp(1.2rem, 3vw, 2.5rem); letter-spacing: 0.1em;"> | |
| SELECT A TEAM TO VIEW PLAYERS | |
| </h2> | |
| <div class="flex justify-center mt-8"> | |
| <div style="width: 200px; height: 2px; background-color: #ff9900;"></div> | |
| </div> | |
| </section> | |
| <!-- Season Toggle --> | |
| <section class="w-full border-b border-[#333333] py-8 px-4 md:px-8 bg-[#121212]"> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> | |
| <button class="bg-[#5ec0cc] text-[#121212] px-6 py-3 font-bold uppercase tracking-wider border-none w-full sm:w-auto" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;"> | |
| [2025-26] | |
| </button> | |
| <button onclick="openModal('comingSoonModal')" class="bg-transparent text-[#CCCCCC] border border-[#333333] px-6 py-3 font-bold uppercase tracking-wider hover:border-[#5ec0cc] transition-colors w-full sm:w-auto" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;"> | |
| [2026-27 (COMING SOON)] | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Team Structure Explanation --> | |
| <section class="w-full border-b border-[#333333] py-12 px-4 md:px-8 bg-[#121212]"> | |
| <h2 class="text-[#5ec0cc] font-bold uppercase text-center tracking-wider mb-6" style="font-family: 'Montserrat', sans-serif; font-size: 2rem; letter-spacing: 0.1em;">TEAM STRUCTURE</h2> | |
| <p class="text-white leading-[1.6] text-base text-center max-w-3xl mx-auto mb-4" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| Our teams are organized to provide development opportunities at every level. Each sport is divided by gender, then by level (Juniors: Grades 6-8, Seniors: Grades 9-12), and finally by team where applicable. | |
| </p> | |
| <p class="text-white italic text-sm text-center mb-8" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| Basketball, Volleyball, and Football are the big three sports, followed by Track & Field and Swimming. | |
| </p> | |
| <!-- Visual Hierarchy Diagram --> | |
| <div class="border border-[#333333] p-6 md:p-8 bg-[#121212] max-w-5xl mx-auto overflow-x-auto"> | |
| <div class="min-w-[700px]"> | |
| <!-- First Row: Sports --> | |
| <div class="flex justify-center gap-4 mb-4"> | |
| <div class="border border-[#333333] px-4 py-3 text-center bg-[#121212]"> | |
| <span class="text-[#5ec0cc] font-bold uppercase text-sm" style="font-family: 'Montserrat', sans-serif; font-size: 1.2rem; letter-spacing: 0.1em;">BASKETBALL</span> | |
| </div> | |
| <div class="border border-[#333333] px-4 py-3 text-center bg-[#121212]"> | |
| <span class="text-[#5ec0cc] font-bold uppercase text-sm" style="font-family: 'Montserrat', sans-serif; font-size: 1.2rem; letter-spacing: 0.1em;">VOLLEYBALL</span> | |
| </div> | |
| <div class="border border-[#333333] px-4 py-3 text-center bg-[#121212]"> | |
| <span class="text-[#5ec0cc] font-bold uppercase text-sm" style="font-family: 'Montserrat', sans-serif; font-size: 1.2rem; letter-spacing: 0.1em;">FOOTBALL</span> | |
| </div> | |
| <div class="border border-[#333333] px-4 py-3 text-center bg-[#121212]"> | |
| <span class="text-[#5ec0cc] font-bold uppercase text-sm" style="font-family: 'Montserrat', sans-serif; font-size: 1.2rem; letter-spacing: 0.1em;">TRACK & FIELD</span> | |
| </div> | |
| <div class="border border-[#333333] px-4 py-3 text-center bg-[#121212]"> | |
| <span class="text-[#5ec0cc] font-bold uppercase text-sm" style="font-family: 'Montserrat', sans-serif; font-size: 1.2rem; letter-spacing: 0.1em;">SWIMMING</span> | |
| </div> | |
| </div> | |
| <!-- Connecting Lines --> | |
| <div class="flex justify-center gap-4 mb-2"> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| </div> | |
| <!-- Second Row: Gender --> | |
| <div class="flex justify-center gap-8 mb-4"> | |
| <div class="flex gap-4"> | |
| <div class="border border-[#333333] px-4 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;">MALE</span> | |
| </div> | |
| <div class="border border-[#333333] px-4 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;">FEMALE</span> | |
| </div> | |
| </div> | |
| <div class="border border-[#333333] px-4 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;">COED</span> | |
| </div> | |
| <div class="flex gap-4"> | |
| <div class="border border-[#333333] px-4 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;">MALE</span> | |
| </div> | |
| <div class="border border-[#333333] px-4 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;">FEMALE</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Connecting Lines --> | |
| <div class="flex justify-center gap-4 mb-2"> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| </div> | |
| <!-- Third Row: Level --> | |
| <div class="flex justify-center gap-4 mb-4"> | |
| <div class="flex gap-2"> | |
| <div class="border border-[#333333] px-3 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;">SENIOR</span> | |
| </div> | |
| <div class="border border-[#333333] px-3 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;">JUNIOR</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <div class="border border-[#333333] px-3 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;">SENIOR</span> | |
| </div> | |
| <div class="border border-[#333333] px-3 py-2 bg-[#121212]"> | |
| <span class="text-white uppercase" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;">JUNIOR</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Connecting Lines for A/B Teams --> | |
| <div class="flex justify-center gap-8 mb-2"> | |
| <div class="flex gap-2"> | |
| <div class="diagram-line"></div> | |
| <div class="diagram-line"></div> | |
| </div> | |
| </div> | |
| <!-- Fourth Row: Teams (A/B) --> | |
| <div class="flex justify-center gap-4"> | |
| <div class="flex gap-2"> | |
| <div class="border border-[#333333] px-3 py-2 bg-[#121212]"> | |
| <span class="text-[#CCCCCC] uppercase font-mono" style="font-size: 0.8rem;">A</span> | |
| </div> | |
| <div class="border border-[#333333] px-3 py-2 bg-[#121212]"> | |
| <span class="text-[#CCCCCC] uppercase font-mono" style="font-size: 0.8rem;">B</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sports Grid --> | |
| <section class="w-full border-b border-[#333333] py-12 px-4 md:px-8 bg-[#121212]"> | |
| <h2 class="text-[#5ec0cc] font-bold uppercase text-center tracking-wider mb-12" style="font-family: 'Montserrat', sans-serif; font-size: 2rem; letter-spacing: 0.1em;">OUR SPORTS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Basketball --> | |
| <div class="border border-[#333333] p-6 text-center bg-[#121212] hover-border-teal transition-all duration-200"> | |
| <i data-lucide="circle" class="w-16 h-16 text-[#5ec0cc] mx-auto mb-4"></i> | |
| <h3 class="text-white font-bold uppercase mb-2" style="font-family: 'Montserrat', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em;">BASKETBALL</h3> | |
| <p class="text-white text-sm leading-[1.4] mb-4" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| Competitive and developmental basketball programs for all skill levels. | |
| </p> | |
| <p class="text-[#CCCCCC] font-mono text-xs mb-6"> | |
| Male: Senior A/B, Junior A/B | Female: Senior A/B, Junior A/B | |
| </p> | |
| <a href="basketball.html" class="inline-block border border-[#5ec0cc] text-[#5ec0cc] px-4 py-2 font-bold uppercase tracking-wider hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| View Teams | |
| </a> | |
| </div> | |
| <!-- Volleyball --> | |
| <div class="border border-[#333333] p-6 text-center bg-[#121212] hover-border-teal transition-all duration-200"> | |
| <i data-lucide="triangle" class="w-16 h-16 text-[#5ec0cc] mx-auto mb-4"></i> | |
| <h3 class="text-white font-bold uppercase mb-2" style="font-family: 'Montserrat', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em;">VOLLEYBALL</h3> | |
| <p class="text-white text-sm leading-[1.4] mb-4" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| Dominant volleyball teams with a history of championship performances. | |
| </p> | |
| <p class="text-[#CCCCCC] font-mono text-xs mb-6"> | |
| Male: Senior A/B, Junior A/B | Female: Senior A/B, Junior A/B | |
| </p> | |
| <a href="volleyball.html" class="inline-block border border-[#5ec0cc] text-[#5ec0cc] px-4 py-2 font-bold uppercase tracking-wider hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| View Teams | |
| </a> | |
| </div> | |
| <!-- Football --> | |
| <div class="border border-[#333333] p-6 text-center bg-[#121212] hover-border-teal transition-all duration-200"> | |
| <i data-lucide="hexagon" class="w-16 h-16 text-[#5ec0cc] mx-auto mb-4"></i> | |
| <h3 class="text-white font-bold uppercase mb-2" style="font-family: 'Montserrat', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em;">FOOTBALL</h3> | |
| <p class="text-white text-sm leading-[1.4] mb-4" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| Fast-paced football action on our state-of-the-art pitches. | |
| </p> | |
| <p class="text-[#CCCCCC] font-mono text-xs mb-6"> | |
| Coed: Senior A/B, Junior A/B | |
| </p> | |
| <a href="football.html" class="inline-block border border-[#5ec0cc] text-[#5ec0cc] px-4 py-2 font-bold uppercase tracking-wider hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| View Teams | |
| </a> | |
| </div> | |
| <!-- Track & Field --> | |
| <div class="border border-[#333333] p-6 text-center bg-[#121212] hover-border-teal transition-all duration-200"> | |
| <i data-lucide="person-standing" class="w-16 h-16 text-[#5ec0cc] mx-auto mb-4"></i> | |
| <h3 class="text-white font-bold uppercase mb-2" style="font-family: 'Montserrat', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em;">TRACK & FIELD</h3> | |
| <p class="text-white text-sm leading-[1.4] mb-4" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| Individual and relay events for all track and field disciplines. | |
| </p> | |
| <p class="text-[#CCCCCC] font-mono text-xs mb-6"> | |
| Male: Senior, Junior | Female: Senior, Junior | |
| </p> | |
| <a href="track.html" class="inline-block border border-[#5ec0cc] text-[#5ec0cc] px-4 py-2 font-bold uppercase tracking-wider hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| View Teams | |
| </a> | |
| </div> | |
| <!-- Swimming --> | |
| <div class="border border-[#333333] p-6 text-center bg-[#121212] hover-border-teal transition-all duration-200"> | |
| <i data-lucide="waves" class="w-16 h-16 text-[#5ec0cc] mx-auto mb-4"></i> | |
| <h3 class="text-white font-bold uppercase mb-2" style="font-family: 'Montserrat', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em;">SWIMMING</h3> | |
| <p class="text-white text-sm leading-[1.4] mb-4" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| Competitive swimming in our FINA-approved aquatics centre. | |
| </p> | |
| <p class="text-[#CCCCCC] font-mono text-xs mb-6"> | |
| Male: Senior, Junior | Female: Senior, Junior | |
| </p> | |
| <a href="swimming.html" class="inline-block border border-[#5ec0cc] text-[#5ec0cc] px-4 py-2 font-bold uppercase tracking-wider hover:bg-[#5ec0cc] hover:text-[#121212] transition-colors" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| View Teams | |
| </a> | |
| </div> | |
| <!-- Placeholder --> | |
| <div class="border border-[#333333] p-6 text-center bg-[#121212] flex flex-col justify-center min-h-[300px]"> | |
| <i data-lucide="plus" class="w-16 h-16 text-[#333333] mx-auto mb-4"></i> | |
| <h3 class="text-[#333333] font-bold uppercase mb-2" style="font-family: 'Montserrat', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em;">MORE SPORTS</h3> | |
| <p class="text-[#CCCCCC] text-sm leading-[1.4] mb-6" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| More sports coming soon! | |
| </p> | |
| <button disabled class="inline-block border border-[#333333] text-[#CCCCCC] px-4 py-2 font-bold uppercase tracking-wider cursor-not-allowed" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| Coming Soon | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Player Grid Section with Sidebar --> | |
| <section class="w-full border-b border-[#333333] py-12 px-4 md:px-8 bg-[#121212]"> | |
| <!-- Mobile Filter Button --> | |
| <button id="mobileFilterBtn" class="md:hidden w-full border border-[#333333] text-white px-4 py-3 font-bold uppercase tracking-wider mb-6 flex justify-between items-center" style="font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em;"> | |
| <span>FILTER BY TEAM</span> | |
| <i data-lucide="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| <div class="flex flex-col md:flex-row gap-8 max-w-7xl mx-auto"> | |
| <!-- Sidebar --> | |
| <aside class="hidden md:block w-full md:w-[250px] flex-shrink-0 border border-[#333333] p-4 bg-[#121212] h-fit"> | |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-4" style="font-family: 'Montserrat', sans-serif; font-size: 1.1rem; letter-spacing: 0.1em;">TEAM CATEGORIES</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left text-white font-bold uppercase py-2 border-b border-[#333333] hover:text-[#5ec0cc] hover:border-l-4 hover:border-l-[#5ec0cc] pl-2 transition-all" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;" onclick="filterByCategory('junior')"> | |
| JUNIOR TEAMS | |
| </button> | |
| <button class="w-full text-left text-white font-bold uppercase py-2 hover:text-[#5ec0cc] hover:border-l-4 hover:border-l-[#5ec0cc] pl-2 transition-all" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;" onclick="filterByCategory('senior')"> | |
| SENIOR TEAMS | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Mobile Sidebar Modal --> | |
| <div id="mobileSidebar" class="mobile-sidebar"> | |
| <button onclick="closeMobileSidebar()" class="absolute top-4 right-4 text-white"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| <h3 class="text-[#5ec0cc] font-bold uppercase mb-6 mt-8" style="font-family: 'Montserrat', sans-serif; font-size: 1.1rem; letter-spacing: 0.1em;">TEAM CATEGORIES</h3> | |
| <div class="space-y-4"> | |
| <button class="w-full text-left text-white font-bold uppercase py-3 border-b border-[#333333]" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;" onclick="filterByCategory('junior'); closeMobileSidebar();"> | |
| JUNIOR TEAMS | |
| </button> | |
| <button class="w-full text-left text-white font-bold uppercase py-3 border-b border-[#333333]" style="font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 0.1em;" onclick="filterByCategory('senior'); closeMobileSidebar();"> | |
| SENIOR TEAMS | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1"> | |
| <!-- Filters Bar --> | |
| <div class="border border-[#333333] p-3 mb-6 bg-[#121212] flex flex-wrap gap-2 items-center"> | |
| <button class="filter-btn" onclick="toggleFilter(this, 'starter')">STARTER</button> | |
| <button class="filter-btn" onclick="toggleFilter(this, 'substitute')">SUBSTITUTE</button> | |
| <button class="filter-btn" onclick="toggleFilter(this, 'a')">A</button> | |
| <button class="filter-btn" onclick="toggleFilter(this, 'b')">B</button> | |
| <button class="filter-btn" onclick="toggleFilter(this, 'male')">MALE</button> | |
| <button class="filter-btn" onclick="toggleFilter(this, 'female')">FEMALE</button> | |
| <button class="filter-btn ml-auto" onclick="clearAllFilters()">CLEAR ALL</button> | |
| </div> | |
| <!-- Player Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="player-table min-w-[700px]"> | |
| <thead> | |
| <tr> | |
| <th onclick="sortTable('photo')">PHOTO</th> | |
| <th onclick="sortTable('jersey')">JERSEY # <span class="sort-indicator" id="sort-jersey"></span></th> | |
| <th onclick="sortTable('name')">NAME <span class="sort-indicator" id="sort-name">▲</span></th> | |
| <th onclick="sortTable('position')">POSITION <span class="sort-indicator" id="sort-position"></span></th> | |
| <th onclick="sortTable('team')">TEAM <span class="sort-indicator" id="sort-team"></span></th> | |
| </tr> | |
| </thead> | |
| <tbody id="playerTableBody"> | |
| <tr data-category="senior" data-role="starter" data-team="a" data-gender="male"> | |
| <td><img src="http://static.photos/people/60x60/10" alt="Player" class="w-[60px] h-[60px] object-cover border border-[#333333]"></td> | |
| <td class="font-mono text-white">10</td> | |
| <td class="font-bold uppercase text-white" style="font-family: 'Montserrat', sans-serif;">SOKHA CHAN</td> | |
| <td class="font-mono uppercase text-[#CCCCCC]">POINT GUARD</td> | |
| <td class="font-mono text-[#CCCCCC]">A</td> | |
| </tr> | |
| <tr data-category="senior" data-role="starter" data-team="a" data-gender="male"> | |
| <td><img src="http://static.photos/people/60x60/11" alt="Player" class="w-[60px] h-[60px] object-cover border border-[#333333]"></td> | |
| <td class="font-mono text-white">23</td> | |
| <td class="font-bold uppercase text-white" style="font-family: 'Montserrat', sans-serif;">DAVID SMITH</td> | |
| <td class="font-mono uppercase text-[#CCCCCC]">CENTER</td> | |
| <td class="font-mono text-[#CCCCCC]">A</td> | |
| </tr> | |
| <tr data-category="junior" data-role="starter" data-team="b" data-gender="male"> | |
| <td><img src="http://static.photos/people/60x60/12" alt="Player" class="w-[60px] h-[60px] object-cover border border-[#333333]"></td> | |
| <td class="font-mono text-white">7</td> | |
| <td class="font-bold uppercase text-white" style="font-family: 'Montserrat', sans-serif;">MICHAEL BROWN</td> | |
| <td class="font-mono uppercase text-[#CCCCCC]">SHOOTING GUARD</td> | |
| <td class="font-mono text-[#CCCCCC]">B</td> | |
| </tr> | |
| <tr data-category="senior" data-role="substitute" data-team="a" data-gender="female"> | |
| <td><img src="http://static.photos/people/60x60/13" alt="Player" class="w-[60px] h-[60px] object-cover border border-[#333333]"></td> | |
| <td class="font-mono text-white">15</td> | |
| <td class="font-bold uppercase text-white" style="font-family: 'Montserrat', sans-serif;">SARAH JOHNSON</td> | |
| <td class="font-mono uppercase text-[#CCCCCC]">SMALL FORWARD</td> | |
| <td class="font-mono text-[#CCCCCC]">A</td> | |
| </tr> | |
| <tr data-category="junior" data-role="substitute" data-team="b" data-gender="female"> | |
| <td><img src="http://static.photos/people/60x60/14" alt="Player" class="w-[60px] h-[60px] object-cover border border-[#333333]"></td> | |
| <td class="font-mono text-white">5</td> | |
| <td class="font-bold uppercase text-white" style="font-family: 'Montserrat', sans-serif;">EMMA WILSON</td> | |
| <td class="font-mono uppercase text-[#CCCCCC]">POWER FORWARD</td> | |
| <td class="font-mono text-[#CCCCCC]">B</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="hidden text-center py-12"> | |
| <p class="text-white font-bold uppercase text-xl" style="font-family: 'Montserrat', sans-serif;">NO PLAYERS FOUND</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="w-full py-12 px-4 md:px-8 bg-[#121212]"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-0 max-w-6xl mx-auto"> | |
| <div class="border border-[#333333] p-6 md:border-r-0"> | |
| <h4 class="text-[#5ec0cc] font-bold uppercase mb-4 tracking-wider" style="font-family: 'Montserrat', sans-serif;">CONTACT</h4> | |
| <p class="text-white 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" style="font-family: 'Montserrat', sans-serif;">QUICK LINKS</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">Home</a></li> | |
| <li><a href="about.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">About</a></li> | |
| <li><a href="schedule.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">Schedule</a></li> | |
| <li><a href="news.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">News & Media</a></li> | |
| <li><a href="council.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">Athletic Council</a></li> | |
| <li><a href="involved.html" class="text-white font-mono text-sm uppercase hover:text-[#5ec0cc]">Get Involved</a></li> | |
| </ul> | |
| </div> | |
| <div class="border border-[#333333] p-6"> | |
| <h4 class="text-[#5ec0cc] font-bold uppercase mb-4 tracking-wider" style="font-family: 'Montserrat', sans-serif;">SOCIAL</h4> | |
| <p class="text-white font-mono text-sm">@NAGAS</p> | |
| <div class="flex gap-4 mt-4"> | |
| <a href="#" class="text-white hover:text-[#5ec0cc] transition-colors"><i data-lucide="instagram" class="w-5 h-5"></i></a> | |
| <a href="#" class="text-white hover:text-[#5ec0cc] transition-colors"><i data-lucide="facebook" class="w-5 h-5"></i></a> | |
| <a href="#" class="text-white hover:text-[#5ec0cc] transition-colors"><i data-lucide="twitter" class="w-5 h-5"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8 pt-8 border-t border-[#333333] max-w-6xl mx-auto"> | |
| <p class="font-mono text-xs uppercase" style="color: #666666;">© 2025 NAGAS ATHLETICS. ALL RIGHTS RESERVED.</p> | |
| </div> | |
| </footer> | |
| <!-- Coming Soon Modal --> | |
| <div id="comingSoonModal" class="modal"> | |
| <div class="border border-[#333333] bg-[#121212] p-8 max-w-[500px] mx-4 relative"> | |
| <button onclick="closeModal('comingSoonModal')" class="absolute top-4 right-4 text-white hover:text-[#5ec0cc]"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| <h3 class="text-[#5ec0cc] font-bold uppercase text-2xl mb-6 text-center tracking-wider" style="font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;">COMING SOON</h3> | |
| <p class="text-white text-base text-center" style="font-family: 'Montserrat', sans-serif; font-weight: 400;"> | |
| The 2026-27 season will be available soon. Stay tuned! | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Menu Toggle | |
| 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'); | |
| }); | |
| // Modal Functions | |
| function openModal(modalId) { | |
| document.getElementById(modalId).classList.add('active'); | |
| } | |
| function closeModal(modalId) { | |
| document.getElementById(modalId).classList.remove('active'); | |
| } | |
| // Mobile Sidebar | |
| const mobileFilterBtn = document.getElementById('mobileFilterBtn'); | |
| const mobileSidebar = document.getElementById('mobileSidebar'); | |
| mobileFilterBtn.addEventListener('click', () => { | |
| mobileSidebar.classList.add('active'); | |
| }); | |
| function closeMobileSidebar() { | |
| mobileSidebar.classList.remove('active'); | |
| } | |
| // Table Sorting | |
| let currentSort = { column: 'name', direction: 'asc' }; | |
| function sortTable(column) { | |
| const tbody = document.getElementById('playerTableBody'); | |
| const rows = Array.from(tbody.querySelectorAll('tr')); | |
| // Update sort indicators | |
| document.querySelectorAll('.sort-indicator').forEach(el => el.textContent = ''); | |
| if (currentSort.column === column) { | |
| currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc'; | |
| } else { | |
| currentSort.column = column; | |
| currentSort.direction = 'asc'; | |
| } | |
| document.getElementById(`sort-${column}`).textContent = currentSort.direction === 'asc' ? '▲' : '▼'; | |
| // Sort rows | |
| rows.sort((a, b) => { | |
| let aVal, bVal; | |
| if (column === 'photo') return 0; | |
| if (column === 'jersey') { | |
| aVal = parseInt(a.cells[1].textContent); | |
| bVal = parseInt(b.cells[1].textContent); | |
| } else if (column === 'name') { | |
| aVal = a.cells[2].textContent; | |
| bVal = b.cells[2].textContent; | |
| } else if (column === 'position') { | |
| aVal = a.cells[3].textContent; | |
| bVal = b.cells[3].textContent; | |
| } else if (column === 'team') { | |
| aVal = a.cells[4].textContent; | |
| bVal = b.cells[4].textContent; | |
| } | |
| if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1; | |
| if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1; | |
| return 0; | |
| }); | |
| rows.forEach(row => tbody.appendChild(row)); | |
| } | |
| // Filtering | |
| let activeFilters = { | |
| category: null, | |
| role: [], | |
| team: [], | |
| gender: [] | |
| }; | |
| function filterByCategory(category) { | |
| activeFilters.category = category; | |
| applyFilters(); | |
| } | |
| function toggleFilter(btn, filterType) { | |
| btn.classList.toggle('active'); | |
| if (['starter', 'substitute'].includes(filterType)) { | |
| if (activeFilters.role.includes(filterType)) { | |
| activeFilters.role = activeFilters.role.filter(r => r !== filterType); | |
| } else { | |
| activeFilters.role.push(filterType); | |
| } | |
| } else if (['a', 'b'].includes(filterType)) { | |
| if (activeFilters.team.includes(filterType)) { | |
| activeFilters.team = activeFilters.team.filter(t => t !== filterType); | |
| } else { | |
| activeFilters.team.push(filterType); | |
| } | |
| } else if (['male', 'female'].includes(filterType)) { | |
| if (activeFilters.gender.includes(filterType)) { | |
| activeFilters.gender = activeFilters.gender.filter(g => g !== filterType); | |
| } else { | |
| activeFilters.gender.push(filterType); | |
| } | |
| } | |
| applyFilters(); | |
| } | |
| function clearAllFilters() { | |
| activeFilters = { | |
| category: null, | |
| role: [], | |
| team: [], | |
| gender: [] | |
| }; | |
| document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active')); | |
| applyFilters(); | |
| } | |
| function applyFilters() { | |
| const rows = document.querySelectorAll('#playerTableBody tr'); | |
| let visibleCount = 0; | |
| rows.forEach(row => { | |
| let show = true; | |
| // Category filter | |
| if (activeFilters.category && row.dataset.category !== activeFilters.category) { | |
| show = false; | |
| } | |
| // Role filter | |
| if (activeFilters.role.length > 0 && !activeFilters.role.includes(row.dataset.role)) { | |
| show = false; | |
| } | |
| // Team filter | |
| if (activeFilters.team.length > 0 && !activeFilters.team.includes(row.dataset.team)) { | |
| show = false; | |
| } | |
| // Gender filter | |
| if (activeFilters.gender.length > 0 && !activeFilters.gender.includes(row.dataset.gender)) { | |
| show = false; | |
| } | |
| row.style.display = show ? 'table-row' : 'none'; | |
| if (show) visibleCount++; | |
| }); | |
| // Show/hide empty state | |
| document.getElementById('emptyState').classList.toggle('hidden', visibleCount > 0); | |
| } | |
| // Close modal on outside click | |
| document.querySelectorAll('.modal').forEach(modal => { | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |