Spaces:

---

fsalmansour

/

fahadai

like 0

Running

أريد منك إنشاء واجهة ويب متكاملة لنظام FahadNeo AI - نظام ذكاء اصطناعي متعدد الوكلاء. ## المتطلبات الأساسية: 1. صفحة HTML واحدة تحتوي على كل شيء (Single Page Application) 2. تصميم عصري جداً باستخدام Glassmorphism و Neumorphism 3. Dark Mode كإعداد افتراضي مع زر للتبديل إلى Light Mode 4. دعم كامل للغة العربية (RTL) والإنجليزية (LTR) مع زر تبديل 5. Responsive Design يعمل على جميع الأجهزة (موبايل، تابلت، ديسكتوب) 6. يعمل مع Backend على http://localhost:5000 ## التقنيات المطلوبة: - HTML5 + CSS3 (inline في نفس الملف) - JavaScript ES6+ (inline في نفس الملف) - Tailwind CSS من CDN - Socket.io من CDN للاتصال المباشر - Lucide Icons من CDN - Chart.js من CDN للرسوم البيانية ## أقسام الواجهة المطلوبة: ### 1. Header (ثابت في الأعلى): - شعار "FahadNeo AI" مع أيقونة دماغ متحركة - مؤشر حالة الاتصال (أخضر = متصل، أحمر = غير متصل) - زر تبديل اللغة (عربي/English) - زر تبديل الثيم (Dark/Light) - زر الأوامر الصوتية مع مؤشر بصري عند التحدث - شريط بحث ذكي ### 2. Sidebar الأيسر (أو الأيمن في RTL): - قائمة بـ 9 Agents مع: - اسم الـ Agent - أيقونة مميزة لكل واحد - حالة (نشط/مشغول/متوقف) مع لون مختلف - عداد المهام المنجزة - زر لتشغيل/إيقاف - إمكانية سحب وإفلات لترتيب الـ Agents ### 3. المحتوى الرئيسي (وسط الصفحة): - Live Activity Feed: - آخر 50 نشاط مع تحديث فوري - أيقونة ملونة لكل نوع نشاط - وقت النشاط بالعربي - تأثير fade in عند إضافة نشاط جديد - Quick Stats Dashboard: - 6 بطاقات إحصائيات: - إجمالي المهام اليوم - معدل النجاح - الوقت الموفر - الرسائل المعالجة - الأكواد المكتوبة - المحتوى المنشأ - رسم بياني دائري للأداء - رسم بياني خطي للنشاط عبر الوقت ### 4. لوحة التحكم السفلية: - Command Input: - حقل إدخال كبير للأوامر - اقتراحات تلقائية أثناء الكتابة - تاريخ الأوامر (سهم لأعلى/أسفل) - Quick Actions: - 8 أزرار سريعة قابلة للتخصيص - أيقونات واضحة - Tooltip عند التمرير ### 5. النافذة الجانبية اليمنى (قابلة للإخفاء): - Unified Inbox: - كل الرسائل من جميع المنصات - فلترة حسب المصدر - بحث سريع - عدادات غير المقروء - Connected Devices: - الأجهزة المتصلة مع أيقونات - حالة كل جهاز - زر إضافة جهاز جديد ## الميزات التفاعلية المطلوبة: 1. **Animations:** - Loading spinner عند انتظار الرد - Pulse effect على الـ Agents النشطين - Smooth transitions عند التنقل - Parallax scrolling في الخلفية - Particle.js effect في الخلفية 2. **Real-time Updates:** - Socket.io connection للتحديثات الفورية - Auto-reconnect عند انقطاع الاتصال - Notification sound للأحداث المهمة - Browser notifications 3. **Voice Commands:** - Web Speech API للأوامر الصوتية - Visual feedback أثناء الاستماع - دعم العربية والإنجليزية - عرض النص المفهوم 4. **Drag & Drop:** - سحب الملفات للمعالجة - إعادة ترتيب الـ Agents - نقل المهام بين الـ Agents 5. **Keyboard Shortcuts:** - Ctrl/Cmd + K: فتح البحث السريع - Ctrl/Cmd + /: فتح الأوامر الصوتية - Ctrl/Cmd + 1-9: التنقل بين الـ Agents - Esc: إغلاق النوافذ المنبثقة ## التصميم والألوان: ### Dark Mode: - Background: gradient من #0a0a0a إلى #1a1a2e - Cards: rgba(255,255,255,0.05) مع backdrop-filter: blur(10px) - Text: #ffffff للرئيسي، #a0a0a0 للثانوي - Accent Colors: - Blue: #3b82f6 (Primary) - Purple: #8b5cf6 (Secondary) - Green: #10b981 (Success) - Yellow: #f59e0b (Warning) - Red: #ef4444 (Error) ### Light Mode: - Background: gradient من #f8f9fa إلى #e9ecef - Cards: rgba(0,0,0,0.03) مع box-shadow - Text: #1a1a1a للرئيسي، #6c757d للثانوي - نفس Accent Colors لكن أكثر إشراقاً ## كود JavaScript المطلوب: 1. Socket.io connection مع error handling 2. دالة لإرسال الأوامر للـ Agents 3. دالة لاستقبال وعرض النتائج 4. دالة للأوامر الصوتية 5. دالة لتحديث الإحصائيات 6. دالة لإدارة الثيم واللغة 7. LocalStorage للحفظ التفضيلات ## الـ Agents التسعة: 1. CodeMaster (أيقونة: code) - لون أخضر 2. MessageBot (أيقونة: message-circle) - لون أزرق 3. TradeMaster (أيقونة: trending-up) - لون أصفر 4. ContentCreator (أيقونة: palette) - لون بنفسجي 5. PublishPro (أيقونة: send) - لون وردي 6. BlogMaster (أيقونة: file-text) - لون نيلي 7. YouTubeGuru (أيقونة: video) - لون أحمر 8. EmailMaster (أيقونة: mail) - لون برتقالي 9. DesignPro (أيقونة: pen-tool) - لون سماوي ## متطلبات إضافية: - كل الكود في ملف HTML واحد - تعليقات بالعربية والإنجليزية - معالجة جميع الأخطاء المحتملة - Loading states لجميع العمليات - Empty states عند عدم وجود بيانات - Success/Error messages واضحة - يعمل offline مع cached data - PWA ready مع manifest الرجاء إنشاء هذا الملف كاملاً مع كل التفاصيل المذكورة. - Initial Deployment