318 lines
18 KiB
HTML
318 lines
18 KiB
HTML
<!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> |