Stat-Dashboard/mockups/sessions-mockup.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sessions — Statboard</title><link rel="stylesheet" href="mockup.css"></head>
<body data-page="sessions"><div class="app"><aside class="sidebar"><a class="brand" href="overview-mockup.html"><span class="brand-mark">S</span>Statboard</a><div class="project-select"><div class="project-label">Current game</div><select class="select game-select" data-game-select aria-label="Game"><option>N/A</option></select></div><div class="nav-label">Workspace</div><nav class="nav"><a class="" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="active" href="sessions-mockup.html"><span class="nav-icon">◷</span>Sessions</a><a class="" href="retention-mockup.html"><span class="nav-icon">↗</span>Retention</a><a class="" href="players-mockup.html"><span class="nav-icon">♙</span>Players</a><a class="" href="events-mockup.html"><span class="nav-icon">⌘</span>Events</a><a class="" href="activities-mockup.html"><span class="nav-icon">⟿</span>Activity sessions</a><a class="" href="monetization-mockup.html"><span class="nav-icon">◇</span>Monetization</a><a class="" href="settings-mockup.html"><span class="nav-icon">⚙</span>Project settings</a></nav><div class="sidebar-bottom"><span class="pill">PostgreSQL sample</span></div></aside><main class="main"><header class="topbar"><div class="breadcrumbs">Sessions</div><select class="select mobile-game-select" data-game-select aria-label="Game"><option>N/A</option></select><div class="top-actions"><span class="status">PostgreSQL · UTC</span></div></header><section class="page"><div class="error-banner" data-error hidden></div><div class="page-heading"><div><h1>Sessions</h1><div class="subtitle">Stored sessions linked to players within the selected game.</div></div><div class="page-controls"><select class="select" data-days aria-label="Date range"><option value="7">Last 7 days</option><option value="14" selected>Last 14 days</option><option value="30">Last 30 days</option><option value="90">Last 90 days</option></select></div></div><div class="filters section-gap"><label class="control-label">Player group<select class="select" data-session-group><option value="all">All players</option><option value="whales">Whales · top spend</option><option value="playtime">Top playtime</option><option value="first">First-time</option></select></label><span class="card-note">Whales and top playtime use the top 20% of eligible players; first-time means first seen within 24 hours.</span></div><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">Sessions</div><div class="metric-value" data-metric="sessions" data-format="number">N/A</div><div class="metric-foot">Starts in selected period</div></article><article class="card card-pad metric-card"><div class="metric-label">Average duration</div><div class="metric-value" data-metric="avgSession" data-format="duration">N/A</div><div class="metric-foot">Completed sessions only</div></article><article class="card card-pad metric-card"><div class="metric-label">Median duration</div><div class="metric-value" data-metric="medianSession" data-format="duration">N/A</div><div class="metric-foot">Completed sessions only</div></article><article class="card card-pad metric-card"><div class="metric-label">Open sessions (recent)</div><div class="metric-value" data-metric="active" data-format="number">N/A</div><div class="metric-foot">No end report and started within six hours</div></article></div><article class="card"><div class="card-head"><div><div class="card-title">Sessions and players</div><div class="card-note">UTC daily totals</div></div></div><div class="chart-wrap" data-chart="trend"><div class="empty">N/A</div></div></article><div class="section-gap"><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">DAU today</div><div class="metric-value" data-metric="dau" data-format="number">N/A</div><div class="metric-foot">Active today</div></article><article class="card card-pad metric-card"><div class="metric-label">Rolling MAU</div><div class="metric-value" data-metric="mau" data-format="number">N/A</div><div class="metric-foot">30 calendar days ending today</div></article><article class="card card-pad metric-card"><div class="metric-label">Total playtime</div><div class="metric-value" data-metric="totalPlaytime" data-format="duration">N/A</div><div class="metric-foot">Completed-session time inside selected days</div></article><article class="card card-pad metric-card"><div class="metric-label">Playtime per active player</div><div class="metric-value" data-metric="averagePlaytime" data-format="duration">N/A</div><div class="metric-foot">Known playtime divided by unique period actives</div></article><article class="card card-pad metric-card"><div class="metric-label">New-player session time</div><div class="metric-value" data-metric="newSessionTime" data-format="duration">N/A</div><div class="metric-foot">Average completed session on first-seen day</div></article><article class="card card-pad metric-card"><div class="metric-label">Returning-player session time</div><div class="metric-value" data-metric="returningSessionTime" data-format="duration">N/A</div><div class="metric-foot">Average completed session on a later day</div></article><article class="card card-pad metric-card"><div class="metric-label">First-session 5m retention</div><div class="metric-value" data-metric="firstSession5min" data-format="percent">N/A</div><div class="metric-foot">Completed first sessions lasting at least 300 seconds</div></article></div></div><div class="grid two-col"><article class="card"><div class="card-head"><div><div class="card-title">New vs returning session duration</div><div class="card-note">Average seconds for each daily user group</div></div></div><div class="chart-wrap" data-chart="session-groups"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">First-session five-minute retention</div><div class="card-note">Percentage of known first sessions reaching 300 seconds</div></div></div><div class="chart-wrap" data-chart="first-five"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">Total daily playtime</div><div class="card-note">Known completed-session seconds, split at UTC midnight</div></div></div><div class="chart-wrap" data-chart="playtime-total"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">Average daily playtime</div><div class="card-note">Seconds per daily active user</div></div></div><div class="chart-wrap" data-chart="playtime-average"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">DAU and rolling MAU</div><div class="card-note">Distinct players · calculated for every day</div></div></div><div class="chart-wrap" data-chart="active-users"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">New and returning users</div><div class="card-note">Daily active user groups</div></div></div><div class="chart-wrap" data-chart="new-returning"><div class="empty">N/A</div></div></article></div></section></main></div><nav class="mobile-nav"><a class="" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="active" href="sessions-mockup.html"><span class="nav-icon">◷</span>Analytics</a><a class="" href="players-mockup.html"><span class="nav-icon">♙</span>Players</a><a class="" href="events-mockup.html"><span class="nav-icon">⌘</span>Events</a><a class="" href="settings-mockup.html"><span class="nav-icon">···</span>More</a></nav><script src="mockup.js"></script></body></html>