|
|
<!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); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="pt-16 pb-8"> |
|
|
<div class="container max-w-4xl mx-auto px-4 mt-8" x-data="{ elements: [{}] }"> |
|
|
<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" 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" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> |
|
|
</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" placeholder="Nom du 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> |
|
|
<select id="type_examen" name="type_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"> |
|
|
<option value="Bac Général">Bac Général</option> |
|
|
<option value="Bac Technologique">Bac Technologique</option> |
|
|
<option value="Bac Professionnel">Bac Professionnel</option> |
|
|
<option value="Brevet">Brevet</option> |
|
|
<option value="Autre">Autre</option> |
|
|
</select> |
|
|
</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" placeholder="Série de l'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="etablissement" class="block text-sm font-medium text-gray-700 mb-1">Établissement</label> |
|
|
<input type="text" id="etablissement" name="etablissement" placeholder="Nom de l'é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" placeholder="Année de la session" |
|
|
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" placeholder="Nom et prénom du 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> |
|
|
<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" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
|
|
</svg> |
|
|
Éléments techniques |
|
|
</h2> |
|
|
|
|
|
<div id="elements_container" class="space-y-4"> |
|
|
<template x-for="(element, index) in elements" :key="index"> |
|
|
<div class="p-5 bg-gray-50 border border-gray-200 rounded-lg element-card"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<h3 class="font-medium text-indigo-600">Élément #<span x-text="index + 1"></span></h3> |
|
|
<button type="button" x-show="elements.length > 1" @click="elements.splice(index, 1)" |
|
|
class="text-red-500 hover:text-red-700 transition-colors duration-200"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'élément</label> |
|
|
<input type="text" name="element_name[]" placeholder="Ex : Saut groupé" |
|
|
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">Catégorie</label> |
|
|
<select name="element_categorie[]" |
|
|
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"> |
|
|
<option value="A">A</option> |
|
|
<option value="B">B</option> |
|
|
<option value="C">C</option> |
|
|
<option value="D">D</option> |
|
|
<option value="E">E</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
|
|
<input type="text" name="element_description[]" placeholder="Description de l'élément" |
|
|
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="number" name="element_points[]" placeholder="Ex : 1.5" step="0.1" min="0" |
|
|
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> |
|
|
</template> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mt-6"> |
|
|
<button type="button" @click="elements.push({})" |
|
|
class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg btn-hover-effect"> |
|
|
<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"> |
|
|
<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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> |
|
|
</svg> |
|
|
Générer le document d'évaluation |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
