Update templates/index.html

templates/index.html

@@ -10,6 +10,7 @@
     <style>
         body {
             background-color: #1d2329;
+            color: #e0e0e0;
             font-family: 'Arial', sans-serif;
         }
 
@@ -18,13 +19,14 @@
         }
 
         .card {
+            background-color: #2a2f36;
             border: none;
             border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
         }
 
         .card-header {
-            background-color: #007bff;
+            background-color: #3a4149;
             color: white;
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
@@ -62,24 +64,29 @@
         .uploaded-file span {
             font-size: 16px;
             margin-left: 10px;
-            color: #333;
+            color: #e0e0e0;
         }
 
         .remove-file {
             cursor: pointer;
-            color: red;
+            color: #dc3545;
             margin-left: 10px;
         }
 
         .form-control-file {
             border-radius: 50px;
-            border: 2px solid #ced4da;
+            border: 2px solid #4e5d6c;
             padding: 10px;
+            background-color: #3a4149;
+            color: #e0e0e0;
             font-size: 16px;
         }
 
         .form-control {
             border-radius: 50px;
+            background-color: #3a4149;
+            color: #e0e0e0;
+            border: 2px solid #4e5d6c;
         }
 
         .mt-3 {
@@ -88,18 +95,18 @@
 
         .card-footer {
             text-align: center;
-            border-top: 1px solid #ddd;
+            border-top: 1px solid #4e5d6c;
             padding: 15px;
         }
 
-        /* Custom file input styling */
         .custom-file-upload {
-            border: 1px solid #ced4da;
+            border: 1px solid #4e5d6c;
             display: inline-block;
             padding: 6px 12px;
             cursor: pointer;
             border-radius: 50px;
-            background-color: #ffffff;
+            background-color: #3a4149;
+            color: #e0e0e0;
         }
 
         .custom-file-upload input[type="file"] {
@@ -110,7 +117,6 @@
             margin-top: 20px;
         }
 
-        /* Spinner styling */
         #loadingSpinner {
             display: none;
             margin-top: 20px;
@@ -138,7 +144,8 @@
                         <h4 class="mt-4">Uploaded Files:</h4>
                         <ul class="list-group">
                             {% for file in uploaded_files %}
-                            <li class="list-group-item d-flex justify-content-between align-items-center">
+                            <li class="list-group-item d-flex justify-content-between align-items-center"
+                                style="background-color: #3a4149; color: #e0e0e0;">
                                 {{ file }}
                                 <a href="/remove_file" class="remove-file" title="Remove File">&times;</a>
                             </li>
@@ -150,7 +157,6 @@
                             <button id="processBtn" type="submit" class="btn btn-success">Process All Files</button>
                         </form>
 
-                        <!-- Circular Loading Spinner -->
                         <div id="loadingSpinner" class="text-center">
                             <div class="spinner-border text-primary" role="status">
                                 <span class="sr-only">Processing...</span>
@@ -158,7 +164,7 @@
                         </div>
                     </div>
                     <div class="card-footer">
-                        <small>&copy; 2024 | Webashalar Pvt. Ltd. </small>
+                        <small>&copy; 2024 | Webashalar Pvt. Ltd.</small>
                     </div>
                 </div>
             </div>
@@ -170,12 +176,10 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
     <script>
-        // Show spinner and hide button when form is submitted
-        document.getElementById("processForm").addEventListener("submit", function (event) {
+        document.getElementById("processForm").addEventListener("submit", function(event) {
             document.getElementById("loadingSpinner").style.display = "block";
             document.getElementById("processBtn").style.display = "none";
         });
     </script>
 </body>
-
-</html>
+</html>