Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard - Cosmic Data Explorer</title> | |
| <link rel="icon" type="image/x-icon" href="https://static.photos/space/200x200/1"> | |
| <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> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #000428 0%, #004e92 100%); | |
| } | |
| .sidebar { | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(10px); | |
| } | |
| .data-card { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(5px); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(0, 186, 255, 0.3); | |
| } | |
| .chart-container { | |
| background: rgba(30, 41, 59, 0.5); | |
| backdrop-filter: blur(5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg text-white min-h-screen"> | |
| <div class="flex"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 min-h-screen p-6 hidden md:block"> | |
| <div class="flex items-center mb-10"> | |
| <i data-feather="activity" class="w-8 h-8 text-cyan-400 mr-3"></i> | |
| <h2 class="text-xl font-bold">Cosmic Explorer</h2> | |
| </div> | |
| <nav class="space-y-2"> | |
| <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700/50 transition-colors"> | |
| <i data-feather="home" class="w-5 h-5 mr-3"></i> | |
| Home | |
| </a> | |
| <a href="dashboard.html" class="flex items-center p-3 rounded-lg bg-blue-900/30 text-cyan-400"> | |
| <i data-feather="pie-chart" class="w-5 h-5 mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="analysis.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700/50 transition-colors"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i> | |
| Analysis | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-700/50 transition-colors"> | |
| <i data-feather="database" class="w-5 h-5 mr-3"></i> | |
| Data Sources | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-slate-700/50 transition-colors"> | |
| <i data-feather="settings" class="w-5 h-5 mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| <div class="mt-12 pt-6 border-t border-slate-700"> | |
| <div class="relative border-2 border-dashed border-blue-400/30 rounded-lg p-4 text-center cursor-pointer hover:bg-blue-900/10 transition-colors"> | |
| <i data-feather="file-plus" class="w-6 h-6 mx-auto text-blue-400 mb-2"></i> | |
| <p class="text-xs">Upload CSV</p> | |
| <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept=".csv"> | |
| </div> | |
| <div class="mt-4 p-3 bg-green-900/10 rounded-lg border border-green-400/20 flex items-start"> | |
| <i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-1 mr-2"></i> | |
| <p class="text-xs text-green-300">Demo data loaded (1,284 records)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="flex-1 p-6 md:p-10"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-2xl font-bold flex items-center"> | |
| <i data-feather="pie-chart" class="w-6 h-6 mr-3 text-cyan-400"></i> | |
| Experiment Dashboard | |
| </h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center bg-blue-900/30 px-3 py-1 rounded-full border border-blue-400/20"> | |
| <i data-feather="database" class="w-4 h-4 mr-2 text-blue-300"></i> | |
| <span class="text-sm">DEMO DATA</span> | |
| </div> | |
| <button class="bg-cyan-600 hover:bg-cyan-700 px-4 py-2 rounded-lg flex items-center transition-colors"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Export | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="data-card rounded-xl p-6 border border-blue-400/20 glow"> | |
| <p class="text-sm text-blue-300 mb-1">Total Experiments</p> | |
| <h3 class="text-3xl font-bold mb-2">1,284</h3> | |
| <p class="text-xs text-blue-300">+12% from last year</p> | |
| </div> | |
| <div class="data-card rounded-xl p-6 border border-purple-400/20"> | |
| <p class="text-sm text-purple-300 mb-1">Organisms</p> | |
| <h3 class="text-3xl font-bold mb-2">42</h3> | |
| <p class="text-xs text-purple-300">8 primary model organisms</p> | |
| </div> | |
| <div class="data-card rounded-xl p-6 border border-green-400/20"> | |
| <p class="text-sm text-green-300 mb-1">Active Missions</p> | |
| <h3 class="text-3xl font-bold mb-2">18</h3> | |
| <p class="text-xs text-green-300">3 new in 2023</p> | |
| </div> | |
| <div class="data-card rounded-xl p-6 border border-amber-400/20"> | |
| <p class="text-sm text-amber-300 mb-1">Avg Duration</p> | |
| <h3 class="text-3xl font-bold mb-2">14.7</h3> | |
| <p class="text-xs text-amber-300">days per experiment</p> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <!-- Experiment by Year --> | |
| <div class="chart-container rounded-xl p-6 border border-blue-400/20"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">Experiments by Year</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs px-2 py-1 bg-blue-900/30 rounded">All</button> | |
| <button class="text-xs px-2 py-1 hover:bg-blue-900/30 rounded">ISS</button> | |
| <button class="text-xs px-2 py-1 hover:bg-blue-900/30 rounded">Shuttle</button> | |
| </div> | |
| </div> | |
| <canvas id="yearChart" height="250"></canvas> | |
| </div> | |
| <!-- Organism Distribution --> | |
| <div class="chart-container rounded-xl p-6 border border-purple-400/20"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">Organism Distribution</h3> | |
| <div class="flex items-center"> | |
| <span class="text-xs mr-2">Top 8</span> | |
| <i data-feather="filter" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <canvas id="organismChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Experiments Table --> | |
| <div class="chart-container rounded-xl p-6 border border-slate-700 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-semibold">Recent Experiments</h3> | |
| <button class="text-sm flex items-center text-cyan-400 hover:text-cyan-300"> | |
| View All <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead class="text-left border-b border-slate-700"> | |
| <tr> | |
| <th class="pb-3">ID</th> | |
| <th class="pb-3">Title</th> | |
| <th class="pb-3">Mission</th> | |
| <th class="pb-3">Organism</th> | |
| <th class="pb-3">Year</th> | |
| <th class="pb-3">Duration</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-800"> | |
| <tr class="hover:bg-slate-700/50"> | |
| <td class="py-3 font-mono">EXP-042</td> | |
| <td>Effects of Microgravity on Arabidopsis</td> | |
| <td>ISS</td> | |
| <td>Arabidopsis thaliana</td> | |
| <td>2022</td> | |
| <td>21 days</td> | |
| </tr> | |
| <tr class="hover:bg-slate-700/50"> | |
| <td class="py-3 font-mono">EXP-128</td> | |
| <td>Bone Loss in Mice</td> | |
| <td>STS-135</td> | |
| <td>Mus musculus</td> | |
| <td>2021</td> | |
| <td>14 days</td> | |
| </tr> | |
| <tr class="hover:bg-slate-700/50"> | |
| <td class="py-3 font-mono">EXP-056</td> | |
| <td>Radiation Effects on Yeast</td> | |
| <td>Artemis I</td> | |
| <td>Saccharomyces cerevisiae</td> | |
| <td>2023</td> | |
| <td>28 days</td> | |
| </tr> | |
| <tr class="hover:bg-slate-700/50"> | |
| <td class="py-3 font-mono">EXP-217</td> | |
| <td>Protein Crystallization</td> | |
| <td>ISS</td> | |
| <td>Multiple</td> | |
| <td>2021</td> | |
| <td>7 days</td> | |
| </tr> | |
| <tr class="hover:bg-slate-700/50"> | |
| <td class="py-3 font-mono">EXP-089</td> | |
| <td>Cardiovascular Changes in Fish</td> | |
| <td>Soyuz MS-22</td> | |
| <td>Danio rerio</td> | |
| <td>2022</td> | |
| <td>30 days</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Biological Systems --> | |
| <div class="chart-container rounded-xl p-6 border border-green-400/20"> | |
| <h3 class="font-semibold mb-6">Biological Systems</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-green-900/10 p-4 rounded-lg border border-green-400/20 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-900/30 flex items-center justify-center mr-3"> | |
| <i data-feather="dna" class="w-5 h-5 text-green-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-green-300">Molecular</p> | |
| <p class="font-semibold">312</p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-900/10 p-4 rounded-lg border border-blue-400/20 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center mr-3"> | |
| <i data-feather="heart" class="w-5 h-5 text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-blue-300">Cardiovascular</p> | |
| <p class="font-semibold">198</p> | |
| </div> | |
| </div> | |
| <div class="bg-purple-900/10 p-4 rounded-lg border border-purple-400/20 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900/30 flex items-center justify-center mr-3"> | |
| <i data-feather="brain" class="w-5 h-5 text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-purple-300">Neurological</p> | |
| <p class="font-semibold">176</p> | |
| </div> | |
| </div> | |
| <div class="bg-amber-900/10 p-4 rounded-lg border border-amber-400/20 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-amber-900/30 flex items-center justify-center mr-3"> | |
| <i data-feather="bone" class="w-5 h-5 text-amber-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-amber-300">Musculoskeletal</p> | |
| <p class="font-semibold">243</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Year Chart | |
| const yearCtx = document.getElementById('yearChart').getContext('2d'); | |
| const yearChart = new Chart(yearCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['2018', '2019', '2020', '2021', '2022', '2023'], | |
| datasets: [{ | |
| label: 'Experiments', | |
| data: [85, 112, 134, 198, 245, 187], | |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: 'rgba(255, 255, 255, 0.7)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| }, | |
| ticks: { | |
| color: 'rgba(255, 255, 255, 0.7)' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Organism Chart | |
| const orgCtx = document.getElementById('organismChart').getContext('2d'); | |
| const orgChart = new Chart(orgCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Mice', 'Arabidopsis', 'Yeast', 'Fruit Flies', 'Zebrafish', 'Bacteria', 'Human Cells', 'Fungi'], | |
| datasets: [{ | |
| data: [312, 198, 176, 145, 112, 98, 76, 54], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(139, 92, 246, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(245, 158, 11, 0.7)', | |
| 'rgba(236, 72, 153, 0.7)', | |
| 'rgba(6, 182, 212, 0.7)', | |
| 'rgba(220, 38, 38, 0.7)', | |
| 'rgba(101, 163, 13, 0.7)' | |
| ], | |
| borderColor: 'rgba(30, 41, 59, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| color: 'rgba(255, 255, 255, 0.7)' | |
| } | |
| } | |
| }, | |
| cutout: '60%' | |
| } | |
| }); | |
| }); | |
| // File upload interaction | |
| document.querySelector('input[type="file"]').addEventListener('change', function(e) { | |
| if (this.files.length > 0) { | |
| alert('CSV file uploaded successfully! Updating dashboard...'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |