405 lines
22 KiB
HTML
405 lines
22 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>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> |