<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Data Extractor</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;
cursor: pointer;
}
.tab button.active {
background-color: #ee4410;
}
/* Tab content styles */
.tabcontent {
display: none;
padding: 20px;
margin-top: 70px;
}
.disabled {
cursor: not-allowed !important;
opacity: 0.6;/* Set cursor to not-allowed */
}
/* Responsive design */
@media (max-width: 768px) {
.tab {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Locked Top Bar with Tabs -->
<div class="top-bar">
<h2>AI Data Extractor</h2>
<!-- Navigation Tabs -->
<div class="tab">
<button class="tablinks active" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button>
<button class="tablinks" onclick="openLink('https://webashalarforml-resumeextractor2.hf.space/', 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';
// Disable the tab buttons and apply disabled class
const buttons = document.querySelectorAll('.tab button');
buttons.forEach(button => {
button.setAttribute('disabled', 'true');
button.classList.add('disabled'); // Add disabled class
});
// Show processing message
const processingMessage = document.createElement('p');
processingMessage.id = 'processing-message';
processingMessage.textContent = 'Processing, please wait...';
processingMessage.style.color = '#e68a10'; // Style as needed
document.querySelector('.file-upload-section').appendChild(processingMessage);
};
// 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);
}
// After processing is complete (You can adjust this based on your logic)
const processingMessage = document.getElementById('processing-message');
if (processingMessage) {
processingMessage.remove(); // Remove the processing message
}
// Re-enable tab buttons and remove disabled class
const buttons = document.querySelectorAll('.tab button');
buttons.forEach(button => {
button.removeAttribute('disabled');
button.classList.remove('disabled'); // Remove disabled class
});
}, 3000); // Adjust timing based on your upload duration
// Function to open links in the same tab
function openLink(url, element) {
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');
}
//Refreshing the cookie
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/;'; // Delete the cookie
}
// Set the cookie (you can comment this out after testing)
setCookie('myCookie', 'myValue', 1); // Sets a cookie for demonstration
// Automatically delete the cookie when the page is loaded or refreshed
window.onload = function() {
deleteCookie('myCookie'); // Replace 'myCookie' with your cookie name
}
</script>
</body>
</html>