`هذا إرسال لـ Frontend Challenge v24.09.04، CSS Art: Space.

إلهام

أردت إنشاء تمثيل تفاعلي وجذاب بصريًا لنظامنا الشمسي باستخدام CSS Art وHTML. الإلهام يأتي من افتتاني بالفضاء وجمال الأجرام السماوية. من خلال هذا المشروع، كنت أهدف إلى الجمع بين التصميم البسيط والعناصر التفاعلية التي تشجع المستخدمين على الاستكشاف والتعرف على كل كوكب في النظام الشمسي.

تجريبي

عرض توضيحي مباشر: استكشاف النظام الشمسي
https://solar-system-explorer-css-art.vercel.app

يمكنك أيضًا مشاهدة معاينة للمشروع في محرر التعليمات البرمجية المضمن أدناه:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

رحلة

في هذا التحدي، قررت مزج تصميم CSS الإبداعي مع وظائف JavaScript التفاعلية لجعل التجربة أكثر ديناميكية. فيما يلي تفاصيل العملية:

تصميم الكواكب: استخدمت مزيجًا من CSS Grid والرسوم المتحركة بالتمرير لإنشاء بطاقات الكواكب التي توفر تفاعلًا ممتعًا. يتم عرض أسماء الكواكب والمعلومات الأساسية بشكل حيوي.

تأثيرات التحويم التفاعلية: كل كوكب له تأثير تحويم متوهج، مستوحى من الطريقة التي تنبعث بها الأجرام السماوية الضوء. أضفت أيضًا رسمًا متحركًا دوارًا عند التحليق لمحاكاة الحركة المدارية.

نماذج لمزيد من المعلومات: عند النقر على كوكب، ينبثق نموذج يحتوي على معلومات إضافية، مما يخلق تجربة تعليمية غامرة. وهذا يجعل التطبيق تفاعليًا وغنيًا بالمعلومات.

فن CSS: بدلاً من استخدام أي صور خارجية، تم إنشاء فن النظام الشمسي بأكمله باستخدام CSS خالص. لقد ركزت على الأشكال والألوان وتأثيرات التوهج لمحاكاة شكل ومظهر الكواكب.

الاستجابة: التصميم سريع الاستجابة تمامًا، ويتكيف مع جميع أحجام الشاشات لضمان قدرة المستخدمين على استكشاف النظام الشمسي من أي جهاز.

ما تعلمته:
التحدي المتمثل في جعل CSS Art تفاعليًا باستخدام JavaScript بسيط.
تنفيذ تأثيرات التمرير المتقدمة والرسوم المتحركة لإضفاء الحيوية على العناصر الثابتة.
قوة CSS Grid وFlexbox لإنشاء تخطيطات سريعة الاستجابة ونظيفة.
ما هي الخطوة التالية؟
أخطط لإضافة معلومات أكثر تفصيلاً عن الكوكب وربما تنفيذ عرض تفاعلي ثلاثي الأبعاد للكواكب لمحاكاة تجربة أقرب إلى الواقع.
تحسين النموذج لعرض البيانات في الوقت الفعلي مثل سرعة دوران الكوكب وتغيرات درجات الحرارة.`