Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>File Uploader</title> | |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" /> | |
<style> | |
body { | |
background-color: #1c1c1e; | |
font-family: "Poppins", sans-serif; | |
color: #f5f5f7; | |
margin: 0; | |
} | |
h1 { | |
color: #e5e5e7; | |
text-align: center; | |
margin-bottom: 20px; | |
} | |
.container { | |
margin-top: 70px; | |
} | |
.file-upload-section { | |
background-color: #2c2c2e; | |
padding: 30px; | |
border-radius: 15px; | |
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); | |
text-align: center; | |
} | |
.file-upload-section input[type="file"] { | |
margin: 20px 0; | |
} | |
.file-upload-section input[type="submit"] { | |
background-color: #ee4410; | |
color: white; | |
border: none; | |
padding: 10px 20px; | |
border-radius: 5px; | |
transition: background-color 0.3s ease; | |
} | |
.file-upload-section input[type="submit"]:hover { | |
background-color: #ee4410; | |
} | |
.file-actions a { | |
margin: 0 10px; | |
text-decoration: none; | |
color: #ee4410; | |
} | |
.file-actions a:hover { | |
color: #ee4410; | |
} | |
.flash-message { | |
margin-bottom: 20px; | |
padding: 15px; | |
border-radius: 5px; | |
color: #333; | |
} | |
.alert { | |
text-align: center; | |
position: sticky; | |
top: 0; | |
right: 15%; | |
} | |
/* Loader styles */ | |
.loader { | |
border: 8px solid #f3f3f3; | |
border-top: 8px solid #ee4410; | |
border-radius: 50%; | |
width: 60px; | |
height: 60px; | |
animation: spin 2s linear infinite; | |
margin: 20px auto; | |
display: none; | |
} | |
@keyframes spin { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
/* Top bar styles */ | |
.top-bar { | |
background-color: #333; | |
position: fixed; | |
top: 0; | |
width: 100%; | |
z-index: 1000; | |
padding: 10px 20px; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.top-bar h2 { | |
color: white; | |
} | |
/* Navigation tab styles */ | |
.tab { | |
display: flex; | |
gap: 10px; | |
} | |
.tab button { | |
background-color: inherit; | |
border: none; | |
outline: none; | |
cursor: pointer; | |
padding: 10px 16px; | |
transition: 0.3s; | |
font-size: 17px; | |
color: white; | |
} | |
.tab button:hover { | |
background-color: #575757; | |
} | |
.tab button.active { | |
background-color: #444; | |
} | |
/* Tab content styles */ | |
.tabcontent { | |
display: none; | |
padding: 20px; | |
margin-top: 70px; | |
} | |
/* Responsive design */ | |
@media (max-width: 768px) { | |
.tab { | |
flex-direction: column; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Locked Top Bar with Tabs --> | |
<div class="top-bar"> | |
<h2>Capture AI</h2> | |
<!-- Navigation Tabs --> | |
<div class="tab"> | |
<button class="tablink" onclick="openPage('ImageExtractor', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button> | |
<button class="tablink" onclick="openPage('ResumeParserExtractor', this, '#ff4d00')">Resume Data Extractor</button> | |
</div> | |
</div> | |
<div class="container"> | |
<h1>Visiting Card Data Extractor</h1> | |
<div class="file-upload-section"> | |
<form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data"> | |
<input type="file" name="files" multiple class="form-control" required /> | |
<input type="submit" value="Upload your Images" class="btn btn-outline-primary" /> | |
</form> | |
{% if session.get('uploaded_files') %} | |
<p class="mt-4"> | |
Uploaded: | |
<span class="text-danger">{{ session.get('uploaded_files') }}</span> | |
</p> | |
<form action="{{ url_for('remove_file') }}" method="post"> | |
<button type="submit" class="btn btn-outline-danger"> | |
<i class="bi bi-trash"></i> Remove Uploaded File | |
</button> | |
</form> | |
{% endif %} | |
</div> | |
<div class="container"> | |
<!-- Loader --> | |
<div class="loader" id="loader"></div> | |
</div> | |
{% with messages = get_flashed_messages() %} {% if messages %} | |
<div class="alert alert-success mt-4" id="flash-message"> | |
{{ messages[0] }} | |
</div> | |
{% endif %} {% endwith %} | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> | |
<script> | |
// Loader functionality | |
document.getElementById('fileUploadForm').onsubmit = function () { | |
document.getElementById('loader').style.display = 'block'; | |
document.getElementById('tablinks').disabled = true; | |
document.getElementById('tablinks active').disabled = true; | |
}; | |
// Flash message auto-hide | |
setTimeout(function () { | |
let flashMessage = document.getElementById("flash-message"); | |
if (flashMessage) { | |
flashMessage.style.transition = "opacity 1s ease"; | |
flashMessage.style.opacity = 0; | |
setTimeout(() => flashMessage.remove(), 1000); | |
} | |
}, 3000); | |
// Function to open links in the same tab | |
function openLink(url) { | |
window.location.href = url; // Redirects to the specified URL in the same tab | |
// Remove "active" class from all buttons | |
const buttons = document.querySelectorAll('.tab button'); | |
buttons.forEach(button => button.classList.remove('active')); | |
// Add "active" class to the clicked button | |
element.classList.add('active'); | |
} | |
</script> | |
</body> | |
</html> | |