|
<!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> |
|
|
