Initial BizOne portal setup
This commit is contained in:
400
stitch_bizone/draft_editor_whatsapp_business_admin/code.html
Normal file
400
stitch_bizone/draft_editor_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,400 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Draft Editor | WhatsApp Business Admin</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;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-highest": "#dce5d8",
|
||||
"secondary": "#006b5f",
|
||||
"secondary-fixed": "#8ff4e3",
|
||||
"on-primary-fixed": "#002109",
|
||||
"on-primary-fixed-variant": "#005322",
|
||||
"on-surface": "#151e16",
|
||||
"on-tertiary-container": "#78351b",
|
||||
"on-surface-variant": "#3c4a3d",
|
||||
"surface-container-high": "#e2ebde",
|
||||
"error-container": "#ffdad6",
|
||||
"text-secondary": "#64748B",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed-dim": "#3de273",
|
||||
"border-subtle": "#E2E8F0",
|
||||
"tertiary-container": "#ffa07e",
|
||||
"secondary-fixed-dim": "#72d8c8",
|
||||
"on-tertiary": "#ffffff",
|
||||
"status-success": "#25D366",
|
||||
"outline-variant": "#bbcbb9",
|
||||
"tertiary-fixed-dim": "#ffb59b",
|
||||
"tertiary-fixed": "#ffdbcf",
|
||||
"background": "#f3fcef",
|
||||
"surface-container": "#e7f1e4",
|
||||
"on-secondary": "#ffffff",
|
||||
"status-error": "#EF4444",
|
||||
"tertiary": "#93492e",
|
||||
"surface-card": "#FFFFFF",
|
||||
"surface-variant": "#dce5d8",
|
||||
"inverse-on-surface": "#eaf3e6",
|
||||
"on-secondary-fixed": "#00201c",
|
||||
"on-tertiary-fixed-variant": "#763319",
|
||||
"on-tertiary-fixed": "#380d00",
|
||||
"on-primary-container": "#005523",
|
||||
"inverse-primary": "#3de273",
|
||||
"surface": "#f3fcef",
|
||||
"secondary-container": "#8cf1e1",
|
||||
"background-main": "#F8F9FA",
|
||||
"status-info": "#3B82F6",
|
||||
"surface-tint": "#006d2f",
|
||||
"status-warning": "#F59E0B",
|
||||
"surface-bright": "#f3fcef",
|
||||
"primary": "#006d2f",
|
||||
"surface-container-low": "#edf6e9",
|
||||
"on-error-container": "#93000a",
|
||||
"error": "#ba1a1a",
|
||||
"on-error": "#ffffff",
|
||||
"surface-dim": "#d3ddd0",
|
||||
"on-secondary-fixed-variant": "#005047",
|
||||
"on-secondary-container": "#006f64",
|
||||
"outline": "#6c7b6b",
|
||||
"inverse-surface": "#2a332a",
|
||||
"primary-fixed": "#66ff8e",
|
||||
"on-background": "#151e16",
|
||||
"on-primary": "#ffffff",
|
||||
"text-primary": "#1A1C1E",
|
||||
"primary-container": "#25d366"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "24px",
|
||||
"base": "8px",
|
||||
"card-padding": "20px",
|
||||
"toolbar-height": "64px",
|
||||
"container-margin": "32px",
|
||||
"sidebar-width": "260px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"title-sm": ["Plus Jakarta Sans"],
|
||||
"label-caps": ["Inter"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"mono-code": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
||||
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body {
|
||||
background-color: #f3fcef;
|
||||
color: #151e16;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md">
|
||||
<!-- Top Navigation Bar -->
|
||||
<nav class="fixed top-0 right-0 w-full md:w-[calc(100%-260px)] h-toolbar-height flex justify-between items-center px-gutter bg-surface-container-lowest shadow-sm z-30">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="md:hidden p-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
<h1 class="font-title-sm text-title-sm text-primary">Admin Dashboard</h1>
|
||||
<div class="hidden md:flex items-center ml-8 gap-4 text-on-surface-variant">
|
||||
<span class="font-title-sm text-title-sm text-primary border-b-2 border-primary">English</span>
|
||||
<span class="hover:text-primary transition-all cursor-pointer">Bahasa</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="hidden md:flex items-center bg-surface-container-low px-4 py-2 rounded-full border border-outline-variant">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-2">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-48" placeholder="Search" type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden border border-outline-variant bg-surface-container-high">
|
||||
<img alt="Admin Profile Image" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8ET3VGYWFithF2xu9ongG6vEfwwSbI3CkeNXfD-eyJUHMddiUT2y4v8CIZ9hKqn4ZWVySWI3zKG7jxwbes6qynB5jpAmZx0y1NgfHMNZFPto55g07VYYkgZ7D1T3tsxLDiwAc7QbiGynRMHshD0PGO3lW496vyozyqhBcs-RcKd_nPu9IRR93lZdK2JbRpOHF2-wgfYga6tKxK-0Igwzuap6pqWSwmt3CtMlJ8NamKnojO261ujh-hAOce4cFG_aKCHx9dM8nNd8"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Side Navigation Bar -->
|
||||
<aside class="hidden md:flex fixed left-0 top-0 h-full w-[260px] flex-col py-6 px-4 bg-surface-container-lowest shadow-sm z-40">
|
||||
<div class="mb-10 px-2">
|
||||
<span class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</span>
|
||||
<p class="text-on-surface-variant text-body-sm opacity-70">Admin Console</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl 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-xl transition-colors text-primary font-bold 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-xl transition-colors text-on-surface-variant hover: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-xl 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-xl 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-xl 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-xl 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 space-y-1 border-t border-outline-variant pt-6">
|
||||
<button class="w-full mb-4 bg-primary text-on-primary py-3 rounded-xl font-title-sm flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add_circle</span>
|
||||
New Broadcast
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span>Help Center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pt-toolbar-height md:ml-[260px] min-h-screen p-gutter">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<nav class="flex items-center gap-2 text-on-surface-variant text-body-sm mb-2">
|
||||
<span>Drafts</span>
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
<span class="text-primary font-medium">Edit Draft</span>
|
||||
</nav>
|
||||
<h2 class="font-display-lg text-display-lg text-on-surface">Message Draft Editor</h2>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-6 py-2.5 rounded-lg border border-outline text-on-surface font-title-sm hover:bg-surface-container transition-colors">
|
||||
Save Draft
|
||||
</button>
|
||||
<button class="px-6 py-2.5 rounded-lg bg-primary text-on-primary font-title-sm hover:opacity-90 transition-opacity flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
Schedule/Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Editor Side -->
|
||||
<div class="lg:col-span-8 space-y-6">
|
||||
<!-- Config Card -->
|
||||
<div class="bg-surface-card rounded-xl p-card-padding shadow-sm border border-outline-variant">
|
||||
<h3 class="font-title-sm text-title-sm mb-6 text-on-surface">Recipient & Template</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-2 block">Select Recipient</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">person_search</span>
|
||||
<input class="w-full pl-10 pr-4 py-3 bg-surface-container-lowest border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all outline-none" type="text" value="Sarah Jenkins (+1 234 567 890)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-2 block">Message Template</label>
|
||||
<div class="relative">
|
||||
<select class="w-full pl-4 pr-10 py-3 bg-surface-container-lowest border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all outline-none appearance-none">
|
||||
<option>Customer Welcome (Active)</option>
|
||||
<option>Order Confirmation</option>
|
||||
<option>Appointment Reminder</option>
|
||||
<option>None (Custom Message)</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor Canvas -->
|
||||
<div class="bg-surface-card rounded-xl shadow-sm border border-outline-variant flex flex-col min-h-[400px]">
|
||||
<div class="flex items-center justify-between px-card-padding py-3 border-b border-outline-variant bg-surface-container-low">
|
||||
<div class="flex gap-4">
|
||||
<button class="p-2 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant" title="Bold">
|
||||
<span class="material-symbols-outlined">format_bold</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant" title="Italic">
|
||||
<span class="material-symbols-outlined">format_italic</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant" title="Variable">
|
||||
<span class="material-symbols-outlined">data_object</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-body-sm text-on-surface-variant italic">
|
||||
Last saved 2 mins ago
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-card-padding flex-1">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-2 block">Message Body</label>
|
||||
<textarea class="w-full h-full min-h-[280px] bg-transparent border-none focus:ring-0 font-body-md resize-none p-0" placeholder="Type your message here...">Hello {{1}}, thank you for choosing our services!
|
||||
|
||||
We've received your inquiry regarding {{2}}. Our team will get back to you within 24 hours.
|
||||
|
||||
Best regards,
|
||||
WhatsApp Admin Team</textarea>
|
||||
</div>
|
||||
<div class="px-card-padding py-3 bg-surface-container-low border-t border-outline-variant flex gap-2">
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-primary-container text-on-primary-container">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">check_circle</span>
|
||||
Syntax Valid
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-surface-container-highest text-on-surface-variant">
|
||||
{{1}} : Recipient Name
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-surface-container-highest text-on-surface-variant">
|
||||
{{2}} : Ticket Topic
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Preview Side (Mobile Mockup) -->
|
||||
<div class="lg:col-span-4 flex justify-center">
|
||||
<div class="sticky top-[100px] w-full max-w-[320px]">
|
||||
<h3 class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-4 text-center">Real-time Preview</h3>
|
||||
<!-- Mobile Shell -->
|
||||
<div class="relative border-[10px] border-on-surface rounded-[40px] overflow-hidden bg-[#e5ddd5] aspect-[9/18.5] shadow-2xl">
|
||||
<!-- Mobile Header -->
|
||||
<div class="bg-[#075e54] text-white p-4 pt-10 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-variant/30 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-sm">business</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-[14px] font-bold leading-tight">Your Brand</p>
|
||||
<p class="text-[10px] opacity-70">Official Business Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Area -->
|
||||
<div class="p-3 space-y-4">
|
||||
<!-- Message Bubble -->
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="bg-[#dcf8c6] rounded-lg rounded-tr-none p-3 shadow-sm max-w-[90%] relative">
|
||||
<p class="text-[14px] text-gray-800">Hello <span class="text-blue-600 font-medium">Sarah Jenkins</span>, thank you for choosing our services! </p>
|
||||
<p class="text-[14px] text-gray-800 mt-2">We've received your inquiry regarding <span class="text-blue-600 font-medium">Premium Support Plan</span>. Our team will get back to you within 24 hours.</p>
|
||||
<p class="text-[14px] text-gray-800 mt-2">Best regards,<br/>WhatsApp Admin Team</p>
|
||||
<div class="flex items-center justify-end gap-1 mt-1">
|
||||
<span class="text-[10px] text-gray-500">10:45 AM</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-[#4fc3f7]" style="font-variation-settings: 'FILL' 1;">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Footer Input (Mock) -->
|
||||
<div class="absolute bottom-0 left-0 w-full p-2 flex items-center gap-2">
|
||||
<div class="flex-1 bg-white rounded-full h-10 flex items-center px-4 gap-2 shadow-sm">
|
||||
<span class="material-symbols-outlined text-gray-400">sentiment_satisfied</span>
|
||||
<div class="w-full h-4 bg-gray-100 rounded-sm"></div>
|
||||
<span class="material-symbols-outlined text-gray-400 rotate-45">attach_file</span>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full bg-[#128c7e] flex items-center justify-center text-white shadow-sm">
|
||||
<span class="material-symbols-outlined">mic</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tip Card -->
|
||||
<div class="mt-8 bg-tertiary-fixed rounded-xl p-4 border border-tertiary-fixed-dim">
|
||||
<div class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-tertiary">lightbulb</span>
|
||||
<div>
|
||||
<p class="text-on-tertiary-fixed font-bold text-body-sm">Pro Tip</p>
|
||||
<p class="text-on-tertiary-fixed-variant text-[13px]">Using variables like {{1}} ensures personalized delivery which can increase engagement by up to 40%.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Stats / Quick Info -->
|
||||
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
|
||||
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Estimated Cost</p>
|
||||
<p class="text-title-sm text-on-surface">$0.0084 <span class="text-body-sm font-normal text-secondary">(Standard Rate)</span></p>
|
||||
</div>
|
||||
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
|
||||
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Estimated Reach</p>
|
||||
<p class="text-title-sm text-on-surface">1 Recipient</p>
|
||||
</div>
|
||||
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
|
||||
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Message Status</p>
|
||||
<span class="inline-flex items-center text-status-warning font-bold">
|
||||
<span class="w-2 h-2 rounded-full bg-status-warning mr-2"></span>
|
||||
Drafting
|
||||
</span>
|
||||
</div>
|
||||
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
|
||||
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Character Count</p>
|
||||
<p class="text-title-sm text-on-surface">184 / 4096</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Mobile Bottom Navigation (Hidden on desktop) -->
|
||||
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-container-lowest border-t border-outline-variant flex justify-around items-center py-2 px-gutter z-50">
|
||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="text-[10px]">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">description</span>
|
||||
<span class="text-[10px] font-bold">Editor</span>
|
||||
</a>
|
||||
<div class="relative -top-4">
|
||||
<button class="w-12 h-12 rounded-full bg-primary text-on-primary shadow-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span class="text-[10px]">Chats</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-[10px]">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
stitch_bizone/draft_editor_whatsapp_business_admin/screen.png
Normal file
BIN
stitch_bizone/draft_editor_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
Reference in New Issue
Block a user