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
286
screen_design/zappcare_my_profile/code.html
Normal file
286
screen_design/zappcare_my_profile/code.html
Normal file
@ -0,0 +1,286 @@
|
||||
<!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" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&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": {
|
||||
"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;
|
||||
}
|
||||
.tonal-architecture {
|
||||
background: linear-gradient(135deg, #f7f9fc 0%, #f2f4f6 100%);
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body antialiased">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- SideNavBar Rail -->
|
||||
<aside class="bg-[#f2f4f6] dark:bg-slate-900 h-screen w-64 flex flex-col sticky left-0 top-0 py-8 px-4 gap-2 z-50">
|
||||
<div class="flex items-center gap-3 px-3 mb-8">
|
||||
<img alt="ZappCare Logo" class="w-10 h-10 rounded-xl object-cover" data-alt="Modern geometric abstract medical cross logo with soft blue gradients and rounded edges" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBscI1q3IkYS1h0w2B5X8dCVa8yuGjExanJOFwGC7NiAem7HGaTxb70C_ivABEEOr348DOUASwRPSZtn3sEMs4HUx1DDR2NfR3n-FrwhXEBDjuVQExs4eifJ-U2zQ-qyVJm5xBNvPvFp-nOPyznh3xycW-RIF000UaR_KXZi2klGMVEh98RU9rRkYvXI8IB1ZZ8wiIFxpw_88QhzvuwZKKZfSdEzx1hHbzF3d22QQYRmLxzNhFowpJMbxvg9o9t_niEO8wFEGQaZtE"/>
|
||||
<div>
|
||||
<h1 class="text-xl font-extrabold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold opacity-60">Business HQ</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mb-6 bg-gradient-to-br from-primary to-primary-container text-white py-4 px-6 rounded-full font-headline font-bold text-sm shadow-lg shadow-primary/20 flex items-center justify-center gap-2 transition-all hover:scale-[1.02] active:scale-95">
|
||||
<span class="material-symbols-outlined text-xl">add_comment</span>
|
||||
New Chat
|
||||
</button>
|
||||
<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 font-['Manrope'] 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 font-['Manrope'] 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 font-['Manrope'] 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 font-['Manrope'] 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 font-['Manrope'] 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 font-['Manrope'] 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 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 font-['Manrope'] font-semibold tracking-tight text-sm" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
Support
|
||||
</a>
|
||||
<!-- Active Account Tab -->
|
||||
<a class="bg-[#87ceeb] text-[#005870] rounded-xl font-bold p-3 flex items-center gap-3 transition-all duration-200 font-['Manrope'] 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 overflow-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 bg-[#f7f9fc]/85 dark:bg-slate-950/85 backdrop-blur-md flex items-center justify-between px-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-lg">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-surface-container rounded-full border-none focus:ring-2 focus:ring-primary/20 w-64 text-sm font-label" placeholder="Search profile settings..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:bg-white/50 rounded-full transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-white/50 rounded-full transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-outline-variant/30 mx-2"></div>
|
||||
<img alt="User profile" class="w-10 h-10 rounded-full border-2 border-white shadow-sm" data-alt="Professional headshot of a smiling man in a business casual outfit with soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvrdRKqGTHOpRgverFZzwjz3OgHypJh-JF7xJXcKzddWK4mUbvKHQgJTDN2K3J7ic5_xYPNRgOb-Ndgv2wp7PcVvozeDM-fh6m2Y9JggDjtN5_SDm2sic-e2O3-3bHTngfxGyFUVHM7EylSHic8BxKipS8OByTQxIxbH-dV7F0FD_bQY8L-NaSuF0w7sORv9fdZ14FVUjx7o8AZcgNkfRqoe_TjPS3iIhYyd8yhl_YbFCvKU3_NCWb6FKGYItu-O4ViTbb6G3noHA"/>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Page Canvas -->
|
||||
<div class="flex-1 overflow-y-auto p-8 lg:p-12">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<!-- Editorial Header -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-4xl font-headline font-extrabold text-on-surface tracking-tight mb-2">My Profile</h2>
|
||||
<p class="text-on-surface-variant font-body text-lg">Manage your personal details and workspace settings.</p>
|
||||
</div>
|
||||
<!-- Profile Bento Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Left Column: Identity Card -->
|
||||
<div class="lg:col-span-1 space-y-6">
|
||||
<div class="bg-surface-container-lowest rounded-full p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.02)] flex flex-col items-center text-center">
|
||||
<div class="relative mb-6">
|
||||
<img alt="Profile large" class="w-32 h-32 rounded-full border-4 border-background" data-alt="Close up professional portrait of a man with clean grooming and a friendly expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-NX0DkqPQeqqe4Di3k5tsKzDkObHJa-liUTe1pKfCrP48h_eTMUlkmjnaaXR54eGOX26_igAQaYUVNTZtHlNE4eCiPx_rAleAG5oZviR4A0X7EJT02Vk7oAOFKSxIW2uv6dTOBDMLlQcJhCVhSEzj4YXvvzMrhIRBiwVPcMSXqCTOMMa4vP3FqX4Pfg_Xy_5a3D7dUSjQ7R-c9SL1SoN204CDp9qw5g0ZdsbOl5mZF5TYGcg1BhNy3UTk31URO54B2AceTXWGZfA"/>
|
||||
<button class="absolute bottom-0 right-0 bg-primary text-white p-2 rounded-full shadow-lg hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">photo_camera</span>
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="text-2xl font-headline font-bold text-on-surface">Alex Thompson</h3>
|
||||
<p class="text-on-surface-variant font-medium mb-6">Senior Operations Lead</p>
|
||||
<div class="w-full space-y-3 pt-6 border-t border-surface-container">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-on-surface-variant">Status</span>
|
||||
<span class="px-2 py-0.5 bg-primary-container/30 text-on-primary-container rounded-full text-xs font-bold uppercase">Active</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-on-surface-variant">Member since</span>
|
||||
<span class="text-on-surface font-semibold">Jan 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-full p-6 space-y-4">
|
||||
<h4 class="font-headline font-bold text-sm text-primary uppercase tracking-widest">Workspace</h4>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-primary" data-weight="fill">hub</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface leading-none">ZappCare HQ</p>
|
||||
<p class="text-xs text-on-surface-variant">Primary Enterprise Tenant</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Info & Actions -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Information Section -->
|
||||
<div class="bg-surface-container-lowest rounded-full p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.02)]">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h4 class="text-xl font-headline font-bold text-on-surface">Personal Information</h4>
|
||||
<button class="flex items-center gap-2 text-primary font-bold text-sm hover:underline">
|
||||
<span class="material-symbols-outlined text-lg">edit</span>
|
||||
Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Full Name</label>
|
||||
<p class="text-lg font-medium text-on-surface">Alex Thompson</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Email Address</label>
|
||||
<p class="text-lg font-medium text-on-surface">alex.t@zappcare.biz</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Role</label>
|
||||
<p class="text-lg font-medium text-on-surface">Senior Operations Lead</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Timezone</label>
|
||||
<p class="text-lg font-medium text-on-surface">Pacific Standard Time (PST)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Security & Management -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Change Password -->
|
||||
<div class="bg-white rounded-full p-8 border border-outline-variant/10 hover:border-primary/20 transition-all group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-surface-container-low flex items-center justify-center mb-4 group-hover:bg-primary-container transition-colors">
|
||||
<span class="material-symbols-outlined text-on-primary-container">lock_reset</span>
|
||||
</div>
|
||||
<h4 class="font-headline font-bold text-lg mb-2">Change Password</h4>
|
||||
<p class="text-sm text-on-surface-variant mb-6 leading-relaxed">Update your login credentials to keep your account secure.</p>
|
||||
<button class="w-full py-3 border border-outline-variant text-on-surface-variant rounded-xl font-bold text-sm hover:bg-surface-container transition-colors">
|
||||
Update Password
|
||||
</button>
|
||||
</div>
|
||||
<!-- Two-Factor -->
|
||||
<div class="bg-white rounded-full p-8 border border-outline-variant/10 hover:border-primary/20 transition-all group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-surface-container-low flex items-center justify-center mb-4 group-hover:bg-primary-container transition-colors">
|
||||
<span class="material-symbols-outlined text-on-primary-container">verified_user</span>
|
||||
</div>
|
||||
<h4 class="font-headline font-bold text-lg mb-2">Two-Factor Auth</h4>
|
||||
<p class="text-sm text-on-surface-variant mb-6 leading-relaxed">Add an extra layer of security to your workspace login.</p>
|
||||
<button class="w-full py-3 border border-outline-variant text-on-surface-variant rounded-xl font-bold text-sm hover:bg-surface-container transition-colors">
|
||||
Enable 2FA
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Workspace Quick Access -->
|
||||
<div class="bg-gradient-to-r from-on-secondary-container to-primary rounded-full p-8 text-white flex items-center justify-between overflow-hidden relative">
|
||||
<div class="relative z-10">
|
||||
<h4 class="font-headline font-bold text-xl mb-1">Advanced Settings</h4>
|
||||
<p class="text-primary-fixed-dim/80 text-sm">Configure API keys, webhooks and developer tools.</p>
|
||||
</div>
|
||||
<button class="relative z-10 px-6 py-3 bg-white text-on-primary-container rounded-full font-bold text-sm shadow-xl hover:scale-105 transition-transform">
|
||||
Open Dashboard
|
||||
</button>
|
||||
<!-- Abstract decorative element -->
|
||||
<div class="absolute -right-8 -bottom-8 w-48 h-48 bg-white/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_my_profile/screen.png
Normal file
BIN
screen_design/zappcare_my_profile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
Reference in New Issue
Block a user