Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Notes - MediScribe</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: '#2563eb', | |
| 'primary-hover': '#eff6ff', | |
| border: '#e5e7eb', | |
| background: '#f8fafc', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-thumb { | |
| background: #d1d5db; | |
| border-radius: 3px; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-thumb:hover { | |
| background: #9ca3af; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .group:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-background text-gray-800"> | |
| <!-- Sticky Header --> | |
| <header class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-border z-50 flex items-center justify-between px-4"> | |
| <!-- Left: Logo --> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center"> | |
| <i data-lucide="activity" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="font-semibold text-lg text-gray-900 hidden sm:block">MediScribe</span> | |
| </div> | |
| <!-- Center: Search --> | |
| <div class="flex-1 max-w-xl mx-4"> | |
| <div class="relative"> | |
| <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i> | |
| <input type="text" placeholder="Search patients, appointments, notes..." | |
| class="w-full h-10 pl-10 pr-4 bg-gray-50 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"> | |
| </div> | |
| </div> | |
| <!-- Right: Actions --> | |
| <div class="flex items-center gap-2"> | |
| <button class="w-10 h-10 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors relative"> | |
| <i data-lucide="bell" class="w-5 h-5 text-gray-600"></i> | |
| <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors relative"> | |
| <i data-lucide="message-square" class="w-5 h-5 text-gray-600"></i> | |
| <span class="absolute top-2 right-2 w-2 h-2 bg-primary rounded-full"></span> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors"> | |
| <i data-lucide="help-circle" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| <div class="relative ml-2"> | |
| <button id="userMenuBtn" class="flex items-center gap-2 p-1 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <img src="https://static.photos/people/200x200/42" alt="Dr. Smith" class="w-8 h-8 rounded-full object-cover"> | |
| <i data-lucide="chevron-down" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| <div id="userMenu" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-lg border border-border py-2"> | |
| <a href="#" class="flex items-center gap-3 px-4 py-2 hover:bg-primary-hover text-sm"> | |
| <i data-lucide="user" class="w-4 h-4"></i> Profile | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-4 py-2 hover:bg-primary-hover text-sm"> | |
| <i data-lucide="settings" class="w-4 h-4"></i> Settings | |
| </a> | |
| <div class="border-t border-border my-2"></div> | |
| <a href="#" class="flex items-center gap-3 px-4 py-2 hover:bg-primary-hover text-sm text-red-600"> | |
| <i data-lucide="log-out" class="w-4 h-4"></i> Sign out | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex pt-16 min-h-screen"> | |
| <!-- Primary Icon Sidebar --> | |
| <aside class="fixed left-0 top-16 bottom-0 w-[72px] bg-white border-r border-border z-40 flex flex-col"> | |
| <nav class="flex-1 py-4 space-y-1 overflow-y-auto scrollbar-thin"> | |
| <!-- Dashboard --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="layout-dashboard" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Dashboard</span> | |
| </a> | |
| <!-- Patients --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="users" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Patients</span> | |
| </a> | |
| <!-- Appointments --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="calendar" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Appointments</span> | |
| </a> | |
| <!-- Encounters --> | |
| <a href="index.html" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="stethoscope" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Encounters</span> | |
| </a> | |
| <!-- Forms --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="file-text" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Forms</span> | |
| </a> | |
| <!-- Communication --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="message-circle" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Communication</span> | |
| </a> | |
| <!-- Tasks --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="check-square" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Tasks</span> | |
| </a> | |
| <!-- Documents --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="folder" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Documents</span> | |
| </a> | |
| <!-- Billing --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="credit-card" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Billing</span> | |
| </a> | |
| <!-- Reports --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="bar-chart-2" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Reports</span> | |
| </a> | |
| <!-- Staff --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="user-plus" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Staff</span> | |
| </a> | |
| <!-- Integrations --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="plug" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Integrations</span> | |
| </a> | |
| <!-- Settings --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors mt-auto"> | |
| <i data-lucide="settings" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Settings</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| <!-- Secondary Patient Sidebar --> | |
| <aside id="patientSidebar" class="fixed left-[72px] top-16 bottom-0 w-[260px] bg-white border-r border-border z-30 overflow-y-auto scrollbar-thin hidden lg:block"> | |
| <div class="p-4"> | |
| <!-- Patient Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Patient</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="user" class="w-4 h-4"></i> Overview | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="id-card" class="w-4 h-4"></i> Profile | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="phone" class="w-4 h-4"></i> Contact | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="shield" class="w-4 h-4"></i> Insurance | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Care Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Care</h3> | |
| <nav class="space-y-1"> | |
| <a href="appointments.html" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="calendar-check" class="w-4 h-4"></i> Appointments | |
| </a> | |
| <a href="index.html" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="stethoscope" class="w-4 h-4"></i> Encounters | |
| </a> | |
| <a href="notes.html" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary text-white"> | |
| <i data-lucide="file-text" class="w-4 h-4"></i> Notes | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="check-circle" class="w-4 h-4"></i> Tasks | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="activity" class="w-4 h-4"></i> Activity | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Documents Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Documents</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="folder-open" class="w-4 h-4"></i> Files | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="clipboard-list" class="w-4 h-4"></i> Forms | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Billing Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Billing</h3> | |
| <nav class="space-y-1"> | |
| <a href="invoices.html" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="receipt" class="w-4 h-4"></i> Invoices | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Communication Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Communication</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> Email | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="message-square" class="w-4 h-4"></i> Messages | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobileMenuBtn" class="lg:hidden fixed bottom-4 right-4 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center z-50"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| <!-- Main Content --> | |
| <main class="flex-1 lg:ml-[332px] ml-[72px] p-6"> | |
| <div class="max-w-[1280px] mx-auto"> | |
| <!-- Patient Header --> | |
| <div class="bg-white rounded-xl border border-border p-4 mb-6"> | |
| <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> | |
| <div class="flex items-center gap-4"> | |
| <img src="https://static.photos/people/200x200/88" alt="Sarah Johnson" class="w-16 h-16 rounded-full object-cover"> | |
| <div> | |
| <h1 class="text-xl font-semibold text-gray-900">Sarah Johnson</h1> | |
| <p class="text-sm text-gray-500">PT-2024-001</p> | |
| <div class="flex gap-2 mt-2"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full">Active Patient</span> | |
| <span class="px-2 py-1 bg-blue-50 text-primary text-xs font-medium rounded-full">Insurance Verified</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="px-4 py-2 border border-border rounded-lg text-sm font-medium text-gray-700 hover:bg-primary-hover transition-colors"> | |
| Contact | |
| </button> | |
| <button class="px-4 py-2 border border-border rounded-lg text-sm font-medium text-gray-700 hover:bg-primary-hover transition-colors"> | |
| Files | |
| </button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors flex items-center gap-2"> | |
| Actions <i data-lucide="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Page Header --> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-900">Clinical Notes</h2> | |
| <p class="text-gray-500">Patient documentation and medical records</p> | |
| </div> | |
| <!-- Notes List --> | |
| <div class="bg-white rounded-xl border border-border overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-border flex items-center justify-between"> | |
| <h3 class="font-semibold text-gray-900">All Notes</h3> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors flex items-center gap-2"> | |
| <i data-lucide="plus" class="w-4 h-4"></i> | |
| New Note | |
| </button> | |
| </div> | |
| <div class="divide-y divide-border"> | |
| <!-- Note 1 --> | |
| <div class="p-6 hover:bg-primary-hover transition-colors cursor-pointer"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <span class="px-2 py-1 bg-purple-50 text-purple-700 text-xs font-medium rounded-full">SOAP Note</span> | |
| <span class="text-sm text-gray-500">Mar 20, 2026</span> | |
| </div> | |
| <h4 class="font-medium text-gray-900 mb-1">Follow-up Consultation - Lower Back Pain</h4> | |
| <p class="text-sm text-gray-600 line-clamp-2">Patient reports continued improvement in lower back pain. Physical therapy exercises being performed regularly. Pain level decreased from 7/10 to 4/10...</p> | |
| <div class="flex items-center gap-4 mt-3"> | |
| <div class="flex items-center gap-2"> | |
| <img src="https://static.photos/people/200x200/42" alt="Dr. Smith" class="w-6 h-6 rounded-full object-cover"> | |
| <span class="text-sm text-gray-600">Dr. Mary Smith</span> | |
| </div> | |
| <span class="text-xs text-gray-400">Encounter #ENC-2026-003</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="eye" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="download" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Note 2 --> | |
| <div class="p-6 hover:bg-primary-hover transition-colors cursor-pointer"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <span class="px-2 py-1 bg-blue-50 text-blue-700 text-xs font-medium rounded-full">Progress Note</span> | |
| <span class="text-sm text-gray-500">Mar 10, 2026</span> | |
| </div> | |
| <h4 class="font-medium text-gray-900 mb-1">Physical Therapy Progress</h4> | |
| <p class="text-sm text-gray-600 line-clamp-2">Patient demonstrating good compliance with home exercise program. Core strength improving. Range of motion in lumbar spine increased...</p> | |
| <div class="flex items-center gap-4 mt-3"> | |
| <div class="flex items-center gap-2"> | |
| <img src="https://static.photos/people/200x200/42" alt="Dr. Smith" class="w-6 h-6 rounded-full object-cover"> | |
| <span class="text-sm text-gray-600">Dr. Mary Smith</span> | |
| </div> | |
| <span class="text-xs text-gray-400">Encounter #ENC-2026-002</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="eye" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="download" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Note 3 --> | |
| <div class="p-6 hover:bg-primary-hover transition-colors cursor-pointer"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full">Initial Evaluation</span> | |
| <span class="text-sm text-gray-500">Feb 20, 2026</span> | |
| </div> | |
| <h4 class="font-medium text-gray-900 mb-1">Initial Consultation - Chronic Lower Back Pain</h4> | |
| <p class="text-sm text-gray-600 line-clamp-2">Patient presents with 6-month history of chronic lower back pain. No history of trauma. Pain radiates occasionally to right buttock. No neurological symptoms...</p> | |
| <div class="flex items-center gap-4 mt-3"> | |
| <div class="flex items-center gap-2"> | |
| <img src="https://static.photos/people/200x200/42" alt="Dr. Smith" class="w-6 h-6 rounded-full object-cover"> | |
| <span class="text-sm text-gray-600">Dr. Mary Smith</span> | |
| </div> | |
| <span class="text-xs text-gray-400">Encounter #ENC-2026-001</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="eye" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="download" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Note 4 --> | |
| <div class="p-6 hover:bg-primary-hover transition-colors cursor-pointer"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <span class="px-2 py-1 bg-red-50 text-red-700 text-xs font-medium rounded-full">Urgent Care</span> | |
| <span class="text-sm text-gray-500">Jan 15, 2026</span> | |
| </div> | |
| <h4 class="font-medium text-gray-900 mb-1">Acute Back Pain Episode</h4> | |
| <p class="text-sm text-gray-600 line-clamp-2">Patient presented with acute exacerbation of lower back pain following lifting incident. Pain rated 9/10. Muscle spasm noted in lumbar paraspinals...</p> | |
| <div class="flex items-center gap-4 mt-3"> | |
| <div class="flex items-center gap-2"> | |
| <img src="https://static.photos/people/200x200/55" alt="Dr. Wilson" class="w-6 h-6 rounded-full object-cover"> | |
| <span class="text-sm text-gray-600">Dr. James Wilson</span> | |
| </div> | |
| <span class="text-xs text-gray-400">Encounter #ENC-2025-045</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="eye" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-lucide="download" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // User menu toggle | |
| const userMenuBtn = document.getElementById('userMenuBtn'); | |
| const userMenu = document.getElementById('userMenu'); | |
| userMenuBtn.addEventListener('click', () => { | |
| userMenu.classList.toggle('hidden'); | |
| }); | |
| document.addEventListener('click', (e) => { | |
| if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) { | |
| userMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const patientSidebar = document.getElementById('patientSidebar'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| patientSidebar.classList.toggle('hidden'); | |
| patientSidebar.classList.toggle('fixed'); | |
| patientSidebar.classList.toggle('inset-0'); | |
| patientSidebar.classList.toggle('z-50'); | |
| patientSidebar.classList.toggle('w-full'); | |
| patientSidebar.classList.toggle('lg:w-[260px]'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |