نظام ل معهد تدريب

يمثل هذا العمل واجهة استمارة تسجيل إلكتروني (Online Registration Form) متناسبة مع الشاشات الذكية، مصممة لاستقبال طلبات الالتحاق بمعهد كازابلانكا. إليك الوصف البرمجي والهيكلي للواجهة:

​1. المكونات الهيكلية للواجهة (UI Components)

​الشريط العلوي (Header Bar): يتضمن اسم الجهة ("معهد كازابلانكا") وزر تنقل آمن "دخول الإدارة" المزود بأيقونة قفل (Padlock Icon) المخصص لمنطقة الإداريين/المشرفين.

​عنوان النموذج (Form Header): يحتوي على عنوان رئيسي بارز "بوابة التسجيل الإلكتروني" مع نص توجيهي للمستخدم لتأكيد دقّة البيانات المرفقة.

​حقول المدخلات (Form Input Fields): مجموعة من حقول إدخال النصوص

، وتشمل:

​الاسم الرباعي

​العمر (مع placeholder كـ "مثال: 20")

​محل الميلاد (مع placeholder كـ "مثال: صنعاء")

​السكن / العنوان الحالي

​رقم الهاتف (مع تحديد صيغة رقمية كـ "7xxxxxxxxx")

​قائمة الخيارات المنسدلة (Select Dropdown): حقل حوار لاختيار "الجنس" (<select>).

​2. المعمارية البرمجية للواجهة (Frontend Architecture)

​دعم الاتجاه من اليمين لليسار (RTL): محاذاة العناصر والنصوص بالكامل لتناسب اللغة العربية (dir="rtl").

​تصميم البطاقات التفاعلية (Card Design): وضع نموذج الإدخال داخل حاوية بيضاء مميزة بزوايا منحنية (Border Radius) مع ظلال ناعمة (Box Shadows) للبروز فوق الخلفية الزرقاء.

​التجاوب (Responsive Layout): استخدام قواعد Flexbox أو Grid لتتلاءم الحقول ديناميكياً مع أبعاد هواتف المحمول.

​3. التحقق وهيكل البيانات (Form Validation & Payload)

عند إرسال النموذج، يُفترض تطبيق قيود تحقق (Validation) مثل التأكد من إدخال الأرقام فقط في حقل الهاتف والعمر، وتجميع البيانات في كائن JSON بالشكل التالي لارسالها إلى الخلفية (Backend API) أو قاعدة البيانات (مثل Firebase/PostgreSQL):