380 lines
22 KiB
HTML
380 lines
22 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 API Settings</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;
|
|
vertical-align: middle;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; background-color: #f3fcef; }
|
|
.sidebar-active { background-color: #e7f1e4; color: #006d2f; font-weight: 700; }
|
|
.glass-panel { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.05); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface">
|
|
<!-- SideNavBar -->
|
|
<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="font-body-sm text-body-sm text-on-surface-variant">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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="font-body-md text-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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
|
<span class="font-body-md text-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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
|
|
<span class="font-body-md text-body-md">Contacts</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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="description">description</span>
|
|
<span class="font-body-md text-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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
|
|
<span class="font-body-md text-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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
|
<span class="font-body-md text-body-md">Analytics</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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="font-body-md text-body-md">Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pt-6 space-y-1 border-t border-surface-variant">
|
|
<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary text-on-primary mb-4 shadow-sm hover:opacity-90 transition-opacity">
|
|
<span class="material-symbols-outlined" data-icon="add">add</span>
|
|
<span class="font-body-md text-body-md">New Broadcast</span>
|
|
</button>
|
|
<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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
<span class="font-body-md text-body-md">Help Center</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" href="#">
|
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
|
<span class="font-body-md text-body-md">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar -->
|
|
<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-headline-md text-headline-md font-bold text-primary">Admin Dashboard</h2>
|
|
<div class="h-6 w-px bg-outline-variant mx-2"></div>
|
|
<div class="relative group">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline" data-icon="search">search</span>
|
|
<input class="pl-10 pr-4 py-1.5 rounded-full border-none bg-surface-container bg-opacity-50 focus:bg-white focus:ring-2 focus:ring-primary-container w-64 transition-all outline-none text-body-sm" placeholder="Search config..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-4 text-on-surface-variant">
|
|
<a class="font-title-sm text-title-sm text-primary font-bold border-b-2 border-primary" href="#">English</a>
|
|
<a class="font-title-sm text-title-sm hover:text-primary transition-all" href="#">Bahasa</a>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="settings">settings</span>
|
|
</button>
|
|
</div>
|
|
<div class="h-8 w-8 rounded-full bg-secondary-container overflow-hidden">
|
|
<img alt="Admin Profile Image" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhN416SlPhrhQpm6J6tEPF71baFUh9BA3jqHManUkIU7LEYQbfuL6AMZCuBAyWj2XS1JkK0_oifw4lmjy-V-jBQsYJq5k3uAoyeiJMXnnZ9B4gSZC_t9YO9qvVscNRW5Gqy9uUEyOckMaKmqlRNF9DKT1ykVpBSOLkWTXgGa9b58dj3eiYJ5URyvFSC653Js0J--JanVHXBxCSwtbvdq32Vh699lnR0khXOoQpltp8yCwauYcfPXWP60-t3pgFELH3rL4eEWZBtG8"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="pt-[96px] pb-12 ml-[260px] px-container-margin min-h-screen">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="mb-8 flex justify-between items-end">
|
|
<div>
|
|
<h1 class="font-display-lg text-display-lg text-on-surface">API Settings</h1>
|
|
<p class="text-on-surface-variant font-body-md mt-1">Configure your WhatsApp Business Platform integration and credentials.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-6 py-2.5 border border-outline rounded-lg font-body-md hover:bg-surface-container-low transition-colors">Discard Changes</button>
|
|
<button class="px-6 py-2.5 bg-primary text-on-primary rounded-lg font-body-md shadow-sm hover:opacity-90 transition-opacity">Save Configuration</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left Column: Main Configuration -->
|
|
<div class="col-span-12 lg:col-span-8 space-y-8">
|
|
<!-- API Credentials Card -->
|
|
<section class="bg-surface-container-lowest rounded-xl p-card-padding shadow-sm border border-black border-opacity-[0.03]">
|
|
<div class="flex items-center gap-2 mb-6">
|
|
<span class="material-symbols-outlined text-primary" data-icon="key">key</span>
|
|
<h3 class="font-title-sm text-title-sm text-on-surface">Primary Credentials</h3>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant block">PHONE NUMBER ID</label>
|
|
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="text" value="105829384729103"/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant block">WHATSAPP BUSINESS ACCOUNT ID</label>
|
|
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="text" value="294810293847562"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant block">SYSTEM USER ACCESS TOKEN</label>
|
|
<div class="relative">
|
|
<input class="w-full p-3 pr-24 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="password" value="EAAQZA8ZCs2ZBo0BAKZCe9Tq..."/>
|
|
<div class="absolute right-3 top-1/2 -translate-y-1/2 flex gap-2">
|
|
<button class="text-primary font-label-caps">SHOW</button>
|
|
<button class="text-primary font-label-caps">COPY</button>
|
|
</div>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant mt-2 italic flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]" data-icon="info">info</span>
|
|
Expires in 58 days.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Webhook Configuration -->
|
|
<section class="bg-surface-container-lowest rounded-xl p-card-padding shadow-sm border border-black border-opacity-[0.03]">
|
|
<div class="flex items-center gap-2 mb-6">
|
|
<span class="material-symbols-outlined text-primary" data-icon="webhook">webhook</span>
|
|
<h3 class="font-title-sm text-title-sm text-on-surface">Webhook Configuration</h3>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant block">CALLBACK URL</label>
|
|
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-body-sm" placeholder="https://your-server.com/webhooks/whatsapp" type="text"/>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant block">VERIFY TOKEN</label>
|
|
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="text" value="WHATSAPP_SECRET_VERIFY_2024"/>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button class="w-full py-3 bg-surface-container-low text-primary font-title-sm rounded-lg hover:bg-surface-container-high transition-colors">Test Webhook Connectivity</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Feature Toggles Bento Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-black border-opacity-[0.03] flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-10 w-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
|
<span class="material-symbols-outlined" data-icon="done_all">done_all</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-title-sm text-on-surface">Read Receipts</h4>
|
|
<p class="text-body-sm text-on-surface-variant">Track message delivery</p>
|
|
</div>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-black border-opacity-[0.03] flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-10 w-10 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
|
<span class="material-symbols-outlined" data-icon="reply">reply</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-title-sm text-on-surface">Auto-reply</h4>
|
|
<p class="text-body-sm text-on-surface-variant">Bot automation active</p>
|
|
</div>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Status & Sidebar Info -->
|
|
<aside class="col-span-12 lg:col-span-4 space-y-6">
|
|
<!-- Status Card -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-black border-opacity-[0.03] overflow-hidden">
|
|
<div class="p-6 bg-primary-container text-on-primary-container flex justify-between items-center">
|
|
<div>
|
|
<p class="font-label-caps opacity-80">API STATUS</p>
|
|
<h3 class="font-headline-md font-bold">Connected</h3>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[48px]" data-icon="cloud_done">cloud_done</span>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-on-surface-variant">Latency</span>
|
|
<span class="font-bold text-status-success">124ms</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-on-surface-variant">Uptime (30d)</span>
|
|
<span class="font-bold">99.98%</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-on-surface-variant">Last Pulse</span>
|
|
<span class="font-bold">Just now</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Usage Limits Card -->
|
|
<div class="bg-surface-container-lowest rounded-xl p-card-padding shadow-sm border border-black border-opacity-[0.03]">
|
|
<h3 class="font-title-sm text-on-surface mb-6">Messaging Tier Limits</h3>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<div class="flex justify-between text-body-sm mb-2">
|
|
<span class="text-on-surface-variant">Daily Capacity</span>
|
|
<span class="font-bold">100,000 users</span>
|
|
</div>
|
|
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full w-[45%]"></div>
|
|
</div>
|
|
<p class="text-[12px] text-on-surface-variant mt-2">45,200/100,000 unique users reached</p>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-body-sm mb-2">
|
|
<span class="text-on-surface-variant">Tier Upgrade Progress</span>
|
|
<span class="font-bold text-primary">TIER 2</span>
|
|
</div>
|
|
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-secondary rounded-full w-[85%]"></div>
|
|
</div>
|
|
<p class="text-[12px] text-on-surface-variant mt-2">Next tier: Unlimited messaging</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Documentation Mini-card -->
|
|
<div class="bg-tertiary-container text-on-tertiary-container rounded-xl p-card-padding shadow-sm relative overflow-hidden group">
|
|
<div class="relative z-10">
|
|
<h3 class="font-title-sm mb-2">Developer Docs</h3>
|
|
<p class="text-body-sm opacity-90 mb-4">Need help with technical implementation? Check our latest API documentation.</p>
|
|
<a class="inline-flex items-center gap-2 font-bold hover:underline" href="#">
|
|
Read Reference
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="open_in_new">open_in_new</span>
|
|
</a>
|
|
</div>
|
|
<span class="material-symbols-outlined absolute -right-4 -bottom-4 text-[120px] opacity-10 rotate-12" data-icon="menu_book">menu_book</span>
|
|
</div>
|
|
<!-- Help Section -->
|
|
<div class="p-6 border-2 border-dashed border-outline-variant rounded-xl text-center">
|
|
<img alt="Technical Support" class="mx-auto mb-4 grayscale opacity-50" data-alt="A detailed black and white illustration of professional technical maintenance tools like a wrench and a gear, arranged symmetrically in a clean, minimalist style suitable for a corporate SaaS help section. The lighting is soft and centered." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB0dUSfrnQtMQ1gOIcopoR1-MYImR-ET_MVBW_5Wr9q6PAkJ1vIxSclyczo_bgPxerdu_WDCMP3pHywjwkeCyaUAogIjHAS6WtE4Z_-a4ioKvJl3lRO3J_IJE6kYUG2gHeGdRlvQpiQLGRIFeiiD-whRIwjIy-3_iiTivNHCWw9Z1HlpuMQcpe6ArvY-8-122b2feZyaM74WshkovFHDZH9SkQXzUFMUGGI4HEuff3ni4gthvmHGNNtbOOMqjFJ47d_bLBXS_7CEMw"/>
|
|
<h4 class="font-title-sm text-on-surface">Stuck with API?</h4>
|
|
<p class="text-body-sm text-on-surface-variant mt-1 mb-4">Our engineering team is available for technical support.</p>
|
|
<button class="text-primary font-bold hover:underline">Chat with Support</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |