# 🎨 نظام الهوية البصرية الموحد - Roz Skin ## 📋 نظرة عامة نظام هوية بصرية موحد 100% لجميع صفحات المتجر، مع ملف CSS واحد وملفات header/footer موحدة. --- ## 🎯 الملفات الأساسية ### 1. ملف CSS الموحد ``` public/assets/css/unified-brand.css ``` **الحجم:** ~15 KB **المحتوى:** جميع الأنماط الأساسية للموقع ### 2. Header الموحد ``` includes/unified-header.php ``` **يحتوي على:** - Navigation موحد - Logo - Cart & Wishlist badges - Mobile menu ### 3. Footer الموحد ``` includes/unified-footer.php ``` **يحتوي على:** - معلومات الشركة - روابط سريعة - وسائل التواصل - Toast notifications --- ## 🎨 الألوان الأساسية ### الألوان الرئيسية ```css --brand-primary: #E57393; /* وردي بيري */ --brand-primary-light: #F2A8C0; /* وردي فاتح */ --brand-primary-dark: #D1537A; /* وردي داكن */ --brand-primary-hover: #C73E6B; /* للتفاعل */ ``` ### الألوان الثانوية ```css --brand-secondary: #207D88; /* تركواز */ --brand-secondary-light: #3A9BA6; /* تركواز فاتح */ --brand-secondary-dark: #186570; /* تركواز داكن */ ``` ### الألوان المحايدة ```css --brand-white: #FFFFFF; --brand-black: #1F2937; --brand-gray-100: #F3F4F6; --brand-gray-500: #6B7280; ``` --- ## 🔤 الخطوط ### الخط الأساسي ```css font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; ``` ### أحجام الخطوط ```css --brand-font-size-xs: 0.75rem; /* 12px */ --brand-font-size-sm: 0.875rem; /* 14px */ --brand-font-size-base: 1rem; /* 16px */ --brand-font-size-lg: 1.125rem; /* 18px */ --brand-font-size-xl: 1.25rem; /* 20px */ --brand-font-size-2xl: 1.5rem; /* 24px */ --brand-font-size-3xl: 1.875rem; /* 30px */ --brand-font-size-4xl: 2.25rem; /* 36px */ --brand-font-size-5xl: 3rem; /* 48px */ ``` --- ## 🔘 الأزرار ### الزر الأساسي ```html ``` ### الزر الثانوي ```html ``` ### الزر المحدد ```html ``` ### أحجام الأزرار ```html ``` --- ## 🃏 البطاقات ### بطاقة منتج ```html
Product

اسم المنتج

وصف المنتج...

``` --- ## 📐 الشبكة ### Grid System ```html
...
...
...
...
``` ### الاستجابة - **Mobile:** 1 عمود - **Tablet:** 2 عمود - **Desktop:** 3-4 أعمدة --- ## 🏷️ الشارات ### شارة خصم ```html خصم 25% ``` ### شارة جديد ```html جديد ``` --- ## ⭐ التقييمات ```html
(4.5)
``` --- ## 🔔 الإشعارات ### Toast Notification ```javascript showToast('تم إضافة المنتج للسلة', 'success'); showToast('حدث خطأ', 'error'); showToast('معلومة مهمة', 'info'); ``` --- ## 📱 الاستجابة للموبايل ### Breakpoints ```css /* Mobile */ @media (max-width: 768px) { } /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { } /* Desktop */ @media (min-width: 1025px) { } ``` --- ## 🎭 الحركات ### Fade In ```html
...
``` ### Fade In Up ```html
...
``` --- ## 📝 كيفية الاستخدام ### 1. في صفحة جديدة: ```php

عنوان الصفحة

...
...
...
``` ### 2. إضافة CSS إضافي: ```php .custom-class { /* أنماط مخصصة */ } '; include '../includes/unified-header.php'; ?> ``` ### 3. إضافة JavaScript إضافي: ```php // كود JavaScript مخصص '; include '../includes/unified-footer.php'; ?> ``` --- ## ✅ المميزات - ✅ **موحد 100%** - نفس الشكل في كل الصفحات - ✅ **سريع** - ملف CSS واحد فقط - ✅ **سهل الصيانة** - تعديل واحد يطبق على كل الصفحات - ✅ **متجاوب** - يعمل على جميع الأجهزة - ✅ **احترافي** - تصميم عصري وجذاب - ✅ **منظم** - كود نظيف ومرتب - ✅ **موثق** - توثيق كامل --- ## 🎯 الخطوات التالية 1. ✅ تطبيق النظام على جميع الصفحات 2. ✅ اختبار على جميع الأجهزة 3. ✅ تحسين الأداء 4. ✅ إضافة المزيد من المكونات --- ## 📞 الدعم للمساعدة أو الاستفسارات، راجع: - `unified-brand.css` - الأنماط الأساسية - `unified-header.php` - Header - `unified-footer.php` - Footer --- **تم التطوير بواسطة:** Kiro AI **التاريخ:** نوفمبر 2025 **الإصدار:** 1.0