| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> |
| <title>لوحة التحكم — منصة محرك GEO</title> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/theme.css"> |
| <style> |
| .bg-mesh{position:fixed;inset:0;z-index:-2; |
| background:radial-gradient(circle at 10% 10%,rgba(59,130,246,.1) 0%,transparent 40%), |
| radial-gradient(circle at 90% 90%,rgba(251,191,36,.08) 0%,transparent 40%), |
| radial-gradient(circle at 50% 50%,rgba(239,68,68,.05) 0%,transparent 60%); |
| filter:blur(80px);animation:mesh 20s infinite alternate ease-in-out} |
| @keyframes mesh{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.1) translate(2%,2%)}} |
| .bg-grid{position:fixed;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;opacity:.5} |
| |
| .services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:32px 0} |
| .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);z-index:2000;align-items:center;justify-content:center} |
| .modal.show{display:flex} |
| .modal-content{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:40px;max-width:900px;width:90%;max-height:90vh;overflow-y:auto} |
| .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px} |
| .modal-title{font-size:24px;font-weight:800;color:var(--text)} |
| .close-btn{width:32px;height:32px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:.2s} |
| .close-btn:hover{background:var(--bg-elevated);color:var(--text)} |
| .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px} |
| .price-card{background:var(--bg-card);border:2px solid var(--border);border-radius:16px;padding:32px;text-align:center;transition:.2s;position:relative} |
| .price-card:hover{border-color:var(--primary);transform:translateY(-4px)} |
| .price-card.featured{border-color:var(--primary);background:linear-gradient(135deg,rgba(79,70,229,.05),rgba(99,102,241,.02))} |
| .price-card.featured::before{content:'⭐ الأكثر شعبية';position:absolute;top:-12px;right:50%;transform:translateX(50%);background:var(--primary);color:#fff;padding:4px 16px;border-radius:20px;font-size:12px;font-weight:700} |
| .price-name{font-size:20px;font-weight:700;margin-bottom:12px;color:var(--text)} |
| .price-amount{font-size:40px;font-weight:800;color:var(--primary);margin-bottom:4px} |
| .price-period{font-size:13px;color:var(--text-muted);margin-bottom:24px} |
| .price-features{text-align:right;margin-bottom:24px;list-style:none} |
| .price-features li{padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;display:flex;align-items:center;gap:8px} |
| .price-features li:last-child{border:none} |
| </style> |
| </head> |
| <body> |
| <div class="bg-mesh"></div> |
| <div class="bg-grid"></div> |
| |
| <nav> |
| <div class="nav-inner"> |
| <div class="logo"> |
| <div class="logo-icon">⚡</div> |
| محرك GEO |
| </div> |
| <div class="nav-links"> |
| <button class="btn btn-secondary btn-sm" onclick="showPricing()">💳 الأسعار</button> |
| <button class="btn btn-secondary btn-sm" onclick="logout()">خروج</button> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="wrap"> |
| <section class="hero" style="text-align:center;padding:80px 0 40px;position:relative"> |
| <div style="position:absolute;top:20px;left:15%;width:20px;height:20px;background:#3b82f6;border-radius:50%;box-shadow:0 0 30px #3b82f6;animation:mesh 5s infinite alternate;opacity:0.6"></div> |
| <div style="position:absolute;top:40px;right:20%;width:15px;height:15px;background:#fbbf24;border-radius:50%;box-shadow:0 0 30px #fbbf24;animation:mesh 6s infinite alternate;opacity:0.6"></div> |
| <h1 class="hero-title" style="font-size:clamp(40px,6vw,64px);font-weight:900;background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px">لوحة التحكم الذكية</h1> |
| <p class="hero-subtitle" style="font-size:20px;color:var(--text-muted);max-width:700px;margin:0 auto 40px">تحليل شامل لموقعك مع بيانات حقيقية وتوصيات مدعومة بالذكاء الاصطناعي</p> |
| </section> |
|
|
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-value" id="totalJobs">0</div> |
| <div class="stat-label">إجمالي التحليلات</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value" id="avgScore">--</div> |
| <div class="stat-label">متوسط درجة GEO</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value" id="totalKeywords">0</div> |
| <div class="stat-label">الكلمات المفتاحية</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value" id="planName">مجاني</div> |
| <div class="stat-label">الخطة الحالية</div> |
| </div> |
| </div> |
|
|
| <div class="input-box"> |
| <div style="font-size:18px;font-weight:700;margin-bottom:16px;color:var(--text)">🔗 تحليل موقع جديد</div> |
| <div class="input-row"> |
| <input type="url" id="urlInput" placeholder="https://example.com"/> |
| <input type="text" id="orgName" placeholder="اسم الشركة"/> |
| <button class="btn" onclick="startAnalysis()" style="background:var(--accent-grad);color:#fff;border:none;font-weight:700;border-radius:10px;padding:12px 32px;box-shadow:0 8px 24px rgba(59,130,246,0.3);transition:0.3s">تحليل الآن</button> |
| </div> |
| <div class="msg" id="urlMsg">أدخل رابط موقعك للحصول على تحليل شامل</div> |
| </div> |
|
|
| <h2 class="section-title">الخدمات المتاحة</h2> |
| <div class="services-grid" id="servicesGrid"></div> |
|
|
| <h2 class="section-title">التحليلات السابقة</h2> |
| <div class="grid-3" id="jobsGrid"></div> |
| </div> |
|
|
| <div class="modal" id="pricingModal"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <h2 class="modal-title">خطط الأسعار</h2> |
| <button class="close-btn" onclick="closePricing()">×</button> |
| </div> |
| <div class="pricing-grid"> |
| <div class="price-card"> |
| <div class="price-name">مجاني</div> |
| <div class="price-amount">$0</div> |
| <div class="price-period">شهرياً</div> |
| <ul class="price-features"> |
| <li>✓ 3 تحليلات شهرياً</li> |
| <li>✓ تقرير GEO أساسي</li> |
| <li>✓ 10 كلمات مفتاحية</li> |
| <li style="opacity:0.5">✗ تحليل المنافسين</li> |
| </ul> |
| <button class="btn btn-secondary" style="width:100%">الخطة الحالية</button> |
| </div> |
| <div class="price-card featured"> |
| <div class="price-name">احترافي</div> |
| <div class="price-amount">$49</div> |
| <div class="price-period">شهرياً</div> |
| <ul class="price-features"> |
| <li>✓ تحليلات غير محدودة</li> |
| <li>✓ تقارير متقدمة</li> |
| <li>✓ كلمات مفتاحية غير محدودة</li> |
| <li>✓ تحليل المنافسين</li> |
| <li>✓ توصيات AI</li> |
| </ul> |
| <button class="btn btn-accent" style="width:100%" onclick="upgradePlan('pro')">ترقية الآن</button> |
| </div> |
| <div class="price-card"> |
| <div class="price-name">مؤسسات</div> |
| <div class="price-amount">$199</div> |
| <div class="price-period">شهرياً</div> |
| <ul class="price-features"> |
| <li>✓ كل مميزات الاحترافي</li> |
| <li>✓ API مخصص</li> |
| <li>✓ دعم أولوية</li> |
| <li>✓ تقارير مخصصة</li> |
| <li>✓ فريق متعدد</li> |
| </ul> |
| <button class="btn btn-primary" style="width:100%" onclick="upgradePlan('enterprise')">تواصل معنا</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const API='/api'; |
| const token=localStorage.getItem('token'); |
| if(!token)window.location.href='/login.html'; |
| |
| const services=[ |
| {icon:'🔍',title:'تحليل شامل',desc:'زحف عميق وتحليل كامل للموقع',endpoint:'/jobs'}, |
| {icon:'🔑',title:'الكلمات المفتاحية',desc:'استخراج وتحليل الكلمات الذهبية',endpoint:'/keywords'}, |
| {icon:'✨',title:'المحتوى الذكي',desc:'توليد محتوى احترافي بالAI',endpoint:'/content'}, |
| {icon:'💡',title:'التوصيات',desc:'نصائح مخصصة لتحسين الظهور',endpoint:'/recommendations'}, |
| {icon:'⭐',title:'درجة GEO',desc:'قياس ظهورك في محركات AI',endpoint:'/analyze'}, |
| {icon:'📊',title:'إدارة الإعلانات',desc:'تتبع وتحسين الحملات الإعلانية',endpoint:'/ads'}, |
| {icon:'👥',title:'محلل المنافسين',desc:'اكتشف منافسيك الحقيقيين',endpoint:'/competitor-intel'}, |
| {icon:'🚀',title:'أفعال النمو',desc:'أفعال سريعة وتنفيذ ذكي',endpoint:'/actions'} |
| ]; |
| |
| async function loadDashboard(){ |
| try{ |
| const res=await fetch(`${API}/jobs`,{headers:{Authorization:`Bearer ${token}`}}); |
| const data=await res.json(); |
| if(data.ok){ |
| const jobs=data.jobs||[]; |
| document.getElementById('totalJobs').textContent=jobs.length; |
| |
| const completed=jobs.filter(j=>j.status==='completed'); |
| if(completed.length>0){ |
| const scores=await Promise.all(completed.slice(0,10).map(async j=>{ |
| try{ |
| const r=await fetch(`${API}/jobs/${j.id}/results`); |
| const d=await r.json(); |
| return d.analysis?.geo_score?.score||0; |
| }catch{return 0} |
| })); |
| const avg=scores.reduce((a,b)=>a+b,0)/scores.length; |
| document.getElementById('avgScore').textContent=Math.round(avg); |
| } |
| |
| renderJobs(jobs.slice(0,6)); |
| } |
| }catch(e){ |
| console.error('Load error:',e); |
| } |
| } |
| |
| function renderServices(){ |
| const grid=document.getElementById('servicesGrid'); |
| grid.innerHTML=services.map(s=>` |
| <div class="card" style="cursor:pointer" onclick="window.location.href='${s.endpoint}.html'"> |
| <div class="card-icon">${s.icon}</div> |
| <div class="card-title">${s.title}</div> |
| <div class="card-desc">${s.desc}</div> |
| <span class="badge badge-success">متاح</span> |
| </div> |
| `).join(''); |
| } |
| |
| function renderJobs(jobs){ |
| const grid=document.getElementById('jobsGrid'); |
| if(!jobs.length){ |
| grid.innerHTML='<div class="card"><p style="text-align:center;color:var(--text-muted)">لا توجد تحليلات سابقة</p></div>'; |
| return; |
| } |
| grid.innerHTML=jobs.map(j=>` |
| <div class="card"> |
| <span class="badge ${j.status==='completed'?'badge-success':'badge-warning'}">${j.status==='completed'?'مكتمل':'جاري'}</span> |
| <div class="card-title" style="margin-top:12px">${j.org_name||'تحليل'}</div> |
| <div class="card-desc">${j.url}</div> |
| <div style="font-size:12px;color:var(--text-dim);margin-bottom:16px">${new Date(j.created_at).toLocaleDateString('ar')}</div> |
| <button class="btn btn-secondary" style="width:100%" onclick="viewJob(${j.id})">عرض النتائج</button> |
| </div> |
| `).join(''); |
| } |
| |
| async function startAnalysis(){ |
| const url=document.getElementById('urlInput').value; |
| const org=document.getElementById('orgName').value; |
| const msgEl=document.getElementById('urlMsg'); |
| if(!url){ |
| msgEl.textContent='⚠️ أدخل رابط الموقع'; |
| msgEl.className='msg msg-error'; |
| return; |
| } |
| msgEl.textContent='🔄 جاري التحليل...'; |
| msgEl.className='msg'; |
| try{ |
| const res=await fetch(`${API}/jobs`,{ |
| method:'POST', |
| headers:{'Content-Type':'application/json',Authorization:`Bearer ${token}`}, |
| body:JSON.stringify({url,org_name:org||'Company',org_url:url,max_pages:5,runs:1}) |
| }); |
| const data=await res.json(); |
| if(data.ok){ |
| msgEl.textContent='✅ تم بدء التحليل!'; |
| msgEl.className='msg msg-success'; |
| setTimeout(()=>window.location.href=`/jobs.html?job=${data.job_id}`,1500); |
| }else{ |
| msgEl.textContent='❌ '+data.error; |
| msgEl.className='msg msg-error'; |
| } |
| }catch(e){ |
| msgEl.textContent='❌ خطأ في الاتصال'; |
| msgEl.className='msg msg-error'; |
| } |
| } |
| |
| function viewJob(id){window.location.href=`/jobs.html?job=${id}`} |
| function showPricing(){document.getElementById('pricingModal').classList.add('show')} |
| function closePricing(){document.getElementById('pricingModal').classList.remove('show')} |
| function upgradePlan(plan){alert(`سيتم تفعيل خطة ${plan} قريباً!`)} |
| function logout(){localStorage.clear();window.location.href='/'} |
| |
| renderServices(); |
| loadDashboard(); |
| </script> |
| </body> |
| </html> |
|
|
