**1. PAGE STRUCTURE & LAYOUT**

- **Container**: 100% width, max-width 1200px, centered
- **Header Section**: Existing site header (unchanged)
- **Filter/Search Section**: 80px tall, #121212 background, 1px #333333 border-bottom
- **Team Sections**: Organized sequentially with animated transitions
- **Player Rows**: Individual animated cards with complete profiles
- **Footer**: Existing site footer (unchanged)

**2. FILTER & SEARCH SYSTEM (Detailed Specifications)**
- **Search Bar**:
* Dimensions: 100% width (max 600px), 48px height
* Background: #1e1e1e with 8px border-radius
* Text: 16px #f8f9fa, Open Sans
* Placeholder: "Search by name, jersey #, or position..."
* Animation: Smooth 0.3s width expansion on focus
* Icon: Magnifying glass (#5ec0cc) with 0.2s color transition on hover
* Live search with 300ms debounce and loading spinner during search

volleyball.html

@@ -26,10 +26,18 @@
             font-family: 'Open Sans', sans-serif;
             background-color: #121212;
             color: #ffffff;
+            margin: 0;
+            padding: 0;
         }
         h1, h2, h3, h4, h5, h6 {
             font-family: 'Montserrat', sans-serif;
         }
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
         .hero-image {
             position: absolute;
             top: 0;
@@ -39,9 +47,12 @@
             object-fit: cover;
             z-index: -1;
         }
+        .player-card {
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
         .player-card:hover {
             transform: translateY(-5px);
-            transition: all 0.3s ease;
         }
         .tab-active {
             background-color: #5ec0cc;
@@ -61,6 +72,13 @@
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(94, 192, 204, 0.2);
         }
+        .filter-dropdown {
+            background-color: #1e1e1e;
+            border: 1px solid #5ec0cc;
+            color: white;
+            padding: 0.5rem;
+            border-radius: 0.25rem;
+        }
         .starter {
             border-left: 4px solid #5ECCA2;
         }
@@ -112,17 +130,20 @@
             cursor: pointer;
             color: #5ec0cc;
         }
-        /* New filter/search styles */
-        .filter-search-container {
+        /* New Filter/Search Styles */
+        .filter-search-section {
             background-color: #121212;
             border-bottom: 1px solid #333333;
             padding: 16px 0;
+            height: 80px;
+            display: flex;
+            align-items: center;
         }
         .search-container {
             position: relative;
-            max-width: 600px;
             width: 100%;
-            margin: 0 auto 16px;
+            max-width: 600px;
+            margin: 0 auto;
         }
         .search-input {
             width: 100%;
@@ -130,10 +151,10 @@
             background-color: #1e1e1e;
             border-radius: 8px;
             border: none;
-            padding: 0 16px 0 48px;
+            padding: 0 20px 0 50px;
             color: #f8f9fa;
-            font-family: 'Open Sans', sans-serif;
             font-size: 16px;
+            font-family: 'Open Sans', sans-serif;
             transition: width 0.3s ease;
         }
         .search-input:focus {
@@ -142,7 +163,7 @@
         }
         .search-icon {
             position: absolute;
-            left: 16px;
+            left: 20px;
             top: 50%;
             transform: translateY(-50%);
             color: #5ec0cc;
@@ -151,39 +172,19 @@
         .search-icon:hover {
             color: #4ab3c6;
         }
-        .filter-group {
-            display: flex;
-            justify-content: center;
-            gap: 16px;
-        }
-        .filter-dropdown {
-            width: 180px;
-            height: 48px;
-            background-color: #1e1e1e;
-            border: 1px solid #333333;
-            border-radius: 4px;
-            color: white;
-            padding: 0 12px;
-            font-family: 'Open Sans', sans-serif;
-            font-size: 16px;
-            transition: border-color 0.2s ease;
-        }
-        .filter-dropdown:focus {
-            outline: none;
-            border-color: #5ec0cc;
-            box-shadow: 0 0 0 2px rgba(94, 192, 204, 0.2);
-        }
         .loading-spinner {
-            display: none;
             position: absolute;
-            right: 16px;
+            right: 20px;
             top: 50%;
             transform: translateY(-50%);
+            display: none;
+        }
+        .spinner {
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #5ec0cc;
+            border-radius: 50%;
             width: 20px;
             height: 20px;
-            border: 2px solid #5ec0cc;
-            border-top: 2px solid transparent;
-            border-radius: 50%;
             animation: spin 1s linear infinite;
         }
         @keyframes spin {
@@ -196,19 +197,22 @@
             transition: opacity 0.5s ease, transform 0.5s ease;
         }
         .team-section.hidden {
+            display: none;
+        }
+        .team-section.fade-out {
             opacity: 0;
-            transform: translateY(20px);
+            transform: translateY(-20px);
         }
-        .player-card {
+        .player-row {
             transition: all 0.3s ease;
         }
-        .player-card.filtered-out {
-            opacity: 0.3;
+        .player-row.hidden {
+            display: none;
         }
 </style>
 </head>
 <body class="bg-dark text-white">
-    <!-- Navigation -->
+<!-- Navigation -->
     <header class="fixed w-full z-50 bg-dark border-b border-primary">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <div class="flex items-center">
@@ -300,49 +304,48 @@
         </div>
     </section>
     <!-- Filter/Search Section -->
-    <section class="filter-search-container">
-        <div class="container mx-auto px-4">
+    <section class="filter-search-section">
+        <div class="container">
             <div class="search-container">
                 <i data-feather="search" class="search-icon"></i>
                 <input type="text" id="playerSearch" class="search-input" placeholder="Search by name, jersey #, or position...">
-                <div class="loading-spinner" id="searchSpinner"></div>
-            </div>
-            <div class="filter-group">
-                <select id="genderFilter" class="filter-dropdown">
-                    <option value="all">All Players</option>
-                    <option value="female">Female</option>
-                    <option value="male">Male</option>
-                </select>
-                <select id="statusFilter" class="filter-dropdown">
-                    <option value="all">All Statuses</option>
-                    <option value="starter">Starters</option>
-                    <option value="substitute">Substitutes</option>
-                </select>
-                <select id="teamFilter" class="filter-dropdown">
-                    <option value="all">All Teams</option>
-                    <option value="senior-female-a">Senior Female A</option>
-                    <option value="senior-male-a">Senior Male A</option>
-                    <option value="senior-female-b">Senior Female B</option>
-                    <option value="senior-male-b">Senior Male B</option>
-                    <option value="junior-female-a">Junior Female A</option>
-                    <option value="junior-male-a">Junior Male A</option>
-                    <option value="junior-female-b">Junior Female B</option>
-                    <option value="junior-male-b">Junior Male B</option>
-                </select>
+                <div class="loading-spinner" id="loadingSpinner">
+                    <div class="spinner"></div>
+                </div>
             </div>
         </div>
     </section>
+
     <!-- Team Structure Section -->
     <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-primary mb-8">OUR TEAMS</h2>
             
-            <!-- Tabs -->
+            <!-- Filter Controls -->
+            <div class="mb-8 flex flex-wrap gap-4">
+                <div>
+                    <label class="block mb-2">Gender</label>
+                    <select id="genderFilter" class="filter-dropdown">
+                        <option value="all">All</option>
+                        <option value="male">Male</option>
+                        <option value="female">Female</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block mb-2">Status</label>
+                    <select id="statusFilter" class="filter-dropdown">
+                        <option value="all">All Players</option>
+                        <option value="starter">Starters</option>
+                        <option value="substitute">Substitutes</option>
+                    </select>
+                </div>
+            </div>
+<!-- Tabs -->
             <div class="flex mb-8 border-b border-[#2e2e2e]">
                 <button id="seniorsTab" class="tab-active py-2 px-6 font-bold rounded-t">Seniors (Grades 9-12)</button>
                 <button id="juniorsTab" class="py-2 px-6 font-bold rounded-t">Juniors (Grades 6-8)</button>
             </div>
-<!-- Seniors Content -->
+            <!-- Seniors Content -->
             <div id="seniorsContent">
                 <div class="columns-1 md:columns-3 gap-8">
                     <!-- Senior Female A Team -->
@@ -1516,21 +1519,18 @@
             document.getElementById('juniorsContent').classList.remove('hidden');
             document.getElementById('seniorsContent').classList.add('hidden');
         });
-        // Search and filter functionality
-        let searchTimeout;
         
+        // Filter functionality
         function applyFilters() {
-            const searchTerm = document.getElementById('playerSearch').value.toLowerCase();
             const genderFilter = document.getElementById('genderFilter').value;
             const statusFilter = document.getElementById('statusFilter').value;
-            const teamFilter = document.getElementById('teamFilter').value;
             
             // Get all player cards
             const playerCards = document.querySelectorAll('.player-card');
             
             playerCards.forEach(card => {
-                const playerName = card.querySelector('h4').textContent.toLowerCase();
-                const playerInfo = card.querySelector('p').textContent.toLowerCase();
+                const playerName = card.querySelector('h4').textContent;
+                const playerInfo = card.querySelector('p').textContent;
                 const isStarter = card.classList.contains('starter');
                 const isSubstitute = card.classList.contains('substitute');
                 
@@ -1538,7 +1538,7 @@
                 const teamColumn = card.closest('.team-column');
                 let teamInfo = '';
                 if (teamColumn) {
-                    teamInfo = teamColumn.querySelector('h3').textContent.toLowerCase().replace(/\s+/g, '-');
+                    teamInfo = teamColumn.querySelector('h3').textContent.toLowerCase();
                 }
                 
                 // Gender check
@@ -1561,49 +1561,57 @@
                     }
                 }
                 
-                // Team check
-                let teamMatch = true;
-                if (teamFilter !== 'all') {
-                    teamMatch = teamInfo.includes(teamFilter);
-                }
-                
-                // Search term check
-                let searchMatch = true;
-                if (searchTerm) {
-                    searchMatch = playerName.includes(searchTerm) || playerInfo.includes(searchTerm);
-                }
-                
                 // Apply filters
-                if (genderMatch && statusMatch && teamMatch && searchMatch) {
-                    card.classList.remove('filtered-out');
+                if (genderMatch && statusMatch) {
+                    card.style.display = 'block';
                 } else {
-                    card.classList.add('filtered-out');
+                    card.style.display = 'none';
                 }
             });
         }
         
-        // Debounced search
-        document.getElementById('playerSearch').addEventListener('input', function() {
-            const spinner = document.getElementById('searchSpinner');
+        // Add event listeners to filters
+        document.getElementById('genderFilter').addEventListener('change', applyFilters);
+        document.getElementById('statusFilter').addEventListener('change', applyFilters);
+        // Search functionality with debounce
+        let searchTimeout;
+        const searchInput = document.getElementById('playerSearch');
+        
+        searchInput.addEventListener('input', function() {
+            clearTimeout(searchTimeout);
+            const spinner = document.getElementById('loadingSpinner');
             spinner.style.display = 'block';
             
-            clearTimeout(searchTimeout);
             searchTimeout = setTimeout(() => {
-                applyFilters();
+                performSearch(this.value);
                 spinner.style.display = 'none';
             }, 300);
         });
         
-        // Add event listeners to filters
-        document.getElementById('genderFilter').addEventListener('change', applyFilters);
-        document.getElementById('statusFilter').addEventListener('change', applyFilters);
-        document.getElementById('teamFilter').addEventListener('change', applyFilters);
+        function performSearch(query) {
+            const playerCards = document.querySelectorAll('.player-card');
+            const searchTerm = query.toLowerCase().trim();
+            
+            playerCards.forEach(card => {
+                const playerName = card.querySelector('h4').textContent.toLowerCase();
+                const playerInfo = card.querySelector('p').textContent.toLowerCase();
+                
+                if (searchTerm === '' || 
+                    playerName.includes(searchTerm) || 
+                    playerInfo.includes(searchTerm)) {
+                    card.parentElement.classList.remove('hidden');
+                    card.style.display = 'block';
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+        }
+        
         // Player modal functionality
         function openPlayerModal(playerId) {
             const modal = document.getElementById('playerModal');
             const content = document.getElementById('playerProfileContent');
-            
-            // Sample player data - in a real implementation, this would come from a database
+// Sample player data - in a real implementation, this would come from a database
             let playerData;
             if (playerId === 'thay-sethean') {
                 playerData = {
@@ -1698,7 +1706,8 @@
                 closePlayerModal();
             }
         });
-// Mobile menu toggle
+        
+        // Mobile menu toggle
         document.getElementById('menu-toggle').addEventListener('click', function() {
             document.getElementById('mobile-menu').classList.remove('hidden');
         });