197 lines
12 KiB
HTML
197 lines
12 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>2FA Verification | 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;500;600;700;800&family=Inter:wght@400;500;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"/>
|
|
<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": {
|
|
"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": "#25d366",
|
|
"surface-tint": "#006d2f",
|
|
"primary": "#006d2f",
|
|
"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": "64px"
|
|
},
|
|
"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>
|
|
body {
|
|
background-color: #F8F9FA;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.otp-input:focus {
|
|
border-color: #006d2f;
|
|
box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2);
|
|
outline: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-main flex items-center justify-center min-h-screen p-container-margin">
|
|
<!-- Auth Shell Suppression: No TopNavBar or SideNavBar for focused transactional screen -->
|
|
<main class="w-full max-w-[480px]">
|
|
<!-- Branding Header -->
|
|
<div class="flex flex-col items-center mb-base text-center">
|
|
<div class="w-16 h-16 bg-primary-container rounded-xl flex items-center justify-center mb-6 shadow-sm">
|
|
<span class="material-symbols-outlined text-on-primary-container !text-4xl" data-icon="lock_person">lock_person</span>
|
|
</div>
|
|
<h1 class="font-headline-md text-headline-md text-text-primary mb-2">WhatsApp Business Admin</h1>
|
|
<p class="font-body-md text-body-md text-text-secondary">Enterprise API Secure Access</p>
|
|
</div>
|
|
<!-- 2FA Verification Card -->
|
|
<div class="bg-surface-card rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] p-10 border border-outline-variant/30">
|
|
<div class="mb-8 text-center">
|
|
<h2 class="font-title-sm text-title-sm text-text-primary mb-3">Two-Factor Authentication</h2>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
|
Open your <strong>Google Authenticator</strong> app and enter the 6-digit verification code below to verify your identity.
|
|
</p>
|
|
</div>
|
|
<!-- Verification Inputs -->
|
|
<form action="#" class="space-y-8" method="POST">
|
|
<div class="flex justify-between gap-2 md:gap-3" id="otp-container">
|
|
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
|
|
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
|
|
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
|
|
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
|
|
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
|
|
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<button class="w-full bg-primary-container text-on-primary-container font-headline-md py-4 rounded-lg hover:brightness-95 active:scale-[0.98] transition-all shadow-sm" type="submit">
|
|
Verify Code
|
|
</button>
|
|
<div class="flex items-center justify-between px-1">
|
|
<button class="flex items-center gap-2 font-label-caps text-label-caps text-primary hover:underline group" type="button">
|
|
<span class="material-symbols-outlined !text-sm group-hover:-translate-x-0.5 transition-transform" data-icon="arrow_back">arrow_back</span>
|
|
Back to Login
|
|
</button>
|
|
<button class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" type="button">
|
|
Need help?
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Footer Visual Reference (Mock App Interface Preview) -->
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-gutter opacity-90">
|
|
<div class="bg-surface-container rounded-xl p-6 border border-outline-variant/20 flex items-start gap-4">
|
|
<div class="bg-surface-card p-2 rounded-lg shadow-sm">
|
|
<span class="material-symbols-outlined text-primary" data-icon="smartphone">smartphone</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-label-caps text-label-caps text-text-primary mb-1">GOOGLE AUTHENTICATOR</h3>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant leading-tight">Generate secure codes even when your phone is offline.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container rounded-xl p-6 border border-outline-variant/20 flex items-start gap-4">
|
|
<div class="bg-surface-card p-2 rounded-lg shadow-sm">
|
|
<span class="material-symbols-outlined text-primary" data-icon="verified_user">verified_user</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-label-caps text-label-caps text-text-primary mb-1">ENTERPRISE SECURITY</h3>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant leading-tight">Your account is protected by mandatory 2FA protocols.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 text-center">
|
|
<img alt="Security Illustration" class="mx-auto w-32 h-auto opacity-40 grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional clean minimalist security illustration showing a protected digital vault with subtle green lighting accents. The image has a high-end enterprise SaaS aesthetic with white and soft gray background tones and a modern corporate vibe. Soft ambient shadows and vector precision create a mood of reliability and technical sophistication." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB5pe04Qhs8JdZfqsjDGPY981PgmRRgALMeqWuTUlNAWk16r3bt5ad4S6AFmm5_i_f2qbrSg-LUR525G1p6lzYdZ7PLm5j5aBes7s-0u-ET2UL-BViZko-uYy4Eo7NNJ5wnxFfUUx9AtGEYSP9G_iz-8_IF-flP6GrQ2Z_ZSDbj0UC9xatsKsh4F95TS0L12uqhu91f-xOfMDc68PMJ6rb73GPThFxHYWyuKFv_TwqF2YY2MQky_Q8KDcC0xV6npdi9WYoNivyh5fU"/>
|
|
</div>
|
|
</main>
|
|
<!-- Contextual Decorative Elements -->
|
|
<div class="fixed top-0 left-0 w-full h-1 bg-gradient-to-r from-primary/20 via-primary-container to-primary/20"></div>
|
|
</body></html> |