I want you to click every button and make sure it works. I want all the coded information given to work properly . Fix any errors. Every button that I click doesn’t work and it needs to work - Follow Up Deployment

index.html

@@ -8,6 +8,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
+
         // Business settings data
         let businessSettings = {
             maxRingTime: 30,
@@ -51,7 +52,7 @@
             }
         }
 
-        function saveSettings() {
+        function saveSettings(showNotification = true) {
             businessSettings = {
                 maxRingTime: parseInt(document.getElementById('maxRingTime').value),
                 smsResponseTime: parseInt(document.getElementById('smsResponseTime').value),
@@ -891,33 +892,41 @@
             localStorage.setItem('AI_Training', JSON.stringify(trainingData));
         }
 
-        // Enhanced Navigation System
+        // Navigation System
         function showScreen(screenId) {
-            // Hide all screens
-            document.querySelectorAll('.screen').forEach(screen => {
+            const screens = document.querySelectorAll('.screen');
+            screens.forEach(screen => {
                 screen.classList.remove('active');
             });
             
-            // Show selected screen with animation
             const targetScreen = document.getElementById(screenId);
-            targetScreen.classList.add('active');
+            if (targetScreen) {
+                targetScreen.classList.add('active');
+                
+                if (screenId === 'settingsScreen') {
+                    loadSettings();
+                } else if (screenId === 'trainingScreen') {
+                    populateTrainingHistory();
+                    document.getElementById('trainingInput').focus();
+                }
+            }
             
-            // Apply active state to tab bar
-            const tabs = document.querySelectorAll('.tab-bar button');
-            tabs.forEach(tab => {
-                tab.classList.remove('text-accent', 'font-medium');
-                tab.classList.add('text-gray-500');
-            });
+            // Update tab bar styling
+            const tabLabels = {
+                'homeScreen': 0,
+                'repliesScreen': 1,
+                'trainingScreen': 2,
+                'settingsScreen': 3
+            };
             
-            // Find and activate matching tab
-            const activeIndex = Array.from(tabs).findIndex(tab => 
-                tab.getAttribute('onclick').includes(screenId)
-            );
+            const tabs = document.querySelectorAll('.tab-bar button');
+            const tabIndex = tabLabels[screenId] || 0;
             
-            if (activeIndex >= 0) {
-                tabs[activeIndex].classList.remove('text-gray-500');
-                tabs[activeIndex].classList.add('text-accent', 'font-medium');
-            }
+            tabs.forEach((tab, index) => {
+                tab.classList.toggle('text-accent', index === tabIndex);
+                tab.classList.toggle('text-gray-500', index !== tabIndex);
+                tab.classList.toggle('font-medium', index === tabIndex);
+            });
 
             // Screen-specific initialization
             switch(screenId) {
@@ -996,13 +1005,30 @@
         }
         
         // Answer call function
-        function answerCall(options = {}) {
-            const {
-                isTest = false,
-                customNumber = '',
-                scenario = 'standard',
-                retryCount = 0
-            } = options;
+        function answerCall(isTest = false) {
+            const fab = document.querySelector('.fab');
+            const icon = fab.querySelector('i');
+            
+            if (icon.classList.contains('fa-phone')) {
+                icon.classList.remove('fa-phone');
+                icon.classList.add('fa-stop');
+                fab.style.background = 'linear-gradient(135deg, #32d74b, #30d158)';
+                
+                showResponseMessage(`Call ringing (will answer in ${businessSettings.maxRingTime} seconds if no reply)...`);
+                
+                setTimeout(() => {
+                    if (icon.classList.contains('fa-stop')) {
+                        showResponseMessage(businessSettings.personalGreeting || 
+                            (businessSettings.responseLanguage === 'es' ?
+                            "Hola, habla el asistente de Jay's Mobile Wash" :
+                            "Hello, this is Jay's Mobile Wash assistant"));
+                    }
+                }, businessSettings.maxRingTime * 1000);
+            } else {
+                icon.classList.remove('fa-stop');
+                icon.classList.add('fa-phone');
+                fab.style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)';
+            }
             
             // Log this interaction for learning
             const callLog = {
@@ -1170,7 +1196,31 @@
 
         function handleTrainingKeyPress(e) {
             if (e.key === 'Enter') {
-                submitTraining();
+                submitTextTraining();
+            }
+        }
+
+        function submitTextTraining() {
+            const input = document.getElementById('trainingInput');
+            if (input.value.trim()) {
+                const chatContainer = document.querySelector('#trainingScreen .flex-1.overflow-y-auto');
+                const userBubble = document.createElement('div');
+                userBubble.className = 'user-bubble mt-4 animate-fadeIn';
+                userBubble.innerHTML = `<p>${input.value}</p>`;
+                chatContainer.appendChild(userBubble);
+                
+                setTimeout(() => {
+                    const aiBubble = document.createElement('div');
+                    aiBubble.className = 'ai-bubble mt-4 animate-fadeIn';
+                    aiBubble.innerHTML = `<p>Understood! I'll handle calls with: "${input.value}"</p>`;
+                    chatContainer.appendChild(aiBubble);
+                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                    
+                    trainingData.textTraining.responseTemplates[Date.now()] = input.value;
+                    localStorage.setItem('AI_Training', JSON.stringify(trainingData));
+                }, 500);
+                
+                input.value = '';
             }
         }
 
@@ -1284,6 +1334,21 @@
         function startVoiceTraining() {
             const button = document.getElementById('startRecording');
             
+            if (!voiceRecording) {
+                button.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Recording';
+                button.classList.add('bg-red-600');
+                voiceRecording = true;
+                
+                // Simulate recording (in a real app would use MediaRecorder API)
+                setTimeout(() => {
+                    button.innerHTML = '<i class="fas fa-microphone mr-2"></i> Record Response';
+                    button.classList.remove('bg-red-600');
+                    voiceRecording = false;
+                    processVoiceRecording();
+                }, 2000);
+            }
+            const button = document.getElementById('startRecording');
+            
             if (!voiceRecording) {
                 // Start recording
                 button.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Recording';
@@ -1431,22 +1496,24 @@
             addAppearAnimations();
             simulateAIProgress();
             
-            // Enhanced screen initialization
-            document.querySelectorAll('[onclick^="showScreen"]').forEach(btn => {
-                btn.addEventListener('click', function() {
-                    const screenName = this.getAttribute('onclick').match(/'(.*?)'/)[1];
-                    setTimeout(() => {
-                        if (screenName === 'trainingScreen') {
-                            document.getElementById('trainingInput').focus();
-                            populateTrainingHistory();
-                        }
-                        else if (screenName === 'settingsScreen') {
-                            // Make sure settings are loaded
-                            loadSettings();
-                        }
-                    }, 300);
+            // Initialize with home screen
+            showScreen('homeScreen');
+            
+            // Load settings when settings screen is shown
+            // Initialize tab buttons
+            document.querySelectorAll('.tab-bar button').forEach((tab, index) => {
+                tab.addEventListener('click', function() {
+                    const screens = ['homeScreen', 'repliesScreen', 'trainingScreen', 'settingsScreen'];
+                    showScreen(screens[index]);
                 });
             });
+            
+            // Initialize other interactive elements
+            document.querySelector('.fab').addEventListener('click', function() {
+                answerCall();
+            });
+            
+            document.getElementById('saveTraining').addEventListener('click', saveTraining);
 
             // Direct phone link initialization
             const phoneLink = document.createElement('a');
@@ -1455,25 +1522,25 @@
             document.body.appendChild(phoneLink);
         });
 
-        // Enhanced settings save/load
+        // Save settings function
         function saveSettings() {
             businessSettings = {
-                maxRingTime: parseInt(document.getElementById('maxRingTime').value),
-                smsResponseTime: parseInt(document.getElementById('smsResponseTime').value),
-                responseLanguage: document.getElementById('responseLanguage').value,
-                personalGreeting: document.getElementById('personalGreeting').value,
+                maxRingTime: parseInt(document.getElementById('maxRingTime').value) || 30,
+                smsResponseTime: parseInt(document.getElementById('smsResponseTime').value) || 15,
+                responseLanguage: document.getElementById('responseLanguage').value || 'en',
+                personalGreeting: document.getElementById('personalGreeting').value || '',
                 businessHours: {
-                    open: document.getElementById('openTime').value,
-                    close: document.getElementById('closeTime').value
+                    open: document.getElementById('openTime').value || '08:00',
+                    close: document.getElementById('closeTime').value || '18:00'
                 },
                 responses: {
                     missedCall: {
-                        en: document.getElementById('missedCallResponse').value,
-                        es: document.getElementById('missedCallResponseEs').value
+                        en: document.getElementById('missedCallResponse').value || "Hello, this is Jay's Mobile Wash...",
+                        es: document.getElementById('missedCallResponseEs').value || "Hola, es el lavado móvil de Jay..."
                     },
                     afterHours: {
-                        en: document.getElementById('afterHoursResponse').value,
-                        es: document.getElementById('afterHoursResponseEs').value
+                        en: document.getElementById('afterHoursResponse').value || "Thank you for contacting...",
+                        es: document.getElementById('afterHoursResponseEs').value || "Gracias por contactar..."
                     }
                 }
             };
@@ -1491,6 +1558,23 @@
             document.getElementById('directPhoneLink').click();
         }
 
+        // Initialize default data if empty
+        if (!trainingData) {
+            trainingData = {
+                textTraining: {},
+                voiceTraining: {},
+                customResponses: {},
+                detailingKnowledge: {
+                    website: "https://www.jaysmobilewash.com",
+                    pricing: {
+                        basic: { car: 60, suv: 70 },
+                        luxury: { car: 130, suv: 140 },
+                        max: { car: 200, suv: 210 }
+                    }
+                }
+            };
+        }
+
         // Mobile detailing knowledge base
         const detailingKnowledge = {
             website: "https://www.jaysmobilewash.com",

prompts.txt

@@ -1,4 +1,6 @@
 Please fix the settingss tab it doesn’t work. I want to be able to set duration times . For example if I don’t answer a test after a certain amount of minutes or if I don’t answer a call after a certain amount of time then the ai answers the call or responds via text
 When I click settings nothing opens please fix code then run test to make sure all is working and this application is directly linked to my phone callls and text 5622289429
 Settings button still does nothing. When you click it I want it to be able to set duration times of when the ai should respond with text or answer the call.  
-You might need to recode . Settings button doesn’t work and neither do some of the other buttons. Improve the test ai calling by having it call a number I give to it and have it learn. Also improve the training code and add reasoning. It’s  too simple. Separate training into two buttons one for text tracing and one for voice answering training. 
+You might need to recode . Settings button doesn’t work and neither do some of the other buttons. Improve the test ai calling by having it call a number I give to it and have it learn. Also improve the training code and add reasoning. It’s  too simple. Separate training into two buttons one for text tracing and one for voice answering training. 
+Now nothing works.. can you fix the code to make every button work when I click it 
+I want you to click every button and make sure it works. I want all the coded information given to work properly . Fix any errors.  Every button that I click doesn’t work and it needs to work