Edit project

Update the project definition, status, priority, and metadata.

Name *

Short description

Full description

أنشئ صفحة ويب عربية حديثة ومتجاوبة بعنوان “الساعة العالمية” لعرض الوقت الحالي في خمس مدن عالمية.

في أعلى الصفحة ضع عنوان “الساعة العالمية” وتحته عبارة “الوقت الآن في أهم مدن العالم”.

أهم عنصر في الصفحة هو ساعة رقمية كبيرة جدًا في منتصف الجزء العلوي من الصفحة. تعرض الساعة الوقت الحقيقي بصيغة 24 ساعة بالشكل:

HH : MM : SS

أي: الساعات : الدقائق : الثواني.

يجب أن تتحرك الثواني تلقائيًا وتتحدث الساعة كل ثانية دون الحاجة إلى إعادة تحميل الصفحة.

المدينة الافتراضية للساعة الرئيسية هي الدار البيضاء – المغرب، ويظهر اسم المدينة والتاريخ الحالي بجانب أو أسفل الساعة.

أسفل الساعة الرئيسية ضع خمس بطاقات للمدن بهذا الترتيب:

الدار البيضاء – المغرب
باريس – فرنسا
لندن – المملكة المتحدة
موسكو – روسيا
نيويورك – الولايات المتحدة

كل بطاقة تعرض اسم المدينة والدولة وعلم الدولة والوقت المحلي الحالي بصيغة 24 ساعة.

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

ميّز البطاقة المختارة بصريًا عن بقية البطاقات.

يجب حساب التوقيت باستخدام المناطق الزمنية الحقيقية للمدن وليس بإضافة عدد ثابت من الساعات، حتى يتم التعامل بشكل صحيح مع التوقيت الصيفي والشتوي. استخدم إمكانيات JavaScript المدمجة مثل Intl.DateTimeFormat ولا تستخدم Weather API أو Time API خارجيًا.

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

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

الصفحة عربية بالكامل وباتجاه RTL، ومتجاوبة مع الهاتف والتابلت والحاسوب.

استخدم HTML وCSS وJavaScript فقط. لا تستخدم قاعدة بيانات ولا Backend ولا API خارجي.

تأكد أن جميع الساعات تعمل فعليًا وتتحدث تلقائيًا كل ثانية، وأن اختيار مدينة يغير الساعة الرئيسية دون إعادة تحميل الصفحة.

المشروع يجب أن يكون Static Website بسيطًا وجاهزًا للمعاينة والنشر مباشرة على الإنترنت.

Status

Priority

Progress (0–100)

Target date

Tags (comma-separated)

Blockers (one per line)

Cancel