Update index.html

index.html

@@ -1,4 +1,4 @@
- <!DOCTYPE html>
+  <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
@@ -732,34 +732,26 @@
                 }
 
                 // 3. بناء المقطع الصوتي للزاوية اليسرى وفقاً للمنطق الجديد
-                // 3. بناء المقطع الصوتي للزاوية اليسرى وفقاً للمنطق الجديد (مع التلوين المخصص)
-                let cornerTextHTML;
+                let cornerTextLeft;
                 
-                // تعريف الألوان المستخدمة كـ Tailwind classes
-                const yellowClass = "text-yellow-300";
-                const redClass = "text-red-500 dark:text-red-400"; // نستخدم الأحمر لتمييز الحرف الجديد
-
                 // تطبيق منطق الاستثناء لحرف 'ⴰ'
                 if (targetLetter === 'ⴰ') {
-                    // الحالة الأولى: إذا كان الحرف هو ⴰ، اعرض ⵢ (أصفر) ⴰ (أحمر)
-                    cornerTextHTML = `<span class="${yellowClass}">ⵢ</span><span class="${redClass}">ⴰ</span>`;
+                    // إذا كان الحرف هو ⴰ، اعرض ⵢⴰ فقط
+                    cornerTextLeft = `ⵢⴰ`;
                 } else {
-                    // الحالة الثانية: لبقية الحروف، اعرض ⵢⴰ (أصفر) + الحرف المستهدف (أحمر)
-                    // نستخدم اللون الأصفر للـ ⵢⴰ الثابت والأحمر للحرف الجديد الذي يضاف للمقطع
-                    const yellowPart = `ⵢⴰ`;
-                    cornerTextHTML = `<span class="${yellowClass}">${yellowPart}</span><span class="${redClass}">${targetLetter}</span>`;
+                    // لبقية الحروف، اعرض ⵢⴰ متبوعاً بالحرف (مثل ⵢⴰⴱ)
+                    cornerTextLeft = `ⵢⴰ${targetLetter}`;
                 }
                 
                 cornerElementHTML += `
                     <div class="absolute top-0 left-0 p-3 bg-white/20 backdrop-blur-sm rounded-tl-3xl rounded-br-3xl shadow-md text-white">
-                        <h2 class="font-black text-4xl icon-shadow">
-                            ${cornerTextHTML} // 👈 ملاحظة: تم استخدام cornerTextHTML بدلاً من cornerTextLeft
+                        <h2 class="font-black text-4xl icon-shadow text-yellow-300">
+                            ${cornerTextLeft}
                         </h2>
                     </div>
                 `;
                 
                 // 4. الحرف في الزاوية العلوية اليمنى (الحرف الكبير الأصلي)
-                // (هذا الجزء لا يتغير)
                 cornerElementHTML += `
                     <div class="absolute top-0 right-0 p-3 bg-white/20 backdrop-blur-sm rounded-tr-3xl rounded-bl-3xl shadow-md text-white">
                         <h2 class="font-black text-4xl icon-shadow">
@@ -769,7 +761,6 @@
                 `;
                 
             } else {
-                // ... (بقية منطق الفئات الأخرى)
                 // Logic for other categories 
                 const cornerText = currentItem.main.length > 3 ? categoryMeta.title : currentItem.main;
                 cornerElementHTML = `