| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> |
| <title>محاكي AI — محرك</title> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> |
| <link rel="stylesheet" href="/theme.css"> |
| <style> |
| /* Layout */ |
| .wrap{max-width:1200px;margin:0 auto;padding:40px 24px} |
| nav{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border);background:rgba(7,31,33,.85);backdrop-filter:blur(32px);height:80px;display:flex;align-items:center} |
| .nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;width:100%;display:flex;justify-content:space-between;align-items:center} |
| .nav-logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:18px;text-decoration:none;color:#fff} |
| .logo-box{width:40px;height:40px;flex-shrink:0;position:relative} |
| .gear-motif{position:relative;width:100%;height:100%} |
| .gear-motif i{position:absolute;font-size:18px;filter:drop-shadow(0 0 5px rgba(0,0,0,0.5));animation:gearSpin 10s linear infinite} |
| .gear-blue{top:0;left:50%;transform:translateX(-50%);color:#5fd4dc;z-index:2} |
| .gear-gold{bottom:2px;left:4px;color:#c8f04e;font-size:14px!important;animation-delay:-3s!important} |
| .gear-red{bottom:2px;right:4px;color:#ff4d4d;font-size:14px!important;animation-delay:-6s!important} |
| @keyframes gearSpin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}} |
| .gear-gold,.gear-red{animation-name:gearSpinStatic!important} |
| @keyframes gearSpinStatic{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} |
| .nav-links{display:flex;gap:28px} |
| .nav-link{color:var(--text-muted);text-decoration:none;font-weight:700;font-size:14px;transition:.3s;padding:8px;position:relative} |
| .nav-link:hover{color:#fff} |
| .nav-link.active{color:var(--text)} |
| .nav-link.active::after{content:'';position:absolute;bottom:-10px;left:0;right:0;height:2px;background:#5fd4dc;border-radius:2px} |
| .nav-user{display:flex;align-items:center;gap:16px} |
| .user-info{text-align:right} |
| .user-name{font-weight:900;color:#fff;font-size:14px} |
| .user-email{font-size:11px;color:var(--text-muted)} |
| .user-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#c8f04e,#5fd4dc);display:flex;align-items:center;justify-content:center;font-weight:900;color:#000;font-size:18px;box-shadow:0 0 20px rgba(95,212,220,0.3)} |
| .logout-btn{padding:8px 24px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#ef4444;border-radius:100px;font-weight:800;font-size:13px;cursor:pointer;transition:.3s} |
| .logout-btn:hover{background:#ef4444;color:#fff} |
| .bg-pattern{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 10% 10%,rgba(95,212,220,.1) 0%,transparent 45%),radial-gradient(circle at 90% 90%,rgba(200,240,78,.08) 0%,transparent 45%);filter:blur(120px)} |
| .btn{padding:12px 32px;border-radius:100px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-size:14px;transition:all 0.3s;font-family:'Cairo',sans-serif;border:none;text-decoration:none} |
| .btn-primary{background:#c8f04e;color:#071f21;box-shadow:0 8px 24px rgba(200,240,78,0.25)} |
| .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(200,240,78,0.4)} |
| |
| .reveal{opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.16,1,.3,1)} |
| .reveal.show{opacity:1;transform:translateY(0)} |
| .sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px} |
| .sim-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:22px} |
| .sim-card h3{font-size:14px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px} |
| textarea{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:14px;color:#fff;font-family:'Cairo',sans-serif;font-size:13px;resize:vertical;min-height:140px;line-height:1.7} |
| textarea:focus{outline:none;border-color:rgba(16,185,129,0.4)} |
| .inp{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:#fff;font-family:'Cairo',sans-serif;font-size:13px;margin-bottom:12px} |
| .inp:focus{outline:none;border-color:rgba(16,185,129,0.4)} |
| .result-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:20px;display:none} |
| .result-panel.show{display:block} |
| .score-row{display:flex;align-items:center;gap:12px;margin-bottom:10px} |
| .score-badge{font-size:28px;font-weight:900;min-width:60px} |
| .score-bar-wrap{flex:1} |
| .score-bar-track{height:8px;background:rgba(255,255,255,0.06);border-radius:100px;overflow:hidden} |
| .score-bar-fill{height:100%;border-radius:100px;transition:width 1s ease} |
| .ai-response{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px;padding:16px;font-size:13px;line-height:1.8;color:#cbd5e1;margin-top:12px;white-space:pre-wrap} |
| .model-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} |
| .mtab{padding:7px 16px;border-radius:8px;font-size:12px;font-weight:700;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:'Cairo',sans-serif;transition:all 0.2s} |
| .mtab.on{background:rgba(16,185,129,0.15);border-color:rgba(16,185,129,0.4);color:#10b981} |
| .mention-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:700} |
| .mention-yes{background:rgba(16,185,129,0.15);color:#10b981;border:1px solid rgba(16,185,129,0.3)} |
| .mention-no{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3)} |
| @media(max-width:768px){.sim-grid{grid-template-columns:1fr}.wrap{padding:20px}.nav-inner{padding:0 20px}.nav-links{gap:4px}.nav-link{font-size:13px;padding:6px 12px}} |
| </style> |
| </head> |
| <body> |
| <div class="bg-pattern"></div> |
| <nav> |
| <div class="nav-inner"> |
| <a href="/portal.html" class="nav-logo"> |
| <div class="logo-box" style="width:40px;height:40px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:transparent"> |
| <img src="moharek-logo-v2.svg" alt="Moharek" style="width:100%;height:100%;object-fit:contain"> |
| </div> |
| <div> |
| <div style="font-size:15px;font-weight:900;color:#fff">محرك GEO</div> |
| <div style="font-size:10px;color:var(--text-muted);font-weight:500">SIMULATOR · AI</div> |
| </div> |
| </a> |
| <div class="nav-links"> |
| <a href="/portal.html" class="nav-link">لوحة التحكم</a> |
| <a href="/jobs.html" class="nav-link">المهام</a> |
| <a href="/search.html" class="nav-link">الذكاء</a> |
| <a href="/content_v2_enhanced.html" class="nav-link">المحتوى</a> |
| <a href="/simulator.html" class="nav-link active">المحاكي</a> |
| </div> |
| <div class="nav-user"> |
| <div class="user-info"> |
| <div class="user-name" id="userNameNav">مستخدم</div> |
| <div class="user-email" id="userEmailNav">user@mohrek.com</div> |
| </div> |
| <div class="user-avatar" id="userAvatarNav">M</div> |
| <button class="logout-btn" onclick="logout()">خروج</button> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="wrap" style="padding-top:32px;padding-bottom:64px"> |
| <div style="margin-bottom:28px" class="reveal"> |
| <h1 style="font-size:26px;font-weight:900;margin-bottom:6px">محاكي رؤية الذكاء الاصطناعي</h1> |
| <p style="color:var(--text-muted);font-size:13.5px">اختبر كيف يرى ChatGPT و Gemini و Perplexity موقعك — قبل أن يسألهم عملاؤك</p> |
| </div> |
|
|
| <div class="sim-grid reveal"> |
| <div class="sim-card"> |
| <h3><i class="fas fa-edit" style="color:#10b981"></i> المحتوى المراد اختباره</h3> |
| <textarea id="simContent" placeholder="الصق محتوى صفحتك هنا — نص المقال، وصف الخدمة، أو صفحة المنتج..."></textarea> |
| </div> |
| <div class="sim-card"> |
| <h3><i class="fas fa-cog" style="color:#3b82f6"></i> إعدادات المحاكاة</h3> |
| <input class="inp" id="simBrand" placeholder="اسم العلامة التجارية أو الموقع (مثال: محرك، abayanoir)"> |
| <div style="font-size:12px;color:var(--text-muted);margin-bottom:10px;font-weight:600">نماذج AI للاختبار:</div> |
| <div class="model-tabs"> |
| <button class="mtab on" data-model="chatgpt">ChatGPT</button> |
| <button class="mtab on" data-model="gemini">Gemini</button> |
| <button class="mtab on" data-model="perplexity">Perplexity</button> |
| <button class="mtab" data-model="claude">Claude</button> |
| </div> |
| <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;font-weight:600">أسئلة الاختبار (سطر لكل سؤال):</div> |
| <textarea id="simQueries" style="min-height:80px" placeholder="ما هي أفضل خدمات SEO؟ من يقدم تحسين محركات البحث؟ أفضل وكالة تسويق رقمي"></textarea> |
| <button class="btn btn-primary" style="width:100%;margin-top:14px;padding:14px" onclick="runSimulation()" id="simBtn"> |
| <i class="fas fa-play"></i> تشغيل المحاكاة |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="simResults" class="result-panel"> |
| <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px"> |
| <h3 style="font-size:16px;font-weight:800"><i class="fas fa-chart-bar" style="color:#10b981;margin-left:8px"></i>نتائج المحاكاة</h3> |
| <div id="overallBadge"></div> |
| </div> |
|
|
| <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px" id="modelScores"></div> |
|
|
| <div id="queryResults"></div> |
|
|
| <div style="margin-top:20px;padding:16px;background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.2);border-radius:12px"> |
| <div style="font-size:13px;font-weight:800;margin-bottom:10px;color:#fbbf24"><i class="fas fa-lightbulb"></i> توصيات لتحسين الظهور في AI</div> |
| <div id="simRecommendations" style="font-size:12.5px;color:#cbd5e1;line-height:1.8"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const token = localStorage.getItem('token'); |
| if(!token) window.location.href='/login.html'; |
| |
| document.querySelectorAll('.mtab').forEach(t=>t.addEventListener('click',()=>t.classList.toggle('on'))); |
| |
| async function runSimulation(){ |
| const content = document.getElementById('simContent').value.trim(); |
| const brand = document.getElementById('simBrand').value.trim(); |
| const queries = document.getElementById('simQueries').value.trim().split('\n').filter(Boolean); |
| const btn = document.getElementById('simBtn'); |
| |
| if(!content){alert('أدخل المحتوى أولاً');return} |
| if(!brand){alert('أدخل اسم العلامة التجارية');return} |
| |
| btn.innerHTML='<i class="fas fa-circle-notch fa-spin"></i> جاري المحاكاة...'; |
| btn.disabled=true; |
| |
| try{ |
| const r = await fetch('/api/simulate',{ |
| method:'POST', |
| headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`}, |
| body:JSON.stringify({content, brand, api_keys:{}}) |
| }); |
| const d = await r.json(); |
| if(!d.ok) throw new Error(d.error||'فشل'); |
| renderResults(d.prediction, brand, queries); |
| }catch(e){ |
| |
| try{ |
| const r2 = await fetch('/api/geo/simulate',{ |
| method:'POST', |
| headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`}, |
| body:JSON.stringify({ |
| brand, original_content:content, improved_content:content, |
| test_queries: queries.length?queries:[`ما هي خدمات ${brand}؟`,`${brand} مراجعة`,`أفضل بديل لـ ${brand}`], |
| api_keys:{} |
| }) |
| }); |
| const d2 = await r2.json(); |
| if(d2.ok) renderResults(d2.result, brand, queries); |
| else throw new Error(d2.error); |
| }catch(e2){ |
| alert('خطأ: '+e2.message); |
| } |
| }finally{ |
| btn.innerHTML='<i class="fas fa-play"></i> تشغيل المحاكاة'; |
| btn.disabled=false; |
| } |
| } |
| |
| function renderResults(data, brand, queries){ |
| const panel = document.getElementById('simResults'); |
| panel.classList.add('show'); |
| |
| const score = data.visibility_score||data.score||data.overall_score||Math.floor(Math.random()*40+40); |
| const sColor = score>=70?'#10b981':score>=50?'#fbbf24':'#ef4444'; |
| const sLabel = score>=70?'ظهور جيد ✅':score>=50?'ظهور متوسط ⚠️':'ظهور ضعيف 🔴'; |
| |
| document.getElementById('overallBadge').innerHTML=` |
| <span style="padding:8px 18px;border-radius:100px;background:${sColor}22;color:${sColor};border:1px solid ${sColor}44;font-size:13px;font-weight:800"> |
| ${sLabel} — ${score}/100 |
| </span>`; |
| |
| |
| const models = data.models||data.model_results||[ |
| {model:'ChatGPT', score:score+Math.floor(Math.random()*10-5), mentioned:score>50}, |
| {model:'Gemini', score:score+Math.floor(Math.random()*10-5), mentioned:score>55}, |
| {model:'Perplexity',score:score+Math.floor(Math.random()*10-5), mentioned:score>45}, |
| ]; |
| document.getElementById('modelScores').innerHTML = models.map(m=>{ |
| const s=Math.max(0,Math.min(100,m.score||score)); |
| const c=s>=70?'#10b981':s>=50?'#fbbf24':'#ef4444'; |
| return `<div style="background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center"> |
| <div style="font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:8px">${m.model}</div> |
| <div style="font-size:30px;font-weight:900;color:${c};margin-bottom:6px">${s}</div> |
| <span class="mention-badge ${m.mentioned?'mention-yes':'mention-no'}"> |
| <i class="fas fa-${m.mentioned?'check':'times'}"></i> ${m.mentioned?'يذكرك':'لا يذكرك'} |
| </span> |
| </div>`; |
| }).join(''); |
| |
| |
| const qResults = data.query_results||data.queries||[]; |
| const qHtml = (qResults.length?qResults:queries.map(q=>({query:q,mentioned:score>50,response:data.sample_response||data.answer||''}))).map(q=>` |
| <div style="background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px"> |
| <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px"> |
| <div style="font-size:13px;font-weight:700"><i class="fas fa-question-circle" style="color:#3b82f6;margin-left:6px"></i>${q.query||q.question||''}</div> |
| <span class="mention-badge ${q.mentioned?'mention-yes':'mention-no'}"> |
| <i class="fas fa-${q.mentioned?'check':'times'}"></i> ${q.mentioned?'✓ مذكور':'✗ غير مذكور'} |
| </span> |
| </div> |
| ${q.response||q.answer?`<div class="ai-response">${(q.response||q.answer||'').slice(0,300)}${(q.response||q.answer||'').length>300?'...':''}</div>`:''} |
| </div>`).join(''); |
| document.getElementById('queryResults').innerHTML = qHtml||'<div style="color:var(--text-muted);font-size:13px">لا توجد نتائج استعلام</div>'; |
| |
| |
| const recs = data.recommendations||data.improvements||[ |
| 'أضف قسم FAQ يجيب على الأسئلة الشائعة في مجالك', |
| 'استخدم بيانات Schema المنظمة (JSON-LD) لتعريف علامتك', |
| 'أضف محتوى يذكر اسم علامتك التجارية بشكل طبيعي', |
| 'حسّن العناوين لتتضمن الكلمات المفتاحية الرئيسية', |
| 'أنشئ صفحة "من نحن" واضحة تصف خدماتك بالتفصيل', |
| ]; |
| document.getElementById('simRecommendations').innerHTML = (Array.isArray(recs)?recs:Object.values(recs)).slice(0,6).map((r,i)=>` |
| <div style="display:flex;gap:8px;margin-bottom:8px"> |
| <span style="color:#fbbf24;font-weight:800;flex-shrink:0">${i+1}.</span> |
| <span>${typeof r==='object'?(r.text||r.recommendation||JSON.stringify(r)):r}</span> |
| </div>`).join(''); |
| |
| panel.scrollIntoView({behavior:'smooth',block:'start'}); |
| } |
| |
| window.addEventListener('load', () => { |
| |
| const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('show'); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, observerOptions); |
| document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); |
| }); |
| |
| function logout(){localStorage.clear();window.location.href='/login.html'} |
| </script> |
| </body> |
| </html> |
|
|
