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
180
screen_design/reset_password_zappcare_website/code.html
Normal file
180
screen_design/reset_password_zappcare_website/code.html
Normal file
@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
.architectural-shadow {
|
||||
box-shadow: 0 24px 48px -12px rgba(25, 28, 30, 0.08);
|
||||
}
|
||||
input:focus + label, input:not(:placeholder-shown) + label {
|
||||
transform: translateY(-24px) scale(0.85);
|
||||
color: #0c6780;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface min-h-screen flex flex-col">
|
||||
<!-- Auth Layout Wrapper: Navigation suppressed per "Semantic Shell" mandate for Transactional pages -->
|
||||
<main class="flex-grow flex items-center justify-center p-6 lg:p-12">
|
||||
<div class="w-full max-w-[480px] flex flex-col gap-8">
|
||||
<!-- Branding Header -->
|
||||
<div class="flex flex-col items-center text-center gap-4">
|
||||
<div class="w-16 h-16 rounded-full overflow-hidden bg-surface-container-lowest shadow-sm flex items-center justify-center p-3">
|
||||
<img alt="ZappCare Logo" class="w-full h-full object-contain" data-alt="Minimalist abstract blue circle logo representing connection and care, professional corporate tech branding on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzEXGu4Qczw3-vmUDMQBpjJw-r9qsQ2kbYJ_HJwW18mG_4CR7A-ZN2tdAwd9eHAf9D0vSrOG0V5lr1h4c4FNJ87eMSLQmn7E9twuNrBCY7OeJzi6waQQImaSlHaifQoVjQ0wj75UJ_4blEoy3fQN1XRJ8Nw_v8-JC7_G8PQbguyFvxSjNf9enPoctYt6DfDSzbV8KWcf1u-BEmimaPx0rEDAbCHjpCb2rbTxhH0Ct2ymodgZNm-_ZNoBElIZfV-2daGK5Yv1h675A"/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<h1 class="font-headline font-extrabold text-3xl tracking-tight text-on-surface">Reset Password</h1>
|
||||
<p class="text-on-surface-variant font-body text-sm">Secure your ZappCare Business Suite account with a new password.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Card Container -->
|
||||
<div class="bg-surface-container-lowest architectural-shadow rounded-full p-8 lg:p-10 border border-outline-variant/15">
|
||||
<form class="space-y-8" onsubmit="return false;">
|
||||
<!-- Form Fields -->
|
||||
<div class="space-y-6">
|
||||
<!-- New Password Field -->
|
||||
<div class="relative group">
|
||||
<input class="block w-full px-0 py-3 bg-transparent border-0 border-b-2 border-surface-container-highest focus:ring-0 focus:border-primary transition-colors text-on-surface font-medium" id="new_password" placeholder=" " type="password"/>
|
||||
<label class="absolute left-0 top-3 text-on-surface-variant font-label text-sm transition-all duration-200 pointer-events-none origin-left" for="new_password">New Password</label>
|
||||
<span class="absolute right-0 top-3 material-symbols-outlined text-outline-variant cursor-pointer hover:text-primary transition-colors">visibility</span>
|
||||
</div>
|
||||
<!-- Confirm Password Field -->
|
||||
<div class="relative group">
|
||||
<input class="block w-full px-0 py-3 bg-transparent border-0 border-b-2 border-surface-container-highest focus:ring-0 focus:border-primary transition-colors text-on-surface font-medium" id="confirm_password" placeholder=" " type="password"/>
|
||||
<label class="absolute left-0 top-3 text-on-surface-variant font-label text-sm transition-all duration-200 pointer-events-none origin-left" for="confirm_password">Confirm New Password</label>
|
||||
<span class="absolute right-0 top-3 material-symbols-outlined text-outline-variant cursor-pointer hover:text-primary transition-colors">visibility</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Security Requirements Checklist (Bento Card Pattern) -->
|
||||
<div class="bg-surface-container-low rounded-xl p-6 space-y-4">
|
||||
<h3 class="font-headline font-bold text-sm text-on-secondary-container tracking-wide flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
SECURITY REQUIREMENTS
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-[16px] font-bold">check</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface">Minimum 12 characters</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-[16px] font-bold">check</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface">Upper & lowercase letters</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-surface-container-highest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline-variant text-[16px]">circle</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface-variant">At least one number (0-9)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-surface-container-highest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline-variant text-[16px]">circle</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-on-surface-variant">One special character (!@#$)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Action -->
|
||||
<button class="w-full bg-gradient-primary text-on-primary font-headline font-bold py-4 px-8 rounded-full shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200" type="submit">
|
||||
Save New Password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Footer Navigation -->
|
||||
<div class="flex justify-center">
|
||||
<a class="group flex items-center gap-2 text-on-surface-variant hover:text-primary transition-colors font-label font-medium text-sm" href="#">
|
||||
<span class="material-symbols-outlined text-sm transition-transform group-hover:-translate-x-1">arrow_back</span>
|
||||
Back to Login
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Content-only background decoration to avoid standard lists -->
|
||||
<div class="fixed top-0 right-0 -z-10 w-1/3 h-full opacity-40 pointer-events-none">
|
||||
<div class="absolute top-[10%] right-[10%] w-64 h-64 bg-primary-container/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-[20%] right-[5%] w-96 h-96 bg-secondary-container/20 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user