60 lines
3.5 KiB
Twig
60 lines
3.5 KiB
Twig
{% extends 'revervation/base.twig' %}
|
|
|
|
{% block title %}Paiement Validé - Ludikevent{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="min-h-screen bg-slate-50 flex items-center justify-center py-12 px-4">
|
|
<div class="max-w-md w-full">
|
|
<div class="bg-white rounded-[3rem] p-10 shadow-2xl border border-slate-100 text-center relative overflow-hidden">
|
|
|
|
{# Effet de fond vert subtil #}
|
|
<div class="absolute -top-10 -right-10 w-32 h-32 bg-green-50 rounded-full blur-3xl"></div>
|
|
|
|
{# Icône Succès Animée #}
|
|
<div class="relative w-24 h-24 mx-auto mb-8">
|
|
<div class="absolute inset-0 bg-green-100 rounded-full scale-110 animate-ping opacity-20"></div>
|
|
<div class="relative w-24 h-24 bg-green-500 rounded-3xl flex items-center justify-center text-white shadow-lg shadow-green-200">
|
|
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-3xl font-black uppercase italic text-slate-900 leading-tight">
|
|
Paiement <span class="text-green-600">Accepté !</span>
|
|
</h1>
|
|
|
|
<p class="mt-4 text-slate-500 font-medium italic text-sm leading-relaxed">
|
|
Votre acompte a été validé avec succès. Votre réservation <span class="text-slate-900 font-bold">#{{ contrat.numReservation }}</span> est désormais confirmée et le matériel vous est réservé.
|
|
</p>
|
|
|
|
<div class="mt-8 p-5 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between">
|
|
<div class="text-left">
|
|
<p class="text-[8px] font-black uppercase text-slate-400 tracking-widest">Référence</p>
|
|
<p class="text-xs font-black text-slate-900 uppercase italic">#{{ contrat.numReservation }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-[8px] font-black uppercase text-slate-400 tracking-widest">Statut</p>
|
|
<p class="text-[10px] font-black text-green-600 uppercase italic">Confirmé</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10">
|
|
{# BOUTON RETOUR GESTION DU CONTRAT #}
|
|
<a href="{{ path('gestion_contrat_view', {'num': contrat.numReservation}) }}"
|
|
class="group flex items-center justify-center gap-3 bg-slate-900 text-white px-8 py-5 rounded-2xl font-black uppercase italic hover:bg-blue-600 transition-all shadow-xl shadow-slate-200">
|
|
<span class="text-sm">Gérer ma réservation</span>
|
|
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-8 text-center text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] italic">
|
|
Merci de votre confiance — Ludikevent
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|