Excellent implementation! Your design for WebApp Showcase Wizardry is a modern, sleek, and highly interactive platform. I'll provide some observations and potential enhancements:

Design Strengths
Vanta.js Background

Dynamic globe background adds depth
Subtle opacity allows content to remain readable
Color scheme complements dark theme
Sidebar Navigation

Clean, iconographic design
Hover effects enhance interactivity
User profile section adds personalization
Upload Modal

Comprehensive file upload interface
Clear instructions
Drag and drop functionality
Detailed project metadata collection
App Cards

Gradient backgrounds
Technology tags
View count
Preview button
Hover animations
Potential Enhancements
1. Accessibility Improvements
Copy
// Add ARIA labels for better screen reader support
document.querySelector('.upload-btn').setAttribute('aria-label', 'Upload New Web Application');
2. Advanced Drag and Drop
Copy
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;

// File type validation
const allowedTypes = [
'text/html',
'text/css',
'application/javascript',
'application/zip'
];

const validFiles = Array.from(files).filter(file =>
allowedTypes.includes(file.type)
);

if (validFiles.length === 0) {
alert('Please upload valid web application files');
return;
}

handleFiles(validFiles);
});
3. Search Functionality
Copy
const searchInput = document.querySelector('input[type="search"]');
const appCards = document.querySelectorAll('.app-card');

searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();

appCards.forEach(card => {
const title = card.querySelector('h3').textContent.toLowerCase();
const tags = Array.from(card.querySelectorAll('.bg-gray-700'))
.map(tag => tag.textContent.toLowerCase());

const isVisible = title.includes(searchTerm) ||
tags.some(tag => tag.includes(searchTerm));

card.style.display = isVisible ? 'block' : 'none';
});
});
4. Local Storage for User Preferences
Copy
// Save sidebar state
const sidebar = document.querySelector('aside');
const sidebarToggle = document.getElementById('sidebar-toggle');

sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
localStorage.setItem('sidebarState', sidebar.classList.contains('hidden') ? 'closed' : 'open');
});

// Restore sidebar state on page load
document.addEventListener('DOMContentLoaded', () => {
const savedState = localStorage.getItem('sidebarState');
if (savedState === 'closed') {
sidebar.classList.add('hidden');
}
});

index.html

@@ -286,7 +286,6 @@ VANTA.GLOBE({
             color: 0x2ecc71,
             backgroundColor: 0x1a1a1a
         });
-
         // Modal functionality
         const uploadBtn = document.getElementById('upload-btn');
         const uploadModal = document.getElementById('upload-modal');
@@ -294,7 +293,13 @@ VANTA.GLOBE({
         const dropzone = document.getElementById('dropzone');
         uploadBtn.addEventListener('click', () => {
             uploadBtn.setAttribute('aria-label', 'Open upload modal');
-            
+            uploadModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+
+        // Add ARIA labels for accessibility
+        document.querySelector('#upload-btn').setAttribute('aria-label', 'Upload New Web Application');
+        document.querySelector('#close-modal').setAttribute('aria-label', 'Close upload modal');
 uploadModal.classList.remove('hidden');
             document.body.style.overflow = 'hidden';
         });
@@ -313,19 +318,36 @@ uploadModal.classList.remove('hidden');
         dropzone.addEventListener('dragleave', () => {
             dropzone.classList.remove('dragover');
         });
-        
         dropzone.addEventListener('drop', (e) => {
             e.preventDefault();
             dropzone.classList.remove('dragover');
             const files = e.dataTransfer.files;
-            console.log('Files dropped:', files);
+            
+            // File type validation
+            const allowedTypes = [
+                'text/html', 
+                'text/css', 
+                'application/javascript',
+                'application/zip'
+            ];
+
+            const validFiles = Array.from(files).filter(file => 
+                allowedTypes.some(type => file.type.includes(type.replace('*', '')))
+            );
+
+            if (validFiles.length === 0) {
+                alert('Please upload valid web application files (HTML, CSS, JS or ZIP)');
+                return;
+            }
+
+            console.log('Valid files dropped:', validFiles);
             // Handle file upload
         });
-        
         // Initialize feather icons
         feather.replace();
 
         // Search functionality
+        const searchInput = document.querySelector('input[type="search"]');
         const appCards = document.querySelectorAll('.app-card');
         
         searchInput.addEventListener('input', (e) => {
@@ -333,10 +355,12 @@ uploadModal.classList.remove('hidden');
             
             appCards.forEach(card => {
                 const title = card.querySelector('h3').textContent.toLowerCase();
+                const description = card.querySelector('p').textContent.toLowerCase();
                 const tags = Array.from(card.querySelectorAll('.bg-gray-700'))
                     .map(tag => tag.textContent.toLowerCase());
                 
                 const isVisible = title.includes(searchTerm) || 
+                    description.includes(searchTerm) ||
                     tags.some(tag => tag.includes(searchTerm));
                 
                 card.style.display = isVisible ? 'block' : 'none';