253 lines
13 KiB
HTML
253 lines
13 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&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>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#135bec",
|
|
"background-light": "#f6f6f8",
|
|
"background-dark": "#0b0d11",
|
|
"surface-dark": "#111318",
|
|
"border-dark": "#1e293b",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"],
|
|
"body": ["Inter", "sans-serif"],
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
body {
|
|
font-family: 'Inter', 'Pretendard', sans-serif;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #0b0d11;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #1e293b;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-dark text-slate-200 flex h-screen overflow-hidden">
|
|
<aside class="w-64 border-r border-border-dark bg-surface-dark flex flex-col shrink-0">
|
|
<div class="p-6 border-b border-border-dark flex items-center gap-3">
|
|
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
|
|
<span class="material-symbols-outlined !text-[20px]">dashboard</span>
|
|
</div>
|
|
<span class="font-bold text-lg tracking-tight text-white">Vantage</span>
|
|
</div>
|
|
<nav class="flex-1 p-4 space-y-2">
|
|
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg bg-primary/10 text-primary font-medium" href="#">
|
|
<span class="material-symbols-outlined !text-[22px]">language</span>
|
|
랜딩 페이지
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined !text-[22px]">bar_chart</span>
|
|
통계 및 분석
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined !text-[22px]">group</span>
|
|
리드 관리
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined !text-[22px]">settings</span>
|
|
설정
|
|
</a>
|
|
</nav>
|
|
<div class="p-4 border-t border-border-dark">
|
|
<div class="flex items-center gap-3 px-2">
|
|
<div class="size-9 rounded-full bg-slate-700 bg-cover bg-center border border-slate-600" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCHHV_xxaCD_itmq00wbhHSgMPL6YYIvw0VvbHthgZtpG92t0BLtDw3aFTuxKmLEkdr2eM5KTzDBsQSRUu3O-0wDG6DQGAS-FomveQ9ZPVJxUbucMb_ILTtBUO5klsE_PHCGlFQuISn87l2ED7ExAM-W-Df3Vjo0_k4_kjZqlLq6FTdhiks7vjFE-I-9i1g1xm08UGuyYh0fOZewRGWNCk4ORn3Uf7GdqZOlZc676-XLE3h0PEEhWdQ-Re-FXjqfnFn2XAXdr4LGH2_');"></div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-white truncate">김철수 팀장</p>
|
|
<p class="text-xs text-slate-500 truncate">Pro 플랜</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main class="flex-1 flex flex-col min-w-0 bg-background-dark">
|
|
<header class="h-16 border-b border-border-dark flex items-center justify-between px-8 bg-surface-dark">
|
|
<div class="flex items-center gap-2">
|
|
<h1 class="text-xl font-bold text-white">랜딩 페이지 목록 및 관리</h1>
|
|
<span class="ml-2 px-2 py-0.5 bg-slate-800 text-slate-400 text-xs rounded-full">총 24개</span>
|
|
</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-slate-500 !text-xl">search</span>
|
|
<input class="bg-background-dark border border-border-dark rounded-lg pl-10 pr-4 py-2 text-sm focus:ring-1 focus:ring-primary focus:border-primary outline-none text-white w-64" placeholder="페이지 이름 검색..." type="text"/>
|
|
</div>
|
|
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined !text-[20px]">add</span>
|
|
새 페이지 추가
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="flex-1 overflow-auto p-8 custom-scrollbar">
|
|
<div class="bg-surface-dark border border-border-dark rounded-xl overflow-hidden shadow-2xl">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-border-dark bg-slate-800/50">
|
|
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">페이지 정보</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">공개 URL</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">상태</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border-dark">
|
|
<tr class="hover:bg-white/[0.02] transition-colors group">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
|
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBceHj4fe7PQn5roym2DM9WOocCJB0BQxuKExR8ulwggZyARF0-GRXVdS9rV9qEiAfcjcjQ_jH3NIxoAy7IH8ISJ2z6ND6WbUrEwJySKSEN8L3LL8Lr42mnkATadICesv0h2nm5JMy22wnEXjyIs-F2NiXG56Hh6s3HELVhRK4nU-VsEoy8m-tWbh8FR1jndX6iCq6mxaPrd05yp6V5p2ZqEpTjciLxSUFDO4YG2KKXMvQPf2a_6nWrtv7b8FHU7FeM2sIpf3V7YmF"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white">2024 여름 시즌 세일 캠페인</p>
|
|
<p class="text-xs text-slate-500 mt-1">수정일: 2시간 전 • 생성일: 2024.05.12</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
|
<span class="text-sm truncate max-w-[200px]">vantage.io/summer-2024</span>
|
|
<span class="material-symbols-outlined !text-[16px]">open_in_new</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
|
<span class="size-1.5 rounded-full bg-green-500"></span>
|
|
활성
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">content_copy</span>
|
|
<span>복사</span>
|
|
</button>
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">edit</span>
|
|
<span>수정</span>
|
|
</button>
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">delete</span>
|
|
<span>삭제</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-white/[0.02] transition-colors group">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
|
<span class="material-symbols-outlined">image</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white">신규 제품 사전 예약 페이지</p>
|
|
<p class="text-xs text-slate-500 mt-1">수정일: 1일 전 • 생성일: 2024.06.01</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
|
<span class="text-sm truncate max-w-[200px]">vantage.io/pre-order-now</span>
|
|
<span class="material-symbols-outlined !text-[16px]">open_in_new</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-800 text-slate-500 text-xs font-medium border border-slate-700">
|
|
<span class="size-1.5 rounded-full bg-slate-500"></span>
|
|
비활성
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">content_copy</span>
|
|
<span>복사</span>
|
|
</button>
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">edit</span>
|
|
<span>수정</span>
|
|
</button>
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">delete</span>
|
|
<span>삭제</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-white/[0.02] transition-colors group border-b-0">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
|
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARKX7eC65mz2IpuBwDVp_I5oS2RC62dOWT-WoIBq5cR6aap-2XMq4Y9ntPmPhycnDw1NszD32Wgwrec6t7qQmVHp1llkEWal5-zfta2pCL4SWfO5v0nYou7715kxFts5jf4O3TDJPkL1hFpSEWNypgSvYP2I-avJIA-hfssJxwf1RyrWDUwewJG14-ivVP91ECuBDyyMLkZA62gUX_fjTwO-W6cCrJmNITt2oWnzn9gAjAX7wxvWfjLfIirMNVNfwolEaHgXl-B_pI"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white">엔터프라이즈 솔루션 문의</p>
|
|
<p class="text-xs text-slate-500 mt-1">수정일: 3일 전 • 생성일: 2024.04.15</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
|
<span class="text-sm truncate max-w-[200px]">vantage.io/enterprise-demo</span>
|
|
<span class="material-symbols-outlined !text-[16px]">open_in_new</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
|
<span class="size-1.5 rounded-full bg-green-500"></span>
|
|
활성
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">content_copy</span>
|
|
<span>복사</span>
|
|
</button>
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">edit</span>
|
|
<span>수정</span>
|
|
</button>
|
|
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined !text-[18px]">delete</span>
|
|
<span>삭제</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="px-6 py-4 border-t border-border-dark flex items-center justify-between bg-slate-800/20">
|
|
<span class="text-sm text-slate-500">24개 중 1-10개 표시</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800 disabled:opacity-50" disabled="">
|
|
<span class="material-symbols-outlined !text-[20px]">chevron_left</span>
|
|
</button>
|
|
<button class="size-8 rounded-lg bg-primary text-white text-sm font-medium">1</button>
|
|
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">2</button>
|
|
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">3</button>
|
|
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800">
|
|
<span class="material-symbols-outlined !text-[20px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
</body></html> |