<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Grid Layout — W3Bits</title><style>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,main, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}article, aside, details, figcaption, figure,footer, header, hgroup, main, menu, nav, section { display: block; }body { line-height: 1.618; font-family: Arial, Helvetica, sans-serif; }ol, ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }table { border-collapse: collapse; border-spacing: 0; }a { text-decoration: none; }code, pre, samp { font-family: monospace; } img, video { max-width: 100%; vertical-align: middle; }p:not(:last-child) { margin: 0 0 1em; }h1, h2, h3, h4 { margin: .5em 0 .75em; line-height: 1.3; }h1 { font-size: 1.5em; }h2 { font-size: 1.25em; }h3 { font-size: 1.125em; }h4 { font-size: 1em; } html { box-sizing: border-box; } Bento Grid Layout ============================================= */ :root { --bg-page: #f8fafc; --bg-surface: #ffffff; --fg-primary: #0f172a; --fg-secondary: #425466; --fg-muted: #8898aa; --accent: #0077cc; --accent-hover: #0062b0; --border: #e2e8f0; --page-bg: var(--bg-page); --page-text: var(--fg-primary); --header-title: #0f172a; --header-subtitle: #0f172a; --card-bg: var(--bg-surface); --card-text: var(--fg-primary); --item-bg: var(--bg-surface); --item-color: var(--fg-primary); --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sb-thumb: color-mix(in oklab, var(--border), var(--fg-primary) 12%); --sb-thumb-hover: color-mix(in oklab, var(--border), var(--fg-primary) 25%);} html, body { min-height: 100vh; }body { background-color: var(--page-bg); color: var(--page-text); font-family: var(--font-family); line-height: 1.5;} html { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }::-webkit-scrollbar { width: 6px; height: 6px; }::-webkit-scrollbar-track { background: transparent; }::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 10px; }::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); } .page-header { text-align: center; padding: 3rem 1.5rem 1.75rem; max-width: 75rem; margin: 0 auto;}.page-header-eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 99px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); margin-bottom: 0.875rem;}.page-header h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 0.5rem; color: var(--header-title);}.page-header p { font-size: 0.9375rem; opacity: 0.7; max-width: 32rem; margin: 0 auto; line-height: 1.55; color: var(--header-subtitle);} .grid-wrapper { padding: 2.5rem 1.5rem 3.5rem; max-width: 75rem; margin: 0 auto;} .grid-container { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; grid-auto-rows: minmax(9.5rem, auto); grid-auto-flow: dense;} @media (min-width: 640px) { .grid-container { grid-template-columns: repeat(2, 1fr); }} @media (min-width: 1024px) { .grid-container { grid-template-columns: repeat(4, 1fr); }} @media (min-width: 640px) { .grid-item:nth-child(8n+1) { grid-column: span 2; } .grid-item:nth-child(8n+6) { grid-column: span 2; }} @media (min-width: 1024px) { .grid-item:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; } .grid-item:nth-child(8n+6) { grid-column: span 2; }} .grid-content { background-color: var(--item-bg); color: var(--item-color); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; box-sizing: border-box;}.bento-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;}.bento-kicker { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-secondary, var(--item-color)); opacity: 0.65;}.bento-heading { font-size: 0.875rem; font-weight: 700; margin: 0.125rem 0 0; color: var(--item-color);}.bento-badge { display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 700; padding: 0.1875rem 0.5rem; border-radius: 9999px; white-space: nowrap;}.bento-badge.pos { background: rgba(16, 185, 129, 0.12); color: #10b981;}.bento-badge.live { background: rgba(56, 189, 248, 0.12); color: #0284c7;}.bento-hero-val { font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin: 0.75rem 0 0.5rem; color: var(--item-color);}.bento-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--item-color);}.bento-label { font-size: 0.75rem; font-weight: 500; color: var(--fg-secondary, var(--item-color)); opacity: 0.7; margin-top: 0.125rem;}.bento-chart-wrap { width: 100%; height: 3rem; margin: 0.5rem 0;}.bento-sparkline { width: 100%; height: 100%; display: block;}.bento-footer-note { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--fg-secondary, var(--item-color)); opacity: 0.6;}.bento-pct { font-weight: 600; color: var(--accent); opacity: 1;}.bento-avatar-stack { display: flex; align-items: center; margin-top: 0.5rem;}.bento-avatar { width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 2px solid var(--item-bg); margin-left: -0.375rem;}.bento-avatar:first-child { margin-left: 0;}.bento-avatar-more { margin-left: 0.375rem; font-size: 0.6875rem; font-weight: 700; color: var(--accent);}.bento-progress-track { width: 100%; height: 0.375rem; background: rgba(125, 125, 125, 0.15); border-radius: 9999px; overflow: hidden; margin-top: 0.75rem;}.bento-progress-fill { height: 100%; background: var(--accent); border-radius: 9999px;}.bento-uptime-bars { display: flex; gap: 0.25rem; margin-top: 0.75rem;}.bento-uptime-bars .bar { flex: 1; height: 0.5rem; border-radius: 0.125rem; background: rgba(16, 185, 129, 0.2);}.bento-uptime-bars .bar.on { background: #10b981;}.bento-stars-row { color: #d97706; font-size: 0.875rem; letter-spacing: 0.1em; margin-top: 0.5rem;}.bento-mini-bars { display: flex; align-items: flex-end; gap: 0.375rem; height: 1.75rem; margin-top: 0.5rem;}.bento-mini-bars span { flex: 1; background: var(--accent); border-radius: 0.125rem; opacity: 0.8;}.bento-tall-stats { display: flex; flex-direction: column; gap: 0.375rem; margin: 0.5rem 0; padding: 0.5rem 0; border-top: 1px dashed color-mix(in srgb, var(--item-color) 12%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--item-color) 12%, transparent);}.bento-stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; color: var(--fg-secondary, var(--item-color));}.bento-stat-row strong { color: var(--item-color); font-weight: 700;}.bento-hero-mid { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem;}.bento-hero-substats { display: flex; gap: 1.5rem; margin-bottom: 0.375rem;}.bento-substat { display: flex; flex-direction: column; gap: 0.125rem;}.bento-substat span { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-secondary, var(--item-color)); opacity: 0.6;}.bento-substat strong { font-size: 1.125rem; font-weight: 800; color: var(--item-color);}.bento-status-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--fg-secondary, var(--item-color)); opacity: 0.8; margin-top: 0.5rem;}.bento-pill-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #10b981;}.bento-segmented-track { display: flex; gap: 0.25rem; width: 100%; height: 0.375rem; border-radius: 9999px; overflow: hidden; margin-top: 0.75rem;}.bento-segmented-track .seg-fill { height: 100%; border-radius: 9999px;}.bento-segmented-track .seg-fill.on { background: var(--accent);}.bento-segmented-track .seg-fill.off { background: rgba(125, 125, 125, 0.2);}@media (min-width: 640px) { .grid-item:nth-child(8n+1) .bento-hero-val { font-size: clamp(2.75rem, 4vw, 3.75rem); margin: 0.75rem 0 0; line-height: 1.05; } .grid-item:nth-child(8n+1) .bento-kicker { font-size: 0.8125rem; } .grid-item:nth-child(8n+1) .bento-heading { font-size: 1.125rem; } .grid-item:nth-child(8n+1) .bento-badge { font-size: 0.8125rem; padding: 0.25rem 0.625rem; } .grid-item:nth-child(8n+1) .bento-chart-wrap { flex: 1 1 auto; min-height: 7.5rem; max-height: 11rem; margin: 0.75rem 0; display: flex; } .grid-item:nth-child(8n+1) .bento-sparkline { width: 100%; height: 100%; } .grid-item:nth-child(8n+1) .bento-footer-note { font-size: 0.8125rem; } .grid-item:nth-child(8n+6) .bento-mini-bars { height: 2.5rem; gap: 0.5rem; } .grid-item:nth-child(8n+6) .bento-value { font-size: 2.125rem; }}.grid-content { border-radius: 0.75rem; overflow: hidden; height: 100%;} .grid-content { background-color: #ffffff; border: 1px solid var(--border); transition: box-shadow .35s ease, border-color .35s ease;} .grid-content { box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08);}.grid-item:hover .grid-content { box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.1);} .grid-item { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;}.grid-item:hover { transform: translateY(-0.375rem);}</style></head><body><header class="page-header"> <span class="page-header-eyebrow">Live Analytics</span> <h1>Telemetry & KPI Overview</h1> <p>Real-time performance metrics and active system nodes</p></header><div class="grid-wrapper"> <div class="grid-container"> <div class="grid-item"> <div class="grid-content bento-hero"> <div class="bento-header"> <div class="bento-title-group"> <span class="bento-kicker">Revenue Growth</span> <h3 class="bento-heading">Monthly Recurring</h3> </div> <span class="bento-badge pos">+18.4%</span> </div> <div class="bento-hero-mid"> <div class="bento-hero-val">$148,250</div> <div class="bento-hero-substats"> <div class="bento-substat"><span>ARR</span><strong>$1.78M</strong></div> <div class="bento-substat"><span>Net Retention</span><strong>118%</strong></div> </div> </div> <div class="bento-chart-wrap"> <svg viewBox="0 0 300 80" class="bento-sparkline" preserveAspectRatio="none"> <defs> <linearGradient id="sparkGrad-0" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.3"/> <stop offset="100%" stop-color="var(--accent)" stop-opacity="0.0"/> </linearGradient> </defs> <path d="M0 60 Q 40 50, 75 40 T 150 30 T 225 15 T 300 8 L 300 80 L 0 80 Z" fill="url(#sparkGrad-0)"/> <path d="M0 60 Q 40 50, 75 40 T 150 30 T 225 15 T 300 8" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round"/> </svg> </div> <div class="bento-footer-note"> <span>Target: $160,000</span> <span class="bento-pct">92.6% reached</span> </div> </div> </div> <div class="grid-item"> <div class="grid-content"> <div class="bento-header"> <span class="bento-kicker">Community</span> <span class="bento-badge pos">+1,420</span> </div> <div class="bento-mid"> <div class="bento-value">24,890</div> <div class="bento-label">Active Subscribers</div> </div> <div class="bento-avatar-stack"> <span class="bento-avatar" style="background-color: #3b82f6;"></span> <span class="bento-avatar" style="background-color: #10b981;"></span> <span class="bento-avatar" style="background-color: #f59e0b;"></span> <span class="bento-avatar-more">+1.4k</span> </div> </div> </div> <div class="grid-item"> <div class="grid-content"> <div class="bento-header"> <span class="bento-kicker">Acquisition</span> <span class="bento-badge pos">+0.8%</span> </div> <div class="bento-mid"> <div class="bento-value">4.85%</div> <div class="bento-label">Funnel Conversion</div> </div> <div class="bento-progress-track"> <div class="bento-progress-fill" style="width: 76%;"></div> </div> </div> </div> <div class="grid-item"> <div class="grid-content"> <div class="bento-header"> <span class="bento-kicker">Edge Network</span> <span class="bento-badge live">● 99.99%</span> </div> <div class="bento-mid"> <div class="bento-value">18ms</div> <div class="bento-label">Global Latency • 42 PoPs</div> </div> <div class="bento-uptime-bars"> <span class="bar on"></span><span class="bar on"></span><span class="bar on"></span><span class="bar on"></span> <span class="bar on"></span><span class="bar on"></span><span class="bar on"></span><span class="bar on"></span> </div> </div> </div> <div class="grid-item"> <div class="grid-content"> <div class="bento-header"> <span class="bento-kicker">Satisfaction</span> <span class="bento-badge pos">Top 1%</span> </div> <div class="bento-mid"> <div class="bento-value">98.4%</div> <div class="bento-label">Positive Feedback</div> </div> <div class="bento-stars-row"> ★ ★ ★ ★ ★ </div> </div> </div> <div class="grid-item"> <div class="grid-content"> <div class="bento-header"> <div class="bento-title-group"> <span class="bento-kicker">API Telemetry</span> <h3 class="bento-heading">Throughput & Requests</h3> </div> <span class="bento-badge live">● Live Stream</span> </div> <div class="bento-mid"> <div class="bento-value">8.4M</div> <div class="bento-label">Monthly Requests • 99.98% Success Rate</div> </div> <div class="bento-mini-bars"> <span style="height: 35%;"></span><span style="height: 55%;"></span><span style="height: 40%;"></span> <span style="height: 70%;"></span><span style="height: 85%;"></span><span style="height: 65%;"></span> <span style="height: 95%;"></span><span style="height: 75%;"></span><span style="height: 88%;"></span> <span style="height: 60%;"></span><span style="height: 82%;"></span><span style="height: 100%;"></span> </div> </div> </div> <div class="grid-item"> <div class="grid-content"> <div class="bento-header"> <span class="bento-kicker">Security</span> <span class="bento-badge pos">Zero Alerts</span> </div> <div class="bento-mid"> <div class="bento-value">0.004%</div> <div class="bento-label">Error Rate • Last 24h</div> </div> <div class="bento-status-pill"> <span class="bento-pill-dot"></span> <span>WAF Shield • SOC-2 Type II</span> </div> </div> </div> <div class="grid-item"> <div class="grid-content"> <div class="bento-header"> <span class="bento-kicker">CDN Performance</span> <span class="bento-badge live">Optimal</span> </div> <div class="bento-mid"> <div class="bento-value">99.2%</div> <div class="bento-label">Cache Hit Ratio</div> </div> <div class="bento-segmented-track"> <div class="seg-fill on" style="width: 92%;"></div> <div class="seg-fill off" style="width: 8%;"></div> </div> </div> </div> </div></div></body></html>