403 lines
21 KiB
HTML
403 lines
21 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"/>
|
|
<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> |