198 lines
9.3 KiB
HTML
198 lines
9.3 KiB
HTML
{% extends "layouts/public_base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Observation Submitted" %}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
@keyframes scaleIn {
|
|
from {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: pulse 2s 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%);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-3xl mx-auto">
|
|
<!-- Success Icon -->
|
|
<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 "Thank You!" %}</h1>
|
|
<p class="text-slate text-lg leading-relaxed">
|
|
{% trans "Your observation has been submitted successfully." %}
|
|
</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 "Your Reference Number" %}
|
|
</div>
|
|
<div class="text-3xl md:text-4xl font-bold text-white tracking-widest font-mono mb-4" id="trackingCode">
|
|
{{ tracking_code }}
|
|
</div>
|
|
<button onclick="copyTrackingCode()" class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg text-sm font-semibold transition" id="copyBtn">
|
|
<i data-lucide="clipboard-copy" class="w-4 h-4"></i>
|
|
<span id="copyText">{% trans "Copy Code" %}</span>
|
|
</button>
|
|
</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="info" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Important" %}
|
|
</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 text-sm">{% trans "Save this reference number to check the status of your observation." %}</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 text-sm">{% trans "Our team will review your observation and take appropriate action." %}</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 text-sm">{% trans "You can track your observation status anytime using the reference number." %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Observation Summary -->
|
|
<div class="bg-slate-50 rounded-2xl p-6 mb-8 border border-slate-100">
|
|
<h4 class="text-sm font-bold text-navy mb-4">{% trans "Observation Summary" %}</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Category" %}</p>
|
|
<p class="text-sm font-medium text-gray-800">{{ observation.category.name|default:_("Not specified") }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Severity" %}</p>
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-semibold
|
|
{% if observation.severity == 'low' %}bg-green-100 text-green-700
|
|
{% elif observation.severity == 'medium' %}bg-yellow-100 text-yellow-700
|
|
{% elif observation.severity == 'high' %}bg-red-100 text-red-700
|
|
{% elif observation.severity == 'critical' %}bg-red-500 text-white
|
|
{% else %}bg-gray-100 text-gray-600{% endif %}">
|
|
{{ observation.get_severity_display }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Status" %}</p>
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-semibold
|
|
{% if observation.status == 'new' %}bg-sky-100 text-sky-700
|
|
{% elif observation.status == 'triaged' %}bg-teal-100 text-teal-700
|
|
{% elif observation.status == 'assigned' %}bg-teal-100 text-teal-700
|
|
{% elif observation.status == 'in_progress' %}bg-yellow-100 text-yellow-700
|
|
{% elif observation.status == 'resolved' %}bg-green-100 text-green-700
|
|
{% elif observation.status == 'closed' %}bg-gray-100 text-gray-600
|
|
{% elif observation.status == 'rejected' %}bg-red-100 text-red-700
|
|
{% elif observation.status == 'duplicate' %}bg-gray-100 text-gray-600
|
|
{% else %}bg-gray-100 text-gray-600{% endif %}">
|
|
{{ observation.get_status_display }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Submitted" %}</p>
|
|
<p class="text-sm font-medium text-gray-800">{{ observation.created_at|date:"M d, Y H:i" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<a href="{% url 'observations:observation_track' %}?tracking_code={{ tracking_code }}"
|
|
class="inline-flex items-center justify-center gap-2 bg-navy hover:bg-blue text-white px-8 py-4 rounded-xl font-bold transition shadow-lg shadow-navy/25 btn-hover">
|
|
<i data-lucide="search" class="w-5 h-5"></i>
|
|
{% trans "Track Status" %}
|
|
</a>
|
|
<a href="{% url 'observations:observation_create_public' %}"
|
|
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 btn-hover">
|
|
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
|
{% trans "Submit Another" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
function copyTrackingCode() {
|
|
const code = document.getElementById('trackingCode').textContent.trim();
|
|
navigator.clipboard.writeText(code).then(() => {
|
|
const btn = document.getElementById('copyBtn');
|
|
const text = document.getElementById('copyText');
|
|
btn.classList.add('bg-green-500/30');
|
|
text.textContent = '{% trans "Copied!" %}';
|
|
|
|
setTimeout(() => {
|
|
btn.classList.remove('bg-green-500/30');
|
|
text.textContent = '{% trans "Copy Code" %}';
|
|
}, 2000);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|