Hugging Face's logo

Spaces:
Docfile
/
Flasksite
Running

App Files Community
2
Docfile commited on
Commit
cabb504
·
verified ·
1 Parent(s): 1083672

Create philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +774 -0
templates/philosophie.html ADDED
@@ -0,0 +1,774 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mariam AI - Assistant Philosophique</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8
+ <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
9
+ <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.js"></script>
14
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
15
+ <script src="https://cdn.tailwindcss.com"></script>
16
+ <style>
17
+ /* Styles existants */
18
+ .collapsible {
19
+ cursor: pointer;
20
+ padding: 18px;
21
+ width: 100%;
22
+ border: none;
23
+ text-align: left;
24
+ outline: none;
25
+ font-size: 15px;
26
+ background-color: #f1f1f1;
27
+ display: flex;
28
+ justify-content: space-between;
29
+ align-items: center;
30
+ }
31
+
32
+ /* Nouveaux styles pour le Markdown responsive */
33
+ .prose {
34
+ max-width: 100% !important;
35
+ }
36
+
37
+ .prose p {
38
+ margin-top: 1.25em;
39
+ margin-bottom: 1.25em;
40
+ line-height: 1.75;
41
+ }
42
+
43
+ .prose ul {
44
+ margin-top: 1.25em;
45
+ margin-bottom: 1.25em;
46
+ padding-left: 1.625em;
47
+ }
48
+
49
+ .prose li {
50
+ margin-top: 0.5em;
51
+ margin-bottom: 0.5em;
52
+ padding-left: 0.375em;
53
+ }
54
+
55
+ .prose h1, .prose h2, .prose h3 {
56
+ margin-top: 2em;
57
+ margin-bottom: 1em;
58
+ line-height: 1.3;
59
+ }
60
+
61
+ /* Styles spécifiques pour mobile */
62
+ @media (max-width: 640px) {
63
+ .prose {
64
+ font-size: 0.95rem;
65
+ }
66
+
67
+ .prose p {
68
+ margin-top: 1em;
69
+ margin-bottom: 1em;
70
+ }
71
+
72
+ .prose ul {
73
+ padding-left: 1.25em;
74
+ }
75
+
76
+ .prose li {
77
+ margin-top: 0.375em;
78
+ margin-bottom: 0.375em;
79
+ }
80
+
81
+ .prose h1, .prose h2, .prose h3 {
82
+ margin-top: 1.5em;
83
+ margin-bottom: 0.75em;
84
+ }
85
+ }
86
+
87
+ /* Styles pour améliorer la lisibilité du texte */
88
+ #response .prose {
89
+ color: #374151;
90
+ word-wrap: break-word;
91
+ overflow-wrap: break-word;
92
+ hyphens: auto;
93
+ }
94
+
95
+ #response .prose > * + * {
96
+ margin-top: 1em;
97
+ }
98
+
99
+ #response .prose blockquote {
100
+ margin: 1.5em 0;
101
+ padding-left: 1em;
102
+ border-left: 4px solid #e5e7eb;
103
+ font-style: italic;
104
+ }
105
+
106
+ #response .prose code {
107
+ background-color: #f3f4f6;
108
+ padding: 0.2em 0.4em;
109
+ border-radius: 0.25em;
110
+ font-size: 0.875em;
111
+ }
112
+
113
+
114
+
115
+
116
+ .active, .collapsible:hover {
117
+ background-color: #ddd;
118
+ }
119
+
120
+ .content {
121
+ padding: 0 18px;
122
+ display: none;
123
+ overflow: hidden;
124
+ background-color: white;
125
+ }
126
+ .animate-fadeIn {
127
+ animation: fadeIn 0.5s ease-out forwards;
128
+ }
129
+ .animate-slideUp {
130
+ animation: slideUp 0.5s ease-out forwards;
131
+ }
132
+ .animate-shake {
133
+ animation: shake 0.5s ease-in-out;
134
+ }
135
+ @keyframes fadeIn {
136
+ from { opacity: 0; transform: translateY(10px); }
137
+ to { opacity: 1; transform: translateY(0); }
138
+ }
139
+ @keyframes slideUp {
140
+ from { opacity: 0; transform: translateY(20px); }
141
+ to { opacity: 1; transform: translateY(0); }
142
+ }
143
+ @keyframes shake {
144
+ 0%, 100% { transform: translateX(0); }
145
+ 25% { transform: translateX(-5px); }
146
+ 75% { transform: translateX(5px); }
147
+ }
148
+
149
+ /* Ajout du style pour Select2 */
150
+ .select2-container--default .select2-selection--single {
151
+ border: 1px solid #e5e7eb;
152
+ border-radius: 0.75rem;
153
+ height: auto;
154
+ padding: 0.625rem 1rem;
155
+ background-color: white;
156
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
157
+ display: flex;
158
+ align-items: center;
159
+ }
160
+ .select2-container--default .select2-selection--single .select2-selection__rendered {
161
+ color: #374151;
162
+ line-height: inherit;
163
+ padding-right: 1.5rem;
164
+ }
165
+
166
+ .select2-container--default .select2-selection--single .select2-selection__arrow {
167
+ top: 50%;
168
+ transform: translateY(-50%);
169
+ right: 0.75rem;
170
+ }
171
+
172
+ .select2-dropdown {
173
+ border: 1px solid #e5e7eb;
174
+ border-radius: 0.75rem;
175
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
176
+ padding: 0.25rem;
177
+ }
178
+ .select2-search--dropdown .select2-search__field {
179
+ border: 1px solid #e5e7eb;
180
+ border-radius: 0.375rem;
181
+ padding: 0.5rem;
182
+ }
183
+
184
+ .select2-results__options {
185
+ padding: 0.25rem;
186
+ }
187
+ .select2-results__option {
188
+ padding: 0.5rem 0.75rem;
189
+ }
190
+
191
+
192
+ .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
193
+ background-color: #ede9fe;
194
+ color:#374151;
195
+ }
196
+
197
+ .select2-container--default .select2-results__option--selected {
198
+ background-color: #f3f4f6;
199
+ color:#374151;
200
+ }
201
+ .select2-results__option .course-author {
202
+ font-size: 0.875rem;
203
+ color: #6b7280;
204
+ display: block;
205
+ margin-top: 0.25rem;
206
+ }
207
+ .select2-container--open .select2-selection--single .select2-selection__arrow {
208
+ border-color: transparent transparent #a8a29e;
209
+
210
+ }
211
+
212
+ </style>
213
+ </head>
214
+
215
+ <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
216
+ <!-- Navbar -->
217
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
218
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
219
+ <div class="flex justify-between items-center h-16">
220
+ <div class="flex items-center">
221
+ <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
222
+ Mariam AI
223
+ </div>
224
+ </div>
225
+ <div class="flex items-center space-x-4">
226
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
227
+ <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
228
+ Assistant Philosophique
229
+ </span>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </nav>
234
+
235
+ <!-- Main Content -->
236
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
237
+ <div class="max-w-4xl mx-auto">
238
+ <!-- Main Card -->
239
+ <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
240
+ <!-- Header Section -->
241
+ <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
242
+ <h2 class="text-2xl font-bold">Gen'Dissertation</h2>
243
+ <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
244
+ </div>
245
+
246
+ <!-- Content Section -->
247
+ <div class="p-8 space-y-8">
248
+ <!-- Type Selection -->
249
+ <div class="space-y-3">
250
+ <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
251
+ <div class="relative">
252
+ <select id="type-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 appearance-none bg-white py-3 px-4 pr-10">
253
+ <option value="1">Type 1 -</option>
254
+ <option value="2">Type 2 -</option>
255
+
256
+ <option value="3">Synthèse -</option>
257
+ </select>
258
+ <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
259
+ <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
260
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
261
+ </svg>
262
+ </div>
263
+ </div>
264
+ <div id="current-type-label" class="inline-flex px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-violet-50 to-indigo-50 text-violet-700 border border-violet-200">
265
+ Sujet de type 1
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Course Selection -->
270
+ <div class="space-y-3">
271
+ <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
272
+ <select id="course-select" class="w-full">
273
+ <option value="">Choisir un cours...</option>
274
+ </select>
275
+ <div class="course-meta hidden">
276
+ <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
277
+ <div class="flex justify-between items-center">
278
+ <span id="course-author" class="flex items-center space-x-2">
279
+ <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
280
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
281
+ </svg>
282
+ <span class="text-gray-600"></span>
283
+ </span>
284
+ <span id="course-date" class="flex items-center space-x-2">
285
+ <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
286
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
287
+ </svg>
288
+ <span class="text-gray-600"></span>
289
+ </span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+
296
+ <!-- Question Input -->
297
+ <div class="space-y-3">
298
+ <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
299
+ <div class="relative">
300
+ <textarea id="question" rows="4"
301
+ 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"
302
+ placeholder="Saisissez votre sujet de dissertation..."></textarea>
303
+ <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
304
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
305
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
306
+ </svg>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Submit Button -->
312
+ <button id="submit-btn" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-medium shadow-lg shadow-violet-200 hover:shadow-xl hover:shadow-violet-300 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">
313
+ <span class="flex items-center justify-center space-x-2">
314
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
315
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
316
+ </svg>
317
+ <span>Générer la dissertation</span>
318
+ </span>
319
+ </button>
320
+
321
+ <!-- Response Section -->
322
+ <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
323
+ <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
324
+ <!-- La réponse sera insérée ici -->
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Copy Button -->
329
+ <button id="copy-btn" class="hidden w-full py-3 px-6 rounded-xl bg-gray-50 text-gray-700 font-medium border border-gray-200 hover:bg-gray-100 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
330
+ <span class="flex items-center justify-center space-x-2">
331
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
332
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
333
+ </svg>
334
+ <span>Copier la dissertation</span>
335
+ </span>
336
+ </button>
337
+
338
+ <!-- Saved Dissertations Section -->
339
+ <div id="saved-dissertations" class="mt-8">
340
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
341
+ <div id="dissertations-list" class="space-y-4">
342
+ <!-- Les dissertations sauvegardées seront insérées ici -->
343
+ </div>
344
+ </div>
345
+
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <script>
352
+ $(document).ready(function() {
353
+ // Initialisation de Select2
354
+ $('#course-select').select2({
355
+ placeholder: 'Choisir un cours...',
356
+ templateResult: function (course) {
357
+ if (!course.id) {
358
+ return course.text;
359
+ }
360
+ return $(`
361
+ <span>${course.text}</span>
362
+ <span class="course-author">Pr. ${course.author}</span>
363
+ `);
364
+ },
365
+ templateSelection: function (course) {
366
+ return course.text; // Seul le titre est affiché dans la sélection
367
+ },
368
+
369
+ });
370
+ // Configuration de marked
371
+ marked.setOptions({
372
+ breaks: true,
373
+ gfm: true,
374
+ headerIds: true,
375
+ langPrefix: 'language-',
376
+ smartLists: true,
377
+ smartypants: true
378
+ });
379
+
380
+ moment.locale('fr'); // Configuration de moment.js en français
381
+
382
+ // Configuration des notifications
383
+ const Toast = Swal.mixin({
384
+ toast: true,
385
+ position: 'top-end',
386
+ showConfirmButton: false,
387
+ timer: 3000,
388
+ timerProgressBar: true,
389
+ customClass: {
390
+ popup: 'rounded-lg shadow-xl border border-gray-100'
391
+ }
392
+ });
393
+
394
+
395
+
396
+ // Animation des boutons
397
+ function addButtonAnimation(buttonId) {
398
+ $(`#${buttonId}`).on('mousedown', function() {
399
+ $(this).addClass('scale-95');
400
+ }).on('mouseup mouseleave', function() {
401
+ $(this).removeClass('scale-95');
402
+ });
403
+ }
404
+ addButtonAnimation('submit-btn');
405
+ addButtonAnimation('copy-btn');
406
+
407
+ // Gestion du changement de type
408
+ $('#type-select').change(function() {
409
+ const type = $(this).val();
410
+ const labels = {
411
+ '1': 'Type1',
412
+ '2': 'Type2',
413
+ '3': 'Synthèse'
414
+ };
415
+ $('#current-type-label').text(`Type ${type} - ${labels[type]}`);
416
+ });
417
+
418
+ // Chargement des cours avec animation
419
+ function loadCourses() {
420
+ return $.ajax({
421
+ url: '/api/philosophy/courses',
422
+ method: 'GET',
423
+ beforeSend: function() {
424
+ $('#course-select').prop('disabled', true).addClass('animate-pulse');
425
+
426
+ },
427
+ complete: function() {
428
+ $('#course-select').prop('disabled', false).removeClass('animate-pulse');
429
+
430
+ }
431
+ });
432
+ }
433
+
434
+ loadCourses()
435
+ .done(function(courses) {
436
+ const select = $('#course-select');
437
+ courses.forEach(course => {
438
+ select.append(new Option(course.title, course.id, false, false));
439
+ select.find(`option[value="${course.id}"]`).data('author', course.author);
440
+ });
441
+ })
442
+ .fail(function() {
443
+ Toast.fire({
444
+ icon: 'error',
445
+ title: 'Erreur de chargement des cours',
446
+ text: 'Veuillez réessayer ultérieurement'
447
+ });
448
+ });
449
+
450
+
451
+
452
+ // Gestion du changement de cours avec animations
453
+ $('#course-select').on('change', function() {
454
+ const courseId = $(this).val();
455
+
456
+ if (courseId) {
457
+ $.ajax({
458
+ url: `/api/philosophy/courses/${courseId}`,
459
+ method: 'GET',
460
+ beforeSend: function() {
461
+ $('.course-meta').addClass('animate-pulse');
462
+ },
463
+ success: function(course) {
464
+ $('.course-meta').removeClass('hidden animate-pulse')
465
+ .addClass('animate-fadeIn');
466
+ $('#course-author span').text(`Pr. ${course.author}`);
467
+ $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
468
+ day: 'numeric',
469
+ month: 'long',
470
+ year: 'numeric' }));
471
+
472
+ // Afficher une notification de succès
473
+ Toast.fire({
474
+ icon: 'success',
475
+ title: 'Cours chargé avec succès'
476
+ });
477
+ },
478
+ error: function() {
479
+ Toast.fire({
480
+ icon: 'error',
481
+ title: 'Erreur',
482
+ text: 'Impossible de charger les détails du cours'
483
+ });
484
+ }
485
+ });
486
+ } else {
487
+ $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
488
+ $(this).addClass('hidden').removeClass('animate-fadeOut');
489
+ });
490
+ }
491
+
492
+ });
493
+
494
+ // Gestion de la soumission avec conversion en Markdown et sauvegarde
495
+ $('#submit-btn').click(function() {
496
+ const question = $('#question').val().trim();
497
+
498
+ if (!question) {
499
+ // Gestion de l'erreur si la question est vide (inchangée)
500
+ return;
501
+ }
502
+
503
+ // Animation de chargement sophistiquée
504
+ Swal.fire({
505
+ title: 'Génération en cours',
506
+ html: `
507
+ <div class="space-y-4">
508
+ <div class="flex justify-center">
509
+ <div class="w-16 h-16 relative">
510
+ <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
511
+ <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
512
+ </div>
513
+ </div>
514
+ <div class="text-gray-600">
515
+ <p class="animate-pulse">Analyse philosophique en cours...</p>
516
+ <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
517
+ </div>
518
+ </div>
519
+ `,
520
+ allowOutsideClick: false,
521
+ showConfirmButton: false,
522
+ customClass: {
523
+ popup: 'rounded-2xl'
524
+ }
525
+ });
526
+
527
+ const data = {
528
+ question: question,
529
+ type: $('#type-select').val(),
530
+ courseId: $('#course-select').val() || null
531
+ };
532
+
533
+ $.ajax({
534
+ url: '/submit_philo',
535
+ method: 'POST',
536
+ contentType: 'application/json',
537
+ data: JSON.stringify(data),
538
+ success: function(data) {
539
+ Swal.close();
540
+
541
+ const htmlContent = marked.parse(data.response);
542
+ // Afficher la dissertation
543
+ $('#response > div').html(htmlContent);
544
+ $('#response').removeClass('hidden').addClass('animate-fadeIn');
545
+ $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
546
+
547
+ // Sauvegarder la dissertation
548
+ saveDissertation(question, data.response);
549
+
550
+ Toast.fire({
551
+ icon: 'success',
552
+ title: 'Dissertation générée et sauvegardée avec succès',
553
+ timer: 2000
554
+ });
555
+ },
556
+ error: function() {
557
+ Swal.fire({
558
+ icon: 'error',
559
+ title: 'Erreur de génération',
560
+ text: 'Une erreur est survenue lors de la génération de votre dissertation.',
561
+ customClass: {
562
+ popup: 'rounded-2xl',
563
+ confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
564
+ }
565
+ });
566
+ }
567
+ });
568
+ });
569
+
570
+ // Fonction pour sauvegarder la dissertation (localStorage ou autre)
571
+ function saveDissertation(title, content) {
572
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
573
+ savedDissertations.push({ title, content, timestamp: Date.now() });
574
+ localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
575
+ updateSavedDissertationsList();
576
+
577
+ }
578
+
579
+
580
+
581
+ // Fonction pour supprimer une dissertation sauvegardée
582
+ function deleteDissertation(index) {
583
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
584
+ savedDissertations.splice(index, 1);
585
+ localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
586
+ updateSavedDissertationsList();
587
+ Toast.fire({
588
+ icon: 'success',
589
+ title: 'Dissertation supprimée avec succès'
590
+ });
591
+
592
+ }
593
+
594
+ // Fonction pour afficher les dissertations sauvegardées (avec sections repliables et suppression)
595
+ function updateSavedDissertationsList() {
596
+ const dissertationsList = $('#dissertations-list');
597
+ dissertationsList.empty(); // Vider la liste actuelle
598
+
599
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
600
+
601
+ if (savedDissertations.length === 0) {
602
+ dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
603
+ return;
604
+ }
605
+
606
+
607
+
608
+ savedDissertations.forEach((diss, index) => {
609
+ const date = moment(diss.timestamp).format('LLL');
610
+
611
+ const collapsible = $(`<button class="collapsible rounded-xl border border-gray-100 flex justify-between w-full"><span>${diss.title}</span><span class="text-gray-500 text-sm">${date}</span></button>`);
612
+ const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>');
613
+ const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content)); // Convertir en HTML
614
+
615
+ collapsible.append(deleteButton); // Ajouter le bouton supprimer
616
+ dissertationsList.append(collapsible, content);
617
+
618
+ // Gestionnaire d'événement pour chaque section repliable
619
+ collapsible.click(function(event) {
620
+ // Empêcher la propagation de l'événement click sur le bouton "Supprimer"
621
+ if (event.target === deleteButton[0]) {
622
+ return;
623
+ }
624
+
625
+ content.slideToggle("fast");
626
+ collapsible.toggleClass("active");
627
+ });
628
+
629
+ deleteButton.click(function() {
630
+ // Supprimer la dissertation correspondante
631
+ deleteDissertation(index);
632
+
633
+ });
634
+ });
635
+ }
636
+
637
+ // Appeler la fonction pour afficher les dissertations au chargement de la page
638
+ updateSavedDissertationsList();
639
+
640
+ // Nouvelle gestion de la copie
641
+ $('#copy-btn').click(function() {
642
+ // Sélectionner le contenu de la réponse en utilisant innerHTML pour obtenir le HTML formaté
643
+ const responseDiv = document.querySelector('#response > div');
644
+ let textToCopy = '';
645
+
646
+ // Créer un élément temporaire pour convertir le HTML en texte brut tout en préservant le formatage
647
+ const temp = document.createElement('div');
648
+ temp.innerHTML = responseDiv.innerHTML;
649
+
650
+ // Fonction récursive pour extraire le texte en préservant les sauts de ligne
651
+ function extractText(node) {
652
+ let text = '';
653
+ node.childNodes.forEach(child => {
654
+ if (child.nodeType === 3) { // Nœud texte
655
+ text += child.textContent;
656
+ } else if (child.nodeType === 1) { // Élément
657
+ // Ajouter des sauts de ligne pour les éléments de bloc
658
+ if (window.getComputedStyle(child).display === 'block') {
659
+ text += '\n';
660
+ }
661
+ text += extractText(child);
662
+ if (window.getComputedStyle(child).display === 'block') {
663
+ text += '\n';
664
+ }
665
+ }
666
+ });
667
+ return text;
668
+ }
669
+
670
+ textToCopy = extractText(temp).trim();
671
+
672
+ // Animation et copie
673
+ $(this).addClass('scale-95 bg-violet-100');
674
+
675
+ // Utiliser l'API Clipboard avec gestion des erreurs
676
+ navigator.clipboard.writeText(textToCopy)
677
+ .then(() => {
678
+ $(this).removeClass('scale-95 bg-violet-100')
679
+ .addClass('bg-green-50 text-green-700');
680
+
681
+ setTimeout(() => {
682
+ $(this).removeClass('bg-green-50 text-green-700');
683
+ }, 1000);
684
+
685
+ Toast.fire({
686
+ icon: 'success',
687
+ title: 'Copié avec succès',
688
+ text: 'Le contenu a été copié dans votre presse-papiers',
689
+ timer: 2000
690
+ });
691
+ })
692
+ .catch((err) => {
693
+ // Fallback pour les appareils mobiles qui ne supportent pas l'API Clipboard
694
+ try {
695
+ // Créer un élément textarea temporaire
696
+ const textarea = document.createElement('textarea');
697
+ textarea.value = textToCopy;
698
+ textarea.style.position = 'fixed'; // Évite le défilement
699
+ textarea.style.opacity = '0';
700
+ document.body.appendChild(textarea);
701
+
702
+ // Sélectionner et copier le texte
703
+ textarea.select();
704
+ document.execCommand('copy');
705
+
706
+ // Nettoyer
707
+ document.body.removeChild(textarea);
708
+
709
+ // Feedback positif
710
+ $(this).removeClass('scale-95 bg-violet-100')
711
+ .addClass('bg-green-50 text-green-700');
712
+
713
+ setTimeout(() => {
714
+ $(this).removeClass('bg-green-50 text-green-700');
715
+ }, 1000);
716
+
717
+ Toast.fire({
718
+ icon: 'success',
719
+ title: 'Copié avec succès',
720
+ timer: 2000
721
+ });
722
+ } catch (fallbackErr) {
723
+ // Si même le fallback échoue
724
+ $(this).removeClass('scale-95 bg-violet-100')
725
+ .addClass('bg-red-50 text-red-700');
726
+
727
+ setTimeout(() => {
728
+ $(this).removeClass('bg-red-50 text-red-700');
729
+ }, 1000);
730
+
731
+ Toast.fire({
732
+ icon: 'error',
733
+ title: 'Erreur de copie',
734
+ text: 'Impossible de copier le contenu',
735
+ timer: 3000
736
+ });
737
+ }
738
+ });
739
+ });
740
+
741
+
742
+
743
+ // Ajout des styles d'animation personnalisés
744
+ const style = document.createElement('style');
745
+ style.textContent = `
746
+ @keyframes fadeIn {
747
+ from { opacity: 0; transform: translateY(10px); }
748
+ to { opacity: 1; transform: translateY(0); }
749
+ }
750
+ @keyframes slideUp {
751
+ from { opacity: 0; transform: translateY(20px); }
752
+ to { opacity: 1; transform: translateY(0); }
753
+ }
754
+ @keyframes shake {
755
+ 0%, 100% { transform: translateX(0); }
756
+ 25% { transform: translateX(-5px); }
757
+ 75% { transform: translateX(5px); }
758
+ }
759
+ .animate-fadeIn {
760
+ animation: fadeIn 0.5s ease-out forwards;
761
+ }
762
+ .animate-slideUp {
763
+ animation: slideUp 0.5s ease-out forwards;
764
+ }
765
+ .animate-shake {
766
+ animation: shake 0.5s ease-in-out;
767
+ }
768
+ `;
769
+ document.head.appendChild(style);
770
+ });
771
+ </script>
772
+
773
+ </body>
774
+ </html>