صنعاء - اليمن

هذا التصميم يمثل واجهة مستخدم (UI) لتطبيق أو منصة تعليمية تعرض الفصول والدروس الدراسية. إليك الوصف التقني والبرمجي للهيكلية الموضحة في الصورة:

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

​قائمة التصفية/الانتقال (Select Dropdown): عنصر مدخل أعلى الشاشة (<select> أو Dropdown) يتيح للمستخدم اختيار المادة (مثل: القرآن الكريم).

​قائمة العناصر المتكررة (List View / Card Layout): بطاقات تفاعلية رأسية (Cards) تعرض عناصر المحتوى التعليمي (الدروس/الوحدات).

​مؤشرات الحافة الجانبية (Border-Left / Accent Strip): شريط ملون جانبي على كل بطاقة يميز العنصر بصرياً ويحدد حالته أو هويته.

​الأيقونات والرموز (Icons & Indicators):

​أيقونة الكتاب (Book Icon) للدلالة على محتوى نصي/درسي.

​سهم التوسيع أو الانتقال (Arrow / Accordion Indicator) للتنقل أو فتح التفاصيل.

​التذييل/التنقل السفلي (Footer / Navigation Bar): يحتوي على رابط تنقل مثل "عن النظام".

​2. الهيكلية البرمجية المقترحة (Frontend Architecture)

​اتجاه الواجهة (RTL Support): دعم كامل للغة العربية عبر خصائص CSS مثل direction: rtl وtext-align: right.

​تصميم تجاوبي (Responsive Layout): يعتمد على Flexbox أو CSS Grid لترتيب البطاقات رأسياً مع مساحات هامشية ثابتة (gap أو margin).

​إدارة الحالة (State Management):

​عند تغيير خيار المادة من الـ Dropdown، يتم إرسال طلب (API Call) أو تصفية المصفوفة المحلية لإعادة رندر (Re-render) قائمة الدروس الخاصة بالمادة المحددة.