macbook 에서 리눅스로 이동
This commit is contained in:
k3341095
134
images/dashboard_admin_login_1/code.html
Normal file
134
images/dashboard_admin_login_1/code.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Dashboard Admin Login</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#101622",
|
||||
"card-dark": "#1a2230", // Custom darker shade for card
|
||||
"border-dark": "#2a3345", // Custom border color
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
||||
backgroundImage: {
|
||||
'grid-pattern': "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.03)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e\")",
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>/* Custom checkbox style adjustment */
|
||||
.checkbox-custom:checked {
|
||||
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDSksUUmfaRgCz4Hpv8QOgSJuURlYyWJdMxep5O2mOI1J8cFghoERv2sqEtPQM4HgA3bChqOyi8Uyb_B2BHlSFCqg0-9GKppQ1jlR8pPtI9b6bWJQNGyDlTnJILk4BHUhDYbvs1AbnxsD076ph3QnH9-2SwOqraayE8Qs6qZ8jZQByK36ZcvkN4qd92SfnYVXu_9iupdaINHfP4OYmq_p9qF6kqTGiT_whJaqlDcllYeU18nLOAQszGkMszrWzXH-UM5EXd7zg1i-vm)
|
||||
}</style>
|
||||
</head>
|
||||
<body class="font-display bg-background-light dark:bg-background-dark min-h-screen flex flex-col relative overflow-x-hidden antialiased">
|
||||
<!-- Background Pattern & Gradient Overlay -->
|
||||
<div class="absolute inset-0 z-0 bg-grid-pattern pointer-events-none"></div>
|
||||
<div class="absolute inset-0 z-0 bg-gradient-to-br from-primary/10 via-transparent to-transparent pointer-events-none opacity-50"></div>
|
||||
<!-- Main Content Layout -->
|
||||
<main class="relative z-10 flex-grow flex items-center justify-center p-4 sm:p-6 lg:p-8">
|
||||
<!-- Login Card -->
|
||||
<div class="w-full max-w-[480px] bg-white dark:bg-card-dark rounded-xl shadow-2xl border border-gray-200 dark:border-border-dark overflow-hidden">
|
||||
<!-- Card Header -->
|
||||
<div class="px-8 pt-10 pb-6 text-center">
|
||||
<div class="mx-auto h-12 w-12 bg-primary/20 rounded-lg flex items-center justify-center mb-6 text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">analytics</span>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
|
||||
LandingLab
|
||||
</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Welcome back! Please enter your details to access your dashboard.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Login Form -->
|
||||
<form class="px-8 pb-10 flex flex-col gap-5">
|
||||
<!-- Email Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">
|
||||
Email address
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
||||
<span class="material-symbols-outlined text-[20px]">mail</span>
|
||||
</div>
|
||||
<input class="block w-full h-12 pl-10 pr-3 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-[#111318] text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-shadow sm:text-sm" id="email" placeholder="name@company.com" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="password">
|
||||
Password
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
||||
<span class="material-symbols-outlined text-[20px]">lock</span>
|
||||
</div>
|
||||
<input class="block w-full h-12 pl-10 pr-10 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-[#111318] text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-shadow sm:text-sm" id="password" placeholder="Enter your password" type="password"/>
|
||||
<button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Remember & Forgot Password -->
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input class="checkbox-custom h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-[#111318] text-primary focus:ring-primary focus:ring-offset-0 focus:ring-2 dark:focus:ring-offset-card-dark" type="checkbox"/>
|
||||
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">Remember for 30 days</span>
|
||||
</label>
|
||||
<a class="text-sm font-medium text-primary hover:text-blue-500 transition-colors" href="#">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
<!-- Submit Button -->
|
||||
<button class="w-full h-12 bg-primary hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg shadow-primary/30 transition-all duration-200 transform active:scale-[0.98] flex items-center justify-center gap-2" type="button">
|
||||
<span>Sign in</span>
|
||||
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
|
||||
</button>
|
||||
<!-- SSO Divider (Optional Enterprise Touch) -->
|
||||
<div class="relative py-2">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-200 dark:border-gray-700"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-white dark:bg-card-dark px-2 text-gray-400">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="flex items-center justify-center gap-2 h-10 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-[#111318] hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
|
||||
<img alt="Google Logo" class="w-5 h-5" data-alt="Google G colorful logo" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7LCYf6vbP__6MGSgOfuOyZ7dWFz2c_aF7KuMdAeKQqGvYiREHzQnXKUVuchWo-ALw6yx7UU8RZE-3-MS4-Jf2an2NCpTAslhS4BVbNzJuvmc59oXd1NBxw7h8erIi-nDXsP9fhD4SyAzedQ8I90JQDB9eRxWmtMKy9OerRqX-S4ZHDbaia714WoB0qPgkOpqs0yjJHWO7OeR9Z5NXrLEdyCA7aJZAD22kB29d4UhCgdgVVN0VCx8oPvlLZEg7vWQbYUvfcv-1edYa"/>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Google</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center gap-2 h-10 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-[#111318] hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-gray-900 dark:text-white text-[22px]">hub</span>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">SSO</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Footer Links -->
|
||||
<div class="absolute bottom-6 w-full text-center">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-500">
|
||||
© 2024 LandingLab Inc.
|
||||
<a class="hover:text-gray-900 dark:hover:text-gray-300 ml-2 transition-colors" href="#">Privacy Policy</a>
|
||||
<span class="mx-1">·</span>
|
||||
<a class="hover:text-gray-900 dark:hover:text-gray-300 transition-colors" href="#">Terms of Service</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
images/dashboard_admin_login_1/screen.png
Normal file
BIN
images/dashboard_admin_login_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
123
images/dashboard_admin_login_2/code.html
Normal file
123
images/dashboard_admin_login_2/code.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!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>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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 id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#101622",
|
||||
"card-dark": "#1a2230",
|
||||
"border-dark": "#2a3345",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
||||
backgroundImage: {
|
||||
'grid-pattern': "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.03)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e\")",
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.checkbox-custom:checked {
|
||||
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDSksUUmfaRgCz4Hpv8QOgSJuURlYyWJdMxep5O2mOI1J8cFghoERv2sqEtPQM4HgA3bChqOyi8Uyb_B2BHlSFCqg0-9GKppQ1jlR8pPtI9b6bWJQNGyDlTnJILk4BHUhDYbvs1AbnxsD076ph3QnH9-2SwOqraayE8Qs6qZ8jZQByK36ZcvkN4qd92SfnYVXu_9iupdaINHfP4OYmq_p9qF6kqTGiT_whJaqlDcllYeU18nLOAQszGkMszrWzXH-UM5EXd7zg1i-vm)
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-display bg-background-light dark:bg-background-dark min-h-screen flex flex-col relative overflow-x-hidden antialiased">
|
||||
<div class="absolute inset-0 z-0 bg-grid-pattern pointer-events-none"></div>
|
||||
<div class="absolute inset-0 z-0 bg-gradient-to-br from-primary/10 via-transparent to-transparent pointer-events-none opacity-50"></div>
|
||||
<main class="relative z-10 flex-grow flex items-center justify-center p-4 sm:p-6 lg:p-8">
|
||||
<div class="w-full max-w-[480px] bg-white dark:bg-card-dark rounded-xl shadow-2xl border border-gray-200 dark:border-border-dark overflow-hidden">
|
||||
<div class="px-8 pt-10 pb-6 text-center">
|
||||
<div class="mx-auto h-12 w-12 bg-primary/20 rounded-lg flex items-center justify-center mb-6 text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">analytics</span>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
|
||||
랜딩-마스터
|
||||
</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
다시 오신 것을 환영합니다! 대시보드 접속을 위해 정보를 입력해주세요.
|
||||
</p>
|
||||
</div>
|
||||
<form class="px-8 pb-10 flex flex-col gap-5">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">
|
||||
이메일 주소
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
||||
<span class="material-symbols-outlined text-[20px]">mail</span>
|
||||
</div>
|
||||
<input class="block w-full h-12 pl-10 pr-3 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-[#111318] text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-shadow sm:text-sm" id="email" placeholder="name@company.com" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="password">
|
||||
비밀번호
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
||||
<span class="material-symbols-outlined text-[20px]">lock</span>
|
||||
</div>
|
||||
<input class="block w-full h-12 pl-10 pr-10 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-[#111318] text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-shadow sm:text-sm" id="password" placeholder="비밀번호를 입력하세요" type="password"/>
|
||||
<button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input class="checkbox-custom h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-[#111318] text-primary focus:ring-primary focus:ring-offset-0 focus:ring-2 dark:focus:ring-offset-card-dark" type="checkbox"/>
|
||||
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">30일 동안 로그인 유지</span>
|
||||
</label>
|
||||
<a class="text-sm font-medium text-primary hover:text-blue-500 transition-colors" href="#">
|
||||
비밀번호를 잊으셨나요?
|
||||
</a>
|
||||
</div>
|
||||
<button class="w-full h-12 bg-primary hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg shadow-primary/30 transition-all duration-200 transform active:scale-[0.98] flex items-center justify-center gap-2" type="button">
|
||||
<span>로그인</span>
|
||||
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
|
||||
</button>
|
||||
<div class="relative py-2">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-200 dark:border-gray-700"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-white dark:bg-card-dark px-2 text-gray-400">또는 다음으로 계속하기</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="flex items-center justify-center gap-2 h-10 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-[#111318] hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
|
||||
<img alt="Google Logo" class="w-5 h-5" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7LCYf6vbP__6MGSgOfuOyZ7dWFz2c_aF7KuMdAeKQqGvYiREHzQnXKUVuchWo-ALw6yx7UU8RZE-3-MS4-Jf2an2NCpTAslhS4BVbNzJuvmc59oXd1NBxw7h8erIi-nDXsP9fhD4SyAzedQ8I90JQDB9eRxWmtMKy9OerRqX-S4ZHDbaia714WoB0qPgkOpqs0yjJHWO7OeR9Z5NXrLEdyCA7aJZAD22kB29d4UhCgdgVVN0VCx8oPvlLZEg7vWQbYUvfcv-1edYa"/>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">구글 로그인</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center gap-2 h-10 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-[#111318] hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-gray-900 dark:text-white text-[22px]">hub</span>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">SSO 로그인</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="absolute bottom-6 w-full text-center">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-500">
|
||||
© 2024 LandingMaster Inc.
|
||||
<a class="hover:text-gray-900 dark:hover:text-gray-300 ml-2 transition-colors" href="#">개인정보처리방침</a>
|
||||
<span class="mx-1">·</span>
|
||||
<a class="hover:text-gray-900 dark:hover:text-gray-300 transition-colors" href="#">이용약관</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
BIN
images/dashboard_admin_login_2/screen.png
Normal file
BIN
images/dashboard_admin_login_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
405
images/group_details_settings/code.html
Normal file
405
images/group_details_settings/code.html
Normal file
@@ -0,0 +1,405 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Group Details & Settings</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;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"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"primary-hover": "#1d64f0",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#101622",
|
||||
"surface-dark": "#1a202c",
|
||||
"surface-dark-lighter": "#2d3748",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"],
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/* Custom scrollbar for dark mode */
|
||||
.dark ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
background: #111318;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: #374151;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white antialiased">
|
||||
<div class="flex h-screen w-full overflow-hidden">
|
||||
<!-- Side Navigation -->
|
||||
<div class="hidden lg:flex w-64 flex-col bg-[#111318] border-r border-slate-800 shrink-0">
|
||||
<div class="flex h-full flex-col justify-between p-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- User Profile / Team -->
|
||||
<div class="flex gap-3 items-center mb-2">
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 shrink-0 border border-slate-700" data-alt="Company Logo Abstract" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCHbPUXlbWtVB4VpZY-3HUUkFWv74JV9ZCOJXzOUua1k1Eft_cOO1m3r3EB6bD2MQBjK3dyo57n43Dfe_LC5GaiRWZLjy19VuxOnEgoiPuPimUUvUrhPjim2urCnzEHD_VF1afU1kIRmExhrx5nG-rktd7DAuJJK9NxP93vmyBLA_Vz76Q-7AMpPUhrBc8aShyQ_kJrcXDswwCvM1GQr9Kfy-Gvs8bh0zrdVfg_Wy7ynELoWixJpjJyaVKrDTtMxZkn4Gg3auxKFni2");'></div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<h1 class="text-white text-sm font-semibold leading-tight truncate">Acme Corp</h1>
|
||||
<p class="text-slate-400 text-xs font-normal leading-normal truncate">Pro Plan</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<nav class="flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
||||
<span class="text-sm font-medium">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-primary/10 text-primary rounded-lg transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px] fill-1">layers</span>
|
||||
<span class="text-sm font-medium">Groups</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">group</span>
|
||||
<span class="text-sm font-medium">Leads</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">bar_chart</span>
|
||||
<span class="text-sm font-medium">Analytics</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Bottom Links -->
|
||||
<div class="flex flex-col gap-1 mt-auto">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span class="text-sm font-medium">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col h-full overflow-y-auto bg-background-light dark:bg-background-dark relative">
|
||||
<!-- Header Area -->
|
||||
<header class="w-full px-6 py-6 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-[#111318]">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex items-center gap-2 mb-4 text-sm">
|
||||
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Dashboard</a>
|
||||
<span class="text-slate-600 dark:text-slate-600">/</span>
|
||||
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Groups</a>
|
||||
<span class="text-slate-600 dark:text-slate-600">/</span>
|
||||
<span class="text-slate-900 dark:text-white font-medium">Summer Campaign 2024</span>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Summer Campaign 2024</h1>
|
||||
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-1 text-xs font-medium text-emerald-500 ring-1 ring-inset ring-emerald-500/20">
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm max-w-2xl">
|
||||
Manage settings, A/B tests, and view performance metrics for this landing page group.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 shrink-0">
|
||||
<!-- Toggle Switch -->
|
||||
<label class="inline-flex items-center cursor-pointer mr-2">
|
||||
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="relative w-11 h-6 bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||||
<span class="ms-3 text-sm font-medium text-slate-900 dark:text-slate-300">Live</span>
|
||||
</label>
|
||||
<button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-lg shadow-primary/20 transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">save</span>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mt-8 border-b border-slate-200 dark:border-slate-800">
|
||||
<nav aria-label="Tabs" class="-mb-px flex space-x-8">
|
||||
<a aria-current="page" class="border-primary text-primary whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" href="#">
|
||||
General Info
|
||||
</a>
|
||||
<a class="border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" href="#">
|
||||
Scripts
|
||||
</a>
|
||||
<a class="border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" href="#">
|
||||
Completion Page
|
||||
</a>
|
||||
<a class="border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" href="#">
|
||||
Stats Summary
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Scrollable Content -->
|
||||
<div class="p-6 max-w-7xl mx-auto w-full space-y-6 pb-20">
|
||||
<!-- Performance Snapshot -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<!-- Stat Card 1 -->
|
||||
<div class="bg-white dark:bg-[#1a202c] rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Visitors</h3>
|
||||
<span class="material-symbols-outlined text-slate-400 text-[20px]">visibility</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-3xl font-bold text-slate-900 dark:text-white">12,450</span>
|
||||
<span class="text-xs font-medium text-emerald-500 flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px]">arrow_upward</span> 12%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Card 2 -->
|
||||
<div class="bg-white dark:bg-[#1a202c] rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-medium text-slate-500 dark:text-slate-400">Leads Generated</h3>
|
||||
<span class="material-symbols-outlined text-slate-400 text-[20px]">group_add</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-3xl font-bold text-slate-900 dark:text-white">856</span>
|
||||
<span class="text-xs font-medium text-emerald-500 flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px]">arrow_upward</span> 5.2%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Card 3 -->
|
||||
<div class="bg-white dark:bg-[#1a202c] rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm relative overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-center justify-between mb-4 relative z-10">
|
||||
<h3 class="text-sm font-medium text-primary">Conversion Rate</h3>
|
||||
<span class="material-symbols-outlined text-primary text-[20px]">trending_up</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 relative z-10">
|
||||
<span class="text-3xl font-bold text-primary">6.8%</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-400">Avg. industry 4.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Left Column: Configuration -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Basic Settings -->
|
||||
<section class="bg-white dark:bg-[#1a202c] rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-white">Configuration</h2>
|
||||
<button class="text-slate-400 hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">more_horiz</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="col-span-1">
|
||||
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="group-name">Internal Group Name</label>
|
||||
<input class="block w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:border-primary focus:ring-primary sm:text-sm px-4 py-2.5" id="group-name" name="group-name" type="text" value="Summer Campaign 2024"/>
|
||||
<p class="mt-1 text-xs text-slate-500">Used for internal organization only.</p>
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="domain">Domain</label>
|
||||
<select class="block w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:border-primary focus:ring-primary sm:text-sm px-4 py-2.5" id="domain" name="domain">
|
||||
<option>landing.acmecorp.com</option>
|
||||
<option>promo.acmecorp.com</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="slug">URL Slug</label>
|
||||
<div class="flex rounded-lg shadow-sm">
|
||||
<span class="inline-flex items-center rounded-l-lg border border-r-0 border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/50 px-3 text-slate-500 dark:text-slate-400 sm:text-sm">
|
||||
landing.acmecorp.com/
|
||||
</span>
|
||||
<input class="block w-full min-w-0 flex-1 rounded-none rounded-r-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:border-primary focus:ring-primary sm:text-sm px-4 py-2.5" id="slug" name="slug" type="text" value="summer-sale-2024"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-3">Group Tags</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1 rounded-md bg-slate-100 dark:bg-slate-700/50 px-2 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 ring-1 ring-inset ring-slate-500/10">
|
||||
Seasonal
|
||||
<button class="group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-slate-500/20" type="button">
|
||||
<span class="sr-only">Remove</span>
|
||||
<svg class="h-3.5 w-3.5 stroke-slate-600/50 group-hover:stroke-slate-600/75 dark:stroke-slate-300/50 dark:group-hover:stroke-slate-300/75" viewbox="0 0 14 14">
|
||||
<path d="M4 4l6 6m0-6l-6 6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1 rounded-md bg-indigo-50 dark:bg-indigo-900/20 px-2 py-1 text-xs font-medium text-indigo-700 dark:text-indigo-400 ring-1 ring-inset ring-indigo-700/10">
|
||||
Q3 Marketing
|
||||
<button class="group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-indigo-600/20" type="button">
|
||||
<span class="sr-only">Remove</span>
|
||||
<svg class="h-3.5 w-3.5 stroke-indigo-700/50 group-hover:stroke-indigo-700/75 dark:stroke-indigo-400/50 dark:group-hover:stroke-indigo-400/75" viewbox="0 0 14 14">
|
||||
<path d="M4 4l6 6m0-6l-6 6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<button class="inline-flex items-center gap-1 rounded-md border border-dashed border-slate-300 dark:border-slate-600 px-2 py-1 text-xs font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:border-slate-400 transition-colors">
|
||||
<span class="material-symbols-outlined text-[14px]">add</span>
|
||||
Add Tag
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- A/B Testing Control -->
|
||||
<section class="bg-white dark:bg-[#1a202c] rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-white">A/B Testing</h2>
|
||||
<span class="inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30">Running</span>
|
||||
</div>
|
||||
<button class="text-sm font-medium text-primary hover:text-primary-hover">
|
||||
Manage Variants
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mb-8">
|
||||
Adjust the traffic distribution between your variants. Changes apply immediately to new visitors.
|
||||
</p>
|
||||
<!-- Visual Slider -->
|
||||
<div class="relative mb-8 pt-6">
|
||||
<div class="flex justify-between text-sm font-medium mb-2">
|
||||
<div class="text-slate-900 dark:text-white">Variant A <span class="text-slate-500 font-normal">(Control)</span></div>
|
||||
<div class="text-slate-900 dark:text-white">Variant B <span class="text-slate-500 font-normal">(Test)</span></div>
|
||||
</div>
|
||||
<!-- Range Slider Wrapper -->
|
||||
<div class="relative h-4 w-full rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden flex">
|
||||
<div class="h-full bg-slate-500 dark:bg-slate-500" style="width: 50%"></div>
|
||||
<div class="h-full bg-primary" style="width: 50%"></div>
|
||||
<!-- Draggable Handle (Visual Only for UI) -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white border-4 border-slate-100 dark:border-[#1a202c] rounded-full shadow-lg cursor-ew-resize z-10 flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mx-px"></div>
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mx-px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-3">
|
||||
<div class="text-2xl font-bold text-slate-700 dark:text-slate-300">50%</div>
|
||||
<div class="text-2xl font-bold text-primary">50%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Variants List -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-2 h-10 bg-slate-500 rounded-full"></div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-slate-900 dark:text-white">Main Landing Page (Original)</div>
|
||||
<div class="text-xs text-slate-500">Last edited 2 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="text-right">
|
||||
<div class="text-xs text-slate-500">Conv. Rate</div>
|
||||
<div class="text-sm font-semibold text-slate-900 dark:text-white">6.2%</div>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-white">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 rounded-lg bg-blue-50/10 dark:bg-primary/5 border border-primary/30">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-2 h-10 bg-primary rounded-full"></div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-slate-900 dark:text-white">Hero Section Redesign V2</div>
|
||||
<div class="text-xs text-slate-500">Last edited 4 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="text-right">
|
||||
<div class="text-xs text-slate-500">Conv. Rate</div>
|
||||
<div class="text-sm font-semibold text-primary">7.4%</div>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-white">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right Column: Info & Actions -->
|
||||
<div class="lg:col-span-1 space-y-6">
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-white dark:bg-[#1a202c] rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm p-6">
|
||||
<h3 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wider mb-4">Actions</h3>
|
||||
<div class="flex flex-col gap-3">
|
||||
<button class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium text-slate-700 dark:text-slate-200 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700">
|
||||
<span>Preview Live Page</span>
|
||||
<span class="material-symbols-outlined text-[18px]">open_in_new</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium text-slate-700 dark:text-slate-200 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700">
|
||||
<span>Duplicate Group</span>
|
||||
<span class="material-symbols-outlined text-[18px]">content_copy</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium text-slate-700 dark:text-slate-200 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700">
|
||||
<span>Reset Stats</span>
|
||||
<span class="material-symbols-outlined text-[18px]">restart_alt</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Integration Status -->
|
||||
<div class="bg-white dark:bg-[#1a202c] rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm p-6">
|
||||
<h3 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wider mb-4">Integrations</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#F48024] text-white font-bold text-xs">
|
||||
GA
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-slate-900 dark:text-white">Google Analytics 4</p>
|
||||
<p class="text-xs text-emerald-500 flex items-center gap-1 mt-0.5">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Connected
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#635BFF] text-white font-bold text-xs">
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-slate-900 dark:text-white">Stripe Checkout</p>
|
||||
<p class="text-xs text-slate-500 flex items-center gap-1 mt-0.5">
|
||||
Not configured
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<a class="text-xs font-medium text-primary hover:text-primary-hover flex items-center gap-1" href="#">
|
||||
Manage integrations <span class="material-symbols-outlined text-[14px]">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Danger Zone -->
|
||||
<div class="bg-red-50 dark:bg-red-900/10 rounded-xl border border-red-200 dark:border-red-900/30 shadow-sm p-6">
|
||||
<h3 class="text-sm font-semibold text-red-700 dark:text-red-400 uppercase tracking-wider mb-4">Danger Zone</h3>
|
||||
<p class="text-sm text-red-600/80 dark:text-red-400/80 mb-4">
|
||||
Deleting this group will permanently remove all associated stats and configurations.
|
||||
</p>
|
||||
<button class="w-full px-4 py-2 text-sm font-medium text-red-700 dark:text-red-400 bg-white dark:bg-red-950 hover:bg-red-50 dark:hover:bg-red-900/50 rounded-lg border border-red-200 dark:border-red-800 transition-colors">
|
||||
Delete Group
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
images/group_details_settings/screen.png
Normal file
BIN
images/group_details_settings/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
378
images/groups_dashboard_list_1/code.html
Normal file
378
images/groups_dashboard_list_1/code.html
Normal file
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Groups Dashboard - 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"/>
|
||||
<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', sans-serif;
|
||||
}
|
||||
/* Custom scrollbar for dark mode */
|
||||
::-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">
|
||||
<!-- SideNavBar Component -->
|
||||
<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">
|
||||
<!-- User Profile -->
|
||||
<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" data-alt="Profile picture of a business professional" 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>
|
||||
<!-- Navigation -->
|
||||
<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">Dashboard</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">Groups</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">Analytics</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">Settings</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Upgrade Button -->
|
||||
<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">Upgrade</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 flex flex-col h-full overflow-hidden relative bg-background-light dark:bg-background-dark">
|
||||
<!-- Top Header & Breadcrumbs -->
|
||||
<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="#">Home</a>
|
||||
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
||||
<span class="text-white font-medium">Groups</span>
|
||||
</div>
|
||||
<h2 class="text-white text-2xl font-bold leading-tight tracking-tight">Landing Page Groups</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">Create New Group</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Scrollable Content -->
|
||||
<main class="flex-1 overflow-y-auto p-6 scroll-smooth">
|
||||
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
|
||||
<!-- Search & Filters Toolbar -->
|
||||
<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">
|
||||
<!-- Search -->
|
||||
<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="Search groups by name or tag..." type="text"/>
|
||||
</div>
|
||||
<!-- Filters -->
|
||||
<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>Status: All</option>
|
||||
<option>Active</option>
|
||||
<option>Draft</option>
|
||||
<option>Archived</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>Sort by: Newest</option>
|
||||
<option>Sort by: Oldest</option>
|
||||
<option>Sort by: Leads</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>
|
||||
<!-- Groups Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<!-- Card 1: Active -->
|
||||
<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]">Q3 Marketing Campaign</h3>
|
||||
<span class="flex h-2 w-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
|
||||
</div>
|
||||
<p class="text-text-secondary text-sm">Created 2 days ago</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">Total Leads</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">Conv. Rate</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" data-alt="User avatar 1" 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" data-alt="User avatar 2" 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>
|
||||
Copy 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>
|
||||
Variants
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Inactive -->
|
||||
<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]">Black Friday 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">Archived</span>
|
||||
</div>
|
||||
<p class="text-text-secondary text-sm">Ended Dec 1, 2023</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">Total Leads</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">Final</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">Visitors</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">Final</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 Variants Tested</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>
|
||||
Results
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: Active with Image Preview -->
|
||||
<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 Webinar Series</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">Draft</span>
|
||||
</div>
|
||||
<p class="text-text-secondary text-sm">Last edited 4 hours ago</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>
|
||||
<!-- Preview Image Area -->
|
||||
<div class="w-full h-32 mb-4 rounded-lg bg-center bg-cover relative group/preview cursor-pointer" data-alt="SaaS dashboard analytics preview" 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>
|
||||
Preview
|
||||
</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">0 Leads collected</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>
|
||||
Publish
|
||||
</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>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Active -->
|
||||
<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]">Product Hunt Launch</h3>
|
||||
<span class="flex h-2 w-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
|
||||
</div>
|
||||
<p class="text-text-secondary text-sm">Active for 2 weeks</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">Total Leads</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">Impressions</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" data-alt="User avatar 3" 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>
|
||||
Copy 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>
|
||||
Variants
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5: New Placeholder -->
|
||||
<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">Create New Group</h3>
|
||||
<p class="text-text-secondary text-sm mt-1">Start a new A/B test or campaign</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pagination / Footer -->
|
||||
<div class="flex items-center justify-between pt-6 border-t border-border-dark mt-4">
|
||||
<p class="text-text-secondary text-sm">Showing 1 to 4 of 12 groups</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">Previous</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">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
images/groups_dashboard_list_1/screen.png
Normal file
BIN
images/groups_dashboard_list_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
364
images/groups_dashboard_list_2/code.html
Normal file
364
images/groups_dashboard_list_2/code.html
Normal file
@@ -0,0 +1,364 @@
|
||||
<!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>
|
||||
BIN
images/groups_dashboard_list_2/screen.png
Normal file
BIN
images/groups_dashboard_list_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
474
images/leads_analytics_logs_1/code.html
Normal file
474
images/leads_analytics_logs_1/code.html
Normal file
@@ -0,0 +1,474 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Leads & Analytics Logs</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;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"/>
|
||||
<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 id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#101622",
|
||||
"surface-dark": "#1c2333",
|
||||
"border-dark": "#2d3648",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Custom scrollbar for better dark mode experience */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #101622;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2d3648;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3b4354;
|
||||
}
|
||||
|
||||
/* Utility for Material Symbols to ensure alignment */
|
||||
.material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-sm {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display antialiased overflow-hidden">
|
||||
<div class="relative flex h-screen w-full flex-row overflow-hidden">
|
||||
<!-- Side Navigation -->
|
||||
<aside class="flex h-full w-64 flex-col border-r border-border-dark bg-[#111318] flex-shrink-0 z-20">
|
||||
<div class="flex flex-col h-full justify-between p-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Brand -->
|
||||
<div class="flex gap-3 items-center px-2 py-1 mb-2">
|
||||
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8 bg-primary/20 flex items-center justify-center text-primary" data-alt="Abstract geometric logo">
|
||||
<span class="material-symbols-outlined filled">pentagon</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-white text-sm font-semibold leading-tight">Acme Corp</h1>
|
||||
<p class="text-gray-500 text-xs font-normal leading-tight">Pro Plan</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Items -->
|
||||
<nav class="flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined group-hover:text-primary transition-colors">dashboard</span>
|
||||
<span class="text-sm font-medium">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined group-hover:text-primary transition-colors">web</span>
|
||||
<span class="text-sm font-medium">Landing Pages</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary/10 text-primary" href="#">
|
||||
<span class="material-symbols-outlined filled">group</span>
|
||||
<span class="text-sm font-medium">Leads & Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined group-hover:text-primary transition-colors">science</span>
|
||||
<span class="text-sm font-medium">A/B Tests</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined group-hover:text-primary transition-colors">settings</span>
|
||||
<span class="text-sm font-medium">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Bottom Action -->
|
||||
<button class="flex w-full items-center justify-center gap-2 rounded-lg h-10 px-4 bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined icon-sm">add</span>
|
||||
<span>Create Page</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col h-full overflow-hidden bg-background-light dark:bg-background-dark relative">
|
||||
<!-- Top Header -->
|
||||
<header class="h-16 border-b border-border-dark bg-[#111318]/95 backdrop-blur flex items-center justify-between px-6 shrink-0 z-10">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="text-white text-lg font-semibold">Leads & Analytics Logs</h2>
|
||||
<span class="h-4 w-px bg-border-dark"></span>
|
||||
<div class="flex items-center gap-2 text-gray-400 text-sm">
|
||||
<span class="material-symbols-outlined icon-sm">calendar_today</span>
|
||||
<span>Last 30 Days</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- User Profile / Notifications -->
|
||||
<button class="size-8 rounded-full bg-surface-dark border border-border-dark flex items-center justify-center text-gray-400 hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined icon-sm">notifications</span>
|
||||
</button>
|
||||
<div class="size-8 rounded-full bg-gradient-to-tr from-primary to-purple-500" data-alt="User avatar gradient"></div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Scrollable Content -->
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<div class="mx-auto max-w-[1200px] flex flex-col gap-6">
|
||||
<!-- Page Intro & Key Actions -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<h1 class="text-white text-3xl font-bold tracking-tight">Leads Overview</h1>
|
||||
<p class="text-gray-400 text-sm">Manage, filter, and export your form submissions and event data from all landing pages.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 h-9 px-4 rounded-lg border border-border-dark bg-surface-dark text-white text-sm font-medium hover:bg-border-dark transition-colors">
|
||||
<span class="material-symbols-outlined icon-sm">refresh</span>
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/25">
|
||||
<span class="material-symbols-outlined icon-sm">download</span>
|
||||
<span>Export CSV</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filters Bar -->
|
||||
<div class="p-4 rounded-xl border border-border-dark bg-[#111318] flex flex-wrap gap-4 items-center">
|
||||
<!-- Search -->
|
||||
<div class="relative flex-1 min-w-[240px]">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 material-symbols-outlined icon-sm">search</span>
|
||||
<input class="w-full h-10 pl-10 pr-4 bg-surface-dark border border-border-dark rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="Search by name, email or ID..." type="text"/>
|
||||
</div>
|
||||
<div class="h-6 w-px bg-border-dark hidden md:block"></div>
|
||||
<!-- Dropdown Filters -->
|
||||
<div class="flex flex-wrap gap-3 flex-1 md:flex-none">
|
||||
<div class="relative group">
|
||||
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
||||
<option>All Variants</option>
|
||||
<option>Variant A</option>
|
||||
<option>Variant B</option>
|
||||
<option>Variant C</option>
|
||||
</select>
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
||||
<option>All Channels</option>
|
||||
<option>Organic Search</option>
|
||||
<option>Paid Ads</option>
|
||||
<option>Social Media</option>
|
||||
<option>Direct</option>
|
||||
</select>
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
||||
<option>Status: All</option>
|
||||
<option>New</option>
|
||||
<option>Contacted</option>
|
||||
<option>Qualified</option>
|
||||
<option>Spam</option>
|
||||
</select>
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Table -->
|
||||
<div class="rounded-xl border border-border-dark bg-[#111318] overflow-hidden flex flex-col shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-dark border-b border-border-dark">
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider w-[60px]">
|
||||
<input class="rounded bg-background-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Lead Profile</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Variant</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Source Channel</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Submission Date</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Status</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark">
|
||||
<!-- Row 1 -->
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 text-xs font-bold text-white flex items-center justify-center shrink-0">AJ</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Alice Johnson</span>
|
||||
<span class="text-gray-500 text-xs">alice@example.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
||||
Variant B
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-green-500 icon-sm">ads_click</span>
|
||||
Google Ads
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
Oct 24, 2023 <span class="text-gray-600 mx-1">|</span> 14:30
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="size-1.5 rounded-full bg-blue-400"></span> New
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-orange-500 to-amber-400 text-xs font-bold text-white flex items-center justify-center shrink-0">MS</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Mark Smith</span>
|
||||
<span class="text-gray-500 text-xs">mark.s@company.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
Variant A
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-gray-400 icon-sm">search</span>
|
||||
Organic Search
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
Oct 24, 2023 <span class="text-gray-600 mx-1">|</span> 13:15
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
||||
<span class="size-1.5 rounded-full bg-amber-400"></span> Contacted
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-pink-500 to-rose-400 text-xs font-bold text-white flex items-center justify-center shrink-0">SL</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Sarah Lee</span>
|
||||
<span class="text-gray-500 text-xs">sarah.lee99@gmail.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
Variant A
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-blue-500 icon-sm">public</span>
|
||||
Facebook Ads
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
Oct 23, 2023 <span class="text-gray-600 mx-1">|</span> 09:45
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="size-1.5 rounded-full bg-blue-400"></span> New
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-surface-dark border border-border-dark text-xs font-bold text-gray-300 flex items-center justify-center shrink-0">DC</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">David Chen</span>
|
||||
<span class="text-gray-500 text-xs">dchen@tech.io</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
Variant C
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-gray-400 icon-sm">link</span>
|
||||
Direct
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
Oct 22, 2023 <span class="text-gray-600 mx-1">|</span> 16:20
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<span class="size-1.5 rounded-full bg-green-400"></span> Qualified
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-indigo-500 to-blue-400 text-xs font-bold text-white flex items-center justify-center shrink-0">EW</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Emma Wilson</span>
|
||||
<span class="text-gray-500 text-xs">emma.w@studio.co</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
||||
Variant B
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-blue-600 icon-sm">group_work</span>
|
||||
LinkedIn
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
Oct 22, 2023 <span class="text-gray-600 mx-1">|</span> 11:00
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="size-1.5 rounded-full bg-blue-400"></span> New
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 6 -->
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gray-700 text-xs font-bold text-gray-300 flex items-center justify-center shrink-0">JB</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">James Bond</span>
|
||||
<span class="text-gray-500 text-xs">007@mi6.gov.uk</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
Variant A
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-purple-400 icon-sm">person_add</span>
|
||||
Referral
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
Oct 21, 2023 <span class="text-gray-600 mx-1">|</span> 18:30
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500/10 text-red-400 border border-red-500/20">
|
||||
<span class="size-1.5 rounded-full bg-red-400"></span> Spam
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 bg-surface-dark border-t border-border-dark flex items-center justify-between">
|
||||
<div class="text-xs text-gray-400">
|
||||
Showing <span class="text-white font-medium">1-6</span> of <span class="text-white font-medium">124</span> results
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
|
||||
<span class="material-symbols-outlined icon-sm">chevron_left</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg bg-primary text-white text-sm font-medium shadow-md shadow-primary/20">
|
||||
1
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
2
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
3
|
||||
</button>
|
||||
<span class="text-gray-500 text-xs px-1">...</span>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
8
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
<span class="material-symbols-outlined icon-sm">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
images/leads_analytics_logs_1/screen.png
Normal file
BIN
images/leads_analytics_logs_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
446
images/leads_analytics_logs_2/code.html
Normal file
446
images/leads_analytics_logs_2/code.html
Normal file
@@ -0,0 +1,446 @@
|
||||
<!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;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 id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#101622",
|
||||
"surface-dark": "#1c2333",
|
||||
"border-dark": "#2d3648",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #101622;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2d3648;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3b4354;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-sm {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display antialiased overflow-hidden">
|
||||
<div class="relative flex h-screen w-full flex-row overflow-hidden">
|
||||
<aside class="flex h-full w-64 flex-col border-r border-border-dark bg-[#111318] flex-shrink-0 z-20">
|
||||
<div class="flex flex-col h-full justify-between p-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex gap-3 items-center px-2 py-1 mb-2">
|
||||
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8 bg-primary/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined filled">pentagon</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-white text-sm font-semibold leading-tight">Acme Corp</h1>
|
||||
<p class="text-gray-500 text-xs font-normal leading-tight">Pro Plan</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined group-hover:text-primary transition-colors">web</span>
|
||||
<span class="text-sm font-medium">랜딩 페이지</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined group-hover:text-primary transition-colors">analytics</span>
|
||||
<span class="text-sm font-medium">통계 및 분석</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary/10 text-primary" href="#">
|
||||
<span class="material-symbols-outlined filled">group</span>
|
||||
<span class="text-sm font-medium">리드 관리</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined group-hover:text-primary transition-colors">settings</span>
|
||||
<span class="text-sm font-medium">설정</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<button class="flex w-full items-center justify-center gap-2 rounded-lg h-10 px-4 bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined icon-sm">add</span>
|
||||
<span>페이지 생성</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col h-full overflow-hidden bg-background-light dark:bg-background-dark relative">
|
||||
<header class="h-16 border-b border-border-dark bg-[#111318]/95 backdrop-blur flex items-center justify-between px-6 shrink-0 z-10">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="text-white text-lg font-semibold">리드 및 분석 로그</h2>
|
||||
<span class="h-4 w-px bg-border-dark"></span>
|
||||
<div class="flex items-center gap-2 text-gray-400 text-sm">
|
||||
<span class="material-symbols-outlined icon-sm">calendar_today</span>
|
||||
<span>최근 30일</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="size-8 rounded-full bg-surface-dark border border-border-dark flex items-center justify-center text-gray-400 hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined icon-sm">notifications</span>
|
||||
</button>
|
||||
<div class="size-8 rounded-full bg-gradient-to-tr from-primary to-purple-500"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<div class="mx-auto max-w-[1200px] flex flex-col gap-6">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<h1 class="text-white text-3xl font-bold tracking-tight">리드 개요</h1>
|
||||
<p class="text-gray-400 text-sm">랜딩 페이지에서 수집된 리드 및 이벤트 데이터를 관리하고 내보낼 수 있습니다.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 h-9 px-4 rounded-lg border border-border-dark bg-surface-dark text-white text-sm font-medium hover:bg-border-dark transition-colors">
|
||||
<span class="material-symbols-outlined icon-sm">refresh</span>
|
||||
<span>새로고침</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/25">
|
||||
<span class="material-symbols-outlined icon-sm">download</span>
|
||||
<span>CSV 내보내기</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl border border-border-dark bg-[#111318] flex flex-wrap gap-4 items-center">
|
||||
<div class="relative flex-1 min-w-[240px]">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 material-symbols-outlined icon-sm">search</span>
|
||||
<input class="w-full h-10 pl-10 pr-4 bg-surface-dark border border-border-dark rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="이름, 이메일 등으로 검색..." type="text"/>
|
||||
</div>
|
||||
<div class="h-6 w-px bg-border-dark hidden md:block"></div>
|
||||
<div class="flex flex-wrap gap-3 flex-1 md:flex-none">
|
||||
<div class="relative group">
|
||||
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
||||
<option>모든 변수</option>
|
||||
<option>Variant A</option>
|
||||
<option>Variant B</option>
|
||||
<option>Variant C</option>
|
||||
</select>
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
||||
<option>모든 채널</option>
|
||||
<option>Organic Search</option>
|
||||
<option>Paid Ads</option>
|
||||
<option>Social Media</option>
|
||||
<option>Direct</option>
|
||||
</select>
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<select class="appearance-none h-10 pl-3 pr-10 bg-surface-dark border border-border-dark rounded-lg text-sm text-white focus:outline-none focus:border-primary cursor-pointer hover:border-gray-500 transition-colors min-w-[140px]">
|
||||
<option>상태: 전체</option>
|
||||
<option>신규</option>
|
||||
<option>연락됨</option>
|
||||
<option>적격</option>
|
||||
<option>스팸</option>
|
||||
</select>
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none material-symbols-outlined icon-sm">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-border-dark bg-[#111318] overflow-hidden flex flex-col shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-dark border-b border-border-dark">
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider w-[60px]">
|
||||
<input class="rounded bg-background-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">리드 프로필</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">페이지 변수</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">유입 채널</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">신청 일시</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">상태</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider text-right">작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark">
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 text-xs font-bold text-white flex items-center justify-center shrink-0">AJ</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Alice Johnson</span>
|
||||
<span class="text-gray-500 text-xs">alice@example.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
||||
Variant B
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-green-500 icon-sm">ads_click</span>
|
||||
Google Ads
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
2023.10.24 <span class="text-gray-600 mx-1">|</span> 14:30
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="size-1.5 rounded-full bg-blue-400"></span> 신규
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-orange-500 to-amber-400 text-xs font-bold text-white flex items-center justify-center shrink-0">MS</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Mark Smith</span>
|
||||
<span class="text-gray-500 text-xs">mark.s@company.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
Variant A
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-gray-400 icon-sm">search</span>
|
||||
Organic Search
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
2023.10.24 <span class="text-gray-600 mx-1">|</span> 13:15
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
||||
<span class="size-1.5 rounded-full bg-amber-400"></span> 연락됨
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-pink-500 to-rose-400 text-xs font-bold text-white flex items-center justify-center shrink-0">SL</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Sarah Lee</span>
|
||||
<span class="text-gray-500 text-xs">sarah.lee99@gmail.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
Variant A
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-blue-500 icon-sm">public</span>
|
||||
Facebook Ads
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
2023.10.23 <span class="text-gray-600 mx-1">|</span> 09:45
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="size-1.5 rounded-full bg-blue-400"></span> 신규
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-surface-dark border border-border-dark text-xs font-bold text-gray-300 flex items-center justify-center shrink-0">DC</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">David Chen</span>
|
||||
<span class="text-gray-500 text-xs">dchen@tech.io</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
Variant C
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-gray-400 icon-sm">link</span>
|
||||
Direct
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
2023.10.22 <span class="text-gray-600 mx-1">|</span> 16:20
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<span class="size-1.5 rounded-full bg-green-400"></span> 적격
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gradient-to-br from-indigo-500 to-blue-400 text-xs font-bold text-white flex items-center justify-center shrink-0">EW</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">Emma Wilson</span>
|
||||
<span class="text-gray-500 text-xs">emma.w@studio.co</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
||||
Variant B
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-blue-600 icon-sm">group_work</span>
|
||||
LinkedIn
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
2023.10.22 <span class="text-gray-600 mx-1">|</span> 11:00
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="size-1.5 rounded-full bg-blue-400"></span> 신규
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<input class="rounded bg-surface-dark border-border-dark text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-full bg-gray-700 text-xs font-bold text-gray-300 flex items-center justify-center shrink-0">JB</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white text-sm font-medium">James Bond</span>
|
||||
<span class="text-gray-500 text-xs">007@mi6.gov.uk</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
Variant A
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-gray-300 text-sm">
|
||||
<span class="material-symbols-outlined text-purple-400 icon-sm">person_add</span>
|
||||
Referral
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-400 font-mono">
|
||||
2023.10.21 <span class="text-gray-600 mx-1">|</span> 18:30
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500/10 text-red-400 border border-red-500/20">
|
||||
<span class="size-1.5 rounded-full bg-red-400"></span> 스팸
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-500 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-6 py-4 bg-surface-dark border-t border-border-dark flex items-center justify-between">
|
||||
<div class="text-xs text-gray-400">
|
||||
124개 결과 중 1-6 표시
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
|
||||
<span class="material-symbols-outlined icon-sm">chevron_left</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg bg-primary text-white text-sm font-medium shadow-md shadow-primary/20">
|
||||
1
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
2
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
3
|
||||
</button>
|
||||
<span class="text-gray-500 text-xs px-1">...</span>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
8
|
||||
</button>
|
||||
<button class="flex items-center justify-center size-8 rounded-lg border border-border-dark bg-[#111318] text-gray-400 hover:text-white hover:border-gray-500 transition-colors">
|
||||
<span class="material-symbols-outlined icon-sm">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
images/leads_analytics_logs_2/screen.png
Normal file
BIN
images/leads_analytics_logs_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
207
images/public_landing_page_mobile_view/code.html
Normal file
207
images/public_landing_page_mobile_view/code.html
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Public Landing Page Mobile View - Variant A</title>
|
||||
<!-- Google Fonts: Inter -->
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
||||
<!-- Tailwind CSS with Plugins -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<!-- Tailwind Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#101622",
|
||||
"mobile-bg": "#1c1f27", // Slightly lighter for the mobile container
|
||||
"desktop-bg": "#0f0f11", // Deep dark for desktop bg
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
boxShadow: {
|
||||
'device': '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Custom scrollbar for the mobile container to keep it sleek */
|
||||
.mobile-scroll::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.mobile-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.mobile-scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-desktop-bg font-display min-h-screen flex items-center justify-center p-4 overflow-hidden">
|
||||
<!-- Desktop Wrapper simulating the environment -->
|
||||
<div class="relative w-full h-full flex flex-col items-center justify-center">
|
||||
<!-- Background decorative elements for the 'Desktop' view -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px] opacity-30"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-purple-900/10 rounded-full blur-[120px] opacity-30"></div>
|
||||
</div>
|
||||
<!-- Mobile Device Simulation Container -->
|
||||
<div class="relative w-full max-w-[420px] h-[85vh] bg-background-light dark:bg-mobile-bg rounded-2xl shadow-device overflow-hidden flex flex-col border border-neutral-200 dark:border-neutral-800">
|
||||
<!-- Mobile Status Bar Simulation (Cosmetic) -->
|
||||
<div class="h-8 w-full bg-background-light dark:bg-mobile-bg flex items-center justify-between px-6 shrink-0 z-20">
|
||||
<span class="text-xs font-semibold text-neutral-900 dark:text-white">9:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<span class="material-symbols-outlined text-[16px] text-neutral-900 dark:text-white">signal_cellular_alt</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-neutral-900 dark:text-white">wifi</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-neutral-900 dark:text-white">battery_full</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scrollable Content Area -->
|
||||
<div class="mobile-scroll flex-1 overflow-y-auto pb-24 relative">
|
||||
<!-- Hero Section (GIF Placeholder) -->
|
||||
<div class="w-full h-64 bg-neutral-800 relative overflow-hidden group">
|
||||
<!-- Loading Skeleton -->
|
||||
<div class="absolute inset-0 bg-neutral-800 animate-pulse z-0"></div>
|
||||
<!-- Image -->
|
||||
<div class="absolute inset-0 bg-cover bg-center z-10" data-alt="Abstract dark blue and purple digital waves flowing smoothly" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB5wevfRjjZoTDfk00aTMwnULNr7PdLv6cEkFL95TKdN5-8Zru3FPWHspOobe9lMpsiP7L7f_U1eyXqgyMuY8SArhLa9UhJgKl1IeOQWg2l4LpV5Ta8eiPIfAGGva4WbacutKsVSvVEYGpwCZ92DWWREgc-lNpG5I084xuwHRmypwN_j1L1OqQbb1OBBMS2BdQO3U7H75KnzUjks422kejYHtsFaQu1AuEMgGb5wfI9wIzCvBSUtv7cMK_V6i0JagrBj2E_DPrKZ3Bk');">
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-background-light dark:from-mobile-bg to-transparent z-20"></div>
|
||||
</div>
|
||||
<!-- Content Body -->
|
||||
<div class="px-6 -mt-8 relative z-30 flex flex-col gap-8">
|
||||
<!-- Headline & Intro -->
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center gap-1 bg-primary/10 border border-primary/20 rounded-full px-3 py-1 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
||||
<span class="text-xs font-medium text-primary uppercase tracking-wider">New Version 2.0</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-black text-neutral-900 dark:text-white leading-tight mb-3">
|
||||
Accelerate Your Workflow 10x
|
||||
</h1>
|
||||
<p class="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
|
||||
Join thousands of designers shipping faster. No credit card required. Start your A/B testing journey today with our automated tools.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Features Grid -->
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<!-- Feature 1 -->
|
||||
<div class="flex items-start gap-4 p-4 rounded-lg bg-white dark:bg-[#252932] border border-neutral-100 dark:border-[#3b4354]">
|
||||
<div class="p-2 rounded-lg bg-primary/10 text-primary shrink-0">
|
||||
<span class="material-symbols-outlined">bolt</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-neutral-900 dark:text-white text-sm mb-1">Lightning Fast</h3>
|
||||
<p class="text-xs text-neutral-500 dark:text-[#9da6b9]">Optimized for speed with edge caching worldwide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Feature 2 -->
|
||||
<div class="flex items-start gap-4 p-4 rounded-lg bg-white dark:bg-[#252932] border border-neutral-100 dark:border-[#3b4354]">
|
||||
<div class="p-2 rounded-lg bg-primary/10 text-primary shrink-0">
|
||||
<span class="material-symbols-outlined">security</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-neutral-900 dark:text-white text-sm mb-1">Secure by Design</h3>
|
||||
<p class="text-xs text-neutral-500 dark:text-[#9da6b9]">Enterprise-grade security and SOC2 compliance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Feature 3 -->
|
||||
<div class="flex items-start gap-4 p-4 rounded-lg bg-white dark:bg-[#252932] border border-neutral-100 dark:border-[#3b4354]">
|
||||
<div class="p-2 rounded-lg bg-primary/10 text-primary shrink-0">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-neutral-900 dark:text-white text-sm mb-1">Analytics First</h3>
|
||||
<p class="text-xs text-neutral-500 dark:text-[#9da6b9]">Deep insights included in every plan tier.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Social Proof / Trust -->
|
||||
<div class="py-4 border-t border-neutral-200 dark:border-[#3b4354]">
|
||||
<p class="text-center text-xs text-neutral-400 dark:text-neutral-500 mb-4 uppercase tracking-widest font-semibold">Trusted by leading teams</p>
|
||||
<div class="flex justify-between items-center opacity-50 grayscale gap-2">
|
||||
<!-- Logos simulated with text for simplicity/reliability -->
|
||||
<span class="text-sm font-bold text-neutral-800 dark:text-white">ACME</span>
|
||||
<span class="text-sm font-bold text-neutral-800 dark:text-white">Globex</span>
|
||||
<span class="text-sm font-bold text-neutral-800 dark:text-white">Soylent</span>
|
||||
<span class="text-sm font-bold text-neutral-800 dark:text-white">Umbrella</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-8"></div> <!-- Spacer for scrolling past FAB -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Bottom Bar -->
|
||||
<div class="absolute bottom-0 left-0 w-full bg-background-light/80 dark:bg-mobile-bg/80 backdrop-blur-md border-t border-neutral-200 dark:border-[#3b4354] p-4 z-40">
|
||||
<button class="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white font-bold py-3.5 px-6 rounded-lg shadow-lg shadow-primary/25 transition-all active:scale-[0.98]">
|
||||
<span>Apply Now</span>
|
||||
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal Overlay (Simulated 'Open' State for demonstration) -->
|
||||
<!-- Using a checkbox hack or target to simulate open state isn't allowed (no JS), so we will render it as if the user clicked.
|
||||
Since the prompt asks for "When clicked... modal appears", I will design it as an overlay that is visually hidden by default
|
||||
but I'll make it partially visible or explainable.
|
||||
Actually, usually for these tasks, showing the "interacted" state is better if it's the focus,
|
||||
but keeping the landing page clean is requested.
|
||||
|
||||
However, to show I fulfilled the "Form modal appears" requirement in a static mockup,
|
||||
I will place the modal HTML here but commented out or hidden,
|
||||
OR better yet, I will render it as a "slide up" drawer at the very bottom, partially peeking or fully open?
|
||||
|
||||
Let's render it fully open on top to showcase the UI design of the modal as requested.
|
||||
Wait, the prompt says "Description of screen: Public Mobile Landing Page".
|
||||
It implies the main view. I will include the modal HTML but hide it with `hidden` class
|
||||
so the code is there, but visually I will show the landing page.
|
||||
|
||||
Actually, to make the design impressive, I'll add a peer-checked hack purely in CSS to show it,
|
||||
or just display the landing page cleanly.
|
||||
|
||||
Let's stick to the clean landing page view as the primary deliverable,
|
||||
but I will render the Modal as a layer that is *just* about to animate in, or
|
||||
actually, I will create a separate "view" inside the code that can be toggled if I could use JS.
|
||||
|
||||
Decision: I will render the modal but set it to `display: none` in the style attribute for now,
|
||||
so the code is valid and ready for a developer to toggle.
|
||||
-->
|
||||
<!-- Sleek Form Modal (Hidden by default in this static view, developer would toggle 'hidden') -->
|
||||
<div class="hidden absolute inset-0 z-50 flex flex-col justify-end bg-black/60 backdrop-blur-sm" id="lead-modal">
|
||||
<div class="bg-background-light dark:bg-[#1c1f27] w-full rounded-t-2xl p-6 shadow-2xl animate-in slide-in-from-bottom duration-300">
|
||||
<div class="w-12 h-1 bg-neutral-300 dark:bg-neutral-600 rounded-full mx-auto mb-6"></div>
|
||||
<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-2">Get Early Access</h2>
|
||||
<p class="text-sm text-neutral-500 dark:text-gray-400 mb-6">Join the waitlist and get 20% off your first month.</p>
|
||||
<form class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-neutral-500 dark:text-gray-400 mb-1.5 uppercase tracking-wider">Work Email</label>
|
||||
<input class="w-full bg-white dark:bg-[#111318] border border-neutral-200 dark:border-[#3b4354] rounded-lg px-4 py-3 text-neutral-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-gray-500" placeholder="name@company.com" type="email"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-neutral-500 dark:text-gray-400 mb-1.5 uppercase tracking-wider">Company Name</label>
|
||||
<input class="w-full bg-white dark:bg-[#111318] border border-neutral-200 dark:border-[#3b4354] rounded-lg px-4 py-3 text-neutral-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-gray-500" placeholder="Acme Inc." type="text"/>
|
||||
</div>
|
||||
<button class="mt-4 w-full bg-primary hover:bg-primary/90 text-white font-bold py-3.5 px-6 rounded-lg shadow-lg shadow-primary/25 transition-all" type="button">
|
||||
Get Access
|
||||
</button>
|
||||
<p class="text-center text-xs text-neutral-400 dark:text-gray-500 mt-2">No spam, unsubscribe anytime.</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Desktop Context Label (Outside Device) -->
|
||||
<div class="absolute bottom-8 text-center">
|
||||
<p class="text-neutral-400 text-sm font-medium tracking-wide">Variant A: Mobile View</p>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
images/public_landing_page_mobile_view/screen.png
Normal file
BIN
images/public_landing_page_mobile_view/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
262
images/traffic_rule_builder_1/code.html
Normal file
262
images/traffic_rule_builder_1/code.html
Normal file
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Traffic Rule Builder</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&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"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#101622",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/* Custom scrollbar for dark mode feeling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #101622;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #282e39;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #374151;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark min-h-screen flex flex-col overflow-x-hidden text-gray-900 dark:text-white">
|
||||
<!-- Top Navigation -->
|
||||
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-gray-200 dark:border-b-[#282e39] bg-white dark:bg-[#111318] px-10 py-3 sticky top-0 z-50">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-8 text-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-3xl">traffic</span>
|
||||
</div>
|
||||
<h2 class="text-gray-900 dark:text-white text-lg font-bold leading-tight tracking-[-0.015em]">TrafficRules</h2>
|
||||
</div>
|
||||
<div class="flex flex-1 justify-end gap-8">
|
||||
<nav class="hidden md:flex items-center gap-9">
|
||||
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white text-sm font-medium leading-normal transition-colors" href="#">Dashboard</a>
|
||||
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white text-sm font-medium leading-normal transition-colors" href="#">Campaigns</a>
|
||||
<a class="text-primary dark:text-white text-sm font-medium leading-normal transition-colors" href="#">Rules</a>
|
||||
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white text-sm font-medium leading-normal transition-colors" href="#">Analytics</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center justify-center text-gray-500 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 border-2 border-transparent hover:border-primary cursor-pointer transition-all" data-alt="User profile avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBAHAzWf0wnWPSxuClhObjoEgNzMN52e2NypZAc2tCnO5egnpE_8Qy02QZ6C5KuJLR7x6sH0dq1IMgCuY8wVcbplkFyVXrVqUGpQinj2UbmD_3wogWT_WtKHasVyLhDInif4OCZhDexNoxUKTp9xHzWoLUX1GtHC2O_DQo2jtV62z3-5B-PwyVdn7RAQGLsns3YR7tfbw9Ri2c0yRWdDRdObEEsMSjQ2Gd_yKDLTln9IYCHeuyENTiN_FZovVrkl8pS1leAEJFu8LR2");'></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col items-center py-8 px-4 md:px-10">
|
||||
<div class="w-full max-w-[1024px] flex flex-col gap-8">
|
||||
<!-- Page Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h1 class="text-3xl md:text-4xl font-black tracking-tight text-gray-900 dark:text-white">Traffic Routing Rules</h1>
|
||||
<p class="text-gray-500 dark:text-[#9da6b9] text-base font-normal max-w-2xl">
|
||||
Define and prioritize how incoming traffic is distributed to your landing page variants.
|
||||
Rules are processed from top to bottom.
|
||||
</p>
|
||||
</div>
|
||||
<button class="flex shrink-0 items-center justify-center gap-2 rounded-lg bg-primary hover:bg-blue-600 text-white px-5 py-2.5 text-sm font-bold shadow-lg shadow-primary/20 transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
<span>Add New Rule</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Rules List Container -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Header for List -->
|
||||
<div class="grid grid-cols-12 gap-4 px-4 pb-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-[#64748b] pl-16">
|
||||
<div class="col-span-12 md:col-span-5">Conditions</div>
|
||||
<div class="col-span-6 md:col-span-4">Target Variant</div>
|
||||
<div class="col-span-6 md:col-span-3 text-right">Status & Actions</div>
|
||||
</div>
|
||||
<!-- Rule Card 1 (Active) -->
|
||||
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-white dark:bg-[#1e232e] border border-gray-200 dark:border-[#282e39] rounded-xl p-4 shadow-sm hover:shadow-md hover:border-primary/50 transition-all duration-200">
|
||||
<!-- Drag Handle & Priority -->
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-gray-50 dark:bg-[#161b22] rounded-l-xl cursor-grab active:cursor-grabbing">
|
||||
<span class="text-xs font-bold text-gray-400 mb-1">#1</span>
|
||||
<span class="material-symbols-outlined text-gray-400 hover:text-white">drag_indicator</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">High Value Traffic</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400 border border-blue-100 dark:border-blue-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">public</span> Source: Facebook Ads
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400 border border-purple-100 dark:border-purple-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">smartphone</span> Device: Mobile
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-3">
|
||||
<div class="hidden md:block text-gray-400">
|
||||
<span class="material-symbols-outlined">arrow_right_alt</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-8 rounded bg-primary/20 text-primary flex items-center justify-center font-bold text-sm">B</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">Variant B</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Viral Campaign V2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 dark:peer-focus:ring-primary/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
||||
</label>
|
||||
<button class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rule Card 2 (Active) -->
|
||||
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-white dark:bg-[#1e232e] border border-gray-200 dark:border-[#282e39] rounded-xl p-4 shadow-sm hover:shadow-md hover:border-primary/50 transition-all duration-200">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-gray-50 dark:bg-[#161b22] rounded-l-xl cursor-grab active:cursor-grabbing">
|
||||
<span class="text-xs font-bold text-gray-400 mb-1">#2</span>
|
||||
<span class="material-symbols-outlined text-gray-400 hover:text-white">drag_indicator</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">Business Hours B2B</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-orange-50 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400 border border-orange-100 dark:border-orange-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">schedule</span> 09:00 - 18:00
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">calendar_today</span> Weekdays
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-3">
|
||||
<div class="hidden md:block text-gray-400">
|
||||
<span class="material-symbols-outlined">arrow_right_alt</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-8 rounded bg-primary/20 text-primary flex items-center justify-center font-bold text-sm">C</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">Variant C</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Enterprise Focus</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 dark:peer-focus:ring-primary/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
||||
</label>
|
||||
<button class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rule Card 3 (Inactive) -->
|
||||
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-gray-50 dark:bg-[#161b22] border border-gray-200 dark:border-[#282e39] rounded-xl p-4 opacity-75 hover:opacity-100 transition-all duration-200">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-transparent rounded-l-xl cursor-grab active:cursor-grabbing">
|
||||
<span class="text-xs font-bold text-gray-500 mb-1">#3</span>
|
||||
<span class="material-symbols-outlined text-gray-600">drag_indicator</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-400">Weekend Special</span>
|
||||
<span class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300 uppercase">Inactive</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 border border-gray-200 dark:border-gray-700">
|
||||
<span class="material-symbols-outlined text-[14px]">calendar_month</span> Weekend
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-3">
|
||||
<div class="hidden md:block text-gray-600">
|
||||
<span class="material-symbols-outlined">arrow_right_alt</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 opacity-60 grayscale">
|
||||
<div class="size-8 rounded bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-300 flex items-center justify-center font-bold text-sm">B</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-700 dark:text-gray-300">Variant B</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">Viral Campaign V2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 dark:peer-focus:ring-primary/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
||||
</label>
|
||||
<button class="text-gray-500 hover:text-white p-1 rounded hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fallback Rule (Locked) -->
|
||||
<div class="relative mt-2 flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-gray-50/50 dark:bg-[#111318]/50 border border-dashed border-gray-300 dark:border-[#282e39] rounded-xl p-4">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-transparent">
|
||||
<span class="material-symbols-outlined text-gray-400 dark:text-gray-600">lock</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-sm font-semibold text-gray-500 dark:text-gray-400 italic">Default Fallback</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 dark:text-gray-500">
|
||||
Applied when no other rules match
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-3">
|
||||
<div class="hidden md:block text-gray-600">
|
||||
<span class="material-symbols-outlined">arrow_right_alt</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-8 rounded bg-gray-200 dark:bg-[#282e39] text-gray-500 dark:text-gray-300 flex items-center justify-center font-bold text-sm">A</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-600 dark:text-gray-300">Variant A</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">Original / Control</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4 opacity-50 pointer-events-none">
|
||||
<div class="text-xs font-medium text-gray-400">Always Active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Save Bar (Hidden by default, shown for concept) -->
|
||||
<div class="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-40">
|
||||
<div class="flex items-center gap-4 bg-[#1e232e] border border-[#282e39] rounded-full shadow-2xl px-6 py-3 animate-bounce-in">
|
||||
<span class="text-sm text-gray-300 font-medium">You have unsaved changes</span>
|
||||
<div class="h-4 w-px bg-gray-600"></div>
|
||||
<button class="text-sm text-gray-400 hover:text-white transition-colors">Reset</button>
|
||||
<button class="text-sm bg-primary hover:bg-blue-600 text-white px-4 py-1.5 rounded-full font-bold transition-colors shadow-lg shadow-primary/25">Save Order</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
images/traffic_rule_builder_1/screen.png
Normal file
BIN
images/traffic_rule_builder_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
279
images/traffic_rule_builder_2/code.html
Normal file
279
images/traffic_rule_builder_2/code.html
Normal file
@@ -0,0 +1,279 @@
|
||||
<!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>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&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 id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#135bec",
|
||||
"background-light": "#f6f6f8",
|
||||
"background-dark": "#0a0f18",
|
||||
"sidebar-dark": "#111318",
|
||||
"card-dark": "#1e232e"
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0a0f18;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #282e39;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #374151;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark min-h-screen flex text-gray-900 dark:text-white overflow-hidden">
|
||||
<aside class="w-64 flex-shrink-0 bg-white dark:bg-sidebar-dark border-r border-gray-200 dark:border-[#282e39] hidden md:flex flex-col h-screen sticky top-0">
|
||||
<div class="p-6 flex items-center gap-3">
|
||||
<div class="size-8 text-primary flex items-center justify-center bg-primary/10 rounded-lg">
|
||||
<span class="material-symbols-outlined text-2xl">traffic</span>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold tracking-tight">TrafficRules</h1>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">web</span>
|
||||
<span class="font-medium text-sm">랜딩 페이지</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">bar_chart</span>
|
||||
<span class="font-medium text-sm">통계 및 분석</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 bg-primary/10 text-primary rounded-lg transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">rule</span>
|
||||
<span class="font-medium text-sm">라우팅 규칙</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">group</span>
|
||||
<span class="font-medium text-sm">리드 관리</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-gray-200 dark:border-[#282e39]">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">settings</span>
|
||||
<span class="font-medium text-sm">설정</span>
|
||||
</a>
|
||||
<div class="mt-4 flex items-center gap-3 px-3 py-2">
|
||||
<div class="size-8 rounded-full bg-cover bg-center border border-gray-200 dark:border-gray-700" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDY3-B2CEYbpeGjCh25jHS9zMbVYIHA_hev8C4G9rI32sb_q2Tul9d7Ko7Ut18mp17nHr45WAG8r1oIj8UkD5YyIwUOgH2lQJmRaX0WZGCMX001QNge0gUpNUjjGVWFjcXlQwy2f4MVGEHPj7eoHcFFcpAX2AZu-Cpn07LQKXixkLVasw70K8BVeYL-Q87_O6bU4c-SQpNmdmSqocR1S8_wWyPiiCW1OYp1KBBM0QlpFUbubiLMi44LqKCtmcpXbL3mbWSHyhXjW8TB");'></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs font-bold truncate">운영자 계정</p>
|
||||
<p class="text-[10px] text-gray-500 truncate">admin@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="flex-1 flex flex-col h-screen overflow-y-auto">
|
||||
<header class="flex items-center justify-between px-8 py-4 bg-white/50 dark:bg-background-dark/50 backdrop-blur-md sticky top-0 z-30">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>설정</span>
|
||||
<span class="material-symbols-outlined text-xs">chevron_right</span>
|
||||
<span class="text-gray-900 dark:text-white font-medium">트래픽 라우팅 규칙</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-gray-500 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 py-8 px-8">
|
||||
<div class="max-w-5xl mx-auto flex flex-col gap-8">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h1 class="text-3xl font-black tracking-tight text-gray-900 dark:text-white">트래픽 라우팅 규칙</h1>
|
||||
<p class="text-gray-500 dark:text-[#9da6b9] text-base font-normal max-w-2xl">
|
||||
유입되는 트래픽이 각 랜딩 페이지 버전으로 배분되는 우선순위와 규칙을 정의합니다.
|
||||
규칙은 상단에서 하단 순서로 처리됩니다.
|
||||
</p>
|
||||
</div>
|
||||
<button class="flex shrink-0 items-center justify-center gap-2 rounded-lg bg-primary hover:bg-blue-600 text-white px-5 py-2.5 text-sm font-bold shadow-lg shadow-primary/20 transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
<span>새 규칙 추가</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="grid grid-cols-12 gap-4 px-4 pb-2 text-[11px] font-bold uppercase tracking-widest text-gray-400 dark:text-[#64748b] pl-16">
|
||||
<div class="col-span-12 md:col-span-5">조건 (Conditions)</div>
|
||||
<div class="col-span-6 md:col-span-4">대상 페이지 (Target Variant)</div>
|
||||
<div class="col-span-6 md:col-span-3 text-right">상태 및 작업</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-white dark:bg-card-dark border border-gray-200 dark:border-[#282e39] rounded-xl p-4 shadow-sm hover:shadow-md hover:border-primary/50 transition-all">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-gray-50 dark:bg-[#161b22] rounded-l-xl cursor-grab active:cursor-grabbing">
|
||||
<span class="text-xs font-bold text-gray-400 mb-1">1</span>
|
||||
<span class="material-symbols-outlined text-gray-400 group-hover:text-primary">drag_indicator</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">고가치 트래픽 유입</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400 border border-blue-100 dark:border-blue-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">public</span> 유입 경로: Facebook Ads
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400 border border-purple-100 dark:border-purple-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">smartphone</span> 기기: 모바일
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-lg bg-primary/20 text-primary flex items-center justify-center font-black text-sm">B</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">페이지 B</span>
|
||||
<span class="text-[11px] text-gray-500 dark:text-gray-400">바이럴 캠페인 V2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="w-10 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
||||
</label>
|
||||
<button class="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-white dark:bg-card-dark border border-gray-200 dark:border-[#282e39] rounded-xl p-4 shadow-sm hover:shadow-md hover:border-primary/50 transition-all">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-gray-50 dark:bg-[#161b22] rounded-l-xl cursor-grab active:cursor-grabbing">
|
||||
<span class="text-xs font-bold text-gray-400 mb-1">2</span>
|
||||
<span class="material-symbols-outlined text-gray-400 group-hover:text-primary">drag_indicator</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">영업 시간 B2B 대응</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-orange-50 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400 border border-orange-100 dark:border-orange-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">schedule</span> 09:00 - 18:00
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">calendar_today</span> 평일
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-lg bg-primary/20 text-primary flex items-center justify-center font-black text-sm">C</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">페이지 C</span>
|
||||
<span class="text-[11px] text-gray-500 dark:text-gray-400">엔터프라이즈 전용</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="w-10 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
||||
</label>
|
||||
<button class="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-gray-50/50 dark:bg-[#161b22] border border-gray-200 dark:border-[#282e39] rounded-xl p-4 opacity-70 hover:opacity-100 transition-all">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-transparent rounded-l-xl cursor-grab active:cursor-grabbing">
|
||||
<span class="text-xs font-bold text-gray-500 mb-1">3</span>
|
||||
<span class="material-symbols-outlined text-gray-500">drag_indicator</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-gray-700 dark:text-gray-400">주말 특별 프로모션</span>
|
||||
<span class="px-1.5 py-0.5 rounded text-[9px] font-black bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400 uppercase">비활성화</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-500 border border-gray-200 dark:border-gray-700">
|
||||
<span class="material-symbols-outlined text-[14px]">calendar_month</span> 주말
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4 opacity-50 grayscale">
|
||||
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 flex items-center justify-center font-black text-sm">B</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-700 dark:text-gray-400">페이지 B</span>
|
||||
<span class="text-[11px] text-gray-500 dark:text-gray-500">바이럴 캠페인 V2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="w-10 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
||||
</label>
|
||||
<button class="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-2 flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-gray-100/30 dark:bg-sidebar-dark/50 border border-dashed border-gray-300 dark:border-[#282e39] rounded-xl p-4">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-transparent">
|
||||
<span class="material-symbols-outlined text-gray-400 dark:text-gray-600">lock</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-gray-400 dark:text-gray-500 italic">기본 대체 규칙 (Fallback)</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-gray-400 dark:text-gray-500">
|
||||
매칭되는 상위 규칙이 없을 때 적용됩니다.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-9 rounded-lg bg-gray-200 dark:bg-[#282e39] text-gray-500 dark:text-gray-400 flex items-center justify-center font-black text-sm">A</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-600 dark:text-gray-400">페이지 A</span>
|
||||
<span class="text-[11px] text-gray-400 dark:text-gray-500">오리지널 / 대조군</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4 opacity-50">
|
||||
<div class="text-[11px] font-bold text-gray-400 dark:text-gray-600 uppercase">항상 활성</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="fixed bottom-8 left-1/2 md:left-[calc(50%+128px)] transform -translate-x-1/2 z-50">
|
||||
<div class="flex items-center gap-6 bg-white dark:bg-card-dark border border-gray-200 dark:border-[#282e39] rounded-full shadow-2xl px-6 py-3.5 ring-1 ring-black/5 dark:ring-white/5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-[20px]">info</span>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300 font-bold whitespace-nowrap">저장되지 않은 변경사항이 있습니다.</span>
|
||||
</div>
|
||||
<div class="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white font-bold transition-colors">초기화</button>
|
||||
<button class="text-sm bg-primary hover:bg-blue-600 text-white px-5 py-2 rounded-full font-black transition-colors shadow-lg shadow-primary/25">순서 저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
images/traffic_rule_builder_2/screen.png
Normal file
BIN
images/traffic_rule_builder_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
403
images/variant_builder_editor_1/code.html
Normal file
403
images/variant_builder_editor_1/code.html
Normal file
@@ -0,0 +1,403 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Variant Builder Editor</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"/>
|
||||
<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>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/* Custom scrollbar for dark mode panels */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for mobile preview frame content but allow scroll */
|
||||
.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">
|
||||
<!-- Top Navigation -->
|
||||
<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">view_quilt</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-white text-base font-bold leading-tight tracking-[-0.015em]">Variant Builder</h2>
|
||||
<div class="flex items-center gap-2 text-xs text-slate-400 mt-0.5">
|
||||
<span>Campaigns</span>
|
||||
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
||||
<span>Summer Sale 2024</span>
|
||||
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
||||
<span class="text-white">Variant A</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- View Toggles -->
|
||||
<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>Preview</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>Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="size-9 rounded-full bg-slate-700 bg-cover bg-center ml-2 border border-slate-600" data-alt="User profile picture" 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 Workspace -->
|
||||
<main class="flex flex-1 overflow-hidden h-full">
|
||||
<!-- Left Panel: Structure -->
|
||||
<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">Page Structure</h3>
|
||||
<button class="text-primary hover:text-primary/80 text-xs font-medium flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">add</span>
|
||||
Add Section
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3 custom-scrollbar">
|
||||
<!-- Section Item: Header (Active) -->
|
||||
<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">Header Banner</p>
|
||||
<p class="text-xs text-slate-500 truncate">Image + Logo</p>
|
||||
</div>
|
||||
<div class="opacity-100 group-hover:opacity-100 transition-opacity">
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section Item: Text Block -->
|
||||
<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">Value Proposition</p>
|
||||
<p class="text-xs text-slate-500 truncate">H1 + Subtext</p>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section Item: GIF -->
|
||||
<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">Product Demo</p>
|
||||
<p class="text-xs text-slate-500 truncate">Looping GIF</p>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section Item: Features -->
|
||||
<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]">list</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-slate-300 truncate">Key Benefits</p>
|
||||
<p class="text-xs text-slate-500 truncate">Bullet points</p>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section Item: CTA -->
|
||||
<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">Sticky CTA</p>
|
||||
<p class="text-xs text-slate-500 truncate">Bottom fixed</p>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
Add New Section
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Center Panel: Canvas -->
|
||||
<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" data-alt="Dot pattern background" 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">
|
||||
<!-- Mobile Frame -->
|
||||
<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">
|
||||
<!-- Status Bar Sim -->
|
||||
<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>
|
||||
<!-- Preview Content -->
|
||||
<div class="flex-1 bg-white overflow-y-auto no-scrollbar relative w-full">
|
||||
<!-- Header Banner (Selected) -->
|
||||
<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 uppercase tracking-wide shadow-sm">Editing</div>
|
||||
<div class="relative h-48 w-full bg-slate-900 overflow-hidden">
|
||||
<img alt="Abstract modern startup office background" class="w-full h-full object-cover opacity-80" data-alt="Abstract modern startup office background" 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">Scale your SaaS like never before.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Value Prop -->
|
||||
<div class="p-6 bg-white">
|
||||
<h2 class="text-slate-900 text-xl font-bold mb-3">All-in-one platform for growth</h2>
|
||||
<p class="text-slate-600 text-base leading-relaxed">Stop juggling multiple tools. Get analytics, CRM, and marketing automation in a single dashboard.</p>
|
||||
</div>
|
||||
<!-- GIF Placeholder -->
|
||||
<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">Product Demo GIF</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Features -->
|
||||
<div class="p-6 bg-slate-50">
|
||||
<div class="flex gap-4 mb-4">
|
||||
<div class="size-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 shrink-0">
|
||||
<span class="material-symbols-outlined text-[20px]">rocket_launch</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900 mb-1">Fast Integration</h3>
|
||||
<p class="text-sm text-slate-600">Connect with your stack in minutes, not days.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="size-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<span class="material-symbols-outlined text-[20px]">security</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900 mb-1">Enterprise Security</h3>
|
||||
<p class="text-sm text-slate-600">SOC2 Type II certified data protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spacer for scrolling -->
|
||||
<div class="h-20"></div>
|
||||
</div>
|
||||
<!-- Sticky CTA -->
|
||||
<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">Get Started Free</button>
|
||||
</div>
|
||||
<!-- Home Indicator -->
|
||||
<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>
|
||||
Live Preview • iPhone 14 Pro
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Right Panel: Properties -->
|
||||
<aside class="w-[360px] bg-[#111318] border-l border-border-dark flex flex-col shrink-0 z-10">
|
||||
<!-- Properties Header -->
|
||||
<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">Edit: Header Banner</h3>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Configure layout and content</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="Reset to default">
|
||||
<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="Delete section">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<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">Content</button>
|
||||
<button class="flex-1 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-surface-dark transition-colors">Style</button>
|
||||
<button class="flex-1 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-surface-dark transition-colors">Settings</button>
|
||||
</div>
|
||||
<!-- Scrollable Form Area -->
|
||||
<div class="flex-1 overflow-y-auto p-5 custom-scrollbar">
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Image Upload -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Background Image</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" data-alt="Current background preview" 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">Click to replace</p>
|
||||
<p class="text-xs text-slate-500 mt-1">Supports JPG, PNG, WEBP (Max 2MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input Group -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Heading Text</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">Scale your SaaS like never before.</textarea>
|
||||
</div>
|
||||
<!-- Input Group -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Company Name</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>
|
||||
<!-- Toggle Switch -->
|
||||
<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">Show Logo Icon</span>
|
||||
<span class="text-xs text-slate-500">Display icon next to name</span>
|
||||
</div>
|
||||
<button class="w-11 h-6 bg-primary rounded-full relative transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#111318] focus:ring-primary">
|
||||
<span class="absolute left-6 top-1 bg-white size-4 rounded-full transition-transform"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Slider -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Overlay Opacity</label>
|
||||
<span class="text-xs font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">80%</span>
|
||||
</div>
|
||||
<input class="w-full h-1.5 bg-border-dark rounded-lg appearance-none cursor-pointer accent-primary" max="100" min="0" type="range" value="80"/>
|
||||
</div>
|
||||
<!-- Alignment -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Text Alignment</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>
|
||||
<!-- Properties Footer -->
|
||||
<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">
|
||||
Apply Changes
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
images/variant_builder_editor_1/screen.png
Normal file
BIN
images/variant_builder_editor_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
202
images/variant_builder_editor_10/code.html
Normal file
202
images/variant_builder_editor_10/code.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!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;
|
||||
}
|
||||
.sidebar-item-active {
|
||||
@apply bg-primary/10 text-primary border-r-2 border-primary;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-dark text-white flex h-screen overflow-hidden">
|
||||
<aside class="w-64 flex flex-col border-r border-border-dark bg-surface-dark shrink-0">
|
||||
<div class="p-6 border-b border-border-dark flex items-center gap-3">
|
||||
<div class="size-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-xl">rocket_launch</span>
|
||||
</div>
|
||||
<span class="font-bold text-lg tracking-tight">SaaS Builder</span>
|
||||
</div>
|
||||
<nav class="flex-1 py-6 flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 px-6 py-3 text-sm font-medium transition-colors sidebar-item-active" href="#">
|
||||
<span class="material-symbols-outlined">public</span>
|
||||
랜딩 페이지
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-6 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">bar_chart</span>
|
||||
통계 및 분석
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-6 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
리드 관리
|
||||
</a>
|
||||
<div class="mt-auto">
|
||||
<a class="flex items-center gap-3 px-6 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
설정
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-border-dark">
|
||||
<div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer transition-colors">
|
||||
<div class="size-8 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold text-white">JD</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-semibold">John Doe</span>
|
||||
<span class="text-[10px] text-slate-500">Pro Plan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<header class="flex items-center justify-between border-b border-border-dark bg-surface-dark px-8 py-4 shrink-0 z-10">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="text-slate-400 hover:text-white transition-colors flex items-center" href="#">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</a>
|
||||
<div class="h-6 w-px bg-border-dark mx-2"></div>
|
||||
<h2 class="text-lg font-bold tracking-tight">새 랜딩 페이지 생성</h2>
|
||||
</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 bg-background-dark py-10 px-8">
|
||||
<div class="max-w-4xl mx-auto space-y-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" id="script-settings">
|
||||
<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-4">
|
||||
<div class="p-4 rounded-xl bg-[#0b0d11] border border-border-dark">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2 block">Google Analytics (GA4) ID</label>
|
||||
<input class="w-full bg-surface-dark 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="G-XXXXXXXXXX" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex flex-col gap-6 bg-surface-dark p-8 rounded-2xl border border-border-dark opacity-50 grayscale select-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>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
images/variant_builder_editor_10/screen.png
Normal file
BIN
images/variant_builder_editor_10/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
318
images/variant_builder_editor_11/code.html
Normal file
318
images/variant_builder_editor_11/code.html
Normal file
@@ -0,0 +1,318 @@
|
||||
<!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&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&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": "#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"></head></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="<!-- 여기에 스크립트를 입력하세요 (e.g. <script>...</script>) -->" spellcheck="false"><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-XXXXXXXXXX');
|
||||
</script></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="<!-- 전환 추적 스크립트를 입력하세요 -->" spellcheck="false"><script>
|
||||
// Conversion event for purchase
|
||||
fbq('track', 'Purchase', {
|
||||
value: 29.00,
|
||||
currency: 'USD'
|
||||
});
|
||||
</script></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>
|
||||
BIN
images/variant_builder_editor_11/screen.png
Normal file
BIN
images/variant_builder_editor_11/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
318
images/variant_builder_editor_2/code.html
Normal file
318
images/variant_builder_editor_2/code.html
Normal file
@@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Variant Builder Editor</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>
|
||||
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;
|
||||
}.code-line {
|
||||
counter-increment: line;
|
||||
}
|
||||
.code-line::before {
|
||||
content: counter(line);
|
||||
display: inline-block;
|
||||
width: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
color: #475569;
|
||||
text-align: right;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</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">view_quilt</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-white text-base font-bold leading-tight tracking-[-0.015em]">Variant Builder</h2>
|
||||
<div class="flex items-center gap-2 text-xs text-slate-400 mt-0.5">
|
||||
<span>Campaigns</span>
|
||||
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
||||
<span>Summer Sale 2024</span>
|
||||
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
||||
<span class="text-white">Variant A</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>Preview</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>Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="size-9 rounded-full bg-slate-700 bg-cover bg-center ml-2 border border-slate-600" data-alt="User profile picture" 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-[380px] 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]">
|
||||
<div class="flex p-1 bg-surface-dark rounded-lg border border-border-dark">
|
||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 rounded-md bg-primary text-white text-xs font-semibold shadow-sm transition-all">
|
||||
<span class="material-symbols-outlined text-[16px]">view_agenda</span>
|
||||
Visual
|
||||
</button>
|
||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-slate-400 hover:text-white hover:bg-white/5 text-xs font-medium transition-all">
|
||||
<span class="material-symbols-outlined text-[16px]">code</span>
|
||||
HTML Code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<div class="p-4 border-b border-border-dark flex justify-between items-center bg-[#111318]">
|
||||
<h3 class="font-semibold text-sm text-white">Visual Blocks</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-slate-400 hover:text-white" title="Expand All">
|
||||
<span class="material-symbols-outlined text-[18px]">unfold_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3 custom-scrollbar">
|
||||
<div class="border-2 border-dashed border-border-dark rounded-lg p-6 flex flex-col items-center justify-center text-center hover:border-primary/50 hover:bg-surface-dark transition-all cursor-pointer group mb-2">
|
||||
<span class="material-symbols-outlined text-[24px] text-slate-500 group-hover:text-primary mb-2">cloud_upload</span>
|
||||
<p class="text-xs font-medium text-slate-300">Drop images to create sections</p>
|
||||
<p class="text-[10px] text-slate-500 mt-1">JPG, PNG, GIF up to 5MB</p>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-2 p-3 rounded-lg bg-surface-dark border border-primary shadow-[0_0_0_1px_rgba(19,91,236,1)] cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-slate-500 cursor-grab active:cursor-grabbing">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
<div class="h-10 w-16 bg-slate-800 rounded overflow-hidden relative">
|
||||
<img class="object-cover w-full h-full opacity-70" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARKX7eC65mz2IpuBwDVp_I5oS2RC62dOWT-WoIBq5cR6aap-2XMq4Y9ntPmPhycnDw1NszD32Wgwrec6t7qQmVHp1llkEWal5-zfta2pCL4SWfO5v0nYou7715kxFts5jf4O3TDJPkL1hFpSEWNypgSvYP2I-avJIA-hfssJxwf1RyrWDUwewJG14-ivVP91ECuBDyyMLkZA62gUX_fjTwO-W6cCrJmNITt2oWnzn9gAjAX7wxvWfjLfIirMNVNfwolEaHgXl-B_pI"/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-white truncate">Main_Hero_V1.jpg</p>
|
||||
<p class="text-xs text-slate-400">1200x800 • 145KB</p>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-2 p-3 rounded-lg bg-[#111318] border border-border-dark cursor-pointer hover:bg-surface-dark hover:border-slate-600 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<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="h-10 w-16 bg-slate-800 rounded overflow-hidden flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-600 text-[20px]">gif</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-slate-300 truncate">Demo_Walkthrough.gif</p>
|
||||
<p class="text-xs text-slate-500">800x600 • 2.1MB</p>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-2 p-3 rounded-lg bg-[#111318] border border-border-dark cursor-pointer hover:bg-surface-dark hover:border-slate-600 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<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="h-10 w-16 bg-slate-800 rounded overflow-hidden relative">
|
||||
<img class="object-cover w-full h-full opacity-70" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBceHj4fe7PQn5roym2DM9WOocCJB0BQxuKExR8ulwggZyARF0-GRXVdS9rV9qEiAfcjcjQ_jH3NIxoAy7IH8ISJ2z6ND6WbUrEwJySKSEN8L3LL8Lr42mnkATadICesv0h2nm5JMy22wnEXjyIs-F2NiXG56Hh6s3HELVhRK4nU-VsEoy8m-tWbh8FR1jndX6iCq6mxaPrd05yp6V5p2ZqEpTjciLxSUFDO4YG2KKXMvQPf2a_6nWrtv7b8FHU7FeM2sIpf3V7YmF"/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-slate-300 truncate">Social_Proof_Logos.png</p>
|
||||
<p class="text-xs text-slate-500">1200x200 • 45KB</p>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-white p-1 rounded hover:bg-slate-700 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" data-alt="Dot pattern background" 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 cursor-pointer">
|
||||
<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 uppercase tracking-wide shadow-sm">Active</div>
|
||||
<div class="relative h-auto w-full bg-slate-900 overflow-hidden">
|
||||
<img alt="Abstract modern startup office background" class="w-full h-auto object-cover" data-alt="Abstract modern startup office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARKX7eC65mz2IpuBwDVp_I5oS2RC62dOWT-WoIBq5cR6aap-2XMq4Y9ntPmPhycnDw1NszD32Wgwrec6t7qQmVHp1llkEWal5-zfta2pCL4SWfO5v0nYou7715kxFts5jf4O3TDJPkL1hFpSEWNypgSvYP2I-avJIA-hfssJxwf1RyrWDUwewJG14-ivVP91ECuBDyyMLkZA62gUX_fjTwO-W6cCrJmNITt2oWnzn9gAjAX7wxvWfjLfIirMNVNfwolEaHgXl-B_pI"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full aspect-video bg-slate-100 flex items-center justify-center text-slate-400 border-y border-slate-100 relative group hover:border-blue-300 transition-colors cursor-pointer">
|
||||
<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">Product Demo GIF</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-24 bg-slate-50 flex items-center justify-center border-b border-slate-100 group hover:bg-slate-100 cursor-pointer">
|
||||
<img alt="Logos" class="h-full w-full object-cover opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBceHj4fe7PQn5roym2DM9WOocCJB0BQxuKExR8ulwggZyARF0-GRXVdS9rV9qEiAfcjcjQ_jH3NIxoAy7IH8ISJ2z6ND6WbUrEwJySKSEN8L3LL8Lr42mnkATadICesv0h2nm5JMy22wnEXjyIs-F2NiXG56Hh6s3HELVhRK4nU-VsEoy8m-tWbh8FR1jndX6iCq6mxaPrd05yp6V5p2ZqEpTjciLxSUFDO4YG2KKXMvQPf2a_6nWrtv7b8FHU7FeM2sIpf3V7YmF"/>
|
||||
</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">Get Started Free</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>
|
||||
Live Preview • iPhone 14 Pro
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<aside class="w-[320px] 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">Global Settings</h3>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Page-wide configuration</p>
|
||||
</div>
|
||||
<button class="size-8 flex items-center justify-center text-slate-400 hover:text-white rounded hover:bg-surface-dark transition-colors" title="Reset defaults">
|
||||
<span class="material-symbols-outlined text-[18px]">settings_backup_restore</span>
|
||||
</button>
|
||||
</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">General</button>
|
||||
<button class="flex-1 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-surface-dark transition-colors">SEO & Meta</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">Internal Title</label>
|
||||
<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 transition-shadow placeholder-slate-600" type="text" value="Summer Sale Variant A"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">URL Slug</label>
|
||||
<div class="flex items-center">
|
||||
<span class="bg-[#1e293b] border border-r-0 border-border-dark text-slate-400 text-xs px-2 py-2.5 rounded-l-md">/lp/</span>
|
||||
<input class="w-full bg-[#0b0d11] border border-border-dark rounded-r-md text-sm text-white px-3 py-2 focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-shadow" type="text" value="summer-sale-a"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-px bg-border-dark w-full"></div>
|
||||
<h4 class="text-sm font-semibold text-white">Sticky CTA Button</h4>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Button Text</label>
|
||||
<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 transition-shadow" type="text" value="Get Started Free"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Button Color</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="h-10 w-full bg-[#0b0d11] border border-border-dark rounded-md flex items-center px-2 gap-2">
|
||||
<div class="size-6 rounded bg-blue-600 border border-white/10"></div>
|
||||
<span class="text-sm text-slate-300 font-mono">#2563EB</span>
|
||||
</div>
|
||||
<button class="size-10 bg-surface-dark border border-border-dark rounded-md flex items-center justify-center hover:bg-slate-700 text-white">
|
||||
<span class="material-symbols-outlined text-[18px]">colorize</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<button class="size-6 rounded-full bg-blue-600 border-2 border-white ring-2 ring-blue-600"></button>
|
||||
<button class="size-6 rounded-full bg-emerald-500 border border-transparent hover:scale-110 transition-transform"></button>
|
||||
<button class="size-6 rounded-full bg-purple-600 border border-transparent hover:scale-110 transition-transform"></button>
|
||||
<button class="size-6 rounded-full bg-orange-500 border border-transparent hover:scale-110 transition-transform"></button>
|
||||
<button class="size-6 rounded-full bg-slate-900 border border-slate-700 hover:scale-110 transition-transform"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Destination URL</label>
|
||||
<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 transition-shadow" type="text" value="https://app.vantage.com/signup"/>
|
||||
</div>
|
||||
<div class="h-px bg-border-dark w-full"></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">Google Analytics</span>
|
||||
<span class="text-xs text-slate-500">Enable page view events</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 shadow-sm"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-t border-border-dark bg-[#111318]">
|
||||
<button class="w-full py-2.5 rounded-lg bg-surface-dark border border-border-dark text-slate-300 text-sm font-medium hover:bg-slate-700 hover:text-white transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">tune</span>
|
||||
Advanced Settings
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
BIN
images/variant_builder_editor_2/screen.png
Normal file
BIN
images/variant_builder_editor_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
322
images/variant_builder_editor_3/code.html
Normal file
322
images/variant_builder_editor_3/code.html
Normal file
@@ -0,0 +1,322 @@
|
||||
<!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>
|
||||
BIN
images/variant_builder_editor_3/screen.png
Normal file
BIN
images/variant_builder_editor_3/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
244
images/variant_builder_editor_4/code.html
Normal file
244
images/variant_builder_editor_4/code.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!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@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": "#1e293b",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
body {
|
||||
font-family: 'Inter', 'Pretendard', sans-serif;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #0b0d11;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #1e293b;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-dark text-slate-200 flex h-screen overflow-hidden">
|
||||
<aside class="w-64 border-r border-border-dark bg-surface-dark flex flex-col shrink-0">
|
||||
<div class="p-6 border-b border-border-dark flex items-center gap-3">
|
||||
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
</div>
|
||||
<span class="font-bold text-lg tracking-tight text-white">Vantage</span>
|
||||
</div>
|
||||
<nav class="flex-1 p-4 space-y-2">
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg bg-primary/10 text-primary font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">web</span>
|
||||
랜딩 페이지
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">analytics</span>
|
||||
통계 및 분석
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">group</span>
|
||||
리드 관리
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">settings</span>
|
||||
설정
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-border-dark">
|
||||
<div class="flex items-center gap-3 px-2">
|
||||
<div class="size-9 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-1 min-w-0">
|
||||
<p class="text-sm font-medium text-white truncate">김철수 팀장</p>
|
||||
<p class="text-xs text-slate-500 truncate">Pro Plan</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col min-w-0 bg-background-dark">
|
||||
<header class="h-16 border-b border-border-dark flex items-center justify-between px-8 bg-surface-dark">
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="text-xl font-bold text-white">랜딩 페이지 목록 및 관리</h1>
|
||||
<span class="ml-2 px-2 py-0.5 bg-slate-800 text-slate-400 text-xs rounded-full">총 24개</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-xl">search</span>
|
||||
<input class="bg-background-dark border border-border-dark rounded-lg pl-10 pr-4 py-2 text-sm focus:ring-1 focus:ring-primary focus:border-primary outline-none text-white w-64" placeholder="페이지 이름 검색..." type="text"/>
|
||||
</div>
|
||||
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
새 페이지 추가
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex-1 overflow-auto p-8 custom-scrollbar">
|
||||
<div class="bg-surface-dark border border-border-dark rounded-xl overflow-hidden shadow-2xl">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-border-dark bg-slate-800/50">
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">페이지 정보</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">공개 URL</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">상태</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark">
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBceHj4fe7PQn5roym2DM9WOocCJB0BQxuKExR8ulwggZyARF0-GRXVdS9rV9qEiAfcjcjQ_jH3NIxoAy7IH8ISJ2z6ND6WbUrEwJySKSEN8L3LL8Lr42mnkATadICesv0h2nm5JMy22wnEXjyIs-F2NiXG56Hh6s3HELVhRK4nU-VsEoy8m-tWbh8FR1jndX6iCq6mxaPrd05yp6V5p2ZqEpTjciLxSUFDO4YG2KKXMvQPf2a_6nWrtv7b8FHU7FeM2sIpf3V7YmF"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">2024 여름 시즌 세일 캠페인</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 2시간 전 • 생성일: 2024.05.12</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/summer-2024</span>
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
||||
<span class="size-1.5 rounded-full bg-green-500"></span>
|
||||
활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors" title="URL 복사">
|
||||
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-colors" title="편집">
|
||||
<span class="material-symbols-outlined text-[20px]">edit</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors" title="삭제">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<span class="material-symbols-outlined">image</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">신규 제품 사전 예약 페이지</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 1일 전 • 생성일: 2024.06.01</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/pre-order-now</span>
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-800 text-slate-500 text-xs font-medium border border-slate-700">
|
||||
<span class="size-1.5 rounded-full bg-slate-500"></span>
|
||||
비활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors" title="URL 복사">
|
||||
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-colors" title="편집">
|
||||
<span class="material-symbols-outlined text-[20px]">edit</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors" title="삭제">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group border-b-0">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARKX7eC65mz2IpuBwDVp_I5oS2RC62dOWT-WoIBq5cR6aap-2XMq4Y9ntPmPhycnDw1NszD32Wgwrec6t7qQmVHp1llkEWal5-zfta2pCL4SWfO5v0nYou7715kxFts5jf4O3TDJPkL1hFpSEWNypgSvYP2I-avJIA-hfssJxwf1RyrWDUwewJG14-ivVP91ECuBDyyMLkZA62gUX_fjTwO-W6cCrJmNITt2oWnzn9gAjAX7wxvWfjLfIirMNVNfwolEaHgXl-B_pI"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">엔터프라이즈 솔루션 문의</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 3일 전 • 생성일: 2024.04.15</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/enterprise-demo</span>
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
||||
<span class="size-1.5 rounded-full bg-green-500"></span>
|
||||
활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors" title="URL 복사">
|
||||
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-colors" title="편집">
|
||||
<span class="material-symbols-outlined text-[20px]">edit</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors" title="삭제">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="px-6 py-4 border-t border-border-dark flex items-center justify-between bg-slate-800/20">
|
||||
<span class="text-sm text-slate-500">24개 중 1-10개 표시</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800 disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="size-8 rounded-lg bg-primary text-white text-sm font-medium">1</button>
|
||||
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">2</button>
|
||||
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">3</button>
|
||||
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
BIN
images/variant_builder_editor_4/screen.png
Normal file
BIN
images/variant_builder_editor_4/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
156
images/variant_builder_editor_5/code.html
Normal file
156
images/variant_builder_editor_5/code.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!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>
|
||||
BIN
images/variant_builder_editor_5/screen.png
Normal file
BIN
images/variant_builder_editor_5/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
279
images/variant_builder_editor_6/code.html
Normal file
279
images/variant_builder_editor_6/code.html
Normal file
@@ -0,0 +1,279 @@
|
||||
<!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&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&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",
|
||||
"code-bg": "#0b0d11"
|
||||
},
|
||||
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-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">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>
|
||||
<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-[300px] bg-[#111318] 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-xs text-slate-400 leading-relaxed">
|
||||
모든 스크립트는 해당 페이지의 <code class="text-blue-400"></head></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-xs 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">모든 섹션과 페이지(메인, 랜딩, 완료 페이지)에 공통으로 삽입되는 스크립트입니다. Google Analytics, Facebook Pixel 등을 설정하세요.</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="<!-- 여기에 스크립트를 입력하세요 (e.g. <script>...</script>) -->" spellcheck="false"><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-XXXXXXXXXX');
|
||||
</script></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">신청 완료 혹은 구매 완료 페이지에만 삽입되는 스크립트입니다. 전환 추적 코드(Conversion Tracking)를 이곳에 삽입하세요.</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="<!-- 전환 추적 스크립트를 입력하세요 -->" spellcheck="false"><script>
|
||||
// Conversion event for purchase
|
||||
fbq('track', 'Purchase', {
|
||||
value: 29.00,
|
||||
currency: 'USD'
|
||||
});
|
||||
</script></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-[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">최근 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-[#111318]">
|
||||
<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>
|
||||
|
||||
</body></html>
|
||||
BIN
images/variant_builder_editor_6/screen.png
Normal file
BIN
images/variant_builder_editor_6/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
247
images/variant_builder_editor_7/code.html
Normal file
247
images/variant_builder_editor_7/code.html
Normal file
@@ -0,0 +1,247 @@
|
||||
<!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>
|
||||
BIN
images/variant_builder_editor_7/screen.png
Normal file
BIN
images/variant_builder_editor_7/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
253
images/variant_builder_editor_8/code.html
Normal file
253
images/variant_builder_editor_8/code.html
Normal file
@@ -0,0 +1,253 @@
|
||||
<!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@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": "#1e293b",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
body {
|
||||
font-family: 'Inter', 'Pretendard', sans-serif;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #0b0d11;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #1e293b;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-dark text-slate-200 flex h-screen overflow-hidden">
|
||||
<aside class="w-64 border-r border-border-dark bg-surface-dark flex flex-col shrink-0">
|
||||
<div class="p-6 border-b border-border-dark flex items-center gap-3">
|
||||
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
</div>
|
||||
<span class="font-bold text-lg tracking-tight text-white">Vantage</span>
|
||||
</div>
|
||||
<nav class="flex-1 p-4 space-y-2">
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg bg-primary/10 text-primary font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">web</span>
|
||||
랜딩 페이지
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">analytics</span>
|
||||
통계 및 분석
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">group</span>
|
||||
리드 관리
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[22px]">settings</span>
|
||||
설정
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-border-dark">
|
||||
<div class="flex items-center gap-3 px-2">
|
||||
<div class="size-9 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-1 min-w-0">
|
||||
<p class="text-sm font-medium text-white truncate">김철수 팀장</p>
|
||||
<p class="text-xs text-slate-500 truncate">Pro 플랜</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col min-w-0 bg-background-dark">
|
||||
<header class="h-16 border-b border-border-dark flex items-center justify-between px-8 bg-surface-dark">
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="text-xl font-bold text-white">랜딩 페이지 목록 및 관리</h1>
|
||||
<span class="ml-2 px-2 py-0.5 bg-slate-800 text-slate-400 text-xs rounded-full">총 24개</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-xl">search</span>
|
||||
<input class="bg-background-dark border border-border-dark rounded-lg pl-10 pr-4 py-2 text-sm focus:ring-1 focus:ring-primary focus:border-primary outline-none text-white w-64" placeholder="페이지 이름 검색..." type="text"/>
|
||||
</div>
|
||||
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
새 페이지 추가
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex-1 overflow-auto p-8 custom-scrollbar">
|
||||
<div class="bg-surface-dark border border-border-dark rounded-xl overflow-hidden shadow-2xl">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-border-dark bg-slate-800/50">
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">페이지 정보</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">공개 URL</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">상태</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark">
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBceHj4fe7PQn5roym2DM9WOocCJB0BQxuKExR8ulwggZyARF0-GRXVdS9rV9qEiAfcjcjQ_jH3NIxoAy7IH8ISJ2z6ND6WbUrEwJySKSEN8L3LL8Lr42mnkATadICesv0h2nm5JMy22wnEXjyIs-F2NiXG56Hh6s3HELVhRK4nU-VsEoy8m-tWbh8FR1jndX6iCq6mxaPrd05yp6V5p2ZqEpTjciLxSUFDO4YG2KKXMvQPf2a_6nWrtv7b8FHU7FeM2sIpf3V7YmF"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">2024 여름 시즌 세일 캠페인</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 2시간 전 • 생성일: 2024.05.12</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/summer-2024</span>
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
||||
<span class="size-1.5 rounded-full bg-green-500"></span>
|
||||
활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">content_copy</span>
|
||||
복사
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">edit</span>
|
||||
수정
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">delete</span>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<span class="material-symbols-outlined">image</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">신규 제품 사전 예약 페이지</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 1일 전 • 생성일: 2024.06.01</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/pre-order-now</span>
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-800 text-slate-500 text-xs font-medium border border-slate-700">
|
||||
<span class="size-1.5 rounded-full bg-slate-500"></span>
|
||||
비활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">content_copy</span>
|
||||
복사
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">edit</span>
|
||||
수정
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">delete</span>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group border-b-0">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARKX7eC65mz2IpuBwDVp_I5oS2RC62dOWT-WoIBq5cR6aap-2XMq4Y9ntPmPhycnDw1NszD32Wgwrec6t7qQmVHp1llkEWal5-zfta2pCL4SWfO5v0nYou7715kxFts5jf4O3TDJPkL1hFpSEWNypgSvYP2I-avJIA-hfssJxwf1RyrWDUwewJG14-ivVP91ECuBDyyMLkZA62gUX_fjTwO-W6cCrJmNITt2oWnzn9gAjAX7wxvWfjLfIirMNVNfwolEaHgXl-B_pI"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">엔터프라이즈 솔루션 문의</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 3일 전 • 생성일: 2024.04.15</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/enterprise-demo</span>
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
||||
<span class="size-1.5 rounded-full bg-green-500"></span>
|
||||
활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">content_copy</span>
|
||||
복사
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">edit</span>
|
||||
수정
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">delete</span>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="px-6 py-4 border-t border-border-dark flex items-center justify-between bg-slate-800/20">
|
||||
<span class="text-sm text-slate-500">24개 중 1-10개 표시</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800 disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="size-8 rounded-lg bg-primary text-white text-sm font-medium">1</button>
|
||||
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">2</button>
|
||||
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">3</button>
|
||||
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
BIN
images/variant_builder_editor_8/screen.png
Normal file
BIN
images/variant_builder_editor_8/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
253
images/variant_builder_editor_9/code.html
Normal file
253
images/variant_builder_editor_9/code.html
Normal file
@@ -0,0 +1,253 @@
|
||||
<!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": "#1e293b",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
body {
|
||||
font-family: 'Inter', 'Pretendard', sans-serif;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #0b0d11;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #1e293b;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-dark text-slate-200 flex h-screen overflow-hidden">
|
||||
<aside class="w-64 border-r border-border-dark bg-surface-dark flex flex-col shrink-0">
|
||||
<div class="p-6 border-b border-border-dark flex items-center gap-3">
|
||||
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined !text-[20px]">dashboard</span>
|
||||
</div>
|
||||
<span class="font-bold text-lg tracking-tight text-white">Vantage</span>
|
||||
</div>
|
||||
<nav class="flex-1 p-4 space-y-2">
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg bg-primary/10 text-primary font-medium" href="#">
|
||||
<span class="material-symbols-outlined !text-[22px]">language</span>
|
||||
랜딩 페이지
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined !text-[22px]">bar_chart</span>
|
||||
통계 및 분석
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined !text-[22px]">group</span>
|
||||
리드 관리
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined !text-[22px]">settings</span>
|
||||
설정
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-border-dark">
|
||||
<div class="flex items-center gap-3 px-2">
|
||||
<div class="size-9 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-1 min-w-0">
|
||||
<p class="text-sm font-medium text-white truncate">김철수 팀장</p>
|
||||
<p class="text-xs text-slate-500 truncate">Pro 플랜</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col min-w-0 bg-background-dark">
|
||||
<header class="h-16 border-b border-border-dark flex items-center justify-between px-8 bg-surface-dark">
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="text-xl font-bold text-white">랜딩 페이지 목록 및 관리</h1>
|
||||
<span class="ml-2 px-2 py-0.5 bg-slate-800 text-slate-400 text-xs rounded-full">총 24개</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 !text-xl">search</span>
|
||||
<input class="bg-background-dark border border-border-dark rounded-lg pl-10 pr-4 py-2 text-sm focus:ring-1 focus:ring-primary focus:border-primary outline-none text-white w-64" placeholder="페이지 이름 검색..." type="text"/>
|
||||
</div>
|
||||
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined !text-[20px]">add</span>
|
||||
새 페이지 추가
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex-1 overflow-auto p-8 custom-scrollbar">
|
||||
<div class="bg-surface-dark border border-border-dark rounded-xl overflow-hidden shadow-2xl">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-border-dark bg-slate-800/50">
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">페이지 정보</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">공개 URL</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">상태</th>
|
||||
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark">
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBceHj4fe7PQn5roym2DM9WOocCJB0BQxuKExR8ulwggZyARF0-GRXVdS9rV9qEiAfcjcjQ_jH3NIxoAy7IH8ISJ2z6ND6WbUrEwJySKSEN8L3LL8Lr42mnkATadICesv0h2nm5JMy22wnEXjyIs-F2NiXG56Hh6s3HELVhRK4nU-VsEoy8m-tWbh8FR1jndX6iCq6mxaPrd05yp6V5p2ZqEpTjciLxSUFDO4YG2KKXMvQPf2a_6nWrtv7b8FHU7FeM2sIpf3V7YmF"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">2024 여름 시즌 세일 캠페인</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 2시간 전 • 생성일: 2024.05.12</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/summer-2024</span>
|
||||
<span class="material-symbols-outlined !text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
||||
<span class="size-1.5 rounded-full bg-green-500"></span>
|
||||
활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">content_copy</span>
|
||||
<span>복사</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">edit</span>
|
||||
<span>수정</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">delete</span>
|
||||
<span>삭제</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<span class="material-symbols-outlined">image</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">신규 제품 사전 예약 페이지</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 1일 전 • 생성일: 2024.06.01</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/pre-order-now</span>
|
||||
<span class="material-symbols-outlined !text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-800 text-slate-500 text-xs font-medium border border-slate-700">
|
||||
<span class="size-1.5 rounded-full bg-slate-500"></span>
|
||||
비활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">content_copy</span>
|
||||
<span>복사</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">edit</span>
|
||||
<span>수정</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">delete</span>
|
||||
<span>삭제</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group border-b-0">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded bg-slate-800 flex items-center justify-center text-slate-500 overflow-hidden shrink-0 border border-slate-700">
|
||||
<img alt="Preview" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARKX7eC65mz2IpuBwDVp_I5oS2RC62dOWT-WoIBq5cR6aap-2XMq4Y9ntPmPhycnDw1NszD32Wgwrec6t7qQmVHp1llkEWal5-zfta2pCL4SWfO5v0nYou7715kxFts5jf4O3TDJPkL1hFpSEWNypgSvYP2I-avJIA-hfssJxwf1RyrWDUwewJG14-ivVP91ECuBDyyMLkZA62gUX_fjTwO-W6cCrJmNITt2oWnzn9gAjAX7wxvWfjLfIirMNVNfwolEaHgXl-B_pI"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">엔터프라이즈 솔루션 문의</p>
|
||||
<p class="text-xs text-slate-500 mt-1">수정일: 3일 전 • 생성일: 2024.04.15</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 text-primary hover:underline cursor-pointer">
|
||||
<span class="text-sm truncate max-w-[200px]">vantage.io/enterprise-demo</span>
|
||||
<span class="material-symbols-outlined !text-[16px]">open_in_new</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
|
||||
<span class="size-1.5 rounded-full bg-green-500"></span>
|
||||
활성
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 border border-border-dark rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">content_copy</span>
|
||||
<span>복사</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-primary hover:bg-primary/10 border border-border-dark hover:border-primary/30 rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">edit</span>
|
||||
<span>수정</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-red-400 hover:bg-red-400/10 border border-border-dark hover:border-red-400/30 rounded-lg transition-colors flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined !text-[18px]">delete</span>
|
||||
<span>삭제</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="px-6 py-4 border-t border-border-dark flex items-center justify-between bg-slate-800/20">
|
||||
<span class="text-sm text-slate-500">24개 중 1-10개 표시</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800 disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined !text-[20px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="size-8 rounded-lg bg-primary text-white text-sm font-medium">1</button>
|
||||
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">2</button>
|
||||
<button class="size-8 rounded-lg text-slate-400 hover:bg-slate-800 text-sm font-medium">3</button>
|
||||
<button class="p-1.5 rounded-lg border border-border-dark text-slate-500 hover:text-white hover:bg-slate-800">
|
||||
<span class="material-symbols-outlined !text-[20px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
BIN
images/variant_builder_editor_9/screen.png
Normal file
BIN
images/variant_builder_editor_9/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Reference in New Issue
Block a user