chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
147
screen_design/zappcare_forgot_password_success/code.html
Normal file
147
screen_design/zappcare_forgot_password_success/code.html
Normal file
@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ZappCare | Reset Link Sent</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&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": {
|
||||
"background": "#f7f9fc",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"outline": "#6f787d",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"tertiary": "#865219",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.bg-primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface min-h-screen flex flex-col">
|
||||
<!-- Hero Background Texture (Visual Layer) -->
|
||||
<div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-[10%] -left-[5%] w-[40%] h-[40%] rounded-full bg-primary-container/20 blur-[120px]"></div>
|
||||
<div class="absolute top-[60%] -right-[10%] w-[50%] h-[50%] rounded-full bg-secondary-container/10 blur-[150px]"></div>
|
||||
</div>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="relative z-10 flex-grow flex items-center justify-center p-6">
|
||||
<div class="w-full max-w-lg">
|
||||
<!-- Brand Logo Center -->
|
||||
<div class="flex justify-center mb-12">
|
||||
<img class="h-12 w-auto" data-alt="ZappCare corporate logo, clean geometric design in deep teal and light blue tones, professional healthcare business aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjf3KK-i-VIeK-K6l_Iv28OuTbng9ED5tBx36rgBJ-dU3efCy7ayccv_Nnh6BQJw-sLdlvVTjoUnrscmBbpenSYWP5UJRjJ9WPAj5DVk8adBk6kthYMfT491JeVnbrRuXbZ4vN6kM88FxSuQJVoEK6jNJfiF_6R7ThZEYhxRbSH4UpwFMW9a2N6JptEYnsCEdWLMKRp7t9l5UUWm5Ltr2ilbVTWlk2wsoKWKMYgxzk6WgQ9Fbu1g2X5s-vwu4cndHiHpjrxUvJxCE"/>
|
||||
</div>
|
||||
<!-- Success Card -->
|
||||
<div class="surface-container-lowest rounded-full p-12 text-center shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<!-- Icon Assembly -->
|
||||
<div class="relative inline-flex mb-8">
|
||||
<div class="absolute inset-0 bg-primary-container/30 rounded-full scale-150 blur-xl"></div>
|
||||
<div class="relative w-24 h-24 bg-primary-gradient rounded-full flex items-center justify-center text-white shadow-lg">
|
||||
<span class="material-symbols-outlined text-5xl" style="font-variation-settings: 'FILL' 1;">mark_email_read</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message Header -->
|
||||
<h1 class="font-headline font-extrabold text-3xl text-on-surface tracking-tight mb-4">
|
||||
Check your email
|
||||
</h1>
|
||||
<!-- Detailed Message -->
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed mb-10 max-w-sm mx-auto">
|
||||
We've sent a password reset link to <span class="font-semibold text-primary">user@company.com</span>. Please click the link to set a new password.
|
||||
</p>
|
||||
<!-- Action Button -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<a class="bg-primary-gradient text-white font-headline font-bold py-4 px-8 rounded-full shadow-md hover:shadow-xl hover:scale-[1.02] transition-all duration-200 flex items-center justify-center gap-2" href="#">
|
||||
<span>Back to Login</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Footer Support Note -->
|
||||
<div class="mt-12 pt-8 border-t border-outline-variant/15">
|
||||
<p class="text-sm text-on-surface-variant">
|
||||
Didn't receive the email?
|
||||
<a class="text-primary font-semibold hover:underline" href="#">Click to resend</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Navigation (Simplified for transactional) -->
|
||||
<div class="mt-8 flex justify-center gap-8 text-sm font-medium text-outline">
|
||||
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||
<a class="hover:text-primary transition-colors" href="#">Contact Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Visual Footer Accent -->
|
||||
<footer class="relative z-10 p-8 flex justify-center opacity-50">
|
||||
<p class="font-headline text-xs tracking-widest uppercase text-outline">© 2024 ZappCare Business HQ</p>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_forgot_password_success/screen.png
Normal file
BIN
screen_design/zappcare_forgot_password_success/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Reference in New Issue
Block a user