WebashalarForML's picture
Update templates/result.html
d141fbc verified
raw
history blame
No virus
26.8 kB
<!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/[email protected]/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;
}
.container{
max-width: 1600px !important;
height: 100vh;
display: flex;
}
.cont {
background-color: #2c2c2e;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: 1s ease;
}
.file-container,
.processed-container {
flex: 1; /* Equal flex for both sections */
overflow-y: auto; /* Allow vertical scrolling */
height: 100%; /* Full height within the container */
padding: 15px;
}
.section-title {
color: #ff9f0a;
font-size: 1.5rem;
font-weight: bold;
margin-top: 20px;
border-bottom: 2px solid #ff9f0a;
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: #ff9f0a;
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: #ff9f0a;
}
.btn-reset {
background-color: #ff453a;
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%;
}
iframe {
width: 100%;
height: 100%;
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;
}
.pdf-container {
height: 100%;
min-height: 700px;
overflow: hidden;
}
.file-viewer {
width: 100%;
height: 600px;
}
.row {
margin-top: 20px;
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;
}
.file-container::-webkit-scrollbar,
.processed-container::-webkit-scrollbar {
width: 10px; /* Width of the scrollbar */
}
.file-container::-webkit-scrollbar-track,
.processed-container::-webkit-scrollbar-track {
background-color: #3a3a3c; /* Track color */
border-radius: 10px;
}
.file-container::-webkit-scrollbar-thumb,
.processed-container::-webkit-scrollbar-thumb {
background-color: #ff9d0a57; /* Thumb (handle) color */
border-radius: 10px; /* Rounded edges for the scrollbar */
border: 2px solid #3a3a3c; /* Adds space around the scrollbar thumb */
}
.file-container::-webkit-scrollbar-thumb:hover,
.processed-container::-webkit-scrollbar-thumb:hover {
background-color: #ff7f0a; /* Darker shade on hover */
}
.file-container::-webkit-scrollbar-thumb:active,
.processed-container::-webkit-scrollbar-thumb:active {
background-color: #ff5f00; /* Even darker shade when active */
}
</style>
</head>
<body>
<div class="container d-flex">
{% with messages = get_flashed_messages() %} {% if messages %}
<div class="alert alert-success mt-4 " id="flash-message">
{{ messages[0] }}
</div>
{% endif %} {% endwith %}
<div class="col-md-6 file-container cont">
<h3 class="section-title">Uploaded File:</h3>
{% if file_extension %}
{% if file_extension in ['pdf'] %}
<!-- Display PDF in an iframe -->
<iframe src="{{ file_path }}" title="PDF Viewer" class="file-viewer"></iframe>
{% elif file_extension in ['png', 'jpg', 'jpeg'] %}
<!-- Display Image -->
<img src="{{ file_url }}" alt="Processed Image" class="img-fluid file-viewer" />
{% elif file_extension in ['docx', 'rsf', 'odt'] %}
<!-- Provide Download Link for Non-Viewable Files -->
<a href="{{ file_url }}" class="btn btn-primary" download>Download {{ file_extension | upper }}
File</a>
{% else %}
<p>Can't Display This File Type.</p>
{% endif %}
{% else %}
<p>No file uploaded or processed.</p>
{% endif %}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias velit praesentium quibusdam quasi asperiores nobis corrupti accusamus? Recusandae beatae voluptas nostrum minima, enim qui fugiat aut illo quam quod omnis tempora harum incidunt laborum error voluptates ducimus. Nesciunt dolores sapiente, aut deserunt iste nihil asperiores obcaecati dicta? Accusamus dolor odit dolorum dolores consequuntur id? Deserunt minus dolore veritatis molestias, voluptate similique, autem dolorum temporibus consequuntur velit vero perferendis praesentium ex sed! Sapiente blanditiis labore pariatur minima quod? Blanditiis iste laborum, asperiores voluptas amet quis recusandae aliquid praesentium a facere harum ad delectus quo ex ullam! Modi illo temporibus recusandae optio!</p>
</div>
<div class="col-md-6 processed-container cont ">
<div>
<!-- {% if parsed_data %} -->
<div class="d-flex align-items-center justify-content-between">
<h1>Processed Data</h1>
<!-- Reset Button -->
<div class="text-center mt-4">
<a href="{{ url_for('reset_upload') }}" class="btn btn-reset">Reset & Upload New File</a>
</div>
</div>
<!-- PDF and Personal Information Section -->
<section>
<!-- <h3 class="section-title">Personal Information</h3> -->
<div class="row">
<!-- Personal Information Column -->
<div class="col-md-12">
<h3 class="section-title">Personal Information</h3>
{% if parsed_data %}
<div class="card">
<div class="card-body">
{% if parsed_data.personal.name != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Name:</h5>
<p class="card-text">&nbsp;{{ parsed_data.personal.name or 'Not Found' }}</p>
</div>
{% endif %}
{% if parsed_data.personal.contact != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Contact:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.personal.contact or 'Not Found' }}
{% if parsed_data.personal.invalid_contact %}
&nbsp; - ({{ parsed_data.personal.invalid_contact }})
{% endif %}
</p>
</div>
{% endif %}
{% if parsed_data.personal.email != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Email:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.personal.email or 'Not Found' }}
{% if parsed_data.personal.invalid_email %}
&nbsp; ({{ parsed_data.personal.invalid_email }})
{% endif %}
</p>
</div>
{% endif %}
{% if parsed_data.personal.location != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Location:</h5>
<p class="card-text">&nbsp;{{ parsed_data.personal.location or 'Not Found' }}</p>
</div>
{% endif %}
{% if parsed_data.personal.linkedin != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">LinkedIn:</h5>
<p class="card-text">
{% if parsed_data.personal.linkedin != 'Not found' %}
<ul>
{% for lnk in parsed_data.personal.linkedin %}
<li>&nbsp;<a href="{{ lnk }}" target="_blank">{{ lnk }}</a></li>
{% endfor %}
</ul>
{% else %} Not Found {% endif %}
</p>
</div>
{% endif %}
{% if parsed_data.personal.github != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">GitHub:</h5>
<p class="card-text">
{% if parsed_data.personal.github != 'Not found' %}
<ul>
{% for git in parsed_data.personal.github %}
<li>&nbsp; <a href="{{ git }}" target="_blank">{{ git }}</a></li>
{% endfor %}
</ul>
{% else %} Not Found {% endif %}
</p>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
<h3 class="section-title">Professional Information</h3>
<div class="row">
<!-- Technical Skills -->
{% if parsed_data.professional.technical_skills != 'Not found' %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Technical Skills:</h5>
{% if parsed_data.professional.technical_skills and
parsed_data.professional.technical_skills is iterable and
parsed_data.professional.technical_skills is not string %}
<ul>
{% for skill in parsed_data.professional.technical_skills %}
<li>{{ skill }}</li>
{% endfor %}
</ul>
{% else %}
<p>No technical skills found</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
<!-- Tools -->
{% if parsed_data.professional.tools != 'Not found' %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Tools:</h5>
{% if parsed_data.professional.tools and parsed_data.professional.tools is iterable and
parsed_data.professional.tools is not string %}
<ul>
{% for tool in parsed_data.professional.tools %}
<li>{{ tool }}</li>
{% endfor %}
</ul>
{% else %}
<p>No tools found</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
<!-- Soft Skills -->
{% if parsed_data.professional.non_technical_skills != 'Not found' %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Soft Skills:</h5>
{% if parsed_data.professional.non_technical_skills and
parsed_data.professional.non_technical_skills is iterable and
parsed_data.professional.non_technical_skills is not string %}
<ul>
{% for skill in parsed_data.professional.non_technical_skills
%}
<li>{{ skill }}</li>
{% endfor %}
</ul>
{% else %}
<p>No soft skills found</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</section>
<!-- Professional Information Section -->
<section>
<h3 class="section-title">Professional Information</h3>
<div class="row">
<!-- Technical Skills -->
{% if parsed_data.professional.technical_skills != 'Not found' %}
<div class="col-md-12 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Technical Skills:</h5>
{% if parsed_data.professional.technical_skills and
parsed_data.professional.technical_skills is iterable and
parsed_data.professional.technical_skills is not string %}
<ul>
{% for skill in parsed_data.professional.technical_skills %}
<li>{{ skill }}</li>
{% endfor %}
</ul>
{% else %}
<p>No technical skills found</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
<!-- Tools -->
{% if parsed_data.professional.tools != 'Not found' %}
<div class="col-md-12 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Tools:</h5>
{% if parsed_data.professional.tools and parsed_data.professional.tools is iterable and
parsed_data.professional.tools is not string %}
<ul>
{% for tool in parsed_data.professional.tools %}
<li>{{ tool }}</li>
{% endfor %}
</ul>
{% else %}
<p>No tools found</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
<!-- Soft Skills -->
{% if parsed_data.professional.non_technical_skills != 'Not found' %}
<div class="col-md-12 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Soft Skills:</h5>
{% if parsed_data.professional.non_technical_skills and
parsed_data.professional.non_technical_skills is iterable and
parsed_data.professional.non_technical_skills is not string %}
<ul>
{% for skill in parsed_data.professional.non_technical_skills
%}
<li>{{ skill }}</li>
{% endfor %}
</ul>
{% else %}
<p>No soft skills found</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</section>
<!-- Experience Section -->
<section>
<h3 class="section-title">Experience</h3>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
{% if parsed_data.professional.experience[0].company != 'Not found' %}
<h5 class="card-title">Company:</h5>
{% if parsed_data.professional.experience[0].company and
parsed_data.professional.experience[0].company is iterable and
parsed_data.professional.experience[0].company is not string %}
<ul>
{% for Company in parsed_data.professional.experience[0].company %}
<li>{{ Company }}</li>
{% endfor %}
</ul>
{% else %}
<p>Not Found</p>
{% endif %}
{% endif %}
{% if parsed_data.professional.experience[0].projects != 'Not found' %}
<h5 class="card-title">Projects:</h5>
{% if parsed_data.professional.experience[0].projects and
parsed_data.professional.experience[0].projects is iterable and
parsed_data.professional.experience[0].projects is not string %}
<ul>
{% for project in parsed_data.professional.experience[0].projects %}
<li>{{ project }}</li>
{% endfor %}
</ul>
{% else %}
<p>Not Found</p>
{% endif %}
{% endif %}
{% if parsed_data.professional.experience[0].role != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Role:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.professional.experience[0].role or 'Not Found' }}
</p>
</div>
{% endif %}
{% if parsed_data.professional.experience[0].years != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Years of Experience:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.professional.experience[0].years or 'Not Found' }}
</p>
</div>
{% endif %}
{% if parsed_data.professional.experience[0].project_experience != 'Not found' %}
<h5 class="card-title">Project Experience:</h5>
{% if parsed_data.professional.experience[0].project_experience and
parsed_data.professional.experience[0].project_experience is iterable and
parsed_data.professional.experience[0].project_experience is not string %}
<ul>
{% for project in parsed_data.professional.experience[0].project_experience %}
<li>{{ project }}</li>
{% endfor %}
</ul>
{% else %}
<p>Not Found</p>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section>
<h3 class="section-title">Education</h3>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
{% if parsed_data.professional.education[0].qualification != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Qualification:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.professional.education[0].qualification
}}
</p>
</div>
{% endif %}
{% if parsed_data.professional.education[0].university != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">University:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.professional.education[0].university or 'Not Found' }}
</p>
</div>
{% endif %}
{% if parsed_data.professional.education[0].course != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Course:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.professional.education[0].course or 'Not Found' }}
</p>
</div>
{% endif %}
{% if parsed_data.professional.education[0].certificate != 'Not found' %}
<div class="d-flex">
<h5 class="card-title">Certificate:</h5>
<p class="card-text">
&nbsp;{{ parsed_data.professional.education[0].certificate or 'Not Found' }}
</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
{% else %}
<p>No data available. Please process a file.</p>
{% endif %}
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
setTimeout(function () {
let flashMessage = document.getElementById(" -message");
if (flashMessage) {
flashMessage.style.transition = "opacity 1s ease";
flashMessage.style.opacity = 0;
setTimeout(() => flashMessage.remove(), 1000);
}
}, 3000);
</script>
</body>
</html>