Christian Krakau-Louis
106 lines
4.2 KiB
HTML
106 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="max-w-lg mx-auto">
|
|
<!-- Success Card -->
|
|
<div class="bg-white rounded-lg shadow-md p-8 mb-6 text-center">
|
|
<div class="mb-6">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-green-100 mb-6">
|
|
<i class="fas fa-check text-green-600 text-5xl"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-irish-green">Success!</h1>
|
|
|
|
{% if achievement %}
|
|
<p class="text-gray-600 mt-2">Your team has earned an achievement and points!</p>
|
|
{% else %}
|
|
<p class="text-gray-600 mt-2">Your team has earned points!</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="p-4 bg-irish-green bg-opacity-10 rounded-lg border border-irish-green">
|
|
<p class="font-bold text-irish-green mb-1">Points Earned:</p>
|
|
<p class="text-3xl">{{ points }}</p>
|
|
</div>
|
|
|
|
{% if achievement %}
|
|
<div class="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
|
<p class="font-bold text-blue-800 mb-1">Achievement Unlocked:</p>
|
|
<div class="flex items-center justify-center">
|
|
<i class="fas fa-award text-amber-500 text-xl mr-2"></i>
|
|
<p class="text-2xl text-blue-800">{{ achievement }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="p-4 bg-gray-50 rounded-lg">
|
|
<p class="font-bold mb-1">Team:</p>
|
|
<p>{{ team.name }}</p>
|
|
</div>
|
|
|
|
{% if event %}
|
|
<div class="p-4 bg-purple-50 rounded-lg border border-purple-100">
|
|
<p class="font-bold text-purple-800 mb-1">Event:</p>
|
|
<p>{{ event.name }}</p>
|
|
<p class="text-sm text-gray-500">{{ event.event_date.strftime('%Y-%m-%d') }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Next Steps -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h3 class="text-xl font-semibold text-irish-green mb-4">What's Next?</h3>
|
|
<div class="space-y-3 mt-8">
|
|
<a href="/teams/{{ team.id }}" class="flex items-start hover:bg-gray-50 p-3 rounded-md cursor-pointer">
|
|
<div class="bg-cream-white p-2 rounded-full mr-3">
|
|
<i class="fas fa-users text-irish-green"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">View Team Profile</p>
|
|
<p class="text-gray-600 text-sm">Check your team's achievements and points.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/leaderboard" class="flex items-start hover:bg-gray-50 p-3 rounded-md cursor-pointer">
|
|
<div class="bg-cream-white p-2 rounded-full mr-3">
|
|
<i class="fas fa-trophy text-irish-green"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">View Leaderboard</p>
|
|
<p class="text-gray-600 text-sm">See how your team ranks compared to others.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/dashboard/scan" class="flex items-start hover:bg-gray-50 p-3 rounded-md cursor-pointer">
|
|
<div class="bg-green-100 p-2 rounded-full mr-3">
|
|
<i class="fas fa-qrcode text-green-600"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">Scan Another QR Code</p>
|
|
<p class="text-sm text-gray-600">Find more QR codes to redeem</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Share -->
|
|
<div class="mt-6 text-center">
|
|
<p class="text-gray-500 mb-3">Share your achievement</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="https://twitter.com/intent/tweet?text=I just earned {{ points }} points{% if achievement %} and the '{{ achievement }}' achievement{% endif %} at {{ base_url }}!"
|
|
target="_blank" class="text-blue-400 hover:text-blue-500">
|
|
<i class="fab fa-twitter text-2xl"></i>
|
|
</a>
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u={{ base_url }}"
|
|
target="_blank" class="text-blue-600 hover:text-blue-700">
|
|
<i class="fab fa-facebook text-2xl"></i>
|
|
</a>
|
|
<a href="https://api.whatsapp.com/send?text=I just earned {{ points }} points{% if achievement %} and the '{{ achievement }}' achievement{% endif %} at {{ base_url }}!"
|
|
target="_blank" class="text-green-500 hover:text-green-600">
|
|
<i class="fab fa-whatsapp text-2xl"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|