وشّى — Wushai

منصة فنية ذكية قائمة على القبول

معرض + بورتفوليو + متجر + ذكاء اصطناعي

---

📋 نظرة عامة

وشّى ليس متجرًا عاديًا. إنه تجربة رقمية كاملة تجمع بين:

• ✅ نظام قبول ذكي — ليس الدخول للجميع
• 🎮 لعبة تكتيكية — جمع النقاط أثناء الانتظار
• 🎨 استوديو AI — تصميم بالذكاء الاصطناعي (صورة أو نص)
• 🖼️ معرض فني — عرض الأعمال المختارة
• 🛍️ متجر ذكي — طباعة حسب الطلب مع خصومات النقاط
• 📦 تتبع الطلبات — حالات متعددة من المراجعة إلى الشحن

---

🎨 الهوية البصرية

لوحة الألوان (ثابتة — لا تُغيّر)

--sand-paper: #EBE5D9      /* الخلفيات */
--espresso-ink: #2C241B    /* النصوص الرئيسية */
--desert-olive: #4B5842    /* العناصر التفاعلية */
--cocoa-brown: #5A3E2B     /* التفاصيل */
--lavender-mist: #9D8BB1   /* الذكاء / النقاط */

فلسفة التصميم

• الجنون منضبط — غريب لكن مقروء
• Cinematic — حركات سلسة وهادفة
• Museum-like — واجهات تشبه "غرف" أكثر من صفحات
• Mobile-first — سرعة وأداء عالي

---

📁 هيكل المشروع

wushai/
├── index.html          # البوابة الأولى (Landing)
├── register.html       # التسجيل
├── game.html           # اللعبة التكتيكية
├── acceptance.html     # حالة القبول/الرفض
├── studio.html         # الاستوديو (AI Design)
├── gallery.html        # المعرض
├── shop.html           # المتجر + السلة
├── orders.html         # حالات الطلبات
├── manifesto.html      # البيان
├── account.html        # حسابي
├── contact.html        # تواصل معنا
│
├── css/
│   └── core.css        # نظام التصميم الكامل
│
├── js/                 # (مستقبلي: ملفات JS منفصلة)
└── assets/             # (مستقبلي: صور وأيقونات)

---

🚀 كيفية التشغيل

الطريقة الأولى: فتح مباشر

1. افتح ملف index.html في المتصفح
2. ابدأ التجربة

الطريقة الثانية: خادم محلي (موصى به)

cd wushai
python3 -m http.server 8000

ثم افتح: http://localhost:8000

الطريقة الثالثة: VS Code Live Server

1. افتح المشروع في VS Code
2. انقر بزر الماوس الأيمن على index.html
3. اختر "Open with Live Server"

---

🎯 رحلة المستخدم (User Journey)

1️⃣ الدخول

• البوابة (index.html) — عبارات دوّارة: "ليس متجرًا" / "هذا اختبار ذائقة" / "الدخول ليس للجميع"

2️⃣ التسجيل

• التسجيل (register.html) — اسم + إيميل → طلب قيد المراجعة
• رسالة: "لكن بإمكانك اللعب"

3️⃣ اللعبة

• التحدي (game.html) — 5 أسئلة عن التصميم
• جمع نقاط (0-125)
• النقاط تُحفظ وتُستخدم لاحقًا

4️⃣ القبول

• حالة القبول (acceptance.html)
  • ✅ مقبول (75+ نقطة) → الاستوديو
  • 🟡 قيد المراجعة (50-74 نقطة)
  • 🔴 مرفوض (< 50 نقطة) → إعادة المحاولة

5️⃣ التصميم

• الاستوديو (studio.html)
  • تصميم من صورة (رفع ملف)
  • تصميم من نص (وصف AI)
  • إرسال للمراجعة

6️⃣ التسوق

• المتجر (shop.html) — منتجات جاهزة (قميص، حقيبة، برواز، دفتر)
• السلة — خصم تلقائي من النقاط (0.5 ريال/نقطة، حتى 20%)
• الدفع — إتمام الطلب

7️⃣ التتبع

• الطلبات (orders.html)
  • 🟡 جاري المراجعة
  • 🟢 جاري التجهيز
  • 🔵 تم الطباعة
  • ✅ تم الشحن
  • 🔴 مرفوض

---

💾 تخزين البيانات (LocalStorage)

wushai_user

{
  "name": "أحمد",
  "email": "[email protected]",
  "registeredAt": "2025-01-19T...",
  "status": "accepted",
  "points": 120,
  "gameCompleted": true
}

wushai_orders

[
  {
    "id": 1737301234567,
    "items": [...],
    "total": "280 ريال",
    "createdAt": "2025-01-19T...",
    "status": "review"
  }
]

wushai_cart

[
  { "id": 1, "name": "قميص أساسي", "price": 120 },
  { "id": 3, "name": "برواز فني", "price": 200 }
]

---

🔧 ما يحتاج إلى تطوير (للنسخة الإنتاجية)

Backend Integration

• API للتسجيل وإدارة المستخدمين
• تكامل AI حقيقي (DALL-E / Midjourney / Stable Diffusion)
• نظام دفع (Stripe / PayPal / Moyasar)
• قاعدة بيانات (PostgreSQL / MongoDB)
• نظام إشعارات (Email / SMS)

Features

• رفع صور حقيقية للمعرض
• نظام التقييمات والتعليقات
• Dashboard للإدارة
• تصدير التصاميم بصيغ متعددة
• Multi-language support

Performance

• تحسين الصور (WebP / AVIF)
• Lazy loading
• Service Worker (PWA)
• CDN للملفات الثابتة

---

🎭 الفلسفة

من البيان (manifesto.html):

نحن معمل تجريبي للفن والذكاء الاصطناعي. لا نبيع منتجات جاهزة. نصنع تجارب مخصصة. كل قطعة هنا تحمل قرارًا، وليس مجرد طلب.

---

🛠️ التقنيات المستخدمة

• HTML5 — بنية دلالية واضحة
• CSS3 — Custom Properties + Grid + Flexbox + Animations
• Vanilla JavaScript — لا مكتبات خارجية (خفيف وسريع)
• LocalStorage — تخزين مؤقت للبيانات
• Google Fonts — IBM Plex Sans Arabic

---

📝 ملاحظات مهمة

1. الألوان مُقفلة — لا تضف ألوان جديدة
2. النصوص عربية ذكية — قصيرة، غير تسويقية
3. الحركات محسوبة — كل animation له سبب UX
4. Mobile-first — اختبر على الموبايل أولاً
5. Accessibility — دعم prefers-reduced-motion

---

🎨 عرض للمستثمرين

هذا المشروع جاهز للعرض كـ:

• ✅ Proof of Concept — تجربة كاملة قابلة للاختبار
• ✅ Design System — هوية متسقة وقابلة للتطوير
• ✅ UX Journey — رحلة مستخدم منطقية ومدروسة
• ✅ Scalable Architecture — بنية قابلة للتوسع

---

📧 التواصل

• البريد الإلكتروني: [email protected]
• تويتر: @wushai
• إنستجرام: @wushai

---

مُصمم بـ 🤍 في المعمل الرقمي

هذا ليس موقعًا. هذا منتج ثقافي + تقني.