Spaces:

aaurelions
/

drones

Running

App Files Files Community

aaurelions commited on Jul 24, 2025

Commit

026a19d

verified ·

1 Parent(s): 32b887e

Update index.html

Browse files

Files changed (1) hide show

index.html +217 -81

index.html CHANGED Viewed

@@ -12,11 +12,16 @@
         body { background-color: #111827; }
         .glass-ui {
-            background-color: rgba(17, 24, 39, 0.75);
             backdrop-filter: blur(16px);
             border-color: rgba(255, 255, 255, 0.1);
         }
         #loading-overlay {
             transition: opacity 0.3s ease-in-out;
         }
@@ -37,7 +42,7 @@
         .panel-trigger:hover { background-color: rgba(59, 130, 246, 0.5); }
         .list-item {
-             transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
              border: 2px solid transparent;
         }
         .list-item:hover {
@@ -52,13 +57,22 @@
         .panel-content::-webkit-scrollbar { width: 6px; }
         .panel-content::-webkit-scrollbar-track { background: transparent; }
         .panel-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
     </style>
 </head>
 <body class="text-gray-100 select-none overflow-hidden">
     <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-40 flex items-center justify-center opacity-0 pointer-events-none">
         <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">
@@ -74,30 +88,73 @@
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
     </button>
-    <aside id="model-panel" class="side-panel left glass-ui fixed top-0 left-0 h-full w-80 max-w-[80vw] z-30">
-        <div class="h-full flex flex-col">
-            <div class="flex-shrink-0 flex justify-between items-center p-4 border-b border-gray-700">
-                <h2 class="text-xl font-bold text-white">Models</h2>
                 <button id="close-model-panel" class="p-2 rounded-full hover:bg-gray-700">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                 </button>
             </div>
-            <div id="model-selector" class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-2 gap-4"></div>
         </div>
     </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">
-        <div class="h-full flex flex-col">
-            <div class="flex-shrink-0 flex justify-between items-center p-4 border-b border-gray-700">
-                <h2 class="text-xl font-bold text-white">Panoramas</h2>
-                 <button id="close-panorama-panel" class="p-2 rounded-full hover:bg-gray-700">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                 </button>
             </div>
-            <div id="panorama-gallery" class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-2 gap-4"></div>
         </div>
     </aside>
     <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">
@@ -105,8 +162,8 @@
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-        const panoramaFiles = Array.from({ length: 10 }, (_, i) => `bg${i + 1}.jpg`);
-        const modelFiles = [ 'gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb' ];
         let scene, camera, renderer, controls;
         const loadedModels = new Map();
@@ -139,8 +196,8 @@
             setupUI();
             setupEventListeners();
-            await setPanorama(panoramaFiles[0]);
-            await loadAndSwitchModel(modelFiles[0]);
             mainLoader.style.opacity = '0';
             setTimeout(() => mainLoader.style.display = 'none', 500);
@@ -149,22 +206,24 @@
             animate();
         }
-        function setPanorama(imageName) {
             return new Promise(resolve => {
                 showLoadingOverlay(true);
-                textureLoader.load(`/jpg/${imageName}`, 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'));
-                    document.querySelector(`[data-image="${imageName}"]`).classList.add('active');
                     showLoadingOverlay(false);
                     resolve();
-                }, undefined, () => {
-                    alert(`Error: Could not load panorama "${imageName}".`);
                     showLoadingOverlay(false);
                 });
             });
@@ -174,99 +233,176 @@
             scene.children.forEach(child => {
                 if (child.isGroup) child.visible = (child.name === modelName);
             });
-            document.querySelectorAll('#model-selector .list-item').forEach(b => b.classList.toggle('active', b.dataset.model === modelName));
         }
-        function loadAndSwitchModel(modelName) {
             return new Promise(resolve => {
-                if (loadedModels.has(modelName)) {
-                    switchActiveModel(modelName);
                     resolve();
                     return;
                 }
                 showLoadingOverlay(true);
-                gltfLoader.load(`/glb/${modelName}`, gltf => {
                     const model = gltf.scene;
-                    model.name = modelName;
                     const box = new THREE.Box3().setFromObject(model);
                     const center = box.getCenter(new THREE.Vector3());
-                    model.position.sub(center);
                     const size = box.getSize(new THREE.Vector3());
                     const maxDim = Math.max(size.x, size.y, size.z);
                     const scale = 3.0 / maxDim;
                     model.scale.set(scale, scale, scale);
                     model.position.y += size.y * scale / 2;
                     scene.add(model);
-                    loadedModels.set(modelName, model);
-                    switchActiveModel(modelName);
                     showLoadingOverlay(false);
                     resolve();
-                }, undefined, () => {
-                    alert(`Error: Could not load model "${modelName}".`);
                     showLoadingOverlay(false);
                 });
             });
         }
-        function setupUI() {
-            const modelSelector = document.getElementById('model-selector');
-            modelFiles.forEach(fileName => {
-                const container = document.createElement('div');
-                container.className = 'list-item flex flex-col rounded-lg cursor-pointer overflow-hidden bg-gray-800/50';
-                container.dataset.model = fileName;
-                container.onclick = () => loadAndSwitchModel(fileName);
-                const thumb = document.createElement('img');
-                thumb.src = `/glb/thumbnails/${fileName.replace('.glb', '.png')}`;
-                thumb.alt = `Thumbnail for ${fileName}`;
-                thumb.className = 'w-full h-auto aspect-square object-cover';
-                thumb.onerror = () => { thumb.classList.add('bg-gray-700'); } // Add bg on error
-                const nameWrapper = document.createElement('div');
-                nameWrapper.className = 'p-2 w-full';
-                const name = document.createElement('span');
-                name.textContent = fileName.replace('.glb', '').replace(/(\d)/, ' $1').toUpperCase();
-                name.className = 'text-white text-sm font-medium text-center block';
-                nameWrapper.appendChild(name);
-                container.appendChild(thumb);
-                container.appendChild(nameWrapper);
-                modelSelector.appendChild(container);
-            });
-            const panoramaGallery = document.getElementById('panorama-gallery');
-            panoramaFiles.forEach(fileName => {
-                const container = document.createElement('div');
-                container.className = 'list-item aspect-video rounded-lg overflow-hidden cursor-pointer bg-gray-800/50';
-                container.dataset.image = fileName;
-                container.onclick = () => setPanorama(fileName);
-                const thumb = document.createElement('img');
-                thumb.src = `/jpg/thumbnails/${fileName}`;
-                thumb.className = 'w-full h-full object-cover';
-                thumb.alt = `Thumbnail for ${fileName}`;
-                thumb.onerror = () => { thumb.classList.add('bg-gray-700'); } // Add bg on error
-                container.appendChild(thumb);
-                panoramaGallery.appendChild(container);
-            });
         }
         function setupEventListeners() {
             const modelPanel = document.getElementById('model-panel');
             const panoramaPanel = document.getElementById('panorama-panel');
             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(); });
             document.getElementById('panorama-panel-trigger').addEventListener('click', e => { e.stopPropagation(); panoramaPanel.classList.toggle('is-open'); closeModelPanel(); });
             document.getElementById('close-model-panel').addEventListener('click', closeModelPanel);
             document.getElementById('close-panorama-panel').addEventListener('click', closePanoramaPanel);
             document.getElementById('bg-canvas').addEventListener('click', () => { closeModelPanel(); closePanoramaPanel(); });
         }
         function showLoadingOverlay(show) {

         body { background-color: #111827; }
         .glass-ui {
+            background-color: rgba(17, 24, 39, 0.85);
             backdrop-filter: blur(16px);
             border-color: rgba(255, 255, 255, 0.1);
         }
+        .modal-overlay {
+            background-color: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(8px);
+        }
         #loading-overlay {
             transition: opacity 0.3s ease-in-out;
         }
         .panel-trigger:hover { background-color: rgba(59, 130, 246, 0.5); }
         .list-item {
+             transition: all 0.2s ease;
              border: 2px solid transparent;
         }
         .list-item:hover {
         .panel-content::-webkit-scrollbar { width: 6px; }
         .panel-content::-webkit-scrollbar-track { background: transparent; }
         .panel-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
+        .drop-zone {
+            border: 2px dashed #4b5563;
+            transition: background-color 0.2s, border-color 0.2s;
+        }
+        .drop-zone.drag-over {
+            background-color: rgba(59, 130, 246, 0.2);
+            border-color: #3b82f6;
+        }
     </style>
 </head>
 <body class="text-gray-100 select-none overflow-hidden">
     <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 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">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
     </button>
+    <!-- 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">
+            <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">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
+                </button>
                 <button id="close-model-panel" class="p-2 rounded-full hover:bg-gray-700">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                 </button>
             </div>
         </div>
+        <div id="model-selector" class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-2 gap-4"></div>
     </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">
+            <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">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
+                </button>
+                <button id="close-panorama-panel" class="p-2 rounded-full hover:bg-gray-700">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                 </button>
             </div>
         </div>
+        <div id="panorama-gallery" class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-2 gap-4"></div>
     </aside>
+    <!-- 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>
+                 <input type="file" id="model-file-input" class="hidden" accept=".glb,.gltf">
+             </div>
+             <p class="text-center text-gray-400 my-2">OR</p>
+             <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>
+        </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>
+                 <input type="file" id="panorama-file-input" class="hidden" accept="image/*">
+             </div>
+             <p class="text-center text-gray-400 my-2">OR</p>
+             <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>
+        </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">
         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' ];
         let scene, camera, renderer, controls;
         const loadedModels = new Map();
             setupUI();
             setupEventListeners();
+            await setPanorama({ name: defaultPanoramaFiles[0], url: `/jpg/${defaultPanoramaFiles[0]}` });
+            await loadAndSwitchModel({ name: defaultModelFiles[0], url: `/glb/${defaultModelFiles[0]}` });
             mainLoader.style.opacity = '0';
             setTimeout(() => mainLoader.style.display = 'none', 500);
             animate();
         }
+        function setPanorama(panorama) {
             return new Promise(resolve => {
                 showLoadingOverlay(true);
+                textureLoader.load(panorama.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}"]`);
+                    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}".`);
                     showLoadingOverlay(false);
                 });
             });
             scene.children.forEach(child => {
                 if (child.isGroup) child.visible = (child.name === modelName);
             });
+            document.querySelectorAll('#model-selector .list-item').forEach(b => b.classList.toggle('active', b.dataset.name === modelName));
         }
+        function loadAndSwitchModel(modelData) {
             return new Promise(resolve => {
+                if (loadedModels.has(modelData.name)) {
+                    switchActiveModel(modelData.name);
                     resolve();
                     return;
                 }
                 showLoadingOverlay(true);
+                gltfLoader.load(modelData.url, gltf => {
                     const model = gltf.scene;
+                    model.name = modelData.name;
                     const box = new THREE.Box3().setFromObject(model);
                     const center = box.getCenter(new THREE.Vector3());
+                    model.position.sub(center);
                     const size = box.getSize(new THREE.Vector3());
                     const maxDim = Math.max(size.x, size.y, size.z);
                     const scale = 3.0 / maxDim;
                     model.scale.set(scale, scale, scale);
                     model.position.y += size.y * scale / 2;
                     scene.add(model);
+                    loadedModels.set(modelData.name, model);
+                    switchActiveModel(modelData.name);
                     showLoadingOverlay(false);
                     resolve();
+                }, undefined, (err) => {
+                    console.error('Error loading model:', err);
+                    alert(`Error: Could not load model "${modelData.name}".`);
                     showLoadingOverlay(false);
                 });
             });
         }
+        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.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.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='; };
+            const nameWrapper = document.createElement('div');
+            nameWrapper.className = 'p-2 w-full';
+            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';
+            nameWrapper.appendChild(name);
+            container.appendChild(thumb);
+            container.appendChild(nameWrapper);
+            document.getElementById('model-selector').appendChild(container);
+        }
+        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.dataset.name = panoData.name;
+            container.onclick = () => setPanorama(panoData);
+            const thumb = document.createElement('img');
+            thumb.src = panoData.url;
+            thumb.className = 'w-full h-full object-cover';
+            thumb.alt = `Thumbnail for ${panoData.name}`;
+            thumb.onerror = () => { thumb.classList.add('bg-gray-700'); }
+            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}` }));
         }
         function setupEventListeners() {
             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(); });
             document.getElementById('panorama-panel-trigger').addEventListener('click', e => { e.stopPropagation(); panoramaPanel.classList.toggle('is-open'); closeModelPanel(); });
             document.getElementById('close-model-panel').addEventListener('click', closeModelPanel);
             document.getElementById('close-panorama-panel').addEventListener('click', closePanoramaPanel);
             document.getElementById('bg-canvas').addEventListener('click', () => { closeModelPanel(); closePanoramaPanel(); });
+            // Modal Controls
+            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', () => {
+                const url = document.getElementById('model-url-input').value.trim();
+                if(url) handleModelFile(url);
+            });
+            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 url = document.getElementById('panorama-url-input').value.trim();
+                if(url) handlePanoramaFile(url);
+            });
+            setupDragDrop('panorama-drop-zone', handlePanoramaFile);
+        }
+        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 };
+            createModelCard(modelData);
+            loadAndSwitchModel(modelData);
+            document.getElementById('upload-model-modal').style.display = 'none';
+        }
+        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 };
+            createPanoramaCard(panoData);
+            setPanorama(panoData);
+            document.getElementById('upload-panorama-modal').style.display = 'none';
+        }
+        function setupDragDrop(zoneId, callback) {
+            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('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();
+                }
+            });
         }
         function showLoadingOverlay(show) {