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

finall update Sq

Browse Source
This commit is contained in:
Line INK
2026-08-17 00:13:39 +03:00
parent 7ad4970ede
commit 38bbaba630
180 changed files with 3879 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
program-football.html
View File

@@ -16,8 +16,8 @@
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--navy:#342B4A; /* deep purple — sampled from logo */
--navy-deep:#1C1730; /* deepest purple/black — from logo shadow tones */
--navy:#18253A; /* navy blue — sampled from the new logo */
--navy-deep:#071A38; /* deepest navy — from the new logo shield fill */
--orange:#B8923E; /* refined antique gold — brightened from logo for UI legibility */
--gold:#8F703A; /* raw brand gold — exact logo sample */
--gold-light:#E8D6A8; /* light gold tint for subtle fills */
@@ -70,20 +70,20 @@
/* ===== HEADER ===== */
header{
position:sticky;top:0;z-index:50;
background:rgba(247,249,252,.85);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(11,36,71,.08);
background:rgba(24,37,58,.82);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:var(--navy);}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:#fff;}
.logo-badge{
width:46px;height:46px;border-radius:10px;
background:var(--black);
width:60px;height:60px;border-radius:12px;
background:transparent;
display:flex;align-items:center;justify-content:center;overflow:hidden;
flex-shrink:0;
}
.logo-badge img{width:100%;height:100%;object-fit:contain;padding:2px;}
nav ul{display:flex;gap:34px;font-weight:600;font-size:15px;}
nav a{position:relative;color:var(--text);transition:color .2s;}
nav a{position:relative;color:#fff;transition:color .2s;}
nav a:hover{color:var(--orange);}
.header-cta{display:flex;align-items:center;gap:14px;}
.burger{display:none;}
@@ -94,7 +94,7 @@
background:
radial-gradient(1100px 500px at 85% -10%, rgba(255,107,53,.35), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(255,193,69,.22), transparent 60%),
linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #4A3D66 100%);
linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #2E4468 100%);
padding:96px 0 110px;
}
.hero::after{
@@ -168,7 +168,7 @@
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.about-visual{
aspect-ratio:1/1;border-radius:28px;
background:linear-gradient(160deg,var(--navy) 0%, #4A3D66 100%);
background:linear-gradient(160deg,var(--navy) 0%, #2E4468 100%);
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
@@ -353,7 +353,7 @@
.desc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.desc-visual{
aspect-ratio:3/4;border-radius:24px;
background:linear-gradient(150deg, var(--navy) 0%, #4A3D66 100%);
background:linear-gradient(150deg, var(--navy) 0%, #2E4468 100%);
display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.desc-visual svg{width:34%;height:34%;color:rgba(255,255,255,.4);}
@@ -402,7 +402,7 @@
}
.coach-avatar{
width:100px;height:100px;border-radius:20px;flex-shrink:0;
background:linear-gradient(150deg,var(--navy),#4A3D66);
background:linear-gradient(150deg,var(--navy),#2E4468);
display:flex;align-items:center;justify-content:center;color:var(--orange);font-family:'Poppins';font-weight:800;font-size:26px;
}
.coach-card h4{font-size:19px;margin-bottom:4px;color:var(--navy);}
@@ -446,7 +446,7 @@
<!-- prog-slider-css -->
<style>
.prog-slider{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;}
.prog-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;opacity:0;transform:scale(1);transition:opacity 1s cubic-bezier(.4,0,.2,1);}
.prog-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1);transition:opacity 1s cubic-bezier(.4,0,.2,1);}
.prog-slider img.active{opacity:1;z-index:1;}
.prog-slider img.kb{animation:progKenBurns 5.5s ease-out forwards;}
@keyframes progKenBurns{from{transform:scale(1);}to{transform:scale(1.08);}}
@@ -466,18 +466,18 @@
<header>
<div class="container nav-wrap">
<a href="homepage-prototype.html" class="logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف</a>
<a href="index.html" class="logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف الرياضية</a>
<nav>
<ul>
<li><a href="homepage-prototype.html#programs">البرامج</a></li>
<li><a href="index.html#programs">البرامج</a></li>
<li><a href="page-about.html">من نحن</a></li>
<li><a href="homepage-prototype.html#stats">إنجازاتنا</a></li>
<li><a href="homepage-prototype.html#testimonials">آراء الأهالي</a></li>
<li><a href="index.html#stats">إنجازاتنا</a></li>
<li><a href="index.html#testimonials">آراء الأهالي</a></li>
<li><a href="#contact">تواصل</a></li>
</ul>
</nav>
<div class="header-cta">
<a href="#contact" class="btn btn-outline" style="color:var(--navy);border-color:rgba(11,36,71,.3);">اتصل بنا</a>
<a href="#contact" class="btn btn-outline">اتصل بنا</a>
<a href="#trial" class="btn btn-primary">حجز حصة تجريبية</a>
</div>
</div>
@@ -485,7 +485,7 @@
<div class="breadcrumb">
<div class="container">
<a href="homepage-prototype.html">الرئيسية</a><span class="sep">/</span><a href="homepage-prototype.html#programs">البرامج</a><span class="sep">/</span><span class="current">كرة القدم</span>
<a href="index.html">الرئيسية</a><span class="sep">/</span><a href="index.html#programs">البرامج</a><span class="sep">/</span><span class="current">كرة القدم</span>
</div>
</div>
@@ -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" style="background:url(images/football-1.jpg); background-size:cover; background-position:center;"></div>
<div class="banner-visual" style="background:url(images/football/football-1.jpeg) center/contain no-repeat, radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), var(--navy-deep);"></div>
</div>
</section>
@@ -521,9 +521,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 class="prog-slider"><img src="images/football-1.jpg" alt="" class="active kb"><img src="images/football-2.jpg" alt="" class=""><img src="images/football-3.jpg" alt="" class=""><img src="images/football-4.jpg" 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></div></div>
</div>
<div class="desc-visual reveal"><div class="prog-slider"><img src="images/football/football-1.jpeg" alt="" class="active kb"><img src="images/football/football-2.jpeg" alt="" class=""><img src="images/football/football-3.jpeg" alt="" class=""><img src="images/football/football-4.jpeg" alt="" class=""><img src="images/football/football-5.jpeg" alt="" class=""><img src="images/football/football-6.jpeg" 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>
@@ -578,11 +576,11 @@
<div class="eyebrow">المدرب المسؤول</div>
<h2 class="section-title">بإشراف مدرب معتمد</h2>
<div class="coach-card reveal">
<div class="coach-avatar">ع.ف</div>
<img class="coach-avatar" src="images/coaches/football.jpg" alt="الكابتن مروان محمد" style="object-fit:cover;">
<div>
<h4>الأستاذ عمر الفارس</h4>
<div class="role">مدرب كرة قدم معتمد — رخصة تدريب فئات سنية</div>
<p>خبرة تزيد عن 6 سنوات في تدريب فئات الناشئين وإعداد فرق المدارس للبطولات المحلية. (نموذج توضيحي — يُستبدل ببيانات المدرب الفعلي)</p>
<h4>الكابتن مروان محمد</h4>
<div class="role">مدرب كرة قدم معتمد</div>
<p>خبرة في تدريب فئات الناشئين وتأسيس المهارات الأساسية لكرة القدم ضمن بيئة تدريبية منظمة ومحفزة.</p>
<a href="page-coaches.html#coach-football" class="program-link" style="margin-top:14px;display:inline-flex;">عرض الملف الكامل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div>
</div>
@@ -616,7 +614,8 @@
<div class="final-cta reveal">
<h2>جاهز يبدأ طفلك رحلته؟</h2>
<p>عبّي النموذج التالي وسيتواصل معك فريقنا لتأكيد حصة كرة القدم التجريبية المجانية.</p>
<div class="price-chip" style="margin-top:20px;"><span class="amt">249</span><span class="per">ريال / شهريًا</span></div>
<div class="price-chip" style="margin-top:20px;"><span class="amt">399</span><span class="per">ريال / شهريًا</span></div>
<p style="font-size:12.5px;color:rgba(255,255,255,.6);margin-top:10px;">أو وفّر مع باقات الالتزام (3/6/12 شهر) في <a href="page-pricing.html" style="color:var(--gold);text-decoration:underline;">صفحة الأسعار</a>.</p>
</div>
<div class="reveal" style="max-width:640px;margin:36px auto 0;background:#fff;border-radius:var(--radius);padding:36px 32px;box-shadow:0 20px 50px -30px rgba(11,36,71,.35);">
<form id="trialForm" onsubmit="return sendTrialRequest(event)">
@@ -640,7 +639,8 @@
<select id="tf-sport" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;background:#fff;">
<option value="كرة القدم" selected>كرة القدم</option>
<option value="السباحة">السباحة</option>
<option value="الكاراتيه / التايكوندو">الكاراتيه / التايكوندو</option>
<option value="الكاراتيه">الكاراتيه</option>
<option value="التايكوندو">التايكوندو</option>
<option value="الجمباز">الجمباز</option>
<option value="الكيك بوكسينغ">الكيك بوكسينغ</option>
<option value="باقة متعددة الأنشطة">باقة متعددة الأنشطة</option>
@@ -670,7 +670,7 @@
<div class="footer-col">
<h5>روابط سريعة</h5>
<ul>
<li><a href="homepage-prototype.html#programs">البرامج التدريبية</a></li>
<li><a href="index.html#programs">البرامج التدريبية</a></li>
<li><a href="page-about.html">من نحن</a></li>
<li><a href="page-pricing.html">الباقات والأسعار</a></li>
<li><a href="page-blog.html">المدونة</a></li>