Update index.html

index.html

@@ -69,7 +69,7 @@
 
     <canvas id="bg-canvas" class="absolute top-0 left-0 w-full h-full outline-none z-10"></canvas>
     
-    <div id="loading-overlay" class="glass-ui absolute inset-0 z-[60] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
+    <div id="loading-overlay" class="glass-ui absolute inset-0 z-[51] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
         <div class="spinner w-12 h-12 border-4 border-gray-600 rounded-full animate-spin"></div>
     </div>
     <div id="main-loader" class="absolute inset-0 bg-gray-900 flex flex-col items-center justify-center z-50 transition-opacity duration-500">
@@ -129,7 +129,7 @@
              <input type="text" id="model-url-input" class="w-full bg-gray-900/50 p-2 rounded-md border-2 border-gray-600 focus:border-blue-500 outline-none" placeholder="Enter model URL (.glb, .gltf)">
              <div class="flex justify-end gap-3 mt-2">
                  <button onclick="document.getElementById('upload-model-modal').style.display='none'" class="bg-gray-600 px-4 py-2 rounded-md font-semibold hover:bg-gray-700">Cancel</button>
-                 <button id="load-model-url-btn" class="bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700 min-w-[80px]">Load</button>
+                 <button id="load-model-url-btn" class="bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700 min-w-[80px] flex justify-center items-center">Load</button>
              </div>
         </div>
     </div>
@@ -146,7 +146,7 @@
              <input type="text" id="panorama-url-input" class="w-full bg-gray-900/50 p-2 rounded-md border-2 border-gray-600 focus:border-blue-500 outline-none" placeholder="Enter panorama image URL">
              <div class="flex justify-end gap-3 mt-2">
                  <button onclick="document.getElementById('upload-panorama-modal').style.display='none'" class="bg-gray-600 px-4 py-2 rounded-md font-semibold hover:bg-gray-700">Cancel</button>
-                 <button id="load-panorama-url-btn" class="bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700 min-w-[80px]">Load</button>
+                 <button id="load-panorama-url-btn" class="bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700 min-w-[80px] flex justify-center items-center">Load</button>
              </div>
         </div>
     </div>
@@ -162,6 +162,7 @@
         const defaultModelFiles = [ 'gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb' ].map(name => ({ name, url: `/glb/${name}`, thumb: `/glb/thumbnails/${name.replace('.glb', '.png')}` }));
         
         let scene, camera, renderer, controls;
+        let isInitialized = false;
         const loadedModels = new Map();
         
         const mainLoader = document.getElementById('main-loader');
@@ -196,7 +197,10 @@
             await loadAndSwitchModel(defaultModelFiles[0]);
 
             mainLoader.style.opacity = '0';
-            setTimeout(() => mainLoader.style.display = 'none', 500);
+            setTimeout(() => {
+                mainLoader.style.display = 'none';
+                isInitialized = true;
+            }, 500);
             
             window.addEventListener('resize', onWindowResize);
             animate();
@@ -277,7 +281,7 @@
             const thumb = document.createElement('img');
             thumb.src = modelData.thumb;
             thumb.alt = `Thumbnail for ${modelData.name}`;
-            thumb.className = 'w-full h-auto aspect-square object-contain'; // Use object-contain for PNGs
+            thumb.className = 'w-full h-auto aspect-square object-contain';
             thumb.onerror = () => { 
                 thumb.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2E1YjRjYyIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMyBsIDE0IDAgYSBUbyAwIDAgMSAyIDIgTCAyMSAxOSBhIDIgMiAwIDAgMSAtMiAyIEwgNSAyMSBhIDIgMiAwIDAgMSAtMiAtMiBMIDMgNSBhIDIgMiAwIDAgMSAyIC0yIFoiPjwvcGF0aD48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ij48L2NpcmNsZT48L3N2Zz4=';
                 thumb.classList.add('bg-gray-800', 'p-4');
@@ -320,7 +324,7 @@
         function toggleButtonLoading(button, isLoading) {
             if (isLoading) {
                 button.disabled = true;
-                button.innerHTML = `<svg class="animate-spin h-5 w-5 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`;
+                button.innerHTML = `<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`;
             } else {
                 button.disabled = false;
                 button.innerHTML = 'Load';
@@ -328,9 +332,11 @@
         }
 
         function setupEventListeners() {
-            // Panels
             const modelPanel = document.getElementById('model-panel');
             const panoramaPanel = document.getElementById('panorama-panel');
+            const uploadModelModal = document.getElementById('upload-model-modal');
+            const uploadPanoramaModal = document.getElementById('upload-panorama-modal');
+
             const closeModelPanel = () => modelPanel.classList.remove('is-open');
             const closePanoramaPanel = () => panoramaPanel.classList.remove('is-open');
             document.getElementById('model-panel-trigger').addEventListener('click', e => { e.stopPropagation(); modelPanel.classList.toggle('is-open'); closePanoramaPanel(); });
@@ -339,37 +345,34 @@
             document.getElementById('close-panorama-panel').addEventListener('click', closePanoramaPanel);
             document.getElementById('bg-canvas').addEventListener('click', () => { closeModelPanel(); closePanoramaPanel(); });
 
-            // Modals
-            const uploadModelModal = document.getElementById('upload-model-modal');
-            const uploadPanoramaModal = document.getElementById('upload-panorama-modal');
             document.getElementById('add-model-btn').addEventListener('click', () => uploadModelModal.style.display = 'flex');
             document.getElementById('add-panorama-btn').addEventListener('click', () => uploadPanoramaModal.style.display = 'flex');
 
-            // File Handling
             const modelFileInput = document.getElementById('model-file-input');
             const panoramaFileInput = document.getElementById('panorama-file-input');
             modelFileInput.addEventListener('change', e => handleModelFile(e.target.files[0]));
             panoramaFileInput.addEventListener('change', e => handlePanoramaFile(e.target.files[0]));
 
-            // URL Loading
             const loadModelUrlBtn = document.getElementById('load-model-url-btn');
+            const modelUrlInput = document.getElementById('model-url-input');
             loadModelUrlBtn.addEventListener('click', () => {
-                const url = document.getElementById('model-url-input').value.trim();
+                const url = modelUrlInput.value.trim();
                 if(url) {
                     toggleButtonLoading(loadModelUrlBtn, true);
                     handleModelFile(url).finally(() => toggleButtonLoading(loadModelUrlBtn, false));
                 }
             });
+
             const loadPanoramaUrlBtn = document.getElementById('load-panorama-url-btn');
+            const panoramaUrlInput = document.getElementById('panorama-url-input');
             loadPanoramaUrlBtn.addEventListener('click', () => {
-                const url = document.getElementById('panorama-url-input').value.trim();
+                const url = panoramaUrlInput.value.trim();
                 if(url) {
                     toggleButtonLoading(loadPanoramaUrlBtn, true);
                     handlePanoramaFile(url).finally(() => toggleButtonLoading(loadPanoramaUrlBtn, false));
                 }
             });
 
-            // Drag and Drop
             setupDragDrop('model-drop-zone', handleModelFile, modelFileInput);
             setupDragDrop('panorama-drop-zone', handlePanoramaFile, panoramaFileInput);
         }
@@ -378,11 +381,12 @@
             if(!fileOrUrl) return;
             const isUrl = typeof fileOrUrl === 'string';
             const url = isUrl ? fileOrUrl : URL.createObjectURL(fileOrUrl);
-            const name = isUrl ? fileOrUrl.split('/').pop() : fileOrUrl.name;
-            const modelData = { name, url, thumb: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2E1YjRjYyIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMyBsIDE0IDAgYSBUbyAwIDAgMSAyIDIgTCAyMSAxOSBhIDIgMiAwIDAgMSAtMiAyIEwgNSAyMSBhIDIgMiAwIDAgMSAtMiAtMiBMIDMgNSBhIDIgMiAwIDAgMSAyIC0yIFoiPjwvcGF0aD48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ij48L2NpcmNsZT48L3N2Zz4=' }; // Placeholder thumb
+            const name = isUrl ? fileOrUrl.split('/').pop().split('?')[0] : fileOrUrl.name;
+            const modelData = { name, url, thumb: `glb/thumbnails/${name.replace('.glb', '.png')}` };
             
-            createModelCard(modelData);
             document.getElementById('upload-model-modal').style.display = 'none';
+            document.getElementById('model-url-input').value = '';
+            createModelCard(modelData);
             await loadAndSwitchModel(modelData);
         }
 
@@ -390,11 +394,12 @@
             if(!fileOrUrl) return;
             const isUrl = typeof fileOrUrl === 'string';
             const url = isUrl ? fileOrUrl : URL.createObjectURL(fileOrUrl);
-            const name = isUrl ? fileOrUrl.split('/').pop() : fileOrUrl.name;
+            const name = isUrl ? fileOrUrl.split('/').pop().split('?')[0] : fileOrUrl.name;
             const panoData = { name, url, thumb: url };
 
-            createPanoramaCard(panoData);
             document.getElementById('upload-panorama-modal').style.display = 'none';
+            document.getElementById('panorama-url-input').value = '';
+            createPanoramaCard(panoData);
             await setPanorama(panoData);
         }
 
@@ -413,6 +418,7 @@
         }
 
         function showLoadingOverlay(show) {
+            if (show && !isInitialized) return;
             loadingOverlay.style.opacity = show ? '1' : '0';
             loadingOverlay.style.pointerEvents = show ? 'auto' : 'none';
         }