Spaces:
Sleeping
Sleeping
Update templates/histoire.html
Browse files- templates/histoire.html +115 -10
templates/histoire.html
CHANGED
|
@@ -41,6 +41,12 @@
|
|
| 41 |
.form-input:focus {
|
| 42 |
transform: scale(1.01);
|
| 43 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 44 |
</style>
|
| 45 |
</head>
|
| 46 |
<body class="bg-slate-100 min-h-screen">
|
|
@@ -130,17 +136,25 @@
|
|
| 130 |
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
|
| 131 |
<div class="flex items-center mb-6">
|
| 132 |
<i class="fas fa-scroll text-green-600 text-2xl mr-3"></i>
|
| 133 |
-
<h2 class="text-2xl font-bold text-gray-800">Histoire - Type 2</h2>
|
| 134 |
</div>
|
| 135 |
-
<form id="histoire-type2-form" class="space-y-6">
|
| 136 |
<div class="space-y-2">
|
| 137 |
<label for="sujet-histoire-type2" class="text-sm font-medium text-gray-700 block">
|
| 138 |
<i class="fas fa-pen-fancy mr-2"></i>Sujet
|
| 139 |
</label>
|
| 140 |
-
<textarea name="sujet-histoire-type2" id="sujet-histoire-type2" rows="3"
|
| 141 |
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 142 |
placeholder="Entrez le sujet..."></textarea>
|
| 143 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 144 |
<button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors duration-200 flex items-center justify-center">
|
| 145 |
<i class="fas fa-magic mr-2"></i>
|
| 146 |
<span>Générer l'analyse</span>
|
|
@@ -150,28 +164,91 @@
|
|
| 150 |
</div>
|
| 151 |
</div>
|
| 152 |
|
| 153 |
-
<!-- Géographie -->
|
| 154 |
-
<div data-aos="fade-up">
|
| 155 |
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
|
| 156 |
<div class="flex items-center mb-6">
|
| 157 |
<i class="fas fa-globe-europe text-purple-600 text-2xl mr-3"></i>
|
| 158 |
-
<h2 class="text-2xl font-bold text-gray-800">Géographie</h2>
|
| 159 |
</div>
|
| 160 |
<form id="geographie-form" class="space-y-6">
|
| 161 |
<div class="space-y-2">
|
| 162 |
<label for="sujet-geographie" class="text-sm font-medium text-gray-700 block">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 163 |
<i class="fas fa-pen-fancy mr-2"></i>Sujet
|
| 164 |
</label>
|
| 165 |
-
<textarea name="sujet-geographie" id="sujet-geographie" rows="3"
|
| 166 |
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 167 |
-
placeholder="Entrez le sujet
|
| 168 |
</div>
|
| 169 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 170 |
<i class="fas fa-magic mr-2"></i>
|
| 171 |
<span>Générer l'analyse</span>
|
| 172 |
</button>
|
| 173 |
</form>
|
| 174 |
-
<div id="geographie-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div>
|
| 175 |
</div>
|
| 176 |
</div>
|
| 177 |
</div>
|
|
@@ -204,6 +281,30 @@
|
|
| 204 |
`;
|
| 205 |
}
|
| 206 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 207 |
async function submitForm(formId, outputId, endpoint) {
|
| 208 |
const form = document.getElementById(formId);
|
| 209 |
const output = document.getElementById(outputId);
|
|
@@ -251,6 +352,10 @@
|
|
| 251 |
submitForm('histoire-form', 'histoire-output', '/api/histoire');
|
| 252 |
submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
|
| 253 |
submitForm('geographie-form', 'geographie-output', '/api/geographie');
|
|
|
|
|
|
|
|
|
|
|
|
|
| 254 |
});
|
| 255 |
</script>
|
| 256 |
</body>
|
|
|
|
| 41 |
.form-input:focus {
|
| 42 |
transform: scale(1.01);
|
| 43 |
}
|
| 44 |
+
.image-preview {
|
| 45 |
+
max-width: 200px;
|
| 46 |
+
max-height: 200px;
|
| 47 |
+
margin: 10px;
|
| 48 |
+
border: 1px solid #ccc;
|
| 49 |
+
}
|
| 50 |
</style>
|
| 51 |
</head>
|
| 52 |
<body class="bg-slate-100 min-h-screen">
|
|
|
|
| 136 |
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
|
| 137 |
<div class="flex items-center mb-6">
|
| 138 |
<i class="fas fa-scroll text-green-600 text-2xl mr-3"></i>
|
| 139 |
+
<h2 class="text-2xl font-bold text-gray-800">Histoire - Type 2 (Images)</h2>
|
| 140 |
</div>
|
| 141 |
+
<form id="histoire-type2-form" class="space-y-6" enctype="multipart/form-data">
|
| 142 |
<div class="space-y-2">
|
| 143 |
<label for="sujet-histoire-type2" class="text-sm font-medium text-gray-700 block">
|
| 144 |
<i class="fas fa-pen-fancy mr-2"></i>Sujet
|
| 145 |
</label>
|
| 146 |
+
<textarea name="sujet-histoire-type2" id="sujet-histoire-type2" rows="3"
|
| 147 |
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 148 |
placeholder="Entrez le sujet..."></textarea>
|
| 149 |
</div>
|
| 150 |
+
<div class="space-y-2">
|
| 151 |
+
<label for="images-histoire-type2" class="text-sm font-medium text-gray-700 block">
|
| 152 |
+
<i class="fas fa-images mr-2"></i>Images (Multiple)
|
| 153 |
+
</label>
|
| 154 |
+
<input type="file" name="images-histoire-type2" id="images-histoire-type2" multiple
|
| 155 |
+
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
| 156 |
+
<div id="image-preview-histoire-type2" class="flex flex-wrap"></div>
|
| 157 |
+
</div>
|
| 158 |
<button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors duration-200 flex items-center justify-center">
|
| 159 |
<i class="fas fa-magic mr-2"></i>
|
| 160 |
<span>Générer l'analyse</span>
|
|
|
|
| 164 |
</div>
|
| 165 |
</div>
|
| 166 |
|
| 167 |
+
<!-- Géographie Type 1 & 3 -->
|
| 168 |
+
<div class="mb-8" data-aos="fade-up">
|
| 169 |
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
|
| 170 |
<div class="flex items-center mb-6">
|
| 171 |
<i class="fas fa-globe-europe text-purple-600 text-2xl mr-3"></i>
|
| 172 |
+
<h2 class="text-2xl font-bold text-gray-800">Dissertation de Géographie - Type 1 & 3</h2>
|
| 173 |
</div>
|
| 174 |
<form id="geographie-form" class="space-y-6">
|
| 175 |
<div class="space-y-2">
|
| 176 |
<label for="sujet-geographie" class="text-sm font-medium text-gray-700 block">
|
| 177 |
+
<i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation
|
| 178 |
+
</label>
|
| 179 |
+
<textarea name="sujet-geographie" id="sujet-geographie" rows="3"
|
| 180 |
+
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 181 |
+
placeholder="Entrez le sujet de votre dissertation..."></textarea>
|
| 182 |
+
</div>
|
| 183 |
+
|
| 184 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 185 |
+
<div class="space-y-2">
|
| 186 |
+
<label for="point1-geographie" class="text-sm font-medium text-gray-700 block">
|
| 187 |
+
<i class="fas fa-list-ol mr-2"></i>Premier point
|
| 188 |
+
</label>
|
| 189 |
+
<input type="text" name="point1-geographie" id="point1-geographie"
|
| 190 |
+
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 191 |
+
placeholder="Premier argument...">
|
| 192 |
+
</div>
|
| 193 |
+
|
| 194 |
+
<div class="space-y-2">
|
| 195 |
+
<label for="point2-geographie" class="text-sm font-medium text-gray-700 block">
|
| 196 |
+
<i class="fas fa-list-ol mr-2"></i>Deuxième point
|
| 197 |
+
</label>
|
| 198 |
+
<input type="text" name="point2-geographie" id="point2-geographie"
|
| 199 |
+
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 200 |
+
placeholder="Deuxième argument...">
|
| 201 |
+
</div>
|
| 202 |
+
|
| 203 |
+
<div class="space-y-2">
|
| 204 |
+
<label for="point3-geographie" class="text-sm font-medium text-gray-700 block">
|
| 205 |
+
<i class="fas fa-list-ol mr-2"></i>Troisième point
|
| 206 |
+
</label>
|
| 207 |
+
<input type="text" name="point3-geographie" id="point3-geographie"
|
| 208 |
+
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 209 |
+
placeholder="Troisième argument...">
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
|
| 213 |
+
<button type="submit" class="w-full bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition-colors duration-200 flex items-center justify-center space-x-2">
|
| 214 |
+
<i class="fas fa-magic mr-2"></i>
|
| 215 |
+
<span>Générer la dissertation</span>
|
| 216 |
+
</button>
|
| 217 |
+
</form>
|
| 218 |
+
<div id="geographie-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
|
| 222 |
+
<!-- Géographie Type 2 -->
|
| 223 |
+
<div class="mb-8" data-aos="fade-up">
|
| 224 |
+
<div class="bg-white rounded-xl shadow-xl p-8 card-hover">
|
| 225 |
+
<div class="flex items-center mb-6">
|
| 226 |
+
<i class="fas fa-map-marked-alt text-yellow-600 text-2xl mr-3"></i>
|
| 227 |
+
<h2 class="text-2xl font-bold text-gray-800">Géographie - Type 2 (Images)</h2>
|
| 228 |
+
</div>
|
| 229 |
+
<form id="geographie-type2-form" class="space-y-6" enctype="multipart/form-data">
|
| 230 |
+
<div class="space-y-2">
|
| 231 |
+
<label for="sujet-geographie-type2" class="text-sm font-medium text-gray-700 block">
|
| 232 |
<i class="fas fa-pen-fancy mr-2"></i>Sujet
|
| 233 |
</label>
|
| 234 |
+
<textarea name="sujet-geographie-type2" id="sujet-geographie-type2" rows="3"
|
| 235 |
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
| 236 |
+
placeholder="Entrez le sujet..."></textarea>
|
| 237 |
</div>
|
| 238 |
+
<div class="space-y-2">
|
| 239 |
+
<label for="images-geographie-type2" class="text-sm font-medium text-gray-700 block">
|
| 240 |
+
<i class="fas fa-images mr-2"></i>Images (Multiple)
|
| 241 |
+
</label>
|
| 242 |
+
<input type="file" name="images-geographie-type2" id="images-geographie-type2" multiple
|
| 243 |
+
class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
| 244 |
+
<div id="image-preview-geographie-type2" class="flex flex-wrap"></div>
|
| 245 |
+
</div>
|
| 246 |
+
<button type="submit" class="w-full bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-yellow-700 transition-colors duration-200 flex items-center justify-center">
|
| 247 |
<i class="fas fa-magic mr-2"></i>
|
| 248 |
<span>Générer l'analyse</span>
|
| 249 |
</button>
|
| 250 |
</form>
|
| 251 |
+
<div id="geographie-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div>
|
| 252 |
</div>
|
| 253 |
</div>
|
| 254 |
</div>
|
|
|
|
| 281 |
`;
|
| 282 |
}
|
| 283 |
|
| 284 |
+
function handleImagePreviews(inputId, previewContainerId) {
|
| 285 |
+
const input = document.getElementById(inputId);
|
| 286 |
+
const previewContainer = document.getElementById(previewContainerId);
|
| 287 |
+
|
| 288 |
+
input.addEventListener('change', function() {
|
| 289 |
+
previewContainer.innerHTML = ''; // Clear previous previews
|
| 290 |
+
|
| 291 |
+
const files = this.files;
|
| 292 |
+
for (let i = 0; i < files.length; i++) {
|
| 293 |
+
const file = files[i];
|
| 294 |
+
if (file.type.startsWith('image/')) {
|
| 295 |
+
const reader = new FileReader();
|
| 296 |
+
reader.onload = function(e) {
|
| 297 |
+
const img = document.createElement('img');
|
| 298 |
+
img.src = e.target.result;
|
| 299 |
+
img.classList.add('image-preview');
|
| 300 |
+
previewContainer.appendChild(img);
|
| 301 |
+
}
|
| 302 |
+
reader.readAsDataURL(file);
|
| 303 |
+
}
|
| 304 |
+
}
|
| 305 |
+
});
|
| 306 |
+
}
|
| 307 |
+
|
| 308 |
async function submitForm(formId, outputId, endpoint) {
|
| 309 |
const form = document.getElementById(formId);
|
| 310 |
const output = document.getElementById(outputId);
|
|
|
|
| 352 |
submitForm('histoire-form', 'histoire-output', '/api/histoire');
|
| 353 |
submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
|
| 354 |
submitForm('geographie-form', 'geographie-output', '/api/geographie');
|
| 355 |
+
submitForm('geographie-type2-form', 'geographie-type2-output', '/api/geographie-type2');
|
| 356 |
+
|
| 357 |
+
handleImagePreviews('images-histoire-type2', 'image-preview-histoire-type2');
|
| 358 |
+
handleImagePreviews('images-geographie-type2', 'image-preview-geographie-type2');
|
| 359 |
});
|
| 360 |
</script>
|
| 361 |
</body>
|