Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediAnalytics Pro - Advanced Medical Analysis</title> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| :root { | |
| --primary-color: #1a73e8; | |
| --primary-light: #e8f0fe; | |
| --secondary-color: #f8f9fa; | |
| --accent-color: #ff6d00; | |
| --text-dark: #202124; | |
| --text-medium: #5f6368; | |
| --text-light: #9aa0a6; | |
| --success-color: #34a853; | |
| --warning-color: #f9ab00; | |
| --danger-color: #d93025; | |
| --border-radius: 12px; | |
| --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| body { | |
| background-color: #f8f9fa; | |
| color: var(--text-dark); | |
| } | |
| .app-container { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| min-height: 100vh; | |
| } | |
| /* Sidebar Styles */ | |
| .sidebar { | |
| background-color: #ffffff; | |
| border-right: 1px solid #dadce0; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| z-index: 10; | |
| } | |
| .logo-container { | |
| padding: 24px; | |
| display: flex; | |
| align-items: center; | |
| border-bottom: 1px solid #f1f3f4; | |
| } | |
| .logo-icon { | |
| font-size: 36px; | |
| margin-right: 12px; | |
| color: var(--primary-color); | |
| background-color: var(--primary-light); | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .logo-text { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--text-dark); | |
| } | |
| .logo-text span { | |
| color: var(--primary-color); | |
| } | |
| .sidebar-menu { | |
| padding: 24px 0; | |
| } | |
| .menu-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 24px; | |
| margin: 4px 0; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| color: var(--text-medium); | |
| position: relative; | |
| } | |
| .menu-item:hover { | |
| background-color: var(--primary-light); | |
| color: var(--primary-color); | |
| } | |
| .menu-item.active { | |
| background-color: var(--primary-light); | |
| color: var(--primary-color); | |
| font-weight: 500; | |
| } | |
| .menu-item.active:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 4px; | |
| background-color: var(--primary-color); | |
| } | |
| .menu-item i { | |
| margin-right: 16px; | |
| font-size: 22px; | |
| } | |
| .menu-item .badge { | |
| margin-left: auto; | |
| background-color: var(--danger-color); | |
| color: white; | |
| font-size: 11px; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| } | |
| /* Main Content Styles */ | |
| .main-content { | |
| padding: 24px 32px; | |
| overflow-y: auto; | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 24px; | |
| position: sticky; | |
| top: 0; | |
| background-color: #f8f9fa; | |
| padding: 16px 0; | |
| z-index: 5; | |
| } | |
| .page-title { | |
| font-size: 28px; | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| } | |
| .page-subtitle { | |
| font-size: 14px; | |
| color: var(--text-light); | |
| margin-top: 4px; | |
| font-weight: 400; | |
| } | |
| .user-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .search-bar { | |
| position: relative; | |
| } | |
| .search-bar input { | |
| padding: 12px 20px 12px 48px; | |
| border-radius: 24px; | |
| border: 1px solid #dadce0; | |
| width: 280px; | |
| transition: var(--transition); | |
| font-size: 14px; | |
| background-color: white; | |
| } | |
| .search-bar input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); | |
| } | |
| .search-bar i { | |
| position: absolute; | |
| left: 16px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-light); | |
| } | |
| .notifications { | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .notifications i { | |
| font-size: 24px; | |
| color: var(--text-medium); | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background-color: var(--danger-color); | |
| color: white; | |
| font-size: 10px; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: 24px; | |
| transition: var(--transition); | |
| } | |
| .user-profile:hover { | |
| background-color: #f1f3f4; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 12px; | |
| font-weight: 500; | |
| font-size: 18px; | |
| } | |
| .user-name { | |
| font-weight: 500; | |
| } | |
| .user-role { | |
| font-size: 12px; | |
| color: var(--text-light); | |
| margin-top: 2px; | |
| } | |
| /* Dashboard Cards */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 24px; | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| padding: 20px; | |
| transition: var(--transition); | |
| border: 1px solid #f1f3f4; | |
| } | |
| .card:hover { | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 16px; | |
| } | |
| .card-title { | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: var(--text-medium); | |
| } | |
| .card-value { | |
| font-size: 32px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| color: var(--text-dark); | |
| } | |
| .card-change { | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .card-change.positive { | |
| color: var(--success-color); | |
| } | |
| .card-change.negative { | |
| color: var(--danger-color); | |
| } | |
| .card-icon { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 28px; | |
| } | |
| .card-icon.patients { | |
| background-color: #4285f4; | |
| background-image: linear-gradient(to bottom right, #4285f4, #34a853); | |
| } | |
| .card-icon.labs { | |
| background-color: #ea4335; | |
| background-image: linear-gradient(to bottom right, #ea4335, #fbbc05); | |
| } | |
| .card-icon.prescriptions { | |
| background-color: #9c27b0; | |
| background-image: linear-gradient(to bottom right, #9c27b0, #673ab7); | |
| } | |
| .card-icon.revenue { | |
| background-color: #34a853; | |
| background-image: linear-gradient(to bottom right, #34a853, #fbbc05); | |
| } | |
| /* Main Data Section */ | |
| .data-section { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 24px; | |
| } | |
| @media (max-width: 1200px) { | |
| .data-section { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .card-lg { | |
| grid-column: span 1; | |
| height: 100%; | |
| } | |
| .card-header-lg { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| } | |
| .card-header-lg h2 { | |
| font-size: 20px; | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| } | |
| .card-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .card-action-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--text-medium); | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 14px; | |
| } | |
| .card-action-btn:hover { | |
| background-color: #f1f3f4; | |
| color: var(--primary-color); | |
| } | |
| .table-container { | |
| overflow-x: auto; | |
| max-height: 500px; | |
| border-radius: var(--border-radius); | |
| border: 1px solid #f1f3f4; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| min-width: 800px; | |
| } | |
| thead { | |
| background-color: #f8f9fa; | |
| position: sticky; | |
| top: 0; | |
| } | |
| th { | |
| padding: 14px 16px; | |
| text-align: left; | |
| font-weight: 500; | |
| color: var(--text-medium); | |
| border-bottom: 2px solid #f1f3f4; | |
| white-space: nowrap; | |
| } | |
| td { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid #f1f3f4; | |
| color: var(--text-dark); | |
| } | |
| tr:hover { | |
| background-color: #f8f9fa; | |
| } | |
| .status { | |
| display: inline-block; | |
| padding: 6px 10px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| min-width: 80px; | |
| text-align: center; | |
| } | |
| .status.active { | |
| background-color: rgba(52, 168, 83, 0.1); | |
| color: var(--success-color); | |
| } | |
| .status.inactive { | |
| background-color: rgba(217, 48, 37, 0.1); | |
| color: var(--danger-color); | |
| } | |
| .status.pending { | |
| background-color: rgba(249, 171, 0, 0.1); | |
| color: var(--warning-color); | |
| } | |
| .test-result { | |
| font-weight: 600; | |
| } | |
| .test-result.high { | |
| color: var(--danger-color); | |
| } | |
| .test-result.normal { | |
| color: var(--success-color); | |
| } | |
| .test-result.low { | |
| color: var(--warning-color); | |
| } | |
| /* Patient Details */ | |
| .patient-details { | |
| display: flex; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| border: 1px solid #f1f3f4; | |
| } | |
| .patient-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background-color: #f1f3f4; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 32px; | |
| color: var(--primary-color); | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| } | |
| .patient-avatar img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .patient-info h3 { | |
| font-size: 18px; | |
| margin-bottom: 4px; | |
| color: var(--text-dark); | |
| } | |
| .patient-meta { | |
| color: var(--text-light); | |
| font-size: 14px; | |
| margin-bottom: 12px; | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .patient-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .patient-stats { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .patient-stat { | |
| padding: 12px; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| min-width: 120px; | |
| border: 1px solid #f1f3f4; | |
| } | |
| .patient-stat-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| color: var(--text-dark); | |
| } | |
| .patient-stat-label { | |
| font-size: 12px; | |
| color: var(--text-light); | |
| } | |
| /* Lab Results */ | |
| .lab-results { | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| border: 1px solid #f1f3f4; | |
| margin-top: 20px; | |
| } | |
| .lab-results h4 { | |
| margin-bottom: 16px; | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| font-size: 18px; | |
| } | |
| .lab-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 12px 0; | |
| border-bottom: 1px solid #f1f3f4; | |
| align-items: center; | |
| } | |
| .lab-item:last-child { | |
| border-bottom: none; | |
| } | |
| .lab-name { | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| } | |
| .lab-range { | |
| font-size: 12px; | |
| color: var(--text-light); | |
| margin-top: 4px; | |
| } | |
| .lab-value { | |
| font-weight: 700; | |
| text-align: right; | |
| } | |
| .lab-value.high { | |
| color: var(--danger-color); | |
| } | |
| .lab-value.normal { | |
| color: var(--success-color); | |
| } | |
| .lab-value.low { | |
| color: var(--warning-color); | |
| } | |
| /* Charts Section */ | |
| .chart-card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| padding: 20px; | |
| margin-bottom: 24px; | |
| border: 1px solid #f1f3f4; | |
| } | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .chart-header h2 { | |
| font-size: 20px; | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| } | |
| .chart-tabs { | |
| display: flex; | |
| background-color: #f1f3f4; | |
| border-radius: 8px; | |
| padding: 4px; | |
| } | |
| .chart-tab { | |
| padding: 6px 16px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| border-radius: 6px; | |
| transition: var(--transition); | |
| } | |
| .chart-tab.active { | |
| background-color: white; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); | |
| color: var(--primary-color); | |
| font-weight: 500; | |
| } | |
| .chart-container { | |
| height: 300px; | |
| position: relative; | |
| } | |
| /* Critical Alerts */ | |
| .alerts-container { | |
| margin-bottom: 24px; | |
| } | |
| .alert-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 16px; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| margin-bottom: 12px; | |
| border: 1px solid #f1f3f4; | |
| border-left: 4px solid var(--danger-color); | |
| } | |
| .alert-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: rgba(217, 48, 37, 0.1); | |
| color: var(--danger-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 16px; | |
| flex-shrink: 0; | |
| } | |
| .alert-content { | |
| flex: 1; | |
| } | |
| .alert-title { | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| margin-bottom: 4px; | |
| } | |
| .alert-message { | |
| color: var(--text-medium); | |
| font-size: 14px; | |
| } | |
| .alert-time { | |
| color: var(--text-light); | |
| font-size: 12px; | |
| margin-top: 4px; | |
| } | |
| /* Calendar Events */ | |
| .events-container { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| padding: 20px; | |
| border: 1px solid #f1f3f4; | |
| } | |
| .event-item { | |
| display: flex; | |
| padding: 12px 0; | |
| border-bottom: 1px solid #f1f3f4; | |
| } | |
| .event-item:last-child { | |
| border-bottom: none; | |
| } | |
| .event-time { | |
| font-weight: 500; | |
| color: var(--primary-color); | |
| min-width: 80px; | |
| padding-right: 16px; | |
| } | |
| .event-details h4 { | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| margin-bottom: 4px; | |
| } | |
| .event-details p { | |
| color: var(--text-medium); | |
| font-size: 14px; | |
| } | |
| /* Recent Activity */ | |
| .activity-container { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| padding: 20px; | |
| border: 1px solid #f1f3f4; | |
| margin-bottom: 24px; | |
| } | |
| .activity-item { | |
| display: flex; | |
| padding: 12px 0; | |
| border-bottom: 1px solid #f1f3f4; | |
| align-items: flex-start; | |
| } | |
| .activity-item:last-child { | |
| border-bottom: none; | |
| } | |
| .activity-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background-color: #f1f3f4; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary-color); | |
| margin-right: 12px; | |
| flex-shrink: 0; | |
| font-size: 14px; | |
| } | |
| .activity-content { | |
| flex: 1; | |
| } | |
| .activity-title { | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| margin-bottom: 4px; | |
| } | |
| .activity-message { | |
| color: var(--text-medium); | |
| font-size: 14px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| .activity-time { | |
| color: var(--text-light); | |
| font-size: 12px; | |
| margin-top: 4px; | |
| } | |
| /* Quick Actions */ | |
| .quick-actions { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .action-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| border: 1px solid #f1f3f4; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-align: center; | |
| } | |
| .action-btn:hover { | |
| background-color: #f8f9fa; | |
| transform: translateY(-2px); | |
| } | |
| .action-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 50%; | |
| background-color: var(--primary-light); | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 12px; | |
| font-size: 24px; | |
| } | |
| .action-label { | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 1024px) { | |
| .app-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| height: auto; | |
| position: static; | |
| } | |
| .main-content { | |
| padding: 24px; | |
| } | |
| .header { | |
| position: static; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .dashboard-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 16px; | |
| } | |
| .user-controls { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| } | |
| .search-bar input { | |
| width: 100%; | |
| } | |
| .quick-actions { | |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .patient-stats { | |
| flex-wrap: wrap; | |
| } | |
| .patient-stat { | |
| min-width: calc(50% - 6px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Sidebar Navigation --> | |
| <div class="sidebar"> | |
| <div class="logo-container"> | |
| <div class="logo-icon"> | |
| <i class="material-icons">monitor_heart</i> | |
| </div> | |
| <div class="logo-text">Medi<span>Analytics</span></div> | |
| </div> | |
| <div class="sidebar-menu"> | |
| <div class="menu-item active"> | |
| <i class="material-icons">dashboard</i> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">personal_injury</i> | |
| <span>Patients</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">biotech</i> | |
| <span>Lab Tests</span> | |
| <span class="badge">3</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">medication</i> | |
| <span>Prescriptions</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">bar_chart</i> | |
| <span>Statistics</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">assignment</i> | |
| <span>Reports</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">notifications</i> | |
| <span>Alerts</span> | |
| <span class="badge">2</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">calendar_today</i> | |
| <span>Schedule</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="material-icons">settings</i> | |
| <span>Settings</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="main-content"> | |
| <div class="header"> | |
| <div> | |
| <h1 class="page-title">Medical Analytics Dashboard</h1> | |
| <p class="page-subtitle">Monitor patient data, lab results, and medical statistics in real-time</p> | |
| </div> | |
| <div class="user-controls"> | |
| <div class="search-bar"> | |
| <i class="material-icons">search</i> | |
| <input type="text" placeholder="Search patients, tests, results..."> | |
| </div> | |
| <div class="notifications"> | |
| <i class="material-icons">notifications</i> | |
| <span class="notification-badge">5</span> | |
| </div> | |
| <div class="user-profile"> | |
| <div class="user-avatar"> | |
| <i class="material-icons">person</i> | |
| </div> | |
| <div> | |
| <div class="user-name">Dr. Sarah Johnson</div> | |
| <div class="user-role">Cardiologist</div> | |
| </div> | |
| <i class="material-icons" style="margin-left: 8px;">expand_more</i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Critical Alerts --> | |
| <div class="alerts-container"> | |
| <div class="alert-item"> | |
| <div class="alert-icon"> | |
| <i class="material-icons">warning</i> | |
| </div> | |
| <div class="alert-content"> | |
| <div class="alert-title">Critical Lab Result - John Wilson</div> | |
| <div class="alert-message">Hemoglobin level significantly high (17.2 g/dL). Normal range is 13.8-17.2 g/dL.</div> | |
| <div class="alert-time">Today, 09:42 AM</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Overview Cards --> | |
| <div class="dashboard-grid"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">Active Patients</div> | |
| <div class="card-value">1,248</div> | |
| <div class="card-change positive"> | |
| <i class="material-icons">trending_up</i> 8.2% increase | |
| </div> | |
| </div> | |
| <div class="card-icon patients"> | |
| <i class="material-icons">personal_injury</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">Completed Tests</div> | |
| <div class="card-value">378</div> | |
| <div class="card-change positive"> | |
| <i class="material-icons">trending_up</i> 5.3% increase | |
| </div> | |
| </div> | |
| <div class="card-icon labs"> | |
| <i class="material-icons">science</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">Prescriptions Issued</div> | |
| <div class="card-value">216</div> | |
| <div class="card-change negative"> | |
| <i class="material-icons">trending_down</i> 2.1% decrease | |
| </div> | |
| </div> | |
| <div class="card-icon prescriptions"> | |
| <i class="material-icons">medication</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">Total Revenue</div> | |
| <div class="card-value">$86,742</div> | |
| <div class="card-change positive"> | |
| <i class="material-icons">trending_up</i> 14.7% increase | |
| </div> | |
| </div> | |
| <div class="card-icon revenue"> | |
| <i class="material-icons">attach_money</i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="quick-actions"> | |
| <div class="action-btn"> | |
| <div class="action-icon"> | |
| <i class="material-icons">add_box</i> | |
| </div> | |
| <div class="action-label">New Patient</div> | |
| </div> | |
| <div class="action-btn"> | |
| <div class="action-icon"> | |
| <i class="material-icons">assignment</i> | |
| </div> | |
| <div class="action-label">Order Test</div> | |
| </div> | |
| <div class="action-btn"> | |
| <div class="action-icon"> | |
| <i class="material-icons">receipt</i> | |
| </div> | |
| <div class="action-label">Generate Report</div> | |
| </div> | |
| <div class="action-btn"> | |
| <div class="action-icon"> | |
| <i class="material-icons">calendar_today</i> | |
| </div> | |
| <div class="action-label">Schedule</div> | |
| </div> | |
| </div> | |
| <!-- Main Data Section --> | |
| <div class="data-section"> | |
| <div class="card card-lg"> | |
| <div class="card-header-lg"> | |
| <h2>Recent Lab Tests</h2> | |
| <div class="card-actions"> | |
| <button class="card-action-btn"> | |
| <i class="material-icons">filter_list</i> Filter | |
| </button> | |
| <button class="card-action-btn"> | |
| <i class="material-icons">download</i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="table-container"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Patient ID</th> | |
| <th>Name</th> | |
| <th>Test Type</th> | |
| <th>Date</th> | |
| <th>Status</th> | |
| <th>Results</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>#P-10045</td> | |
| <td> | |
| <div style="display: flex; align-items: center; gap: 8px;"> | |
| <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;"> | |
| <i class="material-icons" style="font-size: 16px; color: #666;">person</i> | |
| </div> | |
| John Wilson | |
| </div> | |
| </td> | |
| <td>Complete Blood Count</td> | |
| <td>May 15, 2023</td> | |
| <td><span class="status active">Completed</span></td> | |
| <td><span class="test-result high">17.2 g/dL</span></td> | |
| </tr> | |
| <tr> | |
| <td>#P-10098</td> | |
| <td> | |
| <div style="display: flex; align-items: center; gap: 8px;"> | |
| <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;"> | |
| <i class="material-icons" style="font-size: 16px; color: #666;">person</i> | |
| </div> | |
| Sarah Johnson | |
| </div> | |
| </td> | |
| <td>Lipid Panel</td> | |
| <td>May 15, 2023</td> | |
| <td><span class="status active">Completed</span></td> | |
| <td><span class="test-result normal">185 mg/dL</span></td> | |
| </tr> | |
| <tr> | |
| <td>#P-10124</td> | |
| <td> | |
| <div style="display: flex; align-items: center; gap: 8px;"> | |
| <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;"> | |
| <i class="material-icons" style="font-size: 16px; color: #666;">person</i> | |
| </div> | |
| Michael Brown | |
| </div> | |
| </td> | |
| <td>Liver Function</td> | |
| <td>May 14, 2023</td> | |
| <td><span class="status active">Completed</span></td> | |
| <td><span class="test-result normal">42 U/L</span></td> | |
| </tr> | |
| <tr> | |
| <td>#P-10077</td> | |
| <td> | |
| <div style="display: flex; align-items: center; gap: 8px;"> | |
| <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;"> | |
| <i class="material-icons" style="font-size: 16px; color: #666;">person</i> | |
| </div> | |
| Emily Davis | |
| </div> | |
| </td> | |
| <td>Thyroid Panel</td> | |
| <td>May 14, 2023</td> | |
| <td><span class="status active">Completed</span></td> | |
| <td><span class="test-result low">0.7 µIU/mL</span></td> | |
| </tr> | |
| <tr> | |
| <td>#P-10132</td> | |
| <td> | |
| <div style="display: flex; align-items: center; gap: 8px;"> | |
| <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;"> | |
| <i class="material-icons" style="font-size: 16px; color: #666;">person</i> | |
| </div> | |
| Robert Miller | |
| </div> | |
| </td> | |
| <td>Electrolyte Panel</td> | |
| <td>May 13, 2023</td> | |
| <td><span class="status pending">Processing</span></td> | |
| <td><span class="test-result">Pending</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="card card-lg"> | |
| <div class="card-header-lg"> | |
| <h2>Critical Patient</h2> | |
| <div class="card-actions"> | |
| <button class="card-action-btn"> | |
| <i class="material-icons">more_vert</i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="patient-details"> | |
| <div class="patient-avatar"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Patient"> | |
| </div> | |
| <div class="patient-info"> | |
| <h3>John Wilson</h3> | |
| <div class="patient-meta"> | |
| <span><i class="material-icons" style="font-size: 16px;">male</i> Male</span> | |
| <span><i class="material-icons" style="font-size: 16px;">cake</i> 42 years</span> | |
| <span><i class="material-icons" style="font-size: 16px;">fingerprint</i> #P-10045</span> | |
| </div> | |
| <div class="patient-stats"> | |
| <div class="patient-stat"> | |
| <div class="patient-stat-value">17.2</div> | |
| <div class="patient-stat-label">Hemoglobin</div> | |
| </div> | |
| <div class="patient-stat"> | |
| <div class="patient-stat-value">148</div> | |
| <div class="patient-stat-label">Glucose</div> | |
| </div> | |
| <div class="patient-stat"> | |
| <div class="patient-stat-value">12.6</div> | |
| <div class="patient-stat-label">WBC count</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lab-results"> | |
| <h4>Abnormal Results</h4> | |
| <div class="lab-item"> | |
| <div> | |
| <div class="lab-name">Hemoglobin</div> | |
| <div class="lab-range">Normal: 13.8-17.2 g/dL</div> | |
| </div> | |
| <div class="lab-value high">17.2 g/dL</div> | |
| </div> | |
| <div class="lab-item"> | |
| <div> | |
| <div class="lab-name">Triglycerides</div> | |
| <div class="lab-range">Normal: <150 mg/dL</div> | |
| </div> | |
| <div class="lab-value high">210 mg/dL</div> | |
| </div> | |
| <div class="lab-item"> | |
| <div> | |
| <div class="lab-name">Blood Pressure</div> | |
| <div class="lab-range">Normal: 120/80 mmHg</div> | |
| </div> | |
| <div class="lab-value high">142/92 mmHg</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="chart-card"> | |
| <div class="chart-header"> | |
| <h2>Patient Visit Trends</h2> | |
| <div class="chart-tabs"> | |
| <div class="chart-tab active">Daily</div> | |
| <div class="chart-tab">Weekly</div> | |
| <div class="chart-tab">Monthly</div> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="patientVisitsChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Bottom Section --> | |
| <div class="data-section"> | |
| <div class="card card-lg"> | |
| <div class="card-header-lg"> | |
| <h2>Recent Activity</h2> | |
| <div class="card-actions"> | |
| <button class="card-action-btn"> | |
| <i class="material-icons">refresh</i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="activity-container"> | |
| <div class="activity-item"> | |
| <div class="activity-avatar"> | |
| <i class="material-icons">person</i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-title">New patient registered</div> | |
| <div class="activity-message"> | |
| <span>Michael Brown was added to the system by Dr. Smith</span> | |
| </div> | |
| <div class="activity-time">Today, 10:15 AM</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-avatar"> | |
| <i class="material-icons">science</i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-title">Lab test completed</div> | |
| <div class="activity-message"> | |
| <span>Complete Blood Count results are available for John Wilson</span> | |
| </div> | |
| <div class="activity-time">Today, 09:42 AM</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-avatar"> | |
| <i class="material-icons">medication</i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-title">Prescription issued</div> | |
| <div class="activity-message"> | |
| <span>Dr. Johnson prescribed Medication X to Sarah Miller</span> | |
| </div> | |
| <div class="activity-time">Yesterday, 4:30 PM</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-avatar"> | |
| <i class="material-icons">assignment</i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-title">Report generated</div> | |
| <div class="activity-message"> | |
| <span>Monthly analytics report has been generated</span> | |
| </div> | |
| <div class="activity-time">Yesterday, 3:15 PM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card card-lg"> | |
| <div class="card-header-lg"> | |
| <h2>Upcoming Appointments</h2> | |
| <div class="card-actions"> | |
| <button class="card-action-btn"> | |
| <i class="material-icons">add</i> Add New | |
| </button> | |
| </div> | |
| </div> | |
| <div class="events-container"> | |
| <div class="event-item"> | |
| <div class="event-time">10:00 AM</div> | |
| <div class="event-details"> | |
| <h4>Follow-up: John Wilson</h4> | |
| <p>Review lab results and discuss treatment plan</p> | |
| </div> | |
| </div> | |
| <div class="event-item"> | |
| <div class="event-time">11:30 AM</div> | |
| <div class="event-details"> | |
| <h4>New Patient: Robert Chen</h4> | |
| <p>Initial consultation and medical history</p> | |
| </div> | |
| </div> | |
| <div class="event-item"> | |
| <div class="event-time">02:15 PM</div> | |
| <div class="event-details"> | |
| <h4>Lab Test: Sarah Johnson</h4> | |
| <p>Annual blood work and cholesterol check</p> | |
| </div> | |
| </div> | |
| <div class="event-item"> | |
| <div class="event-time">04:00 PM</div> | |
| <div class="event-details"> | |
| <h4>Staff Meeting</h4> | |
| <p>Weekly departmental meeting and updates</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Menu item click handler | |
| const menuItems = document.querySelectorAll('.menu-item'); | |
| menuItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| menuItems.forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Chart tab click handler | |
| const chartTabs = document.querySelectorAll('.chart-tab'); | |
| chartTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| chartTabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| // In a real app, you'd update the chart data here | |
| updateChartData(this.textContent); | |
| }); | |
| }); | |
| // Patient Visits Chart | |
| const ctx = document.getElementById('patientVisitsChart').getContext('2d'); | |
| const patientVisitsChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |
| datasets: [{ | |
| label: 'Patient Visits', | |
| data: [45, 52, 48, 65, 72, 38, 20], | |
| backgroundColor: 'rgba(26, 115, 232, 0.1)', | |
| borderColor: 'rgb(26, 115, 232)', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| fill: true, | |
| pointBackgroundColor: 'white', | |
| pointBorderColor: 'rgb(26, 115, 232)', | |
| pointBorderWidth: 2, | |
| pointRadius: 5, | |
| pointHoverRadius: 7 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| backgroundColor: 'rgba(0, 0, 0, 0.8)', | |
| titleFont: { | |
| size: 14, | |
| weight: 'bold' | |
| }, | |
| bodyFont: { | |
| size: 12 | |
| }, | |
| padding: 12, | |
| cornerRadius: 8, | |
| displayColors: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| }, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| function updateChartData(range) { | |
| let newData; | |
| let newLabels; | |
| if (range === 'Weekly') { | |
| newLabels = ['Week 1', 'Week 2', 'Week 3', 'Week 4']; | |
| newData = [320, 350, 380, 410]; | |
| } else if (range === 'Monthly') { | |
| newLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; | |
| newData = [1320, 1250, 1480, 1420, 1560]; | |
| } else { | |
| newLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; | |
| newData = [45, 52, 48, 65, 72, 38, 20]; | |
| } | |
| patientVisitsChart.data.labels = newLabels; | |
| patientVisitsChart.data.datasets[0].data = newData; | |
| patientVisitsChart.update(); | |
| } | |
| // Search functionality placeholder | |
| const searchInput = document.querySelector('.search-bar input'); | |
| searchInput.addEventListener('input', function() { | |
| console.log('Searching for:', this.value); | |
| // In a real app, you'd filter data or make an API call here | |
| }); | |
| // Sample data for a real implementation | |
| const patientDatabase = [ | |
| { | |
| id: "P-10045", | |
| name: "John Wilson", | |
| age: 42, | |
| gender: "Male", | |
| lastVisit: "2023-05-15", | |
| testResults: [ | |
| { test: "Hemoglobin", value: 17.2, unit: "g/dL", status: "high" }, | |
| { test: "WBC", value: 12.6, unit: "10³/µL", status: "high" }, | |
| { test: "Glucose", value: 148, unit: "mg/dL", status: "high" } | |
| ], | |
| upcomingAppointment: "2023-05-16" | |
| }, | |
| { | |
| id: "P-10098", | |
| name: "Sarah Johnson", | |
| age: 35, | |
| gender: "Female", | |
| lastVisit: "2023-05-15", | |
| testResults: [ | |
| { test: "Cholesterol", value: 185, unit: "mg/dL", status: "normal" }, | |
| { test: "Triglycerides", value: 120, unit: "mg/dL", status: "normal" } | |
| ], | |
| upcomingAppointment: "2023-05-17" | |
| }, | |
| { | |
| id: "P-10124", | |
| name: "Michael Brown", | |
| age: 58, | |
| gender: "Male", | |
| lastVisit: "2023-05-14", | |
| testResults: [ | |
| { test: "AST", value: 42, unit: "U/L", status: "normal" }, | |
| { test: "ALT", value: 38, unit: "U/L", status: "normal" } | |
| ], | |
| upcomingAppointment: "2023-05-18" | |
| } | |
| ]; | |
| console.log("Medical dashboard loaded. Sample patient database:", patientDatabase); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |