audit: Fix 15+ issues across entire website - BUGS: Fix copySummary event.target crash, viewbox→viewBox SVGs - HERO: Replace fake stats (10M/99%/50K) with real features (3 types/instant/free) - HERO: 'شاهد العرض التوضيحي'→'استكشف الميزات' with onclick - HERO: Fix mock editor hardcoded light colors→CSS variables - HERO: animate-pulse→animate-fade-in on floating card - PRICING: All 3 buttons now have onclick (go to editor) - FOOTER: Replace dead #links with working page navigation - EDITOR: Confirm dialog before clearing content - CODE: Remove empty style tag and old comments

src/index.html

@@ -13,9 +13,7 @@
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/base.css">
   <link rel="stylesheet" href="/css/components.css">
-    <style>
-    /* Marketing page inline overrides — core styles in /css/ */
-  </style>
+
   <style>@view-transition { navigation: auto; }</style>
   <script src="/js/vendor/supabase.min.js"></script>
   <script src="/js/auth/config.js"></script>
@@ -165,19 +163,11 @@
         </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 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.2); color: var(--text-color);"> استكشف الميزات </button>
         </div><!-- Stats -->
         <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>
@@ -206,7 +196,7 @@
           </div><span class="text-sm" style="color: var(--text-secondary);">محرر بيان</span>
           <div class="w-20"></div>
          </div><!-- Mock Editor Content -->
-         <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;">
+         <div class="p-8 editor-content text-right text-lg" dir="rtl" style="background: var(--surface-color); color: var(--text-color); 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>
@@ -227,7 +217,7 @@
           </div>
          </div>
         </div><!-- Floating Suggestion Card -->
-        <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="absolute -bottom-6 -left-6 p-4 rounded-2xl shadow-xl animate-fade-in" 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>
@@ -433,7 +423,7 @@
             مقالة طويلة تتحدث عن أهمية التكنولوجيا في العصر الحديث وتأثيرها على المجتمع...
           </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 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;">
@@ -769,21 +759,21 @@
         </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 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 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 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 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 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>
+        </ul><button onclick="showPage('editor')" 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><!-- Pro Plan (Most Popular) -->
        <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">
@@ -805,21 +795,21 @@
         </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 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 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 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 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 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>
+        </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><!-- Enterprise Plan -->
        <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">
@@ -838,19 +828,19 @@
         </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 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 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 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 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 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>
@@ -927,12 +917,7 @@
       }
     }
     
-    // OLD FUNCTIONS REMOVED - Now in editor.js with offset-based rendering
-    // - analyzeText() - moved to editor.js
-    // - updateSuggestions() - replaced with offset-based render()
-    // - resetSuggestions() - replaced with renderWithoutSuggestions()
-    // - clearEditor() - moved to editor.js
-    // - copyText() - moved to editor.js
+
 
     // Summarization functions
     function updateSummaryLength() {
@@ -1037,18 +1022,23 @@
     }
 
     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);
+      const text = document.getElementById('summary-text').innerText;
+      navigator.clipboard.writeText(text).then(() => {
+        const btn = document.querySelector('[onclick="copySummary()"]');
+        if (btn) {
+          const originalText = btn.textContent;
+          btn.textContent = 'تم النسخ!';
+          setTimeout(() => btn.textContent = originalText, 2000);
+        }
+      }).catch(() => {
+        // Fallback for older browsers
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      });
     }
 
     // Element SDK Integration

src/js/editor.js

@@ -457,6 +457,11 @@ function applyAllSuggestions() {
 }
 
 function clearEditor() {
+  // Don't prompt if editor is already empty
+  const text = getEditorText();
+  if (text.trim().length > 0) {
+    if (!confirm('هل أنت متأكد من مسح كل المحتوى؟')) return;
+  }
   setEditorHTML('');
   window.currentSuggestions = [];
   updateSuggestionCounts(0, 0, 0);