<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>جدول المذاكرة</title>
<style>
:root { --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --muted: #64748b; --primary: #2563eb; --border: #e2e8f0; --task: #f1f5f9; }
* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; background: var(--bg); color: var(--text); padding: 16px; }
main { max-width: 500px; margin: auto; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.row { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 8px; }
.bar { height: 10px; background: var(--border); border-radius: 99px; overflow: hidden; }
.fill { height: 100%; width: 0%; background: var(--primary); transition: width 0.3s; }
.day { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-top: 10px; }
.day h2 { font-size: 16px; margin: 0 0 8px; }
.task { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; background: var(--task); margin: 4px 0; cursor: pointer; }
.task input { width: 18px; height: 18px; }
.task.done span { text-decoration: line-through; color: var(--muted); }
</style>
</head>
<body>
<main>
  <h1 style="font-size:20px;">🚀 خطة تصفية المتراكم</h1>
  <div class="card">
    <div class="row"><span id="percent">0%</span><span id="count">0 / 15</span></div>
    <div class="bar"><div class="fill" id="fill"></div></div>
  </div>
  <div id="days"></div>
</main>
<script>
const plan = [
  ["الخميس", ["⚡ فيزياء — المحاضرة الطويلة", "🇦🇪 عربي — المحاضرة 1", "📐 رياضة — حل درس 1"]],
  ["الجمعة", ["⚡ فيزياء — المحاضرة القصيرة", "🧪 كيمياء — المحاضرة المتراكمة", "🇬🇧 إنجليزي — المحاضرة 1", "📐 رياضة — حل درس 2"]],
  ["السبت", ["🇦🇪 عربي — المحاضرة 2", "🇦🇪 عربي — المحاضرة 3", "🇬🇧 إنجليزي — المحاضرة 2", "📐 رياضة — حل درس 3"]],
  ["الأحد", ["🇦🇪 عربي — المحاضرة 4", "🇬🇧 إنجليزي — المحاضرة 3", "📐 رياضة — حل درس 4"]],
  ["الاثنين", ["🇬🇧 إنجليزي — المحاضرة 4", "📐 رياضة — حل درس 5"]]
];
const daysDiv = document.getElementById("days");
let idx = 0;
plan.forEach(([day, tasks]) => {
  const sec = document.createElement("div");
  sec.className = "day";
  sec.innerHTML = `<h2>${day}</h2>`;
  tasks.forEach(t => {
    sec.innerHTML += `<label class="task"><input type="checkbox" data-i="${idx++}"><span>${t}</span></label>`;
  });
  daysDiv.appendChild(sec);
});
const checks = [...document.querySelectorAll("input")];
function update() {
  const n = checks.filter(x => x.checked).length;
  const p = Math.round((n / checks.length) * 100);
  document.getElementById("percent").textContent = p + "%";
  document.getElementById("fill").style.width = p + "%";
  document.getElementById("count").textContent = `${n} / ${checks.length}`;
  checks.forEach(x => x.closest(".task").classList.toggle("done", x.checked));
}
checks.forEach(x => x.addEventListener("change", update));
</script>
</body>
</html>

