Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VerifyMC - Medical Admin</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #2563eb; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #2563eb; | |
| } | |
| .sidebar-item:hover .tooltip { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-slate-800"> | |
| <!-- Header --> | |
| <header class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-50 flex items-center justify-between px-4 lg:px-6"> | |
| <!-- Left: Logo --> | |
| <div class="flex items-center gap-4"> | |
| <button id="mobile-menu-btn" class="lg:hidden p-2 hover:bg-gray-100 rounded-lg"> | |
| <i data-lucide="menu" class="w-6 h-6 text-slate-600"></i> | |
| </button> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="activity" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold text-slate-800">VerifyMC</span> | |
| </div> | |
| </div> | |
| <!-- Center: Search --> | |
| <div class="hidden md:flex flex-1 max-w-xl mx-8"> | |
| <div class="relative w-full"> | |
| <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i> | |
| <input type="text" placeholder="Search patients, appointments, records..." | |
| class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent text-sm"> | |
| </div> | |
| </div> | |
| <!-- Right: Icons & User --> | |
| <div class="flex items-center gap-2"> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg relative"> | |
| <i data-lucide="help-circle" class="w-5 h-5 text-slate-600"></i> | |
| </button> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg relative"> | |
| <i data-lucide="bell" class="w-5 h-5 text-slate-600"></i> | |
| <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <div class="relative ml-2"> | |
| <button id="user-dropdown-btn" class="flex items-center gap-3 p-1.5 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <img src="https://static.photos/face/200x200/42" alt="User" class="w-8 h-8 rounded-full object-cover border border-gray-200"> | |
| <div class="hidden lg:block text-left"> | |
| <p class="text-sm font-medium text-slate-700">Dr. Sarah Chen</p> | |
| <p class="text-xs text-slate-500">Administrator</p> | |
| </div> | |
| <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 hidden lg:block"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Sidebar --> | |
| <aside id="sidebar" class="fixed left-0 top-16 bottom-0 w-16 bg-white border-r border-gray-200 z-40 flex flex-col items-center py-4 gap-1 overflow-y-auto transform -translate-x-full lg:translate-x-0 transition-transform duration-200"> | |
| <nav class="flex flex-col gap-1 w-full px-2"> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="layout-dashboard" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Dashboard</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="users" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Patients</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="calendar" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Appointments</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="clipboard-list" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Encounters</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="file-text" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Forms</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="folder-open" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Documents</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="credit-card" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Billing</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="bar-chart-2" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Reports</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="message-square" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Messages</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Settings</span> | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg bg-blue-50 text-blue-600 transition-colors relative"> | |
| <i data-lucide="user" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Account</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| <!-- Mobile Sidebar Overlay --> | |
| <div id="sidebar-overlay" class="fixed inset-0 bg-slate-900/50 z-30 hidden lg:hidden backdrop-blur-sm"></div> | |
| <!-- Main Content --> | |
| <main class="lg:ml-16 pt-16 min-h-screen"> | |
| <div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Page Header --> | |
| <div class="mb-8"> | |
| <h1 class="text-2xl font-bold text-slate-900 mb-2">Notifications</h1> | |
| <p class="text-slate-500">Manage notification settings for the clinic and users.</p> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="mb-6 border-b border-gray-200"> | |
| <nav class="flex space-x-8" aria-label="Tabs"> | |
| <button class="tab-btn active py-4 px-1 border-b-2 border-blue-600 text-blue-600 font-medium text-sm whitespace-nowrap" data-tab="clinic"> | |
| Clinic Notifications | |
| </button> | |
| <button class="tab-btn py-4 px-1 border-b-2 border-transparent text-slate-500 hover:text-slate-700 font-medium text-sm whitespace-nowrap" data-tab="provider"> | |
| Provider Notifications | |
| </button> | |
| <button class="tab-btn py-4 px-1 border-b-2 border-transparent text-slate-500 hover:text-slate-700 font-medium text-sm whitespace-nowrap" data-tab="staff"> | |
| Staff Notifications | |
| </button> | |
| <button class="tab-btn py-4 px-1 border-b-2 border-transparent text-slate-500 hover:text-slate-700 font-medium text-sm whitespace-nowrap" data-tab="patient"> | |
| Patient Notifications | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="space-y-6"> | |
| <!-- Clinic Notifications Tab --> | |
| <div id="clinic-tab" class="tab-content"> | |
| <div class="bg-white rounded-xl border border-gray-200 overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50"> | |
| <h2 class="text-lg font-semibold text-slate-800">System Notifications</h2> | |
| <p class="text-sm text-slate-500 mt-1">Configure alerts for clinic-wide system events</p> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">New patient registration</h3> | |
| <p class="text-sm text-slate-500 mt-1">Receive notifications when new patients register</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Appointment cancellations</h3> | |
| <p class="text-sm text-slate-500 mt-1">Get notified when appointments are cancelled</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">System alerts</h3> | |
| <p class="text-sm text-slate-500 mt-1">Critical system updates and maintenance notices</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Billing alerts</h3> | |
| <p class="text-sm text-slate-500 mt-1">Payment processing and billing issue notifications</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Provider Notifications Tab --> | |
| <div id="provider-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-xl border border-gray-200 overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50"> | |
| <h2 class="text-lg font-semibold text-slate-800">Provider Alerts</h2> | |
| <p class="text-sm text-slate-500 mt-1">Configure notifications for healthcare providers</p> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">New appointments</h3> | |
| <p class="text-sm text-slate-500 mt-1">Notify when new appointments are scheduled</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Appointment reminders</h3> | |
| <p class="text-sm text-slate-500 mt-1">Upcoming appointment notifications</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Patient messages</h3> | |
| <p class="text-sm text-slate-500 mt-1">Alert when patients send secure messages</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Prescription requests</h3> | |
| <p class="text-sm text-slate-500 mt-1">Notify on prescription refill requests</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Staff Notifications Tab --> | |
| <div id="staff-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-xl border border-gray-200 overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50"> | |
| <h2 class="text-lg font-semibold text-slate-800">Staff Alerts</h2> | |
| <p class="text-sm text-slate-500 mt-1">Configure notifications for administrative staff</p> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Schedule updates</h3> | |
| <p class="text-sm text-slate-500 mt-1">Changes to provider schedules and availability</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Patient check-in alerts</h3> | |
| <p class="text-sm text-slate-500 mt-1">Real-time patient arrival notifications</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Task assignments</h3> | |
| <p class="text-sm text-slate-500 mt-1">New tasks and workflow assignments</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Internal messages</h3> | |
| <p class="text-sm text-slate-500 mt-1">Team communications and announcements</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Patient Notifications Tab --> | |
| <div id="patient-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-xl border border-gray-200 overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50"> | |
| <h2 class="text-lg font-semibold text-slate-800">Patient Notifications</h2> | |
| <p class="text-sm text-slate-500 mt-1">Configure patient-facing notification preferences</p> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Appointment confirmations</h3> | |
| <p class="text-sm text-slate-500 mt-1">Send confirmation when appointments are booked</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Appointment reminders</h3> | |
| <p class="text-sm text-slate-500 mt-1">Automated reminders 24 hours before visit</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Prescription updates</h3> | |
| <p class="text-sm text-slate-500 mt-1">Notify when prescriptions are ready</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-100 pt-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-sm font-medium text-slate-900">Clinic announcements</h3> | |
| <p class="text-sm text-slate-500 mt-1">General updates and health tips</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="mt-8 flex items-center justify-end gap-4"> | |
| <button class="px-6 py-2.5 border border-gray-300 text-slate-700 font-medium rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> | |
| Cancel | |
| </button> | |
| <button class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 shadow-sm"> | |
| Save Changes | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Mobile sidebar toggle | |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); | |
| const sidebar = document.getElementById('sidebar'); | |
| const overlay = document.getElementById('sidebar-overlay'); | |
| function toggleSidebar() { | |
| sidebar.classList.toggle('-translate-x-full'); | |
| overlay.classList.toggle('hidden'); | |
| } | |
| mobileMenuBtn.addEventListener('click', toggleSidebar); | |
| overlay.addEventListener('click', toggleSidebar); | |
| // Tab switching functionality | |
| const tabBtns = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const tabId = btn.getAttribute('data-tab'); | |
| // Update button styles | |
| tabBtns.forEach(b => { | |
| b.classList.remove('border-blue-600', 'text-blue-600', 'active'); | |
| b.classList.add('border-transparent', 'text-slate-500'); | |
| }); | |
| btn.classList.remove('border-transparent', 'text-slate-500'); | |
| btn.classList.add('border-blue-600', 'text-blue-600', 'active'); | |
| // Show/hide content | |
| tabContents.forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(`${tabId}-tab`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Toggle switch animation | |
| const toggles = document.querySelectorAll('input[type="checkbox"]'); | |
| toggles.forEach(toggle => { | |
| toggle.addEventListener('change', function() { | |
| // Add subtle animation or haptic feedback here if needed | |
| console.log(`Toggle ${this.checked ? 'enabled' : 'disabled'}`); | |
| }); | |
| }); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |