واجهة متجر إلكتروني باستخدام HTML وBootstrap مع وظائف تفاعلية بـ JavaScript
في هذا المشروع قمت بتصميم وتطوير واجهة متجر إلكتروني متكاملة، تعتمد على تقنيات الويب الأساسية (HTML, CSS, Bootstrap, JavaScript)، مع توفير تجربة استخدام مرنة وسلسة، وتقديم وظائف أساسية لأي متجر إلكتروني.
مميزات المشروع:
تصميم متجاوب واحترافي
تم الاعتماد على Bootstrap لضمان توافق التصميم مع جميع الأجهزة والشاشات، بالإضافة إلى استخدام Carousel ديناميكي لعرض الصور الترويجية.
شريط تنقّل ديناميكي
يحتوي على روابط للصفحات الرئيسية مثل: الصفحة الرئيسية، المتجر، والتواصل، بالإضافة إلى زر لتبديل الوضع الليلي، وإدارة جلسة المستخدم (تسجيل الدخول/التسجيل/تسجيل الخروج).
نظام تسجيل دخول وتسجيل حساب جديد
تم تضمين نماذج تسجيل الدخول والتسجيل داخل نوافذ منبثقة (Modals) باستخدام Bootstrap، مع تحقّق من صحة الحقول.
واجهة عرض المنتجات مع شريط بحث
إمكانية عرض المنتجات بشكل شبكي باستخدام Bootstrap Grid، مع إضافة ميزة البحث الفوري داخل المنتجات.
عربة تسوّق جانبية
يتم عرض المنتجات المُضافة للعربة داخل قائمة جانبية (Sidebar)، مع إمكانية تحديث الكمية وحذف المنتجات، وحفظ حالة العربة.
الوضع الليلي (Dark Mode)
تم إضافة زر لتفعيل الوضع الليلي لتحسين تجربة المستخدم حسب التفضيل.
تنبيهات تفاعلية
عند تنفيذ عمليات مثل تسجيل الدخول أو إضافة منتج، تظهر تنبيهات ديناميكية للمستخدم بشكل أنيق.
التقنيات المستخدمة:
HTML – CSS – Bootstrap 5 – JavaScript (مع تقسيم الكود في ملفات منفصلة مثل main.js)