add action to upload options - Follow Up Deployment

index.html

@@ -13,10 +13,21 @@
         .upload-area {
             border: 2px dashed #a777e3;
             transition: all 0.3s ease;
+            cursor: pointer;
         }
         .upload-area:hover {
             border-color: #6e8efb;
-            background-color: rgba(110, 142, 251, 0.05);
+            background-color: rgba(110, 142, 251, 0.1);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .upload-area:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .upload-area.active {
+            border-color: #6e8efb;
+            background-color: rgba(110, 142, 251, 0.15);
         }
         .progress-bar {
             height: 8px;
@@ -440,11 +451,21 @@
             document.getElementById('images-upload-btn').addEventListener('click', () => {
                 document.getElementById('image-upload').click();
             });
+            
+            // Click on images upload area
+            document.getElementById('images-upload').addEventListener('click', () => {
+                document.getElementById('image-upload').click();
+            });
 
             // ZIP Upload
             document.getElementById('zip-upload-btn').addEventListener('click', () => {
                 document.getElementById('zip-upload-input').click();
             });
+            
+            // Click on zip upload area
+            document.getElementById('zip-upload').addEventListener('click', () => {
+                document.getElementById('zip-upload-input').click();
+            });
 
             // Handle image upload
             document.getElementById('image-upload').addEventListener('change', (e) => {
@@ -457,6 +478,10 @@
                 document.getElementById('images-preview').classList.remove('hidden');
                 document.getElementById('zip-preview').classList.add('hidden');
                 
+                // Add active state to images upload option
+                document.getElementById('images-upload').classList.add('active');
+                document.getElementById('zip-upload').classList.remove('active');
+                
                 const previewContainer = document.querySelector('#images-preview div');
                 previewContainer.innerHTML = '';
                 
@@ -483,6 +508,10 @@
                     document.getElementById('images-preview').classList.add('hidden');
                     document.getElementById('zip-preview').classList.remove('hidden');
                     document.getElementById('zip-filename').textContent = e.target.files[0].name;
+                    
+                    // Add active state to zip upload option
+                    document.getElementById('zip-upload').classList.add('active');
+                    document.getElementById('images-upload').classList.remove('active');
                 }
             });