98 lines
4.6 KiB
HTML
98 lines
4.6 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ language }}" dir="{% if language == 'ar' %}rtl{% else %}ltr{% endif %}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% if language == 'ar' %}شكراً لك{% else %}Thank You{% endif %} - PX360</title>
|
|
<link rel="stylesheet" href="{% static 'dist/css/tailwind.css' %}">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
body { font-family: 'Inter', sans-serif; }
|
|
@keyframes scaleIn {
|
|
from { transform: scale(0); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
.success-icon { animation: scaleIn 0.5s ease-out; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 p-4 md:p-10 min-h-screen flex items-center justify-center">
|
|
|
|
<div class="max-w-4xl w-full bg-white shadow-2xl relative overflow-hidden border-t-[20px] border-navy">
|
|
|
|
<!-- Header -->
|
|
<div class="p-8 pb-4 flex justify-between items-start">
|
|
<div class="flex items-center">
|
|
<img src="{% static 'img/HH_P_H_Logo.png' %}" alt="HH Hospital" class="h-10 md:h-12 object-contain">
|
|
</div>
|
|
<div class="text-end">
|
|
<h1 class="text-2xl font-bold text-[#2c3e50]">{% if language == 'ar' %}شكراً لك{% else %}Thank You{% endif %}</h1>
|
|
<h1 class="text-2xl font-bold text-[#2c3e50]">{% if language == 'ar' %}لمشاركتك{% else %}for Your Feedback{% endif %}</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="px-8 md:px-10 py-8 text-center text-[#2c3e50]">
|
|
|
|
<!-- Success Icon -->
|
|
<div class="success-icon w-24 h-24 bg-emerald-500 rounded-full flex items-center justify-center mx-auto mb-8">
|
|
<svg class="w-12 h-12 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<p class="text-lg text-gray-600 max-w-md mx-auto leading-relaxed mb-8">
|
|
{% if language == 'ar' %}
|
|
نقدر وقتك وملاحظاتك القيمة. ستساعدنا إجاباتك في تحسين تجربة المرضى وتقديم رعاية أفضل.
|
|
{% else %}
|
|
We appreciate your time and valuable feedback. Your responses will help us improve patient experience and deliver better care.
|
|
{% endif %}
|
|
</p>
|
|
|
|
<!-- Score Display -->
|
|
{% if survey.total_score %}
|
|
<div class="bg-gray-50 rounded-xl p-6 max-w-xs mx-auto mb-8">
|
|
<p class="text-3xl font-bold text-navy">{{ survey.total_score|floatformat:1 }}<span class="text-lg text-gray-400 font-medium"> / 5.0</span></p>
|
|
<p class="text-sm text-gray-400 mt-1">
|
|
{% if language == 'ar' %}تقييمك الإجمالي{% else %}Your Overall Rating{% endif %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Close Message -->
|
|
<p class="text-sm text-gray-400">
|
|
{% if language == 'ar' %}
|
|
يمكنك الآن إغلاق هذه الصفحة بأمان
|
|
{% else %}
|
|
You may now safely close this page
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-8 bg-navy text-white p-8 pb-16 text-center space-y-1">
|
|
<p class="text-sm font-medium">
|
|
{% if language == 'ar' %}
|
|
شكراً لمشاركتك في تحسين تجربة المرضى
|
|
{% else %}
|
|
Thank you for helping us improve patient experience.
|
|
{% endif %}
|
|
</p>
|
|
<p class="text-sm font-medium opacity-75">PX360</p>
|
|
<p class="text-xs font-medium opacity-50 mt-1">
|
|
Powered by <a href="https://tenhal.sa" target="_blank" class="text-white hover:underline">tenhal.sa</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Decorative Corner Triangles -->
|
|
<div class="absolute bottom-0 left-0 w-full h-12 pointer-events-none z-10">
|
|
<div class="absolute bottom-0 left-0 border-r-[100px] border-b-[50px] border-r-transparent border-b-navy-dark"></div>
|
|
<div class="absolute bottom-0 right-0 border-l-[100px] border-b-[50px] border-l-transparent border-b-navy-dark"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|