446 lines
22 KiB
HTML
446 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html class="dark" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>리드 및 분석 로그</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"/>
|
|
<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>
|
|
::-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;
|
|
}
|
|
.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">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
<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">web</span>
|
|
<span class="text-sm font-medium">랜딩 페이지</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">analytics</span>
|
|
<span class="text-sm font-medium">통계 및 분석</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">리드 관리</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">설정</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<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>페이지 생성</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden bg-background-light dark:bg-background-dark relative">
|
|
<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">리드 및 분석 로그</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>최근 30일</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<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"></div>
|
|
</div>
|
|
</header>
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="mx-auto max-w-[1200px] flex flex-col gap-6">
|
|
<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">리드 개요</h1>
|
|
<p class="text-gray-400 text-sm">랜딩 페이지에서 수집된 리드 및 이벤트 데이터를 관리하고 내보낼 수 있습니다.</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>새로고침</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>CSV 내보내기</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 rounded-xl border border-border-dark bg-[#111318] flex flex-wrap gap-4 items-center">
|
|
<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="이름, 이메일 등으로 검색..." type="text"/>
|
|
</div>
|
|
<div class="h-6 w-px bg-border-dark hidden md:block"></div>
|
|
<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>모든 변수</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>모든 채널</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>상태: 전체</option>
|
|
<option>신규</option>
|
|
<option>연락됨</option>
|
|
<option>적격</option>
|
|
<option>스팸</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>
|
|
<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">리드 프로필</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">페이지 변수</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">유입 채널</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">신청 일시</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">상태</th>
|
|
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider text-right">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border-dark">
|
|
<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">
|
|
2023.10.24 <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> 신규
|
|
</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>
|
|
<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">
|
|
2023.10.24 <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> 연락됨
|
|
</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>
|
|
<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">
|
|
2023.10.23 <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> 신규
|
|
</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>
|
|
<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">
|
|
2023.10.22 <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> 적격
|
|
</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>
|
|
<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">
|
|
2023.10.22 <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> 신규
|
|
</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>
|
|
<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">
|
|
2023.10.21 <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> 스팸
|
|
</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>
|
|
<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">
|
|
124개 결과 중 1-6 표시
|
|
</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> |