|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mariam EPS - Générateur d'évaluation gymnique</title> |
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'] |
|
|
}, |
|
|
animation: { |
|
|
'fade-in-up': 'fadeInUp 0.8s ease-out', |
|
|
}, |
|
|
keyframes: { |
|
|
fadeInUp: { |
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' }, |
|
|
'100%': { opacity: '1', transform: 'translateY(0)' }, |
|
|
}, |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
|
|
|
.animate-fade-in-up { |
|
|
animation: fadeInUp 0.8s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-r from-blue-100 via-purple-100 to-pink-100 text-gray-800 font-sans"> |
|
|
|
|
|
<header class="bg-white shadow-lg"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="text-2xl font-bold text-blue-600">Mariam EPS</div> |
|
|
<nav> |
|
|
<ul class="flex space-x-4"> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Accueil</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Fonctionnalités</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Contact</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="py-10"> |
|
|
<div class="max-w-4xl mx-auto px-4"> |
|
|
<div class="bg-white rounded-lg shadow-2xl p-8 animate-fade-in-up"> |
|
|
<h1 class="text-3xl font-bold text-center text-blue-600 mb-6">Générateur d'évaluation gymnique</h1> |
|
|
<form method="POST" class="space-y-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-6"> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 sm: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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 sm: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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h2 class="text-2xl font-semibold text-blue-600 mt-6 mb-4">Ajouter des éléments techniques</h2> |
|
|
<div id="elements_container" class="space-y-6"> |
|
|
<div class="p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm"> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center mt-4"> |
|
|
<button type="button" onclick="addElement()" |
|
|
class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-full transition duration-300 ease-in-out shadow-lg"> |
|
|
Ajouter un autre élément |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<input type="submit" value="Générer le document" |
|
|
class="w-full bg-gradient-to-r from-green-400 to-green-600 hover:from-green-500 hover:to-green-700 text-white font-bold py-3 px-4 rounded-full transition duration-300 ease-in-out shadow"> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-white mt-10 shadow-inner"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-4 text-center text-sm text-gray-600"> |
|
|
© 2025 Mariam EPS. Tous droits réservés. |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
function addElement() { |
|
|
const container = document.getElementById("elements_container"); |
|
|
const div = document.createElement("div"); |
|
|
div.className = "p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm animate-fade-in-up"; |
|
|
div.innerHTML = ` |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(div); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
