|
<!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 - Mariam Eps</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.0/cdn.min.js" defer></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
body { |
|
font-family: 'Montserrat', sans-serif; |
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
} |
|
.card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } |
|
.input-focus-effect { transition: all 0.3s ease; } |
|
.input-focus-effect:focus { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2); } |
|
.btn-hover-effect { transition: all 0.3s ease; } |
|
.btn-hover-effect:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2); } |
|
.element-card { transition: all 0.3s ease; } |
|
.element-card:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } |
|
.navbar-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } |
|
textarea.element-name { resize: vertical; min-height: 60px; } |
|
|
|
.remove-btn { background-color: #ef4444; color: white; transition: background-color 0.3s ease; } |
|
.remove-btn:hover { background-color: #dc2626; } |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
|
|
<div id="loader" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-[100]"> |
|
<div class="flex flex-col items-center"> |
|
<div class="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div> |
|
<p class="mt-4 text-white text-lg">Génération en cours...</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<header class="bg-indigo-700 text-white navbar-shadow fixed w-full top-0 z-50"> |
|
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
<div class="flex items-center"> |
|
<span class="font-bold text-xl tracking-wider">Mariam Eps</span> |
|
</div> |
|
<div> |
|
<nav class="hidden md:flex space-x-6"> |
|
<a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Accueil</a> |
|
<a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Évaluations</a> |
|
<a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Ressources</a> |
|
<a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Contact</a> |
|
</nav> |
|
<button class="md:hidden focus:outline-none"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /> |
|
</svg> |
|
</button> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<div class="pt-20 pb-8"> |
|
<div class="container max-w-4xl mx-auto px-4 mt-8"> |
|
<div class="mb-8 text-center animate__animated animate__fadeInDown"> |
|
<h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">Générateur d'évaluation gymnique</h1> |
|
<p class="text-gray-600 max-w-2xl mx-auto">Créez facilement des documents d'évaluation personnalisés pour vos examens de gymnastique</p> |
|
</div> |
|
|
|
<form method="POST" action="/eps" class="space-y-8 animate__animated animate__fadeIn"> |
|
|
|
<div class="bg-white rounded-xl card-shadow p-6 md:p-8"> |
|
|
|
<div class="mb-8"> |
|
<h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" /></svg> |
|
Informations générales |
|
</h2> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
<div> |
|
<label for="centre_examen" class="block text-sm font-medium text-gray-700 mb-1">Centre d'examen</label> |
|
<input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
<div> |
|
<label for="type_examen" class="block text-sm font-medium text-gray-700 mb-1">Type d'examen</label> |
|
<input type="text" id="type_examen" name="type_examen" value="Bac Général" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
<div> |
|
<label for="serie" class="block text-sm font-medium text-gray-700 mb-1">Série</label> |
|
<input type="text" id="serie" name="serie" value="Série" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
<div> |
|
<label for="etablissement" class="block text-sm font-medium text-gray-700 mb-1">Établissement</label> |
|
<input type="text" id="etablissement" name="etablissement" value="Établissement" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
<div> |
|
<label for="session" class="block text-sm font-medium text-gray-700 mb-1">Session</label> |
|
<input type="text" id="session" name="session" value="2025" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
<div> |
|
<label for="nom_candidat" class="block text-sm font-medium text-gray-700 mb-1">Nom du candidat</label> |
|
<input type="text" id="nom_candidat" name="nom_candidat" value="Candidat" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Choisissez le format de téléchargement :</label> |
|
<div class="flex items-center space-x-4"> |
|
<label class="inline-flex items-center cursor-pointer"> |
|
<input type="radio" name="format" value="docx" checked class="form-radio text-indigo-600 focus:ring-indigo-500"> |
|
<span class="ml-2 text-gray-700">DOCX</span> |
|
</label> |
|
<label class="inline-flex items-center cursor-pointer"> |
|
<input type="radio" name="format" value="pdf" class="form-radio text-indigo-600 focus:ring-indigo-500"> |
|
<span class="ml-2 text-gray-700">PDF</span> |
|
</label> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" /><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" /></svg> |
|
Éléments techniques |
|
</h2> |
|
<div id="elements_container" class="space-y-4"> |
|
|
|
<div class="p-5 bg-gray-50 border border-gray-200 rounded-lg element-card relative"> |
|
<div class="grid grid-cols-1 gap-2"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'élément</label> |
|
<textarea name="new_element_name" placeholder="Ex : Saut groupé" required |
|
class="element-name w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea> |
|
</div> |
|
<div class="grid grid-cols-2 gap-2"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label> |
|
<input type="text" name="new_element_categorie" placeholder="Ex : A" required |
|
class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Points</label> |
|
<input type="text" inputmode="decimal" pattern="^\d*([.,])?\d*$" name="new_element_points" placeholder="Ex : 1.5" required |
|
class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button type="button" onclick="removeElement(this)" title="Supprimer cet élément" |
|
class="remove-btn absolute top-2 right-2 p-1.5 rounded-full btn-hover-effect"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> |
|
</svg> |
|
</button> |
|
</div> |
|
|
|
</div> |
|
<div class="flex justify-center mt-6"> |
|
<button type="button" onclick="addElement()" id="add-element-btn" |
|
class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg btn-hover-effect focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> |
|
</svg> |
|
Ajouter un autre élément |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="animate__animated animate__fadeInUp"> |
|
<button type="submit" |
|
class="w-full py-3 px-6 bg-gradient-to-r from-indigo-600 to-blue-500 text-white font-medium rounded-lg btn-hover-effect flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /></svg> |
|
Générer le document |
|
</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const container = document.getElementById("elements_container"); |
|
const addButton = document.getElementById('add-element-btn'); |
|
|
|
|
|
function addElement() { |
|
const div = document.createElement("div"); |
|
|
|
div.className = "p-5 bg-gray-50 border border-gray-200 rounded-lg element-card relative animate__animated animate__fadeIn"; |
|
div.innerHTML = ` |
|
<div class="grid grid-cols-1 gap-2"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'élément</label> |
|
<textarea name="new_element_name" placeholder="Ex : Saut groupé" required |
|
class="element-name w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea> |
|
</div> |
|
<div class="grid grid-cols-2 gap-2"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label> |
|
<input type="text" name="new_element_categorie" placeholder="Ex : A" required |
|
class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Points</label> |
|
<input type="text" inputmode="decimal" pattern="^\\d*([.,])?\\d*$" name="new_element_points" placeholder="Ex : 1.5" required |
|
class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Remove Button Added --> |
|
<button type="button" onclick="removeElement(this)" title="Supprimer cet élément" |
|
class="remove-btn absolute top-2 right-2 p-1.5 rounded-full btn-hover-effect"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> |
|
</svg> |
|
</button> |
|
`; |
|
container.appendChild(div); |
|
} |
|
|
|
|
|
function removeElement(button) { |
|
|
|
if (container.children.length > 1) { |
|
const elementCard = button.closest('.element-card'); |
|
if (elementCard) { |
|
|
|
elementCard.classList.add('animate__animated', 'animate__fadeOut'); |
|
elementCard.addEventListener('animationend', () => { |
|
elementCard.remove(); |
|
}); |
|
} |
|
} else { |
|
alert("Vous devez conserver au moins un élément technique."); |
|
} |
|
} |
|
|
|
|
|
container.addEventListener('input', function(event) { |
|
if (event.target && event.target.name === 'new_element_points') { |
|
|
|
event.target.value = event.target.value.replace(/[^0-9.,]/g, '').replace(/,/g, '.'); |
|
|
|
const parts = event.target.value.split('.'); |
|
if (parts.length > 2) { |
|
event.target.value = parts[0] + '.' + parts.slice(1).join(''); |
|
} |
|
} |
|
}); |
|
|
|
|
|
document.querySelector('form').addEventListener('submit', function(e) { |
|
|
|
let allValid = true; |
|
const elementNames = document.querySelectorAll('textarea[name="new_element_name"]'); |
|
const elementCats = document.querySelectorAll('input[name="new_element_categorie"]'); |
|
const elementPoints = document.querySelectorAll('input[name="new_element_points"]'); |
|
|
|
for (let i = 0; i < elementNames.length; i++) { |
|
if (!elementNames[i].value.trim() || !elementCats[i].value.trim() || !elementPoints[i].value.trim()) { |
|
allValid = false; |
|
|
|
elementNames[i].closest('.element-card').style.border = '1px solid red'; |
|
} else { |
|
elementNames[i].closest('.element-card').style.border = '1px solid #e5e7eb'; |
|
} |
|
} |
|
|
|
if (!allValid) { |
|
e.preventDefault(); |
|
alert("Veuillez remplir tous les champs pour chaque élément technique."); |
|
} else { |
|
document.getElementById('loader').classList.remove('hidden'); |
|
} |
|
}); |
|
|
|
|
|
container.addEventListener('input', function(event) { |
|
if (event.target && (event.target.name === 'new_element_name' || event.target.name === 'new_element_categorie' || event.target.name === 'new_element_points')) { |
|
event.target.closest('.element-card').style.border = '1px solid #e5e7eb'; |
|
} |
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |
