File size: 18,191 Bytes
f8bfec6 0ddde91 f8bfec6 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 f8bfec6 0ddde91 f8bfec6 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 de339e9 0ddde91 f8bfec6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 |
<!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>
<!-- AlpineJS not strictly needed for this functionality, but keep if used elsewhere -->
<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; }
/* Style for remove button */
.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">
<!-- Loader -->
<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>
<!-- Barre de navigation -->
<header class="bg-indigo-700 text-white navbar-shadow fixed w-full top-0 z-50">
<!-- Navbar content unchanged -->
<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>
<!-- Contenu principal -->
<div class="pt-20 pb-8"> <!-- Increased pt slightly for fixed navbar -->
<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"> <!-- Added action="/eps" -->
<!-- Card principale -->
<div class="bg-white rounded-xl card-shadow p-6 md:p-8">
<!-- Informations générales -->
<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>
<!-- Choix du format de téléchargement -->
<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>
<!-- Éléments techniques -->
<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">
<!-- Initial Element Row -->
<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>
<!-- Add Remove Button Here -->
<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>
<!-- More elements added dynamically here -->
</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>
<!-- Bouton de génération -->
<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');
// --- MODIFIED: Function to add element WITH remove button ---
function addElement() {
const div = document.createElement("div");
// Added 'relative' class for positioning the remove button
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);
}
// --- NEW: Function to remove element ---
function removeElement(button) {
// Check if it's the last element before removing
if (container.children.length > 1) {
const elementCard = button.closest('.element-card'); // Find the parent card div
if (elementCard) {
// Optional: Add fade out animation before removing
elementCard.classList.add('animate__animated', 'animate__fadeOut');
elementCard.addEventListener('animationend', () => {
elementCard.remove();
});
}
} else {
alert("Vous devez conserver au moins un élément technique.");
}
}
// Replace commas with dots in "Points" fields
container.addEventListener('input', function(event) {
if (event.target && event.target.name === 'new_element_points') {
// Allow only numbers and one dot/comma, then replace comma with dot
event.target.value = event.target.value.replace(/[^0-9.,]/g, '').replace(/,/g, '.');
// Ensure only one dot
const parts = event.target.value.split('.');
if (parts.length > 2) {
event.target.value = parts[0] + '.' + parts.slice(1).join('');
}
}
});
// Show loader on form submission
document.querySelector('form').addEventListener('submit', function(e) {
// Basic validation: check if required fields in elements are filled
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;
// Optional: highlight the invalid row
elementNames[i].closest('.element-card').style.border = '1px solid red';
} else {
elementNames[i].closest('.element-card').style.border = '1px solid #e5e7eb'; // Reset border
}
}
if (!allValid) {
e.preventDefault(); // Stop submission
alert("Veuillez remplir tous les champs pour chaque élément technique.");
} else {
document.getElementById('loader').classList.remove('hidden');
}
});
// Optional: Remove validation error border on input
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> |