Merge pull request 'base.html update' (#15) from frontend into main
Reviewed-on: #15
This commit is contained in:
commit
0f19a40518
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -5,9 +5,11 @@ from django.forms.formsets import formset_factory
|
||||
from django.utils.translation import gettext_lazy as _
|
||||
from crispy_forms.helper import FormHelper
|
||||
from crispy_forms.layout import Layout, Submit, Row, Column, Field, Div
|
||||
from django.contrib.auth.models import User
|
||||
from .models import (
|
||||
ZoomMeeting, Candidate,TrainingMaterial,JobPosting,
|
||||
FormTemplate,InterviewSchedule,BreakTime,JobPostingImage
|
||||
FormTemplate,InterviewSchedule,BreakTime,JobPostingImage,
|
||||
Profile
|
||||
)
|
||||
# from django_summernote.widgets import SummernoteWidget
|
||||
from django_ckeditor_5.widgets import CKEditor5Widget
|
||||
@ -505,4 +507,16 @@ class ScheduleInterviewForCandiateForm(forms.ModelForm):
|
||||
'end_time': forms.TimeInput(attrs={'type': 'time', 'class': 'form-control'}),
|
||||
'interview_duration': forms.NumberInput(attrs={'class': 'form-control'}),
|
||||
'buffer_time': forms.NumberInput(attrs={'class': 'form-control'}),
|
||||
}
|
||||
}
|
||||
|
||||
class ProfileImageUploadForm(forms.ModelForm):
|
||||
class Meta:
|
||||
model=Profile
|
||||
fields=['profile_image']
|
||||
|
||||
|
||||
|
||||
# class UserEditForms(forms.ModelForm):
|
||||
# class Meta:
|
||||
# model = User
|
||||
# fields = ['first_name', 'last_name']
|
||||
@ -10,6 +10,7 @@ from django_countries.fields import CountryField
|
||||
from django.urls import reverse
|
||||
# from ckeditor.fields import RichTextField
|
||||
from django_ckeditor_5.fields import CKEditor5Field
|
||||
from django.utils.html import strip_tags
|
||||
|
||||
|
||||
|
||||
@ -246,6 +247,43 @@ class JobPosting(Base):
|
||||
"form_wizard", kwargs={"slug": self.form_template.slug}
|
||||
)
|
||||
self.save()
|
||||
|
||||
def _check_content(self, field_value):
|
||||
"""Helper to check if a field contains meaningful content."""
|
||||
if not field_value:
|
||||
return False
|
||||
|
||||
# 1. Replace the common HTML non-breaking space entity with a standard space.
|
||||
content = field_value.replace(' ', ' ')
|
||||
|
||||
# 2. Remove all HTML tags (leaving only text and remaining spaces).
|
||||
stripped = strip_tags(content)
|
||||
|
||||
# 3. Use .strip() to remove ALL leading/trailing whitespace, including the ones from step 1.
|
||||
final_content = stripped.strip()
|
||||
|
||||
# Return True if any content remains after stripping tags and spaces.
|
||||
return bool(final_content)
|
||||
|
||||
|
||||
@property
|
||||
def has_description_content(self):
|
||||
"""Returns True if the description field has meaningful content."""
|
||||
return self._check_content(self.description)
|
||||
|
||||
@property
|
||||
def has_qualifications_content(self):
|
||||
"""Returns True if the qualifications field has meaningful content."""
|
||||
return self._check_content(self.qualifications)
|
||||
|
||||
# Add similar properties for benefits and application_instructions
|
||||
@property
|
||||
def has_benefits_content(self):
|
||||
return self._check_content(self.benefits)
|
||||
|
||||
@property
|
||||
def has_application_instructions_content(self):
|
||||
return self._check_content(self.application_instructions)
|
||||
|
||||
|
||||
class JobPostingImage(models.Model):
|
||||
|
||||
@ -107,5 +107,7 @@ urlpatterns = [
|
||||
|
||||
|
||||
# users urls
|
||||
path('user/<int:pk>',views.user_detail,name='user_detail')
|
||||
path('user/<int:pk>',views.user_detail,name='user_detail'),
|
||||
path('user/user_profile_image_update/<int:pk>',views.user_profile_image_update,name='user_profile_image_update'),
|
||||
|
||||
]
|
||||
|
||||
@ -19,7 +19,9 @@ from .forms import (
|
||||
FormTemplateForm,
|
||||
InterviewScheduleForm,JobPostingStatusForm,
|
||||
BreakTimeFormSet,
|
||||
JobPostingImageForm
|
||||
JobPostingImageForm,
|
||||
ProfileImageUploadForm,
|
||||
|
||||
)
|
||||
from rest_framework import viewsets
|
||||
from django.contrib import messages
|
||||
@ -51,7 +53,8 @@ from .models import (
|
||||
ZoomMeeting,
|
||||
Candidate,
|
||||
JobPosting,
|
||||
ScheduledInterview
|
||||
ScheduledInterview,
|
||||
JobPostingImage
|
||||
)
|
||||
import logging
|
||||
from datastar_py.django import (
|
||||
@ -316,7 +319,7 @@ def job_detail(request, slug):
|
||||
|
||||
|
||||
status_form = JobPostingStatusForm(instance=job)
|
||||
image_upload_form=JobPostingImageForm(instance=job)
|
||||
image_upload_form=JobPostingImageForm(instance=job.post_images)
|
||||
|
||||
|
||||
|
||||
@ -334,6 +337,7 @@ def job_detail(request, slug):
|
||||
|
||||
return redirect('job_detail', slug=slug)
|
||||
else:
|
||||
|
||||
|
||||
messages.error(request, "Failed to update status due to validation errors.")
|
||||
|
||||
@ -355,19 +359,32 @@ def job_detail(request, slug):
|
||||
def job_image_upload(request, slug):
|
||||
#only for handling the post request
|
||||
job=get_object_or_404(JobPosting,slug=slug)
|
||||
if request.method=='POST':
|
||||
image_upload_form=JobPostingImageForm(request.POST,request.FILES)
|
||||
try:
|
||||
instance = JobPostingImage.objects.get(job=job)
|
||||
except JobPostingImage.DoesNotExist:
|
||||
# If it doesn't exist, create a new instance placeholder
|
||||
instance = None
|
||||
|
||||
if request.method == 'POST':
|
||||
# Pass the existing instance to the form if it exists
|
||||
image_upload_form = JobPostingImageForm(request.POST, request.FILES, instance=instance)
|
||||
|
||||
if image_upload_form.is_valid():
|
||||
image_upload_form = image_upload_form.save(commit=False)
|
||||
|
||||
image_upload_form.job = job
|
||||
image_upload_form.save()
|
||||
messages.success(request, f"Image uploaded successfully for {job.title}.")
|
||||
return redirect('job_detail', slug=job.slug)
|
||||
|
||||
# If creating a new one (instance is None), set the job link manually
|
||||
if instance is None:
|
||||
image_instance = image_upload_form.save(commit=False)
|
||||
image_instance.job = job
|
||||
image_instance.save()
|
||||
messages.success(request, f"Image uploaded successfully for {job.title}.")
|
||||
else:
|
||||
# If updating, the form will update the instance passed to it
|
||||
image_upload_form.save()
|
||||
messages.success(request, f"Image updated successfully for {job.title}.")
|
||||
|
||||
else:
|
||||
|
||||
|
||||
messages.error(request, "Image upload failed: Please ensure a valid image file was selected.")
|
||||
|
||||
return redirect('job_detail', slug=job.slug)
|
||||
return redirect('job_detail', slug=job.slug)
|
||||
|
||||
@ -387,7 +404,7 @@ def kaauh_career(request):
|
||||
# job detail facing the candidate:
|
||||
def job_detail_candidate(request, slug):
|
||||
job = get_object_or_404(JobPosting, slug=slug)
|
||||
return render(request, "jobs/job_detail_candidate.html", {"job": job})
|
||||
return render(request, "forms/job_detail_candidate.html", {"job": job})
|
||||
|
||||
|
||||
def post_to_linkedin(request, slug):
|
||||
@ -2337,6 +2354,43 @@ def schedule_meeting_for_candidate(request, slug, candidate_pk):
|
||||
|
||||
|
||||
|
||||
def user_detail(requests,pk):
|
||||
user=get_object_or_404(User,pk=pk)
|
||||
return render(requests,'user/profile.html')
|
||||
def user_profile_image_update(request, pk):
|
||||
user = get_object_or_404(User, pk=pk)
|
||||
|
||||
if request.method == 'POST':
|
||||
profile_form = ProfileImageUploadForm(request.POST, request.FILES, instance=user.profile)
|
||||
if profile_form.is_valid():
|
||||
profile_form.save()
|
||||
messages.success(request, 'Image uploaded successfully')
|
||||
return redirect('user_detail', pk=user.pk)
|
||||
else:
|
||||
messages.error(request, 'An error occurred while uploading the image')
|
||||
else:
|
||||
profile_form = ProfileImageUploadForm(instance=user.profile)
|
||||
|
||||
context = {
|
||||
'profile_form': profile_form,
|
||||
'user': user,
|
||||
}
|
||||
return render(request, 'user/profile.html', context)
|
||||
|
||||
|
||||
|
||||
def user_detail(request, pk):
|
||||
user = get_object_or_404(User, pk=pk)
|
||||
profile_form = ProfileImageUploadForm(instance=user.profile)
|
||||
if request.method == 'POST':
|
||||
first_name=request.POST.get('first_name')
|
||||
last_name=request.POST.get('last_name')
|
||||
if first_name:
|
||||
user.first_name=first_name
|
||||
if last_name:
|
||||
user.last_name=last_name
|
||||
user.save()
|
||||
context = {
|
||||
|
||||
'user': user,
|
||||
'profile_form':profile_form
|
||||
|
||||
}
|
||||
return render(request, 'user/profile.html', context)
|
||||
|
||||
@ -1,947 +0,0 @@
|
||||
|
||||
/* Custom CSS for NorahUniversity ATS */
|
||||
/* Keep only essential custom styles that Bootstrap doesn't handle */
|
||||
|
||||
/* Primary Brand Color */
|
||||
:root {
|
||||
--primary-color: #1b8354;
|
||||
--primary-hover: #155f3e;
|
||||
}
|
||||
|
||||
/* Header and Navigation */
|
||||
.header {
|
||||
background-color: white !important;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
|
||||
border-bottom: 1px solid #e0e0e0 !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: white !important;
|
||||
border-bottom: 1px solid #e0e0e0 !important;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: var(--primary-color) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: var(--primary-color) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Buttons - Override Bootstrap primary color */
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-hover) !important;
|
||||
border-color: var(--primary-hover) !important;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border-color: var(--primary-color) !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
border: 1px solid #e0e0e0 !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid #e0e0e0 !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
/* Table Improvements */
|
||||
.table-hover tbody tr:hover {
|
||||
background-color: rgba(27, 131, 84, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Custom Badge Colors */
|
||||
.badge.bg-success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.badge.bg-warning {
|
||||
background-color: #ffc107 !important;
|
||||
}
|
||||
|
||||
/* Form Improvements */
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color) !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.nav-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.text-primary-custom {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.bg-primary-custom {
|
||||
background-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.border-primary-custom {
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Icon Styling */
|
||||
.heroicon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.size-6 {
|
||||
width: 1.5rem !important;
|
||||
height: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* Responsive icon sizing */
|
||||
.icon-sm {
|
||||
width: 0.875rem !important;
|
||||
height: 0.875rem !important;
|
||||
margin-right: 0.375rem !important;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
width: 1.125rem !important;
|
||||
height: 1.125rem !important;
|
||||
margin-right: 0.625rem !important;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
width: 1.5rem !important;
|
||||
height: 1.5rem !important;
|
||||
margin-right: 0.75rem !important;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
width: 2rem !important;
|
||||
height: 2rem !important;
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
|
||||
/* Context-specific icon adjustments */
|
||||
.btn-sm .heroicon,
|
||||
.btn-sm .size-6,
|
||||
.btn-sm .icon-md {
|
||||
width: 0.875rem !important;
|
||||
height: 0.875rem !important;
|
||||
margin-right: 0.375rem !important;
|
||||
}
|
||||
|
||||
.nav-link .heroicon,
|
||||
.nav-link .size-6 {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.card-header .heroicon,
|
||||
.card-header .size-6 {
|
||||
width: 1.375rem !important;
|
||||
height: 1.375rem !important;
|
||||
margin-right: 0.625rem !important;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.navbar,
|
||||
.header,
|
||||
.btn,
|
||||
.pagination {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments for icons */
|
||||
@media (max-width: 768px) {
|
||||
.nav-link .heroicon,
|
||||
.nav-link .size-6 {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
margin-right: 0.375rem !important;
|
||||
}
|
||||
|
||||
.card-header .heroicon,
|
||||
.card-header .size-6 {
|
||||
width: 1.125rem !important;
|
||||
height: 1.125rem !important;
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header and Search Enhancements */
|
||||
.card-header {
|
||||
background-color: white !important;
|
||||
border-bottom: 1px solid #e0e0e0 !important;
|
||||
padding: 1.25rem 1.5rem !important;
|
||||
}
|
||||
|
||||
.card-header h1,
|
||||
.card-header h2,
|
||||
.card-header h3 {
|
||||
margin-bottom: 0 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.card-header h1.h3,
|
||||
.card-header h2.h3,
|
||||
.card-header h3.h3 {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
/* Search Form Enhancements */
|
||||
.search-form-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: #f8f9fa !important;
|
||||
border: 1px solid #ced4da !important;
|
||||
/* border-right: none !important; */
|
||||
color: #495057 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.input-group-text:hover {
|
||||
background-color: #e9ecef !important;
|
||||
}
|
||||
|
||||
.input-group-text .heroicon {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color) !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15) !important;
|
||||
}
|
||||
|
||||
.form-control:focus + .input-group-text {
|
||||
border-color: var(--primary-color) !important;
|
||||
background-color: rgba(27, 131, 84, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Button Group Enhancements */
|
||||
.d-flex.gap-2 .btn {
|
||||
white-space: nowrap !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.d-flex.gap-2 .btn:hover {
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.d-flex.gap-2 .btn svg {
|
||||
margin-right: 0.375rem !important;
|
||||
}
|
||||
|
||||
/* Responsive Header Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.card-header {
|
||||
padding: 1rem 1.25rem !important;
|
||||
}
|
||||
|
||||
.card-header h1.h3,
|
||||
.card-header h2.h3,
|
||||
.card-header h3.h3 {
|
||||
font-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
min-width: 200px !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.d-flex.gap-2 {
|
||||
flex-wrap: wrap !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.d-flex.gap-2 .btn {
|
||||
flex: 1 !important;
|
||||
min-width: 120px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.card-header {
|
||||
padding: 0.875rem 1rem !important;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
.d-flex.gap-2 .btn {
|
||||
font-size: 0.875rem !important;
|
||||
padding: 0.375rem 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Search Input Placeholder */
|
||||
.form-control::placeholder {
|
||||
color: #6c757d !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
/* Enhanced Focus States */
|
||||
.form-control:focus::placeholder {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Detail Page Enhancements */
|
||||
.detail-page-header {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.1) 100%);
|
||||
border-bottom: 3px solid var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.detail-page-header h1 {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Information Cards Enhancement */
|
||||
.info-card {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
background: #e9ecef;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.info-card .info-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.info-card .info-value {
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Action Cards Enhancement */
|
||||
.action-card {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-radius: 0.75rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Resume File Display */
|
||||
.resume-file {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.resume-file:hover {
|
||||
background: #e9ecef;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.resume-file .file-name {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.resume-file .file-info {
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Parsed Data Grid Enhancement */
|
||||
.parsed-data-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.parsed-data-item {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.parsed-data-item:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(27, 131, 84, 0.1);
|
||||
}
|
||||
|
||||
.parsed-data-item .data-key {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.parsed-data-item .data-value {
|
||||
font-size: 0.875rem;
|
||||
color: #495057;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Status Badge Enhancement */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.status-badge .heroicon {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
|
||||
/* Contact Information Enhancement */
|
||||
.contact-info-item {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e0e0e0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.contact-info-item:hover {
|
||||
background: #f8f9fa;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(27, 131, 84, 0.1);
|
||||
}
|
||||
|
||||
.contact-info-item .contact-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: #6c757d;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.contact-info-item .contact-value {
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
font-weight: 500;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* Responsive Detail Page Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.detail-page-header {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.05) 100%);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.detail-page-header h1 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.parsed-data-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-info-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.detail-page-header h1 {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.info-card .info-label {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.info-card .info-value {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading Animation for Detail Pages */
|
||||
.detail-loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Print Styles for Detail Pages */
|
||||
@media print {
|
||||
.detail-page-header {
|
||||
background: white !important;
|
||||
border: 2px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
.detail-page-header h1 {
|
||||
color: #212529 !important;
|
||||
}
|
||||
|
||||
.contact-info-item,
|
||||
.info-card,
|
||||
.parsed-data-item {
|
||||
border: 1px solid #dee2e6 !important;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.action-card {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form and Update Page Enhancements */
|
||||
.form-page-header {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.1) 100%);
|
||||
border-bottom: 3px solid var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.form-page-header h1 {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.form-page-header p {
|
||||
color: rgba(27, 131, 84, 0.8) !important;
|
||||
}
|
||||
|
||||
/* Form Section Enhancement */
|
||||
.form-section {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
border-radius: 0.375rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-section:hover {
|
||||
background: #e9ecef;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-section h5 {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-section .section-icon {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
}
|
||||
|
||||
/* Form Field Enhancement */
|
||||
.form-field-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-field-wrapper label {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-field-wrapper .required-indicator {
|
||||
color: #dc3545;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-field-wrapper .field-icon {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 2.5rem;
|
||||
color: #6c757d;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15);
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-control.is-invalid,
|
||||
.form-select.is-invalid {
|
||||
border-color: #dc3545;
|
||||
padding-right: 2.5rem;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.form-control.is-valid,
|
||||
.form-select.is-valid {
|
||||
border-color: #28a745;
|
||||
padding-right: 2.5rem;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.invalid-feedback,
|
||||
.valid-feedback {
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
color: #dc3545;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.valid-feedback {
|
||||
color: #28a745;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Form Enhancement for Special Fields */
|
||||
.form-check-input {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* Action Buttons Enhancement */
|
||||
.form-action-buttons {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.form-action-buttons .btn {
|
||||
min-width: 120px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-action-buttons .btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Responsive Form Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.form-section {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section h5 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.625rem 0.75rem;
|
||||
}
|
||||
|
||||
.form-field-wrapper label {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-text,
|
||||
.invalid-feedback,
|
||||
.valid-feedback {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.form-action-buttons {
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.form-action-buttons .btn {
|
||||
min-width: 100px;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.form-section {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-section h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 0.813rem;
|
||||
padding: 0.5rem 0.625rem;
|
||||
}
|
||||
|
||||
.form-field-wrapper {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-action-buttons {
|
||||
flex-direction: column !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.form-action-buttons .btn {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading State for Forms */
|
||||
.form-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.form-loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-loading .spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Print Styles for Forms */
|
||||
@media print {
|
||||
.form-page-header,
|
||||
.form-section,
|
||||
.form-action-buttons {
|
||||
border: 1px solid #dee2e6 !important;
|
||||
background: white !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
border: 1px solid #000 !important;
|
||||
background: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* File Upload Enhancement */
|
||||
.form-control[type="file"] {
|
||||
padding: 0.5rem;
|
||||
border: 2px dashed #dee2e6;
|
||||
background: #f8f9fa;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control[type="file"]:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: #f0f8f4;
|
||||
}
|
||||
|
||||
.form-control[type="file"]:focus {
|
||||
border-color: var(--primary-color);
|
||||
background: white;
|
||||
box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15);
|
||||
}
|
||||
|
||||
/* Checkbox and Radio Enhancement */
|
||||
.form-check-input:checked ~ .form-check-label::before {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.form-check-input:focus ~ .form-check-label::before {
|
||||
box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.25);
|
||||
}
|
||||
|
||||
/* Help Text Enhancement */
|
||||
.help-text {
|
||||
font-size: 0.813rem;
|
||||
color: #6c757d;
|
||||
margin-top: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.help-text .help-icon {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Error State Enhancement */
|
||||
.field-error {
|
||||
border-color: #dc3545 !important;
|
||||
background-color: #fff5f5 !important;
|
||||
}
|
||||
|
||||
.field-error:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Success State Enhancement */
|
||||
.field-success {
|
||||
border-color: #28a745 !important;
|
||||
background-color: #f8fff9 !important;
|
||||
}
|
||||
|
||||
.field-success:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
{% load i18n static %}
|
||||
{% load partials %}
|
||||
{% load static i18n %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
|
||||
<head>
|
||||
@ -8,12 +9,17 @@
|
||||
<meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Applicant Tracking System' %}">
|
||||
<title>{% block title %}{% trans 'University ATS' %}{% endblock %}</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% 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.5.0/css/all.min.css">
|
||||
{% comment %} <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> {% endcomment %}
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
||||
|
||||
|
||||
{% block customCSS %}{% endblock %}
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
||||
@ -21,218 +27,219 @@
|
||||
<div class="top-bar d-none d-md-block">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center gap-2 max-width-1600">
|
||||
<div class="d-flex align-items-center gap-3 social-icons">
|
||||
</div>
|
||||
<div class="contact-info d-flex gap-3">
|
||||
</div>
|
||||
<div class="logo-container d-flex gap-2">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy">
|
||||
<div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 ms-4">
|
||||
<div class="hospital-text text-center text-md-start me-3">
|
||||
<div class="ar small">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
|
||||
<div class="ar small">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
|
||||
<div class="en small">Princess Nourah bint Abdulrahman University</div>
|
||||
<div class="en small">King Abdullah bin Abdulaziz University Hospital</div>
|
||||
</div>
|
||||
<div class="clogo-container d-flex gap-2">
|
||||
</div>
|
||||
<div class="logo-container d-flex gap-2 align-items-center">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy" style="height: 35px; object-fit: contain;">
|
||||
|
||||
<div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 me-0">
|
||||
<div class="hospital-text text-center text-md-start me-0">
|
||||
<div class="ar text-xs">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
|
||||
<div class="ar text-xs">ومستشفى الملك عبدالله بن عبدالرحمن التخصصي</div>
|
||||
<div class="en text-xs">Princess Nourah bint Abdulrahman University</div>
|
||||
<div class="en text-xs">King Abdullah bin Abdulaziz University Hospital</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 100px;max-width:100px;">
|
||||
<img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 40px; max-width: 40px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-content-wrapper max-width-1600 d-flex justify-content-between align-items-center" style="width: 100%;">
|
||||
<a class="navbar-brand text-white d-none d-md-block" href="{% url 'dashboard' %}">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
|
||||
</a>
|
||||
<div class="container-fluid max-width-1600">
|
||||
|
||||
{# --- MOBILE BRAND LOGIC: Show small logo on mobile, large on desktop (lg) --- #}
|
||||
<a class="navbar-brand text-white d-block d-lg-none" href="{% url 'dashboard' %}" aria-label="Home">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="{% trans 'kaauh logo green bg' %}" class="navbar-brand-mobile">
|
||||
</a>
|
||||
|
||||
<a class="navbar-brand text-white d-none d-lg-block" href="{% url 'dashboard' %}" aria-label="Home">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item me-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
{% include "icons/jobs.html" %}
|
||||
{% trans "Jobs" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item me-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
{% include "icons/users.html" %}
|
||||
{% trans "Applicants" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item me-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
{% trans "Meetings" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item me-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
|
||||
</svg>
|
||||
|
||||
{% trans "Training" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown ms-2">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
||||
data-bs-offset="0, 8" data-bs-auto-close="outside">
|
||||
{% trans "More" %}
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-bs-popper="static">
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav me-2">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="language-toggle-btn dropdown-toggle" href="#" role="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-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
|
||||
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{# Toggler: order-lg-0 ensures it's before navigation links on desktop, but it stays where it is on mobile #}
|
||||
<button class="navbar-toggler order-lg-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
{# Language and Profile Controls (Keep outside collapse for mobile access) #}
|
||||
<div class="d-flex align-items-center order-lg-3">
|
||||
<ul class="navbar-nav flex-row">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="language-toggle-btn dropdown-toggle" href="#" role="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-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-start{% else %}dropdown-menu-end{% endif %}" data-bs-popper="static">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<ul class="navbar-nav ms-4">
|
||||
<li class="nav-item dropdown">
|
||||
<button
|
||||
class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="{% trans 'Toggle user menu' %}"
|
||||
data-bs-auto-close="outside"
|
||||
data-bs-offset="0, 8"
|
||||
>
|
||||
{% if user.profile.profile_image %}
|
||||
<img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
||||
style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar" title="{% trans 'Your account' %}">
|
||||
{{ user.username|first|upper }}
|
||||
<ul class="navbar-nav ms-2 ms-lg-4">
|
||||
<li class="nav-item dropdown">
|
||||
<button
|
||||
class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="{% trans 'Toggle user menu' %}"
|
||||
data-bs-auto-close="outside"
|
||||
data-bs-offset="0, 16" {# Vertical offset remains 16px to prevent clipping #}
|
||||
>
|
||||
{% if user.profile.profile_image %}
|
||||
<img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
||||
style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar" title="{% trans 'Your account' %}">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
<ul
|
||||
{# FINAL FIX: Always use dropdown-menu-end. In LTR (English), this aligns right. In RTL (Arabic), this aligns left. #}
|
||||
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.profile_image %}
|
||||
<img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
|
||||
style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
|
||||
style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
|
||||
data-bs-popper="static"
|
||||
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.profile_image %}
|
||||
<img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
|
||||
style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
|
||||
style="width: 44px; height: 44px; background-color: var(--kaauh-teal); 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>
|
||||
<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>
|
||||
</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" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
|
||||
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
|
||||
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
|
||||
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
|
||||
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#">
|
||||
{% if not request.session.linkedin_authenticated %}
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'linkedin_login' %}">
|
||||
<i class="fab fa-linkedin me-1"></i> {% trans "Connect LinkedIn" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<i class="fab fa-linkedin text-primary me-1"></i>
|
||||
<span class="text-primary d-none d-lg-inline ms-auto me-3">
|
||||
{% trans "LinkedIn Connected" %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a></li>
|
||||
|
||||
<li><hr class="dropdown-divider my-1"></li>
|
||||
</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" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
|
||||
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
|
||||
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
|
||||
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
|
||||
|
||||
{% comment %} CORRECTED LINKEDIN BLOCK {% endcomment %}
|
||||
{% if not request.session.linkedin_authenticated %}
|
||||
<li>
|
||||
<form method="post" action="{% url 'account_logout'%}" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="dropdown-item py-2 px-4 text-danger d-flex align-items-center border-0 bg-transparent text-start"
|
||||
aria-label="{% trans 'Sign out' %}"
|
||||
>
|
||||
<i class="fas fa-sign-out-alt me-3 fs-5"></i>
|
||||
<span>{% trans "Sign Out" %}</span>
|
||||
</button>
|
||||
</form>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'linkedin_login' %}">
|
||||
<i class="fab fa-linkedin me-3 text-primary fs-5"></i>
|
||||
<span>{% trans "Connect LinkedIn" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<li class="px-4 py-2 text-muted small">
|
||||
<i class="fab fa-linkedin text-primary me-2"></i>
|
||||
{% trans "LinkedIn Connected" %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<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 text-danger d-flex align-items-center border-0 bg-transparent text-start"
|
||||
aria-label="{% trans 'Sign out' %}"
|
||||
>
|
||||
<i class="fas fa-sign-out-alt me-3 fs-5"></i>
|
||||
<span>{% trans "Sign Out" %}</span>
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{# End Language and Profile Controls #}
|
||||
|
||||
{# Main Navigation Links (This collapses on mobile) - order-lg-1 ensures it is centered on desktop #}
|
||||
<div class="collapse navbar-collapse order-lg-1" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
{# Changed me-4 to me-lg-4 so they stack tightly on mobile #}
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
{% include "icons/jobs.html" %}
|
||||
{% trans "Jobs" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
{% include "icons/users.html" %}
|
||||
{% trans "Applicants" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
{% trans "Meetings" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
|
||||
</svg>
|
||||
{% trans "Training" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown ms-lg-2">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
||||
data-bs-offset="0, 8" data-bs-auto-close="outside">
|
||||
{% trans "More" %}
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-bs-popper="static">
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -272,43 +279,24 @@
|
||||
{% include 'includes/delete_modal.html' %}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
// Find the submit button within this form
|
||||
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
||||
|
||||
if (submitButton) {
|
||||
// Disable the button
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Optional: Add a loading class for styling
|
||||
submitButton.classList.add('loading');
|
||||
|
||||
// Re-enable the button if the form submission fails
|
||||
// This ensures the button doesn't stay disabled if there's an error
|
||||
window.addEventListener('unload', function() {
|
||||
submitButton.disabled = false;
|
||||
submitButton.classList.remove('loading');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Navbar collapse auto-close on link click (Standard Mobile UX)
|
||||
const navbarCollapse = document.getElementById('navbarNav');
|
||||
if (navbarCollapse) {
|
||||
const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle)');
|
||||
// Select all links, including those inside the "More" dropdown
|
||||
const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle), .dropdown-item');
|
||||
const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse, { toggle: false });
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
// Only collapse if the nav is actually shown (i.e., on mobile)
|
||||
if (navbarCollapse.classList.contains('show')) {
|
||||
bsCollapse.hide();
|
||||
// Check if the click was on a non-dropdown-toggle or a dropdown item (which navigate away)
|
||||
if (!link.classList.contains('dropdown-toggle')) {
|
||||
bsCollapse.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -318,34 +306,15 @@
|
||||
const logoutButton = document.querySelector('form[action$="/logout/"] button');
|
||||
if (logoutButton) {
|
||||
logoutButton.addEventListener('click', (e) => {
|
||||
// Check if screen is small (e.g., Bootstrap large breakpoint is 992px)
|
||||
if (window.innerWidth <= 992) {
|
||||
// Check if screen is small (Bootstrap 'lg' breakpoint is 992px)
|
||||
if (window.innerWidth < 992) {
|
||||
const confirmed = confirm('{% trans "Are you sure you want to sign out?" %}');
|
||||
if (!confirmed) e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handle language form submission: Manually trigger click on button inside form
|
||||
document.querySelectorAll('.language-toggle-btn').forEach(toggle => {
|
||||
const menu = toggle.nextElementSibling;
|
||||
if (menu) {
|
||||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||||
item.addEventListener('click', (e) => {
|
||||
// Find the containing form and submit it
|
||||
const form = item.closest('form');
|
||||
if (form) {
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
|
||||
{% comment %} <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.5/bundles/datastar.js"></script> {% endcomment %}
|
||||
|
||||
{% block customJS %}{% endblock %}
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,40 +1,6 @@
|
||||
{% extends 'forms/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>{% translate "Application Form" %}</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>
|
||||
/* KAAT-S Theme Variables */
|
||||
: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;
|
||||
}
|
||||
{% block content %}
|
||||
<style>
|
||||
/* KAAT-S Theme Variables */
|
||||
:root {
|
||||
@ -501,57 +467,7 @@
|
||||
/* The z-index is already 1030 in the inline style, which is correct */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav
|
||||
id="topNavbar"
|
||||
class="navbar navbar-expand-lg"
|
||||
style="background-color: white; z-index: 1030"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand text-white fw-bold" href="/">
|
||||
<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="https://kaauh.edu.sa/career"
|
||||
>{% translate "Careers" %}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav
|
||||
id="bottomNavbar"
|
||||
class="navbar navbar-expand-lg sticky-top"
|
||||
@ -616,7 +532,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Application State
|
||||
const csrfToken = '{{ csrf_token }}';
|
||||
@ -1344,5 +1260,4 @@
|
||||
// Start the application
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{% endblock content %}
|
||||
88
templates/forms/job_detail_candidate.html
Normal file
88
templates/forms/job_detail_candidate.html
Normal file
@ -0,0 +1,88 @@
|
||||
{% extends 'forms/partials/candidate_facing_base.html'%}
|
||||
{% load static i18n %}
|
||||
{% block content %}
|
||||
|
||||
<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">{% trans "Job Overview" %}</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="row mb-5 mt-3 main-content-area">
|
||||
|
||||
<div class="col-lg-4 order-lg-2 order-1 d-none d-lg-block">
|
||||
<div class="card shadow-sm sticky-top">
|
||||
<div class="card-header bg-kaauh-teal-dark text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-file-signature me-2"></i>{% trans "Ready to Apply?" %}</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<p class="text-muted">{% trans "Review the job details, then apply below." %}</p>
|
||||
|
||||
{% if job.form_template %}
|
||||
<a href="{% url 'form_wizard' job.form_template.pk %}" 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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8 order-lg-1 order-2">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-kaauh-teal-dark text-white d-flex justify-content-between align-items-center">
|
||||
<h2 class="h3 mb-0 fw-bold">{{ job.title }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<h4 class="mb-3" style="color: var(--kaauh-teal-dark);">{% trans "Job Overview" %}</h4>
|
||||
<div class="row row-cols-1 row-cols-md-2 g-3 mb-4 small text-secondary">
|
||||
{% if job.salary_range %}
|
||||
<div class="col">
|
||||
<i class="fas fa-money-bill-wave text-success me-2"></i>
|
||||
<strong>{% trans "Salary:" %}</strong>
|
||||
<span class="fw-bold text-success">{{ job.salary_range }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="col">
|
||||
<i class="fas fa-calendar-alt text-muted me-2"></i>
|
||||
<strong>{% trans "Deadline:" %}</strong>
|
||||
{% if job.application_deadline %}
|
||||
{{ job.application_deadline|date:"M d, Y" }}
|
||||
{% if job.is_expired %}
|
||||
<span class="badge bg-danger ms-2">{% trans "EXPIRED" %}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="text-muted">{% trans "Not specified" %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col"> <i class="fas fa-briefcase text-muted me-2"></i> <strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }} </div>
|
||||
<div class="col"> <i class="fas fa-map-marker-alt text-muted me-2"></i> <strong>{% trans "Location:" %}</strong> {{ job.get_location_display }} </div>
|
||||
<div class="col"> <i class="fas fa-building text-muted me-2"></i> <strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }} </div>
|
||||
<div class="col"> <i class="fas fa-hashtag text-muted me-2"></i> <strong>{% trans "JOB ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }} </div>
|
||||
<div class="col"> <i class="fas fa-desktop text-muted me-2"></i> <strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }} </div>
|
||||
</div>
|
||||
|
||||
{% if job.has_description_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-info-circle me-2"></i>{% trans "Job Description" %}</h5><div class="text-secondary">{{ job.description|safe }}</div></div>{% endif %}
|
||||
{% if job.has_qualifications_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-graduation-cap me-2"></i>{% trans "Qualifications" %}</h5><div class="text-secondary">{{ job.qualifications|safe }}</div></div>{% endif %}
|
||||
{% if job.has_benefits_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-hand-holding-usd me-2"></i>{% trans "Benefits" %}</h5><div class="text-secondary">{{ job.benefits|safe }}</div></div>{% endif %}
|
||||
{% if job.has_application_instructions_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-file-alt me-2"></i>{% trans "Application Instructions" %}</h5><div class="text-secondary">{{ job.application_instructions|safe }}</div></div>{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-fixed-apply-bar d-lg-none">
|
||||
{% if job.form_template %}
|
||||
<a href="{% url 'form_wizard' job.form_template.pk %}" 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 %}
|
||||
</div>
|
||||
{% endblock content%}
|
||||
265
templates/forms/partials/candidate_facing_base.html
Normal file
265
templates/forms/partials/candidate_facing_base.html
Normal file
@ -0,0 +1,265 @@
|
||||
{% 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;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 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; }
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* 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>
|
||||
18
templates/includes/language_options.html
Normal file
18
templates/includes/language_options.html
Normal file
@ -0,0 +1,18 @@
|
||||
{% load i18n %}
|
||||
|
||||
<li>
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ next_url }}">
|
||||
<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>
|
||||
<li>
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ next_url }}">
|
||||
<button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
@ -1,628 +0,0 @@
|
||||
{% load i18n static %}
|
||||
<!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>{% block title %}{% trans 'Careers' %} - KAAUH{% endblock %}</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-light-bg: #f9fbfd;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-green-dark: #00363a;
|
||||
--kaauh-nav-bg: #004a53;
|
||||
--kaauh-dark-nav-active: #00363a;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.max-width-container {
|
||||
max-width: 1600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* === Header Top Info === */
|
||||
.header-top-info {
|
||||
background-color: white;
|
||||
padding: 15px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.header-top-info .section-divider {
|
||||
border-inline-start: 1px solid #ddd;
|
||||
height: 60px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.header-top-info .follow-us-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.header-top-info .social-icon-circle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.header-top-info .social-icon-circle:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
}
|
||||
|
||||
.header-top-info .contact-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.header-top-info .contact-icon-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
min-height: 60px;
|
||||
}
|
||||
.header-top-info .contact-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--kaauh-teal);
|
||||
margin-inline-end: 15px;
|
||||
}
|
||||
.header-top-info .contact-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: start;
|
||||
}
|
||||
.header-top-info .contact-details span:first-child {
|
||||
font-weight: bold;
|
||||
color: var(--kaauh-teal);
|
||||
}
|
||||
.header-top-info .contact-details span:last-child {
|
||||
font-size: 0.85rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.header-top-info .logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
.header-top-info .vision-logo-container {
|
||||
border-inline-start: 1px solid #ddd;
|
||||
padding-inline-start: 20px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-top-info .vision-logo {
|
||||
max-height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
.header-top-info .kaauh-logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-inline-start: 1px solid #ddd;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
.header-top-info .kaauh-logo-container img {
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
.header-top-info .hospital-text {
|
||||
line-height: 1.2;
|
||||
text-align: initial;
|
||||
}
|
||||
.header-top-info .hospital-text .ar {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: var(--kaauh-teal-dark);
|
||||
}
|
||||
.header-top-info .hospital-text .en {
|
||||
font-size: 0.8rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* === Main Navbar === */
|
||||
.navbar-main {
|
||||
background-color: var(--kaauh-nav-bg);
|
||||
padding: 0;
|
||||
min-height: 60px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
.navbar-main .nav-link {
|
||||
color: white !important;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
padding: 1.1rem 1.2rem;
|
||||
transition: background-color 0.2s;
|
||||
border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
|
||||
line-height: 1;
|
||||
}
|
||||
.navbar-main .nav-link:hover,
|
||||
.navbar-main .nav-link.active {
|
||||
background-color: var(--kaauh-dark-nav-active);
|
||||
border-inline-end: 1px solid var(--kaauh-dark-nav-active);
|
||||
}
|
||||
.navbar-main .nav-icons-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--kaauh-dark-nav-active);
|
||||
height: 100%;
|
||||
min-height: 60px;
|
||||
}
|
||||
.navbar-main .nav-icon {
|
||||
color: white;
|
||||
padding: 0 15px;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.navbar-main .nav-icon:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.navbar-main .profile-icon {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.navbar-main .lang-switch {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
}
|
||||
.navbar-main .dropdown-menu {
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
border: none;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
|
||||
}
|
||||
.navbar-main .dropdown-item:hover {
|
||||
background-color: var(--kaauh-light-bg);
|
||||
color: var(--kaauh-teal-dark);
|
||||
}
|
||||
.navbar-toggler {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.navbar-toggler:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-toggler-icon {
|
||||
filter: invert(1);
|
||||
}
|
||||
.navbar-main .collapse {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
.footer-main {
|
||||
background-color: var(--kaauh-green-dark);
|
||||
color: white;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
.footer-main a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.footer-main a:hover {
|
||||
color: var(--kaauh-teal);
|
||||
}
|
||||
.footer-main h5 {
|
||||
color: var(--kaauh-teal);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.footer-main .social-icons a {
|
||||
font-size: 1.5rem;
|
||||
margin-inline-end: 15px;
|
||||
}
|
||||
.footer-main .contact-info,
|
||||
.footer-main .app-download {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.footer-bottom {
|
||||
background-color: #00282b;
|
||||
padding: 1rem 0;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.footer-bottom strong {
|
||||
color: white;
|
||||
}
|
||||
.footer-main .col-lg-3, .footer-main .col-lg-5 {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.footer-main .vision-logo {
|
||||
max-width: 100px;
|
||||
}
|
||||
.footer-main .app-store-badge,
|
||||
.footer-main .play-store-badge {
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* === Hero Section === */
|
||||
.hero-section {
|
||||
height: 50vh;
|
||||
background: url('{% static "image/hospital-bg.jpg" %}') no-repeat center center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.hero-content {
|
||||
z-index: 10;
|
||||
}
|
||||
.hero-content h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.breadcrumb-section {
|
||||
padding: 10px 0;
|
||||
background-color: #f1f1f1;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.breadcrumb-item a {
|
||||
color: #6c757d;
|
||||
}
|
||||
.breadcrumb-item.active {
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-teal-dark);
|
||||
}
|
||||
|
||||
/* === RTL Adjustments === */
|
||||
html[dir="rtl"] {
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
}
|
||||
html[dir="rtl"] .max-width-container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
html[dir="rtl"] .header-top-info .section-divider {
|
||||
border-inline-start: none;
|
||||
border-inline-end: 1px solid #ddd;
|
||||
}
|
||||
html[dir="rtl"] .header-top-info .contact-icon {
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 15px;
|
||||
}
|
||||
html[dir="rtl"] .header-top-info .contact-details {
|
||||
text-align: right;
|
||||
}
|
||||
html[dir="rtl"] .header-top-info .vision-logo-container {
|
||||
border-inline-start: none;
|
||||
border-inline-end: 1px solid #ddd;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 20px;
|
||||
}
|
||||
html[dir="rtl"] .header-top-info .kaauh-logo-container {
|
||||
border-inline-start: none;
|
||||
border-inline-end: 1px solid #ddd;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 20px;
|
||||
}
|
||||
html[dir="rtl"] .header-top-info .kaauh-logo-container img {
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
html[dir="rtl"] .header-top-info .hospital-text {
|
||||
text-align: right;
|
||||
}
|
||||
html[dir="rtl"] .navbar-main .nav-link {
|
||||
border-inline-end: none;
|
||||
border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
html[dir="rtl"] .navbar-main .nav-link:hover,
|
||||
html[dir="rtl"] .navbar-main .nav-link.active {
|
||||
border-inline-start: 1px solid var(--kaauh-dark-nav-active);
|
||||
}
|
||||
html[dir="rtl"] .nav-icons i {
|
||||
margin-inline-start: 10px;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
html[dir="rtl"] .top-bar .social-icons a {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
html[dir="rtl"] .footer-main .social-icons a {
|
||||
margin-inline-start: 15px;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
/* === Responsive Adjustments for Small Screens === */
|
||||
@media (max-width: 991.98px) {
|
||||
.header-top-info .max-width-container {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.header-top-info .follow-us-section,
|
||||
.header-top-info .d-flex.align-items-center.flex-grow-1.justify-content-end {
|
||||
width: 100%;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.header-top-info .contact-block,
|
||||
.header-top-info .logo-section {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-top-info .section-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-top-info .kaauh-logo-container img {
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.header-top-info .hospital-text .ar,
|
||||
.header-top-info .hospital-text .en {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.header-top-info .contact-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.header-top-info .contact-icon-block {
|
||||
min-height: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.header-top-info .kaauh-logo-container,
|
||||
.header-top-info .vision-logo-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-top-info .hospital-text {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.header-top-info .kaauh-logo-container img {
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.header-top-info .follow-us-section span,
|
||||
.header-top-info .contact-details span {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.header-top-info .social-icon-circle {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% block customCSS %}{% endblock %}
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
|
||||
<!-- Responsive Header Top Info -->
|
||||
<div class="header-top-info">
|
||||
<div class="max-width-container d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
|
||||
|
||||
<div class="follow-us-section d-flex flex-wrap align-items-center gap-2">
|
||||
<span>{% trans "Follow Us On:" %}</span>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="#" class="social-icon-circle"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" class="social-icon-circle"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" class="social-icon-circle"><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3 w-100 w-md-auto">
|
||||
<div class="d-flex flex-wrap justify-content-between gap-3">
|
||||
<div class="contact-icon-block d-flex align-items-center">
|
||||
<i class="fas fa-headset contact-icon"></i>
|
||||
<div class="contact-details ms-2">
|
||||
<span>24/7 {% trans "Online Support" %}</span>
|
||||
<span class="d-block d-md-inline">info@kaauh.edu.sa</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-icon-block d-flex align-items-center">
|
||||
<i class="fas fa-phone-alt contact-icon"></i>
|
||||
<div class="contact-details ms-2">
|
||||
<span>{% trans "Contact Us Free" %}</span>
|
||||
<span class="d-block d-md-inline">+966118200000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="logo-section d-flex flex-wrap align-items-center gap-3 mt-2 mt-md-0">
|
||||
|
||||
<div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="Vision 2030" class="vision-logo" style="min-height: 70px; min-width:300px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logo-section d-flex flex-wrap align-items-center gap-3 mt-2 mt-md-0 ms-6">
|
||||
|
||||
<div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 ms-4">
|
||||
<div class="hospital-text text-center text-md-start me-3">
|
||||
<div class="ar">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
|
||||
<div class="ar">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
|
||||
<div class="en">Princess Nourah bint Abdulrahman University</div>
|
||||
<div class="en">King Abdullah bin Abdulaziz University Hospital</div>
|
||||
</div>
|
||||
<img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 80px;min-width:80px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark navbar-main">
|
||||
<div class="max-width-container d-flex justify-content-between align-items-stretch w-100">
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#publicNavCollapse"
|
||||
aria-controls="publicNavCollapse" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="publicNavCollapse">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">{% trans "About KAAUH" %}</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{% trans "Patients & Visitor" %}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">{% trans "Find a Doctor" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#">{% trans "Visiting Hours" %}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{% trans "Training & Education" %}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">{% trans "Courses" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#">{% trans "Residency" %}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">{% trans "Gallery" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">{% trans "Connect" %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-icons-group d-none d-lg-flex">
|
||||
<a href="#" class="nav-icon profile-icon"><i class="fas fa-user-circle"></i></a>
|
||||
<a href="#" class="nav-icon lang-switch">ع</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-grow-1">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer-main mt-auto">
|
||||
<div class="max-width-container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 app-download">
|
||||
<h5 class="text-white-50">{% trans "Download our mobile app" %}</h5>
|
||||
<p>{% trans "Get the latest updates and services on the go." %}</p>
|
||||
<div class="d-flex flex-column gap-2 mt-3">
|
||||
<a href="#"><img src="{% static 'image/google-play-badge.png' %}" alt="Google Play" class="play-store-badge"></a>
|
||||
<a href="#"><img src="{% static 'image/app-store-badge.png' %}" alt="App Store" class="app-store-badge"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-6">
|
||||
<h5>{% trans "Information" %}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#">{% trans "About the Hospital" %}</a></li>
|
||||
<li><a href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a></li>
|
||||
<li><a href="#">{% trans "Today's Clinic Hours" %}</a></li>
|
||||
<li><a href="#">{% trans "Support Us" %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<h5>{% trans "Need Help" %}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#">{% trans "Support and Services" %}</a></li>
|
||||
<li><a href="#">{% trans "Contact Us" %}</a></li>
|
||||
<li><a href="#">{% trans "FAQ" %}</a></li>
|
||||
<li><a href="#">{% trans "Sitemap" %}</a></li>
|
||||
</ul>
|
||||
<div class="contact-info mt-3">
|
||||
<i class="fas fa-phone-alt me-2 text-white-50"></i> <strong class="text-white">966118200000</strong><br>
|
||||
<i class="fas fa-envelope me-2 text-white-50"></i> <a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5>{% trans "Contact & Address" %}</h5>
|
||||
<p>{% trans "KAAUH Campus, Riyadh, Saudi Arabia" %}</p>
|
||||
<p class="small text-white-50">{% trans "Postal Code 11564, King Fahd Road, Al-Rabi District." %}</p>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-start gap-3 mt-4">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="Vision 2030" class="vision-logo">
|
||||
<div class="social-icons">
|
||||
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom mt-5">
|
||||
<div class="max-width-container d-flex justify-content-between align-items-center flex-wrap">
|
||||
<p class="mb-0">
|
||||
© {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %}
|
||||
{% trans "All rights reserved." %}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
{% trans "Powered by" %} <strong class="text-white">Tenhal</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
{% block customJS %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,154 +1,568 @@
|
||||
{% extends "jobs/base_public.html" %}
|
||||
{% load i18n static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="author" content="KAAUH" />
|
||||
<meta name="title" content="Regions no.1 University Hospital">
|
||||
<meta name="description" content="King Abdullah bin Abdulaziz University Hospital is among the premier and esteemed institutions. KAAUH is the epitome of education in the healthcare sector." />
|
||||
<meta name="keywords" content="Best hospital in Saudi Arabia,Healthcare providers near me,Top healthcare providers,Health care services in saudi arabia,Best hospital in saudi arabia,Healthcare system in saudi arabia" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>King Abdullah bin Abdulaziz University Hospital</title>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="https://kaauh.edu.sa/assets/images/apple-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="https://kaauh.edu.sa/assets/images/apple-icon-60x60.png" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="https://kaauh.edu.sa/assets/images/apple-icon-72x72.png" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="https://kaauh.edu.sa/assets/images/apple-icon-76x76.png" />
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="https://kaauh.edu.sa/assets/images/apple-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="https://kaauh.edu.sa/assets/images/apple-icon-120x120.png" />
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="https://kaauh.edu.sa/assets/images/apple-icon-144x144.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="https://kaauh.edu.sa/assets/images/apple-icon-152x152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://kaauh.edu.sa/assets/images/apple-icon-180x180.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="https://kaauh.edu.sa/assets/images/android-icon-192x192.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://kaauh.edu.sa/assets/images/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="https://kaauh.edu.sa/assets/images/favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://kaauh.edu.sa/assets/images/favicon-16x16.png" />
|
||||
<link rel="manifest" href="https://kaauh.edu.sa/assets/images/manifest.json" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://kaauh.edu.sa/assets/fonts/css/all.min.css" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/flaticon.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/menu.css" rel="stylesheet" />
|
||||
<link id="effect" href="https://kaauh.edu.sa/assets/css/dropdown-effects/fade-down.css" media="all" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/magnific-popup.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/owl.carousel.min.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/owl.theme.default.min.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/animate.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/normalize.min.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/style.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/responsive.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/custom.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/sweetalert2.min.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/css/toastmin.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/css/select2min.css" rel="stylesheet" />
|
||||
<link href="https://kaauh.edu.sa/assets/css/bootstrap-datepicker.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<style>
|
||||
b{font-weight: bold;}
|
||||
@font-face {font-family: Poppins-Regular;src: url("https://kaauh.edu.sa/assets/fonts/POPPINS-REGULAR.TTF");}
|
||||
@font-face {font-family: Poppins-Extrabold;src: url("https://kaauh.edu.sa/assets/fonts/POPPINS-EXTRABOLD.TTF");}
|
||||
@font-face {font-family: Rajdhani-Regular;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-REGULAR.TTF");}
|
||||
@font-face {font-family: Rajdhani-Semibold;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-SEMIBOLD.TTF");}
|
||||
@font-face {font-family: Rajdhani-Bold;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-BOLD.TTF");}
|
||||
@font-face {font-family: Serti;src: url("https://kaauh.edu.sa/assets/fonts/SERTI.OTF");}
|
||||
@font-face {font-family: Serti-bold;src: url("https://kaauh.edu.sa/assets/fonts/SERTIBOLD.OTF");}
|
||||
.lang-area span {background: #fff;width: 38px;height: 38px;display: block;border-radius: 50%;font-size: 24px;font-weight: 600;padding: 0px 14px;}
|
||||
body.yf_rtl .lang-area span {background: #fff;width: 38px;height: 38px;display: block;border-radius: 50%;font-size: 17px;font-weight: 600;padding:7px 9px;}
|
||||
@media only screen and (max-width: 767px){/* body .lang-area {display : none !important} */}
|
||||
</style>
|
||||
</head>
|
||||
<body class="" data-spy="scroll" data-target="#myScrollspy" data-offset="1" >
|
||||
<div id="loader-wrapper">
|
||||
<div id="loader">
|
||||
<div class="loader-inner" style="background:url(https://kaauh.edu.sa/assets/images/loader-kaauh.png);background-size: contain; background-position: center !important;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page" class="page">
|
||||
<header id="header-2" class="header">
|
||||
<div class="wsmobileheader clearfix">
|
||||
<a id="wsnavtoggle" class="wsanimated-arrow"><span></span></a>
|
||||
<span class="smllogo"><a href="https://kaauh.edu.sa"><img src="https://kaauh.edu.sa/assets/images/logo.png" width="180" height="40" alt="mobile-logo"></a></span>
|
||||
<div class="lang-area" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
|
||||
<a title="عربى" href="https://kaauh.edu.sa/changelanguage/ar"><span>ع</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-widget clearfix">
|
||||
<div class="shape-img"><img src="https://kaauh.edu.sa/assets/images/hos.svg" alt=""></div>
|
||||
<div class="container-fluid">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-md-9 col-xl-9">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<div class="header-widget icon-xs">
|
||||
<div class="socials-links">
|
||||
<h3>Follow us on :</h3>
|
||||
<ul class="foo-socials text-center clearfix">
|
||||
<li><a href="javascript:;" target="_blank" class="ico-facebook"><i class="fab fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://twitter.com/KAAUH_PNU?lang=ar" target="_blank" class="ico-twitter"><i class="fab fa-twitter"></i></a></li>
|
||||
<li><a href="https://www.instagram.com/kaauh_pnu/" target="_blank" class="ico-insta"><i class="fab fa-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="email-and-call">
|
||||
<div class="header-widget icon-xs online_support">
|
||||
<span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/Customer-care.svg" alt="" /></span>
|
||||
<div class="header-widget-txt">
|
||||
<p>24x7 online Support</p>
|
||||
<p class="header-widget-phone steelblue-color"><a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-widget icon-xs online_support call-support">
|
||||
<span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/call.svg" alt="" /></span>
|
||||
<div class="header-widget-txt">
|
||||
<p>Contact Us Free</p>
|
||||
<p class="header-widget-phone steelblue-color"><a href="tel:+966118200000">+966118200000</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="lang-with-vision-logo">
|
||||
<div class="saudi-log"><img src="https://kaauh.edu.sa/assets/images/vision.svg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-xl-3 logo-col">
|
||||
<div class="desktoplogo"><a href="https://kaauh.edu.sa"><img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" /></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsmainfull menu clearfix original" style="visibility: visible;">
|
||||
<div class="container-fluid">
|
||||
<div class="wsmainwp clearfix">
|
||||
<nav class="wsmenu clearfix">
|
||||
<div class="overlapblackbg"></div>
|
||||
<ul class="wsmenu-list">
|
||||
<li class="fist"><a href="https://kaauh.edu.sa/about-us">About KAAUH</a></li>
|
||||
<li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Patients & Visitor<span class="wsarrow"></span></a>
|
||||
<ul class="sub-menu">
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/registration-and-appointments">Registration & Appointments</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/meet-your-doctor">Meet your doctor</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/eligibility">Eligibility</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/visiting-hours">Visiting hours</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-rights-and-responsibilities">Patient rights & responsibilities</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-experience">Patient Experience</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Training & Education<span class="wsarrow"></span></a>
|
||||
<ul class="sub-menu">
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/training-and-development">Training & Development</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/student-training-office">Student Training Office</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/scholarship-and-postgraduate">Scholarship & Postgraduate</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="{% url 'kaauh_career' %}">Careers</a></li>
|
||||
<li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
|
||||
<li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Connect<span class="wsarrow"></span></a>
|
||||
<ul class="sub-menu">
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="lang-area d-none d-sm-none d-md-flex" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
|
||||
<a title="عربى" href='https://kaauh.edu.sa/changelanguage/ar'><span>ع</span></a>
|
||||
</div>
|
||||
|
||||
<div class="serch-area appointment-are"><a href="javascript:;" data-toggle="modal" data-target="#appointment-check" data-placement="top" title="Our Appointment"><i class="fa fa-user"></i></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsmainfull menu clearfix cloned" style="position: fixed; top: 0px; margin-top: 0px; z-index: 500; left: 0px; width: 1519.2px; display: none;">
|
||||
<div class="container-fluid">
|
||||
<div class="wsmainwp clearfix">
|
||||
<nav class="wsmenu clearfix">
|
||||
<div class="overlapblackbg"></div>
|
||||
<ul class="wsmenu-list">
|
||||
<li class="fist"><a href="https://web.archive.org/web/20240215180141/https://www.kaauh.edu.sa/about-us">About KAAUH</a></li>
|
||||
<li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Patients & Visitor<span class="wsarrow"></span></a>
|
||||
<ul class="sub-menu">
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/registration-and-appointments">Registration & Appointments</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/meet-your-doctor">Meet your doctor</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/eligibility">Eligibility</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/visiting-hours">Visiting hours</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-rights-and-responsibilities">Patient rights & responsibilities</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-experience">Patient Experience</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Training & Education<span class="wsarrow"></span></a>
|
||||
<ul class="sub-menu">
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/training-and-development">Training & Development</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/student-training-office">Student Training Office</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/scholarship-and-postgraduate">Scholarship & Postgraduate</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="{% url 'kaauh_career' %}">Careers</a></li>
|
||||
<li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
|
||||
<li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Connect<span class="wsarrow"></span></a>
|
||||
<ul class="sub-menu">
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
|
||||
<li aria-haspopup="true"><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="lang-area d-none d-sm-none d-md-flex" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
|
||||
<a title="عربى" href='https://kaauh.edu.sa/changelanguage/ar'><span>ع</span></a>
|
||||
</div>
|
||||
<div class="serch-area"><a href="javascript:;" data-toggle="modal" data-target="#serch"><i class="fa fa-magnifying-glass"></i></a></div>
|
||||
<div class="serch-area appointment-are"><a href="javascript:;" data-toggle="modal" data-target="#appointment-check" data-placement="top" title="Our Appointment"><i class="fa fa-user"></i></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="breadcrumb-area dark-bg" style="background:url(https://kaauh.edu.sa/assets/images/career_page.jpg)">
|
||||
<div class="container">
|
||||
<ul class="page-list">
|
||||
<li class="item-home"><a class="bread-link" href="https://kaauh.edu.sa" title="Home">Home</a></li>
|
||||
</ul>
|
||||
<h1 class="breadcrumb-title">Careers</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="career_page_section">
|
||||
<div class="container mb-5 mt-3">
|
||||
<div class="card">
|
||||
{% load i18n %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-stripped w-100" id="career_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-job-id">{% trans 'Job ID#' %}</th>
|
||||
<th class="col-job-title">{% trans 'Job Title' %}</th>
|
||||
<th class="col-hiring"><i class="fa fa-user" style="color:#00636e"></i> {% trans 'Hiring' %}</th>
|
||||
<th class="col-date d-none d-md-table-cell"><i class="fa fa-calendar" style="color:#00636e"></i> {% trans 'Posting Date' %}</th>
|
||||
<th class="col-date d-none d-sm-table-cell"><i class="fa fa-calendar" style="color:#00636e"></i> {% trans 'Apply Before' %}</th>
|
||||
<th class="col-link"><i class="fa fa-link" style="color:#00636e"></i> {% trans 'Link' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for job in active_jobs %}
|
||||
<tr>
|
||||
{# The columns below directly correspond to the headers above #}
|
||||
|
||||
<td class="col-job-id" data-label="{% trans 'Job ID#' %}">{{ job.internal_job_id }}</td>
|
||||
|
||||
<td class="col-job-title" data-label="{% trans 'Job Title' %}">{{ job.title }}</td>
|
||||
|
||||
<td class="col-hiring" data-label="{% trans 'Hiring' %}">{{ job.open_positions }}</td>
|
||||
|
||||
{# Hidden on small screens to prioritize space #}
|
||||
<td class="col-date d-none d-md-table-cell" data-label="{% trans 'Posting Date' %}">{{ job.application_start_date }}</td>
|
||||
|
||||
{# Hidden only on extra-small screens #}
|
||||
<td class="col-date d-none d-sm-table-cell" data-label="{% trans 'Apply Before' %}">{{ job.application_deadline }}</td>
|
||||
|
||||
<td class="col-link" data-label="{% trans 'Link' %}">
|
||||
<a style="background-color : #00636e;color : #FFF; padding : 4px 10px; white-space: nowrap;"
|
||||
href="{% url 'job_detail_candidate' job.slug %}"
|
||||
target="_blank">
|
||||
{% trans 'Apply' %}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* Custom style for the job list table */
|
||||
.job-listing-section {
|
||||
padding: 3rem 0;
|
||||
background-color: white;
|
||||
}
|
||||
.job-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||||
width: 100%;
|
||||
}
|
||||
.job-table thead th {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 1rem 1.5rem;
|
||||
text-align: start;
|
||||
border-bottom: 2px solid var(--kaauh-teal);
|
||||
}
|
||||
.job-table tbody td {
|
||||
padding: 1rem 1.5rem;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: var(--kaauh-primary-text);
|
||||
}
|
||||
.job-table tbody tr:hover {
|
||||
background-color: var(--kaauh-light-bg);
|
||||
}
|
||||
.job-link-cell {
|
||||
font-size: 0.85rem;
|
||||
text-align: center; /* Center the button in its cell */
|
||||
}
|
||||
.job-link-cell i {
|
||||
color: var(--kaauh-teal);
|
||||
}
|
||||
|
||||
/* Apply Button */
|
||||
.btn-apply {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 0.4rem 1.2rem;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.2s;
|
||||
min-width: 80px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--kaauh-teal);
|
||||
}
|
||||
.btn-apply:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
}
|
||||
.hero-section{
|
||||
background-image: url("{% static 'image/kaauh_banner.png' %}");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Hero Text Positioning */
|
||||
.hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.arabic-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* RTL specific table alignment */
|
||||
html[dir="rtl"] .job-table thead th {
|
||||
text-align: right;
|
||||
}
|
||||
html[dir="rtl"] .job-link-cell {
|
||||
text-align: center; /* Ensure button remains centered in RTL */
|
||||
/*
|
||||
* Custom CSS for mobile stacking (displaying the table as a list) on screens <= 576px.
|
||||
*/
|
||||
@media (max-width: 576px) {
|
||||
.table thead {
|
||||
display: none; /* Hide header row */
|
||||
}
|
||||
.table tr {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.table td {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-left: 50% !important;
|
||||
position: relative;
|
||||
border-top: none;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.table td::before {
|
||||
/* This is where the magic happens: it pulls the translated header text from the data-label attribute */
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
width: 45%;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Ensure the link button is visible and positioned correctly */
|
||||
.col-link a {
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
<div class="hero-section">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<p class="text-uppercase small fw-bold mb-1">
|
||||
{% trans "Home Page" %}
|
||||
</p>
|
||||
<h1 class="arabic-title">
|
||||
{% if LANGUAGE_CODE == 'ar' %}التوظيف{% else %}Careers{% endif %}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-listing-section">
|
||||
<div class="max-width-container">
|
||||
<h2 class="h3 mb-4 text-center" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||
{% trans "Open Positions" %}
|
||||
</h2>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="job-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 10%;">{% trans "Job ID" %}</th>
|
||||
<th scope="col">{% trans "Job Title" %}</th>
|
||||
<th scope="col" style="width: 10%;">{% trans "Hiring" %}</th>
|
||||
<th scope="col" style="width: 15%;">{% trans "Posting Date" %}</th>
|
||||
<th scope="col" style="width: 15%;">{% trans "Apply Before" %}</th>
|
||||
<th scope="col" style="width: 10%;">{% trans "Apply" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% comment %} Django loop would typically go here: {% for job in jobs %} {% endcomment %}
|
||||
{% for job in active_jobs %}
|
||||
<tr>
|
||||
<td class="text-nowrap">{{job.internal_job_id}}</td>
|
||||
<td class="text-nowrap">{{job.title}}</td>
|
||||
<td>{{job.open_positions}}</td>
|
||||
<td>{{job.application_start_date}}</td>
|
||||
<td>{{job.application_deadline}}</td>
|
||||
<td class="job-link-cell">
|
||||
<a href="{% url 'job_detail_candidate' job.slug %}" class="btn-apply">{% trans "Apply" %}</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="#" class="btn btn-lg btn-secondary">
|
||||
<i class="fas fa-list-alt me-2"></i> {% trans "View All Openings" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer id="footer-1" class="bg-image wide-40 footer division">
|
||||
<div class="footer-center-logo"><a href="/"><img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" /></a></div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="footer-info mb-30">
|
||||
<div class="lang-with-vision-logo footer-lang"><img src="https://kaauh.edu.sa/assets/images/vision-f.svg" alt="footer-logo" width="180" height="40"></div>
|
||||
<h5 class="h5-xs mb-0">Address</h5>
|
||||
<p class="p-sm mt-10">Airport Road, King Khalid International Airport, Riyadh 11564, Saudi Arabia</p>
|
||||
<h5 class="h5-xs">Follow us on</h5>
|
||||
<div class="footer-socials-links mt-20">
|
||||
<ul class="foo-socials text-center clearfix">
|
||||
<li><a href="javascript:;" target="_blank" class="ico-facebook"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://twitter.com/KAAUH_PNU?lang=ar" target="_blank" class="ico-twitter"><i class="fa-brands fa-twitter"></i></a></li>
|
||||
<li><a href="https://www.instagram.com/kaauh_pnu/" target="_blank" class="ico-insta"><i class="fab fa-instagram"></i></a></li>
|
||||
<li><a href="https://mail.kaauh.edu.sa/" target="_blank" class="ico-insta"><i class="fa fa-envelope"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="footer-box mb-30 need-help f-space">
|
||||
<h5 class="h5-xs">Need help</h5>
|
||||
<p class="sales-services">Sales & Service Support</p>
|
||||
<a href="tel:+966118200000">+966118200000</a><br /><br />
|
||||
<p>Monday -Friday: 9:00-20:00<br />Saturday: 9:00-15:00</p>
|
||||
<p class="foo-email mt-20">Email: <a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-2">
|
||||
<div class="footer-box mb-30 info-links f-space">
|
||||
<h5 class="h5-xs">Information</h5>
|
||||
<ul>
|
||||
<li><a href="https://kaauh.edu.sa/about-us">About KAAUH</a></li>
|
||||
<li><a href="{% url 'kaauh_career' %}">Careers</a></li>
|
||||
<li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
|
||||
<li><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
|
||||
<li><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="footer-box mb-30 apps-contact-info f-space">
|
||||
<h5 class="h5-xs">Download Our Mobile App</h5>
|
||||
<ul>
|
||||
<li><a href="https://apps.apple.com/us/app/kaauh-patient/id1502802835" target="_blank"><img src="https://kaauh.edu.sa/assets/images/app1.png" alt="" /></a></li>
|
||||
<li class="adroid"><a href="javascript:;"><img src="https://kaauh.edu.sa/assets/images/app2.png" alt="" /></a></li>
|
||||
</ul>
|
||||
<div class="email-and-call">
|
||||
<div class="header-widget icon-xs online_support">
|
||||
<span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/support-f.svg" alt="" /></span>
|
||||
<div class="header-widget-txt">
|
||||
<p>24x7 online Support</p>
|
||||
<p class="header-widget-phone steelblue-color"><a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-widget icon-xs online_support call-support">
|
||||
<span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/call-f.svg" alt="" /></span>
|
||||
<div class="header-widget-txt">
|
||||
<p>Contact Us Free</p>
|
||||
<p class="header-widget-phone steelblue-color"><a href="tel:+966118200000">+966118200000</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ads_banner"><img src="https://kaauh.edu.sa/ads.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-footer">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="footer-copyright">© 2022 Kaauh. All Rights Reserved</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="modal fade commom-popup" id="serch">
|
||||
<div class="modal-dialog modal-lg center">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="form-area">
|
||||
<div class="search-input">
|
||||
<div class="form-group">
|
||||
<input type="text" name="" class="form-control" placeholder="Seaching......" required="" />
|
||||
<button><i class="fa fa-magnifying-glass"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade commom-popup" id="appointment-check">
|
||||
<div class="modal-dialog modal-md center">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="form-area">
|
||||
<div class="text-center"><img src="https://kaauh.edu.sa/assets/images/logo-2.png" alt="header-logo" width="15%"/></div>
|
||||
<h2 class="text-center">Login With Patient Mobile</h2>
|
||||
<div class="search-input">
|
||||
<div class="form-group" id="enterMobile">
|
||||
<input type="text" id="mobile_numner" class="form-control" placeholder="Mobile number"/>
|
||||
<button onclick="sendOtpToMobile()">Request OTP <i class="fa fa-location-arrow"></i></button>
|
||||
</div>
|
||||
<div class="form-group d-none" id="enterOTP">
|
||||
<input type="text" id="mobile_otp" class="form-control" placeholder="Enter OTP" />
|
||||
<button onclick="verifyMobileOtp()">Verify <i class="fa fa-location-arrow"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade commom-popup" id="referal">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title"><a href="javascript:;" data-dismiss="modal"><i class="fa fa-arrow-left"></i></a> Patient Referral</h4>
|
||||
<img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" />
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-area">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-holder">
|
||||
<form name="contactForm" method="POST" action="https://kaauh.edu.sa/patient-referral-form" class="row contact-form">
|
||||
<input type="hidden" name="_token" value="HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7">
|
||||
<ul>
|
||||
<li>Authorize healthcare providers to administer medical treatment, and/or perform diagnostic tests as may be deemed necessary or advisable in the diagnosis and treatment required.</li>
|
||||
<li>I also agree:<div claa="space-l"><ul><li>(a) To have the patient transferred to another facility if medically needed. </li><li>(b) To vacate the room for medical isolation purposes or other treatment reasons.</li></ul></div></li>
|
||||
<li>I am aware that the hospital provide a safe for keeping personal belongings (money, jewelry, glasses, mobile,phone, documents, others). Therefore, the hospital will not be responsible for the loss of any belongings ifnot placed in the safe.</li>
|
||||
<li>I am aware that the hospital is an Academic Institution and it is likely that non-consultant physicians willparticipate in healthcare under the supervision of the Consultant.</li>
|
||||
<li>I have received Patient & Family’s Bill of Rights booklet, and | was briefed on its contents by the assignedemployee upon Admission/Registration.</li>
|
||||
<li>I understand that my discharge from the hospital is recommendedby my attending physician based on my medical condition. Therefore, | agree to leave the hospital on thedate of discharge.</li>
|
||||
</ul>
|
||||
<div class="col-lg-12">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label"><input required class="form-check-input" type="checkbox" id="check1">I have read and agree to all information mentioned above</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 mt-15 form-btn">
|
||||
<button type="submit" class="btn btn-blue blue-hover submit">Submit new referral request</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade commom-popup" id="doctorLogin">
|
||||
<div class="modal-dialog modal-md center">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="form-area">
|
||||
<div class="search-input">
|
||||
<div class="text-center"><img src="https://kaauh.edu.sa/assets/images/logo-2.png" alt="header-logo" width="15%"/></div>
|
||||
<h2 class="text-center">Login With Doctor Email</h2>
|
||||
<form method="POST" action="https://kaauh.edu.sa/doctorLogin" class="user" autocomplete="off">
|
||||
<input type="hidden" name="_token" value="HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7">
|
||||
<div class="form-group">
|
||||
<input type="text" name="email" class="form-control" placeholder="Email" >
|
||||
<input type="password" name="password" class="form-control" placeholder="Password">
|
||||
<button type="submit">Login <i class="fas fa-sign-in-alt"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="need_lelp_buttn">
|
||||
<ul class="circle">
|
||||
<li><a href="https://kaauh.edu.sa/need-help"><i class="fa fa-headphones"></i> </a> <span>Need Help</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
<script src="https://kaauh.edu.sa/assets/js/jquery-3.6.3.min.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/bootstrap.min.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/modernizr.custom.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/menu.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/sticky.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/materialize.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/owl.carousel.min.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/jquery.magnific-popup.min.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/wow.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/sweetalert2.min.js"></script>
|
||||
<script src="https://kaauh.edu.sa/assets/js/bootstrap-datepicker.min.js"></script>
|
||||
<script src="https://kaauh.edu.sa/js/toastmin.js"></script>
|
||||
<script src="https://kaauh.edu.sa/js/select2min.js"></script>
|
||||
<script>new WOW().init();</script>
|
||||
<script></script>
|
||||
<script>
|
||||
var preloader = $('#loader-wrapper'),loader = preloader.find('.loader-inner');loader.fadeOut();preloader.delay(400).fadeOut('slow');
|
||||
function sendOtpToMobile(){
|
||||
let mobile_number = $('#mobile_numner').val();
|
||||
mobile_number = mobile_number.replace(/\s/g, '')
|
||||
if(mobile_number == ''){
|
||||
Swal.fire({title: 'Warning',text: 'Mobile Number Required',icon: 'warning',confirmButtonText: 'OK'});
|
||||
return false;
|
||||
}
|
||||
var regex = new RegExp(/^(009665|9665|\+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/);
|
||||
if(!regex.test(mobile_number)){
|
||||
Swal.fire({title: 'Warning',text: 'Invalid Mobile Number',icon: 'warning',confirmButtonText: 'OK'});
|
||||
return false;
|
||||
}
|
||||
var url ="https://kaauh.edu.sa/otp-request";
|
||||
$.post(url, {_token:"HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7",mobile:mobile_number,},
|
||||
function (data) {
|
||||
if (data=='true') {
|
||||
$('#enterOTP').removeClass('d-none');
|
||||
$('#enterMobile').addClass('d-none');
|
||||
}else{
|
||||
console.log(data);
|
||||
}
|
||||
})
|
||||
}
|
||||
function verifyMobileOtp(){
|
||||
let contact_number = $('#mobile_numner').val();
|
||||
contact_number = contact_number.replace(/\s/g, '')
|
||||
var otp=$('#mobile_otp').val();
|
||||
var url ="https://kaauh.edu.sa/otp-request-verify";
|
||||
$.post(url, {_token:"HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7",mobile:contact_number,otp:otp},
|
||||
function (data) {
|
||||
if (data=='true') {
|
||||
location.href = 'https://kaauh.edu.sa/appointments'
|
||||
}else{
|
||||
console.log(data);
|
||||
Swal.fire({title: 'Warning',text: 'Invalid OTP',icon: 'warning',confirmButtonText: 'OK'});
|
||||
}
|
||||
})
|
||||
}
|
||||
var search = window.location.search;
|
||||
var hrefname = window.location.href;
|
||||
hrefname = hrefname.replace(search, '');
|
||||
var active = $('[href="'+hrefname+'"]').closest('li');
|
||||
if (active.parents('.sub-menu').length) {
|
||||
active.parents('.sub-menu').parent('li').addClass('active');
|
||||
}else{
|
||||
$('[href="'+hrefname+'"]').closest('li').addClass('active');
|
||||
}
|
||||
$('#datepicker').datepicker({format: 'dd-mm-yyyy',autoclose:true,startDate: new Date()});
|
||||
$('.datepicker_dob').datepicker({format: 'dd-mm-yyyy',autoclose:true,endDate:new Date()});
|
||||
$('#datepicker_ref').datepicker({format: 'yyyy-mm-dd',autoclose:true,endDate: new Date()});
|
||||
$('.image-link').magnificPopup({type: 'image'});
|
||||
$('.video-popup1').magnificPopup({type: 'iframe',iframe: {patterns: {youtube: {index: 'youtube.com',src: 'https://www.youtube.com/embed/SZEflIVnhH8'}}}});
|
||||
$('.datepicker_psd').datepicker({format: 'dd-mm-yyyy',autoclose:true,endDate:new Date()});
|
||||
</script>
|
||||
<script></script>
|
||||
<script>$(".speciality").select2({tags: true});</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -280,10 +280,10 @@
|
||||
<i class="fas fa-edit me-2 text-primary"></i> <strong>{% trans "Updated At:" %}</strong> {{ job.updated_at|default:"N/A" }}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-4">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-main-action"
|
||||
class="btn btn-main-action btn-sm"
|
||||
id="copyJobLinkButton"
|
||||
data-url="{{ job.application_url }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
@ -298,7 +298,6 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<h5 class="text-muted mb-3">{% trans "Financial & Timeline" %}</h5>
|
||||
<div class="row g-3">
|
||||
|
||||
@ -1,260 +0,0 @@
|
||||
{% 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>{% translate "Application Form" %}</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 */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--success: #198754;
|
||||
--light-bg: #f8f9fa;
|
||||
|
||||
/* CALCULATED STICKY HEIGHTS */
|
||||
/* Standard Bootstrap Navbar Height (approx 56px) */
|
||||
--navbar-height: 56px;
|
||||
/* Bootstrap mb-3 spacing (1rem or 16px) */
|
||||
--navbar-gap: 16px;
|
||||
|
||||
/* Combined height of the two navbars when collapsed on desktop (56 + 16 + 56 = 128px) */
|
||||
--sticky-navbar-total-height: 128px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* LAYOUT & STICKY POSITIONING FIXES (Desktop/Tablet) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* MOBILE RESPONSIVE STYLES (Below 992px) */
|
||||
/* ---------------------------------------------------------------------- */
|
||||
@media (max-width: 991.98px) {
|
||||
|
||||
/* --- FIX: Spacing for Collapsed Hamburger Menu --- */
|
||||
#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;
|
||||
}
|
||||
/* --- END FIX --- */
|
||||
|
||||
/* On mobile, the top navbar is generally only 56px tall when collapsed.
|
||||
The bottom navbar position remains correct (72px down). */
|
||||
#bottomNavbar {
|
||||
top: calc(var(--navbar-height) + var(--navbar-gap));
|
||||
}
|
||||
|
||||
/* Main content area needs less margin on mobile since the sidebar isn't active
|
||||
and the navs are collapsed by default. */
|
||||
.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: 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 "Job Overview" %}</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="row mb-5 mt-3 main-content-area">
|
||||
|
||||
<div class="col-lg-4 order-lg-2 order-1 d-none d-lg-block">
|
||||
<div class="card shadow-sm sticky-top" style="top: var(--sticky-navbar-total-height);">
|
||||
<div class="card-header bg-kaauh-teal-dark text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-file-signature me-2"></i>Ready to Apply?</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<p class="text-muted">Review the job details, then apply below.</p>
|
||||
|
||||
{% if job.form_template %}
|
||||
<a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
|
||||
<i class="fas fa-paper-plane me-2"></i> Apply for this Position
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8 order-lg-1 order-2">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-kaauh-teal-dark text-white d-flex justify-content-between align-items-center">
|
||||
<h2 class="h3 mb-0 fw-bold">{{ job.title }}</h2>
|
||||
|
||||
{% comment %} {% with status_class=job.status|lower %}
|
||||
<span class="badge
|
||||
{% if status_class == 'open' %}bg-success
|
||||
{% elif status_class == 'closed' %}bg-danger
|
||||
{% elif status_class == 'draft' %}bg-secondary
|
||||
{% else %}bg-primary
|
||||
{% endif %}
|
||||
status-badge fw-bold p-2">
|
||||
{{ job.get_status_display }}
|
||||
</span>
|
||||
{% endwith %} {% endcomment %}
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<h4 class="mb-3" style="color: var(--kaauh-teal-dark);">Job Overview</h4>
|
||||
<div class="row row-cols-1 row-cols-md-2 g-3 mb-4">
|
||||
{% if job.salary_range %}
|
||||
<div class="col">
|
||||
<i class="fas fa-money-bill-wave text-success me-2"></i>
|
||||
<strong>Salary:</strong>
|
||||
<span class="fw-bold text-success">{{ job.salary_range }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="col">
|
||||
<i class="fas fa-calendar-alt text-muted me-2"></i>
|
||||
<strong>Deadline:</strong>
|
||||
{% if job.application_deadline %}
|
||||
{{ job.application_deadline|date:"M d, Y" }}
|
||||
{% if job.is_expired %}
|
||||
<span class="badge bg-danger ms-2">EXPIRED</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="text-muted">Not specified</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col"> <i class="fas fa-briefcase text-muted me-2"></i> <strong>Job Type:</strong> {{ job.get_job_type_display }} </div>
|
||||
<div class="col"> <i class="fas fa-map-marker-alt text-muted me-2"></i> <strong>Location:</strong> {{ job.get_location_display }} </div>
|
||||
<div class="col"> <i class="fas fa-building text-muted me-2"></i> <strong>Department:</strong> {{ job.department|default:"Not specified" }} </div>
|
||||
<div class="col"> <i class="fas fa-hashtag text-muted me-2"></i> <strong>JOB ID:</strong> {{ job.internal_job_id|default:"N/A" }} </div>
|
||||
<div class="col"> <i class="fas fa-desktop text-muted me-2"></i> <strong>Workplace:</strong> {{ job.get_workplace_type_display }} </div>
|
||||
{% comment %} <div class="col"> <i class="fas fa-user-tie text-muted me-2"></i> <strong>Created By:</strong> {{ job.created_by|default:"N/A" }} </div> {% endcomment %}
|
||||
</div>
|
||||
|
||||
{% if job.description %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-info-circle me-2"></i>Job Description</h5><div class="text-secondary">{{ job.description|safe }}</div></div>{% endif %}
|
||||
{% if job.qualifications %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-graduation-cap me-2"></i>Qualifications</h5><div class="text-secondary">{{ job.qualifications|safe }}</div></div>{% endif %}
|
||||
{% if job.benefits %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-hand-holding-usd me-2"></i>Benefits</h5><div class="text-secondary">{{ job.benefits|safe }}</div></div>{% endif %}
|
||||
{% if job.application_instructions %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-file-alt me-2"></i>Application Instructions</h5><div class="text-secondary">{{ job.application_instructions|safe }}</div></div>{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-fixed-apply-bar d-lg-none">
|
||||
{% if job.form_template %}
|
||||
<a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
|
||||
<i class="fas fa-paper-plane me-2"></i> Apply for this Position
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -225,14 +225,14 @@
|
||||
<option value="ARCHIVED" {% if status_filter == 'ARCHIVED' %}selected{% endif %}>{% trans "Archived" %}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-7">
|
||||
<div class="filter-buttons">
|
||||
|
||||
<button type="submit" class="btn btn-main-action btn-lg">
|
||||
<button type="submit" class="btn btn-main-action">
|
||||
<i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
|
||||
</button>
|
||||
{% if job_filter or search_query %}
|
||||
<a href="{% url 'job_list' %}" class="btn btn-outline-secondary btn-lg">
|
||||
<a href="{% url 'job_list' %}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-times me-1"></i> {% trans "Clear" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
<form method="GET" class="row g-3 align-items-end" >
|
||||
{% if search_query %}<input type="hidden" name="q" value="{{ search_query }}">{% endif %}
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-4">
|
||||
<label for="status" class="form-label small text-muted">{% trans "Filter by Status" %}</label>
|
||||
<select name="status" id="status" class="form-select form-select-sm">
|
||||
<option value="">{% trans "All Statuses" %}</option>
|
||||
@ -178,13 +178,13 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-7">
|
||||
<div class="filter-buttons">
|
||||
<button type="submit" class="btn btn-main-action btn-lg">
|
||||
<button type="submit" class="btn btn-main-action">
|
||||
<i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
|
||||
</button>
|
||||
{% if status_filter or search_query %}
|
||||
<a href="{% url 'meeting_list' %}" class="btn btn-outline-secondary btn-lg">
|
||||
<a href="{% url 'meeting_list' %}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-times me-1"></i> {% trans "Clear" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -165,7 +165,7 @@
|
||||
<form method="GET" class="row g-3 align-items-end" >
|
||||
{% if search_query %}<input type="hidden" name="q" value="{{ search_query }}">{% endif %}
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-4">
|
||||
<label for="job_filter" class="form-label small text-muted">{% trans "Filter by Job" %}</label>
|
||||
<select name="job" id="job_filter" class="form-select form-select-sm">
|
||||
<option value="">{% trans "All Jobs" %}</option>
|
||||
@ -175,13 +175,13 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-8">
|
||||
<div class="filter-buttons">
|
||||
<button type="submit" class="btn btn-main-action btn-lg">
|
||||
<button type="submit" class="btn btn-main-action">
|
||||
<i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
|
||||
</button>
|
||||
{% if job_filter or search_query %}
|
||||
<a href="{% url 'candidate_list' %}" class="btn btn-outline-secondary btn-lg">
|
||||
<a href="{% url 'candidate_list' %}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-times me-1"></i> {% trans "Clear" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -104,7 +104,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container" style="max-width: 900px;">
|
||||
<div class="container mt-4" style="max-width: 900px;">
|
||||
|
||||
<div class="profile-header d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
@ -122,7 +122,7 @@
|
||||
<div class="card p-5">
|
||||
<h5 class="fw-bold mb-4 text-accent">{% trans "Personal Information" %}</h5>
|
||||
|
||||
<form method="post" action="#">
|
||||
<form method="post" action="{% url 'user_detail' user.pk %}">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="row g-4"> <div class="col-md-6">
|
||||
@ -139,7 +139,7 @@
|
||||
<label for="id_email" class="form-label">{% trans "Email Address" %}</label>
|
||||
<input type="email" class="form-control" id="id_email" value="{{ user.email }}" disabled>
|
||||
<div class="form-text mt-2">
|
||||
<a href="#" class="small text-accent">{% trans "Manage email addresses" %}</a>
|
||||
<a href="{% url 'account_email' %}" class="small text-accent">{% trans "Manage email addresses" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -160,9 +160,9 @@
|
||||
<a href="{% url 'account_change_password' %}" class="btn btn-outline-danger w-100 rounded-pill py-2">
|
||||
<i class="fas fa-lock me-2"></i> {% trans "Change Password" %}
|
||||
</a>
|
||||
{% comment %} <a href="#" class="btn btn-outline-secondary w-100 rounded-pill py-2">
|
||||
<i class="fas fa-shield-alt me-2"></i> {% trans "Two-Factor Auth" %}
|
||||
</a> {% endcomment %}
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#myModalForm">
|
||||
<i class="fas fa-image me-1"></i> {% trans "Change Profile Image" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -192,4 +192,32 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--modal for image upload-->
|
||||
<div class="modal fade mt-4" id="myModalForm" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="myModalLabel">Upload Profile image</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form method="post" action="{% url 'user_profile_image_update' user.pk %}" enctype="multipart/form-data" >
|
||||
{% csrf_token %}
|
||||
{{ profile_form.as_p}}
|
||||
|
||||
{% if image_upload_form.instance.post_image %}
|
||||
<p>Current Image:</p>
|
||||
<img src="{{ image_upload_form.instance.post_image.url }}" alt="Post Image" style="max-width: 200px;">
|
||||
{% endif %}
|
||||
<div class="modal-footer mt-2">
|
||||
<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user