Update templates/index.html
Browse files- templates/index.html +135 -87
templates/index.html
CHANGED
|
@@ -3,126 +3,174 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>Générateur d'évaluation gymnique</title>
|
| 7 |
<!-- Inclusion de Tailwind via CDN -->
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 14 |
}
|
| 15 |
-
|
| 16 |
-
|
|
|
|
|
|
|
|
|
|
| 17 |
}
|
| 18 |
</style>
|
| 19 |
</head>
|
| 20 |
-
<body class="bg-
|
| 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 |
</div>
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 54 |
</div>
|
| 55 |
-
<div>
|
| 56 |
-
<
|
| 57 |
-
|
| 58 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 59 |
</div>
|
| 60 |
</div>
|
| 61 |
-
</div>
|
| 62 |
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
|
|
|
|
|
|
|
|
|
| 83 |
</div>
|
| 84 |
</div>
|
| 85 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 86 |
</div>
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
<
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
</
|
| 93 |
-
</
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
|
|
|
|
|
|
| 100 |
</div>
|
| 101 |
-
</
|
| 102 |
|
| 103 |
<script>
|
| 104 |
-
// Fonction d'ajout dynamique d'un élément technique
|
| 105 |
function addElement() {
|
| 106 |
const container = document.getElementById("elements_container");
|
| 107 |
const div = document.createElement("div");
|
| 108 |
-
div.className = "p-4 bg-gray-
|
| 109 |
div.innerHTML = `
|
| 110 |
-
<div class="grid grid-cols-1 gap-
|
| 111 |
<div>
|
| 112 |
<label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
|
| 113 |
<input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
|
| 114 |
-
class="mt-1 block w-full rounded-md border-gray-300
|
| 115 |
</div>
|
| 116 |
-
<div class="grid grid-cols-2 gap-
|
| 117 |
<div>
|
| 118 |
<label class="block text-sm font-medium text-gray-700">Catégorie</label>
|
| 119 |
<input type="text" name="new_element_categorie" placeholder="Ex : A"
|
| 120 |
-
class="mt-1 block w-full rounded-md border-gray-300
|
| 121 |
</div>
|
| 122 |
<div>
|
| 123 |
<label class="block text-sm font-medium text-gray-700">Points</label>
|
| 124 |
<input type="text" name="new_element_points" placeholder="Ex : 1.5"
|
| 125 |
-
class="mt-1 block w-full rounded-md border-gray-300
|
| 126 |
</div>
|
| 127 |
</div>
|
| 128 |
</div>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Mariam EPS - Générateur d'évaluation gymnique</title>
|
| 7 |
<!-- Inclusion de Tailwind via CDN -->
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<!-- Google Fonts -->
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
fontFamily: {
|
| 16 |
+
sans: ['Inter', 'sans-serif']
|
| 17 |
+
},
|
| 18 |
+
animation: {
|
| 19 |
+
'fade-in-up': 'fadeInUp 0.8s ease-out',
|
| 20 |
+
},
|
| 21 |
+
keyframes: {
|
| 22 |
+
fadeInUp: {
|
| 23 |
+
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
| 24 |
+
'100%': { opacity: '1', transform: 'translateY(0)' },
|
| 25 |
+
},
|
| 26 |
+
},
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
}
|
| 30 |
+
</script>
|
| 31 |
+
<style>
|
| 32 |
+
/* Pour les navigateurs qui ne prennent pas en charge Tailwind CSS animations */
|
| 33 |
+
.animate-fade-in-up {
|
| 34 |
+
animation: fadeInUp 0.8s ease-out;
|
| 35 |
}
|
| 36 |
</style>
|
| 37 |
</head>
|
| 38 |
+
<body class="bg-gradient-to-r from-blue-100 via-purple-100 to-pink-100 text-gray-800 font-sans">
|
| 39 |
+
<!-- Header -->
|
| 40 |
+
<header class="bg-white shadow-lg">
|
| 41 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 42 |
+
<div class="flex justify-between items-center py-4">
|
| 43 |
+
<div class="text-2xl font-bold text-blue-600">Mariam EPS</div>
|
| 44 |
+
<nav>
|
| 45 |
+
<ul class="flex space-x-4">
|
| 46 |
+
<li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Accueil</a></li>
|
| 47 |
+
<li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Fonctionnalités</a></li>
|
| 48 |
+
<li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Contact</a></li>
|
| 49 |
+
</ul>
|
| 50 |
+
</nav>
|
| 51 |
+
</div>
|
| 52 |
+
</div>
|
| 53 |
+
</header>
|
| 54 |
+
|
| 55 |
+
<!-- Main content -->
|
| 56 |
+
<main class="py-10">
|
| 57 |
+
<div class="max-w-4xl mx-auto px-4">
|
| 58 |
+
<div class="bg-white rounded-lg shadow-2xl p-8 animate-fade-in-up">
|
| 59 |
+
<h1 class="text-3xl font-bold text-center text-blue-600 mb-6">Générateur d'évaluation gymnique</h1>
|
| 60 |
+
<form method="POST" class="space-y-6">
|
| 61 |
+
<!-- Informations d'évaluation -->
|
| 62 |
+
<div class="grid grid-cols-1 gap-6">
|
| 63 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
| 64 |
+
<div>
|
| 65 |
+
<label for="centre_examen" class="block text-sm font-medium text-gray-700">Centre d'examen</label>
|
| 66 |
+
<input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen"
|
| 67 |
+
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">
|
| 68 |
+
</div>
|
| 69 |
+
<div>
|
| 70 |
+
<label for="type_examen" class="block text-sm font-medium text-gray-700">Type d'examen</label>
|
| 71 |
+
<input type="text" id="type_examen" name="type_examen" value="Bac Général"
|
| 72 |
+
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">
|
| 73 |
+
</div>
|
| 74 |
</div>
|
| 75 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
| 76 |
+
<div>
|
| 77 |
+
<label for="serie" class="block text-sm font-medium text-gray-700">Série</label>
|
| 78 |
+
<input type="text" id="serie" name="serie" value="Série"
|
| 79 |
+
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">
|
| 80 |
+
</div>
|
| 81 |
+
<div>
|
| 82 |
+
<label for="etablissement" class="block text-sm font-medium text-gray-700">Établissement</label>
|
| 83 |
+
<input type="text" id="etablissement" name="etablissement" value="Établissement"
|
| 84 |
+
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">
|
| 85 |
+
</div>
|
| 86 |
</div>
|
| 87 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
| 88 |
+
<div>
|
| 89 |
+
<label for="session" class="block text-sm font-medium text-gray-700">Session</label>
|
| 90 |
+
<input type="text" id="session" name="session" value="2025"
|
| 91 |
+
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">
|
| 92 |
+
</div>
|
| 93 |
+
<div>
|
| 94 |
+
<label for="nom_candidat" class="block text-sm font-medium text-gray-700">Nom du candidat</label>
|
| 95 |
+
<input type="text" id="nom_candidat" name="nom_candidat" value="Candidat"
|
| 96 |
+
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">
|
| 97 |
+
</div>
|
| 98 |
</div>
|
| 99 |
</div>
|
|
|
|
| 100 |
|
| 101 |
+
<!-- Éléments techniques -->
|
| 102 |
+
<div>
|
| 103 |
+
<h2 class="text-2xl font-semibold text-blue-600 mt-6 mb-4">Ajouter des éléments techniques</h2>
|
| 104 |
+
<div id="elements_container" class="space-y-6">
|
| 105 |
+
<div class="p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm">
|
| 106 |
+
<div class="grid grid-cols-1 gap-4">
|
| 107 |
+
<div>
|
| 108 |
+
<label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
|
| 109 |
+
<input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
|
| 110 |
+
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">
|
| 111 |
+
</div>
|
| 112 |
+
<div class="grid grid-cols-2 gap-4">
|
| 113 |
+
<div>
|
| 114 |
+
<label class="block text-sm font-medium text-gray-700">Catégorie</label>
|
| 115 |
+
<input type="text" name="new_element_categorie" placeholder="Ex : A"
|
| 116 |
+
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">
|
| 117 |
+
</div>
|
| 118 |
+
<div>
|
| 119 |
+
<label class="block text-sm font-medium text-gray-700">Points</label>
|
| 120 |
+
<input type="text" name="new_element_points" placeholder="Ex : 1.5"
|
| 121 |
+
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">
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
</div>
|
| 125 |
</div>
|
| 126 |
</div>
|
| 127 |
+
<div class="text-center mt-4">
|
| 128 |
+
<button type="button" onclick="addElement()"
|
| 129 |
+
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">
|
| 130 |
+
Ajouter un autre élément
|
| 131 |
+
</button>
|
| 132 |
+
</div>
|
| 133 |
</div>
|
| 134 |
+
|
| 135 |
+
<!-- Bouton de soumission -->
|
| 136 |
+
<div class="text-center">
|
| 137 |
+
<input type="submit" value="Générer le document"
|
| 138 |
+
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">
|
| 139 |
+
</div>
|
| 140 |
+
</form>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</main>
|
| 144 |
+
|
| 145 |
+
<!-- Footer -->
|
| 146 |
+
<footer class="bg-white mt-10 shadow-inner">
|
| 147 |
+
<div class="max-w-7xl mx-auto px-4 py-4 text-center text-sm text-gray-600">
|
| 148 |
+
© 2025 Mariam EPS. Tous droits réservés.
|
| 149 |
</div>
|
| 150 |
+
</footer>
|
| 151 |
|
| 152 |
<script>
|
|
|
|
| 153 |
function addElement() {
|
| 154 |
const container = document.getElementById("elements_container");
|
| 155 |
const div = document.createElement("div");
|
| 156 |
+
div.className = "p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm animate-fade-in-up";
|
| 157 |
div.innerHTML = `
|
| 158 |
+
<div class="grid grid-cols-1 gap-4">
|
| 159 |
<div>
|
| 160 |
<label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
|
| 161 |
<input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
|
| 162 |
+
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">
|
| 163 |
</div>
|
| 164 |
+
<div class="grid grid-cols-2 gap-4">
|
| 165 |
<div>
|
| 166 |
<label class="block text-sm font-medium text-gray-700">Catégorie</label>
|
| 167 |
<input type="text" name="new_element_categorie" placeholder="Ex : A"
|
| 168 |
+
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">
|
| 169 |
</div>
|
| 170 |
<div>
|
| 171 |
<label class="block text-sm font-medium text-gray-700">Points</label>
|
| 172 |
<input type="text" name="new_element_points" placeholder="Ex : 1.5"
|
| 173 |
+
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">
|
| 174 |
</div>
|
| 175 |
</div>
|
| 176 |
</div>
|