get rid of the vr simulator and replace it with something cool

index.html

@@ -194,15 +194,32 @@
                     </div>
                 </div>
                 <div class="bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800">
-                    <h3 class="text-2xl font-bold mb-4 text-red-500">Try VR Interview Simulator</h3>
-                    <div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border-2 border-yellow-500">
-                        <div id="vr-container" class="w-full h-full bg-black cursor-grab active:cursor-grabbing">
-                            <div id="vr-scene" class="w-full h-full relative overflow-hidden"></div>
+                    <h3 class="text-2xl font-bold mb-4 text-red-500">Real-Time Performance Dashboard</h3>
+                    <div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border-2 border-yellow-500 bg-black">
+                        <div id="performance-dashboard" class="w-full h-full flex flex-col justify-center items-center">
+                            <div class="flex justify-around w-full mb-8">
+                                <div class="text-center">
+                                    <div class="text-4xl font-bold text-yellow-500" id="confidence-level">87%</div>
+                                    <div class="text-gray-300">Confidence</div>
+                                </div>
+                                <div class="text-center">
+                                    <div class="text-4xl font-bold text-red-500" id="stress-level">42%</div>
+                                    <div class="text-gray-300">Stress</div>
+                                </div>
+                                <div class="text-center">
+                                    <div class="text-4xl font-bold text-green-500" id="focus-level">93%</div>
+                                    <div class="text-gray-300">Focus</div>
+                                </div>
+                            </div>
+                            <div class="w-4/5 h-4 bg-gray-800 rounded-full mb-2">
+                                <div id="performance-bar" class="h-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-full" style="width: 72%"></div>
+                            </div>
+                            <p class="text-gray-300">Your current performance score</p>
                         </div>
                     </div>
-<p class="text-gray-300 mb-4">
-    Click and drag to look around the virtual interview room. Use your mouse like Google Maps to explore the 360° environment.
-</p>
+                    <p class="text-gray-300 mb-4">
+                        This interactive dashboard simulates real biometric data from our training sessions.
+                    </p>
 </div>
 </div>
         </div>
@@ -453,65 +470,41 @@
     </footer>
 
     <script>
-        // VR Panorama Viewer
+        // Performance Dashboard Animation
         document.addEventListener('DOMContentLoaded', function() {
-            const container = document.getElementById('vr-container');
-            const scene = document.getElementById('vr-scene');
-            const panoramaImage = new Image();
+            const metrics = ['confidence-level', 'stress-level', 'focus-level'];
+            const performanceBar = document.getElementById('performance-bar');
             
-            panoramaImage.src = 'https://static.photos/office/2048x1024/42';
-            panoramaImage.onload = function() {
-                const imgWidth = panoramaImage.width;
-                const imgHeight = panoramaImage.height;
-                const aspectRatio = imgWidth / imgHeight;
-                
-                scene.style.backgroundImage = `url(${panoramaImage.src})`;
-                scene.style.backgroundSize = `${imgWidth}px ${imgHeight}px`;
-                
-                let isDragging = false;
-                let startX, startY;
-                let currentX = 0;
-                let targetX = 0;
-                
-                container.addEventListener('mousedown', (e) => {
-                    isDragging = true;
-                    startX = e.clientX;
-                    startY = e.clientY;
-                    container.style.cursor = 'grabbing';
-                    e.preventDefault();
-                });
-                
-                document.addEventListener('mousemove', (e) => {
-                    if (!isDragging) return;
+            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 deltaX = e.clientX - startX;
-                    targetX = currentX + deltaX;
-                    
-                    updatePanorama();
-                });
-                
-                document.addEventListener('mouseup', () => {
-                    isDragging = false;
-                    container.style.cursor = 'grab';
-                    currentX = targetX;
+                    const interval = setInterval(() => {
+                        current += increment;
+                        element.textContent = current + '%';
+                        
+                        if (current === target) {
+                            clearInterval(interval);
+                            setTimeout(animateMetrics, 2000);
+                        }
+                    }, 30);
                 });
                 
-                document.addEventListener('mouseleave', () => {
-                    isDragging = false;
-                    container.style.cursor = 'grab';
-                    currentX = targetX;
-                });
-                
-                function updatePanorama() {
-                    // Normalize the position to be within image width
-                    const normalizedX = targetX % imgWidth;
-                    
-                    // Apply the pan
-                    scene.style.backgroundPosition = `${normalizedX}px 0`;
-                }
-            };
+                // Animate performance bar
+                const newWidth = Math.floor(Math.random() * 30) + 60;
+                performanceBar.style.width = `${newWidth}%`;
+                performanceBar.style.background = `linear-gradient(to right, 
+                    ${newWidth < 30 ? '#ef4444' : newWidth < 70 ? '#f59e0b' : '#10b981'},
+                    ${newWidth < 30 ? '#f59e0b' : newWidth < 70 ? '#10b981' : '#3b82f6'})`;
+            }
+            
+            // Start the animation
+            animateMetrics();
         });
-        // Initialize Vanta.js background
+// Initialize Vanta.js background
 VANTA.GLOBE({
 el: "#vanta-bg",
             mouseControls: true,