395 lines
19 KiB
HTML
395 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Audit Trail | BizOne Admin</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&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": {
|
|
"primary": "#001b44",
|
|
"brand-navy": "#001b44",
|
|
"brand-blue": "#00a3ff",
|
|
"surface-container-high": "#e2ebde",
|
|
"error": "#ba1a1a",
|
|
"secondary": "#006b5f",
|
|
"tertiary": "#93492e",
|
|
"surface-container-highest": "#dce5d8",
|
|
"surface-container": "#e7f1e4",
|
|
"on-surface": "#151e16",
|
|
"surface": "#ffffff",
|
|
"background": "#f8f9fa",
|
|
"on-error": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"status-success": "#25D366",
|
|
"surface-card": "#FFFFFF",
|
|
"surface-variant": "#dce5d8",
|
|
"surface-bright": "#f3fcef",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"border-subtle": "#E2E8F0",
|
|
"on-primary": "#ffffff",
|
|
"status-warning": "#F59E0B",
|
|
"text-primary": "#1A1C1E",
|
|
"outline": "#6c7b6b",
|
|
"outline-variant": "#bbcbb9",
|
|
"on-background": "#151e16",
|
|
"status-error": "#EF4444",
|
|
"text-secondary": "#64748B",
|
|
"inverse-surface": "#2a332a",
|
|
"surface-container-low": "#edf6e9"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"toolbar-height": "72px",
|
|
"sidebar-width": "260px",
|
|
"base": "8px",
|
|
"gutter": "24px",
|
|
"container-margin": "32px",
|
|
"card-padding": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Plus Jakarta Sans"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"mono-code": ["JetBrains Mono"],
|
|
"body-md": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"headline-md": ["Plus Jakarta Sans"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.sidebar-item-active {
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-screen w-[260px] bg-brand-navy z-50 flex flex-col shadow-xl">
|
|
<!-- Sidebar Header with White Background and 72px Height -->
|
|
<div class="h-[72px] bg-white flex items-center px-6 border-b border-gray-100">
|
|
<img alt="BizOne Logo" class="h-10 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQgepHPm1Tlccl-KTg8J_Ohes_HmUgNgQpebBka5A4EQPSSDJrON0j4R_Wi6gOOlV-crnscfaztwQY6GRKbVjGWaAPn82BG2LhxBEdmD2OdYn3u-HSKsss2Q3qS4hTV0Dilzn1z0Qfx6dV3FRqKID5gAM5yb3TSVi4T96F6mQ69bBzh1Tib2zs9oKFXieUJs--RsKWw3BUiKUhBQcm-SBiWSSonbzAA8xFReCq3iOVJXR5O3RgUrfRv_GFfnoN4KFeTJM3smpcLrs"/>
|
|
</div>
|
|
<!-- Sidebar Content -->
|
|
<div class="flex-1 flex flex-col px-4 pt-8 gap-2">
|
|
<button class="mb-6 flex items-center justify-center gap-2 bg-brand-blue text-white font-semibold py-3 px-4 rounded-lg active:scale-95 transition-transform duration-150 shadow-md">
|
|
<span class="material-symbols-outlined">add</span>
|
|
<span>New Message</span>
|
|
</button>
|
|
<nav class="flex-1 flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="text-sm font-medium">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
|
<span class="text-sm font-medium">Conversations</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="description">description</span>
|
|
<span class="text-sm font-medium">Templates</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
|
|
<span class="text-sm font-medium">Webhooks</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 bg-brand-blue text-white rounded-lg px-4 py-3 font-bold transition-all shadow-sm" href="#">
|
|
<span class="material-symbols-outlined sidebar-item-active" data-icon="monitoring" style="font-variation-settings: 'FILL' 1;">monitoring</span>
|
|
<span class="text-sm font-medium">Analytics</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pb-6 flex flex-col gap-1 border-t border-white/10 pt-4">
|
|
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="text-sm font-medium">Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
|
<span class="text-sm font-medium">Logout</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-[260px] min-h-screen flex flex-col">
|
|
<!-- TopNavBar (72px Height, White) -->
|
|
<header class="h-[72px] bg-white border-b border-gray-200 sticky top-0 z-40 flex justify-between items-center px-container-margin w-full">
|
|
<div class="flex items-center gap-4 flex-1">
|
|
<div class="relative w-full max-w-md">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
|
|
<input class="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-brand-blue text-sm" placeholder="Search logs, admin names..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-2 text-brand-navy font-bold">
|
|
<span class="text-lg font-semibold">BizOne Admin Gateway</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
<button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
</button>
|
|
<div class="ml-2 w-8 h-8 rounded-full bg-gray-200 overflow-hidden border border-gray-300">
|
|
<img alt="Admin Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUrN5_CQ78_xrZetx1pEZQKYfGcn6GTjS-CvQTWThIPlv9_2FDownQZTy9uLqcqgE7GaF9s4CjTgKOSVj0eekpZPBlq9vgjnrRZPZsgYuie-EsUmc0wdFhp87pyKPtjVOrxvDrwo9N2CFBUcKckw8eyDoasa_xuyzFtwurZ7GtdWytv0fG59VVXJqW-S-sTLokrmBR5x52MzkHwo19f0pEZgxLYbMeEi_wOu_MnjF0ZPqOICyeVqW2laOV7mZGKhP1_xXiCFuLqZ4"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Page Content -->
|
|
<div class="p-container-margin flex-1 flex flex-col gap-8">
|
|
<!-- Page Header -->
|
|
<div class="flex justify-between items-end">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-brand-navy">Audit Trail</h2>
|
|
<p class="text-gray-500">Monitor administrative actions and system modifications.</p>
|
|
</div>
|
|
<button class="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-semibold text-brand-navy hover:bg-gray-50 transition-all shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]">download</span>
|
|
<span>Export Logs</span>
|
|
</button>
|
|
</div>
|
|
<!-- Summary KPI Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
|
<!-- Card 1 -->
|
|
<div class="bg-white p-card-padding rounded-xl shadow-sm border border-gray-200 flex flex-col gap-2">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">TOTAL ACTIONS (LAST 24H)</span>
|
|
<span class="material-symbols-outlined text-brand-blue">history</span>
|
|
</div>
|
|
<div class="flex items-end gap-3 mt-1">
|
|
<span class="text-3xl font-bold text-brand-navy">1,284</span>
|
|
<span class="text-status-success text-xs font-bold flex items-center mb-1">
|
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
12.5%
|
|
</span>
|
|
</div>
|
|
<div class="mt-4 h-1 w-full bg-gray-100 rounded-full overflow-hidden">
|
|
<div class="h-full bg-brand-blue w-3/4"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2 -->
|
|
<div class="bg-white p-card-padding rounded-xl shadow-sm border border-gray-200 flex flex-col gap-2">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">SECURITY ALERTS</span>
|
|
<span class="material-symbols-outlined text-error">security</span>
|
|
</div>
|
|
<div class="flex items-end gap-3 mt-1">
|
|
<span class="text-3xl font-bold text-brand-navy">03</span>
|
|
<span class="text-status-error text-xs font-bold flex items-center mb-1">
|
|
<span class="material-symbols-outlined text-[16px]">priority_high</span>
|
|
Critical
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-2">Multiple failed login attempts detected.</p>
|
|
</div>
|
|
<!-- Card 3 -->
|
|
<div class="bg-white p-card-padding rounded-xl shadow-sm border border-gray-200 flex flex-col gap-2">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">MOST ACTIVE ADMIN</span>
|
|
<span class="material-symbols-outlined text-brand-blue">person</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 mt-1">
|
|
<div class="w-10 h-10 rounded-full overflow-hidden border border-gray-200">
|
|
<img alt="John Smith" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjFc96_LGXMzZhz_zZ3SXLOlABLEBptLJWDxdD8smQzOVENJ8vGBNxzS0jUGzntlpuY63e0Kc8Go4Z8Z4YCuYIsfUsHREAFhYp_8piNlijepRViVhpTy-4jv_h-DG5wiuGYz1VhW-itXHt1byZCeb4DRJkD_luLD2vU8VCkjMEem34sdSVvkjc3pgSBZuLyrbOQadyCSvwoHr5ncDFeDymZgqZ-2ZZ13nns18XM0swU16m6jtpapgVIWlNWoV_1ZY0pj_e7HUMqzI"/>
|
|
</div>
|
|
<div>
|
|
<span class="block text-lg font-bold text-brand-navy">John Smith</span>
|
|
<span class="block text-xs text-gray-500">420 actions performed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Advanced Filters -->
|
|
<div class="bg-white p-4 rounded-xl border border-gray-200 shadow-sm flex flex-wrap items-center gap-4">
|
|
<div class="flex items-center gap-2 border-r border-gray-100 pr-4">
|
|
<span class="material-symbols-outlined text-gray-400 text-[20px]">filter_list</span>
|
|
<span class="text-xs font-bold uppercase tracking-wider">FILTERS</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Date Range</label>
|
|
<select class="bg-transparent border-none text-sm font-semibold text-brand-navy focus:ring-0 p-0 pr-8 cursor-pointer">
|
|
<option>Last 7 Days</option>
|
|
<option>Last 24 Hours</option>
|
|
<option>Current Month</option>
|
|
<option>Custom Range</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-1 px-4 border-l border-gray-100">
|
|
<label class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Admin User</label>
|
|
<select class="bg-transparent border-none text-sm font-semibold text-brand-navy focus:ring-0 p-0 pr-8 cursor-pointer">
|
|
<option>All Admins</option>
|
|
<option>John Smith</option>
|
|
<option>Sarah Wilson</option>
|
|
<option>Michael Chen</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-1 px-4 border-l border-gray-100">
|
|
<label class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Action Type</label>
|
|
<select class="bg-transparent border-none text-sm font-semibold text-brand-navy focus:ring-0 p-0 pr-8 cursor-pointer">
|
|
<option>All Actions</option>
|
|
<option>Template Created</option>
|
|
<option>User Role Updated</option>
|
|
<option>Webhook Modified</option>
|
|
</select>
|
|
</div>
|
|
<button class="ml-auto px-4 py-2 text-brand-blue hover:bg-brand-blue/5 rounded-lg text-sm font-bold transition-all">
|
|
Reset All
|
|
</button>
|
|
</div>
|
|
<!-- Audit Trail Table -->
|
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex-1">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 border-b border-gray-200">
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">TIMESTAMP</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">ADMIN USER</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">ACTION TYPE</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">MODULE</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">IP ADDRESS</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider text-right">ACTIONS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-gray-50 transition-colors group">
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-semibold text-brand-navy">Oct 24, 2023</span>
|
|
<span class="text-xs text-gray-400">14:22:05</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full overflow-hidden bg-gray-100">
|
|
<img alt="Sarah Wilson" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSYA3gcXSS36SCXa7VHoLkZvyq12A2PKkRwqdSwid5mFturCJZSLc9oF6oCBQTUmikXV8mMRl4B-zlC4BIybuVBBLvd45Ihkyu_kZPpH3nFZYQ4clD7_zuwialRkgGL9jNsNkuYOnHzBGD50pFUaytWLay6CZTm3LZN8Dxnnl44kqvBI1soeGADAWeO_tvVEwUBK-XE_T5E2fkZyP1zXaFwWG3MhIolhUZFOaJaLwfLS-VErBL3Fd-OHAL-Kngl9Zc1GW7Xu_-LB8"/>
|
|
</div>
|
|
<span class="text-sm font-medium text-brand-navy">Sarah Wilson</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 bg-brand-blue/10 text-brand-blue rounded-full text-[10px] font-bold uppercase tracking-wider">
|
|
Template Created
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-sm text-gray-600">Marketing Logs</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono text-xs text-gray-500">192.168.1.45</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-brand-blue hover:underline text-sm font-bold">View Details</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-semibold text-brand-navy">Oct 24, 2023</span>
|
|
<span class="text-xs text-gray-400">13:10:12</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full overflow-hidden bg-gray-100">
|
|
<img alt="John Smith" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDkNhxofa4DSCx-U5SjAVrkM1WbWctVdsuZurT8ViRHnuRhhBqru-H_ddHyQFWpyCaz03IOHicQu9tFFCQcB25mOPsEFRhUR18kZd-Sf5mEuz4vrmm7SCZ9WjtiZ508geeHN1q9PSDwaKWp_mwSye9OswxKQ3MnTwG4v5wtzziVIs75Ldx3Gg-wkkWU9ONYOzZiq7fblGP92ZQtO9B_lm9Gb1PCdBWm5vSz25G2EBtFwwFk8b-5NOF5zoUgVdDIRk7wlfFCh23h-yI"/>
|
|
</div>
|
|
<span class="text-sm font-medium text-brand-navy">John Smith</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 bg-brand-navy/10 text-brand-navy rounded-full text-[10px] font-bold uppercase tracking-wider">
|
|
User Role Updated
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-sm text-gray-600">Access Control</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono text-xs text-gray-500">45.23.11.102</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-brand-blue hover:underline text-sm font-bold">View Details</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 (Alert state) -->
|
|
<tr class="bg-red-50/50 hover:bg-red-50 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-semibold text-error">Oct 24, 2023</span>
|
|
<span class="text-xs text-gray-400">11:05:33</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full overflow-hidden bg-error/10 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-error text-[18px]">lock_reset</span>
|
|
</div>
|
|
<span class="text-sm font-medium text-error">SYSTEM_SEC</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 bg-error/10 text-error rounded-full text-[10px] font-bold uppercase tracking-wider">
|
|
Failed Login Limit
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-sm text-gray-600">Auth Gateway</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono text-xs text-error">212.88.34.12</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-error hover:underline text-sm font-bold">Security Alert</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-gray-50 flex items-center justify-between">
|
|
<span class="text-xs text-gray-500">Showing 1 to 5 of 1,284 results</span>
|
|
<div class="flex gap-2">
|
|
<button class="p-2 border border-gray-200 rounded-lg hover:bg-white transition-all disabled:opacity-50" disabled="">
|
|
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
|
</button>
|
|
<button class="px-3 py-1 bg-brand-blue text-white rounded-lg text-sm font-bold">1</button>
|
|
<button class="px-3 py-1 hover:bg-white rounded-lg text-sm font-semibold text-gray-600 transition-all">2</button>
|
|
<button class="px-3 py-1 hover:bg-white rounded-lg text-sm font-semibold text-gray-600 transition-all">3</button>
|
|
<span class="px-2 text-gray-400">...</span>
|
|
<button class="px-3 py-1 hover:bg-white rounded-lg text-sm font-semibold text-gray-600 transition-all">257</button>
|
|
<button class="p-2 border border-gray-200 rounded-lg hover:bg-white transition-all">
|
|
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- FAB -->
|
|
<button class="fixed bottom-8 right-8 w-14 h-14 bg-brand-blue text-white rounded-full shadow-lg flex items-center justify-center hover:scale-110 active:scale-95 transition-all z-50">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">support_agent</span>
|
|
</button>
|
|
</main>
|
|
</body></html> |