can you make the real time performance dashboard more functional instead of it constantly changing make the time interval every 5 seconds

index.html

@@ -474,36 +474,31 @@
         document.addEventListener('DOMContentLoaded', function() {
             const metrics = ['confidence-level', 'stress-level', 'focus-level'];
             const performanceBar = document.getElementById('performance-bar');
-            
-            function animateMetrics() {
-                metrics.forEach(metric => {
-                    const element = document.getElementById(metric);
-                    const target = Math.floor(Math.random() * 30) + 70;
-                    let current = parseInt(element.textContent);
-                    const increment = target > current ? 1 : -1;
-                    
-                    const interval = setInterval(() => {
-                        current += increment;
-                        element.textContent = current + '%';
-                        
-                        if (current === target) {
-                            clearInterval(interval);
-                            setTimeout(animateMetrics, 2000);
-                        }
-                    }, 30);
-                });
+            function updateMetrics() {
+                const realisticValues = [
+                    { confidence: 87, stress: 42, focus: 93, width: 72 },
+                    { confidence: 78, stress: 38, focus: 88, width: 68 },
+                    { confidence: 92, stress: 29, focus: 95, width: 82 },
+                    { confidence: 84, stress: 45, focus: 90, width: 76 },
+                    { confidence: 89, stress: 33, focus: 91, width: 79 }
+                ];
+                
+                const currentValues = realisticValues[Math.floor(Math.random() * realisticValues.length)];
                 
-                // Animate performance bar
-                const newWidth = Math.floor(Math.random() * 30) + 60;
-                performanceBar.style.width = `${newWidth}%`;
+                document.getElementById('confidence-level').textContent = currentValues.confidence + '%';
+                document.getElementById('stress-level').textContent = currentValues.stress + '%';
+                document.getElementById('focus-level').textContent = currentValues.focus + '%';
+                
+                performanceBar.style.width = `${currentValues.width}%`;
                 performanceBar.style.background = `linear-gradient(to right, 
-                    ${newWidth < 30 ? '#ef4444' : newWidth < 70 ? '#f59e0b' : '#10b981'},
-                    ${newWidth < 30 ? '#f59e0b' : newWidth < 70 ? '#10b981' : '#3b82f6'})`;
+                    ${currentValues.width < 30 ? '#ef4444' : currentValues.width < 70 ? '#f59e0b' : '#10b981'},
+                    ${currentValues.width < 30 ? '#f59e0b' : currentValues.width < 70 ? '#10b981' : '#3b82f6'})`;
             }
             
-            // Start the animation
-            animateMetrics();
-        });
+            // Update every 5 seconds
+            updateMetrics();
+            setInterval(updateMetrics, 5000);
+});
 // Initialize Vanta.js background
 VANTA.GLOBE({
 el: "#vanta-bg",