474 lines
23 KiB
HTML
474 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Leads & Analytics Logs</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;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: {
|
|
"primary": "#135bec",
|
|
"background-light": "#f6f6f8",
|
|
"background-dark": "#101622",
|
|
"surface-dark": "#1c2333",
|
|
"border-dark": "#2d3648",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"],
|
|
"body": ["Inter", "sans-serif"]
|
|
},
|
|
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Custom scrollbar for better dark mode experience */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #101622;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #2d3648;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #3b4354;
|
|
}
|
|
|
|
/* Utility for Material Symbols to ensure alignment */
|
|
.material-symbols-outlined {
|
|
font-size: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
.icon-sm {
|
|
font-size: 18px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark font-display antialiased overflow-hidden">
|
|
<div class="relative flex h-screen w-full flex-row overflow-hidden">
|
|
<!-- Side Navigation -->
|
|
<aside class="flex h-full w-64 flex-col border-r border-border-dark bg-[#111318] flex-shrink-0 z-20">
|
|
<div class="flex flex-col h-full justify-between p-4">
|
|
<div class="flex flex-col gap-4">
|
|
<!-- Brand -->
|
|
<div class="flex gap-3 items-center px-2 py-1 mb-2">
|
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8 bg-primary/20 flex items-center justify-center text-primary" data-alt="Abstract geometric logo">
|
|
<span class="material-symbols-outlined filled">pentagon</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h1 class="text-white text-sm font-semibold leading-tight">Acme Corp</h1>
|
|
<p class="text-gray-500 text-xs font-normal leading-tight">Pro Plan</p>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Items -->
|
|
<nav class="flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors">dashboard</span>
|
|
<span class="text-sm font-medium">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors">web</span>
|
|
<span class="text-sm font-medium">Landing Pages</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary/10 text-primary" href="#">
|
|
<span class="material-symbols-outlined filled">group</span>
|
|
<span class="text-sm font-medium">Leads & Logs</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors">science</span>
|
|
<span class="text-sm font-medium">A/B Tests</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors">settings</span>
|
|
<span class="text-sm font-medium">Settings</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<!-- Bottom Action -->
|
|
<button class="flex w-full items-center justify-center gap-2 rounded-lg h-10 px-4 bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined icon-sm">add</span>
|
|
<span>Create Page</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden bg-background-light dark:bg-background-dark relative">
|
|
<!-- Top Header -->
|
|
<header class="h-16 border-b border-border-dark bg-[#111318]/95 backdrop-blur flex items-center justify-between px-6 shrink-0 z-10">
|
|
<div class="flex items-center gap-4">
|
|
<h2 class="text-white text-lg font-semibold">Leads & Analytics Logs</h2>
|
|
<span class="h-4 w-px bg-border-dark"></span>
|
|
<div class="flex items-center gap-2 text-gray-400 text-sm">
|
|
<span class="material-symbols-outlined icon-sm">calendar_today</span>
|
|
<span>Last 30 Days</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<!-- User Profile / Notifications -->
|
|
<button class="size-8 rounded-full bg-surface-dark border border-border-dark flex items-center justify-center text-gray-400 hover:text-white transition-colors">
|
|
<span class="material-symbols-outlined icon-sm">notifications</span>
|
|
</button>
|
|
<div class="size-8 rounded-full bg-gradient-to-tr from-primary to-purple-500" data-alt="User avatar gradient"></div>
|
|
</div>
|
|
</header>
|
|
<!-- Scrollable Content -->
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="mx-auto max-w-[1200px] flex flex-col gap-6">
|
|
<!-- Page Intro & Key Actions -->
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
<div class="flex flex-col gap-1">
|
|
<h1 class="text-white text-3xl font-bold tracking-tight">Leads Overview</h1>
|
|
<p class="text-gray-400 text-sm">Manage, filter, and export your form submissions and event data from all landing pages.</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="flex items-center gap-2 h-9 px-4 rounded-lg border border-border-dark bg-surface-dark text-white text-sm font-medium hover:bg-border-dark transition-colors">
|
|
<span class="material-symbols-outlined icon-sm">refresh</span>
|
|
<span>Refresh</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 h-9 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/25">
|
|
<span class="material-symbols-outlined icon-sm">download</span>
|
|
<span>Export CSV</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Filters Bar -->
|
|
<div class="p-4 rounded-xl border border-border-dark bg-[#111318] flex flex-wrap gap-4 items-center">
|
|
<!-- Search -->
|
|
<div class="relative flex-1 min-w-[240px]">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 material-symbols-outlined icon-sm">search</span>
|
|
<input class="w-full h-10 pl-10 pr-4 bg-surface-dark border border-border-dark rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="Search by name, email or ID..." type="text"/>
|
|
</div>
|
|
<div class="h-6 w-px bg-border-dark hidden md:block"></div>
|
|
<!-- Dropdown Filters -->
|
|
<div class="flex flex-wrap gap-3 flex-1 md:flex-none">
|
|
<div class="relative group">
|
|
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
|
<option>All Variants</option>
|
|
<option>Variant A</option>
|
|
<option>Variant B</option>
|
|
<option>Variant C</option>
|
|
</select>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
|
</div>
|
|
<div class="relative group">
|
|
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
|
<option>All Channels</option>
|
|
<option>Organic Search</option>
|
|
<option>Paid Ads</option>
|
|
<option>Social Media</option>
|
|
<option>Direct</option>
|
|
</select>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
|
</div>
|
|
<div class="relative group">
|
|
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
|
<option>Status: All</option>
|
|
<option>New</option>
|
|
<option>Contacted</option>
|
|
<option>Qualified</option>
|
|
<option>Spam</option>
|
|
</select>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Data Table -->
|
|
<div class="rounded-xl border border-border-dark bg-[#111318] overflow-hidden flex flex-col shadow-sm">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-surface-dark border-b border-border-dark">
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider w-[60px]">
|
|
<input class="rounded bg-background-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
|
</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Lead Profile</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Variant</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Source Channel</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Submission Date</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border-dark">
|
|
<!-- Row 1 -->
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
<td class="px-6 py-4">
|
|
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 text-xs font-bold text-white flex items-center justify-center shrink-0">AJ</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white text-sm font-medium">Alice Johnson</span>
|
|
<span class="text-gray-500 text-xs">alice@example.com</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
|
Variant B
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
|
<span class="material-symbols-outlined text-green-500 icon-sm">ads_click</span>
|
|
Google Ads
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
|
Oct 24, 2023 <span class="text-gray-600 mx-1">|</span> 14:30
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
<span class="size-1.5 rounded-full bg-blue-400"></span> New
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
<td class="px-6 py-4">
|
|
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-full bg-gradient-to-br from-orange-500 to-amber-400 text-xs font-bold text-white flex items-center justify-center shrink-0">MS</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white text-sm font-medium">Mark Smith</span>
|
|
<span class="text-gray-500 text-xs">mark.s@company.com</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
Variant A
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
|
<span class="material-symbols-outlined text-gray-400 icon-sm">search</span>
|
|
Organic Search
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
|
Oct 24, 2023 <span class="text-gray-600 mx-1">|</span> 13:15
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
|
<span class="size-1.5 rounded-full bg-amber-400"></span> Contacted
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
<td class="px-6 py-4">
|
|
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-full bg-gradient-to-br from-pink-500 to-rose-400 text-xs font-bold text-white flex items-center justify-center shrink-0">SL</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white text-sm font-medium">Sarah Lee</span>
|
|
<span class="text-gray-500 text-xs">sarah.lee99@gmail.com</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
Variant A
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
|
<span class="material-symbols-outlined text-blue-500 icon-sm">public</span>
|
|
Facebook Ads
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
|
Oct 23, 2023 <span class="text-gray-600 mx-1">|</span> 09:45
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
<span class="size-1.5 rounded-full bg-blue-400"></span> New
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
<td class="px-6 py-4">
|
|
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-full bg-surface-dark border border-border-dark text-xs font-bold text-gray-300 flex items-center justify-center shrink-0">DC</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white text-sm font-medium">David Chen</span>
|
|
<span class="text-gray-500 text-xs">dchen@tech.io</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
|
Variant C
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
|
<span class="material-symbols-outlined text-gray-400 icon-sm">link</span>
|
|
Direct
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
|
Oct 22, 2023 <span class="text-gray-600 mx-1">|</span> 16:20
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
|
<span class="size-1.5 rounded-full bg-green-400"></span> Qualified
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 5 -->
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
<td class="px-6 py-4">
|
|
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-full bg-gradient-to-br from-indigo-500 to-blue-400 text-xs font-bold text-white flex items-center justify-center shrink-0">EW</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white text-sm font-medium">Emma Wilson</span>
|
|
<span class="text-gray-500 text-xs">emma.w@studio.co</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
|
Variant B
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
|
<span class="material-symbols-outlined text-blue-600 icon-sm">group_work</span>
|
|
LinkedIn
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
|
Oct 22, 2023 <span class="text-gray-600 mx-1">|</span> 11:00
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
<span class="size-1.5 rounded-full bg-blue-400"></span> New
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 6 -->
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
<td class="px-6 py-4">
|
|
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-full bg-gray-700 text-xs font-bold text-gray-300 flex items-center justify-center shrink-0">JB</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white text-sm font-medium">James Bond</span>
|
|
<span class="text-gray-500 text-xs">007@mi6.gov.uk</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
Variant A
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
|
<span class="material-symbols-outlined text-purple-400 icon-sm">person_add</span>
|
|
Referral
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
|
Oct 21, 2023 <span class="text-gray-600 mx-1">|</span> 18:30
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500/10 text-red-400 border border-red-500/20">
|
|
<span class="size-1.5 rounded-full bg-red-400"></span> Spam
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-surface-dark border-t border-border-dark flex items-center justify-between">
|
|
<div class="text-xs text-gray-400">
|
|
Showing <span class="text-white font-medium">1-6</span> of <span class="text-white font-medium">124</span> results
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
|
|
<span class="material-symbols-outlined icon-sm">chevron_left</span>
|
|
</button>
|
|
<button class="flex items-center justify-center size-8 rounded-lg bg-primary text-white text-sm font-medium shadow-md shadow-primary/20">
|
|
1
|
|
</button>
|
|
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
|
2
|
|
</button>
|
|
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
|
3
|
|
</button>
|
|
<span class="text-gray-500 text-xs px-1">...</span>
|
|
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
|
8
|
|
</button>
|
|
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
|
<span class="material-symbols-outlined icon-sm">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |