new update
This commit is contained in:
parent
409b46e7fd
commit
d1a1176ea8
@ -721,6 +721,8 @@ def kaauh_career(request):
|
||||
|
||||
selected_job_type = request.GET.get("employment_type", "")
|
||||
|
||||
|
||||
|
||||
job_type_keys = (
|
||||
active_jobs.order_by("job_type")
|
||||
.distinct("job_type")
|
||||
@ -739,6 +741,10 @@ def kaauh_career(request):
|
||||
if selected_workplace_type and selected_workplace_type in workplace_type_keys:
|
||||
active_jobs = active_jobs.filter(workplace_type=selected_workplace_type)
|
||||
|
||||
search_query=request.GET.get("q","")
|
||||
if search_query:
|
||||
active_jobs=active_jobs.filter(title__icontains=search_query)
|
||||
|
||||
JOBS_PER_PAGE = 10
|
||||
paginator = Paginator(active_jobs, JOBS_PER_PAGE)
|
||||
page_number = request.GET.get("page", 1)
|
||||
@ -763,6 +769,7 @@ def kaauh_career(request):
|
||||
"department_type_keys": department_type_keys,
|
||||
"total_open_roles": total_open_roles,
|
||||
"page_obj": page_obj,
|
||||
"q":search_query
|
||||
},
|
||||
)
|
||||
|
||||
@ -1346,7 +1353,7 @@ def application_submit_form(request, slug):
|
||||
return render(
|
||||
request,
|
||||
"applicant/application_submit_form.html",
|
||||
{"template_slug": job.form_template.slug,"job_slug": job.slug, "job_id": job.internal_job_id},
|
||||
{"template_slug": job.form_template.slug,"job_slug": job.slug, "job_id": job.internal_job_id,"job":job},
|
||||
)
|
||||
|
||||
|
||||
@ -3047,6 +3054,7 @@ def portal_login(request):
|
||||
@login_required
|
||||
@candidate_user_required
|
||||
def applicant_portal_dashboard(request):
|
||||
|
||||
"""applicant portal dashboard"""
|
||||
if not request.user.is_authenticated:
|
||||
return redirect("account_login")
|
||||
|
||||
@ -1,422 +0,0 @@
|
||||
{% extends 'applicant/partials/candidate_facing_base.html'%}
|
||||
{% load static i18n %}
|
||||
|
||||
|
||||
{% block title %}{% trans "My Dashboard" %} - {{ block.super }}{% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* THEME VARIABLES (Refined for Premium Look) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-accent: #008c9c; /* A slightly brighter, more vibrant teal for key links */
|
||||
--kaauh-teal-light: #e6f7f8;
|
||||
--kaauh-bg-subtle: #f9fbfb; /* Lighter, cleaner background */
|
||||
--kaauh-border: #e0e5eb; /* Very subtle border color */
|
||||
--kaauh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); /* Lightest shadow */
|
||||
--kaauh-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08); /* Modern, lifted shadow */
|
||||
--gray-text: #5e6c84; /* Deeper, more readable gray */
|
||||
--success-subtle: #d4edda;
|
||||
--danger-subtle: #f8d7da;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--kaauh-bg-subtle);
|
||||
}
|
||||
|
||||
.text-primary-theme { color: var(--kaauh-teal-accent) !important; }
|
||||
.text-gray-subtle { color: var(--gray-text) !important; }
|
||||
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 1. PRIMARY BUTTONS & ACTIONS */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 99, 110, 0.4);
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(0, 99, 110, 0.5);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
border-color: var(--kaauh-border);
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 2. CARDS & CONTAINERS (Increased Padding & Smoother Shadow) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.kaauh-card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 12px; /* Smoother corner radius */
|
||||
box-shadow: var(--kaauh-shadow-sm);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
.kaauh-card:hover {
|
||||
box-shadow: var(--kaauh-shadow-lg); /* Subtle lift on hover */
|
||||
}
|
||||
|
||||
.profile-data-list li {
|
||||
padding: 1rem 0; /* More vertical space */
|
||||
border-bottom: 1px dashed var(--kaauh-border);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.profile-data-list li strong {
|
||||
font-weight: 700;
|
||||
color: var(--kaauh-teal-dark);
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 3. TABS (Minimalist & Clean) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid var(--kaauh-border); /* Thinner border */
|
||||
}
|
||||
.nav-tabs .nav-link {
|
||||
color: var(--gray-text); /* Use subdued text color for inactive tabs */
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent; /* Thinner accent line */
|
||||
padding: 1rem 1.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-tabs .nav-link:hover {
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-light);
|
||||
}
|
||||
.nav-tabs .nav-link.active {
|
||||
color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav-tabs .nav-link i {
|
||||
color: var(--kaauh-teal-accent) !important;
|
||||
}
|
||||
.nav-scroll {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nav-scroll .nav-tabs { flex-wrap: nowrap; border-bottom: none; }
|
||||
.nav-scroll .nav-tabs .nav-item { flex-shrink: 0; }
|
||||
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 4. APPLICATION TABLE (Refined Aesthetics) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.application-table thead th {
|
||||
background-color: var(--kaauh-teal-light); /* Light, subtle header */
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
.application-table tbody tr {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.application-table tbody tr:hover {
|
||||
background-color: var(--kaauh-teal-light);
|
||||
}
|
||||
.badge-stage {
|
||||
font-weight: 600;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 50rem;
|
||||
}
|
||||
.bg-success { background-color: #38a169 !important; }
|
||||
.bg-warning { background-color: #f6ad55 !important; }
|
||||
|
||||
/* Responsive Table for Mobile (High contrast labels) */
|
||||
@media (max-width: 767.98px) {
|
||||
.application-table thead { display: none; }
|
||||
.application-table tr {
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--kaauh-shadow-sm);
|
||||
}
|
||||
.application-table td {
|
||||
text-align: right !important;
|
||||
padding: 0.75rem 1rem;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.application-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
width: 45%;
|
||||
font-weight: 700;
|
||||
color: var(--gray-text); /* Use muted gray for labels */
|
||||
}
|
||||
}
|
||||
|
||||
/* Document Management List */
|
||||
.list-group-item {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.list-group-item:hover {
|
||||
background-color: var(--kaauh-teal-light);
|
||||
border-color: var(--kaauh-teal-accent);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-4 py-md-5">
|
||||
|
||||
{# Header: Larger, more dynamic on large screens. Stacks cleanly on mobile. #}
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5">
|
||||
<h1 class="display-6 display-md-5 fw-extrabold mb-3 mb-md-0" style="color: var(--kaauh-teal-dark);">
|
||||
{% trans "Your Candidate Dashboard" %}
|
||||
</h1>
|
||||
<a href="#profile-details" data-bs-toggle="tab" class="btn btn-main-action btn-sm btn-md-lg px-4 py-2 rounded-pill shadow-sm shadow-md-lg">
|
||||
<i class="fas fa-edit me-2"></i> {% trans "Update Profile" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Candidate Quick Overview Card: Use a softer background color #}
|
||||
<div class="card kaauh-card mb-5 p-4 bg-white">
|
||||
<div class="d-flex align-items-center flex-column flex-sm-row text-center text-sm-start">
|
||||
<img src="{% if candidate.profile_picture %}{{ candidate.profile_picture.url }}{% else %}{% static 'image/default_avatar.png' %}{% endif %}"
|
||||
alt="{% trans 'Profile Picture' %}"
|
||||
class="rounded-circle me-sm-4 mb-3 mb-sm-0 shadow-lg"
|
||||
style="width: 80px; height: 80px; object-fit: cover; border: 4px solid var(--kaauh-teal-accent);">
|
||||
<div>
|
||||
<h3 class="card-title mb-1 fw-bold text-dark">{{ candidate.name|default:"Candidate Name" }}</h3>
|
||||
<p class="text-gray-subtle mb-0">{{ candidate.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ================================================= #}
|
||||
{# MAIN TABBED INTERFACE #}
|
||||
{# ================================================= #}
|
||||
<div class="card kaauh-card p-0 bg-white">
|
||||
|
||||
{# Tab Navigation: Used nav-scroll for responsiveness #}
|
||||
<div class="nav-scroll px-4 pt-3">
|
||||
<ul class="nav nav-tabs" id="candidateTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-details" type="button" role="tab" aria-controls="profile-details" aria-selected="true">
|
||||
<i class="fas fa-user-circle me-2"></i> {% trans "Profile Details" %}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="applications-tab" data-bs-toggle="tab" data-bs-target="#applications-history" type="button" role="tab" aria-controls="applications-history" aria-selected="false">
|
||||
<i class="fas fa-list-alt me-2"></i> {% trans "My Applications" %}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#document-management" type="button" role="tab" aria-controls="document-management" aria-selected="false">
|
||||
<i class="fas fa-file-upload me-2"></i> {% trans "Documents" %}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#account-settings" type="button" role="tab" aria-controls="account-settings" aria-selected="false">
|
||||
<i class="fas fa-cogs me-2"></i> {% trans "Settings" %}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{# Tab Content #}
|
||||
<div class="tab-content p-4 p-md-5" id="candidateTabsContent">
|
||||
|
||||
<div class="tab-pane fade show active" id="profile-details" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Personal Information" %}</h4>
|
||||
<ul class="list-unstyled profile-data-list p-0">
|
||||
<li class="d-flex justify-content-between align-items-center">
|
||||
<div><i class="fas fa-phone-alt me-2 text-primary-theme"></i> <strong>{% trans "Phone" %}</strong></div>
|
||||
<span class="text-end">{{ candidate.phone|default:"N/A" }}</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between align-items-center">
|
||||
<div><i class="fas fa-globe me-2 text-primary-theme"></i> <strong>{% trans "Nationality" %}</strong></div>
|
||||
<span class="text-end">{{ candidate.get_nationality_display|default:"N/A" }}</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between align-items-center">
|
||||
<div><i class="fas fa-calendar-alt me-2 text-primary-theme"></i> <strong>{% trans "Date of Birth" %}</strong></div>
|
||||
<span class="text-end">{{ candidate.date_of_birth|date:"M d, Y"|default:"N/A" }}</span>
|
||||
</li>
|
||||
<li class="small pt-3 text-muted border-bottom-0">{% trans "Use the 'Update Profile' button above to edit these details." %}</li>
|
||||
</ul>
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Quick Actions" %}</h4>
|
||||
<div class="row g-3 g-md-4">
|
||||
<div class="col-6 col-sm-4 col-md-4">
|
||||
<a href="#applications-history" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
|
||||
<span class="action-tile-icon mb-2"><i class="fas fa-list-check"></i></span>
|
||||
<span class="fw-bold">{% trans "Track Jobs" %}</span>
|
||||
<span class="small text-muted d-none d-sm-block">{% trans "View stages" %}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-4">
|
||||
<a href="#document-management" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
|
||||
<span class="action-tile-icon mb-2"><i class="fas fa-cloud-upload-alt"></i></span>
|
||||
<span class="fw-bold">{% trans "Manage Documents" %}</span>
|
||||
<span class="small text-muted d-none d-sm-block">{% trans "Upload/View files" %}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4 col-md-4">
|
||||
<a href="{% url 'kaauh_career' %}" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
|
||||
<span class="action-tile-icon mb-2"><i class="fas fa-search"></i></span>
|
||||
<span class="fw-bold">{% trans "Find New Careers" %}</span>
|
||||
<span class="small text-muted d-none d-sm-block">{% trans "Explore open roles" %}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="applications-history" role="tabpanel" aria-labelledby="applications-tab">
|
||||
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Application Tracking" %}</h4>
|
||||
|
||||
{% if applications %}
|
||||
<div class="kaauh-card shadow-lg p-0">
|
||||
<table class="table table-borderless align-middle mb-0 application-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="min-width: 250px;">{% trans "Job Title" %}</th>
|
||||
<th scope="col">{% trans "Applied On" %}</th>
|
||||
<th scope="col">{% trans "Current Stage" %}</th>
|
||||
<th scope="col">{% trans "Status" %}</th>
|
||||
<th scope="col" class="text-end" style="min-width: 140px;">{% trans "Action" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for application in applications %}
|
||||
<tr>
|
||||
<td class="fw-medium" data-label="{% trans 'Job Title' %}">
|
||||
<a href="{% url 'job_detail' application.job.slug %}" class="text-decoration-none text-primary-theme">
|
||||
{{ application.job.title }}
|
||||
</a>
|
||||
</td>
|
||||
<td data-label="{% trans 'Applied On' %}" class="text-gray-subtle">{{ application.applied_date|date:"d M Y" }}</td>
|
||||
<td data-label="{% trans 'Current Stage' %}">
|
||||
<span class="badge badge-stage bg-info text-white">
|
||||
{{ application.stage }}
|
||||
</span>
|
||||
</td>
|
||||
<td data-label="{% trans 'Status' %}">
|
||||
{% if application.is_active %}
|
||||
<span class="badge badge-stage bg-success">{% trans "Active" %}</span>
|
||||
{% else %}
|
||||
<span class="badge badge-stage bg-warning text-dark">{% trans "Closed" %}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end" data-label="{% trans 'Action' %}">
|
||||
<a href="#" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
|
||||
<i class="fas fa-eye me-1"></i> {% trans "Details" %}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="alert alert-info text-center p-5 rounded-3" style="border: 1px dashed var(--kaauh-border); background-color: var(--kaauh-teal-light);">
|
||||
<i class="fas fa-info-circle fa-2x mb-3 text-primary-theme"></i>
|
||||
<h5 class="mb-3 fw-bold text-primary-theme">{% trans "You haven't submitted any applications yet." %}</h5>
|
||||
<a href="{% url 'kaauh_career' %}" class="ms-3 btn btn-main-action mt-2 rounded-pill px-4">
|
||||
{% trans "View Available Jobs" %} <i class="fas fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="document-management" role="tabpanel" aria-labelledby="documents-tab">
|
||||
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "My Uploaded Documents" %}</h4>
|
||||
|
||||
<p class="text-gray-subtle">{% trans "You can upload and manage your resume, certificates, and professional documents here. These documents will be attached to your applications." %}</p>
|
||||
|
||||
<a href="#" class="btn btn-main-action rounded-pill px-4 me-3 d-block d-sm-inline-block w-100 w-sm-auto mb-4">
|
||||
<i class="fas fa-cloud-upload-alt me-2"></i> {% trans "Upload New Document" %}
|
||||
</a>
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
{# Example Document List (Refined structure) #}
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center bg-white p-3">
|
||||
<div class="mb-2 mb-sm-0 fw-medium">
|
||||
<i class="fas fa-file-pdf me-2 text-primary-theme"></i> **{% trans "Resume" %}** <span class="text-muted small">(CV\_John\_Doe\_2024.pdf)</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="text-muted small me-3">{% trans "Uploaded: 10 Jan 2024" %}</span>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
|
||||
<a href="#" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash-alt"></i></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center bg-white p-3">
|
||||
<div class="mb-2 mb-sm-0 fw-medium">
|
||||
<i class="fas fa-file-alt me-2 text-primary-theme"></i> **{% trans "Medical Certificate" %}** <span class="text-muted small">(Cert\_KSA\_MED.jpg)</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="text-muted small me-3">{% trans "Uploaded: 22 Feb 2023" %}</span>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
|
||||
<a href="#" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash-alt"></i></a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="account-settings" role="tabpanel" aria-labelledby="settings-tab">
|
||||
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Security & Preferences" %}</h4>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card kaauh-card p-4 h-100 bg-white">
|
||||
<h5 class="fw-bold"><i class="fas fa-key me-2 text-primary-theme"></i> {% trans "Password Security" %}</h5>
|
||||
<p class="text-muted small">{% trans "Update your password regularly to keep your account secure." %}</p>
|
||||
<a href="#" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium">
|
||||
{% trans "Change Password" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card kaauh-card p-4 h-100 bg-white">
|
||||
<h5 class="fw-bold"><i class="fas fa-envelope me-2 text-primary-theme"></i> {% trans "Email Preferences" %}</h5>
|
||||
<p class="text-muted small">{% trans "Manage subscriptions and job alert settings." %}</p>
|
||||
<a href="#" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium">
|
||||
{% trans "Manage Alerts" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert mt-5 py-3" style="background-color: var(--danger-subtle); color: #842029; border: 1px solid #f5c2c7; border-radius: 8px;">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i> {% trans "To delete your profile, please contact HR support." %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{# ================================================= #}
|
||||
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,541 +1,149 @@
|
||||
{% extends 'applicant/partials/candidate_facing_base.html'%}
|
||||
|
||||
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
||||
{% load static i18n %}
|
||||
{% block title %}{% trans "Career Application Form" %} | KAAUH{% endblock %}
|
||||
{% block content %}
|
||||
<style>
|
||||
/* KAAT-S Theme Variables */
|
||||
<style>
|
||||
:root {
|
||||
--kaauh-teal: #00636e; /* Main Primary Color */
|
||||
--kaauh-teal-dark: #004a53; /* Dark Primary Color */
|
||||
|
||||
/* Mapping wizard defaults to theme colors */
|
||||
--primary: var(--kaauh-teal);
|
||||
--primary-light: #007c89; /* Slightly lighter shade for subtle hover/border */
|
||||
--secondary: var(--kaauh-teal-dark);
|
||||
--success: #198754; /* Keeping a standard success green for Submit */
|
||||
--error: #dc3545; /* Standard danger red */
|
||||
|
||||
--light: #f8f9fa;
|
||||
--dark: #212529;
|
||||
--gray: #6c757d;
|
||||
--light-gray: #e9ecef;
|
||||
--border: #dee2e6;
|
||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--radius: 16px; /* Increased radius for a softer look */
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Remove centering/flex properties to allow for normal document flow and scrolling */
|
||||
padding-top: 56px; /* Space for the sticky navbar */
|
||||
|
||||
/* Dark gradient background to match the theme */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--kaauh-teal-dark) 0%,
|
||||
#1e3a47 100%
|
||||
);
|
||||
background-image: url("{% static 'image/vision.svg' %}");
|
||||
@media (max-width: 768px) {
|
||||
background-image: none;
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
background-position: 60px;
|
||||
background-size: 320px auto;
|
||||
min-height: 100vh;
|
||||
padding: 0; /* Remove padding from body */
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Wrapper to center the wizard content below the navbar */
|
||||
.page-content-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px; /* Re-apply padding here for the content area */
|
||||
min-height: calc(
|
||||
100vh - 56px
|
||||
); /* Adjust height to account for navbar */
|
||||
}
|
||||
|
||||
.wizard-container {
|
||||
width: 100%;
|
||||
max-width: 900px; /* Increased max-width slightly for content */
|
||||
background: white;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Allow height to be determined by content, constrained by max-height */
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-container {
|
||||
height: 8px; /* Slightly thicker bar */
|
||||
background: var(--light-gray);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--primary); /* Teal color */
|
||||
transition: width 0.4s ease;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.wizard-header {
|
||||
padding: 25px 30px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--secondary); /* Dark teal for logo */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.wizard-content {
|
||||
flex: 1;
|
||||
padding: 0 30px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stage-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding-right: 15px; /* Space for scrollbar */
|
||||
}
|
||||
|
||||
.stage-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 25px;
|
||||
color: var(--dark);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.field-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.required-indicator {
|
||||
color: var(--error);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary); /* Teal focus border */
|
||||
box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.2); /* Teal shadow */
|
||||
}
|
||||
|
||||
.form-input.error {
|
||||
border-color: var(--error);
|
||||
box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error-message.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* File Upload Styles */
|
||||
.file-upload-area {
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
background: var(--light);
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-upload-area:hover {
|
||||
border-color: var(--primary); /* Teal hover border */
|
||||
background: rgba(0, 99, 110, 0.05); /* Light teal background */
|
||||
}
|
||||
|
||||
.file-upload-area.error {
|
||||
border-color: var(--error);
|
||||
background: rgba(220, 53, 69, 0.05);
|
||||
}
|
||||
|
||||
.file-upload-icon {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary); /* Teal icon */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-upload-text {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.file-upload-text strong {
|
||||
color: var(--primary); /* Teal text */
|
||||
}
|
||||
|
||||
.file-upload-info {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.uploaded-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
color: var(--primary); /* Teal icon */
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.85rem;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.remove-file-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--error);
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.remove-file-btn:hover {
|
||||
background: rgba(220, 53, 69, 0.1);
|
||||
}
|
||||
|
||||
/* Radio/Checkbox Styles */
|
||||
.option-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 12px;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option-item:hover {
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.option-item.selected {
|
||||
border-color: var(--primary); /* Teal border */
|
||||
background: rgba(0, 99, 110, 0.05); /* Light teal background */
|
||||
}
|
||||
|
||||
.option-item.error {
|
||||
border-color: var(--error);
|
||||
background: rgba(220, 53, 69, 0.05);
|
||||
}
|
||||
|
||||
/* Ensures radio/checkbox controls themselves use the primary color */
|
||||
.option-item input[type="radio"]:checked,
|
||||
.option-item input[type="checkbox"]:checked {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
.option-item.error {
|
||||
border-color: var(--error);
|
||||
background: rgba(220, 53, 69, 0.05);
|
||||
}
|
||||
|
||||
/* Ensures radio/checkbox controls themselves use the primary color */
|
||||
.option-item input[type="radio"]:checked,
|
||||
.option-item input[type="checkbox"]:checked {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.option-item input {
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Preview Styles */
|
||||
.preview-container {
|
||||
background: var(--light);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.preview-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.preview-label {
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.preview-value {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.wizard-footer {
|
||||
padding: 0 30px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 14px 28px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
background: var(--light-gray); /* Match theme's light gray */
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: #d8dadc;
|
||||
}
|
||||
|
||||
.btn-next {
|
||||
background: var(--primary); /* Teal color */
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3); /* Teal shadow */
|
||||
}
|
||||
|
||||
.btn-next:hover {
|
||||
background: var(--secondary); /* Darker teal on hover */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: var( --kaauh-teal-dark); /* Green for submit */
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background: var(--kaauh-teal);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.wizard-container {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.stage-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wizard-content {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.wizard-footer {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* === FIX FOR SMALL-SCREEN HAMBURGER MENU === */
|
||||
@media (max-width: 991.98px) {
|
||||
/* Add vertical spacing to the navigation items when the navbar is collapsed */
|
||||
#navbarNav .nav-item {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
#navbarNav .nav-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#navbarNav .nav-link {
|
||||
padding: 8px 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Adjust the total margin of the top navbar container when collapsed */
|
||||
#topNavbar.mb-3 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#bottomNavbar {
|
||||
/* Position the dark navbar 72px from the top of the viewport */
|
||||
top: 72px;
|
||||
/* The z-index is already 1030 in the inline style, which is correct */
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav
|
||||
id="bottomNavbar"
|
||||
class="navbar navbar-expand-lg sticky-top"
|
||||
style="background-color: var(--kaauh-teal); z-index: 1030"
|
||||
>
|
||||
<span class="ms-2 text-white">{% trans "JOB ID" %}: {{job_id}}</span>
|
||||
</nav>
|
||||
|
||||
<div class="page-content-wrapper">
|
||||
<div class="wizard-container">
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
</div>
|
||||
|
||||
<div class="wizard-header">
|
||||
<div class="logo">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
<span id="formTitle"
|
||||
>{% trans "Application Form" %}</span
|
||||
>
|
||||
</div>
|
||||
<div class="progress-text" id="progressText">1 of 1</div>
|
||||
</div>
|
||||
|
||||
<div class="wizard-content">
|
||||
<div class="stage-container" id="stageContainer"></div>
|
||||
|
||||
<div
|
||||
class="preview-container"
|
||||
id="previewContainer"
|
||||
style="display: none"
|
||||
>
|
||||
<h3 class="mb-4">
|
||||
{% trans "Review Your Application" %}
|
||||
</h3>
|
||||
<div id="previewContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wizard-footer mt-2">
|
||||
<button
|
||||
id="backBtn"
|
||||
class="nav-btn btn-back"
|
||||
style="display: none"
|
||||
>
|
||||
<i class="fas fa-arrow-left"></i> {% trans "Back" %}
|
||||
</button>
|
||||
|
||||
<button id="nextBtn" class="nav-btn btn-next">
|
||||
{% trans "Next" %}
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="submitBtn"
|
||||
class="nav-btn btn-submit"
|
||||
style="display: none"
|
||||
>
|
||||
{% trans "Submit Application" %}
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-light: #f0f7f8;
|
||||
--error-red: #e74c3c;
|
||||
--border-color: #e2e8f0;
|
||||
--text-dark: #2d3436;
|
||||
--text-muted: #636e72;
|
||||
--shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
--radius: 12px;
|
||||
}
|
||||
|
||||
/* 2. GLOSSY NAVBAR */
|
||||
#bottomNavbar {
|
||||
top: 0;
|
||||
background: rgba(0, 99, 110, 0.85) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
/* 3. WIZARD CONTAINER */
|
||||
.page-content-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
min-height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
.wizard-container {
|
||||
width: 100%;
|
||||
max-width: 850px;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: slideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
.progress-container { height: 6px; background: #f1f5f9; }
|
||||
.progress-bar { height: 100%; background: var(--kaauh-teal); transition: width 0.6s ease; width: 0%; }
|
||||
|
||||
.wizard-header { padding: 30px 40px 10px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 1.3rem; font-weight: 800; color: var(--secondary); display: flex; align-items: center; gap: 10px; }
|
||||
.progress-text { background: #e6f0f1; color: var(--kaauh-teal); padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }
|
||||
|
||||
/* 4. CONTENT & DYNAMIC FIELDS */
|
||||
.wizard-content { padding: 10px 40px 30px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.stage-container { flex: 1; overflow-y: auto; padding-right: 10px; }
|
||||
.stage-title { font-size: 1.8rem; font-weight: 800; color: var(--text-main); margin-bottom: 25px; }
|
||||
|
||||
/* Field Styles (Used by JS) */
|
||||
.field-container { margin-bottom: 24px; animation: fadeIn 0.3s ease; }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
.field-label { display: block; font-weight: 700; color: var(--text-main); margin-bottom: 8px; font-size: 0.95rem; }
|
||||
.required-indicator { color: var(--error); }
|
||||
|
||||
.form-input {
|
||||
width: 100%; padding: 12px 16px; border: 2px solid var(--border-color);
|
||||
border-radius: 12px; font-size: 1rem; background: var(--bg-light); transition: var(--transition);
|
||||
}
|
||||
.form-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.1); }
|
||||
.form-input.error { border-color: var(--error); background: #fff1f2; }
|
||||
|
||||
.error-message { color: var(--error); font-size: 0.85rem; font-weight: 600; margin-top: 6px; display: none; }
|
||||
.error-message.show { display: block; }
|
||||
|
||||
/* Options & File Upload */
|
||||
.option-item {
|
||||
display: flex; align-items: center; padding: 12px 16px; border: 2px solid var(--border-color);
|
||||
border-radius: 12px; margin-bottom: 10px; cursor: pointer; transition: var(--transition); font-weight: 600;
|
||||
}
|
||||
.option-item:hover { border-color: var(--primary); background: #f0f9fa; }
|
||||
.option-item input { margin-right: 12px; width: 18px; height: 18px; accent-color: var(--primary); }
|
||||
|
||||
.file-upload-area {
|
||||
border: 2px dashed #cbd5e1; border-radius: 16px; padding: 30px;
|
||||
text-align: center; background: var(--bg-light); cursor: pointer; transition: var(--transition);
|
||||
}
|
||||
.file-upload-area:hover { border-color: var(--primary); background: #e6f0f1; }
|
||||
.file-upload-icon { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }
|
||||
|
||||
.uploaded-file {
|
||||
display: flex; align-items: center; justify-content: space-between; background: white;
|
||||
border: 1px solid var(--border-color); padding: 12px; border-radius: 12px; margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 5. FOOTER & BUTTONS */
|
||||
.wizard-footer { padding: 20px 40px 40px; display: flex; justify-content: space-between; border-top: 1px solid #f1f5f9; }
|
||||
.nav-btn { padding: 12px 28px; border-radius: 50px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition); }
|
||||
.btn-back { background: #f1f5f9; color: var(--text-muted); }
|
||||
.btn-next { background: var(--kaauh-teal); color: white; box-shadow: 0 10px 15px -3px rgba(0, 99, 110, 0.3); }
|
||||
.btn-submit { background: var(--kaauh-teal); color: white; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3); }
|
||||
.nav-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
|
||||
|
||||
@media (max-width: 600px) { .wizard-container { border-radius: 0; max-height: 100vh; } }
|
||||
|
||||
#confirmationNavbar {
|
||||
background-color: var(--kaauh-teal);
|
||||
padding: 12px 20px;
|
||||
color:white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="confirmationNavbar" class="shadow-sm">
|
||||
<div class="container-fluid">
|
||||
<span class="text-white fw-bold ">
|
||||
<i class="fas fa-check-circle me-2"></i>{{job.title}} {{job_id}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-content-wrapper">
|
||||
<div class="wizard-container">
|
||||
<div class="progress-container"><div class="progress-bar" id="progressBar"></div></div>
|
||||
<div class="wizard-header">
|
||||
<div class="logo"><i class="fas fa-file-signature text-primary"></i> <span id="formTitle">{% trans "Application" %}</span></div>
|
||||
<div class="progress-text" id="progressText">1 of 1</div>
|
||||
</div>
|
||||
<div class="wizard-content">
|
||||
<div class="stage-container" id="stageContainer"></div>
|
||||
<div class="preview-container" id="previewContainer" style="display: none">
|
||||
<h3 class="stage-title">{% trans "Review Your Application" %}</h3>
|
||||
<div id="previewContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-footer">
|
||||
<button id="backBtn" class="nav-btn btn-back" style="display: none"><i class="fas fa-chevron-left"></i> {% trans "Back" %}</button>
|
||||
<div style="flex:1"></div>
|
||||
<button id="nextBtn" class="nav-btn btn-next">{% trans "Next" %} <i class="fas fa-chevron-right"></i></button>
|
||||
<button id="submitBtn" class="nav-btn btn-submit" style="display: none">{% trans "Submit" %} <i class="fas fa-paper-plane"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Application State
|
||||
|
||||
@ -1,265 +1,345 @@
|
||||
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
||||
{% load static i18n %}
|
||||
|
||||
{# Use a dynamic title for better SEO and user context #}
|
||||
{% block title %}{% trans "Career Opportunities" %} | KAAUH - {{ block.super }}{% endblock %}
|
||||
{% block title %}{% trans "Career Opportunities" %} | KAAUH{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-light: #e6f7f8;
|
||||
--border: #e2e8f0;
|
||||
--gray-text: #64748b;
|
||||
--error-red: #ef4444;
|
||||
}
|
||||
|
||||
<div class="main-content-area">
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 1. LAYOUT & RESPONSIVENESS */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.container {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
|
||||
{# ------------------------------------------------ #}
|
||||
{# 🌟 HERO SECTION (High Visual Impact) #}
|
||||
{# ------------------------------------------------ #}
|
||||
<header class="hero-section text-white py-5 py-lg-6" style=" background-size: cover; background-position: center;">
|
||||
{# Overlay for readability, assuming custom CSS defines .hero-overlay #}
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="container position-relative" style="z-index: 2;">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12 col-xl-10 text-center">
|
||||
{# Use a large, commanding font size #}
|
||||
<h1 class="display-4 fw-bolder mb-4 animate__animated animate__fadeInDown">
|
||||
{% trans "Your Career in Health & Academia Starts Here." %}
|
||||
</h1>
|
||||
<p class="lead mb-5 fs-5 animate__animated animate__fadeInUp">
|
||||
{% trans "Join KAAUH, a national leader in patient care, research, and education. We are building the future of healthcare." %}
|
||||
</p>
|
||||
.job-section-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 2.5rem;
|
||||
padding-block: 3rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
{# Primary Action to scroll to listings/filters #}
|
||||
<a href="#job-list-start" class="btn btn-hero-action btn-lg rounded-pill px-5 me-3 mb-3 mb-lg-0 shadow-lg animate__animated animate__zoomIn">
|
||||
<i class="fas fa-compass me-2"></i> {% trans "Find Your Path" %}
|
||||
</a>
|
||||
{# Secondary Action #}
|
||||
<a href="https://kaauh.edu.sa/about-us" class="btn btn-outline-light rounded-pill px-5 btn-lg animate__animated animate__zoomIn">
|
||||
{% trans "About US" %}
|
||||
</a>
|
||||
</div>
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 2. HERO SECTION */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.hero-section {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
|
||||
url('{% static "image/hospital-bg.jpg" %}') center/cover;
|
||||
color: white;
|
||||
padding-block: clamp(3rem, 10vw, 6rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(1.75rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
font-size: clamp(1rem, 2vw, 1.2rem);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 2rem;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 3. MOBILE FILTER TRIGGER */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.mobile-filter-trigger {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: var(--kaauh-teal);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 700;
|
||||
margin-top: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 4. FILTER SIDEBAR (MOBILE DRAWER) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.filter-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.close-filters { display: none; } /* Hidden on desktop */
|
||||
|
||||
.filter-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 2px solid var(--kaauh-teal-light);
|
||||
}
|
||||
|
||||
.search-group { position: relative; margin-bottom: 1rem; }
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 0.75rem 0.75rem 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid var(--border);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.filter-group { margin-bottom: 1.25rem; }
|
||||
.filter-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--gray-text); text-transform: uppercase; margin-bottom: 0.4rem; }
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 5. STICKY BAR & CHIPS */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.sticky-filter-bar {
|
||||
background: #f8fafc;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.chip-container { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.filter-chip {
|
||||
background: white;
|
||||
color: var(--kaauh-teal);
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 6. JOB CARDS */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.job-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
border-inline-start: 5px solid var(--kaauh-teal);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.job-card:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
|
||||
|
||||
.job-meta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; color: var(--gray-text); font-size: 0.85rem; }
|
||||
.meta-item { display: flex; align-items: center; gap: 0.3rem; }
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 7. RESPONSIVE BREAKPOINT (MOBILE) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
@media (max-width: 992px) {
|
||||
.job-section-grid { grid-template-columns: 1fr; }
|
||||
|
||||
.mobile-filter-trigger { display: flex; }
|
||||
|
||||
.filter-sidebar {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 2000;
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.filter-sidebar.active { display: block; }
|
||||
|
||||
.filter-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 2rem auto;
|
||||
position: relative;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.close-filters {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--gray-text);
|
||||
}
|
||||
|
||||
.sticky-filter-bar { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.heroicon { width: 1.2rem; height: 1.2rem; stroke: currentColor; }
|
||||
</style>
|
||||
|
||||
<div class="main-content-area">
|
||||
<header class="hero-section">
|
||||
<div class="container">
|
||||
<h1 class="hero-title">{% trans "Build Your Future with KAAUH" %}</h1>
|
||||
<p class="hero-lead">{% trans "Join a community of excellence in healthcare and research." %}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<button class="mobile-filter-trigger" onclick="toggleFilters()">
|
||||
<svg class="heroicon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path></svg>
|
||||
{% trans "Filter Jobs" %}
|
||||
</button>
|
||||
|
||||
<div class="job-section-grid">
|
||||
<aside class="filter-sidebar" id="sidebar">
|
||||
<div class="filter-card">
|
||||
<button class="close-filters" onclick="toggleFilters()">×</button>
|
||||
<h4 class="filter-title">{% trans "Refine Search" %}</h4>
|
||||
|
||||
<form method="GET">
|
||||
<div class="search-group">
|
||||
<svg class="heroicon" style="position:absolute; left:0.75rem; top:0.75rem; color:var(--gray-text)" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||
<input type="text" name="q" class="search-input" placeholder="{% trans 'Keywords...' %}" value="{{ request.GET.q|default:'' }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">{% trans "Type" %}</label>
|
||||
<select class="filter-select" name="employment_type">
|
||||
<option value="">{% trans "All" %}</option>
|
||||
{% for key in job_type_keys %}<option value="{{ key }}" {% if key == selected_job_type %}selected{% endif %}>{{ key }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">{% trans "Workplace" %}</label>
|
||||
<select class="filter-select" name="workplace_type">
|
||||
<option value="">{% trans "All" %}</option>
|
||||
{% for key in workplace_type_keys %}<option value="{{ key }}" {% if key == selected_workplace_type %}selected{% endif %}>{{ key }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">{% trans "Department" %}</label>
|
||||
<select class="filter-select" name="department">
|
||||
<option value="">{% trans "All" %}</option>
|
||||
{% for key in department_type_keys %}<option value="{{ key }}" {% if key == selected_department %}selected{% endif %}>{{ key }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-teal" style="width:100%; padding:0.8rem; border-radius:0.5rem; border:none; cursor:pointer; color:white; font-weight:700; background-color:var(--kaauh-teal);">{% trans "Apply" %}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
{# ------------------------------------------------ #}
|
||||
{# 💻 JOB LISTING SECTION #}
|
||||
{# ------------------------------------------------ #}
|
||||
<section class="py-5 job-listing-section" id="job-list-start">
|
||||
<div class="container">
|
||||
|
||||
<div class="row g-5">
|
||||
|
||||
{# 📌 LEFT COLUMN: FILTERS (Smaller on larger screens) #}
|
||||
<div class="col-lg-4">
|
||||
|
||||
{# Mobile Filter Toggle (Used aria-controls for better accessibility) #}
|
||||
<button class="btn btn-outline-dark filter-toggle-button d-lg-none w-100 mb-3" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#filterSidebar" aria-expanded="false" aria-controls="filterSidebar">
|
||||
<i class="fas fa-filter me-2"></i> {% trans "Filter Jobs" %}
|
||||
</button>
|
||||
|
||||
<div class="collapse d-lg-block filter-sidebar-collapse" id="filterSidebar">
|
||||
{# Sticky top ensures filters remain visible while scrolling results #}
|
||||
<div class="card border-0 shadow-sm sticky-top-filters p-4 bg-light-subtle" style="top: 20px;">
|
||||
|
||||
<h4 class="fw-bold mb-4 text-dark border-bottom pb-2">
|
||||
<i class="fas fa-search me-2 text-primary-theme"></i>{% trans "Refine Your Search" %}
|
||||
</h4>
|
||||
<form method="GET" action="{% url 'kaauh_career'%}" class="d-grid gap-3">
|
||||
{# NOTE: Replace select with Django form fields for real functionality #}
|
||||
|
||||
|
||||
|
||||
<select class="form-select form-select-lg" name="employment_type" aria-label="Employment Type filter" >
|
||||
<option value="" {% if not selected_job_type %}selected{% endif %}>{% trans "Employment Type" %}</option>
|
||||
|
||||
{% for key in job_type_keys %}
|
||||
<option value="{{ key }}" {% if key == selected_job_type %}selected{% endif %}>
|
||||
{{key}}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<select class="form-select form-select-lg" name="workplace_type" aria-label="Workplace Type filter" >
|
||||
<option value="" {% if not selected_workplace_type %}selected{% endif %}>{% trans "Workplace Type" %}</option>
|
||||
|
||||
{% for key in workplace_type_keys %}
|
||||
<option value="{{ key }}" {% if key == selected_workplace_type %}selected{% endif %}>
|
||||
{{key}}
|
||||
|
||||
</option>
|
||||
{% endfor %}
|
||||
|
||||
</select>
|
||||
|
||||
<select class="form-select form-select-lg" name="department" aria-label="Department Type filter" >
|
||||
<option value="" {% if not selected_department %}selected{% endif %}>{% trans "Departments" %}</option>
|
||||
|
||||
{% for key in department_type_keys %}
|
||||
<option value="{{ key }}" {% if key == selected_department %}selected{% endif %}>
|
||||
<!-- Hard-coded mapping using IF statements -->
|
||||
{{key}}
|
||||
|
||||
</option>
|
||||
{% endfor %}
|
||||
|
||||
</select>
|
||||
<button type="submit" class="btn btn-main-action btn-lg rounded-pill mt-3 shadow-sm">
|
||||
{% trans "Apply Filters" %}
|
||||
</button>
|
||||
<a href="." class="btn btn-outline-secondary btn-sm">{% trans "Clear Filters" %}</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<div class="sticky-filter-bar">
|
||||
<div style="font-weight: 700;">
|
||||
<span style="color:var(--kaauh-teal)">{{ total_open_roles|default:"0" }}</span> {% trans "Roles Found" %}
|
||||
</div>
|
||||
|
||||
{# 📜 RIGHT COLUMN: JOB LISTINGS (Wider on larger screens) #}
|
||||
<div class="col-lg-8">
|
||||
<div class="chip-container">
|
||||
{% if selected_job_type %}
|
||||
<span class="filter-chip">
|
||||
<strong>{% trans "Type" %}:</strong> {{ selected_job_type }}
|
||||
<a href="?{% for key, value in request.GET.items %}{% if key != 'employment_type' %}{{ key }}={{ value }}&{% endif %}{% endfor %}" title="{% trans 'Remove' %}">
|
||||
<svg class="heroicon" style="width:14px; height:14px; color: var(--kaauh-teal-dark)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{# Sticky Filter Bar (Summary of results and active filters) #}
|
||||
<div class="sticky-filter-bar bg-white p-3 border-bottom mb-4 shadow-sm">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
{% if selected_workplace_type %}
|
||||
<span class="filter-chip">
|
||||
<strong>{% trans "Workplace" %}:</strong> {{ selected_workplace_type }}
|
||||
<a href="?{% for key, value in request.GET.items %}{% if key != 'workplace_type' %}{{ key }}={{ value }}&{% endif %}{% endfor %}" title="{% trans 'Remove' %}">
|
||||
<svg class="heroicon" style="width:14px; height:14px; color: var(--kaauh-teal-dark)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{# Dynamic Count #}
|
||||
<h3 class="fw-bold mb-0 text-dark fs-5">
|
||||
<span class="text-primary-theme">{{ total_open_roles|default:"0" }}</span> {% trans "Open Roles" %}
|
||||
</h3>
|
||||
{% if selected_department %}
|
||||
<span class="filter-chip">
|
||||
<strong>{% trans "Dept" %}:</strong> {{ selected_department }}
|
||||
<a href="?{% for key, value in request.GET.items %}{% if key != 'department' %}{{ key }}={{ value }}&{% endif %}{% endfor %}" title="{% trans 'Remove' %}">
|
||||
<svg class="heroicon" style="width:14px; height:14px; color: var(--kaauh-teal-dark)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{# Active Filter Chips (Use a dedicated class for styling) #}
|
||||
<div class="d-flex flex-wrap gap-2 pt-2 pt-md-0">
|
||||
|
||||
{# --- Active Employment Type Filter Chip --- #}
|
||||
{% if selected_job_type %}
|
||||
<span class="filter-chip badge bg-primary-theme-subtle text-primary-theme fw-normal p-2 active-filter-chip">
|
||||
{% trans "Type" %}:
|
||||
{# Map the key back to its human-readable translation #}
|
||||
<strong class="mx-1">
|
||||
{% if selected_job_type == 'Full-time' %}{% trans "Full-time" %}
|
||||
{% elif selected_job_type == 'Part-time' %}{% trans "Part-time" %}
|
||||
{% elif selected_job_type == 'Contract' %}{% trans "Contract" %}
|
||||
{% elif selected_job_type == 'Internship' %}{% trans "Internship" %}
|
||||
{% elif selected_job_type == 'Faculty' %}{% trans "Faculty" %}
|
||||
{% elif selected_job_type == 'Temporary' %}{% trans "Temporary" %}
|
||||
{% endif %}
|
||||
</strong>
|
||||
{# Link to clear this specific filter: use current URL but remove `employment_type` parameter #}
|
||||
<a href="?{% for key, value in request.GET.items %}{% if key != 'employment_type' %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
|
||||
class="text-primary-theme text-decoration-none ms-2" role="button" aria-label="Remove Employment Type filter">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{# --- Active Workplace Type Filter Chip --- #}
|
||||
{% if selected_workplace_type %}
|
||||
<span class="filter-chip badge bg-primary-theme-subtle text-primary-theme fw-normal p-2 active-filter-chip">
|
||||
{% trans "Workplace" %}:
|
||||
{# Map the key back to its human-readable translation #}
|
||||
<strong class="mx-1">
|
||||
{% if selected_workplace_type == 'On-site' %}{% trans "On-site" %}
|
||||
{% elif selected_workplace_type == 'Remote' %}{% trans "Remote" %}
|
||||
{% elif selected_workplace_type == 'Hybrid' %}{% trans "Hybrid" %}
|
||||
{% endif %}
|
||||
</strong>
|
||||
{# Link to clear this specific filter: use current URL but remove `workplace_type` parameter #}
|
||||
<a href="?{% for key, value in request.GET.items %}{% if key != 'workplace_type' %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
|
||||
class="text-primary-theme text-decoration-none ms-2" role="button" aria-label="Remove Workplace Type filter">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{# --- Active Department Filter Chip --- #}
|
||||
{% if selected_department %}
|
||||
<span class="filter-chip badge bg-primary-theme-subtle text-primary-theme fw-normal p-2 active-filter-chip">
|
||||
{% trans "Department" %}:
|
||||
<strong class="mx-1">{{ selected_department }}</strong>
|
||||
{# Link to clear this specific filter: use current URL but remove `department` parameter #}
|
||||
<a href="?{% for key, value in request.GET.items %}{% if key != 'department' %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
|
||||
class="text-primary-theme text-decoration-none ms-2" role="button" aria-label="Remove Department filter">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Job Cards Grid #}
|
||||
<div class="mt-4 d-grid gap-3">
|
||||
|
||||
{% for job in active_jobs %}
|
||||
{# Optimized Job Listing Card #}
|
||||
<a href="{% url 'job_application_detail' job.slug %}"
|
||||
class="card d-block text-decoration-none text-dark job-listing-card p-4 border-2 shadow-hover transition-all">
|
||||
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
{# Job Title #}
|
||||
<h4 class="h5 fw-bold mb-0 text-primary-theme-hover">
|
||||
{{ job.title }}
|
||||
</h4>
|
||||
|
||||
{# Tag Badge (Prominent) #}
|
||||
<span class="badge rounded-pill bg-kaauh-teal job-tag px-3 py-2 fs-6 d-none d-lg-inline-block">
|
||||
<i class="fas fa-tag me-1"></i>{% trans "Apply Before: " %}{{job.application_deadline}}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
{# Department/Context (Sub-text) #}
|
||||
<p class="text-muted small mb-3">{% trans 'Department: '%}{{ job.department|default:"KAAUH Department" }}</p>
|
||||
|
||||
{# Job Metadata Icons (Horizontal list for quick scan) #}
|
||||
<div class="d-flex flex-wrap gap-4 small text-secondary">
|
||||
|
||||
<span class="d-flex align-items-center fw-medium">
|
||||
<i class="fas fa-map-marker-alt me-2 text-primary-theme fa-fw"></i>
|
||||
{{ job.location_country|default:"Kindom of Saudi Arabia" }} | {{job.location_state|default:"Riyadh Province"}} | {{job.location_city|default:"Riyadh"}}
|
||||
</span>
|
||||
|
||||
<span class="d-flex align-items-center fw-medium">
|
||||
<i class="fas fa-user-md me-2 text-primary-theme fa-fw"></i>
|
||||
{{ job.workplace_type|default:"" }}
|
||||
</span>
|
||||
|
||||
<span class="d-flex align-items-center fw-medium">
|
||||
<i class="fas fa-calendar-alt me-2 text-primary-theme fa-fw"></i>
|
||||
{{ job.job_type|default:"Full-Time" }}
|
||||
</span>
|
||||
|
||||
{% if job.posted_date %}
|
||||
<span class="d-flex align-items-center fw-medium">
|
||||
<i class="fas fa-clock me-2 text-primary-theme fa-fw"></i>
|
||||
{% trans "Posted:" %} {{ job.posted_date|timesince }} {% trans "ago" %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if selected_job_type or selected_workplace_type or selected_department %}
|
||||
<a href="?" style="font-size: 0.8rem; color: var(--error-red); text-decoration: none; align-self: center; margin-left: 0.5rem; font-weight: 600;">
|
||||
{% trans "Clear All" %}
|
||||
</a>
|
||||
{% empty %}
|
||||
<div class="alert text-primary-theme border-0 shadow-sm mt-5" role="alert">
|
||||
<h5 class="alert-heading">{% trans "No Matching Opportunities" %}</h5>
|
||||
<p>{% trans "We currently have no open roles that match your search and filters. Please modify your criteria or check back soon!" %}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# Load More Button #}
|
||||
{% if show_load_more %}
|
||||
<div class="text-center mt-5 mb-3">
|
||||
<button class="btn btn-main-action btn-lg rounded-pill px-5 shadow-lg">
|
||||
{% trans "Load More Jobs" %} <i class="fas fa-redo ms-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{% include "includes/paginator.html" %}
|
||||
</section>
|
||||
|
||||
|
||||
<div class="job-list">
|
||||
{% for job in active_jobs %}
|
||||
<a href="{% url 'job_application_detail' job.slug %}" class="job-card">
|
||||
<div style="display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;">
|
||||
<h4 style="color:var(--kaauh-teal-dark); font-weight:700; margin:0;">{{ job.title }}</h4>
|
||||
<span style="font-size:0.75rem; color:var(--gray-text)">{% trans "Due" %}: {{ job.application_deadline }}</span>
|
||||
</div>
|
||||
<p style="margin:0.4rem 0; font-size:0.9rem;">{{ job.department }}</p>
|
||||
<div class="job-meta-row">
|
||||
<div class="meta-item"><svg class="heroicon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg> {{ job.location_city|default:"Riyadh" }}</div>
|
||||
<div class="meta-item"><svg class="heroicon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg> {{ job.workplace_type }}</div>
|
||||
</div>
|
||||
</a>
|
||||
{% empty %}
|
||||
<div style="padding:4rem; text-align:center; border:1px dashed var(--border); border-radius:1rem;">{% trans "No jobs match your search." %}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleFilters() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
sidebar.classList.toggle('active');
|
||||
document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : 'auto';
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -1,229 +1,294 @@
|
||||
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
||||
{% load static i18n %}
|
||||
|
||||
{% block title %}{% trans "Application" %}-{{ job.title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
/* 1. LAYOUT & GRID */
|
||||
.page-container {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto 5rem;
|
||||
padding-inline: 1.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 350px;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
{# ------------------------------------------------ #}
|
||||
{# 🚀 TOP NAV BAR (Sticky and Themed) #}
|
||||
{# ------------------------------------------------ #}
|
||||
<nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top border-bottom"
|
||||
style="background-color: var(--kaauh-teal); z-index: 1030; height: 50px;">
|
||||
<div class="container-fluid container-lg">
|
||||
<span class="navbar-text text-white fw-bold fs-6">{% trans "Job Overview" %}</span>
|
||||
</div>
|
||||
</nav>
|
||||
@media (max-width: 992px) {
|
||||
.page-container { grid-template-columns: 1fr; }
|
||||
.desktop-sidebar { display: none; }
|
||||
}
|
||||
|
||||
{# ------------------------------------------------ #}
|
||||
{# 🔔 DJANGO MESSAGES (Refined placement and styling) #}
|
||||
{# ------------------------------------------------ #}
|
||||
/* 2. STICKY TOP NAV */
|
||||
.job-nav {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 3. CARDS & SECTIONS */
|
||||
.content-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
{# ------------------------------------------------ #}
|
||||
{# 💻 MAIN CONTENT CONTAINER #}
|
||||
{# ------------------------------------------------ #}
|
||||
<div class="container mt-4 mb-5">
|
||||
<div class="row g-4 main-content-area">
|
||||
.card-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: white;
|
||||
}
|
||||
|
||||
{# 📌 RIGHT COLUMN: Sticky Apply Card (Desktop Only) #}
|
||||
<div class="col-lg-4 order-lg-2 d-none d-lg-block">
|
||||
<div class="card shadow-lg border-0" style="position: sticky; top: 70px;">
|
||||
<div class="card-header bg-white border-bottom p-3">
|
||||
<h5 class="mb-0 fw-bold text-kaauh-teal">
|
||||
<i class="fas fa-file-signature me-2"></i>{% trans "Ready to Apply?" %}
|
||||
</h5>
|
||||
.card-body { padding: 1.5rem; }
|
||||
|
||||
/* 4. METADATA GRID */
|
||||
.meta-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.25rem;
|
||||
background: #f9fafb;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-text);
|
||||
}
|
||||
|
||||
.meta-item svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: var(--kaauh-teal);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 5. PURE CSS ACCORDION */
|
||||
.accordion-item { border-bottom: 1px solid var(--border); }
|
||||
.accordion-toggle { display: none; }
|
||||
|
||||
.accordion-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
color: var(--kaauh-teal-dark);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.accordion-header:hover { background: #f8fafc; }
|
||||
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.accordion-toggle:checked + .accordion-header + .accordion-content {
|
||||
max-height: 2000px; /* Large enough for content */
|
||||
padding: 1rem 1.25rem 2rem;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.accordion-toggle:checked + .accordion-header .accordion-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 6. SIDEBAR & BUTTONS */
|
||||
.sticky-sidebar {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.btn-apply {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--kaauh-teal);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.btn-apply:disabled { background: #9ca3af; cursor: not-allowed; }
|
||||
.btn-apply:not(:disabled):hover { background: var(--kaauh-teal-dark); }
|
||||
|
||||
/* 7. MOBILE FOOTER */
|
||||
.mobile-apply-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@media (min-width: 993px) { .mobile-apply-bar { display: none; } }
|
||||
</style>
|
||||
|
||||
<nav class="job-nav">
|
||||
<div style="max-width: 1200px; margin: 0 auto;">
|
||||
{% trans "Job Overview" %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page-container">
|
||||
<main>
|
||||
<article class="content-card">
|
||||
<header class="card-header">
|
||||
<h1 style="font-size: 1.875rem; font-weight: 800; color: var(--kaauh-teal-dark); margin: 0;">
|
||||
{{ job.title }}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div class="card-body">
|
||||
<h4 style="font-size: 1.1rem; font-weight: 700; color: #6b7280; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem; margin-bottom: 1.5rem;">
|
||||
{% trans "Summary" %}
|
||||
</h4>
|
||||
|
||||
<section class="meta-section">
|
||||
{% if job.salary_range %}
|
||||
<div class="meta-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<strong>{% trans "Salary:" %}</strong> <span style="color: #059669; font-weight: 700;">{{ job.salary_range }}</span>
|
||||
</div>
|
||||
<div class="card-body text-center p-4">
|
||||
<p class="text-muted small mb-3">{% trans "Review the full job details below before submitting your application." %}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if job.form_template %}
|
||||
{% if user.is_authenticated and already_applied %}
|
||||
<button class="btn btn-main-action btn-lg w-100" disabled>
|
||||
<i class="fas fa-paper-plane me-2"></i> {% trans "You already applied for this position" %}
|
||||
</button>
|
||||
{% else %}
|
||||
<a href="{% url 'application_submit_form' job.slug %}" class="btn btn-main-action btn-lg w-100">
|
||||
<i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% comment %} <a href="{% url 'application_submit_form' job.form_template.slug %}" class="btn btn-main-action btn-lg w-100 shadow-sm">
|
||||
<i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
|
||||
</a>
|
||||
{% elif not job.is_expired %}
|
||||
<p class="text-danger fw-bold">{% trans "Application form is unavailable." %}</p>
|
||||
{% endif %} {% endcomment %}
|
||||
<div class="meta-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
||||
<strong>{% trans "Deadline:" %}</strong>
|
||||
{% if job.application_deadline %}
|
||||
{{ job.application_deadline|date:"M d, Y" }}
|
||||
{% if job.is_expired %}<span style="color: #dc2626; font-size: 0.7rem; font-weight: 800;">(EXPIRED)</span>{% endif %}
|
||||
{% else %}{% trans "Ongoing" %}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# 📝 LEFT COLUMN: Job Details #}
|
||||
<div class="col-lg-8 order-lg-1">
|
||||
<article class="card shadow-lg border-0">
|
||||
<div class="meta-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
|
||||
<strong>{% trans "Type:" %}</strong> {{ job.get_job_type_display }}
|
||||
</div>
|
||||
|
||||
{# Job Title Header #}
|
||||
<header class="card-header bg-white border-bottom p-4">
|
||||
<h1 class="h2 mb-0 fw-bolder text-kaauh-teal">{{ job.title }}</h1>
|
||||
</header>
|
||||
<div class="meta-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
|
||||
<strong>{% trans "Location:" %}</strong> {{ job.get_location_display }}
|
||||
</div>
|
||||
|
||||
<div class="card-body p-4">
|
||||
<div class="meta-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
|
||||
<strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }}
|
||||
</div>
|
||||
|
||||
<h4 class="mb-4 fw-bold text-muted border-bottom pb-2">{% trans "Summary" %}</h4>
|
||||
|
||||
{# Job Metadata/Overview Grid #}
|
||||
<section class="row row-cols-1 row-cols-md-2 g-3 mb-5 small text-secondary p-3 rounded bg-light-subtle border">
|
||||
|
||||
{# SALARY #}
|
||||
{% if job.salary_range %}
|
||||
<div class="col">
|
||||
<i class="fas fa-money-bill-wave text-success me-2 fa-fw"></i>
|
||||
<strong>{% trans "Salary:" %}</strong>
|
||||
<span class="fw-bold text-success">{{ job.salary_range }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# DEADLINE #}
|
||||
<div class="col">
|
||||
<i class="fas fa-calendar-alt text-muted me-2 fa-fw"></i>
|
||||
<strong>{% trans "Deadline:" %}</strong>
|
||||
{% if job.application_deadline %}
|
||||
<time datetime="{{ job.application_deadline|date:'Y-m-d' }}">
|
||||
{{ job.application_deadline|date:"M d, Y" }}
|
||||
</time>
|
||||
{% if job.is_expired %}
|
||||
<span class="badge bg-danger ms-2">{% trans "EXPIRED" %}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="text-muted">{% trans "Ongoing" %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# JOB TYPE #}
|
||||
<div class="col">
|
||||
<i class="fas fa-briefcase text-muted me-2 fa-fw"></i>
|
||||
<strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }}
|
||||
</div>
|
||||
|
||||
{# LOCATION #}
|
||||
<div class="col">
|
||||
<i class="fas fa-map-marker-alt text-muted me-2 fa-fw"></i>
|
||||
<strong>{% trans "Location:" %}</strong> {{ job.get_location_display }}
|
||||
</div>
|
||||
|
||||
{# DEPARTMENT #}
|
||||
<div class="col">
|
||||
<i class="fas fa-building text-muted me-2 fa-fw"></i>
|
||||
<strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }}
|
||||
</div>
|
||||
|
||||
{# JOB ID #}
|
||||
<div class="col">
|
||||
<i class="fas fa-hashtag text-muted me-2 fa-fw"></i>
|
||||
<strong>{% trans "JOB ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }}
|
||||
</div>
|
||||
|
||||
{# WORKPLACE TYPE #}
|
||||
<div class="col">
|
||||
<i class="fas fa-laptop-house text-muted me-2 fa-fw"></i>
|
||||
<strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
{# Detailed Accordion Section #}
|
||||
<div class="accordion accordion-flush" id="jobDetailAccordion">
|
||||
|
||||
{% with active_collapse="collapseOne" %}
|
||||
|
||||
{# JOB DESCRIPTION #}
|
||||
{% if job.has_description_content %}
|
||||
<div class="accordion-item border-top border-bottom">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#{{ active_collapse }}" aria-expanded="true"
|
||||
aria-controls="{{ active_collapse }}">
|
||||
<i class="fas fa-info-circle me-3 fa-fw"></i> {% trans "Job Description" %}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="{{ active_collapse }}" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#jobDetailAccordion">
|
||||
<div class="accordion-body text-secondary p-4">
|
||||
<div class="wysiwyg-content">{{ job.description|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# QUALIFICATIONS #}
|
||||
{% if job.has_qualifications_content %}
|
||||
<div class="accordion-item border-bottom">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
<i class="fas fa-graduation-cap me-3 fa-fw"></i> {% trans "Qualifications" %}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#jobDetailAccordion">
|
||||
<div class="accordion-body text-secondary p-4">
|
||||
<div class="wysiwyg-content">{{ job.qualifications|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# BENEFITS #}
|
||||
{% if job.has_benefits_content %}
|
||||
<div class="accordion-item border-bottom">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
<i class="fas fa-hand-holding-usd me-3 fa-fw"></i> {% trans "Benefits" %}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#jobDetailAccordion">
|
||||
<div class="accordion-body text-secondary p-4">
|
||||
<div class="wysiwyg-content">{{ job.benefits|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# APPLICATION INSTRUCTIONS #}
|
||||
{% if job.has_application_instructions_content %}
|
||||
<div class="accordion-item border-bottom">
|
||||
<h2 class="accordion-header" id="headingFour">
|
||||
<button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
|
||||
<i class="fas fa-file-alt me-3 fa-fw"></i> {% trans "Application Instructions" %}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#jobDetailAccordion">
|
||||
<div class="accordion-body text-secondary p-4">
|
||||
<div class="wysiwyg-content">{{ job.application_instructions|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endwith %}
|
||||
<div class="meta-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path></svg>
|
||||
<strong>{% trans "ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="accordion-container">
|
||||
|
||||
{% if job.has_description_content %}
|
||||
<div class="accordion-item">
|
||||
<input type="checkbox" id="acc1" class="accordion-toggle" checked>
|
||||
<label for="acc1" class="accordion-header">
|
||||
<span style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
{% trans "Job Description" %}
|
||||
</span>
|
||||
<svg class="accordion-icon heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</label>
|
||||
<div class="accordion-content">
|
||||
<div class="wysiwyg-content">{{ job.description|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
|
||||
{% if job.has_qualifications_content %}
|
||||
<div class="accordion-item">
|
||||
<input type="checkbox" id="acc2" class="accordion-toggle">
|
||||
<label for="acc2" class="accordion-header">
|
||||
<span style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>
|
||||
{% trans "Qualifications" %}
|
||||
</span>
|
||||
<svg class="accordion-icon heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</label>
|
||||
<div class="accordion-content">
|
||||
<div class="wysiwyg-content">{{ job.qualifications|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<aside class="desktop-sidebar">
|
||||
<div class="content-card sticky-sidebar">
|
||||
<header class="card-header">
|
||||
<h5 style="margin: 0; font-weight: 800; color: var(--kaauh-teal); display: flex; align-items: center; gap: 0.5rem;">
|
||||
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
|
||||
{% trans "Ready to Apply?" %}
|
||||
</h5>
|
||||
</header>
|
||||
<div class="card-body" style="text-align: center;">
|
||||
<p style="color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem;">
|
||||
{% trans "Review the details before submitting your application." %}
|
||||
</p>
|
||||
|
||||
{% if job.form_template %}
|
||||
{% if user.is_authenticated and already_applied %}
|
||||
<button class="btn-apply" disabled>
|
||||
{% trans "Already Applied" %}
|
||||
</button>
|
||||
{% else %}
|
||||
<a href="{% url 'application_submit_form' job.slug %}" class="btn-apply">
|
||||
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
|
||||
{% trans "Apply Now" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{# 📱 MOBILE FIXED APPLY BAR (Replaced inline style with utility classes) #}
|
||||
{% if job.form_template %}
|
||||
<footer class="fixed-bottom d-lg-none bg-white border-top shadow-lg p-3">
|
||||
{% if user.is_authenticated and already_applied %}
|
||||
<button class="btn btn-main-action btn-lg w-100" disabled>
|
||||
<i class="fas fa-paper-plane me-2"></i> {% trans "You already applied for this position" %}
|
||||
</button>
|
||||
{% else %}
|
||||
<a href="{% url 'application_submit_form' job.slug %}" class="btn btn-main-action btn-lg w-100">
|
||||
<i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</footer>
|
||||
{% if job.form_template %}
|
||||
<div class="mobile-apply-bar">
|
||||
{% if user.is_authenticated and already_applied %}
|
||||
<button class="btn-apply" disabled style="width: 100%;">{% trans "Already Applied" %}</button>
|
||||
{% else %}
|
||||
<a href="{% url 'application_submit_form' job.slug %}" class="btn-apply">{% trans "Apply for this Position" %}</a>
|
||||
{% endif %}
|
||||
{% endblock content%}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
485
templates/applicant/partials/candidate_facing_base copy.html
Normal file
485
templates/applicant/partials/candidate_facing_base copy.html
Normal file
@ -0,0 +1,485 @@
|
||||
{% load static i18n %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
{% get_available_languages as LANGUAGES %}
|
||||
{% get_language_info_list for LANGUAGES as language_info_list %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% trans "Careers" %} - {% block title %}{% trans "Application Form" %}{% endblock %}</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'image/favicon/apple-touch-icon.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'image/favicon/favicon-32x32.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'image/favicon/favicon-16x16.png'%}">
|
||||
<link rel="manifest" href="{% static 'image/favicon/site.webmanifest'%}">
|
||||
|
||||
|
||||
{% comment %} Load the correct Bootstrap CSS file for RTL/LTR {% endcomment %}
|
||||
{% if LANGUAGE_CODE == 'ar' %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
||||
{% else %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* THEME & UTILITY VARIABLES */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-light: #e6f7f8; /* Very light teal for hover/background */
|
||||
--success: #198754;
|
||||
--danger: #dc3545;
|
||||
--light-bg: #f8f9fa;
|
||||
--gray-text: #6c757d;
|
||||
--kaauh-border: #d0d7de; /* Cleaner border color */
|
||||
--kaauh-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* Deeper shadow for premium look */
|
||||
--kaauh-dark-bg: #0d0d0d;
|
||||
--kaauh-dark-contrast: #1c1c1c;
|
||||
|
||||
/* CALCULATED STICKY HEIGHTS (As provided in base) */
|
||||
--navbar-height: 56px;
|
||||
--navbar-gap: 16px;
|
||||
--sticky-navbar-total-height: 128px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.text-primary-theme { color: var(--kaauh-teal) !important; }
|
||||
.text-primary-theme-hover:hover { color: var(--kaauh-teal-dark) !important; }
|
||||
|
||||
/* Language Dropdown Styles */
|
||||
.language-toggle-btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
color: var(--kaauh-teal);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
min-width: 120px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.language-toggle-btn:hover {
|
||||
background-color: var(--kaauh-teal-light);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: var(--kaauh-teal-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 99, 110, 0.15);
|
||||
}
|
||||
|
||||
.language-toggle-btn:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
||||
border-color: var(--kaauh-teal);
|
||||
}
|
||||
|
||||
.language-toggle-btn::after {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item {
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 0.375rem;
|
||||
margin: 0.25rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item:hover {
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item.active {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 4px rgba(0, 99, 110, 0.2);
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item.active:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
}
|
||||
|
||||
.flag-emoji {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.language-text {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* RTL Support for Language Dropdown */
|
||||
html[dir="rtl"] .language-toggle-btn {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .dropdown-menu .dropdown-item {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .dropdown-menu .dropdown-item:hover {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.language-toggle-btn {
|
||||
min-width: 100px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item {
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.flag-emoji {
|
||||
font-size: 1rem;
|
||||
min-width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-kaauh-teal {
|
||||
background-color: #00636e;
|
||||
}
|
||||
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
border: none;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
|
||||
box-shadow: 0 6px 15px rgba(0, 99, 110, 0.4); /* Stronger shadow */
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
transform: translateY(-2px); /* More pronounced lift */
|
||||
box-shadow: 0 10px 20px rgba(0, 99, 110, 0.5);
|
||||
}
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 1. DARK HERO STYLING (High Contrast) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--kaauh-dark-contrast) 0%, var(--kaauh-dark-bg) 100%);
|
||||
padding: 4rem 0; /* Reduced from 8rem to 4rem */
|
||||
margin-top: -1px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 2.5rem; /* Reduced from 3.5rem to 2.5rem */
|
||||
font-weight: 800; /* Extra bold */
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.05em;
|
||||
max-width: 900px;
|
||||
}
|
||||
.hero-section .lead {
|
||||
font-size: 1.35rem; /* Larger lead text */
|
||||
}
|
||||
.btn-hero-action {
|
||||
/* Primary CTA: Retained strong teal look */
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
font-weight: 600;
|
||||
padding: 0.8rem 2.2rem;
|
||||
border-radius: 50rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 99, 110, 0.4);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.hero-section {
|
||||
padding: 10rem 0;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 2. PATH CARDS SECTION (New Segmented Entry) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.path-card-section {
|
||||
background-color: white;
|
||||
margin-top: -80px; /* Pulls the section up over the dark hero for a modern layered look */
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
border-top-left-radius: 2rem;
|
||||
border-top-right-radius: 2rem;
|
||||
box-shadow: var(--kaauh-shadow); /* Defines the separation */
|
||||
}
|
||||
.path-card {
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.path-card:hover {
|
||||
border-color: var(--kaauh-teal);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0, 99, 110, 0.1);
|
||||
}
|
||||
.path-card-icon {
|
||||
color: var(--kaauh-teal);
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.path-card h5 {
|
||||
font-weight: 700;
|
||||
color: var(--kaauh-teal-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 3. JOB LISTING & FILTER (Refined) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.job-listing-section {
|
||||
background-color: #f0f0f5; /* Separates the job list from the white path section */
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.job-listing-card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-left: 6px solid var(--kaauh-teal);
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem !important;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Lighter default shadow */
|
||||
}
|
||||
.job-listing-card:hover {
|
||||
transform: translateY(-3px); /* Increased lift */
|
||||
box-shadow: 0 12px 25px rgba(0, 99, 110, 0.15); /* Stronger hover shadow */
|
||||
background-color: var(--kaauh-teal-light);
|
||||
}
|
||||
|
||||
.card.sticky-top-filters {
|
||||
box-shadow: var(--kaauh-shadow); /* Uses the deeper card shadow */
|
||||
}
|
||||
|
||||
/* RTL Corrections (retained) */
|
||||
html[dir="rtl"] .alert { border-right: 5px solid; border-left: none; }
|
||||
html[dir="rtl"] .job-listing-card { border-right: 6px solid var(--kaauh-teal); border-left: 1px solid var(--kaauh-border); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="topNavbar" class="navbar navbar-expand-lg sticky-top bg-white border-bottom" style="z-index: 1040;">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand text-dark fw-bold" href="{% url 'kaauh_career' %}">
|
||||
<img src="{% static 'image/kaauh.jpeg' %}" alt="{% trans 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
|
||||
<span style="color:#00636e;">KAAUH Careers</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
|
||||
{% comment %} <li class="nav-item">
|
||||
<a class="nav-link text-secondary" href="{% url 'applicant_profile' %}">{% trans "Applications" %}</a>
|
||||
</li> {% endcomment %}
|
||||
|
||||
|
||||
|
||||
{% comment %} <li class="nav-item mx-2 mb-1">
|
||||
{% if request.user.user_type == 'candidate' and request.user.is_authenticated and request.user.profile_image.url %}
|
||||
<a href="{% url 'applicant_portal_dashboard' %}" class="mx-2">
|
||||
<img src="{{ request.user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
||||
style="width: 50px; height: 50px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle; border-radius: 50%;"
|
||||
title="{% trans 'Your account' %}">
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="nav-link text-primary-theme" href="{% url 'applicant_portal_dashboard' %}">{% trans "Profile" %}</a>
|
||||
{% endif %}
|
||||
</li> {% endcomment %}
|
||||
{% if request.resolver_match.url_name != "kaauh_career" %}
|
||||
<li class="nav-item mx-2 mb-1">
|
||||
<a class="nav-link text-secondary text-primary-theme" href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-item me-2 d-none d-lg-block">
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="ar" class="btn bg-primary-theme text-primary-theme" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية
|
||||
</button>
|
||||
</form>
|
||||
{% elif LANGUAGE_CODE == 'ar' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="en" class="btn bg-primary-theme text-primary-theme" type="submit">
|
||||
<span class="me-2">🇺🇸</span> English
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% if request.user.is_authenticated%}
|
||||
<li class="nav-item dropdown">
|
||||
<button class="language-toggle-btn dropdown-toggle" type="button"
|
||||
data-bs-toggle="dropdown" data-bs-offset="0, 8" aria-expanded="false"
|
||||
aria-label="{% trans 'Toggle language menu' %}">
|
||||
|
||||
<span class="d-inline"></span>
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
||||
style="width: 36px; height: 36px; object-fit: cover; display: inline-block; vertical-align: middle;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar" title="{% trans 'Your account' %}">
|
||||
{% if user.first_name %}
|
||||
{{ user.first_name|first|capfirst }} {{ user.last_name|first|capfirst }}
|
||||
{% else %}
|
||||
{{user.username|first|capfirst}}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3" style="min-width: 240px;">
|
||||
<li class="px-4 py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
|
||||
style="width: 44px; height: 44px; object-fit: cover; display: block;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center text-primary-theme"
|
||||
style="width: 44px; height: 44px; font-size: 1.2rem;">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
|
||||
<div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><hr class="dropdown-divider my-1"></li>
|
||||
|
||||
<li>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-primary-theme" href="{% url 'applicant_portal_dashboard' %}">
|
||||
<i class="fas fa-tachometer-alt me-3 fs-5"></i> <span>{% trans "Dashboard" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-primary-theme" href="{% url 'user_detail' request.user.pk %}" >
|
||||
<i class="fas fa-user-circle me-3 fs-5"></i> <span>{% trans "My Profile" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li><hr class="dropdown-divider my-1"></li>
|
||||
<li>
|
||||
<form method="post" action="{% url 'account_logout'%}" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="dropdown-item py-2 px-4 d-flex align-items-center border-0 bg-transparent text-start w-100"
|
||||
aria-label="{% trans 'Sign out' %}"
|
||||
>
|
||||
<i class="fas fa-sign-out-alt me-3 fs-5" style="color:red;"></i>
|
||||
<span style="color:red;">{% trans "Sign Out" %}</span>
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% if messages %}
|
||||
<div class="container message-container mt-3">
|
||||
<div class="row">
|
||||
{# Use responsive columns matching the main content block for alignment #}
|
||||
<div class="col-lg-12 order-lg-1 col-12 mx-auto">
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
|
||||
<i class="fas fa-check-circle me-2"></i> {{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ================================================= #}
|
||||
{# DJANGO MESSAGE BLOCK - Placed directly below the main navbar #}
|
||||
{# ================================================= #}
|
||||
|
||||
{# ================================================= #}
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
{% block customJS %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +1,5 @@
|
||||
{% load static i18n %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
{% get_available_languages as LANGUAGES %}
|
||||
{% get_language_info_list for LANGUAGES as language_info_list %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
|
||||
@ -9,477 +7,284 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% trans "Careers" %} - {% block title %}{% trans "Application Form" %}{% endblock %}</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'image/favicon/apple-touch-icon.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'image/favicon/favicon-32x32.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'image/favicon/favicon-16x16.png'%}">
|
||||
<link rel="manifest" href="{% static 'image/favicon/site.webmanifest'%}">
|
||||
|
||||
<link rel="icon" type="image/png" href="{% static 'image/favicon/favicon-32x32.png'%}">
|
||||
|
||||
|
||||
{% comment %} Load the correct Bootstrap CSS file for RTL/LTR {% endcomment %}
|
||||
{% if LANGUAGE_CODE == 'ar' %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
||||
{% else %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* THEME & UTILITY VARIABLES */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-light: #e6f7f8; /* Very light teal for hover/background */
|
||||
--success: #198754;
|
||||
--danger: #dc3545;
|
||||
--light-bg: #f8f9fa;
|
||||
--gray-text: #6c757d;
|
||||
--kaauh-border: #d0d7de; /* Cleaner border color */
|
||||
--kaauh-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* Deeper shadow for premium look */
|
||||
--kaauh-dark-bg: #0d0d0d;
|
||||
--kaauh-dark-contrast: #1c1c1c;
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-light: #e6f7f8;
|
||||
--white: #ffffff;
|
||||
--light-bg: #f8f9fa;
|
||||
--gray-text: #6c757d;
|
||||
--danger: #dc3545;
|
||||
--border: #d0d7de;
|
||||
--shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
--nav-height: 70px;
|
||||
}
|
||||
|
||||
/* CALCULATED STICKY HEIGHTS (As provided in base) */
|
||||
--navbar-height: 56px;
|
||||
--navbar-gap: 16px;
|
||||
--sticky-navbar-total-height: 128px;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
padding-top: 0;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--light-bg);
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.text-primary-theme { color: var(--kaauh-teal) !important; }
|
||||
.text-primary-theme-hover:hover { color: var(--kaauh-teal-dark) !important; }
|
||||
/* --- NAVIGATION --- */
|
||||
.navbar {
|
||||
height: var(--nav-height);
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-inline: 2rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Language Dropdown Styles */
|
||||
.language-toggle-btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
color: var(--kaauh-teal);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
min-width: 120px;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
gap: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--kaauh-teal);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.language-toggle-btn:hover {
|
||||
background-color: var(--kaauh-teal-light);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: var(--kaauh-teal-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 99, 110, 0.15);
|
||||
}
|
||||
.nav-brand img { height: 45px; }
|
||||
|
||||
.language-toggle-btn:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
||||
border-color: var(--kaauh-teal);
|
||||
}
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.language-toggle-btn::after {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--gray-text);
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
min-width: 180px;
|
||||
}
|
||||
.nav-link:hover { color: var(--kaauh-teal); }
|
||||
|
||||
.dropdown-menu .dropdown-item {
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 0.375rem;
|
||||
margin: 0.25rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
/* --- BUTTONS --- */
|
||||
.btn-lang {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--kaauh-teal);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item:hover {
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.btn-lang:hover { background: var(--kaauh-teal-light); }
|
||||
|
||||
.dropdown-menu .dropdown-item:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
||||
}
|
||||
/* --- DROPDOWN --- */
|
||||
.dropdown { position: relative; }
|
||||
|
||||
.dropdown-menu .dropdown-item.active {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 4px rgba(0, 99, 110, 0.2);
|
||||
}
|
||||
.dropdown-trigger {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item.active:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
}
|
||||
|
||||
.flag-emoji {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.language-text {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* RTL Support for Language Dropdown */
|
||||
html[dir="rtl"] .language-toggle-btn {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .dropdown-menu .dropdown-item {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .dropdown-menu .dropdown-item:hover {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.language-toggle-btn {
|
||||
min-width: 100px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
.profile-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--kaauh-teal-light);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 160px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
inset-inline-end: 0;
|
||||
background: var(--white);
|
||||
min-width: 260px;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item {
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
.dropdown.active .dropdown-menu { display: block; }
|
||||
|
||||
.dropdown-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.flag-emoji {
|
||||
font-size: 1rem;
|
||||
min-width: 20px;
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
text-decoration: none;
|
||||
color: #444;
|
||||
gap: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-kaauh-teal {
|
||||
background-color: #00636e;
|
||||
}
|
||||
.dropdown-item:hover { background: var(--kaauh-teal-light); }
|
||||
.dropdown-item svg { width: 20px; height: 20px; color: var(--gray-text); }
|
||||
.dropdown-item.logout { color: var(--danger); }
|
||||
.dropdown-item.logout svg { color: var(--danger); }
|
||||
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
border: none;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
|
||||
box-shadow: 0 6px 15px rgba(0, 99, 110, 0.4); /* Stronger shadow */
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
transform: translateY(-2px); /* More pronounced lift */
|
||||
box-shadow: 0 10px 20px rgba(0, 99, 110, 0.5);
|
||||
}
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 1. DARK HERO STYLING (High Contrast) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--kaauh-dark-contrast) 0%, var(--kaauh-dark-bg) 100%);
|
||||
padding: 4rem 0; /* Reduced from 8rem to 4rem */
|
||||
margin-top: -1px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 2.5rem; /* Reduced from 3.5rem to 2.5rem */
|
||||
font-weight: 800; /* Extra bold */
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.05em;
|
||||
max-width: 900px;
|
||||
}
|
||||
.hero-section .lead {
|
||||
font-size: 1.35rem; /* Larger lead text */
|
||||
}
|
||||
.btn-hero-action {
|
||||
/* Primary CTA: Retained strong teal look */
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
font-weight: 600;
|
||||
padding: 0.8rem 2.2rem;
|
||||
border-radius: 50rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 99, 110, 0.4);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.hero-section {
|
||||
padding: 10rem 0;
|
||||
/* --- ALERTS --- */
|
||||
.alert-container {
|
||||
max-width: 1200px;
|
||||
margin: 1rem auto;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 5.5rem;
|
||||
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #e7f3f4;
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-inline-start: 4px solid var(--kaauh-teal);
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 2. PATH CARDS SECTION (New Segmented Entry) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.path-card-section {
|
||||
background-color: white;
|
||||
margin-top: -80px; /* Pulls the section up over the dark hero for a modern layered look */
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
border-top-left-radius: 2rem;
|
||||
border-top-right-radius: 2rem;
|
||||
box-shadow: var(--kaauh-shadow); /* Defines the separation */
|
||||
}
|
||||
.path-card {
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.path-card:hover {
|
||||
border-color: var(--kaauh-teal);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0, 99, 110, 0.1);
|
||||
}
|
||||
.path-card-icon {
|
||||
color: var(--kaauh-teal);
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.path-card h5 {
|
||||
font-weight: 700;
|
||||
color: var(--kaauh-teal-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.heroicon { width: 20px; height: 20px; flex-shrink: 0; }
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 3. JOB LISTING & FILTER (Refined) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
.job-listing-section {
|
||||
background-color: #f0f0f5; /* Separates the job list from the white path section */
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.job-listing-card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-left: 6px solid var(--kaauh-teal);
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem !important;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Lighter default shadow */
|
||||
}
|
||||
.job-listing-card:hover {
|
||||
transform: translateY(-3px); /* Increased lift */
|
||||
box-shadow: 0 12px 25px rgba(0, 99, 110, 0.15); /* Stronger hover shadow */
|
||||
background-color: var(--kaauh-teal-light);
|
||||
}
|
||||
|
||||
.card.sticky-top-filters {
|
||||
box-shadow: var(--kaauh-shadow); /* Uses the deeper card shadow */
|
||||
}
|
||||
|
||||
/* RTL Corrections (retained) */
|
||||
html[dir="rtl"] .alert { border-right: 5px solid; border-left: none; }
|
||||
html[dir="rtl"] .job-listing-card { border-right: 6px solid var(--kaauh-teal); border-left: 1px solid var(--kaauh-border); }
|
||||
/* --- RESPONSIVE --- */
|
||||
@media (max-width: 768px) {
|
||||
.navbar { padding-inline: 1rem; }
|
||||
.nav-brand span { display: none; }
|
||||
.d-mobile-none { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="topNavbar" class="navbar navbar-expand-lg sticky-top bg-white border-bottom" style="z-index: 1040;">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand text-dark fw-bold" href="{% url 'kaauh_career' %}">
|
||||
<img src="{% static 'image/kaauh.jpeg' %}" alt="{% trans 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
|
||||
<span style="color:#00636e;">KAAUH Careers</span>
|
||||
<nav class="navbar">
|
||||
<a href="{% url 'kaauh_career' %}" class="nav-brand">
|
||||
<img src="{% static 'image/kaauh.jpeg' %}" alt="KAAUH">
|
||||
<span>KAAUH Careers</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
|
||||
{% comment %} <li class="nav-item">
|
||||
<a class="nav-link text-secondary" href="{% url 'applicant_profile' %}">{% trans "Applications" %}</a>
|
||||
</li> {% endcomment %}
|
||||
<div class="nav-actions">
|
||||
{% if request.resolver_match.url_name != "kaauh_career" %}
|
||||
<a href="{% url 'kaauh_career' %}" class="nav-link d-mobile-none">{% trans "Careers" %}</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% comment %} <li class="nav-item mx-2 mb-1">
|
||||
{% if request.user.user_type == 'candidate' and request.user.is_authenticated and request.user.profile_image.url %}
|
||||
<a href="{% url 'applicant_portal_dashboard' %}" class="mx-2">
|
||||
<img src="{{ request.user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
||||
style="width: 50px; height: 50px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle; border-radius: 50%;"
|
||||
title="{% trans 'Your account' %}">
|
||||
</a>
|
||||
<form action="{% url 'set_language' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<button name="language" value="ar" class="btn-lang" type="submit">
|
||||
🇸🇦 <span class="d-mobile-none">العربية</span>
|
||||
</button>
|
||||
{% else %}
|
||||
<a class="nav-link text-primary-theme" href="{% url 'applicant_portal_dashboard' %}">{% trans "Profile" %}</a>
|
||||
{% endif %}
|
||||
</li> {% endcomment %}
|
||||
{% if request.resolver_match.url_name != "kaauh_career" %}
|
||||
<li class="nav-item mx-2 mb-1">
|
||||
<a class="nav-link text-secondary text-primary-theme" href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<button name="language" value="en" class="btn-lang" type="submit">
|
||||
🇺🇸 <span class="d-mobile-none">English</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
<li class="nav-item me-2 d-none d-lg-block">
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="ar" class="btn bg-primary-theme text-primary-theme" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية
|
||||
</button>
|
||||
</form>
|
||||
{% elif LANGUAGE_CODE == 'ar' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="en" class="btn bg-primary-theme text-primary-theme" type="submit">
|
||||
<span class="me-2">🇺🇸</span> English
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% if request.user.is_authenticated%}
|
||||
<li class="nav-item dropdown">
|
||||
<button class="language-toggle-btn dropdown-toggle" type="button"
|
||||
data-bs-toggle="dropdown" data-bs-offset="0, 8" aria-expanded="false"
|
||||
aria-label="{% trans 'Toggle language menu' %}">
|
||||
|
||||
<span class="d-inline"></span>
|
||||
{% if request.user.is_authenticated %}
|
||||
<div class="dropdown" id="userDropdown">
|
||||
<button class="dropdown-trigger" onclick="toggleDropdown()">
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
||||
style="width: 36px; height: 36px; object-fit: cover; display: inline-block; vertical-align: middle;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar" title="{% trans 'Your account' %}">
|
||||
{% if user.first_name %}
|
||||
{{ user.first_name|first|capfirst }} {{ user.last_name|first|capfirst }}
|
||||
{% else %}
|
||||
{{user.username|first|capfirst}}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img src="{{ user.profile_image.url }}" class="profile-avatar">
|
||||
{% else %}
|
||||
<div class="profile-avatar" style="background: var(--kaauh-teal); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold;">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3" style="min-width: 240px;">
|
||||
<li class="px-4 py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
|
||||
style="width: 44px; height: 44px; object-fit: cover; display: block;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center text-primary-theme"
|
||||
style="width: 44px; height: 44px; font-size: 1.2rem;">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
|
||||
<div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><hr class="dropdown-divider my-1"></li>
|
||||
|
||||
<li>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-primary-theme" href="{% url 'applicant_portal_dashboard' %}">
|
||||
<i class="fas fa-tachometer-alt me-3 fs-5"></i> <span>{% trans "Dashboard" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-primary-theme" href="{% url 'user_detail' request.user.pk %}" >
|
||||
<i class="fas fa-user-circle me-3 fs-5"></i> <span>{% trans "My Profile" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li><hr class="dropdown-divider my-1"></li>
|
||||
<li>
|
||||
<form method="post" action="{% url 'account_logout'%}" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="dropdown-item py-2 px-4 d-flex align-items-center border-0 bg-transparent text-start w-100"
|
||||
aria-label="{% trans 'Sign out' %}"
|
||||
>
|
||||
<i class="fas fa-sign-out-alt me-3 fs-5" style="color:red;"></i>
|
||||
<span style="color:red;">{% trans "Sign Out" %}</span>
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% if messages %}
|
||||
<div class="container message-container mt-3">
|
||||
<div class="row">
|
||||
{# Use responsive columns matching the main content block for alignment #}
|
||||
<div class="col-lg-12 order-lg-1 col-12 mx-auto">
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
|
||||
<i class="fas fa-check-circle me-2"></i> {{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-header">
|
||||
<div>
|
||||
<div style="font-weight: 600;">{{ user.get_full_name|default:user.username }}</div>
|
||||
<div style="font-size: 0.8rem; color: var(--gray-text);">{{ user.email|truncatechars:22 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<a href="{% url 'applicant_portal_dashboard' %}" class="dropdown-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
||||
{% trans "Dashboard" %}
|
||||
</a>
|
||||
|
||||
<a href="{% url 'user_detail' request.user.pk %}" class="dropdown-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
{% trans "My Profile" %}
|
||||
</a>
|
||||
|
||||
<form method="post" action="{% url 'account_logout'%}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="dropdown-item logout">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
||||
{% trans "Sign Out" %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% if messages %}
|
||||
<div class="alert-container">
|
||||
{% for message in messages %}
|
||||
<div class="alert">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
{{ message }}
|
||||
</div>
|
||||
<button onclick="this.parentElement.remove()" style="background:none; border:none; cursor:pointer; font-size: 1.25rem;">×</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ================================================= #}
|
||||
{# DJANGO MESSAGE BLOCK - Placed directly below the main navbar #}
|
||||
{# ================================================= #}
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{# ================================================= #}
|
||||
<script>
|
||||
function toggleDropdown() {
|
||||
document.getElementById('userDropdown').classList.toggle('active');
|
||||
}
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
window.addEventListener('click', function(e) {
|
||||
if (!document.getElementById('userDropdown')?.contains(e.target)) {
|
||||
document.getElementById('userDropdown')?.classList.remove('active');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
{% block customJS %}
|
||||
{% endblock %}
|
||||
{% block customJS %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -537,10 +537,10 @@
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<form action="{% url 'generate_ai_questions' schedule.slug %}" method="post" class="m-0">
|
||||
<form action="{% url 'generate_ai_questions' schedule.slug %}" method="post" id="aiGenForm" class="m-0">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="dropdown-item text-primary-theme fw-bold py-2">
|
||||
<i class="fas fa-check-circle me-2"></i> {% trans "Confirm & Generate" %}
|
||||
<button type="submit" class="dropdown-item text-primary-theme fw-bold py-2" id="aiGenBtn">
|
||||
<i class="fas fa-check-circle me-2" id="aiBtnText"></i> {% trans "Confirm & Generate" %}
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
@ -1089,33 +1089,7 @@ async function copyJoinUrl(){
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const aiForm = document.getElementById('aiGenForm');
|
||||
const aiBtn = document.getElementById('aiGenBtn');
|
||||
const aiMainToggle = document.getElementById('aiDropdown');
|
||||
|
||||
if (aiForm) {
|
||||
aiForm.addEventListener('submit', function() {
|
||||
// 1. Disable the button to prevent multiple requests
|
||||
aiBtn.disabled = true;
|
||||
|
||||
// 2. Change the inner HTML to show a spinner
|
||||
aiBtn.innerHTML = `
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
{% trans "Generating..." %}
|
||||
`;
|
||||
|
||||
// 3. Update the main visible toggle button to show loading state too
|
||||
if (aiMainToggle) {
|
||||
aiMainToggle.classList.add('disabled');
|
||||
aiMainToggle.innerHTML = `
|
||||
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
||||
{% trans "AI Working..." %}
|
||||
`;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,201 +1,133 @@
|
||||
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
||||
{% load static i18n %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% trans "Application Submitted - Thank You" %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* THEME & UTILITY VARIABLES (Copied from your reference) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
{% block title %}{% trans "Career Application Success" %} | KAAUH{% endblock %}
|
||||
{% block content %}
|
||||
<style>
|
||||
/* THEME VARIABLES */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--success: #198754;
|
||||
--light-bg: #f8f9fa;
|
||||
--navbar-height: 56px;
|
||||
--navbar-gap: 16px;
|
||||
--sticky-navbar-total-height: 128px;
|
||||
}
|
||||
|
||||
/* 1. WRAPPER FOR VERTICAL AND HORIZONTAL CENTERING */
|
||||
.main-content-area {
|
||||
/* This calculates height minus the top navbar to prevent scrolling */
|
||||
min-height: calc(100vh - var(--navbar-height) - 60px);
|
||||
display: flex;
|
||||
align-items: center; /* Vertical center */
|
||||
justify-content: center; /* Horizontal center */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 2. CARD STYLING */
|
||||
.thank-you-card {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||||
padding: 60px 40px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* ANIMATION */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.success-icon-bg {
|
||||
width: 90px; height: 90px;
|
||||
background: #e9f7ef;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.text-success-header {
|
||||
color: var(--success) !important;
|
||||
font-weight: 800;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 1.1rem;
|
||||
color: #636e72;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
border: none;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
|
||||
padding: 14px 35px;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 8px 15px rgba(0, 99, 110, 0.2);
|
||||
}
|
||||
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 20px rgba(0, 99, 110, 0.3);
|
||||
}
|
||||
|
||||
.bg-kaauh-teal-dark {
|
||||
background-color: var(--kaauh-teal-dark) !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* LAYOUT & STICKY POSITIONING FIXES (Copied from your reference) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
|
||||
#bottomNavbar {
|
||||
top: calc(var(--navbar-height) + var(--navbar-gap));
|
||||
z-index: 1030;
|
||||
/* Secondary Nav styling */
|
||||
#confirmationNavbar {
|
||||
background-color: var(--kaauh-teal);
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.main-content-area {
|
||||
margin-top: calc(var(--sticky-navbar-total-height) + 12px);
|
||||
/* Center content vertically for a clean thank-you page */
|
||||
min-height: calc(100vh - var(--sticky-navbar-total-height) - 40px);
|
||||
display: flex;
|
||||
align-items: flex-start; /* Aligns content to the top within the min-height */
|
||||
}
|
||||
|
||||
/* Center the card within the column */
|
||||
.thank-you-card-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thank-you-card {
|
||||
max-width: 750px; /* Optional: Limit width for readability */
|
||||
padding: 0;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Custom styles for the success icon background */
|
||||
.success-icon-bg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #d4edda; /* Light green/success background */
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.text-success-custom {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.text-success-header {
|
||||
color: var(--success) !important;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.job-info-block {
|
||||
background: var(--light-bg);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 25px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.job-info-block p {
|
||||
margin-bottom: 0.5rem; /* Tighter spacing for info lines */
|
||||
}
|
||||
.job-info-block p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* MOBILE RESPONSIVE STYLES */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
@media (max-width: 991.98px) {
|
||||
/* Mobile styles from your reference here... */
|
||||
.main-content-area {
|
||||
margin-top: calc(var(--sticky-navbar-total-height) / 2);
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.thank-you-card { padding: 40px 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="topNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: white; z-index: 1030;">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-brand text-white fw-bold">
|
||||
<img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
|
||||
</span>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-secondary" href="/applications/">{% translate "Applications" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-secondary" href="/profile/">{% translate "Profile" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-secondary" href="https://kaauh.edu.sa/career">{% translate "Careers" %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: var(--kaauh-teal); z-index: 1030;">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-text text-white fw-bold">{% translate "Application Confirmation" %}</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="row mb-5 mt-5 main-content-area">
|
||||
|
||||
<div class="col-12 thank-you-card-wrapper">
|
||||
<div class="card shadow-lg thank-you-card">
|
||||
<div style="text-align: center; padding: 40px 20px;">
|
||||
|
||||
{# SUCCESS ICON #}
|
||||
<div class="success-icon-bg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="var(--success)" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="text-success-header">{% translate "Thank You!" %}</h1>
|
||||
<h2 class="h4" style="color: #333;">{% trans "Your application has been submitted successfully" %}</h2>
|
||||
|
||||
{% comment %} {# JOB INFO BLOCK #}
|
||||
<div class="job-info-block">
|
||||
<p class="mb-2"><strong>{% trans "Position" %}:</strong> <span class="fw-bold">{{ job.title }}</span></p>
|
||||
<p class="mb-2"><strong>{% trans "Job ID" %}:</strong> {{ job.internal_job_id }}</p>
|
||||
<p class="mb-2"><strong>{% trans "Department" %}:</strong> {{ job.department|default:"Not specified" }}</p>
|
||||
{% if job.application_deadline %}
|
||||
<p><strong>{% trans "Application Deadline" %}:</strong> {{ job.application_deadline|date:"F j, Y" }}</p>
|
||||
{% endif %}
|
||||
</div> {% endcomment %}
|
||||
|
||||
<p style="font-size: 1rem; line-height: 1.6; color: #555;">
|
||||
{% trans "We appreciate your interest in joining our team. Our hiring team will review your application and contact you if there's a potential match for this position." %}
|
||||
</p>
|
||||
|
||||
<div style="margin-top: 30px;">
|
||||
<a href="{% url 'kaauh_career' %}" class="btn btn-main-action btn-lg">
|
||||
<i class="fas fa-arrow-left me-2"></i> {% trans "Return to Job Listings" %}
|
||||
</a>
|
||||
{# You can add a link to view the saved application here if applicable #}
|
||||
{% comment %} <a href="{% url 'jobs:job_detail' job.internal_job_id %}" class="btn btn-secondary">View Job Details</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<div id="confirmationNavbar" class="shadow-sm">
|
||||
<div class="container-fluid">
|
||||
<span class="text-white fw-bold">
|
||||
<i class="fas fa-check-circle me-2"></i>{% trans "Submission Complete" %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content-area">
|
||||
<div class="thank-you-card">
|
||||
|
||||
<div class="success-icon-bg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="var(--success)" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="text-success-header">{% trans "Thank You!" %}</h1>
|
||||
<h2 class="h5 mb-4" style="color: #2d3436; font-weight: 600;">
|
||||
{% trans "Your application has been received." %}
|
||||
</h2>
|
||||
|
||||
<p class="message-text">
|
||||
{% trans "We appreciate your interest in KAAUH. Our recruitment team will review your qualifications and contact you if you are shortlisted for an interview." %}
|
||||
</p>
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="{% url 'kaauh_career' %}" class="btn-main-action">
|
||||
{% trans "Return to Careers" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,244 +1,278 @@
|
||||
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
||||
{% load i18n crispy_forms_tags %}
|
||||
{% load widget_tweaks %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block title %}{% trans "Create Account" %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
/* KAAUH Teal Style Variables */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-light: #e6f7f8;
|
||||
}
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* MODERN KAAUH DESIGN SYSTEM */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-teal-light: #f0f7f8;
|
||||
--error-red: #e74c3c;
|
||||
--border-color: #e2e8f0;
|
||||
--text-dark: #2d3436;
|
||||
--text-muted: #636e72;
|
||||
--shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
--radius: 12px;
|
||||
}
|
||||
|
||||
.kaauh-teal-header {
|
||||
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
||||
}
|
||||
/* Page Wrapper */
|
||||
.register-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
min-height: calc(100vh - 80px);
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.btn-kaauh-teal {
|
||||
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
/* Custom Card */
|
||||
.kaauh-card {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
background: #ffffff;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-kaauh-teal:hover {
|
||||
background: linear-gradient(135deg, var(--kaauh-teal-dark) 0%, var(--kaauh-teal) 100%);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
|
||||
}
|
||||
.kaauh-header {
|
||||
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
||||
color: #ffffff;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--kaauh-teal);
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
||||
}
|
||||
.kaauh-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.text-kaauh-teal {
|
||||
color: var(--kaauh-teal) !important;
|
||||
}
|
||||
/* Form Layout - Grid System */
|
||||
.kaauh-body {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.text-kaauh-teal:hover {
|
||||
color: var(--kaauh-teal-dark) !important;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.grid-4 { grid-column: span 4; }
|
||||
.grid-6 { grid-column: span 6; }
|
||||
.grid-8 { grid-column: span 8; }
|
||||
.grid-12 { grid-column: span 12; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-4, .grid-6, .grid-8 { grid-column: span 12; }
|
||||
.kaauh-body { padding: 25px; }
|
||||
}
|
||||
|
||||
/* Pure CSS Form Styling */
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.required { color: var(--error-red); }
|
||||
|
||||
/* Target Django default inputs */
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 1rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--kaauh-teal);
|
||||
box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.1);
|
||||
}
|
||||
|
||||
/* Error Styling */
|
||||
.error-text {
|
||||
color: var(--error-red);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Button Styling */
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 16px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 99, 110, 0.3);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.alert-error, .alert-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
|
||||
.alert-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
|
||||
|
||||
/* Footer */
|
||||
.kaauh-footer {
|
||||
padding: 20px;
|
||||
background: #f8fafc;
|
||||
border-top: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.link-teal {
|
||||
color: var(--kaauh-teal);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-teal:hover { text-decoration: underline; }
|
||||
</style>
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-8">
|
||||
<div class="card shadow">
|
||||
<div class="card-header kaauh-teal-header text-white p-3">
|
||||
<h4 class="mb-0">
|
||||
<i class="fas fa-user-plus me-2"></i>
|
||||
{% trans "Create Account" %}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="register-wrapper">
|
||||
<div class="kaauh-card">
|
||||
<div class="kaauh-header">
|
||||
<h2><i class="fas fa-user-plus"></i> {% trans "Create Account" %}</h2>
|
||||
</div>
|
||||
|
||||
<div class="kaauh-body">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="field-group grid-4">
|
||||
<label class="field-label">{% trans "First Name" %} <span class="required">*</span></label>
|
||||
{{ form.first_name }}
|
||||
{% if form.first_name.errors %}<div class="error-text">{{ form.first_name.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-4">
|
||||
<label class="field-label">{% trans "Middle Name" %}</label>
|
||||
{{ form.middle_name }}
|
||||
{% if form.middle_name.errors %}<div class="error-text">{{ form.middle_name.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-4">
|
||||
<label class="field-label">{% trans "Last Name" %} <span class="required">*</span></label>
|
||||
{{ form.last_name }}
|
||||
{% if form.last_name.errors %}<div class="error-text">{{ form.last_name.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-8">
|
||||
<label class="field-label">{% trans "Email Address" %} <span class="required">*</span></label>
|
||||
{{ form.email }}
|
||||
{% if form.email.errors %}<div class="error-text">{{ form.email.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-4">
|
||||
<label class="field-label">{% trans "Phone Number" %} <span class="required">*</span></label>
|
||||
{{ form.phone }}
|
||||
{% if form.phone.errors %}<div class="error-text">{{ form.phone.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-6">
|
||||
<label class="field-label">{% trans "GPA" %} <span class="required">*</span></label>
|
||||
{{ form.gpa }}
|
||||
{% if form.gpa.errors %}<div class="error-text">{{ form.gpa.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-6">
|
||||
<label class="field-label">{% trans "National ID / Iqama" %} <span class="required">*</span></label>
|
||||
{{ form.national_id }}
|
||||
{% if form.national_id.errors %}<div class="error-text">{{ form.national_id.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-6">
|
||||
<label class="field-label">{% trans "Nationality" %} <span class="required">*</span></label>
|
||||
{{ form.nationality }}
|
||||
{% if form.nationality.errors %}<div class="error-text">{{ form.nationality.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-6">
|
||||
<label class="field-label">{% trans "Gender" %} <span class="required">*</span></label>
|
||||
{{ form.gender }}
|
||||
{% if form.gender.errors %}<div class="error-text">{{ form.gender.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-6">
|
||||
<label class="field-label">{% trans "Password" %} <span class="required">*</span></label>
|
||||
{{ form.password }}
|
||||
{% if form.password.errors %}<div class="error-text">{{ form.password.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="field-group grid-6">
|
||||
<label class="field-label">{% trans "Confirm Password" %} <span class="required">*</span></label>
|
||||
{{ form.confirm_password }}
|
||||
{% if form.confirm_password.errors %}<div class="error-text">{{ form.confirm_password.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="grid-12">
|
||||
<div class="alert alert-danger">
|
||||
{% for error in form.non_field_errors %}{{ error }}{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="{{ form.first_name.id_for_label }}" class="form-label">
|
||||
{% trans "First Name" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.first_name }}
|
||||
{% if form.first_name.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.first_name.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="{{ form.middle_name.id_for_label }}" class="form-label">
|
||||
{% trans "Middle Name" %}
|
||||
</label>
|
||||
{{ form.middle_name }}
|
||||
{% if form.middle_name.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.middle_name.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="{{ form.last_name.id_for_label }}" class="form-label">
|
||||
{% trans "Last Name" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.last_name }}
|
||||
{% if form.last_name.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.last_name.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-8 mb-3">
|
||||
<label for="{{ form.email.id_for_label }}" class="form-label">
|
||||
{% trans "Email Address" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.email }}
|
||||
{% if form.email.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.email.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="{{ form.phone.id_for_label }}" class="form-label">
|
||||
{% trans "Phone Number" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.phone }}
|
||||
{% if form.phone.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.phone.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.gpa.id_for_label }}" class="form-label">
|
||||
{% trans "GPA" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.gpa|add_class:"form-control" }}
|
||||
{% if form.gpa.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.gpa.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.national_id.id_for_label }}" class="form-label">
|
||||
{% trans "National Id Or Iqama" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.national_id }}
|
||||
{% if form.national_id.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.national_id.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.nationality.id_for_label }}" class="form-label">
|
||||
{% trans "Nationality" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.nationality }}
|
||||
{% if form.nationality.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.nationality.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.gender.id_for_label }}" class="form-label">
|
||||
{% trans "Gender" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.gender }}
|
||||
{% if form.gender.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.gender.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.password.id_for_label }}" class="form-label">
|
||||
{% trans "Password" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.password }}
|
||||
{% if form.password.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.password.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.confirm_password.id_for_label }}" class="form-label">
|
||||
{% trans "Confirm Password" %} <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.confirm_password }}
|
||||
{% if form.confirm_password.errors %}
|
||||
<div class="text-danger small">
|
||||
{{ form.confirm_password.errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="alert alert-danger">
|
||||
{% for error in form.non_field_errors %}
|
||||
{{ error }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="d-grid mt-4">
|
||||
<button type="submit" class="btn btn-kaauh-teal p-3">
|
||||
<i class="fas fa-user-plus me-2"></i>
|
||||
{% trans "Create Account" %}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<small class="text-muted">
|
||||
{% trans "Already have an account?" %}
|
||||
<a href="{% url 'account_login' %}?next={% url 'application_submit_form' job.slug %}" class="text-decoration-none text-kaauh-teal">
|
||||
{% trans "Login here" %}
|
||||
</a>
|
||||
</small>
|
||||
<div class="grid-12">
|
||||
<button type="submit" class="btn-submit">
|
||||
{% trans "Create Account" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="kaauh-footer">
|
||||
{% trans "Already have an account?" %}
|
||||
<a href="{% url 'account_login' %}?next={% url 'application_submit_form' job.slug %}" class="link-teal">
|
||||
{% trans "Login here" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user