Spaces:

cestca
/

searchstellar-cosmic-science-explorer

Running

App Files Files Community

cestca commited on Oct 29, 2025

Commit

63486ed

verified ·

1 Parent(s): 2e92a32

merci, peux tu notifier les bases de données en cases à cocher afin de pouvoir en selectionner plusieurs, tu peux aussi ameliorer l'esthetique du site afin qu'il soit plus agreable à visualiser

Browse files

Files changed (3) hide show

index.html +99 -44
script.js +4 -4
style.css +25 -8

index.html CHANGED Viewed

@@ -12,17 +12,16 @@
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
 </head>
-<body class="min-h-screen flex flex-col">
-    <custom-navbar></custom-navbar>
     <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>
-        <div class="bg-white rounded-xl shadow-lg p-6 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">
@@ -32,62 +31,118 @@
                     Search
                 </button>
             </div>
-            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
-                <select id="databaseSelect" class="col-span-2 sm:col-span-1 p-3 border border-gray-300 rounded-lg">
-                    <option value="pubmed">PubMed</option>
-                    <option value="medline">MEDLINE</option>
-                    <option value="scholar">Google Scholar</option>
-                    <option value="scopus">Scopus</option>
-                    <option value="cochrane">Cochrane Library</option>
-                </select>
-                <select id="timeRange" class="p-3 border border-gray-300 rounded-lg">
-                    <option value="all">All Time</option>
-                    <option value="10">Last 10 Years</option>
-                    <option value="5">Last 5 Years</option>
-                    <option value="2">Last 2 Years</option>
-                </select>
-                <select id="sortBy" class="p-3 border border-gray-300 rounded-lg">
-                    <option value="relevance">Sort by Relevance</option>
-                    <option value="citations">Sort by Citations</option>
-                    <option value="date">Sort by Date</option>
-                </select>
-            </div>
-        </div>
-        <div id="loadingSpinner" class="hidden text-center py-12">
-            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mx-auto mb-4"></div>
-            <p class="text-gray-600">Discovering research constellations...</p>
         </div>
         <div id="resultsContainer" class="hidden">
-            <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-semibold text-gray-900">Research Constellation</h2>
-                <div id="resultCount" class="text-gray-600"></div>
             </div>
-            <div class="bg-white rounded-xl shadow-lg p-4 h-[600px] relative overflow-hidden">
-                <svg id="constellation" class="w-full h-full"></svg>
                 <div id="tooltip" class="absolute hidden bg-white p-4 rounded-lg shadow-lg border border-gray-200 max-w-xs pointer-events-none"></div>
             </div>
             <div id="articleList" class="mt-8 grid gap-4"></div>
         </div>
-        <div id="noResults" class="hidden text-center py-12">
-            <i data-feather="alert-circle" class="mx-auto text-gray-400 w-12 h-12 mb-4"></i>
-            <h3 class="text-xl font-medium text-gray-900 mb-2">No results found</h3>
-            <p class="text-gray-600">Try different search terms or filters</p>
         </div>
-    </main>
     <custom-footer></custom-footer>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
 </head>
+<body class="min-h-screen flex flex-col bg-gradient-to-b from-white to-gray-50">
+<custom-navbar></custom-navbar>
     <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>
+        <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">
                     Search
                 </button>
             </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">
+                        <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>
+                        </label>
+                        <label class="flex items-center space-x-2 cursor-pointer">
+                            <input type="checkbox" name="database" value="medline" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
+                            <span class="text-gray-700">MEDLINE</span>
+                        </label>
+                        <label class="flex items-center space-x-2 cursor-pointer">
+                            <input type="checkbox" name="database" value="scholar" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
+                            <span class="text-gray-700">Google Scholar</span>
+                        </label>
+                        <label class="flex items-center space-x-2 cursor-pointer">
+                            <input type="checkbox" name="database" value="scopus" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
+                            <span class="text-gray-700">Scopus</span>
+                        </label>
+                        <label class="flex items-center space-x-2 cursor-pointer">
+                            <input type="checkbox" name="database" value="cochrane" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
+                            <span class="text-gray-700">Cochrane Library</span>
+                        </label>
+                    </div>
+                </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">
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                    </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">
+                        <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>
+                        <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 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>
+                    </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>
         <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>
             </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">
+<svg id="constellation" class="w-full h-full"></svg>
                 <div id="tooltip" class="absolute hidden bg-white p-4 rounded-lg shadow-lg border border-gray-200 max-w-xs pointer-events-none"></div>
             </div>
             <div id="articleList" class="mt-8 grid gap-4"></div>
         </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>
+            <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>
         </div>
+</main>
     <custom-footer></custom-footer>
     <script src="script.js"></script>
     <script>
         feather.replace();
+        // Update database selection logic
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchButton = document.getElementById('searchButton');
+            searchButton.addEventListener('click', function() {
+                const selectedDatabases = Array.from(document.querySelectorAll('input[name="database"]:checked'))
+                    .map(el => el.value);
+                console.log('Selected databases:', selectedDatabases);
+                // Update your search logic to use selectedDatabases instead of single select
+            });
+        });
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

script.js CHANGED Viewed

@@ -1,10 +1,10 @@
 document.addEventListener('DOMContentLoaded', function() {
     const searchButton = document.getElementById('searchButton');
     const searchQuery = document.getElementById('searchQuery');
-    const databaseSelect = document.getElementById('databaseSelect');
-    const timeRange = document.getElementById('timeRange');
-    const sortBy = document.getElementById('sortBy');
-    const loadingSpinner = document.getElementById('loadingSpinner');
     const resultsContainer = document.getElementById('resultsContainer');
     const noResults = document.getElementById('noResults');
     const resultCount = document.getElementById('resultCount');

 document.addEventListener('DOMContentLoaded', function() {
     const searchButton = document.getElementById('searchButton');
     const searchQuery = document.getElementById('searchQuery');
+        const databaseCheckboxes = document.querySelectorAll('input[name="database"]');
+        const timeRange = document.querySelector('input[name="timeRange"]:checked').value;
+        const sortBy = document.querySelector('input[name="sortBy"]:checked').value;
+const loadingSpinner = document.getElementById('loadingSpinner');
     const resultsContainer = document.getElementById('resultsContainer');
     const noResults = document.getElementById('noResults');
     const resultCount = document.getElementById('resultCount');

style.css CHANGED Viewed

@@ -5,30 +5,47 @@
 }
 .node:hover {
-    transform: scale(1.1);
 }
 .link {
-    stroke: #e2e8f0;
-    stroke-opacity: 0.6;
 }
 .central-node {
     stroke: #7c3aed;
-    stroke-width: 2px;
-    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.5));
 }
 /* Article card styles */
 .article-card {
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .article-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 /* Responsive adjustments */
 @media (max-width: 640px) {
     #constellation {

 }
 .node:hover {
+    transform: scale(1.15);
+    filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.3));
 }
 .link {
+    stroke: #d1d5db;
+    stroke-opacity: 0.8;
+    transition: stroke-opacity 0.3s ease;
+}
+.link:hover {
+    stroke-opacity: 1;
 }
 .central-node {
     stroke: #7c3aed;
+    stroke-width: 3px;
+    filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.6));
+    animation: pulse 2s infinite;
 }
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
 /* Article card styles */
 .article-card {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid rgba(224, 231, 255, 0.5);
 }
 .article-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.1), 0 10px 10px -5px rgba(124, 58, 237, 0.04);
+    border-color: rgba(124, 58, 237, 0.3);
 }
+.article-card:first-child {
+    background: linear-gradient(to right, rgba(124, 58, 237, 0.05), transparent);
+}
 /* Responsive adjustments */
 @media (max-width: 640px) {
     #constellation {