improvements in the html and css

main.py

@@ -114,12 +114,12 @@ async def process_video_api(video_file: MP4Video = Depends(),
                     srt_file.file.close()
             logging.info("Processing the video...")
             output_path, _ = process_video(temp_input_path, SRT_PATH, max_words_per_line, fontsize, font, bg_color, text_color)
-            logging.info("Archiving response...")
+            logging.info("Zipping response...")
             zip_path = zip_response(os.path.join(temp_vid_dir,"archive.zip"), [output_path, SRT_PATH])
             return FileResponse(zip_path, media_type='application/zip', filename=f"result_{video_file.filename.split('.')[0]}.zip")
         logging.info("Processing the video...")
         output_path, srt_path = process_video(temp_input_path, None, max_words_per_line, fontsize, font, bg_color, text_color)
-        logging.info("Archiving response...")
+        logging.info("Zipping response...")
         zip_path = zip_response(os.path.join(temp_vid_dir,"archive.zip"), [output_path, srt_path])
         return  FileResponse(zip_path, media_type='application/zip', filename=f"result_{video_file.filename.split('.')[0]}.zip")
                 

static/landing_page.html

@@ -76,8 +76,7 @@
             }
 
             .footer a {
-                margin: 0 10px;
-                padding: 5rem;
+                padding: 0.5rem;
                 text-decoration: none;
             }
             .fa-github:hover {

static/submit_video.html

@@ -12,13 +12,13 @@
             }
 
             form {
-                max-width: 600px;
-                margin: 20px auto;
-                padding: 20px;
+                max-width: 400px;
+                margin: 10px auto;
+                padding: 5px;
                 background: #ffffff;
                 border-radius: 8px;
                 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-                padding-bottom: 1rem;
+                padding-bottom: 0.5rem;
             }
 
             input[type=file],
@@ -33,14 +33,17 @@
             }
 
             input[type=submit] {
-                width: 100%;
+                width: 25%;
                 background-color: #4CAF50;
                 color: white;
                 padding: 15px 20px;
                 border: none;
                 border-radius: 5px;
                 cursor: pointer;
-                font-size: 18px;
+                font-size: 14px;
+                display: block;
+                margin-right: auto;
+                margin-left: auto;
             }
 
             input[type=submit]:hover {
@@ -61,8 +64,7 @@
             }
 
             .footer a {
-                margin: 0 10px;
-                padding: 5rem;
+                padding: 0.5rem;
                 text-decoration: none;
             }
 
@@ -96,7 +98,7 @@
             Background color (Pro tip: #00FFFF00 = transparent): <input type="text" name="bg_color" value="#070a13b3"><br>
             Text color: <input type="text" name="text_color" value="white"><br>
             <input type="submit">
-        </form>
+       </form>
         <!-- Footer -->
         <div class="footer">
             <p>Created by:</p>