100 lines
5.0 KiB
HTML
100 lines
5.0 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ _("Invalid Survey Link") }} - 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; }
|
|
</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]">{% trans "Invalid" %}</h1>
|
|
<h1 class="text-2xl font-bold text-[#2c3e50]">{% trans "Survey Link" %}</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="px-8 md:px-10 py-8 text-center text-[#2c3e50]">
|
|
|
|
<!-- Error Icon -->
|
|
<div class="w-24 h-24 bg-red-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">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<p class="text-lg text-gray-600 max-w-md mx-auto leading-relaxed mb-8">
|
|
{{ _("We're sorry, but this survey link is no longer valid or has expired") }}.
|
|
</p>
|
|
|
|
<!-- Reasons -->
|
|
<div class="bg-gray-50 rounded-xl p-6 max-w-lg mx-auto mb-8 text-start">
|
|
<p class="font-bold text-base mb-4">{% trans "This could be because:" %}</p>
|
|
<ul class="space-y-3 text-gray-600 text-sm">
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-red-400 mt-0.5 flex-shrink-0">
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
|
</span>
|
|
{{ _("The survey has already been completed") }}
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-red-400 mt-0.5 flex-shrink-0">
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
|
</span>
|
|
{{ _("The link has expired (surveys are valid for 30 days)") }}
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-red-400 mt-0.5 flex-shrink-0">
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
|
</span>
|
|
{{ _("The link was entered incorrectly") }}
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-red-400 mt-0.5 flex-shrink-0">
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
|
</span>
|
|
{{ _("The survey has been canceled") }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Contact Info -->
|
|
<p class="text-sm text-gray-400">
|
|
{{ _("If you believe this is an error, please contact your healthcare provider for assistance") }}.
|
|
</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">PX360</p>
|
|
<p class="text-sm font-medium opacity-75">Patient Experience Platform</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>
|