PromptBase
Upgrade
Close icon
General
Home
Marketplace
Create
Hire
Login
Chat
Sell
Explore

Prompt Details

Model
Chat - (gpt-5.6)
Token size
357
Example input
[Dashboard_Niche]: Cybersecurity and Server Monitoring
Example output
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="theme-color" content="#020617" /> <title>SentinelGrid — Cybersecurity Operations Dashboard</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { cyber: { 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2" } }, boxShadow: { cyber: "0 0 30px rgba(6,182,212,.08)", glow: "0 0 20px rgba(34,211,238,.15)" } } } }; </script> <style> * { scrollbar-width: thin; scrollbar-color: #334155 #020617; } body { background: radial-gradient(circle at 75% 10%, rgba(6, 182, 212, 0.055), transparent 28%), radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.035), transparent 25%), #020617; } .glass { background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(14px); border: 1px solid rgba(51, 65, 85, 0.65); } .grid-bg { background-image: linear-gradient(rgba(51, 65, 85, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 65, 85, 0.16) 1px, transparent 1px); background-size: 32px 32px; } .scanline { background: linear-gradient( to bottom, transparent 0%, rgba(34, 211, 238, 0.04) 50%, transparent 100% ); background-size: 100% 8px; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .sidebar-transition { transition: width .25s ease, transform .25s ease; } .sidebar-collapsed .sidebar-label, .sidebar-collapsed .sidebar-title, .sidebar-collapsed .logo-text { display: none; } .sidebar-collapsed .nav-item { justify-content: center; } .chart-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawLine 2s ease forwards; } @keyframes drawLine { to { stroke-dashoffset: 0; } } .bar { transition: height .3s ease; } .bar:hover { filter: brightness(1.4); } .status-dot { box-shadow: 0 0 10px currentColor; } </style> </head> <body class="min-h-screen text-slate-200 font-sans antialiased"> <div id="app" class="flex min-h-screen"> <!-- ========================================================= --> <!-- SIDEBAR --> <!-- ========================================================= --> <aside id="sidebar" class="sidebar-transition fixed inset-y-0 left-0 z-50 w-64 border-r border-slate-800 bg-slate-950/95 backdrop-blur-xl lg:relative" > <div class="flex h-full flex-col"> <!-- Logo --> <div class="flex h-16 items-center border-b border-slate-800 px-4"> <div class="flex items-center gap-3 min-w-0"> <div class="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-500/40 bg-cyan-500/10 shadow-glow"> <div class="h-4 w-4 rotate-45 border-2 border-cyan-400"></div> <div class="absolute h-1.5 w-1.5 rounded-full bg-cyan-300"></div> </div> <div class="logo-text"> <div class="text-sm font-bold tracking-widest text-white">SENTINEL<span class="text-cyan-400">GRID</span></div> <div class="text-[9px] uppercase tracking-[.25em] text-slate-500">Security Operations</div> </div> </div> </div> <!-- Navigation --> <nav class="flex-1 overflow-y-auto p-3"> <div class="sidebar-title mb-2 px-3 pt-2 text-[10px] font-semibold uppercase tracking-[.2em] text-slate-600"> Operations </div> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg border border-cyan-500/20 bg-cyan-500/10 px-3 py-2.5 text-sm font-medium text-cyan-300"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M3 12h4l2-7 4 14 2-7h6"/> </svg> <span class="sidebar-label">Overview</span> </a> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="1.7"/> <path stroke-width="1.7" d="M8 9h8M8 13h5M8 17h8"/> </svg> <span class="sidebar-label">Threat Detection</span> <span class="sidebar-label ml-auto rounded-full bg-rose-500/10 px-2 py-0.5 text-[10px] text-rose-400">12</span> </a> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <rect x="3" y="5" width="18" height="14" rx="2" stroke-width="1.7"/> <path stroke-width="1.7" d="M7 9h10M7 13h4"/> </svg> <span class="sidebar-label">Servers</span> </a> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="8" stroke-width="1.7"/> <circle cx="12" cy="12" r="2" stroke-width="1.7"/> <path stroke-width="1.7" d="M12 4v3M20 12h-3M12 20v-3M4 12h3"/> </svg> <span class="sidebar-label">Network</span> </a> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M4 19V5M4 19h16"/> <path stroke-width="1.7" d="M7 16l3-5 3 3 5-8"/> </svg> <span class="sidebar-label">Analytics</span> </a> <div class="sidebar-title mb-2 mt-6 px-3 text-[10px] font-semibold uppercase tracking-[.2em] text-slate-600"> Infrastructure </div> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M5 4h14v5H5zM5 15h14v5H5z"/> <path stroke-width="1.7" d="M8 7h.01M8 18h.01"/> </svg> <span class="sidebar-label">Data Centers</span> </a> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M12 3l8 4v5c0 5-3.4 7.8-8 9-4.6-1.2-8-4-8-9V7l8-4z"/> <path stroke-width="1.7" d="M9 12l2 2 4-4"/> </svg> <span class="sidebar-label">Compliance</span> </a> <a href="#" class="nav-item mb-1 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="3" stroke-width="1.7"/> <path stroke-width="1.7" d="M19.4 15a1.7 1.7 0 002.1.2l.2-.2-2-3.5a8.4 8.4 0 000-3L21.7 5l-.2-.2a1.7 1.7 0 00-2.1.2l-1.1.8a8 8 0 00-2.5-1.4L15.6 3H8.4L8.2 4.4a8 8 0 00-2.5 1.4L4.6 5a1.7 1.7 0 00-2.1-.2L2.3 5l2 3.5a8.4 8.4 0 000 3L2.3 15l.2.2a1.7 1.7 0 002.1-.2l1.1-.8a8 8 0 002.5 1.4L8.4 21h7.2l.2-1.4a8 8 0 002.5-1.4z"/> </svg> <span class="sidebar-label">Configuration</span> </a> </nav> <!-- System Node --> <div class="border-t border-slate-800 p-3"> <div class="rounded-lg border border-slate-800 bg-slate-900/70 p-3"> <div class="flex items-center gap-2"> <span class="status-dot h-2 w-2 rounded-full bg-emerald-400 text-emerald-400"></span> <span class="sidebar-label text-xs font-medium text-emerald-400">SYSTEM OPERATIONAL</span> </div> <div class="sidebar-label mt-2 text-[10px] text-slate-500"> Cluster v4.8.21 · Node SG-CORE-01 </div> </div> </div> </div> </aside> <!-- ========================================================= --> <!-- MAIN --> <!-- ========================================================= --> <main class="min-w-0 flex-1"> <!-- TOP HEADER --> <header class="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-slate-800 bg-slate-950/85 px-4 backdrop-blur-xl lg:px-6"> <div class="flex items-center gap-3"> <button id="sidebarToggle" class="rounded-lg border border-slate-800 bg-slate-900 p-2 text-slate-400 transition hover:border-slate-700 hover:text-white" aria-label="Toggle sidebar" > <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M4 6h16M4 12h16M4 18h16"/> </svg> </button> <div class="hidden sm:block"> <div class="text-sm font-semibold text-white">Security Operations Center</div> <div class="text-[10px] uppercase tracking-widest text-slate-500">Global Infrastructure / Production</div> </div> </div> <div class="flex items-center gap-3"> <div class="hidden items-center gap-2 rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 md:flex"> <span class="status-dot h-2 w-2 rounded-full bg-emerald-400 text-emerald-400"></span> <span class="text-xs font-medium text-emerald-400">ALL SYSTEMS NOMINAL</span> </div> <div class="hidden h-6 w-px bg-slate-800 md:block"></div> <button class="rounded-lg p-2 text-slate-400 hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M4 12h16M12 4v16"/> </svg> </button> <button class="relative rounded-lg p-2 text-slate-400 hover:bg-slate-800 hover:text-white"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M18 8a6 6 0 00-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"/> </svg> <span class="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-cyan-400"></span> </button> <!-- Abstract system identity, no human avatar --> <div class="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-900 px-2 py-1.5"> <div class="flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-cyan-500 to-violet-600 text-[10px] font-bold text-white"> SG </div> <span class="hidden text-xs font-medium text-slate-300 md:block">SEC-ADMIN</span> </div> </div> </header> <!-- CONTENT --> <div class="p-4 lg:p-6"> <!-- Page heading --> <section class="mb-6 flex flex-col justify-between gap-4 xl:flex-row xl:items-end"> <div> <div class="mb-2 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[.2em] text-cyan-400"> <span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span> Live telemetry </div> <h1 class="text-2xl font-bold tracking-tight text-white lg:text-3xl"> Infrastructure Overview </h1> <p class="mt-1 text-sm text-slate-500"> Real-time security posture and infrastructure performance. </p> </div> <div class="flex items-center gap-2"> <button class="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-xs font-medium text-slate-300 hover:border-slate-600 hover:text-white"> Last 24 Hours </button> <button class="rounded-lg bg-cyan-500 px-3 py-2 text-xs font-semibold text-slate-950 shadow-glow hover:bg-cyan-400"> Export Report </button> </div> </section> <!-- ===================================================== --> <!-- KPI CARDS --> <!-- ===================================================== --> <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"> <!-- KPI 1 --> <div class="glass rounded-xl p-5 shadow-cyber"> <div class="flex items-start justify-between"> <div> <p class="text-xs font-medium uppercase tracking-wider text-slate-500">Active Servers</p> <p class="mt-3 text-3xl font-bold tracking-tight text-white">248</p> </div> <div class="rounded-lg border border-cyan-500/20 bg-cyan-500/10 p-2.5 text-cyan-400"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <rect x="3" y="4" width="18" height="6" rx="1" stroke-width="1.7"/> <rect x="3" y="14" width="18" height="6" rx="1" stroke-width="1.7"/> <path stroke-width="1.7" d="M7 7h.01M7 17h.01"/> </svg> </div> </div> <div class="mt-4 flex items-center gap-2 text-xs"> <span class="font-semibold text-emerald-400">+4.8%</span> <span class="text-slate-600">vs last week</span> </div> <div class="mt-4 h-1 overflow-hidden rounded-full bg-slate-800"> <div class="h-full w-[82%] rounded-full bg-cyan-400"></div> </div> </div> <!-- KPI 2 --> <div class="glass rounded-xl p-5 shadow-cyber"> <div class="flex items-start justify-between"> <div> <p class="text-xs font-medium uppercase tracking-wider text-slate-500">Threats Blocked</p> <p class="mt-3 text-3xl font-bold tracking-tight text-white">18,429</p> </div> <div class="rounded-lg border border-rose-500/20 bg-rose-500/10 p-2.5 text-rose-400"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M12 3l8 4v5c0 5-3.4 7.8-8 9-4.6-1.2-8-4-8-9V7l8-4z"/> <path stroke-width="1.7" d="M9 12l2 2 4-4"/> </svg> </div> </div> <div class="mt-4 flex items-center gap-2 text-xs"> <span class="font-semibold text-rose-400">+12.6%</span> <span class="text-slate-600">attack activity</span> </div> <div class="mt-4 flex gap-1"> <span class="h-1 flex-1 rounded-full bg-rose-500/80"></span> <span class="h-1 flex-1 rounded-full bg-rose-500/60"></span> <span class="h-1 flex-1 rounded-full bg-rose-500/50"></span> <span class="h-1 flex-1 rounded-full bg-slate-800"></span> <span class="h-1 flex-1 rounded-full bg-slate-800"></span> </div> </div> <!-- KPI 3 --> <div class="glass rounded-xl p-5 shadow-cyber"> <div class="flex items-start justify-between"> <div> <p class="text-xs font-medium uppercase tracking-wider text-slate-500">Network Throughput</p> <p class="mt-3 text-3xl font-bold tracking-tight text-white">8.42 <span class="text-sm font-medium text-slate-500">Gb/s</span></p> </div> <div class="rounded-lg border border-violet-500/20 bg-violet-500/10 p-2.5 text-violet-400"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M4 12h4l2-7 4 14 2-7h4"/> </svg> </div> </div> <div class="mt-4 flex items-center gap-2 text-xs"> <span class="font-semibold text-violet-400">68%</span> <span class="text-slate-600">capacity utilized</span> </div> <div class="mt-4 h-1 overflow-hidden rounded-full bg-slate-800"> <div class="h-full w-[68%] rounded-full bg-violet-500"></div> </div> </div> <!-- KPI 4 --> <div class="glass rounded-xl p-5 shadow-cyber"> <div class="flex items-start justify-between"> <div> <p class="text-xs font-medium uppercase tracking-wider text-slate-500">Uptime SLA</p> <p class="mt-3 text-3xl font-bold tracking-tight text-white">99.982%</p> </div> <div class="rounded-lg border border-emerald-500/20 bg-emerald-500/10 p-2.5 text-emerald-400"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-width="1.7" d="M5 12l4 4L19 6"/> </svg> </div> </div> <div class="mt-4 flex items-center gap-2 text-xs"> <span class="font-semibold text-emerald-400">+0.012%</span> <span class="text-slate-600">above target</span> </div> <div class="mt-4 h-1 overflow-hidden rounded-full bg-slate-800"> <div class="h-full w-[99%] rounded-full bg-emerald-400"></div> </div> </div> </section> <!-- ===================================================== --> <!-- MAIN DATA GRID --> <!-- ===================================================== --> <section class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-3"> <!-- NETWORK GRAPH --> <div class="glass overflow-hidden rounded-xl xl:col-span-2"> <div class="flex items-center justify-between border-b border-slate-800 px-5 py-4"> <div> <h2 class="text-sm font-semibold text-white">Network Activity Matrix</h2> <p class="mt-1 text-[11px] text-slate-500">Real-time packet flow · 10.0.0.0/8</p> </div> <div class="flex items-center gap-4 text-[10px]"> <div class="flex items-center gap-1.5"> <span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span> <span class="text-slate-500">Normal</span> </div> <div class="flex items-center gap-1.5"> <span class="h-1.5 w-1.5 rounded-full bg-rose-400"></span> <span class="text-slate-500">Threat</span> </div> </div> </div> <div class="grid-bg relative h-[340px] overflow-hidden"> <!-- SVG network --> <svg class="absolute inset-0 h-full w-full" viewBox="0 0 900 340" preserveAspectRatio="none"> <defs> <linearGradient id="lineCyan" x1="0" x2="1"> <stop offset="0%" stop-color="#06b6d4" stop-opacity=".05"/> <stop offset="50%" stop-color="#22d3ee" stop-opacity=".9"/> <stop offset="100%" stop-color="#06b6d4" stop-opacity=".05"/> </linearGradient> <linearGradient id="lineRed" x1="0" x2="1"> <stop offset="0%" stop-color="#f43f5e" stop-opacity=".05"/> <stop offset="50%" stop-color="#fb7185" stop-opacity=".9"/> <stop offset="100%" stop-color="#f43f5e" stop-opacity=".05"/> </linearGradient> </defs> <!-- network routes --> <path d="M100 80 C250 80 300 170 450 170 S650 75 820 110" fill="none" stroke="url(#lineCyan)" stroke-width="2" class="chart-line"/> <path d="M80 250 C230 220 280 100 440 160 S620 250 820 205" fill="none" stroke="url(#lineCyan)" stroke-width="2" class="chart-line"/> <path d="M190 310 C310 240 330 190 460 175 S620 110 760 50" fill="none" stroke="url(#lineCyan)" stroke-width="1.5" class="chart-line"/> <path d="M520 160 C620 150 660 220 780 275" fill="none" stroke="url(#lineRed)" stroke-width="2" class="chart-line"/> <!-- Nodes --> <g> <circle cx="100" cy="80" r="8" fill="#020617" stroke="#22d3ee" stroke-width="2"/> <circle cx="100" cy="80" r="3" fill="#22d3ee"/> <circle cx="450" cy="170" r="13" fill="#020617" stroke="#22d3ee" stroke-width="2"/> <circle cx="450" cy="170" r="5" fill="#22d3ee"/> <circle cx="820" cy="110" r="8" fill="#020617" stroke="#22d3ee" stroke-width="2"/> <circle cx="820" cy="110" r="3" fill="#22d3ee"/> <circle cx="80" cy="250" r="7" fill="#020617" stroke="#22d3ee" stroke-width="2"/> <circle cx="80" cy="250" r="3" fill="#22d3ee"/> <circle cx="440" cy="160" r="7" fill="#020617" stroke="#22d3ee" stroke-width="2"/> <circle cx="440" cy="160" r="3" fill="#22d3ee"/> <circle cx="820" cy="205" r="8" fill="#020617" stroke="#22d3ee" stroke-width="2"/> <circle cx="820" cy="205" r="3" fill="#22d3ee"/> <circle cx="780" cy="275" r="9" fill="#020617" stroke="#fb7185" stroke-width="2"/> <circle cx="780" cy="275" r="3" fill="#fb7185"/> </g> </svg> <!-- Labels --> <div class="absolute left-[7%] top-[17%] rounded border border-slate-700 bg-slate-950/90 px-2 py-1 text-[9px] text-slate-400"> EDGE-01 </div> <div class="absolute left-[47%] top-[43%] rounded border border-cyan-500/30 bg-slate-950/90 px-2 py-1 text-[9px] text-cyan-300"> CORE-01 </div> <div class="absolute right-[6%] top-[26%] rounded border border-slate-700 bg-slate-950/90 px-2 py-1 text-[9px] text-slate-400"> DC-WEST </div> <div class="absolute right-[4%] bottom-[14%] rounded border border-rose-500/30 bg-rose-500/5 px-2 py-1 text-[9px] text-rose-300"> ANOMALY </div> <div class="absolute bottom-4 left-5 right-5 flex justify-between border-t border-slate-800 pt-3 text-[9px] uppercase tracking-widest text-slate-600"> <span>Ingress 4.21 Gb/s</span> <span>Core latency 3.2ms</span> <span>Egress 4.21 Gb/s</span> </div> </div> </div> <!-- THREAT PANEL --> <div class="glass overflow-hidden rounded-xl"> <div class="border-b border-slate-800 px-5 py-4"> <div class="flex items-center justify-between"> <div> <h2 class="text-sm font-semibold text-white">Threat Intelligence</h2> <p class="mt-1 text-[11px] text-slate-500">Events by severity</p> </div> <span class="rounded-md border border-rose-500/20 bg-rose-500/5 px-2 py-1 text-[10px] text-rose-400"> 12 ACTIVE </span> </div> </div> <div class="p-5"> <!-- threat bars --> <div class="space-y-5"> <div> <div class="mb-2 flex justify-between text-xs"> <span class="text-slate-400">Critical</span> <span class="font-mono text-rose-400">24</span> </div> <div class="h-2 rounded-full bg-slate-800"> <div class="h-full w-[18%] rounded-full bg-rose-500"></div> </div> </div> <div> <div class="mb-2 flex justify-between text-xs"> <span class="text-slate-400">High</span> <span class="font-mono text-orange-400">184</span> </div> <div class="h-2 rounded-full bg-slate-800"> <div class="h-full w-[43%] rounded-full bg-orange-500"></div> </div> </div> <div> <div class="mb-2 flex justify-between text-xs"> <span class="text-slate-400">Medium</span> <span class="font-mono text-amber-400">624</span> </div> <div class="h-2 rounded-full bg-slate-800"> <div class="h-full w-[67%] rounded-full bg-amber-400"></div> </div> </div> <div> <div class="mb-2 flex justify-between text-xs"> <span class="text-slate-400">Low</span> <span class="font-mono text-cyan-400">1,842</span> </div> <div class="h-2 rounded-full bg-slate-800"> <div class="h-full w-[89%] rounded-full bg-cyan-400"></div> </div> </div> </div> <div class="my-6 border-t border-slate-800"></div> <!-- Intelligence metrics --> <div class="grid grid-cols-2 gap-3"> <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"> <div class="text-[10px] uppercase tracking-wider text-slate-600">Blocked IPs</div> <div class="mt-1 text-lg font-bold text-white">3,291</div> <div class="mt-1 text-[10px] text-emerald-400">+8.4%</div> </div> <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"> <div class="text-[10px] uppercase tracking-wider text-slate-600">CVEs Detected</div> <div class="mt-1 text-lg font-bold text-white">47</div> <div class="mt-1 text-[10px] text-rose-400">+3 critical</div> </div> </div> <button class="mt-4 w-full rounded-lg border border-slate-700 bg-slate-900 py-2.5 text-xs font-medium text-slate-300 transition hover:border-cyan-500/40 hover:text-cyan-300"> Open Threat Center → </button> </div> </div> </section> <!-- ===================================================== --> <!-- SERVER HEALTH + TRAFFIC --> <!-- ===================================================== --> <section class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2"> <!-- SERVER HEALTH --> <div class="glass overflow-hidden rounded-xl"> <div class="flex items-center justify-between border-b border-slate-800 px-5 py-4"> <div> <h2 class="text-sm font-semibold text-white">Server Health</h2> <p class="mt-1 text-[11px] text-slate-500">Resource utilization across critical nodes</p> </div> <span class="text-[10px] font-medium text-emerald-400">248 ONLINE</span> </div> <div class="divide-y divide-slate-800"> <!-- Server --> <div class="flex items-center gap-4 px-5 py-4"> <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-500/20 bg-cyan-500/5 text-cyan-400"> <span class="font-mono text-xs">01</span> </div> <div class="min-w-0 flex-1"> <div class="flex items-center justify-between"> <span class="truncate text-xs font-medium text-slate-200">SG-CORE-01</span> <span class="text-[10px] text-emerald-400">ONLINE</span> </div> <div class="mt-2 h-1.5 rounded-full bg-slate-800"> <div class="h-full w-[41%] rounded-full bg-cyan-400"></div> </div> <div class="mt-1 flex justify-between text-[9px] text-slate-600"> <span>CPU 41%</span> <span>RAM 62%</span> </div> </div> </div> <div class="flex items-center gap-4 px-5 py-4"> <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-violet-500/20 bg-violet-500/5 text-violet-400"> <span class="font-mono text-xs">02</span> </div> <div class="min-w-0 flex-1"> <div class="flex items-center justify-between"> <span class="truncate text-xs font-medium text-slate-200">SG-DB-04</span> <span class="text-[10px] text-emerald-400">ONLINE</span> </div> <div class="mt-2 h-1.5 rounded-full bg-slate-800"> <div class="h-full w-[72%] rounded-full bg-violet-400"></div> </div> <div class="mt-1 flex justify-between text-[9px] text-slate-600"> <span>CPU 72%</span> <span>RAM 78%</span> </div> </div> </div> <div class="flex items-center gap-4 px-5 py-4"> <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-emerald-500/20 bg-emerald-500/5 text-emerald-400"> <span class="font-mono text-xs">03</span> </div> <div class="min-w-0 flex-1"> <div class="flex items-center justify-between"> <span class="truncate text-xs font-medium text-slate-200">SG-WEB-12</span> <span class="text-[10px] text-emerald-400">ONLINE</span> </div> <div class="mt-2 h-1.5 rounded-full bg-slate-800"> <div class="h-full w-[28%] rounded-full bg-emerald-400"></div> </div> <div class="mt-1 flex justify-between text-[9px] text-slate-600"> <span>CPU 28%</span> <span>RAM 48%</span> </div> </div> </div> </div> </div> <!-- TRAFFIC ANALYTICS --> <div class="glass overflow-hidden rounded-xl"> <div class="flex items-center justify-between border-b border-slate-800 px-5 py-4"> <div> <h2 class="text-sm font-semibold text-white">Traffic Analytics</h2> <p class="mt-1 text-[11px] text-slate-500">Requests per 60-minute interval</p> </div> <div class="flex items-center gap-2"> <span class="h-2 w-2 rounded-sm bg-cyan-400"></span> <span class="text-[10px] text-slate-500">Requests</span> </div> </div> <div class="p-5"> <div class="flex h-48 items-end gap-2 border-b border-l border-slate-800 px-2"> <div class="bar w-full rounded-t bg-cyan-500/30" style="height:34%"></div> <div class="bar w-full rounded-t bg-cyan-500/40" style="height:48%"></div> <div class="bar w-full rounded-t bg-cyan-500/50" style="height:42%"></div> <div class="bar w-full rounded-t bg-cyan-500/50" style="height:61%"></div> <div class="bar w-full rounded-t bg-cyan-500/60" style="height:54%"></div> <div class="bar w-full rounded-t bg-cyan-500/70" style="height:77%"></div> <div class="bar w-full rounded-t bg-cyan-500/80" style="height:68%"></div> <div class="bar w-full rounded-t bg-cyan-400" style="height:91%"></div> <div class="bar w-full rounded-t bg-cyan-500/80" style="height:74%"></div> <div class="bar w-full rounded-t bg-cyan-500/70" style="height:83%"></div> <div class="bar w-full rounded-t bg-cyan-500/60" style="height:57%"></div> <div class="bar w-full rounded-t bg-cyan-500/40" style="height:47%"></div> <div class="bar w-full rounded-t bg-cyan-500/30" style="height:31%"></div> <div class="bar w-full rounded-t bg-cyan-500/40" style="height:44%"></div> <div class="bar w-full rounded-t bg-cyan-500/60" style="height:69%"></div> <div class="bar w-full rounded-t bg-cyan-400" style="height:88%"></div> </div> <div class="mt-3 flex justify-between text-[9px] font-mono text-slate-600"> <span>00:00</span> <span>06:00</span> <span>12:00</span> <span>18:00</span> <span>NOW</span> </div> <div class="mt-5 grid grid-cols-3 gap-3"> <div> <div class="text-[9px] uppercase tracking-wider text-slate-600">Peak</div> <div class="mt-1 text-sm font-bold text-white">12.8M</div> </div> <div> <div class="text-[9px] uppercase tracking-wider text-slate-600">Average</div> <div class="mt-1 text-sm font-bold text-white">8.4M</div> </div> <div> <div class="text-[9px] uppercase tracking-wider text-slate-600">Blocked</div> <div class="mt-1 text-sm font-bold text-rose-400">1.2M</div> </div> </div> </div> </div> </section> <!-- ===================================================== --> <!-- ACTIVITY TABLE --> <!-- ===================================================== --> <section class="glass mt-6 overflow-hidden rounded-xl"> <div class="flex flex-col justify-between gap-3 border-b border-slate-800 px-5 py-4 sm:flex-row sm:items-center"> <div> <h2 class="text-sm font-semibold text-white">Recent System Activity</h2> <p class="mt-1 text-[11px] text-slate-500">Live infrastructure and security event stream</p> </div> <div class="flex items-center gap-2"> <div class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950 px-2.5 py-1.5"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> <span class="text-[10px] text-slate-500">LIVE</span> </div> <button class="rounded-md border border-slate-700 px-3 py-1.5 text-[10px] text-slate-400 hover:text-white"> View All </button> </div> </div> <div class="overflow-x-auto"> <table class="w-full min-w-[850px] text-left"> <thead class="bg-slate-950/70"> <tr class="border-b border-slate-800"> <th class="px-5 py-3 text-[10px] font-semibold uppercase tracking-wider text-slate-600">Timestamp</th> <th class="px-5 py-3 text-[10px] font-semibold uppercase tracking-wider text-slate-600">Event ID</th> <th class="px-5 py-3 text-[10px] font-semibold uppercase tracking-wider text-slate-600">Node</th> <th class="px-5 py-3 text-[10px] font-semibold uppercase tracking-wider text-slate-600">Event</th> <th class="px-5 py-3 text-[10px] font-semibold uppercase tracking-wider text-slate-600">Severity</th> <th class="px-5 py-3 text-[10px] font-semibold uppercase tracking-wider text-slate-600">Status</th> </tr> </thead> <tbody class="divide-y divide-slate-800"> <tr class="transition hover:bg-slate-800/30"> <td class="px-5 py-4 font-mono text-[11px] text-slate-500">09:08:41.882</td> <td class="px-5 py-4 font-mono text-[11px] text-cyan-400">EVT-9F21A</td> <td class="px-5 py-4 text-xs text-slate-300">EDGE-07</td> <td class="px-5 py-4 text-xs text-slate-400">Inbound connection anomaly detected</td> <td class="px-5 py-4"> <span class="rounded-md bg-rose-500/10 px-2 py-1 text-[9px] font-semibold text-rose-400">HIGH</span> </td> <td class="px-5 py-4"> <span class="flex items-center gap-1.5 text-[10px] text-emerald-400"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> BLOCKED </span> </td> </tr> <tr class="transition hover:bg-slate-800/30"> <td class="px-5 py-4 font-mono text-[11px] text-slate-500">09:07:29.341</td> <td class="px-5 py-4 font-mono text-[11px] text-cyan-400">EVT-9F20C</td> <td class="px-5 py-4 text-xs text-slate-300">SG-DB-04</td> <td class="px-5 py-4 text-xs text-slate-400">Database backup completed</td> <td class="px-5 py-4"> <span class="rounded-md bg-cyan-500/10 px-2 py-1 text-[9px] font-semibold text-cyan-400">INFO</span> </td> <td class="px-5 py-4"> <span class="flex items-center gap-1.5 text-[10px] text-emerald-400"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> SUCCESS </span> </td> </tr> <tr class="transition hover:bg-slate-800/30"> <td class="px-5 py-4 font-mono text-[11px] text-slate-500">09:05:18.720</td> <td class="px-5 py-4 font-mono text-[11px] text-cyan-400">EVT-9F1D2</td> <td class="px-5 py-4 text-xs text-slate-300">CORE-01</td> <td class="px-5 py-4 text-xs text-slate-400">TLS certificate rotation initiated</td> <td class="px-5 py-4"> <span class="rounded-md bg-amber-500/10 px-2 py-1 text-[9px] font-semibold text-amber-400">MEDIUM</span> </td> <td class="px-5 py-4"> <span class="flex items-center gap-1.5 text-[10px] text-cyan-400"> <span class="h-1.5 w-1.5 rounded-full bg-cyan-400 pulse"></span> RUNNING </span> </td> </tr> <tr class="transition hover:bg-slate-800/30"> <td class="px-5 py-4 font-mono text-[11px] text-slate-500">09:03:02.114</td> <td class="px-5 py-4 font-mono text-[11px] text-cyan-400">EVT-9F18B</td> <td class="px-5 py-4 text-xs text-slate-300">WAF-03</td> <td class="px-5 py-4 text-xs text-slate-400">SQL injection signature blocked</td> <td class="px-5 py-4"> <span class="rounded-md bg-rose-500/10 px-2 py-1 text-[9px] font-semibold text-rose-400">CRITICAL</span> </td> <td class="px-5 py-4"> <span class="flex items-center gap-1.5 text-[10px] text-emerald-400"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> MITIGATED </span> </td> </tr> <tr class="transition hover:bg-slate-800/30"> <td class="px-5 py-4 font-mono text-[11px] text-slate-500">09:01:47.905</td> <td class="px-5 py-4 font-mono text-[11px] text-cyan-400">EVT-9F15E</td> <td class="px-5 py-4 text-xs text-slate-300">SG-WEB-12</td> <td class="px-5 py-4 text-xs text-slate-400">Application deployment completed</td> <td class="px-5 py-4"> <span class="rounded-md bg-cyan-500/10 px-2 py-1 text-[9px] font-semibold text-cyan-400">INFO</span> </td> <td class="px-5 py-4"> <span class="flex items-center gap-1.5 text-[10px] text-emerald-400"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> SUCCESS </span> </td> </tr> </tbody> </table> </div> <div class="flex items-center justify-between border-t border-slate-800 bg-slate-950/40 px-5 py-3"> <span class="text-[10px] text-slate-600">Showing 5 of 248 recent events</span> <div class="flex gap-1"> <button class="rounded border border-slate-800 px-2 py-1 text-[10px] text-slate-600">←</button> <button class="rounded border border-cyan-500/30 bg-cyan-500/10 px-2 py-1 text-[10px] text-cyan-400">1</button> <button class="rounded border border-slate-800 px-2 py-1 text-[10px] text-slate-500">2</button> <button class="rounded border border-slate-800 px-2 py-1 text-[10px] text-slate-500">3</button> <button class="rounded border border-slate-800 px-2 py-1 text-[10px] text-slate-600">→</button> </div> </div> </section> <!-- FOOTER --> <footer class="mt-6 flex flex-col justify-between gap-2 border-t border-slate-900 pt-5 text-[10px] text-slate-600 sm:flex-row"> <span>SentinelGrid Security Platform · Enterprise Edition</span> <div class="flex gap-4"> <span>API v4.8</span> <span>Telemetry: ACTIVE</span> <span>Encryption: AES-256</span> </div> </footer> </div> </main> </div> <!-- =========================================================== --> <!-- JAVASCRIPT --> <!-- =========================================================== --> <script> const app = document.getElementById("app"); const sidebar = document.getElementById("sidebar"); const toggle = document.getElementById("sidebarToggle"); toggle.addEventListener("click", () => { if (window.innerWidth >= 1024) { app.classList.toggle("sidebar-collapsed"); sidebar.classList.toggle("w-64"); sidebar.classList.toggle("w-20"); } else { sidebar.classList.toggle("-translate-x-full"); } }); // Mobile default function handleResize() { if (window.innerWidth < 1024) { sidebar.classList.add("-translate-x-full"); } else { sidebar.classList.remove("-translate-x-full"); } } window.addEventListener("resize", handleResize); handleResize(); // Simulated live telemetry refresh const timestamps = document.querySelectorAll("tbody td:first-child"); setInterval(() => { const now = new Date(); const time = now.toTimeString().split(" ")[0]; if (timestamps.length) { timestamps[0].textContent = time + "." + String(Math.floor(Math.random() * 999)).padStart(3, "0"); } }, 5000); </script> </body> </html> ```
GPT

Dark Mode Saas Dashboard Coder

Add to Cart
PromptBase Select
Get this prompt + 9 more with SelectFrom $14/mo · Cancel anytimeFrom $14/mo · Cancel anytime
View Select
Instant accessInstant access
Usage rightsCommercial use
Money-back guaranteeMoney‑back
By purchasing this prompt, you agree to our terms of service
GPT-5.6
Tested icon
Guide icon
4 examples icon
Free credits icon
Generates a complete, responsive dark-mode B2B SaaS dashboard using HTML and Tailwind CSS. Strictly data-centric UI with zero human illustrations or avatars. Perfect for developers.
...more
Added 6 days ago
Report
Browse Marketplace