cosmic-bio-explorer / publications.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>Publications | 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="bg-cosmic-600 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-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
<h1 class="text-3xl font-bold text-white mb-4 md:mb-0">NASA Space Biology Publications</h1>
<div class="flex space-x-3">
<div class="relative">
<select class="appearance-none bg-gray-800 border border-gray-700 text-white px-4 py-2 pr-8 rounded-full focus:outline-none focus:ring-2 focus:ring-cosmic-500">
<option>Filter by Year</option>
<option>2020-2023</option>
<option>2015-2019</option>
<option>2010-2014</option>
</select>
<i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i>
</div>
<div class="relative">
<select class="appearance-none bg-gray-800 border border-gray-700 text-white px-4 py-2 pr-8 rounded-full focus:outline-none focus:ring-2 focus:ring-cosmic-500">
<option>Filter by Topic</option>
<option>Human Biology</option>
<option>Plant Biology</option>
<option>Microbial</option>
</select>
<i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-6">
<!-- Publication Item 1 -->
<div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 card-hover border border-gray-700">
<div class="flex flex-col md:flex-row">
<div class="md:w-2/3">
<h2 class="text-xl font-semibold text-white mb-2">Effects of Microgravity on Muscle Atrophy</h2>
<div class="flex flex-wrap items-center text-sm text-gray-400 mb-3">
<span class="mr-3">Smith, A. et al.</span>
<span class="mr-3">2023</span>
<span class="bg-cosmic-600 text-white px-2 py-0.5 rounded-full text-xs">Human Biology</span>
</div>
<p class="text-gray-300 mb-4">Investigating molecular mechanisms behind muscle loss during spaceflight and potential countermeasures for long-duration missions.</p>
<div class="flex space-x-3">
<a href="study-detail.html" class="text-cosmic-400 hover:text-cosmic-300 text-sm font-medium flex items-center">
Read Summary <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white text-sm font-medium flex items-center">
View Full Paper <i data-feather="external-link" class="ml-1 h-4 w-4"></i>
</a>
</div>
</div>
<div class="md:w-1/3 mt-4 md:mt-0 md:pl-6">
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-sm font-medium text-white mb-2">Key Findings</h3>
<ul class="text-xs text-gray-300 space-y-1">
<li class="flex items-start">
<i data-feather="check-circle" class="h-3 w-3 text-green-400 mr-1.5 mt-0.5 flex-shrink-0"></i>
<span>20% muscle mass reduction after 30 days</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="h-3 w-3 text-green-400 mr-1.5 mt-0.5 flex-shrink-0"></i>
<span>Exercise countermeasures show 40% improvement</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="h-3 w-3 text-green-400 mr-1.5 mt-0.5 flex-shrink-0"></i>
<span>Molecular pathways identified for targeted therapy</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Publication Item 2 -->
<div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 card-hover border border-gray-700">
<div class="flex flex-col md:flex-row">
<div class="md:w-2/3">
<h2 class="text-xl font-semibold text-white mb-2">Growth of Crops in Lunar Soil</h2>
<div class="flex flex-wrap items-center text-sm text-gray-400 mb-3">
<span class="mr-3">Johnson, M. et al.</span>
<span class="mr-3">2023</span>
<span class="bg-nebula-600 text-white px-2 py-0.5 rounded-full text-xs">Plant Biology</span>
</div>
<p class="text-gray-300 mb-4">Examining viability of lunar regolith for sustainable agriculture in space habitats with genetic modifications for improved growth.</p>
<div class="flex space-x-3">
<a href="study-detail.html" class="text-cosmic-400 hover:text-cosmic-300 text-sm font-medium flex items-center">
Read Summary <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white text-sm font-medium flex items-center">
View Full Paper <i data-feather="external-link" class="ml-1 h-4 w-4"></i>
</a>
</div>
</div>
<div class="md:w-1/3 mt-4 md:mt-0 md:pl-6">
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-sm font-medium text-white mb-2">Key Findings</h3>
<ul class="text-xs text-gray-300 space-y-1">
<li class="flex items-start">
<i data-feather="check-circle" class="h-3 w-3 text-green-400 mr-1.5 mt-0.5 flex-shrink-0"></i>
<span>Basil showed 60% growth rate vs Earth soil</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="h-3 w-3 text-green-400 mr-1.5 mt-0.5 flex-shrink-0"></i>
<span>Nutrient enrichment strategies developed</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="h-3 w-3 text-green-400 mr-1.5 mt-0.5 flex-shrink-0"></i>
<span>3x yield improvement with genetic modifications</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</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>