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
158
screen_design/zappcare_access_denied/code.html
Normal file
158
screen_design/zappcare_access_denied/code.html
Normal file
@ -0,0 +1,158 @@
|
||||
<!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/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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-effect {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface flex flex-col min-h-screen">
|
||||
<!-- TopAppBar Logic: Rendered as Transactional Shell (Suppressed Nav Cluster) -->
|
||||
<header class="fixed top-0 left-0 w-full h-16 glass-effect z-50 flex items-center px-12 justify-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-3xl" data-icon="lock_person">lock_person</span>
|
||||
<span class="text-xl font-black text-sky-900 font-headline tracking-tight">ZappCare</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area: Centered Vertical Journey -->
|
||||
<main class="flex-grow flex items-center justify-center px-6 pt-16">
|
||||
<div class="max-w-xl w-full text-center space-y-12">
|
||||
<!-- Architectural Graphic Element -->
|
||||
<div class="relative inline-block">
|
||||
<div class="w-48 h-48 mx-auto bg-surface-container-low rounded-full flex items-center justify-center">
|
||||
<div class="w-32 h-32 bg-surface-container-lowest rounded-full shadow-2xl shadow-slate-900/5 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-error text-6xl" data-icon="gpp_maybe">gpp_maybe</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Subtle Gradient Accents -->
|
||||
<div class="absolute -top-4 -right-4 w-12 h-12 rounded-full primary-gradient opacity-20 blur-xl"></div>
|
||||
<div class="absolute -bottom-4 -left-4 w-16 h-16 rounded-full bg-tertiary-container opacity-20 blur-xl"></div>
|
||||
</div>
|
||||
<!-- Typography Content -->
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold font-headline text-on-surface tracking-tight">
|
||||
Access Denied
|
||||
</h1>
|
||||
<p class="text-lg text-on-surface-variant max-w-sm mx-auto leading-relaxed">
|
||||
You don't have permission to view this page. This area is restricted to authorized personnel.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Tonal Component Card for Metadata/Help (Asymmetric Pattern) -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full inline-flex items-center gap-4 text-sm font-medium border border-outline-variant/15">
|
||||
<div class="flex -space-x-2">
|
||||
<img alt="Admin" class="w-8 h-8 rounded-full border-2 border-surface" data-alt="headshot of a middle-aged male IT administrator with a professional friendly expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCmHAT99cpDBGdBnnZduw6FV8_Gr9dKPHkL1EUNcxhWfWVUYeVXd9yGIW4c8dge8cYPBySHHL9EE-C359OUGVD5RMl1A9BCw2z1T7fd3xU1NGi-0XYx-snzH9SUX0G67qYZ_DD-e-PdQB03rKQ1MjuEdMSXzxS8dyfCAChtIk4olIveMR_XYXS90BwSidnnDrKgNXaQNqpEmbrNQ7y1UGTjFaOcJX_2WGowjgQNZSmEut6Lnlg31v6vOdfkpvZR5l02GnGHPHL_BJk"/>
|
||||
<img alt="Support" class="w-8 h-8 rounded-full border-2 border-surface" data-alt="headshot of a young female support specialist with a calm and helpful demeanor" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABs2hHb5HD0EWUbgSkIeYTdQKDQhSl-N8AiQsrYFTPzrNTalESL1dVImd5N6m3yEAtnAKnEBVtRCGCZgs_o4wxjVUvlStfwnHULo35Z5NukyywhDpkiYQK9sRcwBPOLAl-pdGlbjJ_nF9iuBWbM1xDDol6cl41DAQxC7LiPxt8vkUY9E20QiBi_l0rA56N3LM6CqQLF_WKkw5mkUe_2WHAXV5XWcxPuAN4nrsua0asGqULGn4bOBcMG7I5MGvplyYt1LrKVw2652M"/>
|
||||
</div>
|
||||
<span class="text-on-surface-variant">Need help? Contact your <span class="text-primary font-bold">Workspace Administrator</span></span>
|
||||
</div>
|
||||
<!-- Primary Action -->
|
||||
<div class="pt-4 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a class="primary-gradient text-white px-8 py-4 rounded-full font-bold text-base shadow-lg hover:scale-105 transition-all duration-300 flex items-center gap-2" href="/dashboard">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
<button class="bg-transparent border border-outline-variant/30 text-on-surface px-8 py-4 rounded-full font-semibold text-base hover:bg-surface-container-high transition-colors">
|
||||
Request Access
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer: Tonal Branding -->
|
||||
<footer class="py-12 px-12 text-center">
|
||||
<div class="inline-flex items-center gap-8 text-on-surface-variant/60 text-xs font-semibold tracking-widest uppercase">
|
||||
<span class="hover:text-primary transition-colors cursor-pointer">Security Protocol 403-E</span>
|
||||
<div class="w-1.5 h-1.5 bg-outline-variant/30 rounded-full"></div>
|
||||
<span class="hover:text-primary transition-colors cursor-pointer">Support Documentation</span>
|
||||
<div class="w-1.5 h-1.5 bg-outline-variant/30 rounded-full"></div>
|
||||
<span class="hover:text-primary transition-colors cursor-pointer">Enterprise Status</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Background Architectural Textures -->
|
||||
<div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] rounded-full bg-primary-container/10 blur-[120px]"></div>
|
||||
<div class="absolute bottom-[-5%] left-[-10%] w-[35%] h-[35%] rounded-full bg-secondary-container/10 blur-[100px]"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user