HH/templates/surveys/thank_you.html
2025-12-24 12:42:31 +03:00

163 lines
4.6 KiB
HTML

{% load i18n %}
<!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>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap{% if language == 'ar' %}.rtl{% endif %}.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
{% if language == 'ar' %}
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
{% endif %}
}
.thank-you-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
padding: 50px 30px;
text-align: center;
max-width: 500px;
margin: 20px;
}
.success-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
animation: scaleIn 0.5s ease-out;
}
.success-icon i {
font-size: 50px;
color: white;
}
@keyframes scaleIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
h1 {
color: #333;
font-size: 2rem;
font-weight: 600;
margin-bottom: 20px;
}
p {
color: #666;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
}
.score-display {
background: #f5f5f5;
border-radius: 15px;
padding: 20px;
margin: 30px 0;
}
.score-display h3 {
color: #667eea;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
}
.score-display p {
color: #999;
font-size: 0.9rem;
margin-bottom: 0;
}
.footer-text {
color: #999;
font-size: 0.85rem;
margin-top: 30px;
}
@media (max-width: 576px) {
.thank-you-card {
padding: 40px 20px;
}
h1 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="thank-you-card">
<div class="success-icon">
<i class="bi bi-check-lg"></i>
</div>
<h1>
{% if language == 'ar' %}
شكراً لك!
{% else %}
Thank You!
{% endif %}
</h1>
<p>
{% 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>
{% if survey.total_score %}
<div class="score-display">
<h3>{{ survey.total_score|floatformat:1 }}/5.0</h3>
<p>
{% if language == 'ar' %}
تقييمك الإجمالي
{% else %}
Your Overall Rating
{% endif %}
</p>
</div>
{% endif %}
<p class="footer-text">
{% if language == 'ar' %}
يمكنك الآن إغلاق هذه الصفحة بأمان
{% else %}
You may now safely close this page
{% endif %}
</p>
</div>
</body>
</html>