🩺 Harmed - Medical Wear E-commerce Template 👕

Harmed هو قالب واجهة أمامية (Frontend Template) لمتجر إلكتروني متخصص في الملابس الطبية مثل الأطقم الطبية (Scrubs) والبالطوهات (Lab Coats). تم تصميم القالب ليكون جذابًا وعصريًا وسريع الاستجابة، مع التركيز على عرض المنتجات بشكل احترافي. تم بناؤه باستخدام HTML, CSS, و JavaScript فقط (Vanilla JS) بدون أي أطر عمل (Frameworks).

➡️ زيارة العرض المباشر (Live Demo) للمشروع

✨ الميزات الرئيسية (Features)

• ✅ تصميم حديث ومتجاوب: واجهة مستخدم أنيقة تعمل بشكل ممتاز على جميع الشاشات (Desktop, Tablet, Mobile).
• ✅ عرض ديناميكي للمنتجات:
  • سلايدر رئيسي (Banner Slider) لعرض العروض والإعلانات.
  • شبكات عرض للمنتجات (Product Grids) منظمة حسب الفئة.
  • تأثير تمرير الفأرة (Hover Effect) على صور المنتجات لعرض صورة بديلة.
• ✅ أقسام متعددة للمنتجات:
  • Classic V-Neck Scrubs
  • 3D V-Neck Cargo Scrubs
  • Slim Fit Scrubs
  • High Neck Scrubs
  • Lab Coats
• ✅ قسم "صفقة اليوم" (Deal of the Day): لعرض منتج مميز مع خصم وسعر خاص.
• ✅ قائمة جانبية (Sidebar): لعرض المنتجات الأكثر مبيعًا (Best Sellers).
• ✅ مبني بتقنيات أساسية: لا يعتمد على أي مكتبات أو أطر عمل معقدة، مما يجعله خفيف وسهل التعديل.
• ✅ سهل التخصيص: يمكن تغيير الشعار، الصور، النصوص، والأسعار بسهولة.

🛠️ التقنيات المستخدمة (Tech Stack)

• HTML5: لهيكلة المحتوى.
• CSS3: للتصميم والتنسيق، مع استخدام متغيرات CSS لتسهيل التعديل.
• JavaScript (Vanilla JS): لإضافة التفاعلية والحركة في الواجهة (مثل السلايدر والقوائم).
• IonIcons: لمجموعة الأيقونات المستخدمة في الموقع.
• Google Fonts (Poppins): لتحسين شكل الخطوط وجماليتها.

📂 هيكل المشروع (Project Structure)

Harmed/
├── assets/
│   ├── css/
│   │   └── style-prefix.css    # ملفات التنسيق الرئيسية
│   ├── images/
│   │   ├── logo/
│   │   ├── banner/
│   │   ├── classic/
│   │   ├── 3d/
│   │   └── ... (مجلدات صور المنتجات الأخرى)
│   └── js/
│       └── script.js           # ملف الجافاسكريبت للتفاعلية
├── index.html                  # الصفحة الرئيسية للموقع
└── README.md                   # هذا الملف

🚀 كيفية الاستخدام والتشغيل

المشروع عبارة عن واجهة أمامية ثابتة، يمكنك تشغيله بسهولة:

1. استنساخ المستودع (Clone):

   git clone https://github.com/seif4d/Harmed.git 

2. التوجه إلى مجلد المشروع:

   cd Harmed

3. فتح الصفحة: افتح ملف index.html في متصفح الويب المفضل لديك.

✏️ كيفية التخصيص (Customization)

• لتغيير الشعار: استبدل الصورة في assets/images/logo/Logo.png.
• لتغيير المنتجات: قم بتعديل الصور في مجلدات المنتجات داخل assets/images/ وعدّل البيانات (الاسم، السعر، الوصف) مباشرة في ملف index.html.
• لتغيير الألوان: يمكنك تعديل متغيرات CSS في بداية ملف assets/css/style-prefix.css.

🤝 المساهمة (Contributing)

نرحب بالمساهمات لتحسين هذا القالب! إذا كانت لديك فكرة أو إصلاح، يرجى اتباع الخطوات التالية:

1. قم بعمل Fork للمستودع.
2. أنشئ فرعًا جديدًا لميزتك (git checkout -b feature/AmazingFeature).
3. قم بإجراء تعديلاتك (git commit -m 'Add some AmazingFeature').
4. ادفع التعديلات إلى الفرع (git push origin feature/AmazingFeature).
5. افتح Pull Request.

📄 الترخيص (License)

هذا المشروع متاح للاستخدام والتعديل. تم إنشاؤه بواسطة Dragon .