صفحة تسجيل دخول وتسجيل حساب حديثة (HTML / CSS / JavaScript)

هذه الصفحة هي واجهة تسجيل دخول وتسجيل حساب تفاعلية (Login & Sign Up UI) مصممة بتقنيات HTML, CSS, JavaScript، وتتميز بتصميم عصري وانسيابي يعتمد على التأثيرات البصرية الحديثة (Modern UI/UX). تحتوي الواجهة على نموذجين رئيسيين: تسجيل الدخول و إنشاء حساب، ويتم التنقل بينهما من خلال حركة انتقالية سلسة (Smooth Animated Slider) تعطي تجربة استخدام احترافية تشبه التطبيقات العالمية.

? مميزات التصميم

تصميم حديث باستخدام تدريجات ألوان لطيفة (Soft Gradient Background).

حواف دائرية وعناصر ناعمة تضيف إحساسًا بالراحة والحداثة.

واجهة منقسمة متحركة بحيث يمكن للمستخدم الانتقال بين Sign In و Sign Up بانسيابية.

استخدام خط Montserrat الأنيق لواجهة أكثر احترافية.

دعم أيقونات التواصل الاجتماعي (Google, Facebook, GitHub, LinkedIn) عبر Font Awesome.

Responsive Design متوافق مع جميع الشاشات.

⚙️ إمكانيات JavaScript

زر التحويل بين حالتي Sign In و Sign Up يعمل بتغيير كلاس رئيسي داخل الـ container.

تطبيق ترانزشن animations أثناء التحويل بين النموذجين.

الكود بسيط وواضح وسهل الدمج مع أي Back-End أو API مستقبلًا.

? مكونات الواجهة

? نموذج تسجيل الدخول (Sign In)

حقول: بريد إلكتروني + كلمة مرور

روابط: "Forget Your Password"

أزرار تسجيل الدخول عبر مواقع التواصل

زر Sign In رئيسي

? نموذج إنشاء حساب (Sign Up)

حقول: الاسم، البريد الإلكتروني، كلمة المرور

دعم تسجيل جديد عبر مواقع التواصل

زر Sign Up رئيسي

? لوحة التبديل الجانبية (Sliding Toggle Panel)

لوحة ترحيب المستخدم الجديد

لوحة الترحيب بالمستخدم العائد

أزرار التبديل بين النموذجين

انتقال حركي سلس عند تفعيل الحالة “active”

? استخدامات الواجهة

يمكن دمج هذه الواجهة بسهولة في:

صفحات تسجيل دخول التطبيقات والمواقع.

أنظمة إدارة المستخدمين (Authentication Systems).

أي مشروع يتطلب واجهة دخول احترافية وجذابة.

قوالب جاهزة للعرض أو البيع.