195 lines
9.0 KiB
HTML
195 lines
9.0 KiB
HTML
{% extends "layouts/public_base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Complaint Submitted" %}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
@keyframes scaleIn {
|
|
from {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.success-checkmark {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: scaleIn 0.5s ease-out;
|
|
}
|
|
|
|
.reference-card {
|
|
background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.reference-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-light via-blue-50 to-light py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-3xl mx-auto">
|
|
<!-- Success Icon Animation -->
|
|
<div class="text-center mb-8">
|
|
<div class="success-checkmark inline-flex items-center justify-center bg-gradient-to-br from-green-400 to-green-600 shadow-xl shadow-green-200">
|
|
<i data-lucide="check" class="w-16 h-16 text-white"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Card -->
|
|
<div class="glass-card rounded-3xl shadow-2xl p-8 md:p-12 animate-fade-in">
|
|
<!-- Header -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl font-bold text-navy mb-4">
|
|
{% trans "Complaint Submitted Successfully!" %}
|
|
</h1>
|
|
<p class="text-slate text-lg leading-relaxed">
|
|
{% trans "Thank you for your feedback. Your complaint has been received and is being reviewed." %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Reference Number -->
|
|
<div class="reference-card rounded-2xl p-8 text-center mb-8 shadow-xl">
|
|
<div class="relative z-10">
|
|
<div class="text-sm text-white/80 font-semibold mb-3 uppercase tracking-wider">
|
|
{% trans "Reference Number" %}
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-bold text-white tracking-widest font-mono">
|
|
#{{ reference_number }}
|
|
</div>
|
|
<p class="text-white/70 text-xs mt-4">
|
|
{% trans "Save this number for future tracking" %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- What Happens Next -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-light rounded-2xl p-6 mb-6 border-2 border-blue-100">
|
|
<h4 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="clock" class="w-6 h-6 text-blue-600"></i>
|
|
{% trans "What Happens Next?" %}
|
|
</h4>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600"></i>
|
|
</div>
|
|
<span class="text-slate">{% trans "Your complaint will be reviewed by our team within 24 hours" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600"></i>
|
|
</div>
|
|
<span class="text-slate">{% trans "You will receive updates via phone or email based on the contact information provided" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600"></i>
|
|
</div>
|
|
<span class="text-slate">{% trans "Our typical response time is 24-48 hours depending on severity" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600"></i>
|
|
</div>
|
|
<span class="text-slate">{% trans "You can check the status of your complaint using your reference number" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Urgent Contact Box -->
|
|
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl p-6 mb-8 border-2 border-orange-200">
|
|
<h4 class="text-lg font-bold text-navy mb-3 flex items-center gap-2">
|
|
<i data-lucide="phone-call" class="w-6 h-6 text-orange-600"></i>
|
|
{% trans "Need Immediate Assistance?" %}
|
|
</h4>
|
|
<p class="text-slate mb-4">
|
|
{% trans "If your complaint is urgent, please contact our Patient Relations department directly at:" %}
|
|
</p>
|
|
<div class="bg-white rounded-xl p-5 text-center mb-4 shadow-sm">
|
|
<a href="tel:9200000000" class="text-2xl font-bold text-blue-600 hover:text-blue-700 transition inline-flex items-center gap-2">
|
|
<i data-lucide="phone" class="w-6 h-6"></i> 920-000-0000
|
|
</a>
|
|
</div>
|
|
<p class="text-sm text-slate text-center">
|
|
{% trans "Available Saturday to Thursday, 8:00 AM - 8:00 PM" %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-3 justify-center mb-8">
|
|
<a href="{% url 'complaints:public_complaint_track' %}?reference={{ reference_number }}"
|
|
class="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold transition shadow-lg shadow-blue-200 hover:shadow-xl hover:-translate-y-1 btn-hover">
|
|
<i data-lucide="search" class="w-5 h-5"></i>
|
|
{% trans "Track Your Complaint" %}
|
|
</a>
|
|
<a href="{% url 'complaints:public_complaint_submit' %}"
|
|
class="inline-flex items-center justify-center gap-2 bg-slate-600 hover:bg-slate-700 text-white px-8 py-4 rounded-xl font-bold transition shadow-lg shadow-slate-200 hover:shadow-xl hover:-translate-y-1 btn-hover">
|
|
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
|
{% trans "Submit Another" %}
|
|
</a>
|
|
<a href="/"
|
|
class="inline-flex items-center justify-center gap-2 bg-white border-2 border-slate-200 hover:border-navy hover:bg-navy hover:text-white text-slate-700 px-8 py-4 rounded-xl font-bold transition hover:-translate-y-1 btn-hover">
|
|
<i data-lucide="home" class="w-5 h-5"></i>
|
|
{% trans "Home" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="border-t border-slate-200 pt-6">
|
|
<div class="flex flex-col sm:flex-row gap-6 justify-center text-sm">
|
|
<a href="mailto:patient.relations@healthcare.sa" class="flex items-center gap-2 text-slate-600 hover:text-blue-600 transition">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
<span class="font-medium">patient.relations@healthcare.sa</span>
|
|
</a>
|
|
<a href="https://www.healthcare.sa" target="_blank" class="flex items-center gap-2 text-slate-600 hover:text-blue-600 transition">
|
|
<i data-lucide="globe" class="w-4 h-4"></i>
|
|
<span class="font-medium">www.healthcare.sa</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Note -->
|
|
<div class="text-center mt-8">
|
|
<p class="text-slate text-sm">
|
|
{% trans "Your feedback helps us improve our services" %}
|
|
<i data-lucide="heart" class="w-4 h-4 inline-block text-red-500 mx-1"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|