Spaces:

anessss
/

anes

Sleeping

App Files Files Community

benyelles0mehdi0dris commited on Apr 25, 2025

Commit

956b9f8

1 Parent(s): ee0b268

frontend ajouter

Browse files

Files changed (3) hide show

frontend/index.html +312 -0
frontend/script.js +177 -0
frontend/styles.css +241 -0

frontend/index.html ADDED Viewed

	@@ -0,0 +1,312 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Tools Interface</title>
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Custom CSS for additional styling -->
+    <style>
+        .custom-file-upload {
+            border: 2px dashed #cbd5e0;
+            transition: background-color 0.3s ease;
+        }
+        .custom-file-upload:hover {
+            background-color: #f7fafc;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">AI Tools Interface</h1>
+        <!-- Conteneur principal avec des onglets -->
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <!-- Navigation des onglets -->
+            <div class="flex border-b">
+                <button onclick="openTab('summarize')" class="w-1/5 py-4 text-center bg-gray-100 hover:bg-gray-200 focus:outline-none tab-btn active" data-tab="summarize">
+                    Résumer
+                </button>
+                <button onclick="openTab('interpret-image')" class="w-1/5 py-4 text-center bg-gray-100 hover:bg-gray-200 focus:outline-none tab-btn" data-tab="interpret-image">
+                    Légende Image
+                </button>
+                <button onclick="openTab('answer-question')" class="w-1/5 py-4 text-center bg-gray-100 hover:bg-gray-200 focus:outline-none tab-btn" data-tab="answer-question">
+                    Réponse Question
+                </button>
+                <button onclick="openTab('generate-visualization')" class="w-1/5 py-4 text-center bg-gray-100 hover:bg-gray-200 focus:outline-none tab-btn" data-tab="generate-visualization">
+                    Visualisation
+                </button>
+                <button onclick="openTab('translate-document')" class="w-1/5 py-4 text-center bg-gray-100 hover:bg-gray-200 focus:outline-none tab-btn" data-tab="translate-document">
+                    Traduire
+                </button>
+            </div>
+            <!-- Contenu des onglets -->
+            <div class="p-6">
+                <!-- Onglet Résumé -->
+                <div id="summarize" class="tab-content">
+                    <h2 class="text-xl font-semibold mb-4">Résumer un document</h2>
+                    <form id="summarize-form" class="space-y-4">
+                        <input type="file" id="summarize-file" accept=".txt,.pdf,.docx,.pptx" class="hidden" />
+                        <label for="summarize-file" class="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg text-center custom-file-upload cursor-pointer">
+                            <span class="file-label">Sélectionner un fichier</span>
+                        </label>
+                        <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition">
+                            Générer le résumé
+                        </button>
+                    </form>
+                    <div id="summarize-result" class="mt-4 p-4 bg-gray-50 rounded"></div>
+                </div>
+                <!-- Onglet Légende Image -->
+                <div id="interpret-image" class="tab-content hidden">
+                    <h2 class="text-xl font-semibold mb-4">Générer une légende d'image</h2>
+                    <form id="interpret-image-form" class="space-y-4">
+                        <input type="file" id="interpret-image-file" accept="image/*" class="hidden" />
+                        <label for="interpret-image-file" class="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg text-center custom-file-upload cursor-pointer">
+                            <span class="file-label">Sélectionner une image</span>
+                        </label>
+                        <button type="submit" class="w-full bg-green-500 text-white py-2 rounded hover:bg-green-600 transition">
+                            Générer la légende
+                        </button>
+                    </form>
+                    <div id="interpret-image-result" class="mt-4 p-4 bg-gray-50 rounded"></div>
+                </div>
+                <!-- Onglet Réponse Question -->
+                <div id="answer-question" class="tab-content hidden">
+                    <h2 class="text-xl font-semibold mb-4">Poser une question à un document</h2>
+                    <form id="answer-question-form" class="space-y-4">
+                        <textarea id="question-input" placeholder="Votre question..." class="w-full p-2 border rounded" rows="3"></textarea>
+                        <input type="file" id="answer-question-file" accept=".txt,.pdf,.docx" class="hidden" />
+                        <label for="answer-question-file" class="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg text-center custom-file-upload cursor-pointer">
+                            <span class="file-label">Fichier optionnel</span>
+                        </label>
+                        <button type="submit" class="w-full bg-purple-500 text-white py-2 rounded hover:bg-purple-600 transition">
+                            Obtenir la réponse
+                        </button>
+                    </form>
+                    <div id="answer-question-result" class="mt-4 p-4 bg-gray-50 rounded"></div>
+                </div>
+                <!-- Onglet Visualisation -->
+                <div id="generate-visualization" class="tab-content hidden">
+                    <h2 class="text-xl font-semibold mb-4">Générer une Visualisation</h2>
+                    <form id="generate-visualization-form" class="space-y-4">
+                        <input type="file" id="visualization-file" accept=".xlsx,.xls" class="hidden" />
+                        <label for="visualization-file" class="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg text-center custom-file-upload cursor-pointer">
+                            <span class="file-label">Sélectionner un fichier Excel</span>
+                        </label>
+                        <input type="text" id="visualization-request" placeholder="Type de visualisation (ex: histogramme)" class="w-full p-2 border rounded" />
+                        <button type="submit" class="w-full bg-indigo-500 text-white py-2 rounded hover:bg-indigo-600 transition">
+                            Générer le graphique
+                        </button>
+                    </form>
+                    <div id="generate-visualization-result" class="mt-4 p-4 bg-gray-50 rounded"></div>
+                </div>
+                <!-- Onglet Traduction -->
+                <div id="translate-document" class="tab-content hidden">
+                    <h2 class="text-xl font-semibold mb-4">Traduire un Document</h2>
+                    <form id="translate-document-form" class="space-y-4">
+                        <input type="file" id="translate-file" accept=".txt,.docx,.pdf" class="hidden" />
+                        <label for="translate-file" class="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg text-center custom-file-upload cursor-pointer">
+                            <span class="file-label">Sélectionner un document</span>
+                        </label>
+                        <select id="target-language" class="w-full p-2 border rounded">
+                            <option value="en">Anglais</option>
+                            <option value="fr">Français</option>
+                            <option value="es">Espagnol</option>
+                            <option value="de">Allemand</option>
+                        </select>
+                        <button type="submit" class="w-full bg-pink-500 text-white py-2 rounded hover:bg-pink-600 transition">
+                            Traduire
+                        </button>
+                    </form>
+                    <div id="translate-document-result" class="mt-4 p-4 bg-gray-50 rounded"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // URL de base du backend
+        const BASE_URL = 'http://localhost:8000';
+        // Gestion des onglets
+        function openTab(tabName) {
+            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
+            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active', 'bg-gray-200'));
+            document.getElementById(tabName).classList.remove('hidden');
+            document.querySelector(`[data-tab="${tabName}"]`).classList.add('active', 'bg-gray-200');
+        }
+        // Fonction générique pour gérer les uploads de fichiers
+        function setupFileUpload(inputId) {
+            const input = document.getElementById(inputId);
+            const label = input.labels[0];
+            input.addEventListener('change', function() {
+                label.querySelector('.file-label').textContent = this.files[0]?.name || 'Sélectionner un fichier';
+            });
+        }
+        // Configuration des uploads
+        ['summarize-file', 'interpret-image-file', 'answer-question-file',
+         'visualization-file', 'translate-file'].forEach(setupFileUpload);
+        // Gestion des erreurs communes
+        function handleError(error, resultDiv) {
+            console.error(error);
+            resultDiv.innerHTML = `<p class="text-red-500">Erreur : ${error.message || 'Problème de communication avec le serveur'}</p>`;
+        }
+        // Résumé de document
+        document.getElementById('summarize-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const fileInput = document.getElementById('summarize-file');
+            const resultDiv = document.getElementById('summarize-result');
+            resultDiv.innerHTML = '<p class="text-blue-500">Traitement en cours...</p>';
+            try {
+                const formData = new FormData();
+                formData.append('file', fileInput.files[0]);
+                const response = await fetch(`http://localhost:8000/summarize`, {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+                resultDiv.innerHTML = `
+                    <h3 class="font-bold mb-2">Résumé de ${data.filename} :</h3>
+                    <p class="whitespace-pre-wrap">${data.summary}</p>
+                `;
+            } catch (error) {
+                handleError(error, resultDiv);
+            }
+        });
+        // Légende d'image
+        document.getElementById('interpret-image-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const fileInput = document.getElementById('interpret-image-file');
+            const resultDiv = document.getElementById('interpret-image-result');
+            resultDiv.innerHTML = '<p class="text-blue-500">Traitement en cours...</p>';
+            try {
+                const formData = new FormData();
+                formData.append('file', fileInput.files[0]);
+                const response = await fetch(`${BASE_URL}/interpret_image`, {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+                resultDiv.innerHTML = `
+                    <h3 class="font-bold mb-2">${data.filename} :</h3>
+                    <p>${data.caption}</p>
+                `;
+            } catch (error) {
+                handleError(error, resultDiv);
+            }
+        });
+        // Réponse aux questions
+        document.getElementById('answer-question-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const questionInput = document.getElementById('question-input');
+            const fileInput = document.getElementById('answer-question-file');
+            const resultDiv = document.getElementById('answer-question-result');
+            resultDiv.innerHTML = '<p class="text-blue-500">Recherche de réponse...</p>';
+            try {
+                const formData = new FormData();
+                formData.append('question', questionInput.value);
+                if (fileInput.files[0]) formData.append('file', fileInput.files[0]);
+                const response = await fetch(`${BASE_URL}/answer_question`, {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+                resultDiv.innerHTML = `
+                    <h3 class="font-bold mb-2">Réponse :</h3>
+                    <p>${data.answer}</p>
+                    ${data.score ? `<p class="text-sm text-gray-600">Confiance : ${(data.score * 100).toFixed(1)}%</p>` : ''}
+                `;
+            } catch (error) {
+                handleError(error, resultDiv);
+            }
+        });
+        // Génération de visualisation
+        document.getElementById('generate-visualization-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const fileInput = document.getElementById('visualization-file');
+            const requestInput = document.getElementById('visualization-request');
+            const resultDiv = document.getElementById('generate-visualization-result');
+            resultDiv.innerHTML = '<p class="text-blue-500">Génération du graphique...</p>';
+            try {
+                const formData = new FormData();
+                formData.append('file', fileInput.files[0]);
+                formData.append('request', requestInput.value);
+                const response = await fetch(`${BASE_URL}/generate_visualization`, {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+                resultDiv.innerHTML = `
+                    <h3 class="font-bold mb-2">${data.filename} :</h3>
+                    <p>${data.message}</p>
+                    <!-- Ajouter ici l'affichage de l'image si le backend est modifié -->
+                `;
+            } catch (error) {
+                handleError(error, resultDiv);
+            }
+        });
+        // Traduction de document
+        document.getElementById('translate-document-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const fileInput = document.getElementById('translate-file');
+            const languageSelect = document.getElementById('target-language');
+            const resultDiv = document.getElementById('translate-document-result');
+            resultDiv.innerHTML = '<p class="text-blue-500">Traduction en cours...</p>';
+            try {
+                const formData = new FormData();
+                formData.append('file', fileInput.files[0]);
+                formData.append('target_language', languageSelect.value);
+                const response = await fetch(`${BASE_URL}/translate_document`, {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+                resultDiv.innerHTML = `
+                    <h3 class="font-bold mb-2">Traduction (${languageSelect.options[languageSelect.selectedIndex].text}) :</h3>
+                    <p class="whitespace-pre-wrap">${data.translated_text}</p>
+                `;
+            } catch (error) {
+                handleError(error, resultDiv);
+            }
+        });
+    </script>
+</body>
+</html>

frontend/script.js ADDED Viewed

	@@ -0,0 +1,177 @@

+// URL de base du backend
+const BASE_URL = 'http://localhost:8000';
+// Gestion des onglets
+function openTab(tabName) {
+  document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
+  document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+  document.getElementById(tabName).classList.remove('hidden');
+  document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
+}
+// Fonction générique pour gérer les uploads de fichiers
+function setupFileUpload(inputId) {
+  const input = document.getElementById(inputId);
+  const label = input.labels[0];
+  input.addEventListener('change', function() {
+    label.querySelector('.file-label').textContent = this.files[0]?.name || 'Sélectionner un fichier';
+  });
+}
+// Configuration des uploads
+['summarize-file', 'interpret-image-file', 'answer-question-file',
+ 'visualization-file', 'translate-file'].forEach(setupFileUpload);
+// Gestion des erreurs communes
+function handleError(error, resultDiv) {
+  console.error(error);
+  resultDiv.innerHTML = `<p class="error">Erreur : ${error.message || 'Problème de communication avec le serveur'}</p>`;
+}
+// Résumé de document
+document.getElementById('summarize-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fileInput = document.getElementById('summarize-file');
+  const resultDiv = document.getElementById('summarize-result');
+  resultDiv.innerHTML = '<p class="info">Traitement en cours...</p>';
+  try {
+    const formData = new FormData();
+    formData.append('file', fileInput.files[0]);
+    const response = await fetch(`${BASE_URL}/summarize`, {
+      method: 'POST',
+      body: formData
+    });
+    const data = await response.json();
+    if (data.error) throw new Error(data.error);
+    resultDiv.innerHTML = `
+      <h3>${data.filename} :</h3>
+      <p>${data.summary}</p>
+    `;
+  } catch (error) {
+    handleError(error, resultDiv);
+  }
+});
+// Légende d'image
+document.getElementById('interpret-image-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fileInput = document.getElementById('interpret-image-file');
+  const resultDiv = document.getElementById('interpret-image-result');
+  resultDiv.innerHTML = '<p class="info">Traitement en cours...</p>';
+  try {
+    const formData = new FormData();
+    formData.append('file', fileInput.files[0]);
+    const response = await fetch(`${BASE_URL}/interpret_image`, {
+      method: 'POST',
+      body: formData
+    });
+    const data = await response.json();
+    if (data.error) throw new Error(data.error);
+    resultDiv.innerHTML = `
+      <h3>${data.filename} :</h3>
+      <p>${data.caption}</p>
+    `;
+  } catch (error) {
+    handleError(error, resultDiv);
+  }
+});
+// Réponse aux questions
+document.getElementById('answer-question-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const questionInput = document.getElementById('question-input');
+  const fileInput = document.getElementById('answer-question-file');
+  const resultDiv = document.getElementById('answer-question-result');
+  resultDiv.innerHTML = '<p class="info">Recherche de réponse...</p>';
+  try {
+    const formData = new FormData();
+    formData.append('question', questionInput.value);
+    if (fileInput.files[0]) formData.append('file', fileInput.files[0]);
+    const response = await fetch(`${BASE_URL}/answer_question`, {
+      method: 'POST',
+      body: formData
+    });
+    const data = await response.json();
+    if (data.error) throw new Error(data.error);
+    resultDiv.innerHTML = `
+      <h3>Réponse :</h3>
+      <p>${data.answer}</p>
+      ${data.score ? `<p class="small">Confiance : ${(data.score * 100).toFixed(1)}%</p>` : ''}
+    `;
+  } catch (error) {
+    handleError(error, resultDiv);
+  }
+});
+// Génération de visualisation
+document.getElementById('generate-visualization-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fileInput = document.getElementById('visualization-file');
+  const requestInput = document.getElementById('visualization-request');
+  const resultDiv = document.getElementById('generate-visualization-result');
+  resultDiv.innerHTML = '<p class="info">Génération du graphique...</p>';
+  try {
+    const formData = new FormData();
+    formData.append('file', fileInput.files[0]);
+    formData.append('request', requestInput.value);
+    const response = await fetch(`${BASE_URL}/generate_visualization`, {
+      method: 'POST',
+      body: formData
+    });
+    const data = await response.json();
+    if (data.error) throw new Error(data.error);
+    resultDiv.innerHTML = `
+      <h3>${data.filename} :</h3>
+      <p>${data.message}</p>
+      <!-- Ici, ajouter l'affichage de l'image si le backend renvoie un visuel -->
+    `;
+  } catch (error) {
+    handleError(error, resultDiv);
+  }
+});
+// Traduction de document
+document.getElementById('translate-document-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fileInput = document.getElementById('translate-file');
+  const languageSelect = document.getElementById('target-language');
+  const resultDiv = document.getElementById('translate-document-result');
+  resultDiv.innerHTML = '<p class="info">Traduction en cours...</p>';
+  try {
+    const formData = new FormData();
+    formData.append('file', fileInput.files[0]);
+    formData.append('target_language', languageSelect.value);
+    const response = await fetch(`${BASE_URL}/translate_document`, {
+      method: 'POST',
+      body: formData
+    });
+    const data = await response.json();
+    if (data.error) throw new Error(data.error);
+    resultDiv.innerHTML = `
+      <h3>Traduction (${languageSelect.options[languageSelect.selectedIndex].text}) :</h3>
+      <p>${data.translated_text}</p>
+    `;
+  } catch (error) {
+    handleError(error, resultDiv);
+  }
+});

frontend/styles.css ADDED Viewed

	@@ -0,0 +1,241 @@

+/* Réinitialisation de base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  body {
+    background-color: #f7fafc; /* Couleur de fond équivalente */
+    font-family: Arial, sans-serif;
+    min-height: 100vh;
+  }
+  /* Conteneur principal */
+  .container {
+    max-width: 1024px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+  }
+  /* Titre principal */
+  h1 {
+    font-size: 2rem; /* Approximation de text-3xl */
+    font-weight: bold;
+    text-align: center;
+    color: #2d3748; /* Couleur équivalente à text-gray-800 */
+    margin-bottom: 2rem;
+  }
+  /* Conteneur des onglets */
+  .tab-container {
+    background-color: #fff;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+  /* Navigation des onglets */
+  .tab-nav {
+    display: flex;
+    border-bottom: 1px solid #e2e8f0;
+    position: relative;
+  }
+  .tab-nav .tab-btn {
+    flex: 1;
+    padding: 1rem;
+    background-color: #f7fafc;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    text-align: center;
+    font-size: 1rem;
+  }
+  .tab-nav .tab-btn:hover {
+    background-color: #edf2f7;
+    transform: scale(1.05);
+  }
+  .tab-nav .tab-btn.active {
+    background-color: #edf2f7;
+    font-weight: bold;
+  }
+  /* Effet de soulignement dynamique sur les onglets */
+  .tab-nav .tab-btn {
+    position: relative;
+  }
+  .tab-nav .tab-btn::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 0;
+    height: 3px;
+    background-color: #4299e1;
+    transition: width 0.3s ease, left 0.3s ease;
+  }
+  .tab-nav .tab-btn:hover::after,
+  .tab-nav .tab-btn.active::after {
+    width: 100%;
+    left: 0;
+  }
+  /* Contenu des onglets */
+  .tab-content-wrapper {
+    padding: 1.5rem;
+  }
+  .tab-content {
+    margin-bottom: 1rem;
+  }
+  /* Masquer les éléments */
+  .hidden {
+    display: none;
+  }
+  /* Styles des formulaires */
+  .form {
+    margin-bottom: 1rem;
+  }
+  .form input[type="text"],
+  .form textarea,
+  .form select {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #cbd5e0;
+    border-radius: 0.25rem;
+  }
+  .textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+  /* Input type file caché */
+  .hidden-file {
+    display: none;
+  }
+  /* Label pour le chargement de fichier */
+  .file-upload {
+    display: block;
+    width: 100%;
+    padding: 1rem;
+    border: 2px dashed #cbd5e0;
+    border-radius: 0.5rem;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    margin-bottom: 1rem;
+  }
+  .file-upload:hover {
+    background-color: #f7fafc;
+  }
+  /* Boutons */
+  .btn {
+    width: 100%;
+    padding: 0.75rem;
+    border: none;
+    border-radius: 0.25rem;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font-size: 1rem;
+  }
+  /* Boutons de couleur */
+  .btn-blue {
+    background-color: #4299e1;
+  }
+  .btn-blue:hover {
+    background-color: #3182ce;
+  }
+  .btn-green {
+    background-color: #48bb78;
+  }
+  .btn-green:hover {
+    background-color: #38a169;
+  }
+  .btn-purple {
+    background-color: #9f7aea;
+  }
+  .btn-purple:hover {
+    background-color: #805ad5;
+  }
+  .btn-indigo {
+    background-color: #667eea;
+  }
+  .btn-indigo:hover {
+    background-color: #5a67d8;
+  }
+  .btn-pink {
+    background-color: #ed64a6;
+  }
+  .btn-pink:hover {
+    background-color: #d53f8c;
+  }
+  /* Boîte de résultat */
+  .result-box {
+    margin-top: 1rem;
+    padding: 1rem;
+    background-color: #f7fafc;
+    border-radius: 0.25rem;
+  }
+  /* Sélecteur de formulaire */
+  .select {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #cbd5e0;
+    border-radius: 0.25rem;
+  }
+  /* Navbar avec animation d'apparition */
+  nav {
+    filter: drop-shadow(0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.3));
+    width: 100%;
+    max-width: 14rem;
+    opacity: 0;
+    transform: translateY(-20px);
+    animation: fadeInDown 0.5s ease-out forwards;
+  }
+  /* Animation keyframes pour la navbar */
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  /* Préférence de réduction des animations */
+  @media (prefers-reduced-motion: reduce) {
+    nav * {
+      transition: 5s !important;
+      animation: 10ms !important;
+    }
+  }