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
422
screen_design/system_audit_log_super_admin/code.html
Normal file
422
screen_design/system_audit_log_super_admin/code.html
Normal file
@ -0,0 +1,422 @@
|
||||
<!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@700;800;900&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": {
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"secondary": "#35637d",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline": "#6f787d",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"error": "#ba1a1a",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-container": "#87ceeb",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"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;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, .brand-font { font-family: 'Manrope', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- Sidebar Navigation Shell -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-800 flex flex-col p-4 space-y-2 z-20">
|
||||
<div class="px-2 mb-8">
|
||||
<h1 class="font-['Manrope'] font-black text-2xl tracking-tight text-[#0c6780]">ZappCare</h1>
|
||||
<p class="text-xs font-semibold text-slate-500 uppercase tracking-widest mt-1">Super Admin</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="domain">domain</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Tenants</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="hub">hub</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Channels</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="payments">payments</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Billing</span>
|
||||
</a>
|
||||
<a class="bg-white dark:bg-slate-700 text-[#0c6780] dark:text-[#87ceeb] rounded-xl shadow-sm flex items-center px-4 py-3 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="history_edu">history_edu</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Audit Log</span>
|
||||
</a>
|
||||
<a class="flex items-center px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="settings">settings</span>
|
||||
<span class="font-['Manrope'] font-semibold text-base">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-6">
|
||||
<button class="w-full bg-gradient-to-br from-[#0c6780] to-[#87ceeb] text-white py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-[#0c6780]/20 hover:scale-[0.98] transition-transform duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
New Instance
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mt-6 px-2">
|
||||
<img alt="User" class="w-10 h-10 rounded-full border-2 border-white shadow-sm" data-alt="professional portrait of a confident male executive in a modern tech office environment with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD85oBfIbdzNcBop89iC9cxeBVSiG6OdVx30igRBhHNp0ChWtgDll_TD_SEyeZhs9yBj52dIBpUMZkAOIE0elOs0wMk475mXIweOz4c9m7go72VpkZQayLwHmhEVVQEcreNt1lYFiXo2NbUvnrei72XPAD4fZK2exQzYcZ-vknTJIm1xbJAlEZERKVKi0lMfuLnPkYjDhSkdsyjfCmhn_tLka-FiKnGlAOXaEGdaqRWsc-iuPq5Mjf133P8I7PFADoWyWPeHfs1JZE"/>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-sm font-bold text-on-surface truncate">Alex Rivera</p>
|
||||
<p class="text-[10px] font-medium text-slate-500 uppercase tracking-tighter">Master Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- Top App Bar -->
|
||||
<header class="sticky top-0 z-10 bg-[#f7f9fc]/85 backdrop-blur-md flex justify-between items-center w-full px-8 py-4 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.06)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="font-headline text-2xl font-extrabold text-primary tracking-tight">System Audit Log</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline" data-icon="search">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-surface-container-highest rounded-full text-sm border-none focus:ring-2 focus:ring-primary w-64 transition-all" placeholder="Search event metadata..." type="text"/>
|
||||
</div>
|
||||
<button class="p-2 hover:bg-surface-container rounded-full text-outline transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-surface-container rounded-full text-outline transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-8">
|
||||
<!-- Advanced Filters Block -->
|
||||
<section class="bg-surface-container-lowest rounded-full p-6 mb-8 shadow-sm flex flex-wrap items-end gap-6 border-none">
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="block text-[10px] font-bold text-outline uppercase tracking-widest mb-1.5 ml-1">Tenant Organization</label>
|
||||
<div class="relative">
|
||||
<select class="w-full appearance-none bg-surface-container-low border-none rounded-xl py-3 px-4 text-sm font-medium focus:ring-2 focus:ring-primary-container pr-10">
|
||||
<option>All Tenants</option>
|
||||
<option>HealthBridge Global</option>
|
||||
<option>Apex MedTech</option>
|
||||
<option>Unity Health Systems</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-outline" data-icon="expand_more">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="block text-[10px] font-bold text-outline uppercase tracking-widest mb-1.5 ml-1">Actor (User)</label>
|
||||
<div class="relative">
|
||||
<select class="w-full appearance-none bg-surface-container-low border-none rounded-xl py-3 px-4 text-sm font-medium focus:ring-2 focus:ring-primary-container pr-10">
|
||||
<option>Any Actor</option>
|
||||
<option>System Automations</option>
|
||||
<option>Admin Users</option>
|
||||
<option>API Service Account</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-outline" data-icon="person_search">person_search</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="block text-[10px] font-bold text-outline uppercase tracking-widest mb-1.5 ml-1">Date Range</label>
|
||||
<div class="relative">
|
||||
<button class="w-full bg-surface-container-low border-none rounded-xl py-3 px-4 text-sm font-medium text-left flex justify-between items-center hover:bg-surface-container transition-colors">
|
||||
<span>Last 24 Hours</span>
|
||||
<span class="material-symbols-outlined text-outline" data-icon="calendar_month">calendar_month</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-surface-container-highest hover:bg-outline-variant/30 text-on-surface-variant p-3.5 rounded-xl transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
|
||||
</button>
|
||||
<button class="bg-primary text-white py-3.5 px-8 rounded-xl font-bold hover:scale-95 transition-all shadow-md shadow-primary/20">
|
||||
Apply View
|
||||
</button>
|
||||
</section>
|
||||
<!-- Tonal Data Table Container -->
|
||||
<div class="bg-surface-container-low rounded-full overflow-hidden border-none shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-high/50">
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Timestamp</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Tenant Name</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Actor</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Entity</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Action</th>
|
||||
<th class="px-6 py-4 text-[11px] font-black text-outline uppercase tracking-[0.2em]">Metadata</th>
|
||||
<th class="px-6 py-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-surface-container-highest/20">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">14:22:45 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">HealthBridge Global</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container text-[10px] font-bold">JD</div>
|
||||
<span class="text-sm font-medium">Jane Doe</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="hub">hub</span>
|
||||
WhatsApp Channel
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-green-100 text-green-700 text-[10px] font-black uppercase tracking-wider rounded-full">CREATED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"API_KEY_ROTATED: channel_id_882..."</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">14:18:12 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">Apex MedTech</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center text-outline">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="robot_2">robot_2</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium">System Core</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="person">person</span>
|
||||
User: S. Miller
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-amber-100 text-amber-700 text-[10px] font-black uppercase tracking-wider rounded-full">UPDATED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"Role changed: Editor → Admin"</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">13:55:01 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">Unity Health</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="User" class="w-8 h-8 rounded-full" data-alt="close up of professional woman in business attire with focused expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxudJG9cflU2U3FRjxUanjkp_G8MI4eBe3pP3gEx4K-cX_r_EiIDfxIv0bLnY5RKHnMdMZBVi0GsdAovaVKpkf9MoefKP9NDLmg0LGpTbIYaVgui9zA27EMPR--S98DSW9acsaBlJcwmPvc6v20XFWy_62YGqMwlR73eaUh_0uwNl7LM072WirWL7c5dNOWQFKWxnp8NW7B5zkgmDq0Xdec83v1R-M2KjTlti3g8i_N3IsntQ6reGpxth5qZztzP4O9NK5HVa_RAc"/>
|
||||
<span class="text-sm font-medium">Sarah Chen</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="payments">payments</span>
|
||||
Billing Profile
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-red-100 text-red-700 text-[10px] font-black uppercase tracking-wider rounded-full">DELETED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"Legacy CC removed (****4242)"</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-white/60 transition-colors group">
|
||||
<td class="px-6 py-5 whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-on-surface">Oct 24, 2023</span>
|
||||
<span class="text-xs text-outline">13:42:19 UTC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-xs font-bold rounded-full">Global Partners</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-tertiary-container/40 flex items-center justify-center text-on-tertiary-container text-[10px] font-bold">MK</div>
|
||||
<span class="text-sm font-medium">Mark Kaplan</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="flex items-center gap-2 text-sm text-on-surface">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary" data-icon="security">security</span>
|
||||
Audit Access
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-[10px] font-black uppercase tracking-wider rounded-full">ACCESSED</span>
|
||||
</td>
|
||||
<td class="px-6 py-5 max-w-[200px]">
|
||||
<p class="text-xs text-outline truncate italic">"Exported Audit CSV (Rows: 4,200)"</p>
|
||||
</td>
|
||||
<td class="px-6 py-5 text-right">
|
||||
<button class="p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="open_in_new">open_in_new</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination / Footer -->
|
||||
<footer class="p-6 flex items-center justify-between bg-surface-container-high/30">
|
||||
<div class="text-xs text-outline font-medium">
|
||||
Showing <span class="text-on-surface">1-25</span> of <span class="text-on-surface">4,529</span> platform events
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 rounded-lg hover:bg-white text-outline disabled:opacity-30" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-lg bg-primary text-white font-bold text-xs flex items-center justify-center shadow-sm">1</button>
|
||||
<button class="w-8 h-8 rounded-lg hover:bg-white text-on-surface font-semibold text-xs transition-colors">2</button>
|
||||
<button class="w-8 h-8 rounded-lg hover:bg-white text-on-surface font-semibold text-xs transition-colors">3</button>
|
||||
<span class="text-outline px-1">...</span>
|
||||
<button class="w-8 h-8 rounded-lg hover:bg-white text-on-surface font-semibold text-xs transition-colors">182</button>
|
||||
<button class="p-2 rounded-lg hover:bg-white text-outline transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Contextual Insight Cards (Asymmetric/Bento Style) -->
|
||||
<div class="grid grid-cols-12 gap-6 mt-8">
|
||||
<div class="col-span-8 bg-surface-container-lowest rounded-full p-8 shadow-sm flex flex-col justify-between border-none">
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-lg text-on-surface mb-2">Activity Overview</h3>
|
||||
<p class="text-sm text-outline max-w-lg mb-6">Platform events have increased by 14% compared to the last 24-hour cycle, primarily driven by automated API channel syncs.</p>
|
||||
</div>
|
||||
<div class="h-32 w-full bg-surface-container-low rounded-xl relative overflow-hidden">
|
||||
<!-- Simulated Chart -->
|
||||
<div class="absolute inset-0 flex items-end px-4 gap-2">
|
||||
<div class="flex-1 bg-primary-container h-[40%] rounded-t-lg opacity-40"></div>
|
||||
<div class="flex-1 bg-primary-container h-[60%] rounded-t-lg opacity-50"></div>
|
||||
<div class="flex-1 bg-primary-container h-[55%] rounded-t-lg opacity-60"></div>
|
||||
<div class="flex-1 bg-primary-container h-[85%] rounded-t-lg opacity-70"></div>
|
||||
<div class="flex-1 bg-primary-container h-[70%] rounded-t-lg opacity-80"></div>
|
||||
<div class="flex-1 bg-primary h-[95%] rounded-t-lg"></div>
|
||||
<div class="flex-1 bg-primary-container h-[75%] rounded-t-lg opacity-80"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-4 bg-[#0c6780] text-white rounded-full p-8 shadow-xl flex flex-col justify-between relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<span class="material-symbols-outlined text-4xl mb-4 opacity-50" data-icon="security_update_good">security_update_good</span>
|
||||
<h3 class="font-headline font-bold text-xl mb-2">Audit Compliance</h3>
|
||||
<p class="text-sm text-primary-fixed-dim/80">All logs are currently encrypted and verified against ledger hash. Integrity check complete.</p>
|
||||
</div>
|
||||
<button class="relative z-10 w-fit bg-white/10 backdrop-blur-md border border-white/20 text-white text-xs font-bold py-3 px-6 rounded-xl hover:bg-white hover:text-primary transition-all">
|
||||
Review Integrity Report
|
||||
</button>
|
||||
<!-- Abstract texture background -->
|
||||
<div class="absolute -right-8 -bottom-8 w-48 h-48 bg-white/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Tool for Rapid Audit -->
|
||||
<button class="fixed bottom-8 right-8 bg-gradient-to-br from-primary to-primary-container text-white p-4 rounded-full shadow-2xl shadow-primary/40 hover:scale-110 active:scale-95 transition-all z-30">
|
||||
<span class="material-symbols-outlined" data-icon="bolt">bolt</span>
|
||||
</button>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user