# 📱 دليل استخدام شريط الاستوريز - Instagram Style

## ✅ تم التفعيل بنجاح!

شريط الاستوريز السريع (زي Instagram) تم إضافته في:
- ✅ الصفحة الرئيسية (`backend/public/index.php`)
- ✅ صفحة المنتجات (`backend/public/products.php`)
- ✅ صفحة الحساب (`backend/public/account.php`)
- ✅ جميع الصفحات اللي بتستخدم `unified-header.php` (السلة، الخدمات، إلخ)

---

## 🎯 كيفية إضافة استوري جديدة

### الطريقة 1: من لوحة التحكم
1. افتح لوحة التحكم: `backend/admin/stories/index.php`
2. اضغط "إضافة استوري جديدة"
3. املأ البيانات:
   - **العنوان**: اسم الاستوري (مثال: "عرض خاص")
   - **الصورة**: ارفع صورة بنسبة 9:16 (عمودية)
   - **الرابط**: رابط المنتج أو الصفحة (اختياري)
   - **المدة**: كم ثانية تظهر (افتراضي: 5 ثواني)
   - **تاريخ الانتهاء**: متى تختفي تلقائياً (اختياري)
4. اضغط "حفظ"

### الطريقة 2: من قاعدة البيانات
```sql
INSERT INTO stories (title, image, link, duration, is_active, order_position) 
VALUES ('عرض خاص', 'uploads/stories/story1.jpg', 'products.php?id=5', 5, 1, 1);
```

---

## 🎨 مميزات الشريط

### التصميم
- ✨ تصميم مطابق لـ Instagram Stories
- 🎨 دوائر ملونة بتدرج لوني جذاب
- 👁️ علامة "تم المشاهدة" (رمادي) بعد المشاهدة
- 📱 متجاوب مع الموبايل والتابلت

### الوظائف
- ⏱️ تشغيل تلقائي مع شريط تقدم
- ⏸️ إيقاف مؤقت عند الضغط المطول
- ⬅️➡️ التنقل بين الاستوريز (سهم يمين/يسار)
- ⌨️ دعم لوحة المفاتيح (Arrow Keys + Escape)
- 📊 تسجيل عدد المشاهدات تلقائياً
- 💾 حفظ الاستوريز المشاهدة في LocalStorage

---

## 📐 مواصفات الصور المثالية

### الأبعاد الموصى بها:
- **العرض**: 1080px
- **الارتفاع**: 1920px
- **النسبة**: 9:16 (عمودية)
- **الحجم**: أقل من 2MB للتحميل السريع

### أدوات مجانية للتصميم:
- Canva (قوالب Instagram Stories جاهزة)
- Adobe Express
- Figma

---

## 🔧 التخصيص

### تغيير عدد الاستوريز المعروضة
في ملف `backend/includes/stories-component.php`:
```php
LIMIT 10  // غير الرقم حسب رغبتك
```

### تغيير مدة العرض الافتراضية
في ملف `backend/public/assets/js/stories.js`:
```javascript
this.duration = 5000; // بالميلي ثانية (5000 = 5 ثواني)
```

### تغيير الألوان
في ملف `backend/public/assets/css/stories.css`:
```css
.story-avatar {
    background: linear-gradient(45deg, #f093fb 0%, #f5576c 50%, #ffd876 100%);
    /* غير الألوان حسب هوية علامتك التجارية */
}
```

---

## 📊 تتبع الأداء

### عرض إحصائيات الاستوريز
```sql
SELECT title, views_count, created_at 
FROM stories 
ORDER BY views_count DESC;
```

### أكثر الاستوريز مشاهدة
```sql
SELECT title, views_count 
FROM stories 
WHERE is_active = 1 
ORDER BY views_count DESC 
LIMIT 5;
```

---

## 🚀 نصائح للنجاح

### المحتوى
1. **استخدم صور عالية الجودة** - الصور الواضحة تجذب الانتباه
2. **نص قصير وواضح** - العنوان يظهر تحت الدائرة
3. **عروض محدودة** - "خصم 50% لمدة 24 ساعة"
4. **منتجات جديدة** - "وصل حديثاً"
5. **وراء الكواليس** - صور من المصنع أو التحضير

### التوقيت
- 🌅 **الصباح (9-11 ص)**: منتجات العناية الصباحية
- 🌆 **المساء (7-9 م)**: عروض خاصة ومنتجات المساء
- 🎉 **المناسبات**: عروض العيد، رمضان، الجمعة البيضاء

### التفاعل
- 📈 راقب عدد المشاهدات
- 🔄 حدّث الاستوريز يومياً أو أسبوعياً
- 🎯 اربط كل استوري بمنتج أو عرض محدد

---

## 🐛 حل المشاكل

### الاستوريز لا تظهر؟
1. تأكد من وجود جدول `stories` في قاعدة البيانات
2. تأكد من وجود استوريز نشطة (`is_active = 1`)
3. تحقق من مسار الصور صحيح

### الصور لا تظهر؟
1. تأكد من رفع الصور في `backend/uploads/stories/`
2. تحقق من صلاحيات المجلد (755)
3. تأكد من مسار الصورة في قاعدة البيانات

### الاستوريز لا تتحرك؟
1. تأكد من تحميل ملف `stories.js`
2. افتح Console في المتصفح وابحث عن أخطاء JavaScript
3. تأكد من وجود `window.storiesData` في الصفحة

---

## 📞 الدعم

إذا واجهت أي مشكلة:
1. راجع ملف `STORIES-GUIDE.md` للتفاصيل الكاملة
2. تحقق من ملف `INSTALLATION-DONE.md` للتأكد من التثبيت
3. راجع `CROP-GUIDE.md` لمعرفة كيفية تحضير الصور

---

## ✨ أمثلة للاستخدام

### مثال 1: عرض منتج جديد
```
العنوان: "وصل حديثاً 🎉"
الصورة: صورة المنتج الجديد
الرابط: product.php?id=123
المدة: 5 ثواني
```

### مثال 2: خصم محدود
```
العنوان: "خصم 30% 🔥"
الصورة: تصميم العرض
الرابط: products.php?category=offers
المدة: 7 ثواني
تاريخ الانتهاء: بعد 24 ساعة
```

### مثال 3: نصيحة جمالية
```
العنوان: "نصيحة اليوم 💡"
الصورة: إنفوجرافيك
الرابط: (بدون رابط)
المدة: 10 ثواني
```

---

**🎊 مبروك! شريط الاستوريز جاهز للاستخدام**

ابدأ بإضافة أول استوري الآن من لوحة التحكم! 🚀