Hugging Face's logo

Spaces:
Docfile
/
Flasksite
Running

App Files Community
2
Docfile commited on
Commit
51e6ea5
·
verified ·
1 Parent(s): e77933c

Update templates/philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +110 -52
templates/philosophie.html CHANGED
@@ -9,7 +9,53 @@
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
10
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
11
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </head>
 
13
  <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
14
  <!-- Navbar -->
15
  <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
@@ -99,7 +145,7 @@
99
  <div class="space-y-3">
100
  <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
101
  <div class="relative">
102
- <textarea id="question" rows="4"
103
  class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4"
104
  placeholder="Saisissez votre sujet de dissertation..."></textarea>
105
  <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
@@ -136,6 +182,15 @@
136
  <span>Copier la dissertation</span>
137
  </span>
138
  </button>
 
 
 
 
 
 
 
 
 
139
  </div>
140
  </div>
141
  </div>
@@ -180,8 +235,8 @@
180
  $('#type-select').change(function() {
181
  const type = $(this).val();
182
  const labels = {
183
- '1': '~',
184
- '2': '~'
185
  };
186
  $('#current-type-label').text(`Type ${type} - ${labels[type]}`);
187
  });
@@ -255,59 +310,21 @@
255
  }
256
  });
257
 
258
- // Gestion de la soumission avec conversion en Markdown
259
  $('#submit-btn').click(function() {
260
  const question = $('#question').val().trim();
261
 
262
  if (!question) {
263
- $('#question').addClass('animate-shake border-red-300');
264
- setTimeout(() => {
265
- $('#question').removeClass('animate-shake border-red-300');
266
- }, 1000);
267
-
268
- Swal.fire({
269
- icon: 'warning',
270
- title: 'Champ requis',
271
- text: 'Veuillez saisir votre sujet de dissertation',
272
- showClass: {
273
- popup: 'animate__animated animate__fadeInDown'
274
- },
275
- hideClass: {
276
- popup: 'animate__animated animate__fadeOutUp'
277
- },
278
- customClass: {
279
- popup: 'rounded-2xl',
280
- confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
281
- }
282
- });
283
  return;
284
  }
285
 
286
- // Animation de chargement sophistiquée
287
  Swal.fire({
288
  title: 'Génération en cours',
289
- html: `
290
- <div class="space-y-4">
291
- <div class="flex justify-center">
292
- <div class="w-16 h-16 relative">
293
- <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
294
- <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
295
- </div>
296
- </div>
297
- <div class="text-gray-600">
298
- <p class="animate-pulse">Analyse philosophique en cours...</p>
299
- <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
300
- </div>
301
- </div>
302
- `,
303
- allowOutsideClick: false,
304
- showConfirmButton: false,
305
- customClass: {
306
- popup: 'rounded-2xl'
307
- }
308
  });
309
 
310
-
311
  const data = {
312
  question: question,
313
  type: $('#type-select').val(),
@@ -322,22 +339,23 @@
322
  success: function(data) {
323
  Swal.close();
324
 
325
- // Conversion et affichage en Markdown
326
  const htmlContent = marked.parse(data.response);
 
327
  $('#response > div').html(htmlContent);
328
  $('#response').removeClass('hidden').addClass('animate-fadeIn');
 
 
 
 
329
 
330
  Toast.fire({
331
  icon: 'success',
332
- title: 'Dissertation générée avec succès',
333
  timer: 2000
334
  });
335
-
336
- // Afficher le bouton de copie
337
- $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
338
  },
339
  error: function() {
340
- Swal.fire({
341
  icon: 'error',
342
  title: 'Erreur de génération',
343
  text: 'Une erreur est survenue lors de la génération de votre dissertation.',
@@ -350,7 +368,47 @@
350
  });
351
  });
352
 
353
- // Gestion de la copie avec retour visuel amélioré
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  $('#copy-btn').click(function() {
355
  const response = $('#response').text();
356
 
 
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
10
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
11
  <script src="https://cdn.tailwindcss.com"></script>
12
+ <style>
13
+ .collapsible {
14
+ cursor: pointer;
15
+ padding: 18px;
16
+ width: 100%;
17
+ border: none;
18
+ text-align: left;
19
+ outline: none;
20
+ font-size: 15px;
21
+ background-color: #f1f1f1;
22
+ }
23
+
24
+ .active, .collapsible:hover {
25
+ background-color: #ddd;
26
+ }
27
+
28
+ .content {
29
+ padding: 0 18px;
30
+ display: none;
31
+ overflow: hidden;
32
+ background-color: white;
33
+ }
34
+ .animate-fadeIn {
35
+ animation: fadeIn 0.5s ease-out forwards;
36
+ }
37
+ .animate-slideUp {
38
+ animation: slideUp 0.5s ease-out forwards;
39
+ }
40
+ .animate-shake {
41
+ animation: shake 0.5s ease-in-out;
42
+ }
43
+ @keyframes fadeIn {
44
+ from { opacity: 0; transform: translateY(10px); }
45
+ to { opacity: 1; transform: translateY(0); }
46
+ }
47
+ @keyframes slideUp {
48
+ from { opacity: 0; transform: translateY(20px); }
49
+ to { opacity: 1; transform: translateY(0); }
50
+ }
51
+ @keyframes shake {
52
+ 0%, 100% { transform: translateX(0); }
53
+ 25% { transform: translateX(-5px); }
54
+ 75% { transform: translateX(5px); }
55
+ }
56
+ </style>
57
  </head>
58
+
59
  <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
60
  <!-- Navbar -->
61
  <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
 
145
  <div class="space-y-3">
146
  <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
147
  <div class="relative">
148
+ <textarea id="question" rows="4"
149
  class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4"
150
  placeholder="Saisissez votre sujet de dissertation..."></textarea>
151
  <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
 
182
  <span>Copier la dissertation</span>
183
  </span>
184
  </button>
185
+
186
+ <!-- Saved Dissertations Section -->
187
+ <div id="saved-dissertations" class="mt-8">
188
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
189
+ <div id="dissertations-list" class="space-y-4">
190
+ <!-- Les dissertations sauvegardées seront insérées ici -->
191
+ </div>
192
+ </div>
193
+
194
  </div>
195
  </div>
196
  </div>
 
235
  $('#type-select').change(function() {
236
  const type = $(this).val();
237
  const labels = {
238
+ '1': 'Introductif',
239
+ '2': 'Comparatif'
240
  };
241
  $('#current-type-label').text(`Type ${type} - ${labels[type]}`);
242
  });
 
310
  }
311
  });
312
 
313
+ // Gestion de la soumission avec conversion en Markdown et sauvegarde
314
  $('#submit-btn').click(function() {
315
  const question = $('#question').val().trim();
316
 
317
  if (!question) {
318
+ // Gestion de l'erreur si la question est vide (inchangée)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
319
  return;
320
  }
321
 
322
+ // Animation de chargement (inchangée)
323
  Swal.fire({
324
  title: 'Génération en cours',
325
+ // ... (reste du code inchangé)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
326
  });
327
 
 
328
  const data = {
329
  question: question,
330
  type: $('#type-select').val(),
 
339
  success: function(data) {
340
  Swal.close();
341
 
 
342
  const htmlContent = marked.parse(data.response);
343
+ // Afficher la dissertation
344
  $('#response > div').html(htmlContent);
345
  $('#response').removeClass('hidden').addClass('animate-fadeIn');
346
+ $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
347
+
348
+ // Sauvegarder la dissertation
349
+ saveDissertation(question, data.response);
350
 
351
  Toast.fire({
352
  icon: 'success',
353
+ title: 'Dissertation générée et sauvegardée avec succès',
354
  timer: 2000
355
  });
 
 
 
356
  },
357
  error: function() {
358
+ Swal.fire({
359
  icon: 'error',
360
  title: 'Erreur de génération',
361
  text: 'Une erreur est survenue lors de la génération de votre dissertation.',
 
368
  });
369
  });
370
 
371
+ // Fonction pour sauvegarder la dissertation (localStorage ou autre)
372
+ function saveDissertation(title, content) {
373
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
374
+ savedDissertations.push({ title, content, timestamp: Date.now() });
375
+ localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
376
+ updateSavedDissertationsList();
377
+
378
+ }
379
+
380
+ // Fonction pour afficher les dissertations sauvegardées (avec sections repliables)
381
+ function updateSavedDissertationsList() {
382
+ const dissertationsList = $('#dissertations-list');
383
+ dissertationsList.empty(); // Vider la liste actuelle
384
+
385
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
386
+
387
+ if (savedDissertations.length === 0) {
388
+ dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
389
+ return;
390
+ }
391
+
392
+
393
+
394
+ savedDissertations.forEach(diss => {
395
+
396
+ const collapsible = $('<button class="collapsible rounded-xl border border-gray-100"></button>').text(diss.title);
397
+ const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content)); // Convertir en HTML
398
+ dissertationsList.append(collapsible, content);
399
+
400
+ // Gestionnaire d'événement pour chaque section repliable
401
+ collapsible.click(function() {
402
+ content.slideToggle("fast");
403
+ collapsible.toggleClass("active");
404
+ });
405
+ });
406
+ }
407
+
408
+ // Appeler la fonction pour afficher les dissertations au chargement de la page
409
+ updateSavedDissertationsList();
410
+
411
+ // Gestion de la copie avec retour visuel amélioré
412
  $('#copy-btn').click(function() {
413
  const response = $('#response').text();
414