chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
415
screen_design/admin_dashboard_zappcare_website/code.html
Normal file
415
screen_design/admin_dashboard_zappcare_website/code.html
Normal file
@ -0,0 +1,415 @@
|
||||
<!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 Business Suite - Admin Dashboard</title>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<!-- Google Fonts: Manrope & Inter -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"background": "#f7f9fc",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"outline": "#6f787d",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#865219",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
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;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface overflow-hidden">
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- SideNavBar Component -->
|
||||
<aside class="h-screen sticky left-0 w-64 bg-slate-50/85 backdrop-blur-md flex flex-col py-6 px-4 space-y-8 z-50">
|
||||
<!-- Brand Logo -->
|
||||
<div class="flex items-center gap-3 px-2">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-container rounded-full flex items-center justify-center text-white shadow-lg">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-extrabold font-headline text-sky-600 tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Business Suite</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Navigation -->
|
||||
<nav class="flex-1 flex flex-col space-y-1">
|
||||
<a class="flex items-center gap-3 py-3 px-4 bg-sky-100 text-sky-800 rounded-xl font-semibold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">monitoring</span>
|
||||
<span class="font-headline text-sm tracking-tight">Analytics</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">inbox</span>
|
||||
<span class="font-headline text-sm tracking-tight">Inbox</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="font-headline text-sm tracking-tight">Contacts</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">robot_2</span>
|
||||
<span class="font-headline text-sm tracking-tight">Automation</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-headline text-sm tracking-tight">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- CTA -->
|
||||
<div class="px-2">
|
||||
<button class="w-full py-3 bg-gradient-to-br from-primary to-primary-container text-white rounded-full font-bold shadow-md hover:shadow-lg transition-transform active:scale-95 flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-lg">chat</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Footer Tabs -->
|
||||
<div class="border-t border-slate-200/50 pt-4 flex flex-col space-y-1">
|
||||
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-headline text-sm tracking-tight">Help</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span class="font-headline text-sm tracking-tight">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Canvas -->
|
||||
<main class="flex-1 flex flex-col h-screen overflow-y-auto">
|
||||
<!-- TopNavBar Component -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 bg-white/95 backdrop-blur-sm flex items-center justify-between px-8">
|
||||
<div class="flex items-center flex-1 max-w-xl">
|
||||
<div class="relative w-full group">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full text-sm focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search insights, agents, or messages..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 ml-8">
|
||||
<button class="text-slate-400 hover:text-sky-600 transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="text-slate-400 hover:text-sky-600 transition-colors">
|
||||
<span class="material-symbols-outlined">apps</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-3 pl-4 border-l border-slate-100">
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-on-surface">Alex Rivera</p>
|
||||
<p class="text-[10px] text-slate-500">Admin</p>
|
||||
</div>
|
||||
<img class="w-9 h-9 rounded-full object-cover border-2 border-white shadow-sm" data-alt="portrait of a professional male administrator in a clean office setting, soft corporate lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVxfS49h-T2AycwZ8MWRZriZQNkuJqY65QLsfjfPVgWuOG2_T75zEpgzR0yMZnzyYX7-Olwg9dCU6T3TBtsOub-XPIdcM8z9t464icOnezcjzyC3ZM9alqgkwdJ1wjbpzN7pNS1F4ug0vLa1-BY5L-lOjel5PI3iqtTVHlnsNyXMcKSybZgGjmhDhhRDH8avmQf4uJwlPziVF5XLnAOHO_JwzCbLjevdNRagQ_zx4llfbYUZye3DmwaGVqVC430e-09P4d_KYT8lk"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Dashboard Content -->
|
||||
<div class="p-8 space-y-8">
|
||||
<!-- Welcome Section -->
|
||||
<div>
|
||||
<h2 class="text-3xl font-extrabold font-headline text-on-surface tracking-tight">Analytics Overview</h2>
|
||||
<p class="text-slate-500 font-medium">Real-time performance metrics for ZappCare Business</p>
|
||||
</div>
|
||||
<!-- KPI Cards Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- KPI Card 1 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-2 bg-sky-50 rounded-xl text-sky-600">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">forum</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-emerald-500 bg-emerald-50 px-2 py-1 rounded-full">+12%</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold font-headline text-on-surface">432</p>
|
||||
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Active Conversations</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- KPI Card 2 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-2 bg-amber-50 rounded-xl text-amber-600">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hourglass_top</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-amber-500 bg-amber-50 px-2 py-1 rounded-full">High</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold font-headline text-on-surface">24</p>
|
||||
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Waiting Reply</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- KPI Card 3 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-2 bg-emerald-50 rounded-xl text-emerald-600">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-emerald-500 bg-emerald-50 px-2 py-1 rounded-full">94%</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold font-headline text-on-surface">1,280</p>
|
||||
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Resolved Today</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- KPI Card 4 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-2 bg-indigo-50 rounded-xl text-indigo-600">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">engineering</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-slate-400 bg-slate-100 px-2 py-1 rounded-full">Optimal</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold font-headline text-on-surface">78%</p>
|
||||
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Agent Workload</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Layout Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Center Content: Chart -->
|
||||
<div class="lg:col-span-2 bg-surface-container-lowest p-8 rounded-full shadow-sm border border-white/50">
|
||||
<div class="flex justify-between items-center mb-10">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold font-headline text-on-surface">Message Volume Today</h3>
|
||||
<p class="text-sm text-slate-400">Activity across all connected channels</p>
|
||||
</div>
|
||||
<select class="bg-surface-container-low border-none text-xs font-bold rounded-xl px-4 py-2 focus:ring-0">
|
||||
<option>Last 24 Hours</option>
|
||||
<option>Last 7 Days</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Visual Mockup of a Bar Chart -->
|
||||
<div class="h-64 flex items-end justify-between gap-2 px-2">
|
||||
<div class="flex-1 bg-sky-100 rounded-t-lg h-[40%] group relative">
|
||||
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">420</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-sky-200 rounded-t-lg h-[65%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-300 rounded-t-lg h-[85%] group relative"></div>
|
||||
<div class="flex-1 bg-primary rounded-t-lg h-[95%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-400 rounded-t-lg h-[70%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-300 rounded-t-lg h-[55%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-200 rounded-t-lg h-[45%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-100 rounded-t-lg h-[30%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-200 rounded-t-lg h-[60%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-400 rounded-t-lg h-[80%] group relative"></div>
|
||||
<div class="flex-1 bg-primary rounded-t-lg h-[100%] group relative"></div>
|
||||
<div class="flex-1 bg-sky-300 rounded-t-lg h-[75%] group relative"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-4 px-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
||||
<span>08:00</span>
|
||||
<span>10:00</span>
|
||||
<span>12:00</span>
|
||||
<span>14:00</span>
|
||||
<span>16:00</span>
|
||||
<span>18:00</span>
|
||||
<span>20:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Sidebar Sections -->
|
||||
<div class="space-y-8">
|
||||
<!-- Agent Response Speed List -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-white/50">
|
||||
<h3 class="text-sm font-bold font-headline text-on-surface mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-lg">speed</span>
|
||||
Agent Response Speed
|
||||
</h3>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img class="w-8 h-8 rounded-full object-cover" data-alt="smiling professional woman agent avatar, soft focus office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPCYAX8bx8vpQllZe6nYxqcP5Fds7yl6dJvkU25gW0xc6J5WkSIQ8QFkw0s4YJu-jMeWtYvKAoSagQhn6awGp-bWphS0zisjUp3bnhNEq9urCXr-bLcbM4GPW9gzGU2W0nVf1GRiOCXLC1m2lFKV6bCmpxEdmyhgFaurGnmaK_nOm9uyNODWJBqbE5zG_g7psGN2XMvgd9_44qbzDnnrXyVnC0mQhvEXCwRJdyvH2VzAV_ecEFXz0F0Pb5KG01hipvVpFbamErU7A"/>
|
||||
<div>
|
||||
<p class="text-xs font-bold">Sarah Chen</p>
|
||||
<p class="text-[10px] text-slate-400">Senior Lead</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-emerald-600">1.2m</p>
|
||||
<p class="text-[10px] text-slate-400">avg. reply</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img class="w-8 h-8 rounded-full object-cover" data-alt="professional man in suit avatar, cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMmsdLxdzm1eHZ7tbSmmXzbXkPp51YVpn1IrdqsDhPYoTxKDQe5Fs0HFAfD53GNI4og2_dH_YAUoen9EGnTxcam3JBviUiCmvQdrc9s7lNlmwUtL1RAAOlmOOUYWvd9C72LGfIgai6tmlhgh3QqzSg2yAw1AQxma1V8B958-DUyYicvLOkGH8Jqzcqatpbwhdqj6lXFzPS83O1UsIV8tR2Mb24ILindmCvBfQn3eijoRkVZViuZlf0tVF5Wt0sUoRwGqeWs6kcaF0"/>
|
||||
<div>
|
||||
<p class="text-xs font-bold">Marcus Bell</p>
|
||||
<p class="text-[10px] text-slate-400">Support Specialist</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-emerald-600">2.4m</p>
|
||||
<p class="text-[10px] text-slate-400">avg. reply</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img class="w-8 h-8 rounded-full object-cover" data-alt="young professional woman with glasses, minimalist white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgxHSsDErS93XY_vWNqhoiy1LuuQlrLnZ86r9Bd6iL_QYAe7MPi8L0W8VlZeeSMI_RLdyuRmtFVVy_bhsMrXttR32eQjbgdMpBtCSfZ5Uv7DTLQfOV_puiSH6n4QNrtUG2W-keL9eZ3Dd0MAJiDSer9ytQCNFAoIaMesWSkcKpZ0fRWU620w15fa9xv_hIwO8AwpKfGT9TxIk7KZP4HIzEDdxcWkvijL8q0cx1luIpBl0Emyr_4AViwaxAjhHMpCnP1zQEuDzf16A"/>
|
||||
<div>
|
||||
<p class="text-xs font-bold">Elena Kostic</p>
|
||||
<p class="text-[10px] text-slate-400">Automation Ops</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-amber-600">4.8m</p>
|
||||
<p class="text-[10px] text-slate-400">avg. reply</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-6 py-2 text-[10px] font-bold text-primary uppercase tracking-widest hover:bg-sky-50 rounded-lg transition-colors">View All Agents</button>
|
||||
</div>
|
||||
<!-- Recent Campaigns Feed -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-white/50">
|
||||
<h3 class="text-sm font-bold font-headline text-on-surface mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-lg">campaign</span>
|
||||
Recent Campaigns
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 bg-surface-container-low rounded-xl">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<p class="text-xs font-bold">Product Launch Q4</p>
|
||||
<span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
|
||||
</div>
|
||||
<p class="text-[10px] text-slate-500 mb-2">Sent to 4,200 recipients</p>
|
||||
<div class="w-full bg-slate-200 h-1 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[82%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-1 text-[9px] font-bold text-slate-400">
|
||||
<span>82% Open Rate</span>
|
||||
<span>Active</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-low rounded-xl">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<p class="text-xs font-bold">Holiday Discount</p>
|
||||
<span class="w-2 h-2 bg-slate-300 rounded-full"></span>
|
||||
</div>
|
||||
<p class="text-[10px] text-slate-500 mb-2">Sent to 12,500 recipients</p>
|
||||
<div class="w-full bg-slate-200 h-1 rounded-full overflow-hidden">
|
||||
<div class="bg-slate-400 h-full w-full"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-1 text-[9px] font-bold text-slate-400">
|
||||
<span>64% Open Rate</span>
|
||||
<span>Ended</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Stats Section -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 pb-10">
|
||||
<div class="bg-gradient-to-br from-primary to-primary-container p-8 rounded-full text-white shadow-xl relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-8 opacity-10 transform scale-150 group-hover:rotate-12 transition-transform duration-500">
|
||||
<span class="material-symbols-outlined text-9xl">auto_awesome</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-xl font-extrabold font-headline mb-2">AI Efficiency Boost</h3>
|
||||
<p class="text-white/80 text-sm max-w-sm mb-6">Automated responses saved your team over 140 hours of manual work this month. Optimization is currently at peak levels.</p>
|
||||
<div class="flex gap-4">
|
||||
<div class="bg-white/20 backdrop-blur-md px-4 py-2 rounded-xl">
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider opacity-70">Saved Hours</p>
|
||||
<p class="text-lg font-bold">142.5h</p>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur-md px-4 py-2 rounded-xl">
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider opacity-70">Cost Reduction</p>
|
||||
<p class="text-lg font-bold">28%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-8 rounded-full border border-slate-200 flex flex-col justify-center">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-bold font-headline text-on-surface mb-1">Customer Satisfaction</h3>
|
||||
<p class="text-sm text-slate-500 mb-4">Based on 842 recent surveys</p>
|
||||
<div class="flex items-center gap-1 text-amber-400">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0.5;">star</span>
|
||||
<span class="text-on-surface font-bold text-lg ml-2">4.8 / 5.0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-24 h-24 relative flex items-center justify-center">
|
||||
<svg class="w-full h-full transform -rotate-90">
|
||||
<circle class="text-slate-200" cx="48" cy="48" fill="transparent" r="40" stroke="currentColor" stroke-width="8"></circle>
|
||||
<circle class="text-primary" cx="48" cy="48" fill="transparent" r="40" stroke="currentColor" stroke-dasharray="251.2" stroke-dashoffset="10" stroke-width="8"></circle>
|
||||
</svg>
|
||||
<span class="absolute text-xs font-bold text-on-surface">96%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/admin_dashboard_zappcare_website/screen.png
Normal file
BIN
screen_design/admin_dashboard_zappcare_website/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
90
screen_design/aero_logic/DESIGN.md
Normal file
90
screen_design/aero_logic/DESIGN.md
Normal file
@ -0,0 +1,90 @@
|
||||
# Design System Specification: ZappCare
|
||||
|
||||
## 1. Overview & Creative North Star
|
||||
The Creative North Star for this design system is **"The Architectural Inbox."**
|
||||
|
||||
To move beyond the generic "SaaS dashboard" aesthetic, we treat the ZappCare interface as a physical environment built from light and air. Instead of relying on rigid, high-contrast grids and borders that clutter the user's focus, we utilize **Tonal Architecture**. By using subtle shifts in background values and intentional white space, we create a layout that feels fluid and premium. The goal is to transform a high-volume communication tool into a calm, editorial experience where messages are the hero, and the interface is an elegant, supportive scaffolding.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors & Surface Logic
|
||||
The palette is rooted in the "ZappCare Blue," expanded into a sophisticated range of Material Design tokens that prioritize depth over decoration.
|
||||
|
||||
### The "No-Line" Rule
|
||||
**Explicit Instruction:** Designers are prohibited from using 1px solid borders to section off major UI areas. Boundaries must be defined strictly through:
|
||||
1. **Background Color Shifts:** Placing a `surface-container-low` component on a `surface` background.
|
||||
2. **Tonal Transitions:** Using whitespace and subtle shifts in luminosity to indicate where one functional area ends and another begins.
|
||||
|
||||
### Surface Hierarchy & Nesting
|
||||
Treat the UI as a series of nested, architectural layers.
|
||||
* **Base:** `surface` (#f7f9fc) — the foundation.
|
||||
* **Structural Sections:** `surface-container-low` (#f2f4f6) — used for navigation sidebars or inactive message lists.
|
||||
* **Active Elements:** `surface-container-lowest` (#ffffff) — used for the active chat bubble or primary focus area to provide maximum "lift."
|
||||
* **Overlays:** `surface-container-highest` (#e0e3e5) — used for temporary modals or popovers.
|
||||
|
||||
### The "Glass & Gradient" Rule
|
||||
To inject "soul" into the digital product, floating elements (like message action bars or active tooltips) should employ **Glassmorphism**:
|
||||
* **Effect:** Semi-transparent `surface` colors (approx. 85% opacity) with a `20px` backdrop-blur.
|
||||
* **Signature Textures:** For primary CTAs and the main "New Chat" button, use a subtle linear gradient (Top-Left to Bottom-Right) transitioning from `primary` (#0c6780) to `primary_container` (#87ceeb). This prevents the "flat-box" feel and adds a custom, high-end finish.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography
|
||||
The typography strategy pairs the authoritative, geometric presence of **Manrope** with the high-legibility utilitarianism of **Inter**.
|
||||
|
||||
* **Display & Headlines (Manrope):** These are used for "Editorial Moments"—the welcome screen, empty states, and high-level dashboard metrics. The high x-height and rounded geometry of Manrope reflect the ZappCare logo's friendliness while maintaining an architectural structure.
|
||||
* **Title & Body (Inter):** Inter is the workhorse of the inbox. It is used for message content and metadata. Its neutral tone ensures that complex business conversations remain highly readable at any scale.
|
||||
* **Functional Hierarchy:** Large typographic scales (e.g., `display-lg` at 3.5rem) should be used with significant leading and generous negative space to create a "magazine" feel, even in a data-rich environment.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth
|
||||
In this design system, depth is a function of light, not lines.
|
||||
|
||||
### The Layering Principle
|
||||
Achieve hierarchy by stacking surface-container tiers. For instance, a chat card using `surface-container-lowest` placed on a background of `surface-container-low` creates a soft, natural lift that communicates importance without visual noise.
|
||||
|
||||
### Ambient Shadows
|
||||
When an element must "float" (e.g., a dropdown or a notification toast):
|
||||
* **Shadow:** Extra-diffused. `Blur: 24px`, `Spread: -4px`.
|
||||
* **Opacity:** 4% to 8%.
|
||||
* **Color Tint:** Instead of #000000, use a tinted shadow derived from `on_surface` (#191c1e) to ensure the shadow feels like a natural part of the ZappCare environment.
|
||||
|
||||
### The "Ghost Border" Fallback
|
||||
If a border is required for accessibility (e.g., in high-glare environments):
|
||||
* Use `outline_variant` (#bfc8cd) at **15% opacity**.
|
||||
* **Never** use 100% opaque, high-contrast borders.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components
|
||||
|
||||
### Buttons: The "Fluid Motion" Set
|
||||
* **Primary:** A gradient-fill button with `xl` (0.75rem) rounded corners. Padding should be generous (16px top/bottom, 32px left/right) to feel substantial.
|
||||
* **Secondary:** No fill. A "Ghost Border" (15% opacity `outline_variant`) that becomes a subtle `secondary_container` fill on hover.
|
||||
* **Interaction:** All buttons should have a 200ms ease-in-out transition on hover, subtly increasing the elevation or deepening the gradient.
|
||||
|
||||
### Input Fields: The "Architectural Frame"
|
||||
* **Styling:** Inputs use `surface_container_highest` with a bottom-only 2px "indicator" line using `primary` color only when focused.
|
||||
* **Labeling:** Floating labels using `label-md` (Inter) that transition to the header area on focus to maximize vertical space.
|
||||
|
||||
### Cards & Lists: The "Separator-Free" Inbox
|
||||
* **Forbid dividers.** To separate messages in the inbox list, use `md` (0.375rem) vertical white space and a 2% shift in background color for the hovered state.
|
||||
* **Active Chat:** The selected chat item should not have a border; it should transition to `primary_container` (#87ceeb) with a high-contrast `on_primary_container` (#005870) text to signal absolute focus.
|
||||
|
||||
### Additional Signature Component: The "Contextual Glass Rail"
|
||||
For the WhatsApp context, use a vertical navigation rail on the far left. This rail should be semi-transparent with a backdrop-blur, allowing the underlying background colors of the inbox to subtly peak through, creating a sense of "layered transparency."
|
||||
|
||||
---
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
* **DO** use whitespace as a functional tool. If elements feel crowded, increase the margin rather than adding a line.
|
||||
* **DO** use the `xl` (0.75rem) corner radius for main containers to echo the "bubble" nature of the logo.
|
||||
* **DO** prioritize "Tonal Layering"—use the different `surface_container` values to create a logical path for the eye.
|
||||
|
||||
### Don't
|
||||
* **DON'T** use pure black (#000000) for text. Use `on_surface` (#191c1e) to keep the contrast high but the "vibe" soft.
|
||||
* **DON'T** use standard 1px solid dividers. They interrupt the architectural flow.
|
||||
* **DON'T** use harsh, small-radius shadows. They make the UI look dated and "heavy."
|
||||
@ -0,0 +1,398 @@
|
||||
<!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 - Create Broadcast Campaign</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Icons -->
|
||||
<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"/>
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"background": "#f7f9fc",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-background": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"outline": "#6f787d",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"primary-container": "#87ceeb",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-container": "#005870"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.tonal-architecture-no-borders {
|
||||
border: none !important;
|
||||
}
|
||||
.scale-98-on-click:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.glassmorphism-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.custom-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #bfc8cd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface">
|
||||
<!-- Side Navigation Rail -->
|
||||
<aside class="h-screen w-72 fixed left-0 top-0 overflow-y-auto flex flex-col p-6 space-y-2 bg-[#f2f4f6] dark:bg-slate-900 tonal-architecture-no-borders z-50">
|
||||
<div class="mb-10 flex items-center gap-3">
|
||||
<div class="w-10 h-10 custom-gradient rounded-full flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">domain</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-black text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Business Suite</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">inbox</span>
|
||||
Inbox
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">contacts</span>
|
||||
Contacts
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">campaign</span>
|
||||
Campaigns
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">domain</span>
|
||||
Tenants
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-6 border-t border-slate-200">
|
||||
<button class="w-full flex items-center justify-center gap-2 custom-gradient text-white py-4 rounded-xl font-bold shadow-lg shadow-primary/20 scale-98-on-click transition-all">
|
||||
<span class="material-symbols-outlined">add_comment</span>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-18rem)] h-16 z-40 bg-[#f7f9fc]/85 backdrop-blur-xl dark:bg-slate-950/85 flex justify-between items-center px-8 tonal-shift-no-lines">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="relative w-full max-w-md group">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors">search</span>
|
||||
<input class="w-full bg-surface-container border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-slate-400 font-body" placeholder="Search campaigns, contacts..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 rounded-full transition-colors glassmorphism-hover">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 rounded-full transition-colors glassmorphism-hover">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-bold font-headline leading-tight">Alex Rivera</p>
|
||||
<p class="text-[10px] text-slate-500 font-medium">Campaign Manager</p>
|
||||
</div>
|
||||
<img alt="Manager Profile" class="w-10 h-10 rounded-full border-2 border-primary-container shadow-sm object-cover" data-alt="professional headshot of a smiling man in business casual attire with a soft blurred background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyNhXaGWTlBM5cuLGwtgp4MvwVnbi4s2UhwOTpmdun0sYMscrht5SpkcYFQ3wkp5-2Vid1Q72aapNt047Nd3ksEw8S2F5B2EAFAC6F2dNYCe7Bz8z6yTW7SnvSTrmrWrYbSnsZIgFTgY2ODPGb3CLNBzAjOxf4aSJBPSZzlIXsE0lTaIHPbkJbPhfKFXXx604Jaft1o5vQ7hnjq48znG9OnmJN_c1KDJe4nOlTRS_pWVlL9BW5CNPL97W1P1bUCWGg0frUjCViTxg"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-72 pt-16 min-h-screen">
|
||||
<div class="p-8 max-w-7xl mx-auto">
|
||||
<!-- Header & Stepper -->
|
||||
<div class="mb-10">
|
||||
<div class="flex items-center gap-2 text-slate-500 mb-2">
|
||||
<span class="text-xs font-bold tracking-widest uppercase">Campaigns</span>
|
||||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||||
<span class="text-xs font-bold tracking-widest uppercase text-primary">New Broadcast</span>
|
||||
</div>
|
||||
<h2 class="text-4xl font-black font-headline tracking-tight text-on-surface mb-8">Create Broadcast Campaign</h2>
|
||||
<!-- Stepper -->
|
||||
<div class="flex items-center gap-0 w-full max-w-3xl">
|
||||
<div class="flex flex-col items-center flex-1 group">
|
||||
<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold text-sm mb-2 shadow-xl shadow-primary/20">1</div>
|
||||
<span class="text-xs font-bold text-on-surface font-headline">Setup</span>
|
||||
</div>
|
||||
<div class="h-[2px] bg-primary flex-1 mb-6 opacity-30"></div>
|
||||
<div class="flex flex-col items-center flex-1 group">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container text-slate-400 flex items-center justify-center font-bold text-sm mb-2">2</div>
|
||||
<span class="text-xs font-bold text-slate-400 font-headline">Content</span>
|
||||
</div>
|
||||
<div class="h-[2px] bg-surface-container flex-1 mb-6"></div>
|
||||
<div class="flex flex-col items-center flex-1 group">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container text-slate-400 flex items-center justify-center font-bold text-sm mb-2">3</div>
|
||||
<span class="text-xs font-bold text-slate-400 font-headline">Review</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Grid -->
|
||||
<div class="grid grid-cols-12 gap-8 items-start">
|
||||
<!-- Form Area -->
|
||||
<div class="col-span-12 lg:col-span-7 space-y-6">
|
||||
<section class="bg-surface-container-lowest p-8 rounded-full shadow-sm">
|
||||
<h3 class="text-xl font-bold font-headline mb-6 text-primary flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">settings_suggest</span>
|
||||
Campaign Fundamentals
|
||||
</h3>
|
||||
<div class="space-y-8">
|
||||
<!-- Campaign Name -->
|
||||
<div class="relative group">
|
||||
<label class="absolute -top-2 left-4 bg-white px-2 text-[10px] font-black uppercase tracking-widest text-primary z-10">Campaign Name</label>
|
||||
<input class="w-full bg-transparent border-2 border-surface-container rounded-xl py-4 px-4 text-sm font-medium focus:border-primary focus:ring-0 transition-all" placeholder="e.g., Summer Wellness Promotion 2024" type="text"/>
|
||||
</div>
|
||||
<!-- Channel Selection -->
|
||||
<div>
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-4 block ml-1">Select Channel</label>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<button class="p-4 rounded-xl border-2 border-primary bg-primary-container/20 flex flex-col items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">chat_bubble</span>
|
||||
<span class="text-xs font-bold text-primary">WhatsApp</span>
|
||||
</button>
|
||||
<button class="p-4 rounded-xl border-2 border-surface-container hover:border-slate-300 flex flex-col items-center gap-2 transition-all opacity-50 grayscale cursor-not-allowed">
|
||||
<span class="material-symbols-outlined text-slate-400">mail</span>
|
||||
<span class="text-xs font-bold text-slate-500">Email</span>
|
||||
</button>
|
||||
<button class="p-4 rounded-xl border-2 border-surface-container hover:border-slate-300 flex flex-col items-center gap-2 transition-all opacity-50 grayscale cursor-not-allowed">
|
||||
<span class="material-symbols-outlined text-slate-400">sms</span>
|
||||
<span class="text-xs font-bold text-slate-500">SMS</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Target Segment Picker -->
|
||||
<div class="relative">
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block ml-1">Target Segment</label>
|
||||
<div class="w-full bg-surface-container-low rounded-xl p-4 flex items-center justify-between group hover:bg-surface-container transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
||||
<span class="material-symbols-outlined">groups</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold">Active Patients - Last 3 Months</p>
|
||||
<p class="text-[10px] text-slate-500">Approx. 2,450 recipients</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400">unfold_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Template Selection -->
|
||||
<div>
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block ml-1">Select Template</label>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="relative group cursor-pointer">
|
||||
<div class="absolute inset-0 border-2 border-primary rounded-xl z-10 pointer-events-none"></div>
|
||||
<div class="bg-surface-container rounded-xl p-4 h-32 overflow-hidden opacity-80">
|
||||
<div class="h-2 w-3/4 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-1/2 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-2/3 bg-slate-300 rounded mb-6"></div>
|
||||
<div class="h-6 w-20 bg-primary-container rounded"></div>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-between px-1">
|
||||
<span class="text-xs font-bold">Welcome Series</span>
|
||||
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<div class="bg-surface-container rounded-xl p-4 h-32 overflow-hidden group-hover:bg-slate-200 transition-colors">
|
||||
<div class="h-2 w-2/3 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-3/4 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-1/3 bg-slate-300 rounded mb-6"></div>
|
||||
<div class="h-6 w-20 bg-slate-400 rounded"></div>
|
||||
</div>
|
||||
<div class="mt-2 px-1">
|
||||
<span class="text-xs font-bold text-slate-600">Feedback Request</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Primary Actions Fixed Bottom (Desktop Simulation) -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-full border border-white shadow-lg">
|
||||
<button class="flex items-center gap-2 px-6 py-3 text-slate-600 font-bold text-sm hover:bg-slate-200 rounded-full transition-all scale-98-on-click">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
Cancel
|
||||
</button>
|
||||
<div class="flex gap-4">
|
||||
<button class="flex items-center gap-2 px-8 py-3 border-2 border-primary/20 text-primary font-bold text-sm hover:bg-primary/5 rounded-full transition-all scale-98-on-click">
|
||||
<span class="material-symbols-outlined">schedule</span>
|
||||
Schedule for Later
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-10 py-3 custom-gradient text-white font-bold text-sm rounded-full shadow-lg shadow-primary/20 transition-all scale-98-on-click hover:opacity-90">
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
Send Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Preview Area -->
|
||||
<div class="col-span-12 lg:col-span-5 sticky top-24">
|
||||
<div class="bg-surface-container-low p-8 rounded-full flex flex-col items-center">
|
||||
<p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-6">Real-time Mobile Preview</p>
|
||||
<!-- Device Mockup -->
|
||||
<div class="relative w-full max-w-[320px] aspect-[9/18.5] bg-slate-800 rounded-[3rem] p-3 shadow-2xl border-4 border-slate-700">
|
||||
<!-- Screen -->
|
||||
<div class="w-full h-full bg-[#e5ddd5] rounded-[2.5rem] overflow-hidden flex flex-col relative">
|
||||
<!-- Status Bar -->
|
||||
<div class="bg-[#075e54] h-8 flex items-center justify-between px-6 py-1">
|
||||
<div class="text-[10px] text-white font-medium">9:41</div>
|
||||
<div class="flex gap-1">
|
||||
<span class="material-symbols-outlined text-[12px] text-white">signal_cellular_4_bar</span>
|
||||
<span class="material-symbols-outlined text-[12px] text-white">wifi</span>
|
||||
<span class="material-symbols-outlined text-[12px] text-white">battery_full</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WhatsApp Header -->
|
||||
<div class="bg-[#075e54] p-3 pt-1 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-white text-lg">arrow_back</span>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200">
|
||||
<img alt="ZappCare Logo" class="w-full h-full rounded-full object-cover" data-alt="clean medical cross logo in blue against white background simple professional medical branding" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrzQtkKdtyY-vcoOmvVvPO09Zju2MjsOl2Uem8qZBjRIbRRIxgc8S2bH369ElVcJDJPQynWU3MPMtCoerlhVJhgsSOkuKcvTKG9LZuDMdO2PI53a2W-_mNrPpFpH1s5jzfAgJ4HMfD7MzKxK6Dbu8PTqsycisyDG-77Vo1D6Jn1LqvSqSU5BldPcoHPNFw74GCAu9JbQ-Geb9G9aTGe_0UhO-c_fQk8aoSIqbmz0vFKL4ufBcnY3FQR0QtW_ATuC6pAbVQQaope9Y"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-[11px] text-white font-bold">ZappCare Health</p>
|
||||
<p class="text-[9px] text-white/70">Typically replies instantly</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-white text-lg">videocam</span>
|
||||
<span class="material-symbols-outlined text-white text-lg">call</span>
|
||||
</div>
|
||||
<!-- Chat Canvas -->
|
||||
<div class="flex-1 p-3 overflow-y-auto" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBAGeE5MI-8IoYfg1sgpzbzjWhE7M7bZuQKq_Ry-6OdwDpzAbWOR9WqDB9y0jQwLIXNZvigTmmV2ngn3bh3sBIZBlGLSDWtwlKKPCPqkLFsIeTqln3oX9lnPnimYKePecNyaIs8j7Kkmzf0-HGAV4nFWBZDMYz9ztHVBZmm4ZF7S-0QunUPklko6qDVaCQS5G8iNl3ldeCXJ-aWf_J7HNG_r58YBXN-P37ZLXKiKUT6SU8-6emUFMY-jJp6j1i6_iNZsMxgCRRPxWE'); opacity: 0.8;">
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Message Bubble -->
|
||||
<div class="max-w-[85%] bg-white rounded-lg rounded-tl-none p-3 shadow-sm relative">
|
||||
<div class="absolute -left-2 top-0 w-0 h-0 border-t-[10px] border-t-white border-l-[10px] border-l-transparent"></div>
|
||||
<!-- Media Placeholder -->
|
||||
<div class="w-full aspect-video bg-slate-100 rounded-lg mb-3 overflow-hidden">
|
||||
<img alt="Medical Promotion" class="w-full h-full object-cover" data-alt="modern clean medical clinic waiting room with soft blue accents and professional atmosphere" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgDtqVYPmj4igC_C3Te504wSXtIo4BiL-sYom9u6ThWTLSfHfWZFqKV0hWSDQ52OANvzJny1s9A-UWeImEaGa5GkHqq868e-GAt93SW74ACjCmVxJDb8stq8dhVn77Ez2s5vfQc3KIvJNhRNnGJQiiYHbeM9iwuucoVxiDUOph422rTI2btFjQ237_-iAzwvFZQtlfKQy8dbO3VmM0G98yZDY3OpbCiCvpNZHC2Be6jPJ1U31KvsuOGafszqcvyBWjG5VbLwuPmFY"/>
|
||||
</div>
|
||||
<h4 class="text-[12px] font-bold text-slate-800 mb-1 leading-tight">Welcome to the ZappCare Wellness Program! 🌿</h4>
|
||||
<p class="text-[11px] text-slate-600 leading-relaxed mb-3">
|
||||
Hi {{first_name}}, we're thrilled to have you! To kickstart your health journey, here's an exclusive 20% discount on your next wellness screening.
|
||||
</p>
|
||||
<!-- WhatsApp Button -->
|
||||
<div class="border-t border-slate-100 pt-2 mt-1">
|
||||
<div class="flex items-center justify-center gap-2 py-1 text-primary">
|
||||
<span class="material-symbols-outlined text-sm">open_in_new</span>
|
||||
<span class="text-[10px] font-bold">Claim My Discount</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-1">
|
||||
<span class="text-[8px] text-slate-400">10:05 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Input -->
|
||||
<div class="bg-white/90 p-2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-slate-400 text-lg">add</span>
|
||||
<div class="flex-1 h-8 bg-slate-100 rounded-full border border-slate-200 px-3 flex items-center">
|
||||
<div class="text-[10px] text-slate-400">Message...</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-primary text-lg">mic</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stats/Summary -->
|
||||
<div class="mt-8 w-full space-y-4">
|
||||
<div class="bg-white p-4 rounded-3xl border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-bold text-slate-800">Estimated Reach</p>
|
||||
<p class="text-[10px] text-slate-500">2,450 / 2,500 monthly limit</p>
|
||||
<div class="w-full h-1.5 bg-slate-100 rounded-full mt-2 overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full" style="width: 98%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
306
screen_design/connect_channel_super_admin/code.html
Normal file
306
screen_design/connect_channel_super_admin/code.html
Normal file
@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Connect Channel - ZappCare</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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": {
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"secondary": "#35637d",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline": "#6f787d",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"error": "#ba1a1a",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-container": "#87ceeb",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.headline-font { font-family: 'Manrope', sans-serif; }
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface min-h-screen">
|
||||
<!-- SideNavBar Integration -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-800 flex flex-col p-4 space-y-2">
|
||||
<div class="flex items-center px-4 mb-8">
|
||||
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center mr-3 shadow-lg">
|
||||
<span class="material-symbols-outlined text-white" data-icon="hub">hub</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-['Manrope'] font-black text-2xl tracking-tight text-[#0c6780]">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Super Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||||
<span>Tenants</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 bg-white dark:bg-slate-700 text-[#0c6780] dark:text-[#87ceeb] rounded-xl shadow-sm font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
<span>Channels</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||
<span>Billing</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
|
||||
<span>Audit Log</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-4 mt-auto border-t border-outline-variant/15">
|
||||
<div class="flex items-center p-2 rounded-xl bg-white/30">
|
||||
<img class="w-10 h-10 rounded-full object-cover" data-alt="professional corporate headshot of a male super admin with a friendly expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCga1hNvEWt1vnbzVsQDIzjdHsfjvfndxdc_2C0326_5q92dtNHacKoO6ChsYlfVR0vAfTjTHhE9Z2P6wKoRGq2MOIIbKZapb7WGmyyDCqy_4Gkc8V68xqnetkBKs9RNv1Pqw7YTkQZpbAzKWc1CSj6BOkUMBUaHaN7xmtnJGXtJes8blLJF4qdhrzrJKNoe_Ido7Dck97P3Y-5j9qeOMFZ1FTbwOtFcuy_4BdqstQmtfHs1JOrdCgszVsj5dsCeAV82rqoWw1wbWA"/>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-bold text-on-surface">Alex Rivera</p>
|
||||
<p class="text-xs text-slate-500">Super Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Integration -->
|
||||
<header class="fixed top-0 left-64 right-0 z-40 bg-[#f7f9fc]/85 backdrop-blur-md flex justify-between items-center px-8 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-slate-400 font-medium">Channels</span>
|
||||
<span class="material-symbols-outlined text-slate-400 text-sm">chevron_right</span>
|
||||
<span class="text-primary font-bold">Connect WhatsApp Business</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-[#f2f4f6] rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-[#f2f4f6] rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-24 p-8 min-h-screen">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-10">
|
||||
<h2 class="headline-font text-4xl font-extrabold text-on-surface tracking-tight mb-2">Connect New Channel</h2>
|
||||
<p class="text-on-surface-variant max-w-2xl leading-relaxed">
|
||||
Integrate a new WhatsApp Business API account into a tenant's ecosystem. Ensure all IDs match your provider's dashboard for successful verification.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Bento Grid Layout for Form -->
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Left Column: Primary Config -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-6">
|
||||
<!-- Core Configuration Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<div class="flex items-center space-x-3 mb-8">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="settings_input_component">settings_input_component</span>
|
||||
<h3 class="headline-font text-xl font-bold">Account Identities</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
|
||||
<!-- Tenant Selection -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Assign to Tenant</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface transition-all appearance-none">
|
||||
<option>Global Healthcare Solutions</option>
|
||||
<option>Apex Logistics Group</option>
|
||||
<option>North Star Retail</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Provider Selection -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Business Provider</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface transition-all appearance-none">
|
||||
<option>Meta Cloud API</option>
|
||||
<option>360Dialog</option>
|
||||
<option>Twilio</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WABA ID -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">WABA ID</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-slate-400" placeholder="e.g. 104593827105" type="text"/>
|
||||
</div>
|
||||
<!-- Phone Number ID -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Phone Number ID</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-slate-400" placeholder="e.g. 293847562019" type="text"/>
|
||||
</div>
|
||||
<!-- Display Number -->
|
||||
<div class="space-y-1.5 md:col-span-2">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Display Phone Number</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-slate-400" placeholder="+1 (555) 000-0000" type="tel"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Webhook Config Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="webhook">webhook</span>
|
||||
<h3 class="headline-font text-xl font-bold">Webhook Configuration</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-xs font-bold rounded-full uppercase tracking-wider">Production</span>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Callback URL</label>
|
||||
<div class="flex">
|
||||
<input class="flex-1 bg-surface-container-low border-none rounded-l-lg px-4 py-3.5 text-slate-500 font-mono text-sm" readonly="" type="text" value="https://api.zappcare.com/v1/webhooks/whatsapp"/>
|
||||
<button class="bg-surface-container-highest px-4 rounded-r-lg hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-600 text-lg">content_copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Verify Token</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface" type="password" value="••••••••••••••••"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right Column: Status & Info -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-6">
|
||||
<!-- Helper Card -->
|
||||
<div class="bg-primary p-8 rounded-xl text-white relative overflow-hidden group">
|
||||
<div class="relative z-10">
|
||||
<h4 class="headline-font text-xl font-bold mb-4">Documentation</h4>
|
||||
<p class="text-primary-container text-sm leading-relaxed mb-6">
|
||||
Not sure where to find your WABA ID or Phone Number ID? Check our Meta Cloud API integration guide for step-by-step instructions.
|
||||
</p>
|
||||
<a class="inline-flex items-center font-bold text-white group-hover:underline" href="#">
|
||||
View Guide
|
||||
<span class="material-symbols-outlined ml-2 text-sm">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Abstract Background Decoration -->
|
||||
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-primary-container/20 rounded-full blur-3xl transition-transform group-hover:scale-150 duration-500"></div>
|
||||
</div>
|
||||
<!-- Connection Status Panel -->
|
||||
<div class="bg-surface-container-low border border-outline-variant/15 rounded-xl p-6">
|
||||
<h4 class="text-sm font-bold text-on-surface-variant uppercase tracking-widest mb-4">Step-by-Step Status</h4>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-center space-x-3 text-sm">
|
||||
<span class="material-symbols-outlined text-primary text-lg" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="font-medium">Tenant Selected</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-3 text-sm text-slate-400">
|
||||
<span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
|
||||
<span>Provider Authenticated</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-3 text-sm text-slate-400">
|
||||
<span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
|
||||
<span>Webhook Handshake</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Visual Accent Card -->
|
||||
<div class="rounded-xl overflow-hidden h-48 relative">
|
||||
<img class="w-full h-full object-cover" data-alt="abstract artistic visualization of data flow with glowing blue lines and soft ethereal gradients" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh-7mASw1lr-Ge9yoDVKFCxMHnS7MnSgalXB3mFYjismbRQ-8kSWspBzWfICgMdacNZTPtrW12wbi8AUK2BQYImkYZTBnxWz99GMVQCyU2Oqpv_-jTweNHLVPm1sIPxmuOcSpxzaP_la_kCaSi78a2mzl1KuaE_L6ypPrFRtQxq5hielLyVEFG5tdj2JQoK8OflQxCcXmClif5Aw2DLxNIh5lG2IWcxkeEwkzOuxEQYt8Xi6IeioWoQKYtDGSPv8XVtCLH6slYkYM"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
|
||||
<p class="text-white text-xs font-medium italic">"Secure architectural bridging for enterprise communication."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Action Bar -->
|
||||
<div class="col-span-12 mt-4">
|
||||
<div class="glass-panel p-6 rounded-2xl flex items-center justify-between shadow-[0_24px_48px_-12px_rgba(0,0,0,0.1)] border border-white/40">
|
||||
<div class="flex items-center text-on-surface-variant text-sm font-medium">
|
||||
<span class="material-symbols-outlined mr-2 text-primary">info</span>
|
||||
Ensure all fields are correctly populated before validating.
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="px-8 py-3 rounded-xl font-bold text-on-surface hover:bg-surface-container-high transition-all duration-200 border border-outline-variant/20">
|
||||
Save Draft
|
||||
</button>
|
||||
<button class="px-10 py-3 rounded-xl font-bold text-white bg-gradient-to-br from-primary to-primary-container shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all duration-200">
|
||||
Validate Connection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB - Restricted visibility as per mandates -->
|
||||
<!-- (Suppressed on Details/Form screens as per instructions) -->
|
||||
</body></html>
|
||||
BIN
screen_design/connect_channel_super_admin/screen.png
Normal file
BIN
screen_design/connect_channel_super_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
165
screen_design/forgot_password_zappcare_website/code.html
Normal file
165
screen_design/forgot_password_zappcare_website/code.html
Normal file
@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Forgot Password | ZappCare</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&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": {
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"background": "#f7f9fc",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"outline": "#6f787d",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#865219",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, .font-manrope { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
.glass-effect {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex items-center justify-center p-6 selection:bg-primary-container">
|
||||
<!-- Main Architectural Canvas -->
|
||||
<main class="w-full max-w-[1200px] grid grid-cols-1 md:grid-cols-2 bg-surface-container-lowest rounded-full overflow-hidden shadow-[0_24px_48px_-12px_rgba(25,28,30,0.08)]">
|
||||
<!-- Brand/Visual Side -->
|
||||
<section class="hidden md:flex flex-col justify-between p-12 bg-surface-container-low relative overflow-hidden">
|
||||
<!-- Decorative Architectural Circles -->
|
||||
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary-container/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-24 -right-24 w-64 h-64 bg-secondary-container/30 rounded-full blur-3xl"></div>
|
||||
<div class="z-10 flex items-center gap-3">
|
||||
<img alt="ZappCare Logo" class="w-10 h-10 object-contain" data-alt="Modern geometric logo for ZappCare featuring a stylized blue 'Z' with clean architectural lines on a white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_vn6oETrjQnVssK-k-UW17rTGjUn2cH5Xihy7PCe6binimeQt46SpL72bKwMJhLGS75VFpjSYIyPeFd6LcSWkAhC78rSPYmvnwvX5QKmrOV_2TNcibR7xjVxv7uZIia_Kngbdx5uN07yoQa4fvzEh6jSSUkSxVEa7nsWOQon7SvnD308FuQSG4KcjkQnzxG7t27vGPiA60rL5pMfzMTKnIQgbYrcD0-L55FbeyTLcmSTI53SS9SlMFQ0FKGLacBxRNO1M7R7heO8"/>
|
||||
<span class="text-xl font-extrabold font-manrope text-primary tracking-tight">ZappCare</span>
|
||||
</div>
|
||||
<div class="z-10 mt-auto">
|
||||
<h1 class="text-4xl lg:text-5xl font-extrabold font-manrope text-on-surface leading-[1.1] mb-6 tracking-tight">
|
||||
Secure your <br/> <span class="text-primary">Business Suite.</span>
|
||||
</h1>
|
||||
<p class="text-on-surface-variant text-lg max-w-md font-body leading-relaxed">
|
||||
Our architectural approach to workspace management ensures your data remains fluid yet fortified.
|
||||
</p>
|
||||
</div>
|
||||
<div class="z-10 mt-12 pt-12">
|
||||
<div class="flex items-center gap-4 p-4 rounded-xl bg-surface-container-lowest shadow-[0_8px_16px_-4px_rgba(0,0,0,0.04)] border border-outline-variant/15">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
||||
<span class="material-symbols-outlined">security</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-on-surface">Privacy First Architecture</p>
|
||||
<p class="text-xs text-on-surface-variant">End-to-end encrypted sessions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Functional Side: Forgot Password Form -->
|
||||
<section class="flex flex-col justify-center p-8 md:p-16 lg:p-24 bg-surface-container-lowest">
|
||||
<div class="max-w-sm mx-auto w-full">
|
||||
<header class="mb-10">
|
||||
<button class="group flex items-center gap-2 text-on-surface-variant hover:text-primary transition-all duration-200 mb-8 font-medium text-sm">
|
||||
<span class="material-symbols-outlined text-lg group-hover:-translate-x-1 transition-transform">arrow_back</span>
|
||||
Back to Login
|
||||
</button>
|
||||
<h2 class="text-3xl font-extrabold font-manrope text-on-surface mb-3 tracking-tight">Reset Password</h2>
|
||||
<p class="text-on-surface-variant leading-relaxed text-sm">Enter your email to receive reset link. We'll send you an architectural recovery path to regain access.</p>
|
||||
</header>
|
||||
<form class="space-y-6">
|
||||
<!-- Email Input -->
|
||||
<div class="group">
|
||||
<label class="block text-xs font-semibold text-on-surface-variant mb-2 uppercase tracking-wider px-1" for="email">Email Address</label>
|
||||
<div class="relative">
|
||||
<input class="w-full px-4 py-4 bg-surface-container-highest border-none focus:ring-0 rounded-xl text-on-surface placeholder:text-outline transition-all duration-300" id="email" placeholder="name@company.com" type="email"/>
|
||||
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary transition-all duration-300 group-focus-within:w-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reset Action -->
|
||||
<button class="w-full primary-gradient text-on-primary font-bold py-4 rounded-full shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2" type="submit">
|
||||
Send Reset Link
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Support Context -->
|
||||
<footer class="mt-12 text-center">
|
||||
<p class="text-xs text-outline leading-relaxed">
|
||||
Didn't receive the email? Check your spam folder or <a class="text-primary font-semibold hover:underline decoration-2 underline-offset-4" href="#">contact ZappCare Support</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Decorative Mesh -->
|
||||
<div class="fixed bottom-0 left-0 w-full h-1/2 -z-10 pointer-events-none opacity-40">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-container/20 to-transparent"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/forgot_password_zappcare_website/screen.png
Normal file
BIN
screen_design/forgot_password_zappcare_website/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
165
screen_design/login_zappcare_website/code.html
Normal file
165
screen_design/login_zappcare_website/code.html
Normal file
@ -0,0 +1,165 @@
|
||||
<!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 - Enterprise Sign In</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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": {
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"background": "#f7f9fc",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"outline": "#6f787d",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#865219",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
.glass-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface min-h-screen flex flex-col">
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-grow flex items-center justify-center px-6 py-12">
|
||||
<!-- Tonal Architecture: The centered auth card -->
|
||||
<div class="w-full max-w-[480px]">
|
||||
<!-- Branding Header -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<img alt="ZappCare Logo" class="h-12 w-auto mb-6" data-alt="Modern geometric corporate logo for ZappCare in shades of ocean blue and cyan with clean professional lines" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxBGWRao1KJPLFvG2u8R8vgMfJcH6IkOJpBpRUZrE7f0HQb815Ev4WLmdoq-CbeREY2uXPls9Z8t_UEq4-WN8duFZarvNdn36TWcr2qQvqX39YfPd08vykE0gEf7OauCLthrGmi1H6HREtYZW67W5ohRzQVhxHqsq3WjienNvO_WS5YgwoQKT4sasRVZxkKqXZnGnIQY1zGRoor6Zpmnug-CvJxe2stEwmw935K9gzccaYvketchB2Kc3kPAMiasRg-xeMFPXBt2s"/>
|
||||
<h1 class="font-headline text-3xl font-extrabold tracking-tight text-on-surface">Welcome back</h1>
|
||||
<p class="font-body text-on-surface-variant mt-2">Sign in to your ZappCare Business Suite</p>
|
||||
</div>
|
||||
<!-- Auth Card: surface-container-lowest for max lift -->
|
||||
<div class="bg-surface-container-lowest rounded-full p-10 shadow-[0_24px_48px_-12px_rgba(25,28,30,0.06)] ring-1 ring-outline-variant/15">
|
||||
<form class="space-y-6">
|
||||
<!-- Email Field -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label text-sm font-semibold text-on-surface-variant ml-1" for="email">Work Email</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full h-14 px-4 bg-surface-container-highest border-none rounded-xl font-body text-on-surface focus:ring-2 focus:ring-primary transition-all placeholder:text-outline-variant" id="email" name="email" placeholder="name@company.com" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password Field -->
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<label class="font-label text-sm font-semibold text-on-surface-variant" for="password">Password</label>
|
||||
<a class="text-sm font-semibold text-primary hover:text-on-primary-container transition-colors" href="#">Forgot password?</a>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<input class="w-full h-14 px-4 bg-surface-container-highest border-none rounded-xl font-body text-on-surface focus:ring-2 focus:ring-primary transition-all placeholder:text-outline-variant" id="password" name="password" placeholder="••••••••" type="password"/>
|
||||
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-outline hover:text-on-surface transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sign In Button: Primary Fluid Motion Set -->
|
||||
<button class="w-full h-14 glass-gradient text-white rounded-full font-headline font-bold text-base flex items-center justify-center space-x-2 shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-98 transition-all duration-200" type="submit">
|
||||
<span>Sign In</span>
|
||||
<span class="material-symbols-outlined">arrow_forward</span>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Alternative Access -->
|
||||
<div class="mt-8 pt-8 border-t border-outline-variant/10">
|
||||
<button class="w-full h-14 bg-surface-container-low hover:bg-surface-container-high text-on-surface font-semibold rounded-xl flex items-center justify-center space-x-3 transition-all duration-200">
|
||||
<span class="material-symbols-outlined text-[20px]">fingerprint</span>
|
||||
<span>Sign in with SSO</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Prompt -->
|
||||
<p class="text-center mt-8 font-body text-sm text-on-surface-variant">
|
||||
Don't have an account? <a class="font-bold text-primary" href="#">Contact Administrator</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer: Tonal Architecture -->
|
||||
<footer class="py-8 px-10 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
|
||||
<div class="flex items-center space-x-3 text-outline text-sm">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">shield</span>
|
||||
<span class="font-medium">Secure Enterprise Access</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-8 text-sm font-medium text-outline">
|
||||
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
|
||||
<a class="hover:text-primary transition-colors" href="#">Support</a>
|
||||
</div>
|
||||
<div class="text-outline text-xs font-medium">
|
||||
© 2024 ZappCare, Inc.
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Background Decorative Element (Subtle Tonal Architecture) -->
|
||||
<div class="fixed top-0 right-0 -z-10 w-1/2 h-1/2 opacity-20 pointer-events-none">
|
||||
<div class="absolute top-0 right-0 w-full h-full" style="background: radial-gradient(circle at 70% 30%, #87ceeb 0%, transparent 70%);"></div>
|
||||
</div>
|
||||
<div class="fixed bottom-0 left-0 -z-10 w-1/2 h-1/2 opacity-10 pointer-events-none">
|
||||
<div class="absolute bottom-0 left-0 w-full h-full" style="background: radial-gradient(circle at 30% 70%, #0c6780 0%, transparent 60%);"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/login_zappcare_website/screen.png
Normal file
BIN
screen_design/login_zappcare_website/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
BIN
screen_design/logo_zappcare.png
Normal file
BIN
screen_design/logo_zappcare.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
180
screen_design/reset_password_zappcare_website/code.html
Normal file
180
screen_design/reset_password_zappcare_website/code.html
Normal file
@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"background": "#f7f9fc",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"outline": "#6f787d",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#865219",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
.architectural-shadow {
|
||||
box-shadow: 0 24px 48px -12px rgba(25, 28, 30, 0.08);
|
||||
}
|
||||
input:focus + label, input:not(:placeholder-shown) + label {
|
||||
transform: translateY(-24px) scale(0.85);
|
||||
color: #0c6780;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface min-h-screen flex flex-col">
|
||||
<!-- Auth Layout Wrapper: Navigation suppressed per "Semantic Shell" mandate for Transactional pages -->
|
||||
<main class="flex-grow flex items-center justify-center p-6 lg:p-12">
|
||||
<div class="w-full max-w-[480px] flex flex-col gap-8">
|
||||
<!-- Branding Header -->
|
||||
<div class="flex flex-col items-center text-center gap-4">
|
||||
<div class="w-16 h-16 rounded-full overflow-hidden bg-surface-container-lowest shadow-sm flex items-center justify-center p-3">
|
||||
<img alt="ZappCare Logo" class="w-full h-full object-contain" data-alt="Minimalist abstract blue circle logo representing connection and care, professional corporate tech branding on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzEXGu4Qczw3-vmUDMQBpjJw-r9qsQ2kbYJ_HJwW18mG_4CR7A-ZN2tdAwd9eHAf9D0vSrOG0V5lr1h4c4FNJ87eMSLQmn7E9twuNrBCY7OeJzi6waQQImaSlHaifQoVjQ0wj75UJ_4blEoy3fQN1XRJ8Nw_v8-JC7_G8PQbguyFvxSjNf9enPoctYt6DfDSzbV8KWcf1u-BEmimaPx0rEDAbCHjpCb2rbTxhH0Ct2ymodgZNm-_ZNoBElIZfV-2daGK5Yv1h675A"/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<h1 class="font-headline font-extrabold text-3xl tracking-tight text-on-surface">Reset Password</h1>
|
||||
<p class="text-on-surface-variant font-body text-sm">Secure your ZappCare Business Suite account with a new password.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Card Container -->
|
||||
<div class="bg-surface-container-lowest architectural-shadow rounded-full p-8 lg:p-10 border border-outline-variant/15">
|
||||
<form class="space-y-8" onsubmit="return false;">
|
||||
<!-- Form Fields -->
|
||||
<div class="space-y-6">
|
||||
<!-- New Password Field -->
|
||||
<div class="relative group">
|
||||
<input class="block w-full px-0 py-3 bg-transparent border-0 border-b-2 border-surface-container-highest focus:ring-0 focus:border-primary transition-colors text-on-surface font-medium" id="new_password" placeholder=" " type="password"/>
|
||||
<label class="absolute left-0 top-3 text-on-surface-variant font-label text-sm transition-all duration-200 pointer-events-none origin-left" for="new_password">New Password</label>
|
||||
<span class="absolute right-0 top-3 material-symbols-outlined text-outline-variant cursor-pointer hover:text-primary transition-colors">visibility</span>
|
||||
</div>
|
||||
<!-- Confirm Password Field -->
|
||||
<div class="relative group">
|
||||
<input class="block w-full px-0 py-3 bg-transparent border-0 border-b-2 border-surface-container-highest focus:ring-0 focus:border-primary transition-colors text-on-surface font-medium" id="confirm_password" placeholder=" " type="password"/>
|
||||
<label class="absolute left-0 top-3 text-on-surface-variant font-label text-sm transition-all duration-200 pointer-events-none origin-left" for="confirm_password">Confirm New Password</label>
|
||||
<span class="absolute right-0 top-3 material-symbols-outlined text-outline-variant cursor-pointer hover:text-primary transition-colors">visibility</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Security Requirements Checklist (Bento Card Pattern) -->
|
||||
<div class="bg-surface-container-low rounded-xl p-6 space-y-4">
|
||||
<h3 class="font-headline font-bold text-sm text-on-secondary-container tracking-wide flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
SECURITY REQUIREMENTS
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-[16px] font-bold">check</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface">Minimum 12 characters</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-[16px] font-bold">check</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface">Upper & lowercase letters</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-surface-container-highest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline-variant text-[16px]">circle</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface-variant">At least one number (0-9)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-surface-container-highest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline-variant text-[16px]">circle</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface-variant">One special character (!@#$)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Action -->
|
||||
<button class="w-full bg-gradient-primary text-on-primary font-headline font-bold py-4 px-8 rounded-full shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200" type="submit">
|
||||
Save New Password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Footer Navigation -->
|
||||
<div class="flex justify-center">
|
||||
<a class="group flex items-center gap-2 text-on-surface-variant hover:text-primary transition-colors font-label font-medium text-sm" href="#">
|
||||
<span class="material-symbols-outlined text-sm transition-transform group-hover:-translate-x-1">arrow_back</span>
|
||||
Back to Login
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Content-only background decoration to avoid standard lists -->
|
||||
<div class="fixed top-0 right-0 -z-10 w-1/3 h-full opacity-40 pointer-events-none">
|
||||
<div class="absolute top-[10%] right-[10%] w-64 h-64 bg-primary-container/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-[20%] right-[5%] w-96 h-96 bg-secondary-container/20 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/reset_password_zappcare_website/screen.png
Normal file
BIN
screen_design/reset_password_zappcare_website/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
400
screen_design/shared_inbox_zappcare_website/code.html
Normal file
400
screen_design/shared_inbox_zappcare_website/code.html
Normal file
@ -0,0 +1,400 @@
|
||||
<!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@200;400;500;700;800&family=Inter:wght@300;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": {
|
||||
"background": "#f7f9fc",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-background": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"outline": "#6f787d",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"primary-container": "#87ceeb",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-container": "#005870"
|
||||
},
|
||||
"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-architecture-no-borders { border: none !important; }
|
||||
.glassmorphism-hover:hover { background: rgba(247, 249, 252, 0.85); backdrop-filter: blur(20px); }
|
||||
.scale-98-on-click:active { transform: scale(0.98); }
|
||||
::-webkit-scrollbar { width: 4px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #e0e3e5; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- SideNavBar (Authority: JSON/Design System) -->
|
||||
<aside class="h-screen w-72 fixed left-0 top-0 overflow-y-auto bg-[#f2f4f6] dark:bg-slate-900 flex flex-col p-6 space-y-2 z-50 tonal-architecture-no-borders">
|
||||
<div class="mb-8 px-2 flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-container rounded-xl flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">domain</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-black text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-outline font-bold">Business Suite</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-4 px-6 mb-6 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl font-headline font-bold flex items-center justify-center space-x-2 shadow-lg shadow-primary/20 scale-98-on-click transition-all">
|
||||
<span class="material-symbols-outlined">add_comment</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
<nav class="space-y-1">
|
||||
<!-- Active Tab: Inbox -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 bg-[#87ceeb] text-[#005870] font-headline font-bold rounded-xl transition-all text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox" style="font-variation-settings: 'FILL' 1;">inbox</span>
|
||||
<span>Inbox</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
|
||||
<span>Contacts</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||
<span>Campaigns</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||||
<span>Tenants</span>
|
||||
</a>
|
||||
<div class="pt-10">
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- TopNavBar (Authority: JSON/Design System) -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-18rem)] h-16 z-40 bg-[#f7f9fc]/85 backdrop-blur-xl dark:bg-slate-950/85 flex justify-between items-center px-8 tonal-shift-no-lines">
|
||||
<div class="flex items-center bg-surface-container-highest/50 rounded-full px-4 py-2 w-96 transition-all focus-within:bg-white focus-within:ring-2 focus-within:ring-primary/20">
|
||||
<span class="material-symbols-outlined text-outline text-xl">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-full placeholder:text-outline/70" placeholder="Search conversations..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 text-outline hover:bg-slate-100 rounded-full transition-all relative">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||||
</button>
|
||||
<button class="p-2 text-outline hover:bg-slate-100 rounded-full transition-all">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<button class="p-2 text-outline hover:bg-slate-100 rounded-full transition-all">
|
||||
<span class="material-symbols-outlined">chat_bubble_outline</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-8 w-[1px] bg-outline-variant/30 mx-2"></div>
|
||||
<div class="flex items-center space-x-3 cursor-pointer group">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-bold font-headline text-on-surface">Alex Rivera</p>
|
||||
<p class="text-[10px] text-outline uppercase font-bold">Admin Manager</p>
|
||||
</div>
|
||||
<img alt="Manager Profile" class="w-10 h-10 rounded-xl object-cover ring-2 ring-primary/10 group-hover:ring-primary/30 transition-all" data-alt="Professional headshot of a Hispanic male manager with a friendly expression in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4fvVltNa9gK4gXAB6uspRoey1WnPmJG7pTGdnF4UMGGSe06jZqwEXziLnZLt0HH1-ogjljTaVnbqyp7LEqujxuhnJ6UpRwu6KE9j3Xn_8oGfNliysZeW5gC4R4KxKWw5LI7paqkdukdgD7qpRd4wFLcBP4KB48V1PuJZfhMp1mJ1Ykfq4Bd82prl71SiHo3nHJKgnUHoJJ7L5vURn6pbP-Q_RBcthLmnkWOWcaJb0MaliLxZUZxTcmBr_dCDmapz7ap8qjSn9ln0"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas (Three Pane Layout) -->
|
||||
<main class="ml-72 pt-16 h-screen overflow-hidden flex">
|
||||
<!-- Left Pane: Conversation List -->
|
||||
<section class="w-80 bg-surface-container-low flex flex-col h-full">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="font-headline font-extrabold text-xl tracking-tight">Messages</h2>
|
||||
<span class="bg-primary/10 text-primary px-2 py-0.5 rounded text-[10px] font-bold">24 Active</span>
|
||||
</div>
|
||||
<div class="flex space-x-1 bg-surface-container p-1 rounded-xl">
|
||||
<button class="flex-1 text-[11px] font-bold py-1.5 bg-white text-primary rounded-lg shadow-sm">All</button>
|
||||
<button class="flex-1 text-[11px] font-bold py-1.5 text-outline hover:text-on-surface transition-all">Unassigned</button>
|
||||
<button class="flex-1 text-[11px] font-bold py-1.5 text-outline hover:text-on-surface transition-all">Mine</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto px-3 space-y-1">
|
||||
<!-- Chat Item Active -->
|
||||
<div class="p-4 bg-primary-container/30 rounded-2xl cursor-pointer group relative overflow-hidden transition-all">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="font-bold text-sm font-headline text-on-primary-container">Sarah Jenkins</span>
|
||||
<span class="text-[10px] text-on-primary-container font-medium opacity-70">12:45 PM</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-primary-container line-clamp-1 opacity-80">I'm having trouble accessing my latest dental claim...</p>
|
||||
<div class="flex mt-3 space-x-2">
|
||||
<span class="px-2 py-0.5 bg-primary/20 text-on-primary-container rounded-md text-[9px] font-bold">Claims</span>
|
||||
<span class="px-2 py-0.5 bg-error/10 text-error rounded-md text-[9px] font-bold">Urgent</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Item -->
|
||||
<div class="p-4 hover:bg-surface-container rounded-2xl cursor-pointer group transition-all">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="font-bold text-sm font-headline text-on-surface">Mark Thompson</span>
|
||||
<span class="text-[10px] text-outline font-medium">11:20 AM</span>
|
||||
</div>
|
||||
<p class="text-xs text-outline line-clamp-1">Thanks for the update. Let me check with my insurance provider.</p>
|
||||
<div class="flex mt-3 justify-between items-center">
|
||||
<div class="flex space-x-2">
|
||||
<span class="px-2 py-0.5 bg-surface-container-highest text-outline rounded-md text-[9px] font-bold">General</span>
|
||||
</div>
|
||||
<div class="w-2 h-2 bg-primary rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Item -->
|
||||
<div class="p-4 hover:bg-surface-container rounded-2xl cursor-pointer group transition-all">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="font-bold text-sm font-headline text-on-surface">Elena Rodriguez</span>
|
||||
<span class="text-[10px] text-outline font-medium">Yesterday</span>
|
||||
</div>
|
||||
<p class="text-xs text-outline line-clamp-1">The prescription was sent to the wrong pharmacy branch again.</p>
|
||||
<div class="flex mt-3 space-x-2">
|
||||
<span class="px-2 py-0.5 bg-surface-container-highest text-outline rounded-md text-[9px] font-bold">Pharmacy</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- More Chat Items -->
|
||||
<div class="p-4 hover:bg-surface-container rounded-2xl cursor-pointer group transition-all">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="font-bold text-sm font-headline text-on-surface">Gregory Peck</span>
|
||||
<span class="text-[10px] text-outline font-medium">Yesterday</span>
|
||||
</div>
|
||||
<p class="text-xs text-outline line-clamp-1">Is it possible to reschedule my Tuesday appointment to Wednesday?</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Center Pane: Chat Timeline -->
|
||||
<section class="flex-1 bg-white flex flex-col relative">
|
||||
<!-- Chat Header -->
|
||||
<div class="px-8 py-4 bg-white/80 backdrop-blur-md flex items-center justify-between z-10">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="relative">
|
||||
<img class="w-10 h-10 rounded-xl object-cover" data-alt="Close-up portrait of a young woman with a calm expression, professional appearance, soft daylighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYzCvKYWsJtd40qdaxHTlivCEkTcLjgM9LS_qp9mrseybhp3k_lAVJ38Uoe1kZdFQheqe_PPI9s2xLdluiDuTqIvmVTE7qOUpEwT0-Ymabn9JR1mMq2eC50NIb2374nVqZsqaxQwOAy2BHv6e-89jXVn0i-BwVF7Tb4hsyTBoFZ4Mzg3LdgcTYECI96wjljtNeB-VC9uj1Q2skSLPUBNnfousApjdBGg9qhlosVYBUo2MJtnyxi1qilQoQ-Z-HKrF48gjWDuJsUWI"/>
|
||||
<div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-on-surface">Sarah Jenkins</h3>
|
||||
<p class="text-[10px] text-outline font-medium flex items-center">
|
||||
<span class="material-symbols-outlined text-[12px] mr-1">timer</span> Active 5m ago • Patient ID: #88291
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 text-outline hover:bg-surface-container rounded-xl transition-all">
|
||||
<span class="material-symbols-outlined">call</span>
|
||||
</button>
|
||||
<button class="p-2 text-outline hover:bg-surface-container rounded-xl transition-all">
|
||||
<span class="material-symbols-outlined">videocam</span>
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-surface-container text-on-surface-variant font-bold text-xs rounded-xl hover:bg-surface-variant transition-all">
|
||||
Resolved
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Messages Area -->
|
||||
<div class="flex-1 overflow-y-auto p-8 space-y-8 bg-[#fafbfc]">
|
||||
<div class="flex justify-center">
|
||||
<span class="px-3 py-1 bg-surface-container-highest/40 text-[10px] font-bold text-outline rounded-full uppercase tracking-tighter">Today, Oct 24</span>
|
||||
</div>
|
||||
<!-- Inbound -->
|
||||
<div class="flex items-end space-x-3 max-w-[80%]">
|
||||
<img class="w-8 h-8 rounded-lg object-cover mb-1" data-alt="Female user avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3jTlft80N24VFXxYiWAkC-5JhSyopk5ayeSy0EJJWL0avRvKgl7OGrz82r8OoUcm7MCYfmzB7LBelUjb9No4DvePl-feyYOjc8kklDX-q548d3qluEeS0reEmK0d8Ll0vPuieFFSazXOfr8sbACEVFTs96zHxPtfq4NTRh1yxUZPAAMF5_zTBBJayjqCYsfLLyJa1tjBHPktdKnu7WyM-MWxqmiUYvOlct3qKwVrf_wcS7XOhtfqCMu5jfbUyuJ-pn3pY7mdeox4"/>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] font-bold text-outline ml-1">Sarah Jenkins</p>
|
||||
<div class="bg-white p-4 rounded-2xl rounded-bl-none shadow-sm text-sm text-on-surface leading-relaxed border border-outline-variant/10">
|
||||
Hello, I'm having trouble accessing my latest dental claim. It says "Pending Review" but it's been over two weeks now. Can you check on this?
|
||||
</div>
|
||||
<p class="text-[10px] text-outline text-right">12:45 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Outbound -->
|
||||
<div class="flex flex-row-reverse items-end space-x-3 space-x-reverse max-w-[80%] ml-auto">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-[10px] font-bold mb-1">AR</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] font-bold text-outline text-right mr-1">Alex Rivera</p>
|
||||
<div class="bg-primary text-white p-4 rounded-2xl rounded-br-none shadow-md text-sm leading-relaxed">
|
||||
Hi Sarah! Let me look into that for you. Our claims department had a slight backlog last week. One moment while I pull up your file.
|
||||
</div>
|
||||
<p class="text-[10px] text-outline">12:47 PM • Read</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Inbound -->
|
||||
<div class="flex items-end space-x-3 max-w-[80%]">
|
||||
<img class="w-8 h-8 rounded-lg object-cover mb-1" data-alt="Female user avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDb0qPnauFV9cSzJSFYWGAkO6rNckwU661e6S5OiOJDUBeP6DU8MJ55nbex_DJ_ofMo3oblUabMwPLPO4gFNt1_0GvDfx0h0C-WU0Z292kPEdpWJuDEoJd1FAo5GxGyuHizxoeMuAHUIkp21ckkPvz-RGCW2UfP8liSQPwZEBPs8bUdsASsF2yWugvSLQKj-zGIJIppoadOaqzKpbeQL83STtdeh2npnlcj0zwhMJ72q1PkMhZJXbr3FOrTUOheZ4_JGfaVI8proBs"/>
|
||||
<div class="space-y-1">
|
||||
<div class="bg-white p-4 rounded-2xl rounded-bl-none shadow-sm text-sm text-on-surface leading-relaxed border border-outline-variant/10">
|
||||
Thank you! I appreciate the quick response. The claim number is #DC-90122.
|
||||
</div>
|
||||
<p class="text-[10px] text-outline text-right">12:48 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message Composer -->
|
||||
<div class="p-6 bg-white">
|
||||
<div class="mb-4 flex space-x-2">
|
||||
<button class="px-3 py-1.5 bg-surface-container-low hover:bg-primary-container/20 text-[11px] font-bold text-primary rounded-lg transition-all flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">auto_awesome</span> Quick Replies
|
||||
</button>
|
||||
<button class="px-3 py-1.5 bg-surface-container-low hover:bg-primary-container/20 text-[11px] font-bold text-primary rounded-lg transition-all flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">description</span> Use Template
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative bg-surface-container-low rounded-2xl p-4 focus-within:bg-white focus-within:ring-2 focus-within:ring-primary/20 transition-all border border-transparent">
|
||||
<textarea class="w-full bg-transparent border-none focus:ring-0 text-sm resize-none h-20 placeholder:text-outline/60" placeholder="Type your message here..."></textarea>
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<div class="flex items-center space-x-3 text-outline">
|
||||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">mood</span></button>
|
||||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">attach_file</span></button>
|
||||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">image</span></button>
|
||||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">more_horiz</span></button>
|
||||
</div>
|
||||
<button class="bg-primary text-white p-2 rounded-xl flex items-center justify-center shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">send</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Right Pane: Profile & Controls -->
|
||||
<section class="w-80 bg-surface-container-low flex flex-col h-full overflow-y-auto">
|
||||
<div class="p-6">
|
||||
<!-- Profile Card -->
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm mb-6 flex flex-col items-center text-center">
|
||||
<img class="w-24 h-24 rounded-3xl object-cover mb-4 ring-4 ring-primary-container/10" data-alt="Portrait of Sarah Jenkins, a professional woman in her early 30s" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDspcthiiVgfO9EWNFObvvW7WwgstUCpUL_FimWlzixiMuaO1_8fdlICs0LBkmr1-RhcOQb6ImU7bgsr5gdGtMTYjeXA-mjld4XL26PJWpB8x2rdnQJxEa5YV00bM-ekzix8W4Nj-j7x8Zthz0BMjBqWy9gvtx-damgmo88SMcTlaxYq_MjQjCsOMuPuKi7ESkRRDCTncEUxOAF0Pi0WNLtB4pu9hulczXVrfrFX3bkiEJOdSM04rJhRXle-X6V7NdRemwnoASBwfc"/>
|
||||
<h3 class="font-headline font-extrabold text-lg">Sarah Jenkins</h3>
|
||||
<p class="text-xs text-outline font-medium mb-4">s.jenkins@example.com</p>
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-[10px] font-bold rounded-full">VIP Member</span>
|
||||
<span class="px-3 py-1 bg-tertiary-container/30 text-on-tertiary-container text-[10px] font-bold rounded-full">Dental Plan B</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Assignment Controls -->
|
||||
<div class="mb-8">
|
||||
<p class="text-[10px] font-black uppercase tracking-widest text-outline mb-4">Assignment</p>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 bg-white rounded-xl border border-outline-variant/10">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center text-on-primary-container">
|
||||
<span class="material-symbols-outlined text-lg">person</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<p class="text-xs font-bold">Assignee</p>
|
||||
<p class="text-[10px] text-outline">Alex Rivera</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-primary"><span class="material-symbols-outlined text-xl">expand_more</span></button>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-white rounded-xl border border-outline-variant/10">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-outline">
|
||||
<span class="material-symbols-outlined text-lg">group</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<p class="text-xs font-bold">Team</p>
|
||||
<p class="text-[10px] text-outline">Customer Support</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-primary"><span class="material-symbols-outlined text-xl">expand_more</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<p class="text-[10px] font-black uppercase tracking-widest text-outline">Contact Tags</p>
|
||||
<button class="text-primary"><span class="material-symbols-outlined text-sm">add_circle</span></button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="flex items-center px-2 py-1 bg-surface-variant/30 text-on-surface-variant text-[10px] font-bold rounded-md">
|
||||
#billing <button class="ml-1 opacity-50 hover:opacity-100">×</button>
|
||||
</span>
|
||||
<span class="flex items-center px-2 py-1 bg-surface-variant/30 text-on-surface-variant text-[10px] font-bold rounded-md">
|
||||
#urgent <button class="ml-1 opacity-50 hover:opacity-100">×</button>
|
||||
</span>
|
||||
<span class="flex items-center px-2 py-1 bg-surface-variant/30 text-on-surface-variant text-[10px] font-bold rounded-md">
|
||||
#followup <button class="ml-1 opacity-50 hover:opacity-100">×</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Internal Notes -->
|
||||
<div>
|
||||
<p class="text-[10px] font-black uppercase tracking-widest text-outline mb-4">Internal Notes</p>
|
||||
<div class="bg-surface-container-highest/30 p-4 rounded-2xl border border-dashed border-outline-variant/50">
|
||||
<p class="text-[11px] text-on-surface-variant leading-relaxed mb-3">Patient called yesterday about dental claim #DC-90122. Wants update by Friday. Prefer email communication.</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[9px] text-outline font-bold italic">— Added by Mark T.</span>
|
||||
<button class="text-primary text-[11px] font-bold">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-4 py-2 text-primary text-[11px] font-bold border border-primary/20 rounded-xl hover:bg-primary/5 transition-all">
|
||||
+ Add New Note
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/shared_inbox_zappcare_website/screen.png
Normal file
BIN
screen_design/shared_inbox_zappcare_website/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
345
screen_design/subscription_catalog_super_admin/code.html
Normal file
345
screen_design/subscription_catalog_super_admin/code.html
Normal file
@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"secondary": "#35637d",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline": "#6f787d",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"error": "#ba1a1a",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-container": "#87ceeb",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
.glass-rail {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- Side Navigation Rail -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-800 flex flex-col p-4 space-y-2 z-50">
|
||||
<div class="mb-8 px-2 flex items-center gap-3">
|
||||
<div class="w-10 h-10 primary-gradient rounded-full flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-['Manrope'] font-black text-2xl tracking-tight text-[#0c6780]">ZappCare</h1>
|
||||
<p class="font-['Manrope'] font-semibold text-xs text-slate-500 uppercase tracking-widest">Super 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:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||||
Tenants
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
Channels
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-slate-700 text-[#0c6780] dark:text-[#87ceeb] rounded-xl shadow-sm transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||
Billing
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
|
||||
Audit Log
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-4 mt-auto">
|
||||
<button class="w-full primary-gradient text-white rounded-full py-4 px-6 flex items-center justify-center gap-2 font-['Manrope'] font-bold transition-transform active:scale-95">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
New Instance
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Canvas -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- Top Bar -->
|
||||
<header class="sticky top-0 z-40 bg-[#f7f9fc]/85 backdrop-blur-md dark:bg-slate-900/85 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.06)] flex justify-between items-center w-full px-8 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="font-headline text-2xl font-extrabold text-on-surface">Subscription Plans</h2>
|
||||
<span class="bg-secondary-container text-on-secondary-container text-xs font-bold px-3 py-1 rounded-full">CATALOG</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative flex items-center">
|
||||
<span class="material-symbols-outlined absolute left-3 text-outline" data-icon="search">search</span>
|
||||
<input class="bg-surface-container-highest border-none rounded-full pl-10 pr-6 py-2 text-sm focus:ring-2 focus:ring-primary w-64 transition-all" placeholder="Search catalog..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-[#0c6780]">
|
||||
<button class="hover:bg-[#f2f4f6] p-2 rounded-full transition-colors"><span class="material-symbols-outlined" data-icon="notifications">notifications</span></button>
|
||||
<button class="hover:bg-[#f2f4f6] p-2 rounded-full transition-colors"><span class="material-symbols-outlined" data-icon="account_circle">account_circle</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Area -->
|
||||
<div class="p-12 max-w-7xl mx-auto">
|
||||
<!-- Editorial Intro -->
|
||||
<section class="mb-12">
|
||||
<p class="text-secondary font-medium mb-2">Architectural Management</p>
|
||||
<h3 class="font-headline text-5xl font-bold tracking-tight text-on-surface leading-tight mb-4">
|
||||
Scalable foundations for <br/>every enterprise journey.
|
||||
</h3>
|
||||
<p class="text-on-surface-variant max-w-2xl text-lg leading-relaxed">
|
||||
Define and manage the structural tiers of ZappCare. From high-frequency messaging to specialized enterprise infrastructure, adjust quotas and pricing across the ecosystem.
|
||||
</p>
|
||||
</section>
|
||||
<!-- Plan Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Basic Plan Card -->
|
||||
<div class="bg-surface-container-lowest rounded-[2rem] p-8 flex flex-col relative group transition-all duration-300 hover:shadow-[0_32px_64px_-12px_rgba(0,0,0,0.08)]">
|
||||
<div class="mb-8">
|
||||
<span class="text-xs font-black tracking-widest text-outline uppercase mb-2 block">Starter Tier</span>
|
||||
<h4 class="font-headline text-3xl font-bold text-on-surface mb-4">Basic</h4>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-4xl font-black text-on-surface">$29</span>
|
||||
<span class="text-on-surface-variant font-medium">/month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-6 flex-1 border-t border-outline-variant/15 pt-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="chat">chat</span>
|
||||
<span class="text-on-surface-variant font-medium">Messages</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">5,000 /mo</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="person">person</span>
|
||||
<span class="text-on-surface-variant font-medium">Seats</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">2 included</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="campaign">campaign</span>
|
||||
<span class="text-on-surface-variant font-medium">Broadcasts</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">10 /mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-4">
|
||||
<button class="w-full flex items-center justify-center gap-2 py-4 px-6 border border-outline-variant/30 rounded-xl text-primary font-bold hover:bg-primary-container hover:border-transparent transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
|
||||
Edit Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pro Plan Card (Featured) -->
|
||||
<div class="bg-surface-container-lowest rounded-[2rem] p-8 flex flex-col relative group transition-all duration-300 hover:shadow-[0_32px_64px_-12px_rgba(0,0,0,0.12)] border-2 border-primary-container shadow-sm overflow-hidden">
|
||||
<div class="absolute top-0 right-0">
|
||||
<div class="bg-primary-container text-on-primary-container px-6 py-1 rounded-bl-2xl font-bold text-xs">MOST POPULAR</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<span class="text-xs font-black tracking-widest text-primary uppercase mb-2 block">Growth Tier</span>
|
||||
<h4 class="font-headline text-3xl font-bold text-on-surface mb-4">Pro</h4>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-4xl font-black text-on-surface">$99</span>
|
||||
<span class="text-on-surface-variant font-medium">/month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-6 flex-1 border-t border-outline-variant/15 pt-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="chat">chat</span>
|
||||
<span class="text-on-surface-variant font-medium">Messages</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">50,000 /mo</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="group">group</span>
|
||||
<span class="text-on-surface-variant font-medium">Seats</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">10 included</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="campaign">campaign</span>
|
||||
<span class="text-on-surface-variant font-medium">Broadcasts</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">Unlimited</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-primary text-sm font-semibold mt-2">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="auto_awesome" data-weight="fill">auto_awesome</span>
|
||||
Includes Priority Support
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-4">
|
||||
<button class="w-full primary-gradient text-white rounded-xl py-4 px-6 flex items-center justify-center gap-2 font-bold shadow-lg transition-transform active:scale-95">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
|
||||
Edit Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Enterprise Plan Card -->
|
||||
<div class="bg-surface-container-lowest rounded-[2rem] p-8 flex flex-col relative group transition-all duration-300 hover:shadow-[0_32px_64px_-12px_rgba(0,0,0,0.08)]">
|
||||
<div class="mb-8">
|
||||
<span class="text-xs font-black tracking-widest text-outline uppercase mb-2 block">Corporate Tier</span>
|
||||
<h4 class="font-headline text-3xl font-bold text-on-surface mb-4">Enterprise</h4>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-4xl font-black text-on-surface">$499</span>
|
||||
<span class="text-on-surface-variant font-medium">/month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-6 flex-1 border-t border-outline-variant/15 pt-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="chat">chat</span>
|
||||
<span class="text-on-surface-variant font-medium">Messages</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">Unlimited</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="corporate_fare">corporate_fare</span>
|
||||
<span class="text-on-surface-variant font-medium">Seats</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">50+ included</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="campaign">campaign</span>
|
||||
<span class="text-on-surface-variant font-medium">Broadcasts</span>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface">Unlimited</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-4">
|
||||
<button class="w-full flex items-center justify-center gap-2 py-4 px-6 border border-outline-variant/30 rounded-xl text-primary font-bold hover:bg-primary-container hover:border-transparent transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
|
||||
Edit Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Grid Metrics -->
|
||||
<div class="mt-16 grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="md:col-span-2 bg-surface-container-low rounded-[2rem] p-8 flex flex-col justify-between">
|
||||
<div>
|
||||
<h5 class="text-on-surface-variant font-semibold mb-4">Global Reach</h5>
|
||||
<p class="text-3xl font-bold text-on-surface leading-tight">842 Active Subscriptions</p>
|
||||
</div>
|
||||
<div class="mt-8 h-2 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-primary-container rounded-[2rem] p-8 flex flex-col justify-between">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-4xl" data-icon="trending_up">trending_up</span>
|
||||
<div>
|
||||
<p class="text-on-primary-container font-black text-2xl">+12%</p>
|
||||
<p class="text-on-primary-container/80 text-sm">Monthly Revenue Growth</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-highest rounded-[2rem] p-8 flex flex-col justify-between">
|
||||
<span class="material-symbols-outlined text-on-surface text-4xl" data-icon="cloud_done">cloud_done</span>
|
||||
<div>
|
||||
<p class="text-on-surface font-black text-2xl">99.9%</p>
|
||||
<p class="text-on-surface-variant text-sm">System Uptime Avg</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Feature Comparison Footer (Simplified Editorial Style) -->
|
||||
<section class="mt-24 border-t border-outline-variant/10 pt-12">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end gap-8">
|
||||
<div class="max-w-xl">
|
||||
<h4 class="font-headline text-3xl font-bold mb-4">The Architectural Difference.</h4>
|
||||
<p class="text-on-surface-variant">Every plan is built on ZappCare's core infrastructure. Enterprise-grade security and message delivery reliability are standard across all tiers, ensuring no tenant is left behind as they scale.</p>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<button class="px-8 py-3 rounded-full border border-outline-variant text-on-surface font-semibold hover:bg-surface-container-low transition-colors">Compare Features</button>
|
||||
<button class="px-8 py-3 rounded-full primary-gradient text-white font-bold shadow-md">Add New Tier</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Help Trigger -->
|
||||
<div class="fixed bottom-8 right-8 z-50">
|
||||
<button class="w-14 h-14 bg-surface-container-lowest text-primary rounded-full shadow-2xl flex items-center justify-center border border-outline-variant/10 hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/subscription_catalog_super_admin/screen.png
Normal file
BIN
screen_design/subscription_catalog_super_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
422
screen_design/system_audit_log_super_admin/code.html
Normal file
422
screen_design/system_audit_log_super_admin/code.html
Normal file
@ -0,0 +1,422 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800;900&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"secondary": "#35637d",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline": "#6f787d",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"error": "#ba1a1a",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-container": "#87ceeb",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"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;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, .brand-font { font-family: 'Manrope', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- Sidebar Navigation Shell -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-800 flex flex-col p-4 space-y-2 z-20">
|
||||
<div class="px-2 mb-8">
|
||||
<h1 class="font-['Manrope'] font-black text-2xl tracking-tight text-[#0c6780]">ZappCare</h1>
|
||||
<p class="text-xs font-semibold text-slate-500 uppercase tracking-widest mt-1">Super Admin</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="domain">domain</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Tenants</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="hub">hub</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Channels</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="payments">payments</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Billing</span>
|
||||
</a>
|
||||
<a class="bg-white dark:bg-slate-700 text-[#0c6780] dark:text-[#87ceeb] rounded-xl shadow-sm flex items-center px-4 py-3 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="history_edu">history_edu</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Audit Log</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="settings">settings</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-6">
|
||||
<button class="w-full bg-gradient-to-br from-[#0c6780] to-[#87ceeb] text-white py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-[#0c6780]/20 hover:scale-[0.98] transition-transform duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
New Instance
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mt-6 px-2">
|
||||
<img alt="User" class="w-10 h-10 rounded-full border-2 border-white shadow-sm" data-alt="professional portrait of a confident male executive in a modern tech office environment with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD85oBfIbdzNcBop89iC9cxeBVSiG6OdVx30igRBhHNp0ChWtgDll_TD_SEyeZhs9yBj52dIBpUMZkAOIE0elOs0wMk475mXIweOz4c9m7go72VpkZQayLwHmhEVVQEcreNt1lYFiXo2NbUvnrei72XPAD4fZK2exQzYcZ-vknTJIm1xbJAlEZERKVKi0lMfuLnPkYjDhSkdsyjfCmhn_tLka-FiKnGlAOXaEGdaqRWsc-iuPq5Mjf133P8I7PFADoWyWPeHfs1JZE"/>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-sm font-bold text-on-surface truncate">Alex Rivera</p>
|
||||
<p class="text-[10px] font-medium text-slate-500 uppercase tracking-tighter">Master Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- Top App Bar -->
|
||||
<header class="sticky top-0 z-10 bg-[#f7f9fc]/85 backdrop-blur-md flex justify-between items-center w-full px-8 py-4 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.06)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="font-headline text-2xl font-extrabold text-primary tracking-tight">System Audit Log</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline" data-icon="search">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-surface-container-highest rounded-full text-sm border-none focus:ring-2 focus:ring-primary w-64 transition-all" placeholder="Search event metadata..." type="text"/>
|
||||
</div>
|
||||
<button class="p-2 hover:bg-surface-container rounded-full text-outline transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-surface-container rounded-full text-outline transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-8">
|
||||
<!-- Advanced Filters Block -->
|
||||
<section class="bg-surface-container-lowest rounded-full p-6 mb-8 shadow-sm flex flex-wrap items-end gap-6 border-none">
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="block text-[10px] font-bold text-outline uppercase tracking-widest mb-1.5 ml-1">Tenant Organization</label>
|
||||
<div class="relative">
|
||||
<select class="w-full appearance-none bg-surface-container-low border-none rounded-xl py-3 px-4 text-sm font-medium focus:ring-2 focus:ring-primary-container pr-10">
|
||||
<option>All Tenants</option>
|
||||
<option>HealthBridge Global</option>
|
||||
<option>Apex MedTech</option>
|
||||
<option>Unity Health Systems</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-outline" data-icon="expand_more">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="block text-[10px] font-bold text-outline uppercase tracking-widest mb-1.5 ml-1">Actor (User)</label>
|
||||
<div class="relative">
|
||||
<select class="w-full appearance-none bg-surface-container-low border-none rounded-xl py-3 px-4 text-sm font-medium focus:ring-2 focus:ring-primary-container pr-10">
|
||||
<option>Any Actor</option>
|
||||
<option>System Automations</option>
|
||||
<option>Admin Users</option>
|
||||
<option>API Service Account</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-outline" data-icon="person_search">person_search</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="block text-[10px] font-bold text-outline uppercase tracking-widest mb-1.5 ml-1">Date Range</label>
|
||||
<div class="relative">
|
||||
<button class="w-full bg-surface-container-low border-none rounded-xl py-3 px-4 text-sm font-medium text-left flex justify-between items-center hover:bg-surface-container transition-colors">
|
||||
<span>Last 24 Hours</span>
|
||||
<span class="material-symbols-outlined text-outline" data-icon="calendar_month">calendar_month</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-surface-container-highest hover:bg-outline-variant/30 text-on-surface-variant p-3.5 rounded-xl transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
|
||||
</button>
|
||||
<button class="bg-primary text-white py-3.5 px-8 rounded-xl font-bold hover:scale-95 transition-all shadow-md shadow-primary/20">
|
||||
Apply View
|
||||
</button>
|
||||
</section>
|
||||
<!-- Tonal Data Table Container -->
|
||||
<div class="bg-surface-container-low rounded-full overflow-hidden border-none shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-high/50">
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Timestamp</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Tenant Name</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Actor</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Entity</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Action</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Metadata</th>
|
||||
<th class="px-6 py-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-surface-container-highest/20">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">14:22:45 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">HealthBridge Global</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container text-[10px] font-bold">JD</div>
|
||||
<span class="text-sm font-medium">Jane Doe</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="hub">hub</span>
|
||||
WhatsApp Channel
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-green-100 text-green-700 text-[10px] font-black uppercase tracking-wider rounded-full">CREATED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"API_KEY_ROTATED: channel_id_882..."</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">14:18:12 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">Apex MedTech</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center text-outline">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="robot_2">robot_2</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium">System Core</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="person">person</span>
|
||||
User: S. Miller
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-amber-100 text-amber-700 text-[10px] font-black uppercase tracking-wider rounded-full">UPDATED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"Role changed: Editor → Admin"</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">13:55:01 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">Unity Health</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="User" class="w-8 h-8 rounded-full" data-alt="close up of professional woman in business attire with focused expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxudJG9cflU2U3FRjxUanjkp_G8MI4eBe3pP3gEx4K-cX_r_EiIDfxIv0bLnY5RKHnMdMZBVi0GsdAovaVKpkf9MoefKP9NDLmg0LGpTbIYaVgui9zA27EMPR--S98DSW9acsaBlJcwmPvc6v20XFWy_62YGqMwlR73eaUh_0uwNl7LM072WirWL7c5dNOWQFKWxnp8NW7B5zkgmDq0Xdec83v1R-M2KjTlti3g8i_N3IsntQ6reGpxth5qZztzP4O9NK5HVa_RAc"/>
|
||||
<span class="text-sm font-medium">Sarah Chen</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="payments">payments</span>
|
||||
Billing Profile
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-red-100 text-red-700 text-[10px] font-black uppercase tracking-wider rounded-full">DELETED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"Legacy CC removed (****4242)"</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">13:42:19 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">Global Partners</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-tertiary-container/40 flex items-center justify-center text-on-tertiary-container text-[10px] font-bold">MK</div>
|
||||
<span class="text-sm font-medium">Mark Kaplan</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="security">security</span>
|
||||
Audit Access
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-[10px] font-black uppercase tracking-wider rounded-full">ACCESSED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"Exported Audit CSV (Rows: 4,200)"</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination / Footer -->
|
||||
<footer class="p-6 flex items-center justify-between bg-surface-container-high/30">
|
||||
<div class="text-xs text-outline font-medium">
|
||||
Showing <span class="text-on-surface">1-25</span> of <span class="text-on-surface">4,529</span> platform events
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 rounded-lg hover:bg-white text-outline disabled:opacity-30" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-lg bg-primary text-white font-bold text-xs flex items-center justify-center shadow-sm">1</button>
|
||||
<button class="w-8 h-8 rounded-lg hover:bg-white text-on-surface font-semibold text-xs transition-colors">2</button>
|
||||
<button class="w-8 h-8 rounded-lg hover:bg-white text-on-surface font-semibold text-xs transition-colors">3</button>
|
||||
<span class="text-outline px-1">...</span>
|
||||
<button class="w-8 h-8 rounded-lg hover:bg-white text-on-surface font-semibold text-xs transition-colors">182</button>
|
||||
<button class="p-2 rounded-lg hover:bg-white text-outline transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Contextual Insight Cards (Asymmetric/Bento Style) -->
|
||||
<div class="grid grid-cols-12 gap-6 mt-8">
|
||||
<div class="col-span-8 bg-surface-container-lowest rounded-full p-8 shadow-sm flex flex-col justify-between border-none">
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-lg text-on-surface mb-2">Activity Overview</h3>
|
||||
<p class="text-sm text-outline max-w-lg mb-6">Platform events have increased by 14% compared to the last 24-hour cycle, primarily driven by automated API channel syncs.</p>
|
||||
</div>
|
||||
<div class="h-32 w-full bg-surface-container-low rounded-xl relative overflow-hidden">
|
||||
<!-- Simulated Chart -->
|
||||
<div class="absolute inset-0 flex items-end px-4 gap-2">
|
||||
<div class="flex-1 bg-primary-container h-[40%] rounded-t-lg opacity-40"></div>
|
||||
<div class="flex-1 bg-primary-container h-[60%] rounded-t-lg opacity-50"></div>
|
||||
<div class="flex-1 bg-primary-container h-[55%] rounded-t-lg opacity-60"></div>
|
||||
<div class="flex-1 bg-primary-container h-[85%] rounded-t-lg opacity-70"></div>
|
||||
<div class="flex-1 bg-primary-container h-[70%] rounded-t-lg opacity-80"></div>
|
||||
<div class="flex-1 bg-primary h-[95%] rounded-t-lg"></div>
|
||||
<div class="flex-1 bg-primary-container h-[75%] rounded-t-lg opacity-80"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-4 bg-[#0c6780] text-white rounded-full p-8 shadow-xl flex flex-col justify-between relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<span class="material-symbols-outlined text-4xl mb-4 opacity-50" data-icon="security_update_good">security_update_good</span>
|
||||
<h3 class="font-headline font-bold text-xl mb-2">Audit Compliance</h3>
|
||||
<p class="text-sm text-primary-fixed-dim/80">All logs are currently encrypted and verified against ledger hash. Integrity check complete.</p>
|
||||
</div>
|
||||
<button class="relative z-10 w-fit bg-white/10 backdrop-blur-md border border-white/20 text-white text-xs font-bold py-3 px-6 rounded-xl hover:bg-white hover:text-primary transition-all">
|
||||
Review Integrity Report
|
||||
</button>
|
||||
<!-- Abstract texture background -->
|
||||
<div class="absolute -right-8 -bottom-8 w-48 h-48 bg-white/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Tool for Rapid Audit -->
|
||||
<button class="fixed bottom-8 right-8 bg-gradient-to-br from-primary to-primary-container text-white p-4 rounded-full shadow-2xl shadow-primary/40 hover:scale-110 active:scale-95 transition-all z-30">
|
||||
<span class="material-symbols-outlined" data-icon="bolt">bolt</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
screen_design/system_audit_log_super_admin/screen.png
Normal file
BIN
screen_design/system_audit_log_super_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
485
screen_design/tenant_management_zappcare_website/code.html
Normal file
485
screen_design/tenant_management_zappcare_website/code.html
Normal file
@ -0,0 +1,485 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Tenant Ecosystem | ZappCare Business Suite</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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": {
|
||||
"background": "#f7f9fc",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-background": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"outline": "#6f787d",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"primary-container": "#87ceeb",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-container": "#005870"
|
||||
},
|
||||
"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-architecture-no-borders {
|
||||
border: none !important;
|
||||
}
|
||||
.glassmorphism-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.scale-98-on-click:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f7f9fc;
|
||||
color: #191c1e;
|
||||
}
|
||||
h1, h2, h3, .brand-font {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex min-h-screen">
|
||||
<!-- SideNavBar Component -->
|
||||
<aside class="h-screen w-72 fixed left-0 top-0 overflow-y-auto bg-[#f2f4f6] dark:bg-slate-900 tonal-architecture-no-borders flex flex-col p-6 space-y-2 z-50">
|
||||
<div class="mb-10 px-2 flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#0c6780] to-[#87ceeb] flex items-center justify-center shadow-lg">
|
||||
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">domain</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-black text-[#0c6780] dark:text-[#87ceeb] tracking-tighter leading-none">ZappCare</h1>
|
||||
<p class="text-[10px] font-bold uppercase tracking-widest text-slate-500 mt-1">Business Suite</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-4 mb-8 bg-gradient-to-r from-[#0c6780] to-[#87ceeb] text-white rounded-full font-headline font-bold flex items-center justify-center space-x-2 shadow-xl shadow-primary/20 hover:opacity-90 transition-all scale-98-on-click">
|
||||
<span class="material-symbols-outlined text-sm">add</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
||||
<span>Inbox</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
|
||||
<span>Contacts</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||
<span>Campaigns</span>
|
||||
</a>
|
||||
<!-- Active Navigation: Tenants -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 bg-[#87ceeb] text-[#005870] font-bold rounded-xl transition-all duration-200 font-['Manrope'] text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain" style="font-variation-settings: 'FILL' 1;">domain</span>
|
||||
<span>Tenants</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-6 mt-6 border-t border-slate-200 dark:border-slate-800">
|
||||
<div class="flex items-center space-x-3 px-2">
|
||||
<img class="w-10 h-10 rounded-full object-cover" data-alt="Professional male executive headshot with soft office lighting background, corporate leadership style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBHScy2qjx2PSPNz3tEtc2SNXrX3KL67Uki0GVCc9P--FZDFcVFhm25Fv1dhCDhJoPrPW9PoXBv6NwA0CHz57LYCF0DAvX6ozu4GN8BcyI7i9yyKa3saMmW2lmlYxRI4Qtw_mcKCVDL445SYtlh2XeXIWyUgjO7nfH3O-sUPB_WcJw4P7lQVqZxa9qI6rM1NDKY_pJ7bWBpgeaQ7NrvGA-raJ_1hn2r8XqjQAPifU-bNFuJ9vd4F89fJG7ZfMGRLVVlodOtqKJ48c0"/>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-sm font-bold text-on-surface truncate">Admin Manager</p>
|
||||
<p class="text-[10px] text-slate-500 truncate">admin@zappcare.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Canvas -->
|
||||
<main class="flex-1 ml-72 relative">
|
||||
<!-- TopNavBar Component -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-18rem)] h-16 z-40 bg-[#f7f9fc]/85 backdrop-blur-xl dark:bg-slate-950/85 flex justify-between items-center px-8 w-full tonal-shift-no-lines">
|
||||
<div class="flex items-center flex-1 max-w-xl">
|
||||
<div class="relative w-full">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
|
||||
<input class="w-full bg-surface-container-highest/50 border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-slate-400 font-body" placeholder="Search across ecosystem..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-all glassmorphism-hover">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-all glassmorphism-hover">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-all glassmorphism-hover">
|
||||
<span class="material-symbols-outlined" data-icon="chat_bubble_outline">chat_bubble_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-slate-200 dark:bg-slate-800 mx-2"></div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-sm font-semibold text-primary font-headline">Super Admin</span>
|
||||
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container text-xs font-bold">SA</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<div class="pt-24 px-8 pb-12">
|
||||
<!-- Header & KPIs -->
|
||||
<div class="mb-10">
|
||||
<h2 class="text-4xl font-extrabold text-on-surface tracking-tight font-headline mb-6">Tenant Ecosystem</h2>
|
||||
<!-- KPI Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between group hover:shadow-md transition-shadow">
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Total Tenants</p>
|
||||
<h3 class="text-3xl font-black text-on-surface font-headline">1,284</h3>
|
||||
<p class="text-[10px] text-emerald-600 font-bold mt-1 flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1">trending_up</span> +12% from last month
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-14 h-14 rounded-full bg-primary/10 text-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">groups</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between group hover:shadow-md transition-shadow">
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Revenue MRR</p>
|
||||
<h3 class="text-3xl font-black text-on-surface font-headline">$42.8k</h3>
|
||||
<p class="text-[10px] text-emerald-600 font-bold mt-1 flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1">trending_up</span> +8.4% growth
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-14 h-14 rounded-full bg-tertiary/10 text-tertiary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">payments</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between group hover:shadow-md transition-shadow">
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Platform Health</p>
|
||||
<h3 class="text-3xl font-black text-on-surface font-headline">99.9%</h3>
|
||||
<p class="text-[10px] text-slate-400 font-bold mt-1 flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1">timer</span> 0.02ms latency avg
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-14 h-14 rounded-full bg-secondary/10 text-secondary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Controls -->
|
||||
<div class="bg-surface-container-low rounded-full p-4 mb-4 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div class="flex items-center space-x-2 w-full md:w-auto">
|
||||
<div class="relative flex-1 md:w-80">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">filter_list</span>
|
||||
<input class="w-full bg-surface-container-lowest border-none rounded-full pl-12 pr-4 py-3 text-sm focus:ring-2 focus:ring-primary/20 font-body" placeholder="Filter by name, plan, or status..." type="text"/>
|
||||
</div>
|
||||
<button class="bg-surface-container-lowest p-3 rounded-full text-slate-500 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">tune</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3 w-full md:w-auto justify-end">
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-tighter">View:</span>
|
||||
<div class="flex bg-surface-container-highest rounded-full p-1">
|
||||
<button class="bg-surface-container-lowest text-primary shadow-sm px-4 py-1.5 rounded-full text-xs font-bold">Table</button>
|
||||
<button class="text-slate-500 px-4 py-1.5 rounded-full text-xs font-bold">Grid</button>
|
||||
</div>
|
||||
<button class="flex items-center space-x-2 bg-on-surface text-surface rounded-full px-6 py-3 text-sm font-bold hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined text-sm">download</span>
|
||||
<span>Export Data</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tenant Table -->
|
||||
<div class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden p-2">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="text-slate-400 font-headline font-bold text-xs uppercase tracking-widest">
|
||||
<th class="px-8 py-6">Tenant Identity</th>
|
||||
<th class="px-6 py-6">Subscription Plan</th>
|
||||
<th class="px-6 py-6">Operational Status</th>
|
||||
<th class="px-6 py-6">Active Channels</th>
|
||||
<th class="px-6 py-6">Platform Usage</th>
|
||||
<th class="px-6 py-6 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm font-body">
|
||||
<!-- Tenant Row 1 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Modern minimalist logo for a tech company with geometric shapes and teal color palette" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCz72T8AZIy1Ka53NJa8lmHVH-UcspJe1GmuD9A_NOLCF1NmTex2DmCQ3eO1eGOzQdSQCC2Z0iuLTeuyzXRomF4FQRAuwZabPcXif5oOozMpjWF4gMekAlqMB64Ej6pre-gVC-qCPcsecg6M_rVRBMRQ_zUBogPjNY9y8TF6bUISMWVr-_bwOAhwYDZsxbVxDwtHUx2Aki6vVVjyfQfg_tbl67CIQFp1oxrKMD9jM8DStnIcwB55O-U-MN-qfjxSsHid6VdfJqHkpw"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface text-base">AeroDynamics Logistics</p>
|
||||
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: aero_8829</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-primary/10 text-primary px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Enterprise Elite</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-emerald-700 font-bold text-xs">Active</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center" title="WhatsApp">
|
||||
<span class="material-symbols-outlined text-xs text-[#25D366]" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center" title="Email">
|
||||
<span class="material-symbols-outlined text-xs text-blue-500" style="font-variation-settings: 'FILL' 1;">mail</span>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center" title="SMS">
|
||||
<span class="material-symbols-outlined text-xs text-purple-500" style="font-variation-settings: 'FILL' 1;">sms</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[120px]">
|
||||
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
||||
<span>72%</span>
|
||||
<span>3.2M req</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full" style="width: 72%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Tenant Row 2 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Abstract vibrant brand mark for health care startup using circular elements and blue gradients" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBd18ECJdft-kXzcgfbWDPqyx5pV6OqnibFW_occV7gVP6StJvYxeUXWdV0ITxyPGZmrZXHvDTvdyKBXidkn97TNlOayw-jFpOjI7WprlkiES_3L024WSttlpPur3oqwLQVOQ0Z6wlru931vNpWweUfAbLRoECF8G-ANOQUbynMi76De0bDs8UP4nKd41mOjj1r0PbZN8TStUgku8Qk1yA4Q718xxWZKsFXRidssqkFjNnEve4XRRhLt1lb4jsUwc-iRcMGfUG908o"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface text-base">Pulse Health Network</p>
|
||||
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: pulse_1142</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-secondary-container text-on-secondary-container px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Business Pro</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
|
||||
<span class="text-amber-700 font-bold text-xs">Pending Setup</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-xs text-blue-500" style="font-variation-settings: 'FILL' 1;">mail</span>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-xs text-slate-400">add</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[120px]">
|
||||
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
||||
<span>12%</span>
|
||||
<span>0.1M req</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-secondary rounded-full" style="width: 12%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Tenant Row 3 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Monochrome professional real estate logo with clean lines and sophisticated architectural vibe" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBscqcyPX4jnJra3YasPQAM4IfouonAF6TfFjNhHezExMmcQXvlfjFoD2xDZoGW15zYRjgSv7i8XwcPzM0XEg6H5f9kAGETFA9cXzYlkiLbTVp2IE633CG3kxEXbd5CFUo7lXZne4vczpl58VMxXbGaSmPPf-3xAvjwr0T2WwOdNxrB2cXgwhSo48m-7j8h8-n1SF14HnTwVmYWeyXwmCDV9vAh33a0MY1QyiG2TcIJFpN0krEvR27PS6GVRQlyfIhiyNiI4ICspPU"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface text-base">Skyline Properties</p>
|
||||
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: sky_9031</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-surface-container-highest text-on-surface-variant px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Standard</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2 h-2 rounded-full bg-rose-500"></span>
|
||||
<span class="text-rose-700 font-bold text-xs">Suspended</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200 border-2 border-surface-container-lowest flex items-center justify-center opacity-50">
|
||||
<span class="material-symbols-outlined text-xs text-slate-500">lock</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[120px]">
|
||||
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
||||
<span>0%</span>
|
||||
<span>N/A</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error rounded-full" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Tenant Row 4 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Flowing organic logo for a wellness brand with soft pastel colors and fluid shapes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTOmuCEDaB9ci6W1LcS6tZP7Wf0yWYmwxQF-8UyCpbHKmN4CDKFvoCC6JcXYnc_M8Sw-wmuXI2kbKGkvalvTIoYd23Xb2stvpD2VPmy_QdLvweAK1OKF9KDK8j0_7N6SLhxXCQhF1IV8G9sTHLCCM9jWYcIk5iozwIDf1QSrGe-07ncbxX2z3aDbJE8F-IVS5FvbBwXd_xssa1BISEZ70I3Yvjg0JEseW0MdnOxJLP4A3jp7E1uMq12LCfLssWQha22ygCsuoamWI"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface text-base">Zenith Wellness</p>
|
||||
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: znth_4422</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-primary/10 text-primary px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Enterprise Elite</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-emerald-700 font-bold text-xs">Active</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-xs text-[#25D366]" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-xs text-pink-500" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[120px]">
|
||||
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
||||
<span>91%</span>
|
||||
<span>1.8M req</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full" style="width: 91%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="px-8 py-6 flex items-center justify-between border-t border-slate-50">
|
||||
<p class="text-xs font-bold text-slate-500 uppercase tracking-tighter">Showing 1-10 of 1,284 tenants</p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-400 hover:bg-slate-100 transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center bg-primary text-white font-bold text-xs">1</button>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-500 hover:bg-slate-100 font-bold text-xs transition-colors">2</button>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-500 hover:bg-slate-100 font-bold text-xs transition-colors">3</button>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-400 hover:bg-slate-100 transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Contextual Support -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 rounded-full bg-on-surface text-surface shadow-2xl flex items-center justify-center hover:scale-105 transition-transform z-50">
|
||||
<span class="material-symbols-outlined">support_agent</span>
|
||||
</button>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/tenant_management_zappcare_website/screen.png
Normal file
BIN
screen_design/tenant_management_zappcare_website/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
188
screen_design/zappcare_accept_invitation/code.html
Normal file
188
screen_design/zappcare_accept_invitation/code.html
Normal file
@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Accept Invitation | ZappCare</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&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-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-background": "#191c1e",
|
||||
"primary-container": "#87ceeb",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary": "#0c6780",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-container": "#36647e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"secondary": "#35637d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"tertiary": "#865219",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error-container": "#ffdad6"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 24px 48px -12px rgba(25, 28, 30, 0.08);
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen flex flex-col">
|
||||
<!-- TopAppBar (Supressed from navigation shell logic but used as branding header) -->
|
||||
<header class="fixed top-0 left-0 w-full h-16 bg-white/80 dark:bg-slate-950/80 backdrop-blur-lg flex justify-between items-center px-8 lg:px-12 z-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 primary-gradient rounded-full flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-sm" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
</div>
|
||||
<span class="text-xl font-black text-sky-900 dark:text-white font-['Manrope'] tracking-tight">ZappCare</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors" href="#">Docs</a>
|
||||
<a class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors" href="#">Support</a>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-grow flex items-center justify-center px-4 pt-20 pb-12 relative overflow-hidden">
|
||||
<!-- Abstract Background Decorative Elements -->
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[400px] h-[400px] rounded-full bg-primary-container/20 blur-[120px]"></div>
|
||||
<div class="absolute bottom-[-5%] left-[-5%] w-[300px] h-[300px] rounded-full bg-secondary-container/30 blur-[100px]"></div>
|
||||
<div class="w-full max-w-md">
|
||||
<div class="glass-card rounded-[2rem] p-8 lg:p-10 border border-white/40 relative z-10">
|
||||
<!-- Invitation Context -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-surface-container-low rounded-full mb-6">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">mail</span>
|
||||
</div>
|
||||
<h1 class="font-headline text-3xl font-extrabold text-on-surface tracking-tight mb-2">You're invited</h1>
|
||||
<p class="text-on-surface-variant text-sm font-medium">
|
||||
Join your team at <span class="text-primary font-bold">name@company.com</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Acceptance Form -->
|
||||
<form class="space-y-5">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[0.8rem] font-semibold text-on-surface-variant ml-1 font-label" for="fullname">Full Name</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3.5 text-on-surface placeholder:text-outline/60 focus:ring-2 focus:ring-primary/20 transition-all duration-200" id="fullname" placeholder="Enter your full name" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[0.8rem] font-semibold text-on-surface-variant ml-1 font-label" for="password">Password</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3.5 text-on-surface placeholder:text-outline/60 focus:ring-2 focus:ring-primary/20 transition-all duration-200" id="password" placeholder="Create a password" type="password"/>
|
||||
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-outline hover:text-primary transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-[10px] text-on-surface-variant/70 mt-1 ml-1 italic">Must be at least 8 characters long.</p>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[0.8rem] font-semibold text-on-surface-variant ml-1 font-label" for="confirm-password">Confirm Password</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3.5 text-on-surface placeholder:text-outline/60 focus:ring-2 focus:ring-primary/20 transition-all duration-200" id="confirm-password" placeholder="Repeat your password" type="password"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<button class="w-full primary-gradient text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2" type="submit">
|
||||
<span>Accept Invitation</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-8 pt-6 border-t border-outline-variant/10 text-center">
|
||||
<p class="text-xs text-on-surface-variant/80 leading-relaxed px-4">
|
||||
By clicking "Accept Invitation", you agree to ZappCare's
|
||||
<a class="text-primary font-semibold hover:underline" href="#">Terms of Service</a> and
|
||||
<a class="text-primary font-semibold hover:underline" href="#">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Team Preview Footer (Asymmetric Layout Hint) -->
|
||||
<div class="mt-8 flex items-center justify-between px-2">
|
||||
<div class="flex -space-x-3">
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="professional headshot of a team member with a friendly smile on a soft blue background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDlAjo8AcBuyDUeTaGG8HMl-UsiXE9SUpH_kQJu_ivgj-3H0mEPVnhsh4ttF8nG-6CE4VNyIk9YRSLSSH_ZB36x1iZlmS-OVbQHdp0GvOxCpf4RiuZMeqrtdxN9mLXTzz5WaTqU7ydOk-cjJmueQ1_PgZXcvM08LlyoCz_p5tyKCwTu6iXGyJFFrSzpLe-gIzkWWxa0CvHBSK8hpV_VWrP0Vxk6Z7xnqDWHxGmhvngGZM5bLgCbxdoRXlkc3xm2y36EABRONP-UGa8"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a confident female professional with glasses in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdpbm0p_UM9SbakS75T7WOhTt8gaT7uAiCGEr9nKAzOr59cSHfz7BXAhcDxEl1rxAM8nkQXx8c6aoHvJvwZ0eV_777BjL6COwWL7ON3lVBtGZOaMhcYXEytdyjsy6ntjB2rM87XqMsIn_XePCjlwui7o8olYlxMNBdvNmc6AMzO8wxswIAFihO9aMV4H6ScQnwEQVK5RamBWJCnCK4c_e2K96h87xH6YuOEGZORB8s0GzwJwNjm-K_jy4ZrtwE7daUumommnkbW3o"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="smiling young creative professional with short hair and a neutral grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQyYWsXtGby2qYBHwl_JUEuGh1xRMjVsqVrdbZIqP-PRdYqcw_EKaq9UOlnSKIPMtKzpEwIa-9N927h7UFGoRlXfUaSZnrECZPsNWDbdywSBX3jTicEtze1Gsn_KlGeJPEU8mKJFudpEWrMLx8ExQd9Z3VxxSbhpKURIoBkNvUAsQoX2n5ZS_1Uqk01tJv66KZ92g_ORVFtNMXCbm1GAcntLeBJyXoElEd0oAEpq_4sYtvG9liEJx_4xB_74BlS32gTMcQ1azGAG8"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-primary-container flex items-center justify-center text-[10px] font-bold text-on-primary-container">
|
||||
+12
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[11px] font-semibold text-on-surface-variant uppercase tracking-wider">Join 15 colleagues already on ZappCare</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Meta -->
|
||||
<footer class="py-6 text-center text-[11px] text-outline/50 uppercase tracking-[0.2em]">
|
||||
© 2024 ZappCare Enterprise Systems
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_accept_invitation/screen.png
Normal file
BIN
screen_design/zappcare_accept_invitation/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
158
screen_design/zappcare_access_denied/code.html
Normal file
158
screen_design/zappcare_access_denied/code.html
Normal file
@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-background": "#191c1e",
|
||||
"primary-container": "#87ceeb",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary": "#0c6780",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-container": "#36647e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"secondary": "#35637d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"tertiary": "#865219",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error-container": "#ffdad6"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
.glass-effect {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface flex flex-col min-h-screen">
|
||||
<!-- TopAppBar Logic: Rendered as Transactional Shell (Suppressed Nav Cluster) -->
|
||||
<header class="fixed top-0 left-0 w-full h-16 glass-effect z-50 flex items-center px-12 justify-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-3xl" data-icon="lock_person">lock_person</span>
|
||||
<span class="text-xl font-black text-sky-900 font-headline tracking-tight">ZappCare</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area: Centered Vertical Journey -->
|
||||
<main class="flex-grow flex items-center justify-center px-6 pt-16">
|
||||
<div class="max-w-xl w-full text-center space-y-12">
|
||||
<!-- Architectural Graphic Element -->
|
||||
<div class="relative inline-block">
|
||||
<div class="w-48 h-48 mx-auto bg-surface-container-low rounded-full flex items-center justify-center">
|
||||
<div class="w-32 h-32 bg-surface-container-lowest rounded-full shadow-2xl shadow-slate-900/5 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-error text-6xl" data-icon="gpp_maybe">gpp_maybe</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Subtle Gradient Accents -->
|
||||
<div class="absolute -top-4 -right-4 w-12 h-12 rounded-full primary-gradient opacity-20 blur-xl"></div>
|
||||
<div class="absolute -bottom-4 -left-4 w-16 h-16 rounded-full bg-tertiary-container opacity-20 blur-xl"></div>
|
||||
</div>
|
||||
<!-- Typography Content -->
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold font-headline text-on-surface tracking-tight">
|
||||
Access Denied
|
||||
</h1>
|
||||
<p class="text-lg text-on-surface-variant max-w-sm mx-auto leading-relaxed">
|
||||
You don't have permission to view this page. This area is restricted to authorized personnel.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Tonal Component Card for Metadata/Help (Asymmetric Pattern) -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full inline-flex items-center gap-4 text-sm font-medium border border-outline-variant/15">
|
||||
<div class="flex -space-x-2">
|
||||
<img alt="Admin" class="w-8 h-8 rounded-full border-2 border-surface" data-alt="headshot of a middle-aged male IT administrator with a professional friendly expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCmHAT99cpDBGdBnnZduw6FV8_Gr9dKPHkL1EUNcxhWfWVUYeVXd9yGIW4c8dge8cYPBySHHL9EE-C359OUGVD5RMl1A9BCw2z1T7fd3xU1NGi-0XYx-snzH9SUX0G67qYZ_DD-e-PdQB03rKQ1MjuEdMSXzxS8dyfCAChtIk4olIveMR_XYXS90BwSidnnDrKgNXaQNqpEmbrNQ7y1UGTjFaOcJX_2WGowjgQNZSmEut6Lnlg31v6vOdfkpvZR5l02GnGHPHL_BJk"/>
|
||||
<img alt="Support" class="w-8 h-8 rounded-full border-2 border-surface" data-alt="headshot of a young female support specialist with a calm and helpful demeanor" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABs2hHb5HD0EWUbgSkIeYTdQKDQhSl-N8AiQsrYFTPzrNTalESL1dVImd5N6m3yEAtnAKnEBVtRCGCZgs_o4wxjVUvlStfwnHULo35Z5NukyywhDpkiYQK9sRcwBPOLAl-pdGlbjJ_nF9iuBWbM1xDDol6cl41DAQxC7LiPxt8vkUY9E20QiBi_l0rA56N3LM6CqQLF_WKkw5mkUe_2WHAXV5XWcxPuAN4nrsua0asGqULGn4bOBcMG7I5MGvplyYt1LrKVw2652M"/>
|
||||
</div>
|
||||
<span class="text-on-surface-variant">Need help? Contact your <span class="text-primary font-bold">Workspace Administrator</span></span>
|
||||
</div>
|
||||
<!-- Primary Action -->
|
||||
<div class="pt-4 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a class="primary-gradient text-white px-8 py-4 rounded-full font-bold text-base shadow-lg hover:scale-105 transition-all duration-300 flex items-center gap-2" href="/dashboard">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
<button class="bg-transparent border border-outline-variant/30 text-on-surface px-8 py-4 rounded-full font-semibold text-base hover:bg-surface-container-high transition-colors">
|
||||
Request Access
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer: Tonal Branding -->
|
||||
<footer class="py-12 px-12 text-center">
|
||||
<div class="inline-flex items-center gap-8 text-on-surface-variant/60 text-xs font-semibold tracking-widest uppercase">
|
||||
<span class="hover:text-primary transition-colors cursor-pointer">Security Protocol 403-E</span>
|
||||
<div class="w-1.5 h-1.5 bg-outline-variant/30 rounded-full"></div>
|
||||
<span class="hover:text-primary transition-colors cursor-pointer">Support Documentation</span>
|
||||
<div class="w-1.5 h-1.5 bg-outline-variant/30 rounded-full"></div>
|
||||
<span class="hover:text-primary transition-colors cursor-pointer">Enterprise Status</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Background Architectural Textures -->
|
||||
<div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] rounded-full bg-primary-container/10 blur-[120px]"></div>
|
||||
<div class="absolute bottom-[-5%] left-[-10%] w-[35%] h-[35%] rounded-full bg-secondary-container/10 blur-[100px]"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_access_denied/screen.png
Normal file
BIN
screen_design/zappcare_access_denied/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
424
screen_design/zappcare_agent_dashboard/code.html
Normal file
424
screen_design/zappcare_agent_dashboard/code.html
Normal file
@ -0,0 +1,424 @@
|
||||
<!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 Agent Dashboard</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.75rem",
|
||||
"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;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.sidebar-active {
|
||||
background-color: #87ceeb;
|
||||
color: #005870;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="bg-[#f2f4f6] dark:bg-slate-900/85 backdrop-blur-xl h-screen w-64 fixed left-0 top-0 flex flex-col p-4 space-y-2 z-50">
|
||||
<div class="mb-8 px-2 flex items-center gap-3">
|
||||
<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;">bolt</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-xs text-on-surface-variant font-medium">System Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Mapping JSON tab_labels and tab_icons -->
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 font-headline 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 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
Monitoring
|
||||
</a>
|
||||
<!-- Active Tab: Agents -->
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold font-headline tracking-tight" 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 hover:bg-slate-200/50 transition-all duration-200 font-headline 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 hover:bg-slate-200/50 transition-all duration-200 font-headline 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 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined">terminal</span>
|
||||
Logs
|
||||
</a>
|
||||
</nav>
|
||||
<button class="w-full py-4 px-4 bg-gradient-to-br from-primary to-primary-container text-on-primary font-headline font-bold rounded-full scale-95 transition-transform duration-200 ease-in-out hover:scale-100 shadow-lg shadow-primary/20 mb-4">
|
||||
New Tenant
|
||||
</button>
|
||||
<div class="pt-4 border-t border-outline-variant/20 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
Settings
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
Support
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="bg-[#f7f9fc]/90 dark:bg-slate-950/90 backdrop-blur-md fixed top-0 right-0 left-64 h-16 z-40 flex items-center justify-between px-8 w-full">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
|
||||
<input class="bg-surface-container-highest border-none rounded-full pl-10 pr-4 py-2 text-sm w-80 focus:ring-2 focus:ring-primary/20" placeholder="Search conversations..." type="text"/>
|
||||
</div>
|
||||
<nav class="hidden lg:flex items-center gap-6">
|
||||
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1 font-['Inter'] text-sm font-medium" href="#">Dashboard</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Metrics</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Reports</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-bold">System Status</span>
|
||||
<button class="text-on-surface-variant hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-2 pl-4 border-l border-outline-variant/20">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-bold leading-tight">Sarah Jenkins</p>
|
||||
<p class="text-[10px] text-on-surface-variant font-medium">L3 Specialist</p>
|
||||
</div>
|
||||
<img class="w-9 h-9 rounded-full object-cover" data-alt="professional portrait of a confident woman in business casual attire with a soft office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzr98Zfws_pThXGcAJ5KKomDnisCdF2ce5y4heluDjAGhe0pV_s44neA4EVHC0v5dn_oEf1kgl9ny6-ZDZAHzb_exgNgi-2eN923BLNj-R0YWRhFcZbom7u60lApdTWKSQwlH0RkRgdr2JRDjW-wnvgKv-jnLqoX5qmNf8sbKmIb1hQXnAEbwc1fCuDD4J4kC1OyOxJFJWQ16ZdS3B9CW-vSzgEnom1gIJKsmlxzmxDeJ-jSHxlxZ7uDQKp5frPImg-mEjRUgr6pA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Canvas Content -->
|
||||
<main class="ml-64 pt-24 px-8 pb-12 min-h-screen">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Welcome Header -->
|
||||
<div class="mb-10">
|
||||
<h2 class="text-4xl font-extrabold font-headline text-on-surface tracking-tight mb-2">My Workload</h2>
|
||||
<p class="text-on-surface-variant text-lg">You have <span class="font-bold text-primary">12 active conversations</span> across 4 priority tenants.</p>
|
||||
</div>
|
||||
<!-- Bento Performance Grid -->
|
||||
<div class="grid grid-cols-12 gap-6 mb-12">
|
||||
<!-- Main Metric: Response Time -->
|
||||
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-6 rounded-full shadow-none border-none flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="w-12 h-12 bg-secondary-container/30 rounded-xl flex items-center justify-center text-secondary mb-4">
|
||||
<span class="material-symbols-outlined">speed</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-on-surface-variant text-sm mb-1 uppercase tracking-widest">Avg. Response Time</h3>
|
||||
<p class="text-5xl font-black font-headline text-primary">1.4<span class="text-2xl font-bold ml-1">min</span></p>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2 text-xs font-bold text-emerald-600">
|
||||
<span class="material-symbols-outlined text-sm">trending_down</span>
|
||||
<span>12% faster than last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Metric: Resolved Chats -->
|
||||
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-6 rounded-full shadow-none border-none flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="w-12 h-12 bg-primary-container/20 rounded-xl flex items-center justify-center text-primary mb-4">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-on-surface-variant text-sm mb-1 uppercase tracking-widest">Resolved Today</h3>
|
||||
<p class="text-5xl font-black font-headline text-on-primary-container">48</p>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2 text-xs font-bold text-primary">
|
||||
<span class="material-symbols-outlined text-sm">military_tech</span>
|
||||
<span>Personal record pace</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mini Status Breakdown -->
|
||||
<div class="col-span-12 md:col-span-4 grid grid-rows-2 gap-4">
|
||||
<div class="bg-surface-container-high p-4 rounded-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-error-container/40 rounded-full flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">mark_email_unread</span>
|
||||
</div>
|
||||
<span class="font-bold text-sm">Unread Messages</span>
|
||||
</div>
|
||||
<span class="text-2xl font-black text-error">04</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-4 rounded-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-tertiary-container/30 rounded-full flex items-center justify-center text-tertiary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hourglass_empty</span>
|
||||
</div>
|
||||
<span class="font-bold text-sm">Waiting for Customer</span>
|
||||
</div>
|
||||
<span class="text-2xl font-black text-tertiary">08</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Active Conversations Section -->
|
||||
<div class="bg-surface-container-low rounded-[2rem] p-8">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<h3 class="text-2xl font-bold font-headline">Assigned to Me</h3>
|
||||
<div class="flex bg-surface rounded-full p-1 border border-outline-variant/10">
|
||||
<button class="px-4 py-1.5 bg-surface-container-lowest shadow-sm rounded-full text-sm font-bold text-primary">All Active</button>
|
||||
<button class="px-4 py-1.5 text-sm font-medium text-on-surface-variant hover:text-on-surface">Urgent Only</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 text-primary font-bold text-sm hover:underline">
|
||||
View History <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Conversation Cards Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Card 1: Urgent/Unread -->
|
||||
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-2 h-full bg-error"></div>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<img class="w-12 h-12 rounded-full object-cover" data-alt="close-up of a smiling young man in a denim shirt with soft urban lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAP4wY3k0nS54nGdIORw1J_GF0ixtOP_chrgDhSZZ3Rz2Qzy1dkz69jdBXGfy_63HNuLp5WkNWw7gs4oPh6V0GJY1xgzlBUiTVGdlkhXzUn4VjQmd0o41jIjE6Q0sOtKV6iJuPCXKyiQei2M2hgnOM2u6CDq6Mv5RDYtaIGYVAVHIy-By1EC4EuqUtZWGUen6oVgB_bnMpn052iVdDcT5yg2aFy9HiNdkLDswJ2-D1Jppo50LBvyFNrgBxTeTXJhmJO21wM3k67FA"/>
|
||||
<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-error rounded-full border-2 border-surface-container-lowest flex items-center justify-center text-[10px] text-white font-bold">!</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Marcus Thorne</p>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Order #4492</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-tighter text-error bg-error-container px-2 py-1 rounded">2m ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6 italic">"I still haven't received my tracking number for the international shipment. Can you please..."</p>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
||||
<span class="text-xs font-bold text-primary flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">domain</span> GlobalTrade
|
||||
</span>
|
||||
<button class="bg-primary text-white px-4 py-2 rounded-full text-xs font-bold hover:bg-on-primary-container transition-colors">Reply Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Waiting Customer -->
|
||||
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img class="w-12 h-12 rounded-full object-cover" data-alt="vibrant portrait of a woman laughing with soft natural lighting and blurred park background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDWZJpv5EiJh40K5-uRKfMs72GNzv6_cGJdzD4sBhf3jwW7A9Y4QPx0Tp4s1Lb5n52rfeJIAzROkdCYyaWiYGVlN1AKmqK0RdjHbzUy4W5o3YSurfEJqXLKN3gSoArG4aafDHEPbJFFvFa36tCYXcIa71PfbPbFG_LNK_2rXV1jJZl22H__TF8m2ciY9w2ZmVtJxWlWIK5s55PvZWGr9RDE1JtROatXzNSW6ffOjs1gWoJlaNXjQnc6xom0WtaEQ1ZOjS1Vayh2F0k"/>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Elena Rodriguez</p>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Billing Inquiry</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-tighter text-on-surface-variant bg-surface-container-high px-2 py-1 rounded">1h ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"Thank you for the clarification. I'll check my bank statement and get back to you shortly."</p>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
||||
<span class="text-xs font-bold text-secondary flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">hourglass_bottom</span> Awaiting Reply
|
||||
</span>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_horiz</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: New Assigned -->
|
||||
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-gradient-to-tr from-primary-container to-secondary-container flex items-center justify-center text-on-primary-container font-black">
|
||||
JW
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">James Wilson</p>
|
||||
<p class="text-xs text-on-surface-variant font-medium">API Integration</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-tighter text-primary bg-primary-container px-2 py-1 rounded">Just Now</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"Hey, we're seeing some 403 errors on the production endpoint. Can you take a quick look?"</p>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
||||
<span class="text-xs font-bold text-primary flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">bolt</span> TechCore
|
||||
</span>
|
||||
<button class="bg-primary-container text-on-primary-container px-4 py-2 rounded-full text-xs font-bold hover:brightness-95 transition-all">Accept</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Normal Priority -->
|
||||
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img class="w-12 h-12 rounded-full object-cover" data-alt="headshot of a middle-aged man with a warm smile and gentle lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAsRahL8WFtCjhH18nxhZoE7pBvQ8Zxjvc4Bjv_QSSAZBtw18xLVNTQ-XeK629lcocYn_meMN8Una1clOlUDhze9eycMxTURiSRaGDKUYvJraBGpbECZba1p5D4JFmViNdvBp-MLKbwpXzHin7efZKuYGq4HgqAQeK3ZYhqFZmFYt09-x1VBJCtfpUDHtKmibuOrX5nKf-x8I9U6PF3OeiC3VHkjlFwEONkiovGL6GUyCvuQoBFVSXJWdmlWn9PUSmBcvc3ZPRlqB4"/>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Dr. Simon K.</p>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Account Update</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-tighter text-on-surface-variant bg-surface-container-high px-2 py-1 rounded">15m ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"I've uploaded the necessary documents. Let me know if there's anything else needed."</p>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
||||
<span class="text-xs font-bold text-on-surface-variant flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">schedule</span> Last active: 15m
|
||||
</span>
|
||||
<button class="bg-surface-container text-on-surface px-4 py-2 rounded-full text-xs font-bold hover:bg-surface-container-high transition-colors">Resume</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5: High Priority / Waiting -->
|
||||
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img class="w-12 h-12 rounded-full object-cover" data-alt="professional woman wearing a light blue suit with a soft daylight background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEdvNU9JG4KgumGmDBQtMbKbHerQPq8DmxLl3hWbNh8oYx8RQgP9jxJC03pT4Kp2fhJ3xh49Xn9bLWt9qllnBV29Bm6IsThV9JFvV_nXRw5t-Qp9qwB_s3tH9azO1LH-oMdVOehwHwFJj-YCNuWLxezZ7hqLcBBhjJHlXY3e6gizauZjQjpmbOasDJa78PJ4z8tGgq4Sa-gp1nlCAQFxPfyeV6NXXvJ83_v-nM2WxiOOMXyDYK2PEpEcSxnyGH8Ecacvlj9kObQFA"/>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Maya Chen</p>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Refund Status</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-tighter text-tertiary bg-tertiary-container/20 px-2 py-1 rounded">Waiting</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"It's been three days since the request. Is there any update on when the funds will be visible?"</p>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
||||
<span class="text-xs font-bold text-primary flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">credit_card</span> FinLease
|
||||
</span>
|
||||
<button class="bg-primary text-white px-4 py-2 rounded-full text-xs font-bold hover:bg-on-primary-container transition-colors">Reply Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty/New Slot Styling (High-end UI Placeholder) -->
|
||||
<div class="border-2 border-dashed border-outline-variant/30 p-6 rounded-[2rem] flex flex-col items-center justify-center text-center opacity-60 hover:opacity-100 transition-opacity cursor-pointer group">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant group-hover:bg-primary-container group-hover:text-primary transition-colors mb-3">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</div>
|
||||
<p class="font-bold text-sm text-on-surface-variant group-hover:text-primary transition-colors">Accept Next Queue Item</p>
|
||||
<p class="text-[10px] text-outline font-medium mt-1">45 pending in global queue</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Side Metric Column: Weekly Goal Progress -->
|
||||
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="md:col-span-2 bg-gradient-to-br from-on-primary-container to-primary text-white p-8 rounded-[2rem] relative overflow-hidden shadow-2xl shadow-primary/20">
|
||||
<div class="relative z-10">
|
||||
<div class="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<h4 class="text-2xl font-bold font-headline mb-2">Weekly Goal Progress</h4>
|
||||
<p class="text-primary-fixed-dim text-sm">You are on track to exceed your CSAT targets.</p>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur-md px-4 py-2 rounded-full text-xs font-bold">
|
||||
85% Complete
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white/10 h-3 rounded-full mb-4 overflow-hidden">
|
||||
<div class="bg-primary-container h-full w-[85%]"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p class="text-primary-fixed-dim text-[10px] uppercase font-bold tracking-widest mb-1">Target</p>
|
||||
<p class="text-lg font-bold">250 Chats</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-primary-fixed-dim text-[10px] uppercase font-bold tracking-widest mb-1">Current</p>
|
||||
<p class="text-lg font-bold">212 Chats</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-primary-fixed-dim text-[10px] uppercase font-bold tracking-widest mb-1">CSAT</p>
|
||||
<p class="text-lg font-bold">4.9 / 5.0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative element -->
|
||||
<div class="absolute -right-16 -bottom-16 w-64 h-64 bg-primary-container/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-8 rounded-[2rem] flex flex-col justify-center items-center text-center">
|
||||
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center text-primary shadow-sm mb-4">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-on-surface mb-1">Top Performer</h4>
|
||||
<p class="text-xs text-on-surface-variant font-medium mb-4 leading-relaxed px-4">You ranked in the top 5% for response quality this month.</p>
|
||||
<button class="text-primary font-bold text-sm border-b-2 border-primary/20 hover:border-primary transition-all">View Leaderboard</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB (Hidden on Dashboards usually, but kept for active quick action as per shell mandate if applicable) -->
|
||||
<!-- Suppressed on Dashboard as per shell mandate preference for transactional focus, but used if primary action is 'New Chat' -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-gradient-to-br from-primary to-primary-container text-white rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform z-50">
|
||||
<span class="material-symbols-outlined text-2xl">chat</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_agent_dashboard/screen.png
Normal file
BIN
screen_design/zappcare_agent_dashboard/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
566
screen_design/zappcare_api_webhook_logs/code.html
Normal file
566
screen_design/zappcare_api_webhook_logs/code.html
Normal file
@ -0,0 +1,566 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ZappCare Super Admin - API & Webhook Logs</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&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>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.tonal-shift-bg { transition: background-color 0.2s ease; }
|
||||
.no-border { border: none !important; }
|
||||
.glass-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface flex min-h-screen">
|
||||
<!-- SideNavBar -->
|
||||
<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="mb-8 px-2 flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-container flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-white" data-icon="terminal">terminal</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-xs text-slate-500 font-medium">System Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-grow space-y-1">
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dns">dns</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Infrastructure</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Monitoring</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="support_agent">support_agent</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Agents</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Tenants</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitor_heart">monitor_heart</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Health</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Logs</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-4 mt-4 space-y-1">
|
||||
<button class="w-full flex items-center justify-center space-x-2 py-3 px-4 bg-gradient-to-r from-primary to-primary-container text-white rounded-xl font-bold shadow-sm hover:opacity-90 transition-opacity mb-4">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add">add</span>
|
||||
<span>New Tenant</span>
|
||||
</button>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Shell -->
|
||||
<main class="flex-grow ml-64 min-h-screen flex flex-col relative overflow-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<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 no-border">
|
||||
<div class="flex items-center space-x-8">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="search">search</span>
|
||||
</span>
|
||||
<input class="bg-surface-container-low border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary-container w-64 transition-all" placeholder="Search logs..." type="text"/>
|
||||
</div>
|
||||
<nav class="flex items-center space-x-6">
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium" href="#">Dashboard</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium" href="#">Metrics</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium" href="#">Reports</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-2 px-3 py-1.5 bg-green-50 text-green-700 rounded-full text-xs font-bold">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
|
||||
<span>System Status: Healthy</span>
|
||||
</div>
|
||||
<button class="text-slate-500 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<div class="flex items-center space-x-2 pl-2">
|
||||
<img class="w-8 h-8 rounded-full bg-slate-200" data-alt="close-up portrait of a professional male software engineer with short hair and a clean-shaven face in soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqvmSWuNgKbP4WWHsBGFEawS_HfcmHEFLtliAVOuls_2c_qG_gq-f8ZX6BfPgTePT13OzvDC1LOSRtteHeBv9Mn7wXsTWmvEeYZX4j8Zhe1CFE4KXtAGcZWnwFK-gTDj_TbXaOw7-xnudSKJ8uriulM5wBicLMusFdgfSli-ujbWBSrVxPKzC-cpDlqROnTpDX9UNhzUlMtJnhFJbv82HOztCTC6MlOAdaYjjV31CmLHtXydAJsK72HSvf496HYHEKOqqfyNcNT8M"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<div class="mt-16 p-8 flex-grow">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center text-xs text-slate-400 space-x-2 mb-2 font-medium">
|
||||
<span>Admin</span>
|
||||
<span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
|
||||
<span>Systems</span>
|
||||
<span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="text-primary font-bold">API & Webhook Logs</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<h2 class="text-4xl font-black text-on-surface font-headline tracking-tighter">Live Traffic</h2>
|
||||
<p class="text-slate-500 mt-1 max-w-md">Real-time monitoring of all incoming and outgoing ZappCare API events and third-party webhook payloads.</p>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button class="flex items-center space-x-2 px-4 py-2 bg-surface-container-low rounded-xl text-sm font-semibold text-slate-700 hover:bg-surface-container hover:shadow-sm transition-all">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="download">download</span>
|
||||
<span>Export CSV</span>
|
||||
</button>
|
||||
<button class="flex items-center space-x-2 px-4 py-2 bg-primary text-white rounded-xl text-sm font-semibold hover:opacity-90 transition-all shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="refresh">refresh</span>
|
||||
<span>Live Update</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Stats Grid (Tonal Architecture) -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Total Requests (24h)</p>
|
||||
<p class="text-3xl font-black font-headline text-on-surface">1,204,582</p>
|
||||
<div class="mt-2 flex items-center text-green-600 text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span>
|
||||
<span class="ml-1">+12.4% vs yesterday</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Avg. Latency</p>
|
||||
<p class="text-3xl font-black font-headline text-on-surface">142ms</p>
|
||||
<div class="mt-2 flex items-center text-primary text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="speed">speed</span>
|
||||
<span class="ml-1">Stable within SLA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Error Rate</p>
|
||||
<p class="text-3xl font-black font-headline text-error">0.04%</p>
|
||||
<div class="mt-2 flex items-center text-error text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="error_outline">error_outline</span>
|
||||
<span class="ml-1">42 Failed today</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border-2 border-primary-container/20">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Active Webhooks</p>
|
||||
<p class="text-3xl font-black font-headline text-on-primary-container">1,842</p>
|
||||
<div class="mt-2 flex items-center text-on-primary-container text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="hub">hub</span>
|
||||
<span class="ml-1">Across 420 Tenants</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filters Bar -->
|
||||
<div class="bg-surface-container-low p-4 rounded-full flex items-center space-x-6 mb-6">
|
||||
<div class="flex items-center space-x-2 text-slate-500">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="filter_list">filter_list</span>
|
||||
<span class="text-xs font-bold uppercase tracking-tight">Quick Filters:</span>
|
||||
</div>
|
||||
<div class="flex-grow flex space-x-3">
|
||||
<select class="bg-surface-container-lowest border-none rounded-xl text-sm font-medium py-2 px-4 focus:ring-primary/30 min-w-[140px]">
|
||||
<option>All Providers</option>
|
||||
<option>Stripe</option>
|
||||
<option>Twilio</option>
|
||||
<option>SendGrid</option>
|
||||
<option>WhatsApp API</option>
|
||||
</select>
|
||||
<select class="bg-surface-container-lowest border-none rounded-xl text-sm font-medium py-2 px-4 focus:ring-primary/30 min-w-[140px]">
|
||||
<option>All Status</option>
|
||||
<option>Success (200)</option>
|
||||
<option>Bad Request (400)</option>
|
||||
<option>Unauthorized (401)</option>
|
||||
<option>Server Error (500)</option>
|
||||
</select>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-slate-400 text-sm" data-icon="calendar_today">calendar_today</span>
|
||||
<input class="bg-surface-container-lowest border-none rounded-xl text-sm font-medium py-2 pl-10 pr-4 focus:ring-primary/30 w-64" type="text" value="Oct 24, 2023 - Oct 25, 2023"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="settings_ethernet">settings_ethernet</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="view_agenda">view_agenda</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Log Table -->
|
||||
<div class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden mb-8">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low/50 border-b border-surface-container">
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Event Type</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Provider ID</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Payload Source</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500 text-center">Status</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Timestamp</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="webhook">webhook</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">payment.succeeded</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">POST /v1/webhooks/stripe</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">evt_3N8xU6LpG...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">Stripe Global</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5"></span>
|
||||
200 OK
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:32:01</p>
|
||||
<p class="text-[10px] text-slate-400">2 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-orange-50 flex items-center justify-center text-orange-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="api">api</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">patient.record_create</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">PUT /api/v2/records</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">req_881vPx92...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">ZappCare Internal</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-red-500 mr-1.5"></span>
|
||||
401 Unauth
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:30:15</p>
|
||||
<p class="text-[10px] text-slate-400">4 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center text-purple-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="sms">sms</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">message.delivered</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">POST /hooks/twilio/status</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">SMx9900223...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">Twilio Hub</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5"></span>
|
||||
204 Empty
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:28:44</p>
|
||||
<p class="text-[10px] text-slate-400">6 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="webhook">webhook</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">customer.subscription.deleted</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">POST /v1/webhooks/stripe</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">evt_4K2zT1M...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">Stripe Global</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5"></span>
|
||||
200 OK
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:25:12</p>
|
||||
<p class="text-[10px] text-slate-400">9 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="p-4 bg-surface-container-low/30 border-t border-slate-100 flex items-center justify-between">
|
||||
<p class="text-xs text-slate-500 font-medium tracking-tight">Showing 1-15 of 1,242 entries today</p>
|
||||
<div class="flex space-x-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white font-bold text-xs shadow-md shadow-primary/20">1</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all font-bold text-xs">2</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all font-bold text-xs">3</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Preview Section (Asymmetric Detail Cards) -->
|
||||
<div class="grid grid-cols-12 gap-6 pb-20">
|
||||
<div class="col-span-12 md:col-span-8 bg-surface-container-low rounded-full p-8 relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl group-hover:bg-primary/10 transition-colors"></div>
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-xl font-bold font-headline mb-6 flex items-center">
|
||||
<span class="material-symbols-outlined mr-2 text-primary" data-icon="code">code</span>
|
||||
Last Failed Payload Breakdown
|
||||
</h3>
|
||||
<div class="bg-slate-900 rounded-xl p-6 font-mono text-xs text-blue-300 leading-relaxed overflow-x-auto shadow-2xl">
|
||||
<div class="flex space-x-4 mb-2 opacity-50">
|
||||
<span>1</span>
|
||||
<span class="text-pink-400">{</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>2</span>
|
||||
<span> "error": <span class="text-orange-300">"unauthorized_access"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>3</span>
|
||||
<span> "request_id": <span class="text-orange-300">"req_881vPx92"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>4</span>
|
||||
<span> "timestamp": <span class="text-orange-300">"2023-10-25T14:30:15Z"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>5</span>
|
||||
<span> "context": {</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>6</span>
|
||||
<span> "endpoint": <span class="text-orange-300">"/api/v2/records"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>7</span>
|
||||
<span> "method": <span class="text-orange-300">"PUT"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>8</span>
|
||||
<span> "ip_address": <span class="text-orange-300">"42.112.9.22"</span></span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>9</span>
|
||||
<span> }</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 opacity-50">
|
||||
<span>10</span>
|
||||
<span class="text-pink-400">}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 flex flex-col space-y-6">
|
||||
<div class="bg-gradient-to-br from-[#0c6780] to-[#005870] rounded-full p-8 text-white relative overflow-hidden flex-grow shadow-lg">
|
||||
<div class="absolute -bottom-6 -right-6 opacity-20 transform rotate-12">
|
||||
<span class="material-symbols-outlined text-9xl" data-icon="verified_user">verified_user</span>
|
||||
</div>
|
||||
<h4 class="text-lg font-bold font-headline mb-2">Audit Status</h4>
|
||||
<p class="text-sm opacity-80 mb-6">All system logs are cryptographically signed and archived in cold storage for 12 months.</p>
|
||||
<button class="px-6 py-2 bg-white/10 hover:bg-white/20 rounded-full text-xs font-bold transition-all border border-white/20">
|
||||
Download Compliance Bundle
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white rounded-full p-6 shadow-sm border border-slate-100">
|
||||
<h4 class="text-sm font-bold font-headline text-slate-800 mb-4 flex items-center">
|
||||
<span class="material-symbols-outlined text-sm mr-2 text-primary" data-icon="cloud_done">cloud_done</span>
|
||||
Endpoints Health
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs text-slate-500 font-medium">Stripe API</span>
|
||||
<span class="text-[10px] font-bold text-green-600">99.98%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-green-500 h-full w-[99.9%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs text-slate-500 font-medium">Internal Core</span>
|
||||
<span class="text-[10px] font-bold text-green-600">100%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-green-500 h-full w-full"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs text-slate-500 font-medium">Patient DB Proxy</span>
|
||||
<span class="text-[10px] font-bold text-orange-500">94.2%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-orange-500 h-full w-[94.2%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Status Bar -->
|
||||
<div class="fixed bottom-6 right-8 left-[calc(16rem+2rem)] flex justify-between items-center glass-blur bg-white/70 px-6 py-3 rounded-full border border-white/50 shadow-xl z-30">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
<span class="text-[10px] font-bold uppercase text-slate-500">Node Cluster Alpha: Active</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-slate-200"></div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400" data-icon="database">database</span>
|
||||
<span class="text-[10px] font-bold uppercase text-slate-500">DB Replication Lag: 4ms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="text-[10px] font-bold text-primary flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1" data-icon="update">update</span>
|
||||
Syncing in 12s
|
||||
</div>
|
||||
<button class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/30">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="terminal" style="font-variation-settings: 'FILL' 1;">terminal</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_api_webhook_logs/screen.png
Normal file
BIN
screen_design/zappcare_api_webhook_logs/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
352
screen_design/zappcare_billing_subscription/code.html
Normal file
352
screen_design/zappcare_billing_subscription/code.html
Normal file
@ -0,0 +1,352 @@
|
||||
<!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 Billing & Subscription</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&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-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-background": "#191c1e",
|
||||
"primary-container": "#87ceeb",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary": "#0c6780",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-container": "#36647e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"secondary": "#35637d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"tertiary": "#865219",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error-container": "#ffdad6"
|
||||
},
|
||||
"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;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="z-50 flex flex-col space-y-8 fixed left-0 top-0 h-full w-24 flex flex-col items-center py-8 bg-slate-50/85 dark:bg-slate-900/85 backdrop-blur-xl shadow-2xl shadow-slate-900/5">
|
||||
<div class="mb-6">
|
||||
<span class="text-sky-800 dark:text-sky-300 font-bold text-xl font-headline">ZC</span>
|
||||
</div>
|
||||
<nav class="flex flex-col items-center space-y-6 w-full">
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Overview</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="card_membership">card_membership</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Subscription</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 bg-sky-200 dark:bg-sky-900/60 text-sky-900 dark:text-sky-100 rounded-xl scale-110 ease-in-out duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Billing</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group_add">group_add</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Team</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- TopAppBar Shell -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-6rem)] h-16 flex justify-between items-center px-12 bg-white/80 dark:bg-slate-950/80 backdrop-blur-lg z-40">
|
||||
<div class="flex items-center space-x-4">
|
||||
<h1 class="text-xl font-black text-sky-900 dark:text-white font-['Manrope']">ZappCare</h1>
|
||||
<span class="h-4 w-[1px] bg-outline-variant/30"></span>
|
||||
<span class="text-sm font-label text-on-surface-variant font-medium">Billing & Invoices</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex space-x-6 items-center">
|
||||
<a class="text-slate-600 dark:text-slate-400 font-['Inter'] text-sm hover:text-sky-600 transition-all" href="#">Docs</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 font-['Inter'] text-sm hover:text-sky-600 transition-all" href="#">Support</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4 border-l border-outline-variant/20 pl-6">
|
||||
<button class="material-symbols-outlined text-sky-700 dark:text-sky-400">notifications</button>
|
||||
<button class="material-symbols-outlined text-sky-700 dark:text-sky-400">help_outline</button>
|
||||
<img alt="User Profile" class="w-8 h-8 rounded-full object-cover" data-alt="Close-up portrait of a professional man in a business casual environment with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTQrK1OvNUi8fEA_mp1tDHN-qFIotJvwK9-0PNG53O3uDCpGMv5o6hz8WblIrJfkAuKBwLNic6m-cQKrKjyeppE6FIG46r_qqayHOClK-QVMQReHnsAS43JpEIJoWIoySAcshqXFVsxXio6KltN9ynUmNfm6lh3DWjrb0sF4ioVF6d69U9T-UoFN9zzH9etjvjVP50D0unUU20qOjmvSIR5cOGmuEr8KIgl-at1XTpJdva8ob3zB7y9-BbhLJm3OKocKPwosz69Ek"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-24 pt-24 px-12 pb-12 min-h-screen">
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
<!-- Subscription Overview Header -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Current Plan Card (Bento Style) -->
|
||||
<div class="lg:col-span-2 bg-surface-container-lowest p-8 rounded-full shadow-sm flex justify-between items-center relative overflow-hidden group">
|
||||
<div class="z-10">
|
||||
<span class="text-primary font-bold font-label tracking-wider uppercase text-xs">Current Subscription</span>
|
||||
<h2 class="text-4xl font-black font-headline text-on-surface mt-2">Pro Plan</h2>
|
||||
<div class="flex items-center mt-4 space-x-4">
|
||||
<div class="flex items-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-primary text-sm mr-2" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="text-sm font-medium">Renewal: Oct 24, 2024</span>
|
||||
</div>
|
||||
<div class="flex items-center px-3 py-1 bg-primary-container/20 rounded-full">
|
||||
<span class="h-2 w-2 rounded-full bg-primary mr-2"></span>
|
||||
<span class="text-xs font-bold text-on-primary-container">ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-10 flex flex-col items-end space-y-3">
|
||||
<div class="text-right">
|
||||
<span class="text-sm text-on-surface-variant">Annual Billing</span>
|
||||
<p class="text-2xl font-headline font-bold text-on-surface">$1,490<span class="text-sm font-normal text-on-surface-variant">/year</span></p>
|
||||
</div>
|
||||
<button class="bg-gradient-to-br from-primary to-primary-container text-white px-8 py-3 rounded-full font-bold text-sm hover:shadow-lg transition-all active:scale-95">
|
||||
Manage Plan
|
||||
</button>
|
||||
</div>
|
||||
<!-- Decorative Abstract Gradient -->
|
||||
<div class="absolute -right-20 -top-20 w-64 h-64 bg-primary-container/10 rounded-full blur-3xl group-hover:bg-primary-container/20 transition-colors"></div>
|
||||
</div>
|
||||
<!-- Payment Method Mini-Card -->
|
||||
<div class="bg-surface-container-low p-8 rounded-full flex flex-col justify-between border border-outline-variant/10">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="material-symbols-outlined text-3xl text-primary">credit_card</span>
|
||||
<button class="text-primary text-sm font-bold hover:underline">Update</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface-variant">Primary Method</p>
|
||||
<p class="text-lg font-headline font-bold text-on-surface mt-1">•••• •••• •••• 8291</p>
|
||||
<p class="text-xs text-on-surface-variant mt-1">Visa Business — Expires 09/27</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quotas & Usage Chart Section -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<!-- Usage Breakdown Chart (Asymmetric) -->
|
||||
<div class="lg:col-span-3 bg-surface-container-lowest p-8 rounded-full shadow-sm">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold font-headline">Messaging Volume</h3>
|
||||
<p class="text-sm text-on-surface-variant">Daily activity over the last 30 days</p>
|
||||
</div>
|
||||
<select class="bg-surface-container-low border-none rounded-full text-sm font-medium px-4 focus:ring-primary-container">
|
||||
<option>Last 30 Days</option>
|
||||
<option>Last 3 Months</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="h-64 flex items-end justify-between space-x-2 px-2">
|
||||
<!-- Simulated Chart Bars -->
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[40%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[55%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[35%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-primary-container rounded-t-full h-[85%]"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[60%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[45%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[70%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[30%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[90%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[50%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[65%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-primary rounded-t-full h-[75%]"></div>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-between items-center pt-6 border-t border-outline-variant/10">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-primary mr-2"></span><span class="text-xs font-medium text-on-surface-variant">Inbound</span></div>
|
||||
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-primary-container mr-2"></span><span class="text-xs font-medium text-on-surface-variant">Outbound</span></div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">Avg. 1,420 msgs / day</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Usage Quotas (Vertical Stack) -->
|
||||
<div class="space-y-6">
|
||||
<!-- Messages Quota -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Messages</span>
|
||||
<span class="text-xs font-bold text-primary">72% Used</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-[72%]"></div>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-headline font-bold">36,012 <span class="text-xs font-normal text-on-surface-variant">/ 50k</span></p>
|
||||
</div>
|
||||
<!-- Seats Quota -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Team Seats</span>
|
||||
<span class="text-xs font-bold text-on-surface-variant">80% Used</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-secondary w-[80%]"></div>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-headline font-bold">12 <span class="text-xs font-normal text-on-surface-variant">/ 15</span></p>
|
||||
</div>
|
||||
<!-- Broadcasts Quota -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Broadcasts</span>
|
||||
<span class="text-xs font-bold text-error">95% Used</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error w-[95%]"></div>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-headline font-bold">19 <span class="text-xs font-normal text-on-surface-variant">/ 20</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Invoices / Billing History Section -->
|
||||
<section class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden">
|
||||
<div class="px-10 py-8 border-b border-outline-variant/10 flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold font-headline">Billing History</h3>
|
||||
<p class="text-sm text-on-surface-variant">Download and view past invoices</p>
|
||||
</div>
|
||||
<button class="flex items-center text-sm font-bold text-primary group">
|
||||
<span class="material-symbols-outlined mr-2">download</span>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto px-6 pb-6">
|
||||
<table class="w-full text-left">
|
||||
<thead>
|
||||
<tr class="text-on-surface-variant text-xs uppercase tracking-wider">
|
||||
<th class="px-4 py-6 font-bold">Invoice ID</th>
|
||||
<th class="px-4 py-6 font-bold">Date</th>
|
||||
<th class="px-4 py-6 font-bold">Amount</th>
|
||||
<th class="px-4 py-6 font-bold">Status</th>
|
||||
<th class="px-4 py-6 text-right font-bold">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/5">
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-4 py-5 font-bold text-sm">#INV-2024-009</td>
|
||||
<td class="px-4 py-5 text-sm text-on-surface-variant">Oct 24, 2024</td>
|
||||
<td class="px-4 py-5 font-bold text-sm">$1,490.00</td>
|
||||
<td class="px-4 py-5">
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-[10px] font-black rounded-full">PAID</span>
|
||||
</td>
|
||||
<td class="px-4 py-5 text-right">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">description</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors">
|
||||
<td class="px-4 py-5 font-bold text-sm">#INV-2023-008</td>
|
||||
<td class="px-4 py-5 text-sm text-on-surface-variant">Oct 24, 2023</td>
|
||||
<td class="px-4 py-5 font-bold text-sm">$1,490.00</td>
|
||||
<td class="px-4 py-5">
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-[10px] font-black rounded-full">PAID</span>
|
||||
</td>
|
||||
<td class="px-4 py-5 text-right">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">description</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors">
|
||||
<td class="px-4 py-5 font-bold text-sm">#INV-2022-007</td>
|
||||
<td class="px-4 py-5 text-sm text-on-surface-variant">Oct 24, 2022</td>
|
||||
<td class="px-4 py-5 font-bold text-sm">$990.00</td>
|
||||
<td class="px-4 py-5">
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-[10px] font-black rounded-full">PAID</span>
|
||||
</td>
|
||||
<td class="px-4 py-5 text-right">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">description</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Bottom CTA Grid (Bento) -->
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="glass-panel p-10 rounded-full border border-outline-variant/10 flex items-center space-x-8 group">
|
||||
<div class="p-6 bg-tertiary-container/20 rounded-full text-tertiary">
|
||||
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">rocket_launch</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold font-headline">Need more power?</h4>
|
||||
<p class="text-on-surface-variant mt-1 text-sm">Upgrade to Enterprise for unlimited broadcasts and 24/7 dedicated support.</p>
|
||||
<a class="inline-block mt-4 text-primary font-bold text-sm border-b-2 border-primary-container hover:border-primary transition-all" href="#">Talk to Sales</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container p-10 rounded-full border border-outline-variant/10 flex items-center justify-between">
|
||||
<div>
|
||||
<h4 class="text-xl font-bold font-headline">Help Center</h4>
|
||||
<p class="text-on-surface-variant mt-1 text-sm">Have questions about your billing or usage limits?</p>
|
||||
</div>
|
||||
<button class="bg-surface-container-lowest p-4 rounded-full shadow-sm hover:shadow-md transition-all">
|
||||
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB (Hidden as per rules on detail/setting screens, but structure provided if needed) -->
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_billing_subscription/screen.png
Normal file
BIN
screen_design/zappcare_billing_subscription/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
498
screen_design/zappcare_campaign_recipients/code.html
Normal file
498
screen_design/zappcare_campaign_recipients/code.html
Normal file
@ -0,0 +1,498 @@
|
||||
<!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 Admin - Campaign Recipients</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<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"/>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
/* Architectural Glass */
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen overflow-x-hidden">
|
||||
<!-- SideNavBar Implementation -->
|
||||
<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="px-2 mb-8 flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#0c6780] to-[#87ceeb] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">health_and_safety</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] tracking-tight">ZappCare</h2>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">System Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<div class="text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 group p-3 rounded-xl flex items-center space-x-3 font-['Manrope'] font-semibold tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined">dns</span>
|
||||
<span>Infrastructure</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 group p-3 rounded-xl flex items-center space-x-3 font-['Manrope'] font-semibold tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
<span>Monitoring</span>
|
||||
</div>
|
||||
<div class="bg-[#87ceeb] text-[#005870] rounded-xl font-bold p-3 flex items-center space-x-3 font-['Manrope'] tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">support_agent</span>
|
||||
<span>Agents</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 group p-3 rounded-xl flex items-center space-x-3 font-['Manrope'] font-semibold tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined">domain</span>
|
||||
<span>Tenants</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 group p-3 rounded-xl flex items-center space-x-3 font-['Manrope'] font-semibold tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined">monitor_heart</span>
|
||||
<span>Health</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 group p-3 rounded-xl flex items-center space-x-3 font-['Manrope'] font-semibold tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined">terminal</span>
|
||||
<span>Logs</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="pt-4 border-t border-slate-200/30">
|
||||
<div class="text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 group p-3 rounded-xl flex items-center space-x-3 font-['Manrope'] font-semibold tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-200 group p-3 rounded-xl flex items-center space-x-3 font-['Manrope'] font-semibold tracking-tight cursor-pointer">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
<span>Support</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Implementation -->
|
||||
<header class="fixed top-0 right-0 left-64 h-16 bg-[#f7f9fc]/90 dark:bg-slate-950/90 backdrop-blur-md z-40 flex items-center justify-between px-8 w-full transition-all duration-200">
|
||||
<div class="flex items-center space-x-8">
|
||||
<div class="relative flex items-center">
|
||||
<span class="material-symbols-outlined absolute left-3 text-slate-400 text-sm">search</span>
|
||||
<input class="bg-surface-container-high/50 border-none rounded-full pl-10 pr-4 py-2 text-sm w-80 focus:ring-2 focus:ring-primary-container outline-none transition-all" placeholder="Search campaign recipients..." type="text"/>
|
||||
</div>
|
||||
<nav class="hidden md:flex items-center space-x-6">
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Dashboard</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Metrics</a>
|
||||
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1 font-['Inter'] text-sm font-medium" href="#">Reports</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex items-center space-x-2 text-[#0c6780] font-bold px-4 py-1.5 rounded-full bg-primary-container/20 cursor-pointer">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span class="text-sm">System Status</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="material-symbols-outlined text-slate-600 cursor-pointer hover:opacity-80">notifications</span>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden border-2 border-primary-container">
|
||||
<img alt="ZappCare Admin" class="w-full h-full object-cover" data-alt="professional headshot of a smiling system administrator in a well-lit modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAN-LkqI7JR52fKQSZI2AFWnRoHTHld4Ris0vFGuW2BenL6M0tmNCsBYCIBQMC_5KHkN9j2txHZCkS52v1_vj7sqz8CiRyni9CJC_-5AdmejnpW1Ep9p8Rfqo7Gb6UbcF2f43RNJ5irP6jl_1Wg3hpgtiw5IJdxvipkLmPRPVHstPcehYRnk-HmlD5QyYHnIPktcVJqQhfCn9TE-6Dy4wGrPRG9PRWMIfDoQaD3bGGEuUEjf62XruZNJljH5eHGRfSs-YPTCqYPYbc"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 pt-24 pb-12 px-8 min-h-screen">
|
||||
<!-- Header & Breadcrumbs -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center space-x-2 text-sm text-outline mb-2">
|
||||
<span>Campaigns</span>
|
||||
<span class="material-symbols-outlined text-xs">chevron_right</span>
|
||||
<span>Quarterly Wellness Update</span>
|
||||
<span class="material-symbols-outlined text-xs">chevron_right</span>
|
||||
<span class="text-on-surface font-semibold">Recipients</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold text-on-surface tracking-tight mb-2">Campaign Recipients</h1>
|
||||
<p class="text-on-surface-variant max-w-2xl">Viewing 2,482 delivery logs for the <span class="font-bold text-primary">"Quarterly Wellness Update"</span> campaign dispatched on Oct 12, 2023.</p>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button class="flex items-center space-x-2 bg-surface-container-lowest text-primary px-4 py-2.5 rounded-xl font-semibold shadow-sm hover:bg-surface-container transition-colors border border-outline-variant/15">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
<span>Export CSV</span>
|
||||
</button>
|
||||
<button class="flex items-center space-x-2 bg-gradient-to-br from-primary to-primary-container text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] transition-transform duration-200">
|
||||
<span class="material-symbols-outlined">refresh</span>
|
||||
<span>Refresh Stats</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Stats Grid -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-none border border-outline-variant/10 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-outline text-sm font-medium">Total Sent</span>
|
||||
<span class="material-symbols-outlined text-primary">outbox</span>
|
||||
</div>
|
||||
<span class="text-3xl font-black text-on-surface">2,482</span>
|
||||
<div class="mt-2 text-xs text-emerald-600 font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1">trending_up</span>
|
||||
100% of target
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-none border border-outline-variant/10 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-outline text-sm font-medium">Delivered</span>
|
||||
<span class="material-symbols-outlined text-secondary">check_circle</span>
|
||||
</div>
|
||||
<span class="text-3xl font-black text-on-surface">2,401</span>
|
||||
<div class="mt-2 text-xs text-emerald-600 font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1">done_all</span>
|
||||
96.7% success
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-none border border-outline-variant/10 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-outline text-sm font-medium">Read Rate</span>
|
||||
<span class="material-symbols-outlined text-tertiary">visibility</span>
|
||||
</div>
|
||||
<span class="text-3xl font-black text-on-surface">1,894</span>
|
||||
<div class="mt-2 text-xs text-tertiary-fixed-variant font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1">open_in_new</span>
|
||||
78.8% engaged
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-none border border-outline-variant/10 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-outline text-sm font-medium">Failed</span>
|
||||
<span class="material-symbols-outlined text-error">error</span>
|
||||
</div>
|
||||
<span class="text-3xl font-black text-on-surface">81</span>
|
||||
<div class="mt-2 text-xs text-error font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1">warning</span>
|
||||
3.3% error rate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Bar -->
|
||||
<div class="bg-surface-container-low/50 p-3 rounded-full mb-6 flex items-center justify-between px-6">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-sm font-bold text-on-surface-variant">Filter by:</span>
|
||||
<div class="flex bg-surface-container rounded-lg p-1">
|
||||
<button class="px-4 py-1 text-xs font-bold bg-white text-primary rounded-md shadow-sm">All</button>
|
||||
<button class="px-4 py-1 text-xs font-semibold text-outline hover:text-on-surface transition-colors">Read</button>
|
||||
<button class="px-4 py-1 text-xs font-semibold text-outline hover:text-on-surface transition-colors">Delivered</button>
|
||||
<button class="px-4 py-1 text-xs font-semibold text-outline hover:text-on-surface transition-colors">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-6 w-[1px] bg-outline-variant/30"></div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="text-sm font-bold text-on-surface-variant">Sort:</span>
|
||||
<select class="bg-transparent border-none text-xs font-bold text-primary focus:ring-0 cursor-pointer">
|
||||
<option>Newest First</option>
|
||||
<option>Oldest First</option>
|
||||
<option>Alphabetical (A-Z)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs font-medium text-outline">
|
||||
Showing 1-15 of 2,482 recipients
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recipients Table Container (Architectural Shadowless List) -->
|
||||
<div class="bg-surface-container-lowest rounded-full overflow-hidden border border-outline-variant/10">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low/30 border-b border-outline-variant/10">
|
||||
<th class="px-8 py-5 text-sm font-black text-on-surface tracking-tight uppercase tracking-wider">Contact Name</th>
|
||||
<th class="px-8 py-5 text-sm font-black text-on-surface tracking-tight uppercase tracking-wider">Phone</th>
|
||||
<th class="px-8 py-5 text-sm font-black text-on-surface tracking-tight uppercase tracking-wider">Status</th>
|
||||
<th class="px-8 py-5 text-sm font-black text-on-surface tracking-tight uppercase tracking-wider">Timestamp</th>
|
||||
<th class="px-8 py-5 text-sm font-black text-on-surface tracking-tight text-right uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/5">
|
||||
<!-- Row 1 -->
|
||||
<tr class="group hover:bg-surface-container-low/20 transition-all duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-full bg-primary-container/30 flex items-center justify-center text-primary font-bold">SM</div>
|
||||
<span class="font-bold text-on-surface">Sarah Mitchell</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant font-mono text-sm">+1 (555) 012-3456</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-tertiary-container/30 text-on-tertiary-container">
|
||||
<span class="material-symbols-outlined text-xs mr-1" style="font-variation-settings: 'FILL' 1;">visibility</span>
|
||||
Read
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant text-sm">Oct 12, 2023 • 09:12 AM</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 rounded-xl hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="group hover:bg-surface-container-low/20 transition-all duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-full bg-secondary-container/30 flex items-center justify-center text-secondary font-bold">DR</div>
|
||||
<span class="font-bold text-on-surface">David Rodriguez</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant font-mono text-sm">+1 (555) 987-6543</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-secondary-container/30 text-on-secondary-container">
|
||||
<span class="material-symbols-outlined text-xs mr-1" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Delivered
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant text-sm">Oct 12, 2023 • 09:15 AM</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 rounded-xl hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="group hover:bg-surface-container-low/20 transition-all duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-full bg-error-container/30 flex items-center justify-center text-error font-bold">JL</div>
|
||||
<span class="font-bold text-on-surface">James Lawrence</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant font-mono text-sm">+44 20 7946 0123</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-error-container text-on-error-container">
|
||||
<span class="material-symbols-outlined text-xs mr-1" style="font-variation-settings: 'FILL' 1;">error</span>
|
||||
Failed
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant text-sm">Oct 12, 2023 • 09:08 AM</td>
|
||||
<td class="px-8 py-4 text-right flex items-center justify-end space-x-2">
|
||||
<span class="text-[10px] text-error font-bold bg-error-container/20 px-2 py-0.5 rounded">Invalid Number</span>
|
||||
<button class="p-2 rounded-xl hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="group hover:bg-surface-container-low/20 transition-all duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-full bg-primary-container/30 flex items-center justify-center text-primary font-bold">EK</div>
|
||||
<span class="font-bold text-on-surface">Emma Kowalski</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant font-mono text-sm">+49 152 555 1234</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-tertiary-container/30 text-on-tertiary-container">
|
||||
<span class="material-symbols-outlined text-xs mr-1" style="font-variation-settings: 'FILL' 1;">visibility</span>
|
||||
Read
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant text-sm">Oct 12, 2023 • 10:45 AM</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 rounded-xl hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="group hover:bg-surface-container-low/20 transition-all duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-full bg-slate-200 flex items-center justify-center text-slate-500 font-bold">AT</div>
|
||||
<span class="font-bold text-on-surface">Alex Thompson</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant font-mono text-sm">+1 (555) 234-5678</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-primary-container/20 text-on-primary-container">
|
||||
<span class="material-symbols-outlined text-xs mr-1" style="font-variation-settings: 'FILL' 1;">outbox</span>
|
||||
Sent
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant text-sm">Oct 12, 2023 • 09:05 AM</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 rounded-xl hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 6 -->
|
||||
<tr class="group hover:bg-surface-container-low/20 transition-all duration-200">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-full bg-secondary-container/30 flex items-center justify-center text-secondary font-bold">MW</div>
|
||||
<span class="font-bold text-on-surface">Maya Williams</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant font-mono text-sm">+1 (555) 456-7890</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-tertiary-container/30 text-on-tertiary-container">
|
||||
<span class="material-symbols-outlined text-xs mr-1" style="font-variation-settings: 'FILL' 1;">visibility</span>
|
||||
Read
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-on-surface-variant text-sm">Oct 12, 2023 • 11:22 AM</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 rounded-xl hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Pagination -->
|
||||
<div class="px-8 py-6 bg-surface-container-low/30 flex items-center justify-between">
|
||||
<div class="text-sm text-outline font-medium">
|
||||
Showing 1 to 15 of 2,482 entries
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 rounded-lg border border-outline-variant/20 text-outline hover:bg-surface-container-highest transition-colors disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 rounded-lg bg-primary text-white font-bold text-sm shadow-md shadow-primary/20">1</button>
|
||||
<button class="w-10 h-10 rounded-lg text-on-surface-variant font-bold text-sm hover:bg-surface-container-highest transition-colors">2</button>
|
||||
<button class="w-10 h-10 rounded-lg text-on-surface-variant font-bold text-sm hover:bg-surface-container-highest transition-colors">3</button>
|
||||
<span class="text-outline px-2">...</span>
|
||||
<button class="w-10 h-10 rounded-lg text-on-surface-variant font-bold text-sm hover:bg-surface-container-highest transition-colors">166</button>
|
||||
<button class="p-2 rounded-lg border border-outline-variant/20 text-outline hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Information Section (Bento Style) -->
|
||||
<div class="grid grid-cols-3 gap-8 mt-12">
|
||||
<div class="col-span-2 bg-surface-container-low p-8 rounded-full">
|
||||
<h3 class="text-xl font-bold text-on-surface mb-6 flex items-center space-x-2">
|
||||
<span class="material-symbols-outlined text-primary">analytics</span>
|
||||
<span>Campaign Delivery Timeline</span>
|
||||
</h3>
|
||||
<div class="h-48 w-full flex items-end justify-between space-x-2 px-4">
|
||||
<!-- Simple Bar Chart Visualization -->
|
||||
<div class="flex-1 bg-primary/20 rounded-t-xl h-[40%] group relative">
|
||||
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">412</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-primary/40 rounded-t-xl h-[65%] group relative">
|
||||
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">890</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-primary/60 rounded-t-xl h-[95%] group relative">
|
||||
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">1240</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-primary/80 rounded-t-xl h-[80%] group relative">
|
||||
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">1020</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-primary rounded-t-xl h-[55%] group relative">
|
||||
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">680</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-primary/60 rounded-t-xl h-[30%] group relative"></div>
|
||||
<div class="flex-1 bg-primary/30 rounded-t-xl h-[15%] group relative"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-4 px-4 text-[10px] font-bold text-outline uppercase tracking-widest">
|
||||
<span>09:00 AM</span>
|
||||
<span>10:00 AM</span>
|
||||
<span>11:00 AM</span>
|
||||
<span>12:00 PM</span>
|
||||
<span>01:00 PM</span>
|
||||
<span>02:00 PM</span>
|
||||
<span>03:00 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-primary to-primary-container p-8 rounded-full text-white relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-xl font-bold mb-4">Error Resolution</h3>
|
||||
<p class="text-sm opacity-90 mb-6">We detected 81 failures due to invalid phone numbers or carrier blocks.</p>
|
||||
<button class="w-full bg-white text-primary font-black py-3 rounded-xl shadow-lg shadow-black/10 hover:bg-surface-bright transition-colors">
|
||||
Re-target via Email
|
||||
</button>
|
||||
<button class="w-full mt-3 bg-transparent border border-white/30 text-white font-bold py-3 rounded-xl hover:bg-white/10 transition-colors">
|
||||
Download Error Log
|
||||
</button>
|
||||
</div>
|
||||
<!-- Abstract visual element -->
|
||||
<div class="absolute -bottom-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute top-10 -left-10 w-24 h-24 bg-white/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for quick action (Suppressed per rule on detailed lists, but adding for context if needed for new tenant) -->
|
||||
<!-- The prompt asks for recipient list, usually no FAB here based on rule "suppress on Details screens" -->
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_campaign_recipients/screen.png
Normal file
BIN
screen_design/zappcare_campaign_recipients/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
315
screen_design/zappcare_change_password/code.html
Normal file
315
screen_design/zappcare_change_password/code.html
Normal file
@ -0,0 +1,315 @@
|
||||
<!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 - Change Password</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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": {
|
||||
"background": "#f7f9fc",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"outline": "#6f787d",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"tertiary": "#865219",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780"
|
||||
},
|
||||
"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;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.tonal-architecture {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.architectural-frame {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
.architectural-frame:focus-within {
|
||||
border-bottom-color: #0c6780;
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary-container selection:text-on-primary-container">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="h-screen w-64 flex flex-col sticky left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900 tonal-architecture z-50">
|
||||
<div class="flex flex-col h-full py-8 px-4 gap-2">
|
||||
<!-- Brand Anchor -->
|
||||
<div class="flex items-center gap-3 px-3 mb-8">
|
||||
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-primary text-on-primary shadow-lg overflow-hidden">
|
||||
<img alt="ZappCare Workspace Logo" data-alt="minimalist tech logo with geometric Z and C shapes in professional blue tones on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYFLdXBkWd-cHBp_b_hCrG3ptwzmkVuZ1BgzISihsc-QOw0-8dtvf5GsBtMkj8243TopzaqdQwhMWXA2vogUr5HOU4EriYvNcAkgp5b3IYb3M-UDuWX2rvINGYvPkFxr9Ij363NqhZcM_2kMHin_4oj9Oz4BPQhmmZYFOY0aNLaccaq0xYBwEN5rzonWoN3_1sHeQwxczyWECKwthEqll9ea5loFlrMHDGiaCDvNIOdkmK1AejV2uI9ewf3ACuwDmmZslIDo3kWNY"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xl font-extrabold text-[#0c6780] dark:text-[#87ceeb] tracking-tight">ZappCare</span>
|
||||
<span class="text-[10px] font-headline font-bold uppercase tracking-widest text-on-surface-variant/60">Business HQ</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Navigation -->
|
||||
<nav class="flex-1 space-y-1">
|
||||
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
||||
<span class="font-headline font-semibold tracking-tight text-sm">Inbox</span>
|
||||
</div>
|
||||
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span class="font-headline font-semibold tracking-tight text-sm">Contacts</span>
|
||||
</div>
|
||||
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||
<span class="font-headline font-semibold tracking-tight text-sm">Campaigns</span>
|
||||
</div>
|
||||
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span>
|
||||
<span class="font-headline font-semibold tracking-tight text-sm">Automation</span>
|
||||
</div>
|
||||
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
||||
<span class="font-headline font-semibold tracking-tight text-sm">Analytics</span>
|
||||
</div>
|
||||
<!-- Active State: Settings -->
|
||||
<div class="bg-[#87ceeb] text-[#005870] rounded-xl font-bold p-3 flex items-center gap-3 transition-all duration-200 cursor-default">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-headline tracking-tight text-sm">Settings</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- CTA -->
|
||||
<button class="primary-gradient text-on-primary font-headline font-bold py-4 px-6 rounded-full shadow-lg shadow-primary/20 flex items-center justify-center gap-2 mb-6 hover:scale-[1.02] transition-transform">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="add_comment">add_comment</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
<!-- Footer Navigation -->
|
||||
<div class="pt-4 mt-auto space-y-1">
|
||||
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span class="font-headline font-semibold tracking-tight text-sm">Support</span>
|
||||
</div>
|
||||
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||||
<span class="font-headline font-semibold tracking-tight text-sm">Account</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 flex flex-col bg-background relative overflow-hidden">
|
||||
<!-- Asymmetric Background Elements -->
|
||||
<div class="absolute -top-24 -right-24 w-96 h-96 bg-primary-container/20 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-secondary-container/10 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 bg-[#f7f9fc]/85 dark:bg-slate-950/85 backdrop-blur-md shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)] flex items-center justify-between px-8">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="relative w-full max-w-md group">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline group-focus-within:text-primary transition-colors" data-icon="search">search</span>
|
||||
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-12 pr-4 text-sm font-body focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search workspace settings..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors 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"></span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-outline-variant/30"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-bold text-on-surface leading-none">Sarah Jenkins</p>
|
||||
<p class="text-[10px] text-on-surface-variant font-medium">Administrator</p>
|
||||
</div>
|
||||
<img alt="User profile" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm" data-alt="close-up portrait of a professional woman with a friendly expression in a brightly lit office setting, soft professional photography style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDLxR3bViXRY1nW4qGFpF9yo3p9rmem5PKAl9YEWtv4bPbG1cGV48znm00zAsO3GY6XMe96qnGxz7E1volUjtN9I65bwu9PWv4V6tAc7BxP-fq1ycVBrJg7oYUz1C_AIY5ByKFr3KlO-i7npwvQ9OGk1cVzV_tlsgjJdx9pte4_PGR3xCuB0ryMJZHZqZHAVu_fr1Vtpcy8YhfN_TagKsb3HT4LuacQXeI5XRI0ScMPuJHN7XL1mlWh9op-BM20aOB0lN60fayCCZE"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Scrollable Canvas -->
|
||||
<div class="flex-1 overflow-y-auto p-12">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Editorial Header -->
|
||||
<div class="mb-12">
|
||||
<nav class="flex items-center gap-2 text-xs font-bold text-outline uppercase tracking-widest mb-4">
|
||||
<a class="hover:text-primary transition-colors" href="#">Settings</a>
|
||||
<span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="text-primary">Security</span>
|
||||
</nav>
|
||||
<h1 class="text-5xl font-headline font-extrabold text-on-surface tracking-tight leading-tight">Change Password</h1>
|
||||
<p class="text-on-surface-variant text-lg mt-4 max-w-xl leading-relaxed">
|
||||
To maintain the architectural integrity of your ZappCare workspace, we recommend updating your password every 90 days.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Main Form Grid (Bento Style) -->
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<!-- Password Form Card -->
|
||||
<div class="col-span-12 lg:col-span-7 bg-surface-container-lowest rounded-full p-10 shadow-[0_8px_32px_rgba(0,0,0,0.03)] relative overflow-hidden">
|
||||
<form class="space-y-8 relative z-10">
|
||||
<div class="space-y-6">
|
||||
<!-- Current Password -->
|
||||
<div class="flex flex-col gap-2 group">
|
||||
<label class="text-xs font-bold text-on-surface-variant/70 uppercase tracking-widest ml-1">Current Password</label>
|
||||
<div class="relative architectural-frame bg-surface-container-highest/30 rounded-xl overflow-hidden focus-within:bg-white transition-all">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline/50" data-icon="lock_open">lock_open</span>
|
||||
<input class="w-full bg-transparent border-none py-4 pl-12 pr-4 font-body focus:ring-0" placeholder="••••••••••••" type="password"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[1px] bg-outline-variant/10 w-full"></div>
|
||||
<!-- New Password -->
|
||||
<div class="flex flex-col gap-2 group">
|
||||
<label class="text-xs font-bold text-on-surface-variant/70 uppercase tracking-widest ml-1">New Password</label>
|
||||
<div class="relative architectural-frame bg-surface-container-highest/30 rounded-xl overflow-hidden focus-within:bg-white transition-all">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline/50" data-icon="key">key</span>
|
||||
<input class="w-full bg-transparent border-none py-4 pl-12 pr-4 font-body focus:ring-0" placeholder="Enter new password" type="password"/>
|
||||
</div>
|
||||
<p class="text-[10px] text-outline ml-1">Minimum 12 characters, including symbols and numbers.</p>
|
||||
</div>
|
||||
<!-- Confirm Password -->
|
||||
<div class="flex flex-col gap-2 group">
|
||||
<label class="text-xs font-bold text-on-surface-variant/70 uppercase tracking-widest ml-1">Confirm New Password</label>
|
||||
<div class="relative architectural-frame bg-surface-container-highest/30 rounded-xl overflow-hidden focus-within:bg-white transition-all">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline/50" data-icon="verified_user">verified_user</span>
|
||||
<input class="w-full bg-transparent border-none py-4 pl-12 pr-4 font-body focus:ring-0" placeholder="Repeat new password" type="password"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 flex items-center justify-between">
|
||||
<button class="text-sm font-bold text-on-surface-variant hover:text-error transition-colors px-6 py-4 rounded-xl hover:bg-error-container/20" type="button">
|
||||
Reset Form
|
||||
</button>
|
||||
<button class="primary-gradient text-on-primary font-headline font-bold py-4 px-10 rounded-full shadow-xl shadow-primary/25 flex items-center gap-3 hover:scale-105 active:scale-95 transition-all" type="submit">
|
||||
<span>Update Password</span>
|
||||
<span class="material-symbols-outlined" data-icon="shield_lock">shield_lock</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Sidebar Info Cards (Asymmetric Layout) -->
|
||||
<div class="col-span-12 lg:col-span-5 flex flex-col gap-6">
|
||||
<!-- Security Status -->
|
||||
<div class="bg-surface-container-low rounded-full p-8 border-l-4 border-primary/40">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="bg-primary-container p-3 rounded-full">
|
||||
<span class="material-symbols-outlined text-[#005870]" data-icon="security" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-on-surface uppercase tracking-tight">Account Security Status</h3>
|
||||
<p class="text-xs text-on-surface-variant mt-1">Last changed 4 months ago. Your current password strength is <span class="text-primary font-bold">Medium</span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visual Decoration / Image -->
|
||||
<div class="relative group h-48 rounded-full overflow-hidden shadow-lg">
|
||||
<img alt="Cybersecurity" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="abstract close-up of high-tech server cooling fans and glowing blue light circuits in a dark clean data center environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDeOnYlVRyfIhwk9Bu4DxJz9ZHfL014epdC55q-2cqY5-FaqUCUoQtYChKC00ZRjA3bxFyYkQn4Frf2CCGJ0j7DYFizWGy4vL6dPYUri_A4JsWK8kLZS_QlDcEuQHncKB0k9QAxUIL536tHjkqm8gtwlEJH9xDs8ephBuhU0tPJFZBN4RvQbRSdNR2131QeXSAZ_7HS2AZMxhN0o2oIK0O3k61sftsQkjqLa-k3OL5d_30gIdNkZu-ExUHluCz_QXq3INOsFTkaAUQ"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-[#0c6780]/80 to-transparent flex flex-col justify-end p-6">
|
||||
<span class="text-xs font-bold text-white uppercase tracking-widest opacity-80">ZappCare Security</span>
|
||||
<h4 class="text-white font-headline font-bold">End-to-End Encryption Enabled</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="bg-white/40 backdrop-blur-sm rounded-full p-8 border border-white/60">
|
||||
<h4 class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-4 ml-1">Related Settings</h4>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<a class="flex items-center justify-between text-sm text-on-surface hover:text-primary transition-colors group" href="#">
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary" data-icon="phonelink_lock">phonelink_lock</span>
|
||||
Two-Factor Authentication
|
||||
</span>
|
||||
<span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center justify-between text-sm text-on-surface hover:text-primary transition-colors group" href="#">
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary" data-icon="devices">devices</span>
|
||||
Logged-in Devices
|
||||
</span>
|
||||
<span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Glass Rail (Floating Help) -->
|
||||
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
|
||||
<button class="w-14 h-14 rounded-full bg-white/85 backdrop-blur-md shadow-2xl flex items-center justify-center text-primary hover:scale-110 transition-transform duration-200">
|
||||
<span class="material-symbols-outlined text-2xl" data-icon="chat_bubble">chat_bubble</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_change_password/screen.png
Normal file
BIN
screen_design/zappcare_change_password/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
459
screen_design/zappcare_channel_health_detail/code.html
Normal file
459
screen_design/zappcare_channel_health_detail/code.html
Normal file
@ -0,0 +1,459 @@
|
||||
<!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>
|
||||
BIN
screen_design/zappcare_channel_health_detail/screen.png
Normal file
BIN
screen_design/zappcare_channel_health_detail/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
155
screen_design/zappcare_check_your_email/code.html
Normal file
155
screen_design/zappcare_check_your_email/code.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-fixed": "#baeaff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary": "#865219",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary-container": "#87ceeb",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-secondary-container": "#36647e",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-background": "#191c1e",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container": "#eceef0",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"error": "#ba1a1a",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-error": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"primary": "#0c6780",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"background": "#f7f9fc",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-container": "#005870",
|
||||
"tertiary-container": "#fbb674",
|
||||
"surface": "#f7f9fc",
|
||||
"on-tertiary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface min-h-screen flex flex-col items-center justify-center relative overflow-hidden">
|
||||
<!-- Architectural Background Elements -->
|
||||
<div class="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
|
||||
<div class="absolute top-[-10%] left-[-5%] w-[40%] h-[60%] bg-primary-fixed/20 rounded-full blur-[120px]"></div>
|
||||
<div class="absolute bottom-[-10%] right-[-5%] w-[40%] h-[60%] bg-secondary-fixed/20 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
<!-- Success Screen Container -->
|
||||
<main class="z-10 w-full max-w-xl px-6 py-12 flex flex-col items-center text-center">
|
||||
<!-- Logo Section -->
|
||||
<div class="mb-12">
|
||||
<img alt="ZappCare Logo" class="h-10 w-auto" data-alt="minimalist abstract geometric logo for ZappCare in professional shades of blue on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDVIQMFmCfXNIpGefIbM9oVgaW5EENddsWhvhLUabNoZwayYLDpqvtgGk9KGvdYnqZmi1EGw2i_DDM4e-zovISR9e7u6r9b2qxqdouotsPlWYTpzPaORg4MUO0BhQ3laFTX-K-NK0BHamg9hU-wIYqti4PYDPM0Y8_ZsTk3GgWIIPCJ1_eT0EIgJDuQmMj2ilEh62NQ6NyQg9aKry8bdjf9jIiyjVqEhQJoPY5J-b8wA_lEktDzS0aFb0t3wpsn8YV7KvVUaO0qQd0"/>
|
||||
<h1 class="mt-4 font-headline text-2xl font-black text-primary tracking-tighter uppercase">ZappCare</h1>
|
||||
</div>
|
||||
<!-- Tonal Architecture Card -->
|
||||
<div class="w-full bg-surface-container-lowest rounded-full p-12 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.06)] border border-outline-variant/15 flex flex-col items-center">
|
||||
<!-- Icon/Visual Header -->
|
||||
<div class="relative mb-10">
|
||||
<!-- Decorative Circle -->
|
||||
<div class="absolute inset-0 bg-primary-container/30 rounded-full scale-150 blur-xl"></div>
|
||||
<!-- Main Icon Container -->
|
||||
<div class="relative w-24 h-24 primary-gradient rounded-full flex items-center justify-center text-white shadow-lg">
|
||||
<span class="material-symbols-outlined text-5xl" style="font-variation-settings: 'FILL' 1;">mark_email_read</span>
|
||||
</div>
|
||||
<!-- Flying Accents -->
|
||||
<div class="absolute -top-2 -right-4 w-8 h-8 bg-secondary-container rounded-full flex items-center justify-center text-on-secondary-container shadow-md">
|
||||
<span class="material-symbols-outlined text-sm">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<h2 class="font-headline text-4xl font-extrabold text-on-surface tracking-tight mb-4">Check Your Email</h2>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed max-w-md mb-10 font-body">
|
||||
We’ve sent a password reset link to your inbox. Please follow the instructions in the email to reset your password.
|
||||
</p>
|
||||
<!-- Primary Action -->
|
||||
<a class="primary-gradient text-white font-headline font-bold py-4 px-10 rounded-full shadow-md transition-all duration-200 hover:scale-[1.02] active:scale-95 flex items-center gap-2 group" href="#">
|
||||
Open Mail App
|
||||
<span class="material-symbols-outlined transition-transform duration-200 group-hover:translate-x-1">open_in_new</span>
|
||||
</a>
|
||||
<!-- Secondary Info -->
|
||||
<div class="mt-8 pt-8 border-t border-outline-variant/15 w-full flex flex-col items-center gap-4">
|
||||
<p class="text-sm text-on-surface-variant">
|
||||
Didn't receive the email?
|
||||
<a class="text-primary font-semibold hover:underline transition-all duration-200" href="#">Resend Email</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer / Back to Login -->
|
||||
<div class="mt-10">
|
||||
<a class="flex items-center gap-2 text-on-surface-variant font-medium hover:text-primary transition-colors duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined text-xl transition-transform duration-200 group-hover:-translate-x-1">arrow_back</span>
|
||||
Back to Login
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Shell from JSON (Adapted for transaction context) -->
|
||||
<footer class="mt-auto w-full py-8 flex flex-col items-center gap-2 opacity-50 font-body text-xs text-slate-500">
|
||||
<div class="flex gap-6 mb-2">
|
||||
<a class="hover:text-primary transition-colors duration-200" href="#">Privacy Policy</a>
|
||||
<a class="hover:text-primary transition-colors duration-200" href="#">Terms of Service</a>
|
||||
<a class="hover:text-primary transition-colors duration-200" href="#">Support</a>
|
||||
</div>
|
||||
<p>© 2024 ZappCare. Built with Tonal Architecture.</p>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_check_your_email/screen.png
Normal file
BIN
screen_design/zappcare_check_your_email/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
329
screen_design/zappcare_create_template_request/code.html
Normal file
329
screen_design/zappcare_create_template_request/code.html
Normal file
@ -0,0 +1,329 @@
|
||||
<!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 - Create Template</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": {
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"tertiary": "#865219",
|
||||
"on-primary-container": "#005870",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-surface": "#191c1e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-background": "#191c1e",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"primary-container": "#87ceeb",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"primary": "#0c6780",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"secondary": "#35637d",
|
||||
"primary-fixed": "#baeaff"
|
||||
},
|
||||
"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
|
||||
}
|
||||
.whatsapp-bg {
|
||||
background-color: #e5ddd5;
|
||||
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDfL7PcPkN70760n-t_vFNqauujQSzU8hCEufKv0_ZJjHOTugNyMjk9tVNREZzjiLuLnDR65NWavSgdqOYTZbFGlJ42i-abzEeQGOipBlW8ROB35hHmhvZk0O774ked8U-IfWmBrm94MrDv1je_8sRFPGCywvbXXTcIdWrjvp4x3H-g6sB_VTQwY0d-SKh14cmBPABvZMbn-Z7E8AznrgmcSbo13-T5DkVHbKKlhUCGXx4oOUWJRsjKpt7xgziFP3XPwJPHgI31rK8)
|
||||
}</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface antialiased flex h-screen overflow-hidden">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="h-screen w-72 flex-shrink-0 sticky left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900/80 backdrop-blur-xl shadow-[24px_0_24px_-4px_rgba(25,28,30,0.04)] flex flex-col p-4 gap-2 z-50">
|
||||
<div class="mb-6 px-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
||||
<span class="material-symbols-outlined">shield_person</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-sm font-bold font-headline leading-tight text-on-surface">Client Settings</h2>
|
||||
<p class="text-[10px] text-slate-500 uppercase tracking-wider">Manage workspace configurations</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<!-- Navigation Items -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="schedule">schedule</span>
|
||||
<span class="font-medium text-sm">Business Hours</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="rule">rule</span>
|
||||
<span class="font-medium text-sm">Auto-Assignment</span>
|
||||
</a>
|
||||
<!-- Active State: Templates -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-[#87ceeb] text-[#005870] rounded-xl font-bold transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="font-medium text-sm">Templates</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span class="font-medium text-sm">Team Members</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
<span class="font-medium text-sm">Integrations</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="history">history</span>
|
||||
<span class="font-medium text-sm">Audit Logs</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 flex flex-col gap-1">
|
||||
<button class="mb-4 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl py-3 px-4 font-bold text-sm shadow-lg shadow-primary/20 flex items-center justify-center gap-2 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">add</span>
|
||||
New Template
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="support_agent">support_agent</span>
|
||||
<span class="font-medium text-sm">Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span class="font-medium text-sm">Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Workspace -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full top-0 sticky flex justify-between items-center px-6 py-3 bg-[#f7f9fc] dark:bg-slate-900 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-xl font-bold text-[#0c6780] font-headline tracking-tight">ZappCare</h1>
|
||||
<div class="h-6 w-[1px] bg-outline-variant/30"></div>
|
||||
<nav class="hidden md:flex gap-6">
|
||||
<a class="text-sm font-semibold text-[#0c6780] border-b-2 border-[#0c6780] pb-1" href="#">Templates</a>
|
||||
<a class="text-sm font-semibold text-slate-500 hover:text-[#0c6780] transition-colors duration-200 pb-1" href="#">Campaigns</a>
|
||||
<a class="text-sm font-semibold text-slate-500 hover:text-[#0c6780] transition-colors duration-200 pb-1" href="#">Analytics</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative hidden sm:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
|
||||
<input class="bg-surface-container-low border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary-container w-64" placeholder="Search templates..." type="text"/>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
</button>
|
||||
<img alt="Admin Profile" class="w-8 h-8 rounded-full object-cover ring-2 ring-primary-container/20" data-alt="Professional portrait of a male corporate administrator with a confident smile and modern office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxbC-e_K_xMZkJ2jn2-UoXvbJt1omKIC6zocRoX2lC8CWnAy7q4u5hAd0B2jLMnBcGcpW438v-I8LWPEaNfRRYCN4DPzJeXFp9Uq0LcjyCC_5pRi7OLUELxqaNVPw9Wcm0MKI6wC9Ngob0LYpV6Ei3YLKwoW1VwTn_sIPfRDg3sHxFfS-m3WJuATA3AFM0VtG9XIuzj8QNDkYS1U6RuTfB9V6VgiHZJ-QS9xtU_Wz0UxaoIeaUACUREyzoPCqku6DdNwY7ZMhOR9M"/>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<main class="flex-1 overflow-y-auto p-8 flex flex-col gap-8">
|
||||
<header class="flex justify-between items-end">
|
||||
<div>
|
||||
<nav class="flex items-center gap-2 text-sm text-slate-500 mb-2">
|
||||
<span>Templates</span>
|
||||
<span class="material-symbols-outlined text-xs">chevron_right</span>
|
||||
<span class="text-on-surface">Create Template Request</span>
|
||||
</nav>
|
||||
<h2 class="text-3xl font-extrabold font-headline tracking-tight text-on-surface">Create Template Request</h2>
|
||||
<p class="text-slate-500 max-w-lg mt-2">Design and submit your WhatsApp message template for approval. Follow Meta's quality guidelines to ensure quick validation.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-6 py-2.5 rounded-xl border border-outline-variant/30 text-slate-600 font-semibold hover:bg-slate-100 transition-colors">Save Draft</button>
|
||||
<button class="px-8 py-2.5 rounded-xl bg-gradient-to-r from-primary to-primary-container text-white font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">Submit for Review</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Layout Grid -->
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<!-- Form Column -->
|
||||
<div class="col-span-12 lg:col-span-7 flex flex-col gap-6">
|
||||
<!-- Basic Information Section -->
|
||||
<section class="bg-surface-container-lowest p-8 rounded-3xl shadow-sm space-y-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="w-8 h-8 rounded-lg bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
||||
<span class="material-symbols-outlined text-lg">info</span>
|
||||
</span>
|
||||
<h3 class="text-lg font-bold font-headline">Basic Information</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Template Name</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white transition-all" placeholder="e.g. appointment_reminder_v1" type="text"/>
|
||||
<p class="text-[11px] text-slate-400 italic">Use lowercase letters, numbers, and underscores only.</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Category</label>
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary">
|
||||
<option>Marketing</option>
|
||||
<option>Utility</option>
|
||||
<option>Authentication</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Language</label>
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary">
|
||||
<option>English (US)</option>
|
||||
<option>Spanish (ES)</option>
|
||||
<option>Portuguese (BR)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Header Type</label>
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary">
|
||||
<option>None</option>
|
||||
<option>Text</option>
|
||||
<option>Image</option>
|
||||
<option>Video</option>
|
||||
<option>Document</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Content Section -->
|
||||
<section class="bg-surface-container-lowest p-8 rounded-3xl shadow-sm space-y-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="w-8 h-8 rounded-lg bg-tertiary-container flex items-center justify-center text-on-tertiary-container">
|
||||
<span class="material-symbols-outlined text-lg">edit_note</span>
|
||||
</span>
|
||||
<h3 class="text-lg font-bold font-headline">Message Content</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<label class="text-sm font-semibold text-slate-700">Body Text</label>
|
||||
<button class="text-[11px] font-bold text-primary flex items-center gap-1 hover:underline">
|
||||
<span class="material-symbols-outlined text-xs">add_circle</span> Add Variable {{1}}
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white transition-all resize-none" placeholder="Enter message body here..." rows="6">Hello {{1}}! This is a reminder for your appointment on {{2}} at {{3}}. We look forward to seeing you!</textarea>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Footer Text (Optional)</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white transition-all" placeholder="e.g. Reply STOP to opt out" type="text"/>
|
||||
</div>
|
||||
<div class="space-y-2 pt-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Buttons (Optional)</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg text-slate-600 text-xs font-bold border border-dashed border-slate-300 hover:border-primary hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm">call</span> Call to Action
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg text-slate-600 text-xs font-bold border border-dashed border-slate-300 hover:border-primary hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm">reply</span> Quick Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Preview Column -->
|
||||
<div class="col-span-12 lg:col-span-5">
|
||||
<div class="sticky top-8 space-y-4">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Live Preview</h3>
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 text-[10px] font-bold rounded uppercase">WhatsApp Business</span>
|
||||
</div>
|
||||
<div class="aspect-[9/16] max-w-[340px] mx-auto whatsapp-bg rounded-[3rem] p-4 shadow-2xl relative border-[8px] border-slate-800 overflow-hidden">
|
||||
<!-- Phone Top Bar -->
|
||||
<div class="flex justify-between items-center px-4 pt-4 pb-6">
|
||||
<span class="text-[10px] font-bold text-slate-600">9:41</span>
|
||||
<div class="flex gap-1 items-center">
|
||||
<span class="material-symbols-outlined text-[10px]">signal_cellular_alt</span>
|
||||
<span class="material-symbols-outlined text-[10px]">wifi</span>
|
||||
<span class="material-symbols-outlined text-[10px]">battery_full</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WhatsApp Header -->
|
||||
<div class="bg-[#075e54] text-white p-3 -mx-4 -mt-2 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-300 flex-shrink-0">
|
||||
<img alt="Profile" class="w-full h-full rounded-full object-cover" data-alt="Minimalist company logo with geometric shapes and professional blue and white color scheme on circular background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9xxj_JdhwqnbQDS5iPAgy0oDQjLw6jujdPu5EkXsY4DcFyP8ZMp5hK49EfhUZmo5g6wb5qu2mzOCO9US-nYkNItVhwR9-b3yy5TgdzX7Xn0NkqSj8CuU06RsezLi8lMU3nm_6Y4RxyZgKJL5TpQ2FIqIV8HhTLmbaXjjnFz7Jjh1K67JgvEOI1zBSLbq9Qk5o8AgVpkTjX8rGSmyupmEcVkkfZGyF1tD4yGX5zOqQ_Ljl3EY6xrKTmPuy4TSopjkD1btXIIfuoEQ"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">ZappCare Support</p>
|
||||
<p class="text-[10px] opacity-80">Online</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</div>
|
||||
<!-- Chat Area -->
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="bg-white rounded-xl rounded-tl-none p-3 shadow-sm max-w-[85%] relative">
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs text-slate-800">Hello <span class="text-primary font-bold">[Customer Name]</span>! This is a reminder for your appointment on <span class="text-primary font-bold">[Date]</span> at <span class="text-primary font-bold">[Time]</span>. We look forward to seeing you!</p>
|
||||
<p class="text-[10px] text-slate-400 italic">Reply STOP to opt out</p>
|
||||
</div>
|
||||
<div class="absolute bottom-1 right-2 flex items-center gap-1">
|
||||
<span class="text-[8px] text-slate-400">10:42 AM</span>
|
||||
<span class="material-symbols-outlined text-[10px] text-blue-400">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phone Bottom Indicator -->
|
||||
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-slate-800 rounded-full"></div>
|
||||
</div>
|
||||
<!-- Tip Box -->
|
||||
<div class="bg-[#87ceeb]/10 border border-[#87ceeb]/20 p-4 rounded-2xl flex gap-3">
|
||||
<span class="material-symbols-outlined text-primary">lightbulb</span>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-on-primary-container">Pro Tip</h4>
|
||||
<p class="text-[11px] text-slate-600 mt-1 leading-relaxed">Templates with higher personalization variables ({{1}}, {{2}}) typically see 40% higher engagement rates in WhatsApp Business campaigns.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_create_template_request/screen.png
Normal file
BIN
screen_design/zappcare_create_template_request/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
357
screen_design/zappcare_create_tenant/code.html
Normal file
357
screen_design/zappcare_create_tenant/code.html
Normal file
@ -0,0 +1,357 @@
|
||||
<!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 - Create Tenant</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<!-- Google Fonts: Manrope & Inter -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<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>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, .brand-font { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
/* Custom scrollbar for clean UI */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #e0e3e5; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- SideNavBar (from JSON) -->
|
||||
<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-8 h-8 rounded-full bg-gradient-to-tr from-primary to-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary text-lg" data-icon="hub">hub</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] tracking-tight">ZappCare</span>
|
||||
<span class="text-[10px] font-semibold text-slate-500 uppercase tracking-widest">System Admin</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Infrastructure -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dns">dns</span>
|
||||
<span>Infrastructure</span>
|
||||
</a>
|
||||
<!-- Monitoring -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
|
||||
<span>Monitoring</span>
|
||||
</a>
|
||||
<!-- Agents -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="support_agent">support_agent</span>
|
||||
<span>Agents</span>
|
||||
</a>
|
||||
<!-- Tenants (ACTIVE) -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-[#87ceeb] text-[#005870] rounded-xl font-bold transition-all duration-200 scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||||
<span>Tenants</span>
|
||||
</a>
|
||||
<!-- Health -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitor_heart">monitor_heart</span>
|
||||
<span>Health</span>
|
||||
</a>
|
||||
<!-- Logs -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
|
||||
<span>Logs</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-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-3 py-2 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-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-3 px-3 py-4 mt-2 border-t border-slate-200/50">
|
||||
<img alt="ZappCare Admin" class="w-10 h-10 rounded-full object-cover shadow-sm" data-alt="Professional portrait of a male corporate administrator with friendly expression in office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD5BqMMcAUPdAUAmAMUvP2epTjvLiZPyaRCC7i1jpQVJynddFiUXqeuhAr8x6O9mfgwZDs1xkpaz87jdpTiGEOZJx4ItUC_zyN1PFhxDb4gAeEujchnlUqHoB7sOrhE4diNHm52EGKc7A9TCZp5gFenNHUQ4kKlJnwsq75321EonX6FrYfOK424SOqGVWcoZC103jQp3AsoEUwr9dmp6aggndPVi3W_0pwTdgMssAsiRjgGnCjjknxeIsNWf-PzIdyWZBc8ldQNELE"/>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<span class="text-sm font-bold text-on-surface truncate">Admin User</span>
|
||||
<span class="text-xs text-slate-500 truncate">master@zappcare.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar (from JSON) -->
|
||||
<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-slate-400">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="search">search</span>
|
||||
</span>
|
||||
<input class="bg-surface-container-low border-none rounded-full py-1.5 pl-10 pr-4 text-sm w-64 focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search infrastructure..." type="text"/>
|
||||
</div>
|
||||
<nav class="hidden md:flex gap-8">
|
||||
<a class="text-slate-500 hover:text-slate-800 font-medium text-sm transition-opacity" href="#">Dashboard</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-medium text-sm transition-opacity" href="#">Metrics</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-medium text-sm transition-opacity" href="#">Reports</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center gap-2 px-4 py-1.5 bg-surface-container-low hover:bg-surface-container rounded-full text-xs font-bold text-[#0c6780] transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
System Status
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-surface-container-low rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-surface-container-low rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="max-w-6xl mx-auto p-12">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-12">
|
||||
<nav class="flex items-center gap-2 text-sm text-slate-400 mb-4">
|
||||
<span>Tenants</span>
|
||||
<span class="material-symbols-outlined text-xs" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="text-on-surface font-medium">New Registration</span>
|
||||
</nav>
|
||||
<h1 class="text-4xl font-extrabold text-on-surface tracking-tight mb-2">Create New Tenant</h1>
|
||||
<p class="text-slate-500 font-medium max-w-2xl">Onboard a new business client to the ZappCare ecosystem. Define their identity, choose their architecture, and set up administrative credentials.</p>
|
||||
</div>
|
||||
<!-- Content Grid: Bento Style -->
|
||||
<form class="grid grid-cols-12 gap-8">
|
||||
<!-- Left Column: Core Identity -->
|
||||
<div class="col-span-12 lg:col-span-7 space-y-8">
|
||||
<!-- General Information Card -->
|
||||
<section class="bg-surface-container-lowest p-8 rounded-full shadow-none">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="badge">badge</span>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold tracking-tight">Organization Profile</h2>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<!-- Company Name -->
|
||||
<div class="group">
|
||||
<label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 transition-colors group-focus-within:text-primary">Company Name</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl p-4 text-on-surface focus:ring-0 transition-all border-b-2 border-transparent focus:border-primary" placeholder="e.g. Acme Health Corp" type="text"/>
|
||||
</div>
|
||||
<!-- Tenant Slug & Timezone Row -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="group">
|
||||
<label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 transition-colors group-focus-within:text-primary">Tenant Name (Slug)</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl p-4 pr-32 text-on-surface focus:ring-0 transition-all border-b-2 border-transparent focus:border-primary" placeholder="acme-health" type="text"/>
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 font-mono text-xs">.zappcare.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 transition-colors group-focus-within:text-primary">Primary Timezone</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl p-4 text-on-surface focus:ring-0 appearance-none transition-all border-b-2 border-transparent focus:border-primary">
|
||||
<option>UTC -05:00 Eastern Time</option>
|
||||
<option>UTC +00:00 Greenwich Mean</option>
|
||||
<option>UTC +01:00 Central European</option>
|
||||
<option>UTC +08:00 Singapore Time</option>
|
||||
</select>
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
|
||||
<span class="material-symbols-outlined" data-icon="schedule">schedule</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Administrative Contact -->
|
||||
<section class="bg-surface-container-lowest p-8 rounded-full shadow-none">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary">
|
||||
<span class="material-symbols-outlined" data-icon="admin_panel_settings">admin_panel_settings</span>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold tracking-tight">Root Administrator</h2>
|
||||
</div>
|
||||
<div class="group">
|
||||
<label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 transition-colors group-focus-within:text-primary">Initial Admin Email</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl p-4 text-on-surface focus:ring-0 transition-all border-b-2 border-transparent focus:border-primary" placeholder="admin@clientdomain.com" type="email"/>
|
||||
<p class="mt-2 text-xs text-slate-400">The first super-user will receive an invitation link to set their password.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right Column: Plan & Submission -->
|
||||
<div class="col-span-12 lg:col-span-5 space-y-8">
|
||||
<!-- Subscription Plan Card -->
|
||||
<section class="bg-surface-container-low p-8 rounded-full border border-white shadow-sm overflow-hidden relative">
|
||||
<div class="absolute -top-6 -right-6 w-32 h-32 bg-primary/5 rounded-full blur-3xl"></div>
|
||||
<div class="flex items-center gap-3 mb-8 relative z-10">
|
||||
<div class="w-10 h-10 rounded-xl bg-tertiary/10 flex items-center justify-center text-tertiary">
|
||||
<span class="material-symbols-outlined" data-icon="workspace_premium">workspace_premium</span>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold tracking-tight">Subscription Plan</h2>
|
||||
</div>
|
||||
<div class="space-y-4 relative z-10">
|
||||
<!-- Plan Option 1 -->
|
||||
<label class="block cursor-pointer group">
|
||||
<input checked="" class="hidden peer" name="plan" type="radio"/>
|
||||
<div class="p-5 rounded-xl border-2 border-transparent bg-white peer-checked:border-primary peer-checked:bg-primary/5 transition-all flex items-start gap-4">
|
||||
<div class="mt-1 w-5 h-5 rounded-full border-2 border-slate-200 peer-checked:bg-primary peer-checked:border-primary flex items-center justify-center transition-colors">
|
||||
<div class="w-2 h-2 rounded-full bg-white scale-0 transition-transform peer-checked:scale-100"></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="font-bold text-on-surface">Standard</span>
|
||||
<span class="text-sm font-bold text-primary">$299/mo</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500 leading-relaxed">Up to 50 agents, 10k messages, basic reporting and email support.</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<!-- Plan Option 2 -->
|
||||
<label class="block cursor-pointer group">
|
||||
<input class="hidden peer" name="plan" type="radio"/>
|
||||
<div class="p-5 rounded-xl border-2 border-transparent bg-white peer-checked:border-primary peer-checked:bg-primary/5 transition-all flex items-start gap-4">
|
||||
<div class="mt-1 w-5 h-5 rounded-full border-2 border-slate-200 peer-checked:bg-primary peer-checked:border-primary flex items-center justify-center transition-colors">
|
||||
<div class="w-2 h-2 rounded-full bg-white scale-0 transition-transform peer-checked:scale-100"></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="font-bold text-on-surface">Enterprise</span>
|
||||
<span class="text-sm font-bold text-primary">$899/mo</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500 leading-relaxed">Unlimited agents, dedicated API shard, 24/7 priority SLA support.</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<!-- Plan Option 3 -->
|
||||
<label class="block cursor-pointer group">
|
||||
<input class="hidden peer" name="plan" type="radio"/>
|
||||
<div class="p-5 rounded-xl border-2 border-transparent bg-white peer-checked:border-primary peer-checked:bg-primary/5 transition-all flex items-start gap-4">
|
||||
<div class="mt-1 w-5 h-5 rounded-full border-2 border-slate-200 peer-checked:bg-primary peer-checked:border-primary flex items-center justify-center transition-colors">
|
||||
<div class="w-2 h-2 rounded-full bg-white scale-0 transition-transform peer-checked:scale-100"></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="font-bold text-on-surface">Custom Arch</span>
|
||||
<span class="text-sm font-bold text-primary">Contact</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500 leading-relaxed">Single-tenant isolated instance, HIPAA compliance pack, on-prem option.</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Deployment Summary & Actions -->
|
||||
<div class="bg-surface-container-highest/30 p-8 rounded-full">
|
||||
<div class="flex items-start gap-4 mb-8">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="info">info</span>
|
||||
<p class="text-xs text-slate-600 leading-relaxed">
|
||||
By clicking <span class="font-bold">Register Tenant</span>, you will initiate the infrastructure provisioning workflow. This process typically takes 2-4 minutes to spin up the dedicated containers and database schemas.
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<button class="w-full bg-gradient-to-br from-primary to-primary-container text-white py-4 px-8 rounded-full font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-2" type="submit">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="rocket_launch">rocket_launch</span>
|
||||
Register Tenant
|
||||
</button>
|
||||
<button class="w-full bg-transparent text-slate-500 py-3 px-8 rounded-full font-bold hover:bg-slate-200/50 transition-colors" type="button">
|
||||
Cancel & Discard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Visual Decorative Element -->
|
||||
<div class="mt-20 flex justify-center opacity-40">
|
||||
<div class="w-3/4 h-px bg-gradient-to-r from-transparent via-outline-variant to-transparent"></div>
|
||||
</div>
|
||||
<div class="mt-8 flex justify-between items-center text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
||||
<span>ZappCare Protocol v4.2.0</span>
|
||||
<div class="flex gap-4">
|
||||
<a class="hover:text-primary transition-colors" href="#">Documentation</a>
|
||||
<a class="hover:text-primary transition-colors" href="#">Security Audit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB (Suppressing as per mandate for detailed/transactional screens, but following JSON CTA if needed elsewhere - currently suppressed for this specific flow) -->
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_create_tenant/screen.png
Normal file
BIN
screen_design/zappcare_create_tenant/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
240
screen_design/zappcare_edit_profile/code.html
Normal file
240
screen_design/zappcare_edit_profile/code.html
Normal file
@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Edit Profile | ZappCare</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": {
|
||||
"background": "#f7f9fc",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"outline": "#6f787d",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"tertiary": "#865219",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
.glass-blur {
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface antialiased">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- SideNavBar Rail -->
|
||||
<aside class="h-screen w-64 flex flex-col sticky left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900 py-8 px-4 gap-2 z-50">
|
||||
<div class="flex items-center gap-3 mb-8 px-2">
|
||||
<img alt="ZappCare Logo" class="w-10 h-10 rounded-full" data-alt="Modern geometric logo with interlocking blue shapes representing care and connectivity on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCK-Rq57_VlZkeBiIOYsAoG1WCPGbDC0Y7GDAEJb6enBc5O-hE7SkNTaRlSd05RrZUhpcUbkBmcSzDjRFFbfICBOz89quIjCf_rqrhonPy2Al_l06hLBX2eBf3fKYL1_iITfwQ1frV-rJGeBYqzf1zvqaThKvr6EmKb648lpocn9kZ61LGlpkP_urlBcuz85KA2tRDuEjzubcxnyFCo6Pe3WKfaYGiWSRIN_HRd2pqBp3xv3o2hPAlklRLzz1d1tk4D4XyYVQE8nVQ"/>
|
||||
<div>
|
||||
<h1 class="text-xl font-extrabold text-[#0c6780] dark:text-[#87ceeb] leading-tight font-headline">ZappCare</h1>
|
||||
<p class="text-xs text-on-surface-variant opacity-70">Business HQ</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span> Inbox
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span> Contacts
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span> Campaigns
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span> Automation
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span> Analytics
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span> Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto flex flex-col gap-1 border-t border-transparent pt-4">
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span> Support
|
||||
</a>
|
||||
<a class="bg-[#87ceeb] text-[#005870] rounded-xl font-bold p-3 flex items-center gap-3 transition-all duration-200 font-headline tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle" style="font-variation-settings: 'FILL' 1;">account_circle</span> Account
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col min-w-0">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 bg-[#f7f9fc]/85 dark:bg-slate-950/85 backdrop-blur-md shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)] flex items-center justify-between px-8">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="relative w-full max-w-md">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span>
|
||||
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-outline/50" placeholder="Search profile settings..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/50 transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/50 transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-outline-variant/30 mx-2"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-on-surface">Alex Harrison</span>
|
||||
<img alt="User profile" class="w-10 h-10 rounded-full border-2 border-white shadow-sm" data-alt="Professional portrait of a middle-aged man with a friendly smile, clean-shaven, wearing a blue shirt, neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMvUYvs-AZyDxDEzXLroTXCj0aVu90UQUsj7Yxi-BFgXmQzl7NP-eJQ12jmjV9TzRiTjVddJZM52AzjRRRdf-lJW9fOrZoHIyLWOAsEff1TtMJxgrMvPaXiO9Z5M_gnrAt4gLN2DC3-mUpjmrkDYHHZYXfLFm8d8i_WNuzxaXJKEYLshiNq2yFPMWlZ4mPj3rXk9_7GvmS1QhpFBvnifKnGPDzGbjnxQnNDGymsp5JlDl2A75zvr-91mVaq3NLRz34km14ojbtClA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Profile Content Section -->
|
||||
<div class="flex-1 overflow-y-auto p-12 max-w-4xl mx-auto w-full">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-12">
|
||||
<h2 class="font-headline text-4xl font-extrabold text-on-surface tracking-tight mb-2">Edit Profile</h2>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed">Update your public identity and account settings within the ZappCare ecosystem.</p>
|
||||
</div>
|
||||
<!-- Bento-style Profile Form -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Avatar Upload Card -->
|
||||
<div class="md:col-span-1 bg-surface-container-low rounded-full p-8 flex flex-col items-center justify-center text-center shadow-sm">
|
||||
<div class="relative group cursor-pointer mb-6">
|
||||
<div class="w-40 h-40 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden border-4 border-white shadow-xl group-hover:scale-[1.02] transition-transform duration-300">
|
||||
<img alt="User Avatar" class="w-full h-full object-cover" data-alt="Close up portrait of a man with warm eyes and a confident expression, soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1JoV60WYHLr72TNd7Z73WecKbCgRSflDFdKG1nryuKqo0vya9Q0DyLfWXm2g3G4slKCzFgRNk6Dwoy2WjUQEcamOPphtqdsxuwIueJPcXk9TdPO0QJ-z8Z3waJYR3SramrhYQhSy2TOP1ZBiyF_tu0NCLYCr6dQ31pXond1ob9KqnY20acRjfVJGzD5DAqzGY_tsuOy7KwkSAtUoM35emrssmIWYs-rCb0cqa3TYwbDA6uQichB2ErN-IkmOCmHyBMf0lq1HlAp4"/>
|
||||
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-3xl">photo_camera</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="absolute bottom-1 right-1 bg-primary text-white p-2 rounded-full shadow-lg hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-on-surface mb-1">Profile Photo</h3>
|
||||
<p class="text-xs text-on-surface-variant leading-tight">JPG, GIF or PNG.<br/>Max size of 800K</p>
|
||||
</div>
|
||||
<!-- Details Card -->
|
||||
<div class="md:col-span-2 bg-surface-container-lowest rounded-full p-10 flex flex-col gap-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
|
||||
<div class="space-y-6">
|
||||
<div class="relative">
|
||||
<label class="block text-xs font-semibold text-primary mb-2 px-1 font-headline uppercase tracking-wider" for="full_name">Full Name</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl py-4 px-5 text-on-surface focus:ring-2 focus:ring-primary/20 transition-all font-medium" id="full_name" type="text" value="Alex Harrison"/>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary scale-x-0 transition-transform focus-within:scale-x-100"></div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label class="block text-xs font-semibold text-outline mb-2 px-1 font-headline uppercase tracking-wider" for="email">Work Email</label>
|
||||
<input class="w-full bg-surface-container-high border-none rounded-xl py-4 px-5 text-on-surface-variant opacity-70 cursor-not-allowed font-medium" disabled="" id="email" type="email" value="alex.h@zappcare.com"/>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label class="block text-xs font-semibold text-outline mb-2 px-1 font-headline uppercase tracking-wider" for="role">Workspace Role</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl py-4 px-5 text-on-surface focus:ring-2 focus:ring-primary/20 transition-all font-medium" id="role" type="text" value="Lead Communications Specialist"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex items-center justify-end gap-4 mt-4">
|
||||
<button class="px-8 py-4 rounded-xl font-headline font-bold text-on-surface-variant hover:bg-surface-container-high transition-all duration-200 flex items-center gap-2 border border-outline-variant/15">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="px-10 py-4 rounded-xl font-headline font-bold text-white bg-gradient-to-br from-[#0c6780] to-[#87ceeb] shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all duration-200 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">save</span>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Stats Bento -->
|
||||
<div class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-primary-container/20 rounded-full p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
||||
<span class="material-symbols-outlined">verified_user</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-on-primary-container font-headline uppercase tracking-tighter">Security Level</p>
|
||||
<p class="text-on-primary-container font-bold text-lg">High Efficiency</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-full p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">chat_bubble</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-outline font-headline uppercase tracking-tighter">Total Outreach</p>
|
||||
<p class="text-on-surface font-bold text-lg">1,284 Chats</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-full p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">history</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-outline font-headline uppercase tracking-tighter">Last Active</p>
|
||||
<p class="text-on-surface font-bold text-lg">2 mins ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_edit_profile/screen.png
Normal file
BIN
screen_design/zappcare_edit_profile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
147
screen_design/zappcare_forgot_password_success/code.html
Normal file
147
screen_design/zappcare_forgot_password_success/code.html
Normal file
@ -0,0 +1,147 @@
|
||||
<!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 | Reset Link Sent</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&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": {
|
||||
"background": "#f7f9fc",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"outline": "#6f787d",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"tertiary": "#865219",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
.bg-primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface min-h-screen flex flex-col">
|
||||
<!-- Hero Background Texture (Visual Layer) -->
|
||||
<div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-[10%] -left-[5%] w-[40%] h-[40%] rounded-full bg-primary-container/20 blur-[120px]"></div>
|
||||
<div class="absolute top-[60%] -right-[10%] w-[50%] h-[50%] rounded-full bg-secondary-container/10 blur-[150px]"></div>
|
||||
</div>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="relative z-10 flex-grow flex items-center justify-center p-6">
|
||||
<div class="w-full max-w-lg">
|
||||
<!-- Brand Logo Center -->
|
||||
<div class="flex justify-center mb-12">
|
||||
<img class="h-12 w-auto" data-alt="ZappCare corporate logo, clean geometric design in deep teal and light blue tones, professional healthcare business aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjf3KK-i-VIeK-K6l_Iv28OuTbng9ED5tBx36rgBJ-dU3efCy7ayccv_Nnh6BQJw-sLdlvVTjoUnrscmBbpenSYWP5UJRjJ9WPAj5DVk8adBk6kthYMfT491JeVnbrRuXbZ4vN6kM88FxSuQJVoEK6jNJfiF_6R7ThZEYhxRbSH4UpwFMW9a2N6JptEYnsCEdWLMKRp7t9l5UUWm5Ltr2ilbVTWlk2wsoKWKMYgxzk6WgQ9Fbu1g2X5s-vwu4cndHiHpjrxUvJxCE"/>
|
||||
</div>
|
||||
<!-- Success Card -->
|
||||
<div class="surface-container-lowest rounded-full p-12 text-center shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<!-- Icon Assembly -->
|
||||
<div class="relative inline-flex mb-8">
|
||||
<div class="absolute inset-0 bg-primary-container/30 rounded-full scale-150 blur-xl"></div>
|
||||
<div class="relative w-24 h-24 bg-primary-gradient rounded-full flex items-center justify-center text-white shadow-lg">
|
||||
<span class="material-symbols-outlined text-5xl" style="font-variation-settings: 'FILL' 1;">mark_email_read</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message Header -->
|
||||
<h1 class="font-headline font-extrabold text-3xl text-on-surface tracking-tight mb-4">
|
||||
Check your email
|
||||
</h1>
|
||||
<!-- Detailed Message -->
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed mb-10 max-w-sm mx-auto">
|
||||
We've sent a password reset link to <span class="font-semibold text-primary">user@company.com</span>. Please click the link to set a new password.
|
||||
</p>
|
||||
<!-- Action Button -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<a class="bg-primary-gradient text-white font-headline font-bold py-4 px-8 rounded-full shadow-md hover:shadow-xl hover:scale-[1.02] transition-all duration-200 flex items-center justify-center gap-2" href="#">
|
||||
<span>Back to Login</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Footer Support Note -->
|
||||
<div class="mt-12 pt-8 border-t border-outline-variant/15">
|
||||
<p class="text-sm text-on-surface-variant">
|
||||
Didn't receive the email?
|
||||
<a class="text-primary font-semibold hover:underline" href="#">Click to resend</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Navigation (Simplified for transactional) -->
|
||||
<div class="mt-8 flex justify-center gap-8 text-sm font-medium text-outline">
|
||||
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||
<a class="hover:text-primary transition-colors" href="#">Contact Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Visual Footer Accent -->
|
||||
<footer class="relative z-10 p-8 flex justify-center opacity-50">
|
||||
<p class="font-headline text-xs tracking-widest uppercase text-outline">© 2024 ZappCare Business HQ</p>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_forgot_password_success/screen.png
Normal file
BIN
screen_design/zappcare_forgot_password_success/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
308
screen_design/zappcare_global_search/code.html
Normal file
308
screen_design/zappcare_global_search/code.html
Normal file
@ -0,0 +1,308 @@
|
||||
<!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 - Global Search Overlay</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": {
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-container": "#36647e",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"secondary": "#35637d",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#f7f9fc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-surface": "#191c1e",
|
||||
"on-background": "#191c1e",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary": "#865219",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-container": "#005870",
|
||||
"on-primary": "#ffffff"
|
||||
},
|
||||
"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;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface">
|
||||
<!-- Sidebar Shell (Shared Component Logic) -->
|
||||
<aside class="h-screen fixed left-0 top-0 w-64 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-xl flex flex-col py-8 px-4 space-y-2 z-50">
|
||||
<div class="mb-10 px-4">
|
||||
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100">ZappCare</h1>
|
||||
<p class="text-xs font-medium text-on-surface-variant opacity-60">Architectural Inbox</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<div class="bg-white/90 dark:bg-slate-800/90 text-sky-700 dark:text-sky-300 rounded-xl shadow-sm px-4 py-3 flex items-center space-x-3 transition-all duration-200">
|
||||
<span class="material-symbols-outlined">inbox</span>
|
||||
<span class="text-sm font-semibold">Inbox</span>
|
||||
</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
|
||||
<span class="material-symbols-outlined">bar_chart</span>
|
||||
<span class="text-sm font-semibold">Analytics</span>
|
||||
</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
|
||||
<span class="material-symbols-outlined">campaign</span>
|
||||
<span class="text-sm font-semibold">Campaigns</span>
|
||||
</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="text-sm font-semibold">Team</span>
|
||||
</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-sm font-semibold">Settings</span>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="mt-auto bg-gradient-to-br from-primary to-primary-container text-white px-4 py-4 rounded-xl flex items-center justify-center space-x-2 font-bold shadow-lg shadow-primary/20 hover:scale-98 active:scale-95 transition-transform duration-200">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
</aside>
|
||||
<!-- Top Bar Shell (Shared Component Logic) -->
|
||||
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8 ml-64">
|
||||
<div class="flex items-center flex-1 max-w-2xl">
|
||||
<div class="relative w-full group">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-outline">search</span>
|
||||
</div>
|
||||
<input class="block w-full pl-10 pr-3 py-2 border-none bg-surface-container-highest rounded-full text-sm placeholder-on-surface-variant focus:ring-2 focus:ring-primary focus:bg-white transition-all duration-200" placeholder="Search across ZappCare..." type="text" value="Zapp"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6 ml-8">
|
||||
<nav class="flex space-x-6">
|
||||
<a class="text-sky-700 font-bold border-b-2 border-sky-600 pb-1 text-sm" href="#">Overview</a>
|
||||
<a class="text-slate-500 hover:text-sky-900 transition-colors text-sm" href="#">History</a>
|
||||
<a class="text-slate-500 hover:text-sky-900 transition-colors text-sm" href="#">Audit Logs</a>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-4 border-l border-outline-variant/30 pl-6">
|
||||
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">notifications</span>
|
||||
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">help_outline</span>
|
||||
<img alt="Admin User" class="w-8 h-8 rounded-full bg-secondary-container" data-alt="close-up of a professional modern profile avatar icon with soft studio lighting and minimalist aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQf1qd8D3itUigB3A1SU-2UevvjF-b35yoL7frJcnM7pTo50dBxWYiY5NFH8UpEiHMDZ4YNzyIOLoBu_p8rqGNUksxROjDQlDy1hIjWFydzGgxhGMbmM6NmJaj8pfGbX-E1eq2dDo8R-mT7bm--il-c8b7ZN6hkXqZyEQFUcjnrlajewOsCxJ_yBryJqBc-MeK3R9etyEgD3Tz07RPm0iLC_3zO3_qd6OZ_qNgbGesiFaOLlA6LKEUQ0TqmNdRhbMlXNbPHJDmdNU"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- MAIN CONTENT CANVAS: Search Overlay -->
|
||||
<main class="ml-64 p-8 min-h-screen">
|
||||
<!-- Search Overlay Container -->
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="glass-panel rounded-full shadow-[0_24px_48px_-12px_rgba(25,28,30,0.08)] overflow-hidden border border-white/40">
|
||||
<!-- Category Tabs -->
|
||||
<div class="flex items-center space-x-8 px-8 py-6 border-b border-outline-variant/10">
|
||||
<div class="flex items-center space-x-2 text-primary border-b-2 border-primary pb-2 -mb-[25px] cursor-pointer">
|
||||
<span class="material-symbols-outlined text-[20px]">all_inclusive</span>
|
||||
<span class="text-sm font-bold tracking-tight font-headline">All Results</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer pb-2 -mb-[25px]">
|
||||
<span class="material-symbols-outlined text-[20px]">forum</span>
|
||||
<span class="text-sm font-semibold tracking-tight font-headline">Conversations</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer pb-2 -mb-[25px]">
|
||||
<span class="material-symbols-outlined text-[20px]">person</span>
|
||||
<span class="text-sm font-semibold tracking-tight font-headline">Contacts</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer pb-2 -mb-[25px]">
|
||||
<span class="material-symbols-outlined text-[20px]">corporate_fare</span>
|
||||
<span class="text-sm font-semibold tracking-tight font-headline">Tenants</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-0">
|
||||
<!-- Left Column: Results -->
|
||||
<div class="col-span-8 p-8 space-y-8 max-h-[716px] overflow-y-auto">
|
||||
<!-- Section: Conversations -->
|
||||
<div>
|
||||
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Conversations</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="group flex items-center p-4 rounded-full hover:bg-white/60 transition-all cursor-pointer">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed mr-4">
|
||||
<span class="material-symbols-outlined">chat_bubble</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-bold text-on-surface group-hover:text-primary transition-colors">Zapp Logistics - Shipment Delay</p>
|
||||
<span class="text-[10px] text-outline">2h ago</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant line-clamp-1">Can we expedite the "Zapp" route for the upcoming delivery?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center p-4 rounded-full hover:bg-white/60 transition-all cursor-pointer">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant mr-4">
|
||||
<span class="material-symbols-outlined">mark_chat_unread</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-bold text-on-surface group-hover:text-primary transition-colors">Technical Support: ZappCare API</p>
|
||||
<span class="text-[10px] text-outline">Yesterday</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant line-clamp-1">The integration for ZappCare is now live on production.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section: Contacts -->
|
||||
<div>
|
||||
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Contacts</h3>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="group flex items-center p-3 rounded-full border border-transparent hover:border-outline-variant/20 hover:bg-white/80 transition-all cursor-pointer">
|
||||
<img class="w-10 h-10 rounded-full mr-3 object-cover shadow-sm" data-alt="vibrant portrait of a business professional with a warm smile in a brightly lit modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPNgQF_-NcUNKTLb2iww87Fr0vy2k44bYJsp1i8DD-Y00FmYLPnaFnaw-ygt9fpmLbMbEILQnKvvpHWhzSPkugKL2ZY3B7OZDMGBKc2117pbkToxit29iAuO7EzfmzkpilcgaNfx27KGmqkRrVXT0XK_BzJOFZAH-zYWeTwr3k_P3UIhV7ThTbKwuAuVd2UsFQ4kGdYKSypOsP0q6r2mStVeTSNHj2Ah2fV-K5-SYU7togogSTWaI7Hqpw9HoemGylVzrJEVUABA0"/>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">Zapp Miller</p>
|
||||
<p class="text-[11px] text-outline">Product Lead</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center p-3 rounded-full border border-transparent hover:border-outline-variant/20 hover:bg-white/80 transition-all cursor-pointer">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container font-bold mr-3">AZ</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">Anna Zappolo</p>
|
||||
<p class="text-[11px] text-outline">Key Account</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section: Tenants -->
|
||||
<div>
|
||||
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Tenants</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="group flex items-center p-4 rounded-full bg-surface-container-low hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/10">
|
||||
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-primary shadow-sm mr-4">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">corporate_fare</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-bold text-on-surface group-hover:text-primary transition-colors">Zapp Logistics Global</p>
|
||||
<span class="px-2 py-0.5 rounded-full bg-secondary-container text-[10px] text-on-secondary-container font-bold">Verified</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-outline">12 Sub-accounts • New York, US</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Recent & Shortcuts -->
|
||||
<div class="col-span-4 bg-surface-container-low/50 border-l border-outline-variant/10 p-8">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline">Recent Searches</h3>
|
||||
<button class="text-[10px] font-bold text-primary hover:underline">Clear</button>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center text-sm text-on-surface-variant hover:text-primary cursor-pointer transition-colors group">
|
||||
<span class="material-symbols-outlined text-[18px] mr-2 text-outline group-hover:text-primary">history</span>
|
||||
<span>zappcare documentation</span>
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-on-surface-variant hover:text-primary cursor-pointer transition-colors group">
|
||||
<span class="material-symbols-outlined text-[18px] mr-2 text-outline group-hover:text-primary">history</span>
|
||||
<span>quarterly audit logs</span>
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-on-surface-variant hover:text-primary cursor-pointer transition-colors group">
|
||||
<span class="material-symbols-outlined text-[18px] mr-2 text-outline group-hover:text-primary">history</span>
|
||||
<span>marketing campaign q3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Smart Shortcuts</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="p-3 bg-white/60 rounded-xl flex flex-col items-center text-center hover:bg-white hover:shadow-sm cursor-pointer transition-all border border-outline-variant/10">
|
||||
<span class="material-symbols-outlined text-primary mb-1">person_add</span>
|
||||
<span class="text-[10px] font-bold">New Contact</span>
|
||||
</div>
|
||||
<div class="p-3 bg-white/60 rounded-xl flex flex-col items-center text-center hover:bg-white hover:shadow-sm cursor-pointer transition-all border border-outline-variant/10">
|
||||
<span class="material-symbols-outlined text-secondary mb-1">description</span>
|
||||
<span class="text-[10px] font-bold">Draft Msg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-primary-container/20 rounded-2xl border border-primary-container/30">
|
||||
<p class="text-[11px] font-bold text-on-primary-container mb-2">Search Tip</p>
|
||||
<p class="text-[10px] leading-relaxed text-on-primary-container/80">Press <kbd class="px-1.5 py-0.5 rounded bg-white font-mono text-[9px] shadow-sm">TAB</kbd> to jump between result categories instantly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer / Status Bar -->
|
||||
<div class="bg-surface-container-highest/30 px-8 py-3 flex items-center justify-between border-t border-outline-variant/10">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-1">
|
||||
<kbd class="px-1.5 py-0.5 rounded bg-white text-[10px] font-mono border border-outline-variant/20">↑↓</kbd>
|
||||
<span class="text-[10px] text-outline font-medium">Navigate</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<kbd class="px-1.5 py-0.5 rounded bg-white text-[10px] font-mono border border-outline-variant/20">Enter</kbd>
|
||||
<span class="text-[10px] text-outline font-medium">Select</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<kbd class="px-1.5 py-0.5 rounded bg-white text-[10px] font-mono border border-outline-variant/20">ESC</kbd>
|
||||
<span class="text-[10px] text-outline font-medium">Close</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-primary">8 results for "Zapp"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Action Button (FAB) Suppressed per instructions for Overlay/Detail Views -->
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_global_search/screen.png
Normal file
BIN
screen_design/zappcare_global_search/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
305
screen_design/zappcare_import_contacts/code.html
Normal file
305
screen_design/zappcare_import_contacts/code.html
Normal file
@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Contact Import Wizard | ZappCare</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": {
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-container": "#36647e",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"secondary": "#35637d",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#f7f9fc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-surface": "#191c1e",
|
||||
"on-background": "#191c1e",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary": "#865219",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-container": "#005870",
|
||||
"on-primary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {},
|
||||
"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;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen fixed left-0 top-0 w-64 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-xl flex flex-col py-8 px-4 space-y-2 z-50">
|
||||
<div class="mb-8 px-2">
|
||||
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100">ZappCare</h1>
|
||||
<p class="text-xs font-semibold text-slate-500 uppercase tracking-widest mt-1">Architectural Inbox</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
||||
<span>Inbox</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="bar_chart">bar_chart</span>
|
||||
<span>Analytics</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||
<span>Campaigns</span>
|
||||
</a>
|
||||
<!-- Active State: Team -->
|
||||
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold bg-white/90 text-sky-700 rounded-xl shadow-sm scale-98 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group" style="font-variation-settings: 'FILL' 1;">group</span>
|
||||
<span>Team</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-4">
|
||||
<button class="w-full flex items-center justify-center space-x-2 py-3 bg-gradient-to-br from-primary to-primary-container text-on-primary rounded-full font-bold shadow-sm hover:scale-98 active:scale-95 transition-all duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8 ml-64">
|
||||
<div class="flex items-center space-x-6">
|
||||
<nav class="flex items-center space-x-8">
|
||||
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">Overview</a>
|
||||
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">History</a>
|
||||
<a class="text-sky-700 font-bold border-b-2 border-sky-600 pb-1 font-['Inter'] text-sm tracking-normal" href="#">Audit Logs</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center space-x-5">
|
||||
<div class="flex items-center bg-surface-container-low px-4 py-2 rounded-full">
|
||||
<span class="material-symbols-outlined text-outline text-xl" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm ml-2 w-48 font-body" placeholder="Search resources..." type="text"/>
|
||||
</div>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-xs font-bold text-on-secondary-container overflow-hidden">
|
||||
<img alt="Admin User Profile" data-alt="close-up portrait of a professional woman with a friendly smile in a modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7VSKdLcrF558FC3g5LsJ2s2wInAPtoZeeaG0VulYU_Aq5Mf1CpKs8MdNukmrjBn9wK4xSJhnobYj9YsdJckSgnXNz58Lcq9-kOej5xga5ZKrT91HOQnkMRnTDdCuAOJ5VYLGpngJIrTNRwrT2UUPa8hp7Pvlsvxry7YUmlJlBTUdOmLNV6Cc0xRxKgsPwTnQTFlGbQzwpROjVrSEN6kiVv5N6n7pB4CXDG9YT6Zay7m9PzZWXV0DPgu5_pnIwc2FKqsXnXGik4NU"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Canvas -->
|
||||
<main class="ml-64 p-12 max-w-7xl">
|
||||
<header class="mb-12">
|
||||
<h2 class="text-4xl font-extrabold text-on-surface tracking-tight mb-2">Import Contacts</h2>
|
||||
<p class="text-on-surface-variant text-lg max-w-2xl">Effortlessly synchronize your workforce data. Our architectural import tool ensures data integrity through structured mapping and real-time validation.</p>
|
||||
</header>
|
||||
<!-- Stepper -->
|
||||
<div class="flex items-center space-x-4 mb-10 overflow-x-auto pb-4">
|
||||
<div class="flex items-center space-x-3 shrink-0">
|
||||
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold">1</div>
|
||||
<span class="font-headline font-bold text-on-surface">Upload Source</span>
|
||||
</div>
|
||||
<div class="w-12 h-px bg-outline-variant opacity-30"></div>
|
||||
<div class="flex items-center space-x-3 shrink-0 opacity-50">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant font-bold">2</div>
|
||||
<span class="font-headline font-semibold text-on-surface-variant">Map Fields</span>
|
||||
</div>
|
||||
<div class="w-12 h-px bg-outline-variant opacity-30"></div>
|
||||
<div class="flex items-center space-x-3 shrink-0 opacity-50">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant font-bold">3</div>
|
||||
<span class="font-headline font-semibold text-on-surface-variant">Validation</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Grid Layout for Steps -->
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<!-- Step 1: Drag and Drop Area -->
|
||||
<div class="col-span-12 lg:col-span-8 bg-surface-container-lowest rounded-full p-12 transition-all duration-300">
|
||||
<div class="border-2 border-dashed border-outline-variant rounded-full h-80 flex flex-col items-center justify-center text-center p-8 group hover:bg-surface-container-low transition-colors">
|
||||
<div class="w-20 h-20 bg-primary-fixed rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined text-primary text-4xl" data-icon="cloud_upload">cloud_upload</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-headline font-bold text-on-surface mb-2">Drop your CSV file here</h3>
|
||||
<p class="text-on-surface-variant mb-8 max-w-xs mx-auto">Support for UTF-8 encoded .csv and .xlsx files up to 50MB.</p>
|
||||
<button class="bg-surface-container-highest px-8 py-3 rounded-full font-bold text-on-surface hover:bg-outline-variant transition-colors">Browse Files</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Info Card -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-6">
|
||||
<div class="glass-card p-8 rounded-full border-none shadow-sm">
|
||||
<h4 class="text-lg font-headline font-bold text-primary mb-4 flex items-center">
|
||||
<span class="material-symbols-outlined mr-2" data-icon="info">info</span>
|
||||
Best Practices
|
||||
</h4>
|
||||
<ul class="space-y-4 text-sm text-on-surface-variant">
|
||||
<li class="flex items-start">
|
||||
<span class="material-symbols-outlined text-primary text-sm mr-2" data-icon="check_circle">check_circle</span>
|
||||
Ensure first row contains headers.
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="material-symbols-outlined text-primary text-sm mr-2" data-icon="check_circle">check_circle</span>
|
||||
Use international phone formats (e.g., +1...).
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="material-symbols-outlined text-primary text-sm mr-2" data-icon="check_circle">check_circle</span>
|
||||
Check for duplicate email entries.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-secondary-container/30 p-8 rounded-full border-none">
|
||||
<h4 class="text-lg font-headline font-bold text-on-secondary-container mb-2">Template Ready?</h4>
|
||||
<p class="text-sm text-on-secondary-container/80 mb-4">Download our pre-formatted architecture template to ensure zero mapping errors.</p>
|
||||
<a class="inline-flex items-center text-sm font-bold text-on-secondary-container hover:underline" href="#">
|
||||
Download Template
|
||||
<span class="material-symbols-outlined ml-1 text-sm" data-icon="download">download</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 2: Field Mapping Preview (Simulated as upcoming) -->
|
||||
<div class="col-span-12 mt-8 opacity-40 select-none grayscale">
|
||||
<div class="bg-surface-container-low rounded-full p-10">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="text-xl font-headline font-bold">Field Mapping Architecture</h3>
|
||||
<span class="px-4 py-1 bg-surface-container-highest rounded-full text-xs font-bold uppercase tracking-widest">Locked</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-x-12 gap-y-6">
|
||||
<div class="space-y-4">
|
||||
<p class="text-xs font-bold text-on-surface-variant uppercase tracking-widest">ZappCare Field</p>
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between">
|
||||
<span class="font-medium">Full Name</span>
|
||||
<span class="material-symbols-outlined text-outline" data-icon="link">link</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between">
|
||||
<span class="font-medium">Email Address</span>
|
||||
<span class="material-symbols-outlined text-outline" data-icon="link">link</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-xs font-bold text-on-surface-variant uppercase tracking-widest">CSV Header</p>
|
||||
<div class="bg-surface-container-highest p-4 rounded-xl flex items-center justify-between border-b-2 border-primary">
|
||||
<span class="text-primary font-bold italic">Select Header...</span>
|
||||
<span class="material-symbols-outlined text-primary" data-icon="arrow_drop_down">arrow_drop_down</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-highest p-4 rounded-xl flex items-center justify-between border-b-2 border-primary">
|
||||
<span class="text-primary font-bold italic">Select Header...</span>
|
||||
<span class="material-symbols-outlined text-primary" data-icon="arrow_drop_down">arrow_drop_down</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 3: Validation Preview (Asymmetric Feature) -->
|
||||
<div class="col-span-12 lg:col-span-7 mt-8">
|
||||
<div class="glass-card p-10 rounded-full flex flex-col h-full justify-between">
|
||||
<div>
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-3 h-3 bg-error rounded-full"></div>
|
||||
<h3 class="text-xl font-headline font-bold">Validation Preview</h3>
|
||||
</div>
|
||||
<p class="text-on-surface-variant mb-6">Once uploaded, our AI validates each entry against architectural constraints to prevent data pollution.</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-xl p-6 space-y-4">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-on-surface-variant font-medium">Potential Duplicates</span>
|
||||
<span class="bg-error-container text-on-error-container px-3 py-1 rounded-full font-bold">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-on-surface-variant font-medium">Invalid Formats</span>
|
||||
<span class="bg-tertiary-container text-on-tertiary-container px-3 py-1 rounded-full font-bold">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-on-surface-variant font-medium">Ready to Import</span>
|
||||
<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full font-bold">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-5 mt-8">
|
||||
<div class="relative overflow-hidden rounded-full h-full min-h-[320px] group">
|
||||
<img alt="Data visualization background" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="clean abstract data visualization with flowing blue lines and soft glowing nodes representing information connectivity and flow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlVaEF_XzPYETA_aJNhWU5OBcZ4gjMENojJKmUenE-oSXK3QAKFo52RvenTY0SSXr29k4SHwT6lJghbFqoCTaAdr2POg0uf5pdxZ0400D5qDvm_H5LQkjCJju7Z2EDwGOAiswYTO6qjwmjs9n9gifC7ELaIA3xUO915IvAU4y8WTXEmycr-Qfqd0Y9x5b2y5Yhh8ailCNl0JlTFp6a6CsvQvPlFxCE6V9swwS1-NjD6J-tdcRqKKmFSgsBmdD5_JgnT2MvCn8nFzU"/>
|
||||
<div class="absolute inset-0 bg-primary/20 backdrop-blur-[2px]"></div>
|
||||
<div class="absolute inset-0 p-10 flex flex-col justify-end text-white">
|
||||
<h4 class="text-2xl font-headline font-bold mb-2">Automated Sync</h4>
|
||||
<p class="text-sm opacity-90">Set up recurring imports from your CRM to keep ZappCare synchronized without manual intervention.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Footer Action Bar -->
|
||||
<footer class="fixed bottom-8 left-64 right-8 z-30">
|
||||
<div class="mx-auto max-w-5xl glass-card px-8 py-4 rounded-full shadow-lg flex items-center justify-between border-none">
|
||||
<button class="text-on-surface-variant font-bold px-6 py-2 hover:bg-surface-container-low rounded-full transition-colors">Cancel</button>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="bg-surface-container-highest text-on-surface-variant font-bold px-6 py-2 rounded-full cursor-not-allowed opacity-50">Back</button>
|
||||
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary font-bold px-10 py-3 rounded-full hover:scale-105 active:scale-95 shadow-md transition-all">Next: Map Fields</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_import_contacts/screen.png
Normal file
BIN
screen_design/zappcare_import_contacts/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
286
screen_design/zappcare_my_profile/code.html
Normal file
286
screen_design/zappcare_my_profile/code.html
Normal file
@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"background": "#f7f9fc",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"outline": "#6f787d",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"tertiary": "#865219",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780"
|
||||
},
|
||||
"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-architecture {
|
||||
background: linear-gradient(135deg, #f7f9fc 0%, #f2f4f6 100%);
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body antialiased">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- SideNavBar Rail -->
|
||||
<aside class="bg-[#f2f4f6] dark:bg-slate-900 h-screen w-64 flex flex-col sticky left-0 top-0 py-8 px-4 gap-2 z-50">
|
||||
<div class="flex items-center gap-3 px-3 mb-8">
|
||||
<img alt="ZappCare Logo" class="w-10 h-10 rounded-xl object-cover" data-alt="Modern geometric abstract medical cross logo with soft blue gradients and rounded edges" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBscI1q3IkYS1h0w2B5X8dCVa8yuGjExanJOFwGC7NiAem7HGaTxb70C_ivABEEOr348DOUASwRPSZtn3sEMs4HUx1DDR2NfR3n-FrwhXEBDjuVQExs4eifJ-U2zQ-qyVJm5xBNvPvFp-nOPyznh3xycW-RIF000UaR_KXZi2klGMVEh98RU9rRkYvXI8IB1ZZ8wiIFxpw_88QhzvuwZKKZfSdEzx1hHbzF3d22QQYRmLxzNhFowpJMbxvg9o9t_niEO8wFEGQaZtE"/>
|
||||
<div>
|
||||
<h1 class="text-xl font-extrabold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold opacity-60">Business HQ</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mb-6 bg-gradient-to-br from-primary to-primary-container text-white py-4 px-6 rounded-full font-headline font-bold text-sm shadow-lg shadow-primary/20 flex items-center justify-center gap-2 transition-all hover:scale-[1.02] active:scale-95">
|
||||
<span class="material-symbols-outlined text-xl">add_comment</span>
|
||||
New Chat
|
||||
</button>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
||||
Inbox
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
Contacts
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||
Campaigns
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span>
|
||||
Automation
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
||||
Analytics
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto flex flex-col gap-1 pt-4">
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
Support
|
||||
</a>
|
||||
<!-- Active Account Tab -->
|
||||
<a class="bg-[#87ceeb] text-[#005870] rounded-xl font-bold p-3 flex items-center gap-3 transition-all duration-200 font-['Manrope'] tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle" style="font-variation-settings: 'FILL' 1;">account_circle</span>
|
||||
Account
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 bg-[#f7f9fc]/85 dark:bg-slate-950/85 backdrop-blur-md flex items-center justify-between px-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-lg">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-surface-container rounded-full border-none focus:ring-2 focus:ring-primary/20 w-64 text-sm font-label" placeholder="Search profile settings..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:bg-white/50 rounded-full transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-white/50 rounded-full transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-outline-variant/30 mx-2"></div>
|
||||
<img alt="User profile" class="w-10 h-10 rounded-full border-2 border-white shadow-sm" data-alt="Professional headshot of a smiling man in a business casual outfit with soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvrdRKqGTHOpRgverFZzwjz3OgHypJh-JF7xJXcKzddWK4mUbvKHQgJTDN2K3J7ic5_xYPNRgOb-Ndgv2wp7PcVvozeDM-fh6m2Y9JggDjtN5_SDm2sic-e2O3-3bHTngfxGyFUVHM7EylSHic8BxKipS8OByTQxIxbH-dV7F0FD_bQY8L-NaSuF0w7sORv9fdZ14FVUjx7o8AZcgNkfRqoe_TjPS3iIhYyd8yhl_YbFCvKU3_NCWb6FKGYItu-O4ViTbb6G3noHA"/>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Page Canvas -->
|
||||
<div class="flex-1 overflow-y-auto p-8 lg:p-12">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<!-- Editorial Header -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-4xl font-headline font-extrabold text-on-surface tracking-tight mb-2">My Profile</h2>
|
||||
<p class="text-on-surface-variant font-body text-lg">Manage your personal details and workspace settings.</p>
|
||||
</div>
|
||||
<!-- Profile Bento Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Left Column: Identity Card -->
|
||||
<div class="lg:col-span-1 space-y-6">
|
||||
<div class="bg-surface-container-lowest rounded-full p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.02)] flex flex-col items-center text-center">
|
||||
<div class="relative mb-6">
|
||||
<img alt="Profile large" class="w-32 h-32 rounded-full border-4 border-background" data-alt="Close up professional portrait of a man with clean grooming and a friendly expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-NX0DkqPQeqqe4Di3k5tsKzDkObHJa-liUTe1pKfCrP48h_eTMUlkmjnaaXR54eGOX26_igAQaYUVNTZtHlNE4eCiPx_rAleAG5oZviR4A0X7EJT02Vk7oAOFKSxIW2uv6dTOBDMLlQcJhCVhSEzj4YXvvzMrhIRBiwVPcMSXqCTOMMa4vP3FqX4Pfg_Xy_5a3D7dUSjQ7R-c9SL1SoN204CDp9qw5g0ZdsbOl5mZF5TYGcg1BhNy3UTk31URO54B2AceTXWGZfA"/>
|
||||
<button class="absolute bottom-0 right-0 bg-primary text-white p-2 rounded-full shadow-lg hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">photo_camera</span>
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="text-2xl font-headline font-bold text-on-surface">Alex Thompson</h3>
|
||||
<p class="text-on-surface-variant font-medium mb-6">Senior Operations Lead</p>
|
||||
<div class="w-full space-y-3 pt-6 border-t border-surface-container">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-on-surface-variant">Status</span>
|
||||
<span class="px-2 py-0.5 bg-primary-container/30 text-on-primary-container rounded-full text-xs font-bold uppercase">Active</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-on-surface-variant">Member since</span>
|
||||
<span class="text-on-surface font-semibold">Jan 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-full p-6 space-y-4">
|
||||
<h4 class="font-headline font-bold text-sm text-primary uppercase tracking-widest">Workspace</h4>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-primary" data-weight="fill">hub</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface leading-none">ZappCare HQ</p>
|
||||
<p class="text-xs text-on-surface-variant">Primary Enterprise Tenant</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Info & Actions -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Information Section -->
|
||||
<div class="bg-surface-container-lowest rounded-full p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.02)]">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h4 class="text-xl font-headline font-bold text-on-surface">Personal Information</h4>
|
||||
<button class="flex items-center gap-2 text-primary font-bold text-sm hover:underline">
|
||||
<span class="material-symbols-outlined text-lg">edit</span>
|
||||
Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Full Name</label>
|
||||
<p class="text-lg font-medium text-on-surface">Alex Thompson</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Email Address</label>
|
||||
<p class="text-lg font-medium text-on-surface">alex.t@zappcare.biz</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Role</label>
|
||||
<p class="text-lg font-medium text-on-surface">Senior Operations Lead</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Timezone</label>
|
||||
<p class="text-lg font-medium text-on-surface">Pacific Standard Time (PST)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Security & Management -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Change Password -->
|
||||
<div class="bg-white rounded-full p-8 border border-outline-variant/10 hover:border-primary/20 transition-all group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-surface-container-low flex items-center justify-center mb-4 group-hover:bg-primary-container transition-colors">
|
||||
<span class="material-symbols-outlined text-on-primary-container">lock_reset</span>
|
||||
</div>
|
||||
<h4 class="font-headline font-bold text-lg mb-2">Change Password</h4>
|
||||
<p class="text-sm text-on-surface-variant mb-6 leading-relaxed">Update your login credentials to keep your account secure.</p>
|
||||
<button class="w-full py-3 border border-outline-variant text-on-surface-variant rounded-xl font-bold text-sm hover:bg-surface-container transition-colors">
|
||||
Update Password
|
||||
</button>
|
||||
</div>
|
||||
<!-- Two-Factor -->
|
||||
<div class="bg-white rounded-full p-8 border border-outline-variant/10 hover:border-primary/20 transition-all group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-surface-container-low flex items-center justify-center mb-4 group-hover:bg-primary-container transition-colors">
|
||||
<span class="material-symbols-outlined text-on-primary-container">verified_user</span>
|
||||
</div>
|
||||
<h4 class="font-headline font-bold text-lg mb-2">Two-Factor Auth</h4>
|
||||
<p class="text-sm text-on-surface-variant mb-6 leading-relaxed">Add an extra layer of security to your workspace login.</p>
|
||||
<button class="w-full py-3 border border-outline-variant text-on-surface-variant rounded-xl font-bold text-sm hover:bg-surface-container transition-colors">
|
||||
Enable 2FA
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Workspace Quick Access -->
|
||||
<div class="bg-gradient-to-r from-on-secondary-container to-primary rounded-full p-8 text-white flex items-center justify-between overflow-hidden relative">
|
||||
<div class="relative z-10">
|
||||
<h4 class="font-headline font-bold text-xl mb-1">Advanced Settings</h4>
|
||||
<p class="text-primary-fixed-dim/80 text-sm">Configure API keys, webhooks and developer tools.</p>
|
||||
</div>
|
||||
<button class="relative z-10 px-6 py-3 bg-white text-on-primary-container rounded-full font-bold text-sm shadow-xl hover:scale-105 transition-transform">
|
||||
Open Dashboard
|
||||
</button>
|
||||
<!-- Abstract decorative element -->
|
||||
<div class="absolute -right-8 -bottom-8 w-48 h-48 bg-white/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_my_profile/screen.png
Normal file
BIN
screen_design/zappcare_my_profile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
262
screen_design/zappcare_no_data_found/code.html
Normal file
262
screen_design/zappcare_no_data_found/code.html
Normal file
@ -0,0 +1,262 @@
|
||||
<!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 - Empty State</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;
|
||||
}
|
||||
.glass-rail {
|
||||
background: rgba(242, 244, 246, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body antialiased">
|
||||
<!-- 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-4 py-6">
|
||||
<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" data-icon="dns">dns</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-[#0c6780] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-secondary font-bold">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 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>
|
||||
Infrastructure
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 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="analytics">analytics</span>
|
||||
Monitoring
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 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>
|
||||
Agents
|
||||
</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="domain">domain</span>
|
||||
Tenants
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 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>
|
||||
Health
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 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>
|
||||
Logs
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-4 border-t border-outline-variant/10 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 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>
|
||||
Settings
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 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>
|
||||
Support
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Anchor -->
|
||||
<header class="fixed top-0 right-0 left-64 h-16 z-40 bg-[#f7f9fc]/90 backdrop-blur-md flex items-center justify-between px-8 w-full">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="relative w-full max-w-md">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline" data-icon="search">search</span>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-outline-variant" placeholder="Search tenants or infrastructure..." type="text"/>
|
||||
</div>
|
||||
<nav class="hidden lg:flex items-center gap-6 ml-8">
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Dashboard</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Metrics</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 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-primary text-xs font-bold font-label uppercase tracking-wider hover:bg-surface-container-low transition-colors">
|
||||
System Status
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 text-slate-500 hover:bg-surface-container rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-1 rounded-full border-2 border-primary-container">
|
||||
<img alt="User Profile" class="w-6 h-6 rounded-full" data-alt="Close-up headshot of a professional system administrator in a clean office setting, soft professional lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDHeJQp3qFFKydzrN6yaCzKqQG9XSP9si6_-wRt52q5MA_ot7SBUuPeyLwqaS2bDDSkGK4XlPmdZrPsxPhxYEL2jtzIRGukmVKB8H8_1YUg2GyVq3jg7jLNimhj7AwXBCZMBnzCr6ObN1NcSs5bGFABANBsYZEIT5qCGeDMbWaILBf2N_EuWplfOYIhfpCVxFvMSBH5jyVYQYjRzYH5VXylK3A1G5qZhmJ59t_NMnYHaLfAFgWBvcnx6QZOOIf-ZJjufy75nFqXZ7U"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="p-8 max-w-7xl mx-auto flex flex-col items-center justify-center min-h-[calc(100vh-4rem)]">
|
||||
<!-- Empty State Architectural Shell -->
|
||||
<div class="w-full max-w-3xl flex flex-col items-center text-center">
|
||||
<!-- Illustration Area -->
|
||||
<div class="relative mb-12">
|
||||
<!-- Tonal architecture circles -->
|
||||
<div class="absolute inset-0 -z-10 flex items-center justify-center">
|
||||
<div class="w-80 h-80 bg-surface-container-low rounded-full opacity-40"></div>
|
||||
<div class="absolute w-64 h-64 bg-surface-container-high rounded-full opacity-30"></div>
|
||||
</div>
|
||||
<div class="relative w-72 h-72 flex items-center justify-center">
|
||||
<!-- Custom Architectural Composition instead of simple img -->
|
||||
<div class="grid grid-cols-2 gap-4 w-56 h-56">
|
||||
<div class="bg-surface-container-lowest shadow-2xl shadow-primary/5 rounded-full aspect-square flex items-center justify-center p-6">
|
||||
<span class="material-symbols-outlined text-6xl text-primary-container/60" data-icon="domain" style="font-size: 80px;">domain</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest shadow-2xl shadow-primary/5 rounded-full aspect-square flex items-center justify-center p-6 translate-y-8">
|
||||
<span class="material-symbols-outlined text-6xl text-outline-variant/40" data-icon="hub" style="font-size: 60px;">hub</span>
|
||||
</div>
|
||||
<div class="col-span-2 bg-gradient-to-br from-primary/10 to-primary-container/10 rounded-full h-32 flex items-center justify-center mt-4">
|
||||
<div class="flex -space-x-4">
|
||||
<div class="w-12 h-12 rounded-full border-4 border-surface-container-lowest bg-surface-dim"></div>
|
||||
<div class="w-12 h-12 rounded-full border-4 border-surface-container-lowest bg-surface-dim"></div>
|
||||
<div class="w-12 h-12 rounded-full border-4 border-surface-container-lowest bg-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-xs" data-icon="add">add</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Glass Action Bar -->
|
||||
<div class="absolute bottom-4 right-0 glass-rail px-4 py-2 rounded-full shadow-lg shadow-on-surface/5 flex items-center gap-3 border border-outline-variant/10">
|
||||
<div class="w-2 h-2 rounded-full bg-primary animate-pulse"></div>
|
||||
<span class="text-[10px] font-bold font-label text-on-surface-variant uppercase tracking-widest">Searching for nodes...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Textual Content -->
|
||||
<div class="space-y-4 max-w-xl">
|
||||
<h2 class="text-4xl font-extrabold font-headline text-on-surface tracking-tight">No active tenants found</h2>
|
||||
<p class="text-lg text-on-surface-variant font-body leading-relaxed">
|
||||
Your ZappCare ecosystem is currently quiet. Start by onboarding a new tenant or connecting an existing infrastructure node to begin monitoring.
|
||||
</p>
|
||||
</div>
|
||||
<!-- CTA Section -->
|
||||
<div class="mt-10 flex flex-col sm:flex-row items-center gap-4">
|
||||
<button class="group relative px-8 py-4 bg-gradient-to-br from-primary to-primary-container text-on-primary rounded-full font-headline font-bold text-lg shadow-xl shadow-primary/20 hover:scale-95 transition-all duration-200 ease-in-out flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="add_business">add_business</span>
|
||||
New Tenant
|
||||
</button>
|
||||
<button class="px-8 py-4 bg-transparent border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container-high rounded-full font-headline font-semibold transition-colors duration-200 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="auto_awesome">auto_awesome</span>
|
||||
Import Configuration
|
||||
</button>
|
||||
</div>
|
||||
<!-- Secondary Assistance -->
|
||||
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
|
||||
<div class="p-6 bg-surface-container-low rounded-full text-left flex items-start gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<div class="p-3 bg-surface-container-lowest rounded-full text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="menu_book">menu_book</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface font-headline">Read Docs</h4>
|
||||
<p class="text-xs text-on-surface-variant font-body">Learn how to setup clusters</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-surface-container-low rounded-full text-left flex items-start gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<div class="p-3 bg-surface-container-lowest rounded-full text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="live_help">live_help</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface font-headline">Get Support</h4>
|
||||
<p class="text-xs text-on-surface-variant font-body">Talk to an integration expert</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-surface-container-low rounded-full text-left flex items-start gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<div class="p-3 bg-surface-container-lowest rounded-full text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="play_circle">play_circle</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface font-headline">Tutorials</h4>
|
||||
<p class="text-xs text-on-surface-variant font-body">Quick start video guides</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Quick Action (suppressed on this specific empty state to avoid redundancy with primary CTA) -->
|
||||
<!-- But keeping structural placeholder if needed elsewhere -->
|
||||
<div class="hidden">
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-on-primary rounded-full shadow-2xl flex items-center justify-center">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_no_data_found/screen.png
Normal file
BIN
screen_design/zappcare_no_data_found/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
274
screen_design/zappcare_notifications/code.html
Normal file
274
screen_design/zappcare_notifications/code.html
Normal file
@ -0,0 +1,274 @@
|
||||
<!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 | Notification Center</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@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": {
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-container": "#36647e",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"secondary": "#35637d",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#f7f9fc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-surface": "#191c1e",
|
||||
"on-background": "#191c1e",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary": "#865219",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-container": "#005870",
|
||||
"on-primary": "#ffffff"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body min-h-screen">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen fixed left-0 top-0 w-64 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-xl flex flex-col py-8 px-4 space-y-2 z-50">
|
||||
<div class="flex items-center px-4 mb-8">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-container rounded-xl flex items-center justify-center mr-3">
|
||||
<span class="material-symbols-outlined text-white" data-icon="architecture">architecture</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Architectural Inbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mb-6 mx-2 py-3 px-4 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl font-headline font-bold flex items-center justify-center space-x-2 transition-transform duration-200 active:scale-95 shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add">add</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Nav Item: Inbox -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
||||
<span>Inbox</span>
|
||||
</a>
|
||||
<!-- Nav Item: Analytics -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="bar_chart">bar_chart</span>
|
||||
<span>Analytics</span>
|
||||
</a>
|
||||
<!-- Nav Item: Campaigns -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||
<span>Campaigns</span>
|
||||
</a>
|
||||
<!-- Nav Item: Team -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span>Team</span>
|
||||
</a>
|
||||
<!-- Nav Item: Settings -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 flex items-center space-x-3 px-4 py-3 bg-white/40 rounded-xl">
|
||||
<img class="w-8 h-8 rounded-full object-cover" data-alt="portrait of a professional workspace administrator in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuASgoUmV_cxkzoEI0lwhSuAymFWXnKVkkKpjp4xrxagKCQphBFafh6uLraEEPzWdO7tQ0iEBK724XW8zZUCulWzA2ZXx23qo_dQyPOzN6jWioG6U_BxUN7sFCga13xdCE1G2LsnMVVZ1Tg6kkeMrJR1lDnSo1vqZ--c9kJ-BuN2iuzRTGgYcyby90eEtHQdTvFUrO05uA2hrlOwNvHx1jtgW2eKDziTglJePR7n4QYYZybRq5w_Zym0DFO_2JqYIEBIiXnF7gke9O4"/>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-xs font-bold truncate">ZappCare Workspace</p>
|
||||
<p class="text-[10px] text-slate-500">Admin Panel</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Workspace Area -->
|
||||
<main class="ml-64 min-h-screen relative">
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex items-center bg-surface-container-highest px-4 py-2 rounded-full w-80">
|
||||
<span class="material-symbols-outlined text-outline mr-2 text-xl" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-full p-0" placeholder="Search conversations..." type="text"/>
|
||||
</div>
|
||||
<nav class="flex space-x-6">
|
||||
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">Overview</a>
|
||||
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">History</a>
|
||||
<a class="text-sky-700 font-bold border-b-2 border-sky-600 pb-1 font-['Inter'] text-sm tracking-normal" href="#">Audit Logs</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="relative w-10 h-10 flex items-center justify-center text-primary rounded-full hover:bg-primary-container/20 transition-all duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 rounded-full hover:bg-slate-200 transition-all duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 rounded-full hover:bg-slate-200 transition-all duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Overlay / Notification Center Rail -->
|
||||
<section class="absolute top-16 right-8 w-96 z-50">
|
||||
<div class="glass-panel rounded-3xl shadow-2xl shadow-on-surface/5 p-6 overflow-hidden flex flex-col max-h-[calc(100vh-100px)]">
|
||||
<!-- Notification Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black tracking-tight text-on-surface">Notifications</h2>
|
||||
<p class="text-sm text-on-surface-variant font-medium">4 urgent alerts pending</p>
|
||||
</div>
|
||||
<button class="text-primary text-xs font-bold hover:underline">Clear all</button>
|
||||
</div>
|
||||
<!-- Tonal Groups -->
|
||||
<div class="space-y-6 overflow-y-auto pr-2">
|
||||
<!-- Alert: Severity Red -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-error-container/30 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined" data-icon="wifi_off" style="font-variation-settings: 'FILL' 1;">wifi_off</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">Channel Disconnected</h3>
|
||||
<span class="text-[10px] font-bold text-outline">2m ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">The 'Sales-Support' WhatsApp API channel has lost connection. Action required.</p>
|
||||
<div class="mt-3 flex gap-2">
|
||||
<button class="text-xs font-bold py-1.5 px-3 bg-error text-white rounded-full">Reconnect Now</button>
|
||||
<button class="text-xs font-bold py-1.5 px-3 text-on-surface-variant hover:bg-surface-container-high rounded-full">Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Alert: Severity Red -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-error-container/30 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined" data-icon="error_outline" style="font-variation-settings: 'FILL' 1;">error_outline</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">Delivery Failure</h3>
|
||||
<span class="text-[10px] font-bold text-outline">15m ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">High bounce rate detected in 'Summer Promo'. 1,204 messages failed to deliver.</p>
|
||||
<div class="mt-3">
|
||||
<button class="text-xs font-bold text-primary hover:underline">View error report</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Success: Severity Green (using tertiary from theme) -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary-container/30 flex items-center justify-center text-on-secondary-container">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">Campaign Completed</h3>
|
||||
<span class="text-[10px] font-bold text-outline">1h ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">'Customer Feedback Q3' has finished sending to all 45,000 recipients.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Info/Success: New User -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary-container/30 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="person_add" style="font-variation-settings: 'FILL' 1;">person_add</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">New User Invited</h3>
|
||||
<span class="text-[10px] font-bold text-outline">2h ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">Sarah Miller has been invited to the 'Product Marketing' team workspace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Architectural Lift -->
|
||||
<div class="mt-6 pt-6 border-t-2 border-surface-container-high text-center">
|
||||
<button class="w-full py-4 text-sm font-bold text-primary hover:bg-primary-container/10 transition-colors rounded-2xl">
|
||||
View All Activity History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Main Content Canvas (Background) -->
|
||||
<div class="p-8 space-y-8 opacity-40 select-none pointer-events-none">
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="h-48 bg-surface-container-low rounded-3xl"></div>
|
||||
<div class="h-48 bg-surface-container-low rounded-3xl"></div>
|
||||
<div class="h-48 bg-surface-container-low rounded-3xl"></div>
|
||||
</div>
|
||||
<div class="h-96 bg-surface-container-low rounded-3xl w-full"></div>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="h-64 bg-surface-container-low rounded-3xl"></div>
|
||||
<div class="h-64 bg-surface-container-low rounded-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_notifications/screen.png
Normal file
BIN
screen_design/zappcare_notifications/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
432
screen_design/zappcare_reports_overview/code.html
Normal file
432
screen_design/zappcare_reports_overview/code.html
Normal file
@ -0,0 +1,432 @@
|
||||
<!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 Reports Overview</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": {
|
||||
"on-primary-container": "#005870",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-surface": "#2d3133",
|
||||
"background": "#f7f9fc",
|
||||
"surface-dim": "#d8dadc",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"outline": "#6f787d",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary": "#35637d",
|
||||
"primary": "#0c6780",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container": "#eceef0",
|
||||
"tertiary": "#865219",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.tonal-shift-no-border {
|
||||
border: none !important;
|
||||
}
|
||||
.glass-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
.architectural-blur {
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="fixed left-0 top-0 h-full flex flex-col p-4 h-screen w-64 border-r-0 bg-[#f2f4f6] dark:bg-slate-900 z-50 transition-all duration-200 ease-in-out">
|
||||
<div class="flex items-center gap-3 px-2 mb-8">
|
||||
<div class="w-10 h-10 flex items-center justify-center rounded-xl bg-primary-container">
|
||||
<img alt="ZappCare Logo" class="w-7 h-7" data-alt="clean minimalist medical healthcare logo with modern typography and soft blue aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2wjq7z2m3Ln9ONyd4a7EQiOQe75UwbwK0Rm3SEYXrV5qVZdqN8aar6gJYtCENW3sxicF1jnuZwKO9Tb5oIfv4DF8P21ylHmDbLfROQt8eUgq3vX3gcrBkfmAiY2FgjbF_3u2HCG-EuDEfxKm-LWRsjk7I73fIffNPg7Qj5hCsPSrtghKpPP86DUixmA4O4RGHJXXlJBay4IyHkT1jo2cmbkOZPNQE4B7Rj3Lb75pttWokI6j2dGNn4BA5kpbam5fk3cGtPIJlcuo"/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-outline font-bold">Business Inbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="glass-gradient text-on-primary w-full py-3 px-4 rounded-full flex items-center justify-center gap-2 mb-8 shadow-lg shadow-primary/20 scale-95 active:scale-90 transition-all duration-200 ease-in-out font-headline font-bold">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
New Chat
|
||||
</button>
|
||||
<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 rounded-xl transition-all duration-200 ease-in-out font-['Manrope'] font-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span>Team</span>
|
||||
</a>
|
||||
<!-- Active Tab: Reports -->
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold font-['Manrope'] tracking-tight transition-all duration-200 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="analytics" style="font-variation-settings: 'FILL' 1;">analytics</span>
|
||||
<span>Reports</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 border-t border-outline-variant/10">
|
||||
<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 rounded-xl transition-all duration-200 ease-in-out 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-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 ease-in-out font-['Manrope'] font-semibold tracking-tight" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Canvas -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 bg-[#f7f9fc]/85 dark:bg-slate-950/85 shadow-none backdrop-blur-md flex justify-between items-center px-8">
|
||||
<div class="flex items-center gap-6">
|
||||
<h2 class="font-headline font-extrabold text-[#0c6780] dark:text-[#87ceeb] text-lg">Reports Overview</h2>
|
||||
<div class="flex items-center gap-4 text-sm font-['Inter']">
|
||||
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1 transition-colors duration-200" href="#">Overview</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 transition-colors duration-200" href="#">Activity</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative hidden lg:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm" data-icon="search">search</span>
|
||||
<input class="pl-10 pr-4 py-1.5 bg-surface-container rounded-full border-none text-xs w-64 focus:ring-2 focus:ring-primary-container" placeholder="Search analytics..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full bg-secondary-container overflow-hidden ml-2">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional male portrait with friendly expression and clean corporate attire" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFAa2ljiU2PJfwpxKai47nC1A0G9pjEmkifEKBENFB1unDWmS7HKIZ8y7Ggplt7wt4CkqhNHdKzuWXpwUCkOE2fWS1jQkDt1buMU3ZDPKUrR_uklnk-Zqr-Bm4cLOEfTC9jdB6G0CE2nkTlKcpeATHAdbLqwA6NjHZ83rvhG487FKdKxjsKC0GSieDjeypju4kAelm2gVXwVLLXCn05xgqJQ11K5LwthKCUopMlYBmAz8Xr6n0g-YqQiV_EOA04InTPqrwebw0oog"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Dashboard Content -->
|
||||
<div class="p-8 max-w-7xl mx-auto">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-surface-container-low p-1 rounded-full flex">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold bg-surface-container-lowest shadow-sm rounded-full text-on-primary-container">7 Days</button>
|
||||
<button class="px-4 py-1.5 text-xs font-medium text-outline">30 Days</button>
|
||||
<button class="px-4 py-1.5 text-xs font-medium text-outline">90 Days</button>
|
||||
</div>
|
||||
<div class="h-8 w-px bg-outline-variant/30"></div>
|
||||
<div class="relative">
|
||||
<button class="flex items-center gap-2 bg-surface-container-lowest px-4 py-2 rounded-full text-xs font-medium border border-outline-variant/20 shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="filter_list">filter_list</span>
|
||||
All Channels
|
||||
<span class="material-symbols-outlined text-sm" data-icon="expand_more">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 bg-primary text-on-primary px-6 py-2.5 rounded-full text-sm font-bold shadow-md hover:shadow-lg transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="download">download</span>
|
||||
Export Data
|
||||
</button>
|
||||
</div>
|
||||
<!-- KPI Cards Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- Response Time -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-primary-container/20 rounded-xl text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="bolt">bolt</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">-12%</span>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-outline mb-1">Avg. Response Time</p>
|
||||
<h3 class="text-2xl font-extrabold font-headline text-on-surface">1.8 <span class="text-sm font-medium text-outline">min</span></h3>
|
||||
</div>
|
||||
<!-- Resolution Rate -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-secondary-container/30 rounded-xl text-secondary">
|
||||
<span class="material-symbols-outlined" data-icon="task_alt">task_alt</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+4.2%</span>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-outline mb-1">Resolution Rate</p>
|
||||
<h3 class="text-2xl font-extrabold font-headline text-on-surface">94.2%</h3>
|
||||
</div>
|
||||
<!-- Agent Productivity -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-tertiary-container/20 rounded-xl text-tertiary">
|
||||
<span class="material-symbols-outlined" data-icon="trending_up">trending_up</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-on-error-container bg-error-container/30 px-2 py-1 rounded-full">-0.8%</span>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-outline mb-1">Productivity Score</p>
|
||||
<h3 class="text-2xl font-extrabold font-headline text-on-surface">8.4 / 10</h3>
|
||||
</div>
|
||||
<!-- Message Volume -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-primary-container/20 rounded-xl text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+18%</span>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-outline mb-1">Total Volume</p>
|
||||
<h3 class="text-2xl font-extrabold font-headline text-on-surface">12,482</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Layout Content -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Chart Card -->
|
||||
<div class="lg:col-span-2 bg-surface-container-lowest rounded-full p-8 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold font-headline">Message Traffic</h3>
|
||||
<p class="text-sm text-outline">Total volume across all integrated channels</p>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-3 h-3 rounded-full bg-primary"></span>
|
||||
<span class="text-xs font-medium">WhatsApp</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-3 h-3 rounded-full bg-secondary-container"></span>
|
||||
<span class="text-xs font-medium">Email</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart Placeholder Visual -->
|
||||
<div class="h-64 flex items-end justify-between gap-4 px-4 relative">
|
||||
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20">
|
||||
<div class="border-t border-outline"></div>
|
||||
<div class="border-t border-outline"></div>
|
||||
<div class="border-t border-outline"></div>
|
||||
<div class="border-t border-outline"></div>
|
||||
</div>
|
||||
<div class="w-full bg-primary-container/30 h-[40%] rounded-t-lg relative group transition-all hover:bg-primary-container">
|
||||
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">1.2k</div>
|
||||
</div>
|
||||
<div class="w-full bg-primary h-[60%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary-container/30 h-[45%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary h-[75%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary-container/30 h-[55%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary h-[90%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary-container/30 h-[65%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary h-[50%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary-container/30 h-[70%] rounded-t-lg relative group transition-all"></div>
|
||||
<div class="w-full bg-primary h-[85%] rounded-t-lg relative group transition-all"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-4 px-4 text-[10px] font-bold text-outline uppercase tracking-wider">
|
||||
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Channel Breakdown -->
|
||||
<div class="bg-surface-container-low rounded-full p-8 shadow-sm flex flex-col">
|
||||
<h3 class="text-lg font-bold font-headline mb-6">Volume by Channel</h3>
|
||||
<div class="space-y-6 flex-1">
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="font-medium">WhatsApp</span>
|
||||
<span class="font-bold">65%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-[65%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="font-medium">Web Chat</span>
|
||||
<span class="font-bold">22%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-container w-[22%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="font-medium">Instagram</span>
|
||||
<span class="font-bold">10%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
||||
<div class="h-full bg-secondary-fixed w-[10%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="font-medium">Telegram</span>
|
||||
<span class="font-bold">3%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
||||
<div class="h-full bg-outline-variant w-[3%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 p-4 bg-surface-container-lowest rounded-xl">
|
||||
<p class="text-xs text-outline leading-relaxed">WhatsApp continues to be your primary communication driver, seeing a <span class="text-emerald-600 font-bold">12% increase</span> since last week.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Top Performing Agents Table -->
|
||||
<div class="lg:col-span-3 bg-surface-container-lowest rounded-full p-8 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="text-lg font-bold font-headline">Top Performing Agents</h3>
|
||||
<button class="text-primary text-sm font-bold hover:underline">View All Team Members</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead>
|
||||
<tr class="text-[10px] font-bold text-outline uppercase tracking-widest">
|
||||
<th class="pb-4 px-2">Agent</th>
|
||||
<th class="pb-4 px-2">Conversations</th>
|
||||
<th class="pb-4 px-2 text-center">Avg. Score</th>
|
||||
<th class="pb-4 px-2">Avg. Response</th>
|
||||
<th class="pb-4 px-2 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm divide-y divide-surface-container">
|
||||
<tr>
|
||||
<td class="py-4 px-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-10 w-10 rounded-xl bg-primary-container overflow-hidden">
|
||||
<img alt="Sarah J." class="w-full h-full object-cover" data-alt="professional woman portrait with confident expression and soft daylight lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDhOacpdMZp_jLSBVJChzCcpsTYlXjnrXlh53ZNYDPJaWhSdrm7ZPZ-yTg_M3jTMGdF7Wv1zDV9IlPe9unG7iPvMQDCjLuexll2WzdGqVpS4-7LmqXGKj7vCBwgc4_pJtoz0rDjDANwC2dsp_IEcPrLqiRilyrrNDd62wvelnnbqg0x-1sLrZUDuqHdBFv-hm_1xSjxKXjEDEILVsNSlMgTrpGa45eAl1hyAIR5H8aT1QsCJ7u6hxdxrb-BsKqodhQGy4xHJPcX73w"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Sarah Jenkins</p>
|
||||
<p class="text-[11px] text-outline">Senior Support</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-2 font-medium">842</td>
|
||||
<td class="py-4 px-2">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1 bg-emerald-50 text-emerald-700 px-2 py-1 rounded-lg font-bold text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
4.9
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-2 text-outline">52s</td>
|
||||
<td class="py-4 px-2 text-right">
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
||||
<span class="text-xs font-medium">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 px-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-10 w-10 rounded-xl bg-secondary-container overflow-hidden">
|
||||
<img alt="Marcus K." class="w-full h-full object-cover" data-alt="modern businessman profile photo with sharp features and professional studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_dqlWpn2b75BCUdJ3z6Vl0YSimtey6HWKcJSMITaiIqcsqi-KxgkwNV073U38cdbvdi7Xtc_G09dqLqUBrlr5Rz8o74nRSfYvUmJKWUzpzXOcj_ac8dkVRO3bnEjN6fw1TVXXHcP3REB0BjX8WB1V5Z-vmzVGDUmNtUx7ImgCJ2zmsWjfsm_1JGao_itA9LB-m0IyC0chKwff-JXID3XtTyiY3-AmTQDcvukWJSOVQu9lIt4z7-5Yfa17tn2UYBSzNomDRlvR24k"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Marcus Kinsley</p>
|
||||
<p class="text-[11px] text-outline">Lead Specialist</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-2 font-medium">721</td>
|
||||
<td class="py-4 px-2">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1 bg-emerald-50 text-emerald-700 px-2 py-1 rounded-lg font-bold text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
4.8
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-2 text-outline">1m 15s</td>
|
||||
<td class="py-4 px-2 text-right">
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
||||
<span class="text-xs font-medium">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 px-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-10 w-10 rounded-xl bg-tertiary-container/30 overflow-hidden">
|
||||
<img alt="Elena R." class="w-full h-full object-cover" data-alt="modern business woman portrait in professional office environment with blurred city background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBA39BkrsNt24m7toNQWz_9gL_LwTsk6Z5a5-ntfZoDt_GCJrQWql4d3AtIf-nd0rOJmbPpcS64Fkj9ikcKs9x0e7gxKkrU7BrynkdbAVe9L9E4n5GHlD3rKyrCY9o-X0fnBgkCRM0aFKpVTo-vTIEC7UJwUBGpsaruGXe4vZo1_6kdBTSNcMIoDk2CXBokKawso-eEMiyYehbqu9aM-bgDdDlEBQjCaisLgDezDXPyHJnNWlanM4Cn9E_a7uegWPvdwro94k0Te2Y"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Elena Rodriguez</p>
|
||||
<p class="text-[11px] text-outline">Customer Success</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-2 font-medium">654</td>
|
||||
<td class="py-4 px-2">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1 bg-surface-container text-on-surface-variant px-2 py-1 rounded-lg font-bold text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
4.6
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-2 text-outline">1m 42s</td>
|
||||
<td class="py-4 px-2 text-right">
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-slate-300 mr-2"></span>
|
||||
<span class="text-xs font-medium text-outline">Offline</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_reports_overview/screen.png
Normal file
BIN
screen_design/zappcare_reports_overview/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
348
screen_design/zappcare_super_admin_dashboard/code.html
Normal file
348
screen_design/zappcare_super_admin_dashboard/code.html
Normal file
@ -0,0 +1,348 @@
|
||||
<!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 Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;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": {
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-container": "#36647e",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"secondary": "#35637d",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#f7f9fc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-surface": "#191c1e",
|
||||
"on-background": "#191c1e",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary": "#865219",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-container": "#005870",
|
||||
"on-primary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; color: #191c1e; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.glass-card { backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.85); }
|
||||
.cta-gradient { background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%); }
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #e0e3e5; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex min-h-screen">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen fixed left-0 top-0 w-64 border-none bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-xl flex flex-col py-8 px-4 space-y-2 z-50">
|
||||
<div class="flex items-center gap-3 px-2 mb-10">
|
||||
<div class="w-10 h-10 rounded-full cta-gradient flex items-center justify-center text-white shadow-lg">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">architecture</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100 font-headline">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Architectural Inbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-white/90 dark:bg-slate-800/90 text-sky-700 dark:text-sky-300 rounded-xl shadow-sm text-sm font-semibold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">analytics</span>
|
||||
<span>Analytics</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">inbox</span>
|
||||
<span>Inbox</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">campaign</span>
|
||||
<span>Campaigns</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span>Team</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<button class="cta-gradient text-white py-3 px-4 rounded-full font-headline font-bold flex items-center justify-center gap-2 shadow-xl shadow-sky-900/10 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 ml-64 min-h-screen bg-surface flex flex-col">
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-lg">search</span>
|
||||
<input class="bg-surface-container-highest border-none rounded-full pl-10 pr-4 py-1.5 text-sm w-64 focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search infrastructure..." type="text"/>
|
||||
</div>
|
||||
<nav class="flex gap-6">
|
||||
<a class="text-sky-700 font-bold border-b-2 border-sky-600 pb-1 text-sm" href="#">Overview</a>
|
||||
<a class="text-slate-500 hover:text-sky-900 transition-colors text-sm" href="#">History</a>
|
||||
<a class="text-slate-500 hover:text-sky-900 transition-colors text-sm" href="#">Audit Logs</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-outline-variant/30"></div>
|
||||
<div class="flex items-center gap-3 pl-2">
|
||||
<img alt="Admin User Profile" class="w-8 h-8 rounded-full border-2 border-white shadow-sm" data-alt="Professional headshot of a middle-aged tech administrator with a friendly expression, soft studio lighting on a neutral grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQYO0i-ap1-AI4K0NrOF3xhsJVx6uaZXojFbp3Atx-sIZ4j_fMXMi-5VcnrIbrG5QPGfpgTEhntm6HYd2xHHCX7VMKe-mI-PZWZ1TJrnxih790saKEBKnLm-obR83zUxG40F5nliNd9UcUbZXJCG16aoT9cNMzfHrXGp2apdpSKQgv-uyMEbIheCWcDjb6yYxhWDrd9iiZgKY6_BZQSkE3t-AElIj8cvcMFCkD1zE4w1ftGP0eBXJyQwj_fooJNhhBunSrzipLBYs"/>
|
||||
<span class="text-sm font-semibold text-on-surface">Admin</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas Content -->
|
||||
<section class="p-10 max-w-7xl mx-auto w-full space-y-10">
|
||||
<!-- Hero Header -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="text-4xl font-headline font-extrabold text-on-surface tracking-tight">System Health</h2>
|
||||
<p class="text-on-surface-variant font-medium">Real-time performance metrics across the ZappCare ecosystem.</p>
|
||||
</div>
|
||||
<!-- Bento Grid KPI Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<!-- KPI 1 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-primary-container/20 rounded-xl text-primary group-hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">corporate_fare</span>
|
||||
</div>
|
||||
<span class="text-emerald-600 text-xs font-bold flex items-center">+12% <span class="material-symbols-outlined text-sm">arrow_upward</span></span>
|
||||
</div>
|
||||
<div class="text-3xl font-headline font-extrabold text-on-surface">1,402</div>
|
||||
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Active Tenants</div>
|
||||
</div>
|
||||
<!-- KPI 2 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-secondary-container/20 rounded-xl text-secondary group-hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hub</span>
|
||||
</div>
|
||||
<span class="text-emerald-600 text-xs font-bold flex items-center">+4% <span class="material-symbols-outlined text-sm">arrow_upward</span></span>
|
||||
</div>
|
||||
<div class="text-3xl font-headline font-extrabold text-on-surface">8,920</div>
|
||||
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Active Channels</div>
|
||||
</div>
|
||||
<!-- KPI 3 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-tertiary-container/20 rounded-xl text-tertiary group-hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">send_and_archive</span>
|
||||
</div>
|
||||
<span class="text-on-surface-variant text-xs font-bold flex items-center">Stable <span class="material-symbols-outlined text-sm">horizontal_rule</span></span>
|
||||
</div>
|
||||
<div class="text-3xl font-headline font-extrabold text-on-surface">99.98%</div>
|
||||
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Delivery Rate</div>
|
||||
</div>
|
||||
<!-- KPI 4 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-3 bg-error-container/20 rounded-xl text-error group-hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">data_usage</span>
|
||||
</div>
|
||||
<span class="text-error text-xs font-bold flex items-center">Warning <span class="material-symbols-outlined text-sm">priority_high</span></span>
|
||||
</div>
|
||||
<div class="text-3xl font-headline font-extrabold text-on-surface">84.2%</div>
|
||||
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Quota Usage</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Dashboard Layout: Chart & Alerts -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
||||
<!-- Message Volume Chart Visual -->
|
||||
<div class="lg:col-span-2 bg-surface-container-lowest rounded-full p-8 shadow-sm">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-headline font-extrabold text-on-surface">Platform Message Volume</h3>
|
||||
<p class="text-sm text-outline font-medium">Aggregated across all global tenants</p>
|
||||
</div>
|
||||
<select class="bg-surface border-none rounded-xl text-sm font-semibold text-primary py-1 px-4 ring-1 ring-outline-variant/30">
|
||||
<option>Last 7 Days</option>
|
||||
<option>Last 30 Days</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Abstract Chart Representation -->
|
||||
<div class="h-64 flex items-end justify-between gap-2 px-2">
|
||||
<div class="w-full bg-primary-container/20 rounded-t-xl h-[40%] hover:bg-primary-container transition-colors relative group">
|
||||
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">1.2M</div>
|
||||
</div>
|
||||
<div class="w-full bg-primary-container/20 rounded-t-xl h-[55%] hover:bg-primary-container transition-colors relative group">
|
||||
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">1.8M</div>
|
||||
</div>
|
||||
<div class="w-full bg-primary-container/20 rounded-t-xl h-[45%] hover:bg-primary-container transition-colors relative group"></div>
|
||||
<div class="w-full bg-primary-container/20 rounded-t-xl h-[70%] hover:bg-primary-container transition-colors relative group"></div>
|
||||
<div class="w-full bg-primary-container h-[85%] rounded-t-xl shadow-lg shadow-primary-container/20 relative group">
|
||||
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] px-2 py-1 rounded opacity-100 transition-opacity">2.4M (Peak)</div>
|
||||
</div>
|
||||
<div class="w-full bg-primary-container/20 rounded-t-xl h-[60%] hover:bg-primary-container transition-colors relative group"></div>
|
||||
<div class="w-full bg-primary-container/20 rounded-t-xl h-[50%] hover:bg-primary-container transition-colors relative group"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-4 text-[10px] font-bold text-outline uppercase tracking-widest px-2">
|
||||
<span>Mon</span>
|
||||
<span>Tue</span>
|
||||
<span>Wed</span>
|
||||
<span>Thu</span>
|
||||
<span>Fri</span>
|
||||
<span>Sat</span>
|
||||
<span>Sun</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Disconnected Channels Alert List -->
|
||||
<div class="bg-surface-container-low rounded-full p-8">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">emergency_home</span>
|
||||
<h3 class="text-xl font-headline font-extrabold text-on-surface">Critical Alerts</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-xs font-bold uppercase tracking-widest text-outline border-b border-outline-variant/20 pb-2">Disconnected Channels (4)</p>
|
||||
<!-- Alert Item -->
|
||||
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-xl shadow-sm border-l-4 border-error group cursor-pointer hover:translate-x-1 transition-transform">
|
||||
<div class="w-10 h-10 rounded-full bg-error-container/10 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined text-lg">sms_failed</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold text-on-surface">MedTech Solutions</p>
|
||||
<p class="text-[11px] text-on-surface-variant font-medium">WhatsApp API • Disconnected 2h ago</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
|
||||
</div>
|
||||
<!-- Alert Item -->
|
||||
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-xl shadow-sm border-l-4 border-error group cursor-pointer hover:translate-x-1 transition-transform">
|
||||
<div class="w-10 h-10 rounded-full bg-error-container/10 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined text-lg">sms_failed</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold text-on-surface">Global Care Inc.</p>
|
||||
<p class="text-[11px] text-on-surface-variant font-medium">Line Messenger • Disconnected 14m ago</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
|
||||
</div>
|
||||
<!-- Alert Item -->
|
||||
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-xl shadow-sm border-l-4 border-error group cursor-pointer hover:translate-x-1 transition-transform">
|
||||
<div class="w-10 h-10 rounded-full bg-error-container/10 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined text-lg">sms_failed</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold text-on-surface">ZappCare Internal</p>
|
||||
<p class="text-[11px] text-on-surface-variant font-medium">Test Sandbox • Auth Failure</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
|
||||
</div>
|
||||
<button class="w-full py-3 text-xs font-extrabold uppercase tracking-widest text-primary hover:bg-primary-container/10 rounded-xl transition-colors mt-2">
|
||||
View All Incidents
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Feature: Tenant Performance Asymmetric -->
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="flex-1 glass-card p-8 rounded-full shadow-sm relative overflow-hidden group">
|
||||
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl group-hover:scale-150 transition-transform duration-700"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="text-xs font-bold text-primary uppercase tracking-widest mb-2">Efficiency Leader</div>
|
||||
<h4 class="text-2xl font-headline font-extrabold text-on-surface mb-6">Top Performing Tenant</h4>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-24 h-24 rounded-full p-1 bg-gradient-to-tr from-primary to-primary-container">
|
||||
<img alt="Corporate Logo" class="w-full h-full object-cover rounded-full border-4 border-white" data-alt="Modern office building architectural detail with glass windows reflecting a bright blue sky, high-tech corporate aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDpwXUrs2XSUSczkOMdU5Ai4z8GoMrNsG-piTMoN3YRZt2gXX0bV9Fn8sM0HIVIYovvn5gPFhDjWikdmiuhlm9NB7saO_c_BvIN9j7AnWawP5mkLoW51cpk41lrqSW-t0NnnR9KPP5k1ZUFKSY7pBhRv24ayg9YMXPa5T1IihJFR7-OC1yp9YHUCGiKof_qpOuRhJvi4pZZmTDa6s51GSTjgTShfC1LnX4eYiTKy_3EFdAiYsq1_1cfa6lpjcR-wwoqoRpCQ_b4DfA"/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-xl font-bold text-on-surface">Aero Dynamics Ltd.</p>
|
||||
<div class="flex gap-4">
|
||||
<div class="text-center">
|
||||
<div class="text-sm font-bold text-primary">12k</div>
|
||||
<div class="text-[10px] text-outline font-bold uppercase tracking-tighter">Daily Msg</div>
|
||||
</div>
|
||||
<div class="text-center border-l border-outline-variant/30 pl-4">
|
||||
<div class="text-sm font-bold text-emerald-600">99.4%</div>
|
||||
<div class="text-[10px] text-outline font-bold uppercase tracking-tighter">CSAT Score</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/3 bg-on-surface p-8 rounded-full shadow-xl text-white flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-[10px] font-bold text-primary-container uppercase tracking-widest mb-2">Infrastructure Note</div>
|
||||
<p class="text-sm font-medium leading-relaxed opacity-80">
|
||||
Scheduled maintenance for the US-East message cluster will commence at <span class="text-white font-bold">04:00 UTC</span>. No downtime expected.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-6 pt-6 border-t border-white/10">
|
||||
<span class="material-symbols-outlined text-primary-container">dns</span>
|
||||
<span class="text-[10px] font-bold tracking-widest uppercase">System Region: Global-1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- FAB Action (Contextual to Dashboard) -->
|
||||
<div class="fixed bottom-10 right-10">
|
||||
<button class="w-16 h-16 rounded-full cta-gradient shadow-2xl flex items-center justify-center text-white hover:scale-105 active:scale-95 transition-all group">
|
||||
<span class="material-symbols-outlined text-3xl group-hover:rotate-90 transition-transform">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_super_admin_dashboard/screen.png
Normal file
BIN
screen_design/zappcare_super_admin_dashboard/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
349
screen_design/zappcare_team_management_1/code.html
Normal file
349
screen_design/zappcare_team_management_1/code.html
Normal file
@ -0,0 +1,349 @@
|
||||
<!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 Team Management</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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": {
|
||||
"on-primary-container": "#005870",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-surface": "#2d3133",
|
||||
"background": "#f7f9fc",
|
||||
"surface-dim": "#d8dadc",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"outline": "#6f787d",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary": "#35637d",
|
||||
"primary": "#0c6780",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container": "#eceef0",
|
||||
"tertiary": "#865219",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; color: #191c1e; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); }
|
||||
.primary-gradient { background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="fixed left-0 top-0 h-full flex flex-col p-4 h-screen w-64 border-r-0 bg-[#f2f4f6] dark:bg-slate-900 backdrop-blur-xl z-50">
|
||||
<div class="flex items-center gap-3 px-2 mb-8">
|
||||
<img alt="Organization Logo" class="w-10 h-10 rounded-full" data-alt="clean geometric medical tech logo with soft blue gradients and minimalist healthcare cross symbol" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRa-z2tksRe0sUflK_n8rpLRMy466fTFBb7GXpEV6Xb-2_e8JV3LA00nyFZQLVbz8Qf3LIGy7EXEQPDiJ6exMjEwDSnV9GC0Y0GlTx8Rb6B90_cjNhOeL7n6jJ3KvPvIFwb6ZU_3zNr0Qb6Gi7UN1-AZdL5M52jVxhbtaSJmq-SPm9OWOIEffeT6jPHv-cn7JR2MSgwtP3omc0x8FvYJw4YR35J_dmlcsbaC1Umv2hBwLTGT8e3342KIch3EWAo-Y7ElRiRDnregM"/>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-xs font-['Manrope'] font-semibold tracking-tight text-slate-500">Business Inbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary-gradient text-on-primary font-headline font-bold py-4 px-6 rounded-xl mb-8 flex items-center justify-center gap-2 shadow-lg shadow-primary/20 hover:scale-[0.98] transition-transform active:scale-90">
|
||||
<span class="material-symbols-outlined">add_comment</span>
|
||||
New Chat
|
||||
</button>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<!-- Active State: Team -->
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out bg-[#87ceeb] text-[#005870] rounded-xl font-bold" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Team</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Reports</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 space-y-2">
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 flex justify-between items-center px-8 bg-[#f7f9fc]/85 dark:bg-slate-950/85 backdrop-blur-md shadow-none">
|
||||
<div class="flex items-center gap-6">
|
||||
<h2 class="font-headline font-extrabold text-lg text-primary">Team Management</h2>
|
||||
<div class="h-4 w-px bg-outline-variant/30"></div>
|
||||
<nav class="flex items-center gap-6">
|
||||
<a class="text-sm font-['Inter'] text-[#0c6780] border-b-2 border-[#0c6780] pb-1" href="#">Overview</a>
|
||||
<a class="text-sm font-['Inter'] text-slate-500 hover:text-slate-800 transition-colors duration-200" href="#">Activity</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative group">
|
||||
<span class="absolute inset-y-0 left-3 flex items-center text-slate-400">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
</span>
|
||||
<input class="bg-surface-container-high border-none rounded-full py-2 pl-10 pr-4 text-sm w-64 focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search team members..." type="text"/>
|
||||
</div>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors duration-200">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-outline-variant/30 mx-2"></div>
|
||||
<img alt="User Profile" class="w-8 h-8 rounded-full border-2 border-white" data-alt="professional portrait of a confident man in a creative workspace with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCwL2ErTBhHxH_HRE_TywuKbtDZ1iOtFc0yLtEKZajoYWJv2o-0tbSSkp4y1D-DZqjf4ZHzRGhged1A11vQ5IQ-zewcC6p2raj5qE3MT09PFFupfrglNSotmI0ENjmIipQbUbhkz9ZyQljYHsN7VeL9jXgedWKN2VFCO7ZRENNJkyFOMLqMsbBxpNzetu7ZqmJEk_Md5pTzD0t3c4AesOTQoRvjw1QJcoHCEFvkPyvkw9Q8A1PKAmqhOrWTbzsj6DiLKHD7_e9sMZ0"/>
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-8 space-y-8">
|
||||
<!-- Performance Bento Grid -->
|
||||
<section class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Stat Card 1 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex flex-col justify-between border border-outline-variant/10">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-3 bg-secondary-container rounded-xl text-on-secondary-container">
|
||||
<span class="material-symbols-outlined">forum</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+12% vs last week</span>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-on-surface-variant font-medium">Assigned Conversations</p>
|
||||
<h3 class="text-3xl font-headline font-extrabold mt-1">1,284</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Card 2 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-3 bg-primary-container rounded-xl text-on-primary-container">
|
||||
<span class="material-symbols-outlined">timer</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-on-surface-variant bg-surface-container px-2 py-1 rounded-full">Top 5% Industry</span>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-on-surface-variant font-medium">Avg. Response Time</p>
|
||||
<h3 class="text-3xl font-headline font-extrabold mt-1">2m 45s</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Featured Agent (Asymmetric Card) -->
|
||||
<div class="bg-primary p-6 rounded-full text-on-primary relative overflow-hidden flex items-center gap-6 md:col-span-1 border border-primary">
|
||||
<div class="z-10 flex flex-col justify-center">
|
||||
<p class="text-xs font-bold uppercase tracking-widest text-primary-fixed-dim mb-1">Agent of the Month</p>
|
||||
<h3 class="text-2xl font-headline font-extrabold">Elena Vance</h3>
|
||||
<p class="text-sm text-primary-fixed opacity-90 mt-1">98% Satisfaction Rate</p>
|
||||
</div>
|
||||
<img alt="Elena Vance" class="w-20 h-20 rounded-xl object-cover border-2 border-primary-container/30 z-10" data-alt="close-up portrait of a smiling young professional woman with warm indoor lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBrt63aPSIewnc-7GHJhvP-owNi36slfsreI9ostQ9h75wjn__b7A63Pq3QjpVtO-EckjnrK15CS40BUTVmUVwf3SaVM3n8m-qWRc1GjoZwVe5u7lRZHc9Ec9WchpNtpCPKjohMDglMUVRc4O6WDrqWd8J-zAlCe1xT9t3FIMnz-Rd5_gQlPL2oRHzinNWcNu9W8nRx8BhH-NjqO4zN-tZPfER7fGn7s9VunkqD5m1hAyd2YQLnrY5uWJWqWG_BMIVMsW3CptaX2Tk"/>
|
||||
<div class="absolute -right-4 -bottom-4 w-32 h-32 bg-primary-container/20 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Table Header Actions -->
|
||||
<section class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex bg-surface-container-low p-1 rounded-xl">
|
||||
<button class="px-4 py-1.5 text-sm font-semibold rounded-lg bg-surface-container-lowest shadow-sm">All Users</button>
|
||||
<button class="px-4 py-1.5 text-sm font-semibold text-on-surface-variant hover:text-on-surface">Online</button>
|
||||
<button class="px-4 py-1.5 text-sm font-semibold text-on-surface-variant hover:text-on-surface">Offline</button>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-on-surface-variant border border-outline-variant/30 rounded-xl hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">filter_list</span>
|
||||
Filters
|
||||
</button>
|
||||
</div>
|
||||
<button class="primary-gradient text-on-primary font-headline font-bold py-3 px-6 rounded-xl flex items-center gap-2 hover:shadow-xl hover:shadow-primary/20 transition-all">
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
Create User
|
||||
</button>
|
||||
</section>
|
||||
<!-- Data Table Section -->
|
||||
<section class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden border border-outline-variant/10">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low/50">
|
||||
<th class="px-8 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Name</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Email</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Role</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Status</th>
|
||||
<th class="px-8 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/5">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="Sarah Chen" class="w-10 h-10 rounded-full" data-alt="professional headshot of a person with friendly expression in office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtLohX6u9fU8BqskmEnLjU2OXsPk5s09-I0oKafn7awvp-GLX0hw50nJ1XnKrPmxclPnS8k-Z2-thP3H8-taDW27BTTvYzzr-Y_KQ1ggq9psHlEdhauo8rpg3hwJ60gJAQ4y1yhv86az83cs4pfamvSvDzbYnrNPpAmoctA7WEkYTB7TRh18IGUQe6pj020eVbwoVfVyS5WcAlDlm9ALzMggIaZzK7VfG-yaitTAkmTSOOtFN2tUro3Vh0s0ceTgQVFmlUheTGkvk"/>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Sarah Chen</div>
|
||||
<div class="text-xs text-on-surface-variant">Joined 2 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant">sarah.c@zappcare.com</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-primary-container/20 text-on-primary-container px-3 py-1 rounded-full text-xs font-bold">Admin</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Active</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="Marcus Wright" class="w-10 h-10 rounded-full" data-alt="headshot of a man with spectacles in professional studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFNbY_VbfyyQQ1_8kxN3L-PiGFltZl3FwRYwEzv8uP_tk5P1fC9ffHekMhydURt-5riX_Q6XQtAX9CgF_rQGSB34JArsOCJ2WPrAdwrAvT3mzm4jCFUHYUMD8vfoYLXDe4EhKLbU-SFB_q9ZJ-ZLRPIYEeKw1GwCAI3QSJhzQ4ZLe9eQLZEQnJ7vRnDoxDMjIxNqB8Ij8sQp_aGoAfkbxFBHEbocgcBubuxdAMPVaXKtJemo1-s6AO8rfJmQvfX77g1UCykGxenqw"/>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Marcus Wright</div>
|
||||
<div class="text-xs text-on-surface-variant">Joined 1 month ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant">m.wright@zappcare.com</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-surface-container text-on-surface-variant px-3 py-1 rounded-full text-xs font-bold">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Active</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-tertiary-container flex items-center justify-center text-on-tertiary-container font-bold text-xs">JD</div>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Julian Daws</div>
|
||||
<div class="text-xs text-on-surface-variant">Invited 4h ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant">julian.d@zappcare.com</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-surface-container text-on-surface-variant px-3 py-1 rounded-full text-xs font-bold">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-amber-400 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Invited</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3 grayscale opacity-60">
|
||||
<img alt="Amara Okafor" class="w-10 h-10 rounded-full" data-alt="portrait of a woman in corporate attire with focused expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCj9WJrmakwOT_XIYmNwD7iTC1hiPGZVIIv3fysCIRgf4E-BqlpuRHhJiDEgq9xACDTmfrF1YrkSaDJaj0oYbpsI0IPdhNejvvGrAqJz7xu-gQBx0fETkRjYtdeLsqcCu4c0Pn-Xd-iiSDmJ6lGQFIXKRDEqPiMFhQEIyqe5AuKehxGCDTNUhI1djSBWpfhd_6HMzvHs6iQ16cmhIX08j5B7ayxLZ-I7pv1GF0KHGMYcGFCgFwIoJImsydJ-oi89RdkG3Rsea7Ne-0"/>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Amara Okafor</div>
|
||||
<div class="text-xs text-on-surface-variant">Deactivated Jun 2023</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant opacity-60">amara.o@zappcare.com</td>
|
||||
<td class="px-6 py-4 opacity-60">
|
||||
<span class="bg-surface-container text-on-surface-variant px-3 py-1 rounded-full text-xs font-bold">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 opacity-60">
|
||||
<div class="w-2 h-2 bg-slate-400 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Deactivated</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Table Footer / Pagination -->
|
||||
<div class="px-8 py-4 flex items-center justify-between border-t border-outline-variant/10">
|
||||
<p class="text-xs text-on-surface-variant font-medium">Showing 1 to 4 of 28 agents</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg bg-primary-container text-on-primary-container font-bold text-xs px-4">1</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors text-xs px-4 font-medium">2</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors text-xs px-4 font-medium">3</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_team_management_1/screen.png
Normal file
BIN
screen_design/zappcare_team_management_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
363
screen_design/zappcare_team_management_2/code.html
Normal file
363
screen_design/zappcare_team_management_2/code.html
Normal file
@ -0,0 +1,363 @@
|
||||
<!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 Team Management</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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-container-highest": "#e0e3e5",
|
||||
"on-surface": "#191c1e",
|
||||
"background": "#f7f9fc",
|
||||
"on-background": "#191c1e",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-primary-container": "#005870",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"secondary": "#35637d",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"primary-container": "#87ceeb",
|
||||
"primary": "#0c6780",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-container": "#eceef0",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary-container": "#fbb674",
|
||||
"tertiary": "#865219",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-tint": "#0c6780",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface": "#f7f9fc",
|
||||
"error-container": "#ffdad6",
|
||||
"outline": "#6f787d",
|
||||
"outline-variant": "#bfc8cd"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-manrope { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.glass-pill {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex overflow-hidden">
|
||||
<!-- SideNavBar Anchor -->
|
||||
<aside class="hidden md:flex flex-col h-screen w-64 bg-slate-50 dark:bg-slate-900 p-4 shrink-0 transition-all">
|
||||
<div class="flex items-center gap-3 mb-8 px-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;">health_and_safety</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold tracking-tight text-[#0c6780] dark:text-[#87ceeb] font-manrope">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Admin Console</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<button class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 transition-all duration-200 scale-95 active:scale-90 font-manrope text-sm font-medium">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
Dashboard
|
||||
</button>
|
||||
<button class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 transition-all duration-200 scale-95 active:scale-90 font-manrope text-sm font-medium">
|
||||
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
||||
Inbox
|
||||
</button>
|
||||
<button class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] font-bold rounded-xl scale-95 active:scale-90 font-manrope text-sm transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="group" style="font-variation-settings: 'FILL' 1;">group</span>
|
||||
Team
|
||||
</button>
|
||||
<button class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 transition-all duration-200 scale-95 active:scale-90 font-manrope text-sm font-medium">
|
||||
<span class="material-symbols-outlined" data-icon="leaderboard">leaderboard</span>
|
||||
Analytics
|
||||
</button>
|
||||
<button class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 transition-all duration-200 scale-95 active:scale-90 font-manrope text-sm font-medium">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
Settings
|
||||
</button>
|
||||
</nav>
|
||||
<div class="mt-auto flex flex-col gap-1 pt-4 border-t-0 bg-slate-100/50 dark:bg-slate-800/20 rounded-xl">
|
||||
<button class="flex items-center justify-center gap-2 mb-4 mx-2 py-3 rounded-full bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold shadow-sm shadow-primary/20 scale-95 active:scale-90 transition-all">
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
New Invite
|
||||
</button>
|
||||
<button class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 transition-all duration-200 font-manrope text-sm font-medium">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
Help
|
||||
</button>
|
||||
<button class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 transition-all duration-200 font-manrope text-sm font-medium">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col h-screen overflow-hidden">
|
||||
<!-- TopNavBar Anchor -->
|
||||
<header class="flex items-center justify-between px-8 w-full h-16 sticky top-0 z-40 bg-white/85 dark:bg-slate-950/85 backdrop-blur-md shadow-sm shadow-slate-200/50 dark:shadow-none">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="relative w-72">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search team or activity..." type="text"/>
|
||||
</div>
|
||||
<nav class="flex gap-6 font-manrope text-base">
|
||||
<a class="text-slate-500 hover:text-[#0c6780] transition-colors duration-200" href="#">Overview</a>
|
||||
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1 transition-colors duration-200" href="#">Permissions</a>
|
||||
<a class="text-slate-500 hover:text-[#0c6780] transition-colors duration-200" href="#">Activity</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 rounded-full hover:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-outline-variant/30"></div>
|
||||
<button class="flex items-center gap-2 px-1 py-1 rounded-full hover:bg-surface-container transition-colors">
|
||||
<img class="w-8 h-8 rounded-full object-cover" data-alt="professional male admin user portrait with confident expression and soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZBYad63IzT8uqcB_MUhTP_dyHjzETIvih222sed6Gq_VwPg3PEa6zPI02CIZdus7MUYFQGuRCLsUFcYen_D9XE1llxJdIwdpU49m2rNiwtGiq5ugp4q6orCUpGvgJCyrsRcpzQlI_DdDAcloH4HGYs7kpIlq423UWD2NmltMsM8wToUA5ZIsqCqsfw6opHjoJjlR0l_-oBMi-v0nzwtLFTIYRp_X8y_W25ELhd7VSFuxlXJ0B8VKm64RQ1mtM-u6skkTJIpzIvYs"/>
|
||||
<span class="material-symbols-outlined text-outline" data-icon="account_circle">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<section class="flex-1 overflow-y-auto p-8 space-y-8">
|
||||
<div class="flex items-end justify-between">
|
||||
<div>
|
||||
<h2 class="text-4xl font-extrabold font-manrope tracking-tight text-on-surface">Team Management</h2>
|
||||
<p class="text-on-surface-variant font-body mt-1">Manage permissions, monitor activity, and organize your care team members.</p>
|
||||
</div>
|
||||
<button class="px-8 py-3 rounded-full bg-gradient-to-br from-primary to-primary-container text-on-primary font-bold shadow-md hover:shadow-lg transition-all scale-100 hover:scale-[1.02] active:scale-95 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">add_circle</span>
|
||||
Add Member
|
||||
</button>
|
||||
</div>
|
||||
<!-- Filters & Stats Bento Layout -->
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Status Filter Pill -->
|
||||
<div class="col-span-12 lg:col-span-8 flex items-center gap-4">
|
||||
<div class="flex bg-surface-container-low p-1.5 rounded-full">
|
||||
<button class="px-6 py-2 rounded-full bg-surface-container-lowest text-primary font-semibold shadow-sm text-sm">All Members</button>
|
||||
<button class="px-6 py-2 rounded-full text-on-surface-variant hover:text-on-surface text-sm transition-colors">Admin</button>
|
||||
<button class="px-6 py-2 rounded-full text-on-surface-variant hover:text-on-surface text-sm transition-colors">Manager</button>
|
||||
<button class="px-6 py-2 rounded-full text-on-surface-variant hover:text-on-surface text-sm transition-colors">Agent</button>
|
||||
</div>
|
||||
<div class="flex bg-surface-container-low p-1.5 rounded-full">
|
||||
<button class="px-6 py-2 rounded-full text-on-surface-variant hover:text-on-surface text-sm transition-colors flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
Active
|
||||
</button>
|
||||
<button class="px-6 py-2 rounded-full text-on-surface-variant hover:text-on-surface text-sm transition-colors flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
|
||||
Away
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-4 flex items-center justify-end gap-3">
|
||||
<button class="p-2.5 rounded-xl bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined">filter_list</span>
|
||||
</button>
|
||||
<button class="p-2.5 rounded-xl bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined">file_download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- High-Density Data Table -->
|
||||
<div class="bg-surface-container-lowest rounded-3xl overflow-hidden shadow-sm">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low/50">
|
||||
<th class="px-6 py-4 text-xs font-bold uppercase tracking-widest text-on-surface-variant font-manrope">Name</th>
|
||||
<th class="px-6 py-4 text-xs font-bold uppercase tracking-widest text-on-surface-variant font-manrope">Role</th>
|
||||
<th class="px-6 py-4 text-xs font-bold uppercase tracking-widest text-on-surface-variant font-manrope">Status</th>
|
||||
<th class="px-6 py-4 text-xs font-bold uppercase tracking-widest text-on-surface-variant font-manrope">Last Login</th>
|
||||
<th class="px-6 py-4 text-xs font-bold uppercase tracking-widest text-on-surface-variant font-manrope">Conversations</th>
|
||||
<th class="px-6 py-4 text-xs font-bold uppercase tracking-widest text-on-surface-variant font-manrope text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y-0">
|
||||
<!-- Row 1 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-150">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="professional female team member portrait with bright lighting and clean minimalist background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7htmIeHIERhrxyCBm-MP-HhMURp_daORVg3NdiIrVuvVLsKSLGEULDjpSxOztCOgcQRMu-Wp4zDI4hg7TITazxCZsDG64mQ1UgfPF2bJ9HgwszCY2jvOTbZk7wNWV_ovMh5ccZJuaqlitsr3UdtOyet4AB88bYjvUTVZZH9CdO5zy90G_AsOEPdszt-zqA-GIeFp3TN7pfYmsc9UYfDeFsx87L_1WGKecDet_wVi84zEA7_iLUyfYgQSIUCQvoIn9nBBpT2gQU4I"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-on-surface">Sarah Mitchell</div>
|
||||
<div class="text-xs text-on-surface-variant">sarah.m@zappcare.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold font-manrope">Admin</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm text-emerald-600 font-medium">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
Active
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm text-on-surface-variant">2 mins ago</td>
|
||||
<td class="px-6 py-5 text-sm font-semibold text-on-surface">14 active</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 rounded-lg hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-150">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="cheerful male agent portrait with warm professional lighting and modern office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBaEThuhOHrlhg0DQvinRyYGN-5AZry5sa0SK4qnT2zx6o8Ij8dhXHKaUYu3w5hPI8ErCNYwFxxMxOsJBMmaHz29uk-Mb1ElWf4bTlOahFt6Vwujge3P_R01JgROMnpOMiKrtAr59cejb_6PfKIsw1_HMREcN1Ev8m2scxwlobNstnut3MDxErj3oU-sYCk9dduDd60QVbMh7D-1l9yEEcOPM5ROcqOKCGWo8ewW4w3c4HpGtuOwe2GsmU5I8sCvSlHSVJW8D8ByXw"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-on-surface">James Wilson</div>
|
||||
<div class="text-xs text-on-surface-variant">j.wilson@zappcare.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 rounded-full bg-secondary-container text-on-secondary-container text-xs font-bold font-manrope">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm text-amber-600 font-medium">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
|
||||
Away
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm text-on-surface-variant">1 hour ago</td>
|
||||
<td class="px-6 py-5 text-sm font-semibold text-on-surface">8 active</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 rounded-lg hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-150">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="focused female manager portrait in professional attire with neutral studio background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYiNhFsZPWPzYXvsQf_rxgzpxTRrcR0HF9Al9uf_MYF8vSG8UefMajlOm2l5hC9KGnWrSZn2tOISmpSYZOqlz4CSR3-gDcZUw7MiVfsWFRh8av82OfRc0t4sPdI7bX_hVeDi_QawPhZh9c8owTJpcFZC0tI_rOFXt1n2rtNm68STbXCeuM0aNZYORd48m4oaK9XFLO-1ThnerbS5XVXShhb-RpYuwShnIta72eX47KT4cqIUgTYjVa3pKcHszjYjAuur971pDCZUE"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-on-surface">Elena Rodriguez</div>
|
||||
<div class="text-xs text-on-surface-variant">elena.r@zappcare.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 rounded-full bg-tertiary-container/30 text-tertiary text-xs font-bold font-manrope">Manager</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm text-emerald-600 font-medium">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
Active
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm text-on-surface-variant">Just now</td>
|
||||
<td class="px-6 py-5 text-sm font-semibold text-on-surface">32 active</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 rounded-lg hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="group hover:bg-surface-container-low transition-colors duration-150">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="friendly male support agent portrait with bright lighting and soft blurred background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDNumcjzE_JRrlk3uG291zcJCBIWLSqYXYaE4KHfp9MaMwo06Cu2t3WZpHg3zWMi6QiTuf7QMP73R9PTaojRRIBHgz0JCL2Ps3LmVU7p0KX2ryVyads3LnGzcaYtwMwr5n1kaYKRHRTxkBoQp--iGfzlZzvj6AnOnj2UQaoxg1-c85D2ynEyBCEwF8mE3F1UfMyQUgZEut-k1aLkMgEtqPtmG_eWl6T7rj59B9wRanHAtpYFlDrxw4boVw4IMbvS5RZxujO-vRvvlU"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-on-surface">David Chen</div>
|
||||
<div class="text-xs text-on-surface-variant">d.chen@zappcare.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 rounded-full bg-secondary-container text-on-secondary-container text-xs font-bold font-manrope">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm text-outline font-medium">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
Offline
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm text-on-surface-variant">Yesterday</td>
|
||||
<td class="px-6 py-5 text-sm font-semibold text-on-surface">0 active</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 rounded-lg hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="p-6 bg-surface-container-low/30 flex items-center justify-between border-t-0">
|
||||
<div class="text-sm text-on-surface-variant">Showing 1-4 of 42 members</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="w-10 h-10 rounded-xl flex items-center justify-center bg-surface-container-lowest text-on-surface shadow-sm opacity-50 cursor-not-allowed">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 rounded-xl flex items-center justify-center bg-primary text-on-primary shadow-sm font-bold">1</button>
|
||||
<button class="w-10 h-10 rounded-xl flex items-center justify-center bg-surface-container-lowest text-on-surface shadow-sm hover:bg-primary-container transition-colors">2</button>
|
||||
<button class="w-10 h-10 rounded-xl flex items-center justify-center bg-surface-container-lowest text-on-surface shadow-sm hover:bg-primary-container transition-colors">3</button>
|
||||
<button class="w-10 h-10 rounded-xl flex items-center justify-center bg-surface-container-lowest text-on-surface shadow-sm hover:bg-primary-container transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Contextual FAB - Suppression Logic: Rendered as this is Home/Management Screen -->
|
||||
<button class="fixed bottom-8 right-8 w-16 h-16 rounded-full bg-gradient-to-br from-primary to-primary-container text-on-primary shadow-2xl flex items-center justify-center hover:scale-110 active:scale-95 transition-all z-50">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">add</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_team_management_2/screen.png
Normal file
BIN
screen_design/zappcare_team_management_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
441
screen_design/zappcare_template_management/code.html
Normal file
441
screen_design/zappcare_template_management/code.html
Normal file
@ -0,0 +1,441 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Template Management - ZappCare</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Icons -->
|
||||
<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"/>
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"tertiary": "#865219",
|
||||
"on-primary-container": "#005870",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-surface": "#191c1e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-background": "#191c1e",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"primary-container": "#87ceeb",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"primary": "#0c6780",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"secondary": "#35637d",
|
||||
"primary-fixed": "#baeaff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface min-h-screen flex">
|
||||
<!-- SideNavBar from JSON -->
|
||||
<aside class="h-screen w-72 left-0 top-0 sticky bg-[#f2f4f6] dark:bg-slate-900/80 backdrop-blur-xl flex flex-col h-full p-4 gap-2 shadow-[24px_0_24px_-4px_rgba(25,28,30,0.04)] z-50">
|
||||
<div class="flex items-center gap-3 px-2 py-4 mb-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_circle</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-sm font-bold font-headline text-on-surface leading-tight">Client Settings</h2>
|
||||
<p class="text-[11px] text-on-surface-variant">Manage workspace configurations</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-grow space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 hover:translate-x-1 transition-all duration-200 font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">schedule</span> Business Hours
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 hover:translate-x-1 transition-all duration-200 font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">rule</span> Auto-Assignment
|
||||
</a>
|
||||
<!-- Active Tab: Templates -->
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold font-['Inter'] text-sm transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">description</span> Templates
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 hover:translate-x-1 transition-all duration-200 font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">group</span> Team Members
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 hover:translate-x-1 transition-all duration-200 font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">hub</span> Integrations
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 hover:translate-x-1 transition-all duration-200 font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">history</span> Audit Logs
|
||||
</a>
|
||||
</nav>
|
||||
<button class="mb-4 bg-gradient-to-br from-primary to-primary-container text-on-primary py-3 px-4 rounded-full font-bold shadow-lg hover:opacity-90 active:scale-95 transition-all text-sm flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">add</span> New Template
|
||||
</button>
|
||||
<div class="mt-auto border-t border-outline-variant/20 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 hover:translate-x-1 transition-all duration-200 font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">support_agent</span> Support
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 hover:translate-x-1 transition-all duration-200 font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">logout</span> Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="flex-grow flex flex-col min-w-0">
|
||||
<!-- TopAppBar from JSON -->
|
||||
<header class="w-full top-0 sticky bg-[#f7f9fc] dark:bg-slate-900 flex justify-between items-center px-6 py-3 w-full z-40 bg-[#f2f4f6] dark:bg-slate-800/50">
|
||||
<div class="flex items-center gap-8">
|
||||
<h1 class="text-xl font-bold text-[#0c6780] font-headline tracking-tight">ZappCare</h1>
|
||||
<div class="hidden md:flex items-center bg-surface-container-lowest px-3 py-1.5 rounded-full shadow-sm">
|
||||
<span class="material-symbols-outlined text-outline">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-64 text-on-surface" placeholder="Search templates..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-500 hover:text-[#0c6780] transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:text-[#0c6780] transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full bg-secondary-container flex items-center justify-center overflow-hidden border border-outline-variant">
|
||||
<img alt="Admin Profile" class="w-full h-full object-cover" data-alt="professional portrait of a system administrator in a clean office setting, minimalist and modern" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBy61rA_YnMf8vgM_3dctgYxXQD-Ag_OYOXXFcxLtV5jIMUPaHmlr4pUG9zXXH83Sy1pfrvDIhbGEdht5rxu_vm05NGqRgStdF9qRBmS8qTdxL5x5FLZmcpZyfxMvWCXRKHr2Tsj_v9YtfMKmvSQteTsq-Mi7Q-fJeUr1agfenj1q42o1dTj3OeYJy9TEdmTTqIK4A7pdrnwX24iagQf9PJz58zeoUfhrAMuh59aYV3RWGf6L7_of_kUPp3Hh1LHMv9b4WIliJhGnc"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="p-8 space-y-8 max-w-7xl mx-auto w-full">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-4xl font-headline font-extrabold tracking-tight text-on-surface">Template Management</h2>
|
||||
<p class="text-on-surface-variant font-body">Manage and monitor your WhatsApp communication templates.</p>
|
||||
</div>
|
||||
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary py-4 px-8 rounded-full font-bold shadow-xl hover:opacity-95 hover:translate-y-[-2px] transition-all flex items-center gap-3">
|
||||
<span class="material-symbols-outlined">send_to_mobile</span>
|
||||
Create Template Request
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dashboard Insights (Bento Grid Style) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-label text-outline uppercase tracking-widest">Total Templates</p>
|
||||
<p class="text-2xl font-headline font-bold text-on-surface">124</p>
|
||||
</div>
|
||||
<div class="p-3 bg-primary-container/20 rounded-full">
|
||||
<span class="material-symbols-outlined text-primary">description</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-label text-outline uppercase tracking-widest">Approved</p>
|
||||
<p class="text-2xl font-headline font-bold text-on-surface">98</p>
|
||||
</div>
|
||||
<div class="p-3 bg-green-100 rounded-full">
|
||||
<span class="material-symbols-outlined text-green-700">verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-label text-outline uppercase tracking-widest">Pending</p>
|
||||
<p class="text-2xl font-headline font-bold text-on-surface">18</p>
|
||||
</div>
|
||||
<div class="p-3 bg-tertiary-container/20 rounded-full">
|
||||
<span class="material-symbols-outlined text-tertiary">pending</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-label text-outline uppercase tracking-widest">Rejections</p>
|
||||
<p class="text-2xl font-headline font-bold text-on-surface">8</p>
|
||||
</div>
|
||||
<div class="p-3 bg-error-container/40 rounded-full">
|
||||
<span class="material-symbols-outlined text-error">cancel</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter & Table Section -->
|
||||
<div class="bg-surface-container-low rounded-[2rem] p-4 pb-8">
|
||||
<!-- Advanced Filters -->
|
||||
<div class="flex flex-wrap items-center justify-between p-4 mb-2 gap-4">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<div class="relative">
|
||||
<select class="appearance-none bg-surface-container-lowest border-none px-6 py-2.5 pr-10 rounded-full text-sm font-medium focus:ring-2 focus:ring-primary/20 shadow-sm">
|
||||
<option>Approval Status: All</option>
|
||||
<option>Approved</option>
|
||||
<option>Pending</option>
|
||||
<option>Rejected</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-outline pointer-events-none text-lg">expand_more</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<select class="appearance-none bg-surface-container-lowest border-none px-6 py-2.5 pr-10 rounded-full text-sm font-medium focus:ring-2 focus:ring-primary/20 shadow-sm">
|
||||
<option>Category: All</option>
|
||||
<option>Marketing</option>
|
||||
<option>Utility</option>
|
||||
<option>Authentication</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-outline pointer-events-none text-lg">filter_alt</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-outline font-medium px-4">
|
||||
Showing 12 of 124 templates
|
||||
</div>
|
||||
</div>
|
||||
<!-- Template Table -->
|
||||
<div class="overflow-hidden bg-surface-container-lowest rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-high/30">
|
||||
<th class="px-6 py-5 text-xs font-bold text-outline uppercase tracking-wider">Template Name</th>
|
||||
<th class="px-6 py-5 text-xs font-bold text-outline uppercase tracking-wider">Category</th>
|
||||
<th class="px-6 py-5 text-xs font-bold text-outline uppercase tracking-wider">Language</th>
|
||||
<th class="px-6 py-5 text-xs font-bold text-outline uppercase tracking-wider">Status</th>
|
||||
<th class="px-6 py-5 text-xs font-bold text-outline uppercase tracking-wider">Channel</th>
|
||||
<th class="px-6 py-5 text-xs font-bold text-outline uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/10">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface font-semibold text-sm">appointment_reminder_v2</span>
|
||||
<span class="text-[10px] text-outline font-label uppercase">Updated 2h ago</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant rounded-full text-xs font-medium">Utility</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm">English (US)</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-1.5 text-green-600 font-bold text-xs uppercase">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Approved
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="material-symbols-outlined text-[#25D366] text-lg">chat</span>
|
||||
WhatsApp
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">visibility</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface font-semibold text-sm">summer_sale_broadcast</span>
|
||||
<span class="text-[10px] text-outline font-label uppercase">Updated 5h ago</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant rounded-full text-xs font-medium">Marketing</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm">Spanish (ES)</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-1.5 text-tertiary font-bold text-xs uppercase">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">pending</span>
|
||||
Pending
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="material-symbols-outlined text-[#25D366] text-lg">chat</span>
|
||||
WhatsApp
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">visibility</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface font-semibold text-sm">otp_verification_code</span>
|
||||
<span class="text-[10px] text-outline font-label uppercase">Updated 1d ago</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant rounded-full text-xs font-medium">Authentication</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm">Portuguese (BR)</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-1.5 text-error font-bold text-xs uppercase">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">error</span>
|
||||
Rejected
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="material-symbols-outlined text-[#25D366] text-lg">chat</span>
|
||||
WhatsApp
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">visibility</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface font-semibold text-sm">shipping_confirmation_en</span>
|
||||
<span class="text-[10px] text-outline font-label uppercase">Updated 3d ago</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant rounded-full text-xs font-medium">Utility</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-sm">English (UK)</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-1.5 text-green-600 font-bold text-xs uppercase">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Approved
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="material-symbols-outlined text-[#25D366] text-lg">chat</span>
|
||||
WhatsApp
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">visibility</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-primary/10 rounded-xl text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between mt-6 px-4">
|
||||
<button class="flex items-center gap-2 text-sm font-bold text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
Previous
|
||||
</button>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 rounded-full bg-primary text-on-primary font-bold text-sm">1</button>
|
||||
<button class="w-8 h-8 rounded-full hover:bg-primary-container/20 text-on-surface text-sm transition-colors">2</button>
|
||||
<button class="w-8 h-8 rounded-full hover:bg-primary-container/20 text-on-surface text-sm transition-colors">3</button>
|
||||
<span class="px-1">...</span>
|
||||
<button class="w-8 h-8 rounded-full hover:bg-primary-container/20 text-on-surface text-sm transition-colors">11</button>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 text-sm font-bold text-outline hover:text-primary transition-colors">
|
||||
Next
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Help / Status Legend (Glassmorphism) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 pt-4">
|
||||
<div class="bg-surface-container-low/50 backdrop-blur-md p-8 rounded-[2.5rem] border border-outline-variant/10">
|
||||
<h3 class="font-headline font-bold text-lg mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">auto_awesome</span>
|
||||
Quick Tip: Approval Speed
|
||||
</h3>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed mb-6">
|
||||
WhatsApp usually reviews templates within 24 hours. For faster approval, ensure your templates don't contain promotional language in "Utility" categories and use placeholders correctly.
|
||||
</p>
|
||||
<a class="text-primary font-bold text-sm underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all" href="#">Read Template Guidelines →</a>
|
||||
</div>
|
||||
<div class="relative overflow-hidden group rounded-[2.5rem] bg-surface-container-low">
|
||||
<img alt="Team collaborating" class="absolute inset-0 w-full h-full object-cover opacity-10 grayscale" data-alt="Modern high-tech office workspace with blurred background of people collaborating, soft blue and gray lighting, high-end corporate feel" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBpgYdIh5dyfHVXtTZwJSRhmVWaBR812NYdWKQ6j9mpZf4E2rv4iPcGfEYqpLJuF-v73FEa5JBkeNIRswbXhHCR5DPRZRRvOdqTLcOIeCiEF2Uj-mu2fQCZ_XPVyEqeHdaOOOhm5I4RewjAdRBfzs68qSUrQobBaDVsJ1YGBTF-ALSz_6qAMwA4lEb9-65P7QYwlrXucNSE9ZpNbTJlXJDnf-6Q9rUYD_-cmzU-sD5n_JXYIpv9JWiDpKBWmuRzueXn84cJrYgCb0w"/>
|
||||
<div class="relative p-8">
|
||||
<h3 class="font-headline font-bold text-lg mb-2">Need a Custom Flow?</h3>
|
||||
<p class="text-sm text-on-surface-variant mb-6">Create complex interactive messages with buttons, lists, and rich media.</p>
|
||||
<button class="text-xs font-bold uppercase tracking-widest bg-on-surface text-surface py-3 px-6 rounded-full hover:bg-primary transition-colors">
|
||||
Explore API Flows
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_template_management/screen.png
Normal file
BIN
screen_design/zappcare_template_management/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
300
screen_design/zappcare_tenant_settings/code.html
Normal file
300
screen_design/zappcare_tenant_settings/code.html
Normal file
@ -0,0 +1,300 @@
|
||||
<!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 - Tenant Settings</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": {
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"tertiary": "#865219",
|
||||
"on-primary-container": "#005870",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-surface": "#191c1e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-background": "#191c1e",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"primary-container": "#87ceeb",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"primary": "#0c6780",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"secondary": "#35637d",
|
||||
"primary-fixed": "#baeaff"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface">
|
||||
<header class="w-full top-0 sticky bg-[#f7f9fc] dark:bg-slate-900 flex justify-between items-center px-6 py-3 z-50">
|
||||
<div class="flex items-center gap-8">
|
||||
<span class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-['Manrope'] tracking-tight">ZappCare</span>
|
||||
<nav class="hidden md:flex gap-6 items-center">
|
||||
<a class="text-slate-500 dark:text-slate-400 font-['Manrope'] font-semibold hover:text-[#0c6780] transition-colors duration-200" href="#">Dashboard</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 font-['Manrope'] font-semibold hover:text-[#0c6780] transition-colors duration-200" href="#">Inbox</a>
|
||||
<a class="text-[#0c6780] dark:text-[#87ceeb] border-b-2 border-[#0c6780] font-['Manrope'] font-semibold" href="#">Settings</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-slate-500 hover:text-primary transition-colors">notifications</button>
|
||||
<button class="material-symbols-outlined text-slate-500 hover:text-primary transition-colors">help</button>
|
||||
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border border-outline-variant/20">
|
||||
<img alt="Admin Profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional male administrator with a friendly expression in a brightly lit modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDjZB4Pw_UgI-0YyX2iB34NOr5cKncSoSeqsR10ia1JRH1sGqF7-ikvBmTWvS_FvHPZHP-esn0OkC5a5np5URi8kQ6S4GU-tLokHWaKZGiIiiPrJWq6JpVnlalNQQ9bSbq_3DVuWpAkA2r7c1wDxoOIQ0DkOUnZlchnYxO5hgeX9rd___Fux9rA3wAZixuryzxhNesoJIXglCCwVKYnGEAVCJiB5odRJRR7N4bV1dtoUWWfD6RebiSLlqQVa_rfJcVd2bT2Jg0kix0"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex min-h-[calc(100vh-64px)] overflow-hidden">
|
||||
<aside class="h-screen w-72 left-0 top-16 sticky bg-[#f2f4f6] dark:bg-slate-900/80 backdrop-blur-xl shadow-[24px_0_24px_-4px_rgba(25,28,30,0.04)] flex flex-col p-4 gap-2 border-r border-outline-variant/10">
|
||||
<div class="mb-6 px-2">
|
||||
<h2 class="text-[#0c6780] font-headline font-bold text-lg">Client Settings</h2>
|
||||
<p class="text-slate-500 text-xs font-body">Manage workspace configurations</p>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-xl group-hover:text-primary">person</span>
|
||||
<span class="font-medium font-['Inter'] text-sm">Profile</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined text-xl">schedule</span>
|
||||
<span class="font-bold font-['Inter'] text-sm">Business Hours</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 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-xl group-hover:text-primary">rule</span>
|
||||
<span class="font-medium font-['Inter'] text-sm">Auto-Assignment</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 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-xl group-hover:text-primary">label</span>
|
||||
<span class="font-medium font-['Inter'] text-sm">Tags</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 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-xl group-hover:text-primary">chat_bubble</span>
|
||||
<span class="font-medium font-['Inter'] text-sm">Canned Responses</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 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-xl group-hover:text-primary">webhook</span>
|
||||
<span class="font-medium font-['Inter'] text-sm">Webhook</span>
|
||||
</a>
|
||||
<div class="mt-4 px-2">
|
||||
<button class="w-full primary-gradient text-on-primary py-3 rounded-xl font-semibold shadow-lg shadow-primary/20 active:scale-95 transition-transform flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
New Template
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 flex flex-col gap-1 border-t border-outline-variant/20">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-xl">support_agent</span>
|
||||
<span class="font-medium font-['Inter'] text-sm">Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-error hover:bg-error/10 rounded-xl transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-xl">logout</span>
|
||||
<span class="font-medium font-['Inter'] text-sm">Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 bg-surface p-8 overflow-y-auto">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex justify-between items-end mb-10">
|
||||
<div>
|
||||
<h1 class="text-4xl font-headline font-extrabold text-on-surface tracking-tight mb-2">Business Hours</h1>
|
||||
<p class="text-on-surface-variant max-w-lg">Define when your team is available to respond to messages. Outside these hours, auto-replies will be triggered.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-6 py-2.5 rounded-xl border border-outline-variant/30 text-on-surface font-semibold hover:bg-surface-container-low transition-colors">Reset</button>
|
||||
<button class="px-6 py-2.5 rounded-xl primary-gradient text-on-primary font-semibold shadow-md active:scale-95 transition-all">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<section class="bg-surface-container-lowest rounded-full p-8 shadow-sm border border-outline-variant/5">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-primary-container/20 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">public</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-lg text-on-surface">Timezone Settings</h3>
|
||||
<p class="text-on-surface-variant text-sm">Set your local timezone for accurate scheduling</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative min-w-[300px]">
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl py-3 px-4 text-on-surface focus:ring-2 focus:ring-primary appearance-none">
|
||||
<option>(GMT-08:00) Pacific Time (US & Canada)</option>
|
||||
<option>(GMT+00:00) Western European Time</option>
|
||||
<option>(GMT+05:30) India Standard Time</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-3 text-on-surface-variant pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl hover:bg-surface-container-low transition-colors group">
|
||||
<div class="col-span-2">
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||
<div class="w-11 h-6 bg-surface-dim peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary relative"></div>
|
||||
<span class="ml-3 font-semibold text-on-surface">Monday</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-10 flex items-center gap-4">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="09:00"/>
|
||||
<span class="text-on-surface-variant">to</span>
|
||||
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="18:00"/>
|
||||
</div>
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors opacity-0 group-hover:opacity-100">delete</button>
|
||||
<button class="material-symbols-outlined text-primary hover:bg-primary/10 p-1 rounded transition-colors">add_circle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl hover:bg-surface-container-low transition-colors group">
|
||||
<div class="col-span-2">
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||
<div class="w-11 h-6 bg-surface-dim peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary relative"></div>
|
||||
<span class="ml-3 font-semibold text-on-surface">Tuesday</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-10 flex items-center gap-4">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="09:00"/>
|
||||
<span class="text-on-surface-variant">to</span>
|
||||
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="18:00"/>
|
||||
</div>
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors opacity-0 group-hover:opacity-100">delete</button>
|
||||
<button class="material-symbols-outlined text-primary hover:bg-primary/10 p-1 rounded transition-colors">add_circle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl hover:bg-surface-container-low transition-colors group">
|
||||
<div class="col-span-2">
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||
<div class="w-11 h-6 bg-surface-dim peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary relative"></div>
|
||||
<span class="ml-3 font-semibold text-on-surface">Wednesday</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-10 flex items-center gap-4">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="09:00"/>
|
||||
<span class="text-on-surface-variant">to</span>
|
||||
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="18:00"/>
|
||||
</div>
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors opacity-0 group-hover:opacity-100">delete</button>
|
||||
<button class="material-symbols-outlined text-primary hover:bg-primary/10 p-1 rounded transition-colors">add_circle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl bg-surface-container shadow-inner opacity-60">
|
||||
<div class="col-span-2">
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input class="sr-only peer" type="checkbox"/>
|
||||
<div class="w-11 h-6 bg-surface-dim peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary relative"></div>
|
||||
<span class="ml-3 font-semibold text-slate-500">Saturday</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-10 flex items-center justify-center border-2 border-dashed border-outline-variant/30 rounded-xl py-2">
|
||||
<span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<section class="glass-card rounded-full p-6 border border-outline-variant/10">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="material-symbols-outlined text-primary">auto_awesome</span>
|
||||
<h4 class="font-headline font-bold text-on-surface">Holiday Mode</h4>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mb-6">Automatically set your status to "Away" during national holidays.</p>
|
||||
<label class="inline-flex items-center justify-between w-full p-4 rounded-xl bg-surface-container-low cursor-pointer">
|
||||
<span class="font-medium text-sm">Enable Holiday Sync</span>
|
||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
||||
<div class="w-11 h-6 bg-surface-dim peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary relative"></div>
|
||||
</label>
|
||||
</section>
|
||||
<section class="glass-card rounded-full p-6 border border-outline-variant/10">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="material-symbols-outlined text-primary">campaign</span>
|
||||
<h4 class="font-headline font-bold text-on-surface">Auto-Response</h4>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mb-6">Message sent to customers who contact you during off-hours.</p>
|
||||
<textarea class="w-full bg-surface-container-low border-none rounded-xl text-sm p-3 h-24 focus:ring-1 focus:ring-primary" placeholder="Thanks for reaching out! We are currently away but will get back to you during business hours."></textarea>
|
||||
</section>
|
||||
</div>
|
||||
<div class="p-8 rounded-full bg-primary-container/10 border-2 border-dashed border-primary/20 flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">event_available</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-xl text-primary mb-2">Need a custom override?</h3>
|
||||
<p class="text-on-surface-variant text-sm max-w-sm mb-6">Add specific dates for one-time office closures or team training sessions.</p>
|
||||
<button class="px-8 py-3 rounded-full primary-gradient text-on-primary font-bold shadow-lg hover:shadow-primary/30 transition-shadow">Add Specific Date Exception</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_tenant_settings/screen.png
Normal file
BIN
screen_design/zappcare_tenant_settings/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
350
screen_design/zappcare_unassigned_queue/code.html
Normal file
350
screen_design/zappcare_unassigned_queue/code.html
Normal file
@ -0,0 +1,350 @@
|
||||
<!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>
|
||||
BIN
screen_design/zappcare_unassigned_queue/screen.png
Normal file
BIN
screen_design/zappcare_unassigned_queue/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
Reference in New Issue
Block a user