76 lines
3.7 KiB
HTML
76 lines
3.7 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Activation Error" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-red-50 to-light flex items-center justify-center py-12 px-4">
|
|
<div class="max-w-2xl w-full">
|
|
<div class="bg-white rounded-3xl shadow-xl p-8 md:p-12">
|
|
<!-- Error Icon -->
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-br from-red-400 to-blue rounded-full mb-6">
|
|
<i data-lucide="alert-triangle" class="w-12 h-12 text-white"></i>
|
|
</div>
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3">
|
|
{% trans "Activation Failed" %}
|
|
</h1>
|
|
<p class="text-xl text-gray-500">
|
|
{% trans "We couldn't activate your account" %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div class="bg-red-50 border border-red-200 rounded-2xl p-5 mb-8">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-circle" class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<p class="text-red-800 font-medium mb-1">{% trans "Error Details" %}</p>
|
|
<p class="text-red-700 text-sm">
|
|
{% if error_message %}{{ error_message }}{% else %}{% trans "The activation link you used is invalid or has expired. Please contact your administrator for a new invitation." %}{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Section -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-2xl p-5 mb-8">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="help-circle" class="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<p class="text-blue-800 font-medium mb-1">{% trans "What can you do?" %}</p>
|
|
<ul class="text-blue-700 text-sm space-y-2">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span>{% trans "Contact your administrator for a new invitation link" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span>{% trans "Make sure you clicked the most recent invitation email" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span>{% trans "Check with IT support if you continue to have issues" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back Button -->
|
|
<div class="text-center">
|
|
<a href="/accounts/login/" class="inline-flex items-center justify-center w-full md:w-auto bg-gradient-to-r from-gray-500 to-gray-600 text-white px-10 py-4 rounded-2xl font-bold text-lg hover:from-gray-600 hover:to-gray-700 transition shadow-lg">
|
|
<i data-lucide="arrow-left" class="w-5 h-5 mr-2"></i>
|
|
{% trans "Back to Login" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |