277 lines
16 KiB
HTML
277 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Soundbox Ops - Merchant Login</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&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"/>
|
|
<!-- Tailwind Configuration -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-tint": "#0053db",
|
|
"on-error-container": "#93000a",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"on-surface": "#191b23",
|
|
"slate-200": "#E2E8F0",
|
|
"inverse-surface": "#2e3039",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"surface-bright": "#faf8ff",
|
|
"on-primary": "#ffffff",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"on-secondary": "#ffffff",
|
|
"background": "#F8FAFC",
|
|
"slate-500": "#64748B",
|
|
"primary": "#004ac6",
|
|
"on-background": "#191b23",
|
|
"on-primary-fixed": "#00174b",
|
|
"outline-variant": "#c3c6d7",
|
|
"surface-container-high": "#e7e7f3",
|
|
"on-tertiary-container": "#ffede6",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"on-secondary-container": "#54647a",
|
|
"secondary": "#505f76",
|
|
"surface-variant": "#e1e2ed",
|
|
"surface-dim": "#d9d9e5",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"on-primary-container": "#eeefff",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"slate-900": "#0F172A",
|
|
"on-surface-variant": "#434655",
|
|
"danger": "#DC2626",
|
|
"success": "#16A34A",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"outline": "#737686",
|
|
"tertiary-container": "#bc4800",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"slate-100": "#F1F5F9",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"warning": "#F59E0B",
|
|
"surface-container": "#ededf9",
|
|
"primary-container": "#2563eb",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-fixed": "#dbe1ff",
|
|
"info": "#0EA5E9",
|
|
"tertiary": "#943700",
|
|
"surface-container-low": "#f3f3fe",
|
|
"error": "#ba1a1a",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"secondary-container": "#d0e1fb",
|
|
"on-error": "#ffffff",
|
|
"surface": "#faf8ff",
|
|
"slate-700": "#334155",
|
|
"inverse-primary": "#b4c5ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"gutter": "24px",
|
|
"card-padding": "20px",
|
|
"topbar-height": "72px",
|
|
"row-height": "52px",
|
|
"page-padding": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"metric-sm": ["Inter"],
|
|
"label-md": ["Inter"],
|
|
"body-md": ["Inter"],
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-lg": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"metric-lg": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.login-gradient {
|
|
background: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(226, 232, 240, 0.8);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background font-body-md text-on-surface selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<div class="min-h-screen flex flex-col md:flex-row">
|
|
<!-- Left Side: Login Form -->
|
|
<main class="w-full md:w-1/2 lg:w-2/5 flex flex-col justify-center items-center p-8 md:p-12 lg:p-24 bg-surface login-gradient relative overflow-hidden">
|
|
<!-- Decorative Background Element -->
|
|
<div class="absolute -top-24 -left-24 w-64 h-64 bg-primary-fixed opacity-10 rounded-full blur-3xl"></div>
|
|
<div class="w-full max-w-md z-10">
|
|
<!-- Brand Section -->
|
|
<div class="mb-12 flex flex-col items-center md:items-start">
|
|
<img alt="Soundbox Ops Logo" class="h-16 w-auto mb-6" src="https://lh3.googleusercontent.com/aida/ADBb0ug9HaB2AriUP4nVrKMOARoZTCm9CjAvMRfjT5wYuZ28c5NkPI6L46e_UFThUQPqPv-K4M6u1kyZquW5BDLZyRJSF9YLnwi_mI5uLm2wJEBGLDxQHiD_V9fmLgPaggsISesqP8Emgu71sqr05ARxSf4H2YOhq5u6sFUSvOIIL82WsxLajMZ-nih3D86dJlFa-trY0J3Rj5JyOW9El0dy9BF4-npXWTYUDjwfMVDeEGMw93XUNIHdxQmPkAg"/>
|
|
<h1 class="font-headline-lg text-headline-lg text-on-surface tracking-tight mb-2">Merchant Control Center</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">Selamat datang kembali. Silakan masuk untuk mengelola transaksi Anda.</p>
|
|
</div>
|
|
<!-- Login Form -->
|
|
<form class="space-y-6" onsubmit="event.preventDefault();">
|
|
<div>
|
|
<label class="block font-label-md text-label-md text-on-surface-variant mb-2 ml-1" for="email">Email Bisnis</label>
|
|
<div class="relative group">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline group-focus-within:text-primary transition-colors">mail</span>
|
|
<input class="w-full pl-12 pr-4 py-3.5 bg-surface-container-lowest border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-slate-500 font-body-md text-on-surface" id="email" name="email" placeholder="nama@bisnisanda.com" type="email"/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1" for="password">Kata Sandi</label>
|
|
<a class="font-label-md text-label-md text-primary hover:underline transition-all" href="#">Lupa Kata Sandi?</a>
|
|
</div>
|
|
<div class="relative group">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline group-focus-within:text-primary transition-colors">lock</span>
|
|
<input class="w-full pl-12 pr-12 py-3.5 bg-surface-container-lowest border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-slate-500 font-body-md text-on-surface" id="password" name="password" placeholder="••••••••" type="password"/>
|
|
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-outline hover:text-on-surface transition-colors" type="button">
|
|
<span class="material-symbols-outlined">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input class="w-4 h-4 text-primary bg-surface-container-lowest border-slate-200 rounded focus:ring-primary" id="remember" type="checkbox"/>
|
|
<label class="ml-2 font-body-md text-body-md text-on-surface-variant" for="remember">Ingat saya selama 30 hari</label>
|
|
</div>
|
|
<button class="w-full py-4 bg-primary hover:bg-surface-tint text-on-primary font-headline-md text-headline-md rounded-xl shadow-lg shadow-primary/20 active:scale-[0.98] transition-all flex justify-center items-center gap-2" type="submit">
|
|
<span>Merchant Sign In</span>
|
|
<span class="material-symbols-outlined">login</span>
|
|
</button>
|
|
</form>
|
|
<!-- Footer Link -->
|
|
<div class="mt-12 text-center">
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Belum memiliki akun merchant?
|
|
<a class="font-metric-sm text-metric-sm text-primary font-bold hover:underline underline-offset-4 decoration-2 transition-all" href="#">Register as Merchant</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Right Side: Illustrative Section -->
|
|
<aside class="hidden md:flex md:w-1/2 lg:w-3/5 bg-slate-900 relative overflow-hidden items-center justify-center p-12 lg:p-24">
|
|
<!-- Dynamic Background -->
|
|
<div class="absolute inset-0 z-0">
|
|
<div class="absolute top-0 right-0 w-[800px] h-[800px] bg-primary opacity-20 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-tertiary opacity-10 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/4"></div>
|
|
<div class="absolute inset-0 bg-[radial-gradient(#ffffff08_1px,transparent_1px)] [background-size:32px_32px]"></div>
|
|
</div>
|
|
<!-- Content Overlay -->
|
|
<div class="relative z-10 w-full max-w-2xl">
|
|
<!-- Bento Grid for Merchant Highlights -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="glass-card p-8 rounded-3xl col-span-2 md:col-span-1 transform -rotate-2 hover:rotate-0 transition-transform duration-500">
|
|
<div class="w-12 h-12 rounded-2xl bg-primary-fixed flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-on-primary-fixed-variant" style="font-variation-settings: 'FILL' 1;">speed</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md text-slate-900 mb-2">Settlement Instan</h3>
|
|
<p class="font-body-md text-body-md text-slate-700">Dapatkan dana Anda langsung ke rekening segera setelah transaksi berhasil dilakukan.</p>
|
|
</div>
|
|
<div class="glass-card p-8 rounded-3xl col-span-2 md:col-span-1 translate-y-8 transform rotate-1 hover:rotate-0 transition-transform duration-500">
|
|
<div class="w-12 h-12 rounded-2xl bg-secondary-fixed flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-on-secondary-fixed-variant" style="font-variation-settings: 'FILL' 1;">volume_up</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md text-slate-900 mb-2">Suara Konfirmasi</h3>
|
|
<p class="font-body-md text-body-md text-slate-700">Konfirmasi pembayaran melalui suara soundbox yang keras dan jernih, meminimalkan penipuan.</p>
|
|
</div>
|
|
<div class="glass-card p-8 rounded-3xl col-span-2 mt-12 bg-white/90 border-slate-100 shadow-xl">
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex-1">
|
|
<h3 class="font-headline-md text-headline-md text-slate-900 mb-1">Modernisasi Bisnis Anda</h3>
|
|
<p class="font-body-md text-body-md text-slate-600">Terpercaya oleh lebih dari 50,000 merchant di seluruh Indonesia untuk operasional harian yang lebih lancar.</p>
|
|
</div>
|
|
<div class="flex -space-x-4">
|
|
<div class="w-12 h-12 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a smiling Indonesian business owner wearing a clean, modern shirt. The lighting is bright and professional, suggesting a high-end corporate or retail environment. The overall mood is confident and trustworthy, reflecting the brand's reliability." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDtE4L8mp1mkgI8dLB8Oq5CKyLD5Vzd4mvv7GzGRvSbfbRrWVgBSclHQY36Jzr9qP-mNw6IhIjrj_6yxMGSD3giFGHN0Pkte4riD4pLEjpLlgFyifKZ2hzvPfU7GAbLA5HzFSawA0AY6tyChhJGbrodOCTtJjRKmBlclSxzDlg_3vXls7B08vpDNC6xgEhjQESGmOZxWrDjGCKbW89nGKc82eosgGufit6cZQkLSLdIQ4ooBLl3uwJGQugGBlTWm61igh4QAQ5fDBg"/>
|
|
</div>
|
|
<div class="w-12 h-12 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="Close up portrait of a young female entrepreneur in a brightly lit, modern office setting. She has a friendly expression and is looking directly at the camera. The image uses soft, warm lighting and a shallow depth of field, emphasizing a personal yet professional connection." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBy6Dem2F98SCov_UZ_TxtsX_UZIURPsHIIkv9p_q8i15kLhTpxEiiNlpTSji4r61wqAlPiSiHopbeTru6Vl6RcLi4k7K15rJT8IjYyOmRQ_U6vdl87bFGBKOurEAMCbek7RKjMFPJUy-_pKmFU3t8iaxDqURyll45LORuUz3foHNvQXO7EIWu2F5QGZf1BQ6ZVlCWMOV8JGWlZXBofszdqkwS-yoiYMHVBWKK1-_ne9TYx3TVfY--Ltxpgw-PWgpssBE6sLqwL2oE"/>
|
|
</div>
|
|
<div class="w-12 h-12 rounded-full border-2 border-white bg-primary flex items-center justify-center text-white font-bold text-xs">
|
|
+50k
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Descriptive Image -->
|
|
<div class="mt-16 relative">
|
|
<img class="rounded-3xl shadow-2xl border border-white/20 w-full h-[300px] object-cover" data-alt="A sleek, modern soundbox device placed on a wooden countertop in a contemporary cafe. A customer is scanning a QR code next to it with a smartphone. The scene is bathed in natural daylight from a large window, creating a clean, efficient, and proactive atmosphere. The color palette features whites, light woods, and corporate blues." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCO3owYjs-q405IK5Aubxndby8PleePa1HDR4ggkxdNVa_QNlFyaGWrtSZ_Bcy0V_wUt9Wxy0WvA9ZF3L4AjSgqu8VnpbcdMUyEUoF4C_bQhL44ZLp4YqtOVAwhXsRcFB3uI6nM_CiTTTkCIWXykB6aBgvevGVtckOkYKliYvfrvTHwE6PhesFMbO9NktlCQ0waknzbeA02-CmJ32taCnTNb5lPQGWvkdLPG_yZy0Lqw69lbfNKsxBDYxtwyjfHL1sUUT4TymJoCro"/>
|
|
<div class="absolute -bottom-6 -right-6 p-6 glass-card rounded-2xl flex items-center gap-4">
|
|
<div class="text-right">
|
|
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider">Status Sistem</p>
|
|
<p class="font-metric-sm text-metric-sm text-success">Aktif & Stabil</p>
|
|
</div>
|
|
<div class="w-3 h-3 bg-success rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer for Desktop side -->
|
|
<div class="absolute bottom-8 left-12 right-12 flex justify-between items-center z-10 border-t border-white/10 pt-6">
|
|
<p class="font-label-md text-label-md text-slate-400">© 2024 Soundbox Ops. Precise. Reliable. Proactive.</p>
|
|
<div class="flex gap-4">
|
|
<a class="font-label-md text-label-md text-slate-400 hover:text-white transition-colors" href="#">Privasi</a>
|
|
<a class="font-label-md text-label-md text-slate-400 hover:text-white transition-colors" href="#">Bantuan</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<!-- Mobile Footer -->
|
|
<footer class="md:hidden p-8 bg-surface-container border-t border-slate-200 text-center">
|
|
<p class="font-label-md text-label-md text-slate-500 mb-2">© 2024 Soundbox Ops. All rights reserved.</p>
|
|
<div class="flex justify-center gap-6">
|
|
<a class="font-label-md text-label-md text-primary" href="#">Kebijakan Privasi</a>
|
|
<a class="font-label-md text-label-md text-primary" href="#">Syarat Layanan</a>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Simple micro-interactions
|
|
document.querySelectorAll('input').forEach(input => {
|
|
input.addEventListener('focus', () => {
|
|
input.parentElement.classList.add('scale-[1.01]');
|
|
});
|
|
input.addEventListener('blur', () => {
|
|
input.parentElement.classList.remove('scale-[1.01]');
|
|
});
|
|
});
|
|
|
|
// Toggle Password visibility
|
|
const toggleBtn = document.querySelector('button[type="button"]');
|
|
const passInput = document.getElementById('password');
|
|
toggleBtn.addEventListener('click', () => {
|
|
const type = passInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passInput.setAttribute('type', type);
|
|
toggleBtn.querySelector('span').innerText = type === 'password' ? 'visibility' : 'visibility_off';
|
|
});
|
|
</script>
|
|
</body></html> |