|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>Processed Results</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; |
|
} |
|
|
|
h1 { |
|
color: #e5e5e7; |
|
text-align: center; |
|
} |
|
|
|
.cont { |
|
background-color: #2c2c2e; |
|
padding: 30px; |
|
border-radius: 15px; |
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); |
|
transition: 1s ease; |
|
} |
|
|
|
.section-title { |
|
color: #ee4410; |
|
font-size: 1.5rem; |
|
font-weight: bold; |
|
margin-top: 20px; |
|
border-bottom: 2px solid #ee4410; |
|
padding-bottom: 10px; |
|
} |
|
|
|
.card { |
|
background-color: #3a3a3c; |
|
color: #f5f5f7; |
|
border-radius: 10px; |
|
margin-bottom: 15px; |
|
padding: 15px; |
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); |
|
transition: background-color 0.3s ease; |
|
} |
|
|
|
.card:hover { |
|
background-color: #3a3a3c98; |
|
} |
|
|
|
.card-title { |
|
color: #ee4410; |
|
font-size: 1.2rem; |
|
font-weight: bold; |
|
} |
|
|
|
.card-text { |
|
color: #d1d1d6; |
|
font-size: 1rem; |
|
} |
|
|
|
ul { |
|
list-style-type: none; |
|
padding-left: 0; |
|
} |
|
|
|
li::before { |
|
content: "• "; |
|
color: #ee4410; |
|
} |
|
|
|
.btn-reset { |
|
background-color: #ff9f0a; |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
border-radius: 5px; |
|
transition: background-color 0.3s ease; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.btn-reset:hover { |
|
background-color: #e03a2f; |
|
} |
|
|
|
.alert { |
|
text-align: center; |
|
position: absolute; |
|
top: 0; |
|
right: 15%; |
|
} |
|
|
|
.image-container img { |
|
max-width: 100%; |
|
border-radius: 10px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div class="container"> |
|
{% with messages = get_flashed_messages() %} {% if messages %} |
|
<div class="alert alert-success mt-4 " id="flash-message"> |
|
{{ messages[0] }} |
|
</div> |
|
{% endif %} {% endwith %} |
|
</div> |
|
|
|
<div class="container cont mt-5"> |
|
<div class="d-flex align-items-center justify-content-between"> |
|
<h1>Extracted Details From Image</h1> |
|
|
|
<div class="text-center mt-4"> |
|
<a href="{{ url_for('reset_upload') }}" class="btn btn-reset">Reset & Upload New File</a> |
|
</div> |
|
</div> |
|
|
|
{% if data %} |
|
|
|
<section> |
|
<h3 class="section-title">Extracted Information</h3> |
|
<div class="row"> |
|
|
|
<div class="col-md-6 image-container"> |
|
<div class="card"> |
|
<div class="card-body"> |
|
{% if data.extracted_text.items() %} |
|
<h5 class="card-title">Extracted Image:</h5> |
|
<ul> |
|
{% for filename, text in data.extracted_text.items() %} |
|
|
|
<img src="{{ Img[filename] }}" alt="Processed Image" class="img-fluid" /> |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="col-md-6"> |
|
<div class="card"> |
|
<div class="card-body"> |
|
{% if data.name and data.name is iterable and data.name is not string %} |
|
<h5 class="card-title">Name:</h5> |
|
<ul> |
|
{% for value in data.name %} |
|
{% if value|lower != 'not found' %} |
|
<li>{{ value }}</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
|
|
{% if data.Designation and data.Designation is iterable and data.Designation is not string %} |
|
<h5 class="card-title">Designation:</h5> |
|
<ul> |
|
{% for value in data.Designation %} |
|
{% if value|lower != 'not found' %} |
|
<li>{{ value }}</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
|
|
{% if data.contact_number and data.contact_number is iterable and data.contact_number is not string %} |
|
<h5 class="card-title">Contact number:</h5> |
|
<ul> |
|
{% for value in data.contact_number %} |
|
{% if value|lower != 'not found' %} |
|
<li>{{ value }}</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
|
|
{% if data.email and data.email is iterable and data.email is not string %} |
|
<h5 class="card-title">Email:</h5> |
|
<ul> |
|
{% for value in data.email %} |
|
{% if value|lower != 'not found' %} |
|
<li>{{ value }}</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
|
|
{% if data.Location and data.Location is iterable and data.Location is not string %} |
|
<h5 class="card-title">Location:</h5> |
|
<ul> |
|
{% for value in data.Location %} |
|
{% if value|lower != 'not found' %} |
|
<li>{{ value }}</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
|
|
{% if data.Link and data.Link is iterable and data.Link is not string %} |
|
<h5 class="card-title">Link:</h5> |
|
<ul> |
|
{% for value in data.Link %} |
|
{% if value|lower != 'not found' %} |
|
<li>{{ value }}</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
|
|
{% if data.Company and data.Company is iterable and data.Company is not string %} |
|
<h5 class="card-title">Organisation:</h5> |
|
<ul> |
|
{% for value in data.Company %} |
|
{% if value|lower != 'not found' %} |
|
<li>{{ value }}</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
{% else %} |
|
<p>No data available. Please process a file.</p> |
|
{% endif %} |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> |
|
<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> |
|
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); |
|
</script> |
|
</body> |
|
|
|
</html> |
|
|
