Spaces:
Running
Running
Download index.html from Ztronics/anycoder-aecb8cb2: direct link, hf CLI and curl.
- Browser
- Download file 44 kB
-
https://huggingface.co/spaces/Ztronics/anycoder-aecb8cb2/resolve/main/index.html
- Command line
-
hf download hf://spaces/Ztronics/anycoder-aecb8cb2/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Ztronics/anycoder-aecb8cb2/resolve/main/index.html
44 kB
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nasher AI | ناشر - منصة النشر الذكية</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1e3a8a', | |
| secondary: '#065f46', | |
| accent: '#10b981', | |
| dark: '#0f172a', | |
| light: '#f8fafc' | |
| }, | |
| fontFamily: { | |
| sans: ['Tajawal', 'system-ui', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| * { font-family: 'Tajawal', sans-serif; } | |
| .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #065f46 100%); } | |
| .glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); } | |
| .card-hover { transition: all 0.3s ease; } | |
| .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); } | |
| .progress-ring { transform: rotate(-90deg); } | |
| .fade-in { animation: fadeIn 0.5s ease-in; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } | |
| .slide-in { animation: slideIn 0.3s ease-out; } | |
| @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } | |
| .pulse-glow { animation: pulseGlow 2s infinite; } | |
| @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px #10b981; } 50% { box-shadow: 0 0 20px #10b981, 0 0 30px #10b981; } } | |
| .typing::after { content: '|'; animation: blink 1s infinite; } | |
| @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } | |
| .platform-card { transition: all 0.3s ease; border: 2px solid transparent; } | |
| .platform-card.selected { border-color: #10b981; background: rgba(16, 185, 129, 0.1); } | |
| .sidebar-item { transition: all 0.2s ease; } | |
| .sidebar-item:hover, .sidebar-item.active { background: rgba(16, 185, 129, 0.15); color: #10b981; border-right: 3px solid #10b981; } | |
| .step-active { background: #10b981; color: white; } | |
| .step-completed { background: #065f46; color: white; } | |
| .step-pending { background: #e2e8f0; color: #64748b; } | |
| .ai-thinking { background: linear-gradient(90deg, #1e3a8a, #065f46, #1e3a8a); background-size: 200% 100%; animation: shimmer 2s infinite; } | |
| @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800 overflow-x-hidden"> | |
| <!-- Landing Page --> | |
| <div id="landingPage" class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 glass border-b border-white/10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-book-open text-white text-lg"></i> | |
| </div> | |
| <span class="text-2xl font-bold text-primary">ناشر <span class="text-accent">AI</span></span> | |
| </div> | |
| <div class="hidden md:flex items-center gap-8"> | |
| <a href="#features" class="text-slate-600 hover:text-primary transition">المميزات</a> | |
| <a href="#platforms" class="text-slate-600 hover:text-primary transition">المنصات</a> | |
| <a href="#pricing" class="text-slate-600 hover:text-primary transition">الأسعار</a> | |
| <a href="#academy" class="text-slate-600 hover:text-primary transition">الأكاديمية</a> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-500 hover:text-accent transition hidden sm:block"> | |
| Built with <span class="font-semibold">anycoder</span> | |
| </a> | |
| <button onclick="showOnboarding()" class="gradient-bg text-white px-6 py-2.5 rounded-xl font-medium hover:shadow-lg hover:shadow-primary/30 transition"> | |
| ابدأ مجانًا | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative pt-32 pb-20 overflow-hidden"> | |
| <div class="absolute inset-0 gradient-bg opacity-5"></div> | |
| <div class="absolute top-20 left-10 w-72 h-72 bg-accent/20 rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="text-center max-w-4xl mx-auto"> | |
| <div class="inline-flex items-center gap-2 bg-accent/10 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-6"> | |
| <span class="w-2 h-2 bg-accent rounded-full pulse-glow"></span> | |
| منصة النشر العربية الأولى بالذكاء الاصطناعي | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold text-dark mb-6 leading-tight"> | |
| انشر كتابك الإلكتروني<br> | |
| <span class="gradient-bg bg-clip-text text-transparent">باحتراف… في دقائق</span> | |
| </h1> | |
| <p class="text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed"> | |
| <span id="typingText" class="typing"></span> يجهّز كتابك تلقائيًا للنشر على Amazon وGoogle Play ومنصات أخرى من مكان واحد | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button onclick="showOnboarding()" class="gradient-bg text-white px-8 py-4 rounded-2xl font-bold text-lg hover:shadow-2xl hover:shadow-primary/30 transition flex items-center justify-center gap-3"> | |
| <i class="fas fa-rocket"></i> | |
| ابدأ مجانًا | |
| </button> | |
| <button onclick="showDemo()" class="bg-white text-primary px-8 py-4 rounded-2xl font-bold text-lg border-2 border-primary/20 hover:border-primary hover:shadow-lg transition flex items-center justify-center gap-3"> | |
| <i class="fas fa-play-circle"></i> | |
| شاهد كيف يعمل | |
| </button> | |
| </div> | |
| <!-- Trust Badges --> | |
| <div class="mt-16 flex flex-wrap justify-center gap-8 opacity-60"> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-shield-check text-accent text-2xl"></i> | |
| <span class="text-sm">لا نحتفظ بملفات الكتب</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-check-circle text-accent text-2xl"></i> | |
| <span class="text-sm">متوافق مع سياسات النشر</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-lock text-accent text-2xl"></i> | |
| <span class="text-sm">تشفير كامل للبيانات</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Value Proposition --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">لماذا ناشر AI؟</h2> | |
| <p class="text-slate-600">كل ما تحتاجه لنشر كتابك بنجاح</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="card-hover bg-slate-50 p-6 rounded-2xl"> | |
| <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-database text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">إدخال البيانات مرة واحدة</h3> | |
| <p class="text-slate-600 text-sm">أدخل معلومات كتابك مرة واحدة ونشرها على جميع المنصات تلقائيًا</p> | |
| </div> | |
| <div class="card-hover bg-slate-50 p-6 rounded-2xl"> | |
| <div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">تخصيص ذكي لكل منصة</h3> | |
| <p class="text-slate-600 text-sm">الذكاء الاصطناعي يكيّف محتوى كتابك حتى متطلبات كل منصة نشر</p> | |
| </div> | |
| <div class="card-hover bg-slate-50 p-6 rounded-2xl"> | |
| <div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-clipboard-check text-accent text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">فحص سياسات النشر</h3> | |
| <p class="text-slate-600 text-sm">تحقق مسبق من الالتزام بسياسات كل منصة قبل التصدير</p> | |
| </div> | |
| <div class="card-hover bg-slate-50 p-6 rounded-2xl"> | |
| <div class="w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-orange-500 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">زيادة فرص القبول</h3> | |
| <p class="text-slate-600 text-sm">تحسينات مدروسة ترفع من فرص قبول كتابك وتحقيق المبيعات</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 bg-slate-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">كيف يعمل ناشر AI؟</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="relative"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold">1</div> | |
| <h3 class="font-bold text-xl mb-3">أدخل بيانات كتابك</h3> | |
| <p class="text-slate-600">اكتب عنوان الكتاب والوصف والمعلومات الأساسية في نموذج ذكي بسيط</p> | |
| </div> | |
| <div class="hidden md:block absolute top-1/2 -left-4 w-8 h-0.5 bg-accent"></div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold">2</div> | |
| <h3 class="font-bold text-xl mb-3">الذكاء الاصطناعي يحسّن</h3> | |
| <p class="text-slate-600">يقوم AI بتحسين الوصف، اقتراح الكلمات المفتاحية، وتخصيص المحتوى</p> | |
| </div> | |
| <div class="hidden md:block absolute top-1/2 -left-4 w-8 h-0.5 bg-accent"></div> | |
| </div> | |
| <div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold">3</div> | |
| <h3 class="font-bold text-xl mb-3">تصدير جاهز للنشر</h3> | |
| <p class="text-slate-600">احصل على ملفات جاهزة للرفع المباشر على كل منصة نشر</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Platforms --> | |
| <section id="platforms" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">المنصات المدعومة</h2> | |
| <p class="text-slate-600">انشر كتابك على أكثر من 15 منصة عالمية</p> | |
| </div> | |
| <!-- Platform Categories --> | |
| <div class="space-y-8"> | |
| <!-- Core Platforms --> | |
| <div> | |
| <h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2"> | |
| <i class="fas fa-star text-accent"></i> | |
| المنصات الأساسية | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fab fa-amazon text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Amazon KDP</p> | |
| <p class="text-xs text-slate-500">أكبر منصة نشر</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fab fa-google-play text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Google Play Books</p> | |
| <p class="text-xs text-slate-500">مليار مستخدم</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-gray-800 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fab fa-apple text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Apple Books</p> | |
| <p class="text-xs text-slate-500">أجهزة Apple</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-book text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Kobo Writing Life</p> | |
| <p class="text-xs text-slate-500">عالمية</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Direct Selling --> | |
| <div> | |
| <h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2"> | |
| <i class="fas fa-shopping-cart text-accent"></i> | |
| البيع المباشر | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-candy-cane text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Gumroad</p> | |
| <p class="text-xs text-slate-500">بيع سهل</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-credit-card text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Payhip</p> | |
| <p class="text-xs text-slate-500">بدون عمولة</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fab fa-shopify text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Shopify</p> | |
| <p class="text-xs text-slate-500">متجرك الخاص</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">SellNow</p> | |
| <p class="text-xs text-slate-500">سريع</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Educational --> | |
| <div> | |
| <h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2"> | |
| <i class="fas fa-graduation-cap text-accent"></i> | |
| المنصات التعليمية | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-gray-600 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-leanpub text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Leanpub</p> | |
| <p class="text-xs text-slate-500">للناشرين التقنيين</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-chalkboard-teacher text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Podia</p> | |
| <p class="text-xs text-slate-500">دورات وكتب</p> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-teal-500 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-graduation-cap text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-sm">Teachable</p> | |
| <p class="text-xs text-slate-500">تعليم إلكتروني</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="py-20 bg-slate-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">خطط الأسعار</h2> | |
| <p class="text-slate-600">اختر الخطة المناسبة لاحتياجاتك</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Free --> | |
| <div class="bg-white rounded-2xl p-8 shadow-lg"> | |
| <div class="text-center mb-6"> | |
| <h3 class="font-bold text-xl mb-2">مجاني</h3> | |
| <p class="text-4xl font-bold text-primary">$0</p> | |
| <p class="text-slate-500 text-sm">للتجربة</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كتاب واحد</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> منصتين فقط</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> تحسين أساسي</li> | |
| <li class="flex items-center gap-2 text-sm text-slate-400"><i class="fas fa-times"></i> بدون تصدير</li> | |
| </ul> | |
| <button onclick="showOnboarding()" class="w-full py-3 border-2 border-primary text-primary rounded-xl font-bold hover:bg-primary hover:text-white transition">ابدأ مجانًا</button> | |
| </div> | |
| <!-- Pro --> | |
| <div class="bg-white rounded-2xl p-8 shadow-2xl ring-2 ring-accent relative transform scale-105"> | |
| <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-accent text-white px-4 py-1 rounded-full text-sm font-bold">الأكثر شيوعاً</div> | |
| <div class="text-center mb-6"> | |
| <h3 class="font-bold text-xl mb-2">احترافي</h3> | |
| <p class="text-4xl font-bold text-primary">$19</p> | |
| <p class="text-slate-500 text-sm">شهرياً</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> حتى 5 كتب</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كل المنصات الأساسية</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> تصدير كامل</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> دعم بالبريد</li> | |
| </ul> | |
| <button onclick="showOnboarding()" class="w-full py-3 gradient-bg text-white rounded-xl font-bold hover:shadow-lg transition">اشترك الآن</button> | |
| </div> | |
| <!-- Publisher --> | |
| <div class="bg-white rounded-2xl p-8 shadow-lg"> | |
| <div class="text-center mb-6"> | |
| <h3 class="font-bold text-xl mb-2">ناشر</h3> | |
| <p class="text-4xl font-bold text-primary">$49</p> | |
| <p class="text-slate-500 text-sm">شهرياً</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كتب غير محدودة</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كل المنصات + Bulk Export</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> AI متقدم</li> | |
| <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> دعم أولوية 24/7</li> | |
| </ul> | |
| <button onclick="showOnboarding()" class="w-full py-3 border-2 border-primary text-primary rounded-xl font-bold hover:bg-primary hover:text-white transition">تواصل مع المبيعات</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-book-open text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold">ناشر AI</span> | |
| </div> | |
| <p class="text-slate-400 text-sm">منصة النشر العربية الذكية الأولى لمساعدة المؤلفين على النشر العالمي</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">المنتج</h4> | |
| <ul class="space-y-2 text-slate-400 text-sm"> | |
| <li><a href="#" class="hover:text-accent transition">المميزات</a></li> | |
| <li><a href="#" class="hover:text-accent transition">الأسعار</a></li> | |
| <li><a href="#" class="hover:text-accent transition">المنصات</a></li> | |
| <li><a href="#" class="hover:text-accent transition">التحديثات</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">الموارد</h4> | |
| <ul class="space-y-2 text-slate-400 text-sm"> | |
| <li><a href="#" class="hover:text-accent transition">الأكاديمية</a></li> | |
| <li><a href="#" class="hover:text-accent transition">المدونة</a></li> | |
| <li><a href="#" class="hover:text-accent transition">الدليل</a></li> | |
| <li><a href="#" class="hover:text-accent transition">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">الشركة</h4> | |
| <ul class="space-y-2 text-slate-400 text-sm"> | |
| <li><a href="#" class="hover:text-accent transition">من نحن</a></li> | |
| <li><a href="#" class="hover:text-accent transition">الشروط</a></li> | |
| <li><a href="#" class="hover:text-accent transition">الخصوصية</a></li> | |
| <li><a href="#" class="hover:text-accent transition">تواصل معنا</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-slate-400 text-sm">© 2025 ناشر AI. جميع الحقوق محفوظة</p> | |
| <div class="flex gap-4 mt-4 md:mt-0"> | |
| <a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Onboarding Modal --> | |
| <div id="onboardingModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeOnboarding()"></div> | |
| <div class="absolute inset-4 md:inset-10 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col"> | |
| <!-- Progress --> | |
| <div class="bg-slate-50 px-6 py-4 border-b flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-book-open text-white text-sm"></i> | |
| </div> | |
| <span class="font-bold">ناشر AI</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden"> | |
| <div id="onboardingProgress" class="h-full gradient-bg transition-all duration-300" style="width: 33%"></div> | |
| </div> | |
| <span id="stepIndicator" class="text-sm text-slate-500">1/3</span> | |
| </div> | |
| </div> | |
| <!-- Content --> | |
| <div id="onboardingContent" class="flex-1 overflow-auto p-6 md:p-10"> | |
| <!-- Step 1: Welcome --> | |
| <div id="step1" class="fade-in"> | |
| <div class="text-center max-w-2xl mx-auto"> | |
| <div class="w-24 h-24 gradient-bg rounded-3xl flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-hand-sparkles text-white text-4xl"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold mb-4">أهلاً بك في ناشر AI! 👋</h2> | |
| <p class="text-slate-600 mb-8 text-lg">نحن سعداء بانضمامك. دعنا نجهّز تجربتك ببضعة أسئلة سريعة</p> | |
| <button onclick="nextStep(2)" class="gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-lg transition"> | |
| لنبدأ <i class="fas fa-arrow-left mr-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2: User Type --> | |
| <div id="step2" class="hidden fade-in"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-2 text-center">ما هو هدفك الرئيسي؟</h2> | |
| <p class="text-slate-600 mb-8 text-center">سنخصص تجربتك بناءً على اختيارك</p> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <button onclick="selectUserType('author')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right"> | |
| <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-pen-fancy text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">مؤلف مستقل</h3> | |
| <p class="text-slate-600 text-sm">أكتب الكتب وأنشرها بنفسي</p> | |
| </button> | |
| <button onclick="selectUserType('creator')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right"> | |
| <div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-video text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">صانع محتوى / مدرّب</h3> | |
| <p class="text-slate-600 text-sm">أحوّل محتواي لكتب إلكترونية</p> | |
| </button> | |
| <button onclick="selectUserType('publisher')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right"> | |
| <div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-building text-accent text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">ناشر محترف</h3> | |
| <p class="text-slate-600 text-sm">أدير كتباً لعدة مؤلفين</p> | |
| </button> | |
| <button onclick="selectUserType('seller')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right"> | |
| <div class="w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i class="fas fa-store text-orange-500 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">بيع مباشر</h3> | |
| <p class="text-slate-600 text-sm">أبيع مباشرة لجمهوري</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Primary Platform --> | |
| <div id="step3" class="hidden fade-in"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-2 text-center">ما هي منصتك الأساسية؟</h2> | |
| <p class="text-slate-600 mb-8 text-center">سنرتب المنصات حسب أولويتك</p> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <button onclick="selectPlatform('amazon')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center"> | |
| <div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white"> | |
| <i class="fab fa-amazon text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold">Amazon KDP</h3> | |
| <p class="text-slate-500 text-sm">أكبر منصة</p> | |
| </button> | |
| <button onclick="selectPlatform('google')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white"> | |
| <i class="fab fa-google-play text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold">Google Play</h3> | |
| <p class="text-slate-500 text-sm">وصول عالمي</p> | |
| </button> | |
| <button onclick="selectPlatform('apple')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center"> | |
| <div class="w-16 h-16 bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white"> | |
| <i class="fab fa-apple text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold">Apple Books</h3> | |
| <p class="text-slate-500 text-sm">جودة عالية</p> | |
| </button> | |
| <button onclick="selectPlatform('gumroad')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center"> | |
| <div class="w-16 h-16 bg-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white"> | |
| <i class="fas fa-candy-cane text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold">Gumroad</h3> | |
| <p class="text-slate-500 text-sm">بيع مباشر</p> | |
| </button> | |
| <button onclick="selectPlatform('all')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mx-auto mb-4 text-white"> | |
| <i class="fas fa-globe text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold">جميع المنصات</h3> | |
| <p class="text-slate-500 text-sm">أنشر في كل مكان</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard --> | |
| <div id="dashboard" class="hidden min-h-screen bg-slate-50"> | |
| <!-- Sidebar --> | |
| <aside id="sidebar" class="fixed right-0 top-0 h-full w-64 bg-white shadow-xl z-40 transform transition-transform duration-300 translate-x-0"> | |
| <div class="p-6 border-b"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-book-open text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold text-primary">ناشر AI</span> | |
| </div> | |
| </div> | |
| <nav class="p-4 space-y-1"> | |
| <a href="#" onclick="showDashboardSection('home')" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-home w-5"></i> | |
| <span>لوحة التحكم</span> | |
| </a> | |
| <a href="#" onclick="showDashboardSection('books')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-book w-5"></i> | |
| <span>كتبي</span> | |
| </a> | |
| <a href="#" onclick="showAddBook()" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-accent"> | |
| <i class="fas fa-plus-circle w-5"></i> | |
| <span>إضافة كتاب</span> | |
| </a> | |
| <a href="#" onclick="showDashboardSection('ai')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-robot w-5"></i> | |
| <span>تحسين بالذكاء الاصطناعي</span> | |
| </a> | |
| <a href="#" onclick="showDashboardSection('platforms')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-layer-group w-5"></i> | |
| <span>المنصات</span> | |
| </a> | |
| <a href="#" onclick="showDashboardSection('export')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-file-export w-5"></i> | |
| <span>مركز التصدير</span> | |
| </a> | |
| <div class="border-t my-4"></div> | |
| <a href="#" onclick="showDashboardSection('academy')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-graduation-cap w-5"></i> | |
| <span>الأكاديمية</span> | |
| </a> | |
| <a href="#" onclick="showDashboardSection('support')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-headset w-5"></i> | |
| <span>الدعم والمساعدة</span> | |
| </a> | |
| <a href="#" onclick="showDashboardSection('settings')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl"> | |
| <i class="fas fa-cog w-5"></i> | |
| <span>الإعدادات</span> | |
| </a> | |
| </nav> | |
| <!-- User Profile --> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 border-t bg-slate-50"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h |