<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SaaS Analytics Dashboard</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0B0F19;font-family:Inter,system-ui,sans-serif;display:flex;min-height:100vh}
.sidebar{width:240px;background:#111827;border-right:1px solid #1E2333;padding:24px 16px;
display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:24px}
.sidebar-logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#6C63FF,#00D4AA);
border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}
.sidebar-logo-text{font-size:15px;font-weight:700;color:#F0F4FF;font-family:Outfit,sans-serif}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
color:#9BA3BF;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.nav-item:hover,.nav-item.active{background:rgba(108,99,255,.1);color:#a5a0ff}
.nav-item.active{border:1px solid rgba(108,99,255,.2)}
.main{flex:1;padding:32px;overflow-y:auto}
.page-title{font-size:22px;font-weight:800;color:#F0F4FF;margin-bottom:6px;font-family:Outfit,sans-serif}
.page-sub{font-size:14px;color:#9BA3BF;margin-bottom:28px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.kpi-card{background:#111827;border:1px solid #1E2333;border-radius:14px;padding:20px;
transition:border-color .2s}
.kpi-card:hover{border-color:#2D3748}
.kpi-label{font-size:11px;color:#4A5568;font-weight:600;text-transform:uppercase;
letter-spacing:.06em;margin-bottom:10px}
.kpi-value{font-size:28px;font-weight:800;color:#F0F4FF;margin-bottom:6px}
.kpi-delta{font-size:12px;font-weight:500}
.kpi-delta.up{color:#4ADE80} .kpi-delta.down{color:#FF6B8A}
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo">
<div class="sidebar-logo-icon">⚡</div>
<span class="sidebar-logo-text">Flowtive</span>
</div>
<div class="nav-item active">📊 Dashboard</div>
<div class="nav-item">👥 Users</div>
<div class="nav-item">📈 Analytics</div>
<div class="nav-item">💳 Billing</div>
<div class="nav-item">⚙️ Settings</div>
</aside>
<!-- Full source unlocked with Pro — flowtive.site/#pricing -->
</body>
</html>
⚡ PRO
Unlock the Entire Flowtive Library
Pay once, use forever on unlimited personal and commercial projects. One-time payment of $29.
$29
Unlock Library — $29