| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>مرحبا بك في منصة محرك GEO</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> |
| .reveal{opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.16,1,.3,1)} |
| .reveal.show{opacity:1;transform:translateY(0)} |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Cairo', sans-serif; |
| background: var(--bg); |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| color: var(--text); |
| } |
| |
| .wrap { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 20px; |
| width: 100%; |
| } |
| |
| |
| .tour-step { |
| display: none; |
| animation: fadeIn 0.5s ease-in; |
| } |
| |
| .tour-step.active { |
| display: block; |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| |
| .welcome-screen { |
| background: rgba(255, 255, 255, 0.03); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 24px; |
| padding: 60px 40px; |
| text-align: center; |
| backdrop-filter: blur(20px); |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); |
| } |
| |
| .welcome-screen h1 { |
| font-size: 2.5em; |
| color: #333; |
| margin-bottom: 20px; |
| } |
| |
| .welcome-screen p { |
| font-size: 1.1em; |
| color: #666; |
| margin-bottom: 40px; |
| line-height: 1.6; |
| } |
| |
| .welcome-emoji { |
| font-size: 4em; |
| margin-bottom: 20px; |
| } |
| |
| |
| .pricing-container { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 30px; |
| margin: 40px 0; |
| } |
| |
| .pricing-card { |
| background: white; |
| border-radius: 15px; |
| padding: 30px; |
| text-align: center; |
| transition: all 0.3s ease; |
| position: relative; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
| } |
| |
| .pricing-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); |
| } |
| |
| .pricing-card.popular { |
| border: 3px solid #3B82F6; |
| transform: scale(1.05); |
| } |
| |
| .pricing-card.popular::before { |
| content: 'الأكثر شهرة'; |
| position: absolute; |
| top: -15px; |
| right: 20px; |
| background: #3B82F6; |
| color: white; |
| padding: 5px 15px; |
| border-radius: 20px; |
| font-size: 0.9em; |
| font-weight: bold; |
| } |
| |
| .plan-name { |
| font-size: 1.5em; |
| font-weight: bold; |
| color: #333; |
| margin-bottom: 10px; |
| } |
| |
| .plan-price { |
| font-size: 2.5em; |
| font-weight: bold; |
| color: #667eea; |
| margin: 20px 0; |
| } |
| |
| .plan-description { |
| color: #666; |
| font-size: 0.95em; |
| margin-bottom: 25px; |
| min-height: 40px; |
| } |
| |
| .plan-features { |
| text-align: right; |
| margin: 25px 0; |
| list-style: none; |
| } |
| |
| .plan-features li { |
| padding: 8px 0; |
| color: #555; |
| font-size: 0.95em; |
| border-bottom: 1px solid #eee; |
| } |
| |
| .plan-features li:last-child { |
| border-bottom: none; |
| } |
| |
| .plan-cta { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| border: none; |
| padding: 12px 30px; |
| border-radius: 8px; |
| font-size: 1em; |
| font-weight: bold; |
| cursor: pointer; |
| margin-top: 20px; |
| transition: all 0.3s ease; |
| width: 100%; |
| } |
| |
| .plan-cta:hover { |
| transform: scale(1.05); |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4); |
| } |
| |
| |
| .tour-nav { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-top: 40px; |
| gap: 20px; |
| } |
| |
| .tour-progress { |
| display: flex; |
| gap: 8px; |
| justify-content: center; |
| flex: 1; |
| } |
| |
| .progress-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.3); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .progress-dot.active { |
| background: white; |
| width: 30px; |
| border-radius: 5px; |
| } |
| |
| .nav-button { |
| background: white; |
| color: #667eea; |
| border: none; |
| padding: 10px 25px; |
| border-radius: 8px; |
| font-weight: bold; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .nav-button:hover { |
| transform: scale(1.05); |
| } |
| |
| .nav-button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
| |
| |
| .feature-showcase { |
| background: white; |
| border-radius: 20px; |
| padding: 60px 40px; |
| margin: 30px 0; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| } |
| |
| .feature-showcase h2 { |
| font-size: 2em; |
| color: #333; |
| margin-bottom: 30px; |
| text-align: center; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 30px; |
| } |
| |
| .feature-item { |
| text-align: center; |
| } |
| |
| .feature-icon { |
| font-size: 3em; |
| margin-bottom: 15px; |
| } |
| |
| .feature-item h3 { |
| font-size: 1.2em; |
| color: #333; |
| margin-bottom: 10px; |
| } |
| |
| .feature-item p { |
| color: #666; |
| font-size: 0.95em; |
| line-height: 1.6; |
| } |
| |
| |
| .cta-section { |
| background: white; |
| border-radius: 20px; |
| padding: 40px; |
| text-align: center; |
| margin-top: 30px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| } |
| |
| .cta-section h2 { |
| font-size: 1.8em; |
| color: #333; |
| margin-bottom: 20px; |
| } |
| |
| .cta-section p { |
| color: #666; |
| font-size: 1.1em; |
| margin-bottom: 30px; |
| } |
| |
| .cta-buttons { |
| display: flex; |
| gap: 20px; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .cta-button { |
| padding: 15px 40px; |
| border-radius: 8px; |
| font-size: 1em; |
| font-weight: bold; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: none; |
| } |
| |
| .cta-button.primary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| } |
| |
| .cta-button.secondary { |
| background: white; |
| color: #667eea; |
| border: 2px solid #667eea; |
| } |
| |
| .cta-button:hover { |
| transform: scale(1.05); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .welcome-screen { |
| padding: 40px 20px; |
| } |
| |
| .welcome-screen h1 { |
| font-size: 1.8em; |
| } |
| |
| .pricing-card.popular { |
| transform: scale(1); |
| } |
| |
| .pricing-container { |
| grid-template-columns: 1fr; |
| } |
| |
| .tour-nav { |
| flex-direction: column; |
| } |
| |
| .nav-button { |
| width: 100%; |
| } |
| } |
| |
| |
| .loading { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| border: 3px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| border-top-color: white; |
| animation: spin 1s ease-in-out infinite; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| |
| .tooltip { |
| position: relative; |
| display: inline-block; |
| cursor: help; |
| } |
| |
| .tooltip .tooltiptext { |
| visibility: hidden; |
| width: 200px; |
| background-color: #333; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| right: -100px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| font-size: 0.85em; |
| } |
| |
| .tooltip:hover .tooltiptext { |
| visibility: visible; |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="wrap reveal"> |
| |
| <div class="tour-step active" id="step-welcome"> |
| <div class="welcome-screen"> |
| <div class="welcome-emoji">🚀</div> |
| <h1>مرحبا بك في منصة محرك GEO</h1> |
| <p>منصة متخصصة في تحسين محركات البحث بالذكاء الاصطناعي</p> |
| <p style="font-size: 0.95em; color: #999;">ابدأ رحلتك نحو تحسين ظهورك في نتائج البحث والذكاء الاصطناعي</p> |
| |
| <div class="tour-nav"> |
| <button class="nav-button" onclick="nextStep()" style="margin-right: auto;">التالي →</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tour-step" id="step-features"> |
| <div class="feature-showcase"> |
| <h2>✨ المميزات الرئيسية</h2> |
| <div class="features-grid"> |
| <div class="feature-item"> |
| <div class="feature-icon">🔍</div> |
| <h3>تحليل الموقع</h3> |
| <p>تحليل شامل لموقعك وتقييم أداؤه في نتائج البحث</p> |
| </div> |
| <div class="feature-item"> |
| <div class="feature-icon">🤖</div> |
| <h3>درجة GEO الذكية</h3> |
| <p>قياس ظهورك في نتائج البحث والذكاء الاصطناعي</p> |
| </div> |
| <div class="feature-item"> |
| <div class="feature-icon">📊</div> |
| <h3>تحليل المنافسين</h3> |
| <p>مقارنة موقعك مع منافسيك واكتشف الفرص</p> |
| </div> |
| <div class="feature-item"> |
| <div class="feature-icon">✍️</div> |
| <h3>توليد المحتوى</h3> |
| <p>إنشاء محتوى محسّن للبحث بمساعدة الذكاء الاصطناعي</p> |
| </div> |
| <div class="feature-item"> |
| <div class="feature-icon">📢</div> |
| <h3>إدارة الإعلانات</h3> |
| <p>إدارة حملات Google Ads بذكاء وكفاءة</p> |
| </div> |
| <div class="feature-item"> |
| <div class="feature-icon">📈</div> |
| <h3>التقارير المتقدمة</h3> |
| <p>تقارير تفصيلية وتوصيات قابلة للتنفيذ</p> |
| </div> |
| </div> |
|
|
| <div class="tour-nav"> |
| <button class="nav-button" onclick="prevStep()">← السابق</button> |
| <div class="tour-progress"> |
| <div class="progress-dot" onclick="goToStep(0)"></div> |
| <div class="progress-dot active" onclick="goToStep(1)"></div> |
| <div class="progress-dot" onclick="goToStep(2)"></div> |
| <div class="progress-dot" onclick="goToStep(3)"></div> |
| </div> |
| <button class="nav-button" onclick="nextStep()" style="margin-left: auto;">التالي →</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tour-step" id="step-pricing"> |
| <div class="feature-showcase"> |
| <h2>💰 اختر الخطة المناسبة لك</h2> |
| <div class="pricing-container" id="pricing-cards"> |
| |
| </div> |
|
|
| <div class="tour-nav"> |
| <button class="nav-button" onclick="prevStep()">← السابق</button> |
| <div class="tour-progress"> |
| <div class="progress-dot" onclick="goToStep(0)"></div> |
| <div class="progress-dot" onclick="goToStep(1)"></div> |
| <div class="progress-dot active" onclick="goToStep(2)"></div> |
| <div class="progress-dot" onclick="goToStep(3)"></div> |
| </div> |
| <button class="nav-button" onclick="nextStep()" style="margin-left: auto;">التالي →</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tour-step" id="step-getstarted"> |
| <div class="cta-section"> |
| <div class="welcome-emoji">🎉</div> |
| <h2>أنت جاهز للبدء!</h2> |
| <p>لديك محاولة واحدة مجانية لتجربة المنصة</p> |
| <p style="font-size: 0.95em; color: #999;">ابدأ بتحليل موقعك الآن واكتشف فرص التحسين</p> |
|
|
| <div class="cta-buttons"> |
| <button class="cta-button primary" onclick="startAnalysis()">ابدأ التحليل الآن</button> |
| <button class="cta-button secondary" onclick="skipTour()">تخطي الجولة</button> |
| </div> |
|
|
| <div class="tour-nav" style="margin-top: 40px;"> |
| <button class="nav-button" onclick="prevStep()">← السابق</button> |
| <div class="tour-progress"> |
| <div class="progress-dot" onclick="goToStep(0)"></div> |
| <div class="progress-dot" onclick="goToStep(1)"></div> |
| <div class="progress-dot" onclick="goToStep(2)"></div> |
| <div class="progress-dot active" onclick="goToStep(3)"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| let currentStep = 0; |
| const totalSteps = 4; |
| const token = localStorage.getItem('token'); |
| |
| |
| async function loadPricingPlans() { |
| try { |
| const response = await fetch('http://localhost:8001/api/pricing/plans'); |
| const data = await response.json(); |
| |
| if (data.ok) { |
| const container = document.getElementById('pricing-cards'); |
| container.innerHTML = ''; |
| |
| const plans = ['free', 'pro', 'agency', 'enterprise']; |
| plans.forEach(planKey => { |
| const plan = data.plans[planKey]; |
| const card = document.createElement('div'); |
| card.className = `pricing-card ${plan.popular ? 'popular' : ''}`; |
| |
| card.innerHTML = ` |
| <div class="plan-name">${plan.name}</div> |
| <div class="plan-price">${plan.price_display}</div> |
| <div class="plan-description">${plan.description}</div> |
| <ul class="plan-features"> |
| ${plan.features.map(f => `<li>${f}</li>`).join('')} |
| </ul> |
| <button class="plan-cta" onclick="selectPlan('${planKey}')">${plan.cta}</button> |
| `; |
| |
| container.appendChild(card); |
| }); |
| } |
| } catch (error) { |
| console.error('Error loading pricing:', error); |
| } |
| } |
| |
| |
| function nextStep() { |
| if (currentStep < totalSteps - 1) { |
| goToStep(currentStep + 1); |
| } |
| } |
| |
| function prevStep() { |
| if (currentStep > 0) { |
| goToStep(currentStep - 1); |
| } |
| } |
| |
| function goToStep(step) { |
| |
| document.querySelectorAll('.tour-step').forEach(el => { |
| el.classList.remove('active'); |
| }); |
| |
| |
| const stepId = ['step-welcome', 'step-features', 'step-pricing', 'step-getstarted'][step]; |
| document.getElementById(stepId).classList.add('active'); |
| |
| currentStep = step; |
| |
| |
| document.querySelectorAll('.progress-dot').forEach((dot, index) => { |
| dot.classList.toggle('active', index === step); |
| }); |
| |
| |
| if (token) { |
| fetch('http://localhost:8001/api/onboarding/tour/step', { |
| method: 'POST', |
| headers: { |
| 'Authorization': `Bearer ${token}`, |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ step }) |
| }).catch(e => console.error('Error updating tour step:', e)); |
| } |
| } |
| |
| function selectPlan(plan) { |
| if (plan === 'free') { |
| skipTour(); |
| } else { |
| |
| window.location.href = `/pricing.html?plan=${plan}`; |
| } |
| } |
| |
| function startAnalysis() { |
| completeTour(); |
| window.location.href = '/dashboard.html'; |
| } |
| |
| function skipTour() { |
| completeTour(); |
| window.location.href = '/dashboard.html'; |
| } |
| |
| function completeTour() { |
| if (token) { |
| fetch('http://localhost:8001/api/onboarding/tour/complete', { |
| method: 'POST', |
| headers: { |
| 'Authorization': `Bearer ${token}`, |
| 'Content-Type': 'application/json' |
| } |
| }).catch(e => console.error('Error completing tour:', e)); |
| |
| fetch('http://localhost:8001/api/onboarding/pricing/shown', { |
| method: 'POST', |
| headers: { |
| 'Authorization': `Bearer ${token}`, |
| 'Content-Type': 'application/json' |
| } |
| }).catch(e => console.error('Error marking pricing shown:', e)); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| loadPricingPlans(); |
| goToStep(0); |
| }); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'ArrowRight') nextStep(); |
| if (e.key === 'ArrowLeft') prevStep(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
