Hugging Face's logo

Spaces:
Docfile
/
Eps
Sleeping

App Files Community
Eps / templates /index.html
Docfile's picture
Docfile
Update templates/index.html
0ddde91 verified
raw
history blame contribute delete
18.2 kB
<!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>