Submit button disabled without video, bigger middle part and dropzone, button in dropzone

electron/main/index.html

@@ -21,10 +21,9 @@
   <div class="upload-container" id="uploadContainer">
     <p id="p1">Drag and drop video file</p>
     <div class="file-name" id="fileName">No video chosen</div>
-  </div>
-
-  <button class="custom-btn" id="manualUploadBtn">Search video</button>
+      <button class="custom-btn" id="manualUploadBtn">Search video</button>
   <input type="file" id="videoUpload" accept="video/*">
+  </div>
 
 <div class="checkbox-group">
   <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
@@ -39,7 +38,7 @@
   </div>
 </div>
 
-<button class="submit-btn" id="submitButton" onclick="checkBoxes()">Submit</button>
+<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
 
 <div class="progressbar">
   <div class="progress_fill"></div>

electron/main/script.js

@@ -129,4 +129,21 @@ function loadLanguageOptions(){
     console.log("Error in script.js loadLanguageOptions function");
     console.log(error);
   }
-}
+}
+
+function activateSubmitBtn(hasFile){
+  submitButton.disabled = !hasFile;
+}
+
+videoUpload.addEventListener("change", () => {
+  activateSubmitBtn(videoUpload.files.length > 0);
+});
+
+uploadContainer.addEventListener("drop", (e) => {
+  e.preventDefault();
+  const file = e.dataTransfer.files[0];
+
+  if(file){
+    activateSubmitBtn(true);
+  }
+});

electron/main/style.css

@@ -5,7 +5,7 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #555;
+  background-color: #666;
   gap: 15px;
   margin: 0;
 }
@@ -17,7 +17,8 @@ body {
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   text-align: center;
-  width: 400px;
+  width: 350px;
+  height: 100px;
   transition: border 0.3s, background-color 0.3s;
   border: 2px dashed #ccc;
 }
@@ -40,11 +41,15 @@ body {
   margin-top: 10px;
   font-size: 14px;
   color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 
 .custom-btn {
   padding: 10px 20px;
+  margin-top: 40px;
   background-color: #007BFF;
   color: white;
   border: none;
@@ -84,6 +89,8 @@ gap: 5px;
 
 .submit-btn {
   padding: 10px 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   background-color: #007BFF;
   color: white;
   border: none;
@@ -92,9 +99,16 @@ gap: 5px;
   font-size: 14px;
 }
 
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .mitte {
   background-color: #f2f3f4;
   display: flex;
+  width: 500px;
   flex-direction: column;
   align-items: center;
   padding: 5% 50px;
@@ -103,6 +117,7 @@ gap: 5px;
   border: 1px;
   border-color: black;
   border-style: solid;
+  border-radius: 6px;
 }
 
 h1 {