Page Title: Junior A Girls – Volleyball

Design Style:
- Theme: Dark mode (#121212)
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF)/Light Grey (#CCCCCC)
- Font: Montserrat
- Animations: Smooth transitions and carousel effects

Header:
- Existing NAGAS header

Layout:
1. Back Button (→ /volleyball)
2. Search Bar (filters players by name)
3. Player Grid:
- 3-column responsive grid (2-col tablet, 1-col mobile)
- Cards with hover animations (scale + glow)
- Staggered fade-in on load

4. Player Profile Modal:
- Slide-up animation
- Carousel gallery with:
* Main image display
* Thumbnail navigation
* Smooth transition between images
* Swipe support for mobile

CSS Additions:
/* Carousel Container */
.carousel-container {
position: relative;
max-width: 100%;
margin: 20px auto;
overflow: hidden;
border-radius: 6px;
}

/* Main Image */
.carousel-main {
width: 100%;
height: 300px;
background: #1E1E1E;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.carousel-main img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease;
}

/* Thumbnails */
.carousel-thumbs {
display: flex;
gap: 8px;
margin-top: 10px;
justify-content: center;
}
.carousel-thumbs img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
opacity: 0.7;
transition: all 0.3s;
}
.carousel-thumbs img.active {
opacity: 1;
border: 2px solid #008080;
}

/* Navigation Arrows */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
z-index: 10;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-arrow:hover {
background: #008080;
}
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }

/* Animation for image transition */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/* JavaScript for Carousel */
<script>
document.querySelectorAll('.player-card').forEach(card => {
card.addEventListener('click', () => {
const modal = document.getElementById('profile-modal');
const mainImg = modal.querySelector('.carousel-main img');
const thumbs = modal.querySelectorAll('.carousel-thumbs img');
let currentIndex = 0;

// Set up carousel
thumbs.forEach((thumb, index) => {
thumb.addEventListener('click', () => {
currentIndex = index;
updateCarousel();
});
});

// Navigation arrows
modal.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
updateCarousel();
});

modal.querySelector('.carousel-arrow.next').addEventListener('click', () => {
currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
updateCarousel();
});

// Swipe support for mobile
let touchStartX = 0;
mainImg.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
});

mainImg.addEventListener('touchend', (e) => {
const touchEndX = e.changedTouches[0].screenX;
if (touchStartX - touchEndX > 50) { // Swipe left
currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
} else if (touchEndX - touchStartX > 50) { // Swipe right
currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
}
updateCarousel();
});

function updateCarousel() {
// Fade out current image
mainImg.style.opacity = 0;

setTimeout(() => {
// Update main image
mainImg.src = thumbs[currentIndex].src;
mainImg.style.opacity = 1;

// Update active thumbnail
thumbs.forEach((thumb, index) => {
thumb.classList.toggle('active', index === currentIndex);
});
}, 300);
}

// Initialize
updateCarousel();
});
});
</script>

HTML Structure for Carousel:
<div class="carousel-container">
<div class="carousel-main">
<img src="player-main.jpg" alt="Main photo">
<button class="carousel-arrow prev">‹</button>
<button class="carousel-arrow next">›</button>
</div>
<div class="carousel-thumbs">
<img src="player-1.jpg" class="active" alt="Thumbnail 1">
<img src="player-2.jpg" alt="Thumbnail 2">
<img src="player-3.jpg" alt="Thumbnail 3">
</div>
</div>

volleyball-junior-a-girls.html

@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Junior A Girls – Volleyball - NAGAS</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&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: '#008080',
+                        dark: '#121212',
+                        darker: '#0a0a0a'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .player-card {
+            transition: all 0.3s ease;
+            background-color: #1e1e1e;
+        }
+        .player-card:hover {
+            transform: scale(1.03);
+            box-shadow: 0 0 15px rgba(0, 128, 128, 0.5);
+        }
+        .search-bar {
+            background-color: #1e1e1e;
+            border: 1px solid #008080;
+        }
+        .search-bar:focus {
+            outline: none;
+            border-color: #00cccc;
+        }
+        .back-button {
+            transition: all 0.3s ease;
+        }
+        .back-button:hover {
+            color: #008080;
+        }
+        
+        /* Carousel Container */
+        .carousel-container {
+          position: relative;
+          max-width: 100%;
+          margin: 20px auto;
+          overflow: hidden;
+          border-radius: 6px;
+        }
+
+        /* Main Image */
+        .carousel-main {
+          width: 100%;
+          height: 300px;
+          background: #1E1E1E;
+          border-radius: 6px;
+          overflow: hidden;
+          position: relative;
+        }
+        .carousel-main img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: opacity 0.5s ease;
+        }
+
+        /* Thumbnails */
+        .carousel-thumbs {
+          display: flex;
+          gap: 8px;
+          margin-top: 10px;
+          justify-content: center;
+        }
+        .carousel-thumbs img {
+          width: 60px;
+          height: 60px;
+          object-fit: cover;
+          border-radius: 4px;
+          cursor: pointer;
+          opacity: 0.7;
+          transition: all 0.3s;
+        }
+        .carousel-thumbs img.active {
+          opacity: 1;
+          border: 2px solid #008080;
+        }
+
+        /* Navigation Arrows */
+        .carousel-arrow {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          background: rgba(0,0,0,0.5);
+          color: white;
+          border: none;
+          padding: 10px;
+          cursor: pointer;
+          font-size: 18px;
+          z-index: 10;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .carousel-arrow:hover {
+          background: #008080;
+        }
+        .carousel-arrow.prev { left: 10px; }
+        .carousel-arrow.next { right: 10px; }
+
+        /* Animation for image transition */
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background: #1e1e1e;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 600px;
+            padding: 20px;
+            position: relative;
+            animation: slideUp 0.4s ease;
+        }
+        @keyframes slideUp {
+            from { transform: translateY(50px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        .close-modal {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            font-size: 24px;
+            cursor: pointer;
+            color: #ccc;
+        }
+        .close-modal:hover {
+            color: #008080;
+        }
+    </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-xl font-extrabold"><span class="text-[#008080]">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="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-[#008080]">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>
+
+    <!-- Main Content -->
+    <div class="pt-20 pb-16">
+        <div class="container mx-auto px-4">
+            <!-- Back Button -->
+            <a href="teams.html" class="back-button inline-flex items-center text-primary mb-6">
+                <i data-feather="arrow-left" class="mr-2"></i> Back to Teams
+            </a>
+
+            <!-- Page Title -->
+            <h1 class="text-3xl md:text-4xl font-bold mb-6">Junior A Girls – Volleyball</h1>
+
+            <!-- Search Bar -->
+            <div class="mb-8">
+                <input 
+                    type="text" 
+                    id="playerSearch" 
+                    placeholder="Search players by name..." 
+                    class="search-bar w-full p-3 rounded-lg text-white"
+                >
+            </div>
+
+            <!-- Player Grid -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="playerGrid">
+                <!-- Player Card 1 -->
+                <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Sopharoth Chea">
+                    <img src="http://static.photos/people/320x240/5" alt="Sopharoth Chea" class="w-full h-64 object-cover">
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold">Sopharoth Chea</h3>
+                        <p class="text-primary">Setter</p>
+                    </div>
+                </div>
+
+                <!-- Player Card 2 -->
+                <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Visal Sreytouch">
+                    <img src="http://static.photos/people/320x240/7" alt="Visal Sreytouch" class="w-full h-64 object-cover">
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold">Visal Sreytouch</h3>
+                        <p class="text-primary">Outside Hitter</p>
+                    </div>
+                </div>
+
+                <!-- Player Card 3 -->
+                <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Kosal Khemarak">
+                    <img src="http://static.photos/people/320x240/8" alt="Kosal Khemarak" class="w-full h-64 object-cover">
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold">Kosal Khemarak</h3>
+                        <p class="text-primary">Libero</p>
+                    </div>
+                </div>
+
+                <!-- Player Card 4 -->
+                <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Sethean Thay">
+                    <img src="http://static.photos/people/320x240/6" alt="Sethean Thay" class="w-full h-64 object-cover">
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold">Sethean Thay</h3>
+                        <p class="text-primary">Middle Blocker</p>
+                    </div>
+                </div>
+
+                <!-- Player Card 5 -->
+                <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Mey Mok">
+                    <img src="http://static.photos/people/320x240/25" alt="Mey Mok" class="w-full h-64 object-cover">
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold">Mey Mok</h3>
+                        <p class="text-primary">Outside Hitter</p>
+                    </div>
+                </div>
+
+                <!-- Player Card 6 -->
+                <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Srey Pich">
+                    <img src="http://static.photos/people/320x240/26" alt="Srey Pich" class="w-full h-64 object-cover">
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold">Srey Pich</h3>
+                        <p class="text-primary">Opposite Hitter</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Player Profile Modal -->
+    <div id="profile-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal">&times;</span>
+            <h2 class="text-2xl font-bold mb-4" id="modal-player-name">Player Name</h2>
+            <p class="text-primary mb-4" id="modal-player-position">Position</p>
+            
+            <!-- Carousel -->
+            <div class="carousel-container">
+                <div class="carousel-main">
+                    <img src="" alt="Main photo" id="carousel-main-image">
+                    <button class="carousel-arrow prev">‹</button>
+                    <button class="carousel-arrow next">›</button>
+                </div>
+                <div class="carousel-thumbs" id="carousel-thumbnails">
+                    <!-- Thumbnails will be added here by JavaScript -->
+                </div>
+            </div>
+            
+            <div class="mt-6">
+                <h3 class="text-xl font-bold mb-2">Player Stats</h3>
+                <ul class="grid grid-cols-2 gap-2">
+                    <li class="flex justify-between border-b border-[#2e2e2e] pb-2">
+                        <span>Matches Played:</span>
+                        <span id="matches-played">12</span>
+                    </li>
+                    <li class="flex justify-between border-b border-[#2e2e2e] pb-2">
+                        <span>Points:</span>
+                        <span id="points">85</span>
+                    </li>
+                    <li class="flex justify-between border-b border-[#2e2e2e] pb-2">
+                        <span>Kills:</span>
+                        <span id="kills">42</span>
+                    </li>
+                    <li class="flex justify-between border-b border-[#2e2e2e] pb-2">
+                        <span>Blocks:</span>
+                        <span id="blocks">18</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- 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();
+        
+        // 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');
+        });
+        
+        // Player search functionality
+        document.getElementById('playerSearch').addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            const playerCards = document.querySelectorAll('.player-card');
+            
+            playerCards.forEach(card => {
+                const playerName = card.dataset.playerName.toLowerCase();
+                if (playerName.includes(searchTerm)) {
+                    card.style.display = 'block';
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+        });
+        
+        // Player card click to open modal
+        document.querySelectorAll('.player-card').forEach(card => {
+            card.addEventListener('click', function() {
+                const playerName = this.querySelector('h3').textContent;
+                const playerPosition = this.querySelector('p').textContent;
+                const playerImage = this.querySelector('img').src;
+                
+                // Set modal content
+                document.getElementById('modal-player-name').textContent = playerName;
+                document.getElementById('modal-player-position').textContent = playerPosition;
+                document.getElementById('carousel-main-image').src = playerImage;
+                
+                // Generate thumbnails (using same image for demo)
+                const thumbnailsContainer = document.getElementById('carousel-thumbnails');
+                thumbnailsContainer.innerHTML = '';
+                for (let i = 0; i < 3; i++) {
+                    const thumb = document.createElement('img');
+                    thumb.src = playerImage;
+                    thumb.alt = `Thumbnail ${i+1}`;
+                    if (i === 0) thumb.classList.add('active');
+                    thumbnailsContainer.appendChild(thumb);
+                }
+                
+                // Show modal
+                document.getElementById('profile-modal').style.display = 'flex';
+                
+                // Initialize carousel
+                initCarousel();
+            });
+        });
+        
+        // Close modal
+        document.querySelector('.close-modal').addEventListener('click', function() {
+            document.getElementById('profile-modal').style.display = 'none';
+        });
+        
+        // Close modal when clicking outside content
+        window.addEventListener('click', function(event) {
+            const modal = document.getElementById('profile-modal');
+            if (event.target === modal) {
+                modal.style.display = 'none';
+            }
+        });
+        
+        // Carousel functionality
+        function initCarousel() {
+            const modal = document.getElementById('profile-modal');
+            const mainImg = modal.querySelector('#carousel-main-image');
+            const thumbs = modal.querySelectorAll('.carousel-thumbs img');
+            let currentIndex = 0;
+
+            // Set up carousel
+            thumbs.forEach((thumb, index) => {
+                thumb.addEventListener('click', () => {
+                    currentIndex = index;
+                    updateCarousel();
+                });
+            });
+
+            // Navigation arrows
+            modal.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
+                currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
+                updateCarousel();
+            });
+
+            modal.querySelector('.carousel-arrow.next').addEventListener('click', () => {
+                currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
+                updateCarousel();
+            });
+
+            // Swipe support for mobile
+            let touchStartX = 0;
+            mainImg.addEventListener('touchstart', (e) => {
+                touchStartX = e.changedTouches[0].screenX;
+            });
+
+            mainImg.addEventListener('touchend', (e) => {
+                const touchEndX = e.changedTouches[0].screenX;
+                if (touchStartX - touchEndX > 50) { // Swipe left
+                    currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
+                } else if (touchEndX - touchStartX > 50) { // Swipe right
+                    currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
+                }
+                updateCarousel();
+            });
+
+            function updateCarousel() {
+                // Fade out current image
+                mainImg.style.opacity = 0;
+
+                setTimeout(() => {
+                    // Update main image
+                    mainImg.src = thumbs[currentIndex].src;
+                    mainImg.style.opacity = 1;
+
+                    // Update active thumbnail
+                    thumbs.forEach((thumb, index) => {
+                        thumb.classList.toggle('active', index === currentIndex);
+                    });
+                }, 300);
+            }
+
+            // Initialize
+            updateCarousel();
+        }
+    </script>
+</body>
+</html>