Hugging Face's logo

Spaces:
cestca
/
searchstellar-cosmic-science-explorer
Running

App Files Community
cestca commited on
Commit
331c5c2
·
verified ·
1 Parent(s): 1b3073a

excuses moi il n'y a pas de resultats de recherche

Browse files
Files changed (4) hide show
  1. components/navbar.js +1 -0
  2. no-results.html +67 -0
  3. script.js +2 -2
  4. style.css +11 -1
components/navbar.js CHANGED
@@ -26,6 +26,7 @@ class CustomNavbar extends HTMLElement {
26
  <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">À propos</a>
27
  <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Bases de données</a>
28
  <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Aide</a>
 
29
  </div>
30
  <div class="flex items-center space-x-4">
31
  <button class="p-2 text-gray-600 hover:text-purple-600 transition-colors">
 
26
  <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">À propos</a>
27
  <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Bases de données</a>
28
  <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Aide</a>
29
+ <a href="/no-results.html" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Aucun résultat</a>
30
  </div>
31
  <div class="flex items-center space-x-4">
32
  <button class="p-2 text-gray-600 hover:text-purple-600 transition-colors">
no-results.html ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-full bg-gray-50">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aucun Résultat - Stellar</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ </head>
13
+ <body class="min-h-screen flex flex-col bg-gradient-to-b from-white to-gray-50">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="flex-grow container mx-auto px-4 py-8">
17
+ <div class="max-w-3xl mx-auto text-center py-16">
18
+ <div class="mx-auto w-24 h-24 flex items-center justify-center rounded-full bg-purple-100 mb-6">
19
+ <i data-feather="search" class="text-purple-600 w-12 h-12"></i>
20
+ </div>
21
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Aucun résultat trouvé</h1>
22
+ <p class="text-xl text-gray-600 mb-8">Nous n'avons pas trouvé de correspondance pour votre recherche. Essayez ces suggestions :</p>
23
+
24
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 text-left">
25
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Conseils pour améliorer votre recherche :</h3>
26
+ <ul class="space-y-3 text-gray-700">
27
+ <li class="flex items-start">
28
+ <i data-feather="check-circle" class="text-purple-500 mr-3 mt-0.5 flex-shrink-0"></i>
29
+ <span>Vérifiez l'orthographe de vos termes de recherche</span>
30
+ </li>
31
+ <li class="flex items-start">
32
+ <i data-feather="check-circle" class="text-purple-500 mr-3 mt-0.5 flex-shrink-0"></i>
33
+ <span>Utilisez des termes plus généraux ou plus spécifiques</span>
34
+ </li>
35
+ <li class="flex items-start">
36
+ <i data-feather="check-circle" class="text-purple-500 mr-3 mt-0.5 flex-shrink-0"></i>
37
+ <span>Essayez différents synonymes ou termes associés</span>
38
+ </li>
39
+ <li class="flex items-start">
40
+ <i data-feather="check-circle" class="text-purple-500 mr-3 mt-0.5 flex-shrink-0"></i>
41
+ <span>Élargissez votre période de recherche</span>
42
+ </li>
43
+ <li class="flex items-start">
44
+ <i data-feather="check-circle" class="text-purple-500 mr-3 mt-0.5 flex-shrink-0"></i>
45
+ <span>Ajoutez ou supprimez des filtres de recherche</span>
46
+ </li>
47
+ </ul>
48
+ </div>
49
+
50
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
51
+ <a href="/" class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium">
52
+ Retour à l'accueil
53
+ </a>
54
+ <button onclick="history.back()" class="px-6 py-3 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium">
55
+ Réessayer
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </main>
60
+
61
+ <custom-footer></custom-footer>
62
+ <script>
63
+ feather.replace();
64
+ </script>
65
+ <script src="script.js"></script>
66
+ </body>
67
+ </html>
script.js CHANGED
@@ -247,8 +247,8 @@ year: currentYear - Math.floor(Math.random() * (yearsFilter === 'all' ? 20 : par
247
  articleList.appendChild(articleElement);
248
  });
249
  }
250
-
251
  function showNoResults() {
252
- noResults.classList.remove('hidden');
 
253
  }
254
  });
 
247
  articleList.appendChild(articleElement);
248
  });
249
  }
 
250
  function showNoResults() {
251
+ // Redirect to no-results page instead of showing inline message
252
+ window.location.href = '/no-results.html';
253
  }
254
  });
style.css CHANGED
@@ -42,10 +42,20 @@
42
  box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.1), 0 10px 10px -5px rgba(124, 58, 237, 0.04);
43
  border-color: rgba(124, 58, 237, 0.3);
44
  }
45
-
46
  .article-card:first-child {
47
  background: linear-gradient(to right, rgba(124, 58, 237, 0.05), transparent);
48
  }
 
 
 
 
 
 
 
 
 
 
 
49
  /* Responsive adjustments */
50
  @media (max-width: 640px) {
51
  #constellation {
 
42
  box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.1), 0 10px 10px -5px rgba(124, 58, 237, 0.04);
43
  border-color: rgba(124, 58, 237, 0.3);
44
  }
 
45
  .article-card:first-child {
46
  background: linear-gradient(to right, rgba(124, 58, 237, 0.05), transparent);
47
  }
48
+
49
+ /* No results page styles */
50
+ .no-results-icon {
51
+ animation: bounce 2s infinite;
52
+ }
53
+
54
+ @keyframes bounce {
55
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
56
+ 40% {transform: translateY(-20px);}
57
+ 60% {transform: translateY(-10px);}
58
+ }
59
  /* Responsive adjustments */
60
  @media (max-width: 640px) {
61
  #constellation {