bugfix

index.html

@@ -41,30 +41,53 @@
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         .metadata-item {
-            margin-bottom: 10px;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        .metadata-item:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
         }
         .metadata-key {
             font-weight: bold;
             margin-right: 8px;
+            color: #2196F3;
+            display: block;
+            margin-bottom: 5px;
+            font-size: 14px;
+            text-transform: uppercase;
         }
         .metadata-value {
             word-break: break-word;
+            display: block;
+            padding: 5px;
+            background: #f9f9f9;
+            border-radius: 4px;
         }
         .metadata-list {
-            margin: 5px 0 0 20px;
+            margin: 5px 0 0 0;
             padding-left: 0;
+            list-style-type: none;
+        }
+        .metadata-list li {
+            margin-bottom: 6px;
+            padding: 5px 10px;
+            background: #f5f5f5;
+            border-radius: 4px;
+            border-left: 3px solid #2196F3;
         }
         .metadata-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
             border-bottom: 1px solid #e0e0e0;
-            padding-bottom: 8px;
+            padding-bottom: 10px;
         }
-        #contentWrapper {
-            position: relative;
-            margin-top: 20px;
+        .metadata-content {
+            padding: 5px;
         }
         #contentContainer {
             padding-top: 10px;
@@ -333,8 +356,17 @@
             activeTab = '';
             originalFileName = '';
             document.getElementById('fileInput').value = '';
-            document.getElementById('metadataContainer').innerHTML = '';
-            renderInterface();
+            
+            // Clear UI elements properly
+            const metadataContainer = document.getElementById('metadataContainer');
+            const metadataContent = document.getElementById('metadataContent');
+            const tabContainer = document.getElementById('tabContainer');
+            const contentContainer = document.getElementById('contentContainer');
+            
+            if (metadataContainer) metadataContainer.style.display = 'none';
+            if (metadataContent) metadataContent.innerHTML = '';
+            if (tabContainer) tabContainer.innerHTML = '';
+            if (contentContainer) contentContainer.innerHTML = '';
         }
 
         function getVariantIds() {
@@ -410,15 +442,20 @@
             
             // Initialize toggle functionality
             const toggleBtn = document.getElementById('toggleMetadata');
+            toggleBtn.textContent = 'Hide';
             toggleBtn.onclick = toggleMetadataVisibility;
         }
         
         function toggleMetadataVisibility() {
             const content = document.getElementById('metadataContent');
+            const toggleBtn = document.getElementById('toggleMetadata');
+            
             if (content.style.display === 'none') {
                 content.style.display = 'block';
+                toggleBtn.textContent = 'Hide';
             } else {
                 content.style.display = 'none';
+                toggleBtn.textContent = 'Show';
             }
         }