wirabasalamah/Qris-Soundbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
wirabasalamah
2026-05-25 08:22:12 +07:00
commit a152c99cce
154 changed files with 39033 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
design/onboarding_bank_account/code.html Normal file
View File

@ -0,0 +1,324 @@
<!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&amp;family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>

BIN
design/onboarding_bank_account/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB