481 lines
19 KiB
HTML
481 lines
19 KiB
HTML
{% 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>
|
|
|
|
{% 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>
|