247 lines
13 KiB
HTML
247 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>Completion Page Editor - Vantage</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@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",
|
|
"surface-dark": "#1e293b",
|
|
"border-dark": "#282e39",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"],
|
|
"body": ["Inter", "sans-serif"],
|
|
},
|
|
borderRadius: {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"2xl": "1rem",
|
|
"3xl": "1.5rem",
|
|
"full": "9999px"
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer base {
|
|
body {
|
|
@apply font-body;
|
|
}
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #111318;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #282e39;
|
|
border-radius: 3px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: #374151;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white flex flex-col h-screen overflow-hidden text-sm">
|
|
<header class="flex items-center justify-between border-b border-border-dark bg-[#111318] px-6 py-3 shrink-0 z-20">
|
|
<div class="flex items-center gap-4 text-white">
|
|
<a class="text-slate-400 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
</a>
|
|
<div class="h-6 w-px bg-border-dark mx-2"></div>
|
|
<div class="size-8 flex items-center justify-center bg-primary/20 rounded-lg text-primary">
|
|
<span class="material-symbols-outlined">task_alt</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-white text-base font-bold leading-tight tracking-tight">완료 페이지 설정</h2>
|
|
<div class="flex items-center gap-2 text-xs text-slate-400 mt-0.5">
|
|
<span>Summer Sale 2024</span>
|
|
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
|
<span class="text-white">감사 페이지 구성</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex bg-border-dark rounded-lg p-1 gap-1">
|
|
<button class="p-1.5 rounded bg-[#111318] text-white shadow-sm transition-all">
|
|
<span class="material-symbols-outlined text-[18px]">smartphone</span>
|
|
</button>
|
|
<button class="p-1.5 rounded hover:bg-[#111318]/50 text-slate-400 hover:text-white transition-all">
|
|
<span class="material-symbols-outlined text-[18px]">laptop</span>
|
|
</button>
|
|
</div>
|
|
<div class="h-6 w-px bg-border-dark"></div>
|
|
<div class="flex gap-3">
|
|
<button class="flex items-center justify-center gap-2 rounded-lg h-9 px-4 bg-border-dark hover:bg-slate-700 text-white font-semibold transition-colors">
|
|
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
|
<span>미리보기</span>
|
|
</button>
|
|
<button class="flex items-center justify-center gap-2 rounded-lg h-9 px-4 bg-primary hover:bg-primary/90 text-white font-semibold transition-colors shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined text-[18px]">check_circle</span>
|
|
<span>저장 후 게시</span>
|
|
</button>
|
|
</div>
|
|
<button class="size-9 rounded-full bg-slate-700 bg-cover bg-center ml-2 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_');"></button>
|
|
</div>
|
|
</header>
|
|
<main class="flex flex-1 overflow-hidden h-full">
|
|
<aside class="w-[280px] bg-[#111318] border-r border-border-dark flex flex-col shrink-0 z-10">
|
|
<div class="p-4 border-b border-border-dark bg-[#111318]">
|
|
<h3 class="font-semibold text-slate-300 uppercase tracking-widest text-[10px]">Page Theme</h3>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-2 custom-scrollbar">
|
|
<div class="p-3 rounded-lg bg-surface-dark border border-primary flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-primary">auto_awesome</span>
|
|
<span class="text-sm font-medium">Standard Layout</span>
|
|
</div>
|
|
<div class="p-3 rounded-lg bg-[#111318] border border-border-dark text-slate-500 flex items-center gap-3 hover:border-slate-600 cursor-not-allowed">
|
|
<span class="material-symbols-outlined">splitscreen</span>
|
|
<span class="text-sm">Split Image</span>
|
|
</div>
|
|
<div class="p-3 rounded-lg bg-[#111318] border border-border-dark text-slate-500 flex items-center gap-3 hover:border-slate-600 cursor-not-allowed">
|
|
<span class="material-symbols-outlined">video_library</span>
|
|
<span class="text-sm">Video Background</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-border-dark bg-[#111318] text-xs text-slate-500">
|
|
<p>완료 페이지는 데이터 수집 후 사용자에게 보여지는 마지막 단계입니다.</p>
|
|
</div>
|
|
</aside>
|
|
<section class="flex-1 bg-[#0b0d11] relative flex flex-col items-center justify-center overflow-hidden p-8">
|
|
<div class="absolute inset-0 z-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(#282e39 1px, transparent 1px); background-size: 20px 20px;"></div>
|
|
<div class="relative z-10 flex flex-col items-center h-full max-h-[800px] w-full">
|
|
<div class="relative w-[375px] h-full bg-black rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden flex flex-col ring-1 ring-white/10">
|
|
<div class="h-8 bg-black w-full flex justify-between items-center px-6 shrink-0 select-none">
|
|
<span class="text-[10px] font-semibold text-white">9:41</span>
|
|
<div class="flex gap-1.5">
|
|
<span class="material-symbols-outlined text-[12px] text-white">signal_cellular_alt</span>
|
|
<span class="material-symbols-outlined text-[12px] text-white">wifi</span>
|
|
<span class="material-symbols-outlined text-[12px] text-white">battery_full</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 bg-white overflow-y-auto no-scrollbar relative w-full flex flex-col">
|
|
<div class="flex-1 flex flex-col items-center justify-center p-8 text-center">
|
|
<div class="size-20 bg-green-50 text-green-500 rounded-full flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-[48px]">check_circle</span>
|
|
</div>
|
|
<h1 class="text-slate-900 text-2xl font-bold mb-4">신청이 완료되었습니다!</h1>
|
|
<p class="text-slate-600 text-base leading-relaxed mb-8">
|
|
입력하신 이메일로 가이드북을 발송해 드렸습니다. <br/>
|
|
문의사항은 고객센터로 연락주세요.
|
|
</p>
|
|
<a class="w-full bg-primary text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/30" href="#">
|
|
홈으로 돌아가기
|
|
</a>
|
|
</div>
|
|
<div class="p-8 flex justify-center">
|
|
<div class="flex items-center gap-2 opacity-30 grayscale">
|
|
<div class="size-6 bg-slate-900 rounded flex items-center justify-center text-white text-[10px] font-bold">V</div>
|
|
<span class="text-slate-900 font-bold tracking-tight text-sm">Vantage</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1/2 -translate-x-1/2 w-32 h-1 bg-white/20 rounded-full z-30"></div>
|
|
</div>
|
|
<div class="mt-4 text-slate-500 text-xs flex gap-2 items-center bg-[#111318] py-1.5 px-4 rounded-full border border-border-dark">
|
|
<span class="size-2 bg-green-500 rounded-full animate-pulse"></span>
|
|
실시간 미리보기 • iPhone 14 Pro
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<aside class="w-[360px] bg-[#111318] border-l border-border-dark flex flex-col shrink-0 z-10">
|
|
<div class="px-5 py-4 border-b border-border-dark bg-[#111318]">
|
|
<h3 class="font-semibold text-sm text-white">콘텐츠 설정</h3>
|
|
<p class="text-xs text-slate-500 mt-0.5">완료 페이지의 문구와 동작을 수정합니다.</p>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-5 custom-scrollbar">
|
|
<div class="flex flex-col gap-6">
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">메인 아이콘</label>
|
|
<div class="flex items-center gap-3 p-3 bg-[#0b0d11] border border-border-dark rounded-lg">
|
|
<div class="size-10 bg-green-500/10 text-green-500 rounded flex items-center justify-center">
|
|
<span class="material-symbols-outlined">check_circle</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="text-xs text-slate-400 block mb-1">Color: Success Green</span>
|
|
<div class="flex gap-1">
|
|
<div class="size-4 rounded-full bg-green-500 cursor-pointer border border-white/20"></div>
|
|
<div class="size-4 rounded-full bg-primary cursor-pointer"></div>
|
|
<div class="size-4 rounded-full bg-orange-500 cursor-pointer"></div>
|
|
<div class="size-4 rounded-full bg-slate-500 cursor-pointer"></div>
|
|
</div>
|
|
</div>
|
|
<button class="text-slate-400 hover:text-white">
|
|
<span class="material-symbols-outlined text-[20px]">sync</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">완료 메시지</label>
|
|
<input class="w-full bg-[#0b0d11] border border-border-dark rounded-md text-sm text-white px-3 py-2.5 focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-shadow" type="text" value="신청이 완료되었습니다!"/>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">추가 안내 문구</label>
|
|
<textarea class="w-full bg-[#0b0d11] border border-border-dark rounded-md text-sm text-white px-3 py-2.5 focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-shadow resize-none" rows="4">입력하신 이메일로 가이드북을 발송해 드렸습니다.
|
|
문의사항은 고객센터로 연락주세요.</textarea>
|
|
</div>
|
|
<div class="h-px bg-border-dark my-2"></div>
|
|
<div class="flex flex-col gap-4">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">버튼 설정</label>
|
|
<div class="flex flex-col gap-2">
|
|
<span class="text-[11px] text-slate-500">버튼 텍스트</span>
|
|
<input class="w-full bg-[#0b0d11] border border-border-dark rounded-md text-sm text-white px-3 py-2 focus:ring-1 focus:ring-primary focus:border-primary outline-none" type="text" value="홈으로 돌아가기"/>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<span class="text-[11px] text-slate-500">클릭 시 이동 (Link)</span>
|
|
<div class="relative">
|
|
<input class="w-full bg-[#0b0d11] border border-border-dark rounded-md text-sm text-white pl-8 pr-3 py-2 focus:ring-1 focus:ring-primary focus:border-primary outline-none" type="text" value="https://vantage.io/home"/>
|
|
<span class="material-symbols-outlined absolute left-2 top-2 text-[18px] text-slate-600">link</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">추가 설정</label>
|
|
<div class="flex items-center justify-between p-3 rounded-lg bg-[#0b0d11] border border-border-dark">
|
|
<span class="text-xs font-medium text-slate-300">자동 리다이렉트 (5초 후)</span>
|
|
<button class="w-9 h-5 bg-border-dark rounded-full relative transition-colors">
|
|
<span class="absolute left-1 top-1 bg-slate-500 size-3 rounded-full transition-transform"></span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 rounded-lg bg-[#0b0d11] border border-border-dark">
|
|
<span class="text-xs font-medium text-slate-300">SNS 공유 버튼 표시</span>
|
|
<button class="w-9 h-5 bg-primary rounded-full relative transition-colors">
|
|
<span class="absolute left-5 top-1 bg-white size-3 rounded-full transition-transform"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-border-dark bg-[#111318]">
|
|
<button class="w-full py-3 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
|
|
변경사항 적용하기
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
</body></html> |