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