364 lines
22 KiB
HTML
364 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>랜딩 페이지 그룹 목록 - Acme Corp</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;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"/>
|
|
<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": "#101622",
|
|
"card-dark": "#1c1f27",
|
|
"border-dark": "#282e39",
|
|
"text-secondary": "#9da6b9",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"],
|
|
"sans": ["Inter", "sans-serif"],
|
|
},
|
|
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #111318;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #282e39;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #3b4354;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display overflow-hidden">
|
|
<div class="flex h-screen w-full overflow-hidden">
|
|
<div class="hidden md:flex flex-col w-64 h-full border-r border-border-dark bg-[#111318] flex-shrink-0">
|
|
<div class="flex h-full flex-col justify-between p-4">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex gap-3 items-center px-2 py-1">
|
|
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 flex-shrink-0 border border-border-dark" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDOQ3K2IaZ3q70LT08mZ02d1p9CiO5Pr-gqqTE6m1XKF8ntNNhuFjUid9cI5Ooc_Hyq0HhbuSy4T4S9uWo8i0KUmHoNJASbcigmWzpe_V6J7hFxYGkMZGOrrDNJn21X4MIapiFAiDrdCxKoFWET1GvcmvSypznw6Hx1ZsG8LXYKdpVxl5L3O48VVyKpXA1vyBlvK8lQ9YZYpgPRRbihsjGgb-3AvhYCe7GUdnbVPfqrCwJikKMqcJojAxhe01XubTAkGH4oX6DXBNNT");'></div>
|
|
<div class="flex flex-col overflow-hidden">
|
|
<h1 class="text-white text-base font-medium leading-normal truncate">Acme Corp</h1>
|
|
<p class="text-text-secondary text-xs font-normal leading-normal truncate">Pro Plan</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2 mt-4">
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-[#282e39] hover:text-white transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-weight="300">dashboard</span>
|
|
<p class="text-sm font-medium leading-normal">대시보드</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-[#282e39] text-white" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-weight="600">folder_copy</span>
|
|
<p class="text-sm font-medium leading-normal">그룹</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-[#282e39] hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-weight="300">bar_chart</span>
|
|
<p class="text-sm font-medium leading-normal">통계 및 분석</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-[#282e39] hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-weight="300">settings</span>
|
|
<p class="text-sm font-medium leading-normal">설정</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<button class="flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary hover:bg-blue-600 transition-colors text-white text-sm font-bold leading-normal tracking-[0.015em] shadow-lg shadow-blue-900/20">
|
|
<span class="truncate">업그레이드</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex flex-col h-full overflow-hidden relative bg-background-light dark:bg-background-dark">
|
|
<header class="w-full flex-shrink-0 border-b border-border-dark bg-[#111318]/50 backdrop-blur-sm z-10">
|
|
<div class="flex items-center justify-between px-6 py-4">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2 text-sm text-text-secondary">
|
|
<a class="hover:text-white transition-colors" href="#">홈</a>
|
|
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
|
<span class="text-white font-medium">그룹</span>
|
|
</div>
|
|
<h2 class="text-white text-2xl font-bold leading-tight tracking-tight">랜딩 페이지 그룹</h2>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="flex items-center justify-center size-10 rounded-full hover:bg-[#282e39] text-text-secondary transition-colors md:hidden">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
<button class="hidden md:flex items-center justify-center size-10 rounded-full hover:bg-[#282e39] text-text-secondary transition-colors relative">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="absolute top-2 right-2 size-2 bg-red-500 rounded-full border-2 border-[#111318]"></span>
|
|
</button>
|
|
<button class="flex items-center gap-2 h-10 px-4 bg-primary hover:bg-blue-600 text-white rounded-lg text-sm font-bold shadow-lg shadow-primary/20 transition-all active:scale-95">
|
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
|
<span class="hidden sm:inline">새 그룹 생성</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="flex-1 overflow-y-auto p-6 scroll-smooth">
|
|
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
|
|
<div class="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between bg-card-dark border border-border-dark p-3 rounded-xl shadow-sm">
|
|
<div class="relative w-full md:max-w-md">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-text-secondary">
|
|
<span class="material-symbols-outlined text-[20px]">search</span>
|
|
</div>
|
|
<input class="w-full pl-10 pr-4 py-2.5 bg-[#111318] border border-border-dark rounded-lg text-white placeholder-text-secondary focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary text-sm transition-colors" placeholder="그룹 이름 또는 태그로 검색..." type="text"/>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-3 w-full md:w-auto">
|
|
<div class="relative group">
|
|
<select class="appearance-none bg-[#111318] border border-border-dark text-white text-sm rounded-lg pl-3 pr-10 py-2.5 focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors w-full md:w-40">
|
|
<option>상태: 전체</option>
|
|
<option>활성</option>
|
|
<option>초안</option>
|
|
<option>보관됨</option>
|
|
</select>
|
|
<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none text-text-secondary">
|
|
<span class="material-symbols-outlined text-[20px]">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<div class="relative group">
|
|
<select class="appearance-none bg-[#111318] border border-border-dark text-white text-sm rounded-lg pl-3 pr-10 py-2.5 focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors w-full md:w-40">
|
|
<option>정렬: 최신순</option>
|
|
<option>정렬: 오래된순</option>
|
|
<option>정렬: 리드순</option>
|
|
</select>
|
|
<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none text-text-secondary">
|
|
<span class="material-symbols-outlined text-[20px]">sort</span>
|
|
</div>
|
|
</div>
|
|
<button class="p-2.5 bg-[#111318] border border-border-dark rounded-lg text-text-secondary hover:text-white hover:border-gray-500 transition-colors">
|
|
<span class="material-symbols-outlined text-[20px] block">filter_list</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
<div class="bg-card-dark border border-border-dark rounded-xl p-5 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-black/20 group relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-green-500"></div>
|
|
<div class="flex justify-between items-start mb-4 pl-2">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-white text-lg font-semibold truncate max-w-[200px]">3분기 마케팅 캠페인</h3>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="flex h-2 w-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
|
|
<span class="text-green-500 text-[10px] font-bold uppercase tracking-wider">활성</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-text-secondary text-sm">2일 전 생성됨</p>
|
|
</div>
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-[#282e39] transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-4 mb-5 pl-2">
|
|
<div class="flex flex-col p-3 bg-[#111318] rounded-lg border border-border-dark flex-1">
|
|
<span class="text-text-secondary text-xs font-medium uppercase tracking-wider mb-1">총 리드 수</span>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-white text-2xl font-bold">1,240</span>
|
|
<span class="text-green-500 text-xs font-medium mb-1 flex items-center">
|
|
<span class="material-symbols-outlined text-[14px]">trending_up</span>
|
|
12%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col p-3 bg-[#111318] rounded-lg border border-border-dark flex-1">
|
|
<span class="text-text-secondary text-xs font-medium uppercase tracking-wider mb-1">전환율</span>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-white text-2xl font-bold">4.8%</span>
|
|
<span class="text-green-500 text-xs font-medium mb-1 flex items-center">
|
|
<span class="material-symbols-outlined text-[14px]">arrow_upward</span>
|
|
0.5%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between border-t border-border-dark pt-4 pl-2">
|
|
<div class="flex items-center -space-x-2">
|
|
<div class="w-8 h-8 rounded-full border-2 border-card-dark bg-gray-700 flex items-center justify-center text-xs text-white bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDqoqeHYVkVTJDf-Q7zsOv8X8D65RM3DXNDoHvetGo_lHPYxTu4qu2rCJabIYEyWG_FMkkzekDUCT24ktGAyx30S2CLmQ8n5aVpYAlFTvT5XHe8ZzaS4XwuZBBgcgyPUNsrUuDhfk27yG2QhhO8msf5oEW_El1hIoV67mgLXJ9j9Ge4R0WboUQJAlwkbeEaZS3hY9wNxST3-WMd0ZZOUJ3_HPjNXpZehqQij1NuESZNlDO73zAzBdOgxd8YA-XtjpETGctExSTUk2vE');"></div>
|
|
<div class="w-8 h-8 rounded-full border-2 border-card-dark bg-gray-700 flex items-center justify-center text-xs text-white bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDuT3BYk-99iL5gljI_I1MYQZSkjlxPwEv65196Z2MzrNG8PHOOxOwvDPDITzRWVZLwVA0EZE11bMf8CytEhVeE70zI03WNi_5FcFa0PEHyvYI2zf3Lx-RDa_YpwMqtdLDrd5wsbLCCV2PdHiTkPGqatIE6LW2Qt66R0gh2KR8PAwfc1ewX26q4pptcbzI4CuVDaFPdMG42htObTnNvQl73G4WB7PJIsY33C5bXc1RvahfXCPSBd5OaKT9m-rlrqnkrPoO1Ro71impA');"></div>
|
|
<div class="w-8 h-8 rounded-full border-2 border-card-dark bg-[#282e39] flex items-center justify-center text-[10px] text-white font-medium">+2</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-white bg-[#282e39] hover:bg-[#3b4354] transition-colors border border-transparent hover:border-gray-600">
|
|
<span class="material-symbols-outlined text-[16px]">content_copy</span>
|
|
URL 복사
|
|
</button>
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-white bg-primary/20 hover:bg-primary/30 text-primary hover:text-blue-300 transition-colors border border-transparent">
|
|
<span class="material-symbols-outlined text-[16px]">tune</span>
|
|
변수/페이지
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-card-dark border border-border-dark rounded-xl p-5 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-black/20 group relative overflow-hidden opacity-90">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-gray-600"></div>
|
|
<div class="flex justify-between items-start mb-4 pl-2">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-white text-lg font-semibold truncate max-w-[200px]">블랙 프라이데이 2023</h3>
|
|
<span class="px-2 py-0.5 rounded-full bg-gray-800 border border-gray-700 text-gray-400 text-[10px] font-bold uppercase tracking-wider">보관됨</span>
|
|
</div>
|
|
<p class="text-text-secondary text-sm">2023년 12월 1일 종료</p>
|
|
</div>
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-[#282e39] transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-4 mb-5 pl-2">
|
|
<div class="flex flex-col p-3 bg-[#111318] rounded-lg border border-border-dark flex-1">
|
|
<span class="text-text-secondary text-xs font-medium uppercase tracking-wider mb-1">총 리드 수</span>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-white text-2xl font-bold">5,100</span>
|
|
<span class="text-text-secondary text-xs font-medium mb-1">최종</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col p-3 bg-[#111318] rounded-lg border border-border-dark flex-1">
|
|
<span class="text-text-secondary text-xs font-medium uppercase tracking-wider mb-1">방문자</span>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-white text-2xl font-bold">42.5k</span>
|
|
<span class="text-text-secondary text-xs font-medium mb-1">최종</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between border-t border-border-dark pt-4 pl-2">
|
|
<span class="text-text-secondary text-xs">3개 변수 테스트됨</span>
|
|
<div class="flex gap-2">
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-white bg-[#282e39] hover:bg-[#3b4354] transition-colors border border-transparent hover:border-gray-600">
|
|
<span class="material-symbols-outlined text-[16px]">analytics</span>
|
|
결과 보기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-card-dark border border-border-dark rounded-xl p-5 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-black/20 group relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-yellow-500"></div>
|
|
<div class="flex justify-between items-start mb-4 pl-2">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-white text-lg font-semibold truncate max-w-[200px]">SaaS 웨비나 시리즈</h3>
|
|
<span class="flex h-2 w-2 rounded-full bg-yellow-500 shadow-[0_0_8px_rgba(234,179,8,0.6)]"></span>
|
|
<span class="text-yellow-500 text-[10px] font-bold uppercase tracking-wider ml-1">초안</span>
|
|
</div>
|
|
<p class="text-text-secondary text-sm">4시간 전 편집됨</p>
|
|
</div>
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-[#282e39] transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
<div class="w-full h-32 mb-4 rounded-lg bg-center bg-cover relative group/preview cursor-pointer" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDuobmXG8vCN3hj-ToqKXoZS3DiTVyvZmv7cBmE3lL2ysV0RFQaj0NV7VqqsbQe3elZnCvYx46g1tOpYGqbhfYMlXGi7KBf0ovxlb3t-QdmZIhWjTCq4zWtjkndwlZFYy5TnJLHKPTh11yyX3oyX5_vSPosi1CdjsIclJKA8LPN5H6ZrS6_B6XjNbUofAtefq4xM7WFAAFH_9EGHSFYEJsK6p5n_ZwvwgBL9rBtFpbEqc35sNfp-zC2gG8Frx6uYPJ7VbBYskVxTdrb');">
|
|
<div class="absolute inset-0 bg-black/40 group-hover/preview:bg-black/20 transition-all flex items-center justify-center">
|
|
<button class="bg-black/60 backdrop-blur-sm text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
|
미리보기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between border-t border-border-dark pt-4 pl-2">
|
|
<span class="text-text-secondary text-xs">수집된 리드 없음</span>
|
|
<div class="flex gap-2">
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-white bg-primary hover:bg-blue-600 transition-colors shadow-sm shadow-blue-900/50">
|
|
<span class="material-symbols-outlined text-[16px]">play_arrow</span>
|
|
게시하기
|
|
</button>
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-white bg-[#282e39] hover:bg-[#3b4354] transition-colors">
|
|
<span class="material-symbols-outlined text-[16px]">edit</span>
|
|
편집
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-card-dark border border-border-dark rounded-xl p-5 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-black/20 group relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-green-500"></div>
|
|
<div class="flex justify-between items-start mb-4 pl-2">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-white text-lg font-semibold truncate max-w-[200px]">프로덕트 헌트 런칭</h3>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="flex h-2 w-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
|
|
<span class="text-green-500 text-[10px] font-bold uppercase tracking-wider">활성</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-text-secondary text-sm">2주 동안 활성 중</p>
|
|
</div>
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-[#282e39] transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-4 mb-5 pl-2">
|
|
<div class="flex flex-col p-3 bg-[#111318] rounded-lg border border-border-dark flex-1">
|
|
<span class="text-text-secondary text-xs font-medium uppercase tracking-wider mb-1">총 리드 수</span>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-white text-2xl font-bold">892</span>
|
|
<span class="text-red-400 text-xs font-medium mb-1 flex items-center">
|
|
<span class="material-symbols-outlined text-[14px]">trending_down</span>
|
|
2%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col p-3 bg-[#111318] rounded-lg border border-border-dark flex-1">
|
|
<span class="text-text-secondary text-xs font-medium uppercase tracking-wider mb-1">노출 수</span>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-white text-2xl font-bold">12k</span>
|
|
<span class="text-green-500 text-xs font-medium mb-1 flex items-center">
|
|
<span class="material-symbols-outlined text-[14px]">arrow_upward</span>
|
|
18%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between border-t border-border-dark pt-4 pl-2">
|
|
<div class="flex items-center -space-x-2">
|
|
<div class="w-8 h-8 rounded-full border-2 border-card-dark bg-gray-700 flex items-center justify-center text-xs text-white bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBv1oso4LXTCgoKwjlnaDnVkUoSxqrgbeirpDAkbmVhq6hk7Q35Cer9mzaNoOdHP7bOi0rtHc31IMVmYy-KamZlBDXHgdTlMXmh_wDC4hjtjp_lmuMcD7476H9nswf9BYI93AhAutnRB44cQGecZ659jvrVihlP1jlx9ZE09c7-xx8bqPx9woTR5hlyoRpjPbTV7Hysa5stoKW0NpWA45s6zL5uExlSlkyfaI4lvoaLdOjpALDZ2_fxjfXbD88aGGqBdsuo5ahkbtaG');"></div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-white bg-[#282e39] hover:bg-[#3b4354] transition-colors border border-transparent hover:border-gray-600">
|
|
<span class="material-symbols-outlined text-[16px]">content_copy</span>
|
|
URL 복사
|
|
</button>
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-white bg-primary/20 hover:bg-primary/30 text-primary hover:text-blue-300 transition-colors border border-transparent">
|
|
<span class="material-symbols-outlined text-[16px]">tune</span>
|
|
변수/페이지
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-[#111318] border-2 border-dashed border-border-dark rounded-xl p-5 flex flex-col items-center justify-center text-center gap-3 hover:border-gray-600 hover:bg-[#1c1f27] transition-all cursor-pointer group min-h-[200px]">
|
|
<div class="size-12 rounded-full bg-[#282e39] group-hover:bg-primary/20 flex items-center justify-center transition-colors">
|
|
<span class="material-symbols-outlined text-text-secondary group-hover:text-primary text-[28px]">add</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white text-lg font-medium">새 그룹 생성</h3>
|
|
<p class="text-text-secondary text-sm mt-1">새로운 A/B 테스트 또는 캠페인을 시작하세요</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-6 border-t border-border-dark mt-4">
|
|
<p class="text-text-secondary text-sm">12개 그룹 중 1-4 표시</p>
|
|
<div class="flex gap-2">
|
|
<button class="px-3 py-1.5 rounded-lg border border-border-dark text-text-secondary hover:text-white hover:bg-[#282e39] disabled:opacity-50 text-sm font-medium transition-colors">이전</button>
|
|
<button class="px-3 py-1.5 rounded-lg border border-border-dark text-white bg-[#282e39] hover:bg-[#3b4354] text-sm font-medium transition-colors">1</button>
|
|
<button class="px-3 py-1.5 rounded-lg border border-border-dark text-text-secondary hover:text-white hover:bg-[#282e39] text-sm font-medium transition-colors">2</button>
|
|
<button class="px-3 py-1.5 rounded-lg border border-border-dark text-text-secondary hover:text-white hover:bg-[#282e39] text-sm font-medium transition-colors">3</button>
|
|
<button class="px-3 py-1.5 rounded-lg border border-border-dark text-text-secondary hover:text-white hover:bg-[#282e39] text-sm font-medium transition-colors">다음</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
</body></html> |