TheDiggem/brainwave-buddy-eeg-monitoring-assistant
its some sort of yellow smiley face now, i want it as a human brain emoji
change icon in web bar to a brain
🧠 Favicon Plan – NeuroShift AI
Overall layout
the demo is not working.
add a background color, "white", for the running eeg demo. can you make wavy, and or spiked waves in the demo?
I want every link to be clickable, and go to an example page of what it should be. Waitlist etc
**Copyright & Attribution Rules:**
```html
A hyper-realistic cinematic image of a neurodiagnostic technologist’s workstation during a 72-hour long-term EEG monitoring study, viewed from slightly behind the desk. Three widescreen monitors show a realistic medical interface.
Make a button to click and a demo to a running 72 hour remote eeg study, and show example of alerts, i want an clickable link to show a running demo of the product in use.
rename to NeuroShift AI
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BrainWave Buddy - AI-Powered EEG Monitoring Assistant</title> <meta name="description" content="Reduce time-to-insight in EEG monitoring with real-time event detection and annotation assistance. Designed for clinical EEG techs and researchers."> <!-- Open Graph / Twitter --> <meta property="og:title" content="BrainWave Buddy - AI-Powered EEG Monitoring Assistant"> <meta property="og:description" content="Real-time EEG monitoring assistance for clinical workflows and research."> <meta property="og:type" content="website"> <meta property="og:url" content="https://brainwavebuddy.ai"> <meta property="og:image" content="https://static.photos/technology/1200x630/42"> <!-- Favicon --> <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>"> <!-- Tailwind CSS --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#4F46E5', dark: '#0B1020', accent: '#22D3EE', surface: '#0F172A', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script> <!-- Feather Icons --> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #0B1020; color: #F1F5F9; scroll-behavior: smooth; } .hero-bg { background-image: url("data:image/svg+xml,%3Csvg width='1440' height='600' viewBox='0 0 1440 600' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 300C100 250 200 350 300 300C400 250 500 350 600 300C700 250 800 350 900 300C1000 250 1100 350 1200 300C1300 250 1400 350 1440 300' stroke='%234F46E5' stroke-width='2' stroke-opacity='0.1'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: cover; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3); } .transition-all { transition: all 0.3s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .transition-all { transition: none; } } </style> </head> <body class="min-h-screen"> <!-- Header/Nav --> <header class="sticky top-0 z-50 bg-surface/90 backdrop-blur-sm border-b border-slate-800"> <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <div class="flex justify-between items-center"> <div class="flex items-center space-x-2"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" fill="#4F46E5"/> <path d="M11 16C11 18.2091 12.7909 20 15 20C17.2091 20 19 18.2091 19 16C19 13.7909 17.2091 12 15 12C12.7909 12 11 13.7909 11 16Z" fill="white"/> <path d="M22 16C22 17.1046 21.1046 18 20 18C18.8954 18 18 17.1046 18 16C18 14.8954 18.8954 14 20 14C21.1046 14 22 14.8954 22 16Z" fill="white"/> <path d="M10 16C10 16.5523 9.55228 17 9 17C8.44772 17 8 16.5523 8 16C8 15.4477 8.44772 15 9 15C9.55228 15 10 15.4477 10 16Z" fill="white"/> <path d="M24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16Z" fill="white"/> <path d="M8 16H24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 2"/> </svg> <span class="text-xl font-bold text-white">BrainWave Buddy</span> </div> <div class="hidden md:flex space-x-8 mobile-menu"> <a href="#features" class="text-slate-300 hover:text-white transition-all">Features</a> <a href="#how-it-works" class="text-slate-300 hover:text-white transition-all">How It Works</a> <a href="#pricing" class="text-slate-300 hover:text-white transition-all">Pricing</a> <a href="#faq" class="text-slate-300 hover:text-white transition-all">FAQ</a> <a href="#contact" class="text-slate-300 hover:text-white transition-all">Contact</a> </div> <div class="flex items-center space-x-4"> <a href="#demo" class="hidden md:inline-block px-4 py-2 text-sm font-medium text-white hover:text-accent transition-all">Demo</a> <a href="#contact" class="inline-block px-6 py-2 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-all">Request Access</a> <button class="md:hidden text-slate-300 hover:text-white focus:outline-none" aria-label="Mobile menu"> <i data-feather="menu"></i> </button> </div> </div> </nav> </header> <!-- Hero Section --> <section class="hero-bg py-20 md:py-32" aria-label="Main introduction"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Accelerate EEG Insights with AI Assistance</h1> <p class="text-xl md:text-2xl text-slate-300 max-w-3xl mx-auto mb-10"> Reduce EEG review times by 50% with real-time event detection and standardized annotations for clinical teams. </p> <div class="flex flex-col sm:flex-row justify-center gap-4"> <a href="#contact" class="px-8 py-3 bg-accent text-white font-medium rounded-lg hover:bg-accent/90 transition-all text-center"> Join the Waitlist – Limited Spots Available </a> <a href="#demo" class="px-8 py-3 border border-slate-600 text-white font-medium rounded-lg hover:border-accent hover:text-accent transition-all text-center"> See Live Demo </a> </div> </div> </div> </section> <!-- Social Proof --> <section class="py-16 bg-surface"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <p class="text-center text-slate-400 mb-10">Trusted by leading neurodiagnostic labs and research institutions</p> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center"> <div class="flex justify-center"> <div class="h-12 w-32 bg-slate-800 rounded-lg flex items-center justify-center text-slate-400">NeuroLab</div> </div> <div class="flex justify-center"> <div class="h-12 w-32 bg-slate-800 rounded-lg flex items-center justify-center text-slate-400">BrainTech</div> </div> <div class="flex justify-center"> <div class="h-12 w-32 bg-slate-800 rounded-lg flex items-center justify-center text-slate-400">NeuroSys</div> </div> <div class="flex justify-center"> <div class="h-12 w-32 bg-slate-800 rounded-lg flex items-center justify-center text-slate-400">EEG Research</div> </div> </div> </div> </section> <!-- Problem → Outcome --> <section class="py-20 bg-dark"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div> <h2 class="text-3xl font-bold text-white mb-6">The Challenge of Manual EEG Monitoring</h2> <p class="text-slate-300 mb-6"> EEG technicians spend hours manually reviewing waveforms, identifying potential events, and documenting findings. This labor-intensive process is prone to fatigue-related oversights and inconsistent annotations. </p> <ul class="space-y-3 text-slate-300"> <li class="flex items-start"> <i data-feather="alert-circle" class="mr-2 text-red-400 mt-0.5"></i> <span>Missed events during long monitoring sessions</span> </li> <li class="flex items-start"> <i data-feather="clock" class="mr-2 text-yellow-400 mt-0.5"></i> <span>Time-consuming manual annotation processes</span> </li> <li class="flex items-start"> <i data-feather="activity" class="mr-2 text-purple-400 mt-0.5"></i> <span>Inconsistent documentation across technicians</span> </li> </ul> </div> <div class="bg-slate-900 rounded-xl p-6 border border-slate-800"> <h3 class="text-xl font-semibold text-white mb-4">With BrainWave Buddy</h3> <p class="text-slate-300 mb-6"> Our AI assistant provides real-time event detection and standardized annotation suggestions, allowing technicians to focus on clinical interpretation rather than manual searching. </p> <ul class="space-y-3 text-slate-300"> <li class="flex items-start"> <i data-feather="check-circle" class="mr-2 text-green-400 mt-0.5"></i> <span>Real-time alerts for potential events of interest</span> </li> <li class="flex items-start"> <i data-feather="zap" class="mr-2 text-accent mt-0.5"></i> <span>50% faster review times in pilot studies</span> </li> <li class="flex items-start"> <i data-feather="file-text" class="mr-2 text-blue-400 mt-0.5"></i> <span>Standardized annotations across your team</span> </li> </ul> </div> </div> </div> </section> <!-- Features --> <section id="features" class="py-20 bg-surface"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold text-white mb-4">Key Features</h2> <p class="text-xl text-slate-300 max-w-3xl mx-auto"> Designed to enhance clinical workflows and research efficiency </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Feature 1 --> <div class="feature-card bg-slate-900 rounded-xl p-8 border border-slate-800 transition-all hover:border-primary/50"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6"> <i data-feather="activity" class="text-primary w-6 h-6"></i> </div> <h3 class="text-xl font-semibold text-white mb-3">Event Detection</h3> <p class="text-slate-400"> Real-time identification of spikes, seizures, and artifacts with adjustable sensitivity thresholds. </p> </div> <!-- Feature 2 --> <div class="feature-card bg-slate-900 rounded-xl p-8 border border-slate-800 transition-all hover:border-primary/50"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6"> <i data-feather="bar-chart-2" class="text-primary w-6 h-6"></i> </div> <h3 class="text-xl font-semibold text-white mb-3">PAC Scoring</h3> <p class="text-slate-400"> Phase-amplitude coupling analysis with visualizations and configurable parameters. </p> </div> <!-- Feature 3 --> <div class="feature-card bg-slate-900 rounded-xl p-8 border border-slate-800 transition-all hover:border-primary/50"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6"> <i data-feather="bookmark" class="text-primary w-6 h-6"></i> </div> <h3 class="text-xl font-semibold text-white mb-3">Timeline Bookmarks</h3> <p class="text-slate-400"> Quickly navigate to important events and add custom annotations with keyboard shortcuts. </p> </div> <!-- Feature 4 --> <div class="feature-card bg-slate-900 rounded-xl p-8 border border-slate-800 transition-all hover:border-primary/50"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6"> <i data-feather="download" class="text-primary w-6 h-6"></i> </div> <h3 class="text-xl font-semibold text-white mb-3">Export Formats</h3> <p class="text-slate-400"> Export to EDF, BIDS, and PDF with technologist notes and event summaries. </p> </div> <!-- Feature 5 --> <div class="feature-card bg-slate-900 rounded-xl p-8 border border-slate-800 transition-all hover:border-primary/50"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6"> <i data-feather="cpu" class="text-primary w-6 h-6"></i> </div> <h3 class="text-xl font-semibold text-white mb-3">Device Agnostic</h3> <p class="text-slate-400"> Works with most clinical EEG systems. g.tec and other integrations available. </p> </div> <!-- Feature 6 --> <div class="feature-card bg-slate-900 rounded-xl p-8 border border-slate-800 transition-all hover:border-primary/50"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6"> <i data-feather="lock" class="text-primary w-6 h-6"></i> </div> <h3 class="text-xl font-semibold text-white mb-3">Privacy Controls</h3> <p class="text-slate-400"> HIPAA-aligned deployment options with audit logging and role-based access. </p> </div> </div> </div> </section> <!-- Example Alert --> <section class="py-16 bg-surface"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="bg-slate-900 rounded-xl p-6 border border-red-500/50 max-w-2xl mx-auto"> <div class="flex items-start"> <div class="flex-shrink-0 bg-red-500/10 rounded-full p-2"> <i data-feather="alert-triangle" class="text-red-500 w-5 h-5"></i> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-white">Potential Seizure Detected</h3> <div class="mt-2 text-slate-400 text-sm"> <p>Patient ID: EEG-72HR-0042</p> <p>Study: 72-hour Remote EEG Monitoring</p> <p>Time detected: 03:42:15 (02:15:36 into study)</p> <p class="mt-2">EEG pattern suggests possible focal seizure activity in left temporal lobe.</p> </div> <div class="mt-4 flex space-x-3"> <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700"> Review Now </button> <button class="inline-flex items-center px-3 py-2 border border-slate-700 text-sm leading-4 font-medium rounded-md text-slate-300 hover:text-white"> Mark as False Positive </button> </div> </div> </div> </div> </div> </section> <!-- Dashboard Example --> <section id="dashboard" class="py-20 bg-dark"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold text-white mb-4">Monitoring Dashboard</h2> <p class="text-xl text-slate-300 max-w-3xl mx-auto"> Real-time overview of active EEG studies </p> </div> <div class="bg-slate-900 rounded-xl p-6 border border-slate-800 overflow-hidden"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <!-- Active Study 1 --> <div class="bg-slate-800 rounded-lg p-4 border border-slate-700"> <div class="flex justify-between items-start"> <div> <h3 class="font-medium text-white">Patient EEG-72HR-0042</h3> <p class="text-sm text-slate-400">72-hour Remote EEG</p> </div> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200"> Active </span> </div> <div class="mt-4"> <div class="flex justify-between text-sm text-slate-400 mb-1"> <span>Duration</span> <span>02:18:22 / 72:00:00</span> </div> <div class="w-full bg-slate-700 rounded-full h-1.5"> <div class="bg-green-500 h-1.5 rounded-full" style="width: 3.2%"></div> </div> <div class="mt-4"> <div class="flex items-center text-sm text-slate-400"> <span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span> <span>1 High-priority alert</span> </div> </div> </div> </div> <!-- Active Study 2 --> <div class="bg-slate-800 rounded-lg p-4 border border-slate-700"> <div class="flex justify-between items-start"> <div> <h3 class="font-medium text-white">Patient EEG-24HR-0117</h3> <p class="text-sm text-slate-400">24-hour Sleep Study</p> </div> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200"> Active </span> </div> <div class="mt-4"> <div class="flex justify-between text-sm text-slate-400 mb-1"> <span>Duration</span> <span>08:42:15 / 24:00:00</span> </div> <div class="w-full bg-slate-700 rounded-full h-1.5"> <div class="bg-green-500 h-1.5 rounded-full" style="width: 36.2%"></div> </div> <div class="mt-4"> <div class="flex items-center text-sm text-slate-400"> <span class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></span> <span>3 Moderate alerts</span> </div> </div> </div> </div> <!-- Active Study 3 --> <div class="bg-slate-800 rounded-lg p-4 border border-slate-700"> <div class="flex justify-between items-start"> <div> <h3 class="font-medium text-white">Patient EEG-48HR-0093</h3> <p class="text-sm text-slate-400">48-hour ICU Monitoring</p> </div> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200"> Paused </span> </div> <div class="mt-4"> <div class="flex justify-between text-sm text-slate-400 mb-1"> <span>Duration</span> <span>22:15:08 / 48:00:00</span> </div> <div class="w-full bg-slate-700 rounded-full h-1.5"> <div class="bg-blue-500 h-1.5 rounded-full" style="width: 46.3%"></div> </div> <div class="mt-4"> <div class="flex items-center text-sm text-slate-400"> <span class="w-2 h-2 rounded-full bg-gray-500 mr-2"></span> <span>No active alerts</span> </div> </div> </div> </div> </div> <!-- Recent Alerts Table --> <div class="mt-8"> <h3 class="text-lg font-medium text-white mb-4">Recent Alerts</h3> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-slate-700"> <thead class="bg-slate-800"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Time</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Patient</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Event Type</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Confidence</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Status</th> </tr> </thead> <tbody class="bg-slate-900 divide-y divide-slate-700"> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">03:42:15</td> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">EEG-72HR-0042</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">Focal Seizure</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200"> 87% Confidence </span> </td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">Pending Review</td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">02:56:22</td> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">EEG-24HR-0117</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">Spike Wave</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200"> 72% Confidence </span> </td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">Reviewed</td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">01:18:43</td> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">EEG-24HR-0117</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">Artifact</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200"> 65% Confidence </span> </td> <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">Dismissed</td> </tr> </tbody> </table> </div> </div> </div> </div> </section> <!-- How It Works --> <section id="how-it-works" class="py-20 bg-dark"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px <script> // Mobile menu toggle document.addEventListener('DOMContentLoaded', function() { feather.replace(); const mobileMenuButton = document.querySelector('button[aria-label="Mobile menu"]'); const mobileMenu = document.querySelector('.mobile-menu'); if (mobileMenuButton && mobileMenu) { mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); }); } }); </script> </body> </html>
The provided HTML code appears to be a landing page for "BrainWave Buddy," an AI-powered EEG monitoring assistant. It's a solid start with a clean dark theme, Tailwind CSS integration, and sections that cover key marketing elements like hero, features, and dashboard examples. However, there are opportunities for technical fixes, usability enhancements, content refinements, and performance optimizations to make it more professional, accessible, and effective at converting visitors (e.g., into access requests). I'll break down my advice into categories, prioritizing high-impact changes first.
i would like to add an example of an alert, and concept idea of a dashboard with different running studies, and an alert for a possible seizure during a 72 hour remote eeg.
Manual changes saved
# NeuroShift AI — One‑Shot Prompt to Generate a Complete Web Page
initial commit