Spaces:

WebashalarForML
/

ResumeExtractor2

Running

App Files Files Community

ResumeExtractor2 / templates /result.html

WebashalarForML

Update templates/result.html

7399888 verified 4 days ago

raw

history blame

22.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;
	}

	.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: 540px;
	}

	.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="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>

	<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 %}
	</div>
	<div class="col-md-6 processed-container cont ">
	<div>
	<!-- {% if parsed_data %} -->

	<!-- PDF and Personal Information Section -->
	<!-- PDF and Personal Information Section -->
	<section>
	<!-- <h3 class="section-title">Personal Information</h3> -->
	<h3 class="section-title">Personal Information</h3>
	<div class="row">
	<!-- Personal Information Column -->
	<div class="col-md-12">
	{% 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"> {{ 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">
	{{ parsed_data.personal.contact or 'Not Found' }}
	{% if parsed_data.personal.invalid_contact %}
	- ({{ 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">
	{{ parsed_data.personal.email or 'Not Found' }}
	{% if parsed_data.personal.invalid_email %}
	({{ 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"> {{ 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> <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>  <a href="{{ git }}" target="_blank">{{ git }}</a></li>
	{% endfor %}
	</ul>
	{% else %} Not Found {% endif %}
	</p>
	</div>
	{% endif %}
	</div>
	</div>
	{% endif %}
	</div>
	</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">
	{{ 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">
	{{ 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">
	{{ 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">
	{{ 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">
	{{ 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">
	{{ 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("flash-message"); // Corrected ID
	if (flashMessage) {
	flashMessage.style.transition = "opacity 1s ease";
	flashMessage.style.opacity = 0;
	setTimeout(() => flashMessage.remove(), 1000);
	}
	}, 3000);
	</script>
	</body>

	</html>