# شريط العروض المتحرك 🎉 ## نظرة عامة شريط إعلانات متحرك يظهر في أعلى جميع الصفحات لعرض العروض والخصومات. ## المميزات ### 1. تصميم جذاب 🎨 - شريط ملون (أحمر افتراضياً) - تأثير نبض (Pulse) مستمر - أيقونة متحركة 🎉 - Badge للخصم - كود الكوبون بارز ### 2. تفاعلي ⚡ - زر إغلاق - يحفظ الإغلاق في localStorage - لا يظهر مرة أخرى بعد الإغلاق ### 3. متجاوب 📱 - يعمل على جميع الأحجام - تصميم مخصص للموبايل ## كيفية الاستخدام ### من لوحة التحكم: 1. **اذهب إلى الكوبونات** ``` لوحة التحكم > الكوبونات ``` 2. **أضف/عدل كوبون** - الكود: `SUMMER50` - نوع الخصم: نسبة مئوية - قيمة الخصم: `50` - **عرض في الشريط**: ✅ نعم - **نص الإعلان**: "عرض الصيف! خصم 50% على جميع المنتجات" - **لون الشريط**: `#dc3545` (أحمر) 3. **احفظ** - الشريط سيظهر فوراً في جميع الصفحات! ### الحقول الجديدة: ```sql show_in_banner -- عرض في الشريط (0/1) banner_text -- نص الإعلان banner_color -- لون الشريط (HEX) ``` ## التصميم ### الشريط: ``` ┌─────────────────────────────────────────────┐ │ 🎉 عرض الصيف! [50% خصم] كود: SUMMER50 [X] │ └─────────────────────────────────────────────┘ ``` ### المكونات: 1. **أيقونة** 🎉 - متحركة (bounce) 2. **النص** - "عرض الصيف!" 3. **Badge** - "50% خصم" (يومض) 4. **الكود** - "كود: SUMMER50" 5. **زر إغلاق** - [X] ## التأثيرات الحركية ### 1. Slide Down ```css @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } ``` ### 2. Pulse (نبض) ```css @keyframes pulse { 0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.1); } 50% { box-shadow: 0 4px 20px rgba(0,0,0,0.3); } } ``` ### 3. Bounce (قفز) ```css @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } ``` ### 4. Glow (توهج) ```css @keyframes glow { 0%, 100% { box-shadow: 0 0 5px rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 20px rgba(255,255,255,0.6); } } ``` ## الألوان المقترحة ### للعروض: - 🔴 أحمر: `#dc3545` (عروض ساخنة) - 🟠 برتقالي: `#fd7e14` (تخفيضات) - 🟢 أخضر: `#28a745` (شحن مجاني) - 🔵 أزرق: `#007bff` (منتجات جديدة) - 🟣 بنفسجي: `#6f42c1` (عروض حصرية) ## إضافة الشريط لصفحات أخرى ### في أي صفحة PHP: ```php getConnection(); ?> ... ``` ## JavaScript API ### إغلاق الشريط برمجياً: ```javascript closeAnnouncementBar(); ``` ### التحقق من حالة الإغلاق: ```javascript const isClosed = localStorage.getItem('announcement_closed_SUMMER50'); if (isClosed === 'true') { // الشريط مغلق } ``` ## الملفات ### ✅ تم إنشاؤها: - `backend/setup/add_announcement_bar.php` - سكريبت إضافة الحقول - `backend/includes/announcement-bar.php` - الشريط نفسه - `backend/public/index.php` - تم إضافة الشريط ### 📝 يحتاج تحديث: - `backend/admin/coupons/index.php` - إضافة حقول الشريط - `backend/public/products.php` - إضافة الشريط - `backend/public/blog.php` - إضافة الشريط ## مثال كامل ### إنشاء عرض: ```sql INSERT INTO coupons ( code, discount_type, discount_value, show_in_banner, banner_text, banner_color, is_active ) VALUES ( 'FLASH50', 'percentage', 50, 1, '⚡ عرض فلاش! خصم 50% لمدة 24 ساعة فقط', '#dc3545', 1 ); ``` ### النتيجة: ``` ┌──────────────────────────────────────────────────────┐ │ 🎉 ⚡ عرض فلاش! خصم 50% لمدة 24 ساعة فقط [50% خصم] كود: FLASH50 [X] │ └──────────────────────────────────────────────────────┘ ``` ## الخلاصة ✅ شريط عروض احترافي ✅ تأثيرات حركية جذابة ✅ سهل التحكم من لوحة التحكم ✅ متجاوب بالكامل ✅ يحفظ حالة الإغلاق ✅ ألوان قابلة للتخصيص --- تم الإنشاء: