Update index.html

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
@@ -121,10 +121,10 @@
     <audio id="story-audio" controls style="display:none;"></audio>
     <audio id="click-sound" src="audio/click_2.mp3" preload="auto"></audio>
     <audio id="success-sound" src="audio/Correct and Incorrect sound effect - right or wrong(M4A_128K)(2).mp3" preload="auto"></audio>
-    <audio id="error-sound" src="audio/Correct and Incorrect sound effect - right or wrong(M4A_128K)(3).mp3" preload="auto"></audio>
+    <audio id="error-sound" src="audio/Correct and Incorrect sound effect - right or wrong(M4A_128K)(3).mpad" preload="auto"></audio>
     <audio id="background-music" src="audio/Funny Kids _ Children_s Music (Instrumental Music For Kids)(M4A_128K).m4a" preload="auto" loop></audio>
     <script>
-        // --- 1. تعريف الأيقونات كـ SVG نصي ---
+        // --- 1. تعريف الأيقونات كـ SVG نصي (Icons) ---
         
         const ICONS = {
             Home: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`,
@@ -166,7 +166,7 @@
         };
 
 
-        // --- 2. بيانات التطبيق الثابتة ---
+        // --- 2. بيانات التطبيق الثابتة (Static Data) ---
 
         const APP_NAME = "Tifawin";
         const APP_NAME_LETTERS = "TIMMUZIT";
@@ -185,10 +185,12 @@
             { name: "طاقم تطوان للتعابير", role: "تسجيل فصول السنة" }
         ];
 
+         // 🚨 UPDATED: تم فصل الكلمة الأمازيغية (word_tifinagh) عن الترجمة العربية
          const tifinaghData = [
-            { letter: 'ⴰ', word_tifinagh: '', word_arabic: 'جدار-ⴰⴳⴰⴷⵉⵔ', image: 'images/2947c16d27f8042f7d60783c6808519a.jpg', audio: 'audio/aman.mp3' },
-            { letter: 'ⴱ', word_tifinagh: '', word_arabic: 'فراشة-ⵉⴱⵔⴱⵉⵍⵍⵓ', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/barbi.mp3' },
-            { letter: 'ⴳ', word_tifinagh: '', word_arabic: 'دخان-ⴰⴳⴳⵓ', image: 'images/c0094eb5dcc49d7cce573d42f270d8de.jpg', audio: 'audio/ca.mp3' },
+            { letter: 'ⴰ', word_tifinagh: 'ⴰⴳⴰⴷⵉⵔ', word_arabic: 'جدار', image: 'images/2947c16d27f8042f7d60783c6808519a.jpg', audio: 'audio/aman.mp3' },
+            { letter: 'ⴱ', word_tifinagh: 'ⵉⴱⵔⴱⵉⵍⵍⵓ', word_arabic: 'فراشة', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/barbi.mp3' },
+            { letter: 'ⴳ', word_tifinagh: 'ⴰⴳⴳⵓ', word_arabic: 'دخان', image: 'images/c0094eb5dcc49d7cce573d42f270d8de.jpg', audio: 'audio/ca.mp3' },
+            { letter: 'ⵢ', word_tifinagh: 'ⴰⵢⴷⵉ', word_arabic: 'كلب', image: 'images/124419894dcfde81ffbca1e072804c71.jpg', audio: 'audio/dog.mp3' },
         ];
         
         const animalsData = [
@@ -203,11 +205,10 @@
         
         const LEARNING_DATA = {
             tifinaghLetters: tifinaghData.map(item => {
-                const parts = item.word_arabic.split('-');
                 return {
-                    main: item.letter, 
-                    word: parts.length > 1 ? parts[0].trim() : item.word_arabic.trim(), 
-                    transliteration: parts.length > 1 ? parts[1].trim() : '', 
+                    main: item.letter, // ⴰ الحرف المستهدف
+                    word: item.word_arabic.trim(), // جدار (الترجمة العربية)
+                    transliteration: item.word_tifinagh.trim(), // ⴰⴳⴰⴷⵉⵔ (الكلمة الأمازيغية للتلوين)
                     imageUrl: item.image, 
                     audioUrl: item.audio,
                 };
@@ -219,20 +220,21 @@
                 imageUrl: item.image, 
                 audioUrl: item.audio,
             })),
-            tools: [{ main: 'ⴰⴽⵕⵕⴰⵊ', word: 'قلم رصاص', imageUrl: 'images/37b71533177feb9d55d55efba947309e.jpg', audioUrl: 'audio/schoolSupplies/pencil.mp3' }],
-            fruits: [{ main: 'ⵜⴰⴷⴼⴼⵓⵢⵜ', word: 'تفاحة', imageUrl: 'images/da1da4f2015a32322f547ae5fff5236c.jpg', audioUrl: 'audio/fruits/apple.mp3' }],
-            vegetables: [{ main: 'ⵜⴰⵎⴰⵟⵉⵛⵜ', word: 'طماطم', imageUrl: 'images/6056d9839a962b5a78cddc402ef88c09.jpg', audioUrl: 'audio/vegetables/tomato.mp3' }],
-            animals: animalsData.map(item => ({ main: item.word_tifinagh, word: item.word_arabic, imageUrl: item.image, audioUrl: item.audio })),
-            body: [{ main: 'ⵉⵅⴼ', word: 'الرأس', imageUrl: 'images/33dda7fe89cfd5526918246dae320059.jpg', audioUrl: 'audio/bodyParts/head.mp3' }],
-            days: [{ main: 'ⴰⵢⵏⴰⵙ', word: 'الاثنين', imageUrl: 'images/37b71533177feb9d55d55efba947309e.jpg', audioUrl: 'audio/days/monday.mp3' }],
-            months: [{ main: 'ⵉⵏⵏⴰⵢⵔ', word: 'يناير', imageUrl: 'images/b26681eaa5caacbf1c7bfb112f546def.jpg', audioUrl: 'audio/months/january.mp3' }],
-            family: [{ main: 'ⵉⵎⵎⵉ', word: 'أمي', imageUrl: 'images/5957c378462b920ceb24f6aa294b5100.jpg', audioUrl: 'audio/family/mother.mp3' }],
-            colors: [{ main: 'ⴰⵣⴳⴳⵯⴰⵖ', word: 'أحمر', imageUrl: 'images/b008721ac76def4ddfdbdb51fc82d320.jpg', audioUrl: 'audio/colors/red.mp3', colorClass: 'bg-red-600' }],
-            seasons: [{ main: 'ⵜⴰⴳⵔⵙⵜ', word: 'الشتاء', imageUrl: 'images/b2d331ea13a2df600219904dabd028fa.jpg', audioUrl: 'audio/AUD-20250926-WA0003.opus' }],
-            games: [{ main: "أسد صغير شجاع", word: "في غابة بعيدة، عاش أسد صغير اسمه سمير...", imageUrl: "images/Screenshot_20250927_141840_One Read.jpg", audioUrl: null }],
-            stories: [{ main: "السلحفاة والأرنب", word: "في غابة خضراء، قرر أرنب وسلحفاة...", imageUrl: "images/73b552bd0d3472c121adccc68a5bbb7f.jpg", audioUrl: null }],
+            tools: [{ main: 'ⴰⴽⵕⵕⴰⵊ', word: 'قلم رصاص', transliteration: 'قلم رصاص', imageUrl: 'images/37b71533177feb9d55d55efba947309e.jpg', audioUrl: 'audio/schoolSupplies/pencil.mp3' }],
+            fruits: [{ main: 'ⵜⴰⴷⴼⴼⵓⵢⵜ', word: 'تفاحة', transliteration: 'ⵜⴰⴷⴼⴼⵓⵢⵜ', imageUrl: 'images/da1da4f2015a32322f547ae5fff5236c.jpg', audioUrl: 'audio/fruits/apple.mp3' }],
+            vegetables: [{ main: 'ⵜⴰⵎⴰⵟⵉⵛⵜ', word: 'طماطم', transliteration: 'ⵜⴰⵎⴰⵟⵉⵛⵜ', imageUrl: 'images/6056d9839a962b5a78cddc402ef88c09.jpg', audioUrl: 'audio/vegetables/tomato.mp3' }],
+            animals: animalsData.map(item => ({ main: item.word_tifinagh, word: item.word_arabic, transliteration: item.word_tifinagh, imageUrl: item.image, audioUrl: item.audio })),
+            body: [{ main: 'ⵉⵅⴼ', word: 'الرأس', transliteration: 'ⵉⵅⴼ', imageUrl: 'images/33dda7fe89cfd5526918246dae320059.jpg', audioUrl: 'audio/bodyParts/head.mp3' }],
+            days: [{ main: 'ⴰⵢⵏⴰⵙ', word: 'الاثنين', transliteration: 'ⴰⵢⵏⴰⵙ', imageUrl: 'images/37b71533177feb9d55d55efba947309e.jpg', audioUrl: 'audio/days/monday.mp3' }],
+            months: [{ main: 'ⵉⵏⵏⴰⵢⵔ', word: 'يناير', transliteration: 'ⵉⵏⵏⴰⵢⵔ', imageUrl: 'images/b26681eaa5caacbf1c7bfb1f12f546def.jpg', audioUrl: 'audio/months/january.mp3' }],
+            family: [{ main: 'ⵉⵎⵎⵉ', word: 'أمي', transliteration: 'ⵉⵎⵎⵉ', imageUrl: 'images/5957c378462b920ceb24f6aa294b5100.jpg', audioUrl: 'audio/family/mother.mp3' }],
+            colors: [{ main: 'ⴰⵣⴳⴳⵯⴰⵖ', word: 'أحمر', transliteration: 'ⴰⵣⴳⴳⵯⴰⵖ', imageUrl: 'images/b008721ac76def4ddfdbdb51fc82d320.jpg', audioUrl: 'audio/colors/red.mp3', colorClass: 'bg-red-600' }],
+            seasons: [{ main: 'ⵜⴰⴳⵔⵙⵜ', word: 'الشتاء', transliteration: 'ⵜⴰⴳⵔⵙⵜ', imageUrl: 'images/b2d331ea13a2df600219904dabd028fa.jpg', audioUrl: 'audio/AUD-20250926-WA0003.opus' }],
+            games: [{ main: "أسد صغير شجاع", word: "في غابة بعيدة، عاش أسد صغير اسمه سمير...", transliteration: "قصة", imageUrl: "images/Screenshot_20250927_141840_One Read.jpg", audioUrl: null }],
+            stories: [{ main: "السلحفاة والأرنب", word: "في غابة خضراء، قرر أرنب وسلحفاة...", transliteration: "قصة", imageUrl: "images/73b552bd0d3472c121adccc68a5bbb7f.jpg", audioUrl: null }],
         };
 
+        // ... (بقية تعريفات الفئات CATEGORIES - لم تتغير) ...
         const CATEGORIES = [
             { id: 'tifinaghLetters', title: 'تعلم الحروف', subtitle: 'ⴰ, ⴱ, ⴳ...', iconName: 'AArrowUp', imageUrl: 'images/6e318d538a2d8f0b5ad685db558ffe4e.jpg' }, 
             { id: 'numbers', title: 'تعلم الأرقام', subtitle: '0, 1, 2...', iconName: 'Hash', imageUrl: 'images/0751e273c2de27e4b04dfeb7ee99b448.jpg' },
@@ -251,7 +253,7 @@
         ];
 
 
-        // --- 3. إدارة حالة التطبيق ---
+        // --- 3. إدارة حالة التطبيق (State Management) ---
 
         const appState = {
             currentScreen: 'welcome', 
@@ -265,7 +267,7 @@
             isBackgroundMusicPlaying: false, 
         };
         
-        // --- 4. وظائف التحكم الصوتي (UPDATED) ---
+        // ... (بقية الدوال المساعدة مثل playClickSound, playSuccessSound, playErrorSound, toggleBackgroundMusic - لم تتغير) ...
         
         /** يشغل صوت النقر على زر */
         const playClickSound = () => {
@@ -276,7 +278,7 @@
              }
         };
 
-        /** 🚨 NEW: يشغل صوت النجاح */
+        /** 🚨 يشغل صوت النجاح */
         const playSuccessSound = () => {
              const audio = document.getElementById('success-sound');
              if (audio && !appState.isAppMuted) {
@@ -285,7 +287,7 @@
              }
         };
 
-        /** 🚨 NEW: يشغل صوت الخطأ */
+        /** 🚨 يشغل صوت الخطأ */
         const playErrorSound = () => {
              const audio = document.getElementById('error-sound');
              if (audio && !appState.isAppMuted) {
@@ -375,6 +377,8 @@
             renderApp();
         };
 
+        // ... (بقية دوال التحكم في القائمة والتسجيل و submitUsername - لم تتغير) ...
+        
         // دالة تبديل حالة القائمة الجانبية
         window.toggleMenu = () => {
              setState({ isMenuOpen: !appState.isMenuOpen });
@@ -430,6 +434,8 @@
 
         // --- 5. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
         
+        // ... (دوال renderHeader و renderFooter - لم تتغير) ...
+        
         const renderHeader = () => {
             const headerElement = document.getElementById('app-header');
             const categoryMeta = CATEGORIES.find(c => c.id === appState.selectedCategory);
@@ -504,12 +510,12 @@
             `;
         };
 
-
         // --- 6. شاشة 1: شاشة الترحيب (Welcome Screen) ---
+        // ... (دالة renderWelcomeScreen - لم تتغير) ...
         const renderWelcomeScreen = () => {
             const content = document.getElementById('app-content');
             
-            const logoImage = ' images/img_1760119766833.jpg'; 
+            const logoImage = 'images/placeholder_logo.png'; 
             const appTagline = "رفيق طفلك لتعلم اللغة الأمازيغية (تيفيناغ)";
             
             const copyrightText = "TIFIWIN-AZIZIJAOUAD@2025";
@@ -563,9 +569,9 @@
                 </div>
             `;
         };
-        
 
         // --- 7. شاشة 2: الشاشة الرئيسية (Home Screen) ---
+        // ... (دالة renderHomeScreen - لم تتغير) ...
         const renderHomeScreen = () => {
             const content = document.getElementById('app-content');
             
@@ -626,6 +632,20 @@
         };
 
         // --- 8. شاشة 3 و 4: شاشة التعلم العامة (Learning Screen) ---
+        
+        // 🚨 NEW: دالة مساعدة لتلوين الحرف داخل الكلمة
+        const highlightLetterInWord = (word, letter) => {
+            if (!word || !letter) return word;
+            
+            // إنشاء تعبير نمطي للبحث عن جميع تكرارات الحرف (global flag g)
+            // ويتم تغليف الحرف في وسم <span> باللون الأحمر
+            const regex = new RegExp(letter, 'g');
+            
+            // يتم استخدام تلوين Tailwind CSS
+            return word.replace(regex, `<span class="text-red-500 dark:text-red-400 font-extrabold">${letter}</span>`);
+        };
+
+
         const renderLearningScreen = () => {
             const categoryId = appState.selectedCategory;
             const content = document.getElementById('app-content');
@@ -647,6 +667,7 @@
 
             const currentItem = data[appState.currentIndex];
             const isColorsCategory = categoryId === 'colors';
+            const isTifinaghLetters = categoryId === 'tifinaghLetters'; // 🚨 NEW
             const isRecordingActive = appState.isRecording; 
             
             window.playAudio = () => {
@@ -692,16 +713,55 @@
             }
 
             let mainWordDisplay = currentItem.main;
-            let secondaryText = currentItem.word;
+            let secondaryText = currentItem.transliteration; // الكلمة الأمازيغية
             
-            const cornerElementHTML = (categoryId === 'tifinaghLetters') ? `
-                <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">
-                        ${currentItem.main}
-                    </h2>
-                </div>
-            ` : '';
+            // 🚨 NEW LOGIC: منطق تلوين الحروف وإضافة الزوايا
+            let cornerElementHTML = '';
+            let mainWordClasses = 'text-3xl font-black mb-1 drop-shadow-lg leading-tight'; 
+            
+            if (isTifinaghLetters) {
+                const targetLetter = currentItem.main; 
+                
+                // 1. تلوين الحرف الرئيسي (البطاقة الكبيرة) باللون الأحمر
+                mainWordDisplay = `<span class="text-red-500 dark:text-red-400 font-extrabold text-5xl">${targetLetter}</span>`;
+                mainWordClasses = 'text-5xl font-black mb-1 drop-shadow-lg leading-tight';
+                
+                // 2. تلوين الحرف داخل الكلمة الأمازيغية (secondaryText)
+                if (currentItem.transliteration) {
+                     secondaryText = highlightLetterInWord(currentItem.transliteration, targetLetter);
+                }
 
+                // 3. إضافة الحرف التكراري في الزاوية العلوية اليسرى
+                const 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 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">
+                            ${targetLetter}
+                        </h2>
+                    </div>
+                `;
+                
+            } else {
+                // Logic for other categories 
+                const cornerText = currentItem.main.length > 3 ? categoryMeta.title : currentItem.main;
+                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-xl icon-shadow">
+                            ${cornerText}
+                        </h2>
+                    </div>
+                `;
+            }
+            
             const micAction = isRecordingActive ? 'stopRecording()' : 'startRecording()';
             const micButtonClass = isRecordingActive 
                 ? 'bg-red-600 hover:bg-red-700 shadow-2xl shadow-red-400/70 animate-pulse' 
@@ -722,10 +782,15 @@
                         </div>
 
                         <div class="mt-1 text-center text-white">
-                          <p class="text-3xl font-black mb-1 drop-shadow-lg leading-tight">${mainWordDisplay}</p> 
-                          <p class="text-sm font-medium opacity-80 italic drop-shadow-sm">
+                          <p class="${mainWordClasses}">${mainWordDisplay}</p> 
+                          
+                          <p class="text-2xl font-black mb-1 drop-shadow-lg leading-tight ${isTifinaghLetters ? 'mt-3' : ''}">
                             ${secondaryText}
                           </p>
+                          
+                          <p class="text-sm font-medium opacity-80 italic drop-shadow-sm mt-1">
+                            ${currentItem.word} 
+                          </p>
                         </div>
                     </div>
 
@@ -759,8 +824,10 @@
                 </div>
             `;
         };
-        
+
         // --- 9. شاشة الإعدادات (Settings Screen) ---
+        // ... (بقية الدوال - لم تتغير) ...
+        
         const renderSettingsScreen = () => {
             const content = document.getElementById('app-content');