متجر الكتروني

🌐 نظرة عامة

موقع متجر إلكتروني احترافي مبني بـ HTML5 و CSS3 و JavaScript النقي. بيعرض منتجات الموضة والإكسسوارات بطريقة عصرية وتفاعلية، مع سلة تسوق كاملة تعمل في المتصفح بدون Backend.

🎨 التصميم والأسلوب البصري

الثيم فاتح ونظيف بدرجات الرمادي الفاتح والأبيض. الألوان الرئيسية هي الأزرق الداكن للثقة والأحمر الزاهي للأزرار والأسعار. الخط Segoe UI بسيط وعصري. البطاقات بزوايا دائرية ناعمة وظلال خفيفة. التصميم بسيط وسهل التصفح.

🛠️ التقنيات المستخدمة

HTML5 للهيكل الدلالي. CSS3 للـ Grid والـ Flexbox والـ Animations. JavaScript النقي للتفاعلية كاملة بدون أي مكتبات خارجية.

📑 الأقسام الرئيسية

Back Navigation — شريط علوي ثابت بزرار رجوع للبورتفوليو الرئيسي.

Navbar — شعار المتجر "URBANSTORE" مع قائمة تنقل (Home, Products, Features, Contact) وأيقونة سلة تسوق مع Badge بعدد المنتجات.

Hero — عنوان "Premium Products, Better Prices" مع وصف مختصر وزرار "Shop Now" بيودي للمنتجات.

Products — منتجات: Classic T-Shirt, Slim Jeans, Sneakers, Leather Jacket. كل منتج بصورة، وصف، سعر، وزرار "Add to Cart".

Features — مميزات: Free Shipping, 30 Days Return, Secure Payment, 24/7 Support.

Contact — فورم تواصل مع Name, Email, Message.

Footer — حقوق النشر مع رابط رجوع للبورتفوليو.

⚡ المميزات التفاعلية

Shopping Cart — سلة تسوق كاملة بتنزل من اليمين Sidebar. بتعرض كل المنتجات اللي اتضافت مع صورة مصغرة، اسم، سعر، وزرار حذف. بتعرض الإجمالي في الأسفل وزرار Checkout.

Cart Badge — أيقونة السلة في الـ Navbar بتعرض عدد المنتجات. لما تضيف منتج جديد، الـ Badge بيكبر وبيرجع لحجمه (Bump Animation).

Add to Cart — لما تدوس "Add to Cart"، الزرار بيتحول لـ "Added ✓" باللون الأخضر لمدة ثانية ونص، وبعدين يرجع طبيعي.

Toast Notification — إشعار خفيف بيظهر من تحت لما تضيف منتج للسلة أو تحذفه.

Remove from Cart — تقدر تمسح أي منتج من السلة بالـ 🗑 button.

Cart Total — السعر الإجمالي بيتحسب أوتوماتيك لما تضيف أو تمسح منتج.

Empty Cart State — لما السلة فاضية، بيظهر رسالة "Your cart is empty" مع أيقونة.

Scroll Reveal — الأقسام بتظهر بحركة Fade-in لما تعمل Scroll.

Mobile Menu — قائمة همبرجر للشاشات الصغيرة.

Smooth Scroll — الروابط الداخلية بتتحرك بسلاسة.

Back to Top — زرار ثابت بيوديك لأول الصفحة.

Scroll Progress Bar — شريط فوق الصفحة بيملى معاك.

Form Feedback — لما تبعت الرسالة، الزرار بيتحول لـ "Sending..." وبعدين بيظهر تأكيد.

Auto Year — السنة في الفوتر بتتغير أوتوماتيك.

📱 التوافقية

Responsive Design شغال على Desktop و Tablet و Mobile. Mobile Menu منسدلة سهلة. كل الأزرار والروابط مُحسّنة للشاشات اللمسية. السلة بتاخد عرض الشاشة كامل في الموبايل.

🚀 الأداء

Zero Dependencies — كل التفاعلية مبنية بـ Vanilla JS من غير أي مكتبات خارجية. CSS Variables سهلة التخصيص. Clean Code منظم وقابل للصيانة. السلة بتشتغل بالكامل في المتصفح بدون Backend.