نظام إدارة المسابقات الوطنية — عرض توضيحي تفاعلي

National Competition Management System — Interactive Demo

نموذج أوّلي احترافي متجاوب (RTL/عربي) يحاكي دورة حياة المسابقة الكاملة عبر ٦ شاشات مترابطة.

المحتوى

• index.html — صفحة الإطلاق (نظرة عامة + معرض الشاشات + خريطة دورة الحياة).
• pages/ — الشاشات الست:
  1. home.html — البوابة الرئيسية (صفحة عامة).
  2. competition.html — تفاصيل المسابقة.
  3. register.html — تسجيل متسابق (نموذج متعدد الخطوات).
  4. dashboard.html — لوحة المتسابق.
  5. exam.html — بيئة الاختبار الآمنة.
  6. results.html — النتائج والتقييم.
• assets/flow-nav.js — مُوجِّه المسار العائم المشترك (يربط الشاشات ويفعّل أزرار الواجهة).
• assets/*.png — صور معاينة الشاشات.

التشغيل

افتح index.html مباشرة في المتصفح، أو شغّل خادماً محلياً للحصول على أفضل تجربة:

cd demo
python3 -m http.server 8000
# ثم افتح: http://localhost:8000

التنقّل

• استخدم أزرار الواجهة نفسها (تسجيل الدخول، التسجيل الآن، عرض التفاصيل...) للانتقال ضمن الرحلة.
• أو استخدم مُوجِّه المسار العائم على حافة الشاشة (أيقونة الشجرة) للقفز بين المراحل الست.
• اختصارات: Alt + ← للمرحلة التالية، Alt + → للسابقة، Esc لإغلاق المُوجِّه.

المواصفات

• متجاوب بالكامل (جوال / لوحي / سطح مكتب) بدون تمرير أفقي.
• دعم كامل للعربية RTL بخط IBM Plex Sans Arabic.
• هوية بصرية مؤسسية: أزرق عميق/رمادي فحمي مع لمسات زمردية للحالات الإيجابية.