audit-v2: Major UI overhaul — 12 improvements - HERO: Fix broken stats HTML, real Arabic errors in mock editor - HERO: Floating card shows actual correction (الصحيحه→الصحيحة) - HERO: Status bar matches shown errors (2 spelling, 1 grammar, 2 punctuation) - CSS: Custom gradient range slider (replaces browser default) - CSS: Toast notification system with animations - CSS: Scroll-to-top button with fade-in on scroll - JS: Toast notifications for copy actions - JS: Scroll-to-top button logic - PRICING: 'إضافة المتصفح'→'تصدير PDF و Word' (real feature) - EDITOR: copyText uses toast instead of button text change

src/css/components.css

@@ -2476,3 +2476,122 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 
+/* ── Custom Range Slider ── */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--color-border);
+  outline: none;
+  cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  transition: transform 0.15s ease;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+/* ── Toast Notifications ── */
+.toast-container {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  pointer-events: none;
+}
+
+.toast {
+  padding: 12px 24px;
+  border-radius: 12px;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: auto;
+  animation: toast-in 0.3s ease forwards;
+}
+
+.toast.toast-out {
+  animation: toast-out 0.25s ease forwards;
+}
+
+.toast--success { border-color: rgba(34, 197, 94, 0.4); }
+.toast--error { border-color: rgba(239, 68, 68, 0.4); }
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes toast-out {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(16px); }
+}
+
+/* ── Scroll to Top ── */
+.scroll-top-btn {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.scroll-top-btn.visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.scroll-top-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}

src/index.html

@@ -168,20 +168,28 @@
         <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>
@@ -197,14 +205,14 @@
           <div class="w-20"></div>
          </div><!-- Mock Editor Content -->
          <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 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="spelling-error">الى</span> المدرسة صباحاً<span class="punctuation-suggestion">.</span></p>
           <p>جرّب المحرر الآن وشاهد كيف يمكن أن تصبح كتابتك أفضل!</p>
          </div><!-- Mock Stats Bar -->
          <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 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>
@@ -213,10 +221,9 @@
             <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 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><!-- Floating Suggestion Card -->
         <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>
@@ -808,7 +815,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>
+          </svg><span class="text-base">تصدير PDF و Word</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>
        </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);">
@@ -861,8 +868,41 @@
      </div>
     </div>
    </footer>
+   <!-- Toast Container -->
+   <div id="toast-container" class="toast-container"></div>
+   <!-- Scroll to Top -->
+   <button id="scroll-top-btn" class="scroll-top-btn" type="button" aria-label="العودة للأعلى">
+    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
+   </button>
   </div>
   <script>
+    // Toast notification system
+    function showToast(message, type = 'success', duration = 2500) {
+      const container = document.getElementById('toast-container');
+      if (!container) return;
+      const toast = document.createElement('div');
+      toast.className = 'toast toast--' + type;
+      toast.textContent = message;
+      container.appendChild(toast);
+      setTimeout(() => {
+        toast.classList.add('toast-out');
+        setTimeout(() => toast.remove(), 300);
+      }, duration);
+    }
+
+    // Scroll to top
+    (function() {
+      const btn = document.getElementById('scroll-top-btn');
+      const scrollContainer = document.querySelector('.h-full.overflow-auto');
+      if (!btn || !scrollContainer) return;
+      scrollContainer.addEventListener('scroll', () => {
+        btn.classList.toggle('visible', scrollContainer.scrollTop > 400);
+      });
+      btn.addEventListener('click', () => {
+        scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+      });
+    })();
+
     // Default configuration
     const defaultConfig = {
       brand_name: 'بيان',
@@ -1028,6 +1068,7 @@
         if (btn) {
           const originalText = btn.textContent;
           btn.textContent = 'تم النسخ!';
+          if (typeof showToast === 'function') showToast('✓ تم نسخ الملخص');
           setTimeout(() => btn.textContent = originalText, 2000);
         }
       }).catch(() => {

src/js/editor.js

@@ -504,21 +504,17 @@ function loadDocumentText(text, options = {}) {
 
 function copyText() {
   const text = getEditorText();
-  navigator.clipboard.writeText(text).catch(() => {
+  navigator.clipboard.writeText(text).then(() => {
+    if (typeof showToast === 'function') showToast('✓ تم نسخ النص');
+  }).catch(() => {
     const temp = document.createElement('textarea');
     temp.value = text;
     document.body.appendChild(temp);
     temp.select();
     document.execCommand('copy');
     document.body.removeChild(temp);
+    if (typeof showToast === 'function') showToast('✓ تم نسخ النص');
   });
-
-  const btn = event?.target;
-  if (btn) {
-    const originalText = btn.textContent;
-    btn.textContent = 'تم النسخ!';
-    setTimeout(() => { btn.textContent = originalText; }, 2000);
-  }
 }
 
 if (typeof module !== 'undefined' && module.exports) {