Docfile commited on
Commit
9c9321a
·
verified ·
1 Parent(s): 5fb7c14

Update templates/philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +711 -754
templates/philosophie.html CHANGED
@@ -1,783 +1,740 @@
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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
9
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/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
- .active, .collapsible:hover {
115
- background-color: #ddd;
116
- }
117
-
118
- .content {
119
- padding: 0 18px;
120
- display: none;
121
- overflow: hidden;
122
- background-color: white;
123
- }
124
- .animate-fadeIn {
125
- animation: fadeIn 0.5s ease-out forwards;
126
- }
127
- .animate-slideUp {
128
- animation: slideUp 0.5s ease-out forwards;
129
- }
130
- .animate-shake {
131
- animation: shake 0.5s ease-in-out;
132
- }
133
- @keyframes fadeIn {
134
- from { opacity: 0; transform: translateY(10px); }
135
- to { opacity: 1; transform: translateY(0); }
136
- }
137
- @keyframes slideUp {
138
- from { opacity: 0; transform: translateY(20px); }
139
- to { opacity: 1; transform: translateY(0); }
140
- }
141
- @keyframes shake {
142
- 0%, 100% { transform: translateX(0); }
143
- 25% { transform: translateX(-5px); }
144
- 75% { transform: translateX(5px); }
145
- }
146
-
147
- /* Ajout du style pour Select2 */
148
- .select2-container--default .select2-selection--single {
149
- border: 1px solid #e5e7eb;
150
- border-radius: 0.75rem;
151
- height: auto;
152
- padding: 0.625rem 1rem;
153
- background-color: white;
154
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
155
- display: flex;
156
- align-items: center;
157
- }
158
- .select2-container--default .select2-selection--single .select2-selection__rendered {
159
- color: #374151;
160
- line-height: inherit;
161
- padding-right: 1.5rem;
162
- }
163
-
164
- .select2-container--default .select2-selection--single .select2-selection__arrow {
165
- top: 50%;
166
- transform: translateY(-50%);
167
- right: 0.75rem;
168
- }
169
-
170
- .select2-dropdown {
171
- border: 1px solid #e5e7eb;
172
- border-radius: 0.75rem;
173
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
174
- padding: 0.25rem;
175
- }
176
- .select2-search--dropdown .select2-search__field {
177
- border: 1px solid #e5e7eb;
178
- border-radius: 0.375rem;
179
- padding: 0.5rem;
180
- }
181
-
182
- .select2-results__options {
183
- padding: 0.25rem;
184
- }
185
- .select2-results__option {
186
- padding: 0.5rem 0.75rem;
187
- }
188
-
189
-
190
- .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
191
- background-color: #ede9fe;
192
- color:#374151;
193
- }
194
-
195
- .select2-container--default .select2-results__option--selected {
196
- background-color: #f3f4f6;
197
- color:#374151;
198
- }
199
- .select2-results__option .course-author {
200
- font-size: 0.875rem;
201
- color: #6b7280;
202
- display: block;
203
- margin-top: 0.25rem;
204
- }
205
- .select2-container--open .select2-selection--single .select2-selection__arrow {
206
- border-color: transparent transparent #a8a29e;
207
-
208
- }
209
-
210
- </style>
211
  </head>
212
-
213
  <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
214
- <!-- Navbar -->
215
- <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
216
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
217
- <div class="flex justify-between items-center h-16">
218
- <div class="flex items-center">
219
- <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
220
- Mariam AI
221
- </div>
222
- </div>
223
- <div class="flex items-center space-x-4">
224
- <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
225
- <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
226
- Assistant Philosophique
227
- </span>
228
- </div>
229
- </div>
230
  </div>
231
- </nav>
232
-
233
- <!-- Main Content -->
234
- <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
235
- <div class="max-w-4xl mx-auto">
236
- <!-- Main Card -->
237
- <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
238
- <!-- Header Section -->
239
- <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
240
- <h2 class="text-2xl font-bold">Gen'Dissertation</h2>
241
- <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
242
- </div>
243
-
244
- <!-- Content Section -->
245
- <div class="p-8 space-y-8">
246
- <!-- Type Selection -->
247
- <div class="space-y-3">
248
- <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
249
- <div class="relative">
250
- <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">
251
- <option value="1">Type 1</option>
252
- <option value="2">Type 2</option>
253
- <option value="3">Synthèse</option>
254
- </select>
255
- <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
256
- <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
257
- <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" />
258
- </svg>
259
- </div>
260
- </div>
261
- <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">
262
- Sujet de type 1
263
- </div>
264
- </div>
265
-
266
- <!-- Course Selection -->
267
- <div class="space-y-3">
268
- <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
269
- <select id="course-select" class="w-full">
270
- <option value="">Choisir un cours...</option>
271
- </select>
272
- <div class="course-meta hidden">
273
- <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
274
- <div class="flex justify-between items-center">
275
- <span id="course-author" class="flex items-center space-x-2">
276
- <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
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 class="text-gray-600"></span>
280
- </span>
281
- <span id="course-date" class="flex items-center space-x-2">
282
- <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
283
- <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" />
284
- </svg>
285
- <span class="text-gray-600"></span>
286
- </span>
287
- </div>
288
- </div>
289
- </div>
290
- </div>
291
-
292
-
293
- <!-- Question Input -->
294
- <div class="space-y-3">
295
- <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
296
- <div class="relative">
297
- <textarea id="question" rows="4"
298
- 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"
299
- placeholder="Saisissez votre sujet de dissertation..."></textarea>
300
- <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
301
- <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
302
- <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" />
303
- </svg>
304
- </div>
305
- </div>
306
- </div>
307
-
308
- <!-- Submit Button -->
309
- <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">
310
- <span class="flex items-center justify-center space-x-2">
311
- <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
312
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
313
- </svg>
314
- <span>Générer la dissertation</span>
315
- </span>
316
- </button>
317
-
318
- <!-- Response Section -->
319
- <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
320
- <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
321
- <!-- La réponse sera insérée ici -->
322
- </div>
323
- </div>
324
-
325
- <!-- Copy Button -->
326
- <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">
327
- <span class="flex items-center justify-center space-x-2">
328
- <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
329
- <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" />
330
- </svg>
331
- <span>Copier la dissertation</span>
332
- </span>
333
- </button>
334
-
335
- <!-- Saved Dissertations Section -->
336
- <div id="saved-dissertations" class="mt-8">
337
- <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
338
- <div id="dissertations-list" class="space-y-4">
339
- <!-- Les dissertations sauvegardées seront insérées ici -->
340
- </div>
341
- </div>
342
-
343
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
344
  </div>
 
345
  </div>
 
346
  </div>
 
347
 
348
- <script>
349
- $(document).ready(function() {
350
- // Initialisation de Select2
351
- $('#course-select').select2({
352
- placeholder: 'Choisir un cours...',
353
- templateResult: function (course) {
354
- if (!course.id) {
355
- return course.text;
356
- }
357
- const author = $(course.element).data('author'); // Récupérer l'auteur
358
- return $(`
359
- <span>${course.text}</span>
360
- <span class="course-author">Pr. ${author}</span>
361
- `);
362
- },
363
- templateSelection: function (course) {
364
- return course.text; // Seul le titre est affiché dans la sélection
365
- },
366
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  });
368
- // Configuration de marked
369
- marked.setOptions({
370
- breaks: true,
371
- gfm: true,
372
- headerIds: true,
373
- langPrefix: 'language-',
374
- smartLists: true,
375
- smartypants: true
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
376
  });
377
-
378
- moment.locale('fr'); // Configuration de moment.js en français
379
-
380
- // Configuration des notifications
381
- const Toast = Swal.mixin({
382
- toast: true,
383
- position: 'top-end',
384
- showConfirmButton: false,
385
- timer: 3000,
386
- timerProgressBar: true,
387
- customClass: {
388
- popup: 'rounded-lg shadow-xl border border-gray-100'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
389
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
390
  });
391
-
392
-
393
-
394
- // Animation des boutons
395
- function addButtonAnimation(buttonId) {
396
- $(`#${buttonId}`).on('mousedown', function() {
397
- $(this).addClass('scale-95');
398
- }).on('mouseup mouseleave', function() {
399
- $(this).removeClass('scale-95');
 
 
 
 
 
 
 
 
 
 
 
 
400
  });
401
- }
402
- addButtonAnimation('submit-btn');
403
- addButtonAnimation('copy-btn');
404
-
405
- // Gestion du changement de type avec affichage personnalisé
406
- $('#type-select').change(function() {
407
- const selectedOption = $(this).find('option:selected');
408
- const typeLabel = selectedOption.text();
409
- const type = $(this).val();
410
- let labelText;
411
- if(type === '3') {
412
- labelText = 'S - Synthèse';
413
- } else {
414
- labelText = `Type ${type} - ${typeLabel}`;
415
- }
416
- $('#current-type-label').text(labelText);
417
-
418
- });
419
-
420
- // Chargement des cours avec animation
421
- function loadCourses() {
422
- return $.ajax({
423
- url: '/api/philosophy/courses',
424
- method: 'GET',
425
- beforeSend: function() {
426
- $('#course-select').prop('disabled', true).addClass('animate-pulse');
427
-
428
- },
429
- complete: function() {
430
- $('#course-select').prop('disabled', false).removeClass('animate-pulse');
431
-
432
- }
433
  });
434
- }
435
-
436
- loadCourses()
437
- .done(function(courses) {
438
- const select = $('#course-select');
439
- courses.forEach(course => {
440
- // Créer une nouvelle option avec l'auteur déjà inclus
441
- const newOption = new Option(course.title, course.id, false, false);
442
- $(newOption).data('author', course.author); // Ajouter l'auteur comme data
443
- select.append(newOption);
444
- });
445
- })
446
-
447
- .fail(function() {
448
- Toast.fire({
449
- icon: 'error',
450
- title: 'Erreur de chargement des cours',
451
- text: 'Veuillez réessayer ultérieurement'
452
- });
453
- });
454
-
455
- // Gestion du changement de cours avec animations
456
- $('#course-select').on('change', function() {
457
- const courseId = $(this).val();
458
-
459
- if (courseId) {
460
- $.ajax({
461
- url: `/api/philosophy/courses/${courseId}`,
462
- method: 'GET',
463
- beforeSend: function() {
464
- $('.course-meta').addClass('animate-pulse');
465
- },
466
- success: function(course) {
467
- $('.course-meta').removeClass('hidden animate-pulse')
468
- .addClass('animate-fadeIn');
469
- $('#course-author span').text(`Pr. ${course.author}`);
470
- $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
471
- day: 'numeric',
472
- month: 'long',
473
- year: 'numeric' }));
474
-
475
- // Afficher une notification de succès
476
- Toast.fire({
477
- icon: 'success',
478
- title: 'Cours chargé avec succès'
479
- });
480
- },
481
- error: function() {
482
- Toast.fire({
483
- icon: 'error',
484
- title: 'Erreur',
485
- text: 'Impossible de charger les détails du cours'
486
- });
487
- }
488
- });
489
- } else {
490
- $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
491
- $(this).addClass('hidden').removeClass('animate-fadeOut');
492
- });
493
- }
494
-
495
  });
 
496
 
497
- // Gestion de la soumission avec conversion en Markdown et sauvegarde
498
- $('#submit-btn').click(function() {
499
- const question = $('#question').val().trim();
 
 
 
500
 
501
- if (!question) {
502
- // Gestion de l'erreur si la question est vide (inchangée)
503
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
504
  }
505
-
506
- // Animation de chargement sophistiquée
507
- Swal.fire({
508
- title: 'Génération en cours',
509
- html: `
510
- <div class="space-y-4">
511
- <div class="flex justify-center">
512
- <div class="w-16 h-16 relative">
513
- <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
514
- <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
515
- </div>
516
- </div>
517
- <div class="text-gray-600">
518
- <p class="animate-pulse">Analyse philosophique en cours...</p>
519
- <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
520
- </div>
521
- </div>
522
- `,
523
- allowOutsideClick: false,
524
- showConfirmButton: false,
525
- customClass: {
526
- popup: 'rounded-2xl'
527
- }
528
- });
529
-
530
- const data = {
531
- question: question,
532
- type: $('#type-select').val(),
533
- courseId: $('#course-select').val() || null
534
- };
535
-
536
- $.ajax({
537
- url: '/submit_philo',
538
- method: 'POST',
539
- contentType: 'application/json',
540
- data: JSON.stringify(data),
541
- success: function(data) {
542
- Swal.close();
543
-
544
- const htmlContent = marked.parse(data.response);
545
- // Afficher la dissertation
546
- $('#response > div').html(htmlContent);
547
- $('#response').removeClass('hidden').addClass('animate-fadeIn');
548
- $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
549
-
550
- // Sauvegarder la dissertation
551
- saveDissertation(question, data.response);
552
-
553
- Toast.fire({
554
- icon: 'success',
555
- title: 'Dissertation générée et sauvegardée avec succès',
556
- timer: 2000
557
- });
558
- },
559
- error: function() {
560
- Swal.fire({
561
- icon: 'error',
562
- title: 'Erreur de génération',
563
- text: 'Une erreur est survenue lors de la génération de votre dissertation.',
564
- customClass: {
565
- popup: 'rounded-2xl',
566
- confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
567
- }
568
- });
569
- }
570
- });
571
  });
572
-
573
-
574
- function saveDissertation(title, content) {
575
- let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
576
- savedDissertations.push({ title, content, timestamp: Date.now() });
577
- localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
578
- updateSavedDissertationsList();
579
-
580
- }
581
-
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
- // Ajout des styles d'animation personnalisés
742
- const style = document.createElement('style');
743
- style.textContent = `
744
- @keyframes fadeIn {
745
- from { opacity: 0; transform: translateY(10px); }
746
- to { opacity: 1; transform: translateY(0); }
747
- }
748
- @keyframes slideUp {
749
- from { opacity: 0; transform: translateY(20px); }
750
- to { opacity: 1; transform: translateY(0); }
751
- }
752
- @keyframes shake {
753
- 0%, 100% { transform: translateX(0); }
754
- 25% { transform: translateX(-5px); }
755
- 75% { transform: translateX(5px); }
756
- }
757
- .animate-fadeIn {
758
- animation: fadeIn 0.5s ease-out forwards;
759
- }
760
- .animate-slideUp {
761
- animation: slideUp 0.5s ease-out forwards;
762
- }
763
- .animate-shake {
764
- animation: shake 0.5s ease-in-out;
765
- }
766
- `;
767
- document.head.appendChild(style);
768
-
769
- // Met à jour le label initial avec la valeur par défaut du select
770
- const initialSelectValue = $('#type-select').val();
771
- const initialSelectedText = $('#type-select option:selected').text();
772
- let initialLabelText;
773
- if(initialSelectValue === '3') {
774
- initialLabelText = 'S - Synthèse';
775
- } else {
776
- initialLabelText = `Type ${initialSelectValue} - ${initialSelectedText}`;
777
- }
778
- $('#current-type-label').text(initialLabelText);
779
  });
780
- </script>
781
-
782
  </body>
783
- </html>
 
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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/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
+ .active, .collapsible:hover {
114
+ background-color: #ddd;
115
+ }
116
+
117
+ .content {
118
+ padding: 0 18px;
119
+ display: none;
120
+ overflow: hidden;
121
+ background-color: white;
122
+ }
123
+ .animate-fadeIn {
124
+ animation: fadeIn 0.5s ease-out forwards;
125
+ }
126
+ .animate-slideUp {
127
+ animation: slideUp 0.5s ease-out forwards;
128
+ }
129
+ .animate-shake {
130
+ animation: shake 0.5s ease-in-out;
131
+ }
132
+ @keyframes fadeIn {
133
+ from { opacity: 0; transform: translateY(10px); }
134
+ to { opacity: 1; transform: translateY(0); }
135
+ }
136
+ @keyframes slideUp {
137
+ from { opacity: 0; transform: translateY(20px); }
138
+ to { opacity: 1; transform: translateY(0); }
139
+ }
140
+ @keyframes shake {
141
+ 0%, 100% { transform: translateX(0); }
142
+ 25% { transform: translateX(-5px); }
143
+ 75% { transform: translateX(5px); }
144
+ }
145
+
146
+ /* Ajout du style pour Select2 */
147
+ .select2-container--default .select2-selection--single {
148
+ border: 1px solid #e5e7eb;
149
+ border-radius: 0.75rem;
150
+ height: auto;
151
+ padding: 0.625rem 1rem;
152
+ background-color: white;
153
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
154
+ display: flex;
155
+ align-items: center;
156
+ }
157
+ .select2-container--default .select2-selection--single .select2-selection__rendered {
158
+ color: #374151;
159
+ line-height: inherit;
160
+ padding-right: 1.5rem;
161
+ }
162
+ .select2-container--default .select2-selection--single .select2-selection__arrow {
163
+ top: 50%;
164
+ transform: translateY(-50%);
165
+ right: 0.75rem;
166
+ }
167
+ .select2-dropdown {
168
+ border: 1px solid #e5e7eb;
169
+ border-radius: 0.75rem;
170
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
171
+ padding: 0.25rem;
172
+ }
173
+ .select2-search--dropdown .select2-search__field {
174
+ border: 1px solid #e5e7eb;
175
+ border-radius: 0.375rem;
176
+ padding: 0.5rem;
177
+ }
178
+ .select2-results__options {
179
+ padding: 0.25rem;
180
+ }
181
+ .select2-results__option {
182
+ padding: 0.5rem 0.75rem;
183
+ }
184
+ .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
185
+ background-color: #ede9fe;
186
+ color:#374151;
187
+ }
188
+ .select2-container--default .select2-results__option--selected {
189
+ background-color: #f3f4f6;
190
+ color:#374151;
191
+ }
192
+ .select2-results__option .course-author {
193
+ font-size: 0.875rem;
194
+ color: #6b7280;
195
+ display: block;
196
+ margin-top: 0.25rem;
197
+ }
198
+ .select2-container--open .select2-selection--single .select2-selection__arrow {
199
+ border-color: transparent transparent #a8a29e;
200
+ }
201
+ </style>
 
 
 
 
 
 
 
 
 
202
  </head>
 
203
  <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
204
+ <!-- Navbar -->
205
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
206
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
207
+ <div class="flex justify-between items-center h-16">
208
+ <div class="flex items-center">
209
+ <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
210
+ Mariam AI
211
+ </div>
 
 
 
 
 
 
 
 
212
  </div>
213
+ <div class="flex items-center space-x-4">
214
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
215
+ <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
216
+ Assistant Philosophique
217
+ </span>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </nav>
222
+
223
+ <!-- Main Content -->
224
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
225
+ <div class="max-w-4xl mx-auto">
226
+ <!-- Main Card -->
227
+ <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
228
+ <!-- Header Section -->
229
+ <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
230
+ <h2 class="text-2xl font-bold">Gen'Dissertation</h2>
231
+ <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
232
+ </div>
233
+ <!-- Content Section -->
234
+ <div class="p-8 space-y-8">
235
+ <!-- Type Selection -->
236
+ <div class="space-y-3">
237
+ <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
238
+ <div class="relative">
239
+ <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">
240
+ <option value="1">Type 1</option>
241
+ <option value="2">Type 2</option>
242
+ <option value="3">Synthèse</option>
243
+ </select>
244
+ <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
245
+ <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
246
+ <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" />
247
+ </svg>
248
+ </div>
249
+ </div>
250
+ <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">
251
+ Sujet de type 1
252
+ </div>
253
+ </div>
254
+ <!-- Course Selection -->
255
+ <div class="space-y-3">
256
+ <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
257
+ <select id="course-select" class="w-full">
258
+ <option value="">Choisir un cours...</option>
259
+ </select>
260
+ <div class="course-meta hidden">
261
+ <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
262
+ <div class="flex justify-between items-center">
263
+ <span id="course-author" class="flex items-center space-x-2">
264
+ <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
265
+ <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" />
266
+ </svg>
267
+ <span class="text-gray-600"></span>
268
+ </span>
269
+ <span id="course-date" class="flex items-center space-x-2">
270
+ <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
271
+ <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" />
272
+ </svg>
273
+ <span class="text-gray-600"></span>
274
+ </span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <!-- Question Input -->
280
+ <div class="space-y-3">
281
+ <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
282
+ <div class="relative">
283
+ <textarea id="question" rows="4" 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" placeholder="Saisissez votre sujet de dissertation..."></textarea>
284
+ <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
285
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
286
+ <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" />
287
+ </svg>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ <!-- Submit Button -->
292
+ <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">
293
+ <span class="flex items-center justify-center space-x-2">
294
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
295
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
296
+ </svg>
297
+ <span>Générer la dissertation</span>
298
+ </span>
299
+ </button>
300
+ <!-- Response Section -->
301
+ <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
302
+ <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
303
+ <!-- La réponse sera insérée ici -->
304
+ </div>
305
+ </div>
306
+ <!-- Copy Button -->
307
+ <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">
308
+ <span class="flex items-center justify-center space-x-2">
309
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
310
+ <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" />
311
+ </svg>
312
+ <span>Copier la dissertation</span>
313
+ </span>
314
+ </button>
315
+ <!-- Saved Dissertations Section -->
316
+ <div id="saved-dissertations" class="mt-8">
317
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
318
+ <div id="dissertations-list" class="space-y-4">
319
+ <!-- Les dissertations sauvegardées seront insérées ici -->
320
  </div>
321
+ </div>
322
  </div>
323
+ </div>
324
  </div>
325
+ </div>
326
 
327
+ <!-- Bouton flottant DeepThink -->
328
+ <button id="deepthink-btn" class="fixed bottom-6 right-6 z-50 bg-indigo-600 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none">
329
+ DeepThink
330
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
331
 
332
+ <script>
333
+ $(document).ready(function() {
334
+ // Initialisation de Select2
335
+ $('#course-select').select2({
336
+ placeholder: 'Choisir un cours...',
337
+ templateResult: function (course) {
338
+ if (!course.id) {
339
+ return course.text;
340
+ }
341
+ const author = $(course.element).data('author');
342
+ return $(`
343
+ <span>${course.text}</span>
344
+ <span class="course-author">Pr. ${author}</span>
345
+ `);
346
+ },
347
+ templateSelection: function (course) {
348
+ return course.text;
349
+ },
350
+ });
351
+
352
+ // Configuration de marked
353
+ marked.setOptions({
354
+ breaks: true,
355
+ gfm: true,
356
+ headerIds: true,
357
+ langPrefix: 'language-',
358
+ smartLists: true,
359
+ smartypants: true
360
+ });
361
+
362
+ moment.locale('fr');
363
+
364
+ // Configuration des notifications SweetAlert2
365
+ const Toast = Swal.mixin({
366
+ toast: true,
367
+ position: 'top-end',
368
+ showConfirmButton: false,
369
+ timer: 3000,
370
+ timerProgressBar: true,
371
+ customClass: {
372
+ popup: 'rounded-lg shadow-xl border border-gray-100'
373
+ }
374
+ });
375
+
376
+ // Animation des boutons
377
+ function addButtonAnimation(buttonId) {
378
+ $(`#${buttonId}`).on('mousedown', function() {
379
+ $(this).addClass('scale-95');
380
+ }).on('mouseup mouseleave', function() {
381
+ $(this).removeClass('scale-95');
382
  });
383
+ }
384
+ addButtonAnimation('submit-btn');
385
+ addButtonAnimation('copy-btn');
386
+
387
+ // Gestion du changement de type
388
+ $('#type-select').change(function() {
389
+ const selectedOption = $(this).find('option:selected');
390
+ const typeLabel = selectedOption.text();
391
+ const type = $(this).val();
392
+ let labelText;
393
+ if (type === '3') {
394
+ labelText = 'S - Synthèse';
395
+ } else {
396
+ labelText = `Type ${type} - ${typeLabel}`;
397
+ }
398
+ $('#current-type-label').text(labelText);
399
+ });
400
+
401
+ // Chargement des cours
402
+ function loadCourses() {
403
+ return $.ajax({
404
+ url: '/api/philosophy/courses',
405
+ method: 'GET',
406
+ beforeSend: function() {
407
+ $('#course-select').prop('disabled', true).addClass('animate-pulse');
408
+ },
409
+ complete: function() {
410
+ $('#course-select').prop('disabled', false).removeClass('animate-pulse');
411
+ }
412
  });
413
+ }
414
+ loadCourses()
415
+ .done(function(courses) {
416
+ const select = $('#course-select');
417
+ courses.forEach(course => {
418
+ const newOption = new Option(course.title, course.id, false, false);
419
+ $(newOption).data('author', course.author);
420
+ select.append(newOption);
421
+ });
422
+ })
423
+ .fail(function() {
424
+ Toast.fire({
425
+ icon: 'error',
426
+ title: 'Erreur de chargement des cours',
427
+ text: 'Veuillez réessayer ultérieurement'
428
+ });
429
+ });
430
+
431
+ // Gestion du changement de cours
432
+ $('#course-select').on('change', function() {
433
+ const courseId = $(this).val();
434
+ if (courseId) {
435
+ $.ajax({
436
+ url: `/api/philosophy/courses/${courseId}`,
437
+ method: 'GET',
438
+ beforeSend: function() {
439
+ $('.course-meta').addClass('animate-pulse');
440
+ },
441
+ success: function(course) {
442
+ $('.course-meta').removeClass('hidden animate-pulse')
443
+ .addClass('animate-fadeIn');
444
+ $('#course-author span').text(`Pr. ${course.author}`);
445
+ $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
446
+ day: 'numeric',
447
+ month: 'long',
448
+ year: 'numeric'
449
+ }));
450
+ Toast.fire({
451
+ icon: 'success',
452
+ title: 'Cours chargé avec succès'
453
+ });
454
+ },
455
+ error: function() {
456
+ Toast.fire({
457
+ icon: 'error',
458
+ title: 'Erreur',
459
+ text: 'Impossible de charger les détails du cours'
460
+ });
461
  }
462
+ });
463
+ } else {
464
+ $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
465
+ $(this).addClass('hidden').removeClass('animate-fadeOut');
466
+ });
467
+ }
468
+ });
469
+
470
+ // Gestion de la soumission standard
471
+ $('#submit-btn').click(function() {
472
+ const question = $('#question').val().trim();
473
+ if (!question) {
474
+ return;
475
+ }
476
+ Swal.fire({
477
+ title: 'Génération en cours',
478
+ html: `
479
+ <div class="space-y-4">
480
+ <div class="flex justify-center">
481
+ <div class="w-16 h-16 relative">
482
+ <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
483
+ <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
484
+ </div>
485
+ </div>
486
+ <div class="text-gray-600">
487
+ <p class="animate-pulse">Analyse philosophique en cours...</p>
488
+ <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
489
+ </div>
490
+ </div>
491
+ `,
492
+ allowOutsideClick: false,
493
+ showConfirmButton: false,
494
+ customClass: {
495
+ popup: 'rounded-2xl'
496
+ }
497
  });
498
+ const data = {
499
+ question: question,
500
+ type: $('#type-select').val(),
501
+ courseId: $('#course-select').val() || null
502
+ };
503
+ $.ajax({
504
+ url: '/submit_philo',
505
+ method: 'POST',
506
+ contentType: 'application/json',
507
+ data: JSON.stringify(data),
508
+ success: function(data) {
509
+ Swal.close();
510
+ const htmlContent = marked.parse(data.response);
511
+ $('#response > div').html(htmlContent);
512
+ $('#response').removeClass('hidden').addClass('animate-fadeIn');
513
+ $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
514
+ saveDissertation(question, data.response);
515
+ Toast.fire({
516
+ icon: 'success',
517
+ title: 'Dissertation générée et sauvegardée avec succès',
518
+ timer: 2000
519
  });
520
+ },
521
+ error: function() {
522
+ Swal.fire({
523
+ icon: 'error',
524
+ title: 'Erreur de génération',
525
+ text: 'Une erreur est survenue lors de la génération de votre dissertation.',
526
+ customClass: {
527
+ popup: 'rounded-2xl',
528
+ confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
529
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
530
  });
531
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
532
  });
533
+ });
534
 
535
+ function saveDissertation(title, content) {
536
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
537
+ savedDissertations.push({ title, content, timestamp: Date.now() });
538
+ localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
539
+ updateSavedDissertationsList();
540
+ }
541
 
542
+ function deleteDissertation(index) {
543
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
544
+ savedDissertations.splice(index, 1);
545
+ localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
546
+ updateSavedDissertationsList();
547
+ Toast.fire({
548
+ icon: 'success',
549
+ title: 'Dissertation supprimée avec succès'
550
+ });
551
+ }
552
+
553
+ function updateSavedDissertationsList() {
554
+ const dissertationsList = $('#dissertations-list');
555
+ dissertationsList.empty();
556
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
557
+ if (savedDissertations.length === 0) {
558
+ dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
559
+ return;
560
+ }
561
+ savedDissertations.forEach((diss, index) => {
562
+ const date = moment(diss.timestamp).format('LLL');
563
+ 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>`);
564
+ const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>');
565
+ const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content));
566
+ collapsible.append(deleteButton);
567
+ dissertationsList.append(collapsible, content);
568
+ collapsible.click(function(event) {
569
+ if (event.target === deleteButton[0]) {
570
+ return;
571
  }
572
+ content.slideToggle("fast");
573
+ collapsible.toggleClass("active");
574
+ });
575
+ deleteButton.click(function() {
576
+ deleteDissertation(index);
577
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
578
  });
579
+ }
580
+ updateSavedDissertationsList();
581
+
582
+ $('#copy-btn').click(function() {
583
+ const responseDiv = document.querySelector('#response > div');
584
+ let textToCopy = '';
585
+ const temp = document.createElement('div');
586
+ temp.innerHTML = responseDiv.innerHTML;
587
+ function extractText(node) {
588
+ let text = '';
589
+ node.childNodes.forEach(child => {
590
+ if (child.nodeType === 3) {
591
+ text += child.textContent;
592
+ } else if (child.nodeType === 1) {
593
+ if (window.getComputedStyle(child).display === 'block') {
594
+ text += '\n';
595
+ }
596
+ text += extractText(child);
597
+ if (window.getComputedStyle(child).display === 'block') {
598
+ text += '\n';
599
+ }
600
+ }
601
+ });
602
+ return text;
603
+ }
604
+ textToCopy = extractText(temp).trim();
605
+ $(this).addClass('scale-95 bg-violet-100');
606
+ navigator.clipboard.writeText(textToCopy)
607
+ .then(() => {
608
+ $(this).removeClass('scale-95 bg-violet-100')
609
+ .addClass('bg-green-50 text-green-700');
610
+ setTimeout(() => {
611
+ $(this).removeClass('bg-green-50 text-green-700');
612
+ }, 1000);
613
  Toast.fire({
614
+ icon: 'success',
615
+ title: 'Copié avec succès',
616
+ text: 'Le contenu a été copié dans votre presse-papiers',
617
+ timer: 2000
618
  });
619
+ })
620
+ .catch((err) => {
621
+ try {
622
+ const textarea = document.createElement('textarea');
623
+ textarea.value = textToCopy;
624
+ textarea.style.position = 'fixed';
625
+ textarea.style.opacity = '0';
626
+ document.body.appendChild(textarea);
627
+ textarea.select();
628
+ document.execCommand('copy');
629
+ document.body.removeChild(textarea);
630
+ $(this).removeClass('scale-95 bg-violet-100')
631
+ .addClass('bg-green-50 text-green-700');
632
+ setTimeout(() => {
633
+ $(this).removeClass('bg-green-50 text-green-700');
634
+ }, 1000);
635
+ Toast.fire({
636
+ icon: 'success',
637
+ title: 'Copié avec succès',
638
+ timer: 2000
639
+ });
640
+ } catch (fallbackErr) {
641
+ $(this).removeClass('scale-95 bg-violet-100')
642
+ .addClass('bg-red-50 text-red-700');
643
+ setTimeout(() => {
644
+ $(this).removeClass('bg-red-50 text-red-700');
645
+ }, 1000);
646
+ Toast.fire({
647
+ icon: 'error',
648
+ title: 'Erreur de copie',
649
+ text: 'Impossible de copier le contenu',
650
+ timer: 3000
651
+ });
652
  }
653
+ });
654
+ });
655
+
656
+ // Bouton flottant DeepThink
657
+ // Vérification de la limite d'une utilisation par jour via localStorage
658
+ function isToday(dateStr) {
659
+ const today = new Date();
660
+ const date = new Date(dateStr);
661
+ return date.getFullYear() === today.getFullYear() &&
662
+ date.getMonth() === today.getMonth() &&
663
+ date.getDate() === today.getDate();
664
+ }
665
+
666
+ $('#deepthink-btn').click(function() {
667
+ const lastUsed = localStorage.getItem('deepThinkLastUsed');
668
+ if (lastUsed && isToday(lastUsed)) {
669
+ Swal.fire({
670
+ icon: 'warning',
671
+ title: "Limite quotidienne",
672
+ text: "Vous ne pouvez utiliser DeepThink qu'une seule fois par jour."
673
+ });
674
+ return;
675
+ }
676
+ const question = $('#question').val().trim();
677
+ const type = $('#type-select').val();
678
+ const courseId = $('#course-select').val() || null;
679
+ if (!question) {
680
+ Swal.fire({
681
+ icon: 'error',
682
+ title: "Sujet manquant",
683
+ text: "Veuillez saisir un sujet dans le champ principal."
684
+ });
685
+ return;
686
+ }
687
+ Swal.fire({
688
+ title: 'DeepThink en cours',
689
+ html: `
690
+ <div class="flex justify-center">
691
+ <div class="w-16 h-16 relative">
692
+ <div class="absolute inset-0 rounded-full border-4 border-indigo-200 animate-ping"></div>
693
+ <div class="absolute inset-0 rounded-full border-4 border-indigo-500 animate-pulse"></div>
694
+ </div>
695
+ </div>
696
+ <p class="mt-4 text-gray-600">Veuillez patienter quelques instants...</p>
697
+ `,
698
+ allowOutsideClick: false,
699
+ showConfirmButton: false,
700
+ customClass: {
701
+ popup: 'rounded-2xl'
702
+ }
703
+ });
704
+ const data = { question, type, courseId };
705
+ $.ajax({
706
+ url: '/submit_philo_deepthink',
707
+ method: 'POST',
708
+ contentType: 'application/json',
709
+ data: JSON.stringify(data),
710
+ success: function(response) {
711
+ Swal.close();
712
+ const htmlContent = marked.parse(response.response);
713
+ $('#response > div').html(htmlContent);
714
+ $('#response').removeClass('hidden').addClass('animate-fadeIn');
715
+ $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
716
+ saveDissertation(question, response.response);
717
+ localStorage.setItem('deepThinkLastUsed', new Date().toISOString());
718
+ Swal.fire({
719
+ icon: 'success',
720
+ title: 'DeepThink généré avec succès',
721
+ timer: 2000,
722
+ showConfirmButton: false
723
  });
724
+ },
725
+ error: function() {
726
+ Swal.fire({
727
+ icon: 'error',
728
+ title: 'Erreur DeepThink',
729
+ text: 'Une erreur est survenue lors de la génération DeepThink.',
730
+ customClass: {
731
+ popup: 'rounded-2xl'
732
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
733
  });
734
+ }
735
+ });
736
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
737
  });
738
+ </script>
 
739
  </body>
740
+ </html>