10 hours ago
i want to make more visual that dashboard <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marketing Intelligence Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: {} } } </script> </head> <body class="bg-gray-50 dark:bg-gray-900 p-6"> <div class="max-w-7xl mx-auto"> <!-- Main Dashboard Grid --> <div class="grid grid-cols-1 lg:grid-cols-5 gap-3"> <!-- LEFT PANEL - 20% Width --> <div class="lg:col-span-1 space-y-2"> <!-- Marketing Overview Card --> <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-2"> <!-- Hexagon Score --> <div class="flex flex-col items-center justify-center mb-3"> <div class="relative w-24 h-24 flex items-center justify-center"> <svg width="96" height="96" viewBox="0 0 128 128" class="absolute inset-0"> <polygon points="64,8 112,40 112,88 64,120 16,88 16,40" fill="none" stroke="rgb(251, 191, 36)" stroke-width="2.5" class="drop-shadow-lg"/> <polygon points="64,8 112,40 112,88 64,120 16,88 16,40" fill="rgba(251, 191, 36, 0.1)"/> </svg> <div class="relative z-10 text-center"> <div class="text-3xl font-bold text-amber-600 dark:text-amber-500">85</div> <div class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mt-0.5">MARKETING</div> </div> </div> </div> <!-- Competitor Comparison - Compact --> <div> <h3 class="text-[10px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1.5">Competitor Comparison</h3> <div class="space-y-1"> <!-- Vivo --> <div class="p-1.5 rounded border bg-amber-50 dark:bg-amber-950/20 border-amber-200 dark:border-amber-800"> <div class="flex items-center gap-1.5"> <div class="text-xs font-bold w-4 text-center text-amber-600">🥇</div> <span class="text-[10px] font-semibold min-w-[60px] text-amber-700 dark:text-amber-400">Vivo •</span> <span class="text-xs font-bold w-8 text-right text-amber-700 dark:text-amber-400">85</span> <div class="relative flex-1 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"> <div class="h-full bg-green-500" style="width: 100%"></div> </div> <div class="flex items-center gap-1 flex-shrink-0"> <span class="text-[9px]">🏆</span> </div> </div> </div> <!-- Shopify --> <div class="p-1.5 rounded border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800"> <div class="flex items-center gap-1.5"> <div class="text-xs font-bold w-4 text-center text-gray-500">🥈</div> <span class="text-[10px] font-semibold min-w-[60px] text-gray-700 dark:text-gray-300">Shopify</span> <span class="text-xs font-bold w-8 text-right text-gray-900 dark:text-gray-100">78</span> <div class="relative flex-1 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"> <div class="h-full bg-yellow-500" style="width: 91.8%"></div> </div> <div class="flex items-center gap-1 flex-shrink-0"> <span class="text-[9px] text-gray-500 min-w-[28px] text-right">-7</span> </div> </div> </div> <!-- Wix --> <div class="p-1.5 rounded border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800"> <div class="flex items-center gap-1.5"> <div class="text-xs font-bold w-4 text-center text-orange-600">🥉</div> <span class="text-[10px] font-semibold min-w-[60px] text-gray-700 dark:text-gray-300">Wix</span> <span class="text-xs font-bold w-8 text-right text-gray-900 dark:text-gray-100">71</span> <div class="relative flex-1 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"> <div class="h-full bg-yellow-500" style="width: 83.5%"></div> </div> <div class="flex items-center gap-1 flex-shrink-0"> <span class="text-[9px] text-gray-500 min-w-[28px] text-right">-14</span> </div> </div> </div> <!-- BigCommerce --> <div class="p-1.5 rounded border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800"> <div class="flex items-center gap-1.5"> <div class="text-xs font-bold w-4 text-center text-gray-400">4</div> <span class="text-[10px] font-semibold min-w-[60px] text-gray-700 dark:text-gray-300">BigCommerce</span> <span class="text-xs font-bold w-8 text-right text-gray-900 dark:text-gray-100">62</span> <div class="relative flex-1 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"> <div class="h-full bg-red-500" style="width: 72.9%"></div> </div> <div class="flex items-center gap-1 flex-shrink-0"> <span class="text-[9px] text-gray-500 min-w-[28px] text-right">-23</span> </div> </div> </div> </div> </div> </div> <!-- Intel Feed Card --> <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"> <div class="pb-2 px-3 pt-3"> <h3 class="text-sm font-semibold flex items-center gap-1"> <span>🐝</span> Intel Feed </h3> </div> <div class="pt-0 px-3 pb-3 max-h-[280px] overflow-y-auto"> <!-- Feed Item 1 --> <div class="flex gap-x-3 mb-6"> <div class="min-w-14 text-end"> <span class="text-xs text-gray-500 dark:text-neutral-400">2m ago</span> </div> <div class="relative after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700"> <div class="relative z-10 size-7 flex justify-center items-center"> <div class="size-2 rounded-full bg-red-500 dark:bg-red-600"></div> </div> </div> <div class="grow pt-0.5"> <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white text-xs mb-1"> <span>📢</span> <span>Shopify</span> </h3> <p class="text-xs text-gray-600 dark:text-neutral-400 leading-tight mb-2"> New Meta ad launched: 'Spring Sale 2024' - 15% discount campaign </p> <button class="h-7 px-3 text-xs font-medium border border-gray-300 rounded-md hover:bg-gray-50 hover:border-gray-400 dark:border-gray-700 dark:hover:bg-gray-800 dark:hover:border-gray-600"> 👁️ View Details </button> </div> </div> <!-- Feed Item 2 --> <div class="flex gap-x-3 mb-6"> <div class="min-w-14 text-end"> <span class="text-xs text-gray-500 dark:text-neutral-400">8m ago</span> </div> <div class="relative after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700"> <div class="relative z-10 size-7 flex justify-center items-center"> <div class="size-2 rounded-full bg-yellow-500 dark:bg-yellow-600"></div> </div> </div> <div class="grow pt-0.5"> <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white text-xs mb-1"> <span>📱</span> <span>BigCommerce</span> </h3> <p class="text-xs text-gray-600 dark:text-neutral-400 leading-tight mb-2"> Instagram post reached 10K likes - Product showcase video </p> <button class="h-7 px-3 text-xs font-medium border border-gray-300 rounded-md hover:bg-gray-50 hover:border-gray-400 dark:border-gray-700 dark:hover:bg-gray-800 dark:hover:border-gray-600"> 👁️ View Details </button> </div> </div> <!-- Feed Item 3 --> <div class="flex gap-x-3"> <div class="min-w-14 text-end"> <span class="text-xs text-gray-500 dark:text-neutral-400">15m ago</span> </div> <div class="relative"> <div class="relative z-10 size-7 flex justify-center items-center"> <div class="size-2 rounded-full bg-gray-400 dark:bg-neutral-600"></div> </div> </div> <div class="grow pt-0.5"> <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white text-xs mb-1"> <span>🎯</span> <span>Vivo</span> </h3> <p class="text-xs text-gray-600 dark:text-neutral-400 leading-tight mb-2"> Google Ads campaign paused - Budget optimization </p> <button class="h-7 px-3 text-xs font-medium border border-gray-300 rounded-md hover:bg-gray-50 hover:border-gray-400 dark:border-gray-700 dark:hover:bg-gray-800 dark:hover:border-gray-600"> 👁️ View Details </button> </div> </div> </div> </div> </div> <!-- RIGHT PANEL - 80% Width --> <div class="lg:col-span-4 space-y-3"> <!-- Level 1: Overview Cards --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3"> <!-- Advertising Card --> <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:shadow-md transition-all"> <div class="p-3 pb-3"> <div class="flex items-center justify-between"> <h3 class="text-base font-semibold flex items-center gap-2"> <span>📢</span> Advertising </h3> <span class="text-gray-400">→</span> </div> </div> <div class="pt-0 px-3 pb-3"> <div class="space-y-2"> <div> <div class="text-xs text-gray-500 dark:text-gray-400">Active Campaigns</div> <div class="text-2xl font-bold">67</div> </div> <div> <div class="text-xs text-gray-500 dark:text-gray-400">Platforms Active</div> <div class="text-lg font-semibold">4</div> </div> <div class="flex flex-wrap gap-1.5 mt-2"> <span class="text-[10px] px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded">Meta (42)</span> <span class="text-[10px] px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded">Google (8)</span> <span class="text-[10px] px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded">TikTok (12)</span> <span class="text-[10px] px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded">Reddit (5)</span> </div> <span class="text-[10px] px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded inline-block mt-1">4 countries</span> </div> </div> </div> <!-- Social Media Card --> <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:shadow-md transition-all"> <div class="p-3 pb-3"> <div class="flex items-center justify-between"> <h3 class="text-base font-semibold flex items-center gap-2"> <span>📱</span> Social Media </h3> <span class="text-gray-400">→</span> </div> </div> <div class="pt-0 px-3 pb-3"> <div class="space-y-2"> <div> <div class="text-xs text-gray-500 dark:text-gray-400">Instagram</div> <div class="text-lg font-semibold">12.5K</div> </div> <div class="flex gap-2"> <span class="text-xs px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded">3.2% engagement</span> <span class="text-xs px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900">TikTok Inactive</span> </div> </div> </div> </div> <!-- Content & PR Card --> <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:shadow-md transition-all"> <div class="p-3 pb-3"> <div class="flex items-center justify-between"> <h3 class="text-base font-semibold flex items-center gap-2"> <span>📝</span> Content & PR </h3> <span class="text-gray-400">→</span> </div> </div> <div class="pt-0 px-3 pb-3"> <div class="space-y-2"> <div> <div class="text-xs text-gray-500 dark:text-gray-400">Blog Posts/mo</div> <div class="text-2xl font-bold">8</div> </div> <div> <div class="text-xs text-gray-500 dark:text-gray-400">News Mentions</div> <div class="text-lg font-semibold">23/mo</div> </div> <span class="text-xs px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded inline-block">78% positive</span> </div> </div> </div> <!-- Community Card --> <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:shadow-md transition-all"> <div class="p-3 pb-3"> <div class="flex items-center justify-between"> <h3 class="text-base font-semibold flex items-center gap-2"> <span>💬</span> Community </h3> <span class="text-gray-400">→</span> </div> </div> <div class="pt-0 px-3 pb-3"> <div class="space-y-2"> <div> <div class="text-xs text-gray-500 dark:text-gray-400">Reddit Mentions</div> <div class="text-2xl font-bold">15</div> </div> <div> <div class="text-xs text-gray-500 dark:text-gray-400">Top Subreddit</div> <div class="text-sm font-semibold">r/ecommerce</div> </div> <span class="text-xs px-1.5 py-0.5 border border-gray-300 dark:border-gray-700 rounded inline-block">62% positive</span> </div> </div> </div> </div> <!-- Expanded Panel Example (Advertising) --> <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 mt-3"> <div class="p-3 pb-3"> <div class="flex items-center justify-between"> <h3 class="text-lg font-semibold">📢 Advertising Details</h3> <button class="text-gray-400 hover:text-gray-600">✕</button> </div> </div> <div class="px-3 pb-3 space-y-6"> <!-- Platform Grid --> <div class="grid grid-cols-2 md:grid-cols-3 gap-3"> <div class="p-2 rounded-lg border bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-800"> <div class="flex items-center justify-between mb-1"> <span class="text-xs font-semibold capitalize">Meta</span> <span class="h-4 px-1 text-[9px] bg-green-100 border border-green-300 text-green-700 rounded">Active</span> </div> <div class="text-lg font-bold">42</div> <div class="text-[10px] text-gray-500">campaigns</div> </div> <div class="p-2 rounded-lg border bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-800"> <div class="flex items-center justify-between mb-1"> <span class="text-xs font-semibold capitalize">Google</span> <span class="h-4 px-1 text-[9px] bg-green-100 border border-green-300 text-green-700 rounded">Active</span> </div> <div class="text-lg font-bold">8</div> <div class="text-[10px] text-gray-500">ads</div> </div> <div class="p-2 rounded-lg border bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-800"> <div class="flex items-center justify-between mb-1"> <span class="text-xs font-semibold capitalize">TikTok</span> <span class="h-4 px-1 text-[9px] bg-green-100 border border-green-300 text-green-700 rounded">Active</span> </div> <div class="text-lg font-bold">12</div> <div class="text-[10px] text-gray-500">ads</div> </div> <div class="p-2 rounded-lg border bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-800"> <div class="flex items-center justify-between mb-1"> <span class="text-xs font-semibold capitalize">Reddit</span> <span class="h-4 px-1 text-[9px] bg-green-100 border border-green-300 text-green-700 rounded">Active</span> </div> <div class="text-lg font-bold">5</div> <div class="text-[10px] text-gray-500">ads</div> </div> <div class="p-2 rounded-lg border bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-800 opacity-60"> <div class="flex items-center justify-between mb-1"> <span class="text-xs font-semibold capitalize">LinkedIn</span> <span class="h-4 px-1 text-[9px] bg-gray-100 border border-gray-300 text-gray-500 rounded">Inactive</span> </div> <div class="text-lg font-bold">0</div> <div class="text-[10px] text-gray-500">ads</div> </div> <div class="p-2 rounded-lg border bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-800 opacity-60"> <div class="flex items-center justify-between mb-1"> <span class="text-xs font-semibold capitalize">Pinterest</span> <span class="h-4 px-1 text-[9px] bg-gray-100 border border-gray-300 text-gray-500 rounded">Inactive</span> </div> <div class="text-lg font-bold">0</div> <div class="text-[10px] text-gray-500">ads</div> </div> </div> <!-- Summary Stats --> <div class="grid grid-cols-3 gap-3 p-2 bg-gray-50 dark:bg-gray-900 rounded-lg"> <div> <div class="text-[10px] text-gray-500">Total Active</div> <div class="text-lg font-bold">67</div> </div> <div> <div class="text-[10px] text-gray-500">Platforms</div> <div class="text-lg font-bold">4</div> </div> <div> <div class="text-[10px] text-gray-500">Countries</div> <div class="text-lg font-bold">4</div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
