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

Convert testimonials to Google-rated slider and achievements to infinite marquee

Browse Source 
- Add live Google Maps rating badge (4.8, 395 reviews) above testimonials
- Convert 12 testimonial cards from a stacked grid into a single-card auto-advancing slider with nav arrows and dots
- Convert achievements gallery from a static grid into a continuous horizontal marquee with edge fade and hover-to-pause
This commit is contained in:
Line INK
2026-08-27 21:39:51 +03:00
parent 3ef46b681c
commit 5e68a75b46
1 changed files with 128 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
index.html
View File

@@ -277,6 +277,24 @@
.achievements-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:52px;}
.achievements-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);transition:transform .3s ease;}
.achievements-grid img:hover{transform:translateY(-6px);}
.achv-marquee{margin-top:52px;position:relative;overflow:hidden;}
.achv-marquee::before,.achv-marquee::after{
content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none;
}
.achv-marquee::before{right:0;background:linear-gradient(to left, var(--navy-deep), transparent);}
.achv-marquee::after{left:0;background:linear-gradient(to right, var(--navy-deep), transparent);}
.achv-track{display:flex;gap:22px;width:max-content;animation:achvScroll 34s linear infinite;}
.achv-marquee:hover .achv-track{animation-play-state:paused;}
.achv-track img{
height:260px;width:auto;flex-shrink:0;border-radius:16px;object-fit:cover;
box-shadow:0 20px 40px -18px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);
transition:transform .35s ease;
}
.achv-track img:hover{transform:translateY(-8px) scale(1.02);}
@keyframes achvScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .achv-track{animation:none;} }
@media(max-width:700px){ .achv-track img{height:180px;} .achv-marquee::before,.achv-marquee::after{width:50px;} }
.testi-card{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid rgba(11,36,71,.07);}
.stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:14px;}
.testi-card p.txt{font-size:14.5px;color:var(--text);margin-bottom:20px;}
@@ -288,6 +306,37 @@
.testi-person .name{font-weight:700;font-size:14px;color:var(--navy);}
.testi-person .role{font-size:12px;color:var(--gray);}
.google-badge{
display:inline-flex;align-items:center;gap:10px;
background:#fff;border:1px solid rgba(11,36,71,.1);
padding:10px 20px;border-radius:100px;margin-bottom:40px;
box-shadow:0 10px 24px -16px rgba(11,36,71,.3);
}
.google-badge .g-icon{width:20px;height:20px;flex-shrink:0;}
.google-badge .g-score{font-family:'Poppins';font-weight:800;font-size:16px;color:var(--navy);}
.google-badge .g-stars{color:var(--gold);font-size:13px;letter-spacing:1px;}
.google-badge .g-count{font-size:12.5px;color:var(--gray);}
.testi-slider-wrap{position:relative;max-width:720px;margin:0 auto;}
.testi-slider .testi-card{display:none;}
.testi-slider .testi-card.active{display:block;animation:testiFade .5s ease;}
@keyframes testiFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.testi-nav{
position:absolute;top:40%;transform:translateY(-50%);
width:44px;height:44px;border-radius:50%;background:#fff;
border:1px solid rgba(11,36,71,.12);box-shadow:0 10px 24px -12px rgba(11,36,71,.3);
display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;color:var(--navy);
}
.testi-nav.prev{right:-56px;}
.testi-nav.next{left:-56px;}
.testi-dots{display:flex;justify-content:center;gap:8px;margin-top:28px;flex-wrap:wrap;max-width:420px;margin-inline:auto;}
.testi-dot{width:8px;height:8px;border-radius:50%;background:rgba(11,36,71,.18);border:none;cursor:pointer;padding:0;transition:background .2s,width .2s;}
.testi-dot.active{background:var(--gold);width:22px;border-radius:5px;}
@media(max-width:900px){
.testi-nav.prev{right:0;}
.testi-nav.next{left:0;}
}
/* ===== FINAL CTA ===== */
.final-cta{
background:linear-gradient(120deg,var(--black) 0%, var(--navy-deep) 55%, var(--navy) 100%);
@@ -597,16 +646,27 @@
<div class="l">سنوات خبرة</div>
</div>
</div>
<div class="achievements-grid">
<img src="images/achievements/1.webp" alt="بطولة المملكة المفتوحة 2025 — المركز الأول" loading="lazy" class="reveal">
<img src="images/achievements/2.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<img src="images/achievements/3.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<img src="images/achievements/4.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<img src="images/achievements/5.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<img src="images/achievements/6.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<img src="images/achievements/7.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<img src="images/achievements/8.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<img src="images/achievements/9.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy" class="reveal">
<div class="achv-marquee">
<div class="achv-track">
<img src="images/achievements/1.webp" alt="بطولة المملكة المفتوحة 2025 — المركز الأول" loading="lazy">
<img src="images/achievements/2.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/3.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/4.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/5.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/6.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/7.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/8.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/9.webp" alt="من إنجازات أكاديمية الكاف الرياضية" loading="lazy">
<img src="images/achievements/1.webp" alt="بطولة المملكة المفتوحة 2025 — المركز الأول" loading="lazy" aria-hidden="true">
<img src="images/achievements/2.webp" alt="" loading="lazy" aria-hidden="true">
<img src="images/achievements/3.webp" alt="" loading="lazy" aria-hidden="true">
<img src="images/achievements/4.webp" alt="" loading="lazy" aria-hidden="true">
<img src="images/achievements/5.webp" alt="" loading="lazy" aria-hidden="true">
<img src="images/achievements/6.webp" alt="" loading="lazy" aria-hidden="true">
<img src="images/achievements/7.webp" alt="" loading="lazy" aria-hidden="true">
<img src="images/achievements/8.webp" alt="" loading="lazy" aria-hidden="true">
<img src="images/achievements/9.webp" alt="" loading="lazy" aria-hidden="true">
</div>
</div>
</div>
</section>
@@ -616,8 +676,15 @@
<div class="eyebrow">آراء الأهالي</div>
<h2 class="section-title">ماذا يقول أولياء الأمور عنا</h2>
<p class="section-lead">آراء حقيقية من أولياء أمور طلابنا على خرائط جوجل.</p>
<div class="testi-grid">
<div class="testi-card reveal">
<div class="google-badge">
<svg class="g-icon" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.6 32.9 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.1 8 3l5.7-5.7C34.5 6.2 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.2-.1-2.4-.3-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.6 15.9 18.9 13 24 13c3.1 0 5.8 1.1 8 3l5.7-5.7C34.5 6.2 29.5 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/><path fill="#4CAF50" d="M24 44c5.3 0 10.2-2 13.8-5.4l-6.4-5.4C29.4 34.9 26.9 36 24 36c-5.2 0-9.6-3.3-11.2-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.2-4.2 5.6l6.4 5.4C39.9 37.5 44 31.8 44 24c0-1.2-.1-2.4-.4-3.5z"/></svg>
<span class="g-score">4.8</span>
<span class="g-stars">★★★★★</span>
<span class="g-count">من 395 تقييمًا على خرائط جوجل</span>
</div>
<div class="testi-slider-wrap">
<div class="testi-slider">
<div class="testi-card active">
<div class="stars">★★★★★</div>
<p class="txt">"أكاديمية كرة قدم ممتازة! مدربون محترفون، تدريب ممتاز، وأجواء ودية. تحسنت مهاراتي كثيرًا، وأوصي بها بشدة لكل من يحب كرة القدم!"</p>
<div class="testi-person">
@@ -625,7 +692,7 @@
<div><div class="name">Alaa Diyab</div><div class="role">ولي أمر — برنامج كرة القدم</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"سجلت بنتي وولدي سباحة وكيك بوكسينغ، كان ولدي مرة خايف لكن بفضل الله ثم الكوتش أحمد حبيب والكوتش محمد كسر حاجز الخوف، وصار يتحمس لليوم اللي فيه السباحة والكيك بوكسينغ."</p>
<div class="testi-person">
@@ -633,7 +700,7 @@
<div><div class="name">محمود د</div><div class="role">ولي أمر — السباحة والكيك بوكسينغ</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"ابتدينا معاهم سباحة وكرة قدم، شاطرين وصراحة منظمين جدًا. وأحلى فكرة عجبتني موضوع التقرير اللي بيبعتوه، يبين ابنك مهاراته حلوة في إيه وعايز يتحسن في إيه."</p>
<div class="testi-person">
@@ -641,7 +708,7 @@
<div><div class="name">Habeeb Ahmed</div><div class="role">ولي أمر — السباحة وكرة القدم</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"انصح بشدة بالأكاديمية والأخص تدريب الكاراتية والكيك بوكسينج مع الكوتش احمد حبيب، عنده خبرة كبيرة في مجال الدفاع عن النفس وراقي في التعامل مع الأطفال."</p>
<div class="testi-person">
@@ -649,7 +716,7 @@
<div><div class="name">Moamn Ahmed</div><div class="role">ولي أمر — الكاراتيه والكيك بوكسينغ</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"ما شاء الله رائعين وتعامل طيب، والكابتن أحمد حبيب مدرب البوكسينج كثير رائع ومبدع، أولادي معهم من 3 سنين قدم وسباحة وبوكسينج."</p>
<div class="testi-person">
@@ -657,7 +724,7 @@
<div><div class="name">fun time channel</div><div class="role">ولي أمر — كرة القدم والسباحة والكيك بوكسينغ</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"من أفضل المدربين في الأكاديمية، وتدربت معه مواي تاي وكيك بوكسينج، كابتن أحمد حبيب المدرب الأفضل."</p>
<div class="testi-person">
@@ -665,7 +732,7 @@
<div><div class="name">Basto</div><div class="role">متدرب — المواي تاي والكيك بوكسينغ</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"كوتش أحمد عالمي في التدريب وبناء الشخصيات، ماشاء الله النتيجة ممتازة، ومع الوقت بيطلع ابنك واثق من نفسه وعنده حضور قوي."</p>
<div class="testi-person">
@@ -673,7 +740,7 @@
<div><div class="name">H Halabi</div><div class="role">ولي أمر — أكاديمية الكاف</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"من أفضل النوادي في الرياض."</p>
<div class="testi-person">
@@ -681,7 +748,7 @@
<div><div class="name">Buthyna Mutaher</div><div class="role">ولي أمر — أكاديمية الكاف</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"الأكاديمية كويسة جدًا، والمدربين تعاملهم راقي مع الأطفال، والكابتن أحمد حبيب كتير شاطر ومتمرس في الكاراتيه، والأطفال بيحبوه جدًا."</p>
<div class="testi-person">
@@ -689,7 +756,7 @@
<div><div class="name">Yasmeen</div><div class="role">ولية أمر — الكاراتيه</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"مدربين ذوو كفاءة، والتحسّن واضح على أطفالي بالذات في الكيك بوكسينج والسباحة، جدًا مبدعين فيه."</p>
<div class="testi-person">
@@ -697,7 +764,7 @@
<div><div class="name">Shoshy Mostafa</div><div class="role">ولية أمر — الكيك بوكسينغ والسباحة</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"المدرب أحمد حبيب ممتاز ومحترف في الملاكمة، وتعامله مع المتدربين رائع حيث يُعلّمهم خطوة بخطوة."</p>
<div class="testi-person">
@@ -705,7 +772,7 @@
<div><div class="name">Mona Alharthy</div><div class="role">ولية أمر — الكيك بوكسينغ</div></div>
</div>
</div>
<div class="testi-card reveal">
<div class="testi-card">
<div class="stars">★★★★★</div>
<p class="txt">"سجلت أولادي بوكس وسباحة، والتعامل راقي جدًا، والمسبح نظيف والمدربين محترمين."</p>
<div class="testi-person">
@@ -714,6 +781,23 @@
</div>
</div>
</div>
<button type="button" class="testi-nav prev" onclick="testiSlide(1)" aria-label="السابق"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg></button>
<button type="button" class="testi-nav next" onclick="testiSlide(-1)" aria-label="التالي"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></button>
<div class="testi-dots">
<button type="button" class="testi-dot active" onclick="testiSlideTo(0)" aria-label="رأي 1"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(1)" aria-label="رأي 2"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(2)" aria-label="رأي 3"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(3)" aria-label="رأي 4"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(4)" aria-label="رأي 5"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(5)" aria-label="رأي 6"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(6)" aria-label="رأي 7"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(7)" aria-label="رأي 8"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(8)" aria-label="رأي 9"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(9)" aria-label="رأي 10"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(10)" aria-label="رأي 11"></button>
<button type="button" class="testi-dot" onclick="testiSlideTo(11)" aria-label="رأي 12"></button>
</div>
</div>
</div>
</section>
@@ -869,5 +953,26 @@
return false;
}
</script>
<script>
(function(){
const cards = document.querySelectorAll('.testi-slider .testi-card');
const dots = document.querySelectorAll('.testi-dot');
let idx = 0;
function show(i){
cards.forEach((c,n)=>c.classList.toggle('active', n===i));
dots.forEach((d,n)=>d.classList.toggle('active', n===i));
idx = i;
}
window.testiSlide = function(dir){ show((idx + dir + cards.length) % cards.length); };
window.testiSlideTo = function(i){ show(i); };
if(cards.length > 1){
let timer = setInterval(()=>testiSlide(-1), 6000);
const wrap = document.querySelector('.testi-slider-wrap');
wrap.addEventListener('mouseenter', ()=>clearInterval(timer));
wrap.addEventListener('mouseleave', ()=>{ timer = setInterval(()=>testiSlide(-1), 6000); });
}
})();
</script>
</body>
</html>