Update index.html

index.html

@@ -38,14 +38,15 @@
 
         .list-item {
              transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+             border: 2px solid transparent;
         }
         .list-item:hover {
             background-color: rgba(59, 130, 246, 0.1);
-            transform: translateX(4px);
+            transform: scale(1.03);
         }
         .list-item.active {
             background-color: rgba(59, 130, 246, 0.25);
-            box-shadow: inset 4px 0 0 0 #3b82f6;
+            border-color: #3b82f6;
         }
         
         .panel-content::-webkit-scrollbar { width: 6px; }
@@ -73,27 +74,27 @@
         <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-72 max-w-[80vw] z-30">
+    <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-5">
+            <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 px-2 space-y-2 pb-5"></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-5">
+            <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 px-4 grid grid-cols-2 gap-3 pb-5"></div>
+            <div id="panorama-gallery" class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-2 gap-4"></div>
         </div>
     </aside>
 
@@ -211,31 +212,33 @@
             const modelSelector = document.getElementById('model-selector');
             modelFiles.forEach(fileName => {
                 const container = document.createElement('div');
-                container.className = 'list-item w-full flex items-center p-2 rounded-lg cursor-pointer';
+                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');
-                // Assumes a .png thumbnail exists for each .glb model in '/glb/thumbnails/'
                 thumb.src = `/glb/thumbnails/${fileName.replace('.glb', '.png')}`;
                 thumb.alt = `Thumbnail for ${fileName}`;
-                thumb.className = 'w-20 h-16 object-cover rounded-md mr-3 bg-gray-800';
-                // Basic error handling for thumbnails
-                thumb.onerror = () => { thumb.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; };
+                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 font-medium';
+                name.className = 'text-white text-sm font-medium text-center block';
 
+                nameWrapper.appendChild(name);
                 container.appendChild(thumb);
-                container.appendChild(name);
+                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 ring-2 ring-transparent';
+                container.className = 'list-item aspect-video rounded-lg overflow-hidden cursor-pointer bg-gray-800/50';
                 container.dataset.image = fileName;
                 container.onclick = () => setPanorama(fileName);
                 
@@ -243,6 +246,7 @@
                 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);