منصه رياضيه Iron Pro
تفاصيل العمل
موقع جيم احترافي عبارة عن Single Page Application (صفحة واحدة متحركة) بيهدف لـ:
1. عرض تمارين كمال الأجسام مصنفة حسب العضلة مع صور وشرح بالانجليزي
2. مساعد ذكي (AI) يحلل الأكل ويعطي العناصر الغذائية
---
🎨 التصميم واللون
· الخلفية: أسود غامق جداً #0b0e14 عشان الفخامة
· الأزرق: درجات من #0044cc إلى #4facfe عشان اللمسة العصرية
· النصوص: أبيض مائل للأزرق الفاتح #e8edf5
· الكروت: خلفية شبه شفافة بحدود بسيطة #1a2a40 عشان الإحساس بالفخامة
· الأنيميشن: fade in بسيط وتأثير hover على كل العناصر
---
📱 التوافق
· شغال على الموبايل والتابلت والكمبيوتر (Responsive)
· عند تصغير الشاشة:
· الأزرار تترتب تحت بعض
· الكروت تبقى عمودية
· الشات ياخد حجم أكبر عشان الكتابة تكون واضحة
---
🏠 الصفحة الرئيسية
المكونات:
1. شعار الموقع 🏋️ IRON PRO
· متدرج باللون الأزرق
· عند الضغط عليه يرجع للصفحة الرئيسية
2. أزرار التنقل:
· 🏠 الرئيسية
· 💪 التمارين
· 🤖 AI Nutrition
3. صورة البطل (you.jpeg):
· عرض كامل للصفحة
· لو الصورة مش موجودة، تظهر صورة بديلة (placeholder)
· تأثير hover بسيط
4. بطاقتين رئيسيتين:
· الأولى: "Go for the exercises"
· أيقونة 💪
· عند الضغط عليها تودي لصفحة التمارين
· التانية: "AI Nutrition Assistant"
· أيقونة 🤖
· عند الضغط عليها تودي لصفحة الشات
· شرح مبسط عن وظيفته
---
💪 صفحة التمارين
الهيكل:
كل عضلة ليها نافذة/قسم مستقل فيه:
1. اسم العضلة مع أيقونة خاصة
2. وصف قصير باللغة الإنجليزية
3. شبكة من التمارين (كل تمرين في بطاقة)
---
العضلات الموجودة (8 عضلات):
1. 💪 Biceps (العضلة ذات الرأسين)
· الوصف: Exercises targeting the biceps brachii muscle.
· التمارين:
· Dumbbell Curl (biceps_dumbbell_curl.gif)
· Wide Grip Barbell Curl (biceps_wide_grip_barbell.gif)
---
2. 🏋️ Chest (الصدر)
· الوصف: Exercises for pectoral muscles.
· التمارين:
· Flat Barbell Press (flat_barbell_press.jpg)
· Incline Barbell Press (incline_barbell_press.jpg)
· Cable Crossover (cable_crossover.jpeg)
· Chest Press Machine (chest_press_machine.jpg)
---
3. 🔱 Back (الظهر)
· الوصف: Exercises for lats, traps, and back width.
· التمارين:
· Barbell Lats Row (barbell_lats_row.jpg)
· Back Width Machine (back_width_machine.jpg)
· Lat Pulldown Machine (lat_pulldown_machine.jpg)
· Seated Row Machine (seated_row_machine.jpg)
---
4. 🦵 Legs (الأرجل)
· الوصف: Exercises for quads, hamstrings, and calves.
· التمارين:
· Quads Press (legs_quads_press.gif)
· Leg Extension (legs_leg_extension.gif)
· Hamstring Curl (legs_hamstring_curl.gif)
· Calf Raise (legs_calf_raise.gif)
---
5. 🎯 Shoulders (الأكتاف)
· الوصف: Exercises for deltoids (front, side, rear).
· التمارين:
· Dumbbell Shoulder Press (shoulder_press_dumbbell.jpg)
· Front Raise (front_raise_dumbbell.jpg)
· Cable Lateral Raise (lateral_raise_cable.jpg)
· Rear Delt Machine (rear_delt_machine.jpg)
---
6. 🔽 Triceps (ثلاثية الرؤوس)
· الوصف: Exercises for triceps brachii.
· التمارين:
· Dumbbell Extension (triceps_dumbbell_extension.gif)
· Straight Bar Cable (triceps_straight_bar_cable.gif)
---
7. 🤚 Forearms (الساعدين)
· الوصف: Exercises for grip and forearm strength.
· التمارين:
· Reverse Curl (forearm_reverse_curl.gif)
· Wrist Roller (wrist_roller.gif)
---
8. 🏆 Deadlift (الرفعة المميتة)
· الوصف: Compound movement for posterior chain.
· التمرين:
· Smith Deadlift (smith_deadlift.jpg)
---
تفاصيل كل تمرين:
كل بطاقة تمرين فيها:
· صورة التمرين (gif أو jpg)
· اسم التمرين باللغة الإنجليزية
· شرح مختصر باللغة الإنجليزية عن طريقة أداء التمرين
---
🤖 صفحة الشات الذكي (AI Nutrition)
المكونات:
1. رأس الشات:
· أيقونة 🤖
· عنوان "AI Nutrition Assistant"
· إشارة "Online" (خضراء متحركة)
2. منطقة المحادثة:
· أول رسالة ترحيبية من الـ AI
· رسائل المستخدم تظهر باللون الأزرق (يمين)
· رسائل الـ AI تظهر باللون الداكن (يسار)
3. مؤشر الكتابة:
· 3 نقاط متحركة
· بتظهر لما الـ AI بيفكر
4. منطقة الإدخال:
· حقل كتابة (placeholder: "اكتب تفاصيل أكلك هنا...")
· زر إرسال 🚀
· دعم الضغط على Enter
---
🧠 كيف يعمل الشات؟
الخطوات:
1. المستخدم يكتب تفاصيل الأكل (مثال: "صدر دجاج 200 جرام مع رز")
2. النص بيتحلل:
· استخراج الوزن (200 جرام)
· استخراج الأطعمة (دجاج، رز)
3. البيانات بتتطلع من قاعدة البيانات
4. الحسابات بتتشتغل:
· السعرات = (سعرات لكل 100 جرام × الوزن) / 100
· نفس الشي للبروتين والكارب والدهون
5. الرد بيظهر على شكل رسالة منظمة