feat: add Quran verification + Dialect conversion features (UI only, no backend)

src/index.html

@@ -248,7 +248,7 @@
        <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-5 gap-6"><!-- Feature 1: Spelling -->
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"><!-- Feature 1: Spelling -->
        <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;">
          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
@@ -284,6 +284,21 @@
          <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>
+<!-- Feature 6: Quran Verification -->
+        <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(6, 182, 212, 0.15); color: #06b6d4;">
+          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
+         </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><!-- Feature 7: Dialect Conversion -->
+        <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(249, 115, 22, 0.15); color: #f97316;">
+          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
+         </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>
@@ -477,6 +492,56 @@
           <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><!-- Feature 6: Quran Verification -->
+       <div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
+        <div class="text-right">
+         <div class="feature-icon mb-6" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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></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;"><span style="font-size: 13px;">📝 النص المحدد:</span><br><span style="font-size: 16px;">لقد حق القول على اكثرهم</span></div>
+           <div class="flex items-center justify-center my-4"><svg class="w-8 h-8" style="color: #06b6d4;" 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(6, 182, 212, 0.1); border-right: 4px solid #06b6d4; line-height: 2.2;">
+            <div class="text-sm font-bold mb-3" style="color: #06b6d4;">✓ النص القرآني المدقق</div>
+            <p style="color: var(--text-color); font-size: 22px; font-family: 'Traditional Arabic', serif;">﴿لَقَدْ حَقَّ الْقَوْلُ عَلَىٰ أَكْثَرِهِمْ﴾</p>
+            <p class="mt-2" style="color: var(--text-secondary); font-size: 14px;">[يس: آية ٧]</p>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div><!-- Feature 7: Dialect Conversion -->
+       <div class="grid lg:grid-cols-2 gap-16 items-center mt-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" dir="rtl">
+           <div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); line-height: 1.8;"><span style="font-size: 13px; color: var(--text-secondary);">🗣️ النص باللهجة:</span><br><span style="font-size: 16px; color: var(--text-color);">ازيك يا صاحبي، انت فين دلوقتي؟ انا مستنيك من بدري</span></div>
+           <div class="flex items-center justify-center my-4"><svg class="w-8 h-8" style="color: #f97316;" 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(249, 115, 22, 0.1); border-right: 4px solid #f97316; line-height: 2;">
+            <div class="text-sm font-bold mb-3" style="color: #f97316;">✓ النص بالعربية الفصحى</div>
+            <p style="color: var(--text-color);">كيف حالك يا صديقي، أين أنت الآن؟ أنا أنتظرك منذ وقت مبكر</p>
+            <div class="flex items-center gap-2 mt-3"><span class="text-xs px-2 py-1 rounded-full" style="background: rgba(249, 115, 22, 0.15); color: #f97316;">🇪🇬 لهجة مصرية</span><span class="text-xs" style="color: var(--text-secondary);">→ عربية فصحى</span></div>
+           </div>
+          </div>
+         </div>
+        </div>
+        <div class="order-1 lg:order-2 text-right">
+         <div class="feature-icon mb-6" style="background: rgba(249, 115, 22, 0.15); color: #f97316; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg></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>
      </div>
@@ -515,6 +580,7 @@
             <div class="toolbar-separator"></div>
             <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>
+             <button id="dialect-tab" onclick="switchTab('dialect')" class="editor-tab" type="button">تحويل للفصحى</button>
             <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>
@@ -627,6 +693,13 @@
             <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="M6 4h12v3M12 4v16"/><path stroke-linecap="round" stroke-width="2.5" stroke="currentColor" d="M5 19L19 5" opacity="0.6"/></svg>
            </button>
           </div>
+           <div class="fmt-divider"></div>
+           <!-- Quran verification -->
+           <div class="fmt-group">
+            <button id="fmt-quran" class="fmt-btn" onclick="verifyQuranText()" type="button" title="تدقيق النص القرآني" style="color: #06b6d4;">
+             <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 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>
+            </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">
@@ -1010,24 +1083,20 @@
     function switchTab(tab) {
       const writeTab = document.getElementById('write-tab');
       const summarizeTab = document.getElementById('summarize-tab');
+      const dialectTab = document.getElementById('dialect-tab');
       const writeArea = document.getElementById('write-area');
       const summarizeArea = document.getElementById('summarize-area');
+      const dialectArea = document.getElementById('dialect-area');
       const formatToolbar = document.getElementById('format-toolbar');
-
-      if (tab === 'write') {
-        writeTab.classList.add('active');
-        summarizeTab.classList.remove('active');
-        writeArea.classList.remove('is-hidden');
-        summarizeArea.classList.add('is-hidden');
-        if (formatToolbar) formatToolbar.style.display = '';
-      } else {
-        summarizeTab.classList.add('active');
-        writeTab.classList.remove('active');
-        writeArea.classList.add('is-hidden');
-        summarizeArea.classList.remove('is-hidden');
-        if (formatToolbar) formatToolbar.style.display = 'none';
-      }
+      [writeTab, summarizeTab, dialectTab].forEach(function(t){if(t)t.classList.remove('active');});
+      [writeArea, summarizeArea, dialectArea].forEach(function(a){if(a)a.classList.add('is-hidden');});
+      if (tab === 'write') { writeTab.classList.add('active'); writeArea.classList.remove('is-hidden'); if(formatToolbar)formatToolbar.style.display=''; }
+      else if (tab === 'summarize') { summarizeTab.classList.add('active'); summarizeArea.classList.remove('is-hidden'); if(formatToolbar)formatToolbar.style.display='none'; }
+      else if (tab === 'dialect') { dialectTab.classList.add('active'); dialectArea.classList.remove('is-hidden'); if(formatToolbar)formatToolbar.style.display='none'; }
     }
+    function convertDialect(){var i=document.getElementById('dialect-input').value.trim();if(!i){if(typeof showToast==='function')showToast('الرجاء كتابة نص أولاً');return;}var r=document.getElementById('dialect-result-card');var d=document.getElementById('dialect-result');d.innerHTML='<p class="text-secondary text-center">⏳ جاري التحويل...</p>';r.classList.remove('is-hidden');setTimeout(function(){d.innerHTML='<p class="text-secondary text-center">🚧 هذه الميزة قيد التطوير — ستتوفر قريبًا</p>';},1000);}
+    function copyDialectResult(){var t=document.getElementById('dialect-result');if(t){navigator.clipboard.writeText(t.innerText);if(typeof showToast==='function')showToast('✓ تم النسخ');}}
+    function verifyQuranText(){var s=window.getSelection();var t=s?s.toString().trim():'';if(!t){if(typeof showToast==='function')showToast('علّم على النص القرآني أولاً');return;}if(typeof showToast==='function')showToast('🚧 تدقيق النص القرآني — قيد التطوير');}