- grammar check v0.6

Author: TobiasMue91

tools/grammar_check.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/json5/2.2.3/index.min.js"></script>
-    <title>GrammarPro</title>
+    <title>AI Grammar Checker</title>
     <style>.error-highlight {
         position: relative;
         display: inline-block;
@@ -44,26 +44,6 @@
         opacity: 1;
     }
 
-    .loading-dots:after {
-        content: '.';
-        animation: dots 1.5s steps(5, end) infinite;
-    }
-
-    @keyframes dots {
-        0%, 20% {
-            content: '.';
-        }
-        40% {
-            content: '..';
-        }
-        60% {
-            content: '...';
-        }
-        80%, 100% {
-            content: '';
-        }
-    }
-
     #word-count {
         transition: all 0.3s ease;
     }
@@ -102,8 +82,7 @@
     <div class="flex items-center justify-between mb-6">
         <div class="flex items-center gap-2"><h1
                 class="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 text-transparent bg-clip-text dark:from-indigo-400 dark:to-purple-400">
-            GrammarPro</h1><span
-                class="px-2 py-1 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full dark:bg-indigo-900 dark:text-indigo-200">Beta</span>
+            AI Grammar Checker</h1>
         </div>
         <select id="mode-select"
                 class="px-3 py-1 border rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-colors duration-200">
@@ -159,6 +138,29 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-cen
             Recent Corrections
         </h3>
         <div id="history-list" class="space-y-2"></div>
+        <button id="show-all-errors" class="mt-4 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Show All Errors
+        </button>
+    </div>
+    <div id="error-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+        <div class="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] flex flex-col">
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">All Detected Errors</h3>
+                <button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                    <svg class="w-6 h-6" 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"></path>
+                    </svg>
+                </button>
+            </div>
+            <div class="p-4 overflow-y-auto flex-1">
+                <div id="error-list" class="space-y-4">
+                    <!-- Errors will be inserted here -->
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <script>let errorHistory = [];
@@ -336,6 +338,85 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-cen
         document.getElementById('input').value = savedText;
         updateWordCount();
     }
-});</script>
+});
+
+// Initialize button state
+const showAllErrorsBtn = document.getElementById('show-all-errors');
+showAllErrorsBtn.disabled = true;
+
+// Add modal functionality
+const errorModal = document.getElementById('error-modal');
+const closeModal = document.getElementById('close-modal');
+
+showAllErrorsBtn.addEventListener('click', function() {
+    showErrorModal();
+});
+
+closeModal.addEventListener('click', function() {
+    errorModal.classList.add('hidden');
+    errorModal.classList.remove('flex');
+});
+
+// Close modal when clicking outside
+errorModal.addEventListener('click', function(e) {
+    if (e.target === errorModal) {
+        errorModal.classList.add('hidden');
+        errorModal.classList.remove('flex');
+    }
+});
+
+// Close modal with Escape key
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && !errorModal.classList.contains('hidden')) {
+        errorModal.classList.add('hidden');
+        errorModal.classList.remove('flex');
+    }
+});
+
+function showErrorModal() {
+    const errorList = document.getElementById('error-list');
+    errorList.innerHTML = errors.map((error, index) => `
+        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+            <div class="flex justify-between items-start">
+                <div class="font-medium text-gray-900 dark:text-gray-100">Error ${index + 1}</div>
+                <button onclick="applyCorrection('${error.text}', '${error.suggestion}')"
+                        class="text-sm px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200">
+                    Apply Fix
+                </button>
+            </div>
+            <div class="mt-2 space-y-2">
+                <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">Original text: </span>
+                    <span class="text-red-600 dark:text-red-400">${error.text}</span>
+                </div>
+                <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">Suggestion: </span>
+                    <span class="text-green-600 dark:text-green-400">${error.suggestion}</span>
+                </div>
+                <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">Description: </span>
+                    <span class="text-gray-900 dark:text-gray-100">${error.description}</span>
+                </div>
+            </div>
+        </div>
+    `).join('');
+
+    errorModal.classList.remove('hidden');
+    errorModal.classList.add('flex');
+}
+
+function applyCorrection(original, suggestion) {
+    const input = document.getElementById('input');
+    input.value = input.value.replace(original, suggestion);
+    displayResults(input.value, errors.filter(e => e.text !== original));
+    updateWordCount();
+    showNotification(`Corrected: ${original} → ${suggestion}`, 'success');
+}
+
+// Add this to your existing checkGrammar function, right after parsing the grammarData:
+window.errors = grammarData.errors; // Make errors globally available
+showAllErrorsBtn.disabled = grammarData.errors.length === 0;
+</script>
+<script src="../sidebar.js"></script>
 </body>
 </html>