512 lines
29 KiB
HTML
512 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>WhatsApp Business Admin Console - Message List</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&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": {
|
|
"primary-fixed-dim": "#3de273",
|
|
"on-surface": "#151e16",
|
|
"error": "#ba1a1a",
|
|
"surface": "#f3fcef",
|
|
"secondary-container": "#8cf1e1",
|
|
"surface-tint": "#006d2f",
|
|
"secondary-fixed-dim": "#72d8c8",
|
|
"on-primary": "#ffffff",
|
|
"status-error": "#EF4444",
|
|
"surface-bright": "#f3fcef",
|
|
"on-tertiary-container": "#78351b",
|
|
"on-secondary-container": "#006f64",
|
|
"on-primary-fixed": "#002109",
|
|
"background": "#f3fcef",
|
|
"surface-variant": "#dce5d8",
|
|
"on-tertiary-fixed": "#380d00",
|
|
"on-surface-variant": "#3c4a3d",
|
|
"on-primary-container": "#005523",
|
|
"tertiary-container": "#ffa07e",
|
|
"primary-fixed": "#66ff8e",
|
|
"secondary-fixed": "#8ff4e3",
|
|
"on-tertiary": "#ffffff",
|
|
"tertiary-fixed-dim": "#ffb59b",
|
|
"on-error-container": "#93000a",
|
|
"on-background": "#151e16",
|
|
"inverse-primary": "#3de273",
|
|
"on-primary-fixed-variant": "#005322",
|
|
"surface-container-low": "#edf6e9",
|
|
"surface-card": "#FFFFFF",
|
|
"outline-variant": "#bbcbb9",
|
|
"tertiary": "#93492e",
|
|
"on-secondary-fixed-variant": "#005047",
|
|
"status-warning": "#F59E0B",
|
|
"surface-container-highest": "#dce5d8",
|
|
"on-secondary-fixed": "#00201c",
|
|
"text-primary": "#1A1C1E",
|
|
"surface-dim": "#d3ddd0",
|
|
"on-error": "#ffffff",
|
|
"background-main": "#F8F9FA",
|
|
"status-success": "#25D366",
|
|
"error-container": "#ffdad6",
|
|
"outline": "#6c7b6b",
|
|
"surface-container": "#e7f1e4",
|
|
"surface-container-lowest": "#ffffff",
|
|
"text-secondary": "#64748B",
|
|
"tertiary-fixed": "#ffdbcf",
|
|
"secondary": "#006b5f",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"status-info": "#3B82F6",
|
|
"border-subtle": "#E2E8F0",
|
|
"surface-container-high": "#e2ebde",
|
|
"primary": "#006d2f",
|
|
"on-tertiary-fixed-variant": "#763319",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-surface": "#2a332a",
|
|
"primary-container": "#25d366"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"container-margin": "32px",
|
|
"gutter": "24px",
|
|
"sidebar-width": "260px",
|
|
"toolbar-height": "64px",
|
|
"card-padding": "20px",
|
|
"base": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"title-sm": ["Plus Jakarta Sans"],
|
|
"body-sm": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"mono-code": ["jetbrainsMono"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
background-color: #f3fcef;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-on-surface antialiased">
|
|
<!-- SideNavBar Anchor -->
|
|
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm dark:shadow-none flex flex-col py-6 px-4 z-50">
|
|
<div class="mb-8">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed-dim">WhatsApp Business</h1>
|
|
<p class="text-on-surface-variant font-body-sm text-body-sm opacity-70">Admin Console</p>
|
|
</div>
|
|
<button class="mb-8 flex items-center justify-center gap-2 bg-primary text-on-primary py-3 px-4 rounded-xl font-title-sm text-title-sm hover:opacity-90 transition-opacity">
|
|
<span class="material-symbols-outlined">add</span>
|
|
New Broadcast
|
|
</button>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
Dashboard
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md text-primary dark:text-primary-fixed-dim font-bold bg-surface-container-low dark:bg-surface-container-high transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="chat" style="font-variation-settings: 'FILL' 1;">chat</span>
|
|
Conversations
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
|
|
Contacts
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="description">description</span>
|
|
Templates
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
|
|
Webhooks
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
|
Analytics
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
Settings
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pt-6 border-t border-outline-variant/30 space-y-1">
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
Help Center
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar Anchor -->
|
|
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm flex justify-between items-center px-gutter z-40">
|
|
<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-on-surface-variant/60">search</span>
|
|
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-10 pr-4 font-body-sm text-body-sm focus:ring-2 focus:ring-primary/20" placeholder="Search messages, recipients..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-on-surface-variant font-title-sm text-title-sm border-b-2 border-primary">English</span>
|
|
<span class="text-on-surface-variant/40 font-title-sm text-title-sm">Bahasa</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="relative p-2 text-on-surface-variant hover:text-primary transition-all">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
<span class="absolute top-1 right-1 w-2 h-2 bg-status-error rounded-full"></span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:text-primary transition-all">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
<div class="flex items-center gap-3 ml-2 border-l border-outline-variant/30 pl-4">
|
|
<div class="text-right">
|
|
<p class="font-title-sm text-title-sm leading-tight">Admin User</p>
|
|
<p class="font-label-caps text-label-caps text-on-surface-variant">Super Admin</p>
|
|
</div>
|
|
<img alt="Admin Profile Image" class="w-10 h-10 rounded-full object-cover border-2 border-primary/10" data-alt="A professional studio portrait of a corporate executive with a friendly expression. The lighting is soft and high-key, creating a bright and approachable aesthetic. The background is a clean, neutral gray that emphasizes the professional tone of the enterprise SaaS dashboard. The colors are natural and balanced to match the modern UI layout." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDeWtPSu0Jobu5IFGriPhlqfuBowBhUFILmaYhAR-B7PLsxKZ4rFDUhwj7ILS40cHUhXqDa9Mnz9rYhAOfTD0Ba_R5fHuQOuUZVfmUyeClsXfH5AWTMYs-xIE8Gb1NqrviMPHCGdHG1hv6qPzMRV5aBC-AsriRCNmnmEvlN5Q2u5E6haVHmO8zoSureMm_Yo1UCauTnpZg5gDNQJ4a2oBv8-MCi9LgoSJisdD5HI6ixtGZNVq19sr0qPsA9voryuf_LHntOt6hPeGk"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-[260px] pt-[64px] min-h-screen">
|
|
<div class="p-container-margin">
|
|
<!-- Header Section -->
|
|
<div class="flex justify-between items-end mb-8">
|
|
<div>
|
|
<h2 class="font-display-lg text-display-lg text-on-surface mb-2">Message Management</h2>
|
|
<p class="text-on-surface-variant font-body-md text-body-md">Monitor, track, and manage your WhatsApp business communications.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="flex items-center gap-2 bg-surface-container-highest px-4 py-2 rounded-lg font-title-sm text-title-sm hover:bg-surface-variant transition-colors">
|
|
<span class="material-symbols-outlined">filter_list</span>
|
|
Filters
|
|
</button>
|
|
<button class="flex items-center gap-2 bg-surface-container-highest px-4 py-2 rounded-lg font-title-sm text-title-sm hover:bg-surface-variant transition-colors">
|
|
<span class="material-symbols-outlined">download</span>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Stats Overview - Bento Grid style -->
|
|
<div class="grid grid-cols-12 gap-6 mb-8">
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant/10">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-2 bg-primary/10 rounded-lg text-primary">
|
|
<span class="material-symbols-outlined">send</span>
|
|
</div>
|
|
<span class="text-status-success font-label-caps text-label-caps bg-status-success/10 px-2 py-1 rounded">+12% vs last week</span>
|
|
</div>
|
|
<p class="text-on-surface-variant font-label-caps text-label-caps uppercase tracking-wider mb-1">Total Sent</p>
|
|
<h3 class="font-display-lg text-display-lg">24,592</h3>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant/10">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-2 bg-status-info/10 rounded-lg text-status-info">
|
|
<span class="material-symbols-outlined">schedule</span>
|
|
</div>
|
|
<span class="text-on-surface-variant font-label-caps text-label-caps bg-surface-container-low px-2 py-1 rounded">Next 24h</span>
|
|
</div>
|
|
<p class="text-on-surface-variant font-label-caps text-label-caps uppercase tracking-wider mb-1">Scheduled</p>
|
|
<h3 class="font-display-lg text-display-lg">1,208</h3>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant/10">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-2 bg-status-warning/10 rounded-lg text-status-warning">
|
|
<span class="material-symbols-outlined">edit_note</span>
|
|
</div>
|
|
<span class="text-on-surface-variant font-label-caps text-label-caps bg-surface-container-low px-2 py-1 rounded">Action required</span>
|
|
</div>
|
|
<p class="text-on-surface-variant font-label-caps text-label-caps uppercase tracking-wider mb-1">Drafts</p>
|
|
<h3 class="font-display-lg text-display-lg">45</h3>
|
|
</div>
|
|
</div>
|
|
<!-- Messages Table Container -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
|
|
<div class="px-6 py-5 border-b border-outline-variant/30 flex items-center justify-between">
|
|
<div class="flex gap-6">
|
|
<button class="font-title-sm text-title-sm text-primary border-b-2 border-primary pb-5 -mb-[21px]">All Messages</button>
|
|
<button class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors pb-5 -mb-[21px]">Sent</button>
|
|
<button class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors pb-5 -mb-[21px]">Scheduled</button>
|
|
<button class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors pb-5 -mb-[21px]">Drafts</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-surface-container-low/50">
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Recipient</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Message Preview</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Timestamp</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/30">
|
|
<!-- Sent Message -->
|
|
<tr class="hover:bg-surface-container-low/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">JS</div>
|
|
<div>
|
|
<p class="font-body-md text-body-md text-on-surface font-semibold">John Smith</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 812-3456-7890</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 max-w-xs">
|
|
<p class="font-body-sm text-body-sm text-on-surface line-clamp-1">Hello John! Just checking in on your recent order #8812. Let us know if you have any questions.</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-success/10 text-status-success font-label-caps text-label-caps">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-status-success"></span>
|
|
Sent
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-body-sm text-body-sm text-on-surface">Oct 24, 2023</p>
|
|
<p class="font-label-caps text-label-caps text-on-surface-variant">10:45 AM</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Scheduled Message -->
|
|
<tr class="hover:bg-surface-container-low/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-status-info/10 flex items-center justify-center text-status-info font-bold text-sm">AM</div>
|
|
<div>
|
|
<p class="font-body-md text-body-md text-on-surface font-semibold">Alice Miller</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 819-0012-3344</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 max-w-xs">
|
|
<p class="font-body-sm text-body-sm text-on-surface line-clamp-1">Reminder: Your appointment is scheduled for tomorrow at 2:00 PM. Reply 1 to confirm.</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-info/10 text-status-info font-label-caps text-label-caps">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-status-info"></span>
|
|
Scheduled
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-body-sm text-body-sm text-on-surface">Oct 26, 2023</p>
|
|
<p class="font-label-caps text-label-caps text-on-surface-variant">09:00 AM</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">edit</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Draft Message -->
|
|
<tr class="hover:bg-surface-container-low/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-status-warning/10 flex items-center justify-center text-status-warning font-bold text-sm">RK</div>
|
|
<div>
|
|
<p class="font-body-md text-body-md text-on-surface font-semibold">Robert King</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 857-7788-9900</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 max-w-xs">
|
|
<p class="font-body-sm text-body-sm text-on-surface italic line-clamp-1">[No message content yet]</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-warning/10 text-status-warning font-label-caps text-label-caps">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-status-warning"></span>
|
|
Draft
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-body-sm text-body-sm text-on-surface">Oct 23, 2023</p>
|
|
<p class="font-label-caps text-label-caps text-on-surface-variant">04:12 PM</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">edit</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Another Sent Message -->
|
|
<tr class="hover:bg-surface-container-low/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">EW</div>
|
|
<div>
|
|
<p class="font-body-md text-body-md text-on-surface font-semibold">Elena White</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 811-2222-3333</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 max-w-xs">
|
|
<p class="font-body-sm text-body-sm text-on-surface line-clamp-1">Thank you for your feedback! Your 20% discount code is WELCOME20. Enjoy!</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-success/10 text-status-success font-label-caps text-label-caps">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-status-success"></span>
|
|
Sent
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-body-sm text-body-sm text-on-surface">Oct 22, 2023</p>
|
|
<p class="font-label-caps text-label-caps text-on-surface-variant">01:30 PM</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-surface-container-low/20 border-t border-outline-variant/30 flex items-center justify-between">
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Showing 1 to 10 of 2,492 messages</p>
|
|
<div class="flex gap-2">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors">
|
|
<span class="material-symbols-outlined text-sm">chevron_left</span>
|
|
</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-on-primary font-label-caps text-label-caps">1</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors font-label-caps text-label-caps">2</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors font-label-caps text-label-caps">3</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors">
|
|
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Contextual Draft Builder Preview -->
|
|
<div class="mt-12 grid grid-cols-12 gap-8 items-start">
|
|
<div class="col-span-12 lg:col-span-7">
|
|
<div class="bg-surface-container-lowest p-8 rounded-2xl shadow-sm border border-outline-variant/10">
|
|
<h4 class="font-headline-md text-headline-md mb-6">Quick Draft</h4>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-2 uppercase tracking-wide">Select Template</label>
|
|
<select class="w-full bg-surface-container-low border-outline-variant/30 rounded-lg p-3 font-body-md text-body-md focus:ring-primary focus:border-primary">
|
|
<option>Welcome Message</option>
|
|
<option>Appointment Reminder</option>
|
|
<option>Order Confirmation</option>
|
|
<option>Custom Message</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-2 uppercase tracking-wide">Recipient</label>
|
|
<input class="w-full bg-surface-container-low border-outline-variant/30 rounded-lg p-3 font-body-md text-body-md focus:ring-primary focus:border-primary" placeholder="Search contacts..." type="text"/>
|
|
</div>
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-2 uppercase tracking-wide">Message Body</label>
|
|
<textarea class="w-full bg-surface-container-low border-outline-variant/30 rounded-lg p-3 font-body-md text-body-md focus:ring-primary focus:border-primary" placeholder="Type your message here..." rows="4"></textarea>
|
|
</div>
|
|
<div class="flex justify-between items-center pt-4">
|
|
<div class="flex gap-4">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors flex items-center gap-1">
|
|
<span class="material-symbols-outlined">image</span>
|
|
<span class="font-body-sm text-body-sm">Media</span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors flex items-center gap-1">
|
|
<span class="material-symbols-outlined">insert_emoticon</span>
|
|
<span class="font-body-sm text-body-sm">Emoji</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-6 py-2 rounded-lg font-title-sm text-title-sm border border-outline hover:bg-surface-container-low transition-colors">Save as Draft</button>
|
|
<button class="px-6 py-2 rounded-lg font-title-sm text-title-sm bg-primary text-on-primary hover:opacity-90 transition-opacity">Schedule Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- WhatsApp UI Preview -->
|
|
<div class="col-span-12 lg:col-span-5">
|
|
<div class="relative w-[320px] mx-auto bg-black rounded-[48px] p-3 shadow-2xl overflow-hidden aspect-[9/19]">
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-black rounded-b-3xl z-20"></div>
|
|
<div class="h-full bg-[#E5DDD5] rounded-[36px] overflow-hidden flex flex-col relative">
|
|
<!-- Mobile Header -->
|
|
<div class="bg-[#075E54] p-4 pt-10 text-white flex items-center gap-3">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
<div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
|
|
<img alt="Recipient Avatar" data-alt="A detailed close-up portrait of a professional woman with a warm, authentic smile. The image is styled as a mobile profile picture for a messaging app, featuring soft outdoor natural lighting and a slightly blurred botanical background. The color palette is vibrant yet natural, emphasizing clarity and trustworthiness in a commercial SaaS context." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVkXmdAPfcX_RCfec81RmYxdp1m2xA6PaL-RT-o8K0PPccahZBw6s0hwiL6_eYDcnptbgqB5KvdBel9zy4NBKW_MgLhXFc3rnlZ2cZeniyUMLmjeniWaL1Qsqe92Z6C66AnArtCYCQ2qxW-t96SDlrCmuBYx2I4-Tx6SB6O9Wnup4_dZMWNEOssbsXAiWoejleV5QpfsFFejDMMDY5BXWmoNJQhCy_AMOPdlcnD9h0g62xaRe1gdmjihAgAEzcEmpc_DSN7pFTgIM"/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-bold text-sm leading-tight">Customer Service</p>
|
|
<p class="text-[10px] opacity-80">online</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<span class="material-symbols-outlined text-sm">videocam</span>
|
|
<span class="material-symbols-outlined text-sm">call</span>
|
|
<span class="material-symbols-outlined text-sm">more_vert</span>
|
|
</div>
|
|
</div>
|
|
<!-- Chat Area -->
|
|
<div class="flex-1 p-3 space-y-4 overflow-y-auto" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDpAAjjA68yKUGoQ8hOna92c1J5Hq-QNb628ey7npsgPh_qrE4iVm09YF2_yezJ-noQAtAqwZFwjZZ7_O8m6NckDs9tPk60pughqUJrRMSzH6P5Q_IHA31S8b2aCzmPphQ7mMCf0YMtYsNUvYa1HTfqVJ8aZYgK2xlJ-wKMXNwfcHbP5NGi9X1YgdMu8PiYenNHuVjogbciru4HAzInAQ5maDvSbj2FVXISE9g4iF3vAS_sYmQE6EHdwLo2BrC7hFBPgslr_P2k35I'); background-repeat: repeat; background-size: contain;">
|
|
<div class="bg-white p-2 rounded-lg rounded-tl-none max-w-[80%] shadow-sm text-xs relative">
|
|
Hello! How can I help you today?
|
|
<span class="block text-[8px] text-gray-500 text-right mt-1">10:42 AM</span>
|
|
</div>
|
|
<div class="bg-[#DCF8C6] p-2 rounded-lg rounded-tr-none max-w-[80%] ml-auto shadow-sm text-xs relative">
|
|
<p class="mb-1">Just checking in on your recent order #8812. Let us know if you have any questions.</p>
|
|
<div class="flex items-center justify-end gap-1 mt-1">
|
|
<span class="text-[8px] text-gray-500">10:45 AM</span>
|
|
<span class="material-symbols-outlined text-[10px] text-blue-400" style="font-variation-settings: 'FILL' 1;">done_all</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Input Bar -->
|
|
<div class="p-2 flex gap-2 items-center">
|
|
<div class="flex-1 bg-white rounded-full flex items-center px-3 py-2 shadow-sm">
|
|
<span class="material-symbols-outlined text-gray-400 text-xl">insert_emoticon</span>
|
|
<span class="flex-1 text-gray-300 text-[10px] ml-2">Type a message</span>
|
|
<span class="material-symbols-outlined text-gray-400 text-xl rotate-45">attach_file</span>
|
|
<span class="material-symbols-outlined text-gray-400 text-xl ml-2">photo_camera</span>
|
|
</div>
|
|
<div class="w-10 h-10 bg-[#075E54] rounded-full flex items-center justify-center text-white">
|
|
<span class="material-symbols-outlined text-xl">mic</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |