Spaces:

Boobs00
/

genoptima-labs

Running

App Files Files Community

Boobs00 commited on Jun 26, 2025

Commit

6c5f674

verified ·

1 Parent(s): 5d583ce

<!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

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1349 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Genoptima Labs
-emoji: 🔥
-colorFrom: red
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: genoptima-labs
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1349 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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 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>