Stat-Dashboard/mockups/player-info-mockup.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Player info — Statboard</title><link rel="stylesheet" href="mockup.css"></head>
<body data-page="player-info"><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="" 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="active" 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">Player info</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><a class="back-link" href="players-mockup.html">← All players</a><h1 data-profile-name>N/A</h1><div class="subtitle" data-profile-id>N/A</div><div class="player-tags" data-profile-tags></div></div><div class="page-controls"><span class="pill">Stored player records</span></div></div><nav class="tabs"><a href="#overview" class="active" data-profile-tab="overview">Overview</a><a href="#values" class="" data-profile-tab="values">Values</a><a href="#sessions" class="" data-profile-tab="sessions">Sessions</a><a href="#activities" class="" data-profile-tab="activities">Activity runs</a><a href="#events" class="" data-profile-tab="events">Events</a><a href="#sales" data-profile-tab="sales">Purchases</a></nav><section class="player-info-panel active" data-profile-panel="overview"><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">Lifetime completed playtime</div><div class="metric-value" data-metric="playtime" data-format="duration">N/A</div><div class="metric-foot">Unreported end times are excluded</div></article><article class="card card-pad metric-card"><div class="metric-label">Average session</div><div class="metric-value" data-metric="avgSession" data-format="duration">N/A</div><div class="metric-foot">Completed sessions</div></article><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">Lifetime session count</div></article><article class="card card-pad metric-card"><div class="metric-label">Median session</div><div class="metric-value" data-metric="medianSession" data-format="duration">N/A</div><div class="metric-foot">Completed sessions</div></article></div><div class="grid two-col"><article class="card"><div class="card-head"><div><div class="card-title">Latest saved values</div><div class="card-note">Fields absent from this player snapshot display N/A</div></div></div><div class="table-wrap"><table><thead><tr><th>Field</th><th>Value</th></tr></thead><tbody data-latest-value-rows><tr><td colspan="2" class="empty">N/A</td></tr></tbody></table></div></article><article class="card"><div class="card-head"><div><div class="card-title">Value history</div><div class="card-note">Stored snapshots, oldest to newest ? compare up to two values with separate scales</div></div><div class="profile-history-controls"><label class="control-label">Left axis<select class="select" data-profile-value aria-label="First history value"></select></label><label class="control-label">Right axis<select class="select" data-profile-value-second aria-label="Second history value"></select></label></div></div><div class="chart-wrap" data-chart="profile"></div></article></div><div class="grid two-col section-gap"><article class="card"><div class="card-head"><div><div class="card-title">Owned gamepasses</div><div class="card-note">Oldest purchase first. Unreported purchase dates display N/A.</div></div></div><div class="table-wrap"><table><thead><tr><th>Gamepass</th><th>Roblox pass ID</th><th>Purchased (UTC)</th></tr></thead><tbody data-owned-pass-rows><tr><td colspan="3" class="empty">N/A</td></tr></tbody></table></div></article><article class="card"><div class="card-head"><div><div class="card-title">Products purchased</div><div class="card-note">Lifetime totals for this player</div></div></div><div class="table-wrap"><table><thead><tr><th>Product</th><th>Units bought</th><th>Robux spent</th><th>First purchase (UTC)</th><th>Last purchase (UTC)</th></tr></thead><tbody data-owned-product-rows><tr><td colspan="5" class="empty">N/A</td></tr></tbody></table></div></article></div></section><section class="player-info-panel" data-profile-panel="values"><article class="card"><div class="card-head"><div><div class="card-title">Snapshot history</div><div class="card-note">Newest snapshots first · 20 per page</div></div></div><div class="table-wrap"><table><thead><tr><th>Captured (UTC)</th><th>Stored values</th></tr></thead><tbody data-snapshot-rows><tr><td colspan="2" class="empty">N/A</td></tr></tbody></table></div><div class="table-footer" data-record-pagination="snapshots"><span data-record-summary="snapshots">N/A</span><div class="inline"><button class="button" data-record-prev="snapshots" disabled>Previous</button><select class="select" data-record-page="snapshots" aria-label="snapshots page"></select><button class="button" data-record-next="snapshots" disabled>Next</button></div></div></article></section><section class="player-info-panel" data-profile-panel="sessions"><article class="card"><div class="card-head"><div><div class="card-title">Player sessions</div><div class="card-note">20 per page · sessions for this exact internal player ID</div></div></div><div class="table-wrap"><table><thead><tr><th>Player</th><th>Started (UTC)</th><th>Duration</th><th>Join session</th><th>Status</th></tr></thead><tbody data-session-rows><tr><td colspan="5" class="empty">N/A</td></tr></tbody></table></div><div class="table-footer" data-record-pagination="sessions"><span data-record-summary="sessions">N/A</span><div class="inline"><button class="button" data-record-prev="sessions" disabled>Previous</button><select class="select" data-record-page="sessions" aria-label="sessions page"></select><button class="button" data-record-next="sessions" disabled>Next</button></div></div></article></section><section class="player-info-panel" data-profile-panel="activities"><article class="card"><div class="card-head"><div><div class="card-title">Individual activity runs</div><div class="card-note">Underlying records are attached to the player; the activity page shows group averages</div></div></div><div class="table-wrap"><table><thead><tr><th>Activity</th><th>Started (UTC)</th><th>Duration</th><th>Steps</th><th>Outcome</th><th>Captured values</th></tr></thead><tbody data-activity-rows><tr><td colspan="6" class="empty">N/A</td></tr></tbody></table></div><div class="table-footer" data-record-pagination="activities"><span data-record-summary="activities">N/A</span><div class="inline"><button class="button" data-record-prev="activities" disabled>Previous</button><select class="select" data-record-page="activities" aria-label="activities page"></select><button class="button" data-record-next="activities" disabled>Next</button></div></div></article></section><section class="player-info-panel" data-profile-panel="events"><article class="card"><div class="card-head"><div><div class="card-title">Player event records</div><div class="card-note">20 per page · player-bound event records</div></div></div><details class="record-filter"><summary>Filter events</summary><div class="record-filter-options" data-record-filter="events"></div><button class="button" data-record-filter-all="events">Show all</button></details><div class="table-wrap"><table><thead><tr><th>Event</th><th>Category</th><th>Player ID</th><th>Scope</th><th>Time (UTC)</th><th>Properties</th></tr></thead><tbody data-event-rows><tr><td colspan="6" class="empty">N/A</td></tr></tbody></table></div><div class="table-footer" data-record-pagination="events"><span data-record-summary="events">N/A</span><div class="inline"><button class="button" data-record-prev="events" disabled>Previous</button><select class="select" data-record-page="events" aria-label="events page"></select><button class="button" data-record-next="events" disabled>Next</button></div></div></article></section><section class="player-info-panel" data-profile-panel="sales"><article class="card"><div class="card-head"><div><div class="card-title">Player purchase history</div><div class="card-note">Recorded sales associated with this internal player ID</div></div></div><details class="record-filter"><summary>Filter purchases</summary><div class="record-filter-options" data-record-filter="purchases"></div><button class="button" data-record-filter-all="purchases">Show all</button></details><div class="table-wrap"><table><thead><tr><th>Receipt</th><th>Product</th><th>Roblox product ID</th><th>Player ID</th><th>Unit price</th><th>Quantity</th><th>Total</th><th>Purchased (UTC)</th></tr></thead><tbody data-sale-rows><tr><td colspan="8" class="empty">N/A</td></tr></tbody></table></div><div class="table-footer" data-record-pagination="purchases"><span data-record-summary="purchases">N/A</span><div class="inline"><button class="button" data-record-prev="purchases" disabled>Previous</button><select class="select" data-record-page="purchases" aria-label="purchases page"></select><button class="button" data-record-next="purchases" disabled>Next</button></div></div></article></section><div class="toast" data-toast role="status"></div></section></main></div><nav class="mobile-nav"><a class="" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="" href="sessions-mockup.html"><span class="nav-icon">◷</span>Analytics</a><a class="active" 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>