172 lines
8.4 KiB
HTML
172 lines
8.4 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>Chart Board - Forgot Password</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@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: {
|
|
"primary-fixed-dim": "#bec6e0",
|
|
"on-surface-variant": "#45464d",
|
|
"error": "#ba1a1a",
|
|
"on-surface": "#191c1e",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-primary-fixed-variant": "#3f465c",
|
|
"tertiary": "#000000",
|
|
"on-secondary-container": "#57657a",
|
|
"inverse-surface": "#2d3133",
|
|
"inverse-primary": "#bec6e0",
|
|
"surface": "#f7f9fb",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"on-secondary-fixed": "#0d1c2e",
|
|
"surface-container": "#eceef0",
|
|
"secondary-fixed-dim": "#b9c7df",
|
|
"on-tertiary-container": "#98805d",
|
|
"surface-bright": "#f7f9fb",
|
|
"primary-container": "#131b2e",
|
|
"on-primary-container": "#7c839b",
|
|
"background": "#f7f9fb",
|
|
"secondary-fixed": "#d5e3fc",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-container": "#271901",
|
|
"on-primary": "#ffffff",
|
|
"on-tertiary-fixed": "#271901",
|
|
"on-primary-fixed": "#131b2e",
|
|
"on-tertiary": "#ffffff",
|
|
"on-tertiary-fixed-variant": "#574425",
|
|
"outline-variant": "#c6c6cd",
|
|
"on-background": "#191c1e",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"tertiary-fixed-dim": "#dec29a",
|
|
"primary": "#000000",
|
|
"secondary": "#515f74",
|
|
"error-container": "#ffdad6",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-low": "#f2f4f6",
|
|
"surface-tint": "#565e74",
|
|
"surface-container-high": "#e6e8ea",
|
|
"secondary-container": "#d5e3fc",
|
|
"on-error": "#ffffff",
|
|
"primary-fixed": "#dae2fd",
|
|
"on-secondary-fixed-variant": "#3a485b",
|
|
"surface-variant": "#e0e3e5",
|
|
"surface-dim": "#d8dadc",
|
|
"tertiary-fixed": "#fcdeb5",
|
|
"outline": "#76777d"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface min-h-screen flex flex-col">
|
|
<!-- TopAppBar - Shell Visibility Rule: Hidden on Transactional/Login screens per instruction -->
|
|
<!-- Since this is a "Forgot Password" screen (Transactional), TopAppBar and BottomNavBar are suppressed -->
|
|
<main class="flex-grow flex items-center justify-center p-6 sm:p-12 lg:p-24 relative overflow-hidden">
|
|
<!-- Tonal Architecture Background Elements (Replacing Lines) -->
|
|
<div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden -z-10">
|
|
<div class="absolute -top-1/4 -right-1/4 w-[600px] h-[600px] bg-secondary-container/20 rounded-full blur-[120px]"></div>
|
|
<div class="absolute -bottom-1/4 -left-1/4 w-[600px] h-[600px] bg-primary-container/5 rounded-full blur-[120px]"></div>
|
|
</div>
|
|
<div class="w-full max-w-xl flex flex-col items-center">
|
|
<!-- Branding Anchor -->
|
|
<div class="mb-16 text-center">
|
|
<div class="flex items-center justify-center gap-2 mb-4">
|
|
<div class="w-10 h-10 bg-primary flex items-center justify-center rounded-xl">
|
|
<span class="material-symbols-outlined text-on-primary" data-icon="lock_reset">lock_reset</span>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-on-surface text-[32px] font-black tracking-tight leading-none mb-2">Chart Board</h2>
|
|
<div class="w-12 h-1 bg-primary-container rounded-full mx-auto"></div>
|
|
</div>
|
|
<!-- Content Canvas (Bento/Card Structure) -->
|
|
<div class="w-full bg-surface-container-lowest/80 backdrop-blur-xl rounded-[2rem] p-8 md:p-12 shadow-[0_32px_64px_-12px_rgba(25,28,30,0.06)] relative">
|
|
<!-- Status Pillar (Signifying Security/Action Area) -->
|
|
<div class="absolute left-0 top-12 bottom-12 w-1 bg-primary rounded-r-full"></div>
|
|
<div class="max-w-md mx-auto">
|
|
<div class="space-y-2 mb-10">
|
|
<h1 class="text-[2rem] font-bold text-on-surface tracking-tighter leading-tight">Reset your access</h1>
|
|
<p class="text-on-surface-variant text-[0.875rem] leading-relaxed">
|
|
Enter the email associated with your identity. We'll verify your credentials and send a secure recovery link to your inbox.
|
|
</p>
|
|
</div>
|
|
<form action="#" class="space-y-8">
|
|
<!-- Input Field Module -->
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center px-1">
|
|
<label class="text-[0.75rem] font-semibold text-on-surface-variant uppercase tracking-widest" for="email">Email Address</label>
|
|
</div>
|
|
<div class="relative group">
|
|
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none text-outline">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="mail">mail</span>
|
|
</div>
|
|
<input class="w-full bg-surface-container-highest border-none rounded-xl py-4 pl-12 pr-4 text-on-surface focus:ring-0 focus:bg-surface-container-lowest transition-all duration-300 placeholder:text-outline/60 text-[0.875rem]" id="email" placeholder="name@organization.com" required="" type="email"/>
|
|
<!-- Ghost Border effect on focus via sibling selector in a real app, here handled by bg shift -->
|
|
</div>
|
|
</div>
|
|
<!-- Primary Action -->
|
|
<div class="pt-4">
|
|
<button class="w-full bg-primary text-on-primary font-bold py-4 rounded-xl flex items-center justify-center gap-3 hover:bg-primary/90 transition-all active:scale-[0.98] shadow-lg shadow-primary/10 group" type="submit">
|
|
<span class="text-[0.875rem] tracking-tight">Send Reset Link</span>
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<!-- Reassuring Instructions / Footer -->
|
|
<div class="mt-12 flex flex-col items-center space-y-6">
|
|
<div class="flex items-start gap-4 p-5 bg-surface-container-low rounded-2xl">
|
|
<span class="material-symbols-outlined text-primary mt-0.5" data-icon="info" style="font-variation-settings: 'FILL' 1;">info</span>
|
|
<div>
|
|
<p class="text-[0.75rem] font-bold text-on-surface mb-1">Security Verification</p>
|
|
<p class="text-[0.75rem] text-on-surface-variant leading-normal">
|
|
For your protection, recovery links expire in 30 minutes. If you don't see the email, please check your spam folder or contact your system administrator.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a class="text-[0.875rem] font-medium text-on-surface-variant hover:text-primary transition-colors flex items-center gap-2 group" href="#">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="keyboard_backspace">keyboard_backspace</span>
|
|
<span>Back to secure sign in</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Supporting Visual Column (Subtle Asymmetry) -->
|
|
<div class="mt-12 w-full grid grid-cols-1 md:grid-cols-3 gap-4 px-4 opacity-40">
|
|
<div class="h-1 bg-surface-container-highest rounded-full"></div>
|
|
<div class="h-1 bg-surface-container-highest rounded-full"></div>
|
|
<div class="h-1 bg-primary/20 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Global Footer - Lightweight for Transactional focus -->
|
|
<footer class="p-8 text-center">
|
|
<p class="text-[0.75rem] text-outline font-medium tracking-tight">
|
|
© 2024 Sentinel Identity Management Systems. Built with absolute integrity.
|
|
</p>
|
|
</footer>
|
|
</body></html> |