Koperization commited on
Commit
9e322df
·
verified ·
1 Parent(s): a5dca31

Removed files from promoting 4981cc8

Browse files

Removed files that don't exist in commit 4981cc80744d17287c0ba470968ba234ca99befc:
- junior-a-boys.html
- junior-b-boys.html
- volleyball-junior-b-girls.html

junior-a-boys.html DELETED
@@ -1,594 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Junior A Boys – Volleyball | NAGAS</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://unpkg.com/feather-icons"></script>
10
- <script>
11
- tailwind.config = {
12
- theme: {
13
- extend: {
14
- colors: {
15
- primary: '#008080',
16
- dark: '#121212',
17
- darker: '#0a0a0a',
18
- lightGrey: '#CCCCCC'
19
- }
20
- }
21
- }
22
- }
23
- </script>
24
- <style>
25
- body {
26
- font-family: 'Montserrat', sans-serif;
27
- background-color: #121212;
28
- color: #ffffff;
29
- }
30
- h1, h2, h3, h4, h5, h6 {
31
- font-weight: 700;
32
- }
33
- /* Shared card styles */
34
- .player-card {
35
- transition: all 0.3s ease;
36
- border: 1px solid #008080;
37
- border-radius: 6px;
38
- background-color: #1E1E1E;
39
- padding: 20px;
40
- text-align: center;
41
- color: white;
42
- opacity: 0;
43
- transform: translateY(20px);
44
- }
45
-
46
- /* Hover effects */
47
- .player-card:hover {
48
- transform: translateY(-5px);
49
- box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3);
50
- }
51
-
52
- /* Section titles */
53
- .section-title {
54
- margin-bottom: 20px;
55
- }
56
-
57
- /* Preserve existing header/footer styles */
58
- header, footer {
59
- width: 100%;
60
- padding: 20px;
61
- }
62
-
63
- /* Carousel Container */
64
- .carousel-container {
65
- position: relative;
66
- max-width: 100%;
67
- margin: 20px auto;
68
- overflow: hidden;
69
- border-radius: 6px;
70
- }
71
-
72
- /* Main Image */
73
- .carousel-main {
74
- width: 100%;
75
- height: 300px;
76
- background: #1E1E1E;
77
- border-radius: 6px;
78
- overflow: hidden;
79
- position: relative;
80
- }
81
- .carousel-main img {
82
- width: 100%;
83
- height: 100%;
84
- object-fit: cover;
85
- transition: opacity 0.5s ease;
86
- }
87
-
88
- /* Thumbnails */
89
- .carousel-thumbs {
90
- display: flex;
91
- gap: 8px;
92
- margin-top: 10px;
93
- justify-content: center;
94
- }
95
- .carousel-thumbs img {
96
- width: 60px;
97
- height: 60px;
98
- object-fit: cover;
99
- border-radius: 4px;
100
- cursor: pointer;
101
- opacity: 0.7;
102
- transition: all 0.3s;
103
- }
104
- .carousel-thumbs img.active {
105
- opacity: 1;
106
- border: 2px solid #008080;
107
- }
108
-
109
- /* Navigation Arrows */
110
- .carousel-arrow {
111
- position: absolute;
112
- top: 50%;
113
- transform: translateY(-50%);
114
- background: rgba(0,0,0,0.5);
115
- color: white;
116
- border: none;
117
- padding: 10px;
118
- cursor: pointer;
119
- font-size: 18px;
120
- z-index: 10;
121
- border-radius: 50%;
122
- width: 40px;
123
- height: 40px;
124
- display: flex;
125
- align-items: center;
126
- justify-content: center;
127
- }
128
- .carousel-arrow:hover {
129
- background: #008080;
130
- }
131
- .carousel-arrow.prev { left: 10px; }
132
- .carousel-arrow.next { right: 10px; }
133
-
134
- /* Animation for image transition */
135
- @keyframes fadeIn {
136
- from { opacity: 0; }
137
- to { opacity: 1; }
138
- }
139
-
140
- /* Modal Styles */
141
- .modal {
142
- display: none;
143
- position: fixed;
144
- top: 0;
145
- left: 0;
146
- width: 100%;
147
- height: 100%;
148
- background: rgba(0, 0, 0, 0.8);
149
- z-index: 1000;
150
- justify-content: center;
151
- align-items: center;
152
- }
153
-
154
- .modal-content {
155
- background: #1E1E1E;
156
- border-radius: 8px;
157
- width: 90%;
158
- max-width: 600px;
159
- padding: 20px;
160
- position: relative;
161
- transform: translateY(100%);
162
- animation: slideUp 0.4s forwards;
163
- }
164
-
165
- @keyframes slideUp {
166
- to {
167
- transform: translateY(0);
168
- }
169
- }
170
-
171
- .close-modal {
172
- position: absolute;
173
- top: 10px;
174
- right: 15px;
175
- font-size: 24px;
176
- cursor: pointer;
177
- }
178
- </style>
179
- </head>
180
- <body class="bg-dark text-white">
181
- <!-- Navigation -->
182
- <header class="fixed w-full z-50 bg-dark border-b border-primary">
183
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
184
- <div class="flex items-center">
185
- <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
186
- <a href="index.html" class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></a>
187
- </div>
188
- <nav class="hidden md:flex space-x-6">
189
- <a href="index.html" class="hover:text-primary">Home</a>
190
- <a href="about.html" class="hover:text-primary">About</a>
191
- <a href="teams.html" class="hover:text-primary">Teams</a>
192
- <a href="schedule.html" class="hover:text-primary">Schedule</a>
193
- <a href="council.html" class="hover:text-primary">Council</a>
194
- <a href="news.html" class="hover:text-primary">News</a>
195
- <a href="get-involved.html" class="hover:text-primary">Get Involved</a>
196
- </nav>
197
- <button id="menu-toggle" class="md:hidden text-white">
198
- <i data-feather="menu"></i>
199
- </button>
200
- </div>
201
- </header>
202
-
203
- <!-- Mobile Menu -->
204
- <div id="mobile-menu" class="fixed inset-0 bg-dark z-50 hidden">
205
- <div class="flex justify-between items-center p-4 border-b border-primary">
206
- <div class="flex items-center">
207
- <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
208
- <span class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></span>
209
- </div>
210
- <button id="menu-close" class="text-white">
211
- <i data-feather="x"></i>
212
- </button>
213
- </div>
214
- <nav class="p-4">
215
- <a href="index.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Home</a>
216
- <a href="about.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">About</a>
217
- <a href="teams.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Teams</a>
218
- <a href="schedule.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Schedule</a>
219
- <a href="council.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Council</a>
220
- <a href="news.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">News</a>
221
- <a href="get-involved.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Get Involved</a>
222
- </nav>
223
- </div>
224
-
225
- <!-- Breadcrumb -->
226
- <div class="pt-20 pb-4 bg-darker border-b border-[#2e2e2e]">
227
- <div class="container mx-auto px-4">
228
- <nav class="text-sm">
229
- <a href="index.html" class="text-primary hover:underline">Home</a> >
230
- <a href="teams.html" class="text-primary hover:underline">Teams</a> >
231
- <a href="volleyball.html" class="text-primary hover:underline">Volleyball</a> >
232
- <span class="text-white">Junior A Boys</span>
233
- </nav>
234
- </div>
235
- </div>
236
-
237
- <!-- Back Button -->
238
- <div class="container mx-auto px-4 py-6">
239
- <a href="volleyball.html" class="inline-flex items-center text-primary hover:text-white transition">
240
- <i data-feather="arrow-left" class="mr-2"></i> Back to Volleyball Teams
241
- </a>
242
- </div>
243
-
244
- <!-- Team Header -->
245
- <section class="py-8 text-center px-4">
246
- <h1 class="text-4xl md:text-5xl font-bold mb-2">Junior A Boys Volleyball</h1>
247
- <p class="text-lightGrey text-base mb-6">Northbridge Athletic Groups and Sports</p>
248
- </section>
249
-
250
- <!-- Search Bar -->
251
- <div class="container mx-auto px-4 mb-8">
252
- <div class="max-w-md mx-auto">
253
- <input type="text" id="search-players" placeholder="Search players..." class="w-full px-4 py-2 rounded bg-[#1E1E1E] border border-[#008080] text-white focus:outline-none focus:ring-2 focus:ring-[#008080]">
254
- </div>
255
- </div>
256
-
257
- <!-- Player Grid -->
258
- <section class="py-8 px-4">
259
- <div class="container mx-auto">
260
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="player-grid">
261
- <!-- Player cards will be populated by JavaScript -->
262
- </div>
263
- </div>
264
- </section>
265
-
266
- <!-- Player Profile Modal -->
267
- <div id="profile-modal" class="modal">
268
- <div class="modal-content">
269
- <span class="close-modal">&times;</span>
270
- <h2 id="modal-player-name" class="text-2xl font-bold mb-2"></h2>
271
- <p id="modal-player-position" class="text-primary mb-4"></p>
272
-
273
- <!-- Carousel Container -->
274
- <div class="carousel-container">
275
- <div class="carousel-main">
276
- <img id="carousel-main-img" src="" alt="Main photo">
277
- <button class="carousel-arrow prev">‹</button>
278
- <button class="carousel-arrow next">›</button>
279
- </div>
280
- <div class="carousel-thumbs" id="carousel-thumbs">
281
- <!-- Thumbnails will be populated by JavaScript -->
282
- </div>
283
- </div>
284
-
285
- <div class="mt-4">
286
- <h3 class="text-xl font-bold mb-2">Player Stats</h3>
287
- <ul id="player-stats" class="text-lightGrey">
288
- <!-- Stats will be populated by JavaScript -->
289
- </ul>
290
- </div>
291
- </div>
292
- </div>
293
-
294
- <!-- Footer -->
295
- <footer class="bg-darker py-12 border-t border-[#2e2e2e]">
296
- <div class="container mx-auto px-4">
297
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
298
- <div>
299
- <h3 class="text-xl font-bold mb-4">Contact Info</h3>
300
- <p>Northbridge International School Cambodia</p>
301
- <p>#98C, Street 169, Phnom Penh</p>
302
- <p>Email: info@nagas.edu.kh</p>
303
- <p>Phone: +855 12 345 678</p>
304
- </div>
305
- <div>
306
- <h3 class="text-xl font-bold mb-4">Follow Us</h3>
307
- <div class="flex space-x-4">
308
- <a href="#" class="text-primary hover:text-lightGrey">
309
- <i data-feather="facebook"></i>
310
- </a>
311
- <a href="#" class="text-primary hover:text-lightGrey">
312
- <i data-feather="instagram"></i>
313
- </a>
314
- </div>
315
- <p class="mt-2">@NAGAS_NISC</p>
316
- </div>
317
- <div>
318
- <h3 class="text-xl font-bold mb-4">Quick Links</h3>
319
- <ul class="space-y-2">
320
- <li><a href="teams.html" class="hover:text-primary">Teams</a></li>
321
- <li><a href="schedule.html" class="hover:text-primary">Schedule</a></li>
322
- <li><a href="news.html" class="hover:text-primary">News</a></li>
323
- <li><a href="#" class="hover:text-primary">Athlete Portal</a></li>
324
- </ul>
325
- </div>
326
- </div>
327
- <div class="border-t border-[#2e2e2e] mt-8 pt-8 text-center">
328
- <p>&copy; 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p>
329
- </div>
330
- </div>
331
- </footer>
332
-
333
- <script>
334
- feather.replace();
335
-
336
- // Mobile menu toggle
337
- document.getElementById('menu-toggle').addEventListener('click', function() {
338
- document.getElementById('mobile-menu').classList.remove('hidden');
339
- });
340
-
341
- document.getElementById('menu-close').addEventListener('click', function() {
342
- document.getElementById('mobile-menu').classList.add('hidden');
343
- });
344
-
345
- // Sample player data (in a real app, this would come from an API)
346
- const players = [
347
- {
348
- id: 1,
349
- name: "David Martinez",
350
- position: "Setter",
351
- images: [
352
- "http://static.photos/people/320x240/1",
353
- "http://static.photos/people/320x240/2",
354
- "http://static.photos/people/320x240/3"
355
- ],
356
- stats: {
357
- "Height": "175 cm",
358
- "Age": "16",
359
- "Hometown": "Phnom Penh",
360
- "Matches Played": "24",
361
- "Sets Won": "89"
362
- }
363
- },
364
- {
365
- id: 2,
366
- name: "Michael Chen",
367
- position: "Outside Hitter",
368
- images: [
369
- "http://static.photos/people/320x240/4",
370
- "http://static.photos/people/320x240/5",
371
- "http://static.photos/people/320x240/6"
372
- ],
373
- stats: {
374
- "Height": "182 cm",
375
- "Age": "17",
376
- "Hometown": "Siem Reap",
377
- "Matches Played": "22",
378
- "Points Scored": "156"
379
- }
380
- },
381
- {
382
- id: 3,
383
- name: "James Wilson",
384
- position: "Middle Blocker",
385
- images: [
386
- "http://static.photos/people/320x240/7",
387
- "http://static.photos/people/320x240/8",
388
- "http://static.photos/people/320x240/9"
389
- ],
390
- stats: {
391
- "Height": "188 cm",
392
- "Age": "16",
393
- "Hometown": "Sihanoukville",
394
- "Matches Played": "20",
395
- "Blocks": "42"
396
- }
397
- },
398
- {
399
- id: 4,
400
- name: "Robert Johnson",
401
- position: "Libero",
402
- images: [
403
- "http://static.photos/people/320x240/10",
404
- "http://static.photos/people/320x240/11",
405
- "http://static.photos/people/320x240/12"
406
- ],
407
- stats: {
408
- "Height": "170 cm",
409
- "Age": "17",
410
- "Hometown": "Battambang",
411
- "Matches Played": "25",
412
- "Digs": "128"
413
- }
414
- },
415
- {
416
- id: 5,
417
- name: "Thomas Brown",
418
- position: "Opposite Hitter",
419
- images: [
420
- "http://static.photos/people/320x240/13",
421
- "http://static.photos/people/320x240/14",
422
- "http://static.photos/people/320x240/15"
423
- ],
424
- stats: {
425
- "Height": "185 cm",
426
- "Age": "16",
427
- "Hometown": "Kampot",
428
- "Matches Played": "21",
429
- "Points Scored": "134"
430
- }
431
- },
432
- {
433
- id: 6,
434
- name: "Daniel Davis",
435
- position: "Outside Hitter",
436
- images: [
437
- "http://static.photos/people/320x240/16",
438
- "http://static.photos/people/320x240/17",
439
- "http://static.photos/people/320x240/18"
440
- ],
441
- stats: {
442
- "Height": "180 cm",
443
- "Age": "17",
444
- "Hometown": "Kep",
445
- "Matches Played": "19",
446
- "Points Scored": "112"
447
- }
448
- }
449
- ];
450
-
451
- // Populate player grid
452
- const playerGrid = document.getElementById('player-grid');
453
- const searchInput = document.getElementById('search-players');
454
-
455
- function renderPlayers(playerList) {
456
- playerGrid.innerHTML = '';
457
- playerList.forEach((player, index) => {
458
- const playerCard = document.createElement('div');
459
- playerCard.className = 'player-card';
460
- playerCard.innerHTML = `
461
- <img src="${player.images[0]}" alt="${player.name}" class="w-full h-48 object-cover rounded mb-4">
462
- <h3 class="text-xl font-bold">${player.name}</h3>
463
- <p class="text-primary">${player.position}</p>
464
- `;
465
-
466
- // Add staggered animation delay
467
- playerCard.style.animation = `fadeIn 0.5s ease forwards ${index * 0.1}s`;
468
-
469
- playerCard.addEventListener('click', () => openPlayerModal(player));
470
- playerGrid.appendChild(playerCard);
471
- });
472
- }
473
-
474
- // Search functionality
475
- searchInput.addEventListener('input', function() {
476
- const searchTerm = this.value.toLowerCase();
477
- const filteredPlayers = players.filter(player =>
478
- player.name.toLowerCase().includes(searchTerm)
479
- );
480
- renderPlayers(filteredPlayers);
481
- });
482
-
483
- // Initial render
484
- renderPlayers(players);
485
-
486
- // Player modal functionality
487
- const modal = document.getElementById('profile-modal');
488
- const closeModalBtn = document.querySelector('.close-modal');
489
-
490
- function openPlayerModal(player) {
491
- document.getElementById('modal-player-name').textContent = player.name;
492
- document.getElementById('modal-player-position').textContent = player.position;
493
-
494
- // Set main image
495
- const mainImg = document.getElementById('carousel-main-img');
496
- mainImg.src = player.images[0];
497
- mainImg.alt = player.name;
498
-
499
- // Populate thumbnails
500
- const thumbsContainer = document.getElementById('carousel-thumbs');
501
- thumbsContainer.innerHTML = '';
502
- player.images.forEach((img, index) => {
503
- const thumb = document.createElement('img');
504
- thumb.src = img;
505
- thumb.alt = `${player.name} ${index + 1}`;
506
- if (index === 0) thumb.classList.add('active');
507
- thumbsContainer.appendChild(thumb);
508
- });
509
-
510
- // Populate stats
511
- const statsList = document.getElementById('player-stats');
512
- statsList.innerHTML = '';
513
- for (const [key, value] of Object.entries(player.stats)) {
514
- const li = document.createElement('li');
515
- li.innerHTML = `<strong>${key}:</strong> ${value}`;
516
- statsList.appendChild(li);
517
- }
518
-
519
- modal.style.display = 'flex';
520
-
521
- // Initialize carousel for this player
522
- initializeCarousel(player.images);
523
- }
524
-
525
- closeModalBtn.addEventListener('click', () => {
526
- modal.style.display = 'none';
527
- });
528
-
529
- window.addEventListener('click', (e) => {
530
- if (e.target === modal) {
531
- modal.style.display = 'none';
532
- }
533
- });
534
-
535
- // Carousel functionality
536
- function initializeCarousel(images) {
537
- const mainImg = document.getElementById('carousel-main-img');
538
- const thumbs = document.querySelectorAll('.carousel-thumbs img');
539
- let currentIndex = 0;
540
-
541
- // Set up thumbnail click events
542
- thumbs.forEach((thumb, index) => {
543
- thumb.addEventListener('click', () => {
544
- currentIndex = index;
545
- updateCarousel();
546
- });
547
- });
548
-
549
- // Navigation arrows
550
- document.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
551
- currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
552
- updateCarousel();
553
- });
554
-
555
- document.querySelector('.carousel-arrow.next').addEventListener('click', () => {
556
- currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
557
- updateCarousel();
558
- });
559
-
560
- // Swipe support for mobile
561
- let touchStartX = 0;
562
- mainImg.addEventListener('touchstart', (e) => {
563
- touchStartX = e.changedTouches[0].screenX;
564
- });
565
-
566
- mainImg.addEventListener('touchend', (e) => {
567
- const touchEndX = e.changedTouches[0].screenX;
568
- if (touchStartX - touchEndX > 50) { // Swipe left
569
- currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
570
- } else if (touchEndX - touchStartX > 50) { // Swipe right
571
- currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
572
- }
573
- updateCarousel();
574
- });
575
-
576
- function updateCarousel() {
577
- // Fade out current image
578
- mainImg.style.opacity = 0;
579
-
580
- setTimeout(() => {
581
- // Update main image
582
- mainImg.src = images[currentIndex];
583
- mainImg.style.opacity = 1;
584
-
585
- // Update active thumbnail
586
- thumbs.forEach((thumb, index) => {
587
- thumb.classList.toggle('active', index === currentIndex);
588
- });
589
- }, 300);
590
- }
591
- }
592
- </script>
593
- </body>
594
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
junior-b-boys.html DELETED
@@ -1,535 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Junior B Boys – Volleyball</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://unpkg.com/feather-icons"></script>
10
- <script>
11
- tailwind.config = {
12
- theme: {
13
- extend: {
14
- colors: {
15
- primary: '#008080',
16
- dark: '#121212',
17
- darker: '#0a0a0a',
18
- lightGrey: '#CCCCCC'
19
- }
20
- }
21
- }
22
- }
23
- </script>
24
- <style>
25
- body {
26
- font-family: 'Montserrat', sans-serif;
27
- background-color: #121212;
28
- color: #ffffff;
29
- }
30
- h1, h2, h3, h4, h5, h6 {
31
- font-weight: 700;
32
- }
33
- /* Shared card styles */
34
- .player-card {
35
- transition: all 0.3s ease;
36
- border: 1px solid #008080;
37
- border-radius: 6px;
38
- background-color: #1E1E1E;
39
- padding: 20px;
40
- text-align: center;
41
- color: white;
42
- opacity: 0;
43
- transform: translateY(20px);
44
- }
45
-
46
- /* Hover effects */
47
- .player-card:hover {
48
- transform: translateY(-5px) scale(1.03);
49
- box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3);
50
- }
51
-
52
- /* Section titles */
53
- .section-title {
54
- margin-bottom: 20px;
55
- }
56
-
57
- /* Preserve existing header/footer styles */
58
- header, footer {
59
- width: 100%;
60
- padding: 20px;
61
- }
62
-
63
- /* Carousel Container */
64
- .carousel-container {
65
- position: relative;
66
- max-width: 100%;
67
- margin: 20px auto;
68
- overflow: hidden;
69
- border-radius: 6px;
70
- }
71
-
72
- /* Main Image */
73
- .carousel-main {
74
- width: 100%;
75
- height: 300px;
76
- background: #1E1E1E;
77
- border-radius: 6px;
78
- overflow: hidden;
79
- position: relative;
80
- }
81
- .carousel-main img {
82
- width: 100%;
83
- height: 100%;
84
- object-fit: cover;
85
- transition: opacity 0.5s ease;
86
- }
87
-
88
- /* Thumbnails */
89
- .carousel-thumbs {
90
- display: flex;
91
- gap: 8px;
92
- margin-top: 10px;
93
- justify-content: center;
94
- }
95
- .carousel-thumbs img {
96
- width: 60px;
97
- height: 60px;
98
- object-fit: cover;
99
- border-radius: 4px;
100
- cursor: pointer;
101
- opacity: 0.7;
102
- transition: all 0.3s;
103
- }
104
- .carousel-thumbs img.active {
105
- opacity: 1;
106
- border: 2px solid #008080;
107
- }
108
-
109
- /* Navigation Arrows */
110
- .carousel-arrow {
111
- position: absolute;
112
- top: 50%;
113
- transform: translateY(-50%);
114
- background: rgba(0,0,0,0.5);
115
- color: white;
116
- border: none;
117
- padding: 10px;
118
- cursor: pointer;
119
- font-size: 18px;
120
- z-index: 10;
121
- border-radius: 50%;
122
- width: 40px;
123
- height: 40px;
124
- display: flex;
125
- align-items: center;
126
- justify-content: center;
127
- }
128
- .carousel-arrow:hover {
129
- background: #008080;
130
- }
131
- .carousel-arrow.prev { left: 10px; }
132
- .carousel-arrow.next { right: 10px; }
133
-
134
- /* Animation for image transition */
135
- @keyframes fadeIn {
136
- from { opacity: 0; }
137
- to { opacity: 1; }
138
- }
139
-
140
- /* Modal */
141
- .modal {
142
- position: fixed;
143
- top: 0;
144
- left: 0;
145
- width: 100%;
146
- height: 100%;
147
- background: rgba(0, 0, 0, 0.8);
148
- display: flex;
149
- align-items: center;
150
- justify-content: center;
151
- z-index: 1000;
152
- opacity: 0;
153
- visibility: hidden;
154
- transition: all 0.3s ease;
155
- }
156
- .modal.active {
157
- opacity: 1;
158
- visibility: visible;
159
- }
160
- .modal-content {
161
- background: #1E1E1E;
162
- border-radius: 8px;
163
- width: 90%;
164
- max-width: 600px;
165
- padding: 20px;
166
- transform: translateY(20px);
167
- transition: transform 0.3s ease;
168
- }
169
- .modal.active .modal-content {
170
- transform: translateY(0);
171
- }
172
- </style>
173
- </head>
174
- <body class="bg-dark text-white">
175
- <!-- Navigation -->
176
- <header class="fixed w-full z-50 bg-dark border-b border-primary">
177
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
178
- <div class="flex items-center">
179
- <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
180
- <a href="index.html" class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></a>
181
- </div>
182
- <nav class="hidden md:flex space-x-6">
183
- <a href="index.html" class="hover:text-primary">Home</a>
184
- <a href="about.html" class="hover:text-primary">About</a>
185
- <a href="teams.html" class="hover:text-primary">Teams</a>
186
- <a href="schedule.html" class="hover:text-primary">Schedule</a>
187
- <a href="council.html" class="hover:text-primary">Council</a>
188
- <a href="news.html" class="hover:text-primary">News</a>
189
- <a href="get-involved.html" class="hover:text-primary">Get Involved</a>
190
- </nav>
191
- <button id="menu-toggle" class="md:hidden text-white">
192
- <i data-feather="menu"></i>
193
- </button>
194
- </div>
195
- </header>
196
-
197
- <!-- Mobile Menu -->
198
- <div id="mobile-menu" class="fixed inset-0 bg-dark z-50 hidden">
199
- <div class="flex justify-between items-center p-4 border-b border-primary">
200
- <div class="flex items-center">
201
- <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
202
- <span class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></span>
203
- </div>
204
- <button id="menu-close" class="text-white">
205
- <i data-feather="x"></i>
206
- </button>
207
- </div>
208
- <nav class="p-4">
209
- <a href="index.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Home</a>
210
- <a href="about.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">About</a>
211
- <a href="teams.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Teams</a>
212
- <a href="schedule.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Schedule</a>
213
- <a href="council.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Council</a>
214
- <a href="news.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">News</a>
215
- <a href="get-involved.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Get Involved</a>
216
- </nav>
217
- </div>
218
-
219
- <!-- Breadcrumb -->
220
- <div class="pt-20 pb-4 bg-darker border-b border-[#2e2e2e]">
221
- <div class="container mx-auto px-4">
222
- <nav class="text-sm">
223
- <a href="index.html" class="text-primary hover:underline">Home</a> >
224
- <a href="teams.html" class="text-primary hover:underline">Teams</a> >
225
- <a href="volleyball.html" class="text-primary hover:underline">Volleyball</a> >
226
- <span class="text-white">Junior B Boys</span>
227
- </nav>
228
- </div>
229
- </div>
230
-
231
- <!-- Back Button -->
232
- <div class="container mx-auto px-4 py-6">
233
- <a href="volleyball.html" class="inline-flex items-center text-primary hover:text-lightGrey">
234
- <i data-feather="arrow-left" class="mr-2"></i> Back to Volleyball Teams
235
- </a>
236
- </div>
237
-
238
- <!-- Search Bar -->
239
- <div class="container mx-auto px-4 py-6">
240
- <input type="text" id="search-bar" placeholder="Search players..." class="w-full p-3 rounded bg-[#1E1E1E] border border-[#008080] text-white focus:outline-none focus:ring-2 focus:ring-[#008080]">
241
- </div>
242
-
243
- <!-- Player Grid -->
244
- <section class="py-16 px-4">
245
- <div class="container mx-auto">
246
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 section-title">Junior B Boys Roster</h2>
247
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="player-grid">
248
- <!-- Player cards will be populated by JavaScript -->
249
- </div>
250
- </div>
251
- </section>
252
-
253
- <!-- Player Profile Modal -->
254
- <div id="profile-modal" class="modal">
255
- <div class="modal-content">
256
- <div class="flex justify-between items-center mb-4">
257
- <h3 id="modal-player-name" class="text-2xl font-bold"></h3>
258
- <button id="close-modal" class="text-white text-2xl">&times;</button>
259
- </div>
260
- <div class="carousel-container">
261
- <div class="carousel-main">
262
- <img id="carousel-main-img" src="" alt="Main photo">
263
- <button class="carousel-arrow prev">‹</button>
264
- <button class="carousel-arrow next">›</button>
265
- </div>
266
- <div class="carousel-thumbs" id="carousel-thumbs">
267
- <!-- Thumbnails will be populated by JavaScript -->
268
- </div>
269
- </div>
270
- <div class="mt-4">
271
- <p id="modal-player-position" class="text-primary"></p>
272
- <p id="modal-player-bio" class="text-lightGrey mt-2"></p>
273
- </div>
274
- </div>
275
- </div>
276
-
277
- <!-- Footer -->
278
- <footer class="bg-darker py-12 border-t border-[#2e2e2e]">
279
- <div class="container mx-auto px-4">
280
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
281
- <div>
282
- <h3 class="text-xl font-bold mb-4">Contact Info</h3>
283
- <p>Northbridge International School Cambodia</p>
284
- <p>#98C, Street 169, Phnom Penh</p>
285
- <p>Email: info@nagas.edu.kh</p>
286
- <p>Phone: +855 12 345 678</p>
287
- </div>
288
- <div>
289
- <h3 class="text-xl font-bold mb-4">Follow Us</h3>
290
- <div class="flex space-x-4">
291
- <a href="#" class="text-primary hover:text-lightGrey">
292
- <i data-feather="facebook"></i>
293
- </a>
294
- <a href="#" class="text-primary hover:text-lightGrey">
295
- <i data-feather="instagram"></i>
296
- </a>
297
- </div>
298
- <p class="mt-2">@NAGAS_NISC</p>
299
- </div>
300
- <div>
301
- <h3 class="text-xl font-bold mb-4">Quick Links</h3>
302
- <ul class="space-y-2">
303
- <li><a href="teams.html" class="hover:text-primary">Teams</a></li>
304
- <li><a href="schedule.html" class="hover:text-primary">Schedule</a></li>
305
- <li><a href="news.html" class="hover:text-primary">News</a></li>
306
- <li><a href="#" class="hover:text-primary">Athlete Portal</a></li>
307
- </ul>
308
- </div>
309
- </div>
310
- <div class="border-t border-[#2e2e2e] mt-8 pt-8 text-center">
311
- <p>&copy; 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p>
312
- </div>
313
- </div>
314
- </footer>
315
-
316
- <script>
317
- feather.replace();
318
-
319
- // Mobile menu toggle
320
- document.getElementById('menu-toggle').addEventListener('click', function() {
321
- document.getElementById('mobile-menu').classList.remove('hidden');
322
- });
323
-
324
- document.getElementById('menu-close').addEventListener('click', function() {
325
- document.getElementById('mobile-menu').classList.add('hidden');
326
- });
327
-
328
- // Player data
329
- const players = [
330
- {
331
- id: 1,
332
- name: "Alex Morgan",
333
- position: "Setter",
334
- bio: "Alex is a skilled setter with excellent court vision and leadership qualities. He has been with the team for 2 years and consistently improves his technique.",
335
- images: [
336
- "http://static.photos/people/320x240/1",
337
- "http://static.photos/sport/320x240/2",
338
- "http://static.photos/education/320x240/3"
339
- ]
340
- },
341
- {
342
- id: 2,
343
- name: "James Wilson",
344
- position: "Outside Hitter",
345
- bio: "James brings powerful spikes and strong defensive skills to the team. His energy and determination inspire teammates on the court.",
346
- images: [
347
- "http://static.photos/people/320x240/4",
348
- "http://static.photos/sport/320x240/5",
349
- "http://static.photos/education/320x240/6"
350
- ]
351
- },
352
- {
353
- id: 3,
354
- name: "Michael Chen",
355
- position: "Middle Blocker",
356
- bio: "Michael's height and blocking ability make him a formidable presence at the net. He's also known for his quick reflexes and teamwork.",
357
- images: [
358
- "http://static.photos/people/320x240/7",
359
- "http://static.photos/sport/320x240/8",
360
- "http://static.photos/education/320x240/9"
361
- ]
362
- },
363
- {
364
- id: 4,
365
- name: "David Rodriguez",
366
- position: "Libero",
367
- bio: "David's defensive skills and quick movements make him an excellent libero. He's always ready to make spectacular saves.",
368
- images: [
369
- "http://static.photos/people/320x240/10",
370
- "http://static.photos/sport/320x240/11",
371
- "http://static.photos/education/320x240/12"
372
- ]
373
- },
374
- {
375
- id: 5,
376
- name: "Robert Johnson",
377
- position: "Opposite Hitter",
378
- bio: "Robert's versatility and powerful attacks from the back row make him a valuable asset to the team.",
379
- images: [
380
- "http://static.photos/people/320x240/13",
381
- "http://static.photos/sport/320x240/14",
382
- "http://static.photos/education/320x240/15"
383
- ]
384
- },
385
- {
386
- id: 6,
387
- name: "Thomas Kim",
388
- position: "Outside Hitter",
389
- bio: "Thomas combines athleticism with technical skill, making him a consistent scorer for the team.",
390
- images: [
391
- "http://static.photos/people/320x240/16",
392
- "http://static.photos/sport/320x240/17",
393
- "http://static.photos/education/320x240/18"
394
- ]
395
- }
396
- ];
397
-
398
- // Render player cards
399
- function renderPlayers(playerList) {
400
- const grid = document.getElementById('player-grid');
401
- grid.innerHTML = '';
402
-
403
- playerList.forEach((player, index) => {
404
- const card = document.createElement('div');
405
- card.className = 'player-card';
406
- card.innerHTML = `
407
- <img src="${player.images[0]}" alt="${player.name}" class="w-full h-48 object-cover rounded mb-4">
408
- <h3 class="text-xl font-bold">${player.name}</h3>
409
- <p class="text-primary">${player.position}</p>
410
- `;
411
-
412
- // Add staggered animation
413
- setTimeout(() => {
414
- card.style.opacity = '1';
415
- card.style.transform = 'translateY(0)';
416
- }, index * 100);
417
-
418
- card.addEventListener('click', () => openModal(player));
419
- grid.appendChild(card);
420
- });
421
- }
422
-
423
- // Search functionality
424
- document.getElementById('search-bar').addEventListener('input', function(e) {
425
- const searchTerm = e.target.value.toLowerCase();
426
- const filteredPlayers = players.filter(player =>
427
- player.name.toLowerCase().includes(searchTerm)
428
- );
429
- renderPlayers(filteredPlayers);
430
- });
431
-
432
- // Modal functionality
433
- const modal = document.getElementById('profile-modal');
434
- const closeModalBtn = document.getElementById('close-modal');
435
-
436
- function openModal(player) {
437
- document.getElementById('modal-player-name').textContent = player.name;
438
- document.getElementById('modal-player-position').textContent = player.position;
439
- document.getElementById('modal-player-bio').textContent = player.bio;
440
-
441
- // Set main image
442
- document.getElementById('carousel-main-img').src = player.images[0];
443
-
444
- // Set thumbnails
445
- const thumbsContainer = document.getElementById('carousel-thumbs');
446
- thumbsContainer.innerHTML = '';
447
- player.images.forEach((img, index) => {
448
- const thumb = document.createElement('img');
449
- thumb.src = img;
450
- thumb.alt = `Thumbnail ${index + 1}`;
451
- if (index === 0) thumb.classList.add('active');
452
- thumb.addEventListener('click', () => updateCarousel(player.images, index));
453
- thumbsContainer.appendChild(thumb);
454
- });
455
-
456
- modal.classList.add('active');
457
- document.body.style.overflow = 'hidden';
458
- }
459
-
460
- function closeModal() {
461
- modal.classList.remove('active');
462
- document.body.style.overflow = 'auto';
463
- }
464
-
465
- closeModalBtn.addEventListener('click', closeModal);
466
- modal.addEventListener('click', (e) => {
467
- if (e.target === modal) closeModal();
468
- });
469
-
470
- // Carousel functionality
471
- function updateCarousel(images, currentIndex) {
472
- const mainImg = document.getElementById('carousel-main-img');
473
- const thumbs = document.querySelectorAll('.carousel-thumbs img');
474
-
475
- // Fade out current image
476
- mainImg.style.opacity = 0;
477
-
478
- setTimeout(() => {
479
- // Update main image
480
- mainImg.src = images[currentIndex];
481
- mainImg.style.opacity = 1;
482
-
483
- // Update active thumbnail
484
- thumbs.forEach((thumb, index) => {
485
- thumb.classList.toggle('active', index === currentIndex);
486
- });
487
- }, 300);
488
- }
489
-
490
- // Carousel navigation
491
- document.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
492
- const thumbs = document.querySelectorAll('.carousel-thumbs img');
493
- let currentIndex = Array.from(thumbs).findIndex(thumb => thumb.classList.contains('active'));
494
- const images = Array.from(thumbs).map(thumb => thumb.src);
495
-
496
- currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
497
- updateCarousel(images, currentIndex);
498
- });
499
-
500
- document.querySelector('.carousel-arrow.next').addEventListener('click', () => {
501
- const thumbs = document.querySelectorAll('.carousel-thumbs img');
502
- let currentIndex = Array.from(thumbs).findIndex(thumb => thumb.classList.contains('active'));
503
- const images = Array.from(thumbs).map(thumb => thumb.src);
504
-
505
- currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
506
- updateCarousel(images, currentIndex);
507
- });
508
-
509
- // Swipe support for mobile
510
- let touchStartX = 0;
511
- const mainImg = document.getElementById('carousel-main-img');
512
-
513
- mainImg.addEventListener('touchstart', (e) => {
514
- touchStartX = e.changedTouches[0].screenX;
515
- });
516
-
517
- mainImg.addEventListener('touchend', (e) => {
518
- const touchEndX = e.changedTouches[0].screenX;
519
- const thumbs = document.querySelectorAll('.carousel-thumbs img');
520
- let currentIndex = Array.from(thumbs).findIndex(thumb => thumb.classList.contains('active'));
521
- const images = Array.from(thumbs).map(thumb => thumb.src);
522
-
523
- if (touchStartX - touchEndX > 50) { // Swipe left
524
- currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
525
- } else if (touchEndX - touchStartX > 50) { // Swipe right
526
- currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
527
- }
528
- updateCarousel(images, currentIndex);
529
- });
530
-
531
- // Initialize
532
- renderPlayers(players);
533
- </script>
534
- </body>
535
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
volleyball-junior-b-girls.html DELETED
@@ -1,513 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Junior B Girls – Volleyball - NAGAS</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap" rel="stylesheet">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://unpkg.com/feather-icons"></script>
10
- <script>
11
- tailwind.config = {
12
- theme: {
13
- extend: {
14
- colors: {
15
- primary: '#008080',
16
- dark: '#121212',
17
- darker: '#0a0a0a'
18
- }
19
- }
20
- }
21
- }
22
- </script>
23
- <style>
24
- body {
25
- font-family: 'Montserrat', sans-serif;
26
- background-color: #121212;
27
- color: #ffffff;
28
- }
29
- .player-card {
30
- transition: all 0.3s ease;
31
- background-color: #1e1e1e;
32
- }
33
- .player-card:hover {
34
- transform: scale(1.03);
35
- box-shadow: 0 0 15px rgba(0, 128, 128, 0.5);
36
- }
37
- .search-input {
38
- background-color: #1e1e1e;
39
- border: 1px solid #008080;
40
- color: white;
41
- }
42
- .search-input:focus {
43
- outline: none;
44
- border-color: #008080;
45
- }
46
- /* Carousel Container */
47
- .carousel-container {
48
- position: relative;
49
- max-width: 100%;
50
- margin: 20px auto;
51
- overflow: hidden;
52
- border-radius: 6px;
53
- }
54
-
55
- /* Main Image */
56
- .carousel-main {
57
- width: 100%;
58
- height: 300px;
59
- background: #1E1E1E;
60
- border-radius: 6px;
61
- overflow: hidden;
62
- position: relative;
63
- }
64
- .carousel-main img {
65
- width: 100%;
66
- height: 100%;
67
- object-fit: cover;
68
- transition: opacity 0.5s ease;
69
- }
70
-
71
- /* Thumbnails */
72
- .carousel-thumbs {
73
- display: flex;
74
- gap: 8px;
75
- margin-top: 10px;
76
- justify-content: center;
77
- }
78
- .carousel-thumbs img {
79
- width: 60px;
80
- height: 60px;
81
- object-fit: cover;
82
- border-radius: 4px;
83
- cursor: pointer;
84
- opacity: 0.7;
85
- transition: all 0.3s;
86
- }
87
- .carousel-thumbs img.active {
88
- opacity: 1;
89
- border: 2px solid #008080;
90
- }
91
-
92
- /* Navigation Arrows */
93
- .carousel-arrow {
94
- position: absolute;
95
- top: 50%;
96
- transform: translateY(-50%);
97
- background: rgba(0,0,0,0.5);
98
- color: white;
99
- border: none;
100
- padding: 10px;
101
- cursor: pointer;
102
- font-size: 18px;
103
- z-index: 10;
104
- border-radius: 50%;
105
- width: 40px;
106
- height: 40px;
107
- display: flex;
108
- align-items: center;
109
- justify-content: center;
110
- }
111
- .carousel-arrow:hover {
112
- background: #008080;
113
- }
114
- .carousel-arrow.prev { left: 10px; }
115
- .carousel-arrow.next { right: 10px; }
116
-
117
- /* Animation for image transition */
118
- @keyframes fadeIn {
119
- from { opacity: 0; }
120
- to { opacity: 1; }
121
- }
122
-
123
- /* Modal */
124
- .modal {
125
- display: none;
126
- position: fixed;
127
- top: 0;
128
- left: 0;
129
- width: 100%;
130
- height: 100%;
131
- background: rgba(0, 0, 0, 0.8);
132
- z-index: 1000;
133
- justify-content: center;
134
- align-items: center;
135
- }
136
- .modal-content {
137
- background: #1e1e1e;
138
- border-radius: 8px;
139
- width: 90%;
140
- max-width: 600px;
141
- padding: 20px;
142
- position: relative;
143
- animation: slideUp 0.4s ease;
144
- }
145
- @keyframes slideUp {
146
- from { transform: translateY(50px); opacity: 0; }
147
- to { transform: translateY(0); opacity: 1; }
148
- }
149
- .close-modal {
150
- position: absolute;
151
- top: 15px;
152
- right: 15px;
153
- font-size: 24px;
154
- cursor: pointer;
155
- color: white;
156
- }
157
- </style>
158
- </head>
159
- <body class="bg-dark text-white">
160
- <!-- Navigation -->
161
- <header class="fixed w-full z-50 bg-dark border-b border-primary">
162
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
163
- <div class="flex items-center">
164
- <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
165
- <a href="index.html" class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></a>
166
- </div>
167
- <nav class="hidden md:flex space-x-6">
168
- <a href="index.html" class="hover:text-primary">Home</a>
169
- <a href="about.html" class="hover:text-primary">About</a>
170
- <a href="teams.html" class="hover:text-primary">Teams</a>
171
- <a href="schedule.html" class="hover:text-primary">Schedule</a>
172
- <a href="council.html" class="hover:text-primary">Council</a>
173
- <a href="news.html" class="hover:text-primary">News</a>
174
- <a href="get-involved.html" class="hover:text-primary">Get Involved</a>
175
- </nav>
176
- <button id="menu-toggle" class="md:hidden text-white">
177
- <i data-feather="menu"></i>
178
- </button>
179
- </div>
180
- </header>
181
-
182
- <!-- Mobile Menu -->
183
- <div id="mobile-menu" class="fixed inset-0 bg-dark z-50 hidden">
184
- <div class="flex justify-between items-center p-4 border-b border-primary">
185
- <div class="flex items-center">
186
- <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
187
- <span class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></span>
188
- </div>
189
- <button id="menu-close" class="text-white">
190
- <i data-feather="x"></i>
191
- </button>
192
- </div>
193
- <nav class="p-4">
194
- <a href="index.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Home</a>
195
- <a href="about.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">About</a>
196
- <a href="teams.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Teams</a>
197
- <a href="schedule.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Schedule</a>
198
- <a href="council.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Council</a>
199
- <a href="news.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">News</a>
200
- <a href="get-involved.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Get Involved</a>
201
- </nav>
202
- </div>
203
-
204
- <!-- Main Content -->
205
- <div class="pt-20 pb-16">
206
- <div class="container mx-auto px-4">
207
- <!-- Back Button -->
208
- <div class="mb-6">
209
- <a href="teams.html" class="inline-flex items-center text-primary hover:text-teal-300">
210
- <i data-feather="arrow-left" class="mr-2"></i> Back to Teams
211
- </a>
212
- </div>
213
-
214
- <!-- Page Title -->
215
- <h1 class="text-3xl md:text-4xl font-bold text-primary mb-8">Junior B Girls – Volleyball</h1>
216
-
217
- <!-- Search Bar -->
218
- <div class="mb-8">
219
- <input type="text" id="searchInput" placeholder="Search players..." class="search-input w-full md:w-1/3 py-2 px-4 rounded">
220
- </div>
221
-
222
- <!-- Player Grid -->
223
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="playerGrid">
224
- <!-- Player Card 1 -->
225
- <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Sopharoth Chea">
226
- <img src="http://static.photos/people/320x240/6" alt="Sopharoth Chea" class="w-full h-48 object-cover">
227
- <div class="p-4">
228
- <h3 class="text-xl font-bold">Sopharoth Chea</h3>
229
- <p class="text-gray-400">Setter</p>
230
- </div>
231
- </div>
232
-
233
- <!-- Player Card 2 -->
234
- <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Visal Sreytouch">
235
- <img src="http://static.photos/people/320x240/7" alt="Visal Sreytouch" class="w-full h-48 object-cover">
236
- <div class="p-4">
237
- <h3 class="text-xl font-bold">Visal Sreytouch</h3>
238
- <p class="text-gray-400">Outside Hitter</p>
239
- </div>
240
- </div>
241
-
242
- <!-- Player Card 3 -->
243
- <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Kosal Khemarak">
244
- <img src="http://static.photos/people/320x240/8" alt="Kosal Khemarak" class="w-full h-48 object-cover">
245
- <div class="p-4">
246
- <h3 class="text-xl font-bold">Kosal Khemarak</h3>
247
- <p class="text-gray-400">Middle Blocker</p>
248
- </div>
249
- </div>
250
-
251
- <!-- Player Card 4 -->
252
- <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Sopheaktra Yoeung">
253
- <img src="http://static.photos/people/320x240/3" alt="Sopheaktra Yoeung" class="w-full h-48 object-cover">
254
- <div class="p-4">
255
- <h3 class="text-xl font-bold">Sopheaktra Yoeung</h3>
256
- <p class="text-gray-400">Libero</p>
257
- </div>
258
- </div>
259
-
260
- <!-- Player Card 5 -->
261
- <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Sethean Thay">
262
- <img src="http://static.photos/people/320x240/5" alt="Sethean Thay" class="w-full h-48 object-cover">
263
- <div class="p-4">
264
- <h3 class="text-xl font-bold">Sethean Thay</h3>
265
- <p class="text-gray-400">Opposite Hitter</p>
266
- </div>
267
- </div>
268
-
269
- <!-- Player Card 6 -->
270
- <div class="player-card rounded-lg overflow-hidden cursor-pointer" data-player-name="Pisey Ching">
271
- <img src="http://static.photos/people/320x240/1" alt="Pisey Ching" class="w-full h-48 object-cover">
272
- <div class="p-4">
273
- <h3 class="text-xl font-bold">Pisey Ching</h3>
274
- <p class="text-gray-400">Defensive Specialist</p>
275
- </div>
276
- </div>
277
- </div>
278
- </div>
279
- </div>
280
-
281
- <!-- Player Profile Modal -->
282
- <div id="profile-modal" class="modal">
283
- <div class="modal-content">
284
- <span class="close-modal">&times;</span>
285
- <h2 class="text-2xl font-bold mb-4" id="modal-player-name">Player Name</h2>
286
- <p class="text-gray-400 mb-4" id="modal-player-position">Position</p>
287
-
288
- <!-- Carousel -->
289
- <div class="carousel-container">
290
- <div class="carousel-main">
291
- <img src="" alt="Main photo" id="main-carousel-image">
292
- <button class="carousel-arrow prev">‹</button>
293
- <button class="carousel-arrow next">›</button>
294
- </div>
295
- <div class="carousel-thumbs" id="carousel-thumbs">
296
- <!-- Thumbnails will be inserted here -->
297
- </div>
298
- </div>
299
-
300
- <div class="mt-6">
301
- <h3 class="text-xl font-bold mb-2">Player Stats</h3>
302
- <ul class="space-y-2">
303
- <li class="flex justify-between">
304
- <span>Matches Played:</span>
305
- <span id="matches-played">12</span>
306
- </li>
307
- <li class="flex justify-between">
308
- <span>Points Scored:</span>
309
- <span id="points-scored">42</span>
310
- </li>
311
- <li class="flex justify-between">
312
- <span>Aces:</span>
313
- <span id="aces">8</span>
314
- </li>
315
- <li class="flex justify-between">
316
- <span>Blocks:</span>
317
- <span id="blocks">5</span>
318
- </li>
319
- </ul>
320
- </div>
321
- </div>
322
- </div>
323
-
324
- <!-- Footer -->
325
- <footer class="bg-darker py-12 border-t border-[#2e2e2e]">
326
- <div class="container mx-auto px-4">
327
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
328
- <div>
329
- <h3 class="text-xl font-bold mb-4">Contact Info</h3>
330
- <p>Northbridge International School Cambodia</p>
331
- <p>#98C, Street 169, Phnom Penh</p>
332
- <p>Email: info@nagas.edu.kh</p>
333
- <p>Phone: +855 12 345 678</p>
334
- </div>
335
- <div>
336
- <h3 class="text-xl font-bold mb-4">Follow Us</h3>
337
- <div class="flex space-x-4">
338
- <a href="#" class="text-primary hover:text-teal-300">
339
- <i data-feather="facebook"></i>
340
- </a>
341
- <a href="#" class="text-primary hover:text-teal-300">
342
- <i data-feather="instagram"></i>
343
- </a>
344
- <a href="#" class="text-primary hover:text-teal-300">
345
- <i data-feather="twitter"></i>
346
- </a>
347
- </div>
348
- <p class="mt-2">@NAGAS_NISC</p>
349
- </div>
350
- <div>
351
- <h3 class="text-xl font-bold mb-4">Quick Links</h3>
352
- <ul class="space-y-2">
353
- <li><a href="teams.html" class="hover:text-primary">Teams</a></li>
354
- <li><a href="schedule.html" class="hover:text-primary">Schedule</a></li>
355
- <li><a href="news.html" class="hover:text-primary">News</a></li>
356
- <li><a href="#" class="hover:text-primary">Athlete Portal</a></li>
357
- </ul>
358
- </div>
359
- </div>
360
- <div class="border-t border-[#2e2e2e] mt-8 pt-8 text-center">
361
- <p>&copy; 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p>
362
- </div>
363
- </div>
364
- </footer>
365
-
366
- <script>
367
- feather.replace();
368
-
369
- // Mobile menu toggle
370
- document.getElementById('menu-toggle').addEventListener('click', function() {
371
- document.getElementById('mobile-menu').classList.remove('hidden');
372
- });
373
-
374
- document.getElementById('menu-close').addEventListener('click', function() {
375
- document.getElementById('mobile-menu').classList.add('hidden');
376
- });
377
-
378
- // Player filtering
379
- document.getElementById('searchInput').addEventListener('input', function() {
380
- const searchTerm = this.value.toLowerCase();
381
- const playerCards = document.querySelectorAll('.player-card');
382
-
383
- playerCards.forEach(card => {
384
- const playerName = card.dataset.playerName.toLowerCase();
385
- if (playerName.includes(searchTerm)) {
386
- card.style.display = 'block';
387
- } else {
388
- card.style.display = 'none';
389
- }
390
- });
391
- });
392
-
393
- // Staggered fade-in animation for player cards
394
- document.addEventListener('DOMContentLoaded', function() {
395
- const playerCards = document.querySelectorAll('.player-card');
396
- playerCards.forEach((card, index) => {
397
- card.style.opacity = '0';
398
- card.style.transform = 'translateY(20px)';
399
- setTimeout(() => {
400
- card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
401
- card.style.opacity = '1';
402
- card.style.transform = 'translateY(0)';
403
- }, 100 * index);
404
- });
405
- });
406
-
407
- // Player modal
408
- const modal = document.getElementById('profile-modal');
409
- const closeModal = document.querySelector('.close-modal');
410
-
411
- document.querySelectorAll('.player-card').forEach(card => {
412
- card.addEventListener('click', () => {
413
- const playerName = card.querySelector('h3').textContent;
414
- const playerPosition = card.querySelector('p').textContent;
415
- const playerImage = card.querySelector('img').src;
416
-
417
- document.getElementById('modal-player-name').textContent = playerName;
418
- document.getElementById('modal-player-position').textContent = playerPosition;
419
- document.getElementById('main-carousel-image').src = playerImage;
420
-
421
- // Generate thumbnails
422
- const thumbsContainer = document.getElementById('carousel-thumbs');
423
- thumbsContainer.innerHTML = '';
424
-
425
- // Using the same image for all thumbnails for demo purposes
426
- for (let i = 0; i < 3; i++) {
427
- const thumb = document.createElement('img');
428
- thumb.src = playerImage;
429
- thumb.alt = `Thumbnail ${i+1}`;
430
- if (i === 0) thumb.classList.add('active');
431
- thumbsContainer.appendChild(thumb);
432
- }
433
-
434
- modal.style.display = 'flex';
435
-
436
- // Initialize carousel
437
- initCarousel();
438
- });
439
- });
440
-
441
- closeModal.addEventListener('click', () => {
442
- modal.style.display = 'none';
443
- });
444
-
445
- window.addEventListener('click', (e) => {
446
- if (e.target === modal) {
447
- modal.style.display = 'none';
448
- }
449
- });
450
-
451
- // Carousel functionality
452
- function initCarousel() {
453
- const mainImg = document.getElementById('main-carousel-image');
454
- const thumbs = document.querySelectorAll('.carousel-thumbs img');
455
- let currentIndex = 0;
456
-
457
- // Set up thumbnail click events
458
- thumbs.forEach((thumb, index) => {
459
- thumb.addEventListener('click', () => {
460
- currentIndex = index;
461
- updateCarousel();
462
- });
463
- });
464
-
465
- // Navigation arrows
466
- document.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
467
- currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
468
- updateCarousel();
469
- });
470
-
471
- document.querySelector('.carousel-arrow.next').addEventListener('click', () => {
472
- currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
473
- updateCarousel();
474
- });
475
-
476
- // Swipe support for mobile
477
- let touchStartX = 0;
478
- mainImg.addEventListener('touchstart', (e) => {
479
- touchStartX = e.changedTouches[0].screenX;
480
- });
481
-
482
- mainImg.addEventListener('touchend', (e) => {
483
- const touchEndX = e.changedTouches[0].screenX;
484
- if (touchStartX - touchEndX > 50) { // Swipe left
485
- currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
486
- } else if (touchEndX - touchStartX > 50) { // Swipe right
487
- currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
488
- }
489
- updateCarousel();
490
- });
491
-
492
- function updateCarousel() {
493
- // Fade out current image
494
- mainImg.style.opacity = 0;
495
-
496
- setTimeout(() => {
497
- // Update main image
498
- mainImg.src = thumbs[currentIndex].src;
499
- mainImg.style.opacity = 1;
500
-
501
- // Update active thumbnail
502
- thumbs.forEach((thumb, index) => {
503
- thumb.classList.toggle('active', index === currentIndex);
504
- });
505
- }, 300);
506
- }
507
-
508
- // Initialize
509
- updateCarousel();
510
- }
511
- </script>
512
- </body>
513
- </html>