Spaces:

Neomyst
/

microbiome-explorer

Running

App Files Files Community

Neomyst commited on Apr 4

Commit

9b5d8d9

verified ·

1 Parent(s): 47b145a

Add 1 files

Browse files

Files changed (1) hide show

index.html +817 -390

index.html CHANGED Viewed

@@ -3,542 +3,969 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Microbiome Explorer | Award-Winning Holistic Search Engine</title>
-    <!-- Improved compatibility with older browsers -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <!-- Preload critical resources -->
     <link rel="preload" href="https://cdn.tailwindcss.com" as="script">
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
-    <!-- Fallback fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <!-- Favicon for better compatibility -->
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧫</text></svg>">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* Improved font stack with system fonts as fallback */
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
-        /* Microbiome gradient with fallback */
-        .microbiome-gradient {
-            background-color: #005bea; /* Fallback */
-            background-image: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
         }
-        /* Cell pattern with better browser support */
-        .cell-pattern {
-            background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
-            background-size: 20px 20px;
-            background-repeat: repeat;
         }
-        /* Glow effect with fallback */
-        .glow-effect {
-            box-shadow: 0 0 15px rgba(0, 198, 251, 0.5);
         }
-        /* Animation with proper prefixes */
-        .dna-animation {
-            -webkit-animation: dnaFloat 8s ease-in-out infinite;
-            animation: dnaFloat 8s ease-in-out infinite;
         }
-        @-webkit-keyframes dnaFloat {
-            0%, 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
-            25% { -webkit-transform: translateY(-10px) rotate(2deg); transform: translateY(-10px) rotate(2deg); }
-            50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
-            75% { -webkit-transform: translateY(10px) rotate(-2deg); transform: translateY(10px) rotate(-2deg); }
         }
-        @keyframes dnaFloat {
-            0%, 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
-            25% { -webkit-transform: translateY(-10px) rotate(2deg); transform: translateY(-10px) rotate(2deg); }
-            50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
-            75% { -webkit-transform: translateY(10px) rotate(-2deg); transform: translateY(10px) rotate(-2deg); }
         }
-        /* Search focus with proper prefixes */
         .search-focus {
-            -webkit-transition: all 0.3s ease;
             transition: all 0.3s ease;
         }
         .search-focus:focus {
-            -webkit-transform: scale(1.02);
             transform: scale(1.02);
-            box-shadow: 0 5px 15px rgba(0, 91, 234, 0.2);
         }
-        /* Microbe hover with better compatibility */
-        .microbe-hover {
-            -webkit-transition: all 0.3s ease;
-            transition: all 0.3s ease;
         }
-        .microbe-hover:hover {
-            -webkit-transform: scale(1.1) rotate(5deg);
-            transform: scale(1.1) rotate(5deg);
         }
-        /* Typewriter effect with better compatibility */
-        .typewriter {
             overflow: hidden;
-            border-right: .15em solid #00c6fb;
-            white-space: nowrap;
-            -webkit-animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
-            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
         }
-        @-webkit-keyframes typing {
-            from { width: 0 }
-            to { width: 100% }
         }
-        @keyframes typing {
-            from { width: 0 }
-            to { width: 100% }
         }
-        @-webkit-keyframes blink-caret {
-            from, to { border-color: transparent }
-            50% { border-color: #00c6fb; }
         }
-        @keyframes blink-caret {
-            from, to { border-color: transparent }
-            50% { border-color: #00c6fb; }
         }
-        /* Improved button focus states for accessibility */
-        button:focus, a:focus {
-            outline: 2px solid #00c6fb;
-            outline-offset: 2px;
         }
-        /* Better mobile responsiveness */
-        @media (max-width: 768px) {
-            .hero-content {
-                padding-top: 2rem;
-                padding-bottom: 2rem;
-            }
-            .search-container {
-                margin-top: -3rem;
-            }
-            .feature-cards {
-                grid-template-columns: 1fr;
-            }
         }
-        /* Print styles */
-        @media print {
-            .no-print {
-                display: none !important;
-            }
             body {
-                background: white !important;
-                color: black !important;
-                font-size: 12pt;
-            }
-            a::after {
-                content: " (" attr(href) ")";
-                font-size: 0.8em;
-                font-weight: normal;
             }
         }
     </style>
 </head>
 <body class="bg-gray-50">
-    <!-- Award Badge -->
-    <div class="absolute top-4 right-4 z-50 no-print">
-        <div class="relative">
-            <div class="bg-yellow-400 text-yellow-900 px-4 py-2 rounded-full font-bold text-sm transform rotate-12 shadow-lg">
-                <i class="fas fa-trophy mr-1" aria-hidden="true"></i> 2024 BioTech Innovation Award
             </div>
-            <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-yellow-400"></div>
         </div>
-    </div>
-    <!-- Hero Section with improved semantics -->
-    <header class="microbiome-gradient text-white pt-24 pb-32 relative overflow-hidden hero-content">
-        <div class="cell-pattern absolute inset-0 opacity-10"></div>
         <div class="container mx-auto px-6 relative z-10">
             <div class="flex flex-col lg:flex-row items-center">
-                <div class="lg:w-1/2 mb-12 lg:mb-0">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm font-medium mr-3">
-                            Game-Changer
-                        </div>
-                        <div class="text-sm opacity-90">Patent Pending Technology</div>
                     </div>
-                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
-                        Explore the <span class="typewriter inline-block" aria-live="polite">Human Microbiome</span>
                     </h1>
-                    <p class="text-xl opacity-90 mb-8 max-w-lg">
-                        The world's first holistic search engine for microbiome research, connecting symptoms, treatments, and microbial relationships.
                     </p>
-                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
-                        <button class="bg-white text-blue-700 px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all transform hover:scale-105 flex items-center justify-center focus:outline-none">
-                            <i class="fas fa-flask mr-2" aria-hidden="true"></i> Start Research
                         </button>
-                        <button class="border-2 border-white border-opacity-50 text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105 flex items-center justify-center focus:outline-none">
-                            <i class="fas fa-play-circle mr-2" aria-hidden="true"></i> Watch Demo
                         </button>
                     </div>
                 </div>
-                <div class="lg:w-1/2 flex justify-center">
-                    <div class="relative">
-                        <img src="https://www.svgrepo.com/show/530537/dna.svg" alt="DNA Strand" class="w-64 h-64 dna-animation" loading="lazy">
-                        <div class="absolute -top-10 -left-10">
-                            <div class="bg-white bg-opacity-20 rounded-full w-32 h-32 flex items-center justify-center microbe-hover" aria-hidden="true">
-                                <i class="fas fa-bacterium text-4xl text-white"></i>
-                            </div>
-                        </div>
-                        <div class="absolute -bottom-5 -right-5">
-                            <div class="bg-white bg-opacity-20 rounded-full w-24 h-24 flex items-center justify-center microbe-hover" aria-hidden="true">
-                                <i class="fas fa-virus text-3xl text-white"></i>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </header>
-    <!-- Search Interface with better accessibility -->
-    <section class="container mx-auto px-6 -mt-16 relative z-20 mb-24 search-container">
-        <div class="bg-white rounded-xl shadow-2xl p-6">
-            <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
                 <div class="flex-1 relative">
-                    <label for="searchInput" class="sr-only">Search symptoms, microbes, or treatments</label>
-                    <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-blue-500">
                         <i class="fas fa-search" aria-hidden="true"></i>
                     </div>
-                    <input type="text" id="searchInput" placeholder="Search symptoms, microbes, or treatments..."
-                           class="search-focus w-full pl-12 pr-4 py-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-400">
                 </div>
-                <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-4 rounded-lg font-semibold transition-all flex items-center justify-center focus:outline-none">
-                    <i class="fas fa-dna mr-2" aria-hidden="true"></i> Analyze
                 </button>
             </div>
-            <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
-                <button class="bg-blue-50 border border-blue-100 rounded-lg p-3 text-center cursor-pointer hover:bg-blue-100 transition-colors focus:outline-none">
-                    <div class="text-blue-600 mb-1"><i class="fas fa-heartbeat" aria-hidden="true"></i></div>
-                    <div class="text-sm font-medium text-blue-800">Gut Health</div>
-                </button>
-                <button class="bg-purple-50 border border-purple-100 rounded-lg p-3 text-center cursor-pointer hover:bg-purple-100 transition-colors focus:outline-none">
-                    <div class="text-purple-600 mb-1"><i class="fas fa-brain" aria-hidden="true"></i></div>
-                    <div class="text-sm font-medium text-purple-800">Mental Health</div>
-                </button>
-                <button class="bg-green-50 border border-green-100 rounded-lg p-3 text-center cursor-pointer hover:bg-green-100 transition-colors focus:outline-none">
-                    <div class="text-green-600 mb-1"><i class="fas fa-weight" aria-hidden="true"></i></div>
-                    <div class="text-sm font-medium text-green-800">Metabolism</div>
-                </button>
-                <button class="bg-amber-50 border border-amber-100 rounded-lg p-3 text-center cursor-pointer hover:bg-amber-100 transition-colors focus:outline-none">
-                    <div class="text-amber-600 mb-1"><i class="fas fa-allergies" aria-hidden="true"></i></div>
-                    <div class="text-sm font-medium text-amber-800">Immunity</div>
-                </button>
             </div>
         </div>
     </section>
-    <!-- Unique Value Proposition with better semantics -->
-    <section class="container mx-auto px-6 mb-24">
-        <div class="text-center mb-16">
-            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Why Our Technology is Revolutionary</h2>
-            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
-                Connecting the dots between microbiome research and human health like never before
-            </p>
         </div>
-        <div class="grid md:grid-cols-3 gap-8 feature-cards">
-            <article class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
-                <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
-                    <i class="fas fa-project-diagram text-blue-600 text-2xl" aria-hidden="true"></i>
-                </div>
-                <h3 class="text-xl font-bold text-center mb-3">Holistic Connections</h3>
-                <p class="text-gray-600 text-center">
-                    Our AI maps complex relationships between 10,000+ microbial species and human health conditions.
-                </p>
-            </article>
-            <article class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow glow-effect">
-                <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
-                    <i class="fas fa-chart-network text-purple-600 text-2xl" aria-hidden="true"></i>
-                </div>
-                <h3 class="text-xl font-bold text-center mb-3">Predictive Analytics</h3>
-                <p class="text-gray-600 text-center">
-                    Anticipate health trends and microbiome changes before symptoms appear with our predictive models.
-                </p>
-            </article>
-            <article class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
-                <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
-                    <i class="fas fa-user-md text-green-600 text-2xl" aria-hidden="true"></i>
-                </div>
-                <h3 class="text-xl font-bold text-center mb-3">Clinical Applications</h3>
-                <p class="text-gray-600 text-center">
-                    Directly applicable to patient care with personalized microbiome intervention recommendations.
-                </p>
-            </article>
         </div>
     </section>
-    <!-- Data Visualization with better semantics -->
-    <section class="bg-gray-100 py-16 mb-24">
         <div class="container mx-auto px-6">
-            <div class="flex flex-col lg:flex-row items-center">
-                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
-                    <h2 class="text-3xl font-bold text-gray-800 mb-6">Interactive Microbiome Network</h2>
-                    <p class="text-gray-600 mb-6">
-                        Explore our dynamic visualization of microbial ecosystems and their connections to human physiology.
-                        Each node represents a microbial species or health factor - click to discover relationships.
-                    </p>
-                    <div class="flex space-x-4">
-                        <button class="bg-blue-600 text-white px-6 py-2 rounded-full text-sm font-semibold hover:bg-blue-700 transition-colors focus:outline-none">
-                            <i class="fas fa-play mr-1" aria-hidden="true"></i> Tutorial
-                        </button>
-                        <button class="border border-blue-600 text-blue-600 px-6 py-2 rounded-full text-sm font-semibold hover:bg-blue-50 transition-colors focus:outline-none">
-                            <i class="fas fa-download mr-1" aria-hidden="true"></i> Sample Data
-                        </button>
                     </div>
                 </div>
-                <div class="lg:w-1/2 bg-white p-6 rounded-xl shadow-lg">
-                    <div class="bg-gray-200 rounded-lg overflow-hidden" style="height: 350px;">
-                        <div class="flex items-center justify-center h-full">
-                            <div class="text-center">
-                                <i class="fas fa-network-wired text-5xl text-gray-400 mb-4" aria-hidden="true"></i>
-                                <p class="text-gray-600">Interactive microbiome network visualization</p>
-                                <div class="mt-4 flex justify-center space-x-2">
-                                    <div class="w-3 h-3 rounded-full bg-blue-500" aria-hidden="true"></div>
-                                    <div class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true"></div>
-                                    <div class="w-3 h-3 rounded-full bg-purple-500" aria-hidden="true"></div>
-                                    <div class="w-3 h-3 rounded-full bg-yellow-500" aria-hidden="true"></div>
-                                    <div class="w-3 h-3 rounded-full bg-red-500" aria-hidden="true"></div>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    </section>
-    <!-- Testimonials with better semantics -->
-    <section class="container mx-auto px-6 mb-24">
-        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
-            <div class="md:flex">
-                <div class="md:w-1/3 bg-blue-600 text-white p-8 flex flex-col justify-center">
-                    <h2 class="text-2xl font-bold mb-4">Trusted by Leading Researchers</h2>
-                    <p class="opacity-90 mb-6">
-                        Our platform has been adopted by top research institutions and healthcare organizations worldwide.
-                    </p>
-                    <div class="flex space-x-2">
-                        <div class="bg-white bg-opacity-20 rounded-full w-10 h-10 flex items-center justify-center">
-                            <i class="fas fa-quote-left" aria-hidden="true"></i>
-                        </div>
-                        <div>
-                            <div class="font-bold">4.9/5</div>
-                            <div class="text-xs opacity-80">Average rating</div>
-                        </div>
                     </div>
-                </div>
-                <div class="md:w-2/3 p-8">
-                    <div class="grid md:grid-cols-2 gap-8">
-                        <blockquote>
-                            <div class="flex items-center mb-4">
-                                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
-                                    <i class="fas fa-user-md text-blue-600" aria-hidden="true"></i>
-                                </div>
-                                <div>
-                                    <div class="font-bold">Dr. Sarah Chen</div>
-                                    <div class="text-sm text-gray-500">Harvard Medical School</div>
-                                </div>
-                            </div>
-                            <p class="text-gray-600">
-                                "This platform has revolutionized how we approach microbiome research. The connections it reveals between microbial populations and chronic conditions are game-changing."
-                            </p>
-                        </blockquote>
-                        <blockquote>
-                            <div class="flex items-center mb-4">
-                                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
-                                    <i class="fas fa-flask text-green-600" aria-hidden="true"></i>
-                                </div>
-                                <div>
-                                    <div class="font-bold">Prof. James Wilson</div>
-                                    <div class="text-sm text-gray-500">Stanford University</div>
-                                </div>
-                            </div>
-                            <p class="text-gray-600">
-                                "The predictive analytics capabilities have helped us identify potential microbiome-based interventions months before traditional methods would."
-                            </p>
-                        </blockquote>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- CTA Section with better semantics -->
-    <section class="microbiome-gradient text-white py-16 mb-12 rounded-3xl mx-6">
-        <div class="container mx-auto px-6 text-center">
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Microbiome Research?</h2>
-            <p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">
-                Join hundreds of researchers and clinicians using our award-winning platform to unlock new discoveries.
-            </p>
-            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
-                <button class="bg-white text-blue-700 px-8 py-4 rounded-full font-bold hover:bg-opacity-90 transition-all transform hover:scale-105 focus:outline-none">
-                    Start Free Trial
-                </button>
-                <button class="border-2 border-white border-opacity-50 px-8 py-4 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105 focus:outline-none">
-                    Schedule Demo
                 </button>
             </div>
         </div>
     </section>
-    <!-- Footer with better semantics -->
     <footer class="bg-gray-900 text-white py-12">
         <div class="container mx-auto px-6">
             <div class="grid md:grid-cols-4 gap-8 mb-8">
                 <div>
-                    <h3 class="text-xl font-bold mb-4 flex items-center">
-                        <i class="fas fa-dna mr-2" aria-hidden="true"></i> Microbiome Explorer
                     </h3>
-                    <p class="text-gray-400">
-                        The world's most advanced holistic search engine for human microbiome research.
                     </p>
                 </div>
                 <div>
-                    <h4 class="font-bold mb-4">Research</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Database</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Analytics</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Visualizations</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API Access</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="font-bold mb-4">Resources</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Case Studies</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Research Papers</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="font-bold mb-4">Connect</h4>
                     <div class="flex space-x-4 mb-4">
-                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors focus:outline-none" aria-label="Twitter">
-                            <i class="fab fa-twitter" aria-hidden="true"></i>
                         </a>
-                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors focus:outline-none" aria-label="LinkedIn">
-                            <i class="fab fa-linkedin-in" aria-hidden="true"></i>
                         </a>
-                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors focus:outline-none" aria-label="GitHub">
-                            <i class="fab fa-github" aria-hidden="true"></i>
                         </a>
                     </div>
-                    <p class="text-gray-400">support@microbiome-explorer.com</p>
                 </div>
             </div>
-            <div class="pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
-                <p>© 2024 Microbiome Explorer. All rights reserved. Patent pending technology.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Improved JavaScript with feature detection
         document.addEventListener('DOMContentLoaded', function() {
-            // Typewriter effect with fallback
-            if (typeof document.querySelector === 'function' &&
-                typeof window.requestAnimationFrame === 'function') {
-                const phrases = [
-                    "Human Microbiome",
-                    "Gut-Brain Axis",
-                    "Microbial Ecosystems",
-                    "Health Connections"
-                ];
-                let currentPhrase = 0;
-                let currentChar = 0;
-                let isDeleting = false;
-                let isEnd = false;
-                function typeWriter() {
-                    const typewriterElement = document.querySelector('.typewriter');
-                    if (!typewriterElement) return;
-                    const currentText = phrases[currentPhrase];
-                    if (isDeleting) {
-                        typewriterElement.textContent = currentText.substring(0, currentChar - 1);
-                        currentChar--;
                     } else {
-                        typewriterElement.textContent = currentText.substring(0, currentChar + 1);
-                        currentChar++;
                     }
-                    if (!isDeleting && currentChar === currentText.length) {
-                        isEnd = true;
-                        isDeleting = true;
-                        setTimeout(typeWriter, 2000);
-                    } else if (isDeleting && currentChar === 0) {
-                        isDeleting = false;
-                        currentPhrase = (currentPhrase + 1) % phrases.length;
-                        setTimeout(typeWriter, 500);
-                    } else {
-                        const speed = isDeleting ? 100 : 150;
-                        setTimeout(typeWriter, speed);
-                    }
                 }
-                // Start the typewriter effect
-                setTimeout(typeWriter, 1000);
             }
-            // Improved hover animations with feature detection
-            if ('ontouchstart' in window === false) {
-                const microbes = document.querySelectorAll('.microbe-hover');
-                if (microbes.length) {
-                    microbes.forEach(microbe => {
-                        microbe.addEventListener('mouseenter', function() {
-                            this.style.transform = 'scale(1.1) rotate(5deg)';
-                        });
-                        microbe.addEventListener('mouseleave', function() {
-                            this.style.transform = 'scale(1) rotate(0deg)';
-                        });
-                    });
                 }
-                // Search focus effect
-                const searchInput = document.querySelector('.search-focus');
-                if (searchInput) {
-                    searchInput.addEventListener('focus', function() {
-                        this.style.transform = 'scale(1.02)';
-                        this.style.boxShadow = '0 5px 15px rgba(0, 91, 234, 0.2)';
-                    });
-                    searchInput.addEventListener('blur', function() {
-                        this.style.transform = 'scale(1)';
-                        this.style.boxShadow = 'none';
                     });
-                }
             }
-            // Load Font Awesome if not already loaded
-            if (typeof FontAwesome === 'undefined') {
-                const faScript = document.createElement('script');
-                faScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js';
-                faScript.async = true;
-                document.head.appendChild(faScript);
-            }
         });
     </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=Neomyst/microbiome-explorer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Holistic Health Explorer | Advanced Database Integration</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link rel="preload" href="https://cdn.tailwindcss.com" as="script">
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌿</text></svg>">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            padding-top: 70px;
+            color: #333;
+            line-height: 1.6;
         }
+        .header-gradient {
+            background: linear-gradient(135deg, #2b8a3e 0%, #40c057 100%);
+            box-shadow: 0 2px 10px rgba(43, 138, 62, 0.1);
         }
+        .health-gradient {
+            background: linear-gradient(135deg, #f8f9fa 0%, #ebfbee 100%);
         }
+        .floating-element {
+            animation: float 8s ease-in-out infinite;
         }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-15px) rotate(2deg); }
         }
+        .typewriter {
+            overflow: hidden;
+            white-space: nowrap;
+            border-right: 2px solid #40c057;
+            width: 0;
+            animation: typing 3s steps(40, end) forwards, blink-caret .75s step-end infinite;
         }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #40c057; }
+        }
+        .nav-link {
+            position: relative;
+            padding: 8px 0;
+            transition: all 0.2s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background-color: white;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
         }
         .search-focus {
             transition: all 0.3s ease;
         }
         .search-focus:focus {
             transform: scale(1.02);
+            box-shadow: 0 5px 15px rgba(43, 138, 62, 0.1);
         }
+        .database-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 500;
+            background-color: #ebfbee;
+            color: #2b8a3e;
         }
+        .database-chip {
+            display: inline-flex;
+            align-items: center;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 500;
+            background-color: #f8f9fa;
+            color: #495057;
+            border: 1px solid #dee2e6;
+            margin-right: 6px;
+            margin-bottom: 6px;
         }
+        .database-chip i {
+            margin-right: 4px;
+            font-size: 10px;
+        }
+        .result-card {
+            transition: all 0.2s ease;
+            border-left: 3px solid transparent;
+        }
+        .result-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+            border-left: 3px solid #40c057;
+        }
+        .knowledge-graph {
+            height: 300px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            position: relative;
             overflow: hidden;
         }
+        .graph-node {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 500;
+            font-size: 12px;
+            text-align: center;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            cursor: pointer;
+            transition: all 0.3s ease;
         }
+        .graph-node:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
         }
+        .graph-line {
+            position: absolute;
+            height: 2px;
+            background-color: rgba(0,0,0,0.1);
+            transform-origin: left center;
         }
+        .relevance-badge {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background-color: #ff6b6b;
+            color: white;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
         }
+        .suggestion-card {
+            border-left: 4px solid #40c057;
+            transition: all 0.2s ease;
         }
+        .suggestion-card:hover {
+            transform: translateX(5px);
         }
+        .database-relation {
+            position: relative;
+            padding-left: 20px;
+        }
+        .database-relation::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 8px;
+            width: 12px;
+            height: 12px;
+            border-radius: 2px;
+        }
+        .ncbi-relation::before { background-color: #2b8a3e; }
+        .pubchem-relation::before { background-color: #1971c2; }
+        .microbiome-relation::before { background-color: #6741d9; }
+        .food-relation::before { background-color: #e67700; }
+        .phytochem-relation::before { background-color: #d6336c; }
+        @media (max-width: 768px) {
             body {
+                padding-top: 60px;
             }
         }
     </style>
 </head>
 <body class="bg-gray-50">
+    <!-- Fixed Navigation Header -->
+    <header class="fixed top-0 left-0 right-0 z-50 header-gradient text-white">
+        <div class="container mx-auto px-6">
+            <div class="flex items-center justify-between h-16">
+                <!-- Logo -->
+                <div class="flex items-center">
+                    <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-2">
+                        <i class="fas fa-leaf text-sm"></i>
+                    </div>
+                    <span class="text-lg font-medium">Health<span class="font-light">Explorer</span></span>
+                </div>
+                <!-- Desktop Navigation -->
+                <nav class="hidden md:flex items-center space-x-6">
+                    <a href="#" class="nav-link active">Home</a>
+                    <a href="#" class="nav-link">Databases</a>
+                    <a href="#" class="nav-link">Health Insights</a>
+                    <a href="#" class="nav-link">For Practitioners</a>
+                    <a href="#" class="nav-link">Resources</a>
+                </nav>
+                <!-- Mobile Menu Button -->
+                <button class="md:hidden text-white focus:outline-none">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <!-- CTA Button -->
+                <div class="hidden md:block">
+                    <button class="bg-white text-green-700 px-4 py-1.5 rounded-full text-sm font-medium hover:bg-opacity-90 transition-all">
+                        <i class="fas fa-user mr-1"></i> My Health
+                    </button>
+                </div>
             </div>
         </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="health-gradient text-gray-800 pt-16 pb-12 relative overflow-hidden">
         <div class="container mx-auto px-6 relative z-10">
             <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-2/3 mb-8 lg:mb-0">
+                    <div class="flex flex-wrap items-center mb-3">
+                        <span class="database-badge px-3 py-1 text-xs mr-3 mb-2">
+                            <i class="fas fa-database mr-1"></i> 27 Integrated Health Databases
+                        </span>
+                        <span class="database-badge px-3 py-1 text-xs mr-3 mb-2">
+                            <i class="fas fa-brain mr-1"></i> AI-Powered Cross-References
+                        </span>
                     </div>
+                    <h1 class="text-2xl md:text-3xl font-light leading-tight mb-3">
+                        Advanced Health <span class="font-medium">Database Explorer</span><br>
+                        <span class="typewriter inline-block text-xl" aria-live="polite">Cross-Referencing Scientific Research</span>
                     </h1>
+                    <p class="text-gray-600 mb-6 max-w-lg text-sm">
+                        Our intelligent system connects research across multiple databases to reveal hidden relationships between nutrition,
+                        microbiome science, herbal medicine, and clinical studies.
                     </p>
+                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
+                        <button class="bg-green-600 text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-green-700 transition-colors flex items-center justify-center focus:outline-none">
+                            <i class="fas fa-search mr-2" aria-hidden="true"></i> Explore Health Data
                         </button>
+                        <button class="border border-green-600 text-green-600 px-5 py-2 rounded-full text-sm font-medium hover:bg-green-50 transition-colors flex items-center justify-center focus:outline-none">
+                            <i class="fas fa-video mr-2" aria-hidden="true"></i> Watch Demo
                         </button>
                     </div>
                 </div>
+                <div class="lg:w-1/3 flex justify-center">
+                    <div class="relative floating-element">
+                        <img src="https://www.svgrepo.com/show/530537/dna.svg" alt="Health DNA" class="w-40 h-40 opacity-90" loading="lazy" style="filter: hue-rotate(60deg);">
                     </div>
                 </div>
             </div>
         </div>
+    </section>
+    <!-- Health Search Interface -->
+    <section class="container mx-auto px-6 -mt-8 relative z-20 mb-16">
+        <div class="bg-white rounded-xl shadow-lg p-5">
+            <div class="flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-3">
                 <div class="flex-1 relative">
+                    <label for="healthSearchInput" class="sr-only">Search health databases</label>
+                    <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-green-500">
                         <i class="fas fa-search" aria-hidden="true"></i>
                     </div>
+                    <input type="text" id="healthSearchInput" placeholder="Search microbiome, nutrition, herbs, lifestyle..."
+                           class="search-focus w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-green-400 text-sm">
                 </div>
+                <button id="healthSearchButton" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 rounded-lg font-medium text-sm transition-all flex items-center justify-center focus:outline-none">
+                    <i class="fas fa-brain mr-2" aria-hidden="true"></i> Find Connections
                 </button>
             </div>
+            <div class="mt-4">
+                <div class="text-xs text-gray-500 mb-2">Select databases to search:</div>
+                <div class="flex flex-wrap" id="databaseFilters">
+                    <label class="database-chip cursor-pointer">
+                        <input type="checkbox" class="hidden" checked data-db="ncbi">
+                        <i class="fas fa-dna"></i> NCBI
+                    </label>
+                    <label class="database-chip cursor-pointer">
+                        <input type="checkbox" class="hidden" checked data-db="pubchem">
+                        <i class="fas fa-flask"></i> PubChem
+                    </label>
+                    <label class="database-chip cursor-pointer">
+                        <input type="checkbox" class="hidden" checked data-db="pubmed">
+                        <i class="fas fa-book-medical"></i> PubMed
+                    </label>
+                    <label class="database-chip cursor-pointer">
+                        <input type="checkbox" class="hidden" checked data-db="food">
+                        <i class="fas fa-utensils"></i> FoodData
+                    </label>
+                    <label class="database-chip cursor-pointer">
+                        <input type="checkbox" class="hidden" checked data-db="phytochem">
+                        <i class="fas fa-leaf"></i> Phytochemical
+                    </label>
+                    <label class="database-chip cursor-pointer">
+                        <input type="checkbox" class="hidden" checked data-db="microbiome">
+                        <i class="fas fa-bacterium"></i> Microbiome
+                    </label>
+                    <label class="database-chip cursor-pointer">
+                        <input type="checkbox" class="hidden" checked data-db="clinical">
+                        <i class="fas fa-hospital"></i> Clinical Trials
+                    </label>
+                </div>
             </div>
         </div>
     </section>
+    <!-- Search Results Section (Initially Hidden) -->
+    <section id="searchResults" class="container mx-auto px-6 mb-16 hidden">
+        <div class="flex items-center justify-between mb-6">
+            <h2 class="text-lg font-medium text-gray-800">Cross-Database Results</h2>
+            <div class="text-sm text-gray-500"><span id="resultCount">0</span> results across <span id="dbCount">0</span> databases</div>
         </div>
+        <!-- Knowledge Graph Visualization -->
+        <div class="mb-8">
+            <div class="flex items-center justify-between mb-3">
+                <h3 class="font-medium text-gray-700">Knowledge Graph</h3>
+                <div class="text-xs text-gray-500">Showing relationships between concepts</div>
+            </div>
+            <div class="knowledge-graph" id="knowledgeGraph">
+                <!-- Nodes will be dynamically inserted here -->
+            </div>
+        </div>
+        <!-- Results Tabs -->
+        <div class="mb-6 border-b border-gray-200">
+            <div class="flex space-x-4">
+                <button class="tab-button px-4 py-2 font-medium text-sm border-b-2 border-green-500 text-green-600" data-tab="all">All Results</button>
+                <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="suggestions">AI Suggestions</button>
+                <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="microbiome">Microbiome</button>
+                <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="nutrition">Nutrition</button>
+                <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="herbal">Herbal</button>
+            </div>
+        </div>
+        <!-- Results Grid -->
+        <div class="grid gap-6" id="resultsContainer">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+        <!-- AI Suggestions Section -->
+        <div id="aiSuggestions" class="mt-8 hidden">
+            <h3 class="font-medium text-gray-700 mb-4 flex items-center">
+                <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> AI-Powered Research Suggestions
+            </h3>
+            <div class="grid md:grid-cols-2 gap-4" id="suggestionsContainer">
+                <!-- Suggestions will be dynamically inserted here -->
+            </div>
+        </div>
+        <div class="mt-8 text-center">
+            <button class="bg-white border border-gray-200 text-gray-700 px-5 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
+                <i class="fas fa-sync-alt mr-2"></i> Load More Results
+            </button>
         </div>
     </section>
+    <!-- Database Integration Section -->
+    <section class="bg-gray-50 py-12">
         <div class="container mx-auto px-6">
+            <div class="text-center mb-10">
+                <h2 class="text-2xl font-light text-gray-800 mb-3">Intelligent Database <span class="font-medium">Integration</span></h2>
+                <p class="text-gray-600 max-w-2xl mx-auto text-sm">Our system automatically finds relationships between data across different scientific domains</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-6 mb-12">
+                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-4">
+                        <i class="fas fa-project-diagram text-xl"></i>
                     </div>
+                    <h3 class="font-medium text-lg mb-2">Cross-Database Relationships</h3>
+                    <p class="text-gray-600 text-sm mb-4">Automatically identifies connections between compounds, genes, microbiome impacts, and clinical studies.</p>
+                    <div class="database-relation ncbi-relation text-xs text-gray-500 mb-1">NCBI Gene Data → PubChem Compounds</div>
+                    <div class="database-relation pubchem-relation text-xs text-gray-500 mb-1">PubChem → Microbiome Interactions</div>
+                    <div class="database-relation phytochem-relation text-xs text-gray-500">Phytochemicals → Clinical Trial Results</div>
                 </div>
+                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-4">
+                        <i class="fas fa-robot text-xl"></i>
                     </div>
+                    <h3 class="font-medium text-lg mb-2">AI-Powered Suggestions</h3>
+                    <p class="text-gray-600 text-sm mb-4">Machine learning identifies potentially relevant research you might have missed based on your search patterns.</p>
+                    <div class="text-xs text-gray-500 mb-2">Common suggestions include:</div>
+                    <div class="text-xs bg-blue-50 text-blue-700 px-3 py-1 rounded-full inline-block mr-2 mb-2">Related Metabolic Pathways</div>
+                    <div class="text-xs bg-purple-50 text-purple-700 px-3 py-1 rounded-full inline-block mr-2 mb-2">Alternative Compounds</div>
+                    <div class="text-xs bg-green-50 text-green-700 px-3 py-1 rounded-full inline-block">Microbiome Interactions</div>
                 </div>
+                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-4">
+                        <i class="fas fa-chart-network text-xl"></i>
                     </div>
+                    <h3 class="font-medium text-lg mb-2">Visual Knowledge Mapping</h3>
+                    <p class="text-gray-600 text-sm mb-4">Interactive graphs show how different concepts connect across multiple research domains.</p>
+                    <div class="flex items-center text-xs text-gray-500 mb-2">
+                        <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+                        <span>Primary search term</span>
+                    </div>
+                    <div class="flex items-center text-xs text-gray-500 mb-2">
+                        <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
+                        <span>Directly related concepts</span>
+                    </div>
+                    <div class="flex items-center text-xs text-gray-500">
+                        <div class="w-3 h-3 bg-orange-500 rounded-full mr-2"></div>
+                        <span>Secondary relationships</span>
                     </div>
                 </div>
             </div>
+            <div class="text-center">
+                <button class="bg-green-600 text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-green-700 transition-colors">
+                    <i class="fas fa-database mr-2"></i> View All Database Connections
                 </button>
             </div>
         </div>
     </section>
+    <!-- Footer -->
     <footer class="bg-gray-900 text-white py-12">
         <div class="container mx-auto px-6">
             <div class="grid md:grid-cols-4 gap-8 mb-8">
                 <div>
+                    <h3 class="text-lg font-medium mb-4 flex items-center">
+                        <i class="fas fa-brain mr-2" aria-hidden="true"></i> HealthExplorer AI
                     </h3>
+                    <p class="text-gray-400 text-sm">
+                        Advanced research discovery through intelligent database integration.
                     </p>
                 </div>
                 <div>
+                    <h4 class="font-medium mb-4 text-sm">Research Tools</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Knowledge Graph</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Database Cross-Reference</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">AI Suggestions</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="font-medium mb-4 text-sm">Databases</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Molecular Biology</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Nutrition Science</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Herbal Research</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="font-medium mb-4 text-sm">Connect</h4>
                     <div class="flex space-x-4 mb-4">
+                        <a href="#" target="_blank" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors focus:outline-none" aria-label="Twitter">
+                            <i class="fab fa-twitter text-xs" aria-hidden="true"></i>
                         </a>
+                        <a href="#" target="_blank" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors focus:outline-none" aria-label="LinkedIn">
+                            <i class="fab fa-linkedin-in text-xs" aria-hidden="true"></i>
                         </a>
+                        <a href="#" target="_blank" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors focus:outline-none" aria-label="Github">
+                            <i class="fab fa-github text-xs" aria-hidden="true"></i>
                         </a>
                     </div>
+                    <p class="text-gray-400 text-sm">research@healthexplorer.ai</p>
                 </div>
             </div>
+            <div class="pt-8 border-t border-gray-800 text-center text-gray-400 text-xs">
+                <p>© 2024 HealthExplorer AI. Advanced research discovery platform.</p>
             </div>
         </div>
     </footer>
     <script>
+        // Extended sample data with cross-database relationships
+        const sampleResults = [
+            {
+                id: 'res1',
+                title: "Curcumin's Anti-Inflammatory Mechanisms",
+                source: "PubMed Central",
+                year: "2023",
+                type: "Review Article",
+                databases: ["PubMed", "PubChem", "Clinical Trials"],
+                snippet: "Comprehensive review of curcumin's anti-inflammatory mechanisms through NF-κB pathway inhibition and clinical applications in chronic inflammatory conditions.",
+                link: "https://www.ncbi.nlm.nih.gov/pmc/articles/example",
+                relevance: 98,
+                categories: ["herbal", "nutrition"],
+                related: ["res2", "res3", "res5", "res8"],
+                compounds: ["Curcumin", "Turmeric"],
+                pathways: ["NF-κB", "COX-2"],
+                genes: ["TNF", "IL6"]
+            },
+            {
+                id: 'res2',
+                title: "Microbiome Modulation by Curcumin",
+                source: "Human Microbiome Project",
+                year: "2022",
+                type: "Research Study",
+                databases: ["Microbiome", "NCBI", "PubMed"],
+                snippet: "Study showing curcumin's impact on gut microbiota diversity and its correlation with reduced systemic inflammation markers in human subjects.",
+                link: "https://hmpdacc.org/example",
+                relevance: 95,
+                categories: ["microbiome", "nutrition"],
+                related: ["res1", "res4", "res6"],
+                bacteria: ["Bacteroides", "Lactobacillus"],
+                metabolites: ["Butyrate"]
+            },
+            {
+                id: 'res3',
+                title: "Curcumin Chemical Properties & Bioavailability",
+                source: "PubChem",
+                year: "2023",
+                type: "Chemical Database",
+                databases: ["PubChem", "FoodData"],
+                snippet: "Detailed chemical properties, solubility, and known biological activities of curcumin (diferuloylmethane), including bioavailability enhancement methods.",
+                link: "https://pubchem.ncbi.nlm.nih.gov/compound/curcumin",
+                relevance: 92,
+                categories: ["nutrition"],
+                related: ["res1", "res7"],
+                solubility: "Lipophilic",
+                bioavailability: "Low (enhanced with piperine)"
+            },
+            {
+                id: 'res4',
+                title: "Traditional Uses of Turmeric",
+                source: "Dr. Duke's Phytochemical",
+                year: "2021",
+                type: "Ethnobotanical Database",
+                databases: ["Phytochemical", "PubMed"],
+                snippet: "Documentation of turmeric's traditional uses in Ayurvedic medicine for inflammatory conditions, wound healing, and digestive disorders.",
+                link: "https://phytochem.nal.usda.gov/example",
+                relevance: 89,
+                categories: ["herbal"],
+                related: ["res1", "res5"],
+                traditionalUses: ["Inflammation", "Digestion", "Wound Healing"]
+            },
+            {
+                id: 'res5',
+                title: "Curcumin Clinical Trials for IBD",
+                source: "ClinicalTrials.gov",
+                year: "2022",
+                type: "Clinical Trial",
+                databases: ["Clinical Trials", "PubMed"],
+                snippet: "Randomized controlled trial examining curcumin's effects on inflammatory bowel disease symptoms and biomarkers.",
+                link: "https://clinicaltrials.gov/example",
+                relevance: 94,
+                categories: ["clinical"],
+                related: ["res1", "res2", "res8"],
+                conditions: ["Crohn's Disease", "Ulcerative Colitis"],
+                outcomes: ["Reduced CRP", "Improved symptoms"]
+            },
+            {
+                id: 'res6',
+                title: "Gut Microbiota and Inflammation Pathways",
+                source: "NCBI Gene",
+                year: "2023",
+                type: "Genomic Study",
+                databases: ["NCBI", "Microbiome"],
+                snippet: "Analysis of how specific gut bacteria influence inflammatory pathways relevant to autoimmune conditions.",
+                link: "https://www.ncbi.nlm.nih.gov/gene/example",
+                relevance: 90,
+                categories: ["microbiome"],
+                related: ["res2", "res7"],
+                genes: ["TLR4", "NOD2"],
+                bacteria: ["E. coli", "B. fragilis"]
+            },
+            {
+                id: 'res7',
+                title: "Piperine Enhancement of Curcumin Bioavailability",
+                source: "FoodData Central",
+                year: "2021",
+                type: "Nutrition Study",
+                databases: ["FoodData", "PubChem"],
+                snippet: "Study demonstrating how piperine from black pepper enhances curcumin bioavailability by 2000% through metabolic pathway modulation.",
+                link: "https://fdc.nal.usda.gov/example",
+                relevance: 93,
+                categories: ["nutrition"],
+                related: ["res1", "res3"],
+                compounds: ["Piperine", "Curcumin"],
+                mechanism: "Inhibition of glucuronidation"
+            },
+            {
+                id: 'res8',
+                title: "Comparative Analysis of Anti-Inflammatory Compounds",
+                source: "PubMed",
+                year: "2023",
+                type: "Meta-Analysis",
+                databases: ["PubMed", "PubChem", "Clinical Trials"],
+                snippet: "Systematic comparison of curcumin, resveratrol, and other natural compounds' anti-inflammatory efficacy across clinical studies.",
+                link: "https://pubmed.ncbi.nlm.nih.gov/example",
+                relevance: 96,
+                categories: ["clinical", "nutrition"],
+                related: ["res1", "res5"],
+                compounds: ["Curcumin", "Resveratrol", "Quercetin"],
+                conclusion: "Curcumin shows strongest evidence for chronic inflammation"
+            },
+            {
+                id: 'res9',
+                title: "Curcumin Metabolites and Microbiome Interactions",
+                source: "Microbiome Journal",
+                year: "2023",
+                type: "Research Paper",
+                databases: ["Microbiome", "PubChem"],
+                snippet: "Identification of specific curcumin metabolites produced by gut bacteria and their anti-inflammatory effects on intestinal epithelium.",
+                link: "https://microbiomejournal.com/example",
+                relevance: 91,
+                categories: ["microbiome"],
+                related: ["res1", "res2", "res6"],
+                metabolites: ["Tetrahydrocurcumin", "Hexahydrocurcumin"],
+                effects: ["Reduced IL-8", "Improved barrier function"]
+            },
+            {
+                id: 'res10',
+                title: "Traditional Preparation Methods for Turmeric",
+                source: "Ethnobotanical Database",
+                year: "2020",
+                type: "Cultural Study",
+                databases: ["Phytochemical", "FoodData"],
+                snippet: "Analysis of traditional preparation methods that enhance turmeric's bioavailability and therapeutic effects in various cultural practices.",
+                link: "https://ethnobotany.org/example",
+                relevance: 87,
+                categories: ["herbal"],
+                related: ["res1", "res4", "res7"],
+                methods: ["Heating with fats", "Combination with pepper"]
+            }
+        ];
+        // AI Suggestions based on search patterns
+        const aiSuggestions = [
+            {
+                title: "Explore Related Metabolic Pathways",
+                description: "Curcumin interacts with multiple inflammatory pathways including NF-κB, COX-2, and LOX. View the complete pathway map.",
+                icon: "fas fa-project-diagram",
+                color: "text-blue-500",
+                action: "View Pathways"
+            },
+            {
+                title: "Compare with Similar Compounds",
+                description: "Resveratrol and quercetin share some anti-inflammatory mechanisms with curcumin. See comparative effectiveness data.",
+                icon: "fas fa-balance-scale",
+                color: "text-purple-500",
+                action: "Compare Compounds"
+            },
+            {
+                title: "Microbiome Interaction Analysis",
+                description: "View how curcumin metabolites produced by gut bacteria contribute to its systemic effects.",
+                icon: "fas fa-bacterium",
+                color: "text-green-500",
+                action: "Analyze Interactions"
+            },
+            {
+                title: "Bioavailability Enhancement Methods",
+                description: "Discover formulations and combinations that significantly improve curcumin absorption.",
+                icon: "fas fa-chart-line",
+                color: "text-orange-500",
+                action: "View Methods"
+            }
+        ];
         document.addEventListener('DOMContentLoaded', function() {
+            // Typewriter effect
+            const phrases = [
+                "Cross-Referencing Scientific Research",
+                "AI-Powered Database Connections",
+                "Holistic Health Insights",
+                "Interdisciplinary Research Discovery"
+            ];
+            let currentPhrase = 0;
+            let currentChar = 0;
+            let isDeleting = false;
+            let isEnd = false;
+            function typeWriter() {
+                const typewriterElement = document.querySelector('.typewriter');
+                if (!typewriterElement) return;
+                const currentText = phrases[currentPhrase];
+                if (isDeleting) {
+                    typewriterElement.textContent = currentText.substring(0, currentChar - 1);
+                    currentChar--;
+                } else {
+                    typewriterElement.textContent = currentText.substring(0, currentChar + 1);
+                    currentChar++;
+                }
+                if (!isDeleting && currentChar === currentText.length) {
+                    isEnd = true;
+                    isDeleting = true;
+                    setTimeout(typeWriter, 2000);
+                } else if (isDeleting && currentChar === 0) {
+                    isDeleting = false;
+                    currentPhrase = (currentPhrase + 1) % phrases.length;
+                    setTimeout(typeWriter, 500);
+                } else {
+                    const speed = isDeleting ? 50 : 100;
+                    setTimeout(typeWriter, speed);
+                }
+            }
+            setTimeout(typeWriter, 1000);
+            // Database filter toggles
+            const dbFilters = document.querySelectorAll('#databaseFilters input[type="checkbox"]');
+            dbFilters.forEach(filter => {
+                filter.addEventListener('change', function() {
+                    const parent = this.parentElement;
+                    if (this.checked) {
+                        parent.classList.add('bg-blue-50', 'text-blue-700', 'border-blue-200');
                     } else {
+                        parent.classList.remove('bg-blue-50', 'text-blue-700', 'border-blue-200');
                     }
+                });
+            });
+            // Search functionality
+            document.getElementById('healthSearchButton').addEventListener('click', performSearch);
+            document.getElementById('healthSearchInput').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    performSearch();
+                }
+            });
+            function performSearch() {
+                const searchTerm = document.getElementById('healthSearchInput').value.trim();
+                if (searchTerm) {
+                    // Show loading state
+                    const searchButton = document.getElementById('healthSearchButton');
+                    const originalButtonText = searchButton.innerHTML;
+                    searchButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...';
+                    searchButton.disabled = true;
+                    // In a real app, this would be API calls to the various databases
+                    // For this demo, we'll use setTimeout to simulate network delay
+                    setTimeout(() => {
+                        // Display results
+                        displayResults(searchTerm);
+                        // Restore button
+                        searchButton.innerHTML = originalButtonText;
+                        searchButton.disabled = false;
+                    }, 1500);
                 }
+            }
+            function displayResults(searchTerm) {
+                const resultsContainer = document.getElementById('resultsContainer');
+                const resultCountElement = document.getElementById('resultCount');
+                const dbCountElement = document.getElementById('dbCount');
+                const searchResultsSection = document.getElementById('searchResults');
+                const aiSuggestionsSection = document.getElementById('aiSuggestions');
+                const suggestionsContainer = document.getElementById('suggestionsContainer');
+                // Clear previous results
+                resultsContainer.innerHTML = '';
+                suggestionsContainer.innerHTML = '';
+                // Filter sample results (in real app, this would be done server-side)
+                const filteredResults = sampleResults.filter(result =>
+                    result.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                    result.snippet.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                    (result.compounds && result.compounds.some(c => c.toLowerCase().includes(searchTerm.toLowerCase())))
+                );
+                // Count unique databases
+                const uniqueDBs = new Set();
+                filteredResults.forEach(result => {
+                    result.databases.forEach(db => uniqueDBs.add(db));
+                });
+                // Update result counts
+                resultCountElement.textContent = filteredResults.length;
+                dbCountElement.textContent = uniqueDBs.size;
+                // Display each result
+                filteredResults.forEach(result => {
+                    const resultElement = document.createElement('div');
+                    resultElement.className = 'result-card bg-white p-5 rounded-lg shadow-sm border border-gray-100';
+                    resultElement.innerHTML = `
+                        <div class="flex justify-between items-start mb-2">
+                            <div class="font-medium text-gray-800">${result.title}</div>
+                            <div class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">${result.relevance}% relevance</div>
+                        </div>
+                        <div class="text-gray-500 text-xs mb-3">${result.source} • ${result.year} ${result.type}</div>
+                        <div class="flex flex-wrap text-xs mb-3">
+                            ${result.databases.map(db =>
+                                `<span class="database-chip"><i class="fas fa-database"></i> ${db}</span>`
+                            ).join('')}
+                        </div>
+                        <p class="text-gray-600 text-sm mb-4">${result.snippet}</p>
+                        <div class="flex flex-wrap gap-2 mb-3">
+                            ${result.categories.map(cat =>
+                                `<span class="text-xs px-2 py-1 rounded-full ${getCategoryColor(cat)}">${cat}</span>`
+                            ).join('')}
+                        </div>
+                        <a href="${result.link}" target="_blank" class="text-green-600 text-sm font-medium inline-flex items-center">
+                            View in ${result.databases[0]} <i class="fas fa-external-link-alt ml-1 text-xs"></i>
+                        </a>
+                    `;
+                    resultsContainer.appendChild(resultElement);
+                });
+                // Display AI suggestions
+                aiSuggestions.forEach(suggestion => {
+                    const suggestionElement = document.createElement('div');
+                    suggestionElement.className = 'suggestion-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4';
+                    suggestionElement.innerHTML = `
+                        <div class="flex items-start mb-2">
+                            <div class="${suggestion.color} text-lg mr-3 mt-1">
+                                <i class="${suggestion.icon}"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-gray-800">${suggestion.title}</h4>
+                                <p class="text-gray-600 text-sm">${suggestion.description}</p>
+                            </div>
+                        </div>
+                        <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full mt-2 transition-colors">
+                            ${suggestion.action} <i class="fas fa-arrow-right ml-1"></i>
+                        </button>
+                    `;
+                    suggestionsContainer.appendChild(suggestionElement);
+                });
+                // Create knowledge graph
+                createKnowledgeGraph(filteredResults);
+                // Show results and suggestions sections
+                searchResultsSection.classList.remove('hidden');
+                aiSuggestionsSection.classList.remove('hidden');
+                // Scroll to results
+                searchResultsSection.scrollIntoView({ behavior: 'smooth' });
             }
+            function getCategoryColor(category) {
+                switch(category) {
+                    case 'microbiome': return 'bg-purple-100 text-purple-800';
+                    case 'nutrition': return 'bg-blue-100 text-blue-800';
+                    case 'herbal': return 'bg-green-100 text-green-800';
+                    case 'clinical': return 'bg-orange-100 text-orange-800';
+                    default: return 'bg-gray-100 text-gray-800';
                 }
+            }
+            function createKnowledgeGraph(results) {
+                const graphContainer = document.getElementById('knowledgeGraph');
+                graphContainer.innerHTML = '';
+                // Create nodes for each result
+                const nodes = [];
+                const centerX = graphContainer.offsetWidth / 2;
+                const centerY = graphContainer.offsetHeight / 2;
+                const radius = Math.min(centerX, centerY) * 0.8;
+                // Add main node (search term)
+                const mainNode = document.createElement('div');
+                mainNode.className = 'graph-node bg-green-500';
+                mainNode.style.left = `${centerX - 40}px`;
+                mainNode.style.top = `${centerY - 40}px`;
+                mainNode.textContent = 'Curcumin';
+                nodes.push({ element: mainNode, id: 'main', x: centerX, y: centerY });
+                graphContainer.appendChild(mainNode);
+                // Add result nodes in a circle around main node
+                const angleStep = (2 * Math.PI) / results.length;
+                results.forEach((result, index) => {
+                    const angle = index * angleStep;
+                    const x = centerX + radius * Math.cos(angle) - 40;
+                    const y = centerY + radius * Math.sin(angle) - 40;
+                    const node = document.createElement('div');
+                    node.className = 'graph-node bg-blue-500';
+                    node.style.left = `${x}px`;
+                    node.style.top = `${y}px`;
+                    node.textContent = result.source.split(' ')[0];
+                    // Add relevance badge
+                    const badge = document.createElement('div');
+                    badge.className = 'relevance-badge';
+                    badge.textContent = result.relevance.toString().charAt(0);
+                    node.appendChild(badge);
+                    nodes.push({ element: node, id: result.id, x: x + 40, y: y + 40 });
+                    graphContainer.appendChild(node);
+                    // Create line to main node
+                    const line = document.createElement('div');
+                    line.className = 'graph-line';
+                    const length = Math.sqrt(Math.pow(x + 40 - centerX, 2) + Math.pow(y + 40 - centerY, 2));
+                    const lineAngle = Math.atan2(y + 40 - centerY, x + 40 - centerX);
+                    line.style.width = `${length}px`;
+                    line.style.left = `${centerX}px`;
+                    line.style.top = `${centerY}px`;
+                    line.style.transform = `rotate(${lineAngle}rad)`;
+                    graphContainer.appendChild(line);
+                });
+                // Add interactivity to nodes
+                nodes.forEach(node => {
+                    node.element.addEventListener('click', function() {
+                        // Highlight this node and connected nodes
+                        nodes.forEach(n => {
+                            n.element.style.transform = '';
+                            n.element.style.zIndex = '';
+                        });
+                        this.style.transform = 'scale(1.2)';
+                        this.style.zIndex = '10';
+                        // In a real app, this would show details for the selected node
                     });
+                });
             }
+            // Tab switching functionality
+            const tabButtons = document.querySelectorAll('.tab-button');
+            tabButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // Remove active state from all buttons
+                    tabButtons.forEach(btn => {
+                        btn.classList.remove('border-b-2', 'border-green-500', 'text-green-600');
+                        btn.classList.add('text-gray-500');
+                    });
+                    // Add active state to clicked button
+                    this.classList.add('border-b-2', 'border-green-500', 'text-green-600');
+                    this.classList.remove('text-gray-500');
+                    // In a real app, this would filter the results by category
+                });
+            });
         });
     </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=Neomyst/microbiome-explorer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>