210 lines
12 KiB
HTML
210 lines
12 KiB
HTML
{% load i18n %}
|
|
<div class="max-w-7xl mx-auto bg-white rounded-3xl overflow-hidden shadow-2xl">
|
|
<!-- Header -->
|
|
<div class="bg-gradient-to-br from-temple-red to-[#004a53] text-white p-10 relative overflow-hidden">
|
|
<div class="relative z-10">
|
|
<h1 class="text-5xl font-bold mb-2.5">
|
|
{% if application.name %}{{ application.name }}{% else %}{% trans "Candidate" %}{% endif %}
|
|
</h1>
|
|
<div class="text-xl opacity-90 mb-5">{% trans "Resume Analysis" %}</div>
|
|
<div class="flex flex-wrap gap-5 text-base">
|
|
{% if application.email %}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-lg">📱</span>
|
|
<span>{{ application.email }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if application.phone %}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-lg">✉️</span>
|
|
<span>{{ application.phone }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if application.location %}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-lg">📍</span>
|
|
<span>{{ application.location }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-[1fr_350px] gap-8 p-10">
|
|
|
|
<!-- Left Column -->
|
|
<div class="flex flex-col gap-8">
|
|
<!-- Professional Summary -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
|
|
<h2 class="text-xl font-bold text-temple-red mb-5 pb-2.5 border-b-2 border-temple-red flex items-center gap-2.5">
|
|
<span>📋</span> {% trans "Professional Summary" %}
|
|
</h2>
|
|
<p class="text-gray-600 leading-8">
|
|
{% if application.ai_analysis_data %}
|
|
{{ application.ai_analysis_data.parsed_summary }}
|
|
{% elif application.parsed_summary %}
|
|
{{ application.parsed_summary }}
|
|
{% else %}
|
|
<span class="text-gray-400 italic">{% trans "No summary available" %}</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Work Experience -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
|
|
<h2 class="text-xl font-bold text-temple-red mb-5 pb-2.5 border-b-2 border-temple-red flex items-center gap-2.5">
|
|
<span>💼</span> {% trans "Work Experience" %}
|
|
</h2>
|
|
|
|
{% if application.ai_analysis_data.work_experience %}
|
|
{% for exp in application.ai_analysis_data.work_experience %}
|
|
<div class="mb-6 pb-5 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0">
|
|
<div class="flex justify-between items-start mb-2.5">
|
|
<div>
|
|
<div class="font-bold text-gray-900 text-lg">{{ exp.title }}</div>
|
|
<div class="text-gray-600 font-medium">{{ exp.company }}</div>
|
|
</div>
|
|
<div class="text-gray-500 text-sm whitespace-nowrap">{{ exp.period }}</div>
|
|
</div>
|
|
<ul class="list-disc list-inside pl-5 text-gray-600 space-y-1.5">
|
|
{% for responsibility in exp.responsibilities %}
|
|
<li>{{ responsibility }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-gray-400 italic">{% trans "No work experience data available" %}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Education -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
|
|
<h2 class="text-xl font-bold text-temple-red mb-5 pb-2.5 border-b-2 border-temple-red flex items-center gap-2.5">
|
|
<span>🎓</span> {% trans "Education" %}
|
|
</h2>
|
|
|
|
{% if application.ai_analysis_data.education %}
|
|
{% for edu in application.ai_analysis_data.education %}
|
|
<div class="mb-4 pb-4 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0">
|
|
<div class="font-bold text-gray-900">{{ edu.degree }}</div>
|
|
<div class="text-gray-600">{{ edu.institution }}</div>
|
|
<div class="text-gray-500 text-sm mt-1">{{ edu.year }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-gray-400 italic">{% trans "No education data available" %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="flex flex-col gap-6">
|
|
<!-- Match Score -->
|
|
{% if application.ai_analysis_data %}
|
|
<div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white text-center p-8 rounded-2xl shadow-lg">
|
|
<div class="text-5xl font-bold mb-2.5">{{ application.ai_analysis_data.match_score }}%</div>
|
|
<div class="text-lg opacity-90">{% trans "Match Score" %}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Assessment -->
|
|
{% if application.ai_analysis_data %}
|
|
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
|
|
<h2 class="text-xl font-bold text-temple-red mb-5 pb-2.5 border-b-2 border-temple-red flex items-center gap-2.5">
|
|
<span>🔍</span> {% trans "Assessment" %}
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
|
|
<div class="bg-emerald-50 border border-emerald-500 p-4 rounded-xl">
|
|
<div class="font-bold text-emerald-700 mb-2 text-sm flex items-center gap-2">
|
|
<span>✅</span> {% trans "Strengths" %}
|
|
</div>
|
|
<div class="text-sm text-gray-700">{{ application.ai_analysis_data.strengths }}</div>
|
|
</div>
|
|
<div class="bg-red-50 border border-red-500 p-4 rounded-xl">
|
|
<div class="font-bold text-red-700 mb-2 text-sm flex items-center gap-2">
|
|
<span>❌</span> {% trans "Weaknesses" %}
|
|
</div>
|
|
<div class="text-sm text-gray-700">{{ application.ai_analysis_data.weaknesses }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-temple-red/5 border-l-4 border-l-temple-red p-4 rounded-xl">
|
|
<div class="font-bold text-temple-red mb-2 flex items-center gap-2">
|
|
<span>💡</span> {% trans "Recommendation" %}
|
|
</div>
|
|
<div class="text-sm text-gray-700">{{ application.ai_analysis_data.recommendation }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Top Keywords -->
|
|
{% if application.ai_analysis_data %}
|
|
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
|
|
<h2 class="text-xl font-bold text-temple-red mb-5 pb-2.5 border-b-2 border-temple-red flex items-center gap-2.5">
|
|
<span>💡</span> {% trans "Top Keywords" %}
|
|
</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for keyword in application.ai_analysis_data.top_3_keywords %}
|
|
<span class="bg-temple-red/10 text-temple-red px-3 py-1.5 rounded-full text-sm font-medium border border-temple-red/20">
|
|
{{ keyword }}
|
|
</span>
|
|
{% empty %}
|
|
<span class="text-gray-400 italic text-sm">{% trans "No keywords available" %}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Skills -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
|
|
<h2 class="text-xl font-bold text-temple-red mb-5 pb-2.5 border-b-2 border-temple-red flex items-center gap-2.5">
|
|
<span>🛠️</span> {% trans "Skills" %}
|
|
</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% if application.ai_analysis_data.skills %}
|
|
{% for skill in application.ai_analysis_data.skills %}
|
|
<span class="bg-gradient-to-r from-temple-red to-[#7a1a29] text-white px-3 py-1.5 rounded-full text-sm font-medium shadow-sm">
|
|
{{ skill }}
|
|
</span>
|
|
{% endfor %}
|
|
{% else %}
|
|
<span class="text-gray-400 italic text-sm">{% trans "No skills data available" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Professional Details -->
|
|
{% if application.ai_analysis_data %}
|
|
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
|
|
<h2 class="text-xl font-bold text-temple-red mb-5 pb-2.5 border-b-2 border-temple-red flex items-center gap-2.5">
|
|
<span>👤</span> {% trans "Professional Details" %}
|
|
</h2>
|
|
|
|
<div class="flex justify-between items-center mb-3">
|
|
<span class="text-gray-600 text-sm">{% trans "Years of Experience:" %}</span>
|
|
<strong class="text-gray-900">{{ application.ai_analysis_data.years_of_experience }}</strong>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-3">
|
|
<span class="text-gray-600 text-sm">{% trans "Recent Job Title:" %}</span>
|
|
<strong class="text-gray-900 text-sm text-right">{{ application.ai_analysis_data.most_recent_job_title }}</strong>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-3">
|
|
<span class="text-gray-600 text-sm">{% trans "Industry Match:" %}</span>
|
|
<span class="px-2.5 py-0.5 rounded-full text-xs font-bold {% if application.ai_analysis_data.experience_industry_match >= 70 %}bg-emerald-500 text-white{% elif application.ai_analysis_data.experience_industry_match >= 40 %}bg-amber-500 text-white{% else %}bg-red-500 text-white{% endif %}">
|
|
{{ application.ai_analysis_data.experience_industry_match }}%
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 text-sm">{% trans "Soft Skills Score:" %}</span>
|
|
<strong class="text-gray-900">{{ application.ai_analysis_data.soft_skills_score }}%</strong>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|