عمشرو

أريد منك تطوير LUFFY STORE v2.0 كمتجر خدمات احترافي جدًا، وليس مجرد صفحة HTML بسيطة. أريد المشروع يكون مرتب، سريع، Responsive بالكامل على الهاتف والكمبيوتر، بواجهة فخمة جدًا وحركات وانتقالات ناعمة، مع الاهتمام بالتفاصيل الصغيرة.

⚠️ نقطة أمنية مهمة جدًا:

لا أريد تخزين أو استقبال كلمات مرور Instagram داخل الموقع. إذا كانت أي خدمة تحتاج صلاحية للحساب، استخدم طريقة تفويض رسمية وآمنة مثل OAuth أو أي نظام API رسمي يدعم الصلاحيات، بحيث كلمة مرور العميل لا تصل إلى سيرفر المتجر ولا يتم تسجيلها في قاعدة البيانات أو Logs أو Analytics أو أي مكان آخر.

━━━━━━━━━━━━━━━━━━━━

🎨 أولًا: التصميم والهوية

━━━━━━━━━━━━━━━━━━━━

اسم الموقع:

LUFFY STORE

أريد التصميم يكون Dark Premium، مثل متاجر الخدمات الاحترافية:

- خلفية داكنة فخمة.

- بنفسجي + ذهبي كلونين أساسيين.

- Glassmorphism خفيف.

- Cards احترافية.

- Glow وتأثيرات إضاءة خفيفة.

- Animations ناعمة.

- Hover effects.

- Buttons بتصميم حديث.

- Icons لكل خدمة.

- Loading animations.

- انتقالات بين الصفحات بدون تقطيع.

- دعم الشاشات الصغيرة جدًا.

- RTL للعربي وLTR للإنجليزي.

- الخط يكون واضح وفخم.

- لا أريد ازدحام في التصميم.

أريد الموقع يبدو كأنه منصة SaaS احترافية، وليس Template عادي.

━━━━━━━━━━━━━━━━━━━━

🌍 ثانيًا: اختيار اللغة

━━━━━━━━━━━━━━━━━━━━

أول مرة يدخل العميل الموقع تظهر له شاشة:

اختر اللغة

🇸🇦 العربية

🇺🇸 English

ويتم حفظ اختياره محليًا حتى لا يضطر لاختيار اللغة كل مرة.

يجب ترجمة جميع العناصر:

- الأزرار

- العناوين

- الرسائل

- حالات الطلبات

- التنبيهات

- الفواتير

- صفحة طلباتي

- الإعدادات

- معلومات الخدمات.

━━━━━━━━━━━━━━━━━━━━

👋 ثالثًا: شاشة الترحيب

━━━━━━━━━━━━━━━━━━━━

بعد اختيار اللغة تظهر Landing Page فخمة.

مثال:

مرحبًا بك في LUFFY STORE

منصة خدمات رقمية سريعة واحترافية.

تم التطوير بواسطة LUFFY STORE

وأريد زر واضح:

🚀 ابدأ الآن

وزر آخر:

🌐 منصات التواصل الخاصة بنا

لا أريد إظهار روابط التواصل الأربعة مباشرة في الصفحة الرئيسية.

يكون هناك زر واحد فقط:

"منصات التواصل الخاصة بنا"

وعند الضغط عليه تظهر نافذة/صفحة جميلة تحتوي Cards منفصلة.

━━━━━━━━━━━━━━━━━━━━

📱 رابعًا: منصات التواصل

━━━━━━━━━━━━━━━━━━━━

أريد 4 بطاقات منفصلة مع أيقونات وحركات:

1. الحساب الرسمي على Telegram

@Mu_nir1

زر:

تواصل معنا

2. الحساب الرسمي على WhatsApp

+967785575772

زر:

تواصل معنا

3. الحساب الرسمي على Instagram

munir_store1

الرابط:

https://www.instagram.com/munir_store1?igsi=MnN2a3Vrb2U1NmFy

زر:

زيارة Instagram

4. القناة الرسمية عبر Telegram

Raiden_Official1

الرابط:

https://t.me/Raiden_Official1

زر:

زيارة القناة

كل بطاقة يكون لها:

- أيقونة المنصة.

- اسم المنصة.

- اسم الحساب.

- وصف قصير.

- زر.

- Animation عند الظهور.

- Hover effect.

━━━━━━━━━━━━━━━━━━━━

🔐 خامسًا: تسجيل العميل

━━━━━━━━━━━━━━━━━━━━

بدل إدخال كلمة مرور Instagram داخل الموقع، أريد نظام آمن.

العميل يدخل:

اسم المستخدم

مثال:

munir_store1

ثم:

متابعة

إذا كان هناك API رسمي أو OAuth متاح للتحقق من الحساب، استخدمه بالطريقة الآمنة.

ممنوع:

- تخزين كلمة مرور Instagram.

- إرسال كلمة المرور إلى قاعدة البيانات.

- حفظها في Logs.

- حفظها في Cookies.

- طباعتها في Console.

- إرسالها إلى Telegram.

- إرسالها إلى أي طرف ثالث.

إذا كان التحقق من الحساب غير ممكن، لا تدّعي أن الحساب تم التحقق منه؛ اعرض رسالة واضحة للعميل.

━━━━━━━━━━━━━━━━━━━━

👤 سادسًا: لوحة العميل

━━━━━━━━━━━━━━━━━━━━

بعد التحقق من اسم المستخدم، تظهر Dashboard:

مرحبًا بك 👋

ثم:

اسم الحساب: [اسم الحساب إذا توفر عبر API]

Username: @[username]

ويظهر Avatar إذا كان متاحًا من مصدر رسمي ومسموح استخدامه.

ثم الخدمات على شكل Cards:

👥 المتابعين

👁️ مشاهدات

🔗 المشاركات

💬 التعليقات

أريد كل Card فيها:

- Icon.

- اسم الخدمة.

- وصف.

- الحد الأدنى.

- الحد الأقصى.

- السعر إذا كان مربوطًا بالنظام.

- زر "اختيار الخدمة".

━━━━━━━━━━━━━━━━━━━━

👥 سابعًا: خدمة المتابعين

━━━━━━━━━━━━━━━━━━━━

عند الضغط على:

المتابعين

تفتح صفحة:

خدمة المتابعين

حقل:

اسم المستخدم

وحقل:

الكمية المطلوبة

مثال:

اكتب عدد المتابعين المطلوب

يجب أن تكون الكمية مقيدة بالحد الأقصى الذي يحدده الـ Backend/API.

لا تجعل الحد الأقصى رقمًا ثابتًا داخل الواجهة فقط.

الـ Backend هو الذي يحدد:

Minimum

Maximum

Price

Availability

حتى لا يستطيع العميل تجاوز الحدود عن طريق تعديل JavaScript.

بعد إدخال الكمية:

زر:

متابعة

ثم تظهر صفحة مراجعة:

مراجعة الطلب

اسم الحساب:

@[username]

الخدمة:

متابعين

الكمية:

1000

السعر:

...

المدة المتوقعة:

...

ثم تنبيه حقيقي حسب شروط الخدمة.

مثال:

⚠️ يرجى التأكد من أن الحساب عام إذا كانت الخدمة تتطلب ذلك.

ثم:

تأكيد الطلب

━━━━━━━━━━━━━━━━━━━━

👁️ ثامنًا: خدمة المشاهدات

━━━━━━━━━━━━━━━━━━━━

عند الضغط على:

مشاهدات

تظهر:

مشاهدات الفيديو

الحقل الأول:

رابط الفيديو

ثم زر:

متابعة

بعد إدخال الرابط والتحقق من صيغته، تظهر:

الكمية المطلوبة

والحد الأقصى يتم جلبه من السيرفر.

مثال:

Minimum: 100

Maximum: 100000

ولا تسمح الواجهة أو الـ Backend بإرسال كمية خارج الحدود.

ثم:

مراجعة الطلب

الخدمة:

مشاهدات

رابط الفيديو:

...

الكمية:

...

السعر:

...

المدة:

...

زر:

تأكيد الطلب

━━━━━━━━━━━━━━━━━━━━

🔗 تاسعًا: المشاركات

━━━━━━━━━━━━━━━━━━━━

نفس النظام:

رابط الفيديو/المنشور

ثم:

الكمية المطلوبة

ثم التحقق من:

- الرابط.

- الخدمة.

- الحد الأدنى.

- الحد الأقصى.

- السعر.

- توفر الخدمة.

ثم:

مراجعة الطلب

ثم:

تأكيد الطلب.

━━━━━━━━━━━━━━━━━━━━

💬 عاشرًا: التعليقات

━━━━━━━━━━━━━━━━━━━━

صفحة التعليقات:

رابط المنشور/الفيديو

الكمية

وإذا كان نظام التعليقات يحتاج نص تعليق، اجعل ذلك واضحًا وفق الخدمة الفعلية، ولا تنشئ تعليقات مزيفة على أنها آراء حقيقية.

إذا كانت الخدمة غير متوفرة، يجب أن يظهر:

الخدمة غير متاحة حاليًا.

ولا يتم إنشاء Order وهمي.

━━━━━━━━━━━━━━━━━━━━

🧾 الحادي عشر: إنشاء الطلب

━━━━━━━━━━━━━━━━━━━━

بعد التأكيد يتم إنشاء Order حقيقي من الـ Backend.

كل طلب يجب أن يحصل على:

Order ID فريد.

مثال:

LUF-20260901-8F42K

ولا يجوز تكرار Order ID.

أيضًا:

Service ID

يكون مختلفًا حسب الخدمة.

مثال:

FOLLOWERS-01

VIEWS-01

SHARES-01

COMMENTS-01

لكن الأفضل أن تكون IDs مُدارة من قاعدة البيانات وليس مكتوبة يدويًا فقط.

بعد إنشاء الطلب تظهر فاتورة جميلة:

━━━━━━━━━━━━━━

تم تسجيل الطلب بنجاح ✅

━━━━━━━━━━━━━━

رقم الطلب:

LUF-XXXXXXXX

الخدمة:

متابعين

الكمية:

1000

اسم الحساب:

...

Username:

@...

رابط المحتوى:

...

وقت إنشاء الطلب:

01/09/2026 - 03:50

الحالة:

⏳ قيد التنفيذ

المدة المتوقعة:

حسب الخدمة الفعلية

ثم:

تم تسجيل طلبك بنجاح.

يمكنك متابعة حالة طلبك من خلال "طلباتي".

━━━━━━━━━━━━━━━━━━━━

📋 الثاني عشر: طلباتي

━━━━━━━━━━━━━━━━━━━━

أريد زر واضح في Dashboard:

🛒 طلباتي

عند الضغط عليه تظهر جميع طلبات العميل.

كل Order في Card منفصلة:

Order ID

الخدمة

الكمية

التاريخ

الوقت

السعر

الحالة

الحالات:

⏳ قيد التنفيذ

أو:

✅ تم الاكتمال بنجاح

أو:

⚠️ يحتاج مراجعة

أو:

❌ فشل الطلب

أو:

↩️ تم الاسترجاع

ولا تجعل حالة الطلب تتغير من Frontend فقط.

الحالة يجب أن تأتي من Backend.

━━━━━━━━━━━━━━━━━━━━

🔄 الثالث عشر: تحديث حالة الطلب

━━━━━━━━━━━━━━━━━━━━

أريد النظام يدعم تحديث حالة الطلب من السيرفر.

يمكن استخدام:

- Polling

أو

- WebSocket

أو

- SSE

حسب أفضل خيار.

مثلاً إذا كان الطلب:

Processing

ثم اكتمل في الـ Backend:

Completed

يتغير تلقائيًا في Dashboard.

وعند الاكتمال تظهر:

✅ تم اكتمال الطلب بنجاح.

━━━━━━━━━━━━━━━━━━━━

⚙️ الرابع عشر: Backend وAPI

━━━━━━━━━━━━━━━━━━━━

هذه أهم نقطة.

لا أريد نظام Fake يعتمد على:

setTimeout()

ولا أريد:

"جاري التنفيذ..."

ثم Alert يقول تم التنفيذ بدون تنفيذ حقيقي.

إذا كانت هناك خدمات حقيقية، يجب ربطها بـ API موثوق ومسموح استخدامه.

الـ Backend مسؤول عن:

- Authentication الآمن.

- إنشاء الطلبات.

- التحقق من الخدمات.

- الأسعار.

- Limits.

- Order IDs.

- Service IDs.

- حالة الطلب.

- سجل الطلبات.

- الأخطاء.

- Rate limiting.

- Validation.

- حماية API keys.

- منع التلاعب بالأسعار.

- منع تجاوز الكميات.

أي API Key يجب ألا يظهر في JavaScript الخاص بالعميل.

━━━━━━━━━━━━━━━━━━━━

⚡ الخامس عشر: السرعة والأداء

━━━━━━━━━━━━━━━━━━━━

أريد الموقع سريع جدًا.

اهتم بـ:

- Lazy loading.

- ضغط الصور.

- تقليل JavaScript.

- تقليل CSS غير المستخدم.

- Cache مناسب.

- API requests محسنة.

- عدم إعادة تحميل الصفحة بدون سبب.

- Skeleton loading.

- Error states.

- Retry logic بشكل آمن.

- Timeout للطلبات.

- عدم إرسال Requests متكررة.

ولا تستخدم Animation ثقيلة تؤثر على FPS.

أريد التجربة تكون سريعة حتى على الهواتف المتوسطة والاتصال الضعيف.

━━━━━━━━━━━━━━━━━━━━

🛡️ السادس عشر: الأمان

━━━━━━━━━━━━━━━━━━━━

أريد الأمان أولوية أساسية:

- HTTPS عند النشر.

- حماية XSS.

- CSRF protection إذا كان النظام يستخدم Cookies.

- Rate limiting.

- Input validation.

- Server-side validation.

- حماية API endpoints.

- عدم كشف مفاتيح API.

- عدم تخزين كلمات مرور Instagram.

- عدم تسجيل بيانات حساسة في Logs.

- Sanitization.

- Security headers.

- حماية من الطلبات المتكررة.

- صلاحيات Admin منفصلة.

- Sessions آمنة.

- Cookies آمنة إذا تم استخدامها.

- عدم الوثوق بأي قيمة قادمة من Frontend.

وأريد Error messages للمستخدم تكون مفهومة، لكن بدون كشف معلومات داخلية عن السيرفر.

━━━━━━━━━━━━━━━━━━━━

📊 السابع عشر: الإحصائيات

━━━━━━━━━━━━━━━━━━━━

أريد قسم:

إحصائيات المنصة

مثل:

عدد الزوار هذا الشهر

عدد الطلبات هذا الشهر

الطلبات المكتملة

لكن إذا لم تكن هناك بيانات حقيقية، لا تعرض أرقامًا على أنها حقيقية.

في مرحلة Demo يمكن استخدام:

Demo Statistics

ويكون واضحًا أنها تجريبية.

بعد ربط قاعدة البيانات، يتم استبدالها بإحصائيات حقيقية.

━━━━━━━━━━━━━━━━━━━━

⭐ الثامن عشر: آراء العملاء

━━━━━━━━━━━━━━━━━━━━

أريد قسم Reviews احترافي.

لكن لا أريد إنشاء شهادات مزيفة على أنها آراء عملاء حقيقيين.

في Demo استخدم:

تقييمات تجريبية

أو اجعل النظام يسمح بإضافة Reviews حقيقية من لوحة الإدارة.

وعند وجود تقييمات حقيقية تظهر:

⭐ التقييم

اسم العميل إذا وافق

الخدمة

التاريخ

━━━━━━━━━━━━━━━━━━━━

🎛️ التاسع عشر: لوحة الإدارة

━━━━━━━━━━━━━━━━━━━━

أريد Admin Dashboard منفصلة.

من خلالها أستطيع:

- رؤية الطلبات.

- البحث عن Order ID.

- البحث عن Username.

- تغيير حالة الطلب إذا كان ذلك مسموحًا.

- رؤية الخدمات.

- تفعيل/تعطيل خدمة.

- تحديد Minimum.

- تحديد Maximum.

- تحديد السعر.

- رؤية الإحصائيات الحقيقية.

- رؤية الطلبات المكتملة.

- رؤية الطلبات الفاشلة.

- رؤية الطلبات قيد التنفيذ.

ولا تظهر لوحة الإدارة للعميل العادي.

━━━━━━━━━━━━━━━━━━━━

📱 العشرون: Responsive

━━━━━━━━━━━━━━━━━━━━

اختبر الموقع على:

Android

iPhone

Tablet

Desktop

وأريد:

- الأزرار كبيرة بما يكفي للمس.

- النصوص واضحة.

- Cards لا تخرج عن الشاشة.

- Modal مناسب للهاتف.

- Navbar متجاوب.

- RTL يعمل بشكل صحيح.

- لا يوجد Horizontal Scroll.

━━━━━━━━━━━━━━━━━━━━

✨ الحادي والعشرون: التفاصيل البصرية

━━━━━━━━━━━━━━━━━━━━

أريد إضافة:

- Page transitions.

- Toast notifications.

- Loading spinner.

- Skeleton cards.

- Animated counters للإحصائيات الحقيقية.

- Glow خفيف.

- Hover effects.

- Modal جميل لمنصات التواصل.

- Confirmation modal قبل إنشاء الطلب.

- Success animation بعد إنشاء Order.

- Copy Order ID button.

- زر العودة.

- Breadcrumbs إذا كانت مناسبة.

- Empty state لصفحة طلباتي.

- Error state.

- Offline state إذا انقطع الإنترنت.

━━━━━━━━━━━━━━━━━━━━

🔊 الثاني والعشرون: الأصوات

━━━━━━━━━━━━━━━━━━━━

إذا أضفت أصواتًا، اجعلها اختيارية تمامًا.

لا تشغل صوتًا تلقائيًا بدون تفاعل المستخدم.

يمكن إضافة صوت خفيف عند:

- نجاح الطلب.

- ظهور إشعار.

- اكتمال الطلب.

مع زر:

🔊 الصوت

لتشغيل/إيقاف المؤثرات.

━━━━━━━━━━━━━━━━━━━━

🧩 الثالث والعشرون: تجربة المستخدم

━━━━━━━━━━━━━━━━━━━━

المسار المطلوب:

فتح الموقع

↓

اختيار اللغة

↓

صفحة الترحيب

↓

منصات التواصل الخاصة بنا عند الحاجة

↓

إدخال Username

↓

التحقق الآمن إذا كان متاحًا

↓

Dashboard

↓

اختيار الخدمة

↓

إدخال البيانات المطلوبة

↓

اختيار الكمية

↓

مراجعة الطلب

↓

تأكيد

↓

إنشاء Order حقيقي

↓

صفحة الفاتورة

↓

طلباتي

↓

متابعة الحالة

↓

اكتمال الطلب

━━━━━━━━━━━━━━━━━━━━

🚨 مهم جدًا

━━━━━━━━━━━━━━━━━━━━

لا أريد أي شيء شكلي فقط.

إذا كانت الخدمة غير مرتبطة بـ API فعلي، لا تعرض للعميل أن الطلب تم تنفيذه.

إذا تم إنشاء Order فقط ولم يبدأ التنفيذ، يجب أن تكون الحالة:

تم تسجيل الطلب — بانتظار التنفيذ

وإذا بدأ الـ API التنفيذ:

قيد التنفيذ

وإذا أكد الـ API النجاح:

تم الاكتمال بنجاح

وإذا فشل:

فشل الطلب

هذا مهم جدًا حتى تكون المنصة صادقة ولا توهم العميل بأن الخدمة نُفذت وهي لم تُنفذ.

━━━━━━━━━━━━━━━━━━━━

💰 الدفع

━━━━━━━━━━━━━━━━━━━━

أريد النظام قابلًا لإضافة بوابة دفع لاحقًا.

لذلك افصل:

Order

Payment

Service

عن بعضهم في Backend.

ولا تعتبر الطلب مدفوعًا بمجرد ضغط زر التأكيد.

يجب أن يكون هناك:

Payment Status

مثل:

Pending

Paid

Failed

Refunded

والطلب:

Pending

Processing

Completed

Failed

Cancelled

━━━━━━━━━━━━━━━━━━━━

🗂️ تنظيم المشروع

━━━━━━━━━━━━━━━━━━━━

لا تضع كل شيء في ملف HTML واحد.

أريد المشروع مرتبًا وقابلًا للصيانة، مثل:

Frontend

Backend

Components

Pages

Services

API

Database

Admin

Assets

Translations

واستخدم Environment Variables للأسرار.

مثلاً:

API_KEY

DATABASE_URL

SECRET_KEY

ولا تضع الأسرار داخل Frontend.

━━━━━━━━━━━━━━━━━━━━

🏁 النتيجة النهائية المطلوبة

━━━━━━━━━━━━━━━━━━━━

أريد LUFFY STORE v2.0 يظهر كمنصة احترافية جدًا:

سريعة

آمنة

Responsive

عربية + إنجليزية

واجهة Premium

نظام خدمات

نظام طلبات

Order IDs

Service IDs

صفحة طلباتي

حالات الطلبات

Dashboard

Admin Dashboard

إحصائيات حقيقية

Reviews حقيقية عند توفرها

API حقيقي عند توفره

Notifications

Loading states

Error handling

Security

وكل شيء قابل للتطوير لاحقًا.

وأهم شيء:

❌ لا تستخدم Fake execution.

❌ لا تجمع كلمات مرور Instagram.

❌ لا تخزن بيانات تسجيل الدخول.

❌ لا تضع API Keys في Frontend.

❌ لا تعرض أرقامًا أو تقييمات مزيفة على أنها حقيقية.

أريد المشروع النهائي نظيف، سريع، آمن، وقابل للنشر Production وليس مجرد Demo.