350 lines
20 KiB
HTML
350 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-dim": "#d8dadc",
|
|
"on-secondary-fixed-variant": "#194c64",
|
|
"tertiary-fixed-dim": "#feb876",
|
|
"inverse-surface": "#2d3133",
|
|
"on-primary": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"on-tertiary-container": "#76450c",
|
|
"error": "#ba1a1a",
|
|
"tertiary": "#865219",
|
|
"on-surface": "#191c1e",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"primary": "#0c6780",
|
|
"background": "#f7f9fc",
|
|
"on-primary-fixed-variant": "#004d62",
|
|
"on-primary-fixed": "#001f29",
|
|
"primary-fixed": "#baeaff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-primary-container": "#005870",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed": "#001e2d",
|
|
"secondary": "#35637d",
|
|
"tertiary-container": "#fbb674",
|
|
"surface-container": "#eceef0",
|
|
"on-tertiary": "#ffffff",
|
|
"secondary-fixed": "#c5e7ff",
|
|
"on-surface-variant": "#3f484c",
|
|
"primary-fixed-dim": "#89d0ed",
|
|
"tertiary-fixed": "#ffdcbf",
|
|
"on-secondary": "#ffffff",
|
|
"on-tertiary-fixed": "#2d1600",
|
|
"inverse-primary": "#89d0ed",
|
|
"surface-tint": "#0c6780",
|
|
"secondary-container": "#b2e0fe",
|
|
"outline": "#6f787d",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"surface": "#f7f9fc",
|
|
"surface-bright": "#f7f9fc",
|
|
"surface-container-low": "#f2f4f6",
|
|
"on-secondary-container": "#36647e",
|
|
"surface-container-high": "#e6e8ea",
|
|
"on-background": "#191c1e",
|
|
"outline-variant": "#bfc8cd",
|
|
"on-tertiary-fixed-variant": "#6a3b01",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed-dim": "#9fccea",
|
|
"primary-container": "#87ceeb",
|
|
"surface-variant": "#e0e3e5"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.tonal-shift-bg { background-color: #f2f4f6; }
|
|
.glass-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
|
|
body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; color: #191c1e; }
|
|
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface antialiased overflow-hidden">
|
|
<!-- SideNavBar Anchor -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900/85 backdrop-blur-xl flex flex-col p-4 space-y-2 z-50">
|
|
<div class="flex items-center gap-3 px-2 mb-8 mt-2">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-container flex items-center justify-center text-on-primary">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">medical_services</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] leading-none">ZappCare</h1>
|
|
<p class="text-xs text-on-surface-variant font-medium opacity-70">System Admin</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">dns</span> Infrastructure
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">analytics</span> Monitoring
|
|
</a>
|
|
<!-- Active State Logic: Agents (Active for queue/assignment screens) -->
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-['Manrope'] font-bold tracking-tight scale-95 transition-transform duration-200 ease-in-out" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">support_agent</span> Agents
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">domain</span> Tenants
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">monitor_heart</span> Health
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">terminal</span> Logs
|
|
</a>
|
|
</nav>
|
|
<div class="pt-4 mt-auto border-t border-outline-variant/10 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">settings</span> Settings
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">help_outline</span> Support
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 min-h-screen relative overflow-y-auto">
|
|
<!-- TopNavBar Anchor -->
|
|
<header class="fixed top-0 right-0 left-64 h-16 z-40 bg-[#f7f9fc]/90 dark:bg-slate-950/90 backdrop-blur-md flex items-center justify-between px-8 w-full">
|
|
<div class="flex items-center gap-6">
|
|
<div class="relative group">
|
|
<span class="absolute inset-y-0 left-3 flex items-center text-outline pointer-events-none">
|
|
<span class="material-symbols-outlined text-xl">search</span>
|
|
</span>
|
|
<input class="bg-surface-container-high/50 border-none rounded-full py-2 pl-10 pr-4 w-64 text-sm focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search unassigned chats..." type="text"/>
|
|
</div>
|
|
<nav class="flex gap-6">
|
|
<a class="text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 font-['Inter'] text-sm font-medium transition-opacity" href="#">Dashboard</a>
|
|
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1 font-['Inter'] text-sm font-medium transition-opacity" href="#">Metrics</a>
|
|
<a class="text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 font-['Inter'] text-sm font-medium transition-opacity" href="#">Reports</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="px-4 py-1.5 rounded-full border border-outline-variant/30 text-sm font-medium hover:bg-surface-container-low transition-colors">
|
|
System Status
|
|
</button>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 text-on-surface-variant hover:opacity-80"><span class="material-symbols-outlined">notifications</span></button>
|
|
<img class="w-8 h-8 rounded-full object-cover bg-surface-container" data-alt="professional profile portrait of a confident male system administrator in a modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD68dB87eo5RZYKBzm243tuhd5Nv1gKiFA0cjmNt-b5H9ZwjdO7meDTcBZoHFaZ09kZTIXKvviFzGJtuZrnVrOSJOoXPOoFlKIoZiBpSad2AXHgDvrimUt8b5g79F65_3VxMkHa-BZnwMmXxOyjCIWGh-09r6cokM7nOTmLAGYOp4hDdbGI0l3_s5N9v6WeboNIzlySK3vdO6_LRr8J9vK64aHndFBB83r6kN6S9jmcfnfXZcPBovkCPQhUaeep1b-l8dVkGQqSHwE"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="pt-24 pb-12 px-8 max-w-7xl mx-auto">
|
|
<!-- Header Section -->
|
|
<div class="flex justify-between items-end mb-8">
|
|
<div>
|
|
<h2 class="text-4xl font-extrabold tracking-tight text-on-surface mb-2 font-headline">Unassigned Queue</h2>
|
|
<p class="text-on-surface-variant text-lg">Managing high-priority incoming conversations.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<div class="px-4 py-2 bg-surface-container rounded-full flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
<span class="text-sm font-semibold text-on-surface-variant">24 Active Agents</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Dashboard Stats Bento (Tonal Architecture) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-surface-container-low p-6 rounded-full flex flex-col justify-between h-32 border border-outline-variant/10">
|
|
<span class="text-xs font-bold text-primary tracking-widest uppercase">Waiting Total</span>
|
|
<span class="text-3xl font-black font-headline">12</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-6 rounded-full flex flex-col justify-between h-32 border border-outline-variant/10">
|
|
<span class="text-xs font-bold text-error tracking-widest uppercase">Critical Delay</span>
|
|
<span class="text-3xl font-black font-headline text-error">03</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-6 rounded-full flex flex-col justify-between h-32 border border-outline-variant/10">
|
|
<span class="text-xs font-bold text-on-surface-variant tracking-widest uppercase">Avg. Response</span>
|
|
<span class="text-3xl font-black font-headline">2m 14s</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-6 rounded-full flex flex-col justify-between h-32 border border-outline-variant/10">
|
|
<span class="text-xs font-bold text-primary-container tracking-widest uppercase">Service Level</span>
|
|
<span class="text-3xl font-black font-headline">98%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Table Container (Architectural Shell) -->
|
|
<div class="bg-surface-container-lowest rounded-full overflow-hidden shadow-sm shadow-on-surface/5">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-surface-container-low/50">
|
|
<th class="px-8 py-5 text-xs font-black uppercase tracking-widest text-on-surface-variant">Contact</th>
|
|
<th class="px-6 py-5 text-xs font-black uppercase tracking-widest text-on-surface-variant">Last Message</th>
|
|
<th class="px-6 py-5 text-xs font-black uppercase tracking-widest text-on-surface-variant">Waiting Time</th>
|
|
<th class="px-6 py-5 text-xs font-black uppercase tracking-widest text-on-surface-variant text-center">Priority</th>
|
|
<th class="px-8 py-5 text-xs font-black uppercase tracking-widest text-on-surface-variant text-right">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y-0">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-primary-container/10 transition-colors group">
|
|
<td class="px-8 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="close-up portrait of a cheerful young woman with bright smile and soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBquvX5bbSIsjW_U_GR3daro71OX2VJN9nCtxQZEgBH_G5FCW1j-MnUIYIyAcn1LksKVPpCSPTz1GxK4RQJo7R7DxZc86j8FE74SN9l0_jG2dpdEWtM_T72AgEbkDAs41UE-TUgwLl_XaRMD_KRhInP8_32RhULTJcLRVg2970bWDhgQHs-1HIqFpNdDn5kJ1BzhXnSdfcRCh13o8ot6UtuPmiJJ-TZVxosUPXCDzoKn7_1ocrezmvGSwB4bY1JbX8Xeu9YztC1dh0"/>
|
|
<span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-green-500 border-2 border-white rounded-full"></span>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-on-surface font-headline">Elena Rodriguez</div>
|
|
<div class="text-sm text-on-surface-variant">+1 (555) 012-3456</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="text-sm text-on-surface-variant max-w-xs truncate font-medium">"I'm having trouble accessing my lab results from yesterday..."</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-lg">schedule</span>
|
|
<span class="text-sm font-bold text-on-surface">4m 12s</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6 text-center">
|
|
<span class="px-3 py-1 bg-error-container text-on-error-container rounded-full text-xs font-black uppercase tracking-tighter">High</span>
|
|
</td>
|
|
<td class="px-8 py-6 text-right">
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
|
|
Claim Chat
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-primary-container/10 transition-colors group">
|
|
<td class="px-8 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="professional portrait of a middle-aged man with glasses and friendly expression in natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAewyKG1jZgsDhTv6QJ99nyHhKn_COvLLl-yK4TUB8wbzcicPqElnkd0gND6CTjkmqjIePchyZ2BJxGmAiaM3PX3D1v-ajJJwMmhtGPMf2QtNz7TuRS6mTh7-8G-tt3Vlmtvmmii3QW8dHPGrLLCmyss-EZSuUsMMXHqLNK-FjdKSOJntLUop-GhLk7aF8OtfRQTDm69_mh7YubosCQhFSeuIOHTPrLliwmk8mEB9kfJSZl0CYmH8oKDovA8DsNKeW1i4pHSv5Iii4"/>
|
|
<span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-green-500 border-2 border-white rounded-full"></span>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-on-surface font-headline">Marcus Chen</div>
|
|
<div class="text-sm text-on-surface-variant">marcus.c@example.com</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="text-sm text-on-surface-variant max-w-xs truncate font-medium">"Need to reschedule my consultation with Dr. Smith for next week."</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-lg">schedule</span>
|
|
<span class="text-sm font-bold text-on-surface">12m 45s</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6 text-center">
|
|
<span class="px-3 py-1 bg-surface-container-high text-on-surface-variant rounded-full text-xs font-black uppercase tracking-tighter">Normal</span>
|
|
</td>
|
|
<td class="px-8 py-6 text-right">
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
|
|
Claim Chat
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="hover:bg-primary-container/10 transition-colors group">
|
|
<td class="px-8 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<div class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container font-black text-lg">SJ</div>
|
|
<span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-yellow-500 border-2 border-white rounded-full"></span>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-on-surface font-headline">Sarah Jenkins</div>
|
|
<div class="text-sm text-on-surface-variant">+1 (555) 998-0021</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="text-sm text-on-surface-variant max-w-xs truncate font-medium">"Which pharmacy has my prescription ready?"</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-lg">schedule</span>
|
|
<span class="text-sm font-bold text-on-surface">1h 04m</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6 text-center">
|
|
<span class="px-3 py-1 bg-surface-container-high text-on-surface-variant rounded-full text-xs font-black uppercase tracking-tighter">Normal</span>
|
|
</td>
|
|
<td class="px-8 py-6 text-right">
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
|
|
Claim Chat
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="hover:bg-primary-container/10 transition-colors group">
|
|
<td class="px-8 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="intimate close-up portrait of a woman with natural sunlight and depth of field blur" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB64JSs18neXk5CqLB0DHZjM10Z1e-JEo54gwJcdfULA0W4nNm0YFj6QeW4_YANPeo85Mysl3OZwwIUJzT7rGI13k2l1Z3FL0Ms-SeUhVHzuo8stfwiGYRYzXC9Ai9q8Rw-Wu1AwAIJRXeROvw0SLzdlH0NN2ca1T8JDuO7lEGBvm_hv8JVB4D-PLRqsrTUutroT34tjtRFe4k3Idi3W2TV7IpzdAfm0tUz-FFSG31PG2ttzv1epPqW61qMEQhDptMCParVoK2c4wk"/>
|
|
<span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-green-500 border-2 border-white rounded-full"></span>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-on-surface font-headline">Julia Vance</div>
|
|
<div class="text-sm text-on-surface-variant">julia.v@org.co</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="text-sm text-on-surface-variant max-w-xs truncate font-medium">"I have a sharp pain in my lower back, need medical advice immediately."</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-error text-lg">priority_high</span>
|
|
<span class="text-sm font-bold text-error">0m 34s</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6 text-center">
|
|
<span class="px-3 py-1 bg-error-container text-on-error-container rounded-full text-xs font-black uppercase tracking-tighter">Urgent</span>
|
|
</td>
|
|
<td class="px-8 py-6 text-right">
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
|
|
Claim Chat
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Empty State Concept (Editorial Moment) -->
|
|
<div class="mt-12 text-center p-12 border-2 border-dashed border-outline-variant/30 rounded-full">
|
|
<div class="w-16 h-16 bg-surface-container rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span class="material-symbols-outlined text-primary-container text-3xl">inbox</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold font-headline text-on-surface mb-2">Queue Health is Normal</h3>
|
|
<p class="text-on-surface-variant max-w-md mx-auto">There are 12 more unassigned chats remaining in the secondary queue. Efficiency is currently at 94%.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Background Accent (Architectural Soul) -->
|
|
<div class="fixed top-0 right-0 -z-10 w-[800px] h-[800px] bg-primary/5 blur-[120px] rounded-full translate-x-1/2 -translate-y-1/2"></div>
|
|
<div class="fixed bottom-0 left-64 -z-10 w-[600px] h-[600px] bg-secondary-container/5 blur-[100px] rounded-full -translate-x-1/3 translate-y-1/3"></div>
|
|
</main>
|
|
</body></html> |