Initial commit
This commit is contained in:
310
ui/onboarding-business-info/index.html
Normal file
310
ui/onboarding-business-info/index.html
Normal file
@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Soundbox Ops - Merchant Onboarding</title>
|
||||
<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&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"error-container": "#ffdad6",
|
||||
"warning": "#F59E0B",
|
||||
"slate-200": "#E2E8F0",
|
||||
"outline-variant": "#c3c6d7",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"inverse-surface": "#2e3039",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"slate-100": "#F1F5F9",
|
||||
"tertiary-fixed-dim": "#ffb596",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"on-surface": "#191b23",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-tint": "#0053db",
|
||||
"inverse-primary": "#b4c5ff",
|
||||
"outline": "#737686",
|
||||
"slate-500": "#64748B",
|
||||
"secondary": "#505f76",
|
||||
"on-primary-container": "#eeefff",
|
||||
"surface-variant": "#e1e2ed",
|
||||
"surface-container": "#ededf9",
|
||||
"success": "#16A34A",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"secondary-container": "#d0e1fb",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"surface": "#faf8ff",
|
||||
"slate-900": "#0F172A",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"secondary-fixed-dim": "#b7c8e1",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-secondary-fixed-variant": "#38485d",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary-container": "#54647a",
|
||||
"background": "#F8FAFC",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface-variant": "#434655",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"on-background": "#191b23",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"info": "#0EA5E9",
|
||||
"danger": "#DC2626",
|
||||
"surface-bright": "#faf8ff",
|
||||
"error": "#ba1a1a",
|
||||
"primary-container": "#2563eb",
|
||||
"primary": "#004ac6",
|
||||
"tertiary": "#943700",
|
||||
"secondary-fixed": "#d3e4fe",
|
||||
"tertiary-container": "#bc4800",
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"slate-700": "#334155"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"page-padding": "24px",
|
||||
"topbar-height": "72px",
|
||||
"row-height": "52px",
|
||||
"gutter": "24px",
|
||||
"card-padding": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"metric-sm": ["Inter"],
|
||||
"metric-lg": ["Inter"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"body-lg": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
||||
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
||||
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.step-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #004ac6;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #004ac6 !important;
|
||||
box-shadow: 0 0 0 1px #004ac6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md">
|
||||
<!-- Top Navigation Bar (Suppressed Shell version for focused task) -->
|
||||
<nav class="fixed top-0 left-0 right-0 h-[72px] bg-surface-container-lowest border-b border-slate-200 flex items-center px-page-padding z-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-headline-md text-headline-md text-primary">Soundbox Ops</h1>
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider">Merchant Portal</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-4">
|
||||
<button class="flex items-center gap-2 px-4 py-2 text-on-surface-variant hover:bg-slate-100 rounded-lg transition-colors">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
<span class="font-body-md text-body-md">Support</span>
|
||||
</button>
|
||||
<div class="w-px h-8 bg-slate-200"></div>
|
||||
<button class="flex items-center gap-2 px-2 py-1 text-on-surface-variant hover:bg-slate-100 rounded-lg transition-colors">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Area -->
|
||||
<main class="pt-[72px] min-h-screen flex">
|
||||
<!-- Left Column: Form (8 cols) -->
|
||||
<div class="flex-1 max-w-4xl mx-auto py-12 px-page-padding">
|
||||
<!-- Progress Bar -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center justify-between relative">
|
||||
<!-- Progress Line Background -->
|
||||
<div class="absolute top-1/2 left-0 w-full h-1 bg-slate-200 -translate-y-1/2 -z-10"></div>
|
||||
<!-- Active Progress Line -->
|
||||
<div class="absolute top-1/2 left-0 w-1/4 h-1 bg-primary -translate-y-1/2 -z-10"></div>
|
||||
<!-- Steps -->
|
||||
<div class="flex flex-col items-center gap-2 group">
|
||||
<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold ring-4 ring-white">1</div>
|
||||
<span class="font-label-md text-label-md text-primary font-bold">Business Info</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-full bg-white border-2 border-slate-200 text-slate-400 flex items-center justify-center font-bold">2</div>
|
||||
<span class="font-label-md text-label-md text-slate-500">PIC Details</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-full bg-white border-2 border-slate-200 text-slate-400 flex items-center justify-center font-bold">3</div>
|
||||
<span class="font-label-md text-label-md text-slate-500">Bank Account</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-full bg-white border-2 border-slate-200 text-slate-400 flex items-center justify-center font-bold">4</div>
|
||||
<span class="font-label-md text-label-md text-slate-500">Documents</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form Card -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-10">
|
||||
<header class="mb-8">
|
||||
<h2 class="font-headline-lg text-headline-lg text-on-surface">Business Information</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mt-2">Please provide the legal details of your business to begin the onboarding process.</p>
|
||||
</header>
|
||||
<form class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Legal Entity Name -->
|
||||
<div class="col-span-2">
|
||||
<label class="block font-label-md text-label-md text-on-surface-variant mb-2" for="legal_name">Legal Entity Name</label>
|
||||
<input class="w-full px-4 py-3 border border-slate-200 rounded-lg bg-surface-container-low font-body-md text-body-md transition-all" id="legal_name" name="legal_name" placeholder="e.g., PT. Maju Jaya Terang" type="text"/>
|
||||
<p class="mt-1.5 font-label-md text-label-md text-slate-500">Must match the name on your NIB or Akta Pendirian.</p>
|
||||
</div>
|
||||
<!-- Business Category -->
|
||||
<div>
|
||||
<label class="block font-label-md text-label-md text-on-surface-variant mb-2" for="category">Business Category</label>
|
||||
<select class="w-full px-4 py-3 border border-slate-200 rounded-lg bg-surface-container-low font-body-md text-body-md transition-all appearance-none" id="category" name="category">
|
||||
<option disabled="" selected="" value="">Select category</option>
|
||||
<option value="retail">Retail & FMCG</option>
|
||||
<option value="f&b">Food & Beverage</option>
|
||||
<option value="service">Services</option>
|
||||
<option value="tech">Technology</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Tax ID -->
|
||||
<div>
|
||||
<label class="block font-label-md text-label-md text-on-surface-variant mb-2" for="npwp">Tax ID (NPWP)</label>
|
||||
<input class="w-full px-4 py-3 border border-slate-200 rounded-lg bg-surface-container-low font-body-md text-body-md transition-all" id="npwp" name="npwp" placeholder="00.000.000.0-000.000" type="text"/>
|
||||
</div>
|
||||
<!-- Business Address -->
|
||||
<div class="col-span-2">
|
||||
<label class="block font-label-md text-label-md text-on-surface-variant mb-2" for="address">Business Address</label>
|
||||
<textarea class="w-full px-4 py-3 border border-slate-200 rounded-lg bg-surface-container-low font-body-md text-body-md transition-all" id="address" name="address" placeholder="Street name, building number, district..." rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6 border-t border-slate-100 flex items-center justify-between">
|
||||
<button class="px-6 py-2.5 font-label-md text-label-md text-on-surface-variant hover:bg-slate-100 rounded-lg transition-colors" type="button">Save Draft</button>
|
||||
<button class="px-8 py-2.5 bg-primary text-white font-label-md text-label-md rounded-lg hover:bg-blue-700 transition-all flex items-center gap-2" type="submit">
|
||||
Continue to PIC Details
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Side Panel: Benefits & Support -->
|
||||
<aside class="w-[380px] bg-white border-l border-slate-200 p-10 flex flex-col gap-8 hidden lg:flex">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-6">Why Soundbox?</h3>
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-secondary-container flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-md text-body-md font-semibold">Instant Verification</p>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant mt-1">Get real-time audio confirmation for every QRIS transaction made at your shop.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-secondary-container flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">shield</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-md text-body-md font-semibold">Fraud Prevention</p>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant mt-1">Eliminate fake payment screenshots with direct IoT device synchronization.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-secondary-container flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">leaderboard</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-md text-body-md font-semibold">Consolidated Dashboard</p>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant mt-1">Manage multiple branches and devices from a single unified admin portal.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto pt-8 border-t border-slate-100">
|
||||
<div class="bg-surface-container-low rounded-xl p-6 border border-slate-100">
|
||||
<h4 class="font-label-md text-label-md text-primary font-bold uppercase mb-2">Need help?</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-4">Our onboarding specialists are ready to assist you via WhatsApp or Email.</p>
|
||||
<div class="space-y-2">
|
||||
<a class="flex items-center gap-3 text-on-surface hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">chat</span>
|
||||
<span class="font-label-md text-label-md">+62 812 3456 7890</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 text-on-surface hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">mail</span>
|
||||
<span class="font-label-md text-label-md">support@soundboxops.com</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Image Placeholder -->
|
||||
<div class="relative w-full aspect-video rounded-xl overflow-hidden mt-4 group cursor-pointer shadow-sm">
|
||||
<img alt="Merchant using Soundbox" class="w-full h-full object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500" data-alt="A clean and professional retail checkout counter featuring a modern IoT soundbox device next to a QR code payment stand. The environment is a bright, minimalist boutique store with soft sunlight streaming in. The image is captured in a high-key, modern corporate style using a neutral color palette with subtle blue accents, emphasizing efficiency and digital payment security." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBipLO1hcfKQu6ScpFFidOWl_Kh45ltpxM9HRovhKwc0EbZQfA9HB9ZMb_HqZ0lf585ZRlTVh3IIzER_HSuSOMu22IOdWIaHA1YhVZ170UeE3dnYsQIiFoIBSuAdCjUZbmLijzZF6QslYno-VHrHyuyZA3s15JVj9lzL1s6bdhbfl0r58iI4e4oA9MJCW6lf23oZVkmGlx3hKRWDNuy437g1v0b25V7kOAZxqXjWhubgDTVKVfOl9ERE4P7EaxLs89IXmuHKWA8R50"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent flex items-end p-4">
|
||||
<p class="text-white font-label-md text-label-md font-medium">Watch the Soundbox setup guide (2 min)</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
<!-- Micro-interaction for form inputs -->
|
||||
<script>
|
||||
document.querySelectorAll('input, select, textarea').forEach(el => {
|
||||
el.addEventListener('focus', () => {
|
||||
el.parentElement.querySelector('label')?.classList.add('text-primary');
|
||||
});
|
||||
el.addEventListener('blur', () => {
|
||||
el.parentElement.querySelector('label')?.classList.remove('text-primary');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- ui-nav -->
|
||||
<div id="__sb_nav" style="position:fixed;left:16px;bottom:16px;z-index:9999;background:#fff;border:1px solid #e2e8f0;padding:8px 10px;border-radius:8px;box-shadow:0 6px 24px rgba(15,23,42,0.12);font-family:Inter,Arial,sans-serif;font-size:12px;line-height:1.4">
|
||||
<a href="/ui" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">UI Catalog</a>
|
||||
<a href="/ui/hub" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Hub</a>
|
||||
<a href="/ui/admin-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Admin Login</a>
|
||||
<a href="/ui/merchant-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Merchant Login</a>
|
||||
<a href="/ui/admin-dashboard-overview" style="margin-right:0;color:#2563eb;text-decoration:none;font-weight:600">Dashboard</a>
|
||||
</div>
|
||||
'
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user