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
240
screen_design/zappcare_edit_profile/code.html
Normal file
240
screen_design/zappcare_edit_profile/code.html
Normal file
@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Edit Profile | ZappCare</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&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;
|
||||
}
|
||||
.glass-blur {
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface antialiased">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- SideNavBar Rail -->
|
||||
<aside class="h-screen w-64 flex flex-col sticky left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900 py-8 px-4 gap-2 z-50">
|
||||
<div class="flex items-center gap-3 mb-8 px-2">
|
||||
<img alt="ZappCare Logo" class="w-10 h-10 rounded-full" data-alt="Modern geometric logo with interlocking blue shapes representing care and connectivity on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCK-Rq57_VlZkeBiIOYsAoG1WCPGbDC0Y7GDAEJb6enBc5O-hE7SkNTaRlSd05RrZUhpcUbkBmcSzDjRFFbfICBOz89quIjCf_rqrhonPy2Al_l06hLBX2eBf3fKYL1_iITfwQ1frV-rJGeBYqzf1zvqaThKvr6EmKb648lpocn9kZ61LGlpkP_urlBcuz85KA2tRDuEjzubcxnyFCo6Pe3WKfaYGiWSRIN_HRd2pqBp3xv3o2hPAlklRLzz1d1tk4D4XyYVQE8nVQ"/>
|
||||
<div>
|
||||
<h1 class="text-xl font-extrabold text-[#0c6780] dark:text-[#87ceeb] leading-tight font-headline">ZappCare</h1>
|
||||
<p class="text-xs text-on-surface-variant opacity-70">Business HQ</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span> Inbox
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span> Contacts
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span> Campaigns
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span> Automation
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span> Analytics
|
||||
</a>
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span> Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto flex flex-col gap-1 border-t border-transparent pt-4">
|
||||
<a class="text-[#40484c] dark:text-slate-400 p-3 flex items-center gap-3 hover:bg-[#e0e3e5]/50 rounded-xl transition-all duration-200 hover:translate-x-1 font-headline font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span> Support
|
||||
</a>
|
||||
<a class="bg-[#87ceeb] text-[#005870] rounded-xl font-bold p-3 flex items-center gap-3 transition-all duration-200 font-headline tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle" style="font-variation-settings: 'FILL' 1;">account_circle</span> Account
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col min-w-0">
|
||||
<!-- 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 gap-4 flex-1">
|
||||
<div class="relative w-full max-w-md">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span>
|
||||
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-outline/50" placeholder="Search profile settings..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/50 transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/50 transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-outline-variant/30 mx-2"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-on-surface">Alex Harrison</span>
|
||||
<img alt="User profile" class="w-10 h-10 rounded-full border-2 border-white shadow-sm" data-alt="Professional portrait of a middle-aged man with a friendly smile, clean-shaven, wearing a blue shirt, neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMvUYvs-AZyDxDEzXLroTXCj0aVu90UQUsj7Yxi-BFgXmQzl7NP-eJQ12jmjV9TzRiTjVddJZM52AzjRRRdf-lJW9fOrZoHIyLWOAsEff1TtMJxgrMvPaXiO9Z5M_gnrAt4gLN2DC3-mUpjmrkDYHHZYXfLFm8d8i_WNuzxaXJKEYLshiNq2yFPMWlZ4mPj3rXk9_7GvmS1QhpFBvnifKnGPDzGbjnxQnNDGymsp5JlDl2A75zvr-91mVaq3NLRz34km14ojbtClA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Profile Content Section -->
|
||||
<div class="flex-1 overflow-y-auto p-12 max-w-4xl mx-auto w-full">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-12">
|
||||
<h2 class="font-headline text-4xl font-extrabold text-on-surface tracking-tight mb-2">Edit Profile</h2>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed">Update your public identity and account settings within the ZappCare ecosystem.</p>
|
||||
</div>
|
||||
<!-- Bento-style Profile Form -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Avatar Upload Card -->
|
||||
<div class="md:col-span-1 bg-surface-container-low rounded-full p-8 flex flex-col items-center justify-center text-center shadow-sm">
|
||||
<div class="relative group cursor-pointer mb-6">
|
||||
<div class="w-40 h-40 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden border-4 border-white shadow-xl group-hover:scale-[1.02] transition-transform duration-300">
|
||||
<img alt="User Avatar" class="w-full h-full object-cover" data-alt="Close up portrait of a man with warm eyes and a confident expression, soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1JoV60WYHLr72TNd7Z73WecKbCgRSflDFdKG1nryuKqo0vya9Q0DyLfWXm2g3G4slKCzFgRNk6Dwoy2WjUQEcamOPphtqdsxuwIueJPcXk9TdPO0QJ-z8Z3waJYR3SramrhYQhSy2TOP1ZBiyF_tu0NCLYCr6dQ31pXond1ob9KqnY20acRjfVJGzD5DAqzGY_tsuOy7KwkSAtUoM35emrssmIWYs-rCb0cqa3TYwbDA6uQichB2ErN-IkmOCmHyBMf0lq1HlAp4"/>
|
||||
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-3xl">photo_camera</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="absolute bottom-1 right-1 bg-primary text-white p-2 rounded-full shadow-lg hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-on-surface mb-1">Profile Photo</h3>
|
||||
<p class="text-xs text-on-surface-variant leading-tight">JPG, GIF or PNG.<br/>Max size of 800K</p>
|
||||
</div>
|
||||
<!-- Details Card -->
|
||||
<div class="md:col-span-2 bg-surface-container-lowest rounded-full p-10 flex flex-col gap-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
|
||||
<div class="space-y-6">
|
||||
<div class="relative">
|
||||
<label class="block text-xs font-semibold text-primary mb-2 px-1 font-headline uppercase tracking-wider" for="full_name">Full Name</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl py-4 px-5 text-on-surface focus:ring-2 focus:ring-primary/20 transition-all font-medium" id="full_name" type="text" value="Alex Harrison"/>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary scale-x-0 transition-transform focus-within:scale-x-100"></div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label class="block text-xs font-semibold text-outline mb-2 px-1 font-headline uppercase tracking-wider" for="email">Work Email</label>
|
||||
<input class="w-full bg-surface-container-high border-none rounded-xl py-4 px-5 text-on-surface-variant opacity-70 cursor-not-allowed font-medium" disabled="" id="email" type="email" value="alex.h@zappcare.com"/>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label class="block text-xs font-semibold text-outline mb-2 px-1 font-headline uppercase tracking-wider" for="role">Workspace Role</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl py-4 px-5 text-on-surface focus:ring-2 focus:ring-primary/20 transition-all font-medium" id="role" type="text" value="Lead Communications Specialist"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex items-center justify-end gap-4 mt-4">
|
||||
<button class="px-8 py-4 rounded-xl font-headline font-bold text-on-surface-variant hover:bg-surface-container-high transition-all duration-200 flex items-center gap-2 border border-outline-variant/15">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="px-10 py-4 rounded-xl font-headline font-bold text-white bg-gradient-to-br from-[#0c6780] to-[#87ceeb] shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all duration-200 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">save</span>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Stats Bento -->
|
||||
<div class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-primary-container/20 rounded-full p-6 flex items-center gap-4">
|
||||
<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">verified_user</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-on-primary-container font-headline uppercase tracking-tighter">Security Level</p>
|
||||
<p class="text-on-primary-container font-bold text-lg">High Efficiency</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-full p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">chat_bubble</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-outline font-headline uppercase tracking-tighter">Total Outreach</p>
|
||||
<p class="text-on-surface font-bold text-lg">1,284 Chats</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-full p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">history</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-outline font-headline uppercase tracking-tighter">Last Active</p>
|
||||
<p class="text-on-surface font-bold text-lg">2 mins ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user