Update index.html

index.html

@@ -54,27 +54,21 @@
       border-radius: 3px;
       font-weight: bold;
     }
+    .highlight-date {
+      background-color: #C6F6D5;
+      padding: 0 4px;
+      border-radius: 3px;
+      font-weight: bold;
+    }
 
     /* ================================
-       تنسيق عرض السطور في المعاينة
+       تنسيق عرض الفقرات في المعاينة
     ================================= */
-    .split-view {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 1rem;
-    }
-    .line-item {
-      display: flex;
-      align-items: flex-start;
-      margin-bottom: 0.5rem;
-    }
-    .line-number {
-      width: 30px;
-      font-weight: bold;
-      color: #4B5563;
-      flex-shrink: 0;
+    .paragraph-view p {
+      margin-bottom: 1rem;
+      padding: 0.5rem;
+      border-bottom: 1px solid #e2e8f0;
     }
-    .line-text { flex: 1; }
 
     /* ================================
        تحسين تنسيق البطاقات والعناصر
@@ -188,15 +182,15 @@
           <i class="fas fa-search text-green-600 ml-2"></i> نتائج التحليل والمقارنة
         </h2>
         <div id="errorsList" class="space-y-3 mb-6"></div>
-        <div class="result-section split-view">
-          <!-- عرض النص المصدر بعد التحديد مع ترقيم السطور -->
+        <div class="result-section paragraph-view">
+          <!-- عرض النص المصدر بعد التحديد على شكل فقرات -->
           <div>
             <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
               <i class="fas fa-file-alt text-indigo-600 ml-2"></i> النص المصدر (مع التعليم)
             </h4>
             <div id="sourceTextReview" class="bg-indigo-50 rounded-xl p-6 min-h-[200px] border-2 border-indigo-100 text-comparison"></div>
           </div>
-          <!-- عرض النص الهدف بعد التحديد مع ترقيم السطور -->
+          <!-- عرض النص الهدف بعد التحديد على شكل فقرات -->
           <div>
             <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
               <i class="fas fa-file-alt text-pink-600 ml-2"></i> النص الهدف (مع التعليم)
@@ -214,29 +208,13 @@
         <div id="explanationText" class="text-lg text-gray-700"></div>
       </div>
 
-      <!-- زر إعادة المراجعة -->
+      <!-- زر إعادة المراجعة (بدون تحديد نوع) -->
       <button id="reviewAgainBtn" class="w-full bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-xl transition-all transform hover:scale-105 focus:ring-gray-200 text-xl shadow-lg hover:shadow-xl mb-8">
         <div class="flex items-center justify-center">
           <i class="fas fa-redo ml-2"></i> إعادة المراجعة
         </div>
       </button>
 
-      <!-- قسم إعادة المراجعة: قائمة منسدلة لتحديد نوع المراجعة -->
-      <div id="reviewAgainSection" class="hidden bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover">
-        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center">
-          <i class="fas fa-redo text-blue-600 ml-2"></i> إعادة المراجعة - اختيار النوع
-        </h2>
-        <div class="flex items-center space-x-4">
-          <select id="reviewType" class="px-4 py-2 border rounded-xl focus:outline-none">
-            <option value="all">جميع الاختلافات</option>
-            <option value="number">مراجعة رقمية فقط</option>
-            <option value="meaning">مراجعة المعنى فقط</option>
-            <option value="missing">مراجعة النص المفقود فقط</option>
-          </select>
-          <button id="confirmReviewBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl">تنفيذ إعادة المراجعة</button>
-        </div>
-      </div>
-
     </main>
   </div>
 
@@ -253,21 +231,25 @@
     const API_URL = 'https://api.deepseek.com/chat/completions';
     const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
 
-    const ANALYSIS_PROMPT = `أنت خبير لغوي متخصص في مراجعة الترجمة التقنية فقرة فقرة كل فقرة بعد الاخرى 
-مهمتك مقارنة النص المصدر والنص الهدف بدقة عالية مع العلم أن النصوص مليانة بالأخطاء والنواقص.
-لا تقم بإزالة أو تعديل العلامات التالية:
-• الأرقام: تحافظ على علامات < و >.
-• النصوص المفقودة: تحافظ على علامات __ و __.
-• اختلافات المعنى: تحافظ على علامات [MEANING] و [/MEANING].
-اعتمد النص المصدر كأساس للمقارنة، وقم بتحديد:
+    // تحديث البرومبت ليتضمن مراجعة الفروقات ��التركيز على النصوص المفقودة، الأرقام والتواريخ
+    const ANALYSIS_PROMPT = `أنت خبير لغوي متخصص في مراجعة الترجمة التقنية. مهمتك مقارنة النص المصدر والنص الهدف بدقة عالية والبحث عن الفروقات بينهما. 
+النصوص مليئة بالأخطاء والنواقص، لذا قم بالتركيز على:
+• النصوص المفقودة (حافظ على علامات __ و __).
+• الاختلافات الرقمية (حافظ على علامات < و >).
+• اختلافات التواريخ (حافظ على علامات [DATE] و [/DATE]).
+• اختلافات المعنى (إن وُجد) مع الحفاظ على علامات [MEANING] و [/MEANING].
+
+اعتمد النص المصدر كأساس للمقارنة، وحدد الفروقات كما يلي:
+1. اختلافات الأرقام باستخدام <الرقم_في_المصدر> → <الرقم_في_الهدف>.
+2. النصوص المفقودة كما هي بين علامتي __.
+3. اختلافات التواريخ باستخدام [DATE] مع الحفاظ على التعليم.
+4. اختلافات المعنى باستخدام [MEANING] مع الحفاظ على التعليم (إن وُجد).
 
-اختلافات الأرقام باستخدام <الرقم_في_المصدر> → <الرقم_في_الهدف>.
-النصوص المفقودة كما هي بين علامتي __.
-اختلافات المعنى باستخدام [MEANING] مع الحفاظ على التعليم.
 النص المصدر:
-{source}.
+{source}
+
 النص الهدف:
-{target}.`;
+{target}`;
 
     // دوال مساعدة للتعامل مع النصوص
     function countWords(text) {
@@ -276,10 +258,12 @@
     function escapeRegExp(string) {
       return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
-    function splitIntoLines(text) {
-      return text.split('\n').map((line, i) => `<div class="line-item"><span class="line-number">${i+1}:</span> <span class="line-text">${line}</span></div>`).join('');
+    // تقسيم النص إلى فقرات وعرض كل فقرة داخل وسم <p>
+    function splitIntoParagraphs(text) {
+      return text.split(/\n+/).map(para => `<p>${para.trim()}</p>`).join('');
     }
-    function getLineNumber(text, substring) {
+    // الحصول على رقم الفقرة لظهور عبارة معينة
+    function getParagraphNumber(text, substring) {
       const index = text.indexOf(substring);
       if (index === -1) return "غير محدد";
       return text.substring(0, index).split("\n").length;
@@ -309,6 +293,16 @@
           highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
+      // اختلافات التواريخ
+      const dateRegex = /\[DATE\](.*?)\[\/DATE\]/g;
+      while ((match = dateRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-date">${phrase}</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
+        }
+      }
       // اختلافات المعنى
       const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
       while ((match = meaningRegex.exec(analysisOutput)) !== null) {
@@ -322,74 +316,44 @@
       return highlightedText;
     }
 
-    // تطبيق التمييز بحسب نوع المراجعة
-    function applyHighlightsByType(originalText, analysisOutput, reviewType) {
-      let highlightedText = originalText;
-      if (reviewType === 'meaning') {
-        const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
-        let match;
-        while ((match = meaningRegex.exec(analysisOutput)) !== null) {
-          const phrase = match[1].trim();
-          if (phrase) {
-            const replacement = `<span class="highlight-meaning">${phrase}</span>`;
-            const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
-            highlightedText = highlightedText.replace(phraseRegex, replacement);
-          }
-        }
-      } else if (reviewType === 'number') {
-        const numberRegex = /<([^<>]+)>/g;
-        let match;
-        while ((match = numberRegex.exec(analysisOutput)) !== null) {
-          const phrase = match[1].trim();
-          if (phrase) {
-            const replacement = `<span class="highlight-number">${phrase}</span>`;
-            const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
-            highlightedText = highlightedText.replace(phraseRegex, replacement);
-          }
-        }
-      } else if (reviewType === 'missing') {
-        const missingRegex = /__(.*?)__/g;
-        let match;
-        while ((match = missingRegex.exec(analysisOutput)) !== null) {
-          const phrase = match[1].trim();
-          if (phrase) {
-            const replacement = `<span class="highlight-missing">__${phrase}__</span>`;
-            const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
-            highlightedText = highlightedText.replace(phraseRegex, replacement);
-          }
-        }
-      } else {
-        highlightedText = applyHighlights(originalText, analysisOutput);
-      }
-      return highlightedText;
-    }
-
     // توليد الشرح التفصيلي
     function generateExplanation(sourceText, analysisOutput) {
       let steps = [];
+      // مراجعة النصوص المفقودة
       const missingRegex = /__(.*?)__/g;
       let match;
       while ((match = missingRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
-          const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li><strong>الخطوة 1:</strong> في السطر ${lineNum}، الجزء "<span class="highlight-missing">__${phrase}__</span>" من النص المصدر مفقود في النص الهدف. تأكد من إضافته لتحسين الدقة.</li>`);
+          const paraNum = getParagraphNumber(sourceText, phrase);
+          steps.push(`<li><strong>مراجعة النص المفقود:</strong> في الفقرة ${paraNum}، النص "<span class="highlight-missing">__${phrase}__</span>" مفقود أو مختلف. يرجى المراجعة.</li>`);
         }
       }
+      // مراجعة الأرقام
       const numberRegex = /<([^<>]+)>/g;
       while ((match = numberRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
-          const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li><strong>الخطوة 2:</strong> في السطر ${lineNum}، الرقم "<span class="highlight-number">${phrase}</span>" في المصدر لا يتطابق مع الرقم في الهدف. يرجى المراجعة.</li>`);
+          const paraNum = getParagraphNumber(sourceText, phrase);
+          steps.push(`<li><strong>مراجعة الأرقام:</strong> في الفقرة ${paraNum}، الرقم "<span class="highlight-number">${phrase}</span>" لا يتطابق. يرجى المراجعة.</li>`);
+        }
+      }
+      // مراجعة التواريخ
+      const dateRegex = /\[DATE\](.*?)\[\/DATE\]/g;
+      while ((match = dateRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const paraNum = getParagraphNumber(sourceText, phrase);
+          steps.push(`<li><strong>مراجعة التواريخ:</strong> في الفقرة ${paraNum}، التاريخ "<span class="highlight-date">${phrase}</span>" غير مطابق. يرجى المراجعة.</li>`);
         }
       }
+      // مراجعة اختلافات المعنى
       const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
       while ((match = meaningRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
-          const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li><strong>الخطوة 3:</strong> في السطر ${lineNum}، تم العثور على اختلاف في المعنى مع التعبير "<span class="highlight-meaning">${phrase}</span>". تحقق من الدقة.</li>`);
+          const paraNum = getParagraphNumber(sourceText, phrase);
+          steps.push(`<li><strong>مراجعة المعنى:</strong> في الفقرة ${paraNum}، التعبير "<span class="highlight-meaning">${phrase}</span>" يختلف. تحقق من الدقة.</li>`);
         }
       }
       if (steps.length === 0) {
@@ -398,48 +362,6 @@
       return `<ol class="list-decimal ml-6 space-y-2">${steps.join('')}</ol>`;
     }
 
-    // توليد الشرح بحسب نوع إعادة المراجعة
-    function generateExplanationByType(sourceText, analysisOutput, reviewType) {
-      let steps = [];
-      if (reviewType === 'meaning') {
-        const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
-        let match;
-        while ((match = meaningRegex.exec(analysisOutput)) !== null) {
-          const phrase = match[1].trim();
-          if (phrase) {
-            const lineNum = getLineNumber(sourceText, phrase);
-            steps.push(`<li><strong>مراجعة المعنى:</strong> في السطر ${lineNum}، التعبير "<span class="highlight-meaning">${phrase}</span>" يختلف. تحقق من الدقة.</li>`);
-          }
-        }
-      } else if (reviewType === 'number') {
-        const numberRegex = /<([^<>]+)>/g;
-        let match;
-        while ((match = numberRegex.exec(analysisOutput)) !== null) {
-          const phrase = match[1].trim();
-          if (phrase) {
-            const lineNum = getLineNumber(sourceText, phrase);
-            steps.push(`<li><strong>مراجعة رقمية:</strong> في السطر ${lineNum}، الرقم "<span class="highlight-number">${phrase}</span>" لا يتطابق. يرجى المراجعة.</li>`);
-          }
-        }
-      } else if (reviewType === 'missing') {
-        const missingRegex = /__(.*?)__/g;
-        let match;
-        while ((match = missingRegex.exec(analysisOutput)) !== null) {
-          const phrase = match[1].trim();
-          if (phrase) {
-            const lineNum = getLineNumber(sourceText, phrase);
-            steps.push(`<li><strong>مراجعة النص المفقود:</strong> في السطر ${lineNum}، النص "<span class="highlight-missing">__${phrase}__</span>" مفقود أو مختلف. يرجى المراجعة.</li>`);
-          }
-        }
-      } else {
-        return generateExplanation(sourceText, analysisOutput);
-      }
-      if (steps.length === 0) {
-        return `<p>لا توجد اختلافات من النوع المحدد.</p>`;
-      }
-      return `<ol class="list-decimal ml-6 space-y-2">${steps.join('')}</ol>`;
-    }
-
     // دالة معالجة الملفات (PDF و DOCX)
     async function processFile(file) {
       let text = "";
@@ -587,26 +509,28 @@
           checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center";
           checkDiv.innerHTML = `<i class="fas fa-check-circle ml-2 text-lg"></i> <span class="text-lg">النصوص متطابقة تماماً</span>`;
           document.getElementById('errorsList').appendChild(checkDiv);
-          document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
-          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
+          document.getElementById('sourceTextReview').innerHTML = splitIntoParagraphs(sourceText);
+          document.getElementById('targetTextReview').innerHTML = splitIntoParagraphs(targetText);
           document.getElementById('explanationText').innerHTML = `<p>النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</p>`;
         } else {
           const sourceHighlighted = applyHighlights(sourceText, analysisOutput);
           const targetHighlighted = applyHighlights(targetText, analysisOutput);
-          document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
-          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetHighlighted);
+          document.getElementById('sourceTextReview').innerHTML = splitIntoParagraphs(sourceHighlighted);
+          document.getElementById('targetTextReview').innerHTML = splitIntoParagraphs(targetHighlighted);
           const explanationHTML = generateExplanation(sourceText, analysisOutput);
           document.getElementById('explanationText').innerHTML = explanationHTML;
           
           const numDiffCount = (analysisOutput.match(/<([^<>]+)>/g) || []).length;
           const missingDiffCount = (analysisOutput.match(/__(.*?)__/g) || []).length;
+          const dateDiffCount = (analysisOutput.match(/\[DATE\](.*?)\[\/DATE\]/g) || []).length;
           const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
-          if (numDiffCount > 0 || missingDiffCount > 0 || meaningDiffCount > 0) {
+          if (numDiffCount > 0 || missingDiffCount > 0 || dateDiffCount > 0 || meaningDiffCount > 0) {
             const summaryDiv = document.createElement('div');
             summaryDiv.className = "p-4 rounded-xl bg-yellow-50 text-gray-800";
             let summaryText = '<div class="font-bold mb-2">ملخص الاختلافات:</div><ul class="list-disc mr-6 space-y-1">';
             if (numDiffCount > 0) summaryText += `<li>اختلاف في الأرقام: ${numDiffCount}</li>`;
             if (missingDiffCount > 0) summaryText += `<li>النصوص المفقودة: ${missingDiffCount}</li>`;
+            if (dateDiffCount > 0) summaryText += `<li>اختلاف في التواريخ: ${dateDiffCount}</li>`;
             if (meaningDiffCount > 0) summaryText += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`;
             summaryText += '</ul>';
             summaryDiv.innerHTML = summaryText;
@@ -619,26 +543,15 @@
       }
     });
 
-    // زر إعادة المراجعة: إخفاء النتائج القديمة وعرض قسم اختيار النوع
+    // زر إعادة المراجعة (بدون اختيار نوع) يعيد تطبيق النتائج المُخزنة
     document.getElementById('reviewAgainBtn').addEventListener('click', () => {
-      document.getElementById('resultSection').classList.add('hidden');
-      document.getElementById('explanationBox').classList.add('hidden');
-      document.getElementById('errorsList').innerHTML = '';
-      document.getElementById('reviewAgainSection').classList.remove('hidden');
-    });
-
-    // تنفيذ إعادة المراجعة بناءً على النوع المحدد
-    document.getElementById('confirmReviewBtn').addEventListener('click', () => {
-      const reviewType = document.getElementById('reviewType').value;
-      const explanationHTML = generateExplanationByType(storedSourceText, storedAnalysisOutput, reviewType);
+      // إعادة عرض النتائج باستخدام البيانات المخزنة
+      const sourceHighlighted = applyHighlights(storedSourceText, storedAnalysisOutput);
+      const targetHighlighted = applyHighlights(storedTargetText, storedAnalysisOutput);
+      document.getElementById('sourceTextReview').innerHTML = splitIntoParagraphs(sourceHighlighted);
+      document.getElementById('targetTextReview').innerHTML = splitIntoParagraphs(targetHighlighted);
+      const explanationHTML = generateExplanation(storedSourceText, storedAnalysisOutput);
       document.getElementById('explanationText').innerHTML = explanationHTML;
-      const sourceHighlighted = applyHighlightsByType(storedSourceText, storedAnalysisOutput, reviewType);
-      const targetHighlighted = applyHighlightsByType(storedTargetText, storedAnalysisOutput, reviewType);
-      document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
-      document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetHighlighted);
-      document.getElementById('reviewAgainSection').classList.add('hidden');
-      document.getElementById('resultSection').classList.remove('hidden');
-      document.getElementById('explanationBox').classList.remove('hidden');
     });
   </script>
 </body>