Spaces:
Running
Running
| <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">المعجم الأمازيغي الشامل © 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> |