74 lines
4.8 KiB
HTML
74 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
|
|
<meta charset="UTF-8">
|
|
<title>Inscription réussie</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style> body { font-family: 'Inter', sans-serif; } </style>
|
|
</head>
|
|
<body class="bg-gray-50 flex items-center justify-center min-h-screen">
|
|
<div class="max-w-md w-full bg-white rounded-xl shadow-md p-8 border border-gray-100 text-center">
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-2">Pré-inscription envoyée !</h1>
|
|
<p class="text-gray-600 mb-2" th:text="'Votre dossier pour ' + ${prenom != null ? prenom : 'le futur licencié'} + ' a bien été transmis au secrétariat de l\'AS Talange.'">Votre dossier a bien été transmis au secrétariat de l'AS Talange.</p>
|
|
<p class="text-sm text-gray-500">Un responsable va traiter votre demande prochainement. Vous pouvez fermer cette page.</p>
|
|
|
|
<div th:if="${isNouvelle}" class="mt-8 text-left">
|
|
<div id="ticket-documents" class="bg-yellow-50 border-2 border-dashed border-yellow-300 p-6 rounded-lg relative overflow-hidden shadow-sm">
|
|
<!-- Decorative elements for ticket look -->
|
|
<div class="absolute -left-3 top-1/2 w-6 h-6 bg-white rounded-full border-r-2 border-yellow-300 transform -translate-y-1/2"></div>
|
|
<div class="absolute -right-3 top-1/2 w-6 h-6 bg-white rounded-full border-l-2 border-yellow-300 transform -translate-y-1/2"></div>
|
|
|
|
<h2 class="text-lg font-bold text-yellow-800 mb-4 text-center border-b-2 border-yellow-200 pb-2 border-dashed uppercase tracking-wider">Mémo Inscription</h2>
|
|
|
|
<div class="mb-4">
|
|
<p class="text-sm font-semibold text-yellow-900">Tarif Licence : <span class="text-lg" th:text="${tarif}">210 €</span></p>
|
|
</div>
|
|
|
|
<h3 class="font-semibold text-yellow-900 mb-2 text-sm uppercase tracking-wide">Documents à fournir :</h3>
|
|
<ul class="list-none space-y-2 mb-3">
|
|
<li th:each="doc : ${documents}" class="flex items-start">
|
|
<svg class="w-4 h-4 text-yellow-500 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
|
|
<span class="text-sm text-yellow-800" th:text="${doc}">Document</span>
|
|
</li>
|
|
</ul>
|
|
<p class="text-xs text-yellow-800 italic text-center mb-2">Ces documents sont à fournir au secrétariat du club pour finaliser l'inscription.</p>
|
|
<div class="mt-4 pt-2 border-t-2 border-yellow-200 border-dashed text-center">
|
|
<p class="text-xs text-yellow-600 font-medium">As Talange</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<button type="button" onclick="captureTicket()" class="bg-gray-800 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg shadow transition-colors inline-flex items-center text-sm">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
|
|
</svg>
|
|
Enregistrer cette liste (Image)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script th:if="${isNouvelle}">
|
|
function captureTicket() {
|
|
const ticket = document.getElementById('ticket-documents');
|
|
html2canvas(ticket, { scale: 2 }).then(canvas => {
|
|
const imgData = canvas.toDataURL('image/png');
|
|
const link = document.createElement('a');
|
|
link.download = 'ASTalange-Documents.png';
|
|
link.href = imgData;
|
|
link.click();
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|