159 lines
3.7 KiB
HTML
159 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Hasil Rekomendasi - IPKMatcher</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: "Helvetica Neue", sans-serif;
|
|
background-color: #f7ecda;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 32px;
|
|
color: #4c2e2e;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.user-info {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.user-info h2 {
|
|
color: #4c2e2e;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.user-info p {
|
|
margin: 5px 0;
|
|
color: #333;
|
|
}
|
|
|
|
.recommendations {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.recommendations h2 {
|
|
color: #4c2e2e;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.job-card {
|
|
background-color: #f8f9fa;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-left: 5px solid #4c2e2e;
|
|
}
|
|
|
|
.job-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #4c2e2e;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.job-desc {
|
|
color: #555;
|
|
margin-bottom: 10px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.job-details {
|
|
font-size: 14px;
|
|
color: #777;
|
|
}
|
|
|
|
.similarity-score {
|
|
background-color: #4c2e2e;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.back-button {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
background-color: #4c2e2e;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 20px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background-color: #3b2222;
|
|
}
|
|
|
|
.no-results {
|
|
text-align: center;
|
|
color: #777;
|
|
font-style: italic;
|
|
padding: 40px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1><strong>IPKMatcher</strong></h1>
|
|
|
|
<div class="user-info">
|
|
<h2>Profil Anda</h2>
|
|
<p><strong>Nama:</strong> {{ user_name }}</p>
|
|
<p><strong>IPK:</strong> {{ user_ipk }}</p>
|
|
<p><strong>Jurusan:</strong> {{ user_jurusan|title }}</p>
|
|
<p><strong>Keterampilan:</strong> {{ user_keterampilan|title }}</p>
|
|
<p><strong>Minat:</strong> {{ user_minat|title }}</p>
|
|
</div>
|
|
|
|
<div class="recommendations">
|
|
<h2>Rekomendasi Pekerjaan</h2>
|
|
|
|
{% if recommendations %}
|
|
{% for job in recommendations %}
|
|
<div class="job-card">
|
|
<div class="job-title">{{ job.job }}</div>
|
|
<div class="job-desc">{{ job.job_desc }}</div>
|
|
<div class="job-details">
|
|
<strong>IPK Minimum:</strong> {{ job.min_ipk }} |
|
|
<strong>Jurusan:</strong> {{ job.jurusan|title }} |
|
|
<strong>Keterampilan:</strong> {{ job.keterampilan|join(', ')|title }} |
|
|
<strong>Minat:</strong> {{ job.minat|title }}
|
|
</div>
|
|
<div class="similarity-score">
|
|
Kesesuaian: {{ "%.1f"|format(job.similarity_score * 100) }}%
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="no-results">
|
|
<p>Maaf, tidak ada pekerjaan yang sesuai dengan profil Anda.</p>
|
|
<p>Cobalah meningkatkan IPK atau mengembangkan keterampilan lain.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="{{ url_for('index') }}" class="back-button">Kembali ke Beranda</a>
|
|
</div>
|
|
</body>
|
|
</html> |