116 lines
5.5 KiB
HTML
116 lines
5.5 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 "Already 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; }
|
|
.info-icon { animation: pulse 2s infinite; }
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
</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">
|
|
<!-- Warning Header -->
|
|
<div class="bg-gradient-to-r from-orange-500 to-orange-600 p-8 text-center">
|
|
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 info-icon">
|
|
<i data-lucide="alert-triangle" class="w-10 h-10 text-orange-500"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-white">{% trans "Already Submitted" %}</h1>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="p-8">
|
|
<p class="text-slate text-center mb-6">
|
|
{% trans "This explanation link has already been used. Each explanation link can only be used once." %}
|
|
</p>
|
|
|
|
<!-- Complaint Information -->
|
|
<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 Information" %}
|
|
</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>
|
|
{% if explanation.responded_at %}
|
|
<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>
|
|
{% endif %}
|
|
{% if explanation.staff %}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate">{% trans "Submitted By:" %}</span>
|
|
<span class="font-semibold text-navy">{{ explanation.staff }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- What If Update Needed -->
|
|
<div class="bg-orange-50 border border-orange-200 rounded-xl p-5 mb-6">
|
|
<h3 class="font-bold text-navy mb-3 flex items-center gap-2">
|
|
<i data-lucide="help-circle" class="w-5 h-5 text-orange-500"></i>
|
|
{% trans "What If You Need To Update?" %}
|
|
</h3>
|
|
<p class="text-sm text-slate">
|
|
{% trans "If you need to provide additional information or make changes to your explanation, please contact the PX team directly." %}
|
|
</p>
|
|
</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 "Status:" %}</span> {% trans "Already Submitted" %}</p>
|
|
<div class="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg">
|
|
<i data-lucide="lock" class="w-4 h-4 text-slate"></i>
|
|
<span class="font-semibold">{% trans "This link cannot be used again." %}</span>
|
|
</div>
|
|
</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>
|