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
274
screen_design/zappcare_notifications/code.html
Normal file
274
screen_design/zappcare_notifications/code.html
Normal file
@ -0,0 +1,274 @@
|
||||
<!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 | Notification Center</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@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": {
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-container": "#36647e",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"secondary": "#35637d",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#f7f9fc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-surface": "#191c1e",
|
||||
"on-background": "#191c1e",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"tertiary": "#865219",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-container": "#005870",
|
||||
"on-primary": "#ffffff"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body min-h-screen">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen fixed left-0 top-0 w-64 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-xl flex flex-col py-8 px-4 space-y-2 z-50">
|
||||
<div class="flex items-center px-4 mb-8">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-container rounded-xl flex items-center justify-center mr-3">
|
||||
<span class="material-symbols-outlined text-white" data-icon="architecture">architecture</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Architectural Inbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mb-6 mx-2 py-3 px-4 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl font-headline font-bold flex items-center justify-center space-x-2 transition-transform duration-200 active:scale-95 shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add">add</span>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Nav Item: Inbox -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
||||
<span>Inbox</span>
|
||||
</a>
|
||||
<!-- Nav Item: Analytics -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="bar_chart">bar_chart</span>
|
||||
<span>Analytics</span>
|
||||
</a>
|
||||
<!-- Nav Item: Campaigns -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||
<span>Campaigns</span>
|
||||
</a>
|
||||
<!-- Nav Item: Team -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span>Team</span>
|
||||
</a>
|
||||
<!-- Nav Item: Settings -->
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 flex items-center space-x-3 px-4 py-3 bg-white/40 rounded-xl">
|
||||
<img class="w-8 h-8 rounded-full object-cover" data-alt="portrait of a professional workspace administrator in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuASgoUmV_cxkzoEI0lwhSuAymFWXnKVkkKpjp4xrxagKCQphBFafh6uLraEEPzWdO7tQ0iEBK724XW8zZUCulWzA2ZXx23qo_dQyPOzN6jWioG6U_BxUN7sFCga13xdCE1G2LsnMVVZ1Tg6kkeMrJR1lDnSo1vqZ--c9kJ-BuN2iuzRTGgYcyby90eEtHQdTvFUrO05uA2hrlOwNvHx1jtgW2eKDziTglJePR7n4QYYZybRq5w_Zym0DFO_2JqYIEBIiXnF7gke9O4"/>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-xs font-bold truncate">ZappCare Workspace</p>
|
||||
<p class="text-[10px] text-slate-500">Admin Panel</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Workspace Area -->
|
||||
<main class="ml-64 min-h-screen relative">
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex items-center bg-surface-container-highest px-4 py-2 rounded-full w-80">
|
||||
<span class="material-symbols-outlined text-outline mr-2 text-xl" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-full p-0" placeholder="Search conversations..." type="text"/>
|
||||
</div>
|
||||
<nav class="flex space-x-6">
|
||||
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">Overview</a>
|
||||
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">History</a>
|
||||
<a class="text-sky-700 font-bold border-b-2 border-sky-600 pb-1 font-['Inter'] text-sm tracking-normal" href="#">Audit Logs</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="relative w-10 h-10 flex items-center justify-center text-primary rounded-full hover:bg-primary-container/20 transition-all duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 rounded-full hover:bg-slate-200 transition-all duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 rounded-full hover:bg-slate-200 transition-all duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Overlay / Notification Center Rail -->
|
||||
<section class="absolute top-16 right-8 w-96 z-50">
|
||||
<div class="glass-panel rounded-3xl shadow-2xl shadow-on-surface/5 p-6 overflow-hidden flex flex-col max-h-[calc(100vh-100px)]">
|
||||
<!-- Notification Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black tracking-tight text-on-surface">Notifications</h2>
|
||||
<p class="text-sm text-on-surface-variant font-medium">4 urgent alerts pending</p>
|
||||
</div>
|
||||
<button class="text-primary text-xs font-bold hover:underline">Clear all</button>
|
||||
</div>
|
||||
<!-- Tonal Groups -->
|
||||
<div class="space-y-6 overflow-y-auto pr-2">
|
||||
<!-- Alert: Severity Red -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-error-container/30 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined" data-icon="wifi_off" style="font-variation-settings: 'FILL' 1;">wifi_off</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">Channel Disconnected</h3>
|
||||
<span class="text-[10px] font-bold text-outline">2m ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">The 'Sales-Support' WhatsApp API channel has lost connection. Action required.</p>
|
||||
<div class="mt-3 flex gap-2">
|
||||
<button class="text-xs font-bold py-1.5 px-3 bg-error text-white rounded-full">Reconnect Now</button>
|
||||
<button class="text-xs font-bold py-1.5 px-3 text-on-surface-variant hover:bg-surface-container-high rounded-full">Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Alert: Severity Red -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-error-container/30 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined" data-icon="error_outline" style="font-variation-settings: 'FILL' 1;">error_outline</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">Delivery Failure</h3>
|
||||
<span class="text-[10px] font-bold text-outline">15m ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">High bounce rate detected in 'Summer Promo'. 1,204 messages failed to deliver.</p>
|
||||
<div class="mt-3">
|
||||
<button class="text-xs font-bold text-primary hover:underline">View error report</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Success: Severity Green (using tertiary from theme) -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary-container/30 flex items-center justify-center text-on-secondary-container">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">Campaign Completed</h3>
|
||||
<span class="text-[10px] font-bold text-outline">1h ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">'Customer Feedback Q3' has finished sending to all 45,000 recipients.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Info/Success: New User -->
|
||||
<div class="group relative bg-surface-container-lowest p-4 rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary-container/30 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="person_add" style="font-variation-settings: 'FILL' 1;">person_add</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline font-bold text-on-surface">New User Invited</h3>
|
||||
<span class="text-[10px] font-bold text-outline">2h ago</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant mt-1 leading-relaxed">Sarah Miller has been invited to the 'Product Marketing' team workspace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Architectural Lift -->
|
||||
<div class="mt-6 pt-6 border-t-2 border-surface-container-high text-center">
|
||||
<button class="w-full py-4 text-sm font-bold text-primary hover:bg-primary-container/10 transition-colors rounded-2xl">
|
||||
View All Activity History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Main Content Canvas (Background) -->
|
||||
<div class="p-8 space-y-8 opacity-40 select-none pointer-events-none">
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="h-48 bg-surface-container-low rounded-3xl"></div>
|
||||
<div class="h-48 bg-surface-container-low rounded-3xl"></div>
|
||||
<div class="h-48 bg-surface-container-low rounded-3xl"></div>
|
||||
</div>
|
||||
<div class="h-96 bg-surface-container-low rounded-3xl w-full"></div>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="h-64 bg-surface-container-low rounded-3xl"></div>
|
||||
<div class="h-64 bg-surface-container-low rounded-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_notifications/screen.png
Normal file
BIN
screen_design/zappcare_notifications/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Reference in New Issue
Block a user