Hugging Face's logo

Spaces:
Koperization
/
nagas-athletic-chronicles
Running

App Files Community
Koperization commited on
Commit
8e50e1f
·
verified ·
1 Parent(s): 47edf29

Promote version 4dc07da to main

Browse files

Promoted commit 4dc07da35a132f5387ff4f555e8bf99f47de810c to main branch

Files changed (1) hide show
  1. basketball.html +223 -409
basketball.html CHANGED
@@ -39,9 +39,13 @@
39
  object-fit: cover;
40
  z-index: -1;
41
  }
 
 
 
 
42
  .tab-active {
43
- border-bottom: 3px solid #5ec0cc;
44
- font-weight: bold;
45
  }
46
  .schedule-item:hover {
47
  background-color: #1e1e1e;
@@ -50,70 +54,6 @@
50
  transform: scale(1.05);
51
  transition: all 0.3s ease;
52
  }
53
- .filter-active {
54
- background-color: #5ec0cc;
55
- color: #121212;
56
- }
57
- .player-card {
58
- background-color: #1e1e1e;
59
- border-radius: 8px;
60
- transition: all 0.3s ease;
61
- cursor: pointer;
62
- }
63
- .player-card:hover {
64
- transform: translateY(-3px);
65
- box-shadow: 0 5px 15px rgba(94, 192, 204, 0.3);
66
- }
67
- .starter-card {
68
- border-top: 4px solid #5ec0cc;
69
- }
70
- .substitute-card {
71
- border-top: 4px solid #333333;
72
- }
73
- .modal {
74
- display: none;
75
- position: fixed;
76
- top: 0;
77
- left: 0;
78
- width: 100%;
79
- height: 100%;
80
- background-color: rgba(0, 0, 0, 0.8);
81
- z-index: 1000;
82
- justify-content: center;
83
- align-items: center;
84
- }
85
- .modal-content {
86
- background-color: #1e1e1e;
87
- border-radius: 8px;
88
- width: 90%;
89
- max-width: 600px;
90
- max-height: 90vh;
91
- overflow-y: auto;
92
- position: relative;
93
- }
94
- .close-modal {
95
- position: absolute;
96
- top: 15px;
97
- right: 15px;
98
- font-size: 24px;
99
- cursor: pointer;
100
- color: #ffffff;
101
- }
102
- @media (max-width: 768px) {
103
- .team-grid {
104
- grid-template-columns: 1fr;
105
- }
106
- }
107
- @media (min-width: 769px) and (max-width: 1023px) {
108
- .team-grid {
109
- grid-template-columns: repeat(2, 1fr);
110
- }
111
- }
112
- @media (min-width: 1024px) {
113
- .team-grid {
114
- grid-template-columns: repeat(3, 1fr);
115
- }
116
- }
117
  </style>
118
  </head>
119
  <body class="bg-dark text-white">
@@ -204,45 +144,227 @@
204
  </div>
205
  </div>
206
  </section>
 
207
  <!-- Team Structure Section -->
208
  <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
209
  <div class="container mx-auto px-4">
210
  <h2 class="text-3xl font-bold text-primary mb-8">OUR TEAMS</h2>
211
 
212
  <!-- Tabs -->
213
- <div class="flex mb-8 border-b border-[#333333]">
214
- <button id="juniorsTab" class="py-3 px-6 text-[#333333]">Juniors (Grades 6-8)</button>
215
- <button id="seniorsTab" class="tab-active py-3 px-6 text-[#5ec0cc]">Seniors (Grades 9-12)</button>
216
  </div>
217
 
218
- <!-- Filters -->
219
- <div class="flex flex-wrap gap-4 mb-8">
220
- <div class="flex gap-2">
221
- <button id="genderAll" class="filter-active py-2 px-4 bg-[#5ec0cc] text-[#121212] rounded">All</button>
222
- <button id="genderFemale" class="py-2 px-4 bg-[#333333] text-white rounded">Female</button>
223
- <button id="genderMale" class="py-2 px-4 bg-[#333333] text-white rounded">Male</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
224
  </div>
225
 
226
- <select id="teamFilter" class="bg-[#333333] text-white py-2 px-4 rounded">
227
- <option value="all">All Teams</option>
228
- <option value="A">Team A</option>
229
- <option value="B">Team B</option>
230
- </select>
231
-
232
- <select id="statusFilter" class="bg-[#333333] text-white py-2 px-4 rounded">
233
- <option value="all">All Players</option>
234
- <option value="starters">Starters</option>
235
- <option value="substitutes">Substitutes</option>
236
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
238
 
239
- <!-- Team Grid -->
240
- <div id="teamGrid" class="team-grid gap-8 mb-12">
241
- <!-- Teams will be dynamically populated here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242
  </div>
243
  </div>
244
  </section>
245
- <!-- Schedule Section -->
 
246
  <section class="py-16 border-b border-[#2e2e2e]">
247
  <div class="container mx-auto px-4">
248
  <h2 class="text-3xl font-bold text-primary mb-8">2025-2026 SCHEDULE</h2>
@@ -458,332 +580,24 @@
458
  </div>
459
  </div>
460
  </footer>
461
- <!-- Player Modal -->
462
- <div id="playerModal" class="modal">
463
- <div class="modal-content p-6">
464
- <span class="close-modal">&times;</span>
465
- <div id="modalContent">
466
- <!-- Modal content will be populated dynamically -->
467
- </div>
468
- </div>
469
- </div>
470
 
471
  <script>
472
  feather.replace();
473
 
474
- // Player data
475
- const players = [
476
- // Junior Male A Team
477
- { id: 1, name: "CHING, Pisey", jersey: 12, position: "PG", grade: "Grade 8", height: "165cm", team: "A", gender: "Male", status: "starter", ppg: 12.4, rpg: 4.2, apg: 3.1, years: 2, bio: "Pisey is a skilled point guard with excellent court vision and leadership qualities. He has been with the team for 2 years and continues to improve his game." },
478
- { id: 2, name: "Eung Sen Samnorb (Somnorb)", jersey: 23, position: "SF", grade: "Grade 7", height: "170cm", team: "A", gender: "Male", status: "starter", ppg: 15.2, rpg: 6.1, apg: 2.3, years: 1, bio: "Somnorb is a versatile forward who can play multiple positions. His athleticism and defensive skills make him a valuable asset to the team." },
479
- { id: 3, name: "Yuan Yi-Hua (Allan)", jersey: 33, position: "C", grade: "Grade 8", height: "175cm", team: "A", gender: "Male", status: "starter", ppg: 10.8, rpg: 8.4, apg: 1.2, years: 2, bio: "Allan is a dominant presence in the paint with excellent rebounding ability. His shot-blocking skills have improved significantly this season." },
480
- { id: 4, name: "Nie Zifeng", jersey: 11, position: "SG", grade: "Grade 6", height: "160cm", team: "A", gender: "Male", status: "substitute", ppg: 8.7, rpg: 3.2, apg: 1.8, years: 1, bio: "Zifeng is a sharpshooter who provides valuable three-point shooting off the bench. He works hard in practice to earn more playing time." },
481
- { id: 5, name: "Danh Konvisoth (Visoth)", jersey: 5, position: "PF", grade: "Grade 7", height: "168cm", team: "A", gender: "Male", status: "starter", ppg: 13.5, rpg: 7.8, apg: 1.5, years: 2, bio: "Visoth is a strong power forward with excellent footwork in the post. His basketball IQ helps him make smart decisions on both ends of the court." },
482
- { id: 6, name: "Prince", jersey: 2, position: "PG", grade: "Grade 6", height: "158cm", team: "A", gender: "Male", status: "substitute", ppg: 6.4, rpg: 2.1, apg: 3.2, years: 1, bio: "Prince is a quick point guard with good ball-handling skills. He's still developing his game but shows great potential for the future." },
483
- { id: 7, name: "Te Ronald Vattanac (Ronald)", jersey: 42, position: "C", grade: "Grade 8", height: "178cm", team: "A", gender: "Male", status: "substitute", ppg: 9.3, rpg: 6.7, apg: 0.8, years: 2, bio: "Ronald provides depth in the frontcourt with his size and rebounding ability. He's a reliable backup who gives the team energy when called upon." },
484
-
485
- // Junior Male B Team
486
- { id: 8, name: "Pheng Aaron", jersey: 15, position: "SG", grade: "Grade 6", height: "155cm", team: "B", gender: "Male", status: "starter", ppg: 11.2, rpg: 3.8, apg: 2.1, years: 1, bio: "Aaron is a promising young guard with good shooting touch. He's working to improve his defensive skills and court awareness." },
487
- { id: 9, name: "Reth Rithisak", jersey: 8, position: "SF", grade: "Grade 7", height: "165cm", team: "B", gender: "Male", status: "starter", ppg: 14.1, rpg: 5.2, apg: 2.8, years: 2, bio: "Rithisak is a versatile wing player who can score from multiple positions. His basketball instincts have developed significantly this season." },
488
- { id: 10, name: "Nlron", jersey: 22, position: "PF", grade: "Grade 6", height: "162cm", team: "B", gender: "Male", status: "substitute", ppg: 7.6, rpg: 4.3, apg: 1.1, years: 1, bio: "Nlron is a hard-working forward who brings energy and hustle to the team. He's focused on improving his offensive moves and conditioning." },
489
- { id: 11, name: "Ly Sovita", jersey: 35, position: "C", grade: "Grade 7", height: "170cm", team: "B", gender: "Male", status: "starter", ppg: 12.7, rpg: 7.2, apg: 1.4, years: 2, bio: "Sovita is a skilled big man with good footwork and passing ability. His basketball IQ helps him make smart decisions on both ends of the court." },
490
- { id: 12, name: "Te Ronald Vattanac (Ronald)", jersey: 42, position: "C", grade: "Grade 8", height: "178cm", team: "B", gender: "Male", status: "substitute", ppg: 9.3, rpg: 6.7, apg: 0.8, years: 2, bio: "Ronald provides depth in the frontcourt with his size and rebounding ability. He's a reliable backup who gives the team energy when called upon." },
491
-
492
- // Junior Female A Team
493
- { id: 13, name: "Hav Chansabrina (Sabrina)", jersey: 10, position: "PG", grade: "Grade 7", height: "160cm", team: "A", gender: "Female", status: "starter", ppg: 13.8, rpg: 4.5, apg: 5.2, years: 2, bio: "Sabrina is an excellent point guard with exceptional court vision and leadership skills. She's the team's primary playmaker and floor general." },
494
- { id: 14, name: "Zhang Zhiling (Zhilling)", jersey: 24, position: "SG", grade: "Grade 6", height: "158cm", team: "A", gender: "Female", status: "starter", ppg: 16.3, rpg: 3.7, apg: 2.4, years: 1, bio: "Zhilling is a sharpshooter who can score from anywhere on the court. Her three-point shooting ability stretches defenses and creates opportunities for teammates." },
495
- { id: 15, name: "Lina Jin Xi", jersey: 32, position: "SF", grade: "Grade 7", height: "165cm", team: "A", gender: "Female", status: "starter", ppg: 14.2, rpg: 6.8, apg: 3.1, years: 2, bio: "Lina is a versatile wing player who can play multiple positions. Her basketball IQ and defensive skills make her a valuable two-way player." },
496
- { id: 16, name: "Francesca Dean", jersey: 44, position: "PF", grade: "Grade 8", height: "168cm", team: "A", gender: "Female", status: "substitute", ppg: 8.9, rpg: 5.4, apg: 1.7, years: 2, bio: "Francesca is a strong power forward with excellent rebounding ability. She's working to improve her offensive game and post moves." },
497
- { id: 17, name: "He Jiajing", jersey: 55, position: "C", grade: "Grade 6", height: "162cm", team: "A", gender: "Female", status: "substitute", ppg: 7.4, rpg: 4.8, apg: 0.9, years: 1, bio: "Jiajing is a promising young center with good size and potential. She's focused on improving her fundamentals and conditioning." },
498
-
499
- // Junior Female B Team
500
- { id: 18, name: "Jing Yuan (Xing Xing)", jersey: 6, position: "PG", grade: "Grade 6", height: "155cm", team: "B", gender: "Female", status: "starter", ppg: 11.7, rpg: 3.9, apg: 4.8, years: 1, bio: "Xing Xing is a quick point guard with excellent ball-handling skills. She's learning to be more assertive on offense while maintaining her strong playmaking ability." },
501
- { id: 19, name: "Ly Sovita", jersey: 35, position: "SF", grade: "Grade 7", height: "165cm", team: "B", gender: "Female", status: "starter", ppg: 12.9, rpg: 5.7, apg: 2.6, years: 2, bio: "Sovita is a versatile wing player with good size and athleticism. Her defensive versatility allows her to guard multiple positions." },
502
-
503
- // Senior teams (placeholders)
504
- { id: 20, name: "PLAYER, First", jersey: 1, position: "PG", grade: "Grade 12", height: "175cm", team: "A", gender: "Male", status: "starter", ppg: 14.2, rpg: 3.8, apg: 5.1, years: 4, bio: "A seasoned point guard with excellent leadership skills and court vision." },
505
- { id: 21, name: "PLAYER, First", jersey: 2, position: "SG", grade: "Grade 11", height: "178cm", team: "A", gender: "Male", status: "starter", ppg: 16.7, rpg: 4.2, apg: 2.8, years: 3, bio: "A sharpshooter with the ability to score from anywhere on the court." },
506
- { id: 22, name: "PLAYER, First", jersey: 3, position: "SF", grade: "Grade 12", height: "180cm", team: "A", gender: "Male", status: "starter", ppg: 13.9, rpg: 6.4, apg: 3.2, years: 4, bio: "A versatile wing player who can impact the game in multiple ways." },
507
- { id: 23, name: "PLAYER, First", jersey: 4, position: "PF", grade: "Grade 10", height: "182cm", team: "A", gender: "Male", status: "substitute", ppg: 9.6, rpg: 5.8, apg: 1.4, years: 2, bio: "A strong power forward with excellent rebounding ability." },
508
- { id: 24, name: "PLAYER, First", jersey: 5, position: "C", grade: "Grade 11", height: "185cm", team: "A", gender: "Male", status: "starter", ppg: 11.3, rpg: 8.2, apg: 1.9, years: 3, bio: "A dominant presence in the paint with excellent shot-blocking ability." },
509
- { id: 25, name: "PLAYER, First", jersey: 6, position: "PG", grade: "Grade 10", height: "172cm", team: "B", gender: "Male", status: "starter", ppg: 12.8, rpg: 3.5, apg: 4.7, years: 2, bio: "A skilled point guard with good ball-handling and playmaking skills." },
510
- { id: 26, name: "PLAYER, First", jersey: 7, position: "SG", grade: "Grade 12", height: "177cm", team: "B", gender: "Male", status: "substitute", ppg: 8.4, rpg: 2.9, apg: 1.8, years: 4, bio: "A reliable scorer who provides valuable minutes off the bench." },
511
- { id: 27, name: "PLAYER, First", jersey: 8, position: "SF", grade: "Grade 9", height: "175cm", team: "B", gender: "Male", status: "starter", ppg: 15.1, rpg: 5.3, apg: 2.4, years: 1, bio: "A promising young wing player with excellent athleticism." },
512
- { id: 28, name: "PLAYER, First", jersey: 9, position: "PF", grade: "Grade 11", height: "180cm", team: "B", gender: "Male", status: "substitute", ppg: 7.9, rpg: 4.6, apg: 1.1, years: 3, bio: "A hard-working forward who brings energy and hustle to the team." },
513
- { id: 29, name: "PLAYER, First", jersey: 10, position: "C", grade: "Grade 10", height: "183cm", team: "B", gender: "Male", status: "starter", ppg: 10.7, rpg: 7.5, apg: 1.3, years: 2, bio: "A skilled big man with good footwork and passing ability." },
514
- { id: 30, name: "PLAYER, First", jersey: 11, position: "PG", grade: "Grade 12", height: "170cm", team: "A", gender: "Female", status: "starter", ppg: 13.4, rpg: 4.1, apg: 6.2, years: 4, bio: "An excellent point guard with exceptional court vision and leadership skills." },
515
- { id: 31, name: "PLAYER, First", jersey: 12, position: "SG", grade: "Grade 11", height: "168cm", team: "A", gender: "Female", status: "starter", ppg: 15.8, rpg: 3.9, apg: 2.7, years: 3, bio: "A sharpshooter who can score from anywhere on the court." },
516
- { id: 32, name: "PLAYER, First", jersey: 13, position: "SF", grade: "Grade 12", height: "172cm", team: "A", gender: "Female", status: "starter", ppg: 14.6, rpg: 6.1, apg: 3.8, years: 4, bio: "A versatile wing player who can impact the game in multiple ways." },
517
- { id: 33, name: "PLAYER, First", jersey: 14, position: "PF", grade: "Grade 10", height: "175cm", team: "A", gender: "Female", status: "substitute", ppg: 9.2, rpg: 5.4, apg: 1.6, years: 2, bio: "A strong power forward with excellent rebounding ability." },
518
- { id: 34, name: "PLAYER, First", jersey: 15, position: "C", grade: "Grade 11", height: "178cm", team: "A", gender: "Female", status: "starter", ppg: 11.9, rpg: 8.7, apg: 2.1, years: 3, bio: "A dominant presence in the paint with excellent shot-blocking ability." },
519
- { id: 35, name: "PLAYER, First", jersey: 16, position: "PG", grade: "Grade 10", height: "167cm", team: "B", gender: "Female", status: "starter", ppg: 12.3, rpg: 3.7, apg: 5.4, years: 2, bio: "A skilled point guard with good ball-handling and playmaking skills." },
520
- { id: 36, name: "PLAYER, First", jersey: 17, position: "SG", grade: "Grade 12", height: "170cm", team: "B", gender: "Female", status: "substitute", ppg: 8.1, rpg: 3.1, apg: 1.9, years: 4, bio: "A reliable scorer who provides valuable minutes off the bench." },
521
- { id: 37, name: "PLAYER, First", jersey: 18, position: "SF", grade: "Grade 9", height: "168cm", team: "B", gender: "Female", status: "starter", ppg: 14.8, rpg: 5.1, apg: 2.9, years: 1, bio: "A promising young wing player with excellent athleticism." },
522
- { id: 38, name: "PLAYER, First", jersey: 19, position: "PF", grade: "Grade 11", height: "173cm", team: "B", gender: "Female", status: "substitute", ppg: 7.6, rpg: 4.3, apg: 1.3, years: 3, bio: "A hard-working forward who brings energy and hustle to the team." },
523
- { id: 39, name: "PLAYER, First", jersey: 20, position: "C", grade: "Grade 10", height: "176cm", team: "B", gender: "Female", status: "starter", ppg: 10.4, rpg: 7.2, apg: 1.7, years: 2, bio: "A skilled big man with good footwork and passing ability." }
524
- ];
525
-
526
- // Team structure
527
- const teams = [
528
- { name: "Female A", gender: "Female", team: "A" },
529
- { name: "Male A", gender: "Male", team: "A" },
530
- { name: "Female B", gender: "Female", team: "B" },
531
- { name: "Male B", gender: "Male", team: "B" }
532
- ];
533
-
534
- // State management
535
- let currentState = {
536
- level: "seniors",
537
- gender: "all",
538
- team: "all",
539
- status: "all"
540
- };
541
-
542
- // DOM elements
543
- const juniorsTab = document.getElementById('juniorsTab');
544
- const seniorsTab = document.getElementById('seniorsTab');
545
- const genderAll = document.getElementById('genderAll');
546
- const genderFemale = document.getElementById('genderFemale');
547
- const genderMale = document.getElementById('genderMale');
548
- const teamFilter = document.getElementById('teamFilter');
549
- const statusFilter = document.getElementById('statusFilter');
550
- const teamGrid = document.getElementById('teamGrid');
551
- const playerModal = document.getElementById('playerModal');
552
- const modalContent = document.getElementById('modalContent');
553
- const closeModal = document.querySelector('.close-modal');
554
-
555
  // Tab functionality
556
- juniorsTab.addEventListener('click', function() {
557
- this.classList.add('tab-active', 'text-[#5ec0cc]');
558
- this.classList.remove('text-[#333333]');
559
- seniorsTab.classList.remove('tab-active', 'text-[#5ec0cc]');
560
- seniorsTab.classList.add('text-[#333333]');
561
- currentState.level = "juniors";
562
- updateFilters();
563
- renderTeams();
564
- });
565
-
566
- seniorsTab.addEventListener('click', function() {
567
- this.classList.add('tab-active', 'text-[#5ec0cc]');
568
- this.classList.remove('text-[#333333]');
569
- juniorsTab.classList.remove('tab-active', 'text-[#5ec0cc]');
570
- juniorsTab.classList.add('text-[#333333]');
571
- currentState.level = "seniors";
572
- updateFilters();
573
- renderTeams();
574
- });
575
-
576
- // Filter functionality
577
- genderAll.addEventListener('click', function() {
578
- setGenderFilter('all');
579
- });
580
-
581
- genderFemale.addEventListener('click', function() {
582
- setGenderFilter('female');
583
- });
584
-
585
- genderMale.addEventListener('click', function() {
586
- setGenderFilter('male');
587
- });
588
-
589
- teamFilter.addEventListener('change', function() {
590
- currentState.team = this.value;
591
- renderTeams();
592
- });
593
-
594
- statusFilter.addEventListener('change', function() {
595
- currentState.status = this.value;
596
- renderTeams();
597
  });
598
-
599
- function setGenderFilter(gender) {
600
- // Update button states
601
- genderAll.classList.remove('filter-active', 'bg-[#5ec0cc]', 'text-[#121212]');
602
- genderAll.classList.add('bg-[#333333]', 'text-white');
603
- genderFemale.classList.remove('filter-active', 'bg-[#5ec0cc]', 'text-[#121212]');
604
- genderFemale.classList.add('bg-[#333333]', 'text-white');
605
- genderMale.classList.remove('filter-active', 'bg-[#5ec0cc]', 'text-[#121212]');
606
- genderMale.classList.add('bg-[#333333]', 'text-white');
607
-
608
- // Set active button
609
- if (gender === 'all') {
610
- genderAll.classList.add('filter-active', 'bg-[#5ec0cc]', 'text-[#121212]');
611
- genderAll.classList.remove('bg-[#333333]', 'text-white');
612
- } else if (gender === 'female') {
613
- genderFemale.classList.add('filter-active', 'bg-[#5ec0cc]', 'text-[#121212]');
614
- genderFemale.classList.remove('bg-[#333333]', 'text-white');
615
- } else if (gender === 'male') {
616
- genderMale.classList.add('filter-active', 'bg-[#5ec0cc]', 'text-[#121212]');
617
- genderMale.classList.remove('bg-[#333333]', 'text-white');
618
- }
619
-
620
- currentState.gender = gender;
621
- renderTeams();
622
- }
623
-
624
- // Update filters based on current state
625
- function updateFilters() {
626
- // Reset filters when changing levels
627
- teamFilter.value = "all";
628
- statusFilter.value = "all";
629
- currentState.team = "all";
630
- currentState.status = "all";
631
- setGenderFilter("all");
632
- }
633
-
634
- // Render teams based on current filters
635
- function renderTeams() {
636
- teamGrid.innerHTML = '';
637
-
638
- // Filter teams based on current level
639
- const filteredTeams = teams.filter(team => {
640
- // For now, show all teams (in a real implementation, you might filter by level)
641
- return true;
642
- });
643
-
644
- // Filter players based on current state
645
- const filteredPlayers = players.filter(player => {
646
- // Level filter (juniors = grades 6-8, seniors = grades 9-12)
647
- const isJunior = player.grade.includes("Grade 6") || player.grade.includes("Grade 7") || player.grade.includes("Grade 8");
648
- if (currentState.level === "juniors" && !isJunior) return false;
649
- if (currentState.level === "seniors" && isJunior) return false;
650
-
651
- // Gender filter
652
- if (currentState.gender !== "all" && player.gender.toLowerCase() !== currentState.gender) return false;
653
-
654
- // Team filter
655
- if (currentState.team !== "all" && player.team !== currentState.team.toUpperCase()) return false;
656
-
657
- // Status filter
658
- if (currentState.status !== "all" && player.status !== currentState.status) return false;
659
-
660
- return true;
661
- });
662
-
663
- // Create team columns
664
- filteredTeams.forEach(team => {
665
- const teamColumn = document.createElement('div');
666
- teamColumn.className = 'team-column';
667
-
668
- const teamTitle = document.createElement('h3');
669
- teamTitle.className = 'text-xl font-bold mb-4 text-[#5ec0cc]';
670
- teamTitle.textContent = team.name;
671
- teamColumn.appendChild(teamTitle);
672
-
673
- // Filter players for this team
674
- const teamPlayers = filteredPlayers.filter(player =>
675
- player.gender === team.gender && player.team === team.team
676
- );
677
-
678
- // Create player grid for this team
679
- const playerGrid = document.createElement('div');
680
- playerGrid.className = 'grid grid-cols-1 gap-6';
681
-
682
- teamPlayers.forEach(player => {
683
- const playerCard = document.createElement('div');
684
- playerCard.className = `player-card p-4 ${player.status === 'starter' ? 'starter-card' : 'substitute-card'}`;
685
- playerCard.dataset.playerId = player.id;
686
-
687
- // Player content
688
- playerCard.innerHTML = `
689
- <div class="flex items-center mb-3">
690
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mr-3" />
691
- <div>
692
- <div class="text-2xl font-bold text-[#5ec0cc]">#${player.jersey}</div>
693
- <div class="text-sm text-gray-400">${player.position} | ${player.grade}</div>
694
- </div>
695
- </div>
696
- <h4 class="text-lg font-bold mb-1">${player.name}</h4>
697
- <div class="text-sm text-gray-400">${player.height}</div>
698
- <div class="absolute top-2 right-2">
699
- <span class="text-xs px-2 py-1 rounded ${player.status === 'starter' ? 'bg-[#5ec0cc] text-[#121212]' : 'bg-[#333333] text-white'}">
700
- ${player.status === 'starter' ? 'Starter' : 'Substitute'}
701
- </span>
702
- </div>
703
- `;
704
-
705
- // Add click event to open modal
706
- playerCard.addEventListener('click', () => openPlayerModal(player.id));
707
-
708
- playerGrid.appendChild(playerCard);
709
- });
710
-
711
- teamColumn.appendChild(playerGrid);
712
- teamGrid.appendChild(teamColumn);
713
- });
714
- }
715
-
716
- // Open player modal
717
- function openPlayerModal(playerId) {
718
- const player = players.find(p => p.id == playerId);
719
- if (!player) return;
720
-
721
- modalContent.innerHTML = `
722
- <div class="flex flex-col md:flex-row">
723
- <div class="md:w-1/3 mb-4 md:mb-0">
724
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-64" />
725
- </div>
726
- <div class="md:w-2/3 md:pl-6">
727
- <h2 class="text-2xl font-bold mb-2">${player.name}</h2>
728
- <div class="grid grid-cols-2 gap-2 mb-4">
729
- <div><span class="font-bold">Position:</span> ${player.position}</div>
730
- <div><span class="font-bold">Grade:</span> ${player.grade}</div>
731
- <div><span class="font-bold">Height:</span> ${player.height}</div>
732
- <div><span class="font-bold">Jersey:</span> #${player.jersey}</div>
733
- <div><span class="font-bold">Status:</span> ${player.status.charAt(0).toUpperCase() + player.status.slice(1)}</div>
734
- <div><span class="font-bold">Years on Team:</span> ${player.years}</div>
735
- </div>
736
-
737
- <h3 class="text-xl font-bold mb-2">Statistics</h3>
738
- <div class="grid grid-cols-3 gap-4 mb-4">
739
- <div class="bg-[#121212] p-3 rounded text-center">
740
- <div class="text-2xl font-bold text-[#5ec0cc]">${player.ppg}</div>
741
- <div class="text-sm">PPG</div>
742
- </div>
743
- <div class="bg-[#121212] p-3 rounded text-center">
744
- <div class="text-2xl font-bold text-[#5ec0cc]">${player.rpg}</div>
745
- <div class="text-sm">RPG</div>
746
- </div>
747
- <div class="bg-[#121212] p-3 rounded text-center">
748
- <div class="text-2xl font-bold text-[#5ec0cc]">${player.apg}</div>
749
- <div class="text-sm">APG</div>
750
- </div>
751
- </div>
752
-
753
- <h3 class="text-xl font-bold mb-2">Bio</h3>
754
- <p>${player.bio}</p>
755
- </div>
756
- </div>
757
- `;
758
-
759
- playerModal.style.display = 'flex';
760
-
761
- // Focus trap for accessibility
762
- const firstFocusable = modalContent.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
763
- if (firstFocusable) firstFocusable.focus();
764
- }
765
-
766
- // Close modal
767
- closeModal.addEventListener('click', () => {
768
- playerModal.style.display = 'none';
769
- });
770
-
771
- // Close modal when clicking outside content
772
- playerModal.addEventListener('click', (e) => {
773
- if (e.target === playerModal) {
774
- playerModal.style.display = 'none';
775
- }
776
- });
777
-
778
- // Close modal with Escape key
779
- document.addEventListener('keydown', (e) => {
780
- if (e.key === 'Escape' && playerModal.style.display === 'flex') {
781
- playerModal.style.display = 'none';
782
- }
783
  });
784
-
785
- // Initialize the page
786
- renderTeams();
787
 
788
  // Mobile menu toggle
789
  document.getElementById('menu-toggle').addEventListener('click', function() {
 
39
  object-fit: cover;
40
  z-index: -1;
41
  }
42
+ .player-card:hover {
43
+ transform: translateY(-5px);
44
+ transition: all 0.3s ease;
45
+ }
46
  .tab-active {
47
+ background-color: #5ec0cc;
48
+ color: #0a0a0a;
49
  }
50
  .schedule-item:hover {
51
  background-color: #1e1e1e;
 
54
  transform: scale(1.05);
55
  transition: all 0.3s ease;
56
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  </style>
58
  </head>
59
  <body class="bg-dark text-white">
 
144
  </div>
145
  </div>
146
  </section>
147
+
148
  <!-- Team Structure Section -->
149
  <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
150
  <div class="container mx-auto px-4">
151
  <h2 class="text-3xl font-bold text-primary mb-8">OUR TEAMS</h2>
152
 
153
  <!-- Tabs -->
154
+ <div class="flex mb-8 border-b border-[#2e2e2e]">
155
+ <button id="juniorsTab" class="tab-active py-2 px-6 font-bold rounded-t">Juniors (Grades 6-8)</button>
156
+ <button id="seniorsTab" class="py-2 px-6 font-bold rounded-t">Seniors (Grades 9-12)</button>
157
  </div>
158
 
159
+ <!-- Juniors Content -->
160
+ <div id="juniorsContent">
161
+ <div class="mb-12">
162
+ <h3 class="text-2xl font-bold mb-6 text-secondary">Team A Roster</h3>
163
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
164
+ <!-- Player 1 -->
165
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
166
+ <img src="http://static.photos/people/320x240/1" alt="Pisey Ching" class="w-full h-48 object-cover">
167
+ <div class="p-4">
168
+ <h4 class="font-bold text-lg">Pisey Ching</h4>
169
+ <p class="text-secondary">Position: Guard</p>
170
+ <p>Height: 5'6"</p>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Player 2 -->
175
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
176
+ <img src="http://static.photos/people/320x240/2" alt="Eung Sen Samnorb (Somnorb)" class="w-full h-48 object-cover">
177
+ <div class="p-4">
178
+ <h4 class="font-bold text-lg">Eung Sen Samnorb (Somnorb)</h4>
179
+ <p class="text-secondary">Position: Forward</p>
180
+ <p>Height: 5'8"</p>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Player 3 -->
185
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
186
+ <img src="http://static.photos/people/320x240/3" alt="Yuan Yi-Hua (Allan)" class="w-full h-48 object-cover">
187
+ <div class="p-4">
188
+ <h4 class="font-bold text-lg">Yuan Yi-Hua (Allan)</h4>
189
+ <p class="text-secondary">Position: Center</p>
190
+ <p>Height: 5'10"</p>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Player 4 -->
195
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
196
+ <img src="http://static.photos/people/320x240/4" alt="Nie Zifeng" class="w-full h-48 object-cover">
197
+ <div class="p-4">
198
+ <h4 class="font-bold text-lg">Nie Zifeng</h4>
199
+ <p class="text-secondary">Position: Guard</p>
200
+ <p>Height: 5'5"</p>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Player 5 -->
205
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
206
+ <img src="http://static.photos/people/320x240/5" alt="Danh Konvisoth (Visoth)" class="w-full h-48 object-cover">
207
+ <div class="p-4">
208
+ <h4 class="font-bold text-lg">Danh Konvisoth (Visoth)</h4>
209
+ <p class="text-secondary">Position: Forward</p>
210
+ <p>Height: 5'7"</p>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Player 6 -->
215
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
216
+ <img src="http://static.photos/people/320x240/6" alt="Prince" class="w-full h-48 object-cover">
217
+ <div class="p-4">
218
+ <h4 class="font-bold text-lg">Prince</h4>
219
+ <p class="text-secondary">Position: Guard</p>
220
+ <p>Height: 5'4"</p>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Player 7 -->
225
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
226
+ <img src="http://static.photos/people/320x240/7" alt="Te Ronald Vattanac (Ronald)" class="w-full h-48 object-cover">
227
+ <div class="p-4">
228
+ <h4 class="font-bold text-lg">Te Ronald Vattanac (Ronald)</h4>
229
+ <p class="text-secondary">Position: Center</p>
230
+ <p>Height: 5'9"</p>
231
+ </div>
232
+ </div>
233
+ </div>
234
  </div>
235
 
236
+ <div>
237
+ <h3 class="text-2xl font-bold mb-6 text-secondary">Team B Roster</h3>
238
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
239
+ <!-- Player 1 -->
240
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
241
+ <img src="http://static.photos/people/320x240/8" alt="Pheng Aaron" class="w-full h-48 object-cover">
242
+ <div class="p-4">
243
+ <h4 class="font-bold text-lg">Pheng Aaron</h4>
244
+ <p class="text-secondary">Position: Guard</p>
245
+ <p>Height: 5'3"</p>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Player 2 -->
250
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
251
+ <img src="http://static.photos/people/320x240/9" alt="Reth Rithisak" class="w-full h-48 object-cover">
252
+ <div class="p-4">
253
+ <h4 class="font-bold text-lg">Reth Rithisak</h4>
254
+ <p class="text-secondary">Position: Forward</p>
255
+ <p>Height: 5'6"</p>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Player 3 -->
260
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
261
+ <img src="http://static.photos/people/320x240/10" alt="Hav Chansabrina (Sabrina)" class="w-full h-48 object-cover">
262
+ <div class="p-4">
263
+ <h4 class="font-bold text-lg">Hav Chansabrina (Sabrina)</h4>
264
+ <p class="text-secondary">Position: Guard</p>
265
+ <p>Height: 5'2"</p>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Player 4 -->
270
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
271
+ <img src="http://static.photos/people/320x240/11" alt="Nlron" class="w-full h-48 object-cover">
272
+ <div class="p-4">
273
+ <h4 class="font-bold text-lg">Nlron</h4>
274
+ <p class="text-secondary">Position: Forward</p>
275
+ <p>Height: 5'5"</p>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Player 5 -->
280
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
281
+ <img src="http://static.photos/people/320x240/12" alt="Ly Sovita" class="w-full h-48 object-cover">
282
+ <div class="p-4">
283
+ <h4 class="font-bold text-lg">Ly Sovita</h4>
284
+ <p class="text-secondary">Position: Center</p>
285
+ <p>Height: 5'7"</p>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Player 6 -->
290
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
291
+ <img src="http://static.photos/people/320x240/13" alt="Zhang Zhiling (Zhilling)" class="w-full h-48 object-cover">
292
+ <div class="p-4">
293
+ <h4 class="font-bold text-lg">Zhang Zhiling (Zhilling)</h4>
294
+ <p class="text-secondary">Position: Guard</p>
295
+ <p>Height: 5'3"</p>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Player 7 -->
300
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
301
+ <img src="http://static.photos/people/320x240/14" alt="Lina Jin Xi" class="w-full h-48 object-cover">
302
+ <div class="p-4">
303
+ <h4 class="font-bold text-lg">Lina Jin Xi</h4>
304
+ <p class="text-secondary">Position: Forward</p>
305
+ <p>Height: 5'4"</p>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Player 8 -->
310
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
311
+ <img src="http://static.photos/people/320x240/15" alt="Jing Yuan (Xing Xing)" class="w-full h-48 object-cover">
312
+ <div class="p-4">
313
+ <h4 class="font-bold text-lg">Jing Yuan (Xing Xing)</h4>
314
+ <p class="text-secondary">Position: Guard</p>
315
+ <p>Height: 5'2"</p>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Player 9 -->
320
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
321
+ <img src="http://static.photos/people/320x240/16" alt="Francesca Dean" class="w-full h-48 object-cover">
322
+ <div class="p-4">
323
+ <h4 class="font-bold text-lg">Francesca Dean</h4>
324
+ <p class="text-secondary">Position: Forward</p>
325
+ <p>Height: 5'5"</p>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Player 10 -->
330
+ <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
331
+ <img src="http://static.photos/people/320x240/17" alt="He Jiajing" class="w-full h-48 object-cover">
332
+ <div class="p-4">
333
+ <h4 class="font-bold text-lg">He Jiajing</h4>
334
+ <p class="text-secondary">Position: Center</p>
335
+ <p>Height: 5'6"</p>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
  </div>
341
 
342
+ <!-- Seniors Content -->
343
+ <div id="seniorsContent" class="hidden">
344
+ <div class="mb-12">
345
+ <h3 class="text-2xl font-bold mb-6 text-secondary">Team A Roster</h3>
346
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
347
+ <div class="bg-[#1e1e1e] rounded-lg p-8 text-center">
348
+ <i data-feather="users" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
349
+ <p>Roster coming soon for 2025-2026 season</p>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <div>
355
+ <h3 class="text-2xl font-bold mb-6 text-secondary">Team B Roster</h3>
356
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
357
+ <div class="bg-[#1e1e1e] rounded-lg p-8 text-center">
358
+ <i data-feather="users" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
359
+ <p>Roster coming soon for 2025-2026 season</p>
360
+ </div>
361
+ </div>
362
+ </div>
363
  </div>
364
  </div>
365
  </section>
366
+
367
+ <!-- Schedule Section -->
368
  <section class="py-16 border-b border-[#2e2e2e]">
369
  <div class="container mx-auto px-4">
370
  <h2 class="text-3xl font-bold text-primary mb-8">2025-2026 SCHEDULE</h2>
 
580
  </div>
581
  </div>
582
  </footer>
 
 
 
 
 
 
 
 
 
583
 
584
  <script>
585
  feather.replace();
586
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
587
  // Tab functionality
588
+ document.getElementById('juniorsTab').addEventListener('click', function() {
589
+ this.classList.add('tab-active');
590
+ document.getElementById('seniorsTab').classList.remove('tab-active');
591
+ document.getElementById('juniorsContent').classList.remove('hidden');
592
+ document.getElementById('seniorsContent').classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
593
  });
594
+
595
+ document.getElementById('seniorsTab').addEventListener('click', function() {
596
+ this.classList.add('tab-active');
597
+ document.getElementById('juniorsTab').classList.remove('tab-active');
598
+ document.getElementById('seniorsContent').classList.remove('hidden');
599
+ document.getElementById('juniorsContent').classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
600
  });
 
 
 
601
 
602
  // Mobile menu toggle
603
  document.getElementById('menu-toggle').addEventListener('click', function() {