Initial BizOne portal setup
This commit is contained in:
405
stitch_bizone/template_builder_whatsapp_business_admin/code.html
Normal file
405
stitch_bizone/template_builder_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,405 @@
|
||||
<!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 - Template Builder</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": {
|
||||
"surface": "#f3fcef",
|
||||
"background": "#f3fcef",
|
||||
"text-primary": "#1A1C1E",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#006f64",
|
||||
"tertiary": "#93492e",
|
||||
"status-success": "#25D366",
|
||||
"surface-card": "#FFFFFF",
|
||||
"secondary-fixed-dim": "#72d8c8",
|
||||
"primary": "#006d2f",
|
||||
"on-secondary-fixed-variant": "#005047",
|
||||
"surface-container-low": "#edf6e9",
|
||||
"status-warning": "#F59E0B",
|
||||
"surface-variant": "#dce5d8",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container": "#e7f1e4",
|
||||
"primary-fixed-dim": "#3de273",
|
||||
"on-primary-fixed": "#002109",
|
||||
"status-info": "#3B82F6",
|
||||
"on-tertiary-fixed-variant": "#763319",
|
||||
"surface-dim": "#d3ddd0",
|
||||
"surface-container-high": "#e2ebde",
|
||||
"status-error": "#EF4444",
|
||||
"border-subtle": "#E2E8F0",
|
||||
"primary-container": "#25d366",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#006d2f",
|
||||
"on-tertiary-fixed": "#380d00",
|
||||
"on-surface-variant": "#3c4a3d",
|
||||
"on-tertiary-container": "#78351b",
|
||||
"secondary-fixed": "#8ff4e3",
|
||||
"on-primary-fixed-variant": "#005322",
|
||||
"on-primary": "#ffffff",
|
||||
"tertiary-fixed": "#ffdbcf",
|
||||
"on-background": "#151e16",
|
||||
"surface-bright": "#f3fcef",
|
||||
"error": "#ba1a1a",
|
||||
"secondary": "#006b5f",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#ffa07e",
|
||||
"on-error-container": "#93000a",
|
||||
"background-main": "#F8F9FA",
|
||||
"on-surface": "#151e16",
|
||||
"inverse-primary": "#3de273",
|
||||
"inverse-surface": "#2a332a",
|
||||
"on-error": "#ffffff",
|
||||
"outline": "#6c7b6b",
|
||||
"inverse-on-surface": "#eaf3e6",
|
||||
"text-secondary": "#64748B",
|
||||
"on-primary-container": "#005523",
|
||||
"tertiary-fixed-dim": "#ffb59b",
|
||||
"outline-variant": "#bbcbb9",
|
||||
"surface-container-highest": "#dce5d8",
|
||||
"primary-fixed": "#66ff8e",
|
||||
"secondary-container": "#8cf1e1",
|
||||
"on-secondary-fixed": "#00201c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"sidebar-width": "260px",
|
||||
"toolbar-height": "64px",
|
||||
"gutter": "24px",
|
||||
"container-margin": "32px",
|
||||
"base": "8px",
|
||||
"card-padding": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"mono-code": ["JetBrains Mono"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"title-sm": ["Plus Jakarta Sans"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"body-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
||||
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>.material-symbols-outlined {
|
||||
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
|
||||
}
|
||||
.whatsapp-bg {
|
||||
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuA_4iXN6hTTAgjTGUZiXEy7wJeuVZG95iDdr5xfEDfHV5z1otBTKswDFhtXlfznXAEIgJ87OKNhGezxVRm5zyO4RDMryqKSSzhDGhZrXfTbGrroaFMAnwfFXmkgFCyjfaSlYdE-r5UO6vYiokiCmta6QPb-7fB2nw3k0-54lVffTfUcbmKvMQXwJL-HEWjAldBAy1QUPOAevF9ZwGWzGlEiwJDoeqyY0nKI3UD9VVL_JmuhY0NV5QeN0Ct6HkI6Hyf06c6fl2FU6wo);
|
||||
background-color: #e5ddd5
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 10px
|
||||
}</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface">
|
||||
<!-- Sidebar (Shared Component) -->
|
||||
<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-10 px-2">
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
|
||||
<p class="text-on-surface-variant font-body-sm">Admin Console</p>
|
||||
</div>
|
||||
<nav class="flex-grow space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-body-md">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span class="font-body-md">Conversations</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">contacts</span>
|
||||
<span class="font-body-md">Contacts</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-primary font-bold bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<span class="font-body-md">Templates</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">webhook</span>
|
||||
<span class="font-body-md">Webhooks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">monitoring</span>
|
||||
<span class="font-body-md">Analytics</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-body-md">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<button class="mb-8 w-full py-3 bg-primary text-on-primary rounded-xl font-bold flex items-center justify-center gap-2 scale-98 transition-transform duration-200 hover:opacity-90">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
New Broadcast
|
||||
</button>
|
||||
<div class="border-t border-surface-variant pt-6 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-sm">Help Center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 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-sm">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top Navigation Bar (Shared Component) -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="font-title-sm text-title-sm text-primary">Admin Dashboard</h2>
|
||||
<div class="h-6 w-px bg-surface-variant"></div>
|
||||
<div class="flex gap-4">
|
||||
<span class="text-primary font-bold border-b-2 border-primary cursor-pointer font-title-sm">English</span>
|
||||
<span class="text-on-surface-variant hover:text-primary transition-all cursor-pointer font-title-sm">Bahasa</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative hidden lg:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-surface-container rounded-full border-none text-body-sm w-64 focus:ring-2 focus:ring-primary" placeholder="Search templates..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors opacity-90 hover:opacity-100">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors opacity-90 hover:opacity-100">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden bg-surface-variant">
|
||||
<img alt="Admin Profile Image" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRt2Sm_SCbedgGq0kqEpSpoCFqsqe7ZH-zitTTIB-5I0JdpBK9keSHWcw7D8qReRF1vYApbUEMWoPwWXZhmfe2Hs-ZGro_4jJk0qiRk9-3rBrnN-x7WMAv71SDdJmG_LSIUVqR_Ni7eVK4MxXkPjQuMc2rl9Smb8kE_-hiksiCaQVARLtI9-Xq-GWfmks7HOuZVFX6EFgJ5wNAMpocGF3ncjrOxp79FmjYDH_N0ofk3RXLugxdNAcceKIs-EWx10RQAm8qaKrrUaw"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-[260px] pt-[64px] min-h-screen bg-surface">
|
||||
<div class="max-w-[1440px] mx-auto p-container-margin">
|
||||
<!-- Contextual Header Actions -->
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h3 class="font-display-lg text-display-lg text-text-primary">Create Message Template</h3>
|
||||
<p class="text-text-secondary font-body-md mt-1">Design and submit your business messages for WhatsApp approval.</p>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<button class="px-6 py-2.5 border-2 border-outline text-outline font-bold rounded-lg hover:bg-surface-variant transition-colors">
|
||||
Save Draft
|
||||
</button>
|
||||
<button class="px-6 py-2.5 bg-primary text-on-primary font-bold rounded-lg shadow-md hover:opacity-90 transition-all flex items-center gap-2">
|
||||
Submit for Approval
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor Grid Layout -->
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<!-- Left Panel: Template Configuration -->
|
||||
<div class="col-span-12 lg:col-span-7 space-y-6">
|
||||
<div class="bg-surface-card rounded-xl shadow-sm p-card-padding">
|
||||
<h4 class="font-title-sm text-title-sm mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">edit_note</span>
|
||||
Basic Details
|
||||
</h4>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="col-span-2">
|
||||
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Template Name</label>
|
||||
<input class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="e.g., welcome_message" type="text" value="seasonal_sale_alert"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Category</label>
|
||||
<select class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all">
|
||||
<option selected="">Marketing</option>
|
||||
<option>Utility</option>
|
||||
<option>Authentication</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Language</label>
|
||||
<select class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all">
|
||||
<option selected="">English (US)</option>
|
||||
<option>Spanish</option>
|
||||
<option>Portuguese (BR)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-card rounded-xl shadow-sm p-card-padding">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h4 class="font-title-sm text-title-sm flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">subject</span>
|
||||
Message Content
|
||||
</h4>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-1.5 rounded bg-surface-container hover:bg-surface-variant transition-colors" title="Add Variable">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">add_circle</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded bg-surface-container hover:bg-surface-variant transition-colors" title="Add Emoji">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">mood</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Header (Optional)</label>
|
||||
<input class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="Add a title or choose media" type="text"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Body Text</label>
|
||||
<textarea class="w-full bg-surface p-4 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-body-md leading-relaxed" placeholder="Enter message text here..." rows="6">Hi {{1}}, our Summer Sale is finally here! 🌴
|
||||
|
||||
Get up to 50% OFF on all collections using code {{2}} at checkout.
|
||||
|
||||
Shop now: https://example.com/shop</textarea>
|
||||
<div class="mt-2 flex items-center justify-between">
|
||||
<span class="text-body-sm text-text-secondary">Variables detected: 2</span>
|
||||
<button class="text-primary font-bold text-body-sm hover:underline">Manage Variables</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Footer (Optional)</label>
|
||||
<input class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="Add a short line of text" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-card rounded-xl shadow-sm p-card-padding">
|
||||
<h4 class="font-title-sm text-title-sm mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">smart_button</span>
|
||||
Buttons
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4 p-4 bg-surface rounded-lg border border-dashed border-outline-variant">
|
||||
<span class="material-symbols-outlined text-outline">ads_click</span>
|
||||
<div class="flex-grow">
|
||||
<p class="font-body-md font-semibold">Quick Reply: Opt-out</p>
|
||||
<p class="text-body-sm text-text-secondary">Label: Stop promotions</p>
|
||||
</div>
|
||||
<button class="text-error"><span class="material-symbols-outlined">delete</span></button>
|
||||
</div>
|
||||
<button class="w-full py-3 border-2 border-dashed border-primary/30 text-primary font-bold rounded-lg flex items-center justify-center gap-2 hover:bg-primary/5 transition-colors">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
Add Button (Max 10)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Panel: Real-time Mobile Preview -->
|
||||
<div class="col-span-12 lg:col-span-5">
|
||||
<div class="sticky top-24 flex flex-col items-center">
|
||||
<div class="relative w-[340px] h-[680px] bg-black rounded-[50px] border-[8px] border-slate-800 shadow-2xl overflow-hidden flex flex-col">
|
||||
<!-- Phone Notch/StatusBar -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 pt-2">
|
||||
<span class="text-[12px] text-white font-bold">9:41</span>
|
||||
<div class="flex gap-1.5">
|
||||
<span class="material-symbols-outlined text-[14px] text-white">signal_cellular_4_bar</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-white">wifi</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-white">battery_full</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WhatsApp App UI -->
|
||||
<div class="flex-grow flex flex-col whatsapp-bg relative">
|
||||
<!-- App Header -->
|
||||
<div class="h-[60px] bg-[#075E54] flex items-center px-4 gap-3 text-white">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center overflow-hidden">
|
||||
<img alt="Business Profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA011ej674nTk-r3uJBSaWhSscEauW4ThCTlTylJyFIlOuHL8GSY8YXLZEjE5Ejp6LsNvQGTx6OZ7fcFA2krE5tMaTxUWtnC1QYKh5St9zI7S8YrV7647cKgeRFKsBE0WAoTH6cU69ux0Mesg16tGeLk3BvC1vHH39Pw7NhCGVk9tifo-t5xiWfK1qwXjzecmLpTGHlBnIqAAyKPo6eX_Cao8wRe9LcHsH670Oo_um9RwuuiWHNw3ObavnWwz1DDJlMFuEz0JybLiw"/>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="font-bold text-[14px] leading-tight">Your Business</p>
|
||||
<p class="text-[11px] opacity-80">online</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[20px]">videocam</span>
|
||||
<span class="material-symbols-outlined text-[20px]">call</span>
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</div>
|
||||
<!-- Chat Bubbles -->
|
||||
<div class="p-4 flex flex-col space-y-4">
|
||||
<!-- Date Stamp -->
|
||||
<div class="self-center bg-[#d1e5f0] text-[#556b77] text-[11px] px-3 py-1 rounded-md shadow-sm">TODAY</div>
|
||||
<!-- Message Template Bubble -->
|
||||
<div class="max-w-[85%] self-start flex flex-col shadow-sm">
|
||||
<div class="bg-white rounded-tr-xl rounded-br-xl rounded-bl-xl p-3 relative">
|
||||
<!-- Message Text -->
|
||||
<p class="text-[14px] leading-tight text-gray-800">
|
||||
Hi <span class="text-primary font-bold">[Alex]</span>, our Summer Sale is finally here! 🌴<br/><br/>
|
||||
Get up to 50% OFF on all collections using code <span class="text-primary font-bold">[SUMMER50]</span> at checkout.<br/><br/>
|
||||
Shop now: <span class="text-blue-600 underline">https://example.com/shop</span>
|
||||
</p>
|
||||
<!-- Time & Tick -->
|
||||
<div class="flex justify-end items-center gap-1 mt-1">
|
||||
<span class="text-[10px] text-gray-500">09:41 AM</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-blue-500" style="font-variation-settings: 'FILL' 1;">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactive Button -->
|
||||
<button class="mt-0.5 bg-white border-t border-gray-100 rounded-b-xl py-2.5 flex items-center justify-center gap-2 text-blue-500 font-semibold text-[13px] hover:bg-gray-50 active:bg-gray-100 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">reply</span>
|
||||
Stop promotions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input Bar Placeholder -->
|
||||
<div class="absolute bottom-4 left-0 w-full px-2 flex items-center gap-2">
|
||||
<div class="flex-grow h-10 bg-white rounded-full flex items-center px-4 gap-3 shadow-sm">
|
||||
<span class="material-symbols-outlined text-gray-400">mood</span>
|
||||
<span class="text-gray-400 text-[14px] flex-grow">Message</span>
|
||||
<span class="material-symbols-outlined text-gray-400">attach_file</span>
|
||||
<span class="material-symbols-outlined text-gray-400">photo_camera</span>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-[#075E54] rounded-full flex items-center justify-center text-white shadow-sm">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">mic</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Preview Toggle -->
|
||||
<div class="mt-8 bg-surface-card rounded-full p-1 shadow-sm border border-border-subtle flex gap-2">
|
||||
<button class="px-6 py-2 rounded-full bg-primary text-on-primary font-bold text-body-sm">Mobile</button>
|
||||
<button class="px-6 py-2 rounded-full text-text-secondary font-bold text-body-sm hover:bg-surface-container transition-colors">Desktop</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Success Modal (Hidden by default) -->
|
||||
<div class="hidden fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm flex items-center justify-center">
|
||||
<div class="bg-surface-card rounded-2xl p-8 max-w-md w-full shadow-2xl text-center">
|
||||
<div class="w-20 h-20 bg-primary-container text-on-primary-container rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<span class="material-symbols-outlined text-[40px]">check_circle</span>
|
||||
</div>
|
||||
<h5 class="font-headline-md text-headline-md mb-2">Template Submitted</h5>
|
||||
<p class="text-text-secondary font-body-md mb-8">Your template 'seasonal_sale_alert' has been sent to Meta for approval. This usually takes 2-4 hours.</p>
|
||||
<button class="w-full py-4 bg-primary text-on-primary font-bold rounded-xl">Back to Dashboard</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Reference in New Issue
Block a user