Docfile commited on
Commit
52ee5f3
·
verified ·
1 Parent(s): 13a0d6d

Delete templates/philosophie.html

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