mrmo/caf-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add missing gallery and banner images for taekwondo and basketball

Browse Source
This commit is contained in:
CAF-Server
2026-08-17 13:19:47 +00:00
parent 7c205ae143
commit c486684450
2 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
program-basketball.html
View File

@@ -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>