Spaces:
Sleeping
Sleeping
| <html class="light" lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport" /> | |
| <title>MailFlow AI - Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..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" /> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "primary": "#1152d4", | |
| "background-light": "#f6f6f8", | |
| "background-dark": "#101622", | |
| }, | |
| fontFamily: { | |
| "display": ["Manrope"] | |
| }, | |
| borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Manrope', sans-serif; | |
| } | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| } | |
| .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-slate-100 antialiased min-h-screen"> | |
| <!-- DESKTOP VIEW --> | |
| <div class="hidden md:flex relative min-h-screen flex-col"> | |
| <header | |
| class="sticky top-0 z-50 flex h-16 w-full items-center justify-between border-b border-primary/10 bg-white/80 dark:bg-background-dark/80 px-8 backdrop-blur-md"> | |
| <div class="flex items-center gap-8"> | |
| <div class="flex items-center gap-3"> | |
| <div class="flex size-8 items-center justify-center rounded-lg bg-primary text-white"> | |
| <span class="material-symbols-outlined text-xl">auto_awesome</span> | |
| </div> | |
| <h2 class="text-xl font-bold tracking-tight">MailFlow AI</h2> | |
| </div> | |
| <div class="hidden md:flex items-center"> | |
| <div class="relative"> | |
| <span | |
| class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">search</span> | |
| <input | |
| class="h-9 w-64 rounded-lg border-none bg-primary/5 pl-9 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-slate-400" | |
| placeholder="Search campaigns..." type="text" /> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex flex-1"> | |
| <aside | |
| class="w-64 border-r border-primary/10 bg-white dark:bg-background-dark p-6 flex flex-col justify-between"> | |
| <div class="flex flex-col gap-6"> | |
| <div class="space-y-1"> | |
| <p class="px-3 text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Main Menu</p> | |
| <a class="flex items-center gap-3 rounded-lg bg-primary/10 px-3 py-2 text-primary font-semibold transition-colors" | |
| href="/"> | |
| <span class="material-symbols-outlined">dashboard</span> | |
| <span class="text-sm">Dashboard</span> | |
| </a> | |
| <a class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-600 hover:bg-primary/5 hover:text-primary transition-colors" | |
| href="/campaign"> | |
| <span class="material-symbols-outlined">campaign</span> | |
| <span class="text-sm">New Campaign</span> | |
| </a> | |
| </div> | |
| </div> | |
| </aside> | |
| <main class="flex-1 overflow-y-auto p-8"> | |
| <div class="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4"> | |
| <div> | |
| <h1 class="text-3xl font-black tracking-tight">Email Dashboard</h1> | |
| <p class="text-slate-500">Welcome. Here's what's happening today.</p> | |
| </div> | |
| <a href="/campaign" | |
| class="flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-primary/20 hover:bg-primary/90 transition-all"> | |
| <span class="material-symbols-outlined text-lg">add</span> | |
| New Campaign | |
| </a> | |
| </div> | |
| <div class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="rounded-xl border border-primary/10 bg-white dark:bg-background-dark p-6 shadow-sm"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex size-10 items-center justify-center rounded-lg bg-blue-50 text-blue-600"> | |
| <span class="material-symbols-outlined">send</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-slate-500 font-medium">Total Emails Sent</p> | |
| <p class="text-2xl font-black">2.4k</p> | |
| </div> | |
| </div> | |
| <div | |
| class="rounded-xl bg-gradient-to-br from-primary to-blue-700 p-8 text-white relative overflow-hidden shadow-xl"> | |
| <div class="relative z-10"> | |
| <h2 class="text-2xl font-black mb-4">Getting Started</h2> | |
| <p class="text-white/80 leading-relaxed mb-6">Click on <strong>New Campaign</strong> to test the | |
| MailFlow GUI sender. Prepare your Excel list with your contacts.</p> | |
| </div> | |
| <span | |
| class="material-symbols-outlined absolute -bottom-10 -right-10 text-[200px] text-white/10 rotate-12">lightbulb</span> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- MOBILE VIEW --> | |
| <div | |
| class="flex md:hidden relative h-full w-full flex-col max-w-md mx-auto bg-white dark:bg-background-dark shadow-xl min-h-screen"> | |
| <header | |
| class="sticky top-0 z-10 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800"> | |
| <div class="flex items-center p-4 justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="bg-primary/10 p-2 rounded-lg"> | |
| <span class="material-symbols-outlined text-primary">auto_awesome</span> | |
| </div> | |
| <h1 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-tight"> | |
| MailFlow AI</h1> | |
| </div> | |
| <button class="text-slate-600 dark:text-slate-400"> | |
| <span class="material-symbols-outlined">notifications</span> | |
| </button> | |
| </div> | |
| <nav class="flex px-4 gap-6 overflow-x-auto no-scrollbar"> | |
| <a class="flex flex-col items-center justify-center border-b-2 border-primary text-primary pb-3 pt-2 shrink-0" | |
| href="/"> | |
| <p class="text-sm font-bold tracking-wide">Overview</p> | |
| </a> | |
| <a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 pb-3 pt-2 shrink-0" | |
| href="/campaign"> | |
| <p class="text-sm font-semibold tracking-wide">Campaigns</p> | |
| </a> | |
| </nav> | |
| </header> | |
| <main class="flex-1 overflow-y-auto pb-24"> | |
| <section class="p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-slate-900 dark:text-slate-100 text-base font-bold">Key Performance</h2> | |
| <span | |
| class="text-xs font-medium text-slate-500 bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">Overall</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div | |
| class="flex flex-col gap-1 rounded-xl p-4 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/50"> | |
| <p class="text-slate-500 dark:text-slate-400 text-xs font-semibold uppercase tracking-wider"> | |
| Total Emails</p> | |
| <p class="text-slate-900 dark:text-slate-100 text-xl font-extrabold">2.4k</p> | |
| <div class="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 text-xs font-bold"> | |
| <span class="material-symbols-outlined text-sm">trending_up</span> | |
| <span>Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="p-4"> | |
| <div class="rounded-2xl bg-primary p-6 text-white relative overflow-hidden"> | |
| <div class="relative z-10"> | |
| <h3 class="text-lg font-bold mb-1">Make a Campaign</h3> | |
| <p class="text-primary-100 text-sm opacity-90 mb-4">Click "Add" to create a new campaign and | |
| start automating!</p> | |
| </div> | |
| <div class="absolute -right-4 -bottom-4 opacity-20"> | |
| <span class="material-symbols-outlined text-[120px]">auto_graph</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer | |
| class="fixed bottom-0 w-full max-w-md bg-white/90 dark:bg-background-dark/90 backdrop-blur-xl border-t border-slate-200 dark:border-slate-800 z-50"> | |
| <div class="flex justify-around items-center py-2 px-4 relative"> | |
| <a class="flex flex-col items-center gap-1 text-primary w-16" href="/"> | |
| <span class="material-symbols-outlined !text-[28px] fill-[1]">home</span> | |
| <span class="text-[10px] font-bold">Home</span> | |
| </a> | |
| <a href="/campaign" class="relative -top-6"> | |
| <button | |
| class="bg-primary text-white size-14 rounded-full shadow-lg shadow-primary/40 flex items-center justify-center border-4 border-white dark:border-background-dark hover:scale-105 transition-transform"> | |
| <span class="material-symbols-outlined !text-[32px]">add</span> | |
| </button> | |
| </a> | |
| <a class="flex flex-col items-center gap-1 text-slate-400 dark:text-slate-500 w-16" href="/campaign"> | |
| <span class="material-symbols-outlined !text-[28px]">campaign</span> | |
| <span class="text-[10px] font-bold">Campaigns</span> | |
| </a> | |
| </div> | |
| <div class="h-6 w-full flex justify-center items-center pb-2"> | |
| <div class="w-32 h-1 bg-slate-200 dark:bg-slate-700 rounded-full"></div> | |
| </div> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |