| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>News & Media - 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> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#5ec0cc', |
| secondary: '#5ECCA2', |
| 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; |
| } |
| .tab-active { |
| background-color: #5ec0cc; |
| color: #0a0a0a; |
| } |
| .news-card:hover, .media-card:hover { |
| transform: translateY(-5px); |
| transition: all 0.3s ease; |
| } |
| .athlete-spotlight { |
| transition: all 0.5s ease; |
| } |
| .press-release-item { |
| border-bottom: 1px solid #2e2e2e; |
| } |
| .press-release-item:last-child { |
| border-bottom: none; |
| } |
| .accordion-icon { |
| transition: transform 0.3s ease; |
| } |
| .active .accordion-icon { |
| transform: rotate(180deg); |
| } |
| .social-feed { |
| background-color: #1e1e1e; |
| border: 1px solid #2e2e2e; |
| } |
| .event-item:hover { |
| background-color: #1e1e1e; |
| } |
| .filter-dropdown { |
| background-color: #1e1e1e; |
| border: 1px solid #5ec0cc; |
| } |
| .filter-dropdown:focus { |
| outline: none; |
| border-color: #5ECCA2; |
| } |
| </style> |
| </head> |
| <body class="bg-dark text-white"> |
| |
| <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> |
| <a href="index.html" class="text-xl font-extrabold"><span class="text-[#5ec0cc]">NAGAS</span><span class="text-white">ATHLETICS</span></a> |
| </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="hover:text-primary">Schedule</a> |
| <a href="council.html" class="hover:text-primary">Council</a> |
| <a href="news.html" class="text-primary font-bold">News</a> |
| <a href="get-involved.html" class="hover:text-primary">Get Involved</a> |
| </nav> |
| <button id="menu-toggle" class="md:hidden text-white"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div id="mobile-menu" class="fixed inset-0 bg-dark z-50 hidden"> |
| <div class="flex justify-between items-center p-4 border-b border-primary"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-primary rounded-full mr-3"></div> |
| <span class="text-xl font-extrabold"><span class="text-[#5ec0cc]">NAGAS</span><span class="text-white">ATHLETICS</span></span> |
| </div> |
| <button id="menu-close" class="text-white"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <nav class="p-4"> |
| <a href="index.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Home</a> |
| <a href="about.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">About</a> |
| <a href="teams.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Teams</a> |
| <a href="schedule.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Schedule</a> |
| <a href="council.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Council</a> |
| <a href="news.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">News</a> |
| <a href="get-involved.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Get Involved</a> |
| </nav> |
| </div> |
| |
| <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">News & Media</span> |
| </nav> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="w-full lg:w-4/5"> |
| |
| <div class="flex mb-8 border-b border-[#2e2e2e]"> |
| <button id="newsTab" class="tab-active py-3 px-6 font-bold rounded-t">News</button> |
| <button id="mediaTab" class="py-3 px-6 font-bold rounded-t">Media</button> |
| </div> |
|
|
| |
| <div id="newsContent"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div> |
| <div class="bg-[#1e1e1e] rounded-lg overflow-hidden h-full"> |
| <div class="h-64 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">Featured Story Image</span> |
| </div> |
| <div class="p-6"> |
| <h2 class="text-2xl font-bold mb-2">Volleyball Seniors Claim Third Straight ISSAPP Championship</h2> |
| <p class="mb-4">In a thrilling five-set match, our senior volleyball team defeated NIST Thunder 3-2 to secure their third consecutive ISSAPP championship title.</p> |
| <div class="flex items-center text-sm text-secondary mb-4"> |
| <span>June 15, 2025</span> |
| <span class="mx-2">•</span> |
| <span>Volleyball</span> |
| </div> |
| <a href="#" class="inline-block bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Read Full Story</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4">Categories</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-[#1e1e1e] p-4 rounded-lg"> |
| <i data-feather="basketball" class="text-primary mb-2"></i> |
| <h4 class="font-bold mb-2">Basketball</h4> |
| <a href="#" class="text-sm block mb-1 hover:text-primary">Seniors Advance to Finals</a> |
| <a href="#" class="text-sm block hover:text-primary">Juniors Show Promise</a> |
| <a href="#" class="text-sm block mt-2 text-primary">View All</a> |
| </div> |
| <div class="bg-[#1e1e1e] p-4 rounded-lg"> |
| <i data-feather="volleyball" class="text-primary mb-2"></i> |
| <h4 class="font-bold mb-2">Volleyball</h4> |
| <a href="#" class="text-sm block mb-1 hover:text-primary">Championship Recap</a> |
| <a href="#" class="text-sm block hover:text-primary">Player Awards</a> |
| <a href="#" class="text-sm block mt-2 text-primary">View All</a> |
| </div> |
| <div class="bg-[#1e1e1e] p-4 rounded-lg"> |
| <i data-feather="circle" class="text-primary mb-2"></i> |
| <h4 class="font-bold mb-2">Football</h4> |
| <a href="#" class="text-sm block mb-1 hover:text-primary">Season Preview</a> |
| <a href="#" class="text-sm block hover:text-primary">New Signings</a> |
| <a href="#" class="text-sm block mt-2 text-primary">View All</a> |
| </div> |
| <div class="bg-[#1e1e1e] p-4 rounded-lg"> |
| <i data-feather="activity" class="text-primary mb-2"></i> |
| <h4 class="font-bold mb-2">Track & Field</h4> |
| <a href="#" class="text-sm block mb-1 hover:text-primary">Regional Meet Results</a> |
| <a href="#" class="text-sm block hover:text-primary">Record Breakers</a> |
| <a href="#" class="text-sm block mt-2 text-primary">View All</a> |
| </div> |
| <div class="bg-[#1e1e1e] p-4 rounded-lg"> |
| <i data-feather="droplet" class="text-primary mb-2"></i> |
| <h4 class="font-bold mb-2">Swimming</h4> |
| <a href="#" class="text-sm block mb-1 hover:text-primary">Mid-Season Meet</a> |
| <a href="#" class="text-sm block hover:text-primary">Qualifying Times</a> |
| <a href="#" class="text-sm block mt-2 text-primary">View All</a> |
| </div> |
| <div class="bg-[#1e1e1e] p-4 rounded-lg"> |
| <i data-feather="award" class="text-primary mb-2"></i> |
| <h4 class="font-bold mb-2">General</h4> |
| <a href="#" class="text-sm block mb-1 hover:text-primary">Athletic Council</a> |
| <a href="#" class="text-sm block hover:text-primary">Facility Updates</a> |
| <a href="#" class="text-sm block mt-2 text-primary">View All</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-xl font-bold mb-4">Press Releases</h3> |
| <div class="space-y-4"> |
| <div class="press-release-item"> |
| <div class="flex justify-between items-center py-3 cursor-pointer"> |
| <h4 class="font-bold">NAGAS Athletics Announces New Head Coach</h4> |
| <i data-feather="chevron-down" class="accordion-icon text-primary"></i> |
| </div> |
| <div class="hidden pb-3"> |
| <p class="text-sm mb-2">June 10, 2025</p> |
| <p class="mb-2">We are proud to announce the appointment of former national team player as our new head basketball coach...</p> |
| <a href="#" class="text-primary text-sm">Read More</a> |
| </div> |
| </div> |
| <div class="press-release-item"> |
| <div class="flex justify-between items-center py-3 cursor-pointer"> |
| <h4 class="font-bold">Facility Expansion Project Begins</h4> |
| <i data-feather="chevron-down" class="accordion-icon text-primary"></i> |
| </div> |
| <div class="hidden pb-3"> |
| <p class="text-sm mb-2">May 28, 2025</p> |
| <p class="mb-2">Groundbreaking ceremony held for our new multi-sport training facility which will enhance our athletes' development...</p> |
| <a href="#" class="text-primary text-sm">Read More</a> |
| </div> |
| </div> |
| <div class="press-release-item"> |
| <div class="flex justify-between items-center py-3 cursor-pointer"> |
| <h4 class="font-bold">Scholarship Program Winners Announced</h4> |
| <i data-feather="chevron-down" class="accordion-icon text-primary"></i> |
| </div> |
| <div class="hidden pb-3"> |
| <p class="text-sm mb-2">May 15, 2025</p> |
| <p class="mb-2">Congratulations to our 12 student-athletes who have been awarded academic and athletic scholarships for the 2025-2026 season...</p> |
| <a href="#" class="text-primary text-sm">Read More</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8"> |
| |
| <div> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold">Latest News</h3> |
| <div class="flex space-x-2"> |
| <select id="sportFilter" class="filter-dropdown py-1 px-2 rounded text-sm"> |
| <option value="all">All Sports</option> |
| <option value="basketball">Basketball</option> |
| <option value="volleyball">Volleyball</option> |
| <option value="football">Football</option> |
| <option value="cross-country">Cross Country</option> |
| <option value="swimming">Swimming</option> |
| </select> |
| <select id="levelFilter" class="filter-dropdown py-1 px-2 rounded text-sm"> |
| <option value="all">All Levels</option> |
| <option value="juniors">Juniors</option> |
| <option value="seniors">Seniors</option> |
| </select> |
| <select id="dateFilter" class="filter-dropdown py-1 px-2 rounded text-sm"> |
| <option value="30">Last 30 Days</option> |
| <option value="7">Last 7 Days</option> |
| <option value="90">Last 90 Days</option> |
| </select> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="news-card bg-[#1e1e1e] rounded-lg overflow-hidden" data-sport="basketball" data-level="juniors"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">News Image</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Basketball Juniors A Advance to Finals</h4> |
| <p class="text-sm mb-3">Impressive victory over NISB puts our junior team in championship contention...</p> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>June 12, 2025</span> |
| <span class="mx-1">•</span> |
| <span>Basketball</span> |
| </div> |
| </div> |
| </div> |
| <div class="news-card bg-[#1e1e1e] rounded-lg overflow-hidden" data-sport="swimming" data-level="all"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">News Image</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Swimming Team Sets New School Records</h4> |
| <p class="text-sm mb-3">Multiple personal bests achieved at regional meet...</p> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>June 10, 2025</span> |
| <span class="mx-1">•</span> |
| <span>Swimming</span> |
| </div> |
| </div> |
| </div> |
| <div class="news-card bg-[#1e1e1e] rounded-lg overflow-hidden" data-sport="track" data-level="all"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">News Image</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Track & Field Regional Meet Results</h4> |
| <p class="text-sm mb-3">Our athletes secure top positions in multiple events...</p> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>June 8, 2025</span> |
| <span class="mx-1">•</span> |
| <span>Track & Field</span> |
| </div> |
| </div> |
| </div> |
| <div class="news-card bg-[#1e1e1e] rounded-lg overflow-hidden" data-sport="football" data-level="all"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">News Image</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Football Team Begins Pre-Season Training</h4> |
| <p class="text-sm mb-3">New coaching staff implements innovative training methods...</p> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>June 5, 2025</span> |
| <span class="mx-1">•</span> |
| <span>Football</span> |
| </div> |
| </div> |
| </div> |
| <div class="news-card bg-[#1e1e1e] rounded-lg overflow-hidden" data-sport="general" data-level="all"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">News Image</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Athletic Council Election Results</h4> |
| <p class="text-sm mb-3">New student leaders elected for 2025-2026 academic year...</p> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>June 3, 2025</span> |
| <span class="mx-1">•</span> |
| <span>General</span> |
| </div> |
| </div> |
| </div> |
| <div class="news-card bg-[#1e1e1e] rounded-lg overflow-hidden" data-sport="volleyball" data-level="seniors"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">News Image</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Volleyball Seniors Named Team of Month</h4> |
| <p class="text-sm mb-3">Outstanding performance in May earns recognition...</p> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>June 1, 2025</span> |
| <span class="mx-1">•</span> |
| <span>Volleyball</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Athlete Spotlight</h3> |
| <div class="flex space-x-1"> |
| <button id="prevAthlete" class="bg-[#1e1e1e] p-1 rounded"> |
| <i data-feather="chevron-left" class="text-primary"></i> |
| </button> |
| <button id="nextAthlete" class="bg-[#1e1e1e] p-1 rounded"> |
| <i data-feather="chevron-right" class="text-primary"></i> |
| </button> |
| </div> |
| </div> |
| <div id="athleteSpotlight" class="athlete-spotlight bg-[#1e1e1e] rounded-lg p-6"> |
| <div class="text-center mb-4"> |
| <div class="w-24 h-24 rounded-full bg-gray-700 mx-auto mb-4 flex items-center justify-center"> |
| <span class="text-gray-400">Athlete Photo</span> |
| </div> |
| <h4 class="text-xl font-bold">Sethean Thay</h4> |
| <p class="text-secondary">Volleyball</p> |
| <p class="mt-2">2024 ISSAPP Championship MVP</p> |
| </div> |
| <div class="space-y-3"> |
| <div> |
| <p class="font-bold text-sm">What motivates you to excel in volleyball?</p> |
| <p class="text-sm">The team chemistry and desire to represent our school with pride.</p> |
| </div> |
| <div> |
| <p class="font-bold text-sm">How do you balance academics and athletics?</p> |
| <p class="text-sm">Strict time management and support from teachers and coaches.</p> |
| </div> |
| <div> |
| <p class="font-bold text-sm">What are your goals for next season?</p> |
| <p class="text-sm">To lead the team to another championship and improve individually.</p> |
| </div> |
| </div> |
| <a href="#" class="block mt-4 text-center bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Read Full Profile</a> |
| </div> |
| <a href="#" class="block mt-4 text-center bg-[#1e1e1e] py-2 px-4 rounded hover:bg-[#2e2e2e] transition">View All Athletes</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="mediaContent" class="hidden"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div> |
| <div class="bg-[#1e1e1e] rounded-lg overflow-hidden h-full"> |
| <div class="h-64 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">Featured Video Player</span> |
| </div> |
| <div class="p-6"> |
| <h2 class="text-2xl font-bold mb-2">Volleyball Championship Highlights</h2> |
| <p class="mb-4">Relive the thrilling moments from our volleyball team's championship victory with this highlight reel.</p> |
| <div class="flex items-center text-sm text-secondary mb-4"> |
| <span>Duration: 5:32</span> |
| <span class="mx-2">•</span> |
| <span>June 15, 2025</span> |
| </div> |
| <a href="#" class="inline-block bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Watch Now</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-xl font-bold mb-4">Photo Galleries</h3> |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div class="media-card bg-gray-700 h-24 rounded-lg flex items-center justify-center"> |
| <span class="text-gray-400 text-xs">Basketball</span> |
| </div> |
| <div class="media-card bg-gray-700 h-24 rounded-lg flex items-center justify-center"> |
| <span class="text-gray-400 text-xs">Volleyball</span> |
| </div> |
| <div class="media-card bg-gray-700 h-24 rounded-lg flex items-center justify-center"> |
| <span class="text-gray-400 text-xs">Football</span> |
| </div> |
| <div class="media-card bg-gray-700 h-24 rounded-lg flex items-center justify-center"> |
| <span class="text-gray-400 text-xs">Track</span> |
| </div> |
| <div class="media-card bg-gray-700 h-24 rounded-lg flex items-center justify-center"> |
| <span class="text-gray-400 text-xs">Swimming</span> |
| </div> |
| <div class="media-card bg-gray-700 h-24 rounded-lg flex items-center justify-center"> |
| <span class="text-gray-400 text-xs">General</span> |
| </div> |
| </div> |
| <a href="#" class="block text-center bg-[#1e1e1e] py-2 px-4 rounded hover:bg-[#2e2e2e] transition">View All Photos</a> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8"> |
| |
| <div> |
| <h3 class="text-2xl font-bold mb-6">Video Library</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="media-card bg-[#1e1e1e] rounded-lg overflow-hidden"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">Video Thumbnail</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-1">Basketball Skills Clinic</h4> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>Duration: 8:45</span> |
| <span class="mx-1">•</span> |
| <span>June 10, 2025</span> |
| </div> |
| </div> |
| </div> |
| <div class="media-card bg-[#1e1e1e] rounded-lg overflow-hidden"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">Video Thumbnail</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-1">Swimming Technique Tips</h4> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>Duration: 6:22</span> |
| <span class="mx-1">•</span> |
| <span>June 5, 2025</span> |
| </div> |
| </div> |
| </div> |
| <div class="media-card bg-[#1e1e1e] rounded-lg overflow-hidden"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">Video Thumbnail</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-1">Football Training Session</h4> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>Duration: 12:15</span> |
| <span class="mx-1">•</span> |
| <span>May 30, 2025</span> |
| </div> |
| </div> |
| </div> |
| <div class="media-card bg-[#1e1e1e] rounded-lg overflow-hidden"> |
| <div class="h-40 bg-gray-700 flex items-center justify-center"> |
| <span class="text-gray-400">Video Thumbnail</span> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-bold mb-1">Track & Field Meet Highlights</h4> |
| <div class="flex items-center text-xs text-secondary"> |
| <span>Duration: 7:38</span> |
| <span class="mx-1">•</span> |
| <span>May 25, 2025</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-xl font-bold mb-4">Social Media Hub</h3> |
| <div class="space-y-6"> |
| <div class="social-feed rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 bg-pink-500 rounded-full flex items-center justify-center mr-3"> |
| <i data-feather="instagram" class="text-white"></i> |
| </div> |
| <div> |
| <p class="font-bold">@NAGAS_NISC</p> |
| <p class="text-sm text-secondary">Instagram</p> |
| </div> |
| </div> |
| <p class="mb-3">Training hard for the upcoming season! #NAGAS #Training</p> |
| <div class="h-40 bg-gray-700 rounded-lg flex items-center justify-center mb-3"> |
| <span class="text-gray-400">Social Media Post Image</span> |
| </div> |
| <div class="flex justify-between text-sm text-secondary"> |
| <span>June 12, 2025</span> |
| <span>856 Likes</span> |
| </div> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#" class="flex-1 bg-pink-500 text-white py-2 px-4 rounded text-center hover:bg-pink-600 transition"> |
| <i data-feather="instagram" class="inline mr-1"></i> Follow |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-full lg:w-1/5"> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4">Upcoming Events</h3> |
| <div class="space-y-4"> |
| <div class="event-item bg-[#1e1e1e] p-4 rounded-lg"> |
| <div class="flex items-center mb-2"> |
| <i data-feather="basketball" class="text-primary mr-2"></i> |
| <span class="text-sm">June 20, 3:00 PM</span> |
| </div> |
| <p class="font-bold text-sm">Basketball vs ISSPP</p> |
| <p class="text-xs text-secondary mb-2">NAGAS Sports Hall</p> |
| <button class="text-xs bg-primary text-dark py-1 px-2 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button> |
| </div> |
| <div class="event-item bg-[#1e1e1e] p-4 rounded-lg"> |
| <div class="flex items-center mb-2"> |
| <i data-feather="volleyball" class="text-primary mr-2"></i> |
| <span class="text-sm">June 22, 5:00 PM</span> |
| </div> |
| <p class="font-bold text-sm">Volleyball vs NIST</p> |
| <p class="text-xs text-secondary mb-2">Away - NIST Gym</p> |
| <button class="text-xs bg-primary text-dark py-1 px-2 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button> |
| </div> |
| <div class="event-item bg-[#1e1e1e] p-4 rounded-lg"> |
| <div class="flex items-center mb-2"> |
| <i data-feather="droplet" class="text-primary mr-2"></i> |
| <span class="text-sm">June 25, 2:00 PM</span> |
| </div> |
| <p class="font-bold text-sm">Swimming Meet</p> |
| <p class="text-xs text-secondary mb-2">NAGAS Aquatics Centre</p> |
| <button class="text-xs bg-primary text-dark py-1 px-2 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button> |
| </div> |
| <div class="event-item bg-[#1e1e1e] p-4 rounded-lg"> |
| <div class="flex items-center mb-2"> |
| <i data-feather="activity" class="text-primary mr-2"></i> |
| <span class="text-sm">June 28, 9:00 AM</span> |
| </div> |
| <p class="font-bold text-sm">Track & Field Meet</p> |
| <p class="text-xs text-secondary mb-2">NISC Track Complex</p> |
| <button class="text-xs bg-primary text-dark py-1 px-2 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button> |
| </div> |
| <div class="event-item bg-[#1e1e1e] p-4 rounded-lg"> |
| <div class="flex items-center mb-2"> |
| <i data-feather="circle" class="text-primary mr-2"></i> |
| <span class="text-sm">July 2, 4:00 PM</span> |
| </div> |
| <p class="font-bold text-sm">Football vs NISB</p> |
| <p class="text-xs text-secondary mb-2">NISC Field</p> |
| <button class="text-xs bg-primary text-dark py-1 px-2 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-xl font-bold mb-4">Newsletter</h3> |
| <div class="bg-[#1e1e1e] rounded-lg p-4"> |
| <p class="mb-3">Stay updated with our latest news and events</p> |
| <input type="email" placeholder="Your email" class="filter-dropdown w-full py-2 px-3 rounded text-white mb-3"> |
| <div class="mb-3"> |
| <p class="text-sm mb-1">Sports Interests:</p> |
| <div class="grid grid-cols-2 gap-1"> |
| <label class="text-xs flex items-center"> |
| <input type="checkbox" class="mr-1"> Basketball |
| </label> |
| <label class="text-xs flex items-center"> |
| <input type="checkbox" class="mr-1"> Volleyball |
| </label> |
| <label class="text-xs flex items-center"> |
| <input type="checkbox" class="mr-1"> Football |
| </label> |
| <label class="text-xs flex items-center"> |
| <input type="checkbox" class="mr-1"> Cross Country |
| </label> |
| <label class="text-xs flex items-center"> |
| <input type="checkbox" class="mr-1"> Swimming |
| </label> |
| <label class="text-xs flex items-center"> |
| <input type="checkbox" class="mr-1"> General |
| </label> |
| </div> |
| </div> |
| <button class="w-full bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Subscribe</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-darker py-12 border-t border-[#2e2e2e] mt-12"> |
| <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> |
| </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>© 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.getElementById('newsTab').addEventListener('click', function() { |
| this.classList.add('tab-active'); |
| document.getElementById('mediaTab').classList.remove('tab-active'); |
| document.getElementById('newsContent').classList.remove('hidden'); |
| document.getElementById('mediaContent').classList.add('hidden'); |
| }); |
| |
| document.getElementById('mediaTab').addEventListener('click', function() { |
| this.classList.add('tab-active'); |
| document.getElementById('newsTab').classList.remove('tab-active'); |
| document.getElementById('mediaContent').classList.remove('hidden'); |
| document.getElementById('newsContent').classList.add('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('.press-release-item > div:first-child').forEach(item => { |
| item.addEventListener('click', function() { |
| const parent = this.parentElement; |
| parent.classList.toggle('active'); |
| const content = this.nextElementSibling; |
| if (content.classList.contains('hidden')) { |
| content.classList.remove('hidden'); |
| } else { |
| content.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| const athletes = [ |
| { |
| name: "Sethean Thay", |
| sport: "Volleyball", |
| achievement: "2024 ISSAPP Championship MVP", |
| q1: "What motivates you to excel in volleyball?", |
| a1: "The team chemistry and desire to represent our school with pride.", |
| q2: "How do you balance academics and athletics?", |
| a2: "Strict time management and support from teachers and coaches.", |
| q3: "What are your goals for next season?", |
| a3: "To lead the team to another championship and improve individually." |
| }, |
| { |
| name: "Pisey Ching", |
| sport: "Basketball", |
| achievement: "Leading Scorer - Juniors A", |
| q1: "What's your favorite aspect of basketball?", |
| a1: "The fast pace and teamwork required to succeed.", |
| q2: "How do you prepare for big games?", |
| a2: "Extra practice sessions and mental visualization techniques.", |
| q3: "Who inspires you as a player?", |
| a3: "My coaches and older teammates who've shown me what's possible." |
| } |
| ]; |
| |
| let currentAthlete = 0; |
| |
| function updateAthleteSpotlight() { |
| const athlete = athletes[currentAthlete]; |
| document.querySelector('#athleteSpotlight h4').textContent = athlete.name; |
| document.querySelector('#athleteSpotlight p:first-of-type').textContent = athlete.sport; |
| document.querySelector('#athleteSpotlight p:nth-of-type(2)').textContent = athlete.achievement; |
| document.querySelectorAll('#athleteSpotlight div p')[0].textContent = athlete.q1; |
| document.querySelectorAll('#athleteSpotlight div p')[1].textContent = athlete.a1; |
| document.querySelectorAll('#athleteSpotlight div p')[2].textContent = athlete.q2; |
| document.querySelectorAll('#athleteSpotlight div p')[3].textContent = athlete.a2; |
| document.querySelectorAll('#athleteSpotlight div p')[4].textContent = athlete.q3; |
| document.querySelectorAll('#athleteSpotlight div p')[5].textContent = athlete.a3; |
| } |
| |
| document.getElementById('nextAthlete').addEventListener('click', function() { |
| currentAthlete = (currentAthlete + 1) % athletes.length; |
| updateAthleteSpotlight(); |
| }); |
| |
| document.getElementById('prevAthlete').addEventListener('click', function() { |
| currentAthlete = (currentAthlete - 1 + athletes.length) % athletes.length; |
| updateAthleteSpotlight(); |
| }); |
| |
| |
| setInterval(() => { |
| currentAthlete = (currentAthlete + 1) % athletes.length; |
| updateAthleteSpotlight(); |
| }, 10000); |
| </script> |
| |
| <script> |
| |
| document.getElementById('sportFilter').addEventListener('change', filterNews); |
| document.getElementById('levelFilter').addEventListener('change', filterNews); |
| document.getElementById('dateFilter').addEventListener('change', filterNews); |
| |
| function filterNews() { |
| const sportFilter = document.getElementById('sportFilter').value; |
| const levelFilter = document.getElementById('levelFilter').value; |
| |
| const newsCards = document.querySelectorAll('.news-card'); |
| |
| newsCards.forEach(card => { |
| const cardSport = card.getAttribute('data-sport'); |
| const cardLevel = card.getAttribute('data-level'); |
| |
| let showCard = true; |
| |
| |
| if (sportFilter !== 'all' && cardSport !== sportFilter) { |
| showCard = false; |
| } |
| |
| |
| if (levelFilter !== 'all' && cardLevel !== 'all' && cardLevel !== levelFilter) { |
| showCard = false; |
| } |
| |
| |
| if (showCard) { |
| card.style.display = 'block'; |
| } else { |
| card.style.display = 'none'; |
| } |
| }); |
| } |
| </script> |
| </body> |
| </html> |
|
|
