| <!doctype html> |
| <html lang="ar" dir="rtl" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="supabase-url" content=""> |
| <meta name="supabase-anon-key" content=""> |
| <title>بيان - مساعد الكتابة العربية الذكي</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/css/tokens.css"> |
| <link rel="stylesheet" href="/css/base.css"> |
| <link rel="stylesheet" href="/css/components.css"> |
| <style> |
| |
| </style> |
| <style>@view-transition { navigation: auto; }</style> |
| <script src="/js/vendor/supabase.min.js"></script> |
| <script src="/js/auth/config.js"></script> |
| <script src="/js/auth/client.js"></script> |
| <script src="/js/auth/session.js"></script> |
| <script src="/js/auth/auth.js"></script> |
| <script src="/js/auth/auth-ui.js"></script> |
| <script src="/js/theme.js"></script> |
| <script src="/js/vendor/mammoth.browser.min.js"></script> |
| <script src="/js/vendor/docx.umd.js"></script> |
| <script src="/js/vendor/FileSaver.min.js"></script> |
| <script src="/js/vendor/html2pdf.bundle.min.js"></script> |
| <script src="/js/renderer.js"></script> |
| <script src="/js/selection.js"></script> |
| <script src="/js/ui.js"></script> |
| <script src="/js/documents/doc-utils.js"></script> |
| <script src="/js/editor.js"></script> |
| <script src="/js/format.js"></script> |
| <script src="/js/documents/import.js"></script> |
| <script src="/js/documents/export.js?v=20260615d"></script> |
| <script src="/js/documents/documents.js"></script> |
| |
| <script src="/js/sync/sync-queue.js"></script> |
| <script src="/js/sync/sync-resolver.js"></script> |
| <script src="/js/sync/sync-manager.js"></script> |
| |
| <script src="/js/documents-cloud/documents-api.js"></script> |
| <script src="/js/documents-cloud/documents-state.js"></script> |
| <script src="/js/documents-cloud/documents-ui.js"></script> |
| <script src="/js/summaries/summaries-api.js"></script> |
| <script src="/js/summaries/summaries-ui.js"></script> |
| <script src="/js/settings-sync/settings-api.js"></script> |
| <script src="/js/settings-sync/settings-sync.js"></script> |
| </head> |
| <body class="h-full page-bg"> |
| <div class="h-full overflow-auto"> |
| <nav class="site-nav fixed top-0 right-0 left-0 z-50" role="navigation" aria-label="التنقل الرئيسي"> |
| <div class="max-w-7xl mx-auto px-4 md:px-6 py-3"> |
| <div class="flex items-center justify-between gap-3"> |
| <div class="flex items-center gap-3"> |
| <button id="mobile-menu-btn" class="mobile-menu-btn md:hidden" aria-label="فتح القائمة" aria-expanded="false" aria-controls="mobile-drawer"> |
| <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg> |
| </button> |
| <div class="w-10 h-10 rounded-xl flex items-center justify-center gradient-accent" aria-hidden="true"><span class="text-white text-xl font-bold">ب</span></div> |
| <span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span> |
| </div> |
| <div class="hidden md:flex items-center gap-8"> |
| <button onclick="showPage('home')" class="nav-link active text-base font-medium" data-page="home">الرئيسية</button> |
| <button onclick="showPage('features')" class="nav-link text-base font-medium" data-page="features">الميزات</button> |
| <button onclick="showPage('editor')" class="nav-link text-base font-medium" data-page="editor">المحرر</button> |
| <button onclick="showPage('pricing')" class="nav-link text-base font-medium" data-page="pricing">الأسعار</button> |
| <a href="https://bayyinah-alpha.vercel.app/" class="nav-link nav-link-external text-base font-medium" target="_blank" rel="noopener noreferrer" aria-label="بَيِّنَة — مساعد ذكي للإجابة عن أسئلة القرآن والحديث وقصص الأنبياء">بَيِّنَة — القرآن والحديث</a> |
| </div> |
| <div class="flex items-center gap-2 md:gap-3"> |
| <div id="auth-menu-wrap" class="auth-menu-wrap is-hidden"> |
| <div class="auth-dropdown"> |
| <button id="auth-menu-trigger" class="auth-menu-trigger" type="button" aria-label="قائمة الحساب" aria-haspopup="true" aria-expanded="false"> |
| <span id="auth-avatar" class="auth-avatar" aria-hidden="true">ض</span> |
| <span id="auth-display-name" class="auth-display-name">ضيف</span> |
| <span class="auth-menu-chevron" aria-hidden="true">▾</span> |
| </button> |
| <div id="auth-account-menu" class="auth-account-menu" role="menu" aria-label="الحساب"> |
| <div class="auth-account-menu__header"> |
| <span id="auth-provider-label" class="auth-provider-label">ضيف</span> |
| </div> |
| <button id="auth-link-google-btn" type="button" class="auth-account-menu__item" role="menuitem">ربط حساب Google</button> |
| <button id="auth-logout-btn" type="button" class="auth-account-menu__item auth-account-menu__item--danger" role="menuitem">تسجيل الخروج</button> |
| </div> |
| </div> |
| </div> |
| <button id="theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" aria-pressed="true" type="button"> |
| <svg class="theme-icon-sun" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg> |
| <svg class="theme-icon-moon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg> |
| </button> |
|
|
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| <div id="mobile-drawer" class="mobile-drawer" aria-hidden="true"> |
| <div id="mobile-drawer-backdrop" class="mobile-drawer-backdrop"></div> |
| <div class="mobile-drawer-panel" role="dialog" aria-label="قائمة التنقل"> |
| <button id="mobile-drawer-close" class="mobile-drawer-link" style="text-align:left" aria-label="إغلاق القائمة">✕ إغلاق</button> |
| <button class="mobile-drawer-link active" data-page="home">الرئيسية</button> |
| <button class="mobile-drawer-link" data-page="features">الميزات</button> |
| <button class="mobile-drawer-link" data-page="editor">المحرر</button> |
| <button class="mobile-drawer-link" data-page="pricing">الأسعار</button> |
| <a href="https://bayyinah-alpha.vercel.app/" class="mobile-drawer-link mobile-drawer-link-external" target="_blank" rel="noopener noreferrer" aria-label="بَيِّنَة — مساعد ذكي للإجابة عن أسئلة القرآن والحديث وقصص الأنبياء">بَيِّنَة — القرآن والحديث والسيرة</a> |
| <div class="auth-drawer-section"> |
| <p class="auth-drawer-label">الحساب</p> |
| <p id="auth-drawer-name" class="auth-drawer-name">—</p> |
| <p id="auth-drawer-provider" class="auth-drawer-provider"></p> |
| <button id="auth-link-google-btn-mobile" type="button" class="mobile-drawer-link auth-drawer-action is-hidden">ربط حساب Google</button> |
| <button id="auth-logout-btn-mobile" type="button" class="mobile-drawer-link auth-drawer-action is-hidden">تسجيل الخروج</button> |
| </div> |
| </div> |
| </div> |
| <div id="auth-offline-banner" class="auth-offline-banner is-hidden" role="status" aria-live="polite"> |
| تعذر الاتصال بخدمة المصادقة. يمكنك متابعة استخدام المحرر والمحاولة لاحقاً. |
| </div> |
| |
| <div id="docs-sidebar" class="docs-sidebar" role="complementary" aria-label="مستنداتي"> |
| <div class="docs-sidebar__header"> |
| <span class="docs-sidebar__title">مستنداتي</span> |
| </div> |
| <div class="docs-sidebar__body"> |
| <button id="docs-new-btn-mobile" class="docs-new-btn" type="button" aria-label="مستند جديد"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> |
| مستند جديد |
| </button> |
| <div id="docs-list-mobile" role="list" aria-label="قائمة المستندات"></div> |
| </div> |
| </div> |
| |
| <div id="auth-gate" class="auth-gate" aria-hidden="true" role="dialog" aria-labelledby="auth-gate-title" aria-modal="true"> |
| <div id="auth-gate-backdrop" class="auth-gate-backdrop"></div> |
| <div class="auth-gate-panel auth-gate-panel--desktop"> |
| <h2 id="auth-gate-title" class="auth-gate-title">مرحباً بك في بيان</h2> |
| <p class="auth-gate-subtitle">اختر طريقة المتابعة للبدء في الكتابة والتحليل</p> |
| <div class="auth-gate-actions"> |
| <button id="auth-guest-btn" type="button" class="btn-primary auth-gate-btn">المتابعة كضيف</button> |
| <button id="auth-google-btn" type="button" class="btn-ghost auth-gate-btn auth-gate-btn--google"> |
| <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg> |
| المتابعة باستخدام Google |
| </button> |
| </div> |
| </div> |
| <div id="auth-gate-sheet" class="auth-gate-panel auth-gate-panel--mobile"> |
| <div class="bottom-sheet-handle" aria-hidden="true"></div> |
| <h2 class="auth-gate-title">مرحباً بك في بيان</h2> |
| <p class="auth-gate-subtitle">اختر طريقة المتابعة</p> |
| <button id="auth-guest-btn-mobile" type="button" class="btn-primary auth-gate-btn w-full">المتابعة كضيف</button> |
| <button id="auth-google-btn-mobile" type="button" class="btn-ghost auth-gate-btn auth-gate-btn--google w-full">المتابعة باستخدام Google</button> |
| </div> |
| </div> |
| <div id="page-home" class="page"> |
| <section class="gradient-bg min-h-screen pt-28 pb-20 relative overflow-hidden"> |
| <div class="absolute inset-0 overflow-hidden pointer-events-none"> |
| <div class="absolute top-20 left-20 w-96 h-96 rounded-full opacity-20" style="background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%); filter: blur(80px);"></div> |
| <div class="absolute bottom-20 right-20 w-96 h-96 rounded-full opacity-20" style="background: radial-gradient(circle, var(--secondary-color) 0%, transparent 70%); filter: blur(80px);"></div> |
| </div> |
| <div class="max-w-7xl mx-auto px-6 relative z-10"> |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> |
| <div class="text-center lg:text-right animate-fade-in"> |
| <div class="inline-flex items-center gap-2 px-5 py-2 rounded-full text-sm font-bold mb-8" style="background: rgba(59, 130, 246, 0.15); color: var(--primary-color); border: 1px solid rgba(59, 130, 246, 0.3);"><span class="w-2 h-2 rounded-full animate-pulse" style="background: var(--primary-color);"></span> <span>مدعوم بالذكاء الاصطناعي</span> |
| </div> |
| <h1 id="hero-headline" class="text-5xl lg:text-7xl font-bold leading-tight mb-6" style="line-height: 1.3;">اكتب العربية<br><span class="text-gradient">بثقة واحتراف</span></h1> |
| <p id="hero-subheadline" class="text-xl lg:text-2xl leading-relaxed mb-10" style="color: var(--text-secondary); line-height: 1.9;">مساعد ذكي يصحح الإملاء والنحو وعلامات الترقيم ويُلخّص النصوص العربية بدقة عالية.</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12"><button id="hero-cta-primary" onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl"> ابدأ الكتابة الآن </button> <button class="px-8 py-4 rounded-2xl text-lg font-bold transition-all hover:scale-105 border-2" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-color);"> شاهد العرض التوضيحي </button> |
| </div> |
| <div class="flex items-center gap-8 justify-center lg:justify-start"> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-gradient"> |
| +١٠ مليون |
| </div> |
| <div class="text-sm mt-1" style="color: var(--text-secondary);"> |
| كلمة تم تصحيحها |
| </div> |
| </div> |
| <div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-gradient"> |
| ٩٩٪ |
| </div> |
| <div class="text-sm mt-1" style="color: var(--text-secondary);"> |
| دقة التصحيح |
| </div> |
| </div> |
| <div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-gradient"> |
| +٥٠ ألف |
| </div> |
| <div class="text-sm mt-1" style="color: var(--text-secondary);"> |
| مستخدم نشط |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="relative animate-float"> |
| <div class="rounded-3xl overflow-hidden shadow-2xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.1);"> |
| <div class="flex items-center justify-between p-4 border-b" style="border-color: rgba(255, 255, 255, 0.1);"> |
| <div class="flex items-center gap-3"> |
| <div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div> |
| <div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div> |
| <div class="w-3 h-3 rounded-full" style="background: #22c55e;"></div> |
| </div><span class="text-sm" style="color: var(--text-secondary);">محرر بيان</span> |
| <div class="w-20"></div> |
| </div> |
| <div class="p-8 editor-content text-right text-lg" dir="rtl" style="background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%); color: #1a202c; min-height: 300px;"> |
| <p class="mb-4">مرحباً بكم في <span class="spelling-error">محرر بيان</span> للكتابة العربية<span class="punctuation-suggestion">.</span></p> |
| <p class="mb-4">نحن <span class="grammar-error">نساعدك</span> على كتابة نصوص عربية صحيحة وواضحة بفضل الذكاء الاصطناعي المتقدم<span class="punctuation-suggestion">.</span></p> |
| <p>جرّب المحرر الآن وشاهد كيف يمكن أن تصبح كتابتك أفضل!</p> |
| </div> |
| <div class="flex items-center justify-between p-4 border-t" style="border-color: rgba(255, 255, 255, 0.1);"> |
| <div class="flex items-center gap-6"> |
| <div class="flex items-center gap-2"> |
| <div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div><span class="text-sm" style="color: var(--text-secondary);">١ إملائي</span> |
| </div> |
| <div class="flex items-center gap-2"> |
| <div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div><span class="text-sm" style="color: var(--text-secondary);">١ نحوي</span> |
| </div> |
| <div class="flex items-center gap-2"> |
| <div class="w-3 h-3 rounded-full" style="background: #22c55e;"></div><span class="text-sm" style="color: var(--text-secondary);">٢ ترقيم</span> |
| </div> |
| </div> |
| <div class="flex items-center gap-2"><span class="text-2xl font-bold text-gradient">٩٢</span> <span class="text-sm" style="color: var(--text-secondary);">التقييم</span> |
| </div> |
| </div> |
| </div> |
| <div class="absolute -bottom-6 -left-6 p-4 rounded-2xl shadow-xl animate-pulse" style="background: var(--surface-color); border: 1px solid rgba(34, 197, 94, 0.3); max-width: 280px;"> |
| <div class="flex items-start gap-3"> |
| <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: rgba(34, 197, 94, 0.15);"><span style="color: #22c55e; font-size: 20px;">✓</span> |
| </div> |
| <div> |
| <div class="text-sm font-bold mb-1"> |
| تصحيح تلقائي |
| </div> |
| <div class="text-xs" style="color: var(--text-secondary);"> |
| تم إصلاح ٣ أخطاء في النص |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="py-24" style="background: var(--background-color);"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl lg:text-5xl font-bold mb-6">ميزات <span class="text-gradient">قوية ومتقدمة</span></h2> |
| <p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">كل ما تحتاجه لكتابة نصوص عربية احترافية وخالية من الأخطاء</p> |
| </div> |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444;"> |
| ✎ |
| </div> |
| <h3 class="text-xl font-bold mb-3">التدقيق الإملائي الذكي</h3> |
| <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">فهم الجذور الصرفية والسياق لتصحيح الأخطاء الإملائية بدقة عالية</p> |
| </div> |
| <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24;"> |
| ◉ |
| </div> |
| <h3 class="text-xl font-bold mb-3">تصحيح القواعد النحوية</h3> |
| <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">توافق الفعل والفاعل واقتراح الإعراب الصحيح بشكل تلقائي</p> |
| </div> |
| <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e;"> |
| ⸲ |
| </div> |
| <h3 class="text-xl font-bold mb-3">تصحيح علامات الترقيم</h3> |
| <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الفواصل والنقط وعلامات الاقتباس العربية في المكان الصحيح</p> |
| </div> |
| <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;"> |
| ⊞ |
| </div> |
| <h3 class="text-xl font-bold mb-3">تلخيص النصوص العربية</h3> |
| <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الحفاظ على المعنى والأسلوب مع تقليل طول النص بذكاء</p> |
| </div> |
| </div> |
| <div class="text-center mt-12"><button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: var(--primary-color); color: var(--primary-color);"> استكشف جميع الميزات ← </button> |
| </div> |
| </div> |
| </section> |
| </div> |
| <div id="page-features" class="page"> |
| <section class="pt-32 pb-24" style="background: var(--background-color);"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="text-center mb-20"> |
| <h1 class="text-5xl lg:text-6xl font-bold mb-6">ميزات <span class="text-gradient">شاملة ومتكاملة</span></h1> |
| <p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">أدوات متخصصة مصممة خصيصًا للغة العربية</p> |
| </div> |
| <div class="grid lg:grid-cols-2 gap-16 items-center mb-32"> |
| <div class="order-2 lg:order-1"> |
| <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;"> |
| <p class="mb-4">الكتابة <span class="spelling-error">الصحيحه</span> مهمة جدًا في التواصل الفعّال.</p> |
| <div class="mt-6 p-4 rounded-xl" style="background: rgba(239, 68, 68, 0.1); border-right: 4px solid #ef4444;"> |
| <div class="text-sm font-bold mb-2" style="color: #ef4444;"> |
| خطأ إملائي |
| </div> |
| <div class="flex items-center justify-between text-base"> |
| <div><span style="text-decoration: line-through; color: var(--text-secondary);">الصحيحه</span> <span class="mx-3">←</span> <span style="color: #22c55e; font-weight: 600;">الصحيحة</span> |
| </div> |
| </div> |
| <div class="text-sm mt-3" style="color: var(--text-secondary);"> |
| التاء المربوطة (ة) تُستخدم مع الصفات المؤنثة |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="order-1 lg:order-2 text-right"> |
| <div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; width: 64px; height: 64px; font-size: 32px;"> |
| ✎ |
| </div> |
| <h2 class="text-4xl font-bold mb-6">التدقيق الإملائي الذكي</h2> |
| <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">محرك ذكي يفهم الجذور الصرفية والسياق اللغوي لتصحيح الأخطاء الإملائية التي تفوتها البرامج التقليدية.</p> |
| <ul class="space-y-4"> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">اقتراحات حسب السياق اللغوي</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">التعرف على الجذور الصرفية العربية</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">تصحيح فوري أثناء الكتابة</span></li> |
| </ul> |
| </div> |
| </div> |
| <div class="grid lg:grid-cols-2 gap-16 items-center mb-32"> |
| <div class="text-right"> |
| <div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24; width: 64px; height: 64px; font-size: 32px;"> |
| ◉ |
| </div> |
| <h2 class="text-4xl font-bold mb-6">تصحيح القواعد النحوية</h2> |
| <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">فهم عميق لقواعد النحو العربي بما في ذلك الإعراب وتوافق الفعل مع الفاعل والصفات.</p> |
| <ul class="space-y-4"> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">توافق الفعل والفاعل تلقائيًا</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">اقتراح الإعراب الصحيح للكلمات</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">شرح تفصيلي لكل تصحيح</span></li> |
| </ul> |
| </div> |
| <div> |
| <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;"> |
| <p class="mb-4">الطلاب <span class="grammar-error">ذهبوا</span> إلى المدرسة صباحًا.</p> |
| <div class="mt-6 p-4 rounded-xl" style="background: rgba(251, 191, 36, 0.1); border-right: 4px solid #fbbf24;"> |
| <div class="text-sm font-bold mb-2" style="color: #fbbf24;"> |
| اقتراح نحوي |
| </div> |
| <div class="text-base mb-3"><span style="color: var(--text-secondary);">يُفضل:</span> <span style="color: #22c55e; font-weight: 600; margin-right: 8px;">ذهب الطلاب</span> |
| </div> |
| <div class="text-sm" style="color: var(--text-secondary); line-height: 1.7;"> |
| في اللغة العربية الفصحى، عندما يتقدم الفعل على الفاعل الجمع، يُفضل إفراد الفعل. |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="grid lg:grid-cols-2 gap-16 items-center mb-32"> |
| <div class="order-2 lg:order-1"> |
| <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;"> |
| <p class="mb-4">قال المعلم<span class="punctuation-suggestion">:</span> <span class="punctuation-suggestion">«</span>الدرس مهم جدًا<span class="punctuation-suggestion">»</span><span class="punctuation-suggestion">.</span></p> |
| <div class="mt-6 p-4 rounded-xl" style="background: rgba(34, 197, 94, 0.1); border-right: 4px solid #22c55e;"> |
| <div class="text-sm font-bold mb-2" style="color: #22c55e;"> |
| ✓ تم إصلاح علامات الترقيم |
| </div> |
| <div class="text-sm" style="color: var(--text-secondary); line-height: 1.7;"> |
| • أُضيفت النقطتان بعد "قال المعلم"<br> |
| • استُخدمت علامات الاقتباس العربية «»<br> |
| • أُضيفت النقطة في نهاية الجملة |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="order-1 lg:order-2 text-right"> |
| <div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e; width: 64px; height: 64px; font-size: 32px;"> |
| ⸲ |
| </div> |
| <h2 class="text-4xl font-bold mb-6">تصحيح علامات الترقيم</h2> |
| <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">كشف وتصحيح تلقائي لعلامات الترقيم العربية بما في ذلك الوضع الصحيح للفواصل والنقاط وعلامات الاقتباس.</p> |
| <ul class="space-y-4"> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">علامات الترقيم العربية الأصيلة</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">تحليل بنية الجمل والفقرات</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">معالجة علامات الاقتباس والحوار</span></li> |
| </ul> |
| </div> |
| </div> |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> |
| <div class="text-right"> |
| <div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6; width: 64px; height: 64px; font-size: 32px;"> |
| ⊞ |
| </div> |
| <h2 class="text-4xl font-bold mb-6">تلخيص النصوص العربية</h2> |
| <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">توليد ملخصات دقيقة وموجزة للنصوص الطويلة مع الحفاظ على المعنى الأساسي والأسلوب العربي الأصيل.</p> |
| <ul class="space-y-4"> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">طول ملخص قابل للتعديل</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">استخراج النقاط الرئيسية</span></li> |
| <li class="flex items-center gap-4"> |
| <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span> |
| </div><span class="text-base">الحفاظ على فصاحة اللغة</span></li> |
| </ul> |
| </div> |
| <div> |
| <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="text-right" dir="rtl"> |
| <div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); line-height: 1.8;"> |
| النص الأصلي: ١٥٠ كلمة...<br> |
| مقالة طويلة تتحدث عن أهمية التكنولوجيا في العصر الحديث وتأثيرها على المجتمع... |
| </div> |
| <div class="flex items-center justify-center my-4"> |
| <svg class="w-8 h-8" style="color: var(--secondary-color);" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /> |
| </svg> |
| </div> |
| <div class="text-lg p-4 rounded-xl editor-content" style="background: rgba(139, 92, 246, 0.1); border-right: 4px solid #8b5cf6; line-height: 2;"> |
| <div class="text-sm font-bold mb-3" style="color: #8b5cf6;"> |
| الملخص: ٣٠ كلمة |
| </div> |
| <p style="color: var(--text-color);">التكنولوجيا الحديثة أحدثت ثورة في حياتنا اليومية، حيث سهّلت التواصل والتعلم والعمل، مما أدى إلى تطور المجتمعات وتحسين جودة الحياة.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| <div id="page-editor" class="page"> |
| <section class="pt-16 md:pt-20 min-h-screen page-bg"> |
| <div class="max-w-[1600px] mx-auto"> |
| <div class="editor-layout"> |
| |
| <div class="docs-panel docs-panel-desktop"> |
| <div class="docs-panel__header"> |
| <svg class="docs-panel__icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg> |
| <span class="docs-panel__title">مستنداتي</span> |
| </div> |
| <div class="docs-panel__body"> |
| <button id="docs-new-btn" class="docs-new-btn" type="button" aria-label="مستند جديد"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> |
| مستند جديد |
| </button> |
| <div class="docs-search"> |
| <svg class="docs-search__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> |
| <input type="text" class="docs-search__input" id="docs-search-input" placeholder="بحث في المستندات..." autocomplete="off"> |
| </div> |
| <div id="docs-list" role="list" aria-label="قائمة المستندات"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="editor-shell"> |
| <div class="editor-toolbar"> |
| <div class="flex items-center gap-2 flex-wrap"> |
| <button id="write-tab" onclick="switchTab('write')" class="editor-tab active" type="button">كتابة</button> |
| <button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" type="button">تلخيص</button> |
| <div class="toolbar-separator"></div> |
| <div class="doc-title-bar"> |
| <span id="doc-current-title" class="doc-current-title">مستند جديد</span> |
| </div> |
| <button id="docs-sidebar-toggle" class="docs-sidebar-toggle-mobile btn-ghost lg:hidden" type="button" aria-label="مستنداتي" aria-expanded="false" aria-controls="docs-sidebar"> |
| <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg> |
| </button> |
| </div> |
| <div class="flex items-center gap-4 flex-wrap"> |
| <div id="analyzing-indicator" class="analyzing-indicator" aria-live="polite"> |
| <span class="analyzing-spinner" aria-hidden="true"></span> |
| <span>جاري التحليل...</span> |
| </div> |
| <span class="text-sm text-secondary">عدد الكلمات: <span id="word-count" class="font-bold">٠</span></span> |
| <button id="doc-save-btn" class="doc-save-btn-icon btn-ghost" type="button" aria-label="حفظ المستند" title="حفظ"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> |
| </button> |
| </div> |
| </div> |
| |
| <div class="format-toolbar" id="format-toolbar"> |
| |
| <div class="fmt-group fmt-group--font"> |
| <div class="fmt-dropdown" id="fmt-font-wrap"> |
| <button class="fmt-dropdown__trigger" type="button" id="fmt-font-trigger" aria-haspopup="true" aria-expanded="false"> |
| <svg class="fmt-dropdown__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7V4h16v3M9 20h6M12 4v16"/></svg> |
| <span id="fmt-font-label">Cairo</span> |
| <svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg> |
| </button> |
| <div class="fmt-dropdown__menu" id="fmt-font-menu" role="menu"> |
| <button class="fmt-dropdown__item" data-font="Cairo" role="menuitem" style="font-family:Cairo">Cairo</button> |
| <button class="fmt-dropdown__item" data-font="Arial" role="menuitem" style="font-family:Arial">Arial</button> |
| <button class="fmt-dropdown__item" data-font="Times New Roman" role="menuitem" style="font-family:'Times New Roman'">Times New Roman</button> |
| <button class="fmt-dropdown__item" data-font="Tahoma" role="menuitem" style="font-family:Tahoma">Tahoma</button> |
| <button class="fmt-dropdown__item" data-font="Simplified Arabic" role="menuitem" style="font-family:'Simplified Arabic'">Simplified Arabic</button> |
| <button class="fmt-dropdown__item" data-font="Traditional Arabic" role="menuitem" style="font-family:'Traditional Arabic'">Traditional Arabic</button> |
| <button class="fmt-dropdown__item" data-font="Courier New" role="menuitem" style="font-family:'Courier New'">Courier New</button> |
| </div> |
| </div> |
| <div class="fmt-dropdown" id="fmt-size-wrap"> |
| <button class="fmt-dropdown__trigger fmt-dropdown__trigger--size" type="button" id="fmt-size-trigger" aria-haspopup="true" aria-expanded="false"> |
| <span id="fmt-size-label">16</span> |
| <svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg> |
| </button> |
| <div class="fmt-dropdown__menu fmt-dropdown__menu--size" id="fmt-size-menu" role="menu"> |
| <button class="fmt-dropdown__item" data-size="12px" role="menuitem"><span class="fmt-size-preview" style="font-size:10px">بيان</span> 12</button> |
| <button class="fmt-dropdown__item fmt-dropdown__item--active" data-size="16px" role="menuitem"><span class="fmt-size-preview" style="font-size:12px">بيان</span> 16</button> |
| <button class="fmt-dropdown__item" data-size="20px" role="menuitem"><span class="fmt-size-preview" style="font-size:14px">بيان</span> 20</button> |
| <button class="fmt-dropdown__item" data-size="24px" role="menuitem"><span class="fmt-size-preview" style="font-size:16px">بيان</span> 24</button> |
| <button class="fmt-dropdown__item" data-size="32px" role="menuitem"><span class="fmt-size-preview" style="font-size:18px">بيان</span> 32</button> |
| <button class="fmt-dropdown__item" data-size="48px" role="menuitem"><span class="fmt-size-preview" style="font-size:22px">بيان</span> 48</button> |
| </div> |
| </div> |
| </div> |
| <div class="fmt-divider"></div> |
| |
| <div class="fmt-group"> |
| <button id="fmt-bold" class="fmt-btn" onclick="formatBold()" type="button" title="غامق (Ctrl+B)"><b>B</b></button> |
| <button id="fmt-italic" class="fmt-btn" onclick="formatItalic()" type="button" title="مائل (Ctrl+I)"><i>I</i></button> |
| <button id="fmt-underline" class="fmt-btn" onclick="formatUnderline()" type="button" title="تحته خط (Ctrl+U)"><u>U</u></button> |
| <button id="fmt-strikethrough" class="fmt-btn" onclick="formatStrikethrough()" type="button" title="يتوسطه خط"><s>S</s></button> |
| </div> |
| <div class="fmt-divider"></div> |
| |
| <div class="fmt-group"> |
| <button id="fmt-align-right" class="fmt-btn fmt-active" onclick="formatAlignRight()" type="button" title="محاذاة لليمين"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm4 4h14v2H7V9zm-4 4h18v2H3v-2zm4 4h14v2H7v-2z"/></svg> |
| </button> |
| <button id="fmt-align-center" class="fmt-btn" onclick="formatAlignCenter()" type="button" title="توسيط"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm3 4h12v2H6V9zm-3 4h18v2H3v-2zm3 4h12v2H6v-2z"/></svg> |
| </button> |
| <button id="fmt-align-left" class="fmt-btn" onclick="formatAlignLeft()" type="button" title="محاذاة لليسار"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 4h14v2H3V9zm0 4h18v2H3v-2zm0 4h14v2H3v-2z"/></svg> |
| </button> |
| </div> |
| <div class="fmt-divider"></div> |
| |
| <div class="fmt-group"> |
| <button class="fmt-btn" onclick="formatUndo()" type="button" title="تراجع (Ctrl+Z)"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a5 5 0 015 5v2M3 10l4-4M3 10l4 4"/></svg> |
| </button> |
| <button class="fmt-btn" onclick="formatRedo()" type="button" title="إعادة (Ctrl+Y)"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10H11a5 5 0 00-5 5v2M21 10l-4-4M21 10l-4 4"/></svg> |
| </button> |
| </div> |
| <div class="fmt-divider"></div> |
| |
| <div class="fmt-group fmt-group--font"> |
| <div class="fmt-dropdown" id="fmt-textcolor-wrap"> |
| <button class="fmt-color-btn" type="button" id="fmt-textcolor-trigger" title="لون النص"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z"/></svg> |
| <span class="fmt-color-indicator" id="fmt-textcolor-bar" style="background:#ECEEF2"></span> |
| </button> |
| <div class="fmt-dropdown__menu" id="fmt-textcolor-menu" role="menu"> |
| <div class="fmt-color-grid" id="fmt-textcolor-grid"></div> |
| </div> |
| </div> |
| <div class="fmt-dropdown" id="fmt-highlight-wrap"> |
| <button class="fmt-color-btn" type="button" id="fmt-highlight-trigger" title="لون التظليل"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15a1.49 1.49 0 000 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z"/></svg> |
| <span class="fmt-color-indicator" id="fmt-highlight-bar" style="background:transparent"></span> |
| </button> |
| <div class="fmt-dropdown__menu" id="fmt-highlight-menu" role="menu"> |
| <div class="fmt-color-grid" id="fmt-highlight-grid"></div> |
| </div> |
| </div> |
| </div> |
| <div class="fmt-divider"></div> |
| |
| <div class="fmt-group"> |
| <button class="fmt-btn" onclick="execFormat('insertUnorderedList')" type="button" title="قائمة نقطية"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg> |
| </button> |
| <button class="fmt-btn" onclick="execFormat('insertOrderedList')" type="button" title="قائمة مرقمة"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/></svg> |
| </button> |
| <button class="fmt-btn" onclick="execFormat('indent')" type="button" title="مسافة بادئة"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/></svg> |
| </button> |
| <button class="fmt-btn" onclick="execFormat('outdent')" type="button" title="إزالة المسافة البادئة"> |
| <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/></svg> |
| </button> |
| </div> |
| <div class="fmt-divider"></div> |
| |
| <div class="fmt-group"> |
| <button class="fmt-btn" onclick="execFormat('removeFormat')" type="button" title="مسح التنسيق"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2L2 22h20L12 2z"/><path stroke-linecap="round" stroke-width="2" d="M4 4l16 16"/></svg> |
| </button> |
| </div> |
| </div> |
| <input type="file" id="doc-import-input" class="sr-only" accept=".txt,.docx,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document" aria-hidden="true"> |
| <div id="write-area"> |
| <div id="analysis-limit-banner" class="analysis-limit-banner is-hidden" role="status" aria-live="polite"></div> |
| <div id="editor-container" class="editor-surface editor-content" |
| role="textbox" aria-multiline="true" aria-label="محرر النص العربي" |
| aria-describedby="editor-hint" contenteditable="true" |
| data-placeholder="ابدأ الكتابة هنا... اكتب نصك العربي وسنساعدك في تصحيحه وتحسينه بشكل فوري"></div> |
| <p id="editor-hint" class="sr-only">اكتب نصاً عربياً. ستظهر الاقتراحات تلقائياً.</p> |
| <div id="editor-tooltip" class="suggestion-popover" role="dialog" aria-label="اقتراح تصحيح"> |
| <div id="tooltip-type" class="popover-type">خطأ</div> |
| <div class="popover-original-word"><span class="popover-label">الكلمة:</span> <span id="tooltip-original"></span></div> |
| <div id="tooltip-alternatives" class="popover-alternatives"></div> |
| <p class="popover-hint">اختر التصحيح المناسب · Escape للإغلاق</p> |
| </div> |
| </div> |
| <div id="summarize-area" class="summarize-panel is-hidden"> |
| |
| <div class="summary-mode-toggle"> |
| <button type="button" class="summary-mode-btn active" id="summary-mode-paragraph" onclick="setSummaryMode('paragraph')"> |
| <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg> |
| فقرة |
| </button> |
| <button type="button" class="summary-mode-btn" id="summary-mode-bullets" onclick="setSummaryMode('bullets')"> |
| <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg> |
| نقاط |
| </button> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-base font-bold mb-3" for="summary-length">طول الملخص</label> |
| <div class="flex items-center gap-4"> |
| <span class="text-sm text-secondary">قصير</span> |
| <input type="range" id="summary-length" min="1" max="3" value="2" onchange="updateSummaryLength()" aria-valuetext="متوسط"> |
| <span class="text-sm text-secondary">طويل</span> |
| </div> |
| <div class="text-center mt-2"><span id="summary-length-text" class="text-sm font-bold text-brand">متوسط</span></div> |
| </div> |
| <div class="mb-6"> |
| <label class="flex items-center gap-3 cursor-pointer"> |
| <input type="checkbox" id="full-text-summary" class="w-5 h-5 rounded"> |
| <span class="text-base font-bold">تلخيص النص كاملاً</span> |
| </label> |
| </div> |
| <button id="generate-summary-btn" onclick="generateSummary(event)" class="btn-primary w-full py-4 text-lg mb-6" type="button">توليد الملخص</button> |
| <div id="summary-preview" class="summary-preview"> |
| <div class="summary-card"> |
| |
| <div id="summary-stats" class="summary-stats" style="display:none"> |
| <div class="summary-stat"><span>كلمات الملخص:</span> <span class="summary-stat__value" id="summary-word-count">0</span></div> |
| <div class="summary-stat"><span>نسبة الاختصار:</span> <span class="summary-stat__value" id="summary-compression">0%</span></div> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-bold summary-card__title">الملخص</h3> |
| <button onclick="copySummary()" class="btn-ghost" type="button">نسخ</button> |
| </div> |
| <div id="summary-text" class="text-right text-lg editor-content" dir="rtl"></div> |
| </div> |
| </div> |
| </div> |
| <div class="editor-footer"> |
| <div class="editor-stats" role="status" aria-label="إحصائيات"> |
| <div class="flex items-center gap-2"><span class="stat-dot stat-dot--spelling" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="spelling-count">٠</span> إملائي</span></div> |
| <div class="flex items-center gap-2"><span class="stat-dot stat-dot--grammar" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="grammar-count">٠</span> نحوي</span></div> |
| <div class="flex items-center gap-2"><span class="stat-dot stat-dot--punctuation" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="punctuation-count">٠</span> ترقيم</span></div> |
| <span class="stat-item--sep"></span> |
| <span class="stat-item"><span id="char-count">٠</span> حرف</span> |
| <span class="stat-item"><span id="sentence-count">٠</span> جملة</span> |
| <span class="stat-item--sep"></span> |
| <span class="stat-item">⏱ <span id="reading-time">٠</span> د قراءة</span> |
| </div> |
| <div class="editor-actions"> |
| <button onclick="clearEditor()" class="btn-ghost" type="button" title="مسح الكل"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> |
| </button> |
| <button onclick="copyText()" class="btn-ghost" type="button" title="نسخ النص"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| <button id="mobile-sheet-trigger" class="mobile-sheet-trigger" type="button" aria-expanded="false" aria-controls="bottom-sheet"> |
| <span>الاقتراحات (<span id="mobile-suggestion-count">٠</span>)</span> |
| <span aria-hidden="true">▲</span> |
| </button> |
| </div> |
| |
| <div class="sidebar-panel sidebar-desktop"> |
| <div class="surface-card sidebar-card"> |
| <h3 class="text-xl font-bold mb-4 text-right">تقييم الكتابة</h3> |
| <div class="score-ring-wrap" role="img" aria-label="تقييم الكتابة"> |
| <svg class="w-full h-full transform -rotate-90" viewBox="0 0 160 160" aria-hidden="true"> |
| <circle cx="80" cy="80" r="70" fill="none" stroke="var(--color-border)" stroke-width="10"/> |
| <circle id="score-circle" cx="80" cy="80" r="70" fill="none" stroke="url(#scoreGradient)" stroke-width="10" stroke-linecap="round" stroke-dasharray="440" stroke-dashoffset="440" class="score-circle"/> |
| <defs><linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="var(--primary-color)"/><stop offset="100%" stop-color="var(--secondary-color)"/></linearGradient></defs> |
| </svg> |
| <div class="score-value"><span id="score-value">--</span></div> |
| </div> |
| <p id="score-hint" class="text-center text-sm text-secondary">ابدأ الكتابة لرؤية تقييمك</p> |
| </div> |
| <div class="surface-card sidebar-card"> |
| <h3 class="text-xl font-bold mb-4 text-right">الاقتراحات</h3> |
| <div id="suggestions-list" class="suggestions-scroll" role="list" aria-live="polite" aria-label="اقتراحات التصحيح"></div> |
| <button id="apply-all-btn" class="btn-primary apply-all-btn is-hidden" type="button">تطبيق الكل</button> |
| </div> |
| <div class="surface-card sidebar-card sidebar-io"> |
| <h3 class="sidebar-io__title text-right">استيراد وتصدير</h3> |
| <div class="sidebar-io__actions"> |
| <button id="doc-import-btn" class="sidebar-io__btn" type="button" aria-label="استيراد ملف"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg> |
| استيراد |
| </button> |
| <div class="doc-dropdown sidebar-io__dropdown"> |
| <button id="doc-export-trigger" class="sidebar-io__btn" type="button" aria-label="تصدير المستند" aria-haspopup="true" aria-expanded="false"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg> |
| تصدير |
| </button> |
| <div id="doc-export-menu" class="doc-dropdown__menu" role="menu" aria-label="خيارات التصدير"> |
| <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="txt">نصي (.txt)</button> |
| <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="docx">Word (.docx)</button> |
| <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="pdf">PDF (.pdf)</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| |
| <div id="bottom-sheet" class="bottom-sheet" aria-hidden="true"> |
| <div id="bottom-sheet-backdrop" class="bottom-sheet-backdrop"></div> |
| <div class="bottom-sheet-panel" role="dialog" aria-label="الاقتراحات"> |
| <div class="bottom-sheet-handle" aria-hidden="true"></div> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-bold">الاقتراحات</h3> |
| <button id="bottom-sheet-close" class="btn-ghost" type="button" aria-label="إغلاق">إغلاق</button> |
| </div> |
| <div id="bottom-sheet-list" class="suggestions-scroll" role="list" aria-live="polite"></div> |
| <button id="apply-all-sheet" class="btn-primary apply-all-btn mt-4 is-hidden" type="button">تطبيق الكل</button> |
| </div> |
| </div> |
| |
| <div id="doc-export-sheet" class="bottom-sheet" aria-hidden="true"> |
| <div id="doc-export-sheet-backdrop" class="bottom-sheet-backdrop"></div> |
| <div class="bottom-sheet-panel" role="dialog" aria-label="تصدير المستند"> |
| <div class="bottom-sheet-handle" aria-hidden="true"></div> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-bold">تصدير المستند</h3> |
| <button id="doc-export-sheet-close" class="btn-ghost" type="button" aria-label="إغلاق">إغلاق</button> |
| </div> |
| <div class="flex flex-col gap-2"> |
| <button type="button" class="doc-dropdown__item" data-export-format="txt">ملف نصي (.txt)</button> |
| <button type="button" class="doc-dropdown__item" data-export-format="docx">Word (.docx)</button> |
| <button type="button" class="doc-dropdown__item" data-export-format="pdf">PDF (.pdf)</button> |
| </div> |
| </div> |
| </div> |
| <div id="page-pricing" class="page"> |
| <section class="pt-32 pb-24" style="background: var(--background-color);"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h1 class="text-5xl lg:text-6xl font-bold mb-6">خطط <span class="text-gradient">واضحة ومرنة</span></h1> |
| <p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">اختر الخطة المناسبة لك. يمكنك الترقية أو التخفيض في أي وقت.</p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> |
| <div class="p-8 rounded-3xl transition-all hover:scale-105" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="text-center mb-8"> |
| <h3 class="text-3xl font-bold mb-2">مجاني</h3> |
| <p class="text-base mb-6" style="color: var(--text-secondary);">للبدء والتجربة</p> |
| <div class="text-6xl font-bold mb-2"> |
| ٠ |
| </div> |
| <p class="text-base" style="color: var(--text-secondary);">مجاني للأبد</p> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">تدقيق إملائي أساسي</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">٥٠٠ كلمة يوميًا</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">محرر ويب</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: rgba(241, 245, 249, 0.2);" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
| </svg><span class="text-base" style="color: var(--text-secondary);">اقتراحات نحوية</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: rgba(241, 245, 249, 0.2);" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
| </svg><span class="text-base" style="color: var(--text-secondary);">تلخيص النصوص</span></li> |
| </ul><button class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-color);"> ابدأ مجانًا </button> |
| </div> |
| <div class="p-8 rounded-3xl transition-all hover:scale-105 relative shadow-2xl" style="background: linear-gradient(165deg, var(--surface-color) 0%, rgba(59, 130, 246, 0.1) 100%); border: 2px solid var(--primary-color);"> |
| <div class="pricing-badge gradient-accent text-white"> |
| الأكثر استخدامًا |
| </div> |
| <div class="text-center mb-8"> |
| <h3 class="text-3xl font-bold mb-2">احترافي</h3> |
| <p class="text-base mb-6" style="color: var(--text-secondary);">للكُتّاب الجادين</p> |
| <div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٩</span> |
| <div class="text-right"> |
| <div class="text-lg font-bold"> |
| دولار |
| </div> |
| <div class="text-sm" style="color: var(--text-secondary);"> |
| شهريًا |
| </div> |
| </div> |
| </div> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">تدقيق إملائي ونحوي متقدم</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">كلمات غير محدودة</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">تصحيح علامات الترقيم</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">تلخيص النصوص بالذكاء الاصطناعي</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">إضافة المتصفح</span></li> |
| </ul><button class="w-full py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl"> الترقية للاحترافي </button> |
| </div> |
| <div class="p-8 rounded-3xl transition-all hover:scale-105" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);"> |
| <div class="text-center mb-8"> |
| <h3 class="text-3xl font-bold mb-2">مؤسسات</h3> |
| <p class="text-base mb-6" style="color: var(--text-secondary);">للفرق والمنظمات</p> |
| <div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٢٩</span> |
| <div class="text-right"> |
| <div class="text-lg font-bold"> |
| دولار |
| </div> |
| <div class="text-sm" style="color: var(--text-secondary);"> |
| لكل مستخدم/شهر |
| </div> |
| </div> |
| </div> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">كل ميزات الاحترافي</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">إدارة الفرق</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">واجهة برمجية (API)</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">تكامل مخصص</span></li> |
| <li class="flex items-center gap-3"> |
| <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg><span class="text-base">دعم فني ذو أولوية</span></li> |
| </ul><button class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-color);"> تواصل مع المبيعات </button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| <footer class="py-12 border-t footer-bar"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="flex flex-col md:flex-row items-center justify-between gap-6"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 rounded-xl flex items-center justify-center gradient-accent"><span class="text-white text-xl font-bold">ب</span> |
| </div><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span> |
| </div> |
| <div class="flex flex-wrap items-center justify-center gap-6 md:gap-8"><a href="#" class="text-base transition-colors hover:text-white" style="color: var(--text-secondary);">الخصوصية</a> <a href="#" class="text-base transition-colors hover:text-white" style="color: var(--text-secondary);">الشروط</a> <a href="#" class="text-base transition-colors hover:text-white" style="color: var(--text-secondary);">تواصل معنا</a> <a href="https://bayyinah-alpha.vercel.app/" class="footer-external-link text-base transition-colors" target="_blank" rel="noopener noreferrer" aria-label="بَيِّنَة — مساعد ذكي للإجابة عن أسئلة القرآن والحديث وقصص الأنبياء">بَيِّنَة — القرآن والحديث والسيرة</a> |
| </div> |
| <p class="text-base" style="color: var(--text-secondary);">© ٢٠٢٦ بيان. جميع الحقوق محفوظة.</p> |
| </div> |
| </div> |
| </footer> |
| </div> |
| <script> |
| |
| const defaultConfig = { |
| brand_name: 'بيان', |
| hero_headline: 'اكتب العربية بثقة واحتراف', |
| hero_subheadline: 'مساعد ذكي يصحح الإملاء والنحو وعلامات الترقيم ويُلخّص النصوص العربية بدقة عالية.', |
| cta_primary: 'ابدأ الكتابة الآن', |
| primary_color: '#6BA3E0', |
| secondary_color: '#A594E8', |
| font_family: 'Cairo', |
| font_size: 16 |
| }; |
| |
| let config = { ...defaultConfig }; |
| |
| |
| function showPage(pageId) { |
| document.querySelectorAll('.page').forEach(page => page.classList.remove('active')); |
| document.getElementById('page-' + pageId).classList.add('active'); |
| |
| document.querySelectorAll('.nav-link, .mobile-drawer-link').forEach(link => { |
| link.classList.remove('active'); |
| }); |
| |
| document.querySelectorAll(`[data-page="${pageId}"]`).forEach(link => { |
| link.classList.add('active'); |
| }); |
| |
| try { |
| sessionStorage.setItem('bayan_current_page', pageId); |
| } catch (e) {} |
| |
| window.scrollTo(0, 0); |
| } |
| |
| |
| function switchTab(tab) { |
| const writeTab = document.getElementById('write-tab'); |
| const summarizeTab = document.getElementById('summarize-tab'); |
| const writeArea = document.getElementById('write-area'); |
| const summarizeArea = document.getElementById('summarize-area'); |
| |
| if (tab === 'write') { |
| writeTab.classList.add('active'); |
| summarizeTab.classList.remove('active'); |
| writeArea.classList.remove('is-hidden'); |
| summarizeArea.classList.add('is-hidden'); |
| } else { |
| summarizeTab.classList.add('active'); |
| writeTab.classList.remove('active'); |
| writeArea.classList.add('is-hidden'); |
| summarizeArea.classList.remove('is-hidden'); |
| } |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| function updateSummaryLength() { |
| const value = document.getElementById('summary-length').value; |
| const text = ['قصير', 'متوسط', 'طويل'][value - 1]; |
| document.getElementById('summary-length-text').textContent = text; |
| } |
| |
| async function generateSummary(event) { |
| const text = (typeof getEditorText === 'function' ? getEditorText() : '').trim(); |
| |
| if (!text) { |
| const summaryText = document.getElementById('summary-text'); |
| summaryText.innerHTML = '<p class="text-secondary text-center">الرجاء كتابة نص في المحرر أولاً</p>'; |
| document.getElementById('summary-preview').classList.add('show'); |
| return; |
| } |
| |
| const lengthValue = document.getElementById('summary-length').value; |
| const isFullText = document.getElementById('full-text-summary').checked; |
| const generateButton = event ? event.target : document.getElementById('generate-summary-btn'); |
| const summaryText = document.getElementById('summary-text'); |
| const summaryPreview = document.getElementById('summary-preview'); |
| |
| |
| const originalButtonText = generateButton.textContent; |
| generateButton.textContent = 'جاري التوليد...'; |
| generateButton.disabled = true; |
| summaryText.innerHTML = '<div class="summary-loading"><span class="summary-loading__spinner" aria-hidden="true"></span><p class="summary-loading__text">جاري توليد الملخص...</p></div>'; |
| summaryPreview.classList.add('show'); |
| |
| |
| |
| try { |
| |
| const response = await fetch('/api/summarize', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| text: text, |
| length: parseInt(lengthValue), |
| full_text: isFullText |
| }) |
| }); |
| |
| const data = await response.json(); |
| |
| if (!response.ok) { |
| throw new Error(data.error || 'حدث خطأ أثناء توليد الملخص'); |
| } |
| |
| if (data.status === 'success' && data.summary) { |
| let summaryContent = data.summary; |
| |
| |
| if (window._summaryMode === 'bullets') { |
| const sentences = summaryContent.split(/[.،؛]\s*/).filter(s => s.trim().length > 2); |
| const ul = document.createElement('ul'); |
| ul.style.cssText = 'list-style: disc; padding-right: 1.5rem; direction: rtl; text-align: right;'; |
| sentences.forEach(s => { |
| const li = document.createElement('li'); |
| li.textContent = s.trim(); |
| li.style.marginBottom = '8px'; |
| ul.appendChild(li); |
| }); |
| summaryText.textContent = ''; |
| summaryText.appendChild(ul); |
| } else { |
| const p = document.createElement('p'); |
| p.textContent = summaryContent; |
| summaryText.textContent = ''; |
| summaryText.appendChild(p); |
| } |
| |
| |
| if (typeof updateSummaryStats === 'function') { |
| updateSummaryStats(summaryContent); |
| } |
| } else { |
| throw new Error(data.error || 'لم يتم توليد ملخص'); |
| } |
| |
| } catch (error) { |
| console.error('Error generating summary:', error); |
| const safeMsg = typeof escapeHtml === 'function' |
| ? escapeHtml(error.message || 'تعذر توليد الملخص. يرجى المحاولة مرة أخرى.') |
| : String(error.message || 'تعذر توليد الملخص. يرجى المحاولة مرة أخرى.'); |
| summaryText.innerHTML = ` |
| <div class="summary-loading"> |
| <p class="summary-error">⚠️ حدث خطأ</p> |
| <p class="text-secondary text-caption">${safeMsg}</p> |
| <p class="text-muted text-label mt-2">تأكد من أن الخادم يعمل وأن النموذج محمّل بشكل صحيح.</p> |
| </div> |
| `; |
| } finally { |
| |
| generateButton.textContent = originalButtonText; |
| generateButton.disabled = false; |
| } |
| } |
| |
| function copySummary() { |
| const summaryText = document.getElementById('summary-text').innerText; |
| const tempTextarea = document.createElement('textarea'); |
| tempTextarea.value = summaryText; |
| document.body.appendChild(tempTextarea); |
| tempTextarea.select(); |
| document.execCommand('copy'); |
| document.body.removeChild(tempTextarea); |
| |
| const btn = event.target; |
| const originalText = btn.textContent; |
| btn.textContent = 'تم النسخ!'; |
| setTimeout(() => btn.textContent = originalText, 2000); |
| } |
| |
| |
| async function onConfigChange(cfg) { |
| config = { ...defaultConfig, ...cfg }; |
| |
| |
| const primary = config.primary_color || defaultConfig.primary_color; |
| const secondary = config.secondary_color || defaultConfig.secondary_color; |
| document.documentElement.style.setProperty('--color-primary', primary); |
| document.documentElement.style.setProperty('--color-secondary', secondary); |
| document.documentElement.style.setProperty('--primary-color', primary); |
| document.documentElement.style.setProperty('--secondary-color', secondary); |
| |
| const brandName = config.brand_name || defaultConfig.brand_name; |
| const navBrand = document.getElementById('nav-brand'); |
| const footerBrand = document.getElementById('footer-brand'); |
| if (navBrand) navBrand.textContent = brandName; |
| if (footerBrand) footerBrand.textContent = brandName; |
| |
| const heroHeadline = config.hero_headline || defaultConfig.hero_headline; |
| const headlineEl = document.getElementById('hero-headline'); |
| if (headlineEl) { |
| const parts = heroHeadline.split('\n'); |
| if (parts.length > 1) { |
| headlineEl.innerHTML = parts[0] + '<br/><span class="text-gradient">' + parts[1] + '</span>'; |
| } else { |
| headlineEl.innerHTML = heroHeadline.replace('بثقة واحتراف', '<span class="text-gradient">بثقة واحتراف</span>'); |
| } |
| } |
| |
| const heroSubheadline = document.getElementById('hero-subheadline'); |
| if (heroSubheadline) { |
| heroSubheadline.textContent = config.hero_subheadline || defaultConfig.hero_subheadline; |
| } |
| |
| const ctaPrimary = config.cta_primary || defaultConfig.cta_primary; |
| const navCta = document.getElementById('nav-cta'); |
| const heroCta = document.getElementById('hero-cta-primary'); |
| if (navCta) navCta.textContent = ctaPrimary; |
| if (heroCta) heroCta.textContent = ctaPrimary; |
| |
| const fontFamily = config.font_family || defaultConfig.font_family; |
| const fontSize = config.font_size || defaultConfig.font_size; |
| document.body.style.fontFamily = `${fontFamily}, 'Cairo', sans-serif`; |
| document.body.style.fontSize = `${fontSize}px`; |
| } |
| |
| function mapToCapabilities(cfg) { |
| return { |
| recolorables: [ |
| { |
| get: () => cfg.primary_color || defaultConfig.primary_color, |
| set: (value) => { cfg.primary_color = value; window.elementSdk.setConfig({ primary_color: value }); } |
| }, |
| { |
| get: () => cfg.secondary_color || defaultConfig.secondary_color, |
| set: (value) => { cfg.secondary_color = value; window.elementSdk.setConfig({ secondary_color: value }); } |
| } |
| ], |
| borderables: [], |
| fontEditable: { |
| get: () => cfg.font_family || defaultConfig.font_family, |
| set: (value) => { cfg.font_family = value; window.elementSdk.setConfig({ font_family: value }); } |
| }, |
| fontSizeable: { |
| get: () => cfg.font_size || defaultConfig.font_size, |
| set: (value) => { cfg.font_size = value; window.elementSdk.setConfig({ font_size: value }); } |
| } |
| }; |
| } |
| |
| function mapToEditPanelValues(cfg) { |
| return new Map([ |
| ['brand_name', cfg.brand_name || defaultConfig.brand_name], |
| ['hero_headline', cfg.hero_headline || defaultConfig.hero_headline], |
| ['hero_subheadline', cfg.hero_subheadline || defaultConfig.hero_subheadline], |
| ['cta_primary', cfg.cta_primary || defaultConfig.cta_primary] |
| ]); |
| } |
| |
| |
| if (window.elementSdk) { |
| window.elementSdk.init({ |
| defaultConfig, |
| onConfigChange, |
| mapToCapabilities, |
| mapToEditPanelValues |
| }); |
| } else { |
| onConfigChange(defaultConfig); |
| } |
| |
| document.addEventListener('DOMContentLoaded', async () => { |
| await initAuth(); |
| initTheme(); |
| initUI(); |
| initEditor(); |
| if (typeof initFormatToolbar === 'function') initFormatToolbar(); |
| if (typeof initDocSearch === 'function') initDocSearch(); |
| initDocuments(); |
| updateSuggestionsList([]); |
| |
| if (typeof SyncManager !== 'undefined') SyncManager.init(); |
| |
| |
| await initSettingsSync(); |
| initDocumentsCloud(); |
| initSummaries(); |
| |
| try { |
| const savedPage = sessionStorage.getItem('bayan_current_page'); |
| if (savedPage) { |
| showPage(savedPage); |
| } else if (window.location.hash === '#/editor') { |
| showPage('editor'); |
| } else { |
| showPage('home'); |
| } |
| } catch (e) { |
| if (window.location.hash === '#/editor') { |
| showPage('editor'); |
| } else { |
| showPage('home'); |
| } |
| } |
| }); |
| </script> |
| <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9c279951d0bdd7df',t:'MTc2OTE3NDUzNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> |
| </html> |
|
|
