diff --git a/electron/main/index.html b/electron/main/index.html index a8430af..acb2de5 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -21,10 +21,9 @@

Drag and drop video file

No video chosen
-
- - + +
@@ -39,7 +38,7 @@
- +
diff --git a/electron/main/script.js b/electron/main/script.js index c66c976..68c0bc8 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -129,4 +129,21 @@ function loadLanguageOptions(){ console.log("Error in script.js loadLanguageOptions function"); console.log(error); } -} \ No newline at end of file +} + +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); + } +}); \ No newline at end of file diff --git a/electron/main/style.css b/electron/main/style.css index e9abb50..35f8488 100644 --- a/electron/main/style.css +++ b/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 {