diff --git a/dashboard.css b/dashboard.css index 2f02979..f029cec 100644 --- a/dashboard.css +++ b/dashboard.css @@ -1,1066 +1,138 @@ -.dashboard-body { - display: grid; - grid-template-columns: 280px 1fr; - height: 100vh; - background: #F1F5F9; - color: var(--text-main); -} - -/* Sidebar */ -.sidebar { - background: var(--primary); - color: white; - padding: 2rem; - display: flex; - flex-direction: column; -} - -.sidebar .logo { - color: white; - margin-bottom: 3rem; -} - -.side-nav { - flex: 1; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.side-nav a { - color: #94A3B8; - text-decoration: none; - padding: 1rem; - border-radius: 12px; - display: flex; - align-items: center; - gap: 1rem; - transition: all 0.3s; -} - -.side-nav a:hover, .side-nav a.active { - background: rgba(255, 255, 255, 0.1); - color: white; -} - -.side-nav a.nav-disabled { - opacity: 0.5; - cursor: not-allowed; - font-size: 0.85rem; -} - -.side-nav a.nav-disabled small { - font-size: 0.6rem; - background: var(--accent); - color: white; - padding: 2px 6px; - border-radius: 4px; - margin-left: 4px; -} - -.user-profile { - display: flex; - align-items: center; - gap: 1rem; - padding-top: 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); -} - -.avatar { - width: 40px; - height: 40px; - background: var(--secondary); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; -} - -.info span { - display: block; - font-size: 0.75rem; - color: #94A3B8; -} - -/* Main Content */ -.dashboard-main { - padding: 2rem; - overflow-y: auto; -} - -/* --- CLINICAL ZEN VIEW (PREMIUM REFACTOR) --- */ +/* --- WORLD-CLASS ZEN 3.0 DESIGN SYSTEM --- */ .doctor-zen-section { - padding: 2rem; - max-width: 1200px; + padding: 3rem; + max-width: 1400px; margin: 0 auto; + background: #F1F5F9; + min-height: 100vh; } .zen-layout { display: grid; - grid-template-columns: 280px 1fr; - gap: 2.5rem; - height: calc(100vh - 120px); + grid-template-columns: 320px 1fr; + gap: 3rem; } -.current-patient h1 { - font-size: 2.2rem; - color: var(--primary); +/* Patient Info Slab */ +.patient-info-slab { + background: white; + padding: 2.5rem; + border-radius: 32px; + box-shadow: 0 10px 40px rgba(0,0,0,0.03); + border: 1px solid rgba(226, 232, 240, 0.5); + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2.5rem; +} + +.patient-identity h1 { + font-size: 2.8rem; + font-family: 'Outfit', sans-serif; + color: #0F172A; margin-bottom: 0.5rem; - letter-spacing: -0.02em; + letter-spacing: -0.03em; } -.current-patient h1 small { - font-size: 1.1rem; - color: #64748B; - font-weight: 400; -} - -.patient-meta { +.patient-identity .meta-pills { display: flex; - gap: 1rem; - color: #64748B; - font-size: 0.95rem; - margin-bottom: 2rem; -} - -.workspace-actions { - display: flex; - gap: 1rem; - align-items: center; - margin-bottom: 2rem; - background: white; - padding: 0.75rem; - border-radius: 16px; - box-shadow: 0 4px 12px rgba(0,0,0,0.05); - width: fit-content; -} - -.lang-select { - padding: 0.75rem 1rem; - border: 1px solid #E2E8F0; - border-radius: 12px; - font-weight: 600; - color: var(--primary); - background: #F8FAFC; - cursor: pointer; -} - -.btn-scribe, .btn-secondary, .btn-primary { - height: 48px; - padding: 0 1.5rem; - border-radius: 12px; - font-weight: 600; - display: flex; - align-items: center; - gap: 0.6rem; - transition: all 0.2s ease; -} - -.btn-scribe { - background: #F0F9FF; - color: #0EA5E9; - border: 1px solid #BAE6FD; -} - -.btn-scribe:hover { - background: #E0F2FE; - transform: translateY(-1px); -} - -.zen-textarea { - width: 100%; - height: 400px; - padding: 2rem; - border-radius: 24px; - border: 2px solid #F1F5F9; - background: white; - font-size: 1.1rem; - line-height: 1.6; - resize: none; - transition: border-color 0.2s ease; -} - -.zen-textarea:focus { - border-color: var(--secondary); - outline: none; - box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); -} - -.pipeline-card { - background: #F8FAFC; - border-radius: 24px; - padding: 1.5rem; - border: 1px solid #E2E8F0; -} - -.dash-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; -} - -.search-bar input { - width: 400px; - padding: 0.75rem 1.5rem; - border-radius: 99px; - border: 1px solid #E2E8F0; - outline: none; - font-size: 0.9rem; -} - -/* Stats */ -.stats-row { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.5rem; - margin-bottom: 2rem; -} - -.stat-card { - background: white; - padding: 1.5rem; - border-radius: 20px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); -} - -.stat-card span { - font-size: 0.875rem; - color: var(--text-muted); -} - -.quota-bars { - margin-top: 0.5rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.quota-item { - display: flex; - flex-direction: column; -} - -.quota-item small { - font-size: 0.7rem; - color: var(--text-muted); - margin-bottom: 2px; -} - -.bar { - height: 6px; - background: #E2E8F0; - border-radius: 99px; - overflow: hidden; -} - -.fill { - height: 100%; - background: var(--secondary); - border-radius: 99px; -} - -.stat-card h3 { - font-size: 1.75rem; - margin: 0.5rem 0; -} - -.text-accent { color: var(--accent); } - -/* Queue Table */ -.queue-section { - display: grid; - grid-template-columns: 1fr 300px; - gap: 1.5rem; -} - -.section-card { - background: white; - border-radius: 24px; - padding: 2rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); -} - -.card-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; -} - -.queue-table { - width: 100%; - border-collapse: collapse; -} - -.queue-table th { - text-align: left; - color: var(--text-muted); - font-weight: 500; - font-size: 0.875rem; - padding-bottom: 1rem; - border-bottom: 1px solid #F1F5F9; -} - -.queue-table td { - padding: 1.25rem 0; - border-bottom: 1px solid #F1F5F9; -} - -.counter-badge { - background: #F1F5F9; - color: var(--primary); - border: 2px solid var(--primary); - padding: 0.6rem 1rem; - font-size: 0.9rem; - margin-right: 1rem; -} - -.date-picker-group { - display: flex; - align-items: center; gap: 0.75rem; - background: white; + align-items: center; +} + +.pill { padding: 0.5rem 1rem; - border-radius: 12px; - border: 1px solid #E2E8F0; - margin-right: 1.5rem; -} - -.date-picker-group label { - font-size: 0.8rem; - font-weight: 600; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.025em; -} - -.date-input { - border: none; - font-family: 'Inter', sans-serif; - font-weight: 500; - color: var(--primary); - outline: none; - cursor: pointer; -} - -.status-pill { - padding: 0.4rem 0.8rem; - border-radius: 99px; - font-size: 0.75rem; - font-weight: 600; -} - -.status-pill.in-room { - background: #DBEAFE; - color: #1E40AF; -} - -.status-pill.waiting { - background: #FEF3C7; - color: #92400E; -} - -.status-pill.pending-pay { - background: #FFEDD5; - color: #C2410C; - border: 1px solid #F97316; -} - -.source-tag { - font-size: 0.75rem; - font-weight: 600; - padding: 0.25rem 0.6rem; - border-radius: 6px; -} - -.source-tag.online { - background: rgba(56, 189, 248, 0.1); - color: var(--secondary); -} - -.source-tag.walkin { - background: rgba(100, 116, 139, 0.1); - color: var(--text-muted); -} - -/* Modal Styles */ -.modal { - display: none; - position: fixed; - z-index: 2000; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.5); - backdrop-filter: blur(4px); -} - -.modal-content { - background-color: white; - margin: 10% auto; - padding: 2rem; - width: 500px; - border-radius: 24px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); -} - -.modal-header { - display: flex; - justify-content: space-between; - margin-bottom: 2rem; -} - -.close-modal { - font-size: 1.5rem; - cursor: pointer; -} - -.input-group { - margin-bottom: 1.5rem; -} - -.input-group label { - display: block; - font-size: 0.875rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.input-group input { - width: 100%; - padding: 0.75rem; - border-radius: 12px; - border: 1px solid var(--border); -} - -.med-row { - display: grid; - grid-template-columns: 2fr 1fr 1fr; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.med-row input { - padding: 0.6rem; - border-radius: 8px; - border: 1px solid var(--border); + border-radius: 100px; font-size: 0.85rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; } -.voice-section { - margin-bottom: 2rem; - padding: 1rem; +.pill.active { background: #DCFCE7; color: #15803D; } +.pill.triage { background: #FEE2E2; color: #B91C1C; } +.pill.time { background: #F1F5F9; color: #64748B; } + +/* Action Center */ +.action-center { + display: flex; + gap: 1rem; background: #F8FAFC; + padding: 0.75rem; + border-radius: 20px; +} + +.btn-zen { + height: 56px; + padding: 0 1.8rem; border-radius: 16px; - border: 1px dashed var(--border); - text-align: center; -} - -.recording-status { - margin-top: 1rem; - color: #EF4444; - font-weight: 600; - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} - -.hidden { display: none !important; } - -.pulse { - width: 12px; - height: 12px; - background: #EF4444; - border-radius: 50%; - animation: pulse-red 1.5s infinite; -} - -@keyframes pulse-red { - 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } - 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } - 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } -} - -.ai-insights-box { - margin-top: 1rem; - background: white; - padding: 1rem; - border-radius: 12px; - border-left: 4px solid var(--accent); - text-align: left; -} - -.ai-insights-box h4 { - font-size: 0.8rem; - color: var(--accent); - margin-bottom: 0.5rem; -} - -.ai-insights-box p { - font-size: 0.85rem; - color: var(--text-main); - line-height: 1.4; -} - -.modal-footer { - margin-top: 2rem; - text-align: right; -} - -.triage-pill { - font-size: 0.75rem; - padding: 0.25rem 0.6rem; - border-radius: 6px; - font-weight: 500; -} - -.triage-pill.urgent { - background: #FEE2E2; - color: #991B1B; - border-left: 3px solid #EF4444; -} - -.triage-pill.moderate { - background: #FEF3C7; - color: #92400E; - border-left: 3px solid #F59E0B; -} - -.triage-pill.routine { - background: #DCFCE7; - color: #166534; - border-left: 3px solid #10B981; -} - -.lang-tag { - font-size: 0.7rem; - background: #F1F5F9; - color: var(--text-muted); - padding: 2px 6px; - border-radius: 4px; font-weight: 700; -} - -.btn-small { - padding: 0.5rem 1rem; - border-radius: 8px; - border: none; - background: var(--primary); - color: white; - cursor: pointer; - font-size: 0.8rem; -} - -.btn-small.secondary { - background: #F1F5F9; - color: var(--primary); -} - -/* AI Insights Side Panel */ -.ai-insights { - background: linear-gradient(135deg, #0F172A, #1E293B); - color: white; -} - -.ai-insights h3 { - margin-bottom: 1rem; - font-size: 1.25rem; -} - -.ai-insights p { - font-size: 0.9rem; - opacity: 0.9; - margin-bottom: 1.5rem; -} - -.insight-item { - background: rgba(255, 255, 255, 0.05); - padding: 1rem; - border-radius: 12px; - border-left: 3px solid var(--accent); -} - -.insight-item small { - color: var(--accent); - font-weight: 600; -} - -/* --- ZEN DOCTOR VIEW --- */ -.zen-layout { - display: grid; - grid-template-columns: 280px 1fr; - gap: 2rem; - height: calc(100vh - 120px); -} - -.zen-pipeline { - background: white; - border-radius: 20px; - padding: 1.5rem; - border: 1px solid var(--border); - display: flex; - flex-direction: column; -} - -.pipeline-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; -} - -.pipeline-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.pipeline-item { - padding: 1rem; - border-radius: 12px; - border: 1px solid #F1F5F9; - display: flex; - align-items: center; - gap: 1rem; - background: #F8FAFC; -} - -.pipeline-item.next { - border-color: var(--secondary); - background: #F0F9FF; - border-left: 4px solid var(--secondary); -} - -.zen-grid { - display: grid; - grid-template-columns: 1fr 350px; - gap: 2rem; -} - -.clinical-notes-card { - background: white; - border-radius: 24px; - box-shadow: 0 4px 20px rgba(0,0,0,0.05); - border: 1px solid #f1f5f9; - overflow: hidden; -} - -.zen-textarea { - width: 100%; - height: 600px; - padding: 2rem; - border: none; - font-size: 1.1rem; - line-height: 1.6; - resize: none; - color: var(--primary); -} - -.zen-textarea:focus { - outline: none; -} - -.zen-sidebar { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.insight-card, .ai-nudge-box { - background: white; - border-radius: 20px; - padding: 1.5rem; - box-shadow: 0 4px 20px rgba(0,0,0,0.05); - border: 1px solid #f1f5f9; -} - -.vitals-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - margin-top: 1rem; -} - -.vital-item { - display: flex; - flex-direction: column; - align-items: center; - padding: 0.75rem; - background: #f8fafc; - border-radius: 12px; - text-align: center; -} - -.vital-item.warning { - background: #fef2f2; - border: 1px solid #fee2e2; -} - -.vital-item.warning .value { - color: #ef4444; -} - -.vital-item .label { - font-size: 0.7rem; - color: #64748b; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.25rem; -} - -.vital-item .value { - font-weight: 700; - color: var(--primary); font-size: 1rem; -} - -.allergy-tag { - margin-top: 1rem; - padding: 0.5rem 1rem; - background: #fff1f2; - color: #e11d48; - border-radius: 10px; - font-size: 0.85rem; - font-weight: 600; - text-align: center; -} - -.ai-nudge-box p { - font-size: 0.95rem; - color: #475569; - margin: 1rem 0; - line-height: 1.5; -} - -.suggested-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.suggested-tags span { - padding: 0.25rem 0.75rem; - background: #f0f9ff; - color: #0369a1; - border-radius: 8px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; -} - - -.zen-workspace { - display: flex; - flex-direction: column; - gap: 2rem; -} - -.workspace-header { - background: white; - padding: 2rem; - border-radius: 24px; - display: flex; - justify-content: space-between; - align-items: center; - box-shadow: var(--shadow); -} - -.status-indicator { - display: inline-block; - background: #DCFCE7; - color: #166534; - padding: 0.25rem 0.75rem; - border-radius: 99px; - font-size: 0.7rem; - font-weight: 800; - margin-bottom: 0.5rem; - letter-spacing: 0.05em; -} - -.current-patient h1 { - font-size: 2.2rem; - color: var(--primary); -} - -.current-patient h1 small { - font-size: 1.2rem; - color: var(--text-muted); - font-weight: 400; -} - -.patient-meta { - margin-top: 0.5rem; - color: var(--text-muted); - font-size: 0.95rem; -} - -.visit-timer { - font-family: 'Courier New', Courier, monospace; - font-weight: 700; - color: #EF4444; -} - -.zen-grid { - display: grid; - grid-template-columns: 2fr 1fr; - gap: 2rem; - flex: 1; -} - -.clinical-notes-card { - background: white; - border-radius: 24px; - padding: 2rem; - box-shadow: var(--shadow); - display: flex; - flex-direction: column; -} - -.zen-textarea { - flex: 1; - border: none; - resize: none; - font-size: 1.1rem; - color: var(--text-main); - line-height: 1.8; - margin-top: 1rem; - outline: none; - background: #FAFAFA; - padding: 1.5rem; - border-radius: 12px; -} - -.quick-links { - background: white; - border-radius: 24px; - padding: 2rem; - border: 1px solid var(--border); -} - -.lang-select { - padding: 0.8rem; - border-radius: 12px; - border: 1px solid var(--border); - background: white; - color: var(--primary); - font-weight: 600; - cursor: pointer; - outline: none; -} - -.lang-select:focus { - border-color: var(--secondary); -} - - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.summary-card { - background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%); - border: 1px solid #BBF7D0; - border-radius: 20px; - padding: 1.5rem; - box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1); -} - -.summary-content { - background: white; - padding: 1.2rem; - border-radius: 12px; - margin: 1rem 0; - font-size: 0.95rem; - color: #166534; - line-height: 1.6; - border-left: 4px solid #22C55E; -} - -.summary-actions { - display: flex; - gap: 1rem; -} - - background: var(--secondary); - color: white; - border: none; - padding: 0.8rem 1.5rem; - border-radius: 12px; - font-weight: 600; - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; - transition: all 0.2s ease; -} - -.btn-scribe:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); -} - -.scribe-indicator { - background: #F0F9FF; - border: 1px solid #BAE6FD; - padding: 1rem; - border-radius: 12px; - margin-bottom: 1.5rem; - font-size: 0.9rem; - color: #0369A1; display: flex; align-items: center; gap: 0.8rem; -} - -.scribe-indicator .dot { - width: 10px; - height: 10px; - background: #EF4444; - border-radius: 50%; - animation: pulse 1.5s infinite; -} - -@keyframes pulse { - 0% { transform: scale(1); opacity: 1; } - 50% { transform: scale(1.5); opacity: 0.5; } - 100% { transform: scale(1); opacity: 1; } -} - -.pipeline-item { + border: none; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -.pipeline-item:hover { - transform: translateX(5px); - background: #F1F5F9; +.btn-zen.scribe { + background: #0EA5E9; color: white; + box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3); +} +.btn-zen.history { background: white; color: #475569; border: 1px solid #E2E8F0; } +.btn-zen.start { background: #0F172A; color: white; } + +.btn-zen:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } + +/* Note Canvas */ +.note-canvas-container { + background: white; + border-radius: 40px; + padding: 3rem; + box-shadow: 0 10px 50px rgba(0,0,0,0.02); + border: 1px solid #F1F5F9; } - - -/* Tablet Breakpoint (1024px) */ -@media (max-width: 1024px) { - .dashboard-body { - grid-template-columns: 80px 1fr; - } - .sidebar .logo-text, .side-nav a span:not(:first-child) { - display: none; - } - .sidebar { - padding: 1rem; - align-items: center; - } - .side-nav a { - justify-content: center; - padding: 1rem 0; - } - .user-profile .info { - display: none; - } - .search-bar input { - width: 250px; - } - .stats-row { - grid-template-columns: repeat(2, 1fr); - } +.zen-textarea { + width: 100%; + height: 550px; + border: none; + font-size: 1.3rem; + line-height: 1.8; + color: #334155; + font-family: 'Inter', sans-serif; + resize: none; + background: transparent; } -/* Mobile Breakpoint (768px) */ -@media (max-width: 768px) { - .dashboard-body { - grid-template-columns: 1fr; - height: auto; - } - .sidebar { - display: none; /* Hide sidebar on mobile, we can add a hamburger later */ - } - .dashboard-main { - padding: 1rem; - } - .dash-header { - flex-direction: column; - align-items: stretch; - gap: 1rem; - } - .search-bar input { - width: 100%; - } - .header-actions { - display: flex; - flex-direction: column; - gap: 0.5rem; - } - .date-picker-group { - margin-right: 0; - width: 100%; - justify-content: space-between; - } - .stats-row { - grid-template-columns: 1fr; - } - .queue-table, .queue-table thead, .queue-table tbody, .queue-table th, .queue-table td, .queue-table tr { - display: block; - } - .queue-table thead { - display: none; - } - .queue-table tr { - background: white; - border-radius: 12px; - margin-bottom: 1rem; - padding: 1rem; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - border: 1px solid var(--border); - } - .queue-table td { - padding: 0.75rem 0; - display: flex; - justify-content: space-between; - align-items: center; - border: none; - border-bottom: 1px solid #f8fafc; - min-height: 48px; - } - .queue-table td:last-child { - border-bottom: none; - } - .queue-table td::before { - content: attr(data-label); - font-weight: 600; - color: #64748b; - font-size: 0.85rem; - } - .btn-primary, .btn-secondary { - width: 100%; - min-height: 52px; - } - .input-group input, .input-group select { - min-height: 52px; - font-size: 1rem; /* Prevent auto-zoom on iOS */ - } - .sidebar-mobile-toggle { - display: block; - background: var(--primary); - color: white; - padding: 1.25rem; - text-align: center; - font-weight: 700; - cursor: pointer; - min-height: 60px; - } +.zen-textarea:focus { outline: none; } + +/* Scribe Pulse */ +.scribe-status-bar { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1.5rem; + padding: 1rem 2rem; + background: #F0F9FF; + border-radius: 100px; + width: fit-content; + color: #0369a1; + font-weight: 600; + font-size: 0.9rem; } -/* Utilities */ -.hidden-mobile { - display: none !important; +.pulse-dot { + width: 12px; + height: 12px; + background: #0EA5E9; + border-radius: 50%; + animation: scribePulse 1.5s infinite; } -@media (min-width: 769px) { - .sidebar-mobile-toggle { - display: none; - } +@keyframes scribePulse { + 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); } + 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); } + 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } } diff --git a/dashboard.html b/dashboard.html index d3a3dd5..7206a67 100644 --- a/dashboard.html +++ b/dashboard.html @@ -81,48 +81,51 @@
-
-
- NOW SEEING +
+
+
+ Now Seeing + 08:45 AM +

Rahul Verma (28y, Male)

-
- #012Viral Fever Triage08:45 +
+ #012 + Viral Fever Triage
-
+ +
- - - + + +
-
+ -