💻 التقنيات المستخدمة:
React.js لبناء واجهة المستخدم
CSS لتنسيق العناصر وجعل التصميم متجاوبًا
JavaScript لإدارة التفاعلات وتحديث التقدم ديناميكيًا
🧩 مكونات الواجهة:
العنوان الرئيسي:
"FitGoals Tracker" – يظهر في الأعلى بخط كبير وأزرق لتحفيز المستخدم.
بطاقات الأهداف (Goal Cards):
كل بطاقة تحتوي على:
عنوان الهدف بلون أزرق واضح (مثل "Run 5K" و "Eat Healthy")
وصف مختصر للهدف بخط واضح وسهل القراءة.
شريط تقدم Progress Bar يظهر مدى الإنجاز بصريًا.
زر "Update Progress" بلون أخضر مميز لتحديث التقدم.
تصميم نظيف وبمساحات مريحة بين العناصر.
اقتباس تحفيزي أسفل الصفحة:
"Believe in yourself and all that you are."
يُضفي لمسة تشجيعية وجمالية.
📱 المميزات:
تصميم متجاوب مع مختلف الشاشات.
تفاعل فوري عند الضغط على زر "Update Progress" لتحديث شريط التقدم.
ألوان تحفيزية (أزرق للأهداف، أخضر للتقدم) تدعم تجربة المستخدم.
تنظيم مرئي واضح يسهل على المستخدم متابعة أهدافه.
