<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload and Process</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
background-color: #1d2329;
color: #e0e0e0;
font-family: 'Arial', sans-serif;
}
.container {
margin-top: 50px;
}
.card {
background-color: #2a2f36;
border: none;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.card-header {
background-color: #3a4149;
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.btn-primary,
.btn-success,
.btn-info {
border-radius: 50px;
padding: 10px;
width: 100%;
}
.btn-primary {
background-color: #007bff;
border: none;
}
.btn-success {
background-color: #28a745;
border: none;
}
.btn-info {
background-color: #17a2b8;
border: none;
}
.uploaded-file {
margin-top: 15px;
display: flex;
align-items: center;
}
.uploaded-file span {
font-size: 16px;
margin-left: 10px;
color: #e0e0e0;
}
.remove-file {
cursor: pointer;
color: #dc3545;
margin-left: 10px;
}
.form-control-file {
border-radius: 50px;
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 {
margin-top: 20px !important;
}
.card-footer {
text-align: center;
border-top: 1px solid #4e5d6c;
padding: 15px;
}
.custom-file-upload {
border: 1px solid #4e5d6c;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
border-radius: 50px;
background-color: #3a4149;
color: #e0e0e0;
}
.custom-file-upload input[type="file"] {
display: none;
}
.form-group {
margin-top: 20px;
}
#loadingSpinner {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header text-center">
<h2>Upload and Process Files</h2>
</div>
<div class="card-body">
<form id="uploadForm" action="{{ url_for('upload_file') }}" method="post"
enctype="multipart/form-data">
<h4 class="text-center">Upload Images</h4>
<input type="file" name="files" multiple class="form-control-file" required>
<button type="submit" class="btn btn-primary mt-3">Upload</button>
</form>
{% if uploaded_files %}
<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"
style="background-color: #3a4149; color: #e0e0e0;">
{{ file }}
<a href="/remove_file" class="remove-file" title="Remove File">×</a>
</li>
{% endfor %}
</ul>
{% endif %}
<form id="processForm" method="post" action="/process" class="mt-3">
<button id="processBtn" type="submit" class="btn btn-success">Process All Files</button>
</form>
<div id="loadingSpinner" class="text-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Processing...</span>
</div>
</div>
</div>
<div class="card-footer">
<small>© 2024 | Webashalar Pvt. Ltd.</small>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.getElementById("processForm").addEventListener("submit", function(event) {
document.getElementById("loadingSpinner").style.display = "block";
document.getElementById("processBtn").style.display = "none";
});
</script>
</body>
</html>