262 lines
16 KiB
HTML
262 lines
16 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>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> |