# ميزة دوائر الفئات - Categories Circles

## الميزة الجديدة ✨

تم إضافة قسم دوائر الفئات في الصفحة الرئيسية مع إمكانية التحكم فيه من الإعدادات!

## المميزات

### 1. دوائر الفئات 🎯
- **تصميم عصري:** دوائر ملونة بتدرج وردي
- **أيقونات:** كل فئة لها أيقونة
- **عدد المنتجات:** يظهر عدد المنتجات في كل فئة
- **تأثير هوفر:** الدائرة ترتفع عند المرور عليها

### 2. التحكم من الإعدادات ⚙️
- **إظهار/إخفاء:** تقدر تخفي القسم من الإعدادات
- **سهل الاستخدام:** مفتاح واحد فقط

## كيفية الاستخدام

### للمستخدمين:
1. شاهد دوائر الفئات في الصفحة الرئيسية
2. اضغط على أي دائرة
3. ستنتقل لصفحة المنتجات مع فلتر الفئة

### للأدمن:

#### الخطوة 1: تفعيل الإعداد
افتح هذا الرابط مرة واحدة:
```
http://localhost/KL/backend/setup/add_categories_display_setting.php
```

#### الخطوة 2: التحكم في العرض
1. اذهب إلى `backend/admin/settings/index.php`
2. ابحث عن `show_categories_circles`
3. غير القيمة:
   - `1` = إظهار دوائر الفئات
   - `0` = إخفاء دوائر الفئات

## التصميم

### الدوائر
- **الحجم:** 100px × 100px
- **الخلفية:** تدرج وردي شفاف
- **الحدود:** 2px وردي شفاف
- **الأيقونة:** 40px × 40px وردية

### الشبكة
- **التخطيط:** `auto-fit` مع حد أدنى 120px
- **المسافات:** متناسقة ومريحة
- **العدد:** يعرض أول 6 فئات

### التأثيرات
- **هوفر:** ترتفع الدائرة 8px
- **الانتقال:** سلس 0.3s

## الكود

### في الصفحة الرئيسية
```php
// التحقق من الإعداد
$show_categories_circles = true;
$setting = $conn->query("SELECT setting_value FROM settings 
                         WHERE setting_key = 'show_categories_circles'");
if ($setting) {
    $show_categories_circles = ($setting['setting_value'] == '1');
}

// عرض القسم
if ($show_categories_circles && !empty($categories)) {
    // HTML للدوائر
}
```

### في قاعدة البيانات
```sql
INSERT INTO settings (setting_key, setting_value, setting_type, description) 
VALUES ('show_categories_circles', '1', 'boolean', 
        'إظهار دوائر الفئات في الصفحة الرئيسية');
```

## الملفات

- **الصفحة الرئيسية:** `backend/public/index.php`
- **ملف الإعداد:** `backend/setup/add_categories_display_setting.php`
- **الإعدادات:** `backend/admin/settings/index.php`

## المميزات الإضافية

✅ متوافق مع الموبايل
✅ تصميم عصري وجذاب
✅ سهل التحكم
✅ يعرض أول 6 فئات فقط
✅ تأثيرات حركية سلسة

## التخصيص

### تغيير عدد الفئات المعروضة
```php
// في index.php - السطر الخاص بالدوائر
array_slice($categories, 0, 6)  // غير 6 للعدد المطلوب
```

### تغيير الألوان
```css
/* الخلفية */
background: linear-gradient(135deg, 
    rgba(229, 115, 147, 0.1) 0%, 
    rgba(209, 83, 122, 0.1) 100%);

/* الحدود */
border: 2px solid rgba(229, 115, 147, 0.2);

/* الأيقونة */
stroke="#E57393"
```

تم التنفيذ بنجاح! 🎉