gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
296 lines (272 loc) • 23.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widgets | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main-v4.js"></script>
</head>
<body data-shell="admin" data-page="widgets" data-breadcrumb="Home > Widgets">
<main class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Library</div>
<h1 class="page-title">Widgets</h1>
</div>
</div>
</div>
<!-- ── Row 1 — KPI tiles ── -->
<div class="row col-4">
<div class="card"><div class="stat">
<div class="stat-icon teal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 1v22M5 8l7-7 7 7"/></svg></div>
<div class="stat-content">
<div class="stat-label">Active users</div>
<div class="stat-value-row"><span class="stat-value">8,432</span><span class="stat-change up"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V3M3 6l3-3 3 3"/></svg>14%</span></div>
<div class="stat-subtext">vs last week</div>
</div>
</div></div>
<div class="card"><div class="stat">
<div class="stat-icon yellow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="8" y1="2" x2="8" y2="22"/><path d="M11 4H6.5a2 2 0 000 4h3a2 2 0 010 4H4"/></svg></div>
<div class="stat-content">
<div class="stat-label">Revenue (MTD)</div>
<div class="stat-value-row"><span class="stat-value">$28,401</span><span class="stat-change up"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V3M3 6l3-3 3 3"/></svg>22%</span></div>
<div class="stat-subtext">vs target $25,000</div>
</div>
</div></div>
<div class="card"><div class="stat">
<div class="stat-icon red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v18h18"/><path d="M19 9l-5 5-4-4-3 3"/></svg></div>
<div class="stat-content">
<div class="stat-label">Churn rate</div>
<div class="stat-value-row"><span class="stat-value">2.4%</span><span class="stat-change down"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v6M3 6l3 3 3-3"/></svg>0.4pp</span></div>
<div class="stat-subtext">vs last month</div>
</div>
</div></div>
<div class="card"><div class="stat">
<div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg></div>
<div class="stat-content">
<div class="stat-label">Avg session</div>
<div class="stat-value-row"><span class="stat-value">3:42</span><span class="stat-change up"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V3M3 6l3-3 3 3"/></svg>8%</span></div>
<div class="stat-subtext">minutes per visit</div>
</div>
</div></div>
</div>
<!-- ── Row 2 — KPI tiles with sparklines ── -->
<div class="row col-3">
<div class="card"><div class="stat">
<div class="stat-icon teal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg></div>
<div class="stat-content">
<div class="stat-label">Sessions</div>
<div class="stat-value-row"><span class="stat-value">12,348</span><span class="stat-change up">+14%</span></div>
<div class="stat-subtext">last 7 days</div>
</div>
<div class="stat-spark"><div class="bar" style="height:30%"></div><div class="bar" style="height:50%"></div><div class="bar" style="height:40%"></div><div class="bar" style="height:60%"></div><div class="bar" style="height:55%"></div><div class="bar" style="height:75%"></div><div class="bar" style="height:65%"></div><div class="bar" style="height:85%"></div><div class="bar" style="height:90%"></div><div class="bar" style="height:80%"></div></div>
</div></div>
<div class="card"><div class="stat">
<div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></svg></div>
<div class="stat-content">
<div class="stat-label">Sign-ups</div>
<div class="stat-value-row"><span class="stat-value">412</span><span class="stat-change up">+9%</span></div>
<div class="stat-subtext">last 7 days</div>
</div>
<div class="stat-spark"><div class="bar" style="height:50%;background:var(--purple)"></div><div class="bar" style="height:55%;background:var(--purple)"></div><div class="bar" style="height:65%;background:var(--purple)"></div><div class="bar" style="height:60%;background:var(--purple)"></div><div class="bar" style="height:75%;background:var(--purple)"></div><div class="bar" style="height:70%;background:var(--purple)"></div><div class="bar" style="height:80%;background:var(--purple)"></div><div class="bar" style="height:88%;background:var(--purple)"></div><div class="bar" style="height:92%;background:var(--purple)"></div><div class="bar" style="height:85%;background:var(--purple)"></div></div>
</div></div>
<div class="card"><div class="stat">
<div class="stat-icon red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 14a4 4 0 014-4h12a4 4 0 014 4v6H2v-6z"/><path d="M9 6L12 3l3 3"/></svg></div>
<div class="stat-content">
<div class="stat-label">Bounce rate</div>
<div class="stat-value-row"><span class="stat-value">38.4%</span><span class="stat-change down">−2.1pp</span></div>
<div class="stat-subtext">last 7 days</div>
</div>
<div class="stat-spark"><div class="bar" style="height:80%;background:var(--red)"></div><div class="bar" style="height:75%;background:var(--red)"></div><div class="bar" style="height:60%;background:var(--red)"></div><div class="bar" style="height:65%;background:var(--red)"></div><div class="bar" style="height:55%;background:var(--red)"></div><div class="bar" style="height:50%;background:var(--red)"></div><div class="bar" style="height:45%;background:var(--red)"></div><div class="bar" style="height:40%;background:var(--red)"></div><div class="bar" style="height:42%;background:var(--red)"></div><div class="bar" style="height:38%;background:var(--red)"></div></div>
</div></div>
</div>
<!-- ── Row 3 — Activity, Tasks, Donut ── -->
<div class="row col-3">
<div class="card">
<div class="card-header"><div class="card-title">Latest activity</div></div>
<div class="card-body" style="padding:8px 16px">
<ul class="activity-list">
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--primary),var(--primary-dk))">SK</div><div><div class="activity-body"><strong>Sarah K.</strong> opened a PR <span style="color:var(--text-muted)">#248</span></div><div class="activity-time">2m ago</div></div></li>
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--blue),#0550a0)">MR</div><div><div class="activity-body"><strong>Michael</strong> deployed v3.2.1 to production</div><div class="activity-time">14m ago</div></div></li>
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--green),#1a8a32)">EW</div><div><div class="activity-body"><strong>Emily</strong> closed an issue <span style="color:var(--text-muted)">GEN-128</span></div><div class="activity-time">1h ago</div></div></li>
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--purple),#7d2db1)">TH</div><div><div class="activity-body"><strong>Tom</strong> joined the team</div><div class="activity-time">3h ago</div></div></li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Today's tasks</div></div>
<div class="card-body" style="padding:8px 16px">
<div class="todo-row done"><div class="todo-cb done"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2.5 6l2.5 3 5-6"/></svg></div><span class="todo-text">Review design tokens</span></div>
<div class="todo-row"><div class="todo-cb"></div><span class="todo-text">Ship dashboard</span><span class="todo-prio" style="background:var(--red)"></span></div>
<div class="todo-row"><div class="todo-cb"></div><span class="todo-text">1:1 with Sarah</span><span class="todo-prio" style="background:var(--yellow)"></span></div>
<div class="todo-row"><div class="todo-cb"></div><span class="todo-text">Update changelog</span><span class="todo-prio" style="background:var(--green)"></span></div>
<div class="todo-row done"><div class="todo-cb done"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2.5 6l2.5 3 5-6"/></svg></div><span class="todo-text">Reply to Diego</span></div>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Browsers</div></div>
<div class="card-body">
<div class="donut-block">
<div class="donut-svg">
<div data-chart="browsers" style="width:100%;height:100%"></div>
<div class="donut-center-label"><div class="num">62%</div><div class="sub">chrome</div></div>
</div>
<div class="donut-legend">
<div class="donut-legend-item"><span class="dot" style="background:var(--primary)"></span> Chrome <span class="pct">62%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--azure)"></span> Safari <span class="pct">25%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--yellow)"></span> Firefox <span class="pct">13%</span></div>
</div>
</div>
</div>
</div>
</div>
<!-- ── Row 4 — Visitors, Toggles, Storage ── -->
<div class="row col-3">
<div class="card">
<div class="card-header"><div class="card-title">Top countries</div></div>
<div class="card-body" style="padding:8px 16px">
<div class="visitor-row"><span class="visitor-flag">🇺🇸</span><span class="visitor-name">United States</span><span class="visitor-pct">42%</span><div class="visitor-bar"><div class="fill" style="width:42%"></div></div></div>
<div class="visitor-row"><span class="visitor-flag">🇩🇪</span><span class="visitor-name">Germany</span><span class="visitor-pct">21%</span><div class="visitor-bar"><div class="fill" style="width:21%"></div></div></div>
<div class="visitor-row"><span class="visitor-flag">🇯🇵</span><span class="visitor-name">Japan</span><span class="visitor-pct">14%</span><div class="visitor-bar"><div class="fill" style="width:14%"></div></div></div>
<div class="visitor-row"><span class="visitor-flag">🇧🇷</span><span class="visitor-name">Brazil</span><span class="visitor-pct">9%</span><div class="visitor-bar"><div class="fill" style="width:9%"></div></div></div>
<div class="visitor-row"><span class="visitor-flag">🇦🇺</span><span class="visitor-name">Australia</span><span class="visitor-pct">7%</span><div class="visitor-bar"><div class="fill" style="width:7%"></div></div></div>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Preferences</div></div>
<div class="card-body" style="padding:6px 16px">
<div class="toggle-row"><div><div class="label">Auto-update</div></div><div class="toggle on"></div></div>
<div class="toggle-row"><div><div class="label">Beta features</div></div><div class="toggle"></div></div>
<div class="toggle-row"><div><div class="label">Telemetry</div></div><div class="toggle on"></div></div>
<div class="toggle-row"><div><div class="label">Daily digest</div></div><div class="toggle on"></div></div>
<div class="toggle-row"><div><div class="label">Sound effects</div></div><div class="toggle"></div></div>
</div>
</div>
<!-- Storage breakdown -->
<div class="card">
<div class="card-header"><div class="card-title">Storage</div></div>
<div class="card-body">
<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px">
<span style="font-size:22px;font-weight:600;color:var(--text)">62.4 GB</span>
<span style="font-size:12px;color:var(--text-muted)">of 100 GB</span>
</div>
<div class="storage-bar" style="height:8px;background:var(--bg-surface-secondary);border-radius:4px;overflow:hidden;display:flex;margin-bottom:14px">
<div style="width:32%;background:var(--primary)"></div>
<div style="width:18%;background:var(--azure)"></div>
<div style="width:8%;background:var(--yellow)"></div>
<div style="width:4.4%;background:var(--purple)"></div>
</div>
<div style="display:flex;flex-direction:column;gap:8px;font-size:12.5px">
<div style="display:flex;align-items:center;gap:8px"><span style="width:8px;height:8px;border-radius:50%;background:var(--primary)"></span> Documents <span style="margin-left:auto;color:var(--text-muted)">32 GB</span></div>
<div style="display:flex;align-items:center;gap:8px"><span style="width:8px;height:8px;border-radius:50%;background:var(--azure)"></span> Images <span style="margin-left:auto;color:var(--text-muted)">18 GB</span></div>
<div style="display:flex;align-items:center;gap:8px"><span style="width:8px;height:8px;border-radius:50%;background:var(--yellow)"></span> Videos <span style="margin-left:auto;color:var(--text-muted)">8 GB</span></div>
<div style="display:flex;align-items:center;gap:8px"><span style="width:8px;height:8px;border-radius:50%;background:var(--purple)"></span> Other <span style="margin-left:auto;color:var(--text-muted)">4.4 GB</span></div>
</div>
</div>
</div>
</div>
<!-- ── Row 5 — Team list, Pricing teaser, Quick actions ── -->
<div class="row col-3">
<div class="card">
<div class="card-header"><div class="card-title">Team online</div></div>
<div class="card-body" style="padding:8px 16px">
<ul class="activity-list">
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--primary),var(--primary-dk));position:relative">SK<span style="position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--bg-surface)"></span></div><div><div class="activity-body"><strong>Sarah K.</strong></div><div class="activity-time">Designer · online</div></div></li>
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--blue),#0550a0);position:relative">MR<span style="position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--bg-surface)"></span></div><div><div class="activity-body"><strong>Michael R.</strong></div><div class="activity-time">Engineer · online</div></div></li>
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--green),#1a8a32);position:relative">EW<span style="position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--yellow);border:2px solid var(--bg-surface)"></span></div><div><div class="activity-body"><strong>Emily W.</strong></div><div class="activity-time">PM · away</div></div></li>
<li class="activity-item"><div class="activity-avatar" style="background:linear-gradient(135deg,var(--purple),#7d2db1)">TH</div><div><div class="activity-body"><strong>Tom H.</strong></div><div class="activity-time">Engineer · offline</div></div></li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Plan usage</div></div>
<div class="card-body">
<div style="display:flex;flex-direction:column;gap:14px">
<div>
<div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px"><span style="color:var(--text)">API calls</span><span style="color:var(--text-muted)">87,400 / 100,000</span></div>
<div class="storage-bar" style="height:5px;background:var(--bg-surface-secondary);border-radius:3px;overflow:hidden"><div style="width:87%;background:var(--yellow)"></div></div>
</div>
<div>
<div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px"><span style="color:var(--text)">Storage</span><span style="color:var(--text-muted)">62.4 / 100 GB</span></div>
<div class="storage-bar" style="height:5px;background:var(--bg-surface-secondary);border-radius:3px;overflow:hidden"><div style="width:62%;background:var(--primary)"></div></div>
</div>
<div>
<div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px"><span style="color:var(--text)">Team seats</span><span style="color:var(--text-muted)">12 / 25</span></div>
<div class="storage-bar" style="height:5px;background:var(--bg-surface-secondary);border-radius:3px;overflow:hidden"><div style="width:48%;background:var(--azure)"></div></div>
</div>
<button class="btn btn-outline" style="margin-top:6px;justify-content:center">Manage plan</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Quick actions</div></div>
<div class="card-body" style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px">
<button class="btn btn-outline" style="flex-direction:column;height:78px;gap:6px">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 14L14 2M14 2H6M14 2v8"/></svg>
<span style="font-size:11px">Compose</span>
</button>
<button class="btn btn-outline" style="flex-direction:column;height:78px;gap:6px">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 2"/></svg>
<span style="font-size:11px">New event</span>
</button>
<button class="btn btn-outline" style="flex-direction:column;height:78px;gap:6px">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
<span style="font-size:11px">Upload</span>
</button>
<button class="btn btn-outline" style="flex-direction:column;height:78px;gap:6px">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></svg>
<span style="font-size:11px">Invite</span>
</button>
</div>
</div>
</div>
<!-- ── Row 6 — Profile card, Promo, Live counter ── -->
<div class="row col-3">
<div class="card" style="text-align:center;padding:24px 20px">
<div class="activity-avatar" style="width:72px;height:72px;font-size:24px;margin:0 auto 14px;background:linear-gradient(135deg,var(--primary),var(--primary-dk))">A</div>
<div style="font-size:15px;font-weight:600;color:var(--text);margin-bottom:2px">Aigars Silkalns</div>
<div style="font-size:12.5px;color:var(--text-muted);margin-bottom:14px">Owner · Colorlib</div>
<div style="display:flex;justify-content:center;gap:24px;border-top:1px solid var(--border-color-light);padding-top:14px">
<div><div style="font-size:16px;font-weight:600;color:var(--text)">142</div><div style="font-size:11px;color:var(--text-muted)">Projects</div></div>
<div><div style="font-size:16px;font-weight:600;color:var(--text)">28</div><div style="font-size:11px;color:var(--text-muted)">Team</div></div>
<div><div style="font-size:16px;font-weight:600;color:var(--text)">4.9</div><div style="font-size:11px;color:var(--text-muted)">Rating</div></div>
</div>
</div>
<div class="card" style="background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:white;border-color:var(--primary-dk)">
<div class="card-body" style="padding:24px">
<div style="font-size:11px;text-transform:uppercase;letter-spacing:0.6px;opacity:0.85;margin-bottom:6px">Limited offer</div>
<div style="font-size:18px;font-weight:600;margin-bottom:6px">Upgrade to Business</div>
<div style="font-size:13px;opacity:0.9;margin-bottom:16px;line-height:1.5">Unlock unlimited projects, priority support, and the audit log. <strong>30% off for the next 7 days.</strong></div>
<button class="btn" style="background:white;color:var(--primary);border:none">Upgrade now</button>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Live now</div></div>
<div class="card-body" style="display:flex;align-items:center;gap:14px;padding-top:8px">
<div style="position:relative">
<div style="font-size:34px;font-weight:700;color:var(--text);line-height:1">847</div>
<div style="font-size:12px;color:var(--text-muted)">visitors right now</div>
</div>
<div style="margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green);font-weight:var(--font-weight-medium)">
<span style="width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(47,179,68,0.4);animation:pulse-dot 2s infinite"></span>
LIVE
</div>
</div>
<div class="card-body" style="padding-top:0">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:12px">
<div><div style="color:var(--text-muted)">Returning</div><div style="color:var(--text);font-weight:600;font-size:15px">62%</div></div>
<div><div style="color:var(--text-muted)">Mobile</div><div style="color:var(--text);font-weight:600;font-size:15px">48%</div></div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>