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>
```
Get this prompt + 9 more with SelectFrom $14/mo · Cancel anytimeFrom $14/mo · Cancel anytime
View SelectBy purchasing this prompt, you agree to our terms of service
GPT-5.6
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
