322 lines
18 KiB
HTML
322 lines
18 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": "#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">
|
|
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;
|
|
}
|
|
.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">
|
|
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-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">auto_awesome_motion</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-white text-base font-bold leading-tight tracking-[-0.015em]">페이지 편집기</h2>
|
|
<div class="flex items-center gap-2 text-xs text-slate-400 mt-0.5">
|
|
<span>캠페인</span>
|
|
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
|
<span>여름 세일 프로모션</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 text-sm 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 text-sm font-semibold transition-colors shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined text-[18px]">save</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-[320px] bg-[#111318] border-r border-border-dark flex flex-col shrink-0 z-10">
|
|
<div class="p-4 border-b border-border-dark flex justify-between items-center bg-[#111318]">
|
|
<h3 class="font-semibold text-sm text-white">페이지 구조</h3>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">HTML 편집</span>
|
|
<button class="w-8 h-4 bg-slate-700 rounded-full relative transition-colors focus:outline-none">
|
|
<span class="absolute left-1 top-1 bg-slate-400 size-2 rounded-full transition-transform"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3 custom-scrollbar">
|
|
<div class="p-3 rounded-lg border border-dashed border-border-dark bg-[#141820] text-center mb-2">
|
|
<span class="material-symbols-outlined text-slate-500 text-[24px] mb-1">add_photo_alternate</span>
|
|
<p class="text-[11px] text-slate-400 leading-tight">여기에 이미지를 드래그하여<br/>새 섹션을 추가하세요</p>
|
|
</div>
|
|
<div class="group relative flex items-center gap-3 p-3 rounded-lg bg-surface-dark border border-primary shadow-[0_0_0_1px_rgba(19,91,236,1)] cursor-pointer hover:bg-slate-800 transition-colors">
|
|
<div class="text-slate-500 cursor-grab active:cursor-grabbing">
|
|
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
|
</div>
|
|
<div class="size-8 rounded bg-[#111318] flex items-center justify-center text-slate-400 shrink-0">
|
|
<span class="material-symbols-outlined text-[18px]">image</span>
|
|
</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">이미지 + 로고</p>
|
|
</div>
|
|
<button class="text-slate-400 hover:text-white p-1 rounded">
|
|
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
<div class="group relative flex items-center gap-3 p-3 rounded-lg bg-[#111318] border border-border-dark cursor-pointer hover:bg-surface-dark hover:border-slate-600 transition-colors">
|
|
<div class="text-slate-600 cursor-grab active:cursor-grabbing group-hover:text-slate-500">
|
|
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
|
</div>
|
|
<div class="size-8 rounded bg-surface-dark flex items-center justify-center text-slate-400 shrink-0">
|
|
<span class="material-symbols-outlined text-[18px]">title</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-slate-300 truncate">가치 제안</p>
|
|
<p class="text-xs text-slate-500 truncate">H1 + 본문</p>
|
|
</div>
|
|
<button class="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-white p-1 rounded">
|
|
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
<div class="group relative flex items-center gap-3 p-3 rounded-lg bg-[#111318] border border-border-dark cursor-pointer hover:bg-surface-dark hover:border-slate-600 transition-colors">
|
|
<div class="text-slate-600 cursor-grab active:cursor-grabbing group-hover:text-slate-500">
|
|
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
|
</div>
|
|
<div class="size-8 rounded bg-surface-dark flex items-center justify-center text-slate-400 shrink-0">
|
|
<span class="material-symbols-outlined text-[18px]">gif_box</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-slate-300 truncate">데모 영상</p>
|
|
<p class="text-xs text-slate-500 truncate">루프 GIF</p>
|
|
</div>
|
|
<button class="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-white p-1 rounded">
|
|
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
<div class="group relative flex items-center gap-3 p-3 rounded-lg bg-[#111318] border border-border-dark cursor-pointer hover:bg-surface-dark hover:border-slate-600 transition-colors">
|
|
<div class="text-slate-600 cursor-grab active:cursor-grabbing group-hover:text-slate-500">
|
|
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
|
</div>
|
|
<div class="size-8 rounded bg-surface-dark flex items-center justify-center text-slate-400 shrink-0">
|
|
<span class="material-symbols-outlined text-[18px]">touch_app</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-slate-300 truncate">고정 CTA</p>
|
|
<p class="text-xs text-slate-500 truncate">하단 고정 버튼</p>
|
|
</div>
|
|
<button class="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-white p-1 rounded">
|
|
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-border-dark mt-auto bg-[#111318]">
|
|
<button class="w-full py-2.5 rounded-lg border border-dashed border-slate-600 text-slate-400 hover:text-white hover:border-slate-400 hover:bg-surface-dark transition-all flex items-center justify-center gap-2 text-sm font-medium">
|
|
<span class="material-symbols-outlined text-[20px]">add_circle</span>
|
|
섹션 추가
|
|
</button>
|
|
</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">
|
|
<div class="relative group">
|
|
<div class="absolute inset-0 border-2 border-primary z-20 pointer-events-none"></div>
|
|
<div class="absolute top-2 right-2 z-30 bg-primary text-white text-[10px] px-2 py-0.5 rounded font-bold tracking-wide shadow-sm">편집 중</div>
|
|
<div class="relative h-48 w-full bg-slate-900 overflow-hidden">
|
|
<img alt="Header background" class="w-full h-full object-cover opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBceHj4fe7PQn5roym2DM9WOocCJB0BQxuKExR8ulwggZyARF0-GRXVdS9rV9qEiAfcjcjQ_jH3NIxoAy7IH8ISJ2z6ND6WbUrEwJySKSEN8L3LL8Lr42mnkATadICesv0h2nm5JMy22wnEXjyIs-F2NiXG56Hh6s3HELVhRK4nU-VsEoy8m-tWbh8FR1jndX6iCq6mxaPrd05yp6V5p2ZqEpTjciLxSUFDO4YG2KKXMvQPf2a_6nWrtv7b8FHU7FeM2sIpf3V7YmF"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex flex-col justify-end p-6">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="size-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">V</div>
|
|
<span class="text-white font-bold text-lg tracking-tight">Vantage</span>
|
|
</div>
|
|
<h1 class="text-white text-2xl font-bold leading-tight">이전에 없던 SaaS 성장을 경험하세요.</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-white">
|
|
<h2 class="text-slate-900 text-xl font-bold mb-3">성장을 위한 올인원 플랫폼</h2>
|
|
<p class="text-slate-600 text-base leading-relaxed">여러 도구를 번갈아 쓸 필요가 없습니다. 분석, CRM, 마케팅 자동화를 하나의 대시보드에서 해결하세요.</p>
|
|
</div>
|
|
<div class="w-full aspect-video bg-slate-100 flex items-center justify-center text-slate-400 border-y border-slate-100">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<span class="material-symbols-outlined text-[32px]">play_circle</span>
|
|
<span class="text-xs font-medium uppercase tracking-wider">제품 데모 GIF</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-20"></div>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white/95 backdrop-blur-sm border-t border-slate-100 shadow-lg z-20">
|
|
<button class="w-full bg-blue-600 text-white font-bold py-3 rounded-xl shadow-lg shadow-blue-600/30">지금 무료로 시작하기</button>
|
|
</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 px-3 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 flex justify-between items-center bg-[#111318]">
|
|
<div>
|
|
<h3 class="font-semibold text-sm text-white">속성 편집: 상단 배너</h3>
|
|
<p class="text-xs text-slate-500 mt-0.5">레이아웃 및 콘텐츠 설정</p>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<button class="size-8 flex items-center justify-center text-slate-400 hover:text-white rounded hover:bg-surface-dark transition-colors" title="초기화">
|
|
<span class="material-symbols-outlined text-[18px]">restart_alt</span>
|
|
</button>
|
|
<button class="size-8 flex items-center justify-center text-slate-400 hover:text-red-400 rounded hover:bg-surface-dark transition-colors" title="삭제">
|
|
<span class="material-symbols-outlined text-[18px]">delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex border-b border-border-dark">
|
|
<button class="flex-1 py-3 text-sm font-medium text-primary border-b-2 border-primary bg-surface-dark/50">콘텐츠</button>
|
|
<button class="flex-1 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-surface-dark transition-colors">스타일</button>
|
|
<button class="flex-1 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-surface-dark transition-colors">설정</button>
|
|
</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="border-2 border-dashed border-border-dark rounded-lg p-4 hover:border-primary/50 hover:bg-surface-dark transition-all cursor-pointer group text-center">
|
|
<div class="size-16 bg-[#111318] rounded-md mx-auto mb-3 overflow-hidden border border-border-dark relative">
|
|
<img alt="Current background" class="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARKX7eC65mz2IpuBwDVp_I5oS2RC62dOWT-WoIBq5cR6aap-2XMq4Y9ntPmPhycnDw1NszD32Wgwrec6t7qQmVHp1llkEWal5-zfta2pCL4SWfO5v0nYou7715kxFts5jf4O3TDJPkL1hFpSEWNypgSvYP2I-avJIA-hfssJxwf1RyrWDUwewJG14-ivVP91ECuBDyyMLkZA62gUX_fjTwO-W6cCrJmNITt2oWnzn9gAjAX7wxvWfjLfIirMNVNfwolEaHgXl-B_pI"/>
|
|
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span class="material-symbols-outlined text-white">edit</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-primary font-medium">클릭하거나 이미지를 드래그하세요</p>
|
|
<p class="text-xs text-slate-500 mt-1">JPG, PNG, WEBP (최대 2MB)</p>
|
|
</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-md text-sm text-white px-3 py-2 focus:ring-1 focus:ring-primary focus:border-primary placeholder-slate-600 outline-none transition-shadow resize-none" rows="3">이전에 없던 SaaS 성장을 경험하세요.</textarea>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">회사명/서비스명</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-[#0b0d11] border border-border-dark rounded-md text-sm text-white pl-3 pr-10 py-2 focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-shadow" type="text" value="Vantage"/>
|
|
<div class="absolute right-3 top-2 text-slate-500">
|
|
<span class="material-symbols-outlined text-[18px]">edit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 rounded-lg bg-[#0b0d11] border border-border-dark">
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-medium text-white">로고 아이콘 표시</span>
|
|
<span class="text-xs text-slate-500">이름 옆에 아이콘을 보여줍니다</span>
|
|
</div>
|
|
<button class="w-11 h-6 bg-primary rounded-full relative transition-colors focus:outline-none">
|
|
<span class="absolute left-6 top-1 bg-white size-4 rounded-full transition-transform"></span>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">텍스트 정렬</label>
|
|
<div class="flex bg-[#0b0d11] p-1 rounded-md border border-border-dark">
|
|
<button class="flex-1 py-1.5 rounded text-slate-400 hover:bg-surface-dark hover:text-white transition-colors flex justify-center">
|
|
<span class="material-symbols-outlined text-[20px]">format_align_left</span>
|
|
</button>
|
|
<button class="flex-1 py-1.5 rounded bg-primary text-white shadow-sm flex justify-center">
|
|
<span class="material-symbols-outlined text-[20px]">format_align_center</span>
|
|
</button>
|
|
<button class="flex-1 py-1.5 rounded text-slate-400 hover:bg-surface-dark hover:text-white transition-colors flex justify-center">
|
|
<span class="material-symbols-outlined text-[20px]">format_align_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-border-dark bg-[#111318]">
|
|
<button class="w-full py-2.5 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> |