Upload 2 files

js/app-controller.js

@@ -10,13 +10,17 @@ class ApplicationController {
         this.renderer = null;
         this.guiController = null;
         this.configuration = null;
+        this.isMobile = this.detectMobile();
+        
+        // Adjust default particle count for mobile devices
+        const defaultParticleCount = this.isMobile ? 30000 : CONSTANTS.DEFAULT_PARTICLE_COUNT;
         
         // Application state
         this.state = {
             atomicNumber: 1,
             elementSymbol: 'H',
             displaySettings: {
-                particleCount: CONSTANTS.DEFAULT_PARTICLE_COUNT,
+                particleCount: defaultParticleCount,
                 particleSize: CONSTANTS.PARTICLE_SIZE,
                 opacity: CONSTANTS.PARTICLE_OPACITY,
                 scale: 1.0,  // Scale factor for atom size (0.1 to 3.0)
@@ -37,6 +41,15 @@ class ApplicationController {
         };
     }
     
+    /**
+     * Detect if device is mobile
+     * @returns {boolean}
+     */
+    detectMobile() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 
+            || window.innerWidth <= 768;
+    }
+    
     /**
      * Initialize all subsystems
      * @param {HTMLCanvasElement} canvas

js/gui-controller.js

@@ -9,23 +9,62 @@ class GUIController {
         this.gui = null;
         this.folders = {};
         this.orbitalControls = new Map();
+        this.isMobile = this.detectMobile();
+    }
+    
+    /**
+     * Detect if device is mobile
+     * @returns {boolean}
+     */
+    detectMobile() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 
+            || window.innerWidth <= 768;
     }
     
     /**
      * Initialize lil-gui interface
      */
     initialize() {
-        this.gui = new lil.GUI({ width: 450 });
+        // Adjust GUI width based on device
+        const guiWidth = this.isMobile ? Math.min(window.innerWidth - 20, 320) : 450;
+        
+        this.gui = new lil.GUI({ 
+            width: guiWidth,
+            autoPlace: true
+        });
         this.gui.title('Electron Cloud Visualizer');
         
+        // Close all folders by default on mobile for better UX
+        if (this.isMobile) {
+            this.gui.close();
+        }
+        
         this.createAtomControls();
         this.createDisplayControls();
         this.createCameraControls();
         this.createCredits();
         
+        // Add mobile-specific styling
+        if (this.isMobile) {
+            this.applyMobileStyling();
+        }
+        
         return this.gui;
     }
     
+    /**
+     * Apply mobile-specific styling to GUI
+     */
+    applyMobileStyling() {
+        const guiElement = this.gui.domElement;
+        guiElement.style.position = 'fixed';
+        guiElement.style.top = '10px';
+        guiElement.style.right = '10px';
+        guiElement.style.maxHeight = 'calc(100vh - 20px)';
+        guiElement.style.overflowY = 'auto';
+        guiElement.style.zIndex = '1000';
+    }
+    
     /**
      * Create Atom Settings controls
      */