123 lines
6.1 KiB
HTML
123 lines
6.1 KiB
HTML
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE|default:'en' }}" 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>{% trans "Explanation Submitted" %} - PX360</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
navy: '#005696',
|
|
blue: '#007bbd',
|
|
light: '#eef6fb',
|
|
slate: '#64748b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.success-check { animation: scaleIn 0.5s ease-out; }
|
|
@keyframes scaleIn {
|
|
0% { transform: scale(0); }
|
|
50% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light min-h-screen flex items-center py-8 px-4">
|
|
<div class="w-full max-w-2xl mx-auto">
|
|
<!-- Main Card -->
|
|
<div class="bg-white rounded-2xl shadow-lg border border-slate-100 overflow-hidden">
|
|
<!-- Success Header -->
|
|
<div class="bg-gradient-to-r from-green-500 to-green-600 p-8 text-center">
|
|
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 success-check">
|
|
<i data-lucide="check" class="w-10 h-10 text-green-600"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-white">{% trans "Explanation Submitted Successfully!" %}</h1>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="p-8">
|
|
<p class="text-slate text-center mb-6">
|
|
{% trans "Thank you for providing your explanation. It has been received and will be reviewed by the PX team." %}
|
|
</p>
|
|
|
|
<!-- Complaint Summary -->
|
|
<div class="bg-light/50 rounded-xl p-5 mb-6">
|
|
<h2 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Complaint Summary" %}
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate">{% trans "Reference:" %}</span>
|
|
<span class="font-semibold text-navy">#{{ complaint.reference_number|slice:":8" }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate">{% trans "Title:" %}</span>
|
|
<span class="font-semibold text-navy">{{ complaint.title }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate">{% trans "Submitted On:" %}</span>
|
|
<span class="font-semibold text-navy">{{ explanation.responded_at|date:"Y-m-d H:i" }}</span>
|
|
</div>
|
|
{% if attachment_count > 0 %}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate">{% trans "Attachments:" %}</span>
|
|
<span class="font-semibold text-navy">{{ attachment_count }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- What Happens Next -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-5 mb-6">
|
|
<h3 class="font-bold text-navy mb-3 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue"></i>
|
|
{% trans "What Happens Next?" %}
|
|
</h3>
|
|
<ul class="space-y-2 text-sm text-slate">
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-blue mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "Your explanation will be reviewed by the complaint assignee" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-blue mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "The PX team may contact you if additional information is needed" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-blue mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "Your explanation will be considered during the complaint investigation" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Details -->
|
|
<div class="border-t border-slate-100 pt-6 text-center text-xs text-slate space-y-1">
|
|
<p><span class="font-semibold">{% trans "Explanation ID:" %}</span> {{ explanation.id }}</p>
|
|
<p><span class="font-semibold">{% trans "Submission Time:" %}</span> {{ explanation.responded_at|date:"Y-m-d H:i:s" }}</p>
|
|
<p class="mt-3">{% trans "A confirmation email has been sent to the complaint assignee." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="bg-light/30 border-t border-slate-100 p-4 text-center">
|
|
<p class="text-slate text-xs">{% trans "PX360 Complaint Management System" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|