kaauh_ats/templates/jobs/base_public.html

628 lines
23 KiB
HTML

{% 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">
&copy; {% 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>