|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Processed Data</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 { |
|
display: flex; |
|
flex-direction: row; |
|
height: 100vh; |
|
margin-top: 20px; |
|
} |
|
|
|
.left-side { |
|
flex: 1; |
|
padding: 20px; |
|
overflow-y: auto; |
|
border: none; |
|
border-radius: 10px; |
|
} |
|
|
|
.right-side { |
|
flex: 1; |
|
padding: 20px; |
|
background-color: #1d2c38; |
|
border-left: 1px solid #4e5d6c; |
|
border-radius: 10px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.card { |
|
background-color: #2a2f36; |
|
border: none; |
|
border-radius: 10px; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); |
|
margin-bottom: 20px; |
|
} |
|
|
|
.card-header { |
|
background-color: #28a745; |
|
color: white; |
|
border-top-left-radius: 10px; |
|
border-top-right-radius: 10px; |
|
} |
|
|
|
.list-group-item { |
|
border: none; |
|
background-color: #3a4149; |
|
color: #e0e0e0; |
|
padding: 10px; |
|
} |
|
|
|
iframe { |
|
width: 100%; |
|
height: 100%; |
|
border: none; |
|
border-radius: 12px; |
|
} |
|
|
|
.list-group-item strong { |
|
color: #e0e0e0; |
|
} |
|
|
|
h2 { |
|
margin-bottom: 20px; |
|
color: #e0e0e0; |
|
} |
|
|
|
h3 { |
|
margin-top: 10px; |
|
margin-bottom: 10px; |
|
font-size: 1.25rem; |
|
color: #28a745; |
|
} |
|
|
|
pre { |
|
background-color: #3a4149; |
|
padding: 10px; |
|
border-radius: 5px; |
|
font-size: 1rem; |
|
color: #e0e0e0; |
|
overflow-x: auto; |
|
} |
|
|
|
.card-footer { |
|
text-align: center; |
|
border-top: 1px solid #4e5d6c; |
|
padding: 15px; |
|
} |
|
|
|
.no-pdf-message { |
|
text-align: center; |
|
font-size: 1.25rem; |
|
color: #6c757d; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { |
|
transform: scale(1); |
|
} |
|
|
|
50% { |
|
transform: scale(1.2); |
|
} |
|
|
|
100% { |
|
transform: scale(1); |
|
} |
|
} |
|
|
|
.emoji { |
|
font-size: 2rem; |
|
animation: pulse 1s infinite; |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
|
|
.emoji-high { |
|
color: #28a745; |
|
} |
|
|
|
.emoji-medium { |
|
color: #ffc107; |
|
} |
|
|
|
.emoji-low { |
|
color: #dc3545; |
|
} |
|
|
|
a { |
|
color: #007bff; |
|
} |
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
<div class="container"> |
|
<div class="left-side"> |
|
<div class="card"> |
|
<div class="card-header text-center"> |
|
<h3>Model</h3> |
|
<h2>Extracted Details</h2> |
|
</div> |
|
<div class="card-body"> |
|
<ul class="list-group mb-3"> |
|
<li class="list-group-item"> |
|
<strong>Extracted Data:</strong> |
|
{% for filename, text in data.extracted_text.items() %} |
|
<h3>{{ filename }}:</h3> |
|
<img src="{{ Img[filename] }}" alt="Processed Image" class="img-fluid mb-3" |
|
style="max-width: 100%; height: auto;" /> |
|
<strong>Text:</strong> |
|
<p>{{ text }}</p> |
|
{% endfor %} |
|
</li> |
|
<li class="list-group-item"> |
|
<strong>Name:</strong> |
|
{% if data.name is iterable and data.name is not string %} |
|
<ul> |
|
{% for value in data.name %} |
|
<li>{{ value }}<br></li> |
|
{% endfor %} |
|
</ul> |
|
{% else %} |
|
<p>{{ data.name }}</p> |
|
{% endif %} |
|
</li> |
|
<li class="list-group-item"> |
|
<strong>Designation:</strong> |
|
{% if data.Designation is iterable and data.Designation is not string %} |
|
<ul> |
|
{% for value in data.Designation %} |
|
<li>{{ value }}<br></li> |
|
{% endfor %} |
|
</ul> |
|
{% else %} |
|
<p>{{ data.Designation }}</p> |
|
{% endif %} |
|
</li> |
|
<li class="list-group-item"> |
|
<strong>Contact Number:</strong> |
|
{% if data.contact_number is iterable and data.contact_number is not string %} |
|
<ul> |
|
{% for value in data.contact_number %} |
|
<li>{{ value }}<br></li> |
|
{% endfor %} |
|
</ul> |
|
{% else %} |
|
<p>{{ data.contact_number }}</p> |
|
{% endif %} |
|
</li> |
|
<li class="list-group-item"> |
|
<strong>Email:</strong> |
|
{% if data.email is iterable and data.email is not string %} |
|
<ul> |
|
{% for value in data.email %} |
|
<li>{{ value }}<br></li> |
|
{% endfor %} |
|
</ul> |
|
{% else %} |
|
<p>{{ data.email }}</p> |
|
{% endif %} |
|
</li> |
|
<li class="list-group-item"> |
|
<strong>Address:</strong> |
|
{% if data.Location is iterable and data.Location is not string %} |
|
<ul> |
|
{% for value in data.Location %} |
|
<li>{{ value }}<br></li> |
|
{% endfor %} |
|
</ul> |
|
{% else %} |
|
<p>{{ data.Location }}</p> |
|
{% endif %} |
|
</li> |
|
<li class="list-group-item"> |
|
<strong>Links:</strong> |
|
{% if data.Link is iterable and data.Link is not string %} |
|
<ul> |
|
{% for value in data.Link %} |
|
<li>{{ value }}<br></li> |
|
{% endfor %} |
|
</ul> |
|
{% else %} |
|
<p>{{ data.Link }}</p> |
|
{% endif %} |
|
</li> |
|
<li class="list-group-item"> |
|
<strong>Organisation:</strong> |
|
{% if data.Company is iterable and data.Company is not string %} |
|
<ul> |
|
{% for value in data.Company %} |
|
<li>{{ value }}<br></li> |
|
{% endfor %} |
|
</ul> |
|
{% else %} |
|
<p>{{ data.Company }}</p> |
|
{% endif %} |
|
</li> |
|
</ul> |
|
<a href="{{ url_for('index') }}"> |
|
<button type="button" class="btn btn-primary">Back to Upload</button> |
|
</a> |
|
</div> |
|
</div> |
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> |
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|
</body> |
|
|
|
</html> |
|
|