Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediConnect AI - Healthcare Communication Platform</title> | |
| <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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); | |
| } | |
| .pulse-ring { | |
| content: ''; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| animation: pulse 2s infinite; | |
| z-index: -1; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.9); | |
| opacity: 1; | |
| } | |
| 70% { | |
| transform: scale(1.3); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(0.9); | |
| opacity: 0; | |
| } | |
| } | |
| .message-in { | |
| border-radius: 18px 18px 18px 0; | |
| background-color: #e0e7ff; | |
| } | |
| .message-out { | |
| border-radius: 18px 18px 0 18px; | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 aspect ratio */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .protocol-step { | |
| position: relative; | |
| padding-left: 2rem; | |
| } | |
| .protocol-step:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0.5rem; | |
| top: 0; | |
| height: 100%; | |
| width: 2px; | |
| background-color: #e2e8f0; | |
| } | |
| .protocol-step:first-child:before { | |
| top: 1rem; | |
| height: calc(100% - 1rem); | |
| } | |
| .protocol-step:last-child:before { | |
| height: 1rem; | |
| } | |
| .protocol-step-number { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .knowledge-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 80px; | |
| } | |
| .sidebar-expanded { | |
| width: 260px; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #c7d2fe; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #a5b4fc; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-lg flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-heartbeat text-xl"></i> | |
| </div> | |
| <span id="logo-text" class="ml-3 font-bold text-lg">MediConnect AI</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto py-4"> | |
| <nav> | |
| <div class="px-4 mb-6"> | |
| <p id="nav-title" class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Navigation</p> | |
| <div class="mt-4 space-y-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700" onclick="showSection('dashboard')"> | |
| <i class="fas fa-home mr-3 text-blue-600"></i> | |
| <span id="dashboard-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" onclick="showSection('voice-ai')"> | |
| <i class="fas fa-microphone mr-3 text-gray-400"></i> | |
| <span id="ai-text">AI Voice Assistant</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" onclick="showSection('chat')"> | |
| <i class="fas fa-comments mr-3 text-gray-400"></i> | |
| <span id="chat-text">Patient Chat</span> | |
| <span class="ml-auto inline-block px-2 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-800">3</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" onclick="showSection('video')"> | |
| <i class="fas fa-video mr-3 text-gray-400"></i> | |
| <span id="video-text">Video Consultations</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="px-4 mb-6"> | |
| <p id="resources-title" class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Resources</p> | |
| <div class="mt-4 space-y-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" onclick="showSection('protocols')"> | |
| <i class="fas fa-clipboard-list mr-3 text-gray-400"></i> | |
| <span id="protocols-text">Treatment Protocols</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" onclick="showSection('knowledgebase')"> | |
| <i class="fas fa-book mr-3 text-gray-400"></i> | |
| <span id="knowledge-text">Knowledge Base</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="px-4 mb-6"> | |
| <p id="settings-title" class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Settings</p> | |
| <div class="mt-4 space-y-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" onclick="showSection('voice-training')"> | |
| <i class="fas fa-voice mr-3 text-gray-400"></i> | |
| <span id="voice-text">Voice Training</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900" onclick="showSection('settings')"> | |
| <i class="fas fa-cog mr-3 text-gray-400"></i> | |
| <span id="settings-text">Settings</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t"> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/med/men/75.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white"></span> | |
| </div> | |
| <div id="user-info" class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Dr. Smith</p> | |
| <p class="text-xs font-medium text-gray-500">Online</p> | |
| </div> | |
| <button class="ml-auto text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <h1 id="section-title" class="text-2xl font-bold text-gray-900">Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search patients, protocols..."> | |
| </div> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-bell"></i> | |
| <span class="sr-only">Notifications</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main content sections --> | |
| <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8"> | |
| <!-- Dashboard Section --> | |
| <div id="dashboard-section" class="section-content"> | |
| <!-- Stats cards --> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Card 1 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out hover:shadow-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> | |
| <i class="fas fa-user-injured text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Active Patients</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">142</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-baseline"> | |
| <span class="text-sm font-medium text-green-600">+8.5%</span> | |
| <span class="ml-2 text-sm text-gray-500">from last month</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out hover:shadow-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-3"> | |
| <i class="fas fa-calendar-check text-green-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Today's Appointments</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">16</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-baseline"> | |
| <span class="text-sm font-medium text-green-600">+2</span> | |
| <span class="ml-2 text-sm text-gray-500">from yesterday</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out hover:shadow-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-100 rounded-md p-3"> | |
| <i class="fas fa-comment-medical text-purple-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Pending Messages</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">23</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-baseline"> | |
| <span class="text-sm font-medium text-red-600">+5</span> | |
| <span class="ml-2 text-sm text-gray-500">since yesterday</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out hover:shadow-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3"> | |
| <i class="fas fa-video text-yellow-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Video Consults</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">7</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-baseline"> | |
| <span class="text-sm font-medium text-green-600">+3</span> | |
| <span class="ml-2 text-sm text-gray-500">this week</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming appointments --> | |
| <div class="mt-8"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Upcoming Appointments</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">Follow-up consultation</div> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-medium text-gray-900">10:30 AM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </div> | |
| <button class="ml-4 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-5 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200"> | |
| Start | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Michael Brown</div> | |
| <div class="text-sm text-gray-500">Initial assessment</div> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-medium text-gray-900">2:15 PM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </div> | |
| <button class="ml-4 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-5 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200"> | |
| Start | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Emily Davis</div> | |
| <div class="text-sm text-gray-500">Post-treatment review</div> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-medium text-gray-900">9:00 AM</div> | |
| <div class="text-sm text-gray-500">Tomorrow</div> | |
| </div> | |
| <button class="ml-4 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-5 font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200"> | |
| Remind | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 border-t border-gray-200"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all appointments</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Voice Assistant Section --> | |
| <div id="voice-ai-section" class="section-content hidden"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">AI Voice Assistant</h2> | |
| <p class="mt-1 text-sm text-gray-500">Interact with patients using your AI voice clone</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-col items-center justify-center py-8"> | |
| <div class="relative"> | |
| <button id="voice-toggle" class="w-24 h-24 rounded-full gradient-bg flex items-center justify-center text-white shadow-lg hover:shadow-xl transition-all duration-300"> | |
| <i class="fas fa-microphone text-3xl"></i> | |
| </button> | |
| <div class="pulse-ring"></div> | |
| </div> | |
| <p id="voice-status" class="mt-4 text-sm font-medium text-gray-500">Click to start speaking</p> | |
| <div class="mt-8 w-full max-w-2xl"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-medium text-gray-900">Voice Settings</h3> | |
| <button class="text-sm font-medium text-blue-600 hover:text-blue-500">Advanced Settings</button> | |
| </div> | |
| <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">Voice Style</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Professional</option> | |
| <option>Compassionate</option> | |
| <option>Authoritative</option> | |
| <option>Friendly</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">Speaking Rate</label> | |
| <input type="range" min="0.5" max="2" step="0.1" value="1" class="mt-2 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Slower</span> | |
| <span>Faster</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700">Current Patient</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Select a patient...</option> | |
| <option>Sarah Johnson (Follow-up)</option> | |
| <option>Michael Brown (Initial assessment)</option> | |
| <option>Emily Davis (Post-treatment)</option> | |
| <option>Robert Wilson (Chronic care)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Conversation History</h3> | |
| <div class="mt-4 space-y-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg message-in"> | |
| <p class="text-sm text-gray-800">Hello Dr. Smith, I've been experiencing some discomfort in my lower back since yesterday.</p> | |
| <p class="mt-1 text-xs text-gray-500">Sarah Johnson - 10:30 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-500 p-3 rounded-lg message-out max-w-xs"> | |
| <p class="text-sm text-white">Hello Sarah, I'm sorry to hear that. Can you describe the pain for me? Is it sharp or dull?</p> | |
| <p class="mt-1 text-xs text-blue-100 text-right">AI Assistant - 10:31 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg message-in"> | |
| <p class="text-sm text-gray-800">It's more of a dull ache, and it gets worse when I sit for long periods.</p> | |
| <p class="mt-1 text-xs text-gray-500">Sarah Johnson - 10:32 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Patient Chat Section --> | |
| <div id="chat-section" class="section-content hidden"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient avatar"> | |
| <div class="ml-3"> | |
| <h2 class="text-lg font-medium text-gray-900">Lisa Thompson</h2> | |
| <p class="text-sm text-gray-500">Last seen 15 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="h-96 overflow-y-auto p-4 bg-gray-50"> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg message-in shadow-sm"> | |
| <p class="text-sm text-gray-800">Hello Dr. Smith, I was wondering about the test results from last week?</p> | |
| <p class="mt-1 text-xs text-gray-500">Lisa - 2:30 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-500 p-3 rounded-lg message-out shadow-sm max-w-xs"> | |
| <p class="text-sm text-white">Hi Lisa, I've reviewed your results and everything looks normal. The blood work shows no abnormalities.</p> | |
| <p class="mt-1 text-xs text-blue-100 text-right">You - 2:32 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg message-in shadow-sm"> | |
| <p class="text-sm text-gray-800">That's great to hear! Should I continue with the same medication?</p> | |
| <p class="mt-1 text-xs text-gray-500">Lisa - 2:33 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-500 p-3 rounded-lg message-out shadow-sm max-w-xs"> | |
| <p class="text-sm text-white">Yes, please continue for another week as discussed. Let me know if you experience any side effects.</p> | |
| <p class="mt-1 text-xs text-blue-100 text-right">You - 2:35 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg message-in shadow-sm"> | |
| <p class="text-sm text-gray-800">Will do. Thank you doctor!</p> | |
| <p class="mt-1 text-xs text-gray-500">Lisa - 2:36 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100 mr-2"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <input type="text" class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Type a message..."> | |
| <button class="ml-2 p-2 rounded-full text-white bg-blue-500 hover:bg-blue-600"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Consultations Section --> | |
| <div id="video-section" class="section-content hidden"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Video Consultations</h2> | |
| <p class="mt-1 text-sm text-gray-500">Start or join a video consultation with your patients</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 gap-6 lg:grid-cols-2"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Start New Consultation</h3> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700">Select Patient</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Select a patient...</option> | |
| <option>Sarah Johnson</option> | |
| <option>Michael Brown</option> | |
| <option>Emily Davis</option> | |
| <option>Robert Wilson</option> | |
| </select> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700">Consultation Type</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>General consultation</option> | |
| <option>Follow-up</option> | |
| <option>Initial assessment</option> | |
| <option>Treatment review</option> | |
| </select> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-video mr-2"></i> Start Video Call | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Scheduled Consultations</h3> | |
| <div class="mt-4 space-y-4"> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Sarah Johnson</p> | |
| <p class="text-sm text-gray-500">Follow-up consultation</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <p class="text-sm font-medium text-gray-900">Today, 10:30 AM</p> | |
| <button class="mt-1 text-xs font-medium text-blue-600 hover:text-blue-500">Join Now</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Patient avatar"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Michael Brown</p> | |
| <p class="text-sm text-gray-500">Initial assessment</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <p class="text-sm font-medium text-gray-900">Today, 2:15 PM</p> | |
| <button class="mt-1 text-xs font-medium text-gray-500">Starts in 2h 30m</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Recent Consultations</h3> | |
| <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <div class="video-container"> | |
| <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-3"> | |
| <p class="text-sm font-medium text-gray-900">Emily Davis - Post-treatment</p> | |
| <p class="text-xs text-gray-500">Yesterday, 9:00 AM • 12 min</p> | |
| <button class="mt-2 text-xs font-medium text-blue-600 hover:text-blue-500">View Details</button> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <div class="video-container"> | |
| <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-3"> | |
| <p class="text-sm font-medium text-gray-900">Robert Wilson - Chronic care</p> | |
| <p class="text-xs text-gray-500">2 days ago, 11:00 AM • 18 min</p> | |
| <button class="mt-2 text-xs font-medium text-blue-600 hover:text-blue-500">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Treatment Protocols Section --> | |
| <div id="protocols-section" class="section-content hidden"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Treatment Protocols</h2> | |
| <p class="mt-1 text-sm text-gray-500">Standardized treatment plans for common conditions</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div class="relative w-64"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search protocols..."> | |
| </div> | |
| <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-plus mr-2"></i> New Protocol | |
| </button> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow duration-300"> | |
| <div class="p-4 bg-blue-50"> | |
| <h3 class="text-lg font-medium text-gray-900">Hypertension Management</h3> | |
| <p class="mt-1 text-sm text-gray-500">For patients with stage 1 or 2 hypertension</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user-md mr-2"></i> | |
| <span>Last updated by Dr. Smith on May 15, 2023</span> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200"> | |
| View Protocol | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow duration-300"> | |
| <div class="p-4 bg-green-50"> | |
| <h3 class="text-lg font-medium text-gray-900">Type 2 Diabetes</h3> | |
| <p class="mt-1 text-sm text-gray-500">Comprehensive diabetes management plan</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user-md mr-2"></i> | |
| <span>Last updated by Dr. Johnson on April 28, 2023</span> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-green-700 bg-green-100 hover:bg-green-200"> | |
| View Protocol | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow duration-300"> | |
| <div class="p-4 bg-purple-50"> | |
| <h3 class="text-lg font-medium text-gray-900">Post-COVID Recovery</h3> | |
| <p class="mt-1 text-sm text-gray-500">Rehabilitation protocol for post-COVID patients</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user-md mr-2"></i> | |
| <span>Last updated by Dr. Lee on March 10, 2023</span> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200"> | |
| View Protocol | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Hypertension Management Protocol</h3> | |
| <div class="mt-4 bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 bg-blue-50"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-900">Standard Protocol</h4> | |
| <p class="mt-1 text-sm text-gray-500">For patients with BP >140/90 mmHg</p> | |
| </div> | |
| <button class="text-sm font-medium text-blue-600 hover:text-blue-500">Edit Protocol</button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="protocol-step"> | |
| <div class="protocol-step-number">1</div> | |
| <h4 class="text-md font-medium text-gray-900">Initial Assessment</h4> | |
| <p class="mt-1 text-sm text-gray-500">Complete full medical history, physical exam, and baseline labs (CBC, CMP, lipid panel, urinalysis).</p> | |
| </div> | |
| <div class="protocol-step mt-6"> | |
| <div class="protocol-step-number">2</div> | |
| <h4 class="text-md font-medium text-gray-900">Lifestyle Modifications</h4> | |
| <p class="mt-1 text-sm text-gray-500">Recommend DASH diet, sodium restriction to <2.3g/day, regular aerobic exercise (30 min/day, 5 days/week), weight loss if BMI >25, smoking cessation, and alcohol moderation.</p> | |
| </div> | |
| <div class="protocol-step mt-6"> | |
| <div class="protocol-step-number">3</div> | |
| <h4 class="text-md font-medium text-gray-900">First-line Pharmacotherapy</h4> | |
| <p class="mt-1 text-sm text-gray-500">Start with thiazide diuretic (HCTZ 12.5-25mg daily) or ACE inhibitor (lisinopril 10mg daily). For African-American patients, consider CCB (amlodipine 5mg daily) or thiazide as first-line.</p> | |
| </div> | |
| <div class="protocol-step mt-6"> | |
| <div class="protocol-step-number">4</div> | |
| <h4 class="text-md font-medium text-gray-900">Follow-up & Titration</h4> | |
| <p class="mt-1 text-sm text-gray-500">Recheck BP in 4 weeks. If not at goal, increase dose or add second agent from different class. Consider referral if refractory hypertension or secondary causes suspected.</p> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-md font-medium text-gray-900">Patient Education Materials</h4> | |
| <div class="mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2"> | |
| <a href="#" class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-file-pdf text-red-500 text-xl mr-3"></i> | |
| <span class="text-sm font-medium text-gray-900">Hypertension Patient Guide</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-utensils text-green-500 text-xl mr-3"></i> | |
| <span class="text-sm font-medium text-gray-900">DASH Diet Handout</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Knowledge Base Section --> | |
| <div id="knowledgebase-section" class="section-content hidden"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Medical Knowledge Base</h2> | |
| <p class="mt-1 text-sm text-gray-500">Evidence-based medical resources and references</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="relative w-full max-w-xl"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search knowledge base..."> | |
| </div> | |
| <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-4 bg-blue-50"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-md p-2"> | |
| <i class="fas fa-book-medical text-blue-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Clinical Guidelines</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-500">Latest clinical practice guidelines from major medical associations.</p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Browse Guidelines</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-4 bg-purple-50"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-100 rounded-md p-2"> | |
| <i class="fas fa-pills text-purple-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Drug Database</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-500">Comprehensive drug information including dosages, interactions, and side effects.</p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-500">Search Medications</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-4 bg-green-50"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-2"> | |
| <i class="fas fa-procedures text-green-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Procedure Library</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-500">Step-by-step guides for common medical procedures with videos.</p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-sm font-medium text-green-600 hover:text-green-500">View Procedures</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-4 bg-yellow-50"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-md p-2"> | |
| <i class="fas fa-chart-line text-yellow-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Research Updates</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-500">Latest medical research summaries and journal article reviews.</p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-sm font-medium text-yellow-600 hover:text-yellow-500">Read Updates</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-4 bg-red-50"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-100 rounded-md p-2"> | |
| <i class="fas fa-notes-medical text-red-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Documentation</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-500">Templates for SOAP notes, referral letters, and other documentation.</p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-sm font-medium text-red-600 hover:text-red-500">Access Templates</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-4 bg-indigo-50"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-100 rounded-md p-2"> | |
| <i class="fas fa-question-circle text-indigo-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Quick Answers</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-500">Common clinical questions answered by medical experts.</p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Find Answers</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Recent Updates</h3> | |
| <div class="mt-4 space-y-4"> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow duration-300"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-md p-2"> | |
| <i class="fas fa-book-medical text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-md font-medium text-gray-900">Updated: 2023 Hypertension Guidelines</h4> | |
| <p class="mt-1 text-sm text-gray-500">The American College of Cardiology has released updated guidelines for the management of hypertension, including new blood pressure targets for high-risk patients.</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-1"></i> | |
| <span>Posted on June 15, 2023</span> | |
| <a href="#" class="ml-4 text-blue-600 hover:text-blue-500">Read More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow duration-300"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-purple-100 rounded-md p-2"> | |
| <i class="fas fa-pills text-purple-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-md font-medium text-gray-900">New Medication: Tirzepatide for Type 2 Diabetes</h4> | |
| <p class="mt-1 text-sm text-gray-500">FDA approves new dual GIP/GLP-1 receptor agonist showing superior efficacy in glycemic control and weight reduction compared to existing therapies.</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-1"></i> | |
| <span>Posted on June 10, 2023</span> | |
| <a href="#" class="ml-4 text-purple-600 hover:text-purple-500">Read More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Voice Training Section --> | |
| <div id="voice-training-section" class="section-content hidden"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Voice Training</h2> | |
| <p class="mt-1 text-sm text-gray-500">Train the AI to speak in your voice and style</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-col items-center justify-center py-8"> | |
| <div class="text-center max-w-2xl"> | |
| <h3 class="text-lg font-medium text-gray-900">Create Your AI Voice Clone</h3> | |
| <p class="mt-2 text-sm text-gray-500">Read the phrases below to train the AI to mimic your voice, tone, and speaking style. This will allow the AI assistant to communicate with patients in a voice that sounds like you.</p> | |
| </div> | |
| <div class="mt-8 w-full max-w-2xl"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="relative"> | |
| <button id="record-button" class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-lg hover:shadow-xl transition-all duration-300"> | |
| <i class="fas fa-microphone text-2xl"></i> | |
| </button> | |
| <div class="pulse-ring"></div> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <p id="training-status" class="text-sm font-medium text-gray-900">Ready to record</p> | |
| <p id="training-progress" class="text-xs text-gray-500">0% complete</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 w-full bg-gray-200 rounded-full overflow-hidden"> | |
| <div id="progress-bar" class="h-full bg-blue-600 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white p-4 border border-gray-200 rounded-lg"> | |
| <p id="training-phrase" class="text-lg font-medium text-gray-900">"Hello, this is Doctor Smith. How can I help you today?"</p> | |
| <div class="mt-4 flex justify-between"> | |
| <button id="skip-button" class="text-sm font-medium text-gray-600 hover:text-gray-900">Skip Phrase</button> | |
| <button id="replay-button" class="text-sm font-medium text-blue-600 hover:text-blue-500"> | |
| <i class="fas fa-redo mr-1"></i> Replay | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-md font-medium text-gray-900">Voice Quality</h4> | |
| <div class="mt-2 grid grid-cols-1 gap-4 sm:grid-cols-3"> | |
| <div class="p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-full p-1"> | |
| <i class="fas fa-check text-green-600 text-xs"></i> | |
| </div> | |
| <span class="ml-2 text-sm font-medium text-gray-900">Clarity</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <span>Good</span> | |
| <div class="ml-auto flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-gray-300"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-full p-1"> | |
| <i class="fas fa-exclamation text-yellow-600 text-xs"></i> | |
| </div> | |
| <span class="ml-2 text-sm font-medium text-gray-900">Background Noise</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <span>Moderate</span> | |
| <div class="ml-auto flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-gray-300"></i> | |
| <i class="fas fa-star text-gray-300"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-full p-1"> | |
| <i class="fas fa-check text-green-600 text-xs"></i> | |
| </div> | |
| <span class="ml-2 text-sm font-medium text-gray-900">Consistency</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <span>Excellent</span> | |
| <div class="ml-auto flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Voice Samples</h3> | |
| <p class="mt-1 text-sm text-gray-500">Listen to how your AI voice clone currently sounds</p> | |
| <div class="mt-4 space-y-4"> | |
| <div class="p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-900">Professional Greeting</h4> | |
| <p class="mt-1 text-sm text-gray-500">Standard patient greeting</p> | |
| </div> | |
| <button class="p-2 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-900">Compassionate Response</h4> | |
| <p class="mt-1 text-sm text-gray-500">Delivering difficult news</p> | |
| </div> | |
| <button class="p-2 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-900">Technical Explanation</h4> | |
| <p class="mt-1 text-sm text-gray-500">Describing a medical procedure</p> | |
| </div> | |
| <button class="p-2 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-save mr-2"></i> Save Voice Profile | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Section --> | |
| <div id="settings-section" class="section-content hidden"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Settings</h2> | |
| <p class="mt-1 text-sm text-gray-500">Configure your account and application preferences</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 gap-6 lg:grid-cols-3"> | |
| <div class="lg:col-span-2"> | |
| <h3 class="text-lg font-medium text-gray-900">Profile Information</h3> | |
| <p class="mt-1 text-sm text-gray-500">Update your personal details and professional information.</p> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label> | |
| <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="John"> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label> | |
| <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="Smith"> | |
| </div> | |
| <div class="sm:col-span-4"> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email address</label> | |
| <input type="email" name="email" id="email" autocomplete="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="dr.smith@example.com"> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="specialty" class="block text-sm font-medium text-gray-700">Medical Specialty</label> | |
| <select id="specialty" name="specialty" autocomplete="specialty" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Family Medicine</option> | |
| <option>Internal Medicine</option> | |
| <option>Cardiology</option> | |
| <option selected>Endocrinology</option> | |
| <option>Neurology</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="license" class="block text-sm font-medium text-gray-700">Medical License</label> | |
| <input type="text" name="license" id="license" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="MD1234567"> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="bio" class="block text-sm font-medium text-gray-700">Professional Bio</label> | |
| <textarea id="bio" name="bio" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">Dr. John Smith is a board-certified endocrinologist with over 15 years of experience in diabetes management and metabolic disorders.</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Profile Photo</h3> | |
| <div class="mt-4 flex items-center"> | |
| <div class="relative"> | |
| <img class="h-24 w-24 rounded-full" src="https://randomuser.me/api/portraits/med/men/75.jpg" alt="Profile photo"> | |
| <div class="absolute bottom-0 right-0 bg-white p-1 rounded-full shadow"> | |
| <button class="text-blue-600 hover:text-blue-500"> | |
| <i class="fas fa-camera text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Change | |
| </button> | |
| <button type="button" class="ml-2 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Remove | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium text-gray-900">Two-Factor Authentication</h3> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0 bg-gray-200 p-1 rounded-full"> | |
| <i class="fas fa-mobile-alt text-gray-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">SMS Authentication</p> | |
| <p class="text-sm text-gray-500">Enabled for account security</p> | |
| </div> | |
| <button class="ml-auto text-sm font-medium text-blue-600 hover:text-blue-500">Edit</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Notification Preferences</h3> | |
| <div class="mt-4"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="email-notifications" name="email-notifications" type="checkbox" checked class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="email-notifications" class="font-medium text-gray-700">Email Notifications</label> | |
| <p class="text-gray-500">Receive important updates via email</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="sms-notifications" name="sms-notifications" type="checkbox" checked class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="sms-notifications" class="font-medium text-gray- | |
| </html> |