Update index.html

index.html

@@ -121,11 +121,11 @@
     <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).mpad" 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="background-music" src="audio/Funny Kids _ Children_s Music (Instrumental Music For Kids)(M4A_128K).m4a" preload="auto" loop></audio>
     <script>
         // --- 1. تعريف الأيقونات كـ SVG نصي ---
-        // ... (ICONS and renderIcon remain the same) ...
+        
         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>`,
             Share2: (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}"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>`,
@@ -262,63 +262,105 @@
             isAppMuted: false, 
             isRecording: false, 
             isUsernameSubmitted: false,
-            isBackgroundMusicPlaying: false, // 🚨 NEW: حالة تشغيل موسيقى الخلفية
+            isBackgroundMusicPlaying: false, 
         };
         
-        // --- 4. وظائف التحكم الصوتي (NEW/UPDATED) ---
+        // --- 4. وظائف التحكم الصوتي (UPDATED) ---
         
         /** يشغل صوت النقر على زر */
         const playClickSound = () => {
              const audio = document.getElementById('click-sound');
-             if (audio) {
+             if (audio && !appState.isAppMuted) {
                  audio.currentTime = 0;
                  audio.play().catch(e => console.error("Error playing click sound:", e));
              }
         };
 
-        /** يشغل أو يوقف موسيقى الخلفية */
+        /** 🚨 NEW: يشغل صوت النجاح */
+        const playSuccessSound = () => {
+             const audio = document.getElementById('success-sound');
+             if (audio && !appState.isAppMuted) {
+                 audio.currentTime = 0;
+                 audio.play().catch(e => console.error("Error playing success sound:", e));
+             }
+        };
+
+        /** 🚨 NEW: يشغل صوت الخطأ */
+        const playErrorSound = () => {
+             const audio = document.getElementById('error-sound');
+             if (audio && !appState.isAppMuted) {
+                 audio.currentTime = 0;
+                 audio.play().catch(e => console.error("Error playing error sound:", e));
+             }
+        };
+
+        /** يشغل أو يوقف موسيقى الخلفية (مع الاحتفاظ بحالة الإعدادات) */
         const toggleBackgroundMusic = (shouldPlay) => {
             const music = document.getElementById('background-music');
             if (!music) return;
 
+            // القيمة الافتراضية للتشغيل/الإيقاف تعتمد على ما تم تمريره، أو تبديل الحالة الحالية
             if (shouldPlay === undefined) {
-                 // تبديل الحالة إذا لم يتم تحديد القيمة
                 shouldPlay = !appState.isBackgroundMusicPlaying;
             }
             
+            // إذا كان المطلوب التشغيل لكن المستخدم قام بكتم التطبيق يدوياً، لا تفعل شيئاً
+            if (shouldPlay && appState.isAppMuted) {
+                // تحديث الحالة لتعكس أن الموسيقى متوقفة بسبب الكتم العام
+                appState.isBackgroundMusicPlaying = false; 
+                music.pause();
+                return; 
+            }
+
             if (shouldPlay) {
-                // محاولة التشغيل مع إهمال الأخطاء (بسبب قيود المتصفح على التشغيل التلقائي)
-                music.volume = 0.3; // خفض الصوت ليكون خلفية
+                music.volume = 0.3; 
                 music.play().then(() => {
-                    setState({ isBackgroundMusicPlaying: true, currentScreen: appState.currentScreen });
+                    appState.isBackgroundMusicPlaying = true;
+                    renderApp(); 
                 }).catch(e => {
                     console.warn("Background music autoplay failed:", e);
-                    // قد نفترض التشغيل حتى لو لم ينجح تلقائيا
-                    setState({ isBackgroundMusicPlaying: true, currentScreen: appState.currentScreen }); 
+                    appState.isBackgroundMusicPlaying = true; 
+                    renderApp();
                 });
             } else {
                 music.pause();
-                setState({ isBackgroundMusicPlaying: false, currentScreen: appState.currentScreen });
+                appState.isBackgroundMusicPlaying = false;
+                renderApp(); 
             }
         };
         
-        // دالة تحديث الحالة وإعادة رسم التطبيق
+        // دالة تحديث الحالة وإعادة رسم التطبيق (UPDATED)
         window.setState = (newState) => {
             
-            // 🚨 تشغيل صوت النقر لكل تغيير حالة (عدا القائمة والتسجيل لتقليل الضجيج)
+            // 🚨 تشغيل صوت النقر لكل تغيير حالة 
             if (newState.isMenuOpen === undefined && newState.isRecording === undefined && newState.currentScreen !== 'welcome') {
                  playClickSound();
             }
+            
+            const prevScreen = appState.currentScreen;
+            const nextScreen = newState.currentScreen || prevScreen;
+            
+            // تحديد ما إذا كانت الشاشة الجديدة هي شاشة تعلم (ضمن الفئات)
+            const isLearningScreen = CATEGORIES.some(c => c.id === nextScreen);
+            // تحديد ما إذا كانت الشاشة الجديدة هي شاشة تنقل رئيسية
+            const isMainScreen = ['home', 'settings', 'info', 'profile', 'appDefinition'].includes(nextScreen);
 
-            // إذا كان الانتقال من شاشة الترحيب إلى الرئيسية، شغل الموسيقى
-            if (appState.currentScreen === 'welcome' && newState.currentScreen === 'home') {
-                toggleBackgroundMusic(true);
-            }
-            // إذا كان الانتقال إلى شاشة التعلم، شغل الموسيقى
-            const isLearningScreen = CATEGORIES.some(c => c.id === newState.currentScreen);
+
+            // 🚨 منطق التحكم في موسيقى الخلفية
+            
+            // 1. إذا كان الانتقال إلى شاشة تعلم، أوقف الموسيقى
             if (isLearningScreen) {
-                toggleBackgroundMusic(true);
+                toggleBackgroundMusic(false);
+            }
+            
+            // 2. إذا كان الانتقال من شاشة تعلم إلى شاشة رئيسية، أو من الترحيب إلى الرئيسية، شغل الموسيقى
+            if ((isMainScreen) && (prevScreen === 'welcome' || CATEGORIES.some(c => c.id === prevScreen))) {
+                 // تأكد من أن الموسيقى لم يتم كتمها يدويا عبر الإعدادات
+                if (!appState.isAppMuted) {
+                     toggleBackgroundMusic(true);
+                }
             }
+            
 
             if (newState.currentScreen && newState.currentScreen !== appState.selectedCategory) {
                 appState.currentIndex = 0; 
@@ -342,13 +384,20 @@
         window.startRecording = () => {
              setState({ isRecording: true, currentScreen: appState.currentScreen });
              console.log("Recording Started...");
-             // في التطبيق الحقيقي: تشغيل صوت البداية
         };
 
         window.stopRecording = () => {
+             // 🚨 NEW: إضافة منطق محاكاة النتيجة
+             if (Math.random() > 0.5) {
+                 playSuccessSound();
+                 console.log("Playback Success Sound");
+             } else {
+                 playErrorSound();
+                 console.log("Playback Error Sound");
+             }
+             
              setState({ isRecording: false, currentScreen: appState.currentScreen });
              console.log("Recording Stopped.");
-             // في التطبيق الحقيقي: تشغيل صوت الإيقاف أو النجاح/الخطأ
         };
         
         // 🚨 دالة جديدة لإرسال اسم المستخدم
@@ -380,7 +429,7 @@
 
 
         // --- 5. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
-        // ... (renderHeader, renderFooter remain the same) ...
+        
         const renderHeader = () => {
             const headerElement = document.getElementById('app-header');
             const categoryMeta = CATEGORIES.find(c => c.id === appState.selectedCategory);
@@ -711,7 +760,7 @@
             `;
         };
         
-        // --- 9. شاشة الإعدادات (Settings Screen) (UPDATED) ---
+        // --- 9. شاشة الإعدادات (Settings Screen) ---
         const renderSettingsScreen = () => {
             const content = document.getElementById('app-content');
             
@@ -764,6 +813,8 @@
             `;
         };
         
+        // --- 10. شاشة حول التطبيق والقائمة الجانبية (The rest of the rendering functions) ---
+        
         const renderInfoScreen = () => {
             const content = document.getElementById('app-content');
 
@@ -853,7 +904,6 @@
         };
 
 
-        // --- 10. القائمة الجانبية (Menu) ---
         const renderMenu = () => {
             if (!appState.isMenuOpen) return '';
 
@@ -944,6 +994,8 @@
             } else if (screen === 'appDefinition') { 
                 renderAppDefinitionScreen();
             } else if (CATEGORIES.some(c => c.id === screen)) {
+                content.style.paddingTop = shouldShowNav ? '4rem' : '0'; 
+                content.style.paddingBottom = shouldShowNav ? '5rem' : '0';
                 renderLearningScreen();
             } else {
                 content.innerHTML = `
@@ -973,6 +1025,8 @@
 
         // تهيئة التطبيق عند تحميل النافذة
         window.onload = () => {
+             // التشغيل الأولي للموسيقى (لتجهيزها)
+             toggleBackgroundMusic(false); 
              renderApp();
         };