peux tu me traduire le site en français

components/footer.js

@@ -12,27 +12,27 @@ class CustomFooter extends HTMLElement {
                     <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                         <div>
                             <h3 class="text-lg font-semibold text-gray-900 mb-4">SearchStellar</h3>
-                            <p class="text-gray-600 text-sm">Exploring scientific research through cosmic visualizations.</p>
-                        </div>
+                            <p class="text-gray-600 text-sm">Exploration de la recherche scientifique à travers des visualisations cosmiques.</p>
+</div>
                         <div>
-                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Resources</h4>
-                            <ul class="space-y-2">
+                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Ressources</h4>
+<ul class="space-y-2">
                                 <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Documentation</a></li>
-                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">API Access</a></li>
-                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Data Sources</a></li>
-                            </ul>
+                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Accès API</a></li>
+                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Sources de données</a></li>
+</ul>
                         </div>
                         <div>
-                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Legal</h4>
-                            <ul class="space-y-2">
-                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Privacy Policy</a></li>
-                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Terms of Service</a></li>
+                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Légal</h4>
+<ul class="space-y-2">
+                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Politique de confidentialité</a></li>
+                                <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Conditions d'utilisation</a></li>
                                 <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors text-sm">Cookies</a></li>
-                            </ul>
+</ul>
                         </div>
                         <div>
-                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Connect</h4>
-                            <div class="flex space-x-4">
+                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Nous suivre</h4>
+<div class="flex space-x-4">
                                 <a href="#" class="text-gray-600 hover:text-purple-600 transition-colors">
                                     <i data-feather="twitter"></i>
                                 </a>

components/navbar.js

@@ -22,11 +22,11 @@ class CustomNavbar extends HTMLElement {
                             </a>
                         </div>
                         <div class="hidden md:flex items-center space-x-6">
-                            <a href="/" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Home</a>
-                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">About</a>
-                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Databases</a>
-                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Help</a>
-                        </div>
+                            <a href="/" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Accueil</a>
+                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">À propos</a>
+                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Bases de données</a>
+                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Aide</a>
+</div>
                         <div class="flex items-center space-x-4">
                             <button class="p-2 text-gray-600 hover:text-purple-600 transition-colors">
                                 <i data-feather="user"></i>

index.html

@@ -3,8 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SearchStellar - Cosmic Science Explorer</title>
-    <link rel="stylesheet" href="style.css">
+    <title>
+                    Rechercher
+Stellar - Explorateur Scientifique Cosmique</title>
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -17,14 +19,14 @@
 
     <main class="flex-grow container mx-auto px-4 py-8">
         <div class="max-w-4xl mx-auto text-center mb-12">
-            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Explore Scientific Constellations</h1>
-            <p class="text-xl text-gray-600">Discover the most influential medical research through our cosmic visualization</p>
-        </div>
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Explorez les Constellations Scientifiques</h1>
+            <p class="text-xl text-gray-600">Découvrez les recherches médicales les plus influentes grâce à notre visualisation cosmique</p>
+</div>
         <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
 <div class="flex flex-col md:flex-row gap-4 mb-6">
                 <div class="flex-grow relative">
-                    <input type="text" id="searchQuery" placeholder="Search for medical research..." 
-                           class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
+                    <input type="text" id="searchQuery" placeholder="Rechercher des études médicales..." 
+class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                     <i data-feather="search" class="absolute left-4 top-3.5 text-gray-400"></i>
                 </div>
                 <button id="searchButton" class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
@@ -33,8 +35,8 @@
             </div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                 <div class="bg-gray-50 p-4 rounded-xl">
-                    <h3 class="text-sm font-medium text-gray-700 mb-3">Databases</h3>
-                    <div class="space-y-2">
+                    <h3 class="text-sm font-medium text-gray-700 mb-3">Bases de données</h3>
+<div class="space-y-2">
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="checkbox" name="database" value="pubmed" checked class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                             <span class="text-gray-700">PubMed</span>
@@ -59,54 +61,54 @@
                 </div>
 
                 <div class="bg-gray-50 p-4 rounded-xl">
-                    <h3 class="text-sm font-medium text-gray-700 mb-3">Time Range</h3>
-                    <div class="space-y-2">
+                    <h3 class="text-sm font-medium text-gray-700 mb-3">Période</h3>
+<div class="space-y-2">
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="radio" name="timeRange" value="all" checked class="rounded-full border-gray-300 text-purple-600 focus:ring-purple-500">
-                            <span class="text-gray-700">All Time</span>
-                        </label>
+                            <span class="text-gray-700">Toutes périodes</span>
+</label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="radio" name="timeRange" value="10" class="rounded-full border-gray-300 text-purple-600 focus:ring-purple-500">
-                            <span class="text-gray-700">Last 10 Years</span>
-                        </label>
+                            <span class="text-gray-700">10 dernières années</span>
+</label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="radio" name="timeRange" value="5" class="rounded-full border-gray-300 text-purple-600 focus:ring-purple-500">
-                            <span class="text-gray-700">Last 5 Years</span>
-                        </label>
+                            <span class="text-gray-700">5 dernières années</span>
+</label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="radio" name="timeRange" value="2" class="rounded-full border-gray-300 text-purple-600 focus:ring-purple-500">
-                            <span class="text-gray-700">Last 2 Years</span>
-                        </label>
+                            <span class="text-gray-700">2 dernières années</span>
+</label>
                     </div>
                 </div>
 
                 <div class="bg-gray-50 p-4 rounded-xl">
-                    <h3 class="text-sm font-medium text-gray-700 mb-3">Sort By</h3>
-                    <div class="space-y-2">
+                    <h3 class="text-sm font-medium text-gray-700 mb-3">Trier par</h3>
+<div class="space-y-2">
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="radio" name="sortBy" value="relevance" checked class="rounded-full border-gray-300 text-purple-600 focus:ring-purple-500">
-                            <span class="text-gray-700">Relevance</span>
-                        </label>
+                            <span class="text-gray-700">Pertinence</span>
+</label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="radio" name="sortBy" value="citations" class="rounded-full border-gray-300 text-purple-600 focus:ring-purple-500">
                             <span class="text-gray-700">Citations</span>
-                        </label>
+</label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                             <input type="radio" name="sortBy" value="date" class="rounded-full border-gray-300 text-purple-600 focus:ring-purple-500">
                             <span class="text-gray-700">Date</span>
-                        </label>
+</label>
                     </div>
                 </div>
             </div>
 </div>
         <div id="loadingSpinner" class="hidden text-center py-16">
             <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-purple-500 mx-auto mb-6"></div>
-            <p class="text-gray-600 text-lg font-medium">Discovering research constellations...</p>
-        </div>
+            <p class="text-gray-600 text-lg font-medium">Découverte des constellations de recherche...</p>
+</div>
         <div id="resultsContainer" class="hidden">
             <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
-                <h2 class="text-3xl font-bold text-gray-900">Research Constellation</h2>
-                <div id="resultCount" class="text-lg text-purple-600 font-medium"></div>
+                <h2 class="text-3xl font-bold text-gray-900">Constellation de Recherche</h2>
+<div id="resultCount" class="text-lg text-purple-600 font-medium"></div>
             </div>
             
             <div class="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl shadow-lg p-6 h-[600px] relative overflow-hidden border border-gray-100">
@@ -118,11 +120,11 @@
         </div>
         <div id="noResults" class="hidden text-center py-16">
             <i data-feather="alert-circle" class="mx-auto text-gray-400 w-16 h-16 mb-6"></i>
-            <h3 class="text-2xl font-bold text-gray-900 mb-3">No results found</h3>
-            <p class="text-gray-600 text-lg">Try different search terms or filters</p>
+            <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucun résultat trouvé</h3>
+            <p class="text-gray-600 text-lg">Essayez d'autres termes de recherche ou filtres</p>
             <button class="mt-6 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium">
-                Try Again
-            </button>
+                Réessayer
+</button>
         </div>
 </main>
 

script.js

@@ -57,28 +57,28 @@ const loadingSpinner = document.getElementById('loadingSpinner');
         
         // Generate central article
         articles.push({
-            title: `The most influential study on ${query} in recent years`,
-            authors: "Smith, J.; Johnson, A.; Lee, K. et al.",
-            journal: "Nature Medicine",
+                title: `L'étude la plus influente sur ${query} ces dernières années`,
+                authors: "Dupont, J.; Martin, A.; Leroy, K. et al.",
+journal: "Nature Medicine",
             year: currentYear - Math.floor(Math.random() * (yearsFilter === 'all' ? 20 : parseInt(yearsFilter))),
             citations: centralArticleCitations,
             doi: "10.1038/nm.1234",
-            abstract: `This groundbreaking study revolutionized our understanding of ${query} by demonstrating significant improvements in patient outcomes. The research team employed novel methodologies that have since become standard in the field.`
-        });
+                abstract: `Cette étude révolutionnaire a transformé notre compréhension de ${query} en démontrant des améliorations significatives des résultats pour les patients. L'équipe de recherche a employé des méthodologies innovantes qui sont depuis devenues standard dans le domaine.`
+});
         
         // Generate surrounding articles
         for (let i = 0; i < count - 1; i++) {
             const citationCount = Math.floor(Math.random() * centralArticleCitations * 0.8);
             
             articles.push({
-                title: `Study ${i+1} on ${query}: ${['Novel', 'Comprehensive', 'Systematic', 'Randomized', 'Clinical'][i%5]} ${['findings', 'analysis', 'trial', 'review', 'evaluation'][i%5]}`,
-                authors: `${['Brown', 'Taylor', 'Williams', 'Davis', 'Miller'][i%5]}, ${String.fromCharCode(65 + (i%26))}. et al.`,
-                journal: ["JAMA", "NEJM", "The Lancet", "BMJ", "Annals"][i%5],
-                year: currentYear - Math.floor(Math.random() * (yearsFilter === 'all' ? 20 : parseInt(yearsFilter))),
+                title: `Étude ${i+1} sur ${query}: ${['Nouvelle', 'Complète', 'Systématique', 'Randomisée', 'Clinique'][i%5]} ${['découverte', 'analyse', 'étude', 'revue', 'évaluation'][i%5]}`,
+                authors: `${['Dubois', 'Bernard', 'Petit', 'Moreau', 'Lefevre'][i%5]}, ${String.fromCharCode(65 + (i%26))}. et al.`,
+                journal: ["La Presse Médicale", "NEJM", "The Lancet", "BMJ", "Annales"][i%5],
+year: currentYear - Math.floor(Math.random() * (yearsFilter === 'all' ? 20 : parseInt(yearsFilter))),
                 citations: citationCount,
                 doi: `10.1234/abcd.${1000 + i}`,
-                abstract: `This ${['important', 'seminal', 'innovative', 'detailed', 'thorough'][i%5]} study examined ${query} through the lens of ${['clinical', 'epidemiological', 'molecular', 'biochemical', 'genomic'][i%5]} analysis. The results ${['confirmed', 'challenged', 'expanded', 'refined', 'redefined'][i%5]} previous understanding in the field.`
-            });
+                abstract: `Cette étude ${['importante', 'fondamentale', 'innovante', 'détaillée', 'approfondie'][i%5]} a examiné ${query} à travers l'analyse ${['clinique', 'épidémiologique', 'moléculaire', 'biochimique', 'génomique'][i%5]}. Les résultats ont ${['confirmé', 'remis en question', 'élargi', 'affiné', 'redéfini'][i%5]} les connaissances précédentes dans ce domaine.`
+});
         }
         
         return articles;
@@ -89,9 +89,8 @@ const loadingSpinner = document.getElementById('loadingSpinner');
         articles.sort((a, b) => b.citations - a.citations);
         
         // Update result count
-        resultCount.textContent = `${articles.length} research papers found`;
-        
-        // Create constellation visualization
+                resultCount.textContent = `${articles.length} articles de recherche trouvés`;
+// Create constellation visualization
         createConstellation(articles);
         
         // Create article list
@@ -234,12 +233,12 @@ const loadingSpinner = document.getElementById('loadingSpinner');
                         <p class="text-gray-700 text-sm line-clamp-2 mb-3">${article.abstract}</p>
                         <div class="flex flex-wrap gap-2">
                             <a href="https://doi.org/${article.doi}" target="_blank" class="text-xs px-3 py-1 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">
-                                View Publication
-                            </a>
+                            Voir la publication
+</a>
                             ${index === 0 ? `
                                 <span class="text-xs px-3 py-1 bg-purple-100 text-purple-700 rounded-full">
-                                    Most Cited
-                                </span>
+                                    Plus cité
+</span>
                             ` : ''}
                         </div>
                     </div>