156 lines
7.8 KiB
HTML
156 lines
7.8 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": "#282e39",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"],
|
|
"body": ["Inter", "sans-serif"],
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #111318;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #282e39;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-dark text-white flex flex-col h-screen overflow-hidden">
|
|
<header class="flex items-center justify-between border-b border-border-dark bg-surface-dark px-8 py-4 shrink-0 z-20">
|
|
<div class="flex items-center gap-4">
|
|
<a class="text-slate-400 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</a>
|
|
<div class="h-6 w-px bg-border-dark mx-2"></div>
|
|
<h1 class="text-lg font-bold tracking-tight">새 랜딩 페이지 생성</h1>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="px-5 py-2 rounded-lg text-sm font-semibold text-slate-400 hover:text-white hover:bg-white/5 transition-all">
|
|
취소
|
|
</button>
|
|
<button class="px-6 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all shadow-lg shadow-primary/20">
|
|
생성하기
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="flex-1 overflow-y-auto custom-scrollbar flex justify-center bg-background-dark py-12 px-6">
|
|
<div class="w-full max-w-2xl flex flex-col gap-8">
|
|
<section class="flex flex-col gap-6 bg-surface-dark p-8 rounded-2xl border border-border-dark">
|
|
<div class="flex flex-col gap-1 border-b border-border-dark pb-4">
|
|
<h3 class="text-base font-semibold">기본 정보</h3>
|
|
<p class="text-xs text-slate-500">랜딩 페이지의 식별 정보와 접속 경로를 설정합니다.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<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-lg text-sm text-white px-4 py-3 focus:ring-1 focus:ring-primary focus:border-primary placeholder-slate-600 outline-none transition-all" placeholder="예: 2024 여름 할인 캠페인" type="text"/>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">URL 경로</label>
|
|
<div class="flex items-center">
|
|
<span class="bg-[#0b0d11] border border-r-0 border-border-dark px-4 py-3 text-sm text-slate-500 rounded-l-lg">
|
|
example.com/pages/
|
|
</span>
|
|
<input class="flex-1 bg-[#0b0d11] border border-border-dark rounded-r-lg text-sm text-white px-4 py-3 focus:ring-1 focus:ring-primary focus:border-primary placeholder-slate-600 outline-none transition-all" placeholder="summer-sale" type="text"/>
|
|
</div>
|
|
</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-lg text-sm text-white px-4 py-3 focus:ring-1 focus:ring-primary focus:border-primary placeholder-slate-600 outline-none transition-all resize-none" placeholder="랜딩 페이지에 대한 상세 설명을 입력하세요." rows="4"></textarea>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-col gap-6 bg-surface-dark p-8 rounded-2xl border border-border-dark">
|
|
<div class="flex flex-col gap-1 border-b border-border-dark pb-4">
|
|
<h3 class="text-base font-semibold">고급 설정</h3>
|
|
<p class="text-xs text-slate-500">페이지 동작에 필요한 추가 기능을 활성화합니다.</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-4 rounded-xl bg-[#0b0d11] border border-border-dark hover:border-slate-700 transition-colors">
|
|
<div class="flex gap-4 items-center">
|
|
<div class="size-10 bg-primary/10 text-primary rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined">task_alt</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-medium text-white">완료 페이지 사용 여부</span>
|
|
<span class="text-xs text-slate-500">제출 성공 후 감사 페이지 또는 리다이렉션을 설정합니다.</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-11 h-6 bg-slate-700 rounded-full relative transition-colors focus:outline-none ring-offset-2 ring-offset-surface-dark group">
|
|
<span class="absolute left-1 top-1 bg-white size-4 rounded-full transition-transform"></span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 rounded-xl bg-[#0b0d11] border border-border-dark hover:border-slate-700 transition-colors">
|
|
<div class="flex gap-4 items-center">
|
|
<div class="size-10 bg-amber-500/10 text-amber-500 rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined">code</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-medium text-white">스크립트 사용 여부</span>
|
|
<span class="text-xs text-slate-500">GA4, Pixel 등 외부 트래킹 및 커스텀 스크립트를 삽입합니다.</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-11 h-6 bg-primary rounded-full relative transition-colors focus:outline-none ring-offset-2 ring-offset-surface-dark">
|
|
<span class="absolute left-6 top-1 bg-white size-4 rounded-full transition-transform"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-col gap-6 bg-surface-dark p-8 rounded-2xl border border-border-dark opacity-80 grayscale pointer-events-none">
|
|
<div class="flex flex-col gap-1 border-b border-border-dark pb-4">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-base font-semibold">템플릿 선택</h3>
|
|
<span class="text-[10px] bg-border-dark px-1.5 py-0.5 rounded text-slate-400 font-bold uppercase">Coming Soon</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="aspect-[3/4] rounded-lg bg-[#0b0d11] border border-border-dark flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-slate-700 text-4xl">web</span>
|
|
</div>
|
|
<div class="aspect-[3/4] rounded-lg bg-[#0b0d11] border border-border-dark flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-slate-700 text-4xl">web</span>
|
|
</div>
|
|
<div class="aspect-[3/4] rounded-lg bg-[#0b0d11] border border-border-dark flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-slate-700 text-4xl">web</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<footer class="md:hidden border-t border-border-dark bg-surface-dark p-4 shrink-0 flex gap-3">
|
|
<button class="flex-1 py-3 rounded-lg text-sm font-semibold text-slate-400 border border-border-dark">
|
|
취소
|
|
</button>
|
|
<button class="flex-1 py-3 rounded-lg bg-primary text-white text-sm font-semibold">
|
|
생성하기
|
|
</button>
|
|
</footer>
|
|
|
|
</body></html> |