324 lines
17 KiB
HTML
324 lines
17 KiB
HTML
<!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>
|
|
<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&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"/>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.tabular-nums {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Custom scrollbar for a cleaner look */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #E2E8F0;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
<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>
|
|
</head>
|
|
<body class="bg-background font-body-md text-on-surface min-h-screen flex flex-col">
|
|
<!-- Top Navigation Bar (Shell Suppressed for Flow, but following Brand Anchor for Identity) -->
|
|
<header class="h-[72px] flex items-center justify-between px-page-padding bg-surface-container-lowest border-b border-slate-200 z-50">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-primary text-3xl" data-icon="account_balance">account_balance</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-headline-md text-headline-md text-primary font-bold">Soundbox Ops</span>
|
|
<span class="font-label-md text-label-md text-slate-500 tracking-wider">MERCHANT ONBOARDING</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="flex items-center gap-2 text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
|
<span class="font-label-md text-label-md">Support</span>
|
|
</button>
|
|
<div class="h-8 w-px bg-slate-200"></div>
|
|
<button class="text-on-surface-variant font-label-md text-label-md hover:text-danger">Exit</button>
|
|
</div>
|
|
</header>
|
|
<main class="flex-grow flex items-center justify-center py-12 px-page-padding">
|
|
<div class="w-full max-w-4xl">
|
|
<!-- Progress Stepper -->
|
|
<div class="mb-12 flex justify-between items-start relative px-4">
|
|
<!-- Progress Line -->
|
|
<div class="absolute top-5 left-8 right-8 h-1 bg-slate-200 z-0">
|
|
<div class="h-full bg-primary w-2/3 transition-all duration-700 ease-out"></div>
|
|
</div>
|
|
<!-- Step 1: Complete -->
|
|
<div class="relative z-10 flex flex-col items-center gap-3 group">
|
|
<div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center shadow-md">
|
|
<span class="material-symbols-outlined" data-icon="check" data-weight="fill">check</span>
|
|
</div>
|
|
<span class="font-label-md text-label-md text-on-surface-variant font-bold">Business Profile</span>
|
|
</div>
|
|
<!-- Step 2: Complete -->
|
|
<div class="relative z-10 flex flex-col items-center gap-3 group">
|
|
<div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center shadow-md">
|
|
<span class="material-symbols-outlined" data-icon="check" data-weight="fill">check</span>
|
|
</div>
|
|
<span class="font-label-md text-label-md text-on-surface-variant font-bold">Verification Docs</span>
|
|
</div>
|
|
<!-- Step 3: Active -->
|
|
<div class="relative z-10 flex flex-col items-center gap-3 group">
|
|
<div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center ring-4 ring-primary-fixed shadow-lg">
|
|
<span class="font-bold">3</span>
|
|
</div>
|
|
<span class="font-label-md text-label-md text-primary font-bold">Settlement Account</span>
|
|
</div>
|
|
<!-- Step 4: Pending -->
|
|
<div class="relative z-10 flex flex-col items-center gap-3 group">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container-highest text-on-surface-variant flex items-center justify-center border border-slate-200">
|
|
<span class="font-bold">4</span>
|
|
</div>
|
|
<span class="font-label-md text-label-md text-slate-500">Device Selection</span>
|
|
</div>
|
|
</div>
|
|
<!-- Onboarding Card Content -->
|
|
<div class="bg-surface-container-lowest rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row">
|
|
<!-- Left Panel: Contextual Info -->
|
|
<div class="w-full md:w-1/3 bg-slate-50 p-8 border-b md:border-b-0 md:border-r border-slate-200">
|
|
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-4">Settlement Details</h1>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mb-8">
|
|
Link the bank account where you wish to receive daily settlements from your Soundbox transactions.
|
|
</p>
|
|
<div class="space-y-6">
|
|
<div class="flex items-start gap-3">
|
|
<span class="material-symbols-outlined text-info" data-icon="verified_user">verified_user</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-md text-label-md font-bold text-on-surface">Secure Verification</span>
|
|
<p class="text-[11px] leading-4 text-slate-500 uppercase tracking-tight">Real-time penny-drop validation via IMPS/NEFT networks.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="material-symbols-outlined text-warning" data-icon="schedule">schedule</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-md text-label-md font-bold text-on-surface">Daily T+1 Settlement</span>
|
|
<p class="text-[11px] leading-4 text-slate-500 uppercase tracking-tight">Funds reach your account within 24 hours of merchant closure.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Panel: Form -->
|
|
<div class="w-full md:w-2/3 p-8">
|
|
<form class="space-y-8" id="settlement-form">
|
|
<!-- Form Section Header -->
|
|
<div>
|
|
<span class="font-label-md text-label-md text-primary font-bold block mb-1">ACCOUNT INFORMATION</span>
|
|
<div class="h-0.5 w-12 bg-primary"></div>
|
|
</div>
|
|
<!-- Form Grid -->
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<!-- Bank Selection -->
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md font-bold text-on-surface-variant" for="bank-name">Bank Name</label>
|
|
<div class="relative">
|
|
<select class="w-full h-12 px-4 bg-white border border-slate-200 rounded-lg appearance-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all font-body-md text-body-md" id="bank-name">
|
|
<option disabled="" selected="" value="">Select your bank</option>
|
|
<option value="hdfc">HDFC Bank</option>
|
|
<option value="icici">ICICI Bank</option>
|
|
<option value="axis">Axis Bank</option>
|
|
<option value="sbi">State Bank of India</option>
|
|
<option value="kotak">Kotak Mahindra Bank</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-4 top-3 text-slate-400 pointer-events-none" data-icon="expand_more">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Account Holder Name -->
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md font-bold text-on-surface-variant" for="account-holder">Account Holder Name</label>
|
|
<input class="w-full h-12 px-4 bg-white border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all font-body-md text-body-md" id="account-holder" placeholder="Enter as per bank records" type="text"/>
|
|
</div>
|
|
<!-- Account Number -->
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md font-bold text-on-surface-variant" for="account-number">Account Number</label>
|
|
<input class="tabular-nums w-full h-12 px-4 bg-white border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all font-body-md text-body-md" id="account-number" placeholder="Enter account number" type="password"/>
|
|
<p class="text-[11px] text-slate-400">Account number is encrypted and processed via secure channels.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Verification Action -->
|
|
<div class="pt-4 flex flex-col gap-4">
|
|
<button class="w-full h-[52px] bg-primary-container text-on-primary-container font-bold rounded-lg flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.98] transition-all" id="verify-btn" type="button">
|
|
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
|
Verify Account Details
|
|
</button>
|
|
<!-- Success State (Hidden by default) -->
|
|
<div class="hidden animate-in fade-in slide-in-from-top-4 duration-300 p-4 bg-success/10 border border-success/30 rounded-lg flex items-start gap-3" id="success-alert">
|
|
<span class="material-symbols-outlined text-success" data-icon="verified" data-weight="fill">verified</span>
|
|
<div>
|
|
<span class="font-label-md text-label-md font-bold text-success block">Verification Successful</span>
|
|
<p class="text-sm text-on-surface-variant">Bank account verified for merchant: <span class="font-bold" id="verified-name">John Doe Enterprises</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Actions -->
|
|
<div class="pt-8 flex items-center justify-between border-t border-slate-100 mt-8">
|
|
<button class="px-6 h-10 text-on-surface-variant font-label-md text-label-md font-bold hover:bg-slate-100 rounded-lg transition-colors" type="button">
|
|
Back to Step 2
|
|
</button>
|
|
<button class="px-8 h-10 bg-primary text-on-primary font-bold rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-opacity-90 transition-colors shadow-sm" disabled="" id="continue-btn" type="submit">
|
|
Continue to Step 4
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Trust Footer -->
|
|
<div class="mt-12 flex flex-col items-center gap-4 opacity-60">
|
|
<div class="flex items-center gap-8">
|
|
<div class="flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm" data-icon="lock">lock</span>
|
|
<span class="text-[10px] font-bold uppercase tracking-widest">PCI-DSS COMPLIANT</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm" data-icon="security">security</span>
|
|
<span class="text-[10px] font-bold uppercase tracking-widest">AES-256 ENCRYPTION</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-center text-slate-500">© 2024 Soundbox Ops Infrastructure. All transaction data is processed through authorized banking gateways.</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const verifyBtn = document.getElementById('verify-btn');
|
|
const successAlert = document.getElementById('success-alert');
|
|
const continueBtn = document.getElementById('continue-btn');
|
|
const holderNameInput = document.getElementById('account-holder');
|
|
const verifiedName = document.getElementById('verified-name');
|
|
|
|
verifyBtn.addEventListener('click', () => {
|
|
// Simulate API verification
|
|
verifyBtn.innerHTML = `
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-on-primary-container" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Verifying with Bank...
|
|
`;
|
|
verifyBtn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
verifyBtn.classList.add('hidden');
|
|
successAlert.classList.remove('hidden');
|
|
continueBtn.disabled = false;
|
|
verifiedName.textContent = holderNameInput.value || "Retail Partner";
|
|
}, 1500);
|
|
});
|
|
|
|
document.getElementById('settlement-form').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
// Handle form navigation
|
|
console.log("Proceeding to next step...");
|
|
});
|
|
</script>
|
|
</body></html> |