Stat-Dashboard/mockups/players-mockup.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Players — Statboard</title><link rel="stylesheet" href="mockup.css"></head>
<body data-page="players"><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">Players</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>Players</h1><div class="subtitle">Inspect latest snapshots and session aggregates. Open a player for all stored records.</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="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">Tracked players</div><div class="metric-value" data-metric="playerCount" data-format="number">N/A</div><div class="metric-foot">All players under the selected game</div></article><article class="card card-pad metric-card"><div class="metric-label">Active in last 7 days</div><div class="metric-value" data-metric="activePlayers" data-format="number">N/A</div><div class="metric-foot">Based on last seen</div></article><article class="card card-pad metric-card"><div class="metric-label">Average known level</div><div class="metric-value" data-metric="averageLevel" data-format="decimal">N/A</div><div class="metric-foot">Unavailable levels excluded</div></article><article class="card card-pad metric-card"><div class="metric-label">Completed playtime</div><div class="metric-value" data-metric="totalPlaytime" data-format="duration">N/A</div><div class="metric-foot">Sum of known completed-session durations</div></article></div><section class="section-gap hall-of-fame"><div class="page-heading"><div><h2>Hall of Fame</h2><div class="card-note">Top five players per stat across the game</div></div><label class="control-label">Other ranking<select class="select" data-leaderboard-value></select></label></div><div class="grid two-col" data-leaderboards></div></section><article class="card section-gap"><div class="card-head"><div><div class="card-title">Player stats</div><div class="card-note">The selected sort value is the first stat column. Missing values always sort last.</div></div><input class="filter-input" data-player-search placeholder="Search name or Roblox user ID"></div><div class="player-segments" role="group" aria-label="Player groups"><button class="segment-button active" data-player-segment="all">All players</button><button class="segment-button " data-player-segment="whales">Whales · top spend</button><button class="segment-button " data-player-segment="playtime">Top playtime</button><button class="segment-button " data-player-segment="first">First-time</button></div><div class="filters player-controls"><label class="control-label">Columns<select class="select" data-player-template></select></label><label class="control-label">Sort by<select class="select" data-player-sort></select></label><label class="control-label">Direction<select class="select" data-player-direction><option value="desc">Highest first</option><option value="asc">Lowest first</option></select></label></div><div class="table-wrap player-table-wrap"><table><thead><tr data-player-head><th>Player</th></tr></thead><tbody data-player-rows><tr><td>N/A</td></tr></tbody></table></div><div class="table-footer"><span data-page-summary>N/A</span><div class="inline"><button class="button" data-prev>Previous</button><select class="select" data-player-page aria-label="Player page"></select><button class="button" data-next>Next</button></div></div></article><div class="card card-pad section-gap"><div class="setting-title">Player groups</div><div class="setting-help" data-group-definitions>N/A</div></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>