Add FPS monitoring and fallback to simple background in galaxy animation

js/galaxy-background.js

@@ -1,7 +1,17 @@
 // Galaxy background - moonlit terrain with floating stars
+// Includes FPS monitoring and fallback to simple background
 (function initGalaxy(){
   console.clear();
 
+  // FPS monitoring
+  let lastTime = performance.now();
+  let frameCount = 0;
+  let fps = 60;
+  let lowFpsCount = 0;
+  const FPS_THRESHOLD = 27;
+  const LOW_FPS_SAMPLES = 5; // Switch after 5 consecutive low FPS readings
+  let isSimpleMode = false;
+
   var ww = window.innerWidth,
       wh = window.innerHeight;
 
@@ -127,10 +137,98 @@
 
   function render(a) {
     requestAnimationFrame(render);
-    for(var i = 0; i < starsAmount; i++) {
-      updateStar(stars.children[i], i);
+    
+    // FPS monitoring
+    frameCount++;
+    const currentTime = performance.now();
+    const delta = currentTime - lastTime;
+    
+    if (delta >= 1000) { // Update FPS every second
+      fps = Math.round((frameCount * 1000) / delta);
+      frameCount = 0;
+      lastTime = currentTime;
+      
+      // Check if FPS is consistently low
+      if (fps < FPS_THRESHOLD) {
+        lowFpsCount++;
+        if (lowFpsCount >= LOW_FPS_SAMPLES && !isSimpleMode) {
+          console.warn(`Low FPS detected (${fps}). Switching to simple background...`);
+          switchToSimpleBackground();
+          isSimpleMode = true;
+        }
+      } else {
+        lowFpsCount = 0; // Reset counter if FPS improves
+      }
     }
-    renderer.render(scene, camera);
+    
+    if (!isSimpleMode) {
+      for(var i = 0; i < starsAmount; i++) {
+        updateStar(stars.children[i], i);
+      }
+      renderer.render(scene, camera);
+    }
+  }
+
+  function switchToSimpleBackground() {
+    // Stop rendering 3D scene
+    const canvas = document.querySelector('#galaxy-canvas');
+    canvas.style.display = 'none';
+    
+    // Create simple gradient background
+    const overlay = document.querySelector('#background-overlay');
+    overlay.style.background = 'linear-gradient(180deg, #0a1628 0%, #001a2d 50%, #000d1a 100%)';
+    overlay.style.backdropFilter = 'none';
+    
+    // Add simple animated stars
+    createSimpleStars();
+    
+    console.log('Simple background mode activated');
+  }
+
+  function createSimpleStars() {
+    const starsContainer = document.createElement('div');
+    starsContainer.id = 'simple-stars';
+    starsContainer.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
+    `;
+    
+    // Create 50 simple star divs
+    for (let i = 0; i < 50; i++) {
+      const star = document.createElement('div');
+      star.style.cssText = `
+        position: absolute;
+        width: 2px;
+        height: 2px;
+        background: white;
+        border-radius: 50%;
+        top: ${Math.random() * 100}%;
+        left: ${Math.random() * 100}%;
+        opacity: ${Math.random() * 0.5 + 0.3};
+        animation: twinkle ${Math.random() * 3 + 2}s infinite ease-in-out;
+      `;
+      starsContainer.appendChild(star);
+    }
+    
+    // Add twinkle animation
+    if (!document.querySelector('#simple-stars-style')) {
+      const style = document.createElement('style');
+      style.id = 'simple-stars-style';
+      style.textContent = `
+        @keyframes twinkle {
+          0%, 100% { opacity: 0.3; }
+          50% { opacity: 1; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    
+    document.body.appendChild(starsContainer);
   }
 
   function onResize() {