3
أي التقنيات تُستخدم لجعل صفحة الويب تفاعلية والتحقق من صحة مدخلات النماذج قبل إرسالها ؟
لغة XML
لغة HTML5 فقط
لغة JavaScript
وسم العنوان </span>
<span class="alamin-quiz-opt-icon"></span>
</button>
</div>
<div class="alamin-quiz-exp" id="stExp_sec2_s97_o6_3"></div>
</div>
<div class="alamin-quiz-q" id="stQ_sec2_s97_o6_4">
<div class="alamin-quiz-question-title">
<span class="badge text-white px-2 py-1 ms-1 me-1" style="background-color: #0891b2;">4</span>
الخاصية src تُستخدم مع الوسم <img> بينما الخاصية href تُستخدم مع الوسم :
</div>
<div class="alamin-quiz-options">
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 4, 0)">
<span class="alamin-quiz-opt-text"><a></span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 4, 1)">
<span class="alamin-quiz-opt-text"><p></span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 4, 2)">
<span class="alamin-quiz-opt-text"><br></span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 4, 3)">
<span class="alamin-quiz-opt-text"><table></span>
<span class="alamin-quiz-opt-icon"></span>
</button>
</div>
<div class="alamin-quiz-exp" id="stExp_sec2_s97_o6_4"></div>
</div>
<div class="alamin-quiz-q" id="stQ_sec2_s97_o6_5">
<div class="alamin-quiz-question-title">
<span class="badge text-white px-2 py-1 ms-1 me-1" style="background-color: #0891b2;">5</span>
في نموذج الصندوق، المساحة الفارغة الواقعة بين المحتوى النصي والإطار الخارجي تُسمى :
</div>
<div class="alamin-quiz-options">
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 5, 0)">
<span class="alamin-quiz-opt-text">Outline</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 5, 1)">
<span class="alamin-quiz-opt-text">Border</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 5, 2)">
<span class="alamin-quiz-opt-text">Margin</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 5, 3)">
<span class="alamin-quiz-opt-text">Padding</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
</div>
<div class="alamin-quiz-exp" id="stExp_sec2_s97_o6_5"></div>
</div>
<div class="alamin-quiz-q" id="stQ_sec2_s97_o6_6">
<div class="alamin-quiz-question-title">
<span class="badge text-white px-2 py-1 ms-1 me-1" style="background-color: #0891b2;">6</span>
أي من محددات CSS التالية يُستخدم لاستهداف عنصر وحيد فريد تماماً في الصفحة بأكملها ؟
</div>
<div class="alamin-quiz-options">
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 6, 0)">
<span class="alamin-quiz-opt-text">محدد المعرف (#id)</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 6, 1)">
<span class="alamin-quiz-opt-text">محدد النجمة (*)</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 6, 2)">
<span class="alamin-quiz-opt-text">محدد الوسم (element)</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 6, 3)">
<span class="alamin-quiz-opt-text">محدد الفئة (.class)</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
</div>
<div class="alamin-quiz-exp" id="stExp_sec2_s97_o6_6"></div>
</div>
<div class="alamin-quiz-q" id="stQ_sec2_s97_o6_7">
<div class="alamin-quiz-question-title">
<span class="badge text-white px-2 py-1 ms-1 me-1" style="background-color: #0891b2;">7</span>
ما الغرض الأساسي من استخدام السمة required في حقول الإدخال التفاعلية ؟
</div>
<div class="alamin-quiz-options">
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 7, 0)">
<span class="alamin-quiz-opt-text">تكبير حجم الخط داخل الحقل</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 7, 1)">
<span class="alamin-quiz-opt-text">تغيير لغة لوحة المفاتيح إلى العربية</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 7, 2)">
<span class="alamin-quiz-opt-text">تشفير النص تلقائياً داخل قاعدة البيانات</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 7, 3)">
<span class="alamin-quiz-opt-text">منع إرسال النموذج إذا تُرِك الحقل فارغاً من قِبل المستخدم</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
</div>
<div class="alamin-quiz-exp" id="stExp_sec2_s97_o6_7"></div>
</div>
<div class="alamin-quiz-q" id="stQ_sec2_s97_o6_8">
<div class="alamin-quiz-question-title">
<span class="badge text-white px-2 py-1 ms-1 me-1" style="background-color: #0891b2;">8</span>
أين تُكتب ملفات التنسيق الخارجية External CSS لربطها بصفحة الويب ؟
</div>
<div class="alamin-quiz-options">
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 8, 0)">
<span class="alamin-quiz-opt-text">داخل وسم <textarea> التفاعلي</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 8, 1)">
<span class="alamin-quiz-opt-text">داخل السطر الأول بجوار <!DOCTYPE html></span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 8, 2)">
<span class="alamin-quiz-opt-text">في ملف منفصل بامتداد .css يُربط بوسم <link> داخل <head></span>
<span class="alamin-quiz-opt-icon"></span>
</button>
<button type="button" class="alamin-quiz-opt" onclick="checkStationQuizAns('sec2_s97_o6', 8, 3)">
<span class="alamin-quiz-opt-text">داخل وسم <footer> أسفل الصفحة</span>
<span class="alamin-quiz-opt-icon"></span>
</button>
</div>
<div class="alamin-quiz-exp" id="stExp_sec2_s97_o6_8"></div>
</div>
</div>
<div id="alaminStation5ResultBox_sec2_s97_o6" class="mt-4"></div>
<div class="alamin-bottom-nav" style="justify-content: center; text-align: center;">
<div style="font-weight: 700; color: #10b981; font-size: 1.05rem;">
<i class="fas fa-check-circle me-1 ms-1"></i> 🎉 تهانينا يا بطل! أتممت جميع محطات الدرس بنجاح باهر وتستحق وسام التميز!
</div>
</div>
</div>
</div>
<script>
var stQuizAnswers_sec2_s97_o6 = {};
var quizQuestions = [{"q": "1 \n أي من التقنيات التالية مسؤولة بشكل حصري عن تحديد الهيكل البنائي لمستند صفحة الويب ؟", "options": ["لغة HTML5", "لغة CSS3", "لغة JavaScript", "لغة SQL"], "correct": 0, "explain": "لغة HTML5 هي المسؤولة عن بناء وتوصيف هيكل العناصر والمحتوى في صفحة الويب."}, {"q": "2 \n ما التقنية المسؤولة عن المظهر الجمالي والألوان وتنسيق الهوامش ونموذج الصندوق ؟", "options": ["بروتوكول HTTP", "إعلان DOCTYPE", "لغة HTML5", "لغة CSS3"], "correct": 3, "explain": "لغة CSS3 هي لغة التنسيق والتصميم المسؤولة عن كافة الخصائص الجمالية والتخطيطية."}, {"q": "3 \n أي التقنيات تُستخدم لجعل صفحة الويب تفاعلية والتحقق من صحة مدخلات النماذج قبل إرسالها ؟", "options": ["لغة XML", "لغة HTML5 فقط", "لغة JavaScript", "وسم العنوان"], "correct": 2, "explain": "لغة جافاسكريبت هي المسؤولة عن إضافة الحيوية والتفاعل والتحقق البرمجي على جانب المتصفح."}, {"q": "4 \n الخاصية src تُستخدم مع الوسم بينما الخاصية href تُستخدم مع الوسم :", "options": ["", "", "", ""], "correct": 0, "explain": "الخاصية href (Hypertext Reference) تُستخدم مع وسم الرابط التشعبي <a> لتحديد الوجهة."}, {"q": "5 \n في نموذج الصندوق، المساحة الفارغة الواقعة بين المحتوى النصي والإطار الخارجي تُسمى :", "options": ["Outline", "Border", "Margin", "Padding"], "correct": 3, "explain": "الحشوة الداخلية Padding هي المسافة بين المحتوى الداخلي وإطار الصندوق."}, {"q": "6 \n أي من محددات CSS التالية يُستخدم لاستهداف عنصر وحيد فريد تماماً في الصفحة بأكملها ؟", "options": ["محدد المعرف (#id)", "محدد النجمة (*)", "محدد الوسم (element)", "محدد الفئة (.class)"], "correct": 0, "explain": "المعرف ID هو كود فريد لا يتكرر ومخصص لاستهداف عنصر وحيد في الصفحة."}, {"q": "7 \n ما الغرض الأساسي من استخدام السمة required في حقول الإدخال التفاعلية ؟", "options": ["تكبير حجم الخط داخل الحقل", "تغيير لغة لوحة المفاتيح إلى العربية", "تشفير النص تلقائياً داخل قاعدة البيانات", "منع إرسال النموذج إذا تُرِك الحقل فارغاً من قِبل المستخدم"], "correct": 3, "explain": "الخاصية required تفرض ملء الحقل وتمنع المتصفح من إرسال النموذج في حال فراغه."}, {"q": "8 \n أين تُكتب ملفات التنسيق الخارجية External CSS لربطها بصفحة الويب ؟", "options": ["داخل وسم التفاعلي", "داخل السطر الأول بجوار", "في ملف منفصل بامتداد .css يُربط بوسم داخل", "داخل وسم أسفل الصفحة"], "correct": 2, "explain": "ملفات CSS الخارجية تُحفظ بامتداد .css وترتبط عبر وسم <link> داخل رأس الصفحة <head>."}];
var stStationNames_sec2_s97_o6 = ["فكّر واستعد: انطلاقة التعلم والأهداف", "شرح الدرس والمفاهيم الأساسية", "التطبيقات والأنشطة العملية", "قاموس المفردات والمصطلحات الناطق", "بنك الأسئلة والتقييم الذكي الفوري"];
var stQuizData_sec2_s97_o6 = {"1": {"correctIdx": 0, "correctText": "لغة HTML5", "explanation": "لغة HTML5 هي المسؤولة عن بناء وتوصيف هيكل العناصر والمحتوى في صفحة الويب."}, "2": {"correctIdx": 3, "correctText": "لغة CSS3", "explanation": "لغة CSS3 هي لغة التنسيق والتصميم المسؤولة عن كافة الخصائص الجمالية والتخطيطية."}, "3": {"correctIdx": 2, "correctText": "لغة JavaScript", "explanation": "لغة جافاسكريبت هي المسؤولة عن إضافة الحيوية والتفاعل والتحقق البرمجي على جانب المتصفح."}, "4": {"correctIdx": 0, "correctText": "<a>", "explanation": "الخاصية href (Hypertext Reference) تُستخدم مع وسم الرابط التشعبي <a> لتحديد الوجهة."}, "5": {"correctIdx": 3, "correctText": "Padding", "explanation": "الحشوة الداخلية Padding هي المسافة بين المحتوى الداخلي وإطار الصندوق."}, "6": {"correctIdx": 0, "correctText": "محدد المعرف (#id)", "explanation": "المعرف ID هو كود فريد لا يتكرر ومخصص لاستهداف عنصر وحيد في الصفحة."}, "7": {"correctIdx": 3, "correctText": "منع إرسال النموذج إذا تُرِك الحقل فارغاً من قِبل المستخدم", "explanation": "الخاصية required تفرض ملء الحقل وتمنع المتصفح من إرسال النموذج في حال فراغه."}, "8": {"correctIdx": 2, "correctText": "في ملف منفصل بامتداد .css يُربط بوسم <link> داخل <head>", "explanation": "ملفات CSS الخارجية تُحفظ بامتداد .css وترتبط عبر وسم <link> داخل رأس الصفحة <head>."}};
function stGoStep_sec2_s97_o6(step) {
for (var i = 1; i <= 5; i++) {
var st = document.getElementById('stStation_sec2_s97_o6_' + i);
var btn = document.getElementById('stBtn_sec2_s97_o6_' + i);
if (st) st.classList.remove('active');
if (btn) {
btn.classList.remove('active');
if (i < step) {
btn.classList.add('completed');
btn.querySelector('.alamin-step-circle').innerHTML = '✓';
} else {
btn.classList.remove('completed');
btn.querySelector('.alamin-step-circle').innerHTML = i;
}
}
}
var activeSt = document.getElementById('stStation_sec2_s97_o6_' + step);
var activeBtn = document.getElementById('stBtn_sec2_s97_o6_' + step);
if (activeSt) activeSt.classList.add('active');
if (activeBtn) activeBtn.classList.add('active');
var progressEl = document.getElementById('stProgress_sec2_s97_o6');
if (progressEl) {
progressEl.style.width = (((step - 1) / 4) * 100) + '%';
}
var stepNumEl = document.getElementById('stStepNum_sec2_s97_o6');
var stepNameEl = document.getElementById('stStepName_sec2_s97_o6');
if (stepNumEl) stepNumEl.innerText = step;
if (stepNameEl) stepNameEl.innerText = stStationNames_sec2_s97_o6[step - 1] || '';
var container = document.getElementById('stContainer_sec2_s97_o6');
if (container) {
container.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
function toggleStationVocab(card) {
var meaning = card.querySelector('.alamin-vocab-meaning');
var hint = card.querySelector('.alamin-vocab-hint');
if (meaning) {
if (meaning.style.display === 'block') {
meaning.style.display = 'none';
if (hint) hint.style.display = 'block';
} else {
meaning.style.display = 'block';
if (hint) hint.style.display = 'none';
}
}
}
var introChunks_sec2_s97_o6 = ["في هذه المحطة الختامية للوحدة الثانية،", "نجمع خيوط الإبداع التقني في مراجعة شاملة ومكثفة ترصد التكامل الثلاثي الذهبي لتطوير مواقع الويب الحديثة:", "لغة HTML5 لبناء الهيكل وتحديد العناصر،", "لغة CSS3 لتنسيق المظهر وتوزيع الهوامش والتجاوب مع الشاشات،", "ولغة JavaScript لإدارة المنطق والتفاعل والتحقق من صحة البيانات.", "نراجع معاً النماذج الاسترشادية والمفاهيم التطبيقية لضمان التفوق البرمجي الكامل."];
var isPlayingAll_sec2_s97_o6 = false;
var currentChunkIdx_sec2_s97_o6 = 0;
function alaminNormalizeSpeechText(text, lang) {
if (!text) return '';
var s = String(text);
s = s.replace(/<[^>]*>/g, ' ');
s = s.replace(/\p{Extended_Pictographic}/gu, ' ');
s = s.replace(/[\(\[\{«](\s*[\w\u0600-\u06FF\d\.\,\-]+\s*)[\)\]\}»]/g, ' $1 ');
s = s.replace(/[\(\)\[\]\{\}«»"']/g, ' ');
var indicDigits = ['٠','١','٢','٣','٤','٥','٦','٧','٨','٩'];
for (var i = 0; i < 10; i++) {
s = s.split(indicDigits[i]).join(String(i));
}
var isAr = !lang || lang.indexOf('ar') === 0;
function arNumToWords(num) {
var n = parseInt(num, 10);
if (isNaN(n)) return '';
if (n === 0) return 'صفر';
var ones = ['', 'واحد', 'اثنان', 'ثلاثة', 'أربعة', 'خمسة', 'ستة', 'سبعة', 'ثمانية', 'تسعة', 'عشرة'];
var teens = ['', 'أحد عشر', 'اثنا عشر', 'ثلاثة عشر', 'أربعة عشر', 'خمسة عشر', 'ستة عشر', 'سبعة عشر', 'ثمانية عشر', 'تسعة عشر'];
var tens = ['', 'عشرة', 'عشرون', 'ثلاثون', 'أربعون', 'خمسون', 'ستون', 'سبعون', 'ثمانون', 'تسعون'];
var hundreds = ['', 'مائة', 'مئتان', 'ثلاثمائة', 'أربعمائة', 'خمسمائة', 'ستمائة', 'سبعمائة', 'ثمانمائة', 'تسعمائة'];
function convertThreeDigits(val) {
if (val === 0) return '';
var h = Math.floor(val / 100);
var rem = val % 100;
var parts = [];
if (h > 0) parts.push(hundreds[h]);
if (rem > 0) {
if (rem <= 10) {
parts.push(ones[rem]);
} else if (rem < 20) {
parts.push(teens[rem - 10]);
} else {
var o = rem % 10;
var t = Math.floor(rem / 10);
if (o > 0) {
parts.push(ones[o] + ' و' + tens[t]);
} else {
parts.push(tens[t]);
}
}
}
return parts.join(' و');
}
if (n < 1000) {
return convertThreeDigits(n);
} else if (n < 1000000) {
var th = Math.floor(n / 1000);
var rem = n % 1000;
var thStr = '';
if (th === 1) thStr = 'ألف';
else if (th === 2) thStr = 'ألفان';
else if (th >= 3 && th <= 10) thStr = ones[th] + ' آلاف';
else thStr = convertThreeDigits(th) + ' ألف';
var remStr = convertThreeDigits(rem);
if (remStr) return thStr + ' و' + remStr;
return thStr;
}
return String(n);
}
function enNumToWords(num) {
var n = parseInt(num, 10);
if (isNaN(n)) return '';
if (n === 0) return 'zero';
var ones = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten',
'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
var tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
function convertThree(val) {
if (val === 0) return '';
var str = '';
if (val >= 100) {
str += ones[Math.floor(val / 100)] + ' hundred';
val %= 100;
if (val > 0) str += ' and ';
}
if (val > 0) {
if (val < 20) {
str += ones[val];
} else {
str += tens[Math.floor(val / 10)];
if (val % 10 > 0) {
str += '-' + ones[val % 10];
}
}
}
return str;
}
if (n < 1000) {
return convertThree(n);
} else if (n < 1000000) {
var th = Math.floor(n / 1000);
var rem = n % 1000;
var res = convertThree(th) + ' thousand';
if (rem > 0) {
res += (rem < 100 ? ' and ' : ' ') + convertThree(rem);
}
return res;
}
return String(n);
}
if (isAr) {
var greekMap = {
'ν': ' نيو ', 'λ': ' لمدا ', 'θ': ' سيتا ', 'π': ' باي ', 'ρ': ' رو ',
'ω': ' أوميجا ', 'Ω': ' أوم ', 'μ': ' ميكرو ', 'Δ': ' دلتا ', 'α': ' ألفا ',
'β': ' بيتا ', 'γ': ' جاما ', 'φ': ' فاي ', 'ϕ': ' فاي ', 'η': ' إيتا '
};
for (var gk in greekMap) {
s = s.split(gk).join(greekMap[gk]);
}
s = s.replace(/\bm\/s\b/gi, ' متر لكل ثانية ');
s = s.replace(/\bkm\/h\b/gi, ' كيلومتر في الساعة ');
s = s.replace(/\bHz\b/gi, ' هرتز ');
s = s.replace(/\bkHz\b/gi, ' كيلوهرتز ');
s = s.replace(/\bMHz\b/gi, ' ميجاهرتز ');
s = s.replace(/\bcm\b/gi, ' سنتيمتر ');
s = s.replace(/\bmm\b/gi, ' مليمتر ');
s = s.replace(/\bkm\b/gi, ' كيلومتر ');
s = s.replace(/\bkg\b/gi, ' كيلوجرام ');
s = s.replace(/\bmg\b/gi, ' مليجرام ');
s = s.replace(/²/g, ' تربيع ');
s = s.replace(/³/g, ' تكعيب ');
s = s.replace(/√/g, ' جذر ');
s = s.replace(/\+/g, ' زائد ');
s = s.replace(/\s*[\-−]\s*(\d+)/g, ' ناقص $1');
s = s.replace(/(\d+)\s*[\-−]\s*/g, '$1 ناقص ');
s = s.replace(/=/g, ' يساوي ');
s = s.replace(/[×\*]/g, ' في ');
s = s.replace(/[÷\/]/g, ' على ');
s = s.replace(/%/g, ' في المائة ');
s = s.replace(/°|°/g, ' درجة ');
s = s.replace(/(\d+)\.(\d+)/g, function(m, intPart, decPart) {
return arNumToWords(intPart) + ' فاصل ' + arNumToWords(decPart);
});
s = s.replace(/\b\d+\b/g, function(match) {
return arNumToWords(match);
});
var letterMap = {
'a': 'إيه', 'b': 'بي', 'c': 'سي', 'd': 'دي', 'e': 'إي',
'f': 'إف', 'g': 'جي', 'h': 'إتش', 'i': 'آي', 'j': 'جيه',
'k': 'كيه', 'l': 'إل', 'm': 'إم', 'n': 'إن', 'o': 'أو',
'p': 'بي', 'q': 'كيو', 'r': 'آر', 's': 'إس', 't': 'تي',
'u': 'يو', 'v': 'في', 'w': 'دبليو', 'x': 'إكس', 'y': 'واي',
'z': 'زد'
};
s = s.replace(/[a-zA-Z]+/g, function(word) {
var letters = [];
for (var ci = 0; ci < word.length; ci++) {
var ch = word[ci].toLowerCase();
letters.push(letterMap[ch] || ch);
}
return ' ' + letters.join(' ') + ' ';
});
} else {
s = s.replace(/\+/g, ' plus ');
s = s.replace(/\s*[\-−]\s*(\d+)/g, ' minus $1');
s = s.replace(/(\d+)\s*[\-−]\s*/g, '$1 minus ');
s = s.replace(/=/g, ' equals ');
s = s.replace(/[×\*]/g, ' times ');
s = s.replace(/[÷\/]/g, ' divided by ');
s = s.replace(/%/g, ' percent ');
s = s.replace(/°|°/g, ' degrees ');
s = s.replace(/(\d+)\.(\d+)/g, function(m, intPart, decPart) {
return enNumToWords(intPart) + ' point ' + enNumToWords(decPart);
});
s = s.replace(/\b\d+\b/g, function(match) {
return enNumToWords(match);
});
}
s = s.replace(/\s+/g, ' ').trim();
return s;
}
function updateAudioButtonState_sec2_s97_o6(playing) {
var btn = document.getElementById('stAudioPlayBtn_sec2_s97_o6');
var icon = document.getElementById('stAudioIcon_sec2_s97_o6');
var btnText = document.getElementById('stAudioBtnText_sec2_s97_o6');
if (!btn) return;
if (playing) {
btn.className = 'btn btn-sm btn-danger rounded-pill px-3 fw-bold alamin-audio-main-btn';
if (icon) icon.className = 'fas fa-stop me-1 ms-1';
if (btnText) btnText.innerText = 'إيقاف الصوت';
} else {
btn.className = 'btn btn-sm btn-primary rounded-pill px-3 fw-bold alamin-audio-main-btn';
if (icon) icon.className = 'fas fa-play me-1 ms-1';
if (btnText) btnText.innerText = 'استمع للشرح الصوتي';
}
}
function clearChunkHighlights_sec2_s97_o6() {
document.querySelectorAll('#stContainer_sec2_s97_o6 .reading-chunk-active').forEach(function(el) {
el.classList.remove('reading-chunk-active');
});
}
function stopAudioChunks_sec2_s97_o6() {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
}
isPlayingAll_sec2_s97_o6 = false;
clearChunkHighlights_sec2_s97_o6();
updateAudioButtonState_sec2_s97_o6(false);
var status = document.getElementById('stAudioStatus_sec2_s97_o6');
if (status) status.innerHTML = '<i class="fas fa-hand-pointer me-1 ms-1"></i> انقر على أي جملة للاستماع إليها مباشرة 👆';
}
function speakSingleChunk_sec2_s97_o6(idx, onEndCallback) {
if (!('speechSynthesis' in window)) return;
window.speechSynthesis.cancel();
clearChunkHighlights_sec2_s97_o6();
if (idx < 0 || idx >= introChunks_sec2_s97_o6.length) {
if (onEndCallback) onEndCallback();
return;
}
var chunkEl = document.getElementById('sec2_s97_o6_c' + idx);
if (chunkEl) {
chunkEl.classList.add('reading-chunk-active');
chunkEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
var rawText = introChunks_sec2_s97_o6[idx];
var text = alaminNormalizeSpeechText(rawText, 'ar');
var u = new SpeechSynthesisUtterance(text);
u.lang = 'ar';
u.rate = 0.92;
u.onend = function() {
clearChunkHighlights_sec2_s97_o6();
if (onEndCallback) onEndCallback();
};
u.onerror = function() {
clearChunkHighlights_sec2_s97_o6();
if (onEndCallback) onEndCallback();
};
window.speechSynthesis.speak(u);
}
function speakFromChunk_sec2_s97_o6(idx) {
isPlayingAll_sec2_s97_o6 = true;
updateAudioButtonState_sec2_s97_o6(true);
var status = document.getElementById('stAudioStatus_sec2_s97_o6');
if (status) status.innerHTML = '<i class="fas fa-volume-up text-primary me-1 ms-1"></i> جاري القراءة الصوتية والتتبع...';
speakSingleChunk_sec2_s97_o6(idx, function() {
isPlayingAll_sec2_s97_o6 = false;
updateAudioButtonState_sec2_s97_o6(false);
if (status) status.innerHTML = '<i class="fas fa-hand-pointer me-1 ms-1"></i> انقر على أي جملة للاستماع إليها مباشرة 👆';
});
}
function togglePlayAllChunks_sec2_s97_o6() {
if (isPlayingAll_sec2_s97_o6) {
stopAudioChunks_sec2_s97_o6();
return;
}
isPlayingAll_sec2_s97_o6 = true;
currentChunkIdx_sec2_s97_o6 = 0;
updateAudioButtonState_sec2_s97_o6(true);
var status = document.getElementById('stAudioStatus_sec2_s97_o6');
if (status) status.innerHTML = '<i class="fas fa-volume-up text-primary me-1 ms-1"></i> جاري القراءة الصوتية والتتبع...';
function playNext() {
if (!isPlayingAll_sec2_s97_o6) return;
if (currentChunkIdx_sec2_s97_o6 >= introChunks_sec2_s97_o6.length) {
stopAudioChunks_sec2_s97_o6();
if (status) status.innerHTML = '<i class="fas fa-check-circle text-success me-1 ms-1"></i> اكتملت القراءة بنجاح ✓';
return;
}
var thisIdx = currentChunkIdx_sec2_s97_o6;
currentChunkIdx_sec2_s97_o6++;
speakSingleChunk_sec2_s97_o6(thisIdx, function() {
playNext();
});
}
playNext();
}
function speakStationText(text, lang) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
var normText = alaminNormalizeSpeechText(text, lang || 'ar');
var u = new SpeechSynthesisUtterance(normText);
u.lang = lang || 'ar';
u.rate = 0.9;
window.speechSynthesis.speak(u);
}
}
function checkStationQuizAns(uid, qNum, selectedIdx) {
var qInfo = stQuizData_sec2_s97_o6[qNum];
if (!qInfo) return;
var box = document.getElementById('stQ_' + uid + '_' + qNum);
if (!box) return;
var opts = box.querySelectorAll('.alamin-quiz-opt');
var isCorrect = (selectedIdx === qInfo.correctIdx);
opts.forEach(function(btn, idx) {
btn.disabled = true;
btn.classList.remove('opt-selected-correct', 'opt-selected-wrong', 'opt-reveal-correct');
var icon = btn.querySelector('.alamin-quiz-opt-icon');
if (idx === qInfo.correctIdx) {
btn.classList.add(isCorrect ? 'opt-selected-correct' : 'opt-reveal-correct');
if (icon) icon.innerHTML = '<span style="color:#10b981; font-weight:bold;">✓</span>';
}
if (idx === selectedIdx && !isCorrect) {
btn.classList.add('opt-selected-wrong');
if (icon) icon.innerHTML = '<span style="color:#ef4444; font-weight:bold;">✗</span>';
}
});
var exp = document.getElementById('stExp_' + uid + '_' + qNum);
if (exp) {
exp.style.display = 'block';
if (isCorrect) {
exp.className = 'alamin-quiz-exp correct-state';
exp.innerHTML = '<div class="exp-status">🎉 أحسنت يا بطل! إجابة صحيحة وممتازة.</div>' +
'<div class="exp-detail">💡 ' + qInfo.explanation + '</div>';
} else {
var rawExp = qInfo.explanation || '';
var cleanExp = rawExp.replace(/^(🎉\s*|❌\s*|أحسنت[^\.!\?؟]*[\.!\?؟]*|رائع[^\.!\?؟]*[\.!\?؟]*|ممتاز[^\.!\?؟]*[\.!\?؟]*|عظيم[^\.!\?؟]*[\.!\?؟]*|بارك الله فيك[^\.!\?؟]*[\.!\?؟]*|إجابة[^\.!\?؟]*[\.!\?؟]*|صحيح[^\.!\?؟]*[\.!\?؟]*|تطبيق متميز[^\.!\?؟]*[\.!\?؟]*)\s*/, '');
if (!cleanExp) cleanExp = rawExp;
exp.className = 'alamin-quiz-exp wrong-state';
exp.innerHTML = '<div class="exp-status">❌ إجابة غير صحيحة.</div>' +
'<div class="exp-correct-reveal">الإجابة الصحيحة هي: <strong>' + qInfo.correctText + '</strong></div>' +
'<div class="exp-detail">💡 <strong>التوضيح:</strong> ' + cleanExp + '</div>';
}
stQuizAnswers_sec2_s97_o6[qNum] = isCorrect;
var totalQ_sec2_s97_o6 = Object.keys(stQuizData_sec2_s97_o6).length;
var answeredCount_sec2_s97_o6 = Object.keys(stQuizAnswers_sec2_s97_o6).length;
if (answeredCount_sec2_s97_o6 === totalQ_sec2_s97_o6 && totalQ_sec2_s97_o6 > 0 && !window['stQuizDone_sec2_s97_o6']) {
window['stQuizDone_sec2_s97_o6'] = true;
var correctCount = 0;
for (var k in stQuizAnswers_sec2_s97_o6) {
if (stQuizAnswers_sec2_s97_o6[k]) correctCount++;
}
var quizBonus = Math.round((correctCount / totalQ_sec2_s97_o6) * 5);
var finalScore = 5 + quizBonus;
var pct = Math.round((correctCount / totalQ_sec2_s97_o6) * 100);
var pathMatch = window.location.pathname.match(/\/Lesson\/(\d+)/i);
var lessonId = window.alaminLessonId || (pathMatch ? parseInt(pathMatch[1]) : 0);
fetch('/Account/RecordProgress', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ lessonId: lessonId, score: finalScore, maxScore: 10 })
})
.then(function(res) { return res.json(); })
.then(function(data) {
var isLoggedIn = (data && data.success);
renderStation5CelebrationCard_sec2_s97_o6(isLoggedIn, correctCount, totalQ_sec2_s97_o6, finalScore, pct);
})
.catch(function() {
renderStation5CelebrationCard_sec2_s97_o6(false, correctCount, totalQ_sec2_s97_o6, finalScore, pct);
});
}
}
}
</script>
</div>
</div>
<!-- Videos Section -->
<!-- Exams Section -->
<!-- Al-Amin Student Progress Completion Card -->
<div class="alamin-completion-card" id="alaminLessonCompletionCard">
<div class="alamin-completion-content">
<div class="alamin-completion-badge">
<i class="fas fa-award"></i>
</div>
<div class="alamin-completion-info">
<h3 class="alamin-completion-title">
أكملت دراسة هذا الدرس؟
</h3>
<p class="alamin-completion-subtitle">
احفظ إنجازك الآن لإضافة <strong>5 نقاط تميز</strong> إلى رصيدك وتسجيل الدرس في لوحة إحصائياتك!
</p>
</div>
<div class="alamin-completion-action">
<a href="/Account/Login?returnUrl=/Secondary2/Learn/Lesson/2356" class="alamin-completion-btn alamin-login-prompt">
<i class="fas fa-sign-in-alt me-2"></i>سجّل الدخول لحفظ تقدمك
</a>
</div>
</div>
<div id="alaminCompletionAlert" class="alamin-completion-alert" style="display:none;" role="status"></div>
</div>
<!-- Next & Previous Lesson Navigation Bar -->
<div class="lesson-pagination-card" aria-label="التنقل بين الدروس">
<div class="lesson-pagination-header">
<div class="pagination-title-group">
<i class="fas fa-route"></i>
<span>رحلة التعلم المستمرة — الحاسب الآلي والبرمجة</span>
</div>
<span class="pagination-progress-badge">
الدرس 14 من 16
</span>
</div>
<div class="lesson-pagination-grid">
<a id="nextLessonMainBtn"
href="/Secondary2/Learn/Lesson/2357"
class="lesson-nav-btn lesson-nav-next"
data-next-title="الاختبار الإلكتروني الشامل الأول : تصميم وتطوير مواقع الويب">
<div class="nav-btn-content">
<span class="nav-btn-label">
<i class="fas fa-rocket me-1"></i>
الدرس التالي
</span>
<span class="nav-btn-title">الاختبار الإلكتروني الشامل الأول : تصميم وتطوير مواقع الويب</span>
</div>
<div class="nav-btn-icon">
<i class="fas fa-arrow-left"></i>
</div>
</a>
<a href="/Secondary2/Learn/Lesson/2355"
class="lesson-nav-btn lesson-nav-prev">
<div class="nav-btn-icon">
<i class="fas fa-arrow-right"></i>
</div>
<div class="nav-btn-content">
<span class="nav-btn-label">الدرس السابق</span>
<span class="nav-btn-title">التفاعل والتحقق من صحة البيانات باستخدام جافاسكريبت</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Lesson Sidebar -->
<div class="lesson-sidebar">
<!-- Lesson Info -->
<div class="sidebar-card lesson-info">
<h4><i class="fas fa-info-circle me-2"></i>معلومات الدرس</h4>
<div class="info-item">
<div class="info-label-group">
<i class="fas fa-layer-group"></i>
<span class="label">المرحلة:</span>
</div>
<span class="value">المرحلة الثانوية</span>
</div>
<div class="info-item">
<div class="info-label-group">
<i class="fas fa-graduation-cap"></i>
<span class="label">الصف:</span>
</div>
<span class="value">الصف الثاني الثانوي</span>
</div>
<div class="info-item">
<div class="info-label-group">
<i class="fas fa-book"></i>
<span class="label">المادة:</span>
</div>
<span class="value">الحاسب الآلي والبرمجة</span>
</div>
<div class="info-item">
<div class="info-label-group">
<i class="fas fa-bookmark"></i>
<span class="label">الوحدة:</span>
</div>
<span class="value">الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية</span>
</div>
</div>
<!-- Unit Lessons Playlist -->
<div class="sidebar-card unit-lessons-card">
<h4><i class="fas fa-list-ol me-2"></i>دروس الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية</h4>
<div class="unit-lessons-list">
<a href="/Secondary2/Learn/Lesson/2351"
class="unit-lesson-item ">
<span class="unit-lesson-num">1</span>
<span class="unit-lesson-title">مقدمة في لغة HTML5 وبنية صفحة الويب الأساسية</span>
<i class="fas fa-chevron-left unit-lesson-arrow"></i>
</a>
<a href="/Secondary2/Learn/Lesson/2352"
class="unit-lesson-item ">
<span class="unit-lesson-num">2</span>
<span class="unit-lesson-title">الوسائط المتعددة والروابط التشعبية والجداول في HTML5</span>
<i class="fas fa-chevron-left unit-lesson-arrow"></i>
</a>
<a href="/Secondary2/Learn/Lesson/2353"
class="unit-lesson-item ">
<span class="unit-lesson-num">3</span>
<span class="unit-lesson-title">تصميم نماذج الويب التفاعلية HTML5 Forms</span>
<i class="fas fa-chevron-left unit-lesson-arrow"></i>
</a>
<a href="/Secondary2/Learn/Lesson/2354"
class="unit-lesson-item ">
<span class="unit-lesson-num">4</span>
<span class="unit-lesson-title">مدخل إلى صفحات الأنماط الانسيابية CSS3 وتنسيق الصفحات</span>
<i class="fas fa-chevron-left unit-lesson-arrow"></i>
</a>
<a href="/Secondary2/Learn/Lesson/2355"
class="unit-lesson-item ">
<span class="unit-lesson-num">5</span>
<span class="unit-lesson-title">التفاعل والتحقق من صحة البيانات باستخدام جافاسكريبت</span>
<i class="fas fa-chevron-left unit-lesson-arrow"></i>
</a>
<a href="/Secondary2/Learn/Lesson/2356"
class="unit-lesson-item active">
<span class="unit-lesson-num">6</span>
<span class="unit-lesson-title">مراجعة شاملة وتكامل تقنيات الويب الحديثة</span>
<span class="unit-lesson-current-badge">الحالي</span>
</a>
<a href="/Secondary2/Learn/Lesson/2357"
class="unit-lesson-item ">
<span class="unit-lesson-num">7</span>
<span class="unit-lesson-title">الاختبار الإلكتروني الشامل الأول : تصميم وتطوير مواقع الويب</span>
<i class="fas fa-chevron-left unit-lesson-arrow"></i>
</a>
<a href="/Secondary2/Learn/Lesson/2358"
class="unit-lesson-item ">
<span class="unit-lesson-num">8</span>
<span class="unit-lesson-title">الاختبار الإلكتروني الشامل الثاني : تصميم وتطوير مواقع الويب</span>
<i class="fas fa-chevron-left unit-lesson-arrow"></i>
</a>
</div>
<a href="/Secondary2/Learn/Lesson/2357" class="sidebar-next-lesson-cta">
<span>الدرس التالي</span>
<i class="fas fa-arrow-left ms-2"></i>
</a>
</div>
<!-- Social Sharing -->
<div class="sidebar-card social-sharing">
<h4><i class="fas fa-share-alt me-2"></i>مشاركة الدرس</h4>
<div class="social-buttons">
<div class="fb-like" data-href="https://alamin-edu.com/Secondary2/Learn/Lesson/2356" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="false"></div>
<div class="fb-share-button" data-href="https://alamin-edu.com/Secondary2/Learn/Lesson/2356" data-layout="button_count" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://alamin-edu.com/Secondary2/Learn/Lesson/2356" class="fb-xfbml-parse-ignore">مشاركة</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Exam Modal -->
<div id="examModal" class="exam-modal" style="display: none;">
<div class="exam-modal-overlay"></div>
<div class="exam-modal-container">
<div class="exam-modal-header">
<h4 id="examModalTitle" class="exam-modal-title">
<i class="fas fa-clipboard-check me-2"></i>الاختبار التفاعلي
</h4>
<button class="exam-modal-close" onclick="closeExamModal()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="exam-modal-body">
<iframe id="examModalIframe" class="exam-modal-iframe" src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="exam-modal-footer">
<button class="btn btn-secondary me-2" onclick="restartExamModal()">
<i class="fas fa-redo me-2"></i>إعادة الاختبار
</button>
<button class="btn btn-outline-secondary" onclick="closeExamModal()">
<i class="fas fa-times me-2"></i>إغلاق
</button>
</div>
</div>
</div>
<style>
/* Al-Amin Student Progress Completion Card */
.alamin-completion-card {
margin: 2rem 0;
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
border: 2px solid #bbf7d0;
border-radius: 20px;
box-shadow: 0 4px 16px rgba(22, 163, 74, 0.08);
transition: all 0.3s ease;
}
.alamin-completion-card.completed {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-color: #86efac;
}
.alamin-completion-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
flex-wrap: wrap;
}
.alamin-completion-badge {
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
flex-shrink: 0;
}
.alamin-completion-info {
flex: 1;
min-width: 240px;
}
.alamin-completion-title {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 0.35rem 0;
}
.alamin-completion-subtitle {
font-size: 0.92rem;
color: #475569;
margin: 0;
line-height: 1.45;
}
.alamin-completion-action {
flex-shrink: 0;
}
.alamin-completion-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.4rem;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: #ffffff !important;
font-weight: 700;
font-size: 0.98rem;
cursor: pointer;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
transition: all 0.2s ease;
}
.alamin-completion-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
color: #ffffff !important;
}
.alamin-completion-btn.completed {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
cursor: default;
transform: none !important;
}
.alamin-completion-btn.alamin-login-prompt {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}
.alamin-completion-alert {
margin-top: 1rem;
padding: 0.85rem 1.1rem;
border-radius: 12px;
background: #f0fdf4;
border: 1px solid #86efac;
color: #166534;
font-size: 0.92rem;
animation: alaminFadeIn 0.3s ease;
}
@keyframes alaminFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
.alamin-completion-content {
flex-direction: column;
text-align: center;
}
.alamin-completion-btn {
width: 100%;
}
}
/* Fix radio/checkbox placement for LTR English quizzes */
[dir="ltr"] .form-check,
.content-body[dir="ltr"] .form-check,
.ltr-quiz .form-check {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
direction: ltr !important;
}
[dir="ltr"] .form-check .form-check-input,
.content-body[dir="ltr"] .form-check .form-check-input,
.ltr-quiz .form-check .form-check-input {
float: none !important;
margin: 0 !important;
flex-shrink: 0 !important;
order: 1 !important;
}
[dir="ltr"] .form-check .form-check-label,
.content-body[dir="ltr"] .form-check .form-check-label,
.ltr-quiz .form-check .form-check-label {
margin: 0 !important;
cursor: pointer !important;
order: 2 !important;
text-align: left !important;
}
/* Continuous scroll display for all lesson sections */
.content-body .tab-content > .tab-pane,
.modern-lesson-page .tab-content > .tab-pane,
#lessonTabContent > .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
margin-bottom: 2.5rem !important;
padding-top: 1.5rem !important;
border-top: 1px dashed #cbd5e1 !important;
scroll-margin-top: 140px;
}
.content-body .tab-content > .tab-pane:first-child,
.modern-lesson-page .tab-content > .tab-pane:first-child,
#lessonTabContent > .tab-pane:first-child {
border-top: none !important;
padding-top: 0 !important;
}
/* Compact, modern sticky navigation pills */
.content-body #lessonTabs,
.modern-lesson-page #lessonTabs,
.nav-pills#lessonTabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
justify-content: center !important;
margin-bottom: 1.5rem !important;
padding: 6px 12px !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50px !important;
max-width: fit-content !important;
margin-left: auto !important;
margin-right: auto !important;
position: sticky !important;
top: 75px !important;
z-index: 100 !important;
backdrop-filter: blur(8px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
.content-body #lessonTabs .nav-item,
.modern-lesson-page #lessonTabs .nav-item {
margin: 0 !important;
}
.content-body #lessonTabs .nav-link,
.modern-lesson-page #lessonTabs .nav-link {
font-size: 0.8rem !important;
padding: 5px 12px !important;
border-radius: 20px !important;
color: #005078 !important;
background: transparent !important;
border: 1px solid transparent !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
line-height: 1.4 !important;
}
.content-body #lessonTabs .nav-link:hover {
background: rgba(0, 80, 120, 0.08) !important;
color: #003a57 !important;
}
.content-body #lessonTabs .nav-link.active {
background: #005078 !important;
color: #ffffff !important;
box-shadow: 0 2px 8px rgba(0, 80, 120, 0.25) !important;
}
.modern-lesson-page {
background: #f8fafc;
min-height: 100vh;
padding: 1.5rem 0;
overflow-x: hidden;
}
.lesson-breadcrumb {
background: white;
border-radius: 12px;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.lesson-breadcrumb .breadcrumb {
margin: 0;
background: none;
}
.lesson-breadcrumb .breadcrumb-item a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
.lesson-breadcrumb .breadcrumb-item a:hover {
color: var(--secondary-color);
}
.lesson-header {
background: white;
border-radius: 16px;
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 2px solid #f8f9fa;
}
.lesson-title {
color: var(--dark-color);
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #005078, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lesson-subtitle {
color: var(--secondary-color);
font-size: 1.1rem;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.lesson-meta {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--muted-color);
font-size: 0.95rem;
padding: 0.5rem 1rem;
background: #f8f9fa;
border-radius: 20px;
border: 1px solid #e9ecef;
}
.meta-item i {
color: var(--primary-color);
font-size: 1rem;
}
.lesson-image-container {
position: relative;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
padding: 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.lesson-main-image {
max-width: 100%;
width: 100%;
height: auto;
max-height: 220px;
object-fit: cover;
object-position: center;
border-radius: 16px;
transition: transform 0.3s ease;
}
.lesson-main-image:hover {
transform: scale(1.02);
}
.lesson-content-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.lesson-description {
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
border: none;
}
.lesson-videos,
.lesson-exams {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #eef2f6;
}
.lesson-videos h3,
.lesson-exams h3 {
color: var(--dark-color);
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f8f9fa;
font-size: 1.4rem;
}
.content-body {
line-height: 1.8;
color: var(--text-color);
font-size: 1.15rem;
}
.videos-grid,
.exams-grid {
display: flex;
flex-direction: column;
gap: 2rem;
}
.video-card,
.exam-card {
background: #f8f9fa;
border-radius: 12px;
overflow: hidden;
border: 2px solid #e9ecef;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-card:hover,
.exam-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.video-header,
.exam-header {
background: white;
padding: 1.5rem;
border-bottom: 2px solid #f8f9fa;
}
.video-header h4,
.exam-header h4 {
margin: 0;
color: var(--dark-color);
font-weight: 600;
font-size: 1.2rem;
}
.exam-info {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.question-count,
.view-count {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--muted-color);
font-size: 0.9rem;
}
.video-container,
.exam-container {
position: relative;
width: 100%;
background: #000;
}
.video-iframe {
width: 100%;
height: 400px;
border: none;
}
.exam-iframe {
width: 100%;
min-height: 600px;
border: none;
background: white;
}
.video-description,
.exam-description {
padding: 1rem 1.5rem;
background: white;
color: var(--text-color);
border-top: 1px solid #f8f9fa;
}
.exam-actions {
padding: 1rem 1.5rem;
background: white;
border-top: 1px solid #f8f9fa;
text-align: center;
}
.restart-exam {
background: linear-gradient(135deg, #005078, #003a57);
border: none;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.restart-exam:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.lesson-sidebar {
position: sticky;
top: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 2px solid #f8f9fa;
}
.sidebar-card h4 {
color: var(--dark-color);
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f8f9fa;
font-size: 1.1rem;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 0;
border-bottom: 1px solid #f1f5f9;
font-size: 0.95rem;
}
.info-item:last-child {
border-bottom: none;
}
.info-label-group {
display: flex;
align-items: center;
gap: 0.65rem;
}
.info-label-group i {
color: var(--primary-color);
width: 22px;
font-size: 1.1rem;
text-align: center;
}
.info-label-group .label {
font-weight: 700;
color: var(--dark-color);
white-space: nowrap;
}
.info-item .value {
color: #0369a1;
font-weight: 600;
text-align: left;
}
.nav-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nav-btn {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
text-decoration: none;
color: var(--dark-color);
transition: all 0.3s ease;
}
.nav-btn:hover {
transform: translateX(-5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: white;
}
.nav-btn.videos-btn:hover {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.nav-btn.exams-btn:hover {
background: linear-gradient(135deg, #22c55e, #16a34a);
}
.social-buttons {
display: flex !important;
flex-direction: row !important;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
width: 100% !important;
}
.social-buttons > div {
display: inline-block !important;
margin: 0 !important;
vertical-align: top !important;
float: none !important;
}
/* Force Facebook widgets to display horizontally */
.social-buttons .fb-like,
.social-buttons .fb-share-button {
display: inline-block !important;
vertical-align: top !important;
margin-right: 10px !important;
}
.social-buttons .fb-like span,
.social-buttons .fb-share-button span {
display: inline-block !important;
vertical-align: top !important;
}
/* Override any Facebook CSS that might stack buttons */
.social-buttons iframe {
vertical-align: top !important;
}
@media (max-width: 768px) {
.modern-lesson-page {
padding: 0.25rem 0 1.5rem 0;
background: #f8fafc;
}
.container {
padding-left: 10px;
padding-right: 10px;
}
.row {
margin-left: 0;
margin-right: 0;
}
.col-lg-8, .col-lg-4 {
padding-left: 0;
padding-right: 0;
}
/* Minimal Mobile Breadcrumb - No nested white card */
.lesson-breadcrumb {
background: transparent;
padding: 4px 6px;
margin-bottom: 6px;
border-radius: 0;
box-shadow: none;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
border: none;
}
.lesson-breadcrumb::-webkit-scrollbar { display: none; }
.lesson-breadcrumb .breadcrumb {
flex-wrap: nowrap;
font-size: 11px;
gap: 4px;
margin: 0;
}
/* Sleek Mobile Lesson Header */
.lesson-header {
padding: 12px 12px;
margin-bottom: 10px;
border-radius: 14px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
background: #ffffff;
}
.lesson-title {
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 4px;
background: none;
-webkit-text-fill-color: initial;
color: #1e3a8a;
font-weight: 800;
}
.lesson-title i {
display: none;
}
.lesson-subtitle {
font-size: 0.88rem;
line-height: 1.5;
margin-bottom: 8px;
color: #475569;
}
/* Horizontal Scrollable Metadata Badges (No vertical bloat) */
.lesson-meta {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
gap: 6px;
padding-bottom: 2px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.lesson-meta::-webkit-scrollbar { display: none; }
.meta-item {
padding: 4px 10px;
font-size: 11px;
border-radius: 14px;
flex-shrink: 0;
}
.lesson-image-container {
margin-top: 10px;
min-height: auto;
padding: 0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border: none;
background: transparent;
}
.lesson-main-image {
max-height: 190px;
width: 100%;
object-fit: cover;
border-radius: 12px;
}
.lesson-content-section {
gap: 0.75rem;
}
.lesson-description {
padding: 0;
border-radius: 0;
border: none;
box-shadow: none;
margin-bottom: 0;
background: transparent;
}
.lesson-description > h3 {
display: none !important;
}
.lesson-videos,
.lesson-exams,
.sidebar-card {
padding: 14px 12px;
border-radius: 14px;
border: 1px solid #e2e8f0;
margin-bottom: 12px;
}
.lesson-videos h3,
.lesson-exams h3 {
font-size: 1.15rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
/* Highly readable mobile typography for lesson body */
.content-body {
font-size: 1.05rem;
line-height: 1.85;
}
.lesson-sidebar {
position: static;
margin-top: 1rem;
}
.video-iframe {
height: 210px;
}
.exam-iframe {
min-height: 380px;
}
.info-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 13.5px;
padding: 0.75rem 0;
}
.info-label-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.info-label-group i {
width: 20px;
font-size: 1rem;
}
.info-label-group .label {
min-width: auto;
white-space: nowrap;
}
.info-item .value {
text-align: left;
font-weight: 600;
}
.nav-btn:hover {
transform: none;
}
}
/* Modal Styling */
.exam-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.exam-modal.active {
display: block !important;
opacity: 1;
visibility: visible;
}
.exam-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(3px);
}
.exam-modal-container {
position: relative;
width: 95%;
height: 95%;
max-width: 1200px;
margin: 2.5% auto;
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
transform: scale(0.8);
transition: transform 0.3s ease;
}
.exam-modal.active .exam-modal-container {
transform: scale(1);
}
.exam-modal-header {
background: linear-gradient(135deg, #2196f3, #1976d2);
color: white;
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
border-radius: 12px 12px 0 0;
}
.exam-modal-title {
margin: 0;
font-size: 1.3rem;
font-weight: 600;
}
.exam-modal-close {
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.exam-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.exam-modal-body {
flex: 1;
position: relative;
overflow: hidden;
}
.exam-modal-iframe {
width: 100%;
height: 100%;
border: none;
background: white;
}
.exam-modal-footer {
background: #f8f9fa;
padding: 1rem 1.5rem;
display: flex;
justify-content: center;
gap: 1rem;
border-top: 1px solid #e9ecef;
flex-shrink: 0;
border-radius: 0 0 12px 12px;
}
.exam-preview {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border: 2px dashed #dee2e6;
border-radius: 8px;
padding: 2rem;
text-align: center;
color: #6c757d;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.exam-preview:hover {
border-color: #4CAF50;
background: linear-gradient(135deg, #f1f8e9, #e8f5e8);
color: #2e7d2e;
}
.exam-preview-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #4CAF50;
}
.exam-modal-trigger {
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.exam-modal-trigger:hover {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
/* Mobile Modal Styling */
@media (max-width: 768px) {
.exam-modal-container {
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
}
.exam-modal-header {
padding: 1rem;
}
.exam-modal-title {
font-size: 1.1rem;
}
.exam-modal-footer {
padding: 1rem;
flex-direction: column;
}
.exam-modal-footer .btn {
width: 100%;
}
}
/* Next & Previous Lesson Pagination Card */
.lesson-pagination-card {
background: #ffffff;
border-radius: 20px;
padding: 1.75rem;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
border: 2px solid #e2e8f0;
margin-top: 0.5rem;
}
.lesson-pagination-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding-bottom: 1.1rem;
margin-bottom: 1.25rem;
border-bottom: 2px dashed #e2e8f0;
}
.pagination-title-group {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 1.15rem;
font-weight: 800;
color: #1e293b;
}
.pagination-title-group i {
color: #2563eb;
font-size: 1.3rem;
}
.pagination-progress-badge {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
color: #1d4ed8;
font-weight: 800;
font-size: 0.9rem;
padding: 0.4rem 1rem;
border-radius: 999px;
border: 1px solid #bfdbfe;
}
.lesson-pagination-grid {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 1.1rem;
}
.lesson-nav-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.4rem;
border-radius: 16px;
text-decoration: none !important;
transition: all 0.25s ease;
}
.lesson-nav-next {
background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
color: #ffffff !important;
box-shadow: 0 8px 22px rgba(22, 163, 74, 0.28);
border: 2px solid #15803d;
}
.lesson-nav-next:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(22, 163, 74, 0.38);
color: #ffffff !important;
}
.lesson-nav-complete {
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
color: #ffffff !important;
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.25);
border: 2px solid #1d4ed8;
}
.lesson-nav-complete:hover {
transform: translateY(-3px);
color: #ffffff !important;
}
.lesson-nav-prev {
background: #f8fafc;
color: #1e293b !important;
border: 2px solid #cbd5e1;
}
.lesson-nav-prev:hover {
background: #f1f5f9;
border-color: #3b82f6;
transform: translateY(-2px);
color: #1d4ed8 !important;
}
.nav-btn-content {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
flex: 1;
}
.nav-btn-label {
font-size: 0.85rem;
font-weight: 800;
opacity: 0.92;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.lesson-nav-prev .nav-btn-label {
color: #64748b;
}
.nav-btn-title {
font-size: 1.05rem;
font-weight: 800;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nav-btn-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.15rem;
background: rgba(255, 255, 255, 0.22);
}
.lesson-nav-prev .nav-btn-icon {
background: #e2e8f0;
color: #334155;
}
/* Sidebar Unit Lessons Playlist */
.unit-lessons-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
max-height: 360px;
overflow-y: auto;
padding-left: 4px;
}
.unit-lesson-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #334155 !important;
text-decoration: none !important;
font-size: 0.92rem;
font-weight: 600;
transition: all 0.2s ease;
}
.unit-lesson-item:hover {
background: #eff6ff;
border-color: #93c5fd;
color: #1d4ed8 !important;
}
.unit-lesson-item.active {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border: 2px solid #3b82f6;
color: #1e40af !important;
font-weight: 800;
}
.unit-lesson-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: #e2e8f0;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
font-weight: 800;
flex-shrink: 0;
}
.unit-lesson-item.active .unit-lesson-num {
background: #2563eb;
color: #ffffff;
}
.unit-lesson-title {
flex: 1;
min-width: 0;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.unit-lesson-current-badge {
background: #2563eb;
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
padding: 0.2rem 0.55rem;
border-radius: 999px;
flex-shrink: 0;
}
.unit-lesson-arrow {
color: #94a3b8;
font-size: 0.8rem;
flex-shrink: 0;
}
.sidebar-next-lesson-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.85rem 1.2rem;
border-radius: 12px;
background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
color: #ffffff !important;
font-weight: 800;
font-size: 1rem;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
transition: all 0.2s ease;
}
.sidebar-next-lesson-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
color: #ffffff !important;
}
@media (max-width: 768px) {
.lesson-pagination-grid {
grid-template-columns: 1fr;
}
.lesson-pagination-card {
padding: 1.25rem;
}
}
</style>
<script>
function restartExam(examUrl) {
const iframe = event.target.closest('.exam-card').querySelector('.exam-iframe');
iframe.src = iframe.src;
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (!href || href === '#' || href.length <= 1) return;
try {
const target = document.querySelector(href);
if (target) {
e.preventDefault();
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
} catch (err) {}
});
});
// Auto-resize iframes
document.addEventListener('DOMContentLoaded', function() {
const iframes = document.querySelectorAll('.exam-iframe');
iframes.forEach(iframe => {
iframe.onload = function() {
try {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const height = iframeDoc.documentElement.scrollHeight;
if (height > 400) {
iframe.style.height = height + 'px';
}
} catch (e) {
// Cross-origin restrictions - keep default height
}
};
});
});
</script>
<!-- Facebook SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml: true,
version: 'v18.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/ar_AR/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Exam Modal Functionality
let currentExamUrl = '';
function openExamModal(examUrl, examName) {
const modal = document.getElementById('examModal');
const iframe = document.getElementById('examModalIframe');
const title = document.getElementById('examModalTitle');
currentExamUrl = examUrl;
iframe.src = examUrl;
title.innerHTML = '<i class="fas fa-clipboard-check me-2"></i>' + examName;
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeExamModal() {
const modal = document.getElementById('examModal');
const iframe = document.getElementById('examModalIframe');
modal.classList.remove('active');
document.body.style.overflow = '';
// Clear iframe after animation
setTimeout(function() {
iframe.src = 'about:blank';
}, 300);
}
function restartExamModal() {
const iframe = document.getElementById('examModalIframe');
iframe.src = currentExamUrl;
}
// Initialize modal functionality
document.addEventListener('DOMContentLoaded', function() {
// Add click handlers to exam triggers
document.querySelectorAll('.exam-modal-trigger').forEach(button => {
button.addEventListener('click', function() {
const examUrl = this.getAttribute('data-exam-url');
const examName = this.getAttribute('data-exam-name');
openExamModal(examUrl, examName);
});
});
// Close modal on overlay click
const overlay = document.querySelector('.exam-modal-overlay');
if (overlay) {
overlay.addEventListener('click', closeExamModal);
}
// Close modal on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeExamModal();
}
});
// Continuous Lesson Sections: Smooth Scroll Navigation
const tabLinks = document.querySelectorAll('#lessonTabs .nav-link, .lesson-nav-pills .nav-link');
if (tabLinks.length > 0) {
tabLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const targetSelector = this.getAttribute('data-bs-target') || this.getAttribute('href');
if (targetSelector && targetSelector.startsWith('#')) {
const targetEl = document.querySelector(targetSelector);
if (targetEl) {
const navOffset = 130;
const elPosition = targetEl.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({
top: elPosition - navOffset,
behavior: 'smooth'
});
tabLinks.forEach(l => l.classList.remove('active'));
this.classList.add('active');
}
}
});
});
// Sync active pill with scroll position
const panes = document.querySelectorAll('#lessonTabContent > .tab-pane, .tab-content > .tab-pane');
if (panes.length > 0) {
window.addEventListener('scroll', function() {
let currentId = '';
const scrollPos = window.pageYOffset + 160;
panes.forEach(pane => {
if (pane.offsetTop <= scrollPos) {
currentId = '#' + pane.id;
}
});
if (currentId) {
tabLinks.forEach(link => {
const target = link.getAttribute('data-bs-target') || link.getAttribute('href');
if (target === currentId) {
tabLinks.forEach(l => l.classList.remove('active'));
link.classList.add('active');
}
});
}
}, { passive: true });
}
}
});
// Al-Amin Unified Learning Progress & Smart Evaluation Tracker
var alaminProgressSaved = false;
function alaminSaveCompletion(lessonId, score, maxScore, onResult) {
return window.alaminWebsiteProgress.submit(maxScore > 0 ? 'assessment' : 'completion', onResult);
}
function alaminRenderStation5CelebrationCard(isLoggedIn, correctCount, totalQuestions, finalScore, pct) {
var boxId = 'alaminStation5ResultBox';
var existingBox = document.getElementById(boxId);
if (!existingBox) {
existingBox = document.createElement('div');
existingBox.id = boxId;
existingBox.className = 'alamin-station-result-wrap';
// Find best insertion point in Station 5
var st5 = document.querySelector('.alamin-station[id$="_5"] .alamin-card, #stStation_5 .alamin-card, [id^="stStation_"][id$="_5"] .alamin-card');
if (st5) {
st5.appendChild(existingBox);
} else {
var lastQ = document.querySelector('.alamin-quiz-q:last-of-type');
if (lastQ && lastQ.parentNode) {
lastQ.parentNode.insertBefore(existingBox, lastQ.nextSibling);
} else {
var container = document.querySelector('.modern-lesson-page .container') || document.body;
container.appendChild(existingBox);
}
}
}
var loginUrl = '/Account/Login?returnUrl=' + encodeURIComponent(window.location.pathname);
if (isLoggedIn) {
existingBox.innerHTML =
'<div style="background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 2px solid #10b981; border-radius: 18px; padding: 1.5rem; margin-top: 1.5rem; text-align: center; box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15); animation: alaminPopIn 0.4s ease;">' +
'<div style="font-size: 2.6rem; line-height: 1; margin-bottom: 0.6rem;">🏆 🎉</div>' +
'<h3 style="color: #065f46; font-weight: 800; font-size: 1.35rem; margin-bottom: 0.5rem;">' +
'أحسنت صنعاً يا بطل التميز!' +
'</h3>' +
'<div style="font-size: 1.05rem; color: #047857; margin-bottom: 0.85rem; font-weight: 700;">' +
'درجة التقييم الذكي: <span style="background: #10b981; color: #ffffff; padding: 3px 14px; border-radius: 20px; font-weight: 800;">' + correctCount + ' / ' + totalQuestions + ' (' + pct + '%)</span>' +
'</div>' +
'<div style="background: #ffffff; border-radius: 12px; padding: 10px 18px; display: inline-block; color: #0f172a; font-weight: 700; margin-bottom: 0.5rem; border: 1px dashed #10b981; box-shadow: 0 2px 6px rgba(0,0,0,0.04);">' +
'<i class="fas fa-star text-warning me-1 ms-1"></i> رصيد هذا الدرس (' + finalScore + ' من 10 نقاط) إلى رصيدك وترتيبك في لوحة الصدارة بنجاح ✓' +
'</div>' +
'</div>';
} else {
existingBox.innerHTML =
'<div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 2px solid #f59e0b; border-radius: 18px; padding: 1.5rem; margin-top: 1.5rem; text-align: center; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15); animation: alaminPopIn 0.4s ease;">' +
'<div style="font-size: 2.6rem; line-height: 1; margin-bottom: 0.6rem;">🌟 🚀</div>' +
'<h3 style="color: #92400e; font-weight: 800; font-size: 1.35rem; margin-bottom: 0.5rem;">' +
'إنجاز رائع ومتميز يا بطل!' +
'</h3>' +
'<div style="font-size: 1.05rem; color: #b45309; margin-bottom: 0.85rem; font-weight: 700;">' +
'درجة التقييم الذكي: <span style="background: #f59e0b; color: #ffffff; padding: 3px 14px; border-radius: 20px; font-weight: 800;">' + correctCount + ' / ' + totalQuestions + ' (' + pct + '%)</span>' +
'</div>' +
'<p style="color: #78350f; font-size: 0.98rem; max-width: 620px; margin: 0 auto 1.25rem; font-weight: 600; line-height: 1.7;">' +
'أنت تستحق وسام التفوق! سجّل الدخول بحسابك الآن لحفظ نقاطك (+' + finalScore + ' من 10 نقاط) ومتابعة تقدمك وترتيبك بين الأوائل في لوحة شرف المنصة.' +
'</p>' +
'<div>' +
'<a href="' + loginUrl + '" class="btn btn-warning btn-lg fw-bold px-4 py-2 shadow-sm rounded-pill" style="background: #f59e0b; border: none; color: #ffffff; font-size: 1.05rem;">' +
'<i class="fas fa-sign-in-alt me-2 ms-2"></i>سجّل الدخول لحفظ نقاطك ومتابعة ترتيبك الآن 🚀' +
'</a>' +
'</div>' +
'</div>';
}
setTimeout(function() {
existingBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 120);
}
// Auto hooks for seamless student progress tracking
document.addEventListener('DOMContentLoaded', function() {
var lessonId = 2356;
// 1. Station 5 Smart Quiz Universal Auto-Tracker
var quizQuestions = document.querySelectorAll('.alamin-quiz-q');
var totalQuizQuestions = quizQuestions.length;
var station5Triggered = false;
function evaluateStation5Completion() {
if (station5Triggered || totalQuizQuestions === 0) return;
var answeredExps = document.querySelectorAll('.alamin-quiz-exp.correct-state, .alamin-quiz-exp.wrong-state');
if (answeredExps.length === totalQuizQuestions) {
station5Triggered = true;
var correctCount = document.querySelectorAll('.alamin-quiz-exp.correct-state').length;
var quizBonus = Math.round((correctCount / totalQuizQuestions) * 5);
var finalScore = 5 + quizBonus; // 5 base + up to 5 quiz = 5 to 10
var maxScore = 10;
var pct = Math.round((correctCount / totalQuizQuestions) * 100);
alaminSaveCompletion(lessonId, correctCount, totalQuizQuestions, function(isLoggedIn, saved) {
alaminRenderStation5CelebrationCard(isLoggedIn, correctCount, totalQuizQuestions, isLoggedIn ? saved.points : finalScore, pct);
});
}
}
if (totalQuizQuestions > 0) {
document.addEventListener('click', function(e) {
var optBtn = e.target.closest('.alamin-quiz-opt');
if (optBtn) {
setTimeout(evaluateStation5Completion, 80);
}
});
}
// 2. Unit Exams (20-question milestones) Auto-Tracker
var examAlerts = document.querySelectorAll('[id^="exAlert_"]');
if (examAlerts.length > 0 && window.MutationObserver) {
var examObs = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
var target = m.target;
if (target && !target.classList.contains('d-none') && (target.classList.contains('alert-success') || target.classList.contains('alert-info'))) {
var text = target.innerText || '';
var match = text.match(/(\d+)\s*\/\s*(\d+)/);
if (match && !alaminProgressSaved) {
var examScore = parseInt(match[1]);
var examTotal = parseInt(match[2]);
alaminSaveCompletion(lessonId, examScore, examTotal, function(isLoggedIn) {
if (!isLoggedIn && !target.querySelector('.alamin-exam-login-cta')) {
var loginUrl = '/Account/Login?returnUrl=' + encodeURIComponent(window.location.pathname);
var cta = document.createElement('div');
cta.className = 'alamin-exam-login-cta mt-3 pt-3 border-top text-center';
cta.innerHTML = '<p class="mb-2 text-dark fw-bold">🌟 نتيجة رائعة! احفظ درجتك ونقاطك في الترتيب العام الآن:</p>' +
'<a href="' + loginUrl + '" class="btn btn-warning fw-bold px-4 py-2 rounded-pill shadow-sm"><i class="fas fa-sign-in-alt me-1 ms-1"></i> تسجيل الدخول لحفظ النتيجة في لوحة المتصدرين 🚀</a>';
target.appendChild(cta);
}
});
}
}
});
});
examAlerts.forEach(function(el) {
examObs.observe(el, { attributes: true, attributeFilter: ['class'] });
});
}
// 3. Auto-save completion when navigating to next lesson
// 4. Legacy certificate reward banners
var certBanners = document.querySelectorAll('[data-quiz-reward-banner="true"], [id^="quizCertBanner"]');
if (certBanners.length > 0 && window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
if (m.target && m.target.style && m.target.style.display !== 'none' && !alaminProgressSaved) {
alaminSaveCompletion(lessonId, 10, 10);
}
});
});
certBanners.forEach(function(banner) {
observer.observe(banner, { attributes: true, attributeFilter: ['style', 'class'] });
});
}
});
</script>
</main>
<footer class="modern-portal-footer py-4 py-md-5 mt-5 text-light" dir="rtl">
<div class="container">
<div class="row g-4 align-items-start">
<!-- About Section -->
<div class="col-lg-5 col-12 mb-2 mb-lg-0">
<div class="d-flex align-items-center gap-2 mb-3">
<img src="/images/iconLogo.png" alt="الأمين التعليمية" height="38" class="footer-logo">
<h5 class="footer-brand-title mb-0">الأمين التعليمية</h5>
</div>
<p class="footer-about-text mb-3">
دروس تفاعلية، ومحاكيات بصرية، وأسئلة تدريبية، وأدوات تعليمية تساعد على الفهم والتدريب، من رياض الأطفال حتى المرحلة الثانوية، مع ملف مستقل لكل طالب ومتابعة تقدمه.
</p>
<div class="footer-social-links d-flex align-items-center gap-2">
<a href="https://www.facebook.com/AlaminEduPortal" class="social-btn facebook" target="_blank" aria-label="فيسبوك" title="فيسبوك">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.youtube.com/channel/UCXkUcPA-3b5PfFJ_w3YkrKg" class="social-btn youtube" target="_blank" aria-label="يوتيوب" title="يوتيوب">
<i class="fab fa-youtube"></i>
</a>
<a href="https://twitter.com/AlaminEduGate" class="social-btn twitter" target="_blank" aria-label="تويتر" title="تويتر">
<i class="fab fa-twitter"></i>
</a>
</div>
</div>
<!-- Quick Links & Legal: Side-by-side on mobile (col-6) to keep footer compact and professional! -->
<div class="col-lg-3 col-6">
<h6 class="footer-heading mb-3">روابط سريعة</h6>
<ul class="list-unstyled footer-list mb-0">
<li class="mb-2"><a href="/" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>الرئيسية</a></li>
<li class="mb-2"><a href="/about" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>عن البوابة</a></li>
<li class="mb-2"><a href="/contact" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>اتصل بنا</a></li>
<li class="mb-2"><a href="/Arabic/Tools" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>الأدوات التعليمية</a></li>
</ul>
</div>
<div class="col-lg-4 col-6">
<h6 class="footer-heading mb-3">وثائق ومعلومات</h6>
<ul class="list-unstyled footer-list mb-0">
<li class="mb-2"><a href="/privacy" class="footer-link"><i class="fas fa-angle-left ms-1 text-info opacity-75"></i>سياسة الخصوصية</a></li>
<li class="mb-2"><a href="/terms" class="footer-link"><i class="fas fa-angle-left ms-1 text-info opacity-75"></i>شروط الاستخدام</a></li>
<li class="mb-2"><a href="/disclaimer" class="footer-link"><i class="fas fa-angle-left ms-1 text-info opacity-75"></i>إخلاء المسؤولية</a></li>
</ul>
</div>
</div>
<!-- Copyright -->
<hr class="footer-divider my-4">
<div class="row align-items-center">
<div class="col-12 text-center">
<p class="footer-copyright mb-0">
© 2026 الأمين التعليمية. جميع الحقوق محفوظة.
</p>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="/vendor/family/bootstrap.bundle.min.js"></script>
<!-- Professional Header JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Navbar scroll effect
const navbar = document.querySelector('.navbar');
let lastScrollY = window.scrollY;
function updateNavbar() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
}
// Search input focus enhancement
const searchInput = document.querySelector('.search-input .form-control');
if (searchInput) {
searchInput.addEventListener('focus', function() {
this.parentElement.style.transform = 'scale(1.02)';
});
searchInput.addEventListener('blur', function() {
this.parentElement.style.transform = 'scale(1)';
});
}
// Mobile menu enhancements with improved scroll behavior
const mobileMenu = document.getElementById('mobileMenu');
if (mobileMenu) {
// Allow background scrolling when offcanvas is open
mobileMenu.addEventListener('show.bs.offcanvas', function() {
// Don't disable body scroll - allow users to scroll the main page
// The offcanvas overlay will handle touch events properly
});
mobileMenu.addEventListener('hide.bs.offcanvas', function() {
// Nothing needed here since we didn't disable body scroll
});
// Close menu when clicking on links (better UX)
const menuLinks = mobileMenu.querySelectorAll('a[href]:not([href="#"])');
menuLinks.forEach(function(link) {
link.addEventListener('click', function() {
const offcanvasInstance = bootstrap.Offcanvas.getInstance(mobileMenu);
if (offcanvasInstance) {
offcanvasInstance.hide();
}
});
});
}
// Dropdown menu enhancements
const dropdownElements = document.querySelectorAll('.dropdown-toggle');
dropdownElements.forEach(function(element) {
element.addEventListener('show.bs.dropdown', function() {
this.setAttribute('aria-expanded', 'true');
});
element.addEventListener('hide.bs.dropdown', function() {
this.setAttribute('aria-expanded', 'false');
});
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
const href = this.getAttribute('href');
if (!href || href === '#' || href.length <= 1) return;
try {
const target = document.querySelector(href);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
} catch (err) {}
});
});
// Keyboard navigation enhancements
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
// Close any open dropdowns
const openDropdowns = document.querySelectorAll('.dropdown-menu.show');
openDropdowns.forEach(function(dropdown) {
const toggle = dropdown.previousElementSibling;
if (toggle) {
bootstrap.Dropdown.getInstance(toggle)?.hide();
}
});
// Close mobile menu if open
const mobileMenuInstance = bootstrap.Offcanvas.getInstance(mobileMenu);
if (mobileMenuInstance) {
mobileMenuInstance.hide();
}
}
});
// Performance optimization: Debounce scroll events
let ticking = false;
function requestTick() {
if (!ticking) {
requestAnimationFrame(updateNavbar);
ticking = true;
setTimeout(() => { ticking = false; }, 16);
}
}
window.addEventListener('scroll', requestTick, { passive: true });
});
</script>
<!-- Modern CSS Styles -->
<style>
:root {
--primary-color: #005078;
--primary-hover: #003a57;
--secondary-color: #64748b;
--success-color: #16a34a;
--warning-color: #d97706;
--danger-color: #dc2626;
--info-color: #0ea5e9;
--light-color: #f8fafc;
--dark-color: #1e293b;
--border-color: #e2e8f0;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
body {
font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
line-height: 1.6;
color: #334155;
background-color: #fafbfc;
}
/* Professional Header Styles */
.navbar {
padding: 0.75rem 0;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.navbar.scrolled {
padding: 0.5rem 0;
box-shadow: var(--shadow-lg);
}
.navbar-brand {
font-weight: 700;
transition: transform 0.3s ease;
}
.navbar-brand:hover {
transform: scale(1.02);
}
.brand-text h1 {
font-weight: 700;
color: var(--primary-color);
font-size: 1.3rem;
line-height: 1.2;
}
.brand-text small {
font-size: 0.8rem;
color: var(--secondary-color);
font-weight: 500;
}
/* Navigation Links */
.navbar-nav .nav-link {
color: var(--dark-color);
font-weight: 500;
transition: all 0.3s ease;
position: relative;
border-radius: 8px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: var(--primary-color);
background: rgba(0, 80, 120, 0.06);
transform: translateY(-1px);
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: -2px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.navbar-nav .nav-link:hover::after {
width: 80%;
}
/* Dropdown Menus */
.dropdown-menu {
border: none;
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 0.5rem 0;
margin-top: 0.5rem;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.98);
}
.dropdown-item {
padding: 0.75rem 1rem;
font-weight: 500;
color: var(--dark-color);
transition: all 0.3s ease;
border-radius: 8px;
margin: 0 0.5rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: rgba(0, 80, 120, 0.10);
color: var(--primary-color);
transform: translateX(-3px);
}
.dropdown-item i {
font-size: 0.9rem;
}
/* Search Input Styling */
.search-input .form-control {
border: 2px solid var(--border-color);
border-radius: 25px 0 0 25px;
padding: 0.75rem 1rem;
font-size: 0.95rem;
transition: all 0.3s ease;
background: #fafbfc;
}
.search-input .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 80, 120, 0.15);
background: white;
}
.search-input .btn {
border: 2px solid var(--border-color);
border-right: none;
border-radius: 0 25px 25px 0;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
background: #fafbfc;
}
.search-input .btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
/* Social Media Buttons */
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-info {
border-width: 2px;
transition: all 0.3s ease;
}
.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-outline-info:hover {
transform: scale(1.1);
box-shadow: var(--shadow-md);
}
/* Mobile Toggle */
.navbar-toggler {
border: none;
border-radius: 8px;
padding: 0.5rem;
transition: all 0.3s ease;
}
.navbar-toggler:hover {
background: rgba(0, 80, 120, 0.10);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 80, 120, 0.15);
}
/* Mobile Offcanvas */
.offcanvas {
width: 320px;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
z-index: 1055;
}
.offcanvas-header {
background: linear-gradient(135deg, var(--primary-color), #08749e);
border-bottom: none;
}
/* Ensure offcanvas backdrop doesn't interfere with scrolling */
.offcanvas-backdrop {
background-color: rgba(0, 0, 0, 0.3);
}
/* Allow body scrolling even when offcanvas is open */
body.offcanvas-open {
overflow: visible !important;
padding-right: 0 !important;
}
/* Improve touch scrolling on mobile */
.offcanvas-body {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
height: 100%;
}
.list-group-item-action {
transition: all 0.3s ease;
border: none;
}
.list-group-item-action:hover {
background: rgba(0, 80, 120, 0.06);
color: var(--primary-color);
transform: translateX(-3px);
}
.accordion-button {
font-weight: 500;
}
.accordion-button:not(.collapsed) {
background: rgba(0, 80, 120, 0.06);
color: var(--primary-color);
}
.accordion-button:focus {
box-shadow: none;
border: none;
}
/* Enhanced Mobile Responsive Design */
@media (max-width: 991.98px) {
.navbar-brand .brand-text h1 {
font-size: 1.1rem;
}
.brand-text small {
display: none !important;
}
.hero-section {
padding: 60px 0;
}
.hero-title {
font-size: 2.2rem;
}
.hero-subtitle {
font-size: 1.1rem;
padding: 0 1rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.lessons-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 575.98px) {
.navbar {
padding: 0.5rem 0;
}
.container-fluid {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.navbar-brand img {
height: 35px;
}
.navbar-brand .brand-text h1 {
font-size: 0.95rem;
}
.hero-section {
padding: 40px 0 50px 0;
}
.hero-title {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 1.5rem;
padding: 0 0.5rem;
}
.hero-buttons {
flex-direction: column;
gap: 0.75rem;
padding: 0 1rem;
}
.hero-buttons .btn {
width: 100%;
max-width: 280px;
padding: 12px 20px;
font-size: 0.95rem;
}
.stats-section {
padding: 60px 0;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.stat-item {
padding: 1.5rem;
}
.stat-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 2rem;
}
.features-section {
padding: 60px 0;
}
.feature-card {
padding: 1.5rem;
margin-bottom: 1rem;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.feature-title {
font-size: 1.3rem;
}
.lessons-section {
padding: 60px 0;
}
.lessons-header {
flex-direction: column;
gap: 1rem;
text-align: center;
margin-bottom: 2rem;
}
.lessons-title {
font-size: 1.8rem;
}
.lesson-card {
margin-bottom: 1rem;
}
.lesson-image {
height: 160px;
}
.lesson-content {
padding: 1.25rem;
}
.lesson-title {
font-size: 1.1rem;
}
.lesson-actions {
flex-direction: column;
gap: 0.5rem;
}
.lesson-btn {
width: 100%;
justify-content: center;
}
.cta-section {
padding: 60px 0;
}
.cta-title {
font-size: 1.8rem;
}
.cta-subtitle {
font-size: 1rem;
padding: 0 0.5rem;
}
.cta-buttons {
flex-direction: column;
gap: 0.75rem;
padding: 0 1rem;
}
.cta-buttons .btn {
width: 100%;
max-width: 280px;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 1.6rem;
}
.section-title {
font-size: 1.6rem;
}
.container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.offcanvas {
width: 280px;
}
}
/* Tooltip Styling */
.tooltip {
font-size: 0.8rem;
}
/* Smooth Animations */
* {
scroll-behavior: smooth;
}
/* Loading Animation for Search */
.search-loading {
opacity: 0.7;
pointer-events: none;
}
/* Accessibility Improvements */
.nav-link:focus,
.dropdown-item:focus,
.btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Enhanced Visual Hierarchy */
.navbar-brand {
z-index: 1001;
}
/* Performance Optimizations */
.navbar-nav,
.dropdown-menu,
.offcanvas {
will-change: transform;
}
.hero-section {
background: linear-gradient(135deg, var(--primary-color), #08749e);
color: white;
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-title {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.95;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.hero-buttons .btn {
padding: 12px 24px;
font-weight: 600;
border-radius: 8px;
}
.stats-section {
padding: 80px 0;
background: var(--light-color);
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
color: var(--dark-color);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.stat-item {
background: white;
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2rem;
color: white;
}
.stat-icon.lessons-icon {
background: var(--primary-color);
}
.stat-icon.students-icon {
background: var(--success-color);
}
.stat-icon.tools-icon {
background: var(--warning-color);
}
.stat-icon.videos-icon {
background: var(--danger-color);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1.1rem;
color: var(--secondary-color);
}
.features-section {
padding: 80px 0;
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: var(--secondary-color);
margin-bottom: 3rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2rem;
color: white;
}
.feature-icon.arabic-icon {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.feature-icon.lessons-icon {
background: linear-gradient(135deg, #005078, #08749e);
}
.feature-icon.tools-icon {
background: linear-gradient(135deg, #d97706, #f59e0b);
}
.feature-icon.interactive-icon {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.feature-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--dark-color);
}
.feature-description {
color: var(--secondary-color);
line-height: 1.6;
}
.lessons-section {
padding: 80px 0;
background: var(--light-color);
}
.lessons-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
}
.lessons-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-color);
}
.view-all-btn {
background: var(--primary-color);
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
}
.view-all-btn:hover {
background: #003a57;
color: white;
}
.lessons-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.lesson-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lesson-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.lesson-image {
height: 200px;
background: linear-gradient(135deg, var(--primary-color), #08749e);
position: relative;
overflow: hidden;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.lesson-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform 0.3s ease, filter 0.3s ease;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 8px;
}
.lesson-image img:hover {
transform: scale(1.02);
filter: brightness(1.1);
}
.lesson-image img.loading {
filter: blur(2px);
opacity: 0.7;
}
.lesson-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
rgba(59, 130, 246, 0.1) 0%,
rgba(139, 92, 246, 0.1) 100%);
pointer-events: none;
}
.lesson-content {
padding: 1.5rem;
}
.lesson-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--dark-color);
line-height: 1.4;
}
.lesson-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.lesson-badge {
background: var(--light-color);
color: var(--secondary-color);
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 4px;
}
.lesson-badge.grade {
background: #dbeafe;
color: var(--primary-color);
}
.lesson-badge.subject {
background: #dcfce7;
color: var(--success-color);
}
.lesson-badge.views {
background: #fef3c7;
color: var(--warning-color);
}
.lesson-description {
color: var(--secondary-color);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.lesson-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.lesson-btn {
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.lesson-btn.primary {
background: var(--primary-color);
color: white;
}
.lesson-btn.primary:hover {
background: #003a57;
color: white;
}
.lesson-btn.success {
background: var(--success-color);
color: white;
}
.lesson-btn.success:hover {
background: #15803d;
color: white;
}
.lesson-btn.secondary {
background: var(--secondary-color);
color: white;
}
.lesson-btn.secondary:hover {
background: #475569;
color: white;
}
.cta-section {
background: linear-gradient(135deg, var(--dark-color), #374151);
color: white;
padding: 80px 0;
text-align: center;
}
.cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-subtitle {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-buttons .btn {
margin: 0.5rem;
padding: 12px 24px;
font-weight: 600;
border-radius: 8px;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 2rem;
}
.lessons-header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.lessons-title {
font-size: 2rem;
}
.cta-title {
font-size: 2rem;
}
.cta-subtitle {
font-size: 1rem;
}
.navbar-nav .nav-link {
padding: 0.5rem 0;
}
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animate__fadeInUp {
animation-name: fadeInUp;
}
.animate__delay-1s {
animation-delay: 0.5s;
}
.animate__delay-2s {
animation-delay: 1s;
}
/* Modern Portal Footer Styling */
.modern-portal-footer {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #cbd5e1;
}
.footer-brand-title {
color: #ffffff !important;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-about-text {
color: #94a3b8;
font-size: 0.9rem;
line-height: 1.7;
max-width: 440px;
}
.footer-heading {
color: #f8fafc;
font-weight: 700;
font-size: 0.98rem;
position: relative;
padding-bottom: 8px;
}
.footer-heading::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 26px;
height: 2px;
background: #38bdf8;
border-radius: 2px;
}
.footer-list {
margin: 0;
padding: 0;
}
.footer-link {
color: #94a3b8 !important;
text-decoration: none !important;
font-size: 0.88rem;
display: inline-block;
transition: all 0.25s ease;
}
.footer-link:hover {
color: #38bdf8 !important;
transform: translateX(-4px);
}
.footer-divider {
border-color: rgba(255, 255, 255, 0.08);
}
.footer-copyright {
color: #94a3b8;
font-size: 0.86rem;
}
.footer-social-links .social-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
color: #e2e8f0;
text-decoration: none;
transition: all 0.25s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-social-links .social-btn:hover {
transform: translateY(-2px);
}
.footer-social-links .social-btn.facebook:hover {
background: #1877f2;
color: #fff;
border-color: #1877f2;
}
.footer-social-links .social-btn.youtube:hover {
background: #ff0000;
color: #fff;
border-color: #ff0000;
}
.footer-social-links .social-btn.twitter:hover {
background: #1da1f2;
color: #fff;
border-color: #1da1f2;
}
@media (max-width: 767.98px) {
.modern-portal-footer {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
text-align: right;
}
.footer-about-text {
font-size: 0.84rem;
margin-bottom: 1rem;
}
.footer-heading {
font-size: 0.92rem;
margin-bottom: 0.75rem !important;
}
.footer-link {
font-size: 0.84rem;
}
}
/* Content Pages Styling */
.content-page {
background: #f8f9fa;
min-height: calc(100vh - 200px);
padding: 2rem 0;
}
.content-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 3rem;
margin: 2rem auto;
max-width: 1000px;
}
.page-header-content {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 2px solid #e9ecef;
}
.page-title-content {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1rem;
}
.page-subtitle-content {
font-size: 1.1rem;
color: var(--secondary-color);
margin-bottom: 0;
}
.content-section {
margin-bottom: 3rem;
}
.content-section h2 {
font-size: 1.8rem;
font-weight: 600;
color: var(--dark-color);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid var(--primary-color);
display: inline-block;
}
.content-section h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 1rem;
margin-top: 2rem;
}
.content-section h4 {
font-size: 1.2rem;
font-weight: 600;
color: var(--dark-color);
margin-bottom: 1rem;
margin-top: 1.5rem;
}
.content-section p {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin-bottom: 1.5rem;
}
.content-section ul {
margin: 1.5rem 0;
padding-right: 2rem;
}
.content-section li {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin-bottom: 0.8rem;
}
.content-section li strong {
color: var(--primary-color);
font-weight: 600;
}
.highlight-box {
background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
border: 1px solid #bbdefb;
border-radius: 8px;
padding: 2rem;
margin: 2rem 0;
position: relative;
}
.highlight-box::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--primary-color);
border-radius: 4px 0 0 4px;
}
.contact-form {
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
font-weight: 600;
color: var(--dark-color);
margin-bottom: 0.5rem;
display: block;
}
.form-control {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 80, 120, 0.25);
}
.btn-primary {
background: var(--primary-color);
border: none;
padding: 0.75rem 2rem;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: #003a57;
transform: translateY(-2px);
}
/* Responsive adjustments for content pages */
@media (max-width: 768px) {
/* Fix mobile container spacing - remove excessive margins */
.content-page {
padding: 0.5rem 0 !important;
margin: 0 !important;
}
.container {
max-width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0 !important;
}
.content-container {
padding: 1.5rem 1rem !important;
margin: 0.5rem 5px !important;
border-radius: 8px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Make all cards full width on mobile */
.card {
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 8px !important;
}
/* Remove breadcrumb margins on mobile */
.breadcrumb {
margin-bottom: 0.5rem !important;
padding: 0.5rem 0 !important;
background: transparent !important;
}
/* Optimize page header for mobile */
.page-header-content {
padding: 1rem 0 !important;
margin-bottom: 1.5rem !important;
text-align: center !important;
}
.page-title-content {
font-size: 1.8rem !important;
margin-bottom: 0.5rem !important;
line-height: 1.3 !important;
}
.page-subtitle-content {
font-size: 1rem !important;
margin-bottom: 1rem !important;
line-height: 1.5 !important;
padding: 0 0.5rem !important;
}
.content-section h2 {
font-size: 1.5rem;
}
.content-section h3 {
font-size: 1.3rem;
}
/* Ensure forms and inputs are mobile-friendly */
.form-control {
font-size: 16px !important; /* Prevents zoom on iOS */
padding: 12px 15px !important;
}
/* Make buttons more touch-friendly while respecting small buttons */
.btn:not(.btn-sm):not(.btn-sound) {
min-height: 44px !important;
padding: 12px 20px !important;
font-size: 1rem !important;
}
.btn-sm {
min-height: auto !important;
padding: 5px 12px !important;
font-size: 0.85rem !important;
}
/* Better spacing for educational badges */
.educational-badges .badge {
display: block !important;
margin-bottom: 0.5rem !important;
font-size: 0.9rem !important;
padding: 0.5rem 0.75rem !important;
}
.badge {
white-space: normal !important;
line-height: 1.45 !important;
text-align: right !important;
max-width: 100% !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.alamin-exam-hero, .alamin-card, .card.alamin-card {
padding: 1.25rem 1rem !important;
border-radius: 16px !important;
box-sizing: border-box !important;
max-width: 100% !important;
width: 100% !important;
overflow: hidden !important;
}
.alamin-exam-hero h1, .alamin-card h1 {
font-size: 1.25rem !important;
line-height: 1.55 !important;
}
.alamin-exam-hero p, .alamin-card p {
font-size: 0.95rem !important;
line-height: 1.65 !important;
}
}
@media (max-width: 480px) {
.content-container {
margin: 0.25rem 2px !important;
padding: 1rem 0.75rem !important;
}
.page-title-content {
font-size: 1.6rem !important;
}
.page-subtitle-content {
font-size: 0.9rem !important;
}
}
/* Arabic Font Enhancement for Better Diacritic Rendering */
/* Override Bootstrap's default body font for Arabic content with size compensation */
body [lang="ar"]:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
body .arabic-text:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
body .arabic-content:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
body .arabic-sentence-large:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
body .arabic-word:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
body .rtl:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
.card-body *[lang="ar"]:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
.results-section *:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
.educational-footer *:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text),
#advancedTips *:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text) {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1em !important; /* Baseline size to avoid shrinking Arabic content */
font-feature-settings: 'liga' 1, 'kern' 1, 'dlig' 1;
text-rendering: optimizeLegibility;
font-variant-ligatures: common-ligatures discretionary-ligatures;
}
/* I'rab Results Font Restoration - Override small fonts for I'rab analysis */
.detailed-token-analysis,
.detailed-token-analysis *,
.grammatical-details,
.grammatical-details *,
.token-card,
.token-card *,
.word-text,
.results-section .card-body .arabic-text,
.results-section .card-body [lang="ar"],
.results-section .word-text,
.results-section .token-card .badge {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1.1em !important; /* Restored readable size for I'rab */
line-height: 1.6 !important;
font-feature-settings: 'liga' 1, 'kern' 1, 'dlig' 1;
text-rendering: optimizeLegibility;
}
/* FontAwesome Icon Fix - Preserve FontAwesome font for icons */
.fas, .far, .fab, .fad, .fal, .fa,
[class*="fa-"],
.results-section .fas,
.results-section .far,
.results-section .fab,
.results-section .fad,
.results-section .fal,
.results-section .fa,
.results-section [class*="fa-"],
.educational-footer .fas,
.educational-footer .far,
.educational-footer .fab,
.educational-footer .fad,
.educational-footer .fal,
.educational-footer .fa,
.educational-footer [class*="fa-"],
#advancedTips .fas,
#advancedTips .far,
#advancedTips .fab,
#advancedTips .fad,
#advancedTips .fal,
#advancedTips .fa,
#advancedTips [class*="fa-"] {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
font-style: normal !important;
font-variant: normal !important;
text-transform: none !important;
line-height: 1 !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
font-feature-settings: normal !important;
font-variant-ligatures: normal !important;
}
.far,
.results-section .far,
.educational-footer .far,
#advancedTips .far {
font-weight: 400 !important;
}
.fab,
.results-section .fab,
.educational-footer .fab,
#advancedTips .fab {
font-family: "Font Awesome 5 Brands" !important;
font-weight: 400 !important;
}
/* Input textbox - make bigger */
body textarea[name="Sentence"],
.tool-form textarea {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1.5em !important; /* Increased to 1.5em for better input readability */
line-height: 1.6;
letter-spacing: 0.02em;
}
/* I'rab suggestion paths - make bigger */
.path-card .btn,
body .path-card .btn {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1.5em !important; /* Increased to 1.5em for suggestions */
}
/* Analysis results - override global size */
.results-section .word-text,
body .results-section .word-text {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1.25em !important; /* Boost readability for token summaries */
line-height: 1.65;
letter-spacing: 0.015em;
}
.ierab-badge {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1.05em !important; /* Set to 1.05em as requested */
}
/* Detailed I'rab descriptions - override global size */
.results-section .brief-ierab-container *,
.results-section .brief-ierab-card,
.results-section .detailed-ierab *,
.results-section .ierab-content *,
.results-section .educational-display *,
body .results-section .detailed-ierab *,
body .results-section .ierab-content * {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1.15em !important; /* Increased for better readability */
line-height: 1.75 !important;
}
/* Arabic word size overrides - must come after global rules */
.results-section .arabic-word,
body .results-section .arabic-word,
body .results-section .arabic-word *,
.results-section .role-detailed,
body .results-section .role-detailed,
.results-section .word-text .arabic-word,
body .results-section .word-text {
font-size: 1.2em !important; /* Boost size for core token displays */
}
/* Force balanced font for specific I'rab result elements */
body .token-analysis *,
body .token-card *,
body .brief-ierab-card *,
body .detailed-analysis *,
body .ierab-badge,
body .results-section .badge {
font-size: 1.12em !important; /* Enhanced readability across all token cards */
}
/* Enhanced diacritic visibility for specific educational content */
.tashkeel-enhanced,
.arabic-analysis-content {
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 1.18em !important;
line-height: 1.85;
letter-spacing: 0.02em;
}
/* === MOBILE LESSON EXAM IFRAME FIXES === */
@media (max-width: 768px) {
.exam-iframe {
min-height: 400px !important;
max-height: calc(100vh - 200px) !important;
height: auto !important;
overflow-y: auto !important;
display: block !important;
}
.exam-container {
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
margin-bottom: 1rem !important;
display: block !important;
}
.exam-actions {
position: sticky !important;
bottom: 0 !important;
z-index: 1000 !important;
background: white !important;
border-top: 2px solid #e9ecef !important;
padding: 1rem !important;
margin-top: 0 !important;
box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important;
}
.restart-exam {
width: 100% !important;
padding: 1rem 1.5rem !important;
font-size: 1.1rem !important;
min-height: 48px !important;
border-radius: 6px !important;
background: linear-gradient(135deg, #08749e, #003a57) !important;
border: none !important;
color: white !important;
font-weight: 500 !important;
}
.exam-card {
margin-bottom: 1rem !important;
}
}
</style>
<script>
window.alAminUserContext = {
isAuthenticated: false,
userId: null,
isAdmin: false
};
</script>
<script>
// Mobile Lesson Exam Iframe Auto-Resize Fix
document.addEventListener('DOMContentLoaded', function() {
function initMobileIframeFix() {
const examIframes = document.querySelectorAll('.exam-iframe');
if (examIframes.length === 0) return;
function resizeExamIframe(iframe) {
try {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc) {
const height = Math.max(
iframeDoc.documentElement.scrollHeight,
iframeDoc.body.scrollHeight || 0
);
// Mobile responsive height calculation
const isMobile = window.innerWidth <= 768;
const minHeight = isMobile ? 500 : 600;
const maxHeight = isMobile ? window.innerHeight * 0.7 : window.innerHeight * 0.8;
const finalHeight = Math.min(Math.max(height, minHeight), maxHeight);
iframe.style.height = finalHeight + 'px';
// Ensure exam actions button is visible and properly styled
const examCard = iframe.closest('.exam-card');
if (examCard && isMobile) {
const actionButton = examCard.querySelector('.restart-exam');
if (actionButton) {
actionButton.style.width = '100%';
actionButton.style.minHeight = '48px';
actionButton.style.fontSize = '1.1rem';
}
}
}
} catch (e) {
// Cross-origin restrictions - set responsive default height
const isMobile = window.innerWidth <= 768;
const defaultHeight = isMobile ? 500 : 600;
iframe.style.height = defaultHeight + 'px';
}
}
// Apply to all exam iframes
examIframes.forEach(iframe => {
iframe.addEventListener('load', () => {
setTimeout(() => resizeExamIframe(iframe), 100);
});
// Initial resize for already loaded iframes
if (iframe.contentDocument || iframe.contentWindow) {
setTimeout(() => resizeExamIframe(iframe), 100);
}
});
// Re-resize on window resize/orientation change
let resizeTimeout;
window.addEventListener('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
examIframes.forEach(iframe => resizeExamIframe(iframe));
}, 250);
});
}
initMobileIframeFix();
});
</script>
<script src="/js/lesson-pronunciation.js?v=aX5n05zSjVoqAGiekOJ93LLt3bSGPAoIrFAGEd6lWbo"></script>
</body>
</html>