Clear jobs

templates/index

@@ -45,6 +45,7 @@
         ul {
             list-style-type: none;
             padding: 0;
+            margin-bottom: 10px; 
         }
         li {
             background-color: #2d2d2d;
@@ -83,6 +84,25 @@
             input[type="file"], input[type="submit"] {
                 font-size: 16px;
             }
+            input[type="submit"], #clear-completed {
+                font-size: 16px;
+            }
+        }
+        input[type="submit"], #clear-completed {
+            cursor: pointer;
+            color: white;
+            border: 1px solid #444;
+            padding: 8px 12px;
+            border-radius: 4px;
+            margin-bottom: 10px;
+            max-width: 100%;
+            width: 100%;
+        }
+        #clear-completed {
+            background-color: #f44336;
+        }
+        #clear-completed:hover {
+            background-color: #d32f2f;
         }
     </style>
 </head>
@@ -107,5 +127,19 @@
             <li>No active jobs</li>
         {{end}}
     </ul>
+    <button id="clear-completed" onclick="clearCompleted()">Clear Completed Jobs</button>
+    <script>
+        function clearCompleted() {
+            fetch('/clear-completed', { method: 'POST' })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    } else {
+                        alert('Failed to clear completed jobs');
+                    }
+                });
+        }
+    </script>
 </body>
 </html>