# دليل نظام الاستوريز 📱✨

## نظام Stories مثل Instagram تماماً!

تم إنشاء نظام استوريز كامل مثل Instagram للمتجر الإلكتروني.

## الملفات المنشأة 📁

### 1. قاعدة البيانات
- `backend/setup/create_stories_system.php` - إنشاء الجداول

### 2. لوحة التحكم
- `backend/admin/stories/index.php` - إدارة الاستوريز

### 3. الواجهة الأمامية
- `backend/public/assets/css/stories.css` - تصميم الاستوريز
- `backend/public/assets/js/stories.js` - وظائف الاستوريز
- `backend/includes/stories-component.php` - Component جاهز

### 4. API
- `backend/api/stories/get.php` - جلب الاستوريز
- `backend/api/stories/view.php` - تسجيل المشاهدات

## خطوات التفعيل 🚀

### 1. إنشاء قاعدة البيانات
```
افتح: backend/setup/create_stories_system.php
```

### 2. إضافة الاستوريز للصفحة الرئيسية
أضف هذا الكود في `backend/public/index.php` بعد الهيدر مباشرة:

```php
<?php include '../includes/stories-component.php'; ?>
```

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

## المميزات ✨

### 1. دوائر الاستوري
- ✅ تصميم مثل Instagram تماماً
- ✅ حدود ملونة (gradient)
- ✅ تتحول لرمادي بعد المشاهدة
- ✅ سكرول أفقي سلس

### 2. عارض الاستوري
- ✅ فتح بشاشة كاملة
- ✅ شريط تقدم لكل استوري
- ✅ التنقل بالسهم أو النقر
- ✅ إيقاف مؤقت بالضغط المطول
- ✅ إغلاق بزر X أو ESC

### 3. التفاعل
- ✅ تسجيل المشاهدات
- ✅ حفظ الاستوريز المشاهدة
- ✅ عداد المشاهدات
- ✅ روابط قابلة للنقر

### 4. الإدارة
- ✅ إضافة/تعديل/حذف
- ✅ تفعيل/تعطيل
- ✅ ترتيب الاستوريز
- ✅ تاريخ انتهاء
- ✅ إحصائيات المشاهدات

## الاستخدام 💡

### للعملاء:
```
1. افتح الصفحة الرئيسية
2. شاهد دوائر الاستوريز أعلى الصفحة
3. اضغط على أي دائرة
4. استمتع بمشاهدة الاستوريز!
```

### للمسؤولين:
```
1. اذهب لـ admin/stories/index.php
2. أضف استوريز جديدة
3. راقب الإحصائيات
4. عطل/فعل حسب الحاجة
```

## أفكار للاستخدام 🎨

### 1. عروض خاصة
```
- صور المنتجات الجديدة
- خصومات محدودة
- عروض فلاش
```

### 2. محتوى تسويقي
```
- قبل وبعد
- آراء العملاء
- طريقة الاستخدام
```

### 3. إعلانات
```
- أخبار المتجر
- فعاليات قادمة
- مسابقات
```

## التخصيص 🎨

### تغيير الألوان:
في `stories.css`:
```css
.story-avatar {
    background: linear-gradient(45deg, #YOUR_COLOR1, #YOUR_COLOR2);
}
```

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

### تغيير عدد الاستوريز:
في `stories-component.php`:
```php
LIMIT 10 // غير الرقم
```

## نصائح للصور 📸

### الأبعاد المثالية:
- **العرض**: 1080px
- **الارتفاع**: 1920px
- **النسبة**: 9:16 (مثل Instagram)

### الحجم:
- أقل من 5MB
- صيغة: JPG أو PNG
- جودة عالية

### التصميم:
- نص واضح وكبير
- ألوان جذابة
- رسالة واحدة لكل استوري

## استكشاف الأخطاء 🔧

### المشكلة: لا تظهر الاستوريز

**الحلول:**
1. تأكد من تشغيل `create_stories_system.php`
2. تحقق من وجود استوريز نشطة
3. تأكد من إضافة component للصفحة

### المشكلة: الصور لا تظهر

**الحلول:**
1. تحقق من مسار الصور
2. تأكد من رفع الصور بنجاح
3. راجع صلاحيات المجلد

### المشكلة: لا يعمل التنقل

**الحلول:**
1. تأكد من تحميل `stories.js`
2. افتح Console وشاهد الأخطاء
3. تحقق من وجود jQuery إذا لزم

## الأمان 🔒

- ✅ فحص نوع الملفات
- ✅ حد أقصى لحجم الملف
- ✅ تسجيل المشاهدات بأمان
- ✅ حماية من SQL Injection

## الأداء ⚡

- ✅ تحميل كسول للصور
- ✅ ضغط الصور تلقائياً
- ✅ Cache للاستوريز المشاهدة
- ✅ استعلامات محسنة

---

**تم الإنشاء**: نوفمبر 2025  
**الإصدار**: 1.0  
**المطور**: Kiro AI Assistant

🎉 استمتع بنظام الاستوريز الجديد!