|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Générateur d'évaluation gymnique</title> |
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
<div class="min-h-screen flex items-center justify-center p-4"> |
|
|
<div class="max-w-xl w-full bg-white shadow-xl rounded-lg p-6 space-y-6 fade-in"> |
|
|
<h1 class="text-2xl font-bold text-center text-blue-600">Générateur d'évaluation gymnique</h1> |
|
|
<form method="POST" class="space-y-4"> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div> |
|
|
<label for="centre_examen" class="block text-sm font-medium text-gray-700">Centre d'examen</label> |
|
|
<input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="type_examen" class="block text-sm font-medium text-gray-700">Type d'examen</label> |
|
|
<input type="text" id="type_examen" name="type_examen" value="Bac Général" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="serie" class="block text-sm font-medium text-gray-700">Série</label> |
|
|
<input type="text" id="serie" name="serie" value="Série" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="etablissement" class="block text-sm font-medium text-gray-700">Établissement</label> |
|
|
<input type="text" id="etablissement" name="etablissement" value="Établissement" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="session" class="block text-sm font-medium text-gray-700">Session</label> |
|
|
<input type="text" id="session" name="session" value="2025" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="nom_candidat" class="block text-sm font-medium text-gray-700">Nom du candidat</label> |
|
|
<input type="text" id="nom_candidat" name="nom_candidat" value="Candidat" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold text-blue-600 mt-6">Ajouter des éléments techniques</h2> |
|
|
<div id="elements_container" class="space-y-4"> |
|
|
<div class="p-4 bg-gray-100 rounded-md fade-in"> |
|
|
<div class="grid grid-cols-1 gap-2"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Nom de l'élément</label> |
|
|
<input type="text" name="new_element_name" placeholder="Ex : Saut groupé" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Catégorie</label> |
|
|
<input type="text" name="new_element_categorie" placeholder="Ex : A" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Points</label> |
|
|
<input type="text" name="new_element_points" placeholder="Ex : 1.5" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<button type="button" onclick="addElement()" |
|
|
class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded transition duration-300 ease-in-out"> |
|
|
Ajouter un autre élément |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<input type="submit" value="Générer le document" |
|
|
class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out"> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Fonction d'ajout dynamique d'un élément technique |
|
|
function addElement() { |
|
|
const container = document.getElementById("elements_container"); |
|
|
const div = document.createElement("div"); |
|
|
div.className = "p-4 bg-gray-100 rounded-md fade-in"; |
|
|
div.innerHTML = ` |
|
|
<div class="grid grid-cols-1 gap-2"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Nom de l'élément</label> |
|
|
<input type="text" name="new_element_name" placeholder="Ex : Saut groupé" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Catégorie</label> |
|
|
<input type="text" name="new_element_categorie" placeholder="Ex : A" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Points</label> |
|
|
<input type="text" name="new_element_points" placeholder="Ex : 1.5" |
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(div); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
