315 lines
18 KiB
HTML
315 lines
18 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>ZappCare - Change Password</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&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": {
|
|
"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;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
}
|
|
.tonal-architecture {
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
.architectural-frame {
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 200ms ease-in-out;
|
|
}
|
|
.architectural-frame:focus-within {
|
|
border-bottom-color: #0c6780;
|
|
}
|
|
.primary-gradient {
|
|
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body selection:bg-primary-container selection:text-on-primary-container">
|
|
<div class="flex min-h-screen">
|
|
<!-- SideNavBar -->
|
|
<aside class="h-screen w-64 flex flex-col sticky left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900 tonal-architecture z-50">
|
|
<div class="flex flex-col h-full py-8 px-4 gap-2">
|
|
<!-- Brand Anchor -->
|
|
<div class="flex items-center gap-3 px-3 mb-8">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-primary text-on-primary shadow-lg overflow-hidden">
|
|
<img alt="ZappCare Workspace Logo" data-alt="minimalist tech logo with geometric Z and C shapes in professional blue tones on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYFLdXBkWd-cHBp_b_hCrG3ptwzmkVuZ1BgzISihsc-QOw0-8dtvf5GsBtMkj8243TopzaqdQwhMWXA2vogUr5HOU4EriYvNcAkgp5b3IYb3M-UDuWX2rvINGYvPkFxr9Ij363NqhZcM_2kMHin_4oj9Oz4BPQhmmZYFOY0aNLaccaq0xYBwEN5rzonWoN3_1sHeQwxczyWECKwthEqll9ea5loFlrMHDGiaCDvNIOdkmK1AejV2uI9ewf3ACuwDmmZslIDo3kWNY"/>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-xl font-extrabold text-[#0c6780] dark:text-[#87ceeb] tracking-tight">ZappCare</span>
|
|
<span class="text-[10px] font-headline font-bold uppercase tracking-widest text-on-surface-variant/60">Business HQ</span>
|
|
</div>
|
|
</div>
|
|
<!-- Main Navigation -->
|
|
<nav class="flex-1 space-y-1">
|
|
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
|
<span class="font-headline font-semibold tracking-tight text-sm">Inbox</span>
|
|
</div>
|
|
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="group">group</span>
|
|
<span class="font-headline font-semibold tracking-tight text-sm">Contacts</span>
|
|
</div>
|
|
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
|
<span class="font-headline font-semibold tracking-tight text-sm">Campaigns</span>
|
|
</div>
|
|
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span>
|
|
<span class="font-headline font-semibold tracking-tight text-sm">Automation</span>
|
|
</div>
|
|
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
|
<span class="font-headline font-semibold tracking-tight text-sm">Analytics</span>
|
|
</div>
|
|
<!-- Active State: Settings -->
|
|
<div class="bg-[#87ceeb] text-[#005870] rounded-xl font-bold p-3 flex items-center gap-3 transition-all duration-200 cursor-default">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="font-headline tracking-tight text-sm">Settings</span>
|
|
</div>
|
|
</nav>
|
|
<!-- CTA -->
|
|
<button class="primary-gradient text-on-primary font-headline font-bold py-4 px-6 rounded-full shadow-lg shadow-primary/20 flex items-center justify-center gap-2 mb-6 hover:scale-[1.02] transition-transform">
|
|
<span class="material-symbols-outlined text-xl" data-icon="add_comment">add_comment</span>
|
|
<span>New Chat</span>
|
|
</button>
|
|
<!-- Footer Navigation -->
|
|
<div class="pt-4 mt-auto space-y-1">
|
|
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
|
<span class="font-headline font-semibold tracking-tight text-sm">Support</span>
|
|
</div>
|
|
<div class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
|
<span class="font-headline font-semibold tracking-tight text-sm">Account</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-1 flex flex-col bg-background relative overflow-hidden">
|
|
<!-- Asymmetric Background Elements -->
|
|
<div class="absolute -top-24 -right-24 w-96 h-96 bg-primary-container/20 rounded-full blur-[100px] pointer-events-none"></div>
|
|
<div class="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-secondary-container/10 rounded-full blur-[120px] pointer-events-none"></div>
|
|
<!-- TopAppBar -->
|
|
<header class="w-full h-16 sticky top-0 z-40 bg-[#f7f9fc]/85 dark:bg-slate-950/85 backdrop-blur-md shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)] flex items-center justify-between px-8">
|
|
<div class="flex items-center flex-1">
|
|
<div class="relative w-full max-w-md group">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline group-focus-within:text-primary transition-colors" data-icon="search">search</span>
|
|
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-12 pr-4 text-sm font-body focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search workspace settings..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors relative">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full"></span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
</button>
|
|
<div class="h-8 w-[1px] bg-outline-variant/30"></div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right">
|
|
<p class="text-sm font-bold text-on-surface leading-none">Sarah Jenkins</p>
|
|
<p class="text-[10px] text-on-surface-variant font-medium">Administrator</p>
|
|
</div>
|
|
<img alt="User profile" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm" data-alt="close-up portrait of a professional woman with a friendly expression in a brightly lit office setting, soft professional photography style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDLxR3bViXRY1nW4qGFpF9yo3p9rmem5PKAl9YEWtv4bPbG1cGV48znm00zAsO3GY6XMe96qnGxz7E1volUjtN9I65bwu9PWv4V6tAc7BxP-fq1ycVBrJg7oYUz1C_AIY5ByKFr3KlO-i7npwvQ9OGk1cVzV_tlsgjJdx9pte4_PGR3xCuB0ryMJZHZqZHAVu_fr1Vtpcy8YhfN_TagKsb3HT4LuacQXeI5XRI0ScMPuJHN7XL1mlWh9op-BM20aOB0lN60fayCCZE"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Scrollable Canvas -->
|
|
<div class="flex-1 overflow-y-auto p-12">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- Editorial Header -->
|
|
<div class="mb-12">
|
|
<nav class="flex items-center gap-2 text-xs font-bold text-outline uppercase tracking-widest mb-4">
|
|
<a class="hover:text-primary transition-colors" href="#">Settings</a>
|
|
<span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
|
|
<span class="text-primary">Security</span>
|
|
</nav>
|
|
<h1 class="text-5xl font-headline font-extrabold text-on-surface tracking-tight leading-tight">Change Password</h1>
|
|
<p class="text-on-surface-variant text-lg mt-4 max-w-xl leading-relaxed">
|
|
To maintain the architectural integrity of your ZappCare workspace, we recommend updating your password every 90 days.
|
|
</p>
|
|
</div>
|
|
<!-- Main Form Grid (Bento Style) -->
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Password Form Card -->
|
|
<div class="col-span-12 lg:col-span-7 bg-surface-container-lowest rounded-full p-10 shadow-[0_8px_32px_rgba(0,0,0,0.03)] relative overflow-hidden">
|
|
<form class="space-y-8 relative z-10">
|
|
<div class="space-y-6">
|
|
<!-- Current Password -->
|
|
<div class="flex flex-col gap-2 group">
|
|
<label class="text-xs font-bold text-on-surface-variant/70 uppercase tracking-widest ml-1">Current Password</label>
|
|
<div class="relative architectural-frame bg-surface-container-highest/30 rounded-xl overflow-hidden focus-within:bg-white transition-all">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline/50" data-icon="lock_open">lock_open</span>
|
|
<input class="w-full bg-transparent border-none py-4 pl-12 pr-4 font-body focus:ring-0" placeholder="••••••••••••" type="password"/>
|
|
</div>
|
|
</div>
|
|
<div class="h-[1px] bg-outline-variant/10 w-full"></div>
|
|
<!-- New Password -->
|
|
<div class="flex flex-col gap-2 group">
|
|
<label class="text-xs font-bold text-on-surface-variant/70 uppercase tracking-widest ml-1">New Password</label>
|
|
<div class="relative architectural-frame bg-surface-container-highest/30 rounded-xl overflow-hidden focus-within:bg-white transition-all">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline/50" data-icon="key">key</span>
|
|
<input class="w-full bg-transparent border-none py-4 pl-12 pr-4 font-body focus:ring-0" placeholder="Enter new password" type="password"/>
|
|
</div>
|
|
<p class="text-[10px] text-outline ml-1">Minimum 12 characters, including symbols and numbers.</p>
|
|
</div>
|
|
<!-- Confirm Password -->
|
|
<div class="flex flex-col gap-2 group">
|
|
<label class="text-xs font-bold text-on-surface-variant/70 uppercase tracking-widest ml-1">Confirm New Password</label>
|
|
<div class="relative architectural-frame bg-surface-container-highest/30 rounded-xl overflow-hidden focus-within:bg-white transition-all">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline/50" data-icon="verified_user">verified_user</span>
|
|
<input class="w-full bg-transparent border-none py-4 pl-12 pr-4 font-body focus:ring-0" placeholder="Repeat new password" type="password"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-4 flex items-center justify-between">
|
|
<button class="text-sm font-bold text-on-surface-variant hover:text-error transition-colors px-6 py-4 rounded-xl hover:bg-error-container/20" type="button">
|
|
Reset Form
|
|
</button>
|
|
<button class="primary-gradient text-on-primary font-headline font-bold py-4 px-10 rounded-full shadow-xl shadow-primary/25 flex items-center gap-3 hover:scale-105 active:scale-95 transition-all" type="submit">
|
|
<span>Update Password</span>
|
|
<span class="material-symbols-outlined" data-icon="shield_lock">shield_lock</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Sidebar Info Cards (Asymmetric Layout) -->
|
|
<div class="col-span-12 lg:col-span-5 flex flex-col gap-6">
|
|
<!-- Security Status -->
|
|
<div class="bg-surface-container-low rounded-full p-8 border-l-4 border-primary/40">
|
|
<div class="flex items-start gap-4">
|
|
<div class="bg-primary-container p-3 rounded-full">
|
|
<span class="material-symbols-outlined text-[#005870]" data-icon="security" style="font-variation-settings: 'FILL' 1;">security</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-bold text-on-surface uppercase tracking-tight">Account Security Status</h3>
|
|
<p class="text-xs text-on-surface-variant mt-1">Last changed 4 months ago. Your current password strength is <span class="text-primary font-bold">Medium</span>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Visual Decoration / Image -->
|
|
<div class="relative group h-48 rounded-full overflow-hidden shadow-lg">
|
|
<img alt="Cybersecurity" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="abstract close-up of high-tech server cooling fans and glowing blue light circuits in a dark clean data center environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDeOnYlVRyfIhwk9Bu4DxJz9ZHfL014epdC55q-2cqY5-FaqUCUoQtYChKC00ZRjA3bxFyYkQn4Frf2CCGJ0j7DYFizWGy4vL6dPYUri_A4JsWK8kLZS_QlDcEuQHncKB0k9QAxUIL536tHjkqm8gtwlEJH9xDs8ephBuhU0tPJFZBN4RvQbRSdNR2131QeXSAZ_7HS2AZMxhN0o2oIK0O3k61sftsQkjqLa-k3OL5d_30gIdNkZu-ExUHluCz_QXq3INOsFTkaAUQ"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-[#0c6780]/80 to-transparent flex flex-col justify-end p-6">
|
|
<span class="text-xs font-bold text-white uppercase tracking-widest opacity-80">ZappCare Security</span>
|
|
<h4 class="text-white font-headline font-bold">End-to-End Encryption Enabled</h4>
|
|
</div>
|
|
</div>
|
|
<!-- Quick Links -->
|
|
<div class="bg-white/40 backdrop-blur-sm rounded-full p-8 border border-white/60">
|
|
<h4 class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-4 ml-1">Related Settings</h4>
|
|
<ul class="space-y-3">
|
|
<li>
|
|
<a class="flex items-center justify-between text-sm text-on-surface hover:text-primary transition-colors group" href="#">
|
|
<span class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary" data-icon="phonelink_lock">phonelink_lock</span>
|
|
Two-Factor Authentication
|
|
</span>
|
|
<span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="flex items-center justify-between text-sm text-on-surface hover:text-primary transition-colors group" href="#">
|
|
<span class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary" data-icon="devices">devices</span>
|
|
Logged-in Devices
|
|
</span>
|
|
<span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Contextual Glass Rail (Floating Help) -->
|
|
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
|
|
<button class="w-14 h-14 rounded-full bg-white/85 backdrop-blur-md shadow-2xl flex items-center justify-center text-primary hover:scale-110 transition-transform duration-200">
|
|
<span class="material-symbols-outlined text-2xl" data-icon="chat_bubble">chat_bubble</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |