Update index.html

index.html

@@ -12,9 +12,9 @@
         body { background-color: #111827; }
 
         .glass-ui {
-            background-color: rgba(17, 24, 39, 0.85);
+            background-color: rgba(23, 31, 47, 0.75);
             backdrop-filter: blur(16px);
-            border-color: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         .modal-overlay {
@@ -22,9 +22,6 @@
             backdrop-filter: blur(8px);
         }
 
-        #loading-overlay {
-            transition: opacity 0.3s ease-in-out;
-        }
         #loading-overlay .spinner {
             border-top-color: #3b82f6;
         }
@@ -42,7 +39,7 @@
         .panel-trigger:hover { background-color: rgba(59, 130, 246, 0.5); }
 
         .list-item {
-             transition: all 0.2s ease;
+             transition: all 0.2s ease-in-out;
              border: 2px solid transparent;
         }
         .list-item:hover {
@@ -50,7 +47,7 @@
             transform: scale(1.03);
         }
         .list-item.active {
-            background-color: rgba(59, 130, 246, 0.25);
+            background-color: rgba(59, 130, 246, 0.2);
             border-color: #3b82f6;
         }
         
@@ -63,7 +60,7 @@
             transition: background-color 0.2s, border-color 0.2s;
         }
         .drop-zone.drag-over {
-            background-color: rgba(59, 130, 246, 0.2);
+            background-color: rgba(59, 130, 246, 0.15);
             border-color: #3b82f6;
         }
     </style>
@@ -72,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-50 flex items-center justify-center opacity-0 pointer-events-none">
+    <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 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">
@@ -90,7 +87,7 @@
     
     <!-- Panels -->
     <aside id="model-panel" class="side-panel left glass-ui fixed top-0 left-0 h-full w-80 max-w-[80vw] z-30 flex flex-col">
-        <div class="flex-shrink-0 flex justify-between items-center p-4 border-b border-gray-700">
+        <div class="flex-shrink-0 flex justify-between items-center p-4 border-b border-white/10">
             <h2 class="text-xl font-bold text-white">Models</h2>
             <div>
                 <button id="add-model-btn" class="p-2 rounded-full hover:bg-blue-500/50" title="Add new model">
@@ -105,7 +102,7 @@
     </aside>
 
     <aside id="panorama-panel" class="side-panel right glass-ui fixed top-0 right-0 h-full w-80 max-w-[80vw] z-30 flex flex-col">
-        <div class="flex-shrink-0 flex justify-between items-center p-4 border-b border-gray-700">
+        <div class="flex-shrink-0 flex justify-between items-center p-4 border-b border-white/10">
             <h2 class="text-xl font-bold text-white">Panoramas</h2>
              <div>
                 <button id="add-panorama-btn" class="p-2 rounded-full hover:bg-blue-500/50" title="Add new panorama">
@@ -121,40 +118,39 @@
 
     <!-- Upload Modals -->
     <div id="upload-model-modal" class="modal-overlay fixed inset-0 z-40 hidden items-center justify-center">
-        <div class="glass-ui p-6 rounded-lg w-full max-w-md mx-4">
-             <h3 class="text-2xl font-bold mb-4">Upload New Model</h3>
-             <div id="model-drop-zone" class="drop-zone p-6 rounded-lg text-center mb-4 cursor-pointer">
-                 <p class="text-gray-400">Drag & Drop .glb file here or</p>
-                 <button id="browse-model-btn" class="mt-2 bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700">Browse</button>
+        <div class="glass-ui p-6 rounded-lg w-full max-w-md mx-4 flex flex-col gap-4">
+             <h3 class="text-2xl font-bold text-center">Upload New Model</h3>
+             <div id="model-drop-zone" class="drop-zone p-6 rounded-lg text-center cursor-pointer">
+                 <p class="text-gray-300 pointer-events-none">Drag & Drop .glb file</p>
+                 <p class="text-gray-400 text-sm pointer-events-none">or click to browse</p>
                  <input type="file" id="model-file-input" class="hidden" accept=".glb,.gltf">
              </div>
-             <p class="text-center text-gray-400 my-2">OR</p>
+             <div class="flex items-center text-gray-400"><hr class="flex-grow border-white/10"><span class="mx-2 text-sm">OR</span><hr class="flex-grow border-white/10"></div>
              <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-5">
-                 <button id="cancel-model-upload" 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">Load</button>
+             <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>
              </div>
         </div>
     </div>
     
     <div id="upload-panorama-modal" class="modal-overlay fixed inset-0 z-40 hidden items-center justify-center">
-        <div class="glass-ui p-6 rounded-lg w-full max-w-md mx-4">
-             <h3 class="text-2xl font-bold mb-4">Upload New Panorama</h3>
-             <div id="panorama-drop-zone" class="drop-zone p-6 rounded-lg text-center mb-4 cursor-pointer">
-                 <p class="text-gray-400">Drag & Drop image here or</p>
-                 <button id="browse-panorama-btn" class="mt-2 bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700">Browse</button>
+        <div class="glass-ui p-6 rounded-lg w-full max-w-md mx-4 flex flex-col gap-4">
+             <h3 class="text-2xl font-bold text-center">Upload New Panorama</h3>
+             <div id="panorama-drop-zone" class="drop-zone p-6 rounded-lg text-center cursor-pointer">
+                 <p class="text-gray-300 pointer-events-none">Drag & Drop image</p>
+                 <p class="text-gray-400 text-sm pointer-events-none">or click to browse</p>
                  <input type="file" id="panorama-file-input" class="hidden" accept="image/*">
              </div>
-             <p class="text-center text-gray-400 my-2">OR</p>
+             <div class="flex items-center text-gray-400"><hr class="flex-grow border-white/10"><span class="mx-2 text-sm">OR</span><hr class="flex-grow border-white/10"></div>
              <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-5">
-                 <button id="cancel-panorama-upload" 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">Load</button>
+             <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>
              </div>
         </div>
     </div>
 
-
     <script type="importmap">{ "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } }</script>
 
     <script type="module">
@@ -162,8 +158,8 @@
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-        const defaultPanoramaFiles = Array.from({ length: 10 }, (_, i) => `bg${i + 1}.jpg`);
-        const defaultModelFiles = [ 'gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb' ];
+        const defaultPanoramaFiles = Array.from({ length: 10 }, (_, i) => ({ name: `bg${i + 1}.jpg`, url: `/jpg/bg${i + 1}.jpg`, thumb: `/jpg/thumbnails/bg${i + 1}.jpg` }));
+        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;
         const loadedModels = new Map();
@@ -196,8 +192,8 @@
             setupUI();
             setupEventListeners();
             
-            await setPanorama({ name: defaultPanoramaFiles[0], url: `/jpg/${defaultPanoramaFiles[0]}` });
-            await loadAndSwitchModel({ name: defaultModelFiles[0], url: `/glb/${defaultModelFiles[0]}` });
+            await setPanorama(defaultPanoramaFiles[0]);
+            await loadAndSwitchModel(defaultModelFiles[0]);
 
             mainLoader.style.opacity = '0';
             setTimeout(() => mainLoader.style.display = 'none', 500);
@@ -205,26 +201,27 @@
             window.addEventListener('resize', onWindowResize);
             animate();
         }
-
-        function setPanorama(panorama) {
-            return new Promise(resolve => {
+        
+        function setPanorama(panoData) {
+            return new Promise((resolve, reject) => {
                 showLoadingOverlay(true);
-                textureLoader.load(panorama.url, texture => {
+                textureLoader.load(panoData.url, texture => {
                     texture.encoding = THREE.sRGBEncoding;
                     texture.mapping = THREE.EquirectangularReflectionMapping;
                     scene.background = texture;
                     scene.environment = texture;
                     
                     document.querySelectorAll('#panorama-gallery .list-item').forEach(c => c.classList.remove('active'));
-                    const activeItem = document.querySelector(`[data-name="${panorama.name}"]`);
+                    const activeItem = document.querySelector(`#panorama-gallery [data-name="${panoData.name}"]`);
                     if(activeItem) activeItem.classList.add('active');
 
                     showLoadingOverlay(false);
                     resolve();
                 }, undefined, (err) => {
                     console.error('Error loading panorama:', err);
-                    alert(`Error: Could not load panorama "${panorama.name}".`);
+                    alert(`Error: Could not load panorama "${panoData.name}".`);
                     showLoadingOverlay(false);
+                    reject(err);
                 });
             });
         }
@@ -237,7 +234,7 @@
         }
 
         function loadAndSwitchModel(modelData) {
-            return new Promise(resolve => {
+            return new Promise((resolve, reject) => {
                 if (loadedModels.has(modelData.name)) {
                     switchActiveModel(modelData.name);
                     resolve();
@@ -266,28 +263,32 @@
                     console.error('Error loading model:', err);
                     alert(`Error: Could not load model "${modelData.name}".`);
                     showLoadingOverlay(false);
+                    reject(err);
                 });
             });
         }
         
         function createModelCard(modelData) {
             const container = document.createElement('div');
-            container.className = 'list-item flex flex-col rounded-lg cursor-pointer overflow-hidden bg-gray-800/50';
+            container.className = 'list-item flex flex-col rounded-lg cursor-pointer overflow-hidden bg-white/5';
             container.dataset.name = modelData.name;
             container.onclick = () => loadAndSwitchModel(modelData);
 
             const thumb = document.createElement('img');
-            thumb.src = modelData.thumbnail || `glb/thumbnails/${modelData.name.replace('.glb', '.png')}`;
+            thumb.src = modelData.thumb;
             thumb.alt = `Thumbnail for ${modelData.name}`;
-            thumb.className = 'w-full h-auto aspect-square object-cover bg-gray-700';
-            thumb.onerror = () => { thumb.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2E1YjRjYyIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMyBsIDE0IDAgYSBUbyAwIDAgMSAyIDIgTCAyMSAxOSBhIDIgMiAwIDAgMSAtMiAyIEwgNSAyMSBhIDIgMiAwIDAgMSAtMiAtMiBMIDMgNSBhIDIgMiAwIDAgMSAyIC0yIFoiPjwvcGF0aD48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ij48L2NpcmNsZT48L3N2Zz4='; };
+            thumb.className = 'w-full h-auto aspect-square object-contain'; // Use object-contain for PNGs
+            thumb.onerror = () => { 
+                thumb.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2E1YjRjYyIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMyBsIDE0IDAgYSBUbyAwIDAgMSAyIDIgTCAyMSAxOSBhIDIgMiAwIDAgMSAtMiAyIEwgNSAyMSBhIDIgMiAwIDAgMSAtMiAtMiBMIDMgNSBhIDIgMiAwIDAgMSAyIC0yIFoiPjwvcGF0aD48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ij48L2NpcmNsZT48L3N2Zz4=';
+                thumb.classList.add('bg-gray-800', 'p-4');
+            };
             
             const nameWrapper = document.createElement('div');
-            nameWrapper.className = 'p-2 w-full';
+            nameWrapper.className = 'p-2 w-full bg-black/20';
             
             const name = document.createElement('span');
             name.textContent = modelData.name.replace(/\.[^/.]+$/, "").replace(/(\d)/, ' $1').toUpperCase();
-            name.className = 'text-white text-sm font-medium text-center block truncate';
+            name.className = 'text-white text-xs font-medium text-center block truncate';
 
             nameWrapper.appendChild(name);
             container.appendChild(thumb);
@@ -297,32 +298,39 @@
         
         function createPanoramaCard(panoData) {
             const container = document.createElement('div');
-            container.className = 'list-item aspect-video rounded-lg overflow-hidden cursor-pointer bg-gray-800/50';
+            container.className = 'list-item aspect-video rounded-lg overflow-hidden cursor-pointer bg-white/5';
             container.dataset.name = panoData.name;
             container.onclick = () => setPanorama(panoData);
             
             const thumb = document.createElement('img');
-            thumb.src = panoData.url;
+            thumb.src = panoData.thumb;
             thumb.className = 'w-full h-full object-cover';
             thumb.alt = `Thumbnail for ${panoData.name}`;
-            thumb.onerror = () => { thumb.classList.add('bg-gray-700'); }
+            thumb.onerror = () => { thumb.classList.add('bg-gray-800'); }
             
             container.appendChild(thumb);
             document.getElementById('panorama-gallery').appendChild(container);
         }
 
         function setupUI() {
-            defaultModelFiles.forEach(name => createModelCard({ name, url: `/glb/${name}` }));
-            defaultPanoramaFiles.forEach(name => createPanoramaCard({ name, url: `/jpg/thumbnails/${name}` }));
+            defaultModelFiles.forEach(createModelCard);
+            defaultPanoramaFiles.forEach(createPanoramaCard);
+        }
+
+        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>`;
+            } else {
+                button.disabled = false;
+                button.innerHTML = 'Load';
+            }
         }
 
         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');
-
-            // Panel Controls
             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(); });
@@ -331,76 +339,75 @@
             document.getElementById('close-panorama-panel').addEventListener('click', closePanoramaPanel);
             document.getElementById('bg-canvas').addEventListener('click', () => { closeModelPanel(); closePanoramaPanel(); });
 
-            // Modal Controls
+            // 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');
-            document.getElementById('cancel-model-upload').addEventListener('click', () => uploadModelModal.style.display = 'none');
-            document.getElementById('cancel-panorama-upload').addEventListener('click', () => uploadPanoramaModal.style.display = 'none');
 
-            // Model Upload
-            document.getElementById('browse-model-btn').addEventListener('click', () => document.getElementById('model-file-input').click());
-            document.getElementById('model-file-input').addEventListener('change', e => handleModelFile(e.target.files[0]));
-            document.getElementById('load-model-url-btn').addEventListener('click', () => {
+            // 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');
+            loadModelUrlBtn.addEventListener('click', () => {
                 const url = document.getElementById('model-url-input').value.trim();
-                if(url) handleModelFile(url);
+                if(url) {
+                    toggleButtonLoading(loadModelUrlBtn, true);
+                    handleModelFile(url).finally(() => toggleButtonLoading(loadModelUrlBtn, false));
+                }
             });
-            setupDragDrop('model-drop-zone', handleModelFile);
-            
-            // Panorama Upload
-            document.getElementById('browse-panorama-btn').addEventListener('click', () => document.getElementById('panorama-file-input').click());
-            document.getElementById('panorama-file-input').addEventListener('change', e => handlePanoramaFile(e.target.files[0]));
-            document.getElementById('load-panorama-url-btn').addEventListener('click', () => {
+            const loadPanoramaUrlBtn = document.getElementById('load-panorama-url-btn');
+            loadPanoramaUrlBtn.addEventListener('click', () => {
                 const url = document.getElementById('panorama-url-input').value.trim();
-                if(url) handlePanoramaFile(url);
+                if(url) {
+                    toggleButtonLoading(loadPanoramaUrlBtn, true);
+                    handlePanoramaFile(url).finally(() => toggleButtonLoading(loadPanoramaUrlBtn, false));
+                }
             });
-            setupDragDrop('panorama-drop-zone', handlePanoramaFile);
+
+            // Drag and Drop
+            setupDragDrop('model-drop-zone', handleModelFile, modelFileInput);
+            setupDragDrop('panorama-drop-zone', handlePanoramaFile, panoramaFileInput);
         }
 
-        function handleModelFile(file) {
-            if(!file) return;
-            const url = (typeof file === 'string') ? file : URL.createObjectURL(file);
-            const name = (typeof file === 'string') ? file.split('/').pop() : file.name;
-            const thumbnail = (typeof file === 'string') ? null : URL.createObjectURL(file);
-            const modelData = { name, url, thumbnail };
+        async function handleModelFile(fileOrUrl) {
+            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
             
             createModelCard(modelData);
-            loadAndSwitchModel(modelData);
             document.getElementById('upload-model-modal').style.display = 'none';
+            await loadAndSwitchModel(modelData);
         }
 
-        function handlePanoramaFile(file) {
-            if(!file) return;
-            const url = (typeof file === 'string') ? file : URL.createObjectURL(file);
-            const name = (typeof file === 'string') ? file.split('/').pop() : file.name;
-            const panoData = { name, url };
+        async function handlePanoramaFile(fileOrUrl) {
+            if(!fileOrUrl) return;
+            const isUrl = typeof fileOrUrl === 'string';
+            const url = isUrl ? fileOrUrl : URL.createObjectURL(fileOrUrl);
+            const name = isUrl ? fileOrUrl.split('/').pop() : fileOrUrl.name;
+            const panoData = { name, url, thumb: url };
 
             createPanoramaCard(panoData);
-            setPanorama(panoData);
             document.getElementById('upload-panorama-modal').style.display = 'none';
+            await setPanorama(panoData);
         }
 
-        function setupDragDrop(zoneId, callback) {
+        function setupDragDrop(zoneId, fileHandler, fileInput) {
             const dropZone = document.getElementById(zoneId);
-            dropZone.addEventListener('dragover', e => {
-                e.preventDefault();
-                dropZone.classList.add('drag-over');
-            });
-            dropZone.addEventListener('dragleave', e => {
-                e.preventDefault();
-                dropZone.classList.remove('drag-over');
-            });
+            dropZone.addEventListener('click', () => fileInput.click());
+            dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+            dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); });
             dropZone.addEventListener('drop', e => {
                 e.preventDefault();
                 dropZone.classList.remove('drag-over');
                 if(e.dataTransfer.files.length) {
-                    callback(e.dataTransfer.files[0]);
-                }
-            });
-            dropZone.addEventListener('click', () => {
-                if (zoneId.includes('model')) {
-                     document.getElementById('model-file-input').click();
-                } else {
-                     document.getElementById('panorama-file-input').click();
+                    fileHandler(e.dataTransfer.files[0]);
                 }
             });
         }