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
188
screen_design/zappcare_accept_invitation/code.html
Normal file
188
screen_design/zappcare_accept_invitation/code.html
Normal file
@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Accept Invitation | 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&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": {
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-background": "#191c1e",
|
||||
"primary-container": "#87ceeb",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary": "#0c6780",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-container": "#36647e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"secondary": "#35637d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"tertiary": "#865219",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error-container": "#ffdad6"
|
||||
},
|
||||
"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; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 24px 48px -12px rgba(25, 28, 30, 0.08);
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen flex flex-col">
|
||||
<!-- TopAppBar (Supressed from navigation shell logic but used as branding header) -->
|
||||
<header class="fixed top-0 left-0 w-full h-16 bg-white/80 dark:bg-slate-950/80 backdrop-blur-lg flex justify-between items-center px-8 lg:px-12 z-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 primary-gradient rounded-full flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-sm" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
</div>
|
||||
<span class="text-xl font-black text-sky-900 dark:text-white font-['Manrope'] tracking-tight">ZappCare</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors" href="#">Docs</a>
|
||||
<a class="text-sm font-medium text-slate-600 hover:text-sky-600 transition-colors" href="#">Support</a>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-grow flex items-center justify-center px-4 pt-20 pb-12 relative overflow-hidden">
|
||||
<!-- Abstract Background Decorative Elements -->
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[400px] h-[400px] rounded-full bg-primary-container/20 blur-[120px]"></div>
|
||||
<div class="absolute bottom-[-5%] left-[-5%] w-[300px] h-[300px] rounded-full bg-secondary-container/30 blur-[100px]"></div>
|
||||
<div class="w-full max-w-md">
|
||||
<div class="glass-card rounded-[2rem] p-8 lg:p-10 border border-white/40 relative z-10">
|
||||
<!-- Invitation Context -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-surface-container-low rounded-full mb-6">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">mail</span>
|
||||
</div>
|
||||
<h1 class="font-headline text-3xl font-extrabold text-on-surface tracking-tight mb-2">You're invited</h1>
|
||||
<p class="text-on-surface-variant text-sm font-medium">
|
||||
Join your team at <span class="text-primary font-bold">name@company.com</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Acceptance Form -->
|
||||
<form class="space-y-5">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[0.8rem] font-semibold text-on-surface-variant ml-1 font-label" for="fullname">Full Name</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3.5 text-on-surface placeholder:text-outline/60 focus:ring-2 focus:ring-primary/20 transition-all duration-200" id="fullname" placeholder="Enter your full name" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[0.8rem] font-semibold text-on-surface-variant ml-1 font-label" for="password">Password</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3.5 text-on-surface placeholder:text-outline/60 focus:ring-2 focus:ring-primary/20 transition-all duration-200" id="password" placeholder="Create a password" type="password"/>
|
||||
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-outline hover:text-primary transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-[10px] text-on-surface-variant/70 mt-1 ml-1 italic">Must be at least 8 characters long.</p>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[0.8rem] font-semibold text-on-surface-variant ml-1 font-label" for="confirm-password">Confirm Password</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3.5 text-on-surface placeholder:text-outline/60 focus:ring-2 focus:ring-primary/20 transition-all duration-200" id="confirm-password" placeholder="Repeat your password" type="password"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<button class="w-full primary-gradient text-white font-bold py-4 rounded-xl 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">
|
||||
<span>Accept Invitation</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-8 pt-6 border-t border-outline-variant/10 text-center">
|
||||
<p class="text-xs text-on-surface-variant/80 leading-relaxed px-4">
|
||||
By clicking "Accept Invitation", you agree to ZappCare's
|
||||
<a class="text-primary font-semibold hover:underline" href="#">Terms of Service</a> and
|
||||
<a class="text-primary font-semibold hover:underline" href="#">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Team Preview Footer (Asymmetric Layout Hint) -->
|
||||
<div class="mt-8 flex items-center justify-between px-2">
|
||||
<div class="flex -space-x-3">
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="professional headshot of a team member with a friendly smile on a soft blue background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDlAjo8AcBuyDUeTaGG8HMl-UsiXE9SUpH_kQJu_ivgj-3H0mEPVnhsh4ttF8nG-6CE4VNyIk9YRSLSSH_ZB36x1iZlmS-OVbQHdp0GvOxCpf4RiuZMeqrtdxN9mLXTzz5WaTqU7ydOk-cjJmueQ1_PgZXcvM08LlyoCz_p5tyKCwTu6iXGyJFFrSzpLe-gIzkWWxa0CvHBSK8hpV_VWrP0Vxk6Z7xnqDWHxGmhvngGZM5bLgCbxdoRXlkc3xm2y36EABRONP-UGa8"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a confident female professional with glasses in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdpbm0p_UM9SbakS75T7WOhTt8gaT7uAiCGEr9nKAzOr59cSHfz7BXAhcDxEl1rxAM8nkQXx8c6aoHvJvwZ0eV_777BjL6COwWL7ON3lVBtGZOaMhcYXEytdyjsy6ntjB2rM87XqMsIn_XePCjlwui7o8olYlxMNBdvNmc6AMzO8wxswIAFihO9aMV4H6ScQnwEQVK5RamBWJCnCK4c_e2K96h87xH6YuOEGZORB8s0GzwJwNjm-K_jy4ZrtwE7daUumommnkbW3o"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="smiling young creative professional with short hair and a neutral grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQyYWsXtGby2qYBHwl_JUEuGh1xRMjVsqVrdbZIqP-PRdYqcw_EKaq9UOlnSKIPMtKzpEwIa-9N927h7UFGoRlXfUaSZnrECZPsNWDbdywSBX3jTicEtze1Gsn_KlGeJPEU8mKJFudpEWrMLx8ExQd9Z3VxxSbhpKURIoBkNvUAsQoX2n5ZS_1Uqk01tJv66KZ92g_ORVFtNMXCbm1GAcntLeBJyXoElEd0oAEpq_4sYtvG9liEJx_4xB_74BlS32gTMcQ1azGAG8"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface bg-primary-container flex items-center justify-center text-[10px] font-bold text-on-primary-container">
|
||||
+12
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[11px] font-semibold text-on-surface-variant uppercase tracking-wider">Join 15 colleagues already on ZappCare</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Meta -->
|
||||
<footer class="py-6 text-center text-[11px] text-outline/50 uppercase tracking-[0.2em]">
|
||||
© 2024 ZappCare Enterprise Systems
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_accept_invitation/screen.png
Normal file
BIN
screen_design/zappcare_accept_invitation/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Reference in New Issue
Block a user