واجهة تسجيل الدخول وإنشاء حساب عصري ومُخصص (Modern Auth UI with Customization Panel)

الوصف

تصميم وتطوير واجهة مستخدم (Frontend UI/UX) فريدة، عصرية، ومريحة للعين مخصصة لصفحات الإذن والوصول (تسجيل الدخول - Login / إنشاء حساب جديد - Sign Up) للتطبيقات والمواقع الإلكترونية.

تم بناء المشروع بالكامل بمعايير برمجية حديثة تضمن الاستجابة السلسة، مع دمج لوحة تخصيص تفاعلية عائمة (Customization Panel) تُتيح للمستخدم التحكم التام في المظهر والألوان بما يناسب راحته البصرية.

🌟 أبرز المميزات الفنية والتصميمية:
1️⃣ التبديل السلس بين النماذج (Smooth Tab Switcher)
دمج صفحتي تسجيل الدخول وإنشاء حساب جديد في بطاقة واحدة أنيقة (Interactive Card) بدلاً من التنقل بين صفحات متعددة.

استخدام إشارات بصرية واضحة للتبديل بين النموذجَين فوراً ودون الحاجة لإعادة تحميل الصفحة (Zero Page Reloading).

2️⃣ لوحة تخصيص المظهر (Customization Panel)
زر عائم أملس (Floating Palette Toggle): زر ثابث بلمسة عصرية يفتح لوحة خيارات المظهر بنقرة واحدة.

الوضع النهاري والليلي (Light & Dark Mode): إمكانية التبديل بين خلفية فاتحة ومظلمة بسلاسة عالية لحماية العين وتسهيل القراءة في مختلف ظروف الإضاءة.

لوحة ألوان مهدئة مخصصة (Muted Color Palettes): دعم تغيير اللون الرئيسي للمشروع بنقرة زر (بنفسجي عصري، تيل هادئ، وردي ناعم، وأزرق سماوي) بفضل الاعتماد المباشر على متغيرات الـ CSS (:root & Variables).

3️⃣ تجربة مستخدم واجهة متكاملة (UX/UI Excellence)
تصميم متجاوب 100% (Responsive Design): يتكيف شكل النموذج تلقائياً مع كافة مقاسات الشاشات (أجهزة الموبايل، التابلت، اللابتوب، والشاشات الكبيرة).

حقول مدخلات مدعومة بأيقونات (Icon-supported Inputs): تحسين الوضوح البصري باستخدام أيقونات FontAwesome داخل حقول الإدخال (الاسم، البريد الإلكتروني، كلمة المرور).

دعم كامل للغة العربية (RTL Direction): محاذاة دقيقة وتنسيق خطوط عربي أصيل ومريح للعين باستخدام خط Cairo الشهير.

زر نسيت كلمة المرور وتنبيهات بصرية: تنظيم واضح للروابط الثانوية وأزرار التفاعل.

🛠️ التقنيات والمفاهيم البرمجية المستخدمة:
HTML5 Semantic Structure: بناء هيكلي صحيح ومفهوم لمحركات البحث ولتقنيات الوصول.

CSS3 Modern Layouts:

استخدام Flexbox لضبط وتوسيط العناصر بدقة في منتصف الشاشة.

اعتماد CSS Variables & Attribute Selectors (data-theme, data-color) للتحكم في ثيمات الألوان والوضع الليلي بسهولة فائقة.

إضافة تأثيرات الانتقال الناعم (transition) للحد من التغيرات المفاجئة للعين عند تبديل الألوان.

Vanilla JavaScript (ES6+):

كتابة كود نظيف وبسيط لإدارة أحداث الضغط (DOM Event Listeners).

التبديل بين كلاسات التفعيل (active) للنماذج ولوحة الألوان بكل كفاءة وسرعة.

📦 مخرجات العمل (What's Included):
أكواد مصدريّة نظيفة ومعلقة (Clean & Documented Code): ملفات index.html و style.css و script.js سهلة القراءة والدمج مع أي مشروع أو Backend لاحقاً.

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