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
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>
|
||||
Reference in New Issue
Block a user