244 lines
13 KiB
HTML
244 lines
13 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>Login - WhatsApp Business Admin</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;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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"primary": "#001b44",
|
|
"primary-light": "#003380",
|
|
"accent-blue": "#00a3ff",
|
|
"outline": "#6c7b6b",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-tertiary": "#ffffff",
|
|
"tertiary-container": "#ffa07e",
|
|
"secondary-fixed-dim": "#72d8c8",
|
|
"on-surface-variant": "#3c4a3d",
|
|
"background-main": "#F8F9FA",
|
|
"on-error": "#ffffff",
|
|
"surface-variant": "#dce5d8",
|
|
"surface-dim": "#d3ddd0",
|
|
"on-secondary-container": "#006f64",
|
|
"tertiary": "#93492e",
|
|
"surface-bright": "#f3fcef",
|
|
"on-primary-container": "#005523",
|
|
"on-tertiary-fixed": "#380d00",
|
|
"surface-container-highest": "#dce5d8",
|
|
"secondary": "#006b5f",
|
|
"on-primary": "#ffffff",
|
|
"status-success": "#25D366",
|
|
"surface": "#f3fcef",
|
|
"status-info": "#3B82F6",
|
|
"surface-container-high": "#e2ebde",
|
|
"text-primary": "#1A1C1E",
|
|
"surface-container-low": "#edf6e9",
|
|
"secondary-fixed": "#8ff4e3",
|
|
"tertiary-fixed": "#ffdbcf",
|
|
"on-secondary-fixed-variant": "#005047",
|
|
"status-error": "#EF4444",
|
|
"on-primary-fixed-variant": "#005322",
|
|
"outline-variant": "#bbcbb9",
|
|
"on-background": "#151e16",
|
|
"status-warning": "#F59E0B",
|
|
"error-container": "#ffdad6",
|
|
"primary-container": "#001b44",
|
|
"surface-tint": "#001b44",
|
|
"on-tertiary-fixed-variant": "#763319",
|
|
"on-surface": "#151e16",
|
|
"secondary-container": "#8cf1e1",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"on-tertiary-container": "#78351b",
|
|
"surface-container": "#e7f1e4",
|
|
"background": "#f3fcef",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-surface": "#2a332a",
|
|
"error": "#ba1a1a",
|
|
"primary-fixed-dim": "#3de273",
|
|
"tertiary-fixed-dim": "#ffb59b",
|
|
"text-secondary": "#64748B",
|
|
"on-error-container": "#93000a",
|
|
"surface-card": "#FFFFFF",
|
|
"on-primary-fixed": "#002109",
|
|
"inverse-primary": "#3de273",
|
|
"border-subtle": "#E2E8F0",
|
|
"on-secondary-fixed": "#00201c",
|
|
"primary-fixed": "#66ff8e"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"container-margin": "32px",
|
|
"sidebar-width": "260px",
|
|
"card-padding": "20px",
|
|
"gutter": "24px",
|
|
"base": "8px",
|
|
"toolbar-height": "72px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-sm": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"title-sm": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"mono-code": ["jetbrainsMono"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"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;
|
|
}
|
|
body {
|
|
background-color: #F8F9FA;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex font-body-md text-on-surface">
|
|
<!-- Sidebar (Layout Standard per SCREEN_38) -->
|
|
<aside class="w-[sidebar-width] bg-primary h-screen flex flex-col shrink-0">
|
|
<!-- Sidebar Header -->
|
|
<div class="h-[toolbar-height] bg-white flex items-center px-6 shrink-0 border-b border-outline-variant">
|
|
<img alt="BizOne Logo" class="h-10 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQgepHPm1Tlccl-KTg8J_Ohes_HmUgNgQpebBka5A4EQPSSDJrON0j4R_Wi6gOOlV-crnscfaztwQY6GRKbVjGWaAPn82BG2LhxBEdmD2OdYn3u-HSKsss2Q3qS4hTV0Dilzn1z0Qfx6dV3FRqKID5gAM5yb3TSVi4T96F6mQ69bBzh1Tib2zs9oKFXieUJs--RsKWw3BUiKUhBQcm-SBiWSSonbzAA8xFReCq3iOVJXR5O3RgUrfRv_GFfnoN4KFeTJM3smpcLrs"/>
|
|
</div>
|
|
<!-- Sidebar Content -->
|
|
<nav class="flex-grow pt-8 px-4 flex flex-col gap-2">
|
|
<div class="w-full h-10 rounded-lg bg-accent-blue/10 flex items-center px-4 text-accent-blue gap-3 cursor-pointer">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="login">login</span>
|
|
<span class="font-body-sm font-semibold">Login</span>
|
|
</div>
|
|
<div class="w-full h-10 rounded-lg hover:bg-white/5 flex items-center px-4 text-white/70 gap-3 cursor-pointer transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="help">help</span>
|
|
<span class="font-body-sm">Support</span>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<div class="flex-grow flex flex-col">
|
|
<!-- TopBar (Layout Standard per SCREEN_38) -->
|
|
<header class="h-[toolbar-height] bg-white border-b border-outline-variant flex items-center justify-end px-8">
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="translate">translate</span>
|
|
</button>
|
|
<div class="h-8 w-[1px] bg-outline-variant"></div>
|
|
<button class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-outline-variant hover:bg-surface-container-low transition-colors">
|
|
<span class="font-body-sm font-semibold">Help Center</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Login Content -->
|
|
<main class="flex-grow flex items-center justify-center p-4">
|
|
<div class="w-full max-w-[440px] flex flex-col gap-8">
|
|
<!-- Brand Header Section -->
|
|
<div class="flex flex-col items-center text-center gap-4">
|
|
<div class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center shadow-md">
|
|
<span class="material-symbols-outlined text-[40px] text-white" data-icon="chat" style="font-variation-settings: 'FILL' 1;">chat</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<h1 class="font-headline-md text-headline-md text-on-background">WhatsApp Business Admin</h1>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Manage your enterprise communication flow</p>
|
|
</div>
|
|
</div>
|
|
<!-- Login Card -->
|
|
<div class="bg-surface-card rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] p-10 flex flex-col gap-6 border border-border-subtle">
|
|
<form action="#" class="flex flex-col gap-6" method="POST">
|
|
<!-- Email Field -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant" for="email">EMAIL ADDRESS</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-outline-variant" data-icon="mail">mail</span>
|
|
</div>
|
|
<input class="w-full pl-10 pr-4 py-3 bg-white border border-outline-variant rounded-lg focus:ring-2 focus:ring-accent-blue focus:border-accent-blue outline-none transition-all font-body-sm placeholder:text-outline-variant" id="email" name="email" placeholder="admin@enterprise.com" required="" type="email"/>
|
|
</div>
|
|
</div>
|
|
<!-- Password Field -->
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex justify-between items-center">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant" for="password">PASSWORD</label>
|
|
<a class="font-body-sm text-body-sm text-accent-blue hover:underline" href="#">Forgot password?</a>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-outline-variant" data-icon="lock">lock</span>
|
|
</div>
|
|
<input class="w-full pl-10 pr-12 py-3 bg-white border border-outline-variant rounded-lg focus:ring-2 focus:ring-accent-blue focus:border-accent-blue outline-none transition-all font-body-sm placeholder:text-outline-variant" id="password" name="password" placeholder="••••••••" required="" type="password"/>
|
|
<button class="absolute inset-y-0 right-0 pr-3 flex items-center text-outline-variant hover:text-on-surface-variant" type="button">
|
|
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Options -->
|
|
<div class="flex items-center">
|
|
<label class="flex items-center cursor-pointer group">
|
|
<input class="w-5 h-5 rounded border-outline-variant text-accent-blue focus:ring-accent-blue transition-all cursor-pointer" type="checkbox"/>
|
|
<span class="ml-3 font-body-sm text-body-sm text-on-surface-variant group-hover:text-on-surface">Remember me on this device</span>
|
|
</label>
|
|
</div>
|
|
<!-- Login Button -->
|
|
<button class="w-full bg-primary hover:bg-primary-light text-white py-3.5 px-6 rounded-lg font-title-sm text-title-sm active:scale-[0.98] transition-all flex items-center justify-center gap-2 shadow-md" type="submit">
|
|
Login
|
|
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</form>
|
|
<!-- Divider -->
|
|
<div class="relative flex items-center py-2">
|
|
<div class="flex-grow border-t border-outline-variant"></div>
|
|
<span class="flex-shrink mx-4 font-label-caps text-label-caps text-outline">OR ACCESS VIA</span>
|
|
<div class="flex-grow border-t border-outline-variant"></div>
|
|
</div>
|
|
<!-- Single Sign On -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<button class="flex items-center justify-center gap-2 py-2.5 px-4 border border-outline-variant rounded-lg hover:bg-surface-container-low transition-colors font-body-sm text-on-surface">
|
|
<img alt="Google Logo" class="w-5 h-5" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEC-LHezB1AcHz3tXX50q_uaRaZWABYnQ0g3OIPLvQNnRb0k8zRQDCXhBBoNvIx8-WPupeVMC3Ki2g0NR-aAVdzwoIcVcn1aMyxUZ1dQUehIZdMALB3YbjMvOous8kcuk6H-clYjzolZgukVPqg_XsAOrkKpyClnPQfgws63zje2Tf1dUCdImZPQDj20S33sPXwHlxedy_k3Y-cn2mWb6r9Rn9Ejx_Li31nkGfR46d6kB6NBU_x_-EyzSxyEPMgZ1pMWTZ6_knQkU"/>
|
|
Google
|
|
</button>
|
|
<button class="flex items-center justify-center gap-2 py-2.5 px-4 border border-outline-variant rounded-lg hover:bg-surface-container-low transition-colors font-body-sm text-on-surface">
|
|
<span class="material-symbols-outlined text-on-surface" data-icon="key">key</span>
|
|
SSO
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Help -->
|
|
<footer class="flex flex-col items-center gap-4">
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
|
New to WhatsApp Business? <a class="text-accent-blue font-semibold hover:underline" href="#">Apply for API access</a>
|
|
</p>
|
|
<div class="flex gap-6">
|
|
<a class="font-label-caps text-label-caps text-outline hover:text-on-surface-variant transition-colors" href="#">PRIVACY POLICY</a>
|
|
<a class="font-label-caps text-label-caps text-outline hover:text-on-surface-variant transition-colors" href="#">TERMS OF SERVICE</a>
|
|
<a class="font-label-caps text-label-caps text-outline hover:text-on-surface-variant transition-colors" href="#">HELP CENTER</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<!-- Visual Background Element (Subtle, repurposed for brand) -->
|
|
<div class="fixed top-24 right-0 p-12 -z-10 opacity-[0.03] hidden lg:block">
|
|
<span class="material-symbols-outlined text-[320px] text-primary" data-icon="hub">hub</span>
|
|
</div>
|
|
</body></html> |