Added Verenas function to have a preview image of the selected video file

electron/main/style.css

@@ -5,12 +5,12 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #666;
+  background-color: #999;
   gap: 15px;
   margin: 0;
 }
-
-
+ 
+ 
 .upload-container {
   background: white;
   padding: 40px;
@@ -18,25 +18,25 @@ body {
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   text-align: center;
   width: 350px;
-  height: 100px;
+  height: 120px;
   transition: border 0.3s, background-color 0.3s;
-  border: 2px dashed #ccc;
+  border: 2px dashed #7378c9;
 }
-
-
+ 
+ 
 .upload-container.dragover {
   border-color: #007BFF;
   background-color: #eaf0ff;
 }
-
-
+ 
+ 
 .upload-container p {
   margin: 0 0 15px 0;
   font-size: 16px;
   color: #555;
 }
-
-
+ 
+ 
 .file-name {
   margin-top: 10px;
   font-size: 14px;
@@ -45,8 +45,22 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-
+ 
+#thumbnailContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+ 
+#thumbnailImage {
+  width: 200px;
+  height: auto;
+  border-radius: 10px;
+  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+  object-fit: cover;
+}
+ 
 .custom-btn {
   padding: 10px 20px;
   margin-top: 40px;
@@ -57,27 +71,27 @@ body {
   cursor: pointer;
   font-size: 14px;
 }
-
-
+ 
+ 
 .custom-btn:hover {
   background-color: #0056b3;
 }
-
+ 
 .submit-btn:hover {
   background-color: #0056b3;
 }
-
+ 
 input[type="file"] {
   display: none;
 }
-
+ 
 .checkbox-container{
 margin-top: 8px;
 display: flex;
 align-items: center;
 gap: 5px;
 }
-
+ 
 .checkbox-group {
   margin-top: 15px;
   margin-bottom: 15px;
@@ -86,7 +100,7 @@ gap: 5px;
   gap: 10px;
   align-items: flex-start;
 }
-
+ 
 .submit-btn {
   padding: 10px 20px;
   margin-top: 10px;
@@ -98,13 +112,13 @@ gap: 5px;
   cursor: pointer;
   font-size: 14px;
 }
-
+ 
 .submit-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
-
+ 
 .mitte {
   background-color: #f2f3f4;
   display: flex;
@@ -119,11 +133,11 @@ gap: 5px;
   border-style: solid;
   border-radius: 6px;
 }
-
+ 
 h1 {
   align-content: center;
 }
-
+ 
 .progressbar{
   position: relative;
   width: 210px;
@@ -133,14 +147,14 @@ h1 {
   overflow: hidden;
   visibility: hidden;
 }
-
+ 
 .progress_fill{
   width: 0%;
   height: 100%;
   background: green;
   transition: all 0.2s;
 }
-
+ 
 .progress_text{
   position: absolute;
   top: 50%;
@@ -148,16 +162,16 @@ h1 {
   transform: translateY(-50%);
   color: white;
 }
-
+ 
 .flagsBtns {
   display: flex;
   justify-content: flex-end;
 }
-
+ 
 .de_Btn, .eng_Btn, .in_Btn {
   padding: 8px 16px;
   color: white;
   border: none;
   border-radius: 8px;
   cursor: pointer;
-}
+}