Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Teams - 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; } | |
| .sport-tab { | |
| transition: all 0.3s ease; | |
| } | |
| .sport-tab:hover { | |
| transform: translateY(-3px); | |
| } | |
| .player-card { | |
| transition: all 0.3s ease; | |
| } | |
| .player-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(98, 193, 205, 0.3); | |
| } | |
| .active-sport { | |
| background-color: #020202; | |
| color: #62c1cd; | |
| border-bottom: 3px solid #62c1cd; | |
| } | |
| .active-filter { | |
| background-color: #62c1cd ; | |
| color: #020202 ; | |
| box-shadow: 0 0 15px rgba(98, 193, 205, 0.5); | |
| } | |
| .team-section { | |
| display: none; | |
| } | |
| .team-section.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </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">OUR TEAMS</h1> | |
| <p class="montserrat text-xl max-w-2xl mx-auto"> | |
| Meet the talented athletes representing NISC NAGAS across all sports and divisions. | |
| </p> | |
| </div> | |
| </header> | |
| <!-- Sport Navigation Tabs --> | |
| <section class="py-8 bg-[#0a0a0a]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="sport-tab bg-[#1a1a1a] px-6 py-3 rounded-lg montserrat font-bold active-sport" data-sport="volleyball"> | |
| Volleyball | |
| </button> | |
| <button class="sport-tab bg-[#1a1a1a] px-6 py-3 rounded-lg montserrat font-bold" data-sport="basketball"> | |
| Basketball | |
| </button> | |
| <button class="sport-tab bg-[#1a1a1a] px-6 py-3 rounded-lg montserrat font-bold" data-sport="football"> | |
| Football | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Sections --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <!-- Volleyball Teams --> | |
| <div id="volleyball" class="team-section active"> | |
| <h2 class="bebas text-4xl text-center text-[#62c1cd] mb-8">VOLLEYBALL TEAMS</h2> | |
| <!-- Team Navigation --> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <button class="team-filter bg-[#62c1cd] text-[#020202] px-6 py-2 rounded-lg montserrat font-bold active-filter" data-filter="juniors"> | |
| Juniors Teams | |
| </button> | |
| <button class="team-filter bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] px-6 py-2 rounded-lg montserrat font-bold" data-filter="seniors"> | |
| Seniors Teams | |
| </button> | |
| <button class="team-filter bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] px-6 py-2 rounded-lg montserrat font-bold" data-filter="all"> | |
| All Teams | |
| </button> | |
| </div> | |
| <!-- Team Tabs --> | |
| <div class="flex flex-wrap justify-center gap-2 mb-8"> | |
| <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm active" data-team="volleyball-juniors-a" data-category="juniors"> | |
| Juniors A | |
| </button> | |
| <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-juniors-b" data-category="juniors"> | |
| Juniors B | |
| </button> | |
| <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-seniors-a" data-category="seniors"> | |
| Seniors A | |
| </button> | |
| <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-seniors-b" data-category="seniors"> | |
| Seniors B | |
| </button> | |
| </div> | |
| <!-- Juniors A Team --> | |
| <div id="volleyball-juniors-a" class="team-content active"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-6">Juniors A Team</h3> | |
| <!-- Starting Lineup --> | |
| <div class="mb-12"> | |
| <h4 class="bebas text-xl mb-4">Starting Lineup</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Player 1 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player1')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Sarah Johnson</h5> | |
| <p class="montserrat text-sm">Setter #5</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 2 | Appearances: 24</p> | |
| <p>Kills: 120 | Aces: 15</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 2 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player2')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Mike Chen</h5> | |
| <p class="montserrat text-sm">Outside Hitter #8</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 3 | Appearances: 36</p> | |
| <p>Kills: 210 | Aces: 22</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 3 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player3')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/3" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Emma Rodriguez</h5> | |
| <p class="montserrat text-sm">Libero #12</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 2 | Appearances: 28</p> | |
| <p>Digs: 180 | Aces: 8</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bench Players --> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Bench Players</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/4" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Alex Kim</h5> | |
| <p class="montserrat text-xs">Middle Blocker #3</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/5" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Jessica Wong</h5> | |
| <p class="montserrat text-xs">Opposite #15</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/6" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">David Patel</h5> | |
| <p class="montserrat text-xs">Setter #7</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/7" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Lisa Thompson</h5> | |
| <p class="montserrat text-xs">Outside Hitter #11</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coaching Staff --> | |
| <div class="mt-12"> | |
| <h4 class="bebas text-xl mb-4">Coaching Staff</h4> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6"> | |
| <img src="http://static.photos/people/200x200/8" alt="Coach" class="w-24 h-24 rounded-full mx-auto mb-4"> | |
| <h5 class="bebas text-lg text-center">Coach Martinez</h5> | |
| <p class="montserrat text-sm text-center text-[#62c1cd] mb-2">Head Coach</p> | |
| <p class="montserrat text-sm text-center">10 years coaching experience. Former professional volleyball player.</p> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6"> | |
| <img src="http://static.photos/people/200x200/9" alt="Coach" class="w-24 h-24 rounded-full mx-auto mb-4"> | |
| <h5 class="bebas text-lg text-center">Coach Johnson</h5> | |
| <p class="montserrat text-sm text-center text-[#62c1cd] mb-2">Assistant Coach</p> | |
| <p class="montserrat text-sm text-center">Specializes in defensive strategies and player development.</p> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-6"> | |
| <img src="http://static.photos/people/200x200/10" alt="Coach" class="w-24 h-24 rounded-full mx-auto mb-4"> | |
| <h5 class="bebas text-lg text-center">Coach Williams</h5> | |
| <p class="montserrat text-sm text-center text-[#62c1cd] mb-2">Strength Coach</p> | |
| <p class="montserrat text-sm text-center">Certified strength and conditioning specialist.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Volleyball Juniors B Team --> | |
| <div id="volleyball-juniors-b" class="team-content"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-6">Juniors B Team</h3> | |
| <!-- Starting Lineup --> | |
| <div class="mb-12"> | |
| <h4 class="bebas text-xl mb-4">Starting Lineup</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Player 1 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player4')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/11" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">James Wilson</h5> | |
| <p class="montserrat text-sm">Setter #6</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 1 | Appearances: 18</p> | |
| <p>Kills: 85 | Aces: 12</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 2 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player5')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/12" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Sophia Lee</h5> | |
| <p class="montserrat text-sm">Outside Hitter #9</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 2 | Appearances: 22</p> | |
| <p>Kills: 110 | Aces: 18</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 3 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player6')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/13" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Daniel Park</h5> | |
| <p class="montserrat text-sm">Libero #14</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 1 | Appearances: 16</p> | |
| <p>Digs: 95 | Aces: 6</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bench Players --> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Bench Players</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/14" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Mia Garcia</h5> | |
| <p class="montserrat text-xs">Middle Blocker #4</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/15" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Ethan Brown</h5> | |
| <p class="montserrat text-xs">Opposite #16</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/16" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Olivia Davis</h5> | |
| <p class="montserrat text-xs">Setter #8</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/17" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Lucas Miller</h5> | |
| <p class="montserrat text-xs">Outside Hitter #13</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Volleyball Seniors A Team --> | |
| <div id="volleyball-seniors-a" class="team-content"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-6">Seniors A Team</h3> | |
| <!-- Starting Lineup --> | |
| <div class="mb-12"> | |
| <h4 class="bebas text-xl mb-4">Starting Lineup</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Player 1 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player7')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/18" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Captain Taylor</h5> | |
| <p class="montserrat text-sm">Setter #10</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 4 | Appearances: 45</p> | |
| <p>Kills: 280 | Aces: 35</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 2 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player8')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/19" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Ryan Cooper</h5> | |
| <p class="montserrat text-sm">Outside Hitter #11</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 3 | Appearances: 38</p> | |
| <p>Kills: 320 | Aces: 28</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 3 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player9')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/20" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Isabella Clark</h5> | |
| <p class="montserrat text-sm">Libero #17</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 4 | Appearances: 42</p> | |
| <p>Digs: 310 | Aces: 15</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bench Players --> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Bench Players</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/21" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Nathan Evans</h5> | |
| <p class="montserrat text-xs">Middle Blocker #5</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/22" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Grace Mitchell</h5> | |
| <p class="montserrat text-xs">Opposite #18</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/23" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Jacob White</h5> | |
| <p class="montserrat text-xs">Setter #12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/24" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Chloe Anderson</h5> | |
| <p class="montserrat text-xs">Outside Hitter #19</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Volleyball Seniors B Team --> | |
| <div id="volleyball-seniors-b" class="team-content"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-6">Seniors B Team</h3> | |
| <!-- Starting Lineup --> | |
| <div class="mb-12"> | |
| <h4 class="bebas text-xl mb-4">Starting Lineup</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Player 1 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player10')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/25" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Andrew Scott</h5> | |
| <p class="montserrat text-sm">Setter #20</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 3 | Appearances: 32</p> | |
| <p>Kills: 190 | Aces: 22</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 2 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player11')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/26" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Emma Walker</h5> | |
| <p class="montserrat text-sm">Outside Hitter #21</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 2 | Appearances: 26</p> | |
| <p>Kills: 150 | Aces: 20</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| <!-- Player 3 --> | |
| <div class="player-card bg-[#1a1a1a] rounded-lg p-6 cursor-pointer" onclick="openPlayerModal('player12')"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/27" alt="Player" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h5 class="bebas text-lg">Samuel Green</h5> | |
| <p class="montserrat text-sm">Libero #22</p> | |
| </div> | |
| </div> | |
| <div class="montserrat text-sm space-y-1"> | |
| <p>Years: 3 | Appearances: 29</p> | |
| <p>Digs: 180 | Aces: 8</p> | |
| </div> | |
| <button class="mt-4 bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-2 px-4 rounded montserrat text-sm w-full"> | |
| View Profile | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bench Players --> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Bench Players</h4> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/28" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Lily Roberts</h5> | |
| <p class="montserrat text-xs">Middle Blocker #23</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/29" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Benjamin Hall</h5> | |
| <p class="montserrat text-xs">Opposite #24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/30" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Zoe Adams</h5> | |
| <p class="montserrat text-xs">Setter #25</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#1a1a1a] rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/31" alt="Player" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h5 class="montserrat text-sm">Matthew King</h5> | |
| <p class="montserrat text-xs">Outside Hitter #26</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Basketball Teams --> | |
| <div id="basketball" class="team-section"> | |
| <h2 class="bebas text-4xl text-center text-[#62c1cd] mb-8">BASKETBALL TEAMS</h2> | |
| <p class="text-center montserrat">Basketball teams information coming soon.</p> | |
| </div> | |
| <!-- Football Teams --> | |
| <div id="football" class="team-section"> | |
| <h2 class="bebas text-4xl text-center text-[#62c1cd] mb-8">FOOTBALL TEAMS</h2> | |
| <p class="text-center montserrat">Football teams information coming soon.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Player Modal --> | |
| <div id="playerModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-[#1a1a1a] rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 class="bebas text-3xl">Sarah Johnson</h3> | |
| <button onclick="closePlayerModal()" class="text-gray-400 hover:text-white"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-6 mb-6"> | |
| <img src="http://static.photos/people/200x200/1" alt="Player" class="w-48 h-48 rounded-lg mx-auto md:mx-0"> | |
| <div class="flex-1"> | |
| <div class="mb-4"> | |
| <h4 class="montserrat text-lg text-[#62c1cd]">Setter #5</h4> | |
| <p class="montserrat">Volleyball | Juniors A Team</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-[#0a0a0a] p-4 rounded-lg"> | |
| <p class="montserrat text-sm text-gray-400">Years on Team</p> | |
| <p class="bebas text-2xl">2</p> | |
| </div> | |
| <div class="bg-[#0a0a0a] p-4 rounded-lg"> | |
| <p class="montserrat text-sm text-gray-400">Appearances</p> | |
| <p class="bebas text-2xl">24</p> | |
| </div> | |
| <div class="bg-[#0a0a0a] p-4 rounded-lg"> | |
| <p class="montserrat text-sm text-gray-400">Kills</p> | |
| <p class="bebas text-2xl">120</p> | |
| </div> | |
| <div class="bg-[#0a0a0a] p-4 rounded-lg"> | |
| <p class="montserrat text-sm text-gray-400">Aces</p> | |
| <p class="bebas text-2xl">15</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="bebas text-xl mb-2">Career Highlights</h4> | |
| <ul class="montserrat text-sm space-y-1"> | |
| <li>• MVP - Junior Varsity Tournament 2022</li> | |
| <li>• All-City Second Team 2023</li> | |
| <li>• Team Captain 2023</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="bebas text-xl mb-2">Biography</h4> | |
| <p class="montserrat"> | |
| Sarah joined the NAGAS volleyball program in 2021 and quickly established herself as a key player. | |
| Known for her exceptional court vision and leadership skills, she has been instrumental in the team's | |
| recent successes. Outside of volleyball, Sarah enjoys photography and aspires to study sports | |
| medicine in college. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="bebas text-xl mb-2">Personal Stats</h4> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-[#0a0a0a] p-3 rounded-lg text-center"> | |
| <p class="montserrat text-xs text-gray-400">Sets</p> | |
| <p class="bebas text-xl">420</p> | |
| </div> | |
| <div class="bg-[#0a0a0a] p-3 rounded-lg text-center"> | |
| <p class="montserrat text-xs text-gray-400">Assists</p> | |
| <p class="bebas text-xl">890</p> | |
| </div> | |
| <div class="bg-[#0a0a0a] p-3 rounded-lg text-center"> | |
| <p class="montserrat text-xs text-gray-400">Service Points</p> | |
| <p class="bebas text-xl">65</p> | |
| </div> | |
| <div class="bg-[#0a0a0a] p-3 rounded-lg text-center"> | |
| <p class="montserrat text-xs text-gray-400">Blocks</p> | |
| <p class="bebas text-xl">32</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 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="teams.html" 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() { | |
| // Menu dropdown functionality | |
| 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'); | |
| } | |
| }); | |
| // Sport tab switching | |
| const sportTabs = document.querySelectorAll('.sport-tab'); | |
| sportTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs | |
| sportTabs.forEach(t => t.classList.remove('active-sport')); | |
| // Add active class to clicked tab | |
| this.classList.add('active-sport'); | |
| // Hide all team sections | |
| document.querySelectorAll('.team-section').forEach(section => { | |
| section.classList.remove('active'); | |
| }); | |
| // Show selected sport section | |
| const sport = this.getAttribute('data-sport'); | |
| document.getElementById(sport).classList.add('active'); | |
| }); | |
| }); | |
| // Team filter functionality | |
| const teamFilters = document.querySelectorAll('.team-filter'); | |
| const teamTabs = document.querySelectorAll('.team-tab'); | |
| teamFilters.forEach(filter => { | |
| filter.addEventListener('click', function() { | |
| // Remove active class from all filters | |
| teamFilters.forEach(f => f.classList.remove('active-filter')); | |
| // Add active class to clicked filter | |
| this.classList.add('active-filter'); | |
| const filterType = this.getAttribute('data-filter'); | |
| // Show/hide team tabs based on filter | |
| teamTabs.forEach(tab => { | |
| const category = tab.getAttribute('data-category'); | |
| if (filterType === 'all' || category === filterType) { | |
| tab.style.display = 'inline-block'; | |
| } else { | |
| tab.style.display = 'none'; | |
| } | |
| }); | |
| // If current active tab is hidden, switch to first visible tab | |
| const activeTab = document.querySelector('.team-tab.active'); | |
| if (activeTab && activeTab.style.display === 'none') { | |
| const firstVisibleTab = document.querySelector('.team-tab[style="display: inline-block;"]') || | |
| document.querySelector('.team-tab:not([style*="none"])'); | |
| if (firstVisibleTab) { | |
| firstVisibleTab.click(); | |
| } | |
| } | |
| }); | |
| }); | |
| // Team tab switching | |
| const teamTabs = document.querySelectorAll('.team-tab'); | |
| teamTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs in this group | |
| this.parentElement.querySelectorAll('.team-tab').forEach(t => { | |
| t.classList.remove('active'); | |
| }); | |
| // Add active class to clicked tab | |
| this.classList.add('active'); | |
| // Hide all team content in this sport section | |
| const sportSection = this.closest('.team-section'); | |
| sportSection.querySelectorAll('.team-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| // Show selected team content | |
| const team = this.getAttribute('data-team'); | |
| document.getElementById(team).classList.add('active'); | |
| }); | |
| }); | |
| }); | |
| // Player modal functions | |
| function openPlayerModal(playerId) { | |
| document.getElementById('playerModal').classList.remove('hidden'); | |
| } | |
| function closePlayerModal() { | |
| document.getElementById('playerModal').classList.add('hidden'); | |
| } | |
| // Close modal when clicking outside | |
| window.addEventListener('click', function(event) { | |
| const modal = document.getElementById('playerModal'); | |
| if (event.target === modal) { | |
| closePlayerModal(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |