From c48668445043b673a55e009b05ceb39eef98f73d Mon Sep 17 00:00:00 2001
From: CAF-Server <server@caf-academy.com>
Date: Mon, 17 Aug 2026 13:19:47 +0000
Subject: [PATCH] Add missing gallery and banner images for taekwondo and
 basketball

---
 program-basketball.html | 32 ++++++++++++++++++++++++++++----
 program-taekwondo.html  |  4 ++--
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/program-basketball.html b/program-basketball.html
index 8ab5417..d88e564 100644
--- a/program-basketball.html
+++ b/program-basketball.html
@@ -484,7 +484,7 @@
         <a href="https://wa.me/966559695266" class="btn btn-outline" target="_blank" rel="noopener">تواصل عبر واتساب</a>
       </div>
     </div>
-    <div class="banner-visual" style="background:url(images/basketball/basketball-1.webp) center/contain no-repeat, radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), var(--navy-deep);"></div>
+    <div class="banner-visual" style="background:url(images/basketball/1.webp) center/contain no-repeat, radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), var(--navy-deep);"></div>
   </div>
 </section>
 
@@ -504,9 +504,7 @@
         <div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مناسب للمبتدئين والمتقدمين</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مجموعات مقسّمة حسب العمر</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> كرات ومعدات تدريب موحّدة</div>
       </div>
     </div>
-    <div class="desc-visual reveal">
-<div style="width:100%;height:100%;background:url(images/basketball/basketball-1.webp) center/contain no-repeat, radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), var(--navy-deep);"></div>
-    </div>
+    <div class="desc-visual reveal"><div class="prog-slider"><img src="images/basketball/1.webp" alt="" class="active kb"><img src="images/basketball/222.webp" alt="" class=""><img src="images/basketball/2.webp" alt="" class=""><img src="images/basketball/3.webp" alt="" class=""><img src="images/basketball/4.webp" alt="" class=""><img src="images/basketball/5.webp" alt="" class=""><button type="button" class="prog-nav prev" onclick="progSlide(-1)" aria-label="السابق"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M9 6l6-6 6 6"/></svg></button><button type="button" class="prog-nav next" onclick="progSlide(1)" aria-label="التالي"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></button><div class="prog-dots"><button type="button" class="prog-dot active" onclick="progSlideTo(0)" aria-label="صورة 1"></button><button type="button" class="prog-dot" onclick="progSlideTo(1)" aria-label="صورة 2"></button><button type="button" class="prog-dot" onclick="progSlideTo(2)" aria-label="صورة 3"></button><button type="button" class="prog-dot" onclick="progSlideTo(3)" aria-label="صورة 4"></button><button type="button" class="prog-dot" onclick="progSlideTo(4)" aria-label="صورة 5"></button><button type="button" class="prog-dot" onclick="progSlideTo(5)" aria-label="صورة 6"></button></div></div></div>
   </div>
 </section>
 
@@ -760,5 +758,31 @@
 </script>
 
 
+<script>
+  (function(){
+    const imgs = document.querySelectorAll('.prog-slider img');
+    const dots = document.querySelectorAll('.prog-dot');
+    let idx = 0;
+    function show(i){
+      imgs.forEach((img,n)=>{
+        img.classList.toggle('active', n===i);
+        if(n===i){ img.classList.remove('kb'); void img.offsetWidth; img.classList.add('kb'); }
+        else{ img.classList.remove('kb'); }
+      });
+      dots.forEach((d,n)=> d.classList.toggle('active', n===i));
+      idx = i;
+    }
+    window.progSlide = function(dir){
+      show((idx + dir + imgs.length) % imgs.length);
+    };
+    window.progSlideTo = function(i){ show(i); };
+    if(imgs.length > 1){
+      let timer = setInterval(()=>progSlide(1), 5000);
+      const wrap = document.querySelector('.prog-slider');
+      wrap.addEventListener('mouseenter', ()=>clearInterval(timer));
+      wrap.addEventListener('mouseleave', ()=>{ timer = setInterval(()=>progSlide(1), 5000); });
+    }
+  })();
+</script>
 </body>
 </html>
diff --git a/program-taekwondo.html b/program-taekwondo.html
index 98582e5..079491b 100644
--- a/program-taekwondo.html
+++ b/program-taekwondo.html
@@ -501,7 +501,7 @@
         <a href="https://wa.me/966559695266" class="btn btn-outline" target="_blank" rel="noopener">تواصل عبر واتساب</a>
       </div>
     </div>
-    <div class="banner-visual"></div>
+    <div class="banner-visual" style="background:url(images/taekwondo/1.webp) center/contain no-repeat, radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), var(--navy-deep);"></div>
   </div>
 </section>
 
@@ -526,7 +526,7 @@
         <div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> زي تدريب موحّد</div>
       </div>
     </div>
-    <div class="desc-visual reveal"></div>
+    <div class="desc-visual reveal"><div class="prog-slider"><img src="images/taekwondo/1.webp" alt="" class="active kb"><img src="images/taekwondo/2.webp" alt="" class=""><img src="images/taekwondo/3.webp" alt="" class=""><img src="images/taekwondo/4.webp" alt="" class=""><img src="images/taekwondo/5.webp" alt="" class=""><button type="button" class="prog-nav prev" onclick="progSlide(-1)" aria-label="السابق"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M9 6l6-6 6 6"/></svg></button><button type="button" class="prog-nav next" onclick="progSlide(1)" aria-label="التالي"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></button><div class="prog-dots"><button type="button" class="prog-dot active" onclick="progSlideTo(0)" aria-label="صورة 1"></button><button type="button" class="prog-dot" onclick="progSlideTo(1)" aria-label="صورة 2"></button><button type="button" class="prog-dot" onclick="progSlideTo(2)" aria-label="صورة 3"></button><button type="button" class="prog-dot" onclick="progSlideTo(3)" aria-label="صورة 4"></button><button type="button" class="prog-dot" onclick="progSlideTo(4)" aria-label="صورة 5"></button></div></div></div>
   </div>
 </section>