Docfile commited on
Commit
5d5b693
·
verified ·
1 Parent(s): cabb504

Delete templates/philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +0 -774
templates/philosophie.html DELETED
@@ -1,774 +0,0 @@
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>