# منصة غيم التعليمية — حزمة التصميم (UI/UX)

حزمة تصميم كاملة لمنصة **غيم** مبنية على ملفَي العميل (`منصة غيم التعليمية.pdf` و`مراحل تنفيذ تطبيق غيم التعليمية.pdf`):
هوية بصرية + موقع إلكتروني متجاوب + تطبيق جوال + لوحات تحكم — كلها HTML / CSS / JavaScript بدون أي مكتبات خارجية.

## كيف تفتحها
1. افتح **`index.html`** في Google Chrome. هذه صفحة العرض التقديمي للعميل، ومنها تنتقل لكل شيء.
2. كل الروابط تعمل بين الصفحات (الموقع ↔ التطبيق ↔ لوحات التحكم).
3. الخطوط والأيقونات محفوظة داخل المجلد، فالعرض يعمل حتى **بدون إنترنت**.
4. أضف `?static` لأي رابط لإيقاف الحركة (مفيد للطباعة أو لقطات الشاشة).

## المحتويات
| المجلد / الملف | المحتوى |
|---|---|
| `index.html` | العرض التقديمي: الفكرة، المستخدمون، معرض الموقع والتطبيق واللوحات، وربط التصميم بمراحل التنفيذ الخمس |
| `brand/brand.html` | دليل الهوية: قصة الاسم، الشعار ونسخه، الألوان ومعانيها، الخطوط، عنصر القطرة، شريط السدو، أسلوب الصور، نبرة الكتابة، التطبيقات |
| `audit.html` | تدقيق الأعمال: كل متطلب في ملفَّي العميل مع الشاشات التي تغطيه وحالته |
| `website/` | 20 صفحة موقع متجاوبة (ديسكتوب + جوال) |
| `app/` | 29 شاشة تطبيق بمقاس 390×844 + `app/index.html` معرض تفاعلي للشاشات |
| `dashboard/` | 27 شاشة: الإدارة المركزية (14)، نظام المدارس (8)، المدرب (2)، البائع (1)، الشريك (1)، الملخص (1) |
| `assets/css/` | `ghaim.css` (نظام التصميم: الألوان والمكونات) · `web.css` · `app.css` · `dash.css` |
| `assets/js/` | `icons.js` (الأيقونات) · `shell.js` (القوائم والتذييل المشتركة) · `ghaim.js` (التفاعلات) |
| `assets/logo/` | الشعار بنسخه (SVG): أساسي، أبيض، أحادي، أيقونة التطبيق بثلاث خلفيات |
| `assets/img/` | 39 صورة مولّدة خصيصًا (أشخاص سعوديون، أماكن، منتجات، رسوم ثلاثية الأبعاد) |
| `previews/` | صور PNG/JPG لكل شاشة (للإرسال السريع للعميل) |
| `IMAGE-PROMPTS.md` | وصف كل صورة بالتفصيل ومكان استخدامها — لإعادة التوليد أو التعديل |

## الفكرة التصميمية باختصار
- **الاسم هو الفكرة:** الغيم يجمع… والمطر يُنبت. المنصة تجمع خدمات التعليم المتفرقة في مكان واحد.
- **الشعار:** كلمة «غيم» بخط دائري ناعم، ونقاط حروفها تحولت إلى قطرات مطر (ذهبية للغين، زرقاء للياء).
- **القطرة عنصر يحمل بيانات:** كل طالبة في لوحة المدرسة قطرة، وكل درس في «غيمتك» قطرة — ولونها = حالتها.
- **الألوان بمعانٍ ثابتة:** كحلي = الهوية · أزرق = التعلّم/قيد التنفيذ · ذهبي = الإجراء الأهم · أخضر = مكتمل · أحمر السدو = تنبيه/متأخر.
- **الطابع السعودي:** كحلي غيم + ذهب الزعفران + أخضر النخيل + أحمر السدو + رمال نجد، شريط «السدو» كتوقيع تراثي،
  التاريخ الهجري، **رمز الريال السعودي الرسمي** (يسار الرقم وبنفس ارتفاعه وفق قواعد ساما)، مدى/Apple Pay/STC Pay/تابي، النفاذ الوطني، نافس والقدرات والتحصيلي، والفاتورة الضريبية.
- **الخطوط:** Readex Pro للعناوين · IBM Plex Sans Arabic للنصوص (رخصة SIL OFL — مجانية للاستخدام التجاري).

## افتراضات استخدمناها (قابلة للتعديل)
- كل الأسماء والأرقام والأسعار في الشاشات **افتراضية لأغراض العرض** (مثل 449 ر.س لدورة القدرات، 4,900 ر.س/سنة لباقة المدارس الأساسية، عمولة الماركت 10%).
- الأسعار معروضة **شاملة ضريبة القيمة المضافة 15%**.
- تاريخ العرض داخل الشاشات: الأحد 18 أكتوبر 2026 · جمادى الأولى 1448هـ.

## قرارات تحتاج تأكيد العميل
1. **الاسم اللاتيني:** عرض العميل يستخدم «Ghym». اعتمدناه كما هو (`GHYM`)، والبديل الأقرب للنطق «Ghaim».
2. **الدخول عبر النفاذ الوطني:** ظاهر في التصميم، ويتطلب اعتمادًا رسميًا للتكامل — وإلا يبقى الدخول بالجوال ورمز التحقق.
3. **بوابة الدفع:** التصميم يدعم مدى وApple Pay وSTC Pay والبطاقات وتابي/تمارا؛ اختيار المزوّد قرار تقني/تجاري.
4. **أسعار باقات المدارس ونِسب العمولات:** تقديرية في التصميم وتحتاج اعتمادًا.
5. **الشهادات «المعتمدة»:** تُذكر فقط للبرامج التي لها شريك تدريب مرخّص.

## ملاحظات للمطوّرين
- لا يوجد Framework؛ كل صفحة HTML مستقلة تعتمد على `ghaim.css` + ملف السطح المناسب.
- القوائم المشتركة (شريط الموقع، التذييل، القائمة الجانبية للوحات، شريط حالة الجوال) تُبنى من `assets/js/shell.js` — تعديل واحد يظهر في كل الصفحات.
- الأيقونات من مكتبة Lucide (رخصة ISC) مضمّنة في `icons.js`، وتُستدعى هكذا: `<i data-i="book-open"></i>`.
- أي صورة تُستبدل بوضع ملف بنفس الاسم في `assets/img/` — لا حاجة لتعديل الكود.

- رمز الريال: `<i class="sar"></i>` بعد الرقم (يُعرض يساره)، والملف الأصلي في `assets/logo/saudi-riyal-symbol.svg`. أي نص «ر.س» يولّده JavaScript يتحول تلقائيًا للرمز.