Hugging Face's logo

Spaces:
Docfile
/
Mariam-france
Running

App Files Community
Docfile commited on
Commit
8dd070d
·
verified ·
1 Parent(s): 3c2cf5e

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +505 -0
templates/index.html ADDED
@@ -0,0 +1,505 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Français Intelligent</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
13
+
14
+ body {
15
+ font-family: 'Plus Jakarta Sans', sans-serif;
16
+ background-color: #fafafa;
17
+ }
18
+
19
+ .glassmorphism {
20
+ background: rgba(255, 255, 255, 0.95);
21
+ backdrop-filter: blur(10px);
22
+ border: 1px solid rgba(255, 255, 255, 0.3);
23
+ }
24
+
25
+ .card-hover {
26
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
27
+ }
28
+
29
+ .card-hover:hover {
30
+ transform: translateY(-4px);
31
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(135deg, #1a365d 0%, #3182ce 100%);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ }
39
+
40
+ .loading-dot {
41
+ animation: bounce 1.4s infinite;
42
+ }
43
+
44
+ .loading-dot:nth-child(2) {
45
+ animation-delay: 0.2s;
46
+ }
47
+
48
+ .loading-dot:nth-child(3) {
49
+ animation-delay: 0.4s;
50
+ }
51
+
52
+ @keyframes bounce {
53
+ 0%,
54
+ 80%,
55
+ 100% {
56
+ transform: translateY(0);
57
+ }
58
+
59
+ 40% {
60
+ transform: translateY(-6px);
61
+ }
62
+ }
63
+
64
+ .custom-radio:checked+span {
65
+ background: linear-gradient(135deg, #1a365d 0%, #3182ce 100%);
66
+ color: white;
67
+ }
68
+
69
+ .backup-item {
70
+ cursor: pointer;
71
+ }
72
+
73
+ .backup-content {
74
+ display: none;
75
+ margin-top: 10px;
76
+ }
77
+
78
+ .backup-content-expanded {
79
+ display: block;
80
+ }
81
+ </style>
82
+ </head>
83
+
84
+ <body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50">
85
+ <nav class="glassmorphism sticky top-0 z-50 border-b border-blue-100">
86
+ <div class="container mx-auto px-6 py-4">
87
+ <div class="flex items-center justify-between">
88
+ <div class="flex items-center space-x-4">
89
+ <div class="bg-blue-600 rounded-lg p-2 shadow-lg">
90
+ <i class="fas fa-robot text-white text-xl"></i>
91
+ </div>
92
+ <h1 class="text-2xl font-bold gradient-text">Mariam AI</h1>
93
+ </div>
94
+ <div class="text-blue-900 font-medium">Assistant Français Intelligent</div>
95
+ </div>
96
+ </div>
97
+ </nav>
98
+
99
+ <main class="container mx-auto px-6 py-12">
100
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
101
+ <!-- Section Travail Argumentatif -->
102
+ <div class="card-hover glassmorphism rounded-2xl overflow-hidden">
103
+ <div class="p-8">
104
+ <div class="flex items-center space-x-4 mb-8">
105
+ <div class="bg-blue-100 rounded-lg p-3">
106
+ <i class="fas fa-pen-fancy text-blue-600 text-xl"></i>
107
+ </div>
108
+ <h2 class="text-2xl font-bold text-gray-800">Travail Argumentatif</h2>
109
+ </div>
110
+ <form id="francais-form" class="space-y-8">
111
+ <div class="space-y-3">
112
+ <label for="sujet-francais" class="block text-sm font-medium text-gray-700">
113
+ <i class="fas fa-book-open mr-2 text-blue-500"></i>Sujet
114
+ </label>
115
+ <textarea id="sujet-francais" name="sujet" rows="4"
116
+ class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none"
117
+ placeholder="Entrez votre sujet ici..."></textarea>
118
+ </div>
119
+
120
+ <div class="space-y-4">
121
+ <label class="block text-sm font-medium text-gray-700">
122
+ <i class="fas fa-tasks mr-2 text-blue-500"></i>Type d'argumentation
123
+ </label>
124
+ <div class="grid grid-cols-3 gap-4">
125
+ <label class="relative">
126
+ <input type="radio" name="choix" value="Etaye"
127
+ class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
128
+ <span
129
+ class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">
130
+ Étayer
131
+ </span>
132
+ </label>
133
+ <label class="relative">
134
+ <input type="radio" name="choix" value="refute"
135
+ class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
136
+ <span
137
+ class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">
138
+ Réfuter
139
+ </span>
140
+ </label>
141
+ <label class="relative">
142
+ <input type="radio" name="choix" value="discuter"
143
+ class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
144
+ <span
145
+ class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">
146
+ Discuter
147
+ </span>
148
+ </label>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="space-y-4">
153
+ <label class="block text-sm font-medium text-gray-700">
154
+ <i class="fas fa-feather-alt mr-2 text-blue-500"></i>Style d'écriture
155
+ </label>
156
+ <div class="grid grid-cols-2 gap-4">
157
+ <label class="relative">
158
+ <input type="radio" name="style" value="raffiné"
159
+ class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
160
+ <span
161
+ class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">
162
+ Raffiné
163
+ </span>
164
+ </label>
165
+ <label class="relative">
166
+ <input type="radio" name="style" value="Normal"
167
+ class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
168
+ <span
169
+ class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">
170
+ Normal
171
+ </span>
172
+ </label>
173
+ </div>
174
+ </div>
175
+
176
+ <button type="submit"
177
+ class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg">
178
+ <div class="flex items-center justify-center space-x-3">
179
+ <i class="fas fa-magic"></i>
180
+ <span>Générer</span>
181
+ </div>
182
+ </button>
183
+ </form>
184
+ <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none">
185
+ <!-- Le contenu généré sera inséré ici -->
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Section Étude de texte -->
191
+ <div class="card-hover glassmorphism rounded-2xl overflow-hidden">
192
+ <div class="p-8">
193
+ <div class="flex items-center space-x-4 mb-8">
194
+ <div class="bg-blue-100 rounded-lg p-3">
195
+ <i class="fas fa-file-alt text-blue-600 text-xl"></i>
196
+ </div>
197
+ <h2 class="text-2xl font-bold text-gray-800">Étude de texte</h2>
198
+ </div>
199
+ <form id="etude-texte-form" class="space-y-8">
200
+ <div class="space-y-4">
201
+ <label class="block text-sm font-medium text-gray-700">
202
+ <i class="fas fa-image mr-2 text-blue-500"></i>Image du texte
203
+ </label>
204
+ <div
205
+ class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200">
206
+ <input type="file" id="image-upload" name="image" accept="image/*" class="hidden">
207
+ <div class="space-y-3">
208
+ <div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
209
+ <i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
210
+ </div>
211
+ <p class="text-sm text-gray-600 font-medium">Glissez votre image ici ou cliquez
212
+ pour sélectionner</p>
213
+ <p class="text-xs text-gray-400">PNG, JPG jusqu'à 10MB</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <button type="submit"
219
+ class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg">
220
+ <div class="flex items-center justify-center space-x-3">
221
+ <i class="fas fa-search"></i>
222
+ <span>Analyser</span>
223
+ </div>
224
+ </button>
225
+ </form>
226
+ <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none">
227
+ <!-- Le contenu analysé sera inséré ici -->
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <div class="mt-12">
233
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Sauvegardes</h2>
234
+ <div id="backups-list" class="space-y-4">
235
+ <!-- Les sauvegardes seront listées ici -->
236
+ </div>
237
+ </div>
238
+ </main>
239
+
240
+ <script>
241
+ function initializeFileUpload() {
242
+ const dropZone = document.querySelector('.border-dashed');
243
+ const fileInput = document.getElementById('image-upload');
244
+
245
+ dropZone.addEventListener('click', () => fileInput.click());
246
+
247
+ ['dragenter', 'dragover'].forEach(eventName => {
248
+ dropZone.addEventListener(eventName, (e) => {
249
+ e.preventDefault();
250
+ dropZone.classList.add('border-blue-500', 'bg-blue-50');
251
+ });
252
+ });
253
+
254
+ ['dragleave', 'drop'].forEach(eventName => {
255
+ dropZone.addEventListener(eventName, (e) => {
256
+ e.preventDefault();
257
+ dropZone.classList.remove('border-blue-500', 'bg-blue-50');
258
+ });
259
+ });
260
+
261
+ dropZone.addEventListener('drop', (e) => {
262
+ e.preventDefault();
263
+ dropZone.classList.remove('border-blue-500', 'bg-blue-50');
264
+ fileInput.files = e.dataTransfer.files;
265
+ const fileName = fileInput.files[0]?.name;
266
+ if (fileName) {
267
+ dropZone.querySelector('p').textContent = `Fichier sélectionné : ${fileName}`;
268
+ }
269
+ });
270
+
271
+ fileInput.addEventListener('change', () => {
272
+ const fileName = fileInput.files[0]?.name;
273
+ if (fileName) {
274
+ dropZone.querySelector('p').textContent = `Fichier sélectionné : ${fileName}`;
275
+ }
276
+ });
277
+ }
278
+
279
+ function sauvegarderReponse(titre, contenu) {
280
+ const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
281
+ const dateSauvegarde = new Date().toISOString();
282
+ sauvegardes.push({
283
+ titre,
284
+ contenu,
285
+ date: dateSauvegarde
286
+ });
287
+ localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
288
+ afficherSauvegardes();
289
+ }
290
+
291
+ function supprimerSauvegarde(index) {
292
+ let sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
293
+ sauvegardes.splice(index, 1);
294
+ localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
295
+ afficherSauvegardes();
296
+ }
297
+
298
+ function afficherSauvegardes() {
299
+ const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
300
+ const backupsList = document.getElementById('backups-list');
301
+ backupsList.innerHTML = '';
302
+ if (sauvegardes.length === 0) {
303
+ backupsList.innerHTML = '<p class="text-gray-600">Aucune sauvegarde pour le moment.</p>';
304
+ return;
305
+ }
306
+
307
+ sauvegardes.forEach((sauvegarde, index) => {
308
+ const sauvegardeDiv = document.createElement('div');
309
+ sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item';
310
+ sauvegardeDiv.innerHTML = `
311
+ <h3 class="text-lg font-semibold text-gray-800">${sauvegarde.titre}</h3>
312
+ <p class="text-sm text-gray-600 mb-2">${new Date(sauvegarde.date).toLocaleString()}</p>
313
+ <div class="text-sm text-gray-700 backup-content prose max-w-none">${marked.parse(sauvegarde.contenu)}</div>
314
+ <button class="absolute top-2 right-2 text-red-500 hover:text-red-700 focus:outline-none" data-index="${index}">
315
+ <i class="fas fa-trash"></i>
316
+ </button>
317
+ `;
318
+ backupsList.appendChild(sauvegardeDiv);
319
+
320
+ // Gestion de l'expansion/contraction du contenu
321
+ const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
322
+ const backupItemDiv = sauvegardeDiv; // Utilisez toute la
323
+
324
+ backupItemDiv.addEventListener('click', (e) => {
325
+ if (e.target.tagName === "BUTTON") return; // Ignorer les clics sur le bouton supprimer
326
+ backupContentDiv.classList.toggle('backup-content-expanded');
327
+ MathJax.typesetPromise([backupContentDiv]); // Re-typer le contenu MathJax si nécessaire
328
+ });
329
+
330
+ const deleteButton = sauvegardeDiv.querySelector('button');
331
+ deleteButton.addEventListener('click', () => {
332
+ if (confirm('Êtes-vous sûr de vouloir supprimer cette sauvegarde ?')) {
333
+ supprimerSauvegarde(index);
334
+ }
335
+ });
336
+ });
337
+
338
+ }
339
+
340
+ async function submitFrancaisForm() {
341
+ const form = document.getElementById('francais-form');
342
+ const output = document.getElementById('francais-output');
343
+
344
+ form.addEventListener('submit', async (e) => {
345
+ e.preventDefault();
346
+ output.innerHTML = `
347
+ <div class="flex items-center justify-center space-x-2 text-blue-600">
348
+ <div class="loading-dot">[x] </div>
349
+ <div class="loading-dot">[x] </div>
350
+ <div class="loading-dot">[x] </div>
351
+ <span class="ml-3 text-sm font-medium text-gray-600">Génération en cours...</span>
352
+ </div>`;
353
+
354
+ const formData = new FormData(form);
355
+ try {
356
+ const response = await fetch('/api/francais', {
357
+ method: 'POST',
358
+ body: formData
359
+ });
360
+ const result = await response.json();
361
+ const sujet = formData.get('sujet');
362
+ output.innerHTML = marked.parse(result.output);
363
+ sauvegarderReponse(sujet, result.output);
364
+ MathJax.typesetPromise([output]);
365
+ } catch (error) {
366
+ output.innerHTML = `
367
+ <div class="flex items-center space-x-2 text-red-500 bg-red-50 p-4 rounded-lg">
368
+ <i class="fas fa-exclamation-circle"></i>
369
+ <span class="text-sm font-medium">Une erreur est survenue. Veuillez réessayer.</span>
370
+ </div>`;
371
+ }
372
+ });
373
+ }
374
+
375
+ async function submitEtudeTexteForm() {
376
+ const form = document.getElementById('etude-texte-form');
377
+ const output = document.getElementById('etude-texte-output');
378
+
379
+ form.addEventListener('submit', async (e) => {
380
+ e.preventDefault();
381
+ output.innerHTML = `
382
+ <div class="flex items-center justify-center space-x-2 text-blue-600"> <div class="loading-dot">[x] </div>
383
+ <div class="loading-dot">[x] </div>
384
+ <div class="loading-dot">[x] </div>
385
+ <span class="ml-3 text-sm font-medium text-gray-600">Analyse en cours...</span>
386
+ </div>`;
387
+
388
+ const formData = new FormData(form);
389
+ try {
390
+ const response = await fetch('/api/etude-texte', {
391
+ method: 'POST',
392
+ body: formData
393
+ });
394
+ const result = await response.json();
395
+ output.innerHTML = marked.parse(result.output);
396
+
397
+ // Titre par défaut pour les analyses d'images
398
+ const titre = "Analyse d'image " + new Date().toLocaleString();
399
+ sauvegarderReponse(titre, result.output)
400
+
401
+ MathJax.typesetPromise([output]);
402
+ } catch (error) {
403
+ output.innerHTML = `
404
+ <div class="flex items-center space-x-2 text-red-500 bg-red-50 p-4 rounded-lg">
405
+ <i class="fas fa-exclamation-circle"></i>
406
+ <span class="text-sm font-medium">Une erreur est survenue. Veuillez réessayer.</span>
407
+ </div>`;
408
+ }
409
+ });
410
+ }
411
+
412
+ // Animation des cartes au défilement
413
+ function animateOnScroll() {
414
+ const cards = document.querySelectorAll('.card-hover');
415
+ const observer = new IntersectionObserver((entries) => {
416
+ entries.forEach(entry => {
417
+ if (entry.isIntersecting) {
418
+ entry.target.style.opacity = '1';
419
+ entry.target.style.transform = 'translateY(0)';
420
+ }
421
+ });
422
+ }, {
423
+ threshold: 0.1
424
+ });
425
+
426
+ cards.forEach(card => {
427
+ card.style.opacity = '0';
428
+ card.style.transform = 'translateY(20px)';
429
+ card.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
430
+ observer.observe(card);
431
+ });
432
+ }
433
+
434
+ // Effet de focus amélioré pour les zones de texte
435
+ function enhanceTextareaFocus() {
436
+ const textareas = document.querySelectorAll('textarea');
437
+ textareas.forEach(textarea => {
438
+ textarea.addEventListener('focus', () => {
439
+ textarea.parentElement.classList.add('ring-2', 'ring-blue-200');
440
+ });
441
+ textarea.addEventListener('blur', () => {
442
+ textarea.parentElement.classList.remove('ring-2', 'ring-blue-200');
443
+ });
444
+ });
445
+ }
446
+
447
+ // Effet de hover pour les boutons radio
448
+ function enhanceRadioButtons() {
449
+ const radioLabels = document.querySelectorAll('input[type="radio"] + span');
450
+ radioLabels.forEach(label => {
451
+ label.addEventListener('mouseenter', () => {
452
+ if (!label.previousElementSibling.checked) {
453
+ label.style.borderColor = '#3182ce';
454
+ }
455
+ });
456
+ label.addEventListener('mouseleave', () => {
457
+ if (!label.previousElementSibling.checked) {
458
+ label.style.borderColor = '#e5e7eb'; // Couleur de bordure par défaut de Tailwind pour les éléments non actifs
459
+ }
460
+ });
461
+ });
462
+ }
463
+
464
+ // Initialisation avec tous les effets
465
+ document.addEventListener('DOMContentLoaded', () => {
466
+ initializeFileUpload();
467
+ submitFrancaisForm();
468
+ submitEtudeTexteForm();
469
+ animateOnScroll();
470
+ enhanceTextareaFocus();
471
+ enhanceRadioButtons();
472
+
473
+ // Message de bienvenue subtil (vous pouvez supprimer cette partie si vous ne la souhaitez pas)
474
+ const welcomeMessage = document.createElement('div');
475
+ welcomeMessage.innerHTML = `
476
+ <div class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-4 transform transition-all duration-500 opacity-0 translate-y-4">
477
+ <div class="flex items-center space-x-3">
478
+ <div class="bg-blue-100 rounded-lg p-2">
479
+ <i class="fas fa-robot text-blue-600"></i>
480
+ </div>
481
+ <div>
482
+ <p class="text-sm font-medium text-gray-800">Bienvenue sur Mariam AI</p>
483
+ <p class="text-xs text-gray-500">Je suis là pour vous aider</p>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ `;
488
+ document.body.appendChild(welcomeMessage);
489
+
490
+ setTimeout(() => {
491
+ welcomeMessage.firstElementChild.classList.remove('opacity-0', 'translate-y-4');
492
+ }, 1000);
493
+
494
+ setTimeout(() => {
495
+ welcomeMessage.firstElementChild.classList.add('opacity-0', 'translate-y-4');
496
+ setTimeout(() => welcomeMessage.remove(), 500);
497
+ }, 5000);
498
+
499
+ afficherSauvegardes(); // Appel de la fonction pour afficher les sauvegardes
500
+ });
501
+ </script>
502
+ </script>
503
+ </body>
504
+
505
+ </html>