cosmic-bio-explorer / search.html
iamcrash's picture
buttons does not work . u just write index ??
2807afa verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search | 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-cosmic-600 p-1 rounded-full 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="relative mb-8">
<input type="text" class="w-full px-5 py-4 rounded-full bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-cosmic-500 text-white placeholder-gray-400" placeholder="Search space biology studies..." value="muscle atrophy">
<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="search" class="h-5 w-5"></i>
</button>
</div>
<div class="mb-6 flex justify-between items-center">
<h2 class="text-xl font-semibold text-white">24 results for "muscle atrophy"</h2>
<div class="relative">
<select class="appearance-none bg-gray-800 border border-gray-700 text-white px-3 py-1 pr-6 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-cosmic-500">
<option>Sort by Relevance</option>
<option>Sort by Date (Newest)</option>
<option>Sort by Date (Oldest)</option>
</select>
<i data-feather="chevron-down" class="absolute right-2 top-2 h-3 w-3 text-gray-400"></i>
</div>
</div>
<div class="space-y-4">
<!-- Search Result 1 -->
<a href="study-detail.html" class="block bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 card-hover border border-gray-700">
<div class="flex items-center text-sm text-gray-400 mb-2">
<span>Human Biology</span>
<span class="mx-2"></span>
<span>ISS</span>
<span class="mx-2"></span>
<span>2023</span>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Effects of Microgravity on Muscle Atrophy</h3>
<p class="text-gray-300 text-sm mb-4">Investigating molecular mechanisms behind muscle loss during spaceflight and potential countermeasures for long-duration missions...</p>
<div class="text-xs text-gray-400 flex items-center">
<span class="bg-cosmic-600 bg-opacity-20 text-cosmic-300 px-2 py-0.5 rounded mr-2">Highly Relevant</span>
<span>Smith, A. et al.</span>
</div>
</a>
<!-- Search Result 2 -->
<a href="study-detail.html" class="block bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 card-hover border border-gray-700">
<div class="flex items-center text-sm text-gray-400 mb-2">
<span>Human Biology</span>
<span class="mx-2"></span>
<span>Ground Study</span>
<span class="mx-2"></span>
<span>2022</span>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Exercise Countermeasures for Muscle Loss in Simulated Microgravity</h3>
<p class="text-gray-300 text-sm mb-4">Evaluation of different exercise regimens to prevent muscle atrophy during bed rest studies simulating spaceflight conditions...</p>
<div class="text-xs text-gray-400 flex items-center">
<span class="bg-cosmic-600 bg-opacity-20 text-cosmic-300 px-2 py-0.5 rounded mr-2">Highly Relevant</span>
<span>Johnson, B. et al.</span>
</div>
</a>
<!-- Search Result 3 -->
<a href="study-detail.html" class="block bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 card-hover border border-gray-700">
<div class="flex items-center text-sm text-gray-400 mb-2">
<span>Mouse Biology</span>
<span class="mx-2"></span>
<span>ISS</span>
<span class="mx-2"></span>
<span>2021</span>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Molecular Pathways of Muscle Atrophy in Microgravity</h3>
<p class="text-gray-300 text-sm mb-4">RNA sequencing and proteomic analysis of muscle tissue from mice exposed to spaceflight reveals key pathways involved in muscle degradation...</p>
<div class="text-xs text-gray-400">
<span>Lee, C. et al.</span>
</div>
</a>
</div>
<div class="mt-8 flex justify-center">
<nav class="flex items-center space-x-1">
<a href="#" class="px-3 py-1 rounded-full bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white">
<i data-feather="chevron-left" class="h-4 w-4"></i>
</a>
<a href="#" class="px-3 py-1 rounded-full bg-cosmic-600 text-white">1</a>
<a href="#" class="px-3 py-1 rounded-full bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white">2</a>
<a href="#" class="px-3 py-1 rounded-full bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white">3</a>
<a href="#" class="px-3 py-1 rounded-full bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white">
<i data-feather="chevron-right" class="h-4 w-4"></i>
</a>
</nav>
</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>