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
165
screen_design/login_zappcare_website/code.html
Normal file
165
screen_design/login_zappcare_website/code.html
Normal file
@ -0,0 +1,165 @@
|
||||
<!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 - Enterprise Sign In</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": {
|
||||
"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;
|
||||
}
|
||||
.glass-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface min-h-screen flex flex-col">
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-grow flex items-center justify-center px-6 py-12">
|
||||
<!-- Tonal Architecture: The centered auth card -->
|
||||
<div class="w-full max-w-[480px]">
|
||||
<!-- Branding Header -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<img alt="ZappCare Logo" class="h-12 w-auto mb-6" data-alt="Modern geometric corporate logo for ZappCare in shades of ocean blue and cyan with clean professional lines" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxBGWRao1KJPLFvG2u8R8vgMfJcH6IkOJpBpRUZrE7f0HQb815Ev4WLmdoq-CbeREY2uXPls9Z8t_UEq4-WN8duFZarvNdn36TWcr2qQvqX39YfPd08vykE0gEf7OauCLthrGmi1H6HREtYZW67W5ohRzQVhxHqsq3WjienNvO_WS5YgwoQKT4sasRVZxkKqXZnGnIQY1zGRoor6Zpmnug-CvJxe2stEwmw935K9gzccaYvketchB2Kc3kPAMiasRg-xeMFPXBt2s"/>
|
||||
<h1 class="font-headline text-3xl font-extrabold tracking-tight text-on-surface">Welcome back</h1>
|
||||
<p class="font-body text-on-surface-variant mt-2">Sign in to your ZappCare Business Suite</p>
|
||||
</div>
|
||||
<!-- Auth Card: surface-container-lowest for max lift -->
|
||||
<div class="bg-surface-container-lowest rounded-full p-10 shadow-[0_24px_48px_-12px_rgba(25,28,30,0.06)] ring-1 ring-outline-variant/15">
|
||||
<form class="space-y-6">
|
||||
<!-- Email Field -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label text-sm font-semibold text-on-surface-variant ml-1" for="email">Work Email</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full h-14 px-4 bg-surface-container-highest border-none rounded-xl font-body text-on-surface focus:ring-2 focus:ring-primary transition-all placeholder:text-outline-variant" id="email" name="email" placeholder="name@company.com" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password Field -->
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<label class="font-label text-sm font-semibold text-on-surface-variant" for="password">Password</label>
|
||||
<a class="text-sm font-semibold text-primary hover:text-on-primary-container transition-colors" href="#">Forgot password?</a>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<input class="w-full h-14 px-4 bg-surface-container-highest border-none rounded-xl font-body text-on-surface focus:ring-2 focus:ring-primary transition-all placeholder:text-outline-variant" id="password" name="password" placeholder="••••••••" type="password"/>
|
||||
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-outline hover:text-on-surface transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sign In Button: Primary Fluid Motion Set -->
|
||||
<button class="w-full h-14 glass-gradient text-white rounded-full font-headline font-bold text-base flex items-center justify-center space-x-2 shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-98 transition-all duration-200" type="submit">
|
||||
<span>Sign In</span>
|
||||
<span class="material-symbols-outlined">arrow_forward</span>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Alternative Access -->
|
||||
<div class="mt-8 pt-8 border-t border-outline-variant/10">
|
||||
<button class="w-full h-14 bg-surface-container-low hover:bg-surface-container-high text-on-surface font-semibold rounded-xl flex items-center justify-center space-x-3 transition-all duration-200">
|
||||
<span class="material-symbols-outlined text-[20px]">fingerprint</span>
|
||||
<span>Sign in with SSO</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Prompt -->
|
||||
<p class="text-center mt-8 font-body text-sm text-on-surface-variant">
|
||||
Don't have an account? <a class="font-bold text-primary" href="#">Contact Administrator</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer: Tonal Architecture -->
|
||||
<footer class="py-8 px-10 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
|
||||
<div class="flex items-center space-x-3 text-outline text-sm">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">shield</span>
|
||||
<span class="font-medium">Secure Enterprise Access</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-8 text-sm font-medium text-outline">
|
||||
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
|
||||
<a class="hover:text-primary transition-colors" href="#">Support</a>
|
||||
</div>
|
||||
<div class="text-outline text-xs font-medium">
|
||||
© 2024 ZappCare, Inc.
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Background Decorative Element (Subtle Tonal Architecture) -->
|
||||
<div class="fixed top-0 right-0 -z-10 w-1/2 h-1/2 opacity-20 pointer-events-none">
|
||||
<div class="absolute top-0 right-0 w-full h-full" style="background: radial-gradient(circle at 70% 30%, #87ceeb 0%, transparent 70%);"></div>
|
||||
</div>
|
||||
<div class="fixed bottom-0 left-0 -z-10 w-1/2 h-1/2 opacity-10 pointer-events-none">
|
||||
<div class="absolute bottom-0 left-0 w-full h-full" style="background: radial-gradient(circle at 30% 70%, #0c6780 0%, transparent 60%);"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user