Docfile commited on
Commit
29a50f0
·
verified ·
1 Parent(s): d3f6eaa

Update templates/histoire.html

Browse files
Files changed (1) hide show
  1. 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 de géographie..."></textarea>
168
  </div>
169
- <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">
 
 
 
 
 
 
 
 
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>