<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campaign Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex h-screen font-sans">
<div class="w-64 bg-gray-900 text-white flex flex-col">
<div class="p-6 text-2xl font-bold border-b border-gray-800 text-orange-500">
Cloudflare
</div>
<nav class="flex-1 p-4 space-y-2">
<a href="#" class="block px-4 py-2 bg-gray-800 rounded">Dashboard</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded transition">Quarterly Reports (R2)</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded transition">Settings</a>
</nav>
</div>
<div class="flex-1 flex flex-col overflow-y-auto">
<header class="bg-white shadow px-8 py-4 flex justify-between items-center">
<h2 class="text-xl font-semibold text-gray-800">Campaign Product Tracker</h2>
<button onclick="alert('This will trigger the Cloudflare Worker to calculate totals and save to R2!')" class="bg-orange-500 text-white px-4 py-2 rounded shadow hover:bg-orange-600 font-medium transition">
Generate Quarterly Report
</button>
</header>
<main class="p-8 space-y-6">
<div class="grid grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-lg shadow border-t-4 border-orange-500">
<h3 class="text-gray-500 text-sm font-semibold uppercase">Active Campaigns</h3>
<p class="text-3xl font-bold text-gray-800 mt-2">142</p>
</div>
<div class="bg-white p-6 rounded-lg shadow border-t-4 border-blue-500">
<h3 class="text-gray-500 text-sm font-semibold uppercase">Est. Quarterly Value Provided</h3>
<p class="text-3xl font-bold text-gray-800 mt-2">$28,400</p>
</div>
</div>
<div class="bg-white rounded-lg shadow border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
<h3 class="text-lg font-semibold text-gray-800">Onboard New Domain</h3>
</div>
<div class="p-6 flex flex-wrap gap-4 items-end">
<div class="flex-1 min-w-[200px]">
<label class="block text-sm font-medium text-gray-700 mb-1">Domain Name</label>
<input type="text" class="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:outline-none" placeholder="e.g., candidate2026.com">
</div>
<div class="flex-1 min-w-[200px]">
<label class="block text-sm font-medium text-gray-700 mb-1">Onboarding Date</label>
<input type="date" class="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:outline-none">
</div>
<div class="flex-1 min-w-[200px]">
<label class="block text-sm font-medium text-gray-700 mb-1">Product Tier</label>
<select class="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:outline-none">
<option>Pro Plan ($20/mo)</option>
<option>Business Plan ($200/mo)</option>
<option>Enterprise (Custom)</option>
</select>
</div>
<button onclick="alert('This securely sends the data to your D1 Database!')" class="bg-gray-800 text-white px-6 py-2 rounded shadow hover:bg-gray-700 font-medium h-[42px] transition">
Add to Database
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h3 class="text-lg font-semibold text-gray-800">Recent Onboards</h3>
</div>
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-white text-gray-500 text-sm uppercase border-b border-gray-200">
<th class="px-6 py-3 font-medium">Domain Name</th>
<th class="px-6 py-3 font-medium">Date Added</th>
<th class="px-6 py-3 font-medium">Product</th>
<th class="px-6 py-3 font-medium">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr class="hover:bg-gray-50 transition">
<td class="px-6 py-4 font-medium text-gray-900">example-candidate.com</td>
<td class="px-6 py-4 text-gray-600">Mar 15, 2026</td>
<td class="px-6 py-4 text-gray-600">Business Plan</td>
<td class="px-6 py-4"><span class="bg-green-100 text-green-800 text-xs font-bold px-2 py-1 rounded-full border border-green-200">Active</span></td>
</tr>
<tr class="hover:bg-gray-50 transition">
<td class="px-6 py-4 font-medium text-gray-900">local-party.org</td>
<td class="px-6 py-4 text-gray-600">Feb 10, 2026</td>
<td class="px-6 py-4 text-gray-600">Pro Plan</td>
<td class="px-6 py-4"><span class="bg-green-100 text-green-800 text-xs font-bold px-2 py-1 rounded-full border border-green-200">Active</span></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</body>
</html>