Spaces:

Alinabil1
/

last_edit

Sleeping

File size: 23,971 Bytes

a74b879

<!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)}
    nav{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border);background:rgba(3,7,18,.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;text-decoration:none}
    .wrap{max-width:1200px;margin:0 auto;padding:40px 24px}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Cairo', sans-serif;
            background: #071f21;
            color: #ffffff;
            min-height: 100vh;
        }
    </style>
</head>
<body>
<nav>
  <div class="nav-inner">
      <a href="/portal.html" class="nav-logo" style="display: flex; align-items: center; gap: 12px;">
          <svg viewBox="0 0 200 200" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
            <defs><clipPath id="gc"><path d="M100 12 L112 20 L124 10 L132 24 L148 22 L150 38 L166 44 L160 60 L174 70 L164 84 L176 96 L164 108 L172 122 L156 130 L156 148 L140 150 L132 166 L116 160 L100 170 L84 160 L68 166 L60 150 L44 148 L44 130 L28 122 L36 108 L24 96 L36 84 L26 70 L40 60 L34 44 L50 38 L52 22 L68 24 L76 10 L88 20 Z"/></clipPath></defs>
            <path d="M100 12 L112 20 L124 10 L132 24 L148 22 L150 38 L166 44 L160 60 L174 70 L164 84 L176 96 L164 108 L172 122 L156 130 L156 148 L140 150 L132 166 L116 160 L100 170 L84 160 L68 166 L60 150 L44 148 L44 130 L28 122 L36 108 L24 96 L36 84 L26 70 L40 60 L34 44 L50 38 L52 22 L68 24 L76 10 L88 20 Z" fill="#5DB85C"/>
            <path d="M100 100 L0 0 L0 100 Z" fill="#E05040" clip-path="url(#gc)"/>
            <path d="M100 100 L0 0 L100 0 Z" fill="#E05040" clip-path="url(#gc)"/>
            <path d="M100 100 L100 0 L200 0 Z" fill="#F0C030" clip-path="url(#gc)"/>
            <path d="M100 100 L200 0 L200 100 Z" fill="#F0C030" clip-path="url(#gc)"/>
            <circle cx="100" cy="100" r="58" fill="white"/>
            <circle cx="100" cy="100" r="40" fill="#5DB85C"/>
            <circle cx="100" cy="100" r="30" fill="white"/>
            <polyline points="62,128 80,108 95,118 138,68" fill="none" stroke="#7EB5E0" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
            <polygon points="138,68 122,62 130,80" fill="#7EB5E0"/>
          </svg>
          <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">PRICING · PLANS</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="/" class="nav-link">الرئيسية</a>
      </div>
      <button class="logout-btn" onclick="logout()">خروج</button>
  </div>
</nav>

<div class="wrap reveal">
    <style>
        .header {
            text-align: center;
            margin-bottom: 60px;
        }

        .header h1 {
            font-size: 2.5em;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .header p {
            font-size: 1.1em;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 10px;
        }

        .header .subtitle {
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.95em;
        }

        /* Pricing Grid */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }

        .pricing-card {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 15px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .pricing-card.popular {
            border-color: #c8f04e;
            transform: scale(1.05);
        }

        .pricing-card.popular:hover {
            transform: scale(1.05) translateY(-10px);
        }

        .pricing-card.popular::before {
            content: 'الأكثر شهرة ⭐';
            position: absolute;
            top: -15px;
            right: 20px;
            background: #c8f04e;
            color: #071f21;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
        }

        .plan-badge {
            display: inline-block;
            background: rgba(200, 240, 78, 0.1);
            color: #c8f04e;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .plan-name {
            font-size: 1.8em;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 15px;
        }

        .plan-price {
            font-size: 3em;
            font-weight: bold;
            color: #c8f04e;
            margin: 20px 0;
        }

        .plan-price-period {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9em;
            margin-bottom: 20px;
        }

        .plan-description {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95em;
            margin-bottom: 30px;
            min-height: 50px;
            line-height: 1.6;
        }

        .plan-features {
            list-style: none;
            margin: 30px 0;
            text-align: right;
        }

        .plan-features li {
            padding: 12px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95em;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
        }

        .plan-features li:last-child {
            border-bottom: none;
        }

        .plan-features li.included::before {
            content: '✓';
            color: #10b981;
            font-weight: bold;
            font-size: 1.2em;
        }

        .plan-features li.excluded::before {
            content: '✗';
            color: #ef4444;
            font-weight: bold;
            font-size: 1.2em;
        }

        .plan-cta {
            background: #c8f04e;
            color: #071f21;
            border: none;
            padding: 15px 40px;
            border-radius: 8px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            margin-top: 30px;
            transition: all 0.3s ease;
            width: 100%;
            font-family: 'Cairo', sans-serif;
        }

        .plan-cta:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        }

        .plan-cta.secondary {
            background: transparent;
            color: #c8f04e;
            border: 2px solid #c8f04e;
        }

        .plan-cta.secondary:hover {
            background: rgba(200, 240, 78, 0.1);
        }

        /* Comparison Table */
        .comparison-section {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 15px;
            padding: 40px;
            margin-top: 60px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .comparison-section h2 {
            font-size: 2em;
            color: #ffffff;
            margin-bottom: 30px;
            text-align: center;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.8);
        }

        .comparison-table th {
            background: rgba(255, 255, 255, 0.02);
            font-weight: bold;
            color: #ffffff;
        }

        .comparison-table td:first-child,
        .comparison-table th:first-child {
            text-align: right;
            background: rgba(255, 255, 255, 0.04);
            color: #ffffff;
            font-weight: 700;
        }

        .comparison-table tr:hover {
            background: rgba(200, 240, 78, 0.02);
        }

        /* FAQ */
        .faq-section {
            margin-top: 60px;
        }

        .faq-section h2 {
            font-size: 2em;
            color: #ffffff;
            margin-bottom: 30px;
            text-align: center;
        }

        .faq-item {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            margin-bottom: 15px;
            overflow: hidden;
        }

        .faq-question {
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.02);
            transition: all 0.3s ease;
        }

        .faq-question:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .faq-question.active {
            background: #c8f04e;
            color: #071f21;
        }

        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        .faq-answer.active {
            padding: 20px;
            max-height: 500px;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #0F4246 0%, #071f21 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 15px;
            padding: 60px 40px;
            text-align: center;
            color: white;
            margin-top: 60px;
        }

        .cta-section h2 {
            font-size: 2em;
            margin-bottom: 20px;
        }

        .cta-section p {
            font-size: 1.1em;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .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;
            border: none;
            transition: all 0.3s ease;
        }

        .cta-button.primary {
            background: #c8f04e;
            color: #071f21;
        }

        .cta-button.primary:hover {
            transform: scale(1.05);
        }

        .cta-button.secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid white;
        }

        .cta-button.secondary:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 15px;
            }

            .header h1 {
                font-size: 1.8em;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-card.popular {
                transform: scale(1);
            }

            .pricing-card.popular:hover {
                transform: translateY(-10px);
            }

            .comparison-table {
                font-size: 0.85em;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 10px;
            }

            .cta-buttons {
                flex-direction: column;
            }

            .cta-button {
                width: 100%;
            }
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(102, 126, 234, 0.3);
            border-radius: 50%;
            border-top-color: #667eea;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="navbar">
        <h1>🚀 منصة محرك GEO</h1>
        <button onclick="goToDashboard()">العودة للوحة التحكم</button>
    </div>

    <div class="container">
        <div class="header">
            <h1>اختر الخطة المناسبة لك</h1>
            <p>ابدأ مع محاولة مجانية واحدة، ثم ارقِ إلى الخطة التي تناسب احتياجاتك</p>
            <p class="subtitle">جميع الخطط تشمل دعم العملاء والتحديثات المستمرة</p>
        </div>

        <div class="pricing-grid" id="pricing-grid">
            <!-- Pricing cards will be loaded here -->
        </div>

        <!-- Comparison Table -->
        <div class="comparison-section">
            <h2>مقارنة الخطط</h2>
            <table class="comparison-table">
                <thead>
                    <tr>
                        <th>المميزة</th>
                        <th>مجاني</th>
                        <th>احترافي</th>
                        <th>وكالة</th>
                        <th>مؤسسي</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>التحليلات الشهرية</td>
                        <td>1</td>
                        <td>100</td>
                        <td>500</td>
                        <td>غير محدود</td>
                    </tr>
                    <tr>
                        <td>الصفحات لكل تحليل</td>
                        <td>3</td>
                        <td>10</td>
                        <td>25</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td>تحليل المنافسين</td>
                        <td>✗</td>
                        <td>✓</td>
                        <td>✓</td>
                        <td>✓</td>
                    </tr>
                    <tr>
                        <td>توليد المحتوى</td>
                        <td>✗</td>
                        <td>✓</td>
                        <td>✓</td>
                        <td>✓</td>
                    </tr>
                    <tr>
                        <td>إدارة الإعلانات</td>
                        <td>✗</td>
                        <td>✓</td>
                        <td>✓</td>
                        <td>✓</td>
                    </tr>
                    <tr>
                        <td>بوابات العملاء</td>
                        <td>0</td>
                        <td>5</td>
                        <td>50</td>
                        <td>غير محدود</td>
                    </tr>
                    <tr>
                        <td>الدعم</td>
                        <td>البريد الإلكتروني</td>
                        <td>البريد الإلكتروني</td>
                        <td>أولوي</td>
                        <td>24/7</td>
                    </tr>
                    <tr>
                        <td>التسمية البيضاء</td>
                        <td>✗</td>
                        <td>✗</td>
                        <td>✓</td>
                        <td>✓</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- FAQ -->
        <div class="faq-section">
            <h2>الأسئلة الشائعة</h2>
            
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    <span>هل يمكنني تغيير الخطة لاحقاً؟</span>
                    <span>▼</span>
                </div>
                <div class="faq-answer">
                    نعم، يمكنك تغيير الخطة في أي وقت. إذا قمت بالترقية، ستُحسب الفرق بشكل متناسب. إذا قمت بالتنزيل، ستحصل على رصيد للفترة المتبقية.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    <span>هل هناك عقد طويل الأجل؟</span>
                    <span>▼</span>
                </div>
                <div class="faq-answer">
                    لا، جميع الخطط شهرية وبدون التزام. يمكنك الإلغاء في أي وقت من لوحة التحكم الخاصة بك.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    <span>هل تقدمون فترة تجربة مجانية؟</span>
                    <span>▼</span>
                </div>
                <div class="faq-answer">
                    نعم! جميع المستخدمين الجدد يحصلون على محاولة واحدة مجانية لتجربة المنصة. بعد ذلك، يمكنك الاختيار بين الخطط المدفوعة أو البقاء على الخطة المجانية.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    <span>هل تقدمون خصومات للعقود السنوية؟</span>
                    <span>▼</span>
                </div>
                <div class="faq-answer">
                    نعم، نقدم خصم 20% على الخطط السنوية. تواصل معنا للحصول على عرض خاص.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    <span>ماذا يحدث إذا تجاوزت حد الاستخدام؟</span>
                    <span>▼</span>
                </div>
                <div class="faq-answer">
                    سيتم إخطارك عند الاقتراب من الحد. يمكنك الترقية إلى خطة أعلى أو الانتظار حتى نهاية الشهر لإعادة تعيين الحد.
                </div>
            </div>
        </div>

        <!-- CTA Section -->
        <div class="cta-section">
            <h2>هل لديك أسئلة؟</h2>
            <p>فريقنا جاهز لمساعدتك في اختيار الخطة المناسبة</p>
            <div class="cta-buttons">
                <button class="cta-button primary" onclick="contactSupport()">تواصل معنا</button>
                <button class="cta-button secondary" onclick="goToDashboard()">العودة للوحة التحكم</button>
            </div>
        </div>
    </div>

    <script>
        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 grid = document.getElementById('pricing-grid');
                    grid.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' : ''}`;
                        
                        const features = plan.features.map(f => {
                            const isIncluded = !f.includes('✗');
                            return `<li class="${isIncluded ? 'included' : 'excluded'}">${f.replace('✓', '').replace('✗', '').trim()}</li>`;
                        }).join('');
                        
                        card.innerHTML = `
                            <div class="plan-badge">${plan.name}</div>
                            <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">
                                ${features}
                            </ul>
                            <button class="plan-cta ${planKey === 'free' ? 'secondary' : ''}" onclick="selectPlan('${planKey}')">${plan.cta}</button>
                        `;
                        
                        grid.appendChild(card);
                    });
                }
            } catch (error) {
                console.error('Error loading pricing:', error);
            }
        }

        function selectPlan(plan) {
            if (plan === 'free') {
                goToDashboard();
            } else if (plan === 'enterprise') {
                contactSupport();
            } else {
                if (token) {
                    window.location.href = `/checkout.html?plan=${plan}`;
                } else {
                    window.location.href = `/login.html?redirect=/pricing.html?plan=${plan}`;
                }
            }
        }

        function toggleFAQ(element) {
            const question = element;
            const answer = element.nextElementSibling;
            
            // Close other FAQs
            document.querySelectorAll('.faq-question').forEach(q => {
                if (q !== question) {
                    q.classList.remove('active');
                    q.nextElementSibling.classList.remove('active');
                }
            });
            
            // Toggle current
            question.classList.toggle('active');
            answer.classList.toggle('active');
        }

        function goToDashboard() {
            if (token) {
                window.location.href = '/dashboard.html';
            } else {
                // window.location.href = '/login.html';
            }
        }

        function contactSupport() {
            window.location.href = 'mailto:support@moharek.com?subject=استفسار عن خطة Enterprise';
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            loadPricingPlans();
        });
    </script>
</body>
</html>