feat: UI/UX Overhaul Phase 1-9 — CSS modernization, RTL arrows, pricing features, confirm dialog, meta SEO, footer links, hero copy, shimmer/glow/glassmorphism

src/css/base.css

@@ -8,6 +8,7 @@
 
 html {
   font-family: var(--font-family-primary);
+  scroll-behavior: smooth;
 }
 
 body {
@@ -23,6 +24,33 @@ body {
   text-rendering: optimizeLegibility;
 }
 
+/* ── Selection highlight ── */
+::selection {
+  background: rgba(107, 163, 224, 0.3);
+  color: inherit;
+}
+
+/* ── Custom Scrollbar ── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
 /* ── Type scale ── */
 .text-display {
   font-size: var(--font-size-display);

src/css/components.css

@@ -3208,3 +3208,177 @@ input[type="range"]::-moz-range-thumb {
     font-size: 20px;
   }
 }
+
+/* ═══════════════════════════════════════════
+   UI/UX Overhaul — New Components
+   ═══════════════════════════════════════════ */
+
+/* ── Enhanced Nav Glassmorphism ── */
+.site-nav {
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+}
+
+/* ── Card hover glow ── */
+.card-hover {
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+.card-hover:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-glow);
+}
+
+/* ── Empty State Component ── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  gap: 0.75rem;
+}
+.empty-state__icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary-subtle-bg);
+  color: var(--color-primary);
+  margin-bottom: 0.25rem;
+}
+.empty-state__title {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+.empty-state__subtitle {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  max-width: 280px;
+  line-height: 1.6;
+}
+
+/* ── Confirmation Dialog ── */
+.confirm-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-overlay);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.15s ease-out;
+}
+.confirm-dialog {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-xl);
+  padding: 2rem;
+  max-width: 380px;
+  width: 90%;
+  box-shadow: var(--shadow-popover);
+  text-align: center;
+  animation: modalSlideUp 0.25s ease-out;
+}
+.confirm-dialog__title {
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-bold);
+  margin-bottom: 0.5rem;
+}
+.confirm-dialog__message {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.7;
+}
+.confirm-dialog__actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+}
+.confirm-dialog__btn {
+  padding: 0.6rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+}
+.confirm-dialog__btn:hover {
+  background: var(--color-border);
+}
+.confirm-dialog__btn--danger {
+  background: var(--color-error);
+  color: white;
+  border-color: transparent;
+}
+.confirm-dialog__btn--danger:hover {
+  opacity: 0.9;
+}
+
+/* ── Modal entrance animation ── */
+@keyframes modalSlideUp {
+  from { opacity: 0; transform: translateY(16px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.quran-modal-panel,
+.auth-gate-panel,
+.confirm-dialog {
+  animation: modalSlideUp 0.25s ease-out;
+}
+
+/* ── Toast with icons ── */
+.toast--success::before { content: '✓ '; }
+.toast--error::before { content: '✕ '; }
+.toast--warning::before { content: '⚠ '; }
+
+/* ── Pricing card glow (active plan) ── */
+.pricing-glow {
+  position: relative;
+}
+.pricing-glow::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  z-index: -1;
+  opacity: 0.5;
+  filter: blur(12px);
+  animation: pricingPulse 3s ease-in-out infinite;
+}
+@keyframes pricingPulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.6; }
+}
+
+/* ── Beta banner shimmer ── */
+@keyframes betaShimmer {
+  0% { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+.beta-shimmer {
+  background-size: 200% auto;
+  background-image: linear-gradient(90deg,
+    transparent 0%,
+    rgba(107, 163, 224, 0.06) 40%,
+    rgba(165, 148, 232, 0.08) 60%,
+    transparent 100%
+  );
+  animation: betaShimmer 4s linear infinite;
+}
+
+/* ── Disabled button state ── */
+button:disabled,
+button[disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+  filter: grayscale(0.3);
+}

src/css/tokens.css

@@ -30,15 +30,18 @@
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;
+  --spacing-section: 6rem;
 
   --radius-sm: 0.5rem;
   --radius-md: 0.75rem;
   --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
   --radius-card: 1rem;
 
   --transition-fast: 0.15s ease;
   --transition-base: 0.2s ease;
   --transition-slow: 0.3s ease;
+  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 /* ── Dark Theme — soft charcoal, easy on eyes ── */
@@ -70,9 +73,11 @@
 
   --focus-ring: rgba(107, 163, 224, 0.42);
 
+  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.16);
   --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28);
   --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.38);
   --shadow-editor: 0 2px 16px rgba(0, 0, 0, 0.2);
+  --shadow-glow: 0 0 20px rgba(107, 163, 224, 0.15);
 
   --color-overlay: rgba(8, 10, 14, 0.62);
 
@@ -133,9 +138,11 @@
 
   --focus-ring: rgba(43, 108, 184, 0.32);
 
+  --shadow-xs: 0 1px 3px rgba(26, 29, 33, 0.05);
   --shadow-card: 0 6px 20px rgba(26, 29, 33, 0.07);
   --shadow-popover: 0 14px 36px rgba(26, 29, 33, 0.11);
   --shadow-editor: 0 1px 8px rgba(26, 29, 33, 0.05);
+  --shadow-glow: 0 0 20px rgba(43, 108, 184, 0.1);
 
   --color-overlay: rgba(26, 29, 33, 0.38);
 

src/index.html

@@ -6,7 +6,7 @@
   <meta name="supabase-url" content="">
   <meta name="supabase-anon-key" content="">
   <title>بيان - مساعد الكتابة العربية الذكي</title>
-   <meta name="description" content="بيان — منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي — مصمّمة خصيصًا للغة العربية. جرّبه مجاناً!">
+   <meta name="description" content="بيان — منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي وتدقيق القرآن الكريم وتحويل اللهجات — مصمّمة خصيصًا للغة العربية. جرّبه مجاناً!">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -162,8 +162,8 @@
        <div class="text-center lg:text-right animate-fade-in">
 
         <h1 id="hero-headline" class="text-5xl lg:text-7xl font-bold leading-tight mb-6" style="line-height: 1.4;">اكتب العربية<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 onclick="showPage('features')" 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.35); color: var(--text-color); box-shadow: 0 0 20px rgba(107, 163, 224, 0.12);">اكتشف الميزات</button>
+        <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 onclick="showPage('features')" 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.35); color: var(--text-color); box-shadow: 0 0 20px rgba(107, 163, 224, 0.12);">اكتشف الميزات</button>
         </div><!-- Stats -->
         <div class="flex items-center gap-8 justify-center lg:justify-start">
          <div class="text-center">
@@ -307,7 +307,7 @@
          <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 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>
@@ -348,7 +348,7 @@
         </div>
        </div>
        <div class="text-center mt-12">
-        <button 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 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>
        </div>
       </div>
      </section>
@@ -679,9 +679,9 @@
             </div>
             <span id="auto-save-status" class="text-xs text-secondary" style="opacity:0;transition:opacity 0.3s;"></span>
             <div class="window-dots" aria-hidden="true">
-             <span class="dot dot--red" title="إغلاق المستند" onclick="if(confirm('إغلاق المستند الحالي؟')){document.getElementById('editor-surface').innerHTML='';if(typeof updatePlaceholder==='function')updatePlaceholder();if(typeof updateEditorStats==='function')updateEditorStats()}" style="cursor:pointer;"></span>
-             <span class="dot dot--yellow" title="طي الاقتراحات" onclick="document.querySelector('.sidebar-desktop')?.classList.toggle('collapsed')" style="cursor:pointer;"></span>
-             <span class="dot dot--green" title="توسيع المحرر" onclick="document.querySelector('.editor-layout')?.classList.toggle('editor-fullscreen')" style="cursor:pointer;"></span>
+             <span class="dot dot--red" title="مسح المحرر" onclick="showConfirmDialog('مسح المحرر','هل تريد مسح جميع محتويات المحرر؟ لا يمكن التراجع عن هذا.',function(){document.getElementById('editor-surface').innerHTML='';if(typeof updatePlaceholder==='function')updatePlaceholder();if(typeof updateEditorStats==='function')updateEditorStats()})" style="cursor:pointer;"></span>
+             <span class="dot dot--yellow" title="طي لوحة الاقتراحات" onclick="document.querySelector('.sidebar-desktop')?.classList.toggle('collapsed')" style="cursor:pointer;"></span>
+             <span class="dot dot--green" title="توسيع المحرر للعرض الكامل" onclick="document.querySelector('.editor-layout')?.classList.toggle('editor-fullscreen')" style="cursor:pointer;"></span>
             </div>
            </div>
           </div>
@@ -980,7 +980,7 @@
        <p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">جميع الميزات متاحة مجانًا خلال الإصدار التجريبي. الخطط المدفوعة قادمة قريبًا.</p>
       </div>
       <!-- Beta Banner -->
-      <div class="text-center mb-12 p-6 rounded-2xl" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.1), rgba(165, 148, 232, 0.1)); border: 1px solid rgba(107, 163, 224, 0.2);">
+      <div class="text-center mb-12 p-6 rounded-2xl beta-shimmer" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.1), rgba(165, 148, 232, 0.1)); border: 1px solid rgba(107, 163, 224, 0.2);">
        <div class="flex items-center justify-center gap-2 mb-2">
         <span class="text-sm font-bold px-3 py-1 rounded-full text-white gradient-accent">BETA</span>
         <span class="text-lg font-bold">الإصدار التجريبي — مجاني بالكامل</span>
@@ -988,7 +988,7 @@
        <p class="text-base" style="color: var(--text-secondary);">استمتع بجميع ميزات بيان بدون أي قيود أثناء فترة التطوير</p>
       </div>
       <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"><!-- Current: Beta Free -->
-       <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="p-8 rounded-3xl transition-all hover:scale-105 relative shadow-2xl pricing-glow" 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>
@@ -1011,9 +1011,13 @@
           <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">تصدير PDF و Word</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 onclick="showPage('editor')" class="w-full py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">ابدأ الكتابة مجانًا →</button>
+        </ul><button onclick="showPage('editor')" 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><!-- Future: Pro Plan -->
        <div class="p-8 rounded-3xl transition-all hover:scale-105 relative" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.7;">
         <div class="pricing-badge" style="background: var(--color-surface-elevated); color: var(--color-text-secondary);">
@@ -1077,7 +1081,7 @@
       <div class="text-8xl font-bold text-gradient mb-6">٤٠٤</div>
       <h2 class="text-3xl font-bold mb-4">الصفحة غير موجودة</h2>
       <p class="text-lg mb-8" style="color: var(--text-secondary);">يبدو أن الصفحة التي تبحث عنها غير متاحة.</p>
-      <button onclick="showPage('home')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105">العودة للرئيسية ←</button>
+      <button onclick="showPage('home')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105">→ العودة للرئيسية</button>
      </div>
     </section>
    </div><!-- Footer -->
@@ -1088,7 +1092,7 @@
         <div class="flex items-center gap-3 mb-4">
          <svg width="24" height="24" fill="none" stroke="url(#grad1)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
         </div>
-        <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">منصة ذكاء اصطناعي للكتابة العربية — تدقيق إملائي ونحوي، ترقيم، تلخيص، وإكمال تلقائي ذكي.</p>
+        <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">منصة ذكاء اصطناعي للكتابة العربية — تدقيق إملائي ونحوي، ترقيم، تلخيص، إكمال تلقائي، تدقيق القرآن، وتحويل اللهجات.</p>
        </div>
        <div>
         <h4 class="text-base font-bold mb-4">المنتج</h4>
@@ -1133,6 +1137,28 @@
       }, duration);
     }
 
+    // Custom confirmation dialog (replaces window.confirm)
+    function showConfirmDialog(title, message, onConfirm) {
+      var overlay = document.createElement('div');
+      overlay.className = 'confirm-dialog-overlay';
+      overlay.innerHTML =
+        '<div class="confirm-dialog" dir="rtl">' +
+          '<div class="confirm-dialog__title">' + title + '</div>' +
+          '<div class="confirm-dialog__message">' + message + '</div>' +
+          '<div class="confirm-dialog__actions">' +
+            '<button class="confirm-dialog__btn" id="confirm-cancel">\u0625\u0644\u063a\u0627\u0621</button>' +
+            '<button class="confirm-dialog__btn confirm-dialog__btn--danger" id="confirm-ok">\u062a\u0623\u0643\u064a\u062f</button>' +
+          '</div>' +
+        '</div>';
+      document.body.appendChild(overlay);
+      overlay.querySelector('#confirm-cancel').onclick = function() { overlay.remove(); };
+      overlay.querySelector('#confirm-ok').onclick = function() { overlay.remove(); if (onConfirm) onConfirm(); };
+      overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.remove(); });
+      document.addEventListener('keydown', function _esc(e) {
+        if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', _esc); }
+      });
+    }
+
     // Scroll to top
     (function() {
       const btn = document.getElementById('scroll-top-btn');