moadl

<!DOCTYPE html>
<html lang=”ar” dir=”rtl”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>BacResultat Clone – حاسبة معدل البكالوريا الذكية</title>
<style>
:root {
–bg-color: #0f172a;
–card-bg: #1e293b;
–text-color: #f8fafc;
–text-muted: #94a3b8;
–primary: #3b82f6;
–primary-hover: #2563eb;
–success: #10b981;
–border-color: #334155;
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–bg-color);
color: var(–text-color);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-content: center;
}

.container {
width: 100%;
max-width: 650px;
background: var(–card-bg);
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
border: 1px solid var(–border-color);
}

h1 {
text-align: center;
color: var(–primary);
margin-bottom: 5px;
font-size: 24px;
}

.subtitle {
text-align: center;
color: var(–text-muted);
margin-bottom: 25px;
font-size: 14px;
}

.section-title {
font-size: 16px;
color: var(–primary);
border-bottom: 2px solid var(–border-color);
padding-bottom: 5px;
margin-top: 20px;
margin-bottom: 15px;
}

.input-group {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

label {
font-size: 15px;
color: var(–text-color);
flex: 1;
}

input[type=”number”] {
width: 90px;
padding: 8px 12px;
border: 1px solid var(–border-color);
border-radius: 8px;
background-color: var(–bg-color);
color: white;
text-align: center;
font-size: 15px;
outline: none;
transition: border 0.2s;
}

input[type=”number”]:focus {
border-color: var(–primary);
}

.btn-calc {
width: 100%;
padding: 12px;
background-color: var(–primary);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
transition: background 0.2s;
}

.btn-calc:hover {
background-color: var(–primary-hover);
}

.result-box {
margin-top: 25px;
padding: 20px;
background-color: rgba(59, 130, 246, 0.1);
border: 1px solid var(–primary);
border-radius: 12px;
display: none;
}

.result-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 16px;
}

.result-item:last-child {
margin-bottom: 0;
padding-top: 10px;
border-top: 1px dashed var(–border-color);
}

.highlight {
font-weight: bold;
color: var(–success);
font-size: 18px;
}

.info-note {
font-size: 12px;
color: var(–text-muted);
text-align: center;
margin-top: 15px;
}
</style>
</head>
<body>

<div class=”container”>
<h1>BacResultat Simulator</h1>
<div class=”subtitle”>حساب استشرافي للمعدل والحد الأدنى للنجاح (علوم فيزيائية – خيار فرنسية)</div>

<!– المراقبة المستمرة والجهوي –>
<div class=”section-title”>المعدلات المحصل عليها حالياً</div>
<div class=”input-group”>
<label>معدل الامتحان الجهوي (25%):</label>
<input type=”number” id=”regional” min=”0″ max=”20″ step=”0.01″ placeholder=”00.00″>
</div>
<div class=”input-group”>
<label>معدل المراقبة المستمرة – الدورة 1 و 2 (25%):</label>
<input type=”number” id=”continuous” min=”0″ max=”20″ step=”0.01″ placeholder=”00.00″>
</div>

<!– نقط الوطني الاستشرافية –>
<div class=”section-title”>توقع نقط الامتحان الوطني (50%)</div>

<div class=”input-group”>
<label>الفيزياء والكيمياء (معامل 7):</label>
<input type=”number” class=”national-subject” data-coef=”7″ min=”0″ max=”20″ step=”0.25″ value=”10″>
</div>
<div class=”input-group”>
<label>علوم الحياة والأرض (معامل 5):</label>
<input type=”number” class=”national-subject” data-coef=”5″ min=”0″ max=”20″ step=”0.25″ value=”10″>
</div>
<div class=”input-group”>
<label>الرياضيات (معامل 7):</label>
<input type=”number” class=”national-subject” data-coef=”7″ min=”0″ max=”20″ step=”0.25″ value=”10″>
</div>
<div class=”input-group”>
<label>الفلسفة (معامل 2):</label>
<input type=”number” class=”national-subject” data-coef=”2″ min=”0″ max=”20″ step=”0.25″ value=”10″>
</div>
<div class=”input-group”>
<label>اللغة الإنجليزية (معامل 2):</label>
<input type=”number” class=”national-subject” data-coef=”2″ min=”0″ max=”20″ step=”0.25″ value=”10″>
</div>

<button class=”btn-calc” onclick=”calculateBac()”>إحسب المعدل والتوقعات</button>

<!– صندوق عرض النتائج المتنقل –>
<div class=”result-box” id=”resultBox”>
<div class=”result-item”>
<span>معدل الامتحان الوطني المتوقع:</span>
<span id=”resNational” class=”highlight”>00.00</span>
</div>
<div class=”result-item”>
<span>المعدل العام للبكالوريا المتوقع:</span>
<span id=”resTotal” class=”highlight” style=”color: #3b82f6;”>00.00</span>
</div>
<div class=”result-item”>
<span>الميزة المتوقعة:</span>
<span id=”resMention” class=”highlight” style=”color: #eab308;”>–</span>
</div>
<div class=”result-item”>
<span>أقل معدل وطني تحتاجه للنجاح (10/20):</span>
<span id=”resMinRequired” class=”highlight” style=”color: #ef4444;”>00.00</span>
</div>
</div>

<div class=”info-note”>ملاحظة: الحساب يعتمد على صيغة وزارة التربية الوطنية المغربية الرسمية.</div>
</div>

// 2. حساب معدل الوطني بناء على النقط الافتراضية والمعاملات
let subjects = document.querySelectorAll(‘.national-subject’);
let totalPoints = 0;
let totalCoef = 0;

subjects.forEach(subject => {
let note = parseFloat(subject.value) || 0;
let coef = parseInt(subject.getAttribute(‘data-coef’));
totalPoints += (note * coef);
totalCoef += coef;
});

let nationalAverage = totalPoints / totalCoef;

// 3. حساب المعدل العام للبكالوريا (25% جهوي + 25% مراقبة + 50% وطني)
let finalGrade = (regional * 0.25) + (continuous * 0.25) + (nationalAverage * 0.5);

// 4. حساب أقل نقطة مطلوبة في الوطني للنجاح (الحصول على معدل عام يساوي 10)
// المعادلة: 10 = (regional * 0.25) + (continuous * 0.25) + (X * 0.5)
// إذن: X = (10 – (regional * 0.25) – (continuous * 0.25)) / 0.5
let minNationalRequired = (10 – (regional * 0.25) – (continuous * 0.25)) / 0.5;
if (minNationalRequired < 0) minNationalRequired = 0; // ناجح بالفعل حتى لو اخذ 0 في الوطني
if (minNationalRequired > 20) minNationalRequired = 20; // مستحيل النجاح منطقياً بحساب النقط الحالية

// 5. تحديد الميزة
let mention = “”;
if (finalGrade >= 16) mention = “حسن جداً”;
else if (finalGrade >= 14) mention = “حسن”;
else if (finalGrade >= 12) mention = “مستحسن”;
else if (finalGrade >= 10) mention = “مقبول”;
else mention = “راسب (الدورة الاستدراكية)”;

// 6. عرض النتائج وتحديث الواجهة
document.getElementById(‘resNational’).innerText = nationalAverage.toFixed(2);
document.getElementById(‘resTotal’).innerText = finalGrade.toFixed(2);
document.getElementById(‘resMention’).innerText = mention;
document.getElementById(‘resMinRequired’).innerText = minNationalRequired.toFixed(2) + ” /20″;

// إظهار صندوق النتيجة بحركة أنيقة
document.getElementById(‘resultBox’).style.display = ‘block’;
}
</script>

</body>
</html>