k3341095/landing-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ffd13c0fbb1bbe6b76998246cfca6cce1094b55a
landing-manager/images/variant_builder_editor_11/code.html
k3341095 ffd13c0fbb macbook 에서 리눅스로 이동
2026-03-05 10:35:28 +09:00

318 lines
15 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="dark" lang="ko"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>스크립트 및 추적 설정 - Variant Builder</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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": "#1e293b",
"border-dark": "#282e39",
"code-bg": "#0b0d11",
"sidebar-bg": "#111318"
},
fontFamily: {
"display": ["Inter", "sans-serif"],
"body": ["Inter", "sans-serif"],
"mono": ["Fira Code", "monospace"]
},
},
},
}
</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;
}
.code-editor {
font-family: 'Fira Code', monospace;
tab-size: 4;
line-height: 1.6;
}
</style>
</head>
<body class="bg-background-dark text-slate-900 dark:text-white flex h-screen overflow-hidden">
<aside class="w-[240px] bg-sidebar-bg border-r border-border-dark flex flex-col shrink-0 z-30">
<div class="p-6">
<div class="flex items-center gap-3 mb-8 px-2">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-white text-xl">layers</span>
</div>
<span class="font-bold text-lg tracking-tight text-white">Variant</span>
</div>
<nav class="space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-surface-dark/50 transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">dashboard</span>
<span class="text-sm font-medium">랜딩 페이지</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-surface-dark/50 transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">analytics</span>
<span class="text-sm font-medium">통계 및 분석</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-surface-dark/50 transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">person_search</span>
<span class="text-sm font-medium">리드 관리</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white bg-primary/10 border border-primary/20 transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">settings</span>
<span class="text-sm font-semibold">설정</span>
</a>
</nav>
</div>
<div class="mt-auto p-4 border-t border-border-dark">
<div class="flex items-center gap-3 px-2">
<div class="size-8 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 flex-col">
<span class="text-xs font-semibold text-white">마케팅 팀</span>
<span class="text-[10px] text-slate-500 tracking-tight">Pro Plan</span>
</div>
</div>
</div>
</aside>
<div class="flex flex-col flex-1 min-w-0 h-screen">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-border-dark bg-sidebar-bg 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">code</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 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>취소</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>
</div>
</header>
<main class="flex flex-1 overflow-hidden h-full">
<aside class="w-[280px] bg-sidebar-bg border-r border-border-dark flex flex-col shrink-0 z-10">
<div class="p-6">
<h3 class="font-semibold text-sm text-white mb-4">도움말 및 가이드</h3>
<div class="space-y-4">
<div class="p-4 rounded-lg bg-surface-dark/30 border border-border-dark">
<div class="flex items-center gap-2 text-primary mb-2">
<span class="material-symbols-outlined text-sm">info</span>
<span class="text-xs font-bold uppercase tracking-wider">스크립트 삽입 위치</span>
</div>
<p class="text-[11px] text-slate-400 leading-relaxed">
모든 스크립트는 해당 페이지의 <code class="text-blue-400 font-mono">&lt;/head&gt;</code> 태그 바로 위에 자동으로 삽입됩니다.
</p>
</div>
<div class="p-4 rounded-lg bg-surface-dark/30 border border-border-dark">
<div class="flex items-center gap-2 text-amber-500 mb-2">
<span class="material-symbols-outlined text-sm">warning</span>
<span class="text-xs font-bold uppercase tracking-wider">주의사항</span>
</div>
<p class="text-[11px] text-slate-400 leading-relaxed">
잘못된 스크립트는 페이지 렌더링에 영향을 줄 수 있습니다. 외부 라이브러리 연동 시 반드시 테스트 후 배포하세요.
</p>
</div>
</div>
</div>
<div class="mt-auto p-6 border-t border-border-dark">
<div class="flex items-center gap-3 text-slate-400 hover:text-white cursor-pointer transition-colors group">
<span class="material-symbols-outlined group-hover:text-primary">help_outline</span>
<span class="text-sm">고급 가이드 문서 보기</span>
</div>
</div>
</aside>
<section class="flex-1 bg-[#0b0d11] overflow-y-auto custom-scrollbar p-8">
<div class="max-w-4xl mx-auto space-y-8">
<div class="flex flex-col gap-4">
<div class="flex justify-between items-end">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<h3 class="text-lg font-bold text-white">글로벌 스크립트</h3>
<span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-500 text-[10px] font-bold tracking-tight border border-blue-500/20">ALL PAGES</span>
</div>
<p class="text-sm text-slate-500">모든 섹션과 페이지에 공통으로 삽입되는 스크립트입니다.</p>
</div>
<div class="flex gap-2">
<button class="px-3 py-1.5 rounded bg-surface-dark text-xs text-slate-300 hover:text-white transition-colors">템플릿 불러오기</button>
</div>
</div>
<div class="relative group">
<div class="absolute top-4 left-4 z-10 flex gap-2">
<div class="size-2.5 rounded-full bg-red-500/50"></div>
<div class="size-2.5 rounded-full bg-amber-500/50"></div>
<div class="size-2.5 rounded-full bg-green-500/50"></div>
</div>
<div class="absolute top-4 right-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded bg-slate-800 text-slate-400 hover:text-white" title="복사하기">
<span class="material-symbols-outlined text-[18px]">content_copy</span>
</button>
</div>
<textarea class="w-full h-64 bg-[#0d1117] border border-border-dark rounded-xl p-12 code-editor text-sm text-blue-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="&lt;!-- 여기에 스크립트를 입력하세요 (e.g. &lt;script&gt;...&lt;/script&gt;) --&gt;" spellcheck="false">&lt;script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"&gt;&lt;/script&gt;
&lt;script&gt;
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
&lt;/script&gt;</textarea>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="flex justify-between items-end">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<h3 class="text-lg font-bold text-white">전환 스크립트</h3>
<span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-500 text-[10px] font-bold tracking-tight border border-emerald-500/20">COMPLETION ONLY</span>
</div>
<p class="text-sm text-slate-500">신청 완료 혹은 구매 완료 페이지에만 삽입되는 스크립트입니다.</p>
</div>
<div class="flex gap-2">
<button class="px-3 py-1.5 rounded bg-surface-dark text-xs text-slate-300 hover:text-white transition-colors">포스트백 가이드</button>
</div>
</div>
<div class="relative group">
<div class="absolute top-4 left-4 z-10 flex gap-2">
<div class="size-2.5 rounded-full bg-red-500/50"></div>
<div class="size-2.5 rounded-full bg-amber-500/50"></div>
<div class="size-2.5 rounded-full bg-green-500/50"></div>
</div>
<div class="absolute top-4 right-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded bg-slate-800 text-slate-400 hover:text-white" title="복사하기">
<span class="material-symbols-outlined text-[18px]">content_copy</span>
</button>
</div>
<textarea class="w-full h-48 bg-[#0d1117] border border-border-dark rounded-xl p-12 code-editor text-sm text-emerald-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="&lt;!-- 전환 추적 스크립트를 입력하세요 --&gt;" spellcheck="false">&lt;script&gt;
// Conversion event for purchase
fbq('track', 'Purchase', {
value: 29.00,
currency: 'USD'
});
&lt;/script&gt;</textarea>
</div>
</div>
<div class="grid grid-cols-2 gap-4 pb-12">
<div class="p-4 rounded-xl bg-surface-dark border border-border-dark flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="size-10 rounded-lg bg-[#111318] flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined">analytics</span>
</div>
<div>
<p class="text-sm font-semibold text-white">기본 로그 수집</p>
<p class="text-xs text-slate-500">방문자 수 및 유입 경로 자동 분석</p>
</div>
</div>
<button class="w-10 h-5 bg-primary rounded-full relative transition-colors">
<span class="absolute right-1 top-1 bg-white size-3 rounded-full"></span>
</button>
</div>
<div class="p-4 rounded-xl bg-surface-dark border border-border-dark flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="size-10 rounded-lg bg-[#111318] flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined">ads_click</span>
</div>
<div>
<p class="text-sm font-semibold text-white">UTM 파라미터 보존</p>
<p class="text-xs text-slate-500">페이지 이동 시 광고 파라미터 유지</p>
</div>
</div>
<button class="w-10 h-5 bg-primary rounded-full relative transition-colors">
<span class="absolute right-1 top-1 bg-white size-3 rounded-full"></span>
</button>
</div>
</div>
</div>
</section>
<aside class="w-[320px] bg-sidebar-bg 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-sidebar-bg">
<div>
<h3 class="font-semibold text-sm text-white">스크립트 변경 이력</h3>
<p class="text-xs text-slate-500 mt-0.5">최근 5개의 변경 사항</p>
</div>
<button class="size-8 flex items-center justify-center text-slate-400 hover:text-white rounded hover:bg-surface-dark transition-colors">
<span class="material-symbols-outlined text-[18px]">history</span>
</button>
</div>
<div class="flex-1 overflow-y-auto p-5 custom-scrollbar">
<div class="flex flex-col gap-4">
<div class="flex gap-3">
<div class="shrink-0 mt-1">
<div class="size-2 rounded-full bg-primary"></div>
<div class="w-0.5 h-full bg-border-dark mx-auto mt-1"></div>
</div>
<div class="flex-1 pb-4">
<p class="text-xs font-semibold text-white">Google Analytics 4 추가</p>
<p class="text-[10px] text-slate-500 mt-0.5">2024.05.24 14:20 • admin_user</p>
</div>
</div>
<div class="flex gap-3">
<div class="shrink-0 mt-1">
<div class="size-2 rounded-full bg-slate-600"></div>
<div class="w-0.5 h-full bg-border-dark mx-auto mt-1"></div>
</div>
<div class="flex-1 pb-4">
<p class="text-xs font-semibold text-slate-400">Facebook Pixel 스크립트 수정</p>
<p class="text-[10px] text-slate-500 mt-0.5">2024.05.20 10:15 • dev_team</p>
</div>
</div>
<div class="flex gap-3">
<div class="shrink-0 mt-1">
<div class="size-2 rounded-full bg-slate-600"></div>
</div>
<div class="flex-1">
<p class="text-xs font-semibold text-slate-400">최초 스크립트 설정</p>
<p class="text-[10px] text-slate-500 mt-0.5">2024.05.15 09:00 • system</p>
</div>
</div>
</div>
</div>
<div class="p-6 border-t border-border-dark bg-sidebar-bg">
<div class="p-4 rounded-lg bg-primary/5 border border-primary/20">
<div class="flex items-center gap-2 text-primary mb-2">
<span class="material-symbols-outlined text-sm">auto_awesome</span>
<span class="text-xs font-bold uppercase tracking-wider">AI 도우미</span>
</div>
<p class="text-[11px] text-slate-400 leading-relaxed mb-3">
설치하려는 도구의 이름만 입력하면 AI가 최적화된 코드를 생성해 드립니다.
</p>
<button class="w-full py-2 bg-primary/10 hover:bg-primary/20 text-primary text-xs font-bold rounded transition-colors">
AI로 스크립트 생성하기
</button>
</div>
</div>
</aside>
</main>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink