Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Assistant | Cosmic Bio Explorer</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cosmic: { | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81', | |
| }, | |
| nebula: { | |
| 100: '#f0f9ff', | |
| 200: '#e0f2fe', | |
| 300: '#bae6fd', | |
| 400: '#7dd3fc', | |
| 500: '#38bdf8', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg text-gray-100 min-h-screen"> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <div class="relative z-10"> | |
| <nav class="bg-black bg-opacity-50 backdrop-blur-lg border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center"> | |
| <i data-feather="activity" class="text-cosmic-400 h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold bg-gradient-to-r from-cosmic-400 to-nebula-500 bg-clip-text text-transparent">Cosmic Bio Explorer</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="dashboard.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="publications.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Publications</a> | |
| <a href="knowledge-graph.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Knowledge Graph</a> | |
| <a href="trends.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Trends</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <a href="search.html" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="search" class="h-5 w-5"></i> | |
| </a> | |
| <a href="notifications.html" class="ml-3 bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="bell" class="h-5 w-5"></i> | |
| </a> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <a href="profile.html" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/space/200x200/42" alt=""> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i data-feather="menu" class="h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="py-10 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700 mb-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-cosmic-600 p-2 rounded-full"> | |
| <i data-feather="message-circle" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <h2 class="ml-3 text-xl font-bold text-white">Space Biology AI Assistant</h2> | |
| </div> | |
| <p class="text-gray-300 mb-6">Ask questions about NASA's space biology research in natural language. The AI will analyze 608+ publications to provide accurate, referenced answers.</p> | |
| <div class="space-y-4 mb-6 max-h-96 overflow-y-auto pr-2"> | |
| <div class="flex items-start"> | |
| <img src="http://static.photos/technology/200x200/1" class="h-8 w-8 rounded-full mr-3" alt="User"> | |
| <div class="bg-gray-700 rounded-lg p-3 max-w-xs"> | |
| <p class="text-white">What are the main challenges for human biology in Mars missions?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start justify-end"> | |
| <div class="bg-cosmic-600 rounded-lg p-3 max-w-xl"> | |
| <p class="text-white">The main challenges include radiation exposure, muscle and bone loss from reduced gravity, psychological effects of isolation, and maintaining proper nutrition. NASA studies show that during a 6-month Mars mission, astronauts could experience up to 20% muscle atrophy...</p> | |
| <div class="mt-2 flex flex-wrap gap-1"> | |
| <span class="text-xs bg-cosmic-700 bg-opacity-50 px-2 py-0.5 rounded">Smith et al. 2023</span> | |
| <span class="text-xs bg-cosmic-700 bg-opacity-50 px-2 py-0.5 rounded">Johnson et al. 2022</span> | |
| </div> | |
| </div> | |
| <img src="http://static.photos/technology/200x200/2" class="h-8 w-8 rounded-full ml-3" alt="AI"> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="http://static.photos/technology/200x200/1" class="h-8 w-8 rounded-full mr-3" alt="User"> | |
| <div class="bg-gray-700 rounded-lg p-3 max-w-xs"> | |
| <p class="text-white">Which plants have been successfully grown in space?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start justify-end"> | |
| <div class="bg-cosmic-600 rounded-lg p-3 max-w-xl"> | |
| <p class="text-white">NASA has successfully grown several plants in space including Arabidopsis thaliana (a model organism), Mizuna mustard, red romaine lettuce, and zinnia flowers. The Veggie system on the ISS has been particularly successful, with astronauts even eating space-grown lettuce...</p> | |
| <div class="mt-2 flex flex-wrap gap-1"> | |
| <span class="text-xs bg-cosmic-700 bg-opacity-50 px-2 py-0.5 rounded">ISS Study 2021</span> | |
| </div> | |
| </div> | |
| <img src="http://static.photos/technology/200x200/2" class="h-8 w-8 rounded-full ml-3" alt="AI"> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" class="w-full px-4 py-3 rounded-full bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-cosmic-500 text-white placeholder-gray-400" placeholder="Ask about space biology..."> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-cosmic-600 text-white p-2 rounded-full"> | |
| <i data-feather="send" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700"> | |
| <h2 class="text-xl font-semibold text-white mb-4">Suggested Questions</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <button class="text-left p-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-gray-300 text-sm"> | |
| What are the effects of microgravity on bone density? | |
| </button> | |
| <button class="text-left p-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-gray-300 text-sm"> | |
| How does space radiation affect DNA? | |
| </button> | |
| <button class="text-left p-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-gray-300 text-sm"> | |
| What countermeasures exist for muscle loss in space? | |
| </button> | |
| <button class="text-left p-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-gray-300 text-sm"> | |
| Which microorganisms have been studied on the ISS? | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6366f1, | |
| backgroundColor: 0x0f172a, | |
| points: 12.00, | |
| maxDistance: 20.00, | |
| spacing: 16.00 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |