نجهز لك شيئًا مميزًا... أنت الزائر رقم: [?????]

أولاً: المميزات الأساسية للموقع

يدعم تعدد اللغات (Multilingual)

يدعم 7 لغات: العربية – الإنجليزية – الفرنسية – الإسبانية – الألمانية – الصينية – اليابانية.

يتم تحديد اللغة من خلال بارامتر ?lang=ar في عنوان الرابط.

يتم تمييز اللغة المختارة في القائمة المنسدلة.

عداد زوار حي (Live Visitor Counter)

باستخدام Firebase Firestore، كل زائر يتم احتسابه تلقائيًا ويتم تحديث العداد في كل زيارة.

لو العداد غير موجود في الداتابيس، يبدأ بـ 1000.

واجهة تفاعلية بتقنية Canvas (جرافيك حي متفاعل)

يتم رسم جسيمات متحركة (particles) على الخلفية.

الجسيمات تتفاعل مع حركة الماوس (Repulsion effect).

عند النقر بالماوس يتم توليد جسيمات إضافية بطريقة جذابة.

تغيير عدد الجسيمات عبر الرابط

يمكن ضبط عدد الجسيمات المبدئية من خلال ?particles=300 مثلاً.

تصميم متجاوب (Responsive Design)

الموقع متجاوب تمامًا مع الهواتف الذكية والتابلت واللابتوب.

يتحول حجم الخط والعناصر حسب حجم الشاشة.

شريط علوي ثابت (Sticky Navbar)

يحتوي على شعار الموقع و زر اختيار اللغة.

بتصميم شفاف مع تأثير زجاجي (Glassmorphism).

ثانيًا: شرح تصميم الواجهة

1. خلفية الجسيمات (Canvas)

#networkCanvas: عنصر <canvas> يغطي الشاشة بالكامل ويُرسم عليه الجرافيك المتفاعل.

الجسيمات تتحرك وتُرسم وتربط بخطوط لو كانت قريبة من بعضها.

2. شريط التنقل (Navbar)

يوجد في أعلى الصفحة بشكل ثابت ويحتوي على:

شعار الموقع مع صورة.

قائمة اختيار اللغة تظهر عند النقر على زر .

3. مربع المحتوى الرئيسي (content-wrapper)

يظهر فيه:

العنوان الكبير: "قريبًا" أو "Coming Soon" حسب اللغة.

عداد الزوار أسفله.

تصميمه مستدير وشفاف (بستايل عصري).

4. قائمة اللغات

يتم عرض كل لغة باسمها الكامل (مثل: العربية، English...).

عند اختيار لغة، يتم إعادة تحميل الصفحة بنفس عدد الجسيمات حتى لا تفقد التأثير.

5. تصميم الخطوط والخلفية

يتم استخدام خط Google Font (Inter) العصري.

الخلفية سوداء أنيقة، والعناصر بالأبيض والأزرق الشفاف.

️ ثالثًا: التكامل مع Firebase

يستخدم Firebase بشكل مباشر من خلال Firebase JS SDK v11.

العمليات:

تسجيل الدخول كمجهول signInAnonymously().

تحديث عداد الزوار في Firestore.