459 lines
26 KiB
HTML
459 lines
26 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"/>
|
|
<title>ZappCare Super Admin - Channel Health</title>
|
|
<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;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #bfc8cd;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- SideNavBar Shell -->
|
|
<aside class="fixed left-0 top-0 h-screen w-64 bg-[#f2f4f6] dark:bg-slate-900/85 backdrop-blur-xl flex flex-col p-4 space-y-2 z-50">
|
|
<div class="px-2 py-4 mb-6">
|
|
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline">ZappCare</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-outline mt-1 font-bold">System Admin</p>
|
|
</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 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dns">dns</span>
|
|
<span>Infrastructure</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold font-['Manrope'] tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="analytics" style="font-variation-settings: 'FILL' 1;">analytics</span>
|
|
<span>Monitoring</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="support_agent">support_agent</span>
|
|
<span>Agents</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
|
<span>Tenants</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="monitor_heart">monitor_heart</span>
|
|
<span>Health</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
|
|
<span>Logs</span>
|
|
</a>
|
|
</nav>
|
|
<div class="pt-4 border-t border-outline-variant/10 space-y-1">
|
|
<button class="w-full flex items-center justify-center gap-2 py-3 px-4 bg-gradient-to-br from-primary to-primary-container text-white rounded-full font-bold text-sm shadow-lg hover:scale-[0.98] transition-transform duration-200">
|
|
<span class="material-symbols-outlined text-sm" data-icon="add">add</span>
|
|
New Tenant
|
|
</button>
|
|
<div class="mt-4">
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
|
<span>Support</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar Shell -->
|
|
<header class="fixed top-0 right-0 left-64 h-16 bg-[#f7f9fc]/90 dark:bg-slate-950/90 backdrop-blur-md flex items-center justify-between px-8 z-40">
|
|
<div class="flex items-center gap-6">
|
|
<div class="relative group">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-outline pointer-events-none">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="search">search</span>
|
|
</span>
|
|
<input class="bg-surface-container-high border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary-container w-64 transition-all duration-200" placeholder="Search systems..." type="text"/>
|
|
</div>
|
|
<nav class="flex items-center gap-6 text-sm font-medium font-['Inter']">
|
|
<a class="text-slate-500 hover:text-slate-800 transition-opacity" href="#">Dashboard</a>
|
|
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1" href="#">Metrics</a>
|
|
<a class="text-slate-500 hover:text-slate-800 transition-opacity" href="#">Reports</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2 bg-primary/5 px-3 py-1.5 rounded-full border border-primary/10">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span class="text-xs font-bold text-primary">System Status</span>
|
|
</div>
|
|
<button class="text-slate-500 hover:text-slate-800 transition-opacity relative">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full border-2 border-surface"></span>
|
|
</button>
|
|
<div class="flex items-center gap-3 ml-2 cursor-pointer hover:opacity-80 transition-opacity">
|
|
<img alt="ZappCare Admin" class="w-8 h-8 rounded-full border-2 border-primary-container object-cover" data-alt="Professional headshot of a system administrator with a friendly expression, minimalist clean background, soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBCMda6Uy5kWO5UyixDowxDvu8FjsIQ9araFkR-d5llT7bHxKozUcIIUzC_vv5JDxukJEEdl9fmw0PqdNSu42qlnHlVD8z7WgQdtmL3vBPLHjSAePPgD8u-a7T-EztnqfrtMLXVlBwt9Eqaoo0Ffza_Wy5oAcSnDIhJotBDt9jyuTu9ZflBBDP-_c3ebjSjMA_4Ym4hgJzRCNkSr5To4i0aiIeXQzFPhqIVH1ZdtlU8oEgD5WQPMzLLvq4MG3iNmSVVPob8IwsYOv8"/>
|
|
<div class="hidden lg:block text-left">
|
|
<p class="text-xs font-bold leading-none">Alex Rivera</p>
|
|
<p class="text-[10px] text-outline font-medium">Global Admin</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 pt-24 pb-12 px-8 min-h-screen">
|
|
<!-- Page Header -->
|
|
<div class="flex items-end justify-between mb-10">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<a class="text-primary hover:underline text-xs font-semibold" href="#">Tenants</a>
|
|
<span class="material-symbols-outlined text-xs text-outline" data-icon="chevron_right">chevron_right</span>
|
|
<a class="text-primary hover:underline text-xs font-semibold" href="#">Acme Corp</a>
|
|
</div>
|
|
<h2 class="text-3xl font-extrabold font-headline text-on-surface tracking-tight">Channel Detail Health</h2>
|
|
<div class="flex items-center gap-3 mt-1">
|
|
<span class="text-outline-variant font-medium text-sm">Instance: <span class="text-on-surface">WA-PROD-0042</span></span>
|
|
<span class="w-1.5 h-1.5 rounded-full bg-outline-variant"></span>
|
|
<span class="text-outline-variant font-medium text-sm">Channel ID: <span class="text-on-surface">254-8891-CH</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="bg-surface-container-low text-on-surface-variant font-bold text-sm py-2.5 px-6 rounded-full hover:bg-surface-container-high transition-colors">
|
|
Reset Webhook
|
|
</button>
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-white font-bold text-sm py-2.5 px-6 rounded-full shadow-lg hover:scale-95 transition-transform">
|
|
Force Sync Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Bento Monitoring Grid -->
|
|
<div class="grid grid-cols-12 gap-6">
|
|
<!-- Key Stats Cards -->
|
|
<div class="col-span-12 md:col-span-3">
|
|
<div class="bg-surface-container-low rounded-[2rem] p-6 h-full flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-white rounded-2xl shadow-sm">
|
|
<span class="material-symbols-outlined text-emerald-600" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-emerald-600 bg-emerald-100 px-2 py-1 rounded-full">ACTIVE</span>
|
|
</div>
|
|
<h3 class="text-outline text-xs font-bold uppercase tracking-widest mb-1">Status</h3>
|
|
<p class="text-2xl font-extrabold font-headline">Operational</p>
|
|
</div>
|
|
<p class="text-xs text-outline font-medium mt-4">Uptime: 99.98% (last 30d)</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-3">
|
|
<div class="bg-surface-container-low rounded-[2rem] p-6 h-full flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-white rounded-2xl shadow-sm">
|
|
<span class="material-symbols-outlined text-primary" data-icon="hub">hub</span>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-primary bg-primary-container/30 px-2 py-1 rounded-full">320ms</span>
|
|
</div>
|
|
<h3 class="text-outline text-xs font-bold uppercase tracking-widest mb-1">Webhook Health</h3>
|
|
<p class="text-2xl font-extrabold font-headline">Healthy</p>
|
|
</div>
|
|
<p class="text-xs text-outline font-medium mt-4">Endpoint: https://api.acme.com/v1/wa</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-3">
|
|
<div class="bg-surface-container-low rounded-[2rem] p-6 h-full flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-white rounded-2xl shadow-sm">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="sync">sync</span>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-secondary bg-secondary-container/30 px-2 py-1 rounded-full">LIVE</span>
|
|
</div>
|
|
<h3 class="text-outline text-xs font-bold uppercase tracking-widest mb-1">Last Sync</h3>
|
|
<p class="text-2xl font-extrabold font-headline">42s ago</p>
|
|
</div>
|
|
<p class="text-xs text-outline font-medium mt-4">Avg interval: 1.2 minutes</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-3">
|
|
<div class="bg-surface-container-low rounded-[2rem] p-6 h-full flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-white rounded-2xl shadow-sm">
|
|
<span class="material-symbols-outlined text-error" data-icon="warning" style="font-variation-settings: 'FILL' 1;">warning</span>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-error bg-error-container/40 px-2 py-1 rounded-full">-12%</span>
|
|
</div>
|
|
<h3 class="text-outline text-xs font-bold uppercase tracking-widest mb-1">Failure Rate</h3>
|
|
<p class="text-2xl font-extrabold font-headline">0.42%</p>
|
|
</div>
|
|
<p class="text-xs text-outline font-medium mt-4">Threshold: < 1.5%</p>
|
|
</div>
|
|
</div>
|
|
<!-- Delivery Issue Summary (Middle Large) -->
|
|
<div class="col-span-12 lg:col-span-8">
|
|
<div class="bg-white rounded-[2.5rem] p-8 shadow-sm relative overflow-hidden h-full">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-extrabold font-headline">Delivery Issue Summary</h3>
|
|
<p class="text-sm text-outline font-medium">Anomalies detected in the last 24 hours</p>
|
|
</div>
|
|
<button class="text-primary font-bold text-sm flex items-center gap-1">
|
|
Full Diagnostics
|
|
<span class="material-symbols-outlined text-sm" data-icon="open_in_new">open_in_new</span>
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-2xl">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-amber-500" data-icon="hourglass_empty">hourglass_empty</span>
|
|
<div>
|
|
<p class="text-sm font-bold">Media Latency</p>
|
|
<p class="text-[11px] text-outline">High processing time on video assets</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm font-black text-amber-600">8.2s</p>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-2xl">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-error" data-icon="error_outline">error_outline</span>
|
|
<div>
|
|
<p class="text-sm font-bold">Meta API Errors</p>
|
|
<p class="text-[11px] text-outline">400 Bad Request: Template Mismatch</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm font-black text-error">42</p>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-2xl opacity-60">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-outline" data-icon="block">block</span>
|
|
<div>
|
|
<p class="text-sm font-bold">Throttled Requests</p>
|
|
<p class="text-[11px] text-outline">Rate limit hits (Tier 2)</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm font-black">0</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low rounded-3xl p-6 relative flex flex-col justify-center">
|
|
<div class="absolute inset-0 opacity-10 pointer-events-none">
|
|
<svg class="w-full h-full" viewbox="0 0 100 40">
|
|
<path d="M0,35 Q10,30 20,32 T40,25 T60,28 T80,15 T100,20" fill="none" stroke="#0c6780" stroke-width="1.5"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-4xl font-black font-headline text-primary">82%</p>
|
|
<p class="text-xs font-bold text-outline-variant uppercase tracking-widest mt-1">Resolution Efficiency</p>
|
|
<div class="mt-6 flex justify-center gap-1">
|
|
<span class="w-2 h-8 bg-primary rounded-full"></span>
|
|
<span class="w-2 h-10 bg-primary/80 rounded-full"></span>
|
|
<span class="w-2 h-6 bg-primary/60 rounded-full"></span>
|
|
<span class="w-2 h-12 bg-primary/40 rounded-full"></span>
|
|
<span class="w-2 h-9 bg-primary/20 rounded-full"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Event Activity Feed (Right Side) -->
|
|
<div class="col-span-12 lg:col-span-4 row-span-2">
|
|
<div class="bg-white rounded-[2.5rem] shadow-sm p-8 h-full flex flex-col">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h3 class="text-xl font-extrabold font-headline">Live Event Stream</h3>
|
|
<span class="w-2 h-2 rounded-full bg-primary animate-ping"></span>
|
|
</div>
|
|
<div class="flex-1 space-y-6 overflow-y-auto custom-scrollbar pr-2">
|
|
<div class="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-0 before:w-px before:bg-outline-variant/30">
|
|
<span class="absolute left-[-4px] top-1 w-2 h-2 rounded-full bg-primary ring-4 ring-white"></span>
|
|
<p class="text-[11px] text-outline font-bold mb-1">10:42:15 AM</p>
|
|
<p class="text-sm font-bold">Webhook connection established</p>
|
|
<p class="text-[11px] text-outline-variant font-mono mt-1 px-2 py-1 bg-surface rounded">ID: stream_882_a</p>
|
|
</div>
|
|
<div class="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-0 before:w-px before:bg-outline-variant/30">
|
|
<span class="absolute left-[-4px] top-1 w-2 h-2 rounded-full bg-emerald-500 ring-4 ring-white"></span>
|
|
<p class="text-[11px] text-outline font-bold mb-1">10:41:02 AM</p>
|
|
<p class="text-sm font-bold">Message Batch Processed</p>
|
|
<p class="text-[11px] text-outline-variant mt-1">1,240 deliveries successful</p>
|
|
</div>
|
|
<div class="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-0 before:w-px before:bg-outline-variant/30">
|
|
<span class="absolute left-[-4px] top-1 w-2 h-2 rounded-full bg-error ring-4 ring-white"></span>
|
|
<p class="text-[11px] text-outline font-bold mb-1">10:38:44 AM</p>
|
|
<p class="text-sm font-bold">Sync Failure: Metadata mismatch</p>
|
|
<p class="text-[11px] text-error font-medium mt-1">Retrying in 12s...</p>
|
|
</div>
|
|
<div class="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-0 before:w-px before:bg-outline-variant/30">
|
|
<span class="absolute left-[-4px] top-1 w-2 h-2 rounded-full bg-primary ring-4 ring-white"></span>
|
|
<p class="text-[11px] text-outline font-bold mb-1">10:35:12 AM</p>
|
|
<p class="text-sm font-bold">System Self-Audit initiated</p>
|
|
<p class="text-[11px] text-outline-variant mt-1">Automated health check running</p>
|
|
</div>
|
|
<div class="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-0 before:w-px before:bg-outline-variant/30">
|
|
<span class="absolute left-[-4px] top-1 w-2 h-2 rounded-full bg-outline-variant ring-4 ring-white"></span>
|
|
<p class="text-[11px] text-outline font-bold mb-1">10:30:00 AM</p>
|
|
<p class="text-sm font-bold">Hourly report generated</p>
|
|
</div>
|
|
</div>
|
|
<button class="mt-8 w-full py-4 border-2 border-outline-variant/20 rounded-2xl text-sm font-bold hover:bg-surface-container-low transition-colors text-outline">
|
|
View Full Logs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Traffic Visualization (Bottom Large) -->
|
|
<div class="col-span-12 lg:col-span-8">
|
|
<div class="bg-surface-container-low rounded-[2.5rem] p-8 h-full">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-extrabold font-headline">Messaging Volume</h3>
|
|
<p class="text-sm text-outline font-medium">Real-time throughput (msg/sec)</p>
|
|
</div>
|
|
<div class="flex gap-2 bg-white p-1 rounded-xl shadow-sm">
|
|
<button class="px-3 py-1 text-[10px] font-bold bg-primary text-white rounded-lg">LIVE</button>
|
|
<button class="px-3 py-1 text-[10px] font-bold text-outline hover:bg-surface transition-colors rounded-lg">24H</button>
|
|
<button class="px-3 py-1 text-[10px] font-bold text-outline hover:bg-surface transition-colors rounded-lg">7D</button>
|
|
</div>
|
|
</div>
|
|
<!-- Decorative Chart Area -->
|
|
<div class="relative h-64 w-full flex items-end gap-1.5 px-4 pb-8">
|
|
<!-- Custom CSS Bars for data visualization look -->
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[60%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[45%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[55%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[70%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[85%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[65%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[40%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[30%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[50%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[75%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[90%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[60%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[45%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[80%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[55%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[40%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[65%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[75%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[35%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[25%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[60%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="flex-1 bg-primary/20 rounded-full h-[85%] hover:bg-primary transition-all duration-300"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 h-px bg-outline-variant/20"></div>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-6 pt-6 border-t border-outline-variant/10">
|
|
<div class="flex gap-8">
|
|
<div>
|
|
<p class="text-[10px] font-bold text-outline uppercase tracking-tighter">Peak Load</p>
|
|
<p class="text-lg font-extrabold">2.4k <span class="text-xs font-medium text-outline">msg/s</span></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-bold text-outline uppercase tracking-tighter">Daily Average</p>
|
|
<p class="text-lg font-extrabold">1.1k <span class="text-xs font-medium text-outline">msg/s</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex -space-x-2">
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" data-alt="Portrait of a young male developer working in a minimalist office space" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAx7PDLylxMhQSikZcxuei9FwuQBg6V3o5FDnw8NSV_OLIvodNl_St01X-e369W8XH0n1e5IqJgidcemU1miRO6FKQwzN56ulgtM-XE3_gbguLA_UfF951uKtgR6gjR7HHGEuqEFuWA9eaFdAi6OGUXPTJyBWIAT_TyJ1AdxFp7-JamQHmOPX2VmXjbuJ2-JbKaFdnTUFrqpfctsYIQna5GewhHdh67EGtxmEa6tzD3n31oLynfJsuXgiU9waunJrJ2ZdXTMc19aeE"/>
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" data-alt="Business professional woman in a bright office environment, high resolution profile shot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9_-2tWeLPTt4FwoL4yHJlI5dMK9Q-MOUC5kfu1cemp86yta_uQDPzJS78RBdyS-ldj7E0xrnzMxTxIhckz1rAUgWvT_amsJmnjYqiw4qotx6qLVcLIKlB4Ma2Ix-Idcmk9roSm5cYOvYzFhY6OcEnP_myeQ2aWBypeRurzFR0Q01vEkrjYKLE9P91YDNkgediSnzZlTceLoiy9IgvIvyja2yp4B80xBwAR9IHxJQX_CsUwQbbMU0-O4RYk9_WjCD4R-1XEAsS5z0"/>
|
|
<div class="w-6 h-6 rounded-full border-2 border-white bg-primary-container text-[8px] flex items-center justify-center font-bold text-on-primary-container">+4</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Contextual Glass Rail (Overlay Action Bar) -->
|
|
<div class="fixed right-6 bottom-6 flex flex-col gap-3 z-50">
|
|
<button class="w-14 h-14 bg-surface-container-lowest glass-card shadow-2xl rounded-full flex items-center justify-center text-primary hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
|
|
</button>
|
|
<button class="w-14 h-14 bg-surface-container-lowest glass-card shadow-2xl rounded-full flex items-center justify-center text-error hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="report">report</span>
|
|
</button>
|
|
<button class="w-14 h-14 bg-gradient-to-br from-primary to-primary-container shadow-2xl rounded-full flex items-center justify-center text-white hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="support">support</span>
|
|
</button>
|
|
</div>
|
|
</body></html> |