Spaces:

Jaouadart
/

dictionary1

Running

App Files Files Community

Jaouadart commited on Jan 20

Commit

a5df975

verified ·

1 Parent(s): 0492767

Update index.html

Browse files

Files changed (1) hide show

index.html +189 -136

index.html CHANGED Viewed

@@ -1,192 +1,245 @@
-<!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>مترجم اللغة الأمازيغية - JSON</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Tajawal', sans-serif;
-            background-color: #f3f4f6;
         }
         .tifinagh-font {
-            font-family: 'Segoe UI Historic', 'Ebrima', sans-serif;
         }
-        .status-dot {
-            height: 10px;
-            width: 10px;
-            border-radius: 50%;
-            display: inline-block;
         }
-        #targetText {
-            white-space: pre-wrap;
-            line-height: 1.6;
-            min-height: 100px;
         }
     </style>
 </head>
 <body class="min-h-screen flex flex-col">
-    <!-- Header -->
-    <header class="bg-blue-600 text-white p-6 shadow-lg">
-        <div class="container mx-auto text-center">
-            <h1 class="text-3xl font-bold">مترجم اللغة الأمازيغية</h1>
-            <p class="mt-2 text-blue-100">قاعدة البيانات: dictionary (1).json</p>
-            <div id="dbStatus" class="mt-3 text-sm inline-flex items-center bg-blue-800 px-3 py-1 rounded-full">
-                <span id="statusDot" class="status-dot bg-red-500 ml-2"></span>
-                <span id="statusText">جاري تحميل البيانات...</span>
-            </div>
         </div>
     </header>
-    <!-- Main Content -->
-    <main class="flex-grow container mx-auto p-4 md:p-8">
-        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
-            <div class="flex items-center justify-between p-4 border-b bg-gray-50">
-                <div class="flex items-center gap-2">
-                    <span class="text-sm font-bold text-gray-600">من:</span>
-                    <select id="sourceLang" class="border rounded p-1 text-sm outline-none">
-                        <option value="ar">العربية</option>
-                        <option value="tzm">الأمازيغية</option>
-                    </select>
                 </div>
-                <div class="text-blue-600">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
-                    </svg>
-                </div>
-                <div class="flex items-center gap-2">
-                    <span class="text-sm font-bold text-gray-600">إلى:</span>
-                    <select id="targetLang" class="border rounded p-1 text-sm outline-none">
-                        <option value="tzm">الأمازيغية</option>
-                        <option value="ar">العربية</option>
-                    </select>
-                </div>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-0">
-                <div class="p-4 border-l">
-                    <label class="block mb-2 text-xs font-bold text-blue-600 uppercase">النص المراد بحثه:</label>
-                    <textarea id="sourceText" rows="6" class="w-full p-3 text-lg border-0 focus:ring-0 outline-none resize-none" placeholder="اكتب الكلمة هنا..."></textarea>
-                </div>
-                <div class="p-4 bg-blue-50/30">
-                    <label class="block mb-2 text-xs font-bold text-blue-600 uppercase">النتيجة من القاموس:</label>
-                    <div id="targetText" class="w-full p-3 text-2xl font-bold text-blue-900 tifinagh-font">
-                        ...
                     </div>
                 </div>
             </div>
-            <div class="p-4 flex justify-between items-center border-t bg-gray-50">
-                <button id="translateBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-8 rounded-lg shadow-md transition-all active:scale-95">
-                    بحث سريع
-                </button>
-                <div class="flex flex-col items-end">
-                    <span id="wordCount" class="text-[10px] text-gray-400 font-bold uppercase tracking-wider">عدد المدخلات: 0</span>
-                    <button id="toggleKbd" class="text-blue-600 hover:text-blue-800 text-xs font-bold mt-1">لوحة التيفيناغ</button>
-                </div>
             </div>
-            <div id="tifinaghKeyboard" class="p-4 bg-gray-100 hidden border-t">
-                <div class="flex flex-wrap gap-2 justify-center" id="kbdButtons"></div>
             </div>
         </div>
     </main>
     <script>
-        let dictionary = [];
-        const sourceInput = document.getElementById('sourceText');
-        const targetOutput = document.getElementById('targetText');
-        const statusDot = document.getElementById('statusDot');
-        const statusText = document.getElementById('statusText');
         const wordCountDisplay = document.getElementById('wordCount');
-        // تنظيف النصوص
-        function clean(str) {
-            return str ? str.toString().trim() : "";
-        }
-        // جلب ملف الـ JSON
-        async function fetchDictionary() {
-            const fileName = "dictionary (1).json";
-            try {
-                const response = await fetch(encodeURIComponent(fileName));
-                if (!response.ok) throw new Error("File not found");
-                const data = await response.json();
-                // معالجة البيانات لتناسب الصيغة المطلوبة { AR: "...", TAM: "..." }
-                dictionary = data.map(item => ({
-                    ar: clean(item.AR),
-                    tam: clean(item.TAM)
-                })).filter(item => item.ar && item.tam);
-                statusDot.className = "status-dot bg-green-500 ml-2";
-                statusText.innerText = "قاعدة البيانات متصلة (JSON)";
-                wordCountDisplay.innerText = `عدد المدخلات: ${dictionary.length}`;
-                targetOutput.innerText = "ابحث عن كلمة...";
-            } catch (error) {
-                statusDot.className = "status-dot bg-red-500 ml-2";
-                statusText.innerText = "فشل تحميل الملف dictionary (1).json";
-                targetOutput.innerText = "يرجى التأكد من وجود ملف JSON في نفس المجلد.";
-            }
-        }
-        // وظيفة البحث والترجمة
-        function performSearch() {
-            const query = clean(sourceInput.value).toLowerCase();
-            if (!query) {
-                targetOutput.innerText = "";
                 return;
             }
-            // البحث عن تطابق في العربية أو الأمازيغية
-            const results = dictionary.filter(item =>
-                item.ar.toLowerCase().includes(query) ||
-                item.tam.toLowerCase().includes(query)
             );
-            if (results.length > 0) {
-                targetOutput.innerHTML = results.map(res =>
-                    `<div class="mb-3 border-b border-blue-100 pb-2">
-                        <span class="text-xs text-gray-400 font-normal uppercase">العربية: ${res.ar}</span><br>
-                        <span class="text-blue-800">${res.tam}</span>
-                    </div>`
-                ).join('');
             } else {
-                targetOutput.innerHTML = `<span class="text-gray-300 text-lg italic">لا توجد نتيجة لـ "${query}"</span>`;
             }
         }
-        // إعداد لوحة المفاتيح
-        const tifinaghChars = "ⴰⴱⵛⴷⴻⴼⴳⵀⵉⵊⴽⵍⵎⵏⵓⵔⵙⵜⵡⵅⵢⵣ";
         const kbdContainer = document.getElementById('kbdButtons');
-        tifinaghChars.split('').forEach(char => {
             const btn = document.createElement('button');
-            btn.className = "bg-white p-2 rounded shadow hover:bg-blue-600 hover:text-white w-10 h-10 font-bold border border-gray-200 transition-all active:scale-90";
-            btn.innerText = char;
-            btn.onclick = () => {
-                sourceInput.value += char;
-                sourceInput.dispatchEvent(new Event('input'));
                 sourceInput.focus();
             };
             kbdContainer.appendChild(btn);
         });
-        // الأحداث
-        sourceInput.addEventListener('input', performSearch);
-        document.getElementById('translateBtn').addEventListener('click', performSearch);
-        document.getElementById('toggleKbd').addEventListener('click', () => {
-            document.getElementById('tifinaghKeyboard').classList.toggle('hidden');
-        });
-        // التحميل عند بدء الصفحة
-        window.onload = fetchDictionary;
     </script>
 </body>
 </html>

+ <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>مترجم اللغة الأمازيغية</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Tajawal', sans-serif;
+            background-color: #f0f2f5;
         }
         .tifinagh-font {
+            font-family: 'Segoe UI Historic', 'Ebrima', 'Noto Sans Tifinagh', sans-serif;
+            letter-spacing: 1px;
         }
+        .result-card {
+            transition: all 0.3s ease;
+            border-right: 5px solid transparent;
         }
+        .result-card:hover {
+            border-right-color: #1d4ed8;
+            background-color: #f1f5f9;
+            transform: translateX(-5px);
+        }
+        /* تحسين مظهر التمرير */
+        #targetText::-webkit-scrollbar {
+            width: 8px;
+        }
+        #targetText::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        #targetText::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 10px;
+        }
+        .highlight {
+            background-color: #fde047;
+            font-weight: 800;
+            padding: 0 2px;
+            border-radius: 2px;
+        }
+        /* خط غليظ مخصص للنتائج */
+        .font-bold-custom {
+            font-weight: 800;
         }
     </style>
 </head>
 <body class="min-h-screen flex flex-col">
+    <header class="bg-blue-800 text-white pt-8 pb-12 shadow-lg">
+        <div class="container mx-auto text-center px-4">
+            <h1 class="text-4xl font-extrabold mb-2">المعجم الأمازيغي التفاعلي</h1>
+            <p class="text-blue-100 opacity-90 text-lg">البحث الفوري بخطوط واضحة وعريضة</p>
         </div>
     </header>
+    <main class="flex-grow container mx-auto p-4 -mt-8">
+        <div class="max-w-4xl mx-auto">
+            <!-- صندوق البحث -->
+            <div class="bg-white rounded-t-2xl shadow-2xl p-6 border-b">
+                <div class="relative">
+                    <textarea id="sourceInput" rows="2"
+                        class="w-full p-4 text-2xl font-bold border-2 border-blue-100 rounded-xl focus:border-blue-600 focus:ring-0 outline-none transition-all resize-none shadow-sm"
+                        placeholder="اكتب هنا للبحث..."></textarea>
+                    <div id="loader" class="absolute left-4 top-4 hidden">
+                        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+                    </div>
                 </div>
+                <div class="flex justify-between items-center mt-4">
+                    <div class="flex gap-2">
+                        <button id="clearBtn" class="px-5 py-2 text-sm font-bold text-red-600 hover:bg-red-50 rounded-lg transition-colors border border-red-100">
+                            مسح البحث
+                        </button>
+                        <button id="toggleKbd" class="px-5 py-2 text-sm font-bold text-blue-700 border border-blue-200 hover:bg-blue-50 rounded-lg transition-colors">
+                            لوحة تيفيناغ
+                        </button>
+                    </div>
+                    <div id="wordCount" class="text-xs font-black text-blue-900 bg-blue-50 px-4 py-1.5 rounded-full border border-blue-100">
+                        جاري التحميل...
                     </div>
                 </div>
             </div>
+            <!-- لوحة مفاتيح تيفيناغ -->
+            <div id="tifinaghKeyboard" class="hidden bg-white border-x p-5 transition-all shadow-inner">
+                <div class="flex flex-wrap gap-2 justify-center" id="kbdButtons"></div>
             </div>
+            <!-- منطقة النتائج -->
+            <div id="targetText" class="bg-white rounded-b-2xl shadow-2xl min-h-[450px] max-h-[600px] overflow-y-auto p-3">
+                <div class="flex flex-col items-center justify-center h-full text-gray-400 py-20">
+                    <svg class="w-20 h-20 mb-4 opacity-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                    <p class="text-xl font-bold">ابدأ الكتابة لعرض النتائج بخط عريض</p>
+                </div>
             </div>
         </div>
     </main>
+    <footer class="mt-8 pb-8 text-center text-gray-500">
+        <p class="text-sm font-bold">المعجم الأمازيغي الشامل &copy; 2024</p>
+    </footer>
     <script>
+        const dictionary = [
+            {"AR": "كتاب", "TAM": "ⴰⴷⵍⵉⵙ"},
+            {"AR": "قلم رصاص", "TAM": "ⴰⴽⵕⵕⵊ"},
+            {"AR": "المحفظة", "TAM": "ⴰⵇⵇⵕⴰⴱ/ⵜⴰⵛⵛⴽⴰⵕⵜ"},
+            {"AR": "دفتر", "TAM": "ⴰⵍⵓⴳ"},
+            {"AR": "تباشر", "TAM": "ⴰⵏⴳﻤⵉⵔⵙ"},
+            {"AR": "قلم جاف", "TAM": "ⴰⵖⴰⵏⵉﺐ"},
+            {"AR": "منجرة", "TAM": "ⵜⴰⵙⵔⵔⴰⵎⵜ"},
+            {"AR": "لساق", "TAM": "ⴰ��ⵍⵖⴰⵖ"},
+            {"AR": "لوحة", "TAM": "ⵜⵉⴼⵉيلت"},
+            {"AR": "مسطرة", "TAM": "ⵜⴰⵖⴷⴰ"},
+            {"AR": "وزرة", "TAM": "ⵜⴰⴱﻨⴽⴰ"},
+            {"AR": "ممحاة", "TAM": "ⵜⴰⵚⴼⴼⴰⴹⵜ"},
+            {"AR": "السبورة", "TAM": "ⵜⴰⴼⵍⵡⵉⵜ"},
+            {"AR": "الوزير", "TAM": "ⴰⵎⴰⵡⴰⵙ- ⴰⵏⴼﻠⴰⵙ"},
+            {"AR": "السلطة - الحكومة", "TAM": "ⵜⴰନⴱⴰⴹⵜ"},
+            {"AR": "الحكم / الحكام", "TAM": "ⴰⵏⴱⴰⴹن / ⵉⵏⴱⴰⴹن"},
+            {"AR": "القائد", "TAM": "ⵎⵣⵓⴰⵔ"},
+            {"AR": "الزعيم", "TAM": "ⴰⵎⴰⵍⵓⴰⵢ - ⴰଖⴰⵜⴰⵔ"},
+            {"AR": "الرئيس", "TAM": "ⴰⵙⵍⵓⴰⵢ"},
+            {"AR": "التاريخ", "TAM": "ⴰⵎⵣⵔⵓⵢ"},
+            {"AR": "المؤرخ", "TAM": "ⴰⵎⴰⵣⵔⴰⵢ"},
+            {"AR": "تاريخي", "TAM": "ⴰⵎⴰⵣⵔⴰⵢ"},
+            {"AR": "أسطورة", "TAM": "ⵡⵎⵢⴰ - ⴷⵢⵎⵢⵏ"},
+            {"AR": "السنة / السنوات", "TAM": "ⴰⵙⴳⴳⴰⵙ / ⵉⵙⴳⴳⵯⴰⵙن"},
+            {"AR": "أبيض", "TAM": "ⵓⵎⵍⵉⵍ / ⴰⵎⵍⵍⴰⵍ"},
+            {"AR": "أسود", "TAM": "ⵓⵏⴳⴰⵍ / ⴰⵙⴳⴳⴰن / ⴰⴱﺨﺨⴰن"},
+            {"AR": "أصفر", "TAM": "ⴰⵡⵔⴰⵖ"},
+            {"AR": "أخضر", "TAM": "ⴰⴷⴰⵍ / ⴰⵣⵉⴳⵣⴰⵡ / ⴰⵣⵉⵣⴰⵡ"},
+            {"AR": "أزرق", "TAM": "ⴰⵣⵔⵡⴰⵍ / ⴰⵊⵏⵊⴰⵍⵉⵢ"},
+            {"AR": "بنفسجي", "TAM": "ⴰⵎⴰⴳⵥⴰⵢ"},
+            {"AR": "وردي", "TAM": "ⴰⵣⵡⵉⵡⵉⵖ"},
+            {"AR": "بني", "TAM": "ⴰⵡⵔⴰⵙ"},
+            {"AR": "برتقالي", "TAM": "ⴰⵍⵜⵛⵛⵉⵏⵉ / ⴰⵍⵉⵎⵓنⵉ"},
+            {"AR": "الهوية", "TAM": "ⵜⴰⵎⴰⴳⵉⵜ / ⴰⵙⵍⴰⵢ"},
+            {"AR": "الجنسية", "TAM": "ⵜⴰⵖⵍⴰⵏⵜ"},
+            {"AR": "التراث", "TAM": "ⵜⵉⵏⴽⵉⵙⵉ / ⵜⴰⵢⵙⵉ"},
+            {"AR": "الحضارة", "TAM": "ⵜⴰⵖⵔⵎⴰ"},
+            {"AR": "المجتمع", "TAM": "ⴰⵎⵓن"},
+            {"AR": "الشعب", "TAM": "ⴰⵎⴰⴷⴰن / ⴰⵖⵔⵉⴼ"},
+            {"AR": "المقاومة", "TAM": "ⵜⴰⵏⵣⴱⴰⵢⵜ"},
+            {"AR": "الاستقلال", "TAM": "ⴰⵣⵔⵓⴳ"},
+            {"AR": "العدل", "TAM": "ⵜⴰⵏⵣⴳⴰⵎⵜ / ⴰⵣⵔⴼ"}
+        ];
+        const sourceInput = document.getElementById('sourceInput');
+        const targetText = document.getElementById('targetText');
         const wordCountDisplay = document.getElementById('wordCount');
+        const loader = document.getElementById('loader');
+        wordCountDisplay.innerText = `عدد المصطلحات: ${dictionary.length}`;
+        function handleSearch() {
+            const query = sourceInput.value.trim().toLowerCase();
+            if (query.length === 0) {
+                targetText.innerHTML = `
+                    <div class="flex flex-col items-center justify-center h-full text-gray-400 py-20">
+                        <svg class="w-20 h-20 mb-4 opacity-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        </svg>
+                        <p class="text-xl font-bold">ابدأ الكتابة لعرض النتائج بخط عريض</p>
+                    </div>`;
                 return;
             }
+            loader.classList.remove('hidden');
+            const filtered = dictionary.filter(item =>
+                item.AR.toLowerCase().includes(query) ||
+                item.TAM.toLowerCase().includes(query)
             );
+            if (filtered.length > 0) {
+                const html = filtered.map(item => `
+                    <div class="result-card p-5 border-b last:border-0 hover:shadow-md cursor-default">
+                        <div class="flex justify-between items-center gap-4">
+                            <div class="flex-1">
+                                <div class="text-[10px] font-black text-blue-400 uppercase tracking-widest mb-1">الكلمة العربية</div>
+                                <div class="text-2xl font-black text-gray-900 leading-tight">${highlightText(item.AR, query)}</div>
+                            </div>
+                            <div class="flex-1 text-left border-r border-gray-100 pr-4">
+                                <div class="text-[10px] font-black text-green-500 uppercase tracking-widest mb-1">تيفيناغ</div>
+                                <div class="text-3xl font-bold-custom text-blue-800 tifinagh-font leading-normal">${highlightText(item.TAM, query)}</div>
+                            </div>
+                        </div>
+                    </div>
+                `).join('');
+                targetText.innerHTML = html;
             } else {
+                targetText.innerHTML = `
+                    <div class="p-20 text-center">
+                        <div class="text-5xl mb-4 opacity-20">🔍</div>
+                        <div class="text-gray-500 font-bold text-lg">لا توجد نتائج لـ "${query}"</div>
+                    </div>`;
             }
+            loader.classList.add('hidden');
         }
+        function highlightText(text, query) {
+            if (!query) return text;
+            const re = new RegExp(`(${query})`, "gi");
+            return text.replace(re, `<span class="highlight">$1</span>`);
+        }
+        const alphabet = "ⴰⴱⴳⴷⴹⴻⴼⴽⵯⵀⵃⵄⵅⵇⵉⵊⵍⵎⵏⵓⵔⵕⵙⵚⵜⵟⵡⵢⵣⵥ";
         const kbdContainer = document.getElementById('kbdButtons');
+        alphabet.split('').forEach(char => {
             const btn = document.createElement('button');
+            btn.className = "bg-white hover:bg-blue-700 hover:text-white w-14 h-14 flex items-center justify-center rounded-xl border-2 border-gray-100 text-2xl transition-all active:scale-95 font-black tifinagh-font shadow-sm";
+            btn.textContent = char;
+            btn.onclick = () => {
+                sourceInput.value += char;
+                handleSearch();
                 sourceInput.focus();
             };
             kbdContainer.appendChild(btn);
         });
+        sourceInput.addEventListener('input', handleSearch);
+        document.getElementById('clearBtn').onclick = () => {
+            sourceInput.value = "";
+            handleSearch();
+            sourceInput.focus();
+        };
+        document.getElementById('toggleKbd').onclick = () => {
+            const kbd = document.getElementById('tifinaghKeyboard');
+            kbd.classList.toggle('hidden');
+        };
     </script>
 </body>
 </html>