Generate a dynamic Schedule & Results page with the following exact structure:

**Design Requirements:**
- Color Scheme: #5ec0cc (teal), #ff9900 (orange), #121212 (dark background)
- Typography: Bold Montserrat headings, Regular Open Sans body text
- Layout: Calendar view with filters and results tables
- Navigation: Consistent header with "Schedule" highlighted

**Page Structure:**

1. **Navigation Bar**
- Same as homepage with breadcrumb: Home > Schedule & Results

2. **Hero Section**
- Background: Action collage from multiple sports
- Overlay: Dark gradient (rgba(0,0,0,0.7))
- Content:
* Headline: "SCHEDULE & RESULTS" (#5ec0cc, 48px)
* Subheadline: "Follow Our Teams" (#ffffff, 20px)

3. **Filter Section**
- Title: "FILTER EVENTS" (#5ec0cc, 24px)
- Filter options:
* Sport: [Dropdown] Basketball, Volleyball, Football, Track & Field, Swimming
* Team Level: [Dropdown] Juniors, Seniors, All
* Team: [Dropdown] Team A, Team B, All
* Date Range: [Calendar picker]
* "Apply Filters" button
* "Clear All" button

4. **Upcoming Events Section**
- Title: "UPCOMING GAMES/MEETS" (#5ec0cc, 32px)
- Content:
* Interactive calendar showing:
- Dates with events highlighted in #5ec0cc
- Week/month view toggle
* List view below calendar showing next 7 events with:
- Date/Time (#ff9900)
- Sport icon
- Teams competing (e.g., "NAGAS vs. ISSPP")
- Location
- "Add to Calendar" button for each event
- "View All" button to expand list

5. **Live Scoreboard** (if applicable)
- Title: "LIVE NOW" (#5ec0cc, 24px)
- Content:
* Current live events with:
- Score updates in real-time
- Time remaining
- "Watch Live" button (if streaming available)

6. **Recent Results Section**
- Title: "RECENT RESULTS" (#5ec0cc, 32px)
- Content:
* Filtered list of past 10 results with:
- Date
- Sport icon
- Teams (e.g., "NAGAS 78 - 65 ISSPP")
- Win/Loss indicator (#5ec0cc for wins, #ff9900 for losses)
- "View Details" button for each result

7. **Sport-Specific Tabs**
- Tabbed interface for each sport:
a) Basketball:
- Upcoming games
- Season record
- Top performers
b) Volleyball:
- Upcoming matches
- Set scores
- Team stats
c) Football:
- Fixtures
- League standings
- Goal scorers
d) Track & Field:
- Meet schedule
- Recent meet results
- Record performances
e) Swimming:
- Meet schedule
- Time improvements
- Qualifiers

8. **Team Records Section**
- Title: "SEASON RECORDS" (#5ec0cc, 32px)
- Content:
* Basketball: Wins/Losses, Points For/Against
* Volleyball: Sets Won/Lost, Win Streak
* Football: Goals For/Against, Clean Sheets
* Track & Field: School Records
* Swimming: Time Improvements

9. **Athlete Spotlight**
- Title: "TOP PERFORMERS" (#5ec0cc, 24px)
- Content:
* 3 athlete cards showing:
- Photo
- Name
- Sport
- Recent achievement (e.g., "Sethean Thay - 25 kills vs. [Team]")
- "View Profile" button

10. **Season Archives**
- Title: "PAST SEASONS" (#5ec0cc, 24px)
- Content:
* Dropdown by year (2024-2025, 2023-2024, etc.)
* Final standings for each sport
* Championship results

11. **Subscription Section**
- Title: "STAY UPDATED" (#5ec0cc, 24px)
- Content:
* "Subscribe to game notifications"
* Email signup form
* Calendar subscription options (iCal, Google Calendar)
* Social media follow buttons

12. **Footer**
- Matches site-wide footer design

**Interactive Elements:**
- Fully functional calendar with event details on click
- Real-time score updates (placeholder for API integration)
- Filter system that updates all sections
- Sortable tables for results and records
- Hover effects on all interactive elements

**Content Requirements:**
- Include all specified sports
- Reference actual teams (ISSPP, ASAC, etc.)
- Use real player names where available (e.g., Sethean Thay for volleyball)
- Highlight upcoming basketball and volleyball games with junior/senior teams
- Show placeholders for live scores until API is implemented
- Include team structure (Juniors A/B, Seniors A/B) in filters

**Technical Specifications:**
- Fully responsive design
- Calendar with event details modal
- Filter system that persists across page reloads
- Accessible design (alt text, proper contrast)
- SEO optimized with sports schedule keywords
- Placeholder for future API integration with live scores

schedule.html

@@ -0,0 +1,1031 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Schedule & Results - NAGAS - Northbridge Athletic Groups and Sports</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#5ec0cc',
+                        secondary: '#ff9900',
+                        dark: '#121212',
+                        darker: '#0a0a0a'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Open Sans', sans-serif;
+            background-color: #121212;
+            color: #ffffff;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-family: 'Montserrat', sans-serif;
+        }
+        .hero-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: -1;
+        }
+        .calendar-day {
+            transition: all 0.3s ease;
+        }
+        .calendar-day:hover {
+            background-color: #1e1e1e;
+            cursor: pointer;
+        }
+        .calendar-day.has-event {
+            background-color: rgba(94, 192, 204, 0.2);
+            border: 1px solid #5ec0cc;
+        }
+        .calendar-day.has-event:hover {
+            background-color: rgba(94, 192, 204, 0.3);
+        }
+        .filter-dropdown {
+            background-color: #1e1e1e;
+            border: 1px solid #5ec0cc;
+        }
+        .filter-dropdown:focus {
+            outline: none;
+            border-color: #ff9900;
+        }
+        .event-card:hover {
+            transform: translateY(-3px);
+            transition: all 0.3s ease;
+        }
+        .tab-active {
+            background-color: #5ec0cc;
+            color: #0a0a0a;
+        }
+        .athlete-card:hover {
+            transform: translateY(-5px);
+            transition: all 0.3s ease;
+        }
+        .record-card {
+            transition: all 0.3s ease;
+        }
+        .record-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(94, 192, 204, 0.2);
+        }
+    </style>
+</head>
+<body class="bg-dark text-white">
+    <!-- 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">
+                <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
+                <span class="text-xl font-bold">NAGAS</span>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="index.html" class="hover:text-primary">Home</a>
+                <a href="about.html" class="hover:text-primary">About</a>
+                <a href="teams.html" class="hover:text-primary">Teams</a>
+                <a href="schedule.html" class="text-primary font-bold">Schedule</a>
+                <a href="council.html" class="hover:text-primary">Council</a>
+                <a href="news.html" class="hover:text-primary">News</a>
+                <a href="get-involved.html" class="hover:text-primary">Get Involved</a>
+            </nav>
+            <button class="md:hidden text-white">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </header>
+
+    <!-- Breadcrumb -->
+    <div class="pt-20 pb-4 bg-darker border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <nav class="text-sm">
+                <a href="index.html" class="text-primary hover:underline">Home</a> > 
+                <span class="text-white">Schedule & Results</span>
+            </nav>
+        </div>
+    </div>
+
+    <!-- Hero Section -->
+    <section class="relative h-96 flex items-center justify-center overflow-hidden">
+        <div class="grid grid-cols-2 md:grid-cols-4 w-full h-full">
+            <div class="relative">
+                <img src="http://static.photos/sport/640x360/1" alt="Basketball Action" class="w-full h-full object-cover">
+            </div>
+            <div class="relative">
+                <img src="http://static.photos/sport/640x360/2" alt="Volleyball Match" class="w-full h-full object-cover">
+            </div>
+            <div class="relative">
+                <img src="http://static.photos/sport/640x360/3" alt="Football Game" class="w-full h-full object-cover">
+            </div>
+            <div class="relative">
+                <img src="http://static.photos/sport/640x360/4" alt="Track & Field" class="w-full h-full object-cover">
+            </div>
+        </div>
+        <div class="absolute inset-0 bg-black bg-opacity-70"></div>
+        <div class="relative z-10 text-center px-4">
+            <h1 class="text-4xl md:text-5xl font-bold text-primary mb-2">SCHEDULE & RESULTS</h1>
+            <p class="text-xl">Follow Our Teams</p>
+        </div>
+    </section>
+
+    <!-- Filter Section -->
+    <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">FILTER EVENTS</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
+                <div>
+                    <label class="block mb-2">Sport</label>
+                    <select id="sportFilter" class="filter-dropdown w-full py-2 px-3 rounded">
+                        <option value="all">All Sports</option>
+                        <option value="basketball">Basketball</option>
+                        <option value="volleyball">Volleyball</option>
+                        <option value="football">Football</option>
+                        <option value="track">Track & Field</option>
+                        <option value="swimming">Swimming</option>
+                    </select>
+                </div>
+                
+                <div>
+                    <label class="block mb-2">Team Level</label>
+                    <select id="levelFilter" class="filter-dropdown w-full py-2 px-3 rounded">
+                        <option value="all">All Levels</option>
+                        <option value="juniors">Juniors</option>
+                        <option value="seniors">Seniors</option>
+                    </select>
+                </div>
+                
+                <div>
+                    <label class="block mb-2">Team</label>
+                    <select id="teamFilter" class="filter-dropdown w-full py-2 px-3 rounded">
+                        <option value="all">All Teams</option>
+                        <option value="a">Team A</option>
+                        <option value="b">Team B</option>
+                    </select>
+                </div>
+                
+                <div>
+                    <label class="block mb-2">Date Range</label>
+                    <input type="date" id="dateFilter" class="filter-dropdown w-full py-2 px-3 rounded">
+                </div>
+                
+                <div class="flex flex-col justify-end">
+                    <div class="flex space-x-2">
+                        <button id="applyFilters" class="bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition flex-1">Apply</button>
+                        <button id="clearFilters" class="bg-[#2e2e2e] text-white font-bold py-2 px-4 rounded hover:bg-[#3e3e3e] transition flex-1">Clear</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Upcoming Events Section -->
+    <section class="py-16 border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-2xl md:text-3xl font-bold text-primary">UPCOMING GAMES/MEETS</h2>
+                <div class="flex space-x-2">
+                    <button id="weekView" class="bg-[#1e1e1e] py-1 px-3 rounded">Week</button>
+                    <button id="monthView" class="bg-primary text-dark py-1 px-3 rounded">Month</button>
+                </div>
+            </div>
+            
+            <!-- Calendar View -->
+            <div class="bg-[#1e1e1e] rounded-lg p-6 mb-8">
+                <div class="grid grid-cols-7 gap-1 mb-2">
+                    <div class="text-center py-2 font-bold">Sun</div>
+                    <div class="text-center py-2 font-bold">Mon</div>
+                    <div class="text-center py-2 font-bold">Tue</div>
+                    <div class="text-center py-2 font-bold">Wed</div>
+                    <div class="text-center py-2 font-bold">Thu</div>
+                    <div class="text-center py-2 font-bold">Fri</div>
+                    <div class="text-center py-2 font-bold">Sat</div>
+                </div>
+                <div id="calendarGrid" class="grid grid-cols-7 gap-1">
+                    <!-- Calendar days will be populated by JavaScript -->
+                </div>
+            </div>
+            
+            <!-- Upcoming Events List -->
+            <div class="mb-8">
+                <h3 class="text-xl font-bold mb-4 text-secondary">NEXT 7 EVENTS</h3>
+                <div class="space-y-4">
+                    <div class="event-card bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <p class="text-secondary">June 15, 2025 - 3:00 PM</p>
+                            <div class="flex items-center mt-1">
+                                <i data-feather="basketball" class="text-primary mr-2"></i>
+                                <p class="font-bold">Basketball - Seniors A vs. ISSPP Dragons</p>
+                            </div>
+                            <p class="text-sm">NAGAS Sports Hall</p>
+                        </div>
+                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
+                    </div>
+                    
+                    <div class="event-card bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <p class="text-secondary">June 18, 2025 - 5:00 PM</p>
+                            <div class="flex items-center mt-1">
+                                <i data-feather="volleyball" class="text-primary mr-2"></i>
+                                <p class="font-bold">Volleyball - Juniors B vs. NIST Thunder</p>
+                            </div>
+                            <p class="text-sm">Away - NIST Gymnasium</p>
+                        </div>
+                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
+                    </div>
+                    
+                    <div class="event-card bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <p class="text-secondary">June 22, 2025 - 2:00 PM</p>
+                            <div class="flex items-center mt-1">
+                                <i data-feather="droplet" class="text-primary mr-2"></i>
+                                <p class="font-bold">Swimming - All-Stars vs. NISB Eagles</p>
+                            </div>
+                            <p class="text-sm">NAGAS Aquatics Centre</p>
+                        </div>
+                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
+                    </div>
+                    
+                    <div class="event-card bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <p class="text-secondary">June 25, 2025 - 4:00 PM</p>
+                            <div class="flex items-center mt-1">
+                                <i data-feather="circle" class="text-primary mr-2"></i>
+                                <p class="font-bold">Football - Seniors B vs. ISSPP Dragons</p>
+                            </div>
+                            <p class="text-sm">NISC Field</p>
+                        </div>
+                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
+                    </div>
+                    
+                    <div class="event-card bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <p class="text-secondary">June 28, 2025 - 9:00 AM</p>
+                            <div class="flex items-center mt-1">
+                                <i data-feather="activity" class="text-primary mr-2"></i>
+                                <p class="font-bold">Track & Field - Mid-Season Meet</p>
+                            </div>
+                            <p class="text-sm">NISC Track & Field Complex</p>
+                        </div>
+                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
+                    </div>
+                </div>
+                <div class="mt-6 text-center">
+                    <button class="bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">View All Events</button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Live Scoreboard -->
+    <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">LIVE NOW</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="bg-[#1e1e1e] rounded-lg p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold">Basketball - Juniors A vs. NIST Thunder</h3>
+                        <span class="bg-secondary text-dark py-1 px-3 rounded text-sm">LIVE</span>
+                    </div>
+                    <div class="flex justify-between items-center mb-6">
+                        <div class="text-center">
+                            <p class="text-2xl font-bold">NAGAS</p>
+                            <p class="text-4xl font-bold text-primary">42</p>
+                        </div>
+                        <div class="text-center">
+                            <p class="text-2xl font-bold">NIST</p>
+                            <p class="text-4xl font-bold">38</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <p>Q2 - 3:45 remaining</p>
+                        <button class="bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Watch Live</button>
+                    </div>
+                </div>
+                
+                <div class="bg-[#1e1e1e] rounded-lg p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold">Swimming - 100m Freestyle Finals</h3>
+                        <span class="bg-secondary text-dark py-1 px-3 rounded text-sm">LIVE</span>
+                    </div>
+                    <div class="space-y-3 mb-6">
+                        <div class="flex justify-between">
+                            <span>1. Sok Visal (NAGAS)</span>
+                            <span class="font-bold">52.3s</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span>2. Chea Sopheak (NIST)</span>
+                            <span>53.1s</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span>3. Lyhour Meng (NAGAS)</span>
+                            <span>53.8s</span>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <p>Race in progress</p>
+                        <button class="bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Watch Live</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Recent Results Section -->
+    <section class="py-16 border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">RECENT RESULTS</h2>
+            
+            <div class="space-y-4">
+                <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="basketball" class="text-primary mr-2"></i>
+                        <p class="font-bold">Basketball - Juniors A</p>
+                    </div>
+                    <p>NAGAS 78 - 65 NISB <span class="text-green-500 font-bold">W</span></p>
+                    <p class="text-sm text-secondary">June 10, 2025</p>
+                </div>
+                
+                <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="volleyball" class="text-primary mr-2"></i>
+                        <p class="font-bold">Volleyball - Seniors B</p>
+                    </div>
+                    <p>NAGAS 3 - 1 NIST <span class="text-green-500 font-bold">W</span></p>
+                    <p class="text-sm text-secondary">June 8, 2025</p>
+                </div>
+                
+                <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="activity" class="text-primary mr-2"></i>
+                        <p class="font-bold">Track & Field</p>
+                    </div>
+                    <p>Regional Meet - 3rd Place Overall <span class="text-green-500 font-bold">W</span></p>
+                    <p class="text-sm text-secondary">June 5, 2025</p>
+                </div>
+                
+                <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="circle" class="text-primary mr-2"></i>
+                        <p class="font-bold">Football - Seniors A</p>
+                    </div>
+                    <p>NAGAS 2 - 1 ISSPP <span class="text-green-500 font-bold">W</span></p>
+                    <p class="text-sm text-secondary">June 3, 2025</p>
+                </div>
+                
+                <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="droplet" class="text-primary mr-2"></i>
+                        <p class="font-bold">Swimming - 4x100m Freestyle Relay</p>
+                    </div>
+                    <p>NAGAS 1st Place - 3:28.4 <span class="text-green-500 font-bold">W</span></p>
+                    <p class="text-sm text-secondary">June 1, 2025</p>
+                </div>
+            </div>
+            
+            <div class="mt-6 text-center">
+                <button class="bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">View All Results</button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Sport-Specific Tabs -->
+    <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">SPORT DETAILS</h2>
+            
+            <!-- Tabs -->
+            <div class="flex flex-wrap mb-8 border-b border-[#2e2e2e]">
+                <button id="basketballTab" class="tab-active py-2 px-6 font-bold rounded-t">Basketball</button>
+                <button id="volleyballTab" class="py-2 px-6 font-bold rounded-t">Volleyball</button>
+                <button id="footballTab" class="py-2 px-6 font-bold rounded-t">Football</button>
+                <button id="trackTab" class="py-2 px-6 font-bold rounded-t">Track & Field</button>
+                <button id="swimmingTab" class="py-2 px-6 font-bold rounded-t">Swimming</button>
+            </div>
+            
+            <!-- Basketball Content -->
+            <div id="basketballContent">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div class="lg:col-span-2">
+                        <h3 class="text-xl font-bold mb-4 text-secondary">UPCOMING GAMES</h3>
+                        <div class="space-y-4">
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">June 15, 2025 - 3:00 PM</p>
+                                <p class="font-bold">Seniors A vs. ISSPP Dragons</p>
+                                <p>NAGAS Sports Hall</p>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">June 22, 2025 - 4:00 PM</p>
+                                <p class="font-bold">Juniors B vs. NISB Eagles</p>
+                                <p>Away - NISB Gymnasium</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold mb-4 text-secondary">SEASON RECORD</h3>
+                        <div class="bg-[#1e1e1e] rounded-lg p-6 mb-6">
+                            <div class="grid grid-cols-2 gap-4 text-center">
+                                <div>
+                                    <p class="text-3xl font-bold text-primary">8</p>
+                                    <p>Wins</p>
+                                </div>
+                                <div>
+                                    <p class="text-3xl font-bold text-secondary">3</p>
+                                    <p>Losses</p>
+                                </div>
+                                <div>
+                                    <p class="text-3xl font-bold text-primary">78.2</p>
+                                    <p>PPG</p>
+                                </div>
+                                <div>
+                                    <p class="text-3xl font-bold text-secondary">72.1</p>
+                                    <p>OPP PPG</p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <h3 class="text-xl font-bold mb-4 text-secondary">TOP PERFORMERS</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-center bg-[#1e1e1e] p-3 rounded-lg">
+                                <img src="http://static.photos/people/100x100/42" alt="Sethean Thay" class="w-12 h-12 rounded-full mr-3">
+                                <div>
+                                    <p class="font-bold">Sethean Thay</p>
+                                    <p class="text-sm">25.4 PPG, 7.2 RPG</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center bg-[#1e1e1e] p-3 rounded-lg">
+                                <img src="http://static.photos/people/100x100/5" alt="Sopharoth Chea" class="w-12 h-12 rounded-full mr-3">
+                                <div>
+                                    <p class="font-bold">Sopharoth Chea</p>
+                                    <p class="text-sm">18.7 PPG, 5.1 APG</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Volleyball Content -->
+            <div id="volleyballContent" class="hidden">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div class="lg:col-span-2">
+                        <h3 class="text-xl font-bold mb-4 text-secondary">UPCOMING MATCHES</h3>
+                        <div class="space-y-4">
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">June 18, 2025 - 5:00 PM</p>
+                                <p class="font-bold">Seniors vs. NIST Thunder</p>
+                                <p>NAGAS Sports Hall</p>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">June 25, 2025 - 3:00 PM</p>
+                                <p class="font-bold">Juniors vs. ISSPP Dragons</p>
+                                <p>Away - ISSPP Gymnasium</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold mb-4 text-secondary">SET SCORES</h3>
+                        <div class="bg-[#1e1e1e] rounded-lg p-6 mb-6">
+                            <div class="space-y-3">
+                                <div class="flex justify-between">
+                                    <span>Last Match: NAGAS 3-1 NIST</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>Set 1:</span>
+                                    <span>25-22</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>Set 2:</span>
+                                    <span>23-25</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>Set 3:</span>
+                                    <span>25-20</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>Set 4:</span>
+                                    <span>25-18</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <h3 class="text-xl font-bold mb-4 text-secondary">TEAM STATS</h3>
+                        <div class="space-y-3">
+                            <div class="bg-[#1e1e1e] p-3 rounded-lg">
+                                <div class="flex justify-between">
+                                    <span>Kills</span>
+                                    <span class="font-bold">1247</span>
+                                </div>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-3 rounded-lg">
+                                <div class="flex justify-between">
+                                    <span>Blocks</span>
+                                    <span class="font-bold">287</span>
+                                </div>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-3 rounded-lg">
+                                <div class="flex justify-between">
+                                    <span>Aces</span>
+                                    <span class="font-bold">156</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Football Content -->
+            <div id="footballContent" class="hidden">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div class="lg:col-span-2">
+                        <h3 class="text-xl font-bold mb-4 text-secondary">FIXTURES</h3>
+                        <div class="space-y-4">
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">June 25, 2025 - 4:00 PM</p>
+                                <p class="font-bold">Seniors B vs. ISSPP Dragons</p>
+                                <p>NISC Field</p>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">July 2, 2025 - 3:00 PM</p>
+                                <p class="font-bold">Juniors A vs. NIST Thunder</p>
+                                <p>Away - NIST Field</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold mb-4 text-secondary">LEAGUE STANDINGS</h3>
+                        <div class="bg-[#1e1e1e] rounded-lg p-6 mb-6">
+                            <div class="space-y-3">
+                                <div class="flex justify-between font-bold border-b border-[#2e2e2e] pb-2">
+                                    <span>Team</span>
+                                    <span>P W D L GF GA PTS</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>NAGAS Seniors A</span>
+                                    <span>12 8 2 2 24 12 26</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>NAGAS Seniors B</span>
+                                    <span>12 6 3 3 20 15 21</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>NAGAS Juniors A</span>
+                                    <span>12 5 4 3 18 14 19</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <h3 class="text-xl font-bold mb-4 text-secondary">GOAL SCORERS</h3>
+                        <div class="space-y-3">
+                            <div class="flex justify-between bg-[#1e1e1e] p-3 rounded-lg">
+                                <span>Sok Visal</span>
+                                <span class="font-bold">12 goals</span>
+                            </div>
+                            <div class="flex justify-between bg-[#1e1e1e] p-3 rounded-lg">
+                                <span>Chea Sopheak</span>
+                                <span class="font-bold">9 goals</span>
+                            </div>
+                            <div class="flex justify-between bg-[#1e1e1e] p-3 rounded-lg">
+                                <span>Lyhour Meng</span>
+                                <span class="font-bold">7 goals</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Track & Field Content -->
+            <div id="trackContent" class="hidden">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div class="lg:col-span-2">
+                        <h3 class="text-xl font-bold mb-4 text-secondary">MEET SCHEDULE</h3>
+                        <div class="space-y-4">
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">June 28, 2025 - 9:00 AM</p>
+                                <p class="font-bold">Mid-Season Meet</p>
+                                <p>NISC Track & Field Complex</p>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">July 12, 2025 - 2:00 PM</p>
+                                <p class="font-bold">Regional Championships</p>
+                                <p>Away - NIST Track</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold mb-4 text-secondary">RECENT MEET RESULTS</h3>
+                        <div class="bg-[#1e1e1e] rounded-lg p-6 mb-6">
+                            <p class="font-bold mb-2">Regional Meet</p>
+                            <p>Team Score: 1st Place (185 Points)</p>
+                            <p class="text-sm text-secondary mt-2">June 5, 2025</p>
+                        </div>
+                        
+                        <h3 class="text-xl font-bold mb-4 text-secondary">RECORD PERFORMANCES</h3>
+                        <div class="space-y-3">
+                            <div class="bg-[#1e1e1e] p-3 rounded-lg">
+                                <p class="font-bold">100m</p>
+                                <p>Sok Visal - 11.2s (2024)</p>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-3 rounded-lg">
+                                <p class="font-bold">Long Jump</p>
+                                <p>Thay Sethean - 6.85m (2024)</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Swimming Content -->
+            <div id="swimmingContent" class="hidden">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div class="lg:col-span-2">
+                        <h3 class="text-xl font-bold mb-4 text-secondary">MEET SCHEDULE</h3>
+                        <div class="space-y-4">
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">July 5, 2025 - 9:00 AM</p>
+                                <p class="font-bold">Mid-Season Meet</p>
+                                <p>NISC Aquatics Centre</p>
+                            </div>
+                            <div class="bg-[#1e1e1e] p-4 rounded-lg">
+                                <p class="text-secondary">July 19, 2025 - 2:00 PM</p>
+                                <p class="font-bold">Regional Championships</p>
+                                <p>Away - NIST Pool</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold mb-4 text-secondary">TIME IMPROVEMENTS</h3>
+                        <div class="bg-[#1e1e1e] rounded-lg p-6 mb-6">
+                            <div class="space-y-3">
+                                <div class="flex justify-between">
+                                    <span>50m Free</span>
+                                    <span class="text-green-500">-0.8s</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>100m Back</span>
+                                    <span class="text-green-500">-1.2s</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>200m IM</span>
+                                    <span class="text-green-500">-2.1s</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <h3 class="text-xl font-bold mb-4 text-secondary">QUALIFIERS</h3>
+                        <div class="space-y-3">
+                            <div class="flex items-center bg-[#1e1e1e] p-3 rounded-lg">
+                                <img src="http://static.photos/people/100x100/84" alt="Thay Sethean" class="w-12 h-12 rounded-full mr-3">
+                                <div>
+                                    <p class="font-bold">Thay Sethean</p>
+                                    <p class="text-sm">400m Free - 4:18.7</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center bg-[#1e1e1e] p-3 rounded-lg">
+                                <img src="http://static.photos/people/100x100/85" alt="Sokhim Chhun" class="w-12 h-12 rounded-full mr-3">
+                                <div>
+                                    <p class="font-bold">Sokhim Chhun</p>
+                                    <p class="text-sm">100m Fly - 58.3</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Team Records Section -->
+    <section class="py-16 border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">SEASON RECORDS</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
+                <div class="record-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <i data-feather="basketball" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
+                    <h3 class="text-xl font-bold mb-2">Basketball</h3>
+                    <p class="text-2xl font-bold text-primary">8-3</p>
+                    <p>Wins-Losses</p>
+                </div>
+                
+                <div class="record-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <i data-feather="volleyball" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
+                    <h3 class="text-xl font-bold mb-2">Volleyball</h3>
+                    <p class="text-2xl font-bold text-primary">22-2</p>
+                    <p>Matches Won</p>
+                </div>
+                
+                <div class="record-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <i data-feather="circle" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
+                    <h3 class="text-xl font-bold mb-2">Football</h3>
+                    <p class="text-2xl font-bold text-primary">24-12</p>
+                    <p>Goals For-Against</p>
+                </div>
+                
+                <div class="record-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <i data-feather="activity" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
+                    <h3 class="text-xl font-bold mb-2">Track & Field</h3>
+                    <p class="text-2xl font-bold text-primary">1st</p>
+                    <p>Regional Standings</p>
+                </div>
+                
+                <div class="record-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <i data-feather="droplet" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
+                    <h3 class="text-xl font-bold mb-2">Swimming</h3>
+                    <p class="text-2xl font-bold text-primary">2nd</p>
+                    <p>ISSAPP Standings</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Athlete Spotlight -->
+    <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">TOP PERFORMERS</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="athlete-card bg-[#1e1e1e] rounded-lg overflow-hidden">
+                    <img src="http://static.photos/people/320x240/42" alt="Sethean Thay" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold">Sethean Thay</h3>
+                        <p class="text-secondary mb-2">Volleyball</p>
+                        <p class="mb-4">25 kills in last match vs. NIST</p>
+                        <button class="w-full bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">View Profile</button>
+                    </div>
+                </div>
+                
+                <div class="athlete-card bg-[#1e1e1e] rounded-lg overflow-hidden">
+                    <img src="http://static.photos/people/320x240/84" alt="Thay Sethean" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold">Thay Sethean</h3>
+                        <p class="text-secondary mb-2">Swimming</p>
+                        <p class="mb-4">400m Free - 4:18.7 (School Record)</p>
+                        <button class="w-full bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">View Profile</button>
+                    </div>
+                </div>
+                
+                <div class="athlete-card bg-[#1e1e1e] rounded-lg overflow-hidden">
+                    <img src="http://static.photos/people/320x240/5" alt="Sopharoth Chea" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold">Sopharoth Chea</h3>
+                        <p class="text-secondary mb-2">Basketball</p>
+                        <p class="mb-4">38 points in championship game</p>
+                        <button class="w-full bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">View Profile</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Season Archives -->
+    <section class="py-16 border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">PAST SEASONS</h2>
+            
+            <div class="bg-[#1e1e1e] rounded-lg p-8 max-w-3xl mx-auto">
+                <div class="mb-6">
+                    <label class="block mb-2">Select Season</label>
+                    <select class="filter-dropdown w-full py-2 px-3 rounded">
+                        <option>2024-2025</option>
+                        <option>2023-2024</option>
+                        <option>2022-2023</option>
+                        <option>2021-2022</option>
+                    </select>
+                </div>
+                
+                <div class="space-y-6">
+                    <div>
+                        <h3 class="text-xl font-bold mb-4 text-secondary">Basketball</h3>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="bg-[#2e2e2e] p-4 rounded-lg">
+                                <p class="font-bold">Seniors A</p>
+                                <p>22-4 Record</p>
+                                <p>ISSAPP Champions</p>
+                            </div>
+                            <div class="bg-[#2e2e2e] p-4 rounded-lg">
+                                <p class="font-bold">Juniors B</p>
+                                <p>15-11 Record</p>
+                                <p>Quarterfinals</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold mb-4 text-secondary">Volleyball</h3>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="bg-[#2e2e2e] p-4 rounded-lg">
+                                <p class="font-bold">Seniors</p>
+                                <p>24-2 Record</p>
+                                <p>ISSAPP Champions</p>
+                            </div>
+                            <div class="bg-[#2e2e2e] p-4 rounded-lg">
+                                <p class="font-bold">Juniors</p>
+                                <p>18-8 Record</p>
+                                <p>Semifinals</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Subscription Section -->
+    <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-8">STAY UPDATED</h2>
+            
+            <div class="bg-[#1e1e1e] rounded-lg p-8 max-w-3xl mx-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div>
+                        <h3 class="text-xl font-bold mb-4">Game Notifications</h3>
+                        <form>
+                            <div class="mb-4">
+                                <input type="email" placeholder="Your email address" class="w-full bg-[#2e2e2e] border border-[#5ec0cc] rounded py-2 px-3 text-white">
+                            </div>
+                            <button type="submit" class="w-full bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Subscribe</button>
+                        </form>
+                    </div>
+                    
+                    <div>
+                        <h3 class="text-xl font-bold mb-4">Calendar Options</h3>
+                        <div class="space-y-3">
+                            <button class="w-full bg-[#2e2e2e] py-2 px-4 rounded flex items-center justify-center hover:bg-[#3e3e3e] transition">
+                                <i data-feather="calendar" class="mr-2"></i>
+                                Add to Google Calendar
+                            </button>
+                            <button class="w-full bg-[#2e2e2e] py-2 px-4 rounded flex items-center justify-center hover:bg-[#3e3e3e] transition">
+                                <i data-feather="download" class="mr-2"></i>
+                                Download iCal
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mt-8 pt-8 border-t border-[#2e2e2e]">
+                    <h3 class="text-xl font-bold mb-4">Follow Us</h3>
+                    <div class="flex justify-center space-x-6">
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="facebook" style="width: 32px; height: 32px;"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="instagram" style="width: 32px; height: 32px;"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="twitter" style="width: 32px; height: 32px;"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-darker py-12 border-t border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Contact Info</h3>
+                    <p>Northbridge International School Cambodia</p>
+                    <p>#98C, Street 169, Phnom Penh</p>
+                    <p>Email: info@nagas.edu.kh</p>
+                    <p>Phone: +855 12 345 678</p>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Follow Us</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="facebook"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="instagram"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="twitter"></i>
+                        </a>
+                    </div>
+                    <p class="mt-2">@NAGAS_NISC</p>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="teams.html" class="hover:text-primary">Teams</a></li>
+                        <li><a href="schedule.html" class="hover:text-primary">Schedule</a></li>
+                        <li><a href="news.html" class="hover:text-primary">News</a></li>
+                        <li><a href="#" class="hover:text-primary">Athlete Portal</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-[#2e2e2e] mt-8 pt-8 text-center">
+                <p>&copy; 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        feather.replace();
+        
+        // Calendar functionality
+        function generateCalendar() {
+            const calendarGrid = document.getElementById('calendarGrid');
+            calendarGrid.innerHTML = '';
+            
+            // Get current month and year
+            const now = new Date();
+            const year = now.getFullYear();
+            const month = now.getMonth();
+            
+            // Get first day of month and number of days
+            const firstDay = new Date(year, month, 1).getDay();
+            const daysInMonth = new Date(year, month + 1, 0).getDate();
+            
+            // Add empty cells for days before first day
+            for (let i = 0; i < firstDay; i++) {
+                const emptyCell = document.createElement('div');
+                emptyCell.className = 'calendar-day h-24 border border-[#2e2e2e]';
+                calendarGrid.appendChild(emptyCell);
+            }
+            
+            // Add cells for each day of the month
+            for (let day = 1; day <= daysInMonth; day++) {
+                const dayCell = document.createElement('div');
+                dayCell.className = 'calendar-day h-24 border border-[#2e2e2e] p-1';
+                dayCell.innerHTML = `<div class="font-bold">${day}</div>`;
+                
+                // Highlight days with events
+                if (day === 15 || day === 18 || day === 22 || day === 25 || day === 28) {
+                    dayCell.classList.add('has-event');
+                    dayCell.innerHTML += `<div class="text-xs mt-1 truncate">Game/Meet</div>`;
+                }
+                
+                calendarGrid.appendChild(dayCell);
+            }
+        }
+        
+        // Initialize calendar
+        generateCalendar();
+        
+        // View toggles
+        document.getElementById('weekView').addEventListener('click', function() {
+            this.classList.add('bg-primary', 'text-dark');
+            document.getElementById('monthView').classList.remove('bg-primary', 'text-dark');
+            // In a real implementation, this would change the calendar view
+        });
+        
+        document.getElementById('monthView').addEventListener('click', function() {
+            this.classList.add('bg-primary', 'text-dark');
+            document.getElementById('weekView').classList.remove('bg-primary', 'text-dark');
+            generateCalendar();
+        });
+        
+        // Filter functionality
+        document.getElementById('applyFilters').addEventListener('click', function() {
+            // In a real implementation, this would filter the events
+            alert('Filters applied! In a real implementation, this would update the events list.');
+        });
+        
+        document.getElementById('clearFilters').addEventListener('click', function() {
+            document.getElementById('sportFilter').value = 'all';
+            document.getElementById('levelFilter').value = 'all';
+            document.getElementById('teamFilter').value = 'all';
+            document.getElementById('dateFilter').value = '';
+            // In a real implementation, this would reset the events list
+            alert('Filters cleared! In a real implementation, this would reset the events list.');
+        });
+        
+        // Tab functionality
+        const tabs = ['basketball', 'volleyball', 'football', 'track', 'swimming'];
+        tabs.forEach(tab => {
+            document.getElementById(`${tab}Tab`).addEventListener('click', function() {
+                // Remove active class from all tabs
+                tabs.forEach(t => {
+                    document.getElementById(`${t}Tab`).classList.remove('tab-active');
+                    document.getElementById(`${t}Content`).classList.add('hidden');
+                });
+                
+                // Add active class to clicked tab
+                this.classList.add('tab-active');
+                document.getElementById(`${tab}Content`).classList.remove('hidden');
+            });
+        });
+    </script>
+</body>
+</html>