This isnt working, the drag and drop video here function doesnt work, please rectify this - Follow Up Deployment

index.html

@@ -24,10 +24,15 @@
         .dropzone {
             border: 2px dashed #ccc;
             transition: all 0.3s ease;
+            min-height: 200px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         .dropzone.active {
             border-color: #4f46e5;
             background-color: #eef2ff;
+            transform: scale(0.98);
         }
         .story-card {
             background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
@@ -226,7 +231,8 @@
                 dropzone.addEventListener(eventName, unhighlight, false);
             });
 
-            function highlight() {
+            function highlight(e) {
+                e.preventDefault();
                 dropzone.classList.add('active');
             }
 
@@ -240,7 +246,12 @@
             function handleDrop(e) {
                 const dt = e.dataTransfer;
                 const files = dt.files;
-                if (files.length) {
+                
+                // Reset dropzone appearance
+                dropzone.classList.remove('active');
+                
+                // Process files if any
+                if (files.length > 0) {
                     handleFiles(files);
                 }
             }
@@ -253,13 +264,17 @@
 
             function handleFiles(files) {
                 const file = files[0];
-                if (!file.type.match('video.*')) {
+                if (!file) return;
+                
+                // Check if file is a video
+                const validTypes = ['video/mp4', 'video/quicktime', 'video/x-msvideo'];
+                if (!validTypes.includes(file.type)) {
                     alert('Please upload a video file (MP4, MOV, AVI)');
                     return;
                 }
 
-                // Check file size (simulated)
-                if (file.size > 100 * 1024 * 1024) { // 100MB
+                // Check file size (100MB max)
+                if (file.size > 100 * 1024 * 1024) {
                     alert('File is too large. Maximum size is 100MB.');
                     return;
                 }
@@ -267,25 +282,24 @@
                 // Display video preview
                 const videoURL = URL.createObjectURL(file);
                 videoPreview.src = videoURL;
+                videoPreview.load();
                 videoName.textContent = file.name;
                 videoPreviewContainer.classList.remove('hidden');
                 uploadContent.classList.add('hidden');
                 generateBtn.disabled = false;
 
-                // Load metadata to get duration
+                // Load metadata
                 videoPreview.onloadedmetadata = function() {
-                    console.log(`Video duration: ${videoPreview.duration} seconds`);
+                    console.log(`Video loaded: ${file.name} (${Math.round(file.size/(1024*1024))}MB)`);
+                };
+                
+                videoPreview.onerror = function() {
+                    alert('Error loading video file');
+                    resetVideoUpload();
                 };
             }
 
-            removeVideoBtn.addEventListener('click', function() {
-                videoPreview.src = '';
-                videoPreviewContainer.classList.add('hidden');
-                uploadContent.classList.remove('hidden');
-                generateBtn.disabled = true;
-                videoUpload.value = '';
-                resetStoryOutput();
-            });
+            removeVideoBtn.addEventListener('click', resetVideoUpload);
 
             generateBtn.addEventListener('click', function() {
                 if (!videoPreview.src) return;
@@ -428,6 +442,18 @@
                 return names[Math.floor(Math.random() * names.length)];
             }
 
+            function resetVideoUpload() {
+                if (videoPreview.src) {
+                    URL.revokeObjectURL(videoPreview.src);
+                }
+                videoPreview.src = '';
+                videoPreviewContainer.classList.add('hidden');
+                uploadContent.classList.remove('hidden');
+                generateBtn.disabled = true;
+                videoUpload.value = '';
+                resetStoryOutput();
+            }
+
             function resetStoryOutput() {
                 storyPlaceholder.classList.remove('hidden');
                 loadingIndicator.classList.add('hidden');
@@ -435,6 +461,8 @@
                 storyActions.classList.add('hidden');
                 storyTitle.textContent = '';
                 storyContent.textContent = '';
+                generateBtn.disabled = !videoPreview.src;
+                generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Story';
             }
 
             // Copy story to clipboard