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
165
screen_design/forgot_password_zappcare_website/code.html
Normal file
165
screen_design/forgot_password_zappcare_website/code.html
Normal file
@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Forgot Password | ZappCare</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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": {
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"background": "#f7f9fc",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"outline": "#6f787d",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-primary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#865219",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-tint": "#0c6780",
|
||||
"primary-container": "#87ceeb",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface": "#f7f9fc",
|
||||
"primary": "#0c6780",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, .font-manrope { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
.glass-effect {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex items-center justify-center p-6 selection:bg-primary-container">
|
||||
<!-- Main Architectural Canvas -->
|
||||
<main class="w-full max-w-[1200px] grid grid-cols-1 md:grid-cols-2 bg-surface-container-lowest rounded-full overflow-hidden shadow-[0_24px_48px_-12px_rgba(25,28,30,0.08)]">
|
||||
<!-- Brand/Visual Side -->
|
||||
<section class="hidden md:flex flex-col justify-between p-12 bg-surface-container-low relative overflow-hidden">
|
||||
<!-- Decorative Architectural Circles -->
|
||||
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary-container/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-24 -right-24 w-64 h-64 bg-secondary-container/30 rounded-full blur-3xl"></div>
|
||||
<div class="z-10 flex items-center gap-3">
|
||||
<img alt="ZappCare Logo" class="w-10 h-10 object-contain" data-alt="Modern geometric logo for ZappCare featuring a stylized blue 'Z' with clean architectural lines on a white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_vn6oETrjQnVssK-k-UW17rTGjUn2cH5Xihy7PCe6binimeQt46SpL72bKwMJhLGS75VFpjSYIyPeFd6LcSWkAhC78rSPYmvnwvX5QKmrOV_2TNcibR7xjVxv7uZIia_Kngbdx5uN07yoQa4fvzEh6jSSUkSxVEa7nsWOQon7SvnD308FuQSG4KcjkQnzxG7t27vGPiA60rL5pMfzMTKnIQgbYrcD0-L55FbeyTLcmSTI53SS9SlMFQ0FKGLacBxRNO1M7R7heO8"/>
|
||||
<span class="text-xl font-extrabold font-manrope text-primary tracking-tight">ZappCare</span>
|
||||
</div>
|
||||
<div class="z-10 mt-auto">
|
||||
<h1 class="text-4xl lg:text-5xl font-extrabold font-manrope text-on-surface leading-[1.1] mb-6 tracking-tight">
|
||||
Secure your <br/> <span class="text-primary">Business Suite.</span>
|
||||
</h1>
|
||||
<p class="text-on-surface-variant text-lg max-w-md font-body leading-relaxed">
|
||||
Our architectural approach to workspace management ensures your data remains fluid yet fortified.
|
||||
</p>
|
||||
</div>
|
||||
<div class="z-10 mt-12 pt-12">
|
||||
<div class="flex items-center gap-4 p-4 rounded-xl bg-surface-container-lowest shadow-[0_8px_16px_-4px_rgba(0,0,0,0.04)] border border-outline-variant/15">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
||||
<span class="material-symbols-outlined">security</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-on-surface">Privacy First Architecture</p>
|
||||
<p class="text-xs text-on-surface-variant">End-to-end encrypted sessions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Functional Side: Forgot Password Form -->
|
||||
<section class="flex flex-col justify-center p-8 md:p-16 lg:p-24 bg-surface-container-lowest">
|
||||
<div class="max-w-sm mx-auto w-full">
|
||||
<header class="mb-10">
|
||||
<button class="group flex items-center gap-2 text-on-surface-variant hover:text-primary transition-all duration-200 mb-8 font-medium text-sm">
|
||||
<span class="material-symbols-outlined text-lg group-hover:-translate-x-1 transition-transform">arrow_back</span>
|
||||
Back to Login
|
||||
</button>
|
||||
<h2 class="text-3xl font-extrabold font-manrope text-on-surface mb-3 tracking-tight">Reset Password</h2>
|
||||
<p class="text-on-surface-variant leading-relaxed text-sm">Enter your email to receive reset link. We'll send you an architectural recovery path to regain access.</p>
|
||||
</header>
|
||||
<form class="space-y-6">
|
||||
<!-- Email Input -->
|
||||
<div class="group">
|
||||
<label class="block text-xs font-semibold text-on-surface-variant mb-2 uppercase tracking-wider px-1" for="email">Email Address</label>
|
||||
<div class="relative">
|
||||
<input class="w-full px-4 py-4 bg-surface-container-highest border-none focus:ring-0 rounded-xl text-on-surface placeholder:text-outline transition-all duration-300" id="email" placeholder="name@company.com" type="email"/>
|
||||
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary transition-all duration-300 group-focus-within:w-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reset Action -->
|
||||
<button class="w-full primary-gradient text-on-primary font-bold py-4 rounded-full shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2" type="submit">
|
||||
Send Reset Link
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Support Context -->
|
||||
<footer class="mt-12 text-center">
|
||||
<p class="text-xs text-outline leading-relaxed">
|
||||
Didn't receive the email? Check your spam folder or <a class="text-primary font-semibold hover:underline decoration-2 underline-offset-4" href="#">contact ZappCare Support</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Decorative Mesh -->
|
||||
<div class="fixed bottom-0 left-0 w-full h-1/2 -z-10 pointer-events-none opacity-40">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-container/20 to-transparent"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/forgot_password_zappcare_website/screen.png
Normal file
BIN
screen_design/forgot_password_zappcare_website/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
Reference in New Issue
Block a user