133 lines
3.9 KiB
HTML
133 lines
3.9 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
|
{% load static i18n %}
|
|
{% block title %}{% trans "Career Application Success" %} | KAAUH{% endblock %}
|
|
{% block content %}
|
|
<style>
|
|
/* THEME VARIABLES */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--success: #198754;
|
|
--navbar-height: 56px;
|
|
}
|
|
|
|
/* 1. WRAPPER FOR VERTICAL AND HORIZONTAL CENTERING */
|
|
.main-content-area {
|
|
/* This calculates height minus the top navbar to prevent scrolling */
|
|
min-height: calc(100vh - var(--navbar-height) - 60px);
|
|
display: flex;
|
|
align-items: center; /* Vertical center */
|
|
justify-content: center; /* Horizontal center */
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 2. CARD STYLING */
|
|
.thank-you-card {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
background: #ffffff;
|
|
border-radius: 20px;
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
|
padding: 60px 40px;
|
|
text-align: center;
|
|
border: none;
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
/* ANIMATION */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.success-icon-bg {
|
|
width: 90px; height: 90px;
|
|
background: #e9f7ef;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.text-success-header {
|
|
color: var(--success) !important;
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.message-text {
|
|
font-size: 1.1rem;
|
|
color: #636e72;
|
|
line-height: 1.6;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
color: white;
|
|
padding: 14px 35px;
|
|
border-radius: 50px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 8px 15px rgba(0, 99, 110, 0.2);
|
|
}
|
|
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 20px rgba(0, 99, 110, 0.3);
|
|
}
|
|
|
|
/* Secondary Nav styling */
|
|
#confirmationNavbar {
|
|
background-color: var(--kaauh-teal);
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.thank-you-card { padding: 40px 20px; }
|
|
}
|
|
</style>
|
|
|
|
<div id="confirmationNavbar" class="shadow-sm">
|
|
<div class="container-fluid">
|
|
<span class="text-white fw-bold">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans "Submission Complete" %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content-area">
|
|
<div class="thank-you-card">
|
|
|
|
<div class="success-icon-bg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="var(--success)" viewBox="0 0 16 16">
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="text-success-header">{% trans "Thank You!" %}</h1>
|
|
<h2 class="h5 mb-4" style="color: #2d3436; font-weight: 600;">
|
|
{% trans "Your application has been received." %}
|
|
</h2>
|
|
|
|
<p class="message-text">
|
|
{% trans "We appreciate your interest in KAAUH. Our recruitment team will review your qualifications and contact you if you are shortlisted for an interview." %}
|
|
</p>
|
|
|
|
<div class="action-buttons">
|
|
<a href="{% url 'kaauh_career' %}" class="btn-main-action">
|
|
{% trans "Return to Careers" %}
|
|
</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock content %} |