784 lines
48 KiB
HTML
784 lines
48 KiB
HTML
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'temple-red': '#9d2235',
|
|
'temple-dark': '#1a1a1a',
|
|
'temple-cream': '#f8f7f2',
|
|
'dashboard-blue': '#4e73df',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@keyframes fade-in-grow {
|
|
from { width: 0%; }
|
|
}
|
|
|
|
.progress-bar-animated {
|
|
animation: fade-in-grow 1s ease-in-out forwards;
|
|
}
|
|
</style>
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<title>{{ application.resume_data_ar.full_name|default:"Application" }} - {% trans "Application Profile" %}</title>
|
|
{% else %}
|
|
<title>{{ application.resume_data_en.full_name|default:"Application" }} - {% trans "Application Profile" %}</title>
|
|
{% endif %}
|
|
</head>
|
|
<body class="bg-temple-cream text-gray-800">
|
|
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
{% with data_source=application.resume_data_ar analysis_source=application.analysis_data_ar %}
|
|
<div class="max-w-7xl mx-auto px-4 py-6" dir="rtl" style="direction: rtl;">
|
|
|
|
{% include 'recruitment/partials/ai_overview_breadcromb.html' %}
|
|
|
|
<header class="bg-gradient-to-br from-temple-red to-red-800 text-white rounded-xl shadow-2xl p-8 mb-6">
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-6">
|
|
<div class="text-right">
|
|
<h1 class="text-4xl font-extrabold mb-1">{{ data_source.full_name|default:"اسم المرشح" }}</h1>
|
|
<p class="text-xl text-red-100 mb-4">{{ data_source.current_title|default:"المسمى الوظيفي" }}</p>
|
|
<div class="flex flex-wrap gap-6 text-sm opacity-80">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="map-pin" class="w-4 h-4"></i>
|
|
<span>{{ data_source.location|default:"الموقع" }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="id-card" class="w-4 h-4"></i>
|
|
<span title="معلومات الاتصال">{{ data_source.contact|default:"معلومات الاتصال" }}</span>
|
|
</div>
|
|
{% if data_source.linkedin %}
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ data_source.linkedin }}" target="_blank" class="hover:underline"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
|
|
</div>
|
|
{% endif %}
|
|
{% if data_source.github %}
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ data_source.github }}" target="_blank" class="hover:underline"><i data-lucide="github" class="w-4 h-4"></i></a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="bg-white/20 backdrop-blur-sm rounded-xl p-4 text-center w-32 shrink-0 shadow-inner">
|
|
<div class="text-4xl font-bold mb-1">{{ analysis_source.match_score|default:0 }}%</div>
|
|
<div class="text-sm">{% trans "Match Score" %}</div>
|
|
<div class="text-xs font-semibold mt-1 {% if analysis_source.match_score|default:0 < 50 %}text-red-400{% elif analysis_source.match_score|default:0 < 75 %}text-yellow-400{% else %}text-green-400{% endif %}">
|
|
{{ analysis_source.screening_stage_rating|default:"التقييم" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="user-circle" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Analysis" %}
|
|
</h2>
|
|
|
|
{% if analysis_source.category %}
|
|
<div class="flex justify-between items-center mb-3 pb-2 border-b border-gray-200">
|
|
<span class="font-medium">{% trans "Target Role Category:" %}</span>
|
|
<span class="font-bold text-temple-red">{{ analysis_source.category }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.red_flags %}
|
|
<div class="pt-4 mt-4 border-t border-red-100">
|
|
<h3 class="font-semibold text-red-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="flag" class="w-5 h-5 text-red-500"></i>{% trans "Red Flags" %}
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">{{ analysis_source.red_flags|join:". "|default:"لا يوجد." }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.strengths %}
|
|
<div class="pt-4 mt-4 border-t border-green-100">
|
|
<h3 class="font-semibold text-green-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="circle-check" class="w-5 h-5"></i>{% trans "Strengths" %}
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">{{ analysis_source.strengths }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.weaknesses %}
|
|
<div class="pt-4 mt-4">
|
|
<h3 class="font-semibold text-red-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="triangle-alert" class="w-5 h-5 text-red-500"></i>{% trans "Weaknesses" %}
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">{{ analysis_source.weaknesses }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.recommendation %}
|
|
<div class="bg-yellow-50 border-r-4 border-yellow-500 p-4 rounded-r-lg mt-4">
|
|
<h3 class="font-semibold text-yellow-800 text-sm">{% trans "Recommendation" %}</h3>
|
|
<p class="text-yellow-700 text-sm">{{ analysis_source.recommendation }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if analysis_source.criteria_checklist %}
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="list-checks" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Required Criteria Check" %}
|
|
</h2>
|
|
<div class="space-y-3">
|
|
{% for criterion, status in analysis_source.criteria_checklist.items %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-700">{{ criterion }}</span>
|
|
<span class="text-sm font-bold">
|
|
{% if status == 'Met' %}<span class="text-green-600"><i data-lucide="check-circle" class="inline w-4 h-4"></i> {% trans "Met" %}</span>
|
|
{% elif status == 'Not Mentioned' %}<span class="text-yellow-600"><i data-lucide="alert-circle" class="inline w-4 h-4"></i> {% trans "Not Mentioned" %}</span>
|
|
{% else %}<span class="text-red-600"><i data-lucide="x-circle" class="inline w-4 h-4"></i> {{ status }}</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="wrench" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Skills" %}
|
|
</h2>
|
|
{% if data_source.skills %}
|
|
{% for category, skills in data_source.skills.items %}
|
|
<div class="mb-4">
|
|
<h3 class="font-semibold text-gray-700 mb-2">{{ category|cut:"_"|title }}</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for skill in skills %}
|
|
<span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium border border-red-200">{{ skill }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-gray-500 text-sm">{% trans "Skills information not available." %}</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="languages" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Languages" %}
|
|
</h2>
|
|
{% if analysis_source.language_fluency %}
|
|
{% for language in analysis_source.language_fluency %}
|
|
<div class="mb-3">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="font-medium">{{ language }}</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
{% with fluency_check=language|lower %}
|
|
<div class="bg-temple-red h-2 rounded-full progress-bar-animated"
|
|
style="width: {% if 'native' in fluency_check %}100{% elif 'fluent' in fluency_check %}85{% elif 'intermediate' in fluency_check %}50{% elif 'basic' in fluency_check %}25{% else %}10{% endif %}%">
|
|
</div>
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-gray-500 text-sm">{% trans "Language information not available." %}</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="pie-chart" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Key Metrics" %}
|
|
</h2>
|
|
<div class="space-y-3">
|
|
{% if analysis_source.min_req_met_bool is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="shield" class="w-4 h-4 text-temple-red"></i>{% trans "Min Requirements Met:" %}</span>
|
|
<span class="font-bold {% if analysis_source.min_req_met_bool %}text-green-600{% else %}text-red-600{% endif %}">
|
|
{% if analysis_source.min_req_met_bool %}<i data-lucide="check-circle" class="inline w-4 h-4"></i> {% trans "Yes" %}{% else %}<i data-lucide="x-circle" class="inline w-4 h-4"></i> {% trans "No" %}{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.years_of_experience is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="clock" class="w-4 h-4 text-temple-red"></i>{% trans "Total Experience:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.years_of_experience|floatformat:1 }} {% trans "years" %}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.most_recent_job_title %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="badge" class="w-4 h-4 text-temple-red"></i>{% trans "Most Recent Title:" %}</span>
|
|
<span class="font-bold text-left max-w-[50%]">{{ analysis_source.most_recent_job_title }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.seniority_level_match is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="user-tie" class="w-4 h-4 text-temple-red"></i>{% trans "Seniority Match:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.seniority_level_match|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.soft_skills_score is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="handshake" class="w-4 h-4 text-temple-red"></i>{% trans "Soft Skills Score:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.soft_skills_score|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.employment_stability_score is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="anchor" class="w-4 h-4 text-temple-red"></i>{% trans "Stability Score:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.employment_stability_score|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.experience_industry_match is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="factory" class="w-4 h-4 text-temple-red"></i>{% trans "Industry Match:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.experience_industry_match|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if analysis_source.transferable_skills_narrative %}
|
|
<div class="mt-4 pt-4 border-t border-gray-200 text-sm text-gray-500 text-right">
|
|
<i data-lucide="puzzle" class="inline w-4 h-4 mr-1"></i> {% trans "Transferable Skills:" %}
|
|
{{ analysis_source.transferable_skills_narrative }}
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="user-circle" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Summary" %}
|
|
</h2>
|
|
<p class="text-gray-700 leading-relaxed border-r-4 border-temple-dark pr-4">
|
|
{{ data_source.summary|default:"الملخص المهني غير متوفر." }}
|
|
</p>
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<i data-lucide="briefcase" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Experience" %}
|
|
</h2>
|
|
{% for experience in data_source.experience %}
|
|
<div class="mb-6 pb-6 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-800">{{ experience.job_title }}</h3>
|
|
<p class="text-temple-red font-semibold">{{ experience.company }}</p>
|
|
</div>
|
|
<span class="bg-temple-cream text-temple-red px-3 py-1 rounded-full text-sm font-medium border border-gray-200">
|
|
{% if experience.end_date == "Present" %}{% trans "Present" %}{% else %}{{ experience.end_date|default:"حالي" }}{% endif %}
|
|
</span>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3">
|
|
{% if experience.end_date and experience.end_date != "Present" %}{{ experience.end_date }}{% else %}{% trans "Present" %}{% endif %}
|
|
- {% if experience.start_date %}{{ experience.start_date }}{% endif %}
|
|
<i data-lucide="calendar" class="inline w-4 h-4 mx-1"></i>
|
|
{% if experience.location %}<span class="mr-4"><i data-lucide="map-pin" class="inline w-4 h-4 mr-1"></i>{{ experience.location }}</span>{% endif %}
|
|
</p>
|
|
{% if experience.key_achievements %}
|
|
<ul class="space-y-1">
|
|
{% for achievement in experience.key_achievements %}
|
|
<li class="flex items-start gap-2 text-gray-700 text-sm"><i data-lucide="chevron-left" class="w-4 h-4 mt-0.5 text-temple-dark shrink-0"></i>{{ achievement }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<i data-lucide="graduation-cap" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Education" %}
|
|
</h2>
|
|
{% for education in data_source.education %}
|
|
<div class="flex items-start gap-4 mb-6 pb-6 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0 p-2 -m-2 rounded-lg hover:bg-temple-cream transition-colors">
|
|
<div class="bg-red-100 p-3 rounded-full shrink-0">
|
|
<i data-lucide="certificate" class="w-6 h-6 text-temple-red"></i>
|
|
</div>
|
|
<div class="text-right flex-1">
|
|
<h3 class="text-lg font-bold text-gray-800">{{ education.degree }}</h3>
|
|
<p class="text-temple-red font-medium">{{ education.institution }}</p>
|
|
{% if education.year %}
|
|
<p class="text-gray-600 text-sm mt-1"><i data-lucide="calendar" class="inline w-4 h-4 mr-1"></i> {{ education.year }}</p>
|
|
{% endif %}
|
|
{% if education.gpa %}
|
|
<p class="text-gray-600 text-sm"><i data-lucide="award" class="inline w-4 h-4 mr-1"></i> {% trans "GPA" %}: {{ education.gpa }}</p>
|
|
{% endif %}
|
|
{% if education.relevant_courses %}
|
|
<p class="text-gray-600 text-sm mt-1 text-right">{% trans "Courses" %}: {{ education.relevant_courses|join:", " }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="project-diagram" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Projects" %}
|
|
</h2>
|
|
{% for project in data_source.projects %}
|
|
<div class="mb-4 pb-4 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0">
|
|
<h3 class="text-lg font-bold text-gray-800">{{ project.name }}</h3>
|
|
<p class="text-gray-600 text-sm mb-2">{{ project.brief_description }}</p>
|
|
{% if project.technologies_used %}
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for tech in project.technologies_used %}
|
|
<span class="bg-red-100 text-temple-red px-3 py-1 rounded-full text-xs font-medium border border-gray-200">{{ tech }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% if not data_source.projects %}
|
|
<p class="text-gray-500 text-sm">{% trans "No projects detailed in the resume." %}</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if analysis_source.top_3_keywords or analysis_source.cultural_fit_keywords %}
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="tag" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Keywords" %}
|
|
</h2>
|
|
|
|
{% if analysis_source.top_3_keywords %}
|
|
<div class="mb-4">
|
|
<h3 class="font-semibold text-gray-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="key" class="w-4 h-4 text-temple-red"></i>{% trans "Top Keywords (Job Match)" %}
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for keyword in analysis_source.top_3_keywords %}
|
|
<span class="bg-red-100 text-temple-dark px-3 py-1 rounded-full text-sm font-medium border border-gray-200">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.cultural_fit_keywords %}
|
|
<div>
|
|
<h3 class="font-semibold text-gray-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="users" class="w-4 h-4 text-temple-red"></i>{% trans "Cultural Fit Keywords" %}
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for keyword in analysis_source.cultural_fit_keywords %}
|
|
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endwith %}
|
|
|
|
{% else %}
|
|
{% with data_source=application.resume_data_en analysis_source=application.analysis_data_en %}
|
|
<div>
|
|
{% include 'recruitment/partials/ai_overview_breadcromb.html' %}
|
|
<header class="bg-gradient-to-br from-temple-red to-red-800 text-white rounded-xl shadow-2xl p-8 mb-6">
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-6">
|
|
<div>
|
|
<h1 class="text-4xl font-extrabold mb-1">{{ data_source.full_name|default:"Application Name" }}</h1>
|
|
<p class="text-xl text-red-100 mb-4">{{ data_source.current_title|default:"Professional Title" }}</p>
|
|
<div class="flex flex-wrap gap-6 text-sm opacity-80">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="map-pin" class="w-4 h-4"></i>
|
|
<span>{{ data_source.location|default:"Location" }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="id-card" class="w-4 h-4"></i>
|
|
<span title="Contact Information">{{ data_source.contact|default:"Contact Information" }}</span>
|
|
</div>
|
|
{% if data_source.linkedin %}
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ data_source.linkedin }}" target="_blank" class="hover:underline"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
|
|
</div>
|
|
{% endif %}
|
|
{% if data_source.github %}
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ data_source.github }}" target="_blank" class="hover:underline"><i data-lucide="github" class="w-4 h-4"></i></a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="bg-white/20 backdrop-blur-sm rounded-xl p-4 text-center w-32 shrink-0 shadow-inner">
|
|
<div class="text-4xl font-bold mb-1">{{ analysis_source.match_score|default:0 }}%</div>
|
|
<div class="text-sm">{% trans "Match Score" %}</div>
|
|
<div class="text-xs font-semibold mt-1 {% if analysis_source.match_score|default:0 < 50 %}text-red-400{% elif analysis_source.match_score|default:0 < 75 %}text-yellow-400{% else %}text-green-400{% endif %}">
|
|
{{ analysis_source.screening_stage_rating|default:"Assessment" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="user-circle" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Summary" %}
|
|
</h2>
|
|
<p class="text-gray-700 leading-relaxed border-l-4 border-temple-dark pl-4">
|
|
{{ data_source.summary|default:"Professional summary not available." }}
|
|
</p>
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<i data-lucide="briefcase" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Experience" %}
|
|
</h2>
|
|
{% for experience in data_source.experience %}
|
|
<div class="mb-6 pb-6 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-800">{{ experience.job_title }}</h3>
|
|
<p class="text-temple-red font-semibold">{{ experience.company }}</p>
|
|
</div>
|
|
<span class="bg-temple-cream text-temple-red px-3 py-1 rounded-full text-sm font-medium border border-gray-200">
|
|
{% if experience.end_date == "Present" %}{% trans "Present" %}{% else %}{{ experience.end_date|default:"Current" }}{% endif %}
|
|
</span>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3">
|
|
<i data-lucide="calendar" class="inline w-4 h-4 mr-2"></i>
|
|
{% if experience.start_date %}{{ experience.start_date }}{% endif %} -
|
|
{% if experience.end_date and experience.end_date != "Present" %}{{ experience.end_date }}{% else %}{% trans "Present" %}{% endif %}
|
|
{% if experience.location %}<span class="ml-4"><i data-lucide="map-pin" class="inline w-4 h-4 mr-1"></i>{{ experience.location }}</span>{% endif %}
|
|
</p>
|
|
{% if experience.key_achievements %}
|
|
<ul class="space-y-1">
|
|
{% for achievement in experience.key_achievements %}
|
|
<li class="flex items-start gap-2 text-gray-700 text-sm"><i data-lucide="chevron-right" class="w-4 h-4 mt-0.5 text-temple-dark shrink-0"></i>{{ achievement }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<i data-lucide="graduation-cap" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Education" %}
|
|
</h2>
|
|
{% for education in data_source.education %}
|
|
<div class="flex items-start gap-4 mb-6 pb-6 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0 p-2 -m-2 rounded-lg hover:bg-temple-cream transition-colors">
|
|
<div class="bg-red-100 p-3 rounded-full shrink-0">
|
|
<i data-lucide="certificate" class="w-6 h-6 text-temple-red"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-bold text-gray-800">{{ education.degree }}</h3>
|
|
<p class="text-temple-red font-medium">{{ education.institution }}</p>
|
|
{% if education.year %}
|
|
<p class="text-gray-600 text-sm mt-1"><i data-lucide="calendar" class="inline w-4 h-4 mr-1"></i> {{ education.year }}</p>
|
|
{% endif %}
|
|
{% if education.gpa %}
|
|
<p class="text-gray-600 text-sm"><i data-lucide="award" class="inline w-4 h-4 mr-1"></i> {% trans "GPA" %}: {{ education.gpa }}</p>
|
|
{% endif %}
|
|
{% if education.relevant_courses %}
|
|
<p class="text-gray-600 text-sm mt-1">{% trans "Courses" %}: {{ education.relevant_courses|join:", " }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="project-diagram" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Projects" %}
|
|
</h2>
|
|
{% for project in data_source.projects %}
|
|
<div class="mb-4 pb-4 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0">
|
|
<h3 class="text-lg font-bold text-gray-800">{{ project.name }}</h3>
|
|
<p class="text-gray-600 text-sm mb-2">{{ project.brief_description }}</p>
|
|
{% if project.technologies_used %}
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for tech in project.technologies_used %}
|
|
<span class="bg-red-100 text-temple-red px-3 py-1 rounded-full text-xs font-medium border border-gray-200">{{ tech }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% if not data_source.projects %}
|
|
<p class="text-gray-500 text-sm">{% trans "No projects detailed in the resume." %}</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if analysis_source.top_3_keywords or analysis_source.cultural_fit_keywords %}
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="tag" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Keywords" %}
|
|
</h2>
|
|
|
|
{% if analysis_source.top_3_keywords %}
|
|
<div class="mb-4">
|
|
<h3 class="font-semibold text-gray-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="key" class="w-4 h-4 text-temple-red"></i>{% trans "Top Keywords (Job Match)" %}
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for keyword in analysis_source.top_3_keywords %}
|
|
<span class="bg-red-100 text-temple-dark px-3 py-1 rounded-full text-sm font-medium border border-gray-200">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.cultural_fit_keywords %}
|
|
<div>
|
|
<h3 class="font-semibold text-gray-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="users" class="w-4 h-4 text-temple-red"></i>{% trans "Cultural Fit Keywords" %}
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for keyword in analysis_source.cultural_fit_keywords %}
|
|
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="trending-up" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Analysis" %}
|
|
</h2>
|
|
|
|
{% if analysis_source.category %}
|
|
<div class="flex justify-between items-center mb-3 pb-2 border-b border-gray-200">
|
|
<span class="font-medium">{% trans "Target Role Category:" %}</span>
|
|
<span class="font-bold text-temple-red">{{ analysis_source.category }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{% if analysis_source.red_flags %}
|
|
<div class="pt-4 mt-4 border-t border-red-100">
|
|
<h3 class="font-semibold text-red-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="flag" class="w-5 h-5 text-red-500"></i>{% trans "Red Flags" %}
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">{{ analysis_source.red_flags|join:". "|default:"None." }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.strengths %}
|
|
<div class="pt-4 mt-4 border-t border-green-100">
|
|
<h3 class="font-semibold text-green-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="circle-check" class="w-5 h-5"></i>{% trans "Strengths" %}
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">{{ analysis_source.strengths }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.weaknesses %}
|
|
<div class="pt-4 mt-4">
|
|
<h3 class="font-semibold text-red-700 mb-2 flex items-center gap-2">
|
|
<i data-lucide="triangle-alert" class="w-5 h-5 text-red-500"></i>{% trans "Weaknesses" %}
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">{{ analysis_source.weaknesses }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.recommendation %}
|
|
<div class="bg-yellow-50 border-r-4 border-yellow-500 p-4 rounded-r-lg mt-4">
|
|
<h3 class="font-semibold text-yellow-800 text-sm">{% trans "Recommendation" %}</h3>
|
|
<p class="text-yellow-700 text-sm">{{ analysis_source.recommendation }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if analysis_source.criteria_checklist %}
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="list-checks" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Required Criteria Check" %}
|
|
</h2>
|
|
<div class="space-y-3">
|
|
{% for criterion, status in analysis_source.criteria_checklist.items %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-700">{{ criterion }}</span>
|
|
<span class="text-sm font-bold">
|
|
{% if status == 'Met' %}<span class="text-green-600"><i data-lucide="check-circle" class="inline w-4 h-4"></i> {% trans "Met" %}</span>
|
|
{% elif status == 'Not Mentioned' %}<span class="text-yellow-600"><i data-lucide="alert-circle" class="inline w-4 h-4"></i> {% trans "Not Mentioned" %}</span>
|
|
{% else %}<span class="text-red-600"><i data-lucide="x-circle" class="inline w-4 h-4"></i> {{ status }}</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="wrench" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Skills" %}
|
|
</h2>
|
|
{% if data_source.skills %}
|
|
{% for category, skills in data_source.skills.items %}
|
|
<div class="mb-4">
|
|
<h3 class="font-semibold text-gray-700 mb-2">{{ category|cut:"_"|title }}</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for skill in skills %}
|
|
<span class="bg-red-100 text-temple-dark px-3 py-1 rounded-full text-sm font-medium border border-gray-200">{{ skill }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-gray-500 text-sm">{% trans "Skills information not available." %}</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="languages" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Languages" %}
|
|
</h2>
|
|
{% if analysis_source.language_fluency %}
|
|
{% for language in analysis_source.language_fluency %}
|
|
<div class="mb-3">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="font-medium">{{ language }}</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
{% with fluency_check=language|lower %}
|
|
<div class="bg-temple-red h-2 rounded-full progress-bar-animated"
|
|
style="width: {% if 'native' in fluency_check %}100{% elif 'fluent' in fluency_check %}85{% elif 'intermediate' in fluency_check %}50{% elif 'basic' in fluency_check %}25{% else %}10{% endif %}%">
|
|
</div>
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-gray-500 text-sm">{% trans "Language information not available." %}</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-3">
|
|
<i data-lucide="pie-chart" class="w-6 h-6 text-temple-red"></i>
|
|
{% trans "Key Metrics" %}
|
|
</h2>
|
|
<div class="space-y-3">
|
|
{% if analysis_source.min_req_met_bool is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="shield" class="w-4 h-4 text-temple-red"></i>{% trans "Min Requirements Met:" %}</span>
|
|
<span class="font-bold {% if analysis_source.min_req_met_bool %}text-green-600{% else %}text-red-600{% endif %}">
|
|
{% if analysis_source.min_req_met_bool %}<i data-lucide="check-circle" class="inline w-4 h-4"></i> {% trans "Yes" %}{% else %}<i data-lucide="x-circle" class="inline w-4 h-4"></i> {% trans "No" %}{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.years_of_experience is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="clock" class="w-4 h-4 text-temple-red"></i>{% trans "Total Experience:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.years_of_experience|floatformat:1 }} {% trans "years" %}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.most_recent_job_title %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="badge" class="w-4 h-4 text-temple-red"></i>{% trans "Most Recent Title:" %}</span>
|
|
<span class="font-bold text-right max-w-[50%]">{{ analysis_source.most_recent_job_title }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.seniority_level_match is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="user-tie" class="w-4 h-4 text-temple-red"></i>{% trans "Seniority Match:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.seniority_level_match|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.soft_skills_score is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="handshake" class="w-4 h-4 text-temple-red"></i>{% trans "Soft Skills Score:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.soft_skills_score|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.employment_stability_score is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="anchor" class="w-4 h-4 text-temple-red"></i>{% trans "Stability Score:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.employment_stability_score|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if analysis_source.experience_industry_match is not none %}
|
|
<div class="flex justify-between items-center">
|
|
<span class="flex items-center gap-2 text-gray-700"><i data-lucide="factory" class="w-4 h-4 text-temple-red"></i>{% trans "Industry Match:" %}</span>
|
|
<span class="font-bold">{{ analysis_source.experience_industry_match|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if analysis_source.transferable_skills_narrative %}
|
|
<div class="mt-4 pt-4 border-t border-gray-200 text-sm text-gray-500">
|
|
<i data-lucide="puzzle" class="inline w-4 h-4 mr-1"></i> {% trans "Transferable Skills:" %}
|
|
{{ analysis_source.transferable_skills_narrative }}
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endwith %}
|
|
|
|
{% endif %}
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
window.addEventListener('load', () => {
|
|
const progressBars = document.querySelectorAll('.progress-bar-animated');
|
|
progressBars.forEach(bar => {
|
|
const width = bar.style.width;
|
|
bar.style.width = '0%';
|
|
setTimeout(() => {
|
|
bar.style.width = width;
|
|
}, 100);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |