devops dashboard deployment monitoring logs dark developer infrastructure sidebar dark
DevOps Dashboard
Dark developer operations dashboard with sidebar nav, service cards, deployment table, metrics, live logs, and environment variables.
dark Responsive
Live Preview
Sections
topbarsidebartabsservicesdeploymentsmetricslogsenvironment
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>typeui.sh — Deployments</title>
<meta name="description" content="DevOps deployment dashboard for monitoring services, deployments, metrics, and logs.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&family=JetBrains+Mono:wght@400&display=swap');
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: #09090B;
color: #FAFAFA;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
code, .mono { font-family: 'JetBrains Mono', monospace; }
/* ── Layout ───────────────────────────────────────────────── */
.layout {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 48px 1fr;
min-height: 100vh;
}
/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
/* ── Status badge ─────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px; border-radius: 4px;
font-size: 11px; font-weight: 500; font-family: 'JetBrains Mono', monospace;
}
.badge-ready { background: rgba(34,197,94,0.12); color: #4ADE80; }
.badge-building { background: rgba(234,179,8,0.12); color: #FDE047; }
.badge-failed { background: rgba(239,68,68,0.12); color: #F87171; }
.badge-queued { background: rgba(148,163,184,0.1); color: #94A3B8; }
/* ── Service card ─────────────────────────────────────────── */
.service-card {
background: #111113;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 16px;
transition: border-color 0.15s ease;
}
.service-card:hover { border-color: rgba(255,255,255,0.15); }
/* ── Metric card ──────────────────────────────────────────── */
.metric-card {
background: #111113;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 16px 20px;
}
/* ── Sparkline ────────────────────────────────────────────── */
.sparkline-bar {
display: inline-block;
width: 3px;
border-radius: 2px;
background: #3B82F6;
vertical-align: bottom;
opacity: 0.7;
}
/* ── Log line ─────────────────────────────────────────────── */
.log-line {
display: flex; gap: 12px; padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 11.5px; line-height: 1.6;
}
.log-line:last-child { border-bottom: none; }
.log-ts { color: rgba(255,255,255,0.25); white-space: nowrap; }
.log-info { color: #60A5FA; }
.log-warn { color: #FDE047; }
.log-error { color: #F87171; }
.log-success { color: #4ADE80; }
/* ── Env row ──────────────────────────────────────────────── */
.env-row {
display: grid; grid-template-columns: 200px 1fr auto;
align-items: center; gap: 12px;
padding: 9px 14px; border-radius: 7px; font-size: 12px;
transition: background 0.12s ease;
}
.env-row:hover { background: rgba(255,255,255,0.03); }
/* ── Nav item ─────────────────────────────────────────────── */
.nav-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border-radius: 6px;
font-size: 13px; color: rgba(255,255,255,0.5);
cursor: pointer; text-decoration: none;
transition: background 0.1s ease, color 0.1s ease;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.nav-item.active { background: rgba(255,255,255,0.08); color: #FAFAFA; }
/* ── Tab ──────────────────────────────────────────────────── */
.tab {
padding: 10px 14px; font-size: 13px;
color: rgba(255,255,255,0.4); border-bottom: 2px solid transparent;
cursor: pointer; white-space: nowrap; text-decoration: none;
transition: color 0.12s ease, border-color 0.12s ease;
}
.tab:hover { color: rgba(255,255,255,0.75); }
.tab.active { color: #FAFAFA; border-bottom-color: #FAFAFA; }
/* ── Section panel ────────────────────────────────────────── */
.panel {
background: #111113;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
overflow: hidden;
}
.panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.07);
font-size: 13px; font-weight: 500;
}
/* ── Mini bar chart ───────────────────────────────────────── */
.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.bar-chart-bar {
flex: 1; border-radius: 3px 3px 0 0;
background: rgba(59,130,246,0.5);
min-height: 4px;
transition: background 0.12s;
}
.bar-chart-bar:hover { background: rgba(59,130,246,0.85); }
/* ── Progress bar ─────────────────────────────────────────── */
.progress-track {
height: 5px; border-radius: 99px;
background: rgba(255,255,255,0.08); overflow: hidden;
}
.progress-fill {
height: 100%; border-radius: 99px;
transition: width 0.3s ease;
}
/* ── Dot status ───────────────────────────────────────────── */
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #4ADE80; }
.dot-yellow { background: #FDE047; }
.dot-red { background: #F87171; }
.dot-gray { background: #52525B; }
@media (max-width: 768px) {
.layout { grid-template-columns: 1fr; grid-template-rows: 48px auto 1fr; }
.sidebar { display: none; }
}
</style>
</head>
<body>
<div class="layout">
<!-- ── Top bar ───────────────────────────────────────────────────────────── -->
<header class="flex items-center justify-between px-4 border-b" style="grid-column:1/-1;border-color:rgba(255,255,255,0.08);background:#09090B">
<div class="flex items-center gap-3">
<!-- Logo -->
<div style="width:22px;height:22px;background:#FAFAFA;border-radius:5px;display:flex;align-items:center;justify-content:center">
<span style="font-size:11px;font-weight:700;color:#09090B">t</span>
</div>
<span style="font-size:13px;color:rgba(255,255,255,0.5)">/</span>
<span style="font-size:13px;font-weight:500">typeui.sh</span>
<span style="font-size:13px;color:rgba(255,255,255,0.5)">/</span>
<span style="font-size:13px;color:rgba(255,255,255,0.5)">project</span>
</div>
<div class="flex items-center gap-2">
<button style="padding:4px 12px;border-radius:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);font-size:12px;color:rgba(255,255,255,0.6);cursor:pointer">Deploy</button>
<div style="width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#7C6AF5,#A78BFA);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;cursor:pointer">J</div>
</div>
</header>
<!-- ── Sidebar ───────────────────────────────────────────────────────────── -->
<aside class="sidebar flex flex-col py-4 px-3 border-r" style="border-color:rgba(255,255,255,0.08);background:#09090B" aria-label="Project navigation">
<nav class="space-y-0.5" aria-label="Main">
<a href="#overview" class="nav-item active" aria-current="page">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><rect x="1" y="1" width="5" height="5" rx="1.5" fill="currentColor" opacity=".6"/><rect x="8" y="1" width="5" height="5" rx="1.5" fill="currentColor"/><rect x="1" y="8" width="5" height="5" rx="1.5" fill="currentColor" opacity=".4"/><rect x="8" y="8" width="5" height="5" rx="1.5" fill="currentColor" opacity=".6"/></svg>
Overview
</a>
<a href="#deployments" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M7 1v8M4 6l3 3 3-3M2 11h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
Deployments
</a>
<a href="#logs" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M2 4h10M2 7h7M2 10h5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
Logs
</a>
<a href="#metrics" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1 11l3-4 3 2 3-5 2 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
Metrics
</a>
<a href="#env" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><rect x="2" y="3" width="10" height="8" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5 7h4M7 5v4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
Environment
</a>
</nav>
<div style="margin-top:16px;border-top:1px solid rgba(255,255,255,0.07);padding-top:16px">
<nav class="space-y-0.5" aria-label="Project">
<a href="#" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.2"/><path d="M7 4v3l2 1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
Activity
</a>
<a href="#" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M7 1a6 6 0 1 0 0 12A6 6 0 0 0 7 1zM7 4v3l2 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
Domains
</a>
<a href="#" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M7 1l1.5 4H13L9.5 8l1.5 4L7 10l-4 2 1.5-4L1 5h4.5L7 1z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
Integrations
</a>
<a href="#" class="nav-item">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M7 1v2M7 11v2M1 7h2M11 7h2M2.8 2.8l1.4 1.4M9.8 9.8l1.4 1.4M2.8 11.2l1.4-1.4M9.8 4.2l1.4-1.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
Settings
</a>
</nav>
</div>
<!-- Team -->
<div style="margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,0.07)">
<p style="font-size:10px;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;padding:0 10px">Team</p>
<div class="flex -space-x-1.5 px-2">
<div style="width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7C6AF5,#A78BFA);border:1.5px solid #09090B;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600" title="Julia">J</div>
<div style="width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#F59E0B,#EF4444);border:1.5px solid #09090B;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600" title="Marcus">M</div>
<div style="width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#10B981,#3B82F6);border:1.5px solid #09090B;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600" title="Anna">A</div>
<div style="width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.08);border:1.5px solid #09090B;font-size:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.4)">+2</div>
</div>
</div>
</aside>
<!-- ── Main content ───────────────────────────────────────────────────────── -->
<main style="overflow-y:auto;background:#09090B" aria-label="Dashboard content">
<!-- Tab bar -->
<div class="flex border-b px-6 overflow-x-auto" style="border-color:rgba(255,255,255,0.08)">
<a href="#overview" class="tab active">Overview</a>
<a href="#deployments" class="tab">Deployments</a>
<a href="#logs" class="tab">Logs</a>
<a href="#metrics" class="tab">Metrics</a>
<a href="#env" class="tab">Environment</a>
<a href="#" class="tab">Domains</a>
<a href="#" class="tab">Settings</a>
</div>
<div class="p-6 space-y-6" id="overview">
<!-- ── Services row ────────────────────────────────────── -->
<section aria-labelledby="services-heading">
<div class="flex items-center justify-between mb-3">
<h2 id="services-heading" class="text-sm font-medium">Services</h2>
<button style="font-size:12px;color:rgba(255,255,255,0.4);padding:4px 10px;border-radius:6px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);cursor:pointer">+ Add service</button>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px">
<!-- Service: react-app -->
<article class="service-card" aria-label="react-app service">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-2">
<div style="width:28px;height:28px;background:#1E1E2E;border-radius:7px;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:13px">⚛</div>
<div>
<p style="font-size:13px;font-weight:500">react-app</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">typeui.vercel.app</p>
</div>
</div>
<span class="badge badge-ready">
<span class="dot dot-green" aria-hidden="true"></span>Ready
</span>
</div>
<div class="flex items-center gap-2" style="font-size:11px;color:rgba(255,255,255,0.35)">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3v3l2 1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
2 min ago · feat: dark mode toggle
</div>
</article>
<!-- Service: api-gateway -->
<article class="service-card" aria-label="api-gateway service">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-2">
<div style="width:28px;height:28px;background:#1E2E1E;border-radius:7px;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:13px">⬡</div>
<div>
<p style="font-size:13px;font-weight:500">api-gateway</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">api.production.app</p>
</div>
</div>
<span class="badge badge-ready">
<span class="dot dot-green" aria-hidden="true"></span>Ready
</span>
</div>
<div class="flex items-center gap-2" style="font-size:11px;color:rgba(255,255,255,0.35)">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3v3l2 1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
18 min ago · fix: rate limit headers
</div>
</article>
<!-- Service: auth-service — building -->
<article class="service-card" aria-label="auth-service service">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-2">
<div style="width:28px;height:28px;background:#2E1E1E;border-radius:7px;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:13px">🔐</div>
<div>
<p style="font-size:13px;font-weight:500">auth-service</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">auth.production.app</p>
</div>
</div>
<span class="badge badge-building">
<span class="dot dot-yellow" aria-hidden="true"></span>Building
</span>
</div>
<div class="flex items-center gap-2" style="font-size:11px;color:rgba(255,255,255,0.35)">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3v3l2 1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
Just now · chore: upgrade jose to 5.x
</div>
</article>
<!-- Service: worker-queue — failed -->
<article class="service-card" aria-label="worker-queue service">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-2">
<div style="width:28px;height:28px;background:#2E2E1E;border-radius:7px;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:13px">⚙</div>
<div>
<p style="font-size:13px;font-weight:500">worker-queue</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">internal</p>
</div>
</div>
<span class="badge badge-failed">
<span class="dot dot-red" aria-hidden="true"></span>Failed
</span>
</div>
<div class="flex items-center gap-2" style="font-size:11px;color:rgba(255,255,255,0.35)">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3v3l2 1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1 hr ago · refactor: job retry logic
</div>
</article>
</div>
</section>
<!-- ── Two-col: Deployments + Metrics ─────────────────── -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<!-- Deployments table -->
<section class="panel" id="deployments" aria-labelledby="deploy-heading">
<div class="panel-header">
<h2 id="deploy-heading">Recent Deployments</h2>
<a href="#" style="font-size:12px;color:rgba(255,255,255,0.35);text-decoration:none">View all →</a>
</div>
<table style="width:100%;border-collapse:collapse" role="table">
<thead>
<tr style="border-bottom:1px solid rgba(255,255,255,0.07)">
<th style="padding:8px 16px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.3);text-align:left">Commit</th>
<th style="padding:8px 16px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.3);text-align:left">Status</th>
<th style="padding:8px 16px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.3);text-align:left">Branch</th>
<th style="padding:8px 16px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.3);text-align:right">Time</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid rgba(255,255,255,0.05)">
<td style="padding:10px 16px">
<p style="font-size:12px;font-weight:500">feat: dark mode toggle</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">a3f9c12</p>
</td>
<td style="padding:10px 16px"><span class="badge badge-ready"><span class="dot dot-green" aria-hidden="true"></span>Ready</span></td>
<td style="padding:10px 16px"><span class="mono" style="font-size:11px;color:rgba(255,255,255,0.4)">main</span></td>
<td style="padding:10px 16px;text-align:right;font-size:11px;color:rgba(255,255,255,0.3)">2m</td>
</tr>
<tr style="border-bottom:1px solid rgba(255,255,255,0.05)">
<td style="padding:10px 16px">
<p style="font-size:12px;font-weight:500">fix: rate limit headers</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">b7d1e88</p>
</td>
<td style="padding:10px 16px"><span class="badge badge-ready"><span class="dot dot-green" aria-hidden="true"></span>Ready</span></td>
<td style="padding:10px 16px"><span class="mono" style="font-size:11px;color:rgba(255,255,255,0.4)">main</span></td>
<td style="padding:10px 16px;text-align:right;font-size:11px;color:rgba(255,255,255,0.3)">18m</td>
</tr>
<tr style="border-bottom:1px solid rgba(255,255,255,0.05)">
<td style="padding:10px 16px">
<p style="font-size:12px;font-weight:500">chore: upgrade jose to 5.x</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">c2a4f61</p>
</td>
<td style="padding:10px 16px"><span class="badge badge-building"><span class="dot dot-yellow" aria-hidden="true"></span>Building</span></td>
<td style="padding:10px 16px"><span class="mono" style="font-size:11px;color:rgba(255,255,255,0.4)">main</span></td>
<td style="padding:10px 16px;text-align:right;font-size:11px;color:rgba(255,255,255,0.3)">now</td>
</tr>
<tr style="border-bottom:1px solid rgba(255,255,255,0.05)">
<td style="padding:10px 16px">
<p style="font-size:12px;font-weight:500">refactor: job retry logic</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">d9b3a74</p>
</td>
<td style="padding:10px 16px"><span class="badge badge-failed"><span class="dot dot-red" aria-hidden="true"></span>Failed</span></td>
<td style="padding:10px 16px"><span class="mono" style="font-size:11px;color:rgba(255,255,255,0.4)">worker</span></td>
<td style="padding:10px 16px;text-align:right;font-size:11px;color:rgba(255,255,255,0.3)">1h</td>
</tr>
<tr>
<td style="padding:10px 16px">
<p style="font-size:12px;font-weight:500">perf: lazy load images</p>
<p class="mono" style="font-size:10px;color:rgba(255,255,255,0.3)">e5c7b20</p>
</td>
<td style="padding:10px 16px"><span class="badge badge-ready"><span class="dot dot-green" aria-hidden="true"></span>Ready</span></td>
<td style="padding:10px 16px"><span class="mono" style="font-size:11px;color:rgba(255,255,255,0.4)">main</span></td>
<td style="padding:10px 16px;text-align:right;font-size:11px;color:rgba(255,255,255,0.3)">3h</td>
</tr>
</tbody>
</table>
</section>
<!-- System metrics -->
<section aria-labelledby="metrics-heading" id="metrics">
<h2 id="metrics-heading" class="text-sm font-medium mb-3">System Metrics</h2>
<div class="space-y-3">
<!-- CPU -->
<div class="metric-card">
<div class="flex items-center justify-between mb-2">
<span style="font-size:12px;color:rgba(255,255,255,0.5)">CPU Usage</span>
<span class="tabular-nums" style="font-size:13px;font-weight:500;color:#60A5FA">65%</span>
</div>
<div class="progress-track mb-3">
<div class="progress-fill" style="width:65%;background:linear-gradient(90deg,#3B82F6,#60A5FA)"></div>
</div>
<div class="bar-chart" aria-hidden="true">
<div class="bar-chart-bar" style="height:40%"></div>
<div class="bar-chart-bar" style="height:55%"></div>
<div class="bar-chart-bar" style="height:45%"></div>
<div class="bar-chart-bar" style="height:70%"></div>
<div class="bar-chart-bar" style="height:60%"></div>
<div class="bar-chart-bar" style="height:80%"></div>
<div class="bar-chart-bar" style="height:65%;background:rgba(96,165,250,0.8)"></div>
</div>
</div>
<!-- Memory -->
<div class="metric-card">
<div class="flex items-center justify-between mb-2">
<span style="font-size:12px;color:rgba(255,255,255,0.5)">Memory</span>
<span class="tabular-nums" style="font-size:13px;font-weight:500;color:#A78BFA">82%</span>
</div>
<div class="progress-track mb-3">
<div class="progress-fill" style="width:82%;background:linear-gradient(90deg,#7C3AED,#A78BFA)"></div>
</div>
<div class="bar-chart" aria-hidden="true">
<div class="bar-chart-bar" style="height:75%;background:rgba(167,139,250,0.5)"></div>
<div class="bar-chart-bar" style="height:78%;background:rgba(167,139,250,0.5)"></div>
<div class="bar-chart-bar" style="height:80%;background:rgba(167,139,250,0.5)"></div>
<div class="bar-chart-bar" style="height:79%;background:rgba(167,139,250,0.5)"></div>
<div class="bar-chart-bar" style="height:81%;background:rgba(167,139,250,0.5)"></div>
<div class="bar-chart-bar" style="height:83%;background:rgba(167,139,250,0.5)"></div>
<div class="bar-chart-bar" style="height:82%;background:rgba(167,139,250,0.8)"></div>
</div>
</div>
<!-- Network -->
<div class="metric-card">
<div class="flex items-center justify-between">
<span style="font-size:12px;color:rgba(255,255,255,0.5)">Network</span>
<span class="tabular-nums" style="font-size:13px;font-weight:500;color:#4ADE80">1.4k <span style="font-size:11px;color:rgba(255,255,255,0.3)">req/s</span></span>
</div>
<div class="flex items-center gap-4 mt-2" style="font-size:11px;color:rgba(255,255,255,0.3)">
<span>↓ 2.3 MB/s</span>
<span>↑ 0.8 MB/s</span>
<span style="color:#4ADE80;margin-left:auto">99.98% uptime</span>
</div>
</div>
</div>
</section>
</div>
<!-- ── Live Logs ────────────────────────────────────────── -->
<section class="panel" id="logs" aria-labelledby="logs-heading">
<div class="panel-header">
<div class="flex items-center gap-2">
<h2 id="logs-heading">Live Logs</h2>
<span style="display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#4ADE80;background:rgba(74,222,128,0.1);padding:2px 8px;border-radius:4px">
<span style="width:5px;height:5px;background:#4ADE80;border-radius:50%" aria-hidden="true"></span>
Live
</span>
</div>
<div class="flex items-center gap-2">
<select style="font-size:11px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:3px 8px;color:rgba(255,255,255,0.5);cursor:pointer">
<option>All services</option>
<option>react-app</option>
<option>api-gateway</option>
</select>
</div>
</div>
<div class="mono" style="padding:12px 16px;max-height:220px;overflow-y:auto;background:#070709">
<div class="log-line">
<span class="log-ts">04-11 22:03:41.221</span>
<span class="log-success">[api-gateway]</span>
<span style="color:rgba(255,255,255,0.6)">Server listening on :8080</span>
</div>
<div class="log-line">
<span class="log-ts">04-11 22:03:41.449</span>
<span class="log-info">[api-gateway]</span>
<span style="color:rgba(255,255,255,0.6)">POST /api/auth/login <span style="color:#4ADE80">200</span> 42ms</span>
</div>
<div class="log-line">
<span class="log-ts">04-11 22:03:42.112</span>
<span class="log-info">[api-gateway]</span>
<span style="color:rgba(255,255,255,0.6)">GET /api/users <span style="color:#4ADE80">200</span> 18ms</span>
</div>
<div class="log-line">
<span class="log-ts">04-11 22:03:42.880</span>
<span class="log-warn">[worker-queue]</span>
<span style="color:rgba(255,255,255,0.6)">Job <span style="color:#FDE047">retry-3</span> failed: connection timeout</span>
</div>
<div class="log-line">
<span class="log-ts">04-11 22:03:43.004</span>
<span class="log-error">[worker-queue]</span>
<span style="color:rgba(255,255,255,0.6)">Max retries exceeded for job <span style="color:#F87171">job_4829af</span></span>
</div>
<div class="log-line">
<span class="log-ts">04-11 22:03:43.211</span>
<span class="log-info">[api-gateway]</span>
<span style="color:rgba(255,255,255,0.6)">GET /api/deployments <span style="color:#4ADE80">200</span> 7ms</span>
</div>
<div class="log-line">
<span class="log-ts">04-11 22:03:44.331</span>
<span class="log-success">[auth-service]</span>
<span style="color:rgba(255,255,255,0.6)">Build started: c2a4f61</span>
</div>
<div class="log-line">
<span class="log-ts">04-11 22:03:44.890</span>
<span class="log-info">[react-app]</span>
<span style="color:rgba(255,255,255,0.6)">GET / <span style="color:#4ADE80">200</span> 3ms — 1 client</span>
</div>
</div>
</section>
<!-- ── Environment Variables ────────────────────────────── -->
<section class="panel" id="env" aria-labelledby="env-heading">
<div class="panel-header">
<h2 id="env-heading">Environment Variables</h2>
<button style="font-size:12px;color:rgba(255,255,255,0.4);padding:4px 10px;border-radius:6px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);cursor:pointer">+ Add variable</button>
</div>
<div style="padding:8px">
<div class="env-row">
<code style="font-size:12px;color:#A78BFA">DATABASE_URL</code>
<code style="font-size:12px;color:rgba(255,255,255,0.25)">postgres://•••••••@db.prod:5432/app</code>
<button style="font-size:11px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:2px 8px;cursor:pointer">Edit</button>
</div>
<div class="env-row">
<code style="font-size:12px;color:#A78BFA">JWT_SECRET</code>
<code style="font-size:12px;color:rgba(255,255,255,0.25)">••••••••••••••••••••••••••••••••</code>
<button style="font-size:11px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:2px 8px;cursor:pointer">Edit</button>
</div>
<div class="env-row">
<code style="font-size:12px;color:#A78BFA">STRIPE_SECRET_KEY</code>
<code style="font-size:12px;color:rgba(255,255,255,0.25)">sk_live_••••••••••••••••••••••••</code>
<button style="font-size:11px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:2px 8px;cursor:pointer">Edit</button>
</div>
<div class="env-row">
<code style="font-size:12px;color:#60A5FA">NEXT_PUBLIC_API_URL</code>
<code style="font-size:12px;color:rgba(255,255,255,0.4)">https://api.production.app</code>
<button style="font-size:11px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:2px 8px;cursor:pointer">Edit</button>
</div>
<div class="env-row">
<code style="font-size:12px;color:#60A5FA">NODE_ENV</code>
<code style="font-size:12px;color:#4ADE80">production</code>
<button style="font-size:11px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:2px 8px;cursor:pointer">Edit</button>
</div>
</div>
</section>
</div>
</main>
</div>
</body>
</html>
Dark DevOps dashboard for monitoring deployments, metrics, and logs. Two-column layout with icon sidebar and tabbed main area. Includes service status cards, deployment history table, CPU/memory/network metrics with mini bar charts, a live log viewer with color-coded severity, and an environment variables panel with masked secrets.