410 lines
24 KiB
HTML
410 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>WhatsApp Business Admin - Conversations</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": {
|
|
"on-primary-fixed-variant": "#005322",
|
|
"tertiary": "#93492e",
|
|
"outline-variant": "#bbcbb9",
|
|
"surface-container-low": "#edf6e9",
|
|
"surface-card": "#FFFFFF",
|
|
"on-background": "#151e16",
|
|
"inverse-primary": "#3de273",
|
|
"on-tertiary": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"tertiary-fixed-dim": "#ffb59b",
|
|
"tertiary-container": "#ffa07e",
|
|
"primary-fixed": "#66ff8e",
|
|
"secondary-fixed": "#8ff4e3",
|
|
"on-surface-variant": "#3c4a3d",
|
|
"on-primary-container": "#005523",
|
|
"surface-bright": "#f3fcef",
|
|
"status-error": "#EF4444",
|
|
"on-tertiary-fixed": "#380d00",
|
|
"surface-variant": "#dce5d8",
|
|
"on-primary-fixed": "#002109",
|
|
"background": "#f3fcef",
|
|
"on-tertiary-container": "#78351b",
|
|
"on-secondary-container": "#006f64",
|
|
"on-primary": "#ffffff",
|
|
"secondary-container": "#8cf1e1",
|
|
"surface": "#f3fcef",
|
|
"primary-fixed-dim": "#3de273",
|
|
"on-surface": "#151e16",
|
|
"error": "#ba1a1a",
|
|
"surface-tint": "#006d2f",
|
|
"secondary-fixed-dim": "#72d8c8",
|
|
"primary-container": "#25d366",
|
|
"inverse-surface": "#2a332a",
|
|
"on-secondary": "#ffffff",
|
|
"primary": "#006d2f",
|
|
"on-tertiary-fixed-variant": "#763319",
|
|
"status-info": "#3B82F6",
|
|
"surface-container-high": "#e2ebde",
|
|
"border-subtle": "#E2E8F0",
|
|
"secondary": "#006b5f",
|
|
"text-secondary": "#64748B",
|
|
"tertiary-fixed": "#ffdbcf",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container": "#e7f1e4",
|
|
"status-success": "#25D366",
|
|
"error-container": "#ffdad6",
|
|
"surface-dim": "#d3ddd0",
|
|
"on-error": "#ffffff",
|
|
"background-main": "#F8F9FA",
|
|
"outline": "#6c7b6b",
|
|
"on-secondary-fixed-variant": "#005047",
|
|
"text-primary": "#1A1C1E",
|
|
"surface-container-highest": "#dce5d8",
|
|
"on-secondary-fixed": "#00201c",
|
|
"status-warning": "#F59E0B"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"toolbar-height": "64px",
|
|
"card-padding": "20px",
|
|
"base": "8px",
|
|
"sidebar-width": "260px",
|
|
"gutter": "24px",
|
|
"container-margin": "32px"
|
|
},
|
|
"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": ["JetBrains Mono"]
|
|
},
|
|
"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
|
|
}
|
|
.chat-scrollbar::-webkit-scrollbar {
|
|
width: 4px
|
|
}
|
|
.chat-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 10px
|
|
}
|
|
.bg-chat-pattern {
|
|
background-color: #e5ddd5;
|
|
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDoAQm11A1XNtXffbNYVUqrG-KGwI_AU16Q4NehtwhqbAeWeVHy23hpmpxJVpeXbqvwxzbySoMvRborQKPbcMWuKOF12sbzWSJOPdHyBLKO5kpjbYJQaMZRgfGMLbBaTKd7LrmHKXaeFUMp-KjbX1EskdWNHJD5qLU4rwq4MA5WnLYtzW3-LhsnZDhVShARfAG3X_vYEmrYjx3Papx_Qmlna8InK3YN2dLGKZn7lju4nEkjnNAPqnNmVM8IG_QHDujt6SRWlK0M8gw)
|
|
}</style>
|
|
</head>
|
|
<body class="bg-surface font-body-md text-on-surface overflow-hidden">
|
|
<!-- SideNavBar Anchor -->
|
|
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest shadow-sm flex flex-col py-6 px-4 z-50">
|
|
<div class="mb-8 px-2">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
|
|
<p class="text-on-surface-variant font-label-caps opacity-70">Admin Console</p>
|
|
</div>
|
|
<button class="mb-6 mx-2 py-3 px-4 bg-primary text-on-primary rounded-xl font-title-sm flex items-center justify-center gap-2 shadow-sm hover:opacity-90 transition-all">
|
|
<span class="material-symbols-outlined">add</span>
|
|
<span>New Broadcast</span>
|
|
</button>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-body-md">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-primary font-bold bg-surface-container-low" href="#">
|
|
<span class="material-symbols-outlined">chat</span>
|
|
<span class="font-body-md">Conversations</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
|
|
<span class="material-symbols-outlined">contacts</span>
|
|
<span class="font-body-md">Contacts</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
|
|
<span class="material-symbols-outlined">description</span>
|
|
<span class="font-body-md">Templates</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
|
|
<span class="material-symbols-outlined">webhook</span>
|
|
<span class="font-body-md">Webhooks</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
|
|
<span class="material-symbols-outlined">monitoring</span>
|
|
<span class="font-body-md">Analytics</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-body-md">Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto border-t border-surface-variant pt-4 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
<span class="font-body-md">Help Center</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
<span class="font-body-md">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="fixed top-0 right-0 w-[calc(100%-260px)] h-full flex flex-col">
|
|
<!-- TopNavBar Anchor -->
|
|
<header class="h-toolbar-height bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter z-40">
|
|
<div class="flex items-center gap-6">
|
|
<h2 class="font-title-sm text-title-sm text-primary font-bold">Admin Dashboard</h2>
|
|
<div class="relative w-80">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm">search</span>
|
|
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-10 pr-4 text-body-sm focus:ring-1 focus:ring-primary" placeholder="Search conversations..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex gap-4 mr-4 text-on-surface-variant font-label-caps">
|
|
<span class="cursor-pointer hover:text-primary transition-colors">English</span>
|
|
<span class="cursor-pointer hover:text-primary transition-colors border-b-2 border-primary text-primary font-bold">Bahasa</span>
|
|
</div>
|
|
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors text-on-surface-variant">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors text-on-surface-variant">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
<img alt="Admin Profile Image" class="w-10 h-10 rounded-full object-cover ring-2 ring-primary/10" data-alt="A professional headshot of a corporate admin user with a confident expression, wearing a tailored navy blazer in a high-end, brightly lit modern office environment. The image is crisp with soft bokeh backgrounds and reflects a premium enterprise SaaS aesthetic with clean, professional lighting and a trustworthy mood." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgm5EB9-O65hNopcHWiNXeBWyPsA_FEa3oGruSwb2UELDeEOro5ooYClkeRwjX3gdc2k6S7jFAnc5nksVpUR8OILUGepkGB7YYdyiyRGWJd_k92TvdqUKYEsrc-MBWsinr9DD6kAaBIbRKhy1wAmF_mQt8MfFhR06RlSi2Iyx__rLGs9jU70ME-0zO7sRdBG1UixWsqLNDLv49w2r_4p0AAZZ5_unhSbeUbees2pHJGamLL__SpfzFtXHDJJinjV2DzsrTdGkv-lg"/>
|
|
</div>
|
|
</header>
|
|
<!-- Inbox Layout -->
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<!-- Conversation List (Left Panel) -->
|
|
<section class="w-[380px] border-r border-surface-variant bg-surface-container-lowest flex flex-col">
|
|
<div class="p-4 border-b border-surface-variant flex justify-between items-center">
|
|
<span class="font-title-sm text-on-surface">Inbox</span>
|
|
<div class="flex gap-1">
|
|
<button class="p-2 hover:bg-surface-container-low rounded-lg text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
|
</button>
|
|
<button class="p-2 hover:bg-surface-container-low rounded-lg text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[20px]">edit_square</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto chat-scrollbar">
|
|
<!-- Active Thread -->
|
|
<div class="flex gap-3 p-4 bg-primary-container/10 border-l-4 border-primary cursor-pointer hover:bg-primary-container/20 transition-colors">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="Close up portrait of a young woman with a friendly smile, professional attire, against a minimalist soft green studio background. The lighting is bright and airy, perfect for a high-quality user profile image in a professional business communication app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjX7fb-PWWr1stIiWJn9MuYTZ7AR2kzFR0O2px4arskCZ6kmwLdvrhcHHGnbVBx1MCbmHiWIgEyLfvqRNeSc0DzemwQarugQ529BFN50avW0mdt3VkPz9equ1EuteqsuK7Fg0C0dFIjvGtffxoRKo35gsygO7LbENMpsm7ErP9IgFcf_ex2PoNslds-eozO4ZsQ1qaIL_m-pVtFG1KF0OHLCr5zaJ_lM9eVzJSo7ZY3A2L1p-wPPgBnzgTSbhC-xH15oNxrz5GDus"/>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-baseline mb-1">
|
|
<h4 class="font-title-sm text-body-md text-on-surface truncate">Sarah Jenkins</h4>
|
|
<span class="text-[11px] text-primary font-bold">14:25</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<p class="text-body-sm text-on-surface-variant truncate">I'd like to confirm the shipping status of order #5521...</p>
|
|
<span class="bg-primary text-on-primary text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full">3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Thread 2 -->
|
|
<div class="flex gap-3 p-4 border-b border-surface-variant/50 cursor-pointer hover:bg-surface-container-low transition-colors">
|
|
<div class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container font-bold">
|
|
MK
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-baseline mb-1">
|
|
<h4 class="font-body-md text-on-surface truncate">Marcus Knight</h4>
|
|
<span class="text-[11px] text-on-surface-variant">12:10</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant truncate">Great, thank you for the update!</p>
|
|
</div>
|
|
</div>
|
|
<!-- Thread 3 -->
|
|
<div class="flex gap-3 p-4 border-b border-surface-variant/50 cursor-pointer hover:bg-surface-container-low transition-colors">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="A portrait of a male professional with a neutral, polite expression. He is wearing a grey sweater in a clean, brightly lit modern interior with plants in the background. The aesthetic is clean, corporate, and high-fidelity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCX2DzvHKS0Ic87fLZ2mQunlApgaQRM6o9pza58vdGeJ25HfuxMCGf-QN30-_unA68q1cP2HtXfOrEcsMAo9mEBcR31D6kRE5JjaPqsjXhNC0jBQX73Zf-XWrHf_mh7KU2EVa1WlDacCAKfnUm5NcKZR-MRWeG62a6KxerPqBQEwoJwHcBtBxMx_YvjehMxCgKZX3yox2wkh787T9nIYjFKk51VHSJ9taDARFjcjXBpKAATtocLrgWuPJS24DRLTmlfI-44YV6uHbA"/>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-baseline mb-1">
|
|
<h4 class="font-body-md text-on-surface truncate">David Chen</h4>
|
|
<span class="text-[11px] text-on-surface-variant">Yesterday</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant truncate">Is it possible to change the delivery address?</p>
|
|
</div>
|
|
</div>
|
|
<!-- Thread 4 -->
|
|
<div class="flex gap-3 p-4 border-b border-surface-variant/50 cursor-pointer hover:bg-surface-container-low transition-colors">
|
|
<div class="w-12 h-12 rounded-full bg-tertiary-container flex items-center justify-center text-on-tertiary-container font-bold">
|
|
AR
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-baseline mb-1">
|
|
<h4 class="font-body-md text-on-surface truncate">Anita Rao</h4>
|
|
<span class="text-[11px] text-on-surface-variant">Yesterday</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant truncate">Payment successful. Confirmation received.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Chat Panel (Center-Right) -->
|
|
<section class="flex-1 flex flex-col bg-surface overflow-hidden">
|
|
<!-- Chat Header -->
|
|
<header class="p-4 bg-surface-container-lowest border-b border-surface-variant flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-10 h-10 rounded-full object-cover" data-alt="Profile photo of Sarah Jenkins, showing a high-resolution, bright, and professional close-up. The lighting is balanced and warm, set against a clean white and soft green background, matching the WhatsApp Business brand identity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBW-ixizxTjqnxR4iibtXfsmp-qzwan2DwULJztJdwEaT-cVQ5CgL7_z3QQvZsRfuGElX8GaTwdAadd27YKL_j-OIU4xqDTwjhDdmDzLrxp8_dquPpG4TktHNiB2XsT-895BHzgw-87awqkdUV8JtFFhkIrpHpUC7wlKkoQFR4hutzdKSgonoeRT3mhfP7QwHwkajf5tQgUw01hkEvgnnvW73ZfwKrymXa6b2rb0FHBosev9Lyt0-wNhBMgRjEu1G_sunmHUYxqY0w"/>
|
|
<div>
|
|
<h3 class="font-title-sm text-on-surface">Sarah Jenkins</h3>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-status-success"></span>
|
|
<span class="text-body-sm text-on-surface-variant">Online • Last active 2m ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-3 py-1.5 border border-outline-variant rounded-lg text-body-sm text-on-surface-variant hover:bg-surface-container-low transition-colors flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]">info</span>
|
|
Details
|
|
</button>
|
|
<button class="p-2 hover:bg-surface-container-low rounded-full text-on-surface-variant">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Message History -->
|
|
<div class="flex-1 overflow-y-auto chat-scrollbar bg-chat-pattern p-gutter flex flex-col gap-4">
|
|
<div class="flex justify-center my-4">
|
|
<span class="bg-surface-container-high/60 backdrop-blur-sm text-on-surface-variant text-[12px] px-3 py-1 rounded-full font-label-caps uppercase tracking-wider">Today</span>
|
|
</div>
|
|
<!-- Received Message -->
|
|
<div class="flex flex-col items-start max-w-[70%]">
|
|
<div class="bg-white p-3 rounded-tr-xl rounded-b-xl shadow-sm text-on-surface text-body-md">
|
|
Hello! I'm interested in the premium subscription plan. Could you tell me more about the enterprise features?
|
|
</div>
|
|
<span class="text-[10px] text-on-surface-variant/70 mt-1 ml-1">14:10</span>
|
|
</div>
|
|
<!-- Sent Message -->
|
|
<div class="flex flex-col items-end max-w-[70%] self-end">
|
|
<div class="bg-primary-container p-3 rounded-tl-xl rounded-b-xl shadow-sm text-on-primary-container text-body-md">
|
|
Hi Sarah! Absolutely. Our enterprise plan includes unlimited broadcast lists, advanced analytics, and custom API integrations for your CRM.
|
|
</div>
|
|
<div class="flex items-center gap-1 mt-1 mr-1">
|
|
<span class="text-[10px] text-on-surface-variant/70">14:15</span>
|
|
<span class="material-symbols-outlined text-[14px] text-primary">done_all</span>
|
|
</div>
|
|
</div>
|
|
<!-- Received Message -->
|
|
<div class="flex flex-col items-start max-w-[70%]">
|
|
<div class="bg-white p-3 rounded-tr-xl rounded-b-xl shadow-sm text-on-surface text-body-md">
|
|
That sounds perfect. Do you offer a demo or a trial period for these features?
|
|
</div>
|
|
<span class="text-[10px] text-on-surface-variant/70 mt-1 ml-1">14:22</span>
|
|
</div>
|
|
<!-- Sent Message -->
|
|
<div class="flex flex-col items-end max-w-[70%] self-end">
|
|
<div class="bg-primary-container p-3 rounded-tl-xl rounded-b-xl shadow-sm text-on-primary-container text-body-md">
|
|
Yes, we can set up a 14-day trial for you. Would you like me to enable it for your current account?
|
|
</div>
|
|
<div class="flex items-center gap-1 mt-1 mr-1">
|
|
<span class="text-[10px] text-on-surface-variant/70">14:24</span>
|
|
<span class="material-symbols-outlined text-[14px] text-primary">done_all</span>
|
|
</div>
|
|
</div>
|
|
<!-- Received Message (Most Recent) -->
|
|
<div class="flex flex-col items-start max-w-[70%]">
|
|
<div class="bg-white p-3 rounded-tr-xl rounded-b-xl shadow-sm text-on-surface text-body-md">
|
|
I'd like to confirm the shipping status of order #5521 before we proceed with the upgrade. Is it out for delivery yet?
|
|
</div>
|
|
<span class="text-[10px] text-on-surface-variant/70 mt-1 ml-1">14:25</span>
|
|
</div>
|
|
</div>
|
|
<!-- Message Composer -->
|
|
<footer class="p-4 bg-surface-container-lowest border-t border-surface-variant">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<button class="flex items-center gap-1.5 px-3 py-1 bg-surface-container-low hover:bg-surface-container-high rounded-full text-label-caps text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-[16px]">bolt</span>
|
|
Quick Replies
|
|
</button>
|
|
<button class="flex items-center gap-1.5 px-3 py-1 bg-surface-container-low hover:bg-surface-container-high rounded-full text-label-caps text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-[16px]">description</span>
|
|
Send Template
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-1">
|
|
<button class="p-2 hover:bg-surface-container-low rounded-full text-on-surface-variant">
|
|
<span class="material-symbols-outlined">add</span>
|
|
</button>
|
|
<button class="p-2 hover:bg-surface-container-low rounded-full text-on-surface-variant">
|
|
<span class="material-symbols-outlined">mood</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 bg-surface-container-low rounded-xl px-4 py-2 flex items-center">
|
|
<input class="w-full bg-transparent border-none focus:ring-0 text-body-md" placeholder="Type a message..." type="text"/>
|
|
</div>
|
|
<button class="w-10 h-10 bg-primary text-on-primary rounded-full flex items-center justify-center shadow-sm hover:scale-105 transition-transform">
|
|
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">send</span>
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
<!-- Metadata Panel (Optional/Hidden on smaller widths) -->
|
|
<section class="w-[300px] border-l border-surface-variant bg-surface-container-lowest p-gutter hidden xl:flex flex-col gap-6">
|
|
<div class="text-center">
|
|
<img class="w-24 h-24 rounded-full object-cover mx-auto mb-3 shadow-md" data-alt="Large profile avatar for a customer named Sarah. The image is a studio portrait with high-key lighting, emphasizing clarity and professionalism. The background is a minimalist, light-toned aesthetic consistent with a modern corporate UI." src="https://lh3.googleusercontent.com/aida-public/AB6AXuARLBQPKSnVPIRQzo0YFTNjyoIf-sAR1oQPqEIFKHfvG5D4hPzLNw7d6uYEsg5spaNX8h2ChBcXsbBG3P0jBg6TAIhIPyv3nnNmYPtormU6O0_R8FDAWQqop9C4GHBsgctqPXYaqmBEm36-H1R0Ml61DOZh59Mjre0oFZwp9vTUsjzo9MXDtOVRHHOG9jy_RmNscwmjLzdBghKRj-nCZcfIQfQs-O6n8ozpvUBoGCkLjtOt0gtez99p43SsKLB8qjzEG4yi0J-ohIw"/>
|
|
<h3 class="font-headline-md text-title-sm text-on-surface">Sarah Jenkins</h3>
|
|
<p class="text-body-sm text-on-surface-variant">London, United Kingdom</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<span class="font-label-caps text-on-surface-variant opacity-60 uppercase block mb-1">Contact Details</span>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-2 text-body-sm">
|
|
<span class="material-symbols-outlined text-primary text-[18px]">phone</span>
|
|
+44 20 7123 4567
|
|
</div>
|
|
<div class="flex items-center gap-2 text-body-sm">
|
|
<span class="material-symbols-outlined text-primary text-[18px]">mail</span>
|
|
s.jenkins@enterprise.com
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="font-label-caps text-on-surface-variant opacity-60 uppercase block mb-1">Active Subscriptions</span>
|
|
<span class="inline-block px-3 py-1 bg-secondary-container text-on-secondary-container text-[12px] font-bold rounded-full">Pro Plan</span>
|
|
</div>
|
|
<div class="pt-4 border-t border-surface-variant">
|
|
<span class="font-label-caps text-on-surface-variant opacity-60 uppercase block mb-2">Internal Notes</span>
|
|
<div class="bg-surface-container-low p-3 rounded-lg text-[13px] text-on-surface-variant italic">
|
|
Customer interested in bulk migration from Slack. Priority level: High.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="mt-auto w-full py-2 border border-error text-error rounded-lg text-body-sm font-bold hover:bg-error-container/10 transition-colors">
|
|
Block Contact
|
|
</button>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</body></html> |