Spaces:

Boobs00
/

genoptima-labs

Running

genoptima-labs / index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Cancer Research Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { cancerBg: '#0f172a', // Deep blue background cancerCard: '#1e293b', // Card background cancerBorder: '#334155', // Border color cancerAccent: '#0ea5e9', // Blue accent cancerHighlight: '#38bdf8', // Highlight color cancerText: '#f1f5f9', // Light text } } } } </script> <style> /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #1e293b; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #0ea5e9; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #38bdf8; } body { background-color: #0f172a; color: #f1f5f9; font-family: 'Segoe UI', system-ui, sans-serif; } .cancer-gradient-border { position: relative; } .cancer-gradient-border::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.5rem; padding: 1px; background: linear-gradient(135deg, #6366f1, #38bdf8); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } </style> </head> <body>  <nav class="bg-cancerCard border-b border-cancerBorder"> <div class="max-w-7xl mx-auto px-4 py-3 flex flex-wrap items-center justify-between"> <div class="flex items-center space-x-3"> <div class="w-10 h-10 bg-cancerAccent rounded-full flex items-center justify-center"> <i class="fas fa-dna text-white text-xl"></i> </div> <h1 class="text-xl font-bold text-cancerHighlight">GenOptima Labs</h1> </div> <div class="hidden md:flex space-x-6"> <a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">Dashboard</a> <a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">Publications</a> <a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">AI Models</a> <a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">Research Teams</a> </div> <button class="md:hidden text-cancerText"> <i class="fas fa-bars text-xl"></i> </button> </div> </nav>  <div class="max-w-7xl mx-auto px-4 py-8">  <div class="mb-8 text-center"> <h2 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-cancerAccent to-cancerHighlight bg-clip-text text-transparent"> AI Cancer Research Dashboard </h2> <p class="text-cancerText mt-3 max-w-3xl mx-auto"> Integrative analytics platform combining genomic data, clinical trial results, and AI-generated insights to accelerate cancer research breakthroughs. </p> </div>  <div class="grid md:grid-cols-4 gap-4 mb-8">  <div class="md:col-span-2"> <div class="relative"> <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i> <input type="text" placeholder="Search research findings..." id="searchInput" class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-3 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText" > </div> </div>  <div> <select id="categoryFilter" class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText"> <option value="all">All Categories</option> <option value="breast">Breast Cancer</option> <option value="lung">Lung Cancer</option> <option value="prostate">Prostate Cancer</option> <option value="leukemia">Leukemia</option> <option value="melanoma">Melanoma</option> </select> </div>  <div> <select id="dateFilter" class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText"> <option value="all">All Dates</option> <option value="month">Past Month</option> <option value="quarter">Past Quarter</option> <option value="year">Past Year</option> </select> </div> </div>  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> <div class="bg-cancerCard border border-cancerBorder rounded-xl p-4 flex items-center cancer-gradient-border"> <div class="mr-4 text-cancerHighlight"> <i class="fas fa-hospital text-2xl"></i> </div> <div> <div class="text-gray-400 text-sm">Cases Analyzed</div> <div class="text-xl font-bold">5,281,407</div> </div> </div> <div class="bg-cancerCard border border-cancerBorder rounded-xl p-4 flex items-center cancer-gradient-border"> <div class="mr-4 text-cancerHighlight"> <i class="fas fa-microscope text-2xl"></i> </div> <div> <div class="text-gray-400 text-sm">Research Papers</div> <div class="text-xl font-bold">18,726</div> </div> </div> <div class="bg-cancerCard border border-cancerBorder rounded-xl p-4 flex items-center cancer-gradient-border"> <div class="mr-4 text-cancerHighlight"> <i class="fas fa-lightbulb text-2xl"></i> </div> <div> <div class="text-gray-400 text-sm">Novel Discoveries</div> <div class="text-xl font-bold">427</div> </div> </div> <div class="bg-cancerCard border border-cancerBorder rounded-xl p-4 flex items-center cancer-gradient-border"> <div class="mr-4 text-cancerHighlight"> <i class="fas fa-users text-2xl"></i> </div> <div> <div class="text-gray-400 text-sm">Research Teams</div> <div class="text-xl font-bold">96</div> </div> </div> </div>  <div class="mb-8"> <div class="flex justify-between items-center mb-4"> <h3 class="text-xl font-semibold text-cancerHighlight">Recent Findings</h3> <div class="text-cancerText text-sm">Sorted by: Relevance</div> </div> <div id="researchGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">  <div class="bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden"> <div class="p-6"> <div class="flex justify-between items-start mb-3"> <div class="bg-cancerCard border border-cancerBorder px-3 py-1 rounded-full text-xs text-cancerAccent"> Breast Cancer </div> <div class="text-gray-500 text-sm"> <i class="fas fa-calendar-alt mr-1"></i> 3 days ago </div> </div> <h4 class="font-bold text-lg mb-2 hover:text-cancerHighlight cursor-pointer"> Targeted Therapy for HER2-Positive Tumors Shows Promise in Advanced Cases </h4> <p class="text-gray-300 mb-4 text-sm"> New AI-driven analysis shows 67% progression-free survival rate at 24 months for advanced HER2-positive breast cancer patients treated with novel combination therapy. </p> <div class="flex items-center"> <div class="flex -space-x-2 mr-3"> <img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/41.jpg" alt=""> <img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> </div> <div class="text-xs text-gray-400"> AI Synergy Team </div> </div> </div> <div class="bg-cancerCard border-t border-cancerBorder px-6 py-3 flex justify-between items-center"> <div class="flex items-center"> <i class="fas fa-file-pdf text-red-400 mr-2"></i> <span class="text-sm text-gray-400 hover:text-cancerHighlight cursor-pointer">Full Report</span> </div> <div> <button class="bg-cancerHighlight hover:bg-cancerAccent transition text-cancerCard font-semibold py-2 px-4 rounded-lg text-sm"> Explore Findings </button> </div> </div> </div>  <div class="bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden"> <div class="p-6"> <div class="flex justify-between items-start mb-3"> <div class="bg-cancerCard border border-cancerBorder px-3 py-1 rounded-full text-xs text-cancerAccent"> Lung Cancer </div> <div class="text-gray-500 text-sm"> <i class="fas fa-calendar-alt mr-1"></i> 1 week ago </div> </div> <h4 class="font-bold text-lg mb-2 hover:text-cancerHighlight cursor-pointer"> Immunotherapy Response Prediction Model Achieves 94% Accuracy </h4> <p class="text-gray-300 mb-4 text-sm"> Machine learning algorithms trained on genomic markers now predict immunotherapy outcomes in NSCLC patients with unprecedented accuracy, potentially reducing unnecessary treatment. </p> <div class="flex items-center"> <div class="flex -space-x-2 mr-3"> <img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/men/22.jpg" alt=""> <img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> </div> <div class="text-xs text-gray-400"> Oncogenomics Group </div> </div> </div> <div class="bg-cancerCard border-t border-cancerBorder px-6 py-3 flex justify-between items-center"> <div class="flex items-center"> <i class="fas fa-chart-line text-green-400 mr-2"></i> <span class="text-sm text-gray-400 hover:text-cancerHighlight cursor-pointer">Analysis</span> </div> <div> <button class="bg-cancerHighlight hover:bg-cancerAccent transition text-cancerCard font-semibold py-2 px-4 rounded-lg text-sm"> Explore Findings </button> </div> </div> </div>  <div class="bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden"> <div class="p-6"> <div class="flex justify-between items-start mb-3"> <div class="bg-cancerCard border border-cancerBorder px-3 py-1 rounded-full text-xs text-cancerAccent"> Leukemia </div> <div class="text-gray-500 text-sm"> <i class="fas fa-calendar-alt mr-1"></i> 2 weeks ago </div> </div> <h4 class="font-bold text-lg mb-2 hover:text-cancerHighlight cursor-pointer"> Novel Biomarkers Predict Relapse Risk in Pediatric ALL Patients </h4> <p class="text-gray-300 mb-4 text-sm"> AI analysis of methylome data identifies three biomarkers that predict relapse risk with 92% specificity, enabling personalized treatment pathways for childhood leukemia. </p> <div class="flex items-center"> <div class="flex -space-x-2 mr-3"> <img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/33.jpg" alt=""> <img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/64.jpg" alt=""> </div> <div class="text-xs text-gray-400"> Pediatric Oncology Research </div> </div> </div> <div class="bg-cancerCard border-t border-cancerBorder px-6 py-3 flex justify-between items-center"> <div class="flex items-center"> <i class="fas fa-database text-blue-400 mr-2"></i> <span class="text-sm text-gray-400 hover:text-cancerHighlight cursor-pointer">Dataset</span> </div> <div> <button class="bg-cancerHighlight hover:bg-cancerAccent transition text-cancerCard font-semibold py-2 px-4 rounded-lg text-sm"> Explore Findings </button> </div> </div> </div> </div> </div>  <div class="bg-cancerCard border border-cancerBorder rounded-xl p-6 mb-8"> <h3 class="text-xl font-semibold text-cancerHighlight mb-6">Research Progress Across Cancer Types</h3> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">  <div> <div class="flex items-center justify-between mb-3"> <span class="text-cancerText">Breast Cancer</span> <span class="text-cancerHighlight font-semibold">87%</span> </div> <div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden mb-5"> <div class="h-full bg-gradient-to-r from-purple-500 to-pink-500" style="width: 87%"></div> </div> <div class="flex items-center justify-between mb-3"> <span class="text-cancerText">Lung Cancer</span> <span class="text-cancerHighlight font-semibold">64%</span> </div> <div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden mb-5"> <div class="h-full bg-gradient-to-r from-blue-500 to-teal-500" style="width: 64%"></div> </div> <div class="flex items-center justify-between mb-3"> <span class="text-cancerText">Prostate Cancer</span> <span class="text-cancerHighlight font-semibold">72%</span> </div> <div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden mb-5"> <div class="h-full bg-gradient-to-r from-green-500 to-emerald-500" style="width: 72%"></div> </div> <div class="flex items-center justify-between mb-3"> <span class="text-cancerText">Lymphoma</span> <span class="text-cancerHighlight font-semibold">59%</span> </div> <div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden mb-5"> <div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500" style="width: 59%"></div> </div> </div>  <div class="bg-cancerCard border border-cancerBorder rounded-lg overflow-hidden cancer-gradient-border"> <div class="p-5"> <div class="flex items-center mb-4"> <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center mr-3"> <i class="fas fa-brain text-white"></i> </div> <div> <h4 class="font-bold text-cancerHighlight">AI Research Insights</h4> <p class="text-xs text-gray-500">Updated 24 minutes ago</p> </div> </div> <div class="text-gray-300 text-sm"> <p class="mb-3"> <span class="text-cancerHighlight font-medium">Key trend:</span> Cross-cancer immune response patterns observed in 13% of metastatic patients show potential for pan-cancer immunotherapy approaches. </p> <p> <span class="text-cancerHighlight font-medium">Emerging finding:</span> Our AI models identified ESR1 gene mutations in unexpected tumor types, suggesting new applications for endocrine therapies. </p> </div> <button class="mt-4 bg-cancerCard border border-cancerAccent hover:bg-cancerAccent transition text-cancerText font-semibold py-2 px-4 rounded-lg text-sm"> Explore AI Insights </button> </div> </div> </div> </div>  <div class="flex justify-center items-center space-x-4 mb-12"> <button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight"> <i class="fas fa-chevron-left"></i> </button> <button class="w-10 h-10 bg-cancerHighlight border border-cancerHighlight rounded-full flex items-center justify-center text-white font-semibold">1</button> <button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">2</button> <button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">3</button> <button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">...</button> <button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">8</button> <button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight"> <i class="fas fa-chevron-right"></i> </button> </div>  <div class="hidden" id="searchSummary"> <div class="bg-cancerCard border border-cancerBorder rounded-xl p-6 text-center"> <h3 class="text-xl font-semibold text-cancerHighlight mb-2">Research Insights Filtered</h3> <p class="text-gray-300"> We found <span class="text-cancerHighlight font-semibold">27</span> publications matching your search criteria </p> </div> </div> </div>  <footer class="bg-cancerCard border-t border-cancerBorder py-8"> <div class="max-w-7xl mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div> <h4 class="text-cancerHighlight font-bold mb-4">GenOptima Labs</h4> <p class="text-gray-300 text-sm"> Advancing cancer research through innovative AI solutions and collaborative science. </p> </div> <div> <h4 class="text-cancerText font-bold mb-4">Research Domains</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm">Genomic Oncology</a></li> <li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm">Precision Immunotherapy</a></li> <li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm">Cancer Diagnostics</a></li> <li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm">Drug Development</a></li> </ul> </div> <div> <h4 class="text-cancerText font-bold mb-4">Collaborate</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm">Academic Partnerships</a></li> <li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm">Data Access Requests</a></li> <li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm">Partner with Us</a></li> </ul> </div> <div> <h4 class="text-cancerText font-bold mb-4">Stay Connected</h4> <div class="flex space-x-4 mb-4"> <a href="#" class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-lg flex items-center justify-center text-cancerHighlight hover:border-cancerHighlight"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-lg flex items-center justify-center text-cancerHighlight hover:border-cancerHighlight"> <i class="fab fa-linkedin"></i> </a> <a href="#" class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-lg flex items-center justify-center text-cancerHighlight hover:border-cancerHighlight"> <i class="fab fa-github"></i> </a> </div> <a href="mailto:research@genoptima.org" class="text-gray-300 hover:text-cancerHighlight text-sm">research@genoptima.org</a> </div> </div> <div class="border-t border-cancerBorder pt-4 text-center text-gray-400 text-sm"> © 2023 GenOptima Labs | AI-Driven Cancer Research Platform </div> </div> </footer> <script> // Basic interaction for demonstration purposes document.addEventListener('DOMContentLoaded', function() { // Toggle search summary const searchInput = document.getElementById('searchInput'); const searchSummary = document.getElementById('searchSummary'); searchInput.addEventListener('input', function() { if (this.value.trim() !== '') { searchSummary.classList.remove('hidden'); } else { searchSummary.classList.add('hidden'); } }); // Simulated API connection indicator const apiStatus = document.createElement('div'); apiStatus.className = 'fixed bottom-4 right-4 bg-cancerCard border border-cancerBorder rounded-lg px-4 py-2 flex items-center shadow-lg z-50'; apiStatus.innerHTML = ` <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> <span class="text-sm">Connected to AI Research API</span> `; document.body.appendChild(apiStatus); // Button hover effects document.querySelectorAll('button').forEach(button => { button.addEventListener('mouseenter', function() { this.classList.add('transform', 'scale-105'); }); button.addEventListener('mouseleave', function() { this.classList.remove('transform', 'scale-105'); }); }); // Card hover effects const cards = document.querySelectorAll('#researchGrid > div'); cards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-5px)'; this.style.boxShadow = '0 25px 50px -12px rgba(14, 165, 233, 0.25)'; }); card.addEventListener('mouseleave', function() { this.style.transform = ''; this.style.boxShadow = ''; }); }); }); </script> <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/ai-cancer-research-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html> - Initial Deployment

6c5f674 verified 6 months ago

raw

history blame contribute delete

77.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Cancer Research Dashboard</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	cancerBg: '#0f172a', // Deep blue background
	cancerCard: '#1e293b', // Card background
	cancerBorder: '#334155', // Border color
	cancerAccent: '#0ea5e9', // Blue accent
	cancerHighlight: '#38bdf8', // Highlight color
	cancerText: '#f1f5f9', // Light text
	cancerSuccess: '#10b981', // Success color
	cancerWarning: '#f59e0b' // Warning color
	}
	}
	}
	}
	</script>
	<style>
	/* Scrollbar styling */
	::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	}

	::-webkit-scrollbar-track {
	background: #1e293b;
	border-radius: 10px;
	}

	::-webkit-scrollbar-thumb {
	background: #0ea5e9;
	border-radius: 10px;
	}

	::-webkit-scrollbar-thumb:hover {
	background: #38bdf8;
	}

	body {
	background-color: #0f172a;
	color: #f1f5f9;
	font-family: 'Segoe UI', system-ui, sans-serif;
	}

	.cancer-gradient-border {
	position: relative;
	}

	.cancer-gradient-border::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 0.5rem;
	padding: 1px;
	background: linear-gradient(135deg, #6366f1, #38bdf8);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}

	.featured-slider {
	transition: transform 0.5s ease-in-out;
	}

	.chart-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	}

	@media (max-width: 1024px) {
	.chart-grid {
	grid-template-columns: 1fr;
	}
	}

	.blinking {
	animation: blink 1.5s infinite;
	}

	@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
	}

	.notification-dot {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-color: #ef4444;
	border-radius: 50%;
	}

	.type-badge {
	font-size: 0.65rem;
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
	text-transform: uppercase;
	}

	.breast { background: rgba(219, 39, 119, 0.2); color: #db2777; }
	.lung { background: rgba(6, 182, 212, 0.2); color: #06b6d4; }
	.prostate { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
	.leukemia { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
	.melanoma { background: rgba(220, 38, 38, 0.2); color: #dc2626; }
	.colon { background: rgba(101, 163, 13, 0.2); color: #65a30d; }

	.card-hover {
	transition: all 0.3s ease;
	}

	.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 25px 50px -12px rgba(14, 165, 233, 0.25);
	}

	.glow {
	box-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
	}

	.notification {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	background: #047857;
	color: white;
	padding: 15px 25px;
	border-radius: 8px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.5s ease;
	}

	.notification.show {
	opacity: 1;
	transform: translateX(0);
	}
	</style>
	</head>
	<body class="bg-cancerBg min-h-screen">
	<!-- Notification System -->
	<div id="notification" class="notification hidden">
	<i class="fas fa-check-circle"></i>
	<span class="notification-message">Action completed successfully</span>
	</div>

	<!-- Navigation -->
	<nav class="bg-cancerCard border-b border-cancerBorder sticky top-0 z-30">
	<div class="max-w-7xl mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
	<div class="flex items-center space-x-3">
	<div class="w-10 h-10 bg-gradient-to-r from-cancerAccent to-cancerHighlight rounded-full flex items-center justify-center">
	<i class="fas fa-dna text-white text-xl"></i>
	</div>
	<h1 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cancerAccent to-cancerHighlight">GenOptima Labs</h1>
	</div>

	<div class="hidden md:flex space-x-6 items-center">
	<a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">Dashboard</a>
	<a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">Publications</a>
	<a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">AI Models</a>
	<a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">Research Teams</a>
	<a href="#" class="text-cancerText hover:text-cancerHighlight font-medium">Analytics</a>

	<!-- Search button for mobile -->
	<div class="relative hidden md:block">
	<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
	<input
	type="text"
	placeholder="Search research..."
	class="bg-cancerCard border border-cancerBorder rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText w-64"
	>
	</div>

	<!-- User Profile -->
	<div class="relative cursor-pointer group ml-4">
	<div class="w-8 h-8 rounded-full bg-gradient-to-r from-cancerAccent to-cancerHighlight flex items-center justify-center">
	<span class="text-white text-sm">JD</span>
	</div>
	<div class="absolute -bottom-1 right-0 w-2.5 h-2.5 rounded-full bg-green-500 border-2 border-cancerCard"></div>

	<!-- User dropdown menu -->
	<div class="absolute right-0 top-10 bg-cancerCard border border-cancerBorder rounded-lg shadow-lg w-48 py-2 hidden group-hover:block">
	<div class="px-4 py-2 border-b border-cancerBorder">
	<p class="text-cancerText font-semibold">Dr. Jane Doe</p>
	<p class="text-gray-400 text-xs">Lead Researcher</p>
	</div>
	<a href="#" class="block px-4 py-2 hover:bg-cancerBorder text-cancerText"><i class="fas fa-user mr-2"></i> Profile</a>
	<a href="#" class="block px-4 py-2 hover:bg-cancerBorder text-cancerText"><i class="fas fa-cog mr-2"></i> Settings</a>
	<a href="#" class="block px-4 py-2 hover:bg-cancerBorder text-cancerText"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a>
	</div>
	</div>

	<div class="relative cursor-pointer">
	<i class="fas fa-bell text-gray-300"></i>
	<div class="notification-dot"></div>
	</div>
	</div>

	<div class="flex md:hidden items-center space-x-4">
	<div class="relative cursor-pointer">
	<i class="fas fa-bell text-gray-300"></i>
	<div class="notification-dot"></div>
	</div>
	<button class="text-cancerText" id="mobileMenuBtn">
	<i class="fas fa-bars text-xl"></i>
	</button>
	</div>
	</div>

	<!-- Mobile menu -->
	<div class="md:hidden hidden bg-cancerCard px-4 py-2" id="mobileMenu">
	<div class="relative mb-3">
	<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
	<input
	type="text"
	placeholder="Search research..."
	class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText"
	>
	</div>
	<a href="#" class="block py-2 text-cancerText hover:text-cancerHighlight">Dashboard</a>
	<a href="#" class="block py-2 text-cancerText hover:text-cancerHighlight">Publications</a>
	<a href="#" class="block py-2 text-cancerText hover:text-cancerHighlight">AI Models</a>
	<a href="#" class="block py-2 text-cancerText hover:text-cancerHighlight">Research Teams</a>
	<a href="#" class="block py-2 text-cancerText hover:text-cancerHighlight">Analytics</a>
	<div class="flex justify-between pt-4">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-gradient-to-r from-cancerAccent to-cancerHighlight flex items-center justify-center mr-3">
	<span class="text-white text-sm">JD</span>
	</div>
	<span class="text-cancerText">Dr. Jane Doe</span>
	</div>
	<a href="#" class="text-cancerAccent hover:text-cancerHighlight">
	<i class="fas fa-sign-out-alt"></i>
	</a>
	</div>
	</div>
	</nav>

	<!-- Dashboard Main Content -->
	<div class="max-w-7xl mx-auto px-4 py-8">
	<!-- Header -->
	<div class="mb-8">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
	<div>
	<h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-cancerAccent to-cancerHighlight bg-clip-text text-transparent">
	AI Cancer Research Dashboard
	</h1>
	<p class="text-cancerText mt-3 max-w-3xl">
	Integrative analytics platform combining genomic data, clinical trial results, and AI-generated insights to accelerate cancer research breakthroughs.
	</p>
	</div>

	<div class="flex mt-4 md:mt-0 space-x-3">
	<button class="bg-cancerAccent hover:bg-cancerHighlight transition text-cancerCard font-medium py-2 px-4 rounded-lg text-sm flex items-center">
	<i class="fas fa-plus mr-2"></i> New Research
	</button>
	<button class="bg-cancerCard hover:bg-cancerBorder border border-cancerHighlight text-cancerHighlight font-medium py-2 px-4 rounded-lg text-sm flex items-center">
	<i class="fas fa-share-alt mr-2"></i> Share Report
	</button>
	</div>
	</div>

	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-3 mt-6 grid grid-cols-2 md:grid-cols-5 gap-4 cancer-gradient-border">
	<div class="text-center">
	<div class="text-2xl font-bold text-cancerHighlight">142</div>
	<div class="text-xs text-gray-400 mt-1">ACTIVE PROJECTS</div>
	</div>
	<div class="text-center">
	<div class="text-2xl font-bold text-cancerSuccess">32</div>
	<div class="text-xs text-gray-400 mt-1">ONGOING TRIALS</div>
	</div>
	<div class="text-center">
	<div class="text-2xl font-bold text-cancerWarning">18</div>
	<div class="text-xs text-gray-400 mt-1">PENDING REVIEWS</div>
	</div>
	<div class="text-center hidden md:block">
	<div class="text-2xl font-bold text-cancerHighlight">96%</div>
	<div class="text-xs text-gray-400 mt-1">MODEL ACCURACY</div>
	</div>
	<div class="text-center hidden md:block">
	<div class="text-2xl font-bold text-cancerSuccess">24</div>
	<div class="text-xs text-gray-400 mt-1">PATENTS FILED</div>
	</div>
	</div>
	</div>

	<!-- Action Bar -->
	<div class="grid md:grid-cols-6 gap-4 mb-8">
	<!-- Search -->
	<div class="md:col-span-3">
	<div class="relative">
	<i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
	<input
	type="text"
	placeholder="Search research findings, biomarkers, treatments..."
	id="searchInput"
	class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-3 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText"
	>
	</div>
	</div>

	<!-- Category Filter -->
	<div class="md:col-span-1">
	<select id="categoryFilter" class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText">
	<option value="all">All Categories</option>
	<option value="breast">Breast Cancer</option>
	<option value="lung">Lung Cancer</option>
	<option value="prostate">Prostate Cancer</option>
	<option value="leukemia">Leukemia</option>
	<option value="melanoma">Melanoma</option>
	<option value="colon">Colorectal Cancer</option>
	</select>
	</div>

	<!-- Date Filter -->
	<div class="md:col-span-1">
	<select id="dateFilter" class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText">
	<option value="all">All Dates</option>
	<option value="week">Past Week</option>
	<option value="month">Past Month</option>
	<option value="quarter">Past Quarter</option>
	<option value="year">Past Year</option>
	</select>
	</div>

	<!-- Sort Filter -->
	<div class="md:col-span-1">
	<select class="w-full bg-cancerCard border border-cancerBorder rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-cancerAccent text-cancerText">
	<option value="relevance">Relevance</option>
	<option value="newest">Newest</option>
	<option value="oldest">Oldest</option>
	<option value="impact">Impact</option>
	</select>
	</div>
	</div>

	<!-- Featured Research -->
	<div class="mb-8">
	<h3 class="text-xl font-semibold text-cancerHighlight mb-4 flex items-center">
	<i class="fas fa-star mr-2 text-amber-400"></i> Featured AI Discoveries
	<span class="ml-2 text-sm bg-cancerHighlight/10 text-cancerHighlight px-2 py-1 rounded-full">Latest</span>
	</h3>

	<div class="overflow-hidden rounded-xl border border-cancerBorder">
	<div class="bg-gradient-to-r from-cancerAccent/10 to-cancerHighlight/10 py-4 px-6 flex items-center justify-between">
	<div class="font-medium text-lg">High-Impact Breakthroughs</div>
	<div class="flex space-x-2">
	<button id="featuredPrev" class="w-8 h-8 rounded-full bg-cancerCard border border-cancerBorder hover:bg-cancerHighlight hover:border-cancerHighlight flex items-center justify-center">
	<i class="fas fa-chevron-left text-xs"></i>
	</button>
	<button id="featuredNext" class="w-8 h-8 rounded-full bg-cancerCard border border-cancerBorder hover:bg-cancerHighlight hover:border-cancerHighlight flex items-center justify-center">
	<i class="fas fa-chevron-right text-xs"></i>
	</button>
	</div>
	</div>

	<div class="relative bg-cancerCard overflow-hidden">
	<div id="featuredSlider" class="flex transition-transform duration-500 ease-in-out">
	<!-- Slide 1 -->
	<div class="featured-slider w-full min-w-full p-6 flex flex-col md:flex-row">
	<div class="w-full md:w-2/5 mb-4 md:mb-0">
	<div class="bg-gray-800 rounded-lg p-3">
	<canvas id="featuredChart1"></canvas>
	</div>
	</div>
	<div class="w-full md:w-3/5">
	<div class="flex items-center mb-3">
	<span class="type-badge breast">Breast Cancer</span>
	<span class="text-xs text-gray-500 ml-auto"><i class="fas fa-calendar-alt mr-1"></i> Today</span>
	</div>
	<h4 class="font-bold text-xl mb-3">Novel Targeted Therapy Shows 89% Remission Rate</h4>
	<p class="text-gray-300 mb-4">Our AI models identified a combination therapy for BRCA1 mutation carriers that significantly outperformed current treatments in phase 1 trials. This discovery has been fast-tracked by the FDA.</p>
	<div class="flex flex-wrap gap-3">
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">Combination Therapy</span>
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">Phase 2</span>
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">CRISPR-VALIDATED</span>
	</div>
	</div>
	</div>

	<!-- Slide 2 -->
	<div class="featured-slider w-full min-w-full p-6 flex flex-col md:flex-row">
	<div class="w-full md:w-2/5 mb-4 md:mb-0">
	<div class="bg-gray-800 rounded-lg p-3">
	<canvas id="featuredChart2"></canvas>
	</div>
	</div>
	<div class="w-full md:w-3/5">
	<div class="flex items-center mb-3">
	<span class="type-badge lung">Lung Cancer</span>
	<span class="text-xs text-gray-500 ml-auto"><i class="fas fa-calendar-alt mr-1"></i> Yesterday</span>
	</div>
	<h4 class="font-bold text-xl mb-3">AI Predicts Immunotherapy Response with 95% Accuracy</h4>
	<p class="text-gray-300 mb-4">Deep learning analysis of tumor microenvironment signatures now allows unprecedented prediction of immunotherapy outcomes in NSCLC patients, potentially eliminating unnecessary treatments.</p>
	<div class="flex flex-wrap gap-3">
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">Immunotherapy</span>
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">Biomarkers</span>
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">Deep Learning</span>
	</div>
	</div>
	</div>

	<!-- Slide 3 -->
	<div class="featured-slider w-full min-w-full p-6 flex flex-col md:flex-row">
	<div class="w-full md:w-2/5 mb-4 md:mb-0">
	<div class="bg-gray-800 rounded-lg p-3">
	<canvas id="featuredChart3"></canvas>
	</div>
	</div>
	<div class="w-full md:w-3/5">
	<div class="flex items-center mb-3">
	<span class="type-badge leukemia">Leukemia</span>
	<span class="text-xs text-gray-500 ml-auto"><i class="fas fa-calendar-alt mr-1"></i> 2 days ago</span>
	</div>
	<h4 class="font-bold text-xl mb-3">Breakthrough in CAR-T Therapy Resistance Prediction</h4>
	<p class="text-gray-300 mb-4">Machine learning algorithms identified cellular signatures that predict CAR-T therapy resistance in leukemia patients, enabling personalized pretreatment conditioning that doubled remission duration.</p>
	<div class="flex flex-wrap gap-3">
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">CAR-T Therapy</span>
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">Resistance Prediction</span>
	<span class="bg-cancerCard border border-cancerBorder rounded-full px-3 py-1 text-xs">Personalized</span>
	</div>
	</div>
	</div>
	</div>

	<div class="flex justify-center py-4 space-x-2">
	<button data-index="0" class="featured-indicator w-3 h-3 rounded-full bg-gray-600"></button>
	<button data-index="1" class="featured-indicator w-3 h-3 rounded-full bg-gray-600"></button>
	<button data-index="2" class="featured-indicator w-3 h-3 rounded-full bg-gray-600"></button>
	</div>
	</div>
	</div>
	</div>

	<!-- Stats Overview -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-5 cancer-gradient-border">
	<div class="flex justify-between items-start">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-blue-500 to-blue-700 flex items-center justify-center mr-4">
	<i class="fas fa-hospital text-white"></i>
	</div>
	<div>
	<div class="text-gray-400 text-sm">Cases Analyzed</div>
	<div class="text-xl font-bold">5,281,407</div>
	</div>
	</div>
	<div class="text-cancerSuccess flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 12%
	</div>
	</div>
	<div class="mt-4">
	<div class="w-full bg-gray-800 rounded-full h-1.5">
	<div class="bg-gradient-to-r from-blue-400 to-blue-600 h-1.5 rounded-full" style="width: 78%"></div>
	</div>
	</div>
	</div>

	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-5 cancer-gradient-border">
	<div class="flex justify-between items-start">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-purple-500 to-purple-700 flex items-center justify-center mr-4">
	<i class="fas fa-microscope text-white"></i>
	</div>
	<div>
	<div class="text-gray-400 text-sm">Research Papers</div>
	<div class="text-xl font-bold">18,726</div>
	</div>
	</div>
	<div class="text-cancerSuccess flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 8%
	</div>
	</div>
	<div class="mt-4">
	<div class="w-full bg-gray-800 rounded-full h-1.5">
	<div class="bg-gradient-to-r from-purple-400 to-purple-600 h-1.5 rounded-full" style="width: 65%"></div>
	</div>
	</div>
	</div>

	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-5 cancer-gradient-border">
	<div class="flex justify-between items-start">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-amber-500 to-amber-700 flex items-center justify-center mr-4">
	<i class="fas fa-lightbulb text-white"></i>
	</div>
	<div>
	<div class="text-gray-400 text-sm">Novel Discoveries</div>
	<div class="text-xl font-bold">427</div>
	</div>
	</div>
	<div class="text-cancerSuccess flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 22%
	</div>
	</div>
	<div class="mt-4">
	<div class="w-full bg-gray-800 rounded-full h-1.5">
	<div class="bg-gradient-to-r from-amber-400 to-amber-600 h-1.5 rounded-full" style="width: 38%"></div>
	</div>
	</div>
	</div>

	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-5 cancer-gradient-border">
	<div class="flex justify-between items-start">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-emerald-500 to-emerald-700 flex items-center justify-center mr-4">
	<i class="fas fa-users text-white"></i>
	</div>
	<div>
	<div class="text-gray-400 text-sm">Research Teams</div>
	<div class="text-xl font-bold">96</div>
	</div>
	</div>
	<div class="text-cancerSuccess flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 5%
	</div>
	</div>
	<div class="mt-4">
	<div class="w-full bg-gray-800 rounded-full h-1.5">
	<div class="bg-gradient-to-r from-emerald-400 to-emerald-600 h-1.5 rounded-full" style="width: 92%"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- Charts Section -->
	<div class="chart-grid mb-8">
	<!-- Chart 1: Research Progress -->
	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-6 cancer-gradient-border">
	<h3 class="text-lg font-semibold text-cancerHighlight mb-6 flex items-center">
	<i class="fas fa-chart-line mr-2"></i> Research Progress by Cancer Type
	</h3>
	<canvas id="progressChart"></canvas>
	</div>

	<!-- Chart 2: Funding Allocation -->
	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-6 cancer-gradient-border">
	<h3 class="text-lg font-semibold text-cancerHighlight mb-6 flex items-center">
	<i class="fas fa-money-bill-wave mr-2"></i> Research Funding Allocation
	</h3>
	<canvas id="fundingChart"></canvas>
	</div>
	</div>

	<!-- Research Cards Grid -->
	<div class="mb-8">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
	<div>
	<h3 class="text-xl font-semibold text-cancerHighlight">Latest Research Findings</h3>
	<p class="text-gray-400 text-sm mt-1">Sorted by: Relevance & Impact</p>
	</div>
	<div class="flex items-center mt-3 md:mt-0">
	<span class="text-cancerText text-sm mr-3">View mode:</span>
	<button id="listView" class="w-8 h-8 rounded bg-cancerCard border border-cancerBorder flex items-center justify-center mr-2">
	<i class="fas fa-list"></i>
	</button>
	<button id="gridView" class="w-8 h-8 rounded bg-cancerHighlight border border-cancerHighlight flex items-center justify-center">
	<i class="fas fa-grip"></i>
	</button>
	</div>
	</div>

	<div id="researchGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Card 1 -->
	<div class="card-hover bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden">
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<div class="flex">
	<span class="type-badge breast">Breast Cancer</span>
	</div>
	<div class="text-gray-500 text-sm">
	<i class="fas fa-calendar-alt mr-1"></i> 3 days ago
	</div>
	</div>
	<h4 class="font-bold text-lg mb-2 hover:text-cancerHighlight cursor-pointer">
	Targeted Therapy for HER2-Positive Tumors Shows Promise in Advanced Cases
	</h4>
	<p class="text-gray-300 mb-4 text-sm">
	New AI-driven analysis shows 67% progression-free survival rate at 24 months for advanced HER2-positive breast cancer patients treated with novel combination therapy.
	</p>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="flex -space-x-2 mr-3">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/41.jpg" alt="">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
	</div>
	<div class="text-xs text-gray-400">
	AI Synergy Team
	</div>
	</div>
	<span class="flex items-center text-xs bg-green-900/30 text-green-400 px-2 py-1 rounded">
	<i class="fas fa-bolt mr-1"></i> High Impact
	</span>
	</div>
	</div>
	<div class="bg-cancerCard border-t border-cancerBorder px-6 py-3 flex justify-between items-center">
	<div class="flex items-center text-sm">
	<i class="fas fa-file-pdf text-red-400 mr-2"></i>
	<span class="text-gray-400 hover:text-cancerHighlight cursor-pointer">Download Report</span>
	</div>
	<div class="flex space-x-2">
	<button class="bg-cancerCard hover:bg-cancerHighlight/10 border border-cancerHighlight text-cancerHighlight font-medium py-1.5 px-3 rounded-lg text-sm">
	<i class="far fa-bookmark"></i>
	</button>
	<button class="bg-cancerHighlight hover:bg-cancerAccent transition text-cancerCard font-medium py-1.5 px-3 rounded-lg text-sm">
	Explore
	</button>
	</div>
	</div>
	</div>

	<!-- Card 2 -->
	<div class="card-hover bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden">
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<div class="flex">
	<span class="type-badge lung">Lung Cancer</span>
	<span class="type-badge ml-2 bg-cancerAccent/10 text-cancerAccent">AI Prediction</span>
	</div>
	<div class="text-gray-500 text-sm">
	<i class="fas fa-calendar-alt mr-1"></i> 1 week ago
	</div>
	</div>
	<h4 class="font-bold text-lg mb-2 hover:text-cancerHighlight cursor-pointer">
	Immunotherapy Response Prediction Model Achieves 94% Accuracy
	</h4>
	<p class="text-gray-300 mb-4 text-sm">
	Machine learning algorithms trained on genomic markers now predict immunotherapy outcomes in NSCLC patients with unprecedented accuracy, potentially reducing unnecessary treatment.
	</p>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="flex -space-x-2 mr-3">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
	</div>
	<div class="text-xs text-gray-400">
	Oncogenomics Group
	</div>
	</div>
	<span class="flex items-center text-xs bg-blue-900/30 text-blue-400 px-2 py-1 rounded">
	<i class="fas fa-brain mr-1"></i> Algorithm
	</span>
	</div>
	</div>
	<div class="bg-cancerCard border-t border-cancerBorder px-6 py-3 flex justify-between items-center">
	<div class="flex items-center text-sm">
	<i class="fas fa-chart-line text-green-400 mr-2"></i>
	<span class="text-gray-400 hover:text-cancerHighlight cursor-pointer">Analysis</span>
	</div>
	<div class="flex space-x-2">
	<button class="bg-cancerCard hover:bg-cancerHighlight/10 border border-cancerHighlight text-cancerHighlight font-medium py-1.5 px-3 rounded-lg text-sm">
	<i class="far fa-bookmark"></i>
	</button>
	<button class="bg-cancerHighlight hover:bg-cancerAccent transition text-cancerCard font-medium py-1.5 px-3 rounded-lg text-sm">
	Explore
	</button>
	</div>
	</div>
	</div>

	<!-- Card 3 -->
	<div class="card-hover bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden">
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<div class="flex">
	<span class="type-badge leukemia">Leukemia</span>
	<span class="type-badge ml-2 bg-rose-900/20 text-rose-500">Pediatrics</span>
	</div>
	<div class="text-gray-500 text-sm">
	<i class="fas fa-calendar-alt mr-1"></i> 2 weeks ago
	</div>
	</div>
	<h4 class="font-bold text-lg mb-2 hover:text-cancerHighlight cursor-pointer">
	Novel Biomarkers Predict Relapse Risk in Pediatric ALL Patients
	</h4>
	<p class="text-gray-300 mb-4 text-sm">
	AI analysis of methylome data identifies three biomarkers that predict relapse risk with 92% specificity, enabling personalized treatment pathways for childhood leukemia.
	</p>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="flex -space-x-2 mr-3">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/33.jpg" alt="">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/women/64.jpg" alt="">
	</div>
	<div class="text-xs text-gray-400">
	Pediatric Oncology
	</div>
	</div>
	<span class="flex items-center text-xs bg-purple-900/30 text-purple-400 px-2 py-1 rounded">
	<i class="fas fa-microscope mr-1"></i> Biomarker
	</span>
	</div>
	</div>
	<div class="bg-cancerCard border-t border-cancerBorder px-6 py-3 flex justify-between items-center">
	<div class="flex items-center text-sm">
	<i class="fas fa-database text-blue-400 mr-2"></i>
	<span class="text-gray-400 hover:text-cancerHighlight cursor-pointer">Dataset</span>
	</div>
	<div class="flex space-x-2">
	<button class="bg-cancerCard hover:bg-cancerHighlight/10 border border-cancerHighlight text-cancerHighlight font-medium py-1.5 px-3 rounded-lg text-sm">
	<i class="far fa-bookmark"></i>
	</button>
	<button class="bg-cancerHighlight hover:bg-cancerAccent transition text-cancerCard font-medium py-1.5 px-3 rounded-lg text-sm">
	Explore
	</button>
	</div>
	</div>
	</div>

	<!-- Card 4 -->
	<div class="card-hover bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden">
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<div class="flex">
	<span class="type-badge prostate">Prostate</span>
	<span class="type-badge ml-2 bg-cancerHighlight/10 text-cancerHighlight">ML Model</span>
	</div>
	<div class="text-gray-500 text-sm">
	<i class="fas fa-calendar-alt mr-1"></i> 3 days ago
	</div>
	</div>
	<h4 class="font-bold text-lg mb-2 hover:text-cancerHighlight cursor-pointer">
	Genomic Classifier Improves Risk Stratification in Localized Prostate Cancer
	</h4>
	<p class="text-gray-300 mb-4 text-sm">
	New 12-gene signature identified through deep learning accurately predicts metastasis risk, enabling tailored treatment intensity and avoiding overtreatment in low-risk patients.
	</p>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="flex -space-x-2 mr-3">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
	<img class="w-8 h-8 rounded-full border-2 border-cancerCard" src="https://randomuser.me/api/portraits/men/62.jpg" alt="">
	</div>
	<div class="text-xs text-gray-400">
	Urology Research
	</div>
	</div>
	<span class="flex items-center text-xs bg-amber-900/30 text-amber-400 px-2 py-1 rounded">
	<i class="fas fa-dna mr-1"></i> Genomics
	</span>
	</div>
	</div>
	<div class="bg-cancerCard border-t border-cancerBorder px-6 py-3 flex justify-between items-center">
	<div class="flex items-center text-sm">
	<i class="fas fa-code text-violet-400 mr-2"></i>
	<span class="text-gray-400 hover:text-cancerHighlight cursor-pointer">Model Access</span>
	</div>
	<div class="flex space-x-2">
	<button class="bg-cancerCard hover:bg-cancerHighlight/10 border border-cancerHighlight text-cancerHighlight font-medium py-1.5 px-3 rounded-lg text-sm">
	<i class="far fa-bookmark"></i>
	</button>
	<button class="bg-cancerHighlight hover:bg-cancerAccent transition text-cancerCard font-medium py-1.5 px-3 rounded-lg text-sm">
	Explore
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- AI Insights Panel -->
	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-6 mb-8 cancer-gradient-border">
	<div class="flex flex-wrap items-start justify-between gap-4">
	<div class="flex-1 min-w-[300px]">
	<h3 class="text-xl font-semibold text-cancerHighlight mb-6">Research Progress Across Cancer Types</h3>

	<div class="space-y-5">
	<div>
	<div class="flex items-center justify-between mb-3">
	<span class="text-cancerText">Breast Cancer</span>
	<span class="text-cancerHighlight font-semibold">87%</span>
	</div>
	<div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden">
	<div class="h-full bg-gradient-to-r from-purple-500 to-pink-500" style="width: 87%"></div>
	</div>
	</div>

	<div>
	<div class="flex items-center justify-between mb-3">
	<span class="text-cancerText">Lung Cancer</span>
	<span class="text-cancerHighlight font-semibold">64%</span>
	</div>
	<div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden">
	<div class="h-full bg-gradient-to-r from-blue-500 to-teal-500" style="width: 64%"></div>
	</div>
	</div>

	<div>
	<div class="flex items-center justify-between mb-3">
	<span class="text-cancerText">Prostate Cancer</span>
	<span class="text-cancerHighlight font-semibold">72%</span>
	</div>
	<div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden">
	<div class="h-full bg-gradient-to-r from-green-500 to-emerald-500" style="width: 72%"></div>
	</div>
	</div>

	<div>
	<div class="flex items-center justify-between mb-3">
	<span class="text-cancerText">Lymphoma</span>
	<span class="text-cancerHighlight font-semibold">59%</span>
	</div>
	<div class="h-3 bg-cancerCard border border-cancerBorder rounded-full overflow-hidden">
	<div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500" style="width: 59%"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- AI Insight Panel -->
	<div class="bg-cancerCard border border-cancerBorder rounded-xl overflow-hidden cancer-gradient-border min-w-[300px] flex-1">
	<div class="p-5">
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center mr-3">
	<i class="fas fa-brain text-white"></i>
	</div>
	<div>
	<h4 class="font-bold text-cancerHighlight">AI Research Insights</h4>
	<p class="text-xs text-gray-500">Updated 24 minutes ago</p>
	</div>
	</div>

	<div class="text-gray-300 text-sm">
	<p class="mb-3 flex items-start">
	<span class="text-cancerHighlight mr-2"><i class="fas fa-lightbulb"></i></span>
	<span><span class="text-cancerHighlight font-medium">Key trend:</span> Cross-cancer immune response patterns observed in 13% of metastatic patients show potential for pan-cancer immunotherapy approaches.</span>
	</p>
	<p class="mb-3 flex items-start">
	<span class="text-cancerHighlight mr-2"><i class="fas fa-bullseye"></i></span>
	<span><span class="text-cancerHighlight font-medium">Emerging finding:</span> Our AI models identified ESR1 gene mutations in unexpected tumor types, suggesting new applications for endocrine therapies.</span>
	</p>
	<p class="flex items-start">
	<span class="text-cancerHighlight mr-2"><i class="fas fa-exclamation-triangle"></i></span>
	<span><span class="text-cancerHighlight font-medium">Important alert:</span> Data variance in triple-negative breast cancer samples requires recalibration of predictive models scheduled for next week.</span>
	</p>
	</div>

	<div class="mt-6">
	<button class="w-full bg-cancerCard border border-cancerAccent hover:bg-cancerAccent transition text-cancerText font-semibold py-2 px-4 rounded-lg text-sm flex items-center justify-center">
	Explore AI Insights <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Model Training Status -->
	<div class="bg-cancerCard border border-cancerBorder rounded-xl p-6 mb-8 cancer-gradient-border">
	<h3 class="text-xl font-semibold text-cancerHighlight mb-6 flex items-center">
	<i class="fas fa-microchip mr-2"></i> AI Model Training Progress
	</h3>

	<div class="overflow-x-auto">
	<table class="w-full text-sm text-left text-gray-400">
	<thead class="text-xs uppercase bg-gray-800/50 text-gray-400">
	<tr>
	<th scope="col" class="px-4 py-3">Model Name</th>
	<th scope="col" class="px-4 py-3">Cancer Type</th>
	<th scope="col" class="px-4 py-3">Training Data</th>
	<th scope="col" class="px-4 py-3">Progress</th>
	<th scope="col" class="px-4 py-3">Accuracy</th>
	<th scope="col" class="px-4 py-3">ETA</th>
	</tr>
	</thead>
	<tbody>
	<tr class="border-b border-cancerBorder bg-gray-800/10">
	<th scope="row" class="px-4 py-4 font-medium whitespace-nowrap text-white">
	GenClass-7B
	</th>
	<td class="px-4 py-4">
	<span class="type-badge breast">Breast</span>
	</td>
	<td class="px-4 py-4">
	124,582 samples
	</td>
	<td class="px-4 py-4">
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="bg-gradient-to-r from-cancerAccent to-cancerHighlight h-2 rounded-full" style="width: 92%"></div>
	</div>
	<div class="text-xs mt-1">92%</div>
	</td>
	<td class="px-4 py-4">
	<span class="flex items-center"><i class="fas fa-circle text-green-500 mr-2 text-xs"></i> 94.7%</span>
	</td>
	<td class="px-4 py-4">
	<span class="blinking">2h 18m</span>
	</td>
	</tr>
	<tr class="border-b border-cancerBorder">
	<th scope="row" class="px-4 py-4 font-medium whitespace-nowrap text-white">
	DeepResponse-L
	</th>
	<td class="px-4 py-4">
	<span class="type-badge lung">Lung</span>
	</td>
	<td class="px-4 py-4">
	98,342 samples
	</td>
	<td class="px-4 py-4">
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="bg-gradient-to-r from-cancerAccent to-cancerHighlight h-2 rounded-full" style="width: 78%"></div>
	</div>
	<div class="text-xs mt-1">78%</div>
	</td>
	<td class="px-4 py-4">
	<span class="flex items-center"><i class="fas fa-circle text-amber-500 mr-2 text-xs"></i> 89.2%</span>
	</td>
	<td class="px-4 py-4">
	6h 42m
	</td>
	</tr>
	<tr class="border-b border-cancerBorder bg-gray-800/10">
	<th scope="row" class="px-4 py-4 font-medium whitespace-nowrap text-white">
	PathoDetect
	</th>
	<td class="px-4 py-4">
	<span class="type-badge prostate">Prostate</span>
	</td>
	<td class="px-4 py-4">
	212,430 samples
	</td>
	<td class="px-4 py-4">
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="bg-gradient-to-r from-cancerAccent to-cancerHighlight h-2 rounded-full" style="width: 45%"></div>
	</div>
	<div class="text-xs mt-1">45%</div>
	</td>
	<td class="px-4 py-4">
	<span class="flex items-center"><i class="fas fa-circle text-amber-500 mr-2 text-xs"></i> 87.4%</span>
	</td>
	<td class="px-4 py-4">
	1d 3h
	</td>
	</tr>
	<tr>
	<th scope="row" class="px-4 py-4 font-medium whitespace-nowrap text-white">
	ImmunoMatch
	</th>
	<td class="px-4 py-4">
	<span class="type-badge melanoma">Melanoma</span>
	</td>
	<td class="px-4 py-4">
	76,895 samples
	</td>
	<td class="px-4 py-4">
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="bg-gradient-to-r from-cancerAccent to-cancerHighlight h-2 rounded-full" style="width: 31%"></div>
	</div>
	<div class="text-xs mt-1">31%</div>
	</td>
	<td class="px-4 py-4">
	<span class="flex items-center"><i class="fas fa-circle text-gray-500 mr-2 text-xs"></i> N/A</span>
	</td>
	<td class="px-4 py-4">
	3d 8h
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Pagination -->
	<div class="flex justify-center items-center space-x-4 mb-12">
	<button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">
	<i class="fas fa-chevron-left"></i>
	</button>
	<button class="w-10 h-10 bg-cancerHighlight border border-cancerHighlight rounded-full flex items-center justify-center text-white font-semibold">1</button>
	<button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">2</button>
	<button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">3</button>
	<button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">...</button>
	<button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">8</button>
	<button class="w-10 h-10 bg-cancerCard border border-cancerBorder rounded-full flex items-center justify-center text-gray-500 hover:text-cancerHighlight">
	<i class="fas fa-chevron-right"></i>
	</button>
	</div>

	<!-- Chat Widget -->
	<div id="chatWidget" class="fixed bottom-6 right-6">
	<button id="chatToggle" class="w-14 h-14 rounded-full bg-gradient-to-r from-cancerAccent to-cancerHighlight shadow-lg flex items-center justify-center text-white cursor-pointer">
	<i class="fas fa-comment-alt"></i>
	</button>

	<div id="chatContainer" class="hidden absolute bottom-20 right-0 w-80 bg-cancerCard border border-cancerBorder rounded-lg shadow-xl flex flex-col" style="height: 450px;">
	<div class="bg-gradient-to-r from-cancerAccent to-cancerHighlight px-4 py-3 rounded-t-lg">
	<div class="flex justify-between items-center">
	<h4 class="text-white font-medium flex items-center">
	<i class="fas fa-headset mr-2"></i> Research Support
	</h4>
	<button id="chatClose" class="text-white">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<p class="text-xs text-gray-200 mt-1">We're here to assist with your research needs</p>
	</div>

	<div class="flex-1 p-4 overflow-y-auto bg-gray-900">
	<div class="chat-message mb-4 flex justify-start">
	<div class="max-w-xs">
	<div class="bg-cancerCard border border-cancerBorder rounded-t-2xl rounded-br-2xl px-4 py-2">
	<p class="text-sm">Hello! I'm Research Assistant AI. How can I help with your cancer research today?</p>
	</div>
	<div class="text-xs text-gray-400 mt-1 ml-1">11:42 AM</div>
	</div>
	</div>

	<div class="chat-message mb-4 flex justify-end">
	<div class="max-w-xs">
	<div class="bg-gradient-to-r from-cancerAccent to-cancerHighlight text-white rounded-t-2xl rounded-bl-2xl px-4 py-2">
	<p class="text-sm">Can you find recent papers on immunotherapy resistance biomarkers?</p>
	</div>
	<div class="text-xs text-gray-400 mt-1 text-right mr-1">11:43 AM</div>
	</div>
	</div>

	<div class="chat-message mb-4 flex justify-start">
	<div class="max-w-xs">
	<div class="bg-cancerCard border border-cancerBorder rounded-t-2xl rounded-br-2xl px-4 py-2">
	<p class="text-sm">I found 7 papers from the past 6 months. Here are the most relevant:</p>
	<ul class="mt-2 text-xs pl-4 list-disc">
	<li class="mb-1">Immune checkpoint landscape in therapy-resistant tumors</li>
	<li class="mb-1">T-cell exhaustion markers predictive of resistance</li>
	<li class="mb-1">Spatial proteomics reveals resistance mechanisms</li>
	</ul>
	<button class="text-xs text-cancerHighlight mt-2">View all results</button>
	</div>
	<div class="text-xs text-gray-400 mt-1 ml-1">11:44 AM</div>
	</div>
	</div>
	</div>

	<div class="border-t border-cancerBorder p-3 bg-cancerCard">
	<div class="flex">
	<input type="text" placeholder="Ask about research, data, or models..." class="flex-1 bg-gray-800 border border-gray-700 text-gray-200 text-sm rounded-l-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-cancerAccent">
	<button class="bg-gradient-to-r from-cancerAccent to-cancerHighlight text-white px-4 rounded-r-lg">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<footer class="bg-cancerCard border-t border-cancerBorder py-8">
	<div class="max-w-7xl mx-auto px-4">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
	<div>
	<h4 class="text-cancerHighlight font-bold mb-4">GenOptima Labs</h4>
	<p class="text-gray-300 text-sm mb-3">
	Advancing cancer research through innovative AI solutions and collaborative science.
	</p>
	<div class="flex space-x-3">
	<a href="#" class="w-8 h-8 bg-cancerCard border border-cancerBorder rounded-lg flex items-center justify-center text-cancerHighlight hover:bg-cancerHighlight hover:text-white">
	<i class="fab fa-github"></i>
	</a>
	<a href="#" class="w-8 h-8 bg-cancerCard border border-cancerBorder rounded-lg flex items-center justify-center text-cancerHighlight hover:bg-cancerHighlight hover:text-white">
	<i class="fab fa-linkedin"></i>
	</a>
	<a href="#" class="w-8 h-8 bg-cancerCard border border-cancerBorder rounded-lg flex items-center justify-center text-cancerHighlight hover:bg-cancerHighlight hover:text-white">
	<i class="fab fa-twitter"></i>
	</a>
	</div>
	</div>

	<div>
	<h4 class="text-cancerText font-bold mb-4">Research Domains</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-dna text-xs mr-2 w-4 text-center"></i> Genomic Oncology</a></li>
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-syringe text-xs mr-2 w-4 text-center"></i> Precision Immunotherapy</a></li>
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-vial text-xs mr-2 w-4 text-center"></i> Cancer Diagnostics</a></li>
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-pills text-xs mr-2 w-4 text-center"></i> Drug Development</a></li>
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-chart-bar text-xs mr-2 w-4 text-center"></i> Data Science</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-cancerText font-bold mb-4">Collaborate</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-handshake text-xs mr-2 w-4 text-center"></i> Academic Partnerships</a></li>
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-database text-xs mr-2 w-4 text-center"></i> Data Access Requests</a></li>
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-users text-xs mr-2 w-4 text-center"></i> Partner with Us</a></li>
	<li><a href="#" class="text-gray-300 hover:text-cancerHighlight text-sm flex items-center"><i class="fas fa-graduation-cap text-xs mr-2 w-4 text-center"></i> Research Fellowship</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-cancerText font-bold mb-4">Stay Informed</h4>
	<p class="text-gray-300 text-sm mb-3">Subscribe to our research digest newsletter</p>
	<div class="flex">
	<input type="text" placeholder="Your email" class="flex-1 bg-gray-800 border border-gray-700 text-gray-200 text-sm rounded-l-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-cancerAccent">
	<button class="bg-gradient-to-r from-cancerAccent to-cancerHighlight text-white px-4 rounded-r-lg text-sm">
	Join
	</button>
	</div>
	<div class="mt-4 pt-4 border-t border-gray-800">
	<a href="mailto:research@genoptima.org" class="text-gray-300 hover:text-cancerHighlight text-sm block mb-1"><i class="far fa-envelope mr-2"></i> research@genoptima.org</a>
	<a href="tel:+18001234567" class="text-gray-300 hover:text-cancerHighlight text-sm"><i class="fas fa-phone mr-2"></i> +1 (800) 123-4567</a>
	</div>
	</div>
	</div>

	<div class="border-t border-cancerBorder pt-4 text-center text-gray-400 text-sm">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="order-2 md:order-1">
	© 2023 GenOptima Labs \| AI-Driven Cancer Research Platform
	</div>
	<div class="order-1 md:order-2 mb-4 md:mb-0 flex justify-center space-x-4">
	<a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Terms of Service</a>
	<a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Privacy Policy</a>
	<a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Data Ethics</a>
	</div>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Notification system
	function showNotification(message, type = 'success') {
	const notification = document.getElementById('notification');
	const icon = notification.querySelector('i');
	const messageSpan = notification.querySelector('.notification-message');

	// Clear any previous classes
	notification.classList.remove('bg-green-700', 'bg-red-700', 'bg-blue-700');

	// Set type-specific styles
	if (type === 'success') {
	notification.classList.add('bg-green-700');
	icon.className = 'fas fa-check-circle';
	} else if (type === 'error') {
	notification.classList.add('bg-red-700');
	icon.className = 'fas fa-exclamation-circle';
	} else {
	notification.classList.add('bg-blue-700');
	icon.className = 'fas fa-info-circle';
	}

	messageSpan.textContent = message;
	notification.classList.remove('hidden');
	notification.classList.add('show');

	setTimeout(() => {
	notification.classList.remove('show');
	notification.classList.add('hidden');
	}, 3000);
	}

	// Mobile menu toggle
	document.getElementById('mobileMenuBtn').addEventListener('click', function() {
	const menu = document.getElementById('mobileMenu');
	menu.classList.toggle('hidden');
	});

	// Featured content slider
	let currentSlide = 0;
	const slides = document.querySelectorAll('.featured-slider');
	const indicators = document.querySelectorAll('.featured-indicator');
	const slider = document.getElementById('featuredSlider');

	function goToSlide(index) {
	if (index < 0) index = slides.length - 1;
	if (index >= slides.length) index = 0;

	currentSlide = index;
	slider.style.transform = `translateX(-${currentSlide * 100}%)`;

	// Update indicators
	indicators.forEach((indicator, i) => {
	if (i === currentSlide) {
	indicator.classList.add('bg-cancerHighlight');
	indicator.classList.remove('bg-gray-600');
	} else {
	indicator.classList.remove('bg-cancerHighlight');
	indicator.classList.add('bg-gray-600');
	}
	});
	}

	document.getElementById('featuredNext').addEventListener('click', function() {
	goToSlide(currentSlide + 1);
	});

	document.getElementById('featuredPrev').addEventListener('click', function() {
	goToSlide(currentSlide - 1);
	});

	indicators.forEach(indicator => {
	indicator.addEventListener('click', function() {
	const index = parseInt(this.getAttribute('data-index'));
	goToSlide(index);
	});
	});

	// Auto-advance slides
	setInterval(() => {
	goToSlide(currentSlide + 1);
	}, 10000);

	// Initialize first slide
	goToSlide(0);

	// Card hover effect
	const cards = document.querySelectorAll('.card-hover');
	cards.forEach(card => {
	card.addEventListener('mouseenter', function() {
	this.classList.add('glow');
	});

	card.addEventListener('mouseleave', function() {
	this.classList.remove('glow');
	});
	});

	// Chat widget
	const chatToggle = document.getElementById('chatToggle');
	const chatContainer = document.getElementById('chatContainer');
	const chatClose = document.getElementById('chatClose');

	chatToggle.addEventListener('click', function() {
	chatContainer.classList.toggle('hidden');
	});

	chatClose.addEventListener('click', function() {
	chatContainer.classList.add('hidden');
	});

	// List/Grid view toggle
	const researchGrid = document.getElementById('researchGrid');
	const listView = document.getElementById('listView');
	const gridView = document.getElementById('gridView');

	listView.addEventListener('click', function() {
	researchGrid.classList.add('grid-cols-1');
	researchGrid.classList.remove('md:grid-cols-2', 'lg:grid-cols-3');
	gridView.classList.remove('bg-cancerHighlight', 'border-cancerHighlight');
	gridView.classList.add('bg-cancerCard', 'border-cancerBorder');
	this.classList.add('bg-cancerHighlight', 'border-cancerHighlight');
	this.classList.remove('bg-cancerCard', 'border-cancerBorder');
	});

	gridView.addEventListener('click', function() {
	researchGrid.classList.remove('grid-cols-1');
	researchGrid.classList.add('md:grid-cols-2', 'lg:grid-cols-3');
	listView.classList.remove('bg-cancerHighlight', 'border-cancerHighlight');
	listView.classList.add('bg-cancerCard', 'border-cancerBorder');
	this.classList.add('bg-cancerHighlight', 'border-cancerHighlight');
	this.classList.remove('bg-cancerCard', 'border-cancerBorder');
	});

	// Chart initialization
	// Featured Chart 1
	const featuredCtx1 = document.getElementById('featuredChart1').getContext('2d');
	new Chart(featuredCtx1, {
	type: 'bar',
	data: {
	labels: ['Phase 1', 'Phase 2', 'Phase 3'],
	datasets: [{
	label: 'Response Rate (%)',
	data: [45, 78, 89],
	backgroundColor: [
	'rgba(99, 102, 241, 0.7)',
	'rgba(139, 92, 246, 0.7)',
	'rgba(219, 39, 119, 0.7)'
	],
	borderColor: [
	'rgba(99, 102, 241, 1)',
	'rgba(139, 92, 246, 1)',
	'rgba(219, 39, 119, 1)'
	],
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: 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)'
	}
	}
	},
	plugins: {
	legend: {
	display: false
	},
	tooltip: {
	backgroundColor: 'rgba(30, 41, 59, 0.95)',
	titleColor: '#e2e8f0',
	bodyColor: '#cbd5e1',
	borderColor: '#0ea5e9',
	borderWidth: 1,
	padding: 10
	}
	}
	}
	});

	// Featured Chart 2
	const featuredCtx2 = document.getElementById('featuredChart2').getContext('2d');
	new Chart(featuredCtx2, {
	type: 'doughnut',
	data: {
	labels: ['Predicted Responders', 'Predicted Non-Responders'],
	datasets: [{
	label: 'Accuracy',
	data: [94, 6],
	backgroundColor: [
	'rgba(14, 165, 233, 0.7)',
	'rgba(101, 163
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/genoptima-labs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>