304 lines
12 KiB
HTML
304 lines
12 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>{% translate "Application Form" %}</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;
|
|
--success: #198754;
|
|
--danger: #dc3545;
|
|
--light-bg: #f8f9fa;
|
|
--gray-text: #6c757d;
|
|
--kaauh-border: #eaeff3; /* Added for dropdown styling */
|
|
|
|
/* CALCULATED STICKY HEIGHTS */
|
|
--navbar-height: 56px;
|
|
--navbar-gap: 16px;
|
|
--sticky-navbar-total-height: 128px;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background-color: #f0f0f5; /* Light gray background for contrast */
|
|
padding-top: 0;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.bg-kaauh-teal-dark {
|
|
background-color: var(--kaauh-teal-dark) !important;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* NEW: MESSAGES STYLING */
|
|
/* ---------------------------------------------------------------------- */
|
|
.message-container {
|
|
/* Position right below the sticky navbar (56px) with a small top margin */
|
|
margin-top: calc(var(--navbar-height) + 10px);
|
|
}
|
|
.alert {
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: 0.5rem;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
|
|
margin-bottom: 0; /* Handled by container margin */
|
|
border-left: 5px solid; /* Feature highlight */
|
|
}
|
|
.alert-success {
|
|
color: var(--success);
|
|
background-color: #d1e7dd;
|
|
border-color: var(--success);
|
|
}
|
|
.alert-error, .alert-danger {
|
|
color: var(--danger);
|
|
background-color: #f8d7da;
|
|
border-color: var(--danger);
|
|
}
|
|
.alert-info {
|
|
color: var(--kaauh-teal-dark);
|
|
background-color: #cff4fc;
|
|
border-color: var(--kaauh-teal);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* LANGUAGE TOGGLE STYLES (COPIED FROM MAIN LAYOUT) */
|
|
/* ---------------------------------------------------------------------- */
|
|
.language-toggle-btn {
|
|
color: var(--gray-text) !important; /* Use secondary color */
|
|
background: none !important;
|
|
border: none !important;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
padding: 0.5rem 0.75rem !important;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.language-toggle-btn:hover {
|
|
background: var(--light-bg) !important;
|
|
border-radius: 4px;
|
|
color: var(--kaauh-teal) !important;
|
|
}
|
|
|
|
/* Dropdown Menu styling for language */
|
|
.dropdown-menu {
|
|
backdrop-filter: blur(4px);
|
|
background-color: rgba(255, 255, 255, 0.98);
|
|
border: 1px solid var(--kaauh-border);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
|
|
border-radius: 8px;
|
|
padding: 0.5rem 0;
|
|
min-width: 150px;
|
|
}
|
|
.dropdown-item {
|
|
padding: 0.5rem 1.25rem;
|
|
transition: background-color 0.15s;
|
|
text-align: inherit; /* Ensure text alignment is controlled by dir="rtl" */
|
|
}
|
|
|
|
/* Use button as dropdown-item inside form for full click area */
|
|
.dropdown-item[type="submit"] {
|
|
width: 100%;
|
|
text-align: inherit;
|
|
border: none;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* LAYOUT & STICKY POSITIONING FIXES (Desktop/Tablet) */
|
|
/* ---------------------------------------------------------------------- */
|
|
|
|
#topNavbar {
|
|
z-index: 1040; /* Higher than the bottom bar */
|
|
}
|
|
|
|
/* 1. Position the dark navbar below the white navbar + gap */
|
|
#bottomNavbar {
|
|
/* 56px (white nav) + 16px (mb-3) = 72px */
|
|
top: calc(var(--navbar-height) + var(--navbar-gap));
|
|
z-index: 1030;
|
|
}
|
|
|
|
/* 2. Pushes the main content down so it's not hidden under the navbars */
|
|
.main-content-area {
|
|
/* Total Sticky Height (128px) + Extra Margin (12px) = 140px */
|
|
margin-top: calc(var(--sticky-navbar-total-height) + 12px);
|
|
}
|
|
|
|
/* 3. Positions the sticky sidebar correctly */
|
|
.card.sticky-top {
|
|
/* Start scrolling the sidebar just below the two navbars + a small gap */
|
|
top: calc(var(--sticky-navbar-total-height) + 15px);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* RTL / ARABIC SUPPORT - Optimized */
|
|
/* ---------------------------------------------------------------------- */
|
|
html[dir="rtl"] {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Flip Margin Utilities (m-end and m-start) */
|
|
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
|
|
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
|
|
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
|
|
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
|
|
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } /* For the globe icon */
|
|
|
|
/* Flip alignment for text-end/text-start */
|
|
html[dir="rtl"] .text-end { text-align: left !important; }
|
|
html[dir="rtl"] .text-start { text-align: right !important; }
|
|
|
|
/* Flip border-left for RTL alerts */
|
|
html[dir="rtl"] .alert {
|
|
border-right: 5px solid;
|
|
border-left: none;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* MOBILE RESPONSIVE STYLES (Below 992px) */
|
|
/* ---------------------------------------------------------------------- */
|
|
@media (max-width: 991.98px) {
|
|
|
|
/* Ensures dropdown items in mobile menu align correctly */
|
|
html[dir="rtl"] .navbar-collapse .dropdown-menu {
|
|
text-align: right;
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
/* On mobile, the top navbar is generally only 56px tall when collapsed. */
|
|
#bottomNavbar {
|
|
top: calc(var(--navbar-height) + var(--navbar-gap));
|
|
}
|
|
|
|
.main-content-area {
|
|
/* Reduced margin-top for smaller screens */
|
|
margin-top: calc(var(--sticky-navbar-total-height) / 2);
|
|
}
|
|
|
|
/* Mobile Fixed Footer Bar for Application */
|
|
.mobile-fixed-apply-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
padding: 15px;
|
|
background-color: var(--light-bg);
|
|
border-top: 1px solid #ddd;
|
|
z-index: 1000;
|
|
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Add padding to the bottom of the body content to prevent it from hiding under the fixed bar */
|
|
body {
|
|
padding-bottom: 90px;
|
|
}
|
|
|
|
/* Fix job overview grid responsiveness (ensures 1 column) */
|
|
.row-cols-md-2 > .col {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav id="topNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: white; z-index: 1040;">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand text-white fw-bold" href="{% url 'kaauh_career' %}">
|
|
<img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
|
|
</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">
|
|
|
|
<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="{% url 'kaauh_career' %}">{% translate "Careers" %}</a>
|
|
</li>
|
|
|
|
<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' %}">
|
|
<i class="fas fa-globe"></i>
|
|
<span class="d-inline">{{ LANGUAGE_CODE|upper }}</span>
|
|
</button>
|
|
|
|
<ul class="dropdown-menu {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-start{% else %}dropdown-menu-end{% endif %}" aria-labelledby="navbarLanguageDropdown">
|
|
|
|
{% comment %} English Button {% endcomment %}
|
|
<li>
|
|
<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="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
|
|
<span class="me-2">🇺🇸</span> English
|
|
</button>
|
|
</form>
|
|
</li>
|
|
|
|
{% comment %} Arabic Button {% endcomment %}
|
|
<li>
|
|
<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="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
|
|
<span class="me-2">🇸🇦</span> العربية (Arabic)
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
{% block content %}
|
|
|
|
{% endblock content %}
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |