Files
Stat-Dashboard/mockups/activities-mockup.html

3 lines
8.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Activity sessions — Statboard</title><link rel="stylesheet" href="mockup.css"></head>
<body data-page="activities"><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="" 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="active" 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">Activity 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>Activity sessions</h1><div class="subtitle">Aggregate activity duration and outcomes; individual runs are stored in player info.</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="activity-picker-row"><label class="control-label">Activity<select class="select" data-activity-select></select></label><label class="control-label">Player group<select class="select" data-activity-group><option value="all">All players</option><option value="whales">Whales</option><option value="playtime">Top playtime</option><option value="first">First-time</option></select></label><button class="button" data-new-activity>+ New draft</button></div><nav class="tabs"><a class="active" href="#insights" data-activity-tab="insights">Insights</a><a class="" href="#records" data-activity-tab="records">Run analysis</a><a class="" href="#configure" data-activity-tab="configure">Configure</a></nav><section class="activity-panel active" data-activity-panel="insights"><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">Activity runs</div><div class="metric-value" data-metric="runs" data-format="number">N/A</div><div class="metric-foot">Selected activity, group and period</div></article><article class="card card-pad metric-card"><div class="metric-label">Average time</div><div class="metric-value" data-metric="average" data-format="duration">N/A</div><div class="metric-foot">Runs with a reported end</div></article><article class="card card-pad metric-card"><div class="metric-label">Median time</div><div class="metric-value" data-metric="median" data-format="duration">N/A</div><div class="metric-foot">Runs with a reported end</div></article><article class="card card-pad metric-card"><div class="metric-label">Completed</div><div class="metric-value" data-metric="completion" data-format="percent">N/A</div><div class="metric-foot">Runs with end report</div></article><article class="card card-pad metric-card"><div class="metric-label">Prompt rate</div><div class="metric-value" data-metric="promptRate" data-format="percent">N/A</div><div class="metric-foot">Runs with a recorded prompt</div></article><article class="card card-pad metric-card"><div class="metric-label">Purchase rate</div><div class="metric-value" data-metric="purchaseRate" data-format="percent">N/A</div><div class="metric-foot">Runs with purchase outcome</div></article><article class="card card-pad metric-card"><div class="metric-label">Prompt to purchase</div><div class="metric-value" data-metric="promptPurchaseRate" data-format="percent">N/A</div><div class="metric-foot">Purchased among prompted runs</div></article></div><article class="card"><div class="card-head"><div><div class="card-title">Configured journey</div><div class="card-note">Ordered stages · reach is measured from all starts; drop-off is measured from the previous stage</div></div></div><div class="activity-flow" data-activity-journey></div></article><div class="section-gap"><article class="card"><div class="card-head"><div><div class="card-title">Stage conversion</div><div class="card-note">Only sequentially reached stages count. Missing stage reports display N/A.</div></div></div><div class="table-wrap"><table><thead><tr><th>Stage</th><th>Runs</th><th>Reached from start</th><th>From previous stage</th><th>Drop-off</th><th>Dropped runs</th><th>Unknown runs</th></tr></thead><tbody data-stage-rows><tr><td colspan="7" class="empty">N/A</td></tr></tbody></table></div></article></div><div class="grid two-col section-gap"><article class="card"><div class="card-head"><div><div class="card-title">Average activity duration</div><div class="card-note">Seconds by UTC date</div></div></div><div class="chart-wrap" data-chart="trend"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">Captured values</div><div class="card-note">Only reported values are summarized</div></div></div><div class="table-wrap"><table><thead><tr><th>Field</th><th>Summary</th><th>Value</th></tr></thead><tbody data-captured-rows><tr><td colspan="3" class="empty">N/A</td></tr></tbody></table></div></article></div></section><section class="activity-panel" data-activity-panel="records"><article class="card"><div class="card-head"><div><div class="card-title">Activity outcomes</div><div class="card-note">Aggregate groups, not a list of players. Unknown outcomes and durations display N/A.</div></div></div><div class="table-wrap"><table><thead><tr><th>Outcome</th><th>Runs</th><th>Share</th><th>Average time</th><th>Median time</th></tr></thead><tbody data-outcome-rows><tr><td colspan="5" class="empty">N/A</td></tr></tbody></table></div></article></section><section class="activity-panel" data-activity-panel="configure"><article class="card card-pad"><div class="card-title">Activity definition</div><div class="card-note">Loaded from PostgreSQL. Editing remains a UI draft; changes are not saved.</div><div class="config-grid"><label>Activity name<input class="filter-input" data-activity-name></label><label>Start event<input class="filter-input" data-start-event></label><label>End event<input class="filter-input" data-end-event></label><label>Timeout<select class="select"><option>N/A</option><option>30 minutes</option><option>1 hour</option></select></label></div><div class="setting-row"><div class="setting-title">Journey events</div><button class="button" data-add-step>+ Add event</button></div><div class="config-events" data-config-events></div><div class="setting-row"><div class="setting-title">Captured properties</div><button class="button" data-add-field>+ Add value</button></div><div class="capture-fields" data-capture-fields></div><button class="button primary" data-save-activity>Preview draft</button></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="" href="players-mockup.html"><span class="nav-icon">♙</span>Players</a><a class="active" 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>