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