١٢
أيام الحضور
من أصل ١٤ يومًا
هذا الدليل مبنيّ على نفس ملف الأنماط الإنتاجي المستخدم في التطبيق
(assets/css/style.css)، فلا تتباعد الرموز التصميمية بين الدليل والواجهات.
الهوية البصرية مستخرجة من ملف التصميم المرفق: أخضر عميق، أخضر مائل للأزرق، نعناعي فاتح، ذهبي،
وخلفية مائلة للأزرق.
الأخضر بدرجاته هو اللون الأساسي، والذهبي لون التمييز، والنعناعي للأسطح الخفيفة
#04241B#0A3D2E#12705A#0F7E6E#159183#E9F7F2#D5F0E6#C8A54B#D9BC6C#F8F1DC#EDF3F7#1B8A57#A97609#BE3A29#1F6488Amiri للعناوين · IBM Plex Sans Arabic للنصوص والجداول
h1 · clamp(1.5rem → 2.05rem)h2 · Amiri 700h3 · 1.14remنص عادي بحجم 15px وارتفاع سطر 1.75 — يُستخدم في الفقرات والوصف والجداول. ونص خافت للتفاصيل · ونص مؤكَّد داكن.
نص صغير (small) 0.875rem — للتفاصيل الثانوية.
نص دقيق (tiny) 0.8125rem — للتلميحات وطوابع الزمن.
الأرقام تُعرض بخصائص tabular-nums فلا تتزحزح في الجداول.
الأساسي أخضر متدرّج · الذهبي للإجراء المميّز · الخطّي للإجراءات الثانوية
حاضر · غائب · متأخر · بعذر · مدفوع · غير مدفوع …
الحاوية الأساسية لكل محتوى، مع رأس وبطاقة أرقام ملوّنة حسب الحالة
رأس + متن + تذييل
متن البطاقة يحمل المحتوى الأساسي، والأزرار تُوضع في التذييل أو في رأس البطاقة.
تُستخدم لإبراز ملخص أو تنبيه مهم داخل الصفحة.
رأس ثابت · عمود أول مثبّت على الشاشات الضيقة · تحوّل إلى بطاقات على الجوال
| الطالبة | المرحلة | الحضور | المجموع | الحالة |
|---|---|---|---|---|
نعنورة العتيبي 20418 |
ضياء 1 | 86% | 93 / 100 | ممتازة |
رشريم الشمري 20433 |
ضياء 2 | 64% | 72 / 100 | تحتاج مراجعة |
لدلمى الدوسري 20457 |
ضياء 3 | 41% | 48 / 100 | إنذار |
| إجمالي السجلات: 3 · الحلقة: حلقة النور | ||||
data-label لكل خلية من رؤوس الأعمدة،
فتتحول الصفوف تلقائيًا إلى بطاقات مقروءة بلا تمرير أفقي.
حقول واضحة وحالات خطأ مقروءة ورفع ملفات بنمط منطقة الإفلات
رسائل النظام: نجاح · خطأ · تحذير · معلومة
هياكل تحميل أثناء جلب البيانات
الميداليات · الخط الزمني · بطاقات العناصر · قوائم التعريف · التبويبات
قواعد مُطبَّقة في كل الشاشات
aria-expanded) وحالة التحديد (aria-current).aria-hidden مع نص بديل عند الحاجة.role="status" أو role="alert".prefers-reduced-motion فتُلغى كل الحركات.