Update templates/index.html
Browse files- templates/index.html +19 -20
templates/index.html
CHANGED
|
@@ -14,45 +14,37 @@
|
|
| 14 |
font-family: 'Montserrat', sans-serif;
|
| 15 |
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
| 16 |
}
|
| 17 |
-
|
| 18 |
.card-shadow {
|
| 19 |
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 20 |
}
|
| 21 |
-
|
| 22 |
.input-focus-effect {
|
| 23 |
transition: all 0.3s ease;
|
| 24 |
}
|
| 25 |
-
|
| 26 |
.input-focus-effect:focus {
|
| 27 |
transform: translateY(-2px);
|
| 28 |
box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2);
|
| 29 |
}
|
| 30 |
-
|
| 31 |
.btn-hover-effect {
|
| 32 |
transition: all 0.3s ease;
|
| 33 |
}
|
| 34 |
-
|
| 35 |
.btn-hover-effect:hover {
|
| 36 |
transform: translateY(-2px);
|
| 37 |
box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2);
|
| 38 |
}
|
| 39 |
-
|
| 40 |
.element-card {
|
| 41 |
transition: all 0.3s ease;
|
| 42 |
}
|
| 43 |
-
|
| 44 |
.element-card:hover {
|
| 45 |
transform: translateY(-3px);
|
| 46 |
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
| 47 |
}
|
| 48 |
-
|
| 49 |
.navbar-shadow {
|
| 50 |
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
| 51 |
}
|
| 52 |
</style>
|
| 53 |
</head>
|
| 54 |
<body class="min-h-screen">
|
| 55 |
-
<!-- Barre de navigation
|
| 56 |
<header class="bg-indigo-700 text-white navbar-shadow fixed w-full top-0 z-50">
|
| 57 |
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
| 58 |
<div class="flex items-center">
|
|
@@ -74,7 +66,7 @@
|
|
| 74 |
</div>
|
| 75 |
</header>
|
| 76 |
|
| 77 |
-
<!-- Contenu principal
|
| 78 |
<div class="pt-16 pb-8">
|
| 79 |
<div class="container max-w-4xl mx-auto px-4 mt-8">
|
| 80 |
<div class="mb-8 text-center animate__animated animate__fadeInDown">
|
|
@@ -85,7 +77,7 @@
|
|
| 85 |
<form method="POST" class="space-y-8 animate__animated animate__fadeIn">
|
| 86 |
<!-- Card principale -->
|
| 87 |
<div class="bg-white rounded-xl card-shadow p-6 md:p-8">
|
| 88 |
-
<!-- Informations
|
| 89 |
<div class="mb-8">
|
| 90 |
<h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center">
|
| 91 |
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -93,38 +85,32 @@
|
|
| 93 |
</svg>
|
| 94 |
Informations générales
|
| 95 |
</h2>
|
| 96 |
-
|
| 97 |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 98 |
<div>
|
| 99 |
<label for="centre_examen" class="block text-sm font-medium text-gray-700 mb-1">Centre d'examen</label>
|
| 100 |
<input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen"
|
| 101 |
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">
|
| 102 |
</div>
|
| 103 |
-
|
| 104 |
<div>
|
| 105 |
<label for="type_examen" class="block text-sm font-medium text-gray-700 mb-1">Type d'examen</label>
|
| 106 |
<input type="text" id="type_examen" name="type_examen" value="Bac Général"
|
| 107 |
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">
|
| 108 |
</div>
|
| 109 |
-
|
| 110 |
<div>
|
| 111 |
<label for="serie" class="block text-sm font-medium text-gray-700 mb-1">Série</label>
|
| 112 |
<input type="text" id="serie" name="serie" value="Série"
|
| 113 |
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">
|
| 114 |
</div>
|
| 115 |
-
|
| 116 |
<div>
|
| 117 |
<label for="etablissement" class="block text-sm font-medium text-gray-700 mb-1">Établissement</label>
|
| 118 |
<input type="text" id="etablissement" name="etablissement" value="Établissement"
|
| 119 |
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">
|
| 120 |
</div>
|
| 121 |
-
|
| 122 |
<div>
|
| 123 |
<label for="session" class="block text-sm font-medium text-gray-700 mb-1">Session</label>
|
| 124 |
<input type="text" id="session" name="session" value="2025"
|
| 125 |
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">
|
| 126 |
</div>
|
| 127 |
-
|
| 128 |
<div>
|
| 129 |
<label for="nom_candidat" class="block text-sm font-medium text-gray-700 mb-1">Nom du candidat</label>
|
| 130 |
<input type="text" id="nom_candidat" name="nom_candidat" value="Candidat"
|
|
@@ -133,6 +119,21 @@
|
|
| 133 |
</div>
|
| 134 |
</div>
|
| 135 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 136 |
<!-- Éléments techniques -->
|
| 137 |
<div>
|
| 138 |
<h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center">
|
|
@@ -141,7 +142,6 @@
|
|
| 141 |
</svg>
|
| 142 |
Éléments techniques
|
| 143 |
</h2>
|
| 144 |
-
|
| 145 |
<div id="elements_container" class="space-y-4">
|
| 146 |
<div class="p-5 bg-gray-50 border border-gray-200 rounded-lg element-card">
|
| 147 |
<div class="grid grid-cols-1 gap-2">
|
|
@@ -165,7 +165,6 @@
|
|
| 165 |
</div>
|
| 166 |
</div>
|
| 167 |
</div>
|
| 168 |
-
|
| 169 |
<div class="flex justify-center mt-6">
|
| 170 |
<button type="button" onclick="addElement()"
|
| 171 |
class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg btn-hover-effect">
|
|
@@ -223,4 +222,4 @@
|
|
| 223 |
}
|
| 224 |
</script>
|
| 225 |
</body>
|
| 226 |
-
</html>
|
|
|
|
| 14 |
font-family: 'Montserrat', sans-serif;
|
| 15 |
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
| 16 |
}
|
|
|
|
| 17 |
.card-shadow {
|
| 18 |
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 19 |
}
|
|
|
|
| 20 |
.input-focus-effect {
|
| 21 |
transition: all 0.3s ease;
|
| 22 |
}
|
|
|
|
| 23 |
.input-focus-effect:focus {
|
| 24 |
transform: translateY(-2px);
|
| 25 |
box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2);
|
| 26 |
}
|
|
|
|
| 27 |
.btn-hover-effect {
|
| 28 |
transition: all 0.3s ease;
|
| 29 |
}
|
|
|
|
| 30 |
.btn-hover-effect:hover {
|
| 31 |
transform: translateY(-2px);
|
| 32 |
box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2);
|
| 33 |
}
|
|
|
|
| 34 |
.element-card {
|
| 35 |
transition: all 0.3s ease;
|
| 36 |
}
|
|
|
|
| 37 |
.element-card:hover {
|
| 38 |
transform: translateY(-3px);
|
| 39 |
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
| 40 |
}
|
|
|
|
| 41 |
.navbar-shadow {
|
| 42 |
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
| 43 |
}
|
| 44 |
</style>
|
| 45 |
</head>
|
| 46 |
<body class="min-h-screen">
|
| 47 |
+
<!-- Barre de navigation -->
|
| 48 |
<header class="bg-indigo-700 text-white navbar-shadow fixed w-full top-0 z-50">
|
| 49 |
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
| 50 |
<div class="flex items-center">
|
|
|
|
| 66 |
</div>
|
| 67 |
</header>
|
| 68 |
|
| 69 |
+
<!-- Contenu principal -->
|
| 70 |
<div class="pt-16 pb-8">
|
| 71 |
<div class="container max-w-4xl mx-auto px-4 mt-8">
|
| 72 |
<div class="mb-8 text-center animate__animated animate__fadeInDown">
|
|
|
|
| 77 |
<form method="POST" class="space-y-8 animate__animated animate__fadeIn">
|
| 78 |
<!-- Card principale -->
|
| 79 |
<div class="bg-white rounded-xl card-shadow p-6 md:p-8">
|
| 80 |
+
<!-- Informations générales -->
|
| 81 |
<div class="mb-8">
|
| 82 |
<h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center">
|
| 83 |
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
|
| 85 |
</svg>
|
| 86 |
Informations générales
|
| 87 |
</h2>
|
|
|
|
| 88 |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 89 |
<div>
|
| 90 |
<label for="centre_examen" class="block text-sm font-medium text-gray-700 mb-1">Centre d'examen</label>
|
| 91 |
<input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen"
|
| 92 |
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">
|
| 93 |
</div>
|
|
|
|
| 94 |
<div>
|
| 95 |
<label for="type_examen" class="block text-sm font-medium text-gray-700 mb-1">Type d'examen</label>
|
| 96 |
<input type="text" id="type_examen" name="type_examen" value="Bac Général"
|
| 97 |
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">
|
| 98 |
</div>
|
|
|
|
| 99 |
<div>
|
| 100 |
<label for="serie" class="block text-sm font-medium text-gray-700 mb-1">Série</label>
|
| 101 |
<input type="text" id="serie" name="serie" value="Série"
|
| 102 |
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">
|
| 103 |
</div>
|
|
|
|
| 104 |
<div>
|
| 105 |
<label for="etablissement" class="block text-sm font-medium text-gray-700 mb-1">Établissement</label>
|
| 106 |
<input type="text" id="etablissement" name="etablissement" value="Établissement"
|
| 107 |
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">
|
| 108 |
</div>
|
|
|
|
| 109 |
<div>
|
| 110 |
<label for="session" class="block text-sm font-medium text-gray-700 mb-1">Session</label>
|
| 111 |
<input type="text" id="session" name="session" value="2025"
|
| 112 |
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">
|
| 113 |
</div>
|
|
|
|
| 114 |
<div>
|
| 115 |
<label for="nom_candidat" class="block text-sm font-medium text-gray-700 mb-1">Nom du candidat</label>
|
| 116 |
<input type="text" id="nom_candidat" name="nom_candidat" value="Candidat"
|
|
|
|
| 119 |
</div>
|
| 120 |
</div>
|
| 121 |
|
| 122 |
+
<!-- Choix du format de téléchargement -->
|
| 123 |
+
<div class="mb-6">
|
| 124 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Choisissez le format de téléchargement :</label>
|
| 125 |
+
<div class="flex items-center space-x-4">
|
| 126 |
+
<label class="inline-flex items-center">
|
| 127 |
+
<input type="radio" name="format" value="docx" checked class="form-radio">
|
| 128 |
+
<span class="ml-2">DOCX</span>
|
| 129 |
+
</label>
|
| 130 |
+
<label class="inline-flex items-center">
|
| 131 |
+
<input type="radio" name="format" value="pdf" class="form-radio">
|
| 132 |
+
<span class="ml-2">PDF</span>
|
| 133 |
+
</label>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
|
| 137 |
<!-- Éléments techniques -->
|
| 138 |
<div>
|
| 139 |
<h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center">
|
|
|
|
| 142 |
</svg>
|
| 143 |
Éléments techniques
|
| 144 |
</h2>
|
|
|
|
| 145 |
<div id="elements_container" class="space-y-4">
|
| 146 |
<div class="p-5 bg-gray-50 border border-gray-200 rounded-lg element-card">
|
| 147 |
<div class="grid grid-cols-1 gap-2">
|
|
|
|
| 165 |
</div>
|
| 166 |
</div>
|
| 167 |
</div>
|
|
|
|
| 168 |
<div class="flex justify-center mt-6">
|
| 169 |
<button type="button" onclick="addElement()"
|
| 170 |
class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg btn-hover-effect">
|
|
|
|
| 222 |
}
|
| 223 |
</script>
|
| 224 |
</body>
|
| 225 |
+
</html>
|