File size: 27,902 Bytes
944075f 18801f6 944075f 18801f6 944075f 18801f6 944075f 18801f6 944075f dc9b907 16374d8 050b0c7 944075f 20b1739 944075f ff98c1c 2d015a8 ff98c1c d22205a 18801f6 944075f 2d015a8 944075f 0cd2fd3 18801f6 2b03985 18801f6 2b03985 18801f6 2b03985 18801f6 2b03985 18801f6 2b03985 322d0d0 18801f6 8b842d9 944075f 16374d8 18801f6 944075f 18801f6 944075f 4dc07da 944075f 18801f6 944075f 18801f6 b1d86f2 83f3c78 b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da 944075f 18801f6 16374d8 944075f 16374d8 944075f 16374d8 944075f 16374d8 944075f 18801f6 16374d8 944075f 16374d8 944075f 16374d8 944075f 16374d8 944075f 18801f6 16374d8 944075f 16374d8 944075f b1d86f2 18801f6 944075f 16374d8 b1d86f2 4dc07da b1d86f2 944075f 4dc07da b1d86f2 4dc07da b1d86f2 944075f 4dc07da b1d86f2 4dc07da b1d86f2 944075f 4dc07da b1d86f2 4dc07da 08eb78a 4dc07da 08eb78a b1d86f2 944075f 4dc07da b1d86f2 4dc07da b1d86f2 944075f 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 944075f 4dc07da 944075f 18801f6 944075f 18801f6 944075f 18801f6 944075f b1d86f2 944075f b1d86f2 944075f 4dc07da 944075f 16374d8 944075f 16374d8 944075f 9f13606 944075f 16374d8 944075f 18801f6 944075f 18801f6 944075f 4dc07da 944075f 18801f6 944075f 18801f6 944075f b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da b1d86f2 4dc07da 2b03985 4dc07da 2b03985 944075f a4ff710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.news-ticker {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.ticker-content {
display: inline-block;
padding-left: 100%;
animation: ticker 30s linear infinite;
}
.ticker-content:hover {
animation-play-state: paused;
}
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.sport-card:hover {
transform: scale(1.05);
transition: all 0.3s ease;
}
.carousel-item {
transition: opacity 1s ease-in-out;
}
</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>
<a href="index.html" class="text-2xl font-black"><span class="text-[#5ec0cc]">NAGAS</span><span class="text-white">ATHLETICS</span></a>
</div>
<nav class="hidden md:flex space-x-6">
<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="hover:text-primary">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>
<!-- Mobile Menu -->
<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>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<div class="carousel-item absolute inset-0 opacity-100">
<img src="http://static.photos/sport/1200x630/1" alt="Basketball Action" class="hero-video">
</div>
<div class="carousel-item absolute inset-0 opacity-0">
<img src="http://static.photos/sport/1200x630/2" alt="Volleyball Celebration" class="hero-video">
</div>
<div class="carousel-item absolute inset-0 opacity-0">
<img src="http://static.photos/sport/1200x630/3" alt="Swimming Meet" class="hero-video">
</div>
<div class="carousel-item absolute inset-0 opacity-0">
<img src="http://static.photos/sport/1200x630/4" alt="Track & Field" class="hero-video">
</div>
</div>
<div class="absolute inset-0 bg-black bg-opacity-60"></div>
<div class="relative z-10 text-center px-4">
<h1 class="text-5xl md:text-6xl font-bold text-primary mb-4">FIGHTING NAGAS SPIRIT</h1>
<p class="text-xl md:text-2xl mb-8">Strength • Resilience • Unity</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="teams.html" class="bg-primary text-dark font-bold py-3 px-6 rounded hover:bg-[#4ab3c6] transition">View Teams</a>
<a href="schedule.html#upcoming" class="border-2 border-primary text-primary font-bold py-3 px-6 rounded hover:bg-primary hover:text-dark transition">Upcoming Games</a>
</div>
</div>
</section>
<!-- News Ticker -->
<div class="bg-[#1e1e1e] border-t border-primary py-3 overflow-hidden">
<div class="news-ticker">
<div class="ticker-content flex items-center">
<span class="mx-8 flex items-center">
<i data-feather="award" class="text-primary mr-2"></i>
Volleyball Seniors Win ISSAPP Championship
<a href="news.html" class="text-primary ml-2 hover:underline">Read More</a>
</span>
<span class="mx-8 flex items-center">
<i data-feather="target" class="text-primary mr-2"></i>
Basketball Juniors A Advance to Finals
<a href="news.html" class="text-primary ml-2 hover:underline">Read More</a>
</span>
<span class="mx-8 flex items-center">
<i data-feather="clock" class="text-primary mr-2"></i>
Track & Field Records Broken at Regional Meet
<a href="news.html" class="text-primary ml-2 hover:underline">Read More</a>
</span>
</div>
</div>
</div>
<!-- Leadership Messages -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Head of Athletics Message -->
<div class="bg-[#1e1e1e] p-6 rounded-lg">
<h2 class="text-2xl font-bold text-primary mb-4">Message from the Head of Athletics</h2>
<div class="flex items-center mb-4">
<img src="http://static.photos/people/100x100/11" alt="Andrew Dean" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-xl font-bold">Andrew Dean</h3>
<p class="text-secondary">Head of Athletics</p>
</div>
</div>
<p class="mb-3">Welcome to another exciting season of NAGAS Athletics! As we continue to build on our legacy of excellence, I'm proud to see our student-athletes grow not just in skill but in character. Our programs are designed to challenge athletes physically and mentally while fostering the attributes of the IB Learner Profile.</p>
<p class="mb-3">This year, we're focusing on holistic development that builds leadership qualities, resilience, and a strong sense of community. Every practice session is an opportunity to build character, and every competition teaches us something new about ourselves and our community.</p>
<p>Together, we'll continue to embody the Fighting Nagas Spirit - strength through unity!</p>
</div>
<!-- Council President Message -->
<div class="bg-[#1e1e1e] p-6 rounded-lg">
<h2 class="text-2xl font-bold text-primary mb-4">Message from the Council President</h2>
<div class="flex items-center mb-4">
<img src="http://static.photos/people/100x100/13" alt="Leang Chinh Dom" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-xl font-bold">Leang Chinh Dom</h3>
<p class="text-secondary">Athletic Council President</p>
</div>
</div>
<p class="mb-3">As your student council president, I'm excited to represent the voice of our athletes and work with the administration to make this year the best yet. Our council is committed to organizing events that bring our community together and create lasting memories for everyone involved.</p>
<p class="mb-3">We believe that athletics is about more than just winning games - it's about building character, developing leadership skills, and creating a supportive environment where everyone can thrive. This year, we're planning several new initiatives to enhance the experience for all student-athletes.</p>
<p>Let's make this season one to remember!</p>
</div>
</div>
</div>
</section>
<!-- Featured Content -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Upcoming Games -->
<div class="bg-[#1e1e1e] p-6 rounded-lg">
<h2 class="text-2xl font-bold text-primary mb-4">NEXT MATCHES</h2>
<div class="space-y-4">
<div class="border-l-4 border-secondary pl-3">
<p class="text-secondary">June 15, 3:00 PM</p>
<p class="font-bold">NAGAS vs. ISSPP</p>
<p class="text-sm flex items-center">
<i data-feather="basketball" class="mr-1"></i> Basketball
</p>
</div>
<div class="border-l-4 border-secondary pl-3">
<p class="text-secondary">June 18, 5:00 PM</p>
<p class="font-bold">NAGAS vs. NIST</p>
<p class="text-sm flex items-center">
<i data-feather="volleyball" class="mr-1"></i> Volleyball
</p>
</div>
<div class="border-l-4 border-secondary pl-3">
<p class="text-secondary">June 22, 2:00 PM</p>
<p class="font-bold">NAGAS vs. NISB</p>
<p class="text-sm flex items-center">
<i data-feather="activity" class="mr-1"></i> Swimming
</p>
</div>
</div>
<a href="schedule.html#upcoming" class="mt-4 inline-block text-primary hover:underline">View All</a>
</div>
<!-- Latest Results -->
<div class="bg-[#1e1e1e] p-6 rounded-lg">
<h2 class="text-2xl font-bold text-primary mb-4">RECENT RESULTS</h2>
<div class="space-y-4">
<div>
<p class="font-bold">Basketball - Juniors A</p>
<p>NAGAS 78 - 65 NISB <span class="text-green-500">W</span></p>
</div>
<div>
<p class="font-bold">Volleyball - Seniors B</p>
<p>NAGAS 3 - 1 NIST <span class="text-green-500">W</span></p>
</div>
<div>
<p class="font-bold">Track & Field</p>
<p>Regional Meet - 3rd Place Overall <span class="text-green-500">W</span></p>
</div>
</div>
<a href="schedule.html#results" class="mt-4 inline-block text-primary hover:underline">View All Results</a>
</div>
<!-- Athlete Spotlight -->
<div class="bg-[#1e1e1e] p-6 rounded-lg">
<h2 class="text-2xl font-bold text-primary mb-4">ATHLETE OF THE WEEK</h2>
<div class="text-center">
<img src="http://static.photos/people/320x240/42" alt="Sethean Thay" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-bold">Sethean Thay</h3>
<p class="text-secondary">Volleyball</p>
<p class="my-2">25 kills in last match</p>
<a href="volleyball.html" class="inline-block mt-2 text-primary hover:underline">Meet the Team</a>
</div>
</div>
</div>
</div>
</section>
<!-- Sports Carousel -->
<section class="py-16 bg-[#0a0a0a]">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-primary text-center mb-12">OUR SPORTS</h2>
<div class="relative">
<div class="overflow-hidden">
<div class="flex transition-transform duration-500 ease-in-out" id="sportsCarousel">
<!-- Volleyball -->
<div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
<div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
<img src="http://static.photos/people/640x360/42" alt="Volleyball" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center mb-3">
<i data-feather="volleyball" class="text-primary mr-2"></i>
<h3 class="text-xl font-bold">Volleyball</h3>
</div>
<p class="mb-4">Championship-winning seniors and promising junior teams.</p>
<a href="volleyball.html" class="text-primary hover:underline">Explore Teams</a>
</div>
</div>
</div>
<!-- Basketball -->
<div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
<div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
<img src="http://static.photos/people/640x360/133" alt="Basketball" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center mb-3">
<i data-feather="basketball" class="text-primary mr-2"></i>
<h3 class="text-xl font-bold">Basketball</h3>
</div>
<p class="mb-4">Juniors A/B and Seniors A/B teams competing in regional tournaments.</p>
<a href="basketball.html" class="text-primary hover:underline">Explore Teams</a>
</div>
</div>
</div>
<!-- Football -->
<div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-100 scale-100 transform transition-all duration-500">
<div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
<img src="http://static.photos/sport/640x360/5" alt="Football" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center mb-3">
<i data-feather="circle" class="text-primary mr-2"></i>
<h3 class="text-xl font-bold">Football</h3>
</div>
<p class="mb-4">Competitive teams for all skill levels with regular training.</p>
<a href="football.html" class="text-primary hover:underline">Explore Teams</a>
</div>
</div>
</div>
<!-- Track & Field -->
<div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
<div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
<img src="http://static.photos/sport/640x360/6" alt="Track & Field" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center mb-3">
<i data-feather="activity" class="text-primary mr-2"></i>
<h3 class="text-xl font-bold">Cross Country</h3>
</div>
<p class="mb-4">Regional champions with athletes competing at national level.</p>
<a href="cross-country.html" class="text-primary hover:underline">Explore Teams</a>
</div>
</div>
</div>
<!-- Swimming -->
<div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
<div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
<img src="http://static.photos/sport/640x360/7" alt="Swimming" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center mb-3">
<i data-feather="droplet" class="text-primary mr-2"></i>
<h3 class="text-xl font-bold">Swimming</h3>
</div>
<p class="mb-4">State-of-the-art facilities and coaching for all levels.</p>
<a href="swimming.html" class="text-primary hover:underline">Explore Teams</a>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Arrows -->
<button id="prevSlide" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-[#1e1e1e] bg-opacity-50 hover:bg-opacity-75 text-white p-2 rounded-full ml-2 hidden md:block">
<i data-feather="chevron-left"></i>
</button>
<button id="nextSlide" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-[#1e1e1e] bg-opacity-50 hover:bg-opacity-75 text-white p-2 rounded-full mr-2 hidden md:block">
<i data-feather="chevron-right"></i>
</button>
</div>
<!-- Mobile Scroll Indicators -->
<div class="flex justify-center mt-6 space-x-2 md:hidden">
<div class="w-3 h-3 bg-[#5ec0cc] rounded-full"></div>
<div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
<div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
<div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
<div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
</div>
</div>
</section>
<!-- Quick Links -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="teams.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition">
<i data-feather="users" class="text-primary mx-auto mb-3"></i>
<p>Teams</p>
</a>
<a href="schedule.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition">
<i data-feather="calendar" class="text-primary mx-auto mb-3"></i>
<p>Schedule</p>
</a>
<a href="news.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition">
<i data-feather="file-text" class="text-primary mx-auto mb-3"></i>
<p>News & Media</p>
</a>
<a href="get-involved.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition">
<i data-feather="heart" class="text-primary mx-auto mb-3"></i>
<p>Get Involved</p>
</a>
</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>
</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 src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace();
// Carousel functionality
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const itemCount = items.length;
function nextSlide() {
items[currentIndex].classList.remove('opacity-100');
items[currentIndex].classList.add('opacity-0');
currentIndex = (currentIndex + 1) % itemCount;
items[currentIndex].classList.remove('opacity-0');
items[currentIndex].classList.add('opacity-100');
}
setInterval(nextSlide, 5000);
// Sports Carousel
let currentSportIndex = 2; // Start with Football in center
const sportItems = document.querySelectorAll('#sportsCarousel > div');
const totalSports = sportItems.length;
function updateSportsCarousel() {
sportItems.forEach((item, index) => {
if (index === currentSportIndex) {
// Center item
item.classList.remove('opacity-60', 'scale-90');
item.classList.add('opacity-100', 'scale-100');
} else {
// Side items
item.classList.remove('opacity-100', 'scale-100');
item.classList.add('opacity-60', 'scale-90');
}
});
// Update transform to show centered item
const carousel = document.getElementById('sportsCarousel');
const offset = -(currentSportIndex - 1) * (100 / 3);
carousel.style.transform = `translateX(${offset}%)`;
}
function nextSport() {
currentSportIndex = (currentSportIndex + 1) % totalSports;
updateSportsCarousel();
}
function prevSport() {
currentSportIndex = (currentSportIndex - 1 + totalSports) % totalSports;
updateSportsCarousel();
}
// Auto-rotate every 5 seconds
let sportInterval = setInterval(nextSport, 5000);
// Pause auto-rotate on hover
document.querySelector('#sportsCarousel').addEventListener('mouseenter', () => {
clearInterval(sportInterval);
});
document.querySelector('#sportsCarousel').addEventListener('mouseleave', () => {
sportInterval = setInterval(nextSport, 5000);
});
// Navigation buttons
document.getElementById('nextSlide').addEventListener('click', nextSport);
document.getElementById('prevSlide').addEventListener('click', prevSport);
// Initialize carousel
updateSportsCarousel();
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListener('click', function() {
document.getElementById('mobile-menu').classList.remove('hidden');
});
document.getElementById('menu-close').addEventListener('click', function() {
document.getElementById('mobile-menu').classList.add('hidden');
});
</script>
</body>
</html>
|