parent.html

<!doctype html><html lang="ar" dir="rtl"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#1f7565"><meta name="description" content="إيفاء 360 - منظومة رقمية لمنظومة رقمية موحدة لمتابعة المستفيد">
<title>إيفاء 360 | بوابة ولي الأمر</title><link rel="stylesheet" href="assets/css/style.css"></head><body>

<a class="skip-link" href="#main">تجاوز إلى المحتوى</a>
<header class="topbar">
  <div class="container topbar-inner">
    <a class="brand" href="index.html" aria-label="إيفاء 360 - الرئيسية">
      <span class="brand-mark"><img src="https://psrc.org.sa/wp-content/uploads/sites/3740/2026/08/IMG_1690.png" alt="شعار إيفاء" loading="eager"></span>
      <span class="brand-copy"><strong>إيفاء 360</strong><span>مجمع الأمير سلطان للتأهيل</span></span>
    </a>
    <button class="icon-btn" data-acc aria-label="إمكانية الوصول">Aa</button>
    <button class="icon-btn" data-role-switch aria-label="تبديل الدور">☷</button>
  </div>
</header>
<main id="main" class="page-shell">
<div class="container" id="parentView">
<section class="hero with-photo"><div class="hero-copy"><div class="eyebrow">بوابة ولي الأمر</div><h1>مرحبًا أ. خالد</h1><p>كل ما تحتاجه لمتابعة يوم ابنك في مكان واحد.</p></div><div class="hero-visual"><img src="https://psrc.org.sa/wp-content/uploads/sites/3740/2026/04/1-2.webp" alt="إيفاء - رحلة المستفيد"></div></section>
<section class="parent-today"><div class="today-title"><span>ملخص اليوم</span><strong>محمد خالد</strong></div><div class="today-items"><div><i>✓</i><span>تم تسجيل الحضور</span></div><div><i>＋</i><span>جلسة علاج وظيفي</span></div><div><i>★</i><span>تفاعل جيد اليوم</span></div></div></section><section class="section parent-hero">
<article class="card profile-card"><div class="profile-top"><div class="profile-avatar">مخ</div><div><div class="eyebrow">المستفيد</div><h2>محمد خالد</h2><p>المهارات التعليمية • المعلم: أ. أحمد</p></div></div><div class="hero-status present" data-parent-status>حاضر اليوم</div></article>
<article class="card progress-card"><div class="eyebrow">التقدم العام</div><h2 class="section-title"><span data-parent-progress>0%</span></h2><div class="progress-line"><span style="width:92%"></span></div><p class="section-sub">مؤشر التقدم المبني على التفاعل والحضور وتقدم الخطة الفردية.</p></article>
</section>
<section class="section dashboard-grid"><article class="card table-card"><div class="eyebrow">مؤشرات اليوم</div><h2 class="section-title">مستوى محمد</h2><div id="metricsList"></div></article><article class="card note-card"><div class="eyebrow" style="color:#a8d9ce">ملاحظة المعلم</div><h2 class="section-title">ما الذي حدث اليوم؟</h2><p data-parent-note></p></article></section>
<section class="section card table-card"><div class="eyebrow">الحضور</div><h2 class="section-title">السجل الأخير</h2><div id="historyList"></div></section>
</div>
</main><footer class="eefaa-footer"><div class="container"><strong>تصميم وإعداد | نوف الناصر</strong></div></footer>
<div id="accessibilityPanel" class="accessibility-panel">
  <div class="section-head"><div><strong>إمكانية الوصول</strong><p class="section-sub">خصص العرض بالطريقة الأنسب لك</p></div></div>
  <div class="acc-grid">
    <button data-font-plus>تكبير الخط +</button><button data-font-minus>تصغير الخط −</button>
    <button data-contrast>تباين مرتفع</button><button data-motion>تقليل الحركة</button>
    <button data-reset-acc style="grid-column:1/-1">إعادة الإعدادات</button>
  </div>
</div>
<div id="roleSheet" class="sheet">
  <div class="sheet-handle"></div>
  <div class="section-head"><div><strong>تبديل الدور</strong><p class="section-sub">استعرض النظام من منظور مختلف</p></div><button class="icon-btn" data-close-sheet>×</button></div>
  <div class="role-links">
    <a href="teacher.html">بوابة المعلم / المعلمة</a><a href="admin.html">لوحة الإدارة</a><a href="parent.html">بوابة ولي الأمر</a><a href="clinic.html">إيفاء كلينك</a>
    <button class="btn ghost" data-reset-demo>إعادة البيانات التجريبية</button>
  </div>
</div>
<div class="sheet-backdrop" data-close-sheet></div>

<script src="assets/js/app.js"></script><script src="assets/js/parent.js"></script></body></html>