Hugging Face's logo

Spaces:
Docfile
/
Flasksite
Running

App Files Community
2
Docfile commited on
Commit
b9cd811
·
verified ·
1 Parent(s): 21edd5b

Create philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +806 -0
templates/philosophie.html ADDED
@@ -0,0 +1,806 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
163
+ .select2-container--default .select2-selection--single .select2-selection__arrow {
164
+ top: 50%;
165
+ transform: translateY(-50%);
166
+ right: 0.75rem;
167
+ }
168
+
169
+ .select2-dropdown {
170
+ border: 1px solid #e5e7eb;
171
+ border-radius: 0.75rem;
172
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
173
+ padding: 0.25rem;
174
+ }
175
+ .select2-search--dropdown .select2-search__field {
176
+ border: 1px solid #e5e7eb;
177
+ border-radius: 0.375rem;
178
+ padding: 0.5rem;
179
+ }
180
+
181
+ .select2-results__options {
182
+ padding: 0.25rem;
183
+ }
184
+ .select2-results__option {
185
+ padding: 0.5rem 0.75rem;
186
+ }
187
+
188
+ .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
189
+ background-color: #ede9fe;
190
+ color:#374151;
191
+ }
192
+
193
+ .select2-container--default .select2-results__option--selected {
194
+ background-color: #f3f4f6;
195
+ color:#374151;
196
+ }
197
+ .select2-results__option .course-author {
198
+ font-size: 0.875rem;
199
+ color: #6b7280;
200
+ display: block;
201
+ margin-top: 0.25rem;
202
+ }
203
+ .select2-container--open .select2-selection--single .select2-selection__arrow {
204
+ border-color: transparent transparent #a8a29e;
205
+
206
+ }
207
+
208
+ </style>
209
+ </head>
210
+
211
+ <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
212
+ <!-- Navbar -->
213
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
214
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
215
+ <div class="flex justify-between items-center h-16">
216
+ <div class="flex items-center">
217
+ <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
218
+ Mariam AI
219
+ </div>
220
+ </div>
221
+ <div class="flex items-center space-x-4">
222
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
223
+ <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
224
+ Assistant Philosophique
225
+ </span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </nav>
230
+
231
+ <!-- Main Content -->
232
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
233
+ <div class="max-w-4xl mx-auto">
234
+ <!-- Main Card -->
235
+ <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
236
+ <!-- Header Section -->
237
+ <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
238
+ <h2 class="text-2xl font-bold">Gen'Dissertation</h2>
239
+ <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
240
+ </div>
241
+
242
+ <!-- Content Section -->
243
+ <div class="p-8 space-y-8">
244
+ <form id="philo-form" method="POST" action="/submit_philo" enctype="multipart/form-data">
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" name="type" 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
+ <option value="4">Image</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 id="course-selection" 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" name="courseId" 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
+ <!-- Image Upload -->
293
+ <div id="image-upload" class="space-y-3 hidden">
294
+ <label class="block text-sm font-medium text-gray-700">Télécharger des images</label>
295
+ <input type="file" name="file" id="file-input" multiple accept=".jpg,.jpeg,.png" class="hidden">
296
+ <label for="file-input" class="cursor-pointer bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
297
+ <span>Choisir des fichiers</span>
298
+ </label>
299
+ <div id="selected-files" class="mt-2 text-sm text-gray-500"></div>
300
+ </div>
301
+
302
+ <!-- Question Input -->
303
+ <div id="question-input" class="space-y-3 hidden">
304
+ <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
305
+ <div class="relative">
306
+ <textarea id="question" name="question" rows="4"
307
+ 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"
308
+ placeholder="Saisissez votre sujet de dissertation..."></textarea>
309
+ <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
310
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
311
+ <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" />
312
+ </svg>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Submit Button -->
318
+ <button id="submit-btn" type="submit" 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">
319
+ <span class="flex items-center justify-center space-x-2">
320
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
321
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
322
+ </svg>
323
+ <span>Générer la dissertation</span>
324
+ </span>
325
+ </button>
326
+ </form>
327
+
328
+ <!-- Response Section -->
329
+ <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
330
+ <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
331
+ <!-- La réponse sera insérée ici -->
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Copy Button -->
336
+ <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">
337
+ <span class="flex items-center justify-center space-x-2">
338
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
339
+ <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" />
340
+ </svg>
341
+ <span>Copier la dissertation</span>
342
+ </span>
343
+ </button>
344
+
345
+ <!-- Saved Dissertations Section -->
346
+ <div id="saved-dissertations" class="mt-8">
347
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
348
+ <div id="dissertations-list" class="space-y-4">
349
+ <!-- Les dissertations sauvegardées seront insérées ici -->
350
+ </div>
351
+ </div>
352
+
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <script>
359
+ $(document).ready(function() {
360
+ // Initialisation de Select2
361
+ $('#course-select').select2({
362
+ placeholder: 'Choisir un cours...',
363
+ templateResult: function (course) {
364
+ if (!course.id) {
365
+ return course.text;
366
+ }
367
+ const author = $(course.element).data('author'); // Récupérer l'auteur
368
+ return $(`
369
+ <span>${course.text}</span>
370
+ <span class="course-author">Pr. ${author}</span>
371
+ `);
372
+ },
373
+ templateSelection: function (course) {
374
+ return course.text; // Seul le titre est affiché dans la sélection
375
+ },
376
+
377
+ });
378
+ // Configuration de marked
379
+ marked.setOptions({
380
+ breaks: true,
381
+ gfm: true,
382
+ headerIds: true,
383
+ langPrefix: 'language-',
384
+ smartLists: true,
385
+ smartypants: true
386
+ });
387
+
388
+ moment.locale('fr'); // Configuration de moment.js en français
389
+
390
+ // Configuration des notifications
391
+ const Toast = Swal.mixin({
392
+ toast: true,
393
+ position: 'top-end',
394
+ showConfirmButton: false,
395
+ timer: 3000,
396
+ timerProgressBar: true,
397
+ customClass: {
398
+ popup: 'rounded-lg shadow-xl border border-gray-100'
399
+ }
400
+ });
401
+
402
+
403
+
404
+ // Animation des boutons
405
+ function addButtonAnimation(buttonId) {
406
+ $(`#${buttonId}`).on('mousedown', function() {
407
+ $(this).addClass('scale-95');
408
+ }).on('mouseup mouseleave', function() {
409
+ $(this).removeClass('scale-95');
410
+ });
411
+ }
412
+ addButtonAnimation('submit-btn');
413
+ addButtonAnimation('copy-btn');
414
+
415
+ // Gestion du changement de type avec affichage personnalisé
416
+ $('#type-select').change(function() {
417
+ const selectedOption = $(this).find('option:selected');
418
+ const typeLabel = selectedOption.text();
419
+ const type = $(this).val();
420
+ let labelText;
421
+ if(type === '3') {
422
+ labelText = 'S - Synthèse';
423
+ } else if (type === '4') {
424
+ $('#image-upload').removeClass('hidden');
425
+ $('#question-input').addClass('hidden');
426
+ $('#course-selection').addClass('hidden');
427
+ labelText = 'Image';
428
+ } else {
429
+ $('#image-upload').addClass('hidden');
430
+ $('#question-input').removeClass('hidden');
431
+ $('#course-selection').removeClass('hidden');
432
+ labelText = `Type ${type} - ${typeLabel}`;
433
+ }
434
+ $('#current-type-label').text(labelText);
435
+
436
+ });
437
+
438
+ $('#file-input').change(function() {
439
+ const files = this.files;
440
+ const fileNames = Array.from(files).map(file => file.name).join(', ');
441
+ $('#selected-files').text(fileNames);
442
+ });
443
+
444
+ // Gestion de la soumission avec conversion en Markdown et sauvegarde
445
+ $('#philo-form').on('submit', function(e) {
446
+ e.preventDefault();
447
+
448
+ const question = $('#question').val().trim();
449
+ const type = $('#type-select').val();
450
+
451
+ if (!question && type !== '4') {
452
+ // Gestion de l'erreur si la question est vide (inchangée)
453
+ return;
454
+ }
455
+
456
+ // Animation de chargement sophistiquée
457
+ Swal.fire({
458
+ title: 'Génération en cours',
459
+ html: `
460
+ <div class="space-y-4">
461
+ <div class="flex justify-center">
462
+ <div class="w-16 h-16 relative">
463
+ <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
464
+ <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
465
+ </div>
466
+ </div>
467
+ <div class="text-gray-600">
468
+ <p class="animate-pulse">Analyse philosophique en cours...</p>
469
+ <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
470
+ </div>
471
+ </div>
472
+ `,
473
+ allowOutsideClick: false,
474
+ showConfirmButton: false,
475
+ customClass: {
476
+ popup: 'rounded-2xl'
477
+ }
478
+ });
479
+
480
+ const formData = new FormData(this);
481
+
482
+ $.ajax({
483
+ url: '/submit_philo',
484
+ method: 'POST',
485
+ data: formData,
486
+ processData: false,
487
+ contentType: false,
488
+ success: function(data) {
489
+ Swal.close();
490
+
491
+ const htmlContent = marked.parse(data.response);
492
+ // Afficher la dissertation
493
+ $('#response > div').html(htmlContent);
494
+ $('#response').removeClass('hidden').addClass('animate-fadeIn');
495
+ $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
496
+
497
+ // Sauvegarder la dissertation
498
+ saveDissertation(question, data.response);
499
+
500
+ Toast.fire({
501
+ icon: 'success',
502
+ title: 'Dissertation générée et sauvegardée avec succès',
503
+ timer: 2000
504
+ });
505
+ },
506
+ error: function() {
507
+ Swal.fire({
508
+ icon: 'error',
509
+ title: 'Erreur de génération',
510
+ text: 'Une erreur est survenue lors de la génération de votre dissertation.',
511
+ customClass: {
512
+ popup: 'rounded-2xl',
513
+ confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
514
+ }
515
+ });
516
+ }
517
+ });
518
+ });
519
+
520
+ // Chargement des cours avec animation
521
+ function loadCourses() {
522
+ return $.ajax({
523
+ url: '/api/philosophy/courses',
524
+ method: 'GET',
525
+ beforeSend: function() {
526
+ $('#course-select').prop('disabled', true).addClass('animate-pulse');
527
+
528
+ },
529
+ complete: function() {
530
+ $('#course-select').prop('disabled', false).removeClass('animate-pulse');
531
+
532
+ }
533
+ });
534
+ }
535
+
536
+ loadCourses()
537
+ .done(function(courses) {
538
+ const select = $('#course-select');
539
+ courses.forEach(course => {
540
+ // Créer une nouvelle option avec l'auteur déjà inclus
541
+ const newOption = new Option(course.title, course.id, false, false);
542
+ $(newOption).data('author', course.author); // Ajouter l'auteur comme data
543
+ select.append(newOption);
544
+ });
545
+ })
546
+
547
+ .fail(function() {
548
+ Toast.fire({
549
+ icon: 'error',
550
+ title: 'Erreur de chargement des cours',
551
+ text: 'Veuillez réessayer ultérieurement'
552
+ });
553
+ });
554
+
555
+ // Gestion du changement de cours avec animations
556
+ $('#course-select').on('change', function() {
557
+ const courseId = $(this).val();
558
+
559
+ if (courseId) {
560
+ $.ajax({
561
+ url: `/api/philosophy/courses/${courseId}`,
562
+ method: 'GET',
563
+ beforeSend: function() {
564
+ $('.course-meta').addClass('animate-pulse');
565
+ },
566
+ success: function(course) {
567
+ $('.course-meta').removeClass('hidden animate-pulse')
568
+ .addClass('animate-fadeIn');
569
+ $('#course-author span').text(`Pr. ${course.author}`);
570
+ $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
571
+ day: 'numeric',
572
+ month: 'long',
573
+ year: 'numeric' }));
574
+
575
+ // Afficher une notification de succès
576
+ Toast.fire({
577
+ icon: 'success',
578
+ title: 'Cours chargé avec succès'
579
+ });
580
+ },
581
+ error: function() {
582
+ Toast.fire({
583
+ icon: 'error',
584
+ title: 'Erreur',
585
+ text: 'Impossible de charger les détails du cours'
586
+ });
587
+ }
588
+ });
589
+ } else {
590
+ $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
591
+ $(this).addClass('hidden').removeClass('animate-fadeOut');
592
+ });
593
+ }
594
+
595
+ });
596
+
597
+ function saveDissertation(title, content) {
598
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
599
+ savedDissertations.push({ title, content, timestamp: Date.now() });
600
+ localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
601
+ updateSavedDissertationsList();
602
+
603
+ }
604
+
605
+ function deleteDissertation(index) {
606
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
607
+ savedDissertations.splice(index, 1);
608
+ localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
609
+ updateSavedDissertationsList();
610
+ Toast.fire({
611
+ icon: 'success',
612
+ title: 'Dissertation supprimée avec succès'
613
+ });
614
+
615
+ }
616
+
617
+ // Fonction pour afficher les dissertations sauvegardées (avec sections repliables et suppression)
618
+ function updateSavedDissertationsList() {
619
+ const dissertationsList = $('#dissertations-list');
620
+ dissertationsList.empty(); // Vider la liste actuelle
621
+
622
+ let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
623
+
624
+ if (savedDissertations.length === 0) {
625
+ dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
626
+ return;
627
+ }
628
+
629
+
630
+
631
+ savedDissertations.forEach((diss, index) => {
632
+ const date = moment(diss.timestamp).format('LLL');
633
+
634
+ 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>`);
635
+ const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>');
636
+ const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content)); // Convertir en HTML
637
+
638
+ collapsible.append(deleteButton); // Ajouter le bouton supprimer
639
+ dissertationsList.append(collapsible, content);
640
+
641
+ // Gestionnaire d'événement pour chaque section repliable
642
+ collapsible.click(function(event) {
643
+ // Empêcher la propagation de l'événement click sur le bouton "Supprimer"
644
+ if (event.target === deleteButton[0]) {
645
+ return;
646
+ }
647
+
648
+ content.slideToggle("fast");
649
+ collapsible.toggleClass("active");
650
+ });
651
+
652
+ deleteButton.click(function() {
653
+ // Supprimer la dissertation correspondante
654
+ deleteDissertation(index);
655
+
656
+ });
657
+ });
658
+ }
659
+
660
+ // Appeler la fonction pour afficher les dissertations au chargement de la page
661
+ updateSavedDissertationsList();
662
+
663
+ // Nouvelle gestion de la copie
664
+ $('#copy-btn').click(function() {
665
+ // Sélectionner le contenu de la réponse en utilisant innerHTML pour obtenir le HTML formaté
666
+ const responseDiv = document.querySelector('#response > div');
667
+ let textToCopy = '';
668
+
669
+ // Créer un élément temporaire pour convertir le HTML en texte brut tout en préservant le formatage
670
+ const temp = document.createElement('div');
671
+ temp.innerHTML = responseDiv.innerHTML;
672
+
673
+ // Fonction récursive pour extraire le texte en préservant les sauts de ligne
674
+ function extractText(node) {
675
+ let text = '';
676
+ node.childNodes.forEach(child => {
677
+ if (child.nodeType === 3) { // Nœud texte
678
+ text += child.textContent;
679
+ } else if (child.nodeType === 1) { // Élément
680
+ // Ajouter des sauts de ligne pour les éléments de bloc
681
+ if (window.getComputedStyle(child).display === 'block') {
682
+ text += '\n';
683
+ }
684
+ text += extractText(child);
685
+ if (window.getComputedStyle(child).display === 'block') {
686
+ text += '\n';
687
+ }
688
+ }
689
+ });
690
+ return text;
691
+ }
692
+
693
+ textToCopy = extractText(temp).trim();
694
+
695
+ // Animation et copie
696
+ $(this).addClass('scale-95 bg-violet-100');
697
+
698
+ // Utiliser l'API Clipboard avec gestion des erreurs
699
+ navigator.clipboard.writeText(textToCopy)
700
+ .then(() => {
701
+ $(this).removeClass('scale-95 bg-violet-100')
702
+ .addClass('bg-green-50 text-green-700');
703
+
704
+ setTimeout(() => {
705
+ $(this).removeClass('bg-green-50 text-green-700');
706
+ }, 1000);
707
+
708
+ Toast.fire({
709
+ icon: 'success',
710
+ title: 'Copié avec succès',
711
+ text: 'Le contenu a été copié dans votre presse-papiers',
712
+ timer: 2000
713
+ });
714
+ })
715
+ .catch((err) => {
716
+ // Fallback pour les appareils mobiles qui ne supportent pas l'API Clipboard
717
+ try {
718
+ // Créer un élément textarea temporaire
719
+ const textarea = document.createElement('textarea');
720
+ textarea.value = textToCopy;
721
+ textarea.style.position = 'fixed'; // Évite le défilement
722
+ textarea.style.opacity = '0';
723
+ document.body.appendChild(textarea);
724
+
725
+ // Sélectionner et copier le texte
726
+ textarea.select();
727
+ document.execCommand('copy');
728
+
729
+ // Nettoyer
730
+ document.body.removeChild(textarea);
731
+
732
+ // Feedback positif
733
+ $(this).removeClass('scale-95 bg-violet-100')
734
+ .addClass('bg-green-50 text-green-700');
735
+
736
+ setTimeout(() => {
737
+ $(this).removeClass('bg-green-50 text-green-700');
738
+ }, 1000);
739
+
740
+ Toast.fire({
741
+ icon: 'success',
742
+ title: 'Copié avec succès',
743
+ timer: 2000
744
+ });
745
+ } catch (fallbackErr) {
746
+ // Si même le fallback échoue
747
+ $(this).removeClass('scale-95 bg-violet-100')
748
+ .addClass('bg-red-50 text-red-700');
749
+
750
+ setTimeout(() => {
751
+ $(this).removeClass('bg-red-50 text-red-700');
752
+ }, 1000);
753
+
754
+ Toast.fire({
755
+ icon: 'error',
756
+ title: 'Erreur de copie',
757
+ text: 'Impossible de copier le contenu',
758
+ timer: 3000
759
+ });
760
+ }
761
+ });
762
+ });
763
+
764
+ // Ajout des styles d'animation personnalisés
765
+ const style = document.createElement('style');
766
+ style.textContent = `
767
+ @keyframes fadeIn {
768
+ from { opacity: 0; transform: translateY(10px); }
769
+ to { opacity: 1; transform: translateY(0); }
770
+ }
771
+ @keyframes slideUp {
772
+ from { opacity: 0; transform: translateY(20px); }
773
+ to { opacity: 1; transform: translateY(0); }
774
+ }
775
+ @keyframes shake {
776
+ 0%, 100% { transform: translateX(0); }
777
+ 25% { transform: translateX(-5px); }
778
+ 75% { transform: translateX(5px); }
779
+ }
780
+ .animate-fadeIn {
781
+ animation: fadeIn 0.5s ease-out forwards;
782
+ }
783
+ .animate-slideUp {
784
+ animation: slideUp 0.5s ease-out forwards;
785
+ }
786
+ .animate-shake {
787
+ animation: shake 0.5s ease-in-out;
788
+ }
789
+ `;
790
+ document.head.appendChild(style);
791
+
792
+ // Met à jour le label initial avec la valeur par défaut du select
793
+ const initialSelectValue = $('#type-select').val();
794
+ const initialSelectedText = $('#type-select option:selected').text();
795
+ let initialLabelText;
796
+ if(initialSelectValue === '3') {
797
+ initialLabelText = 'S - Synthèse';
798
+ } else {
799
+ initialLabelText = `Type ${initialSelectValue} - ${initialSelectedText}`;
800
+ }
801
+ $('#current-type-label').text(initialLabelText);
802
+ });
803
+ </script>
804
+
805
+ </body>
806
+ </html>