adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style: update login location

Browse Source
This commit is contained in:
adrianbonpin
2026-04-26 15:35:27 +08:00
parent 88cd5ef0e7
commit 12ef1dd537
12 changed files with 962 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/44094-1777186296/content/badge-naming.html
+33
View File
@@ -0,0 +1,33 @@
<h2>Badge Naming — "Native Champion" Alternatives</h2>
<p class="subtitle">This badge marks games/presets that hit 60+ FPS with zero FSR and zero frame generation. Which name fits the brand best?</p>
<div class="options">
<div class="option" data-choice="raw-performer" onclick="toggleSelect(this)">
<div class="letter">A</div>
<div class="content">
<h3>Raw Performer</h3>
<p>Emphasizes unassisted performance. Technical, no-nonsense. "Raw" signals no upscaling tricks.</p>
</div>
</div>
<div class="option" data-choice="pure-performance" onclick="toggleSelect(this)">
<div class="letter">B</div>
<div class="content">
<h3>Pure Performance</h3>
<p>Clean and clear. "Pure" = untouched settings. Easy to understand at a glance.</p>
</div>
</div>
<div class="option" data-choice="native-champion" onclick="toggleSelect(this)">
<div class="letter">C</div>
<div class="content">
<h3>Native Champion</h3>
<p>Your original idea. "Champion" has a competitive/gaming feel. Slightly longer.</p>
</div>
</div>
<div class="option" data-choice="untouched" onclick="toggleSelect(this)">
<div class="letter">D</div>
<div class="content">
<h3>Untouched</h3>
<p>Short, punchy. Implies the game runs great without any modifications. Memorable.</p>
</div>
</div>
</div>
.superpowers/brainstorm/44094-1777186296/content/game-page-layout.html
+149
View File
@@ -0,0 +1,149 @@
<h2>Game Page Layout — Overall Structure</h2>
<p class="subtitle">Here's the proposed page structure top-to-bottom. Each section is labeled.</p>
<div class="mockup">
<div class="mockup-header">Section 1: Hero Header — Card Image + Game Info</div>
<div class="mockup-body" style="padding: 0; overflow: hidden;">
<div style="display: flex; gap: 16px; padding: 16px; background: linear-gradient(135deg, #1a1025, #0d0814);">
<!-- Cover image (2:3 aspect ratio) -->
<div style="width: 120px; height: 180px; border-radius: 8px; background: #2a1f35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #3d2d52;">
<span style="color: #6b5a7d; font-size: 11px;">2:3 Cover</span>
</div>
<!-- Info panel -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
<div style="font-size: 18px; font-weight: 700; color: #ebe4f1;">Game Title Here</div>
<div style="font-size: 12px; color: #8b7a9e;">Developer · Publisher · Genre, Genre</div>
<!-- 3 info badges + price/metacritic -->
<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;">
<span style="background: #eb377920; border: 1px solid #eb377940; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #eb3779;">🎮 42 Benchmarks</span>
<span style="background: #571b8b20; border: 1px solid #571b8b40; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #9b6fc7;">⚙️ 8 Presets</span>
<span style="background: #fb793c20; border: 1px solid #fb793c40; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #fb793c;">💬 15 Comments</span>
<span style="background: #22c55e20; border: 1px solid #22c55e40; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #22c55e;">Metascore: 87</span>
<span style="background: #ebe4f110; border: 1px solid #ebe4f120; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #8b7a9e;">$29.99</span>
</div>
<!-- External links -->
<div style="display: flex; gap: 6px; margin-top: 4px;">
<span style="background: #1b2838; border: 1px solid #2a475e; padding: 3px 10px; border-radius: 6px; font-size: 10px; color: #c6d4df;">Steam ↗</span>
<span style="background: #7c3aed15; border: 1px solid #7c3aed30; padding: 3px 10px; border-radius: 6px; font-size: 10px; color: #a78bfa;">ProtonDB ↗</span>
<span style="background: #3b82f615; border: 1px solid #3b82f630; padding: 3px 10px; border-radius: 6px; font-size: 10px; color: #60a5fa;">SteamDB ↗</span>
</div>
<!-- DB Stats -->
<div style="display: flex; gap: 12px; margin-top: 4px; font-size: 10px; color: #6b5a7d;">
<span>📊 42 benchmarks</span>
<span>📋 3 game versions</span>
<span>✅ 12 verified entries</span>
<span>🕐 Last updated 2 days ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 2: Overview — Description + Details</div>
<div class="mockup-body">
<div style="display: flex; gap: 24px;">
<div style="flex: 2;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">About</div>
<div style="font-size: 13px; color: #8b7a9e; line-height: 1.6;">Game description text goes here. This is the Steam short description that gets synced from the store page. It provides context about what the game is about...</div>
</div>
<div style="flex: 1;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">Details</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px;">
<div><span style="color: #6b5a7d;">Source:</span> <span style="color: #8b7a9e;">Steam</span></div>
<div><span style="color: #6b5a7d;">AppID:</span> <span style="color: #8b7a9e;">1234567</span></div>
<div><span style="color: #6b5a7d;">Added:</span> <span style="color: #8b7a9e;">Jan 15, 2026</span></div>
<div><span style="color: #6b5a7d;">Last Sync:</span> <span style="color: #8b7a9e;">2 days ago</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 3: Device Selector Ribbon + Fine Filters</div>
<div class="mockup-body">
<!-- Device ribbon -->
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 10px;">Select Devices</div>
<div style="display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;">
<div style="background: #eb377930; border: 1px solid #eb3779; padding: 6px 14px; border-radius: 20px; font-size: 12px; color: #eb3779; white-space: nowrap; cursor: pointer;">✓ Steam Deck OLED</div>
<div style="background: #ebe4f108; border: 1px solid #ebe4f120; padding: 6px 14px; border-radius: 20px; font-size: 12px; color: #6b5a7d; white-space: nowrap; cursor: pointer;">Steam Deck LCD</div>
<div style="background: #ebe4f108; border: 1px solid #ebe4f120; padding: 6px 14px; border-radius: 20px; font-size: 12px; color: #6b5a7d; white-space: nowrap; cursor: pointer;">Steam Machine</div>
</div>
<!-- Fine filters -->
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin: 12px 0 8px;">Filters</div>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;">
<option>All Proton Versions</option>
</select>
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;">
<option>All SteamOS Versions</option>
</select>
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;">
<option>FSR: Any</option>
</select>
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;">
<option>Frame Gen: Any</option>
</select>
</div>
</div>
</div>
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 4: Statistics Dashboard (ECharts)</div>
<div class="mockup-body">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
<!-- Boxplot -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">AVG FPS Distribution (Boxplot)</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px;">
[Boxplot: Min / Q1 / Median / Q3 / Max per device]
</div>
</div>
<!-- Historical -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">Historical AVG FPS (Stacked Area)</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px;">
[Area chart: FPS over time by proton/OS version]
</div>
</div>
<!-- FSR/Frame Gen grouped bar -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">FPS by Upscaler & Frame Gen</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px;">
[Grouped bar: FPS by FSR version × frame gen method]
</div>
</div>
<!-- Device breakdown -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">Entries per Device</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px;">
[Pie/donut or bar: count per device]
</div>
</div>
</div>
</div>
</div>
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 5: Preset Entries</div>
<div class="mockup-body">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 10px;">Community Presets</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px; display: flex; justify-content: space-between; align-items: center;">
<div>
<div style="font-size: 13px; color: #ebe4f1; font-weight: 600;">"Best Quality" by @user1</div>
<div style="font-size: 11px; color: #6b5a7d; margin-top: 2px;">Steam Deck OLED · ↑ 24 · 8 settings</div>
</div>
<div style="font-size: 13px; color: #22c55e; font-weight: 600;">Avg 45 FPS</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px; display: flex; justify-content: space-between; align-items: center;">
<div>
<div style="font-size: 13px; color: #ebe4f1; font-weight: 600;">"Battery Saver" by @user2</div>
<div style="font-size: 11px; color: #6b5a7d; margin-top: 2px;">Steam Deck OLED · ↑ 18 · 6 settings</div>
</div>
<div style="font-size: 13px; color: #fb793c; font-weight: 600;">Avg 60 FPS</div>
</div>
</div>
</div>
</div>
.superpowers/brainstorm/44094-1777186296/content/game-page-v2.html
+223
View File
@@ -0,0 +1,223 @@
<h2>Game Page v2 — Updated Layout</h2>
<p class="subtitle">Changes: "Raw Performer" badge, no duplicate stats, full-width priority charts, enhanced preset cards.</p>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SECTION 1: HERO HEADER -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="mockup">
<div class="mockup-header">Section 1: Hero Header</div>
<div class="mockup-body" style="padding: 0; overflow: hidden;">
<div style="display: flex; gap: 16px; padding: 16px; background: linear-gradient(135deg, #1a1025, #0d0814);">
<!-- Cover image (2:3 aspect ratio) -->
<div style="width: 120px; height: 180px; border-radius: 8px; background: #2a1f35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #3d2d52;">
<span style="color: #6b5a7d; font-size: 11px;">2:3 Cover</span>
</div>
<!-- Info panel -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
<span style="font-size: 18px; font-weight: 700; color: #ebe4f1;">Game Title Here</span>
<!-- Raw Performer badge -->
<span style="background: linear-gradient(135deg, #22c55e30, #22c55e10); border: 1px solid #22c55e50; padding: 2px 10px; border-radius: 12px; font-size: 10px; color: #4ade80; font-weight: 600; letter-spacing: 0.5px;">⚡ RAW PERFORMER</span>
</div>
<div style="font-size: 12px; color: #8b7a9e;">Developer · Publisher · Genre, Genre</div>
<!-- 3 info badges + price/metacritic -->
<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;">
<span style="background: #eb377920; border: 1px solid #eb377940; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #eb3779;">🎮 42 Benchmarks</span>
<span style="background: #571b8b20; border: 1px solid #571b8b40; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #9b6fc7;">⚙️ 8 Presets</span>
<span style="background: #fb793c20; border: 1px solid #fb793c40; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #fb793c;">💬 15 Comments</span>
<span style="background: #22c55e20; border: 1px solid #22c55e40; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #22c55e;">Metascore: 87</span>
<span style="background: #ebe4f110; border: 1px solid #ebe4f120; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #8b7a9e;">$29.99</span>
</div>
<!-- External links -->
<div style="display: flex; gap: 6px; margin-top: 4px;">
<span style="background: #1b2838; border: 1px solid #2a475e; padding: 3px 10px; border-radius: 6px; font-size: 10px; color: #c6d4df;">Steam ↗</span>
<span style="background: #7c3aed15; border: 1px solid #7c3aed30; padding: 3px 10px; border-radius: 6px; font-size: 10px; color: #a78bfa;">ProtonDB ↗</span>
<span style="background: #3b82f615; border: 1px solid #3b82f630; padding: 3px 10px; border-radius: 6px; font-size: 10px; color: #60a5fa;">SteamDB ↗</span>
</div>
<!-- DB Stats row (no duplicate benchmark count) -->
<div style="display: flex; gap: 12px; margin-top: 4px; font-size: 10px; color: #6b5a7d;">
<span>📋 3 versions</span>
<span>✅ 12 verified</span>
<span>🕐 Synced 2 days ago</span>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SECTION 2: OVERVIEW -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 2: Overview</div>
<div class="mockup-body">
<div style="display: flex; gap: 24px;">
<div style="flex: 2;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">About</div>
<div style="font-size: 13px; color: #8b7a9e; line-height: 1.6;">Game description text goes here. This is the Steam short description that gets synced from the store page...</div>
</div>
<div style="flex: 1;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">Details</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px;">
<div><span style="color: #6b5a7d;">Source:</span> <span style="color: #8b7a9e;">Steam</span></div>
<div><span style="color: #6b5a7d;">AppID:</span> <span style="color: #8b7a9e;">1234567</span></div>
<div><span style="color: #6b5a7d;">Added:</span> <span style="color: #8b7a9e;">Jan 15, 2026</span></div>
<div><span style="color: #6b5a7d;">Last Sync:</span> <span style="color: #8b7a9e;">2 days ago</span></div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SECTION 3: DEVICE SELECTOR + FILTERS -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 3: Device Selector Ribbon + Filters</div>
<div class="mockup-body">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 10px;">Select Devices</div>
<div style="display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;">
<div style="background: #eb377930; border: 1px solid #eb3779; padding: 6px 14px; border-radius: 20px; font-size: 12px; color: #eb3779; white-space: nowrap;">✓ Steam Deck OLED</div>
<div style="background: #ebe4f108; border: 1px solid #ebe4f120; padding: 6px 14px; border-radius: 20px; font-size: 12px; color: #6b5a7d; white-space: nowrap;">Steam Deck LCD</div>
<!-- Only devices with data are shown -->
</div>
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin: 12px 0 8px;">Filters</div>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;"><option>All Proton Versions</option></select>
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;"><option>All SteamOS Versions</option></select>
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;"><option>FSR: Any</option></select>
<select style="background: #1a1025; border: 1px solid #3d2d52; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #8b7a9e;"><option>Frame Gen: Any</option></select>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SECTION 4: STATISTICS DASHBOARD -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 4: Statistics Dashboard (ECharts)</div>
<div class="mockup-body" style="display: flex; flex-direction: column; gap: 12px;">
<!-- ROW 1: Full-width — Historical AVG FPS -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">📈 Historical AVG FPS — Full Width</div>
<div style="height: 140px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px; border: 1px dashed #3d2d52; border-radius: 6px;">
[Stacked Area: AVG FPS trend over time, grouped by Proton/SteamOS version]
</div>
</div>
<!-- ROW 2: Full-width — FPS by Upscaler & Frame Gen -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">🎮 FPS by Upscaler & Frame Gen — Full Width</div>
<div style="height: 140px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px; border: 1px dashed #3d2d52; border-radius: 6px;">
[Grouped Bar: FPS by FSR version (none/1/2/3) × Frame Gen (none/fsr_fg/dlss_fg), with label rotation]
</div>
</div>
<!-- ROW 3: Half-width grid — Boxplot + Device breakdown -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">📊 AVG FPS Boxplot</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px; border: 1px dashed #3d2d52; border-radius: 6px;">
[Boxplot per device: Min/Q1/Median/Q3/Max]
</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">🖥️ Entries per Device</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px; border: 1px dashed #3d2d52; border-radius: 6px;">
[Donut: benchmark count per device]
</div>
</div>
</div>
<!-- ROW 4: Half-width grid — FPS Range + Load Times -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">📉 FPS Range (Low vs High)</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px; border: 1px dashed #3d2d52; border-radius: 6px;">
[Range bar: fpsLow → fpsHigh per entry]
</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">⏱️ Load Times (SSD vs SD)</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px; border: 1px dashed #3d2d52; border-radius: 6px;">
[Bar: SSD vs SD load times — only shows if data exists]
</div>
</div>
</div>
<!-- ROW 5: Full-width — Community Trust -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 8px;">✅ Community Trust — Full Width</div>
<div style="height: 100px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 12px; border: 1px dashed #3d2d52; border-radius: 6px;">
[Horizontal bar: verified badge count + upvote/downvote ratio per benchmark entry]
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SECTION 5: PRESET ENTRIES -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Section 5: Community Presets</div>
<div class="mockup-body" style="display: flex; flex-direction: column; gap: 10px;">
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b5a7d; margin-bottom: 4px;">Community Presets</div>
<!-- Preset 1: Raw Performer -->
<div style="border: 1px solid #22c55e40; border-radius: 8px; padding: 12px; background: #22c55e08;">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 14px; color: #ebe4f1; font-weight: 600;">"Vanilla 60fps"</span>
<span style="background: linear-gradient(135deg, #22c55e30, #22c55e10); border: 1px solid #22c55e50; padding: 1px 8px; border-radius: 10px; font-size: 9px; color: #4ade80; font-weight: 600;">⚡ RAW PERFORMER</span>
</div>
<div style="font-size: 11px; color: #6b5a7d; margin-top: 4px;">by @user1 · Steam Deck OLED · ↑ 24 votes · 8 settings</div>
<div style="font-size: 11px; color: #8b7a9e; margin-top: 6px; line-height: 1.4;">No FSR · No Frame Gen · Proton 9.0-4 · SteamOS 3.6.20</div>
</div>
<div style="text-align: right;">
<div style="font-size: 18px; color: #22c55e; font-weight: 700;">62 FPS</div>
<div style="font-size: 10px; color: #6b5a7d;">avg · 48 low · 71 high</div>
</div>
</div>
</div>
<!-- Preset 2: With upscaling -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 14px; color: #ebe4f1; font-weight: 600;">"Max Quality + FSR"</span>
</div>
<div style="font-size: 11px; color: #6b5a7d; margin-top: 4px;">by @user2 · Steam Deck OLED · ↑ 18 votes · 10 settings</div>
<div style="font-size: 11px; color: #8b7a9e; margin-top: 6px; line-height: 1.4;">
<span style="color: #a78bfa;">FSR 3</span> · <span style="color: #fb793c;">FSR Frame Gen</span> · Proton 9.0-4 · SteamOS 3.6.20
</div>
</div>
<div style="text-align: right;">
<div style="font-size: 18px; color: #fb793c; font-weight: 700;">85 FPS</div>
<div style="font-size: 10px; color: #6b5a7d;">avg · 72 low · 94 high</div>
</div>
</div>
</div>
<!-- Preset 3: With DLSS frame gen -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 14px; color: #ebe4f1; font-weight: 600;">"Balanced + DLSS FG"</span>
</div>
<div style="font-size: 11px; color: #6b5a7d; margin-top: 4px;">by @user3 · Steam Deck LCD · ↑ 9 votes · 7 settings</div>
<div style="font-size: 11px; color: #8b7a9e; margin-top: 6px; line-height: 1.4;">
<span style="color: #a78bfa;">FSR 2</span> · <span style="color: #60a5fa;">DLSS Frame Gen</span> · Proton 8.0-5 · SteamOS 3.5.19
</div>
</div>
<div style="text-align: right;">
<div style="font-size: 18px; color: #60a5fa; font-weight: 700;">72 FPS</div>
<div style="font-size: 10px; color: #6b5a7d;">avg · 58 low · 81 high</div>
</div>
</div>
</div>
</div>
</div>
.superpowers/brainstorm/44094-1777186296/content/search-badge.html
+60
View File
@@ -0,0 +1,60 @@
<h2>Search Card — Raw Performer Badge</h2>
<p class="subtitle">How the badge appears on search result cards. Same green pill style as the game page hero.</p>
<div class="mockup">
<div class="mockup-header">Search Result Card with Raw Performer</div>
<div class="mockup-body" style="padding: 0;">
<!-- Card with badge -->
<div style="display: flex; gap: 14px; padding: 14px; background: #ebe4f105; border: 1px solid #ebe4f110; border-radius: 12px; margin: 12px;">
<!-- Cover -->
<div style="width: 80px; height: 120px; border-radius: 8px; background: #2a1f35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #3d2d52;">
<span style="color: #6b5a7d; font-size: 10px;">2:3</span>
</div>
<!-- Content -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 6px;">
<!-- Title row with badge -->
<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
<span style="font-size: 14px; font-weight: 600; color: #ebe4f1;">Baldur's Gate 3</span>
<span style="background: linear-gradient(135deg, #22c55e30, #22c55e10); border: 1px solid #22c55e50; padding: 1px 8px; border-radius: 10px; font-size: 9px; color: #4ade80; font-weight: 600; letter-spacing: 0.5px;">⚡ RAW PERFORMER</span>
</div>
<span style="font-size: 11px; color: #8b7a9e;">Larian Studios · Publisher</span>
<p style="font-size: 11px; color: #6b5a7d; line-height: 1.4; margin: 0;">Gather your party and return to the Forgotten Realms in a tale of fellowship and betrayal...</p>
<!-- Tags -->
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;">
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">RPG</span>
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">Strategy</span>
</div>
<!-- Stats -->
<div style="display: flex; gap: 12px; margin-top: 4px;">
<span style="font-size: 11px; color: #eb3779;">🎮 28 Benchmarks</span>
<span style="font-size: 11px; color: #9b6fc7;">⚙️ 5 Presets</span>
<span style="font-size: 11px; color: #fb793c;">💬 12 Comments</span>
</div>
</div>
</div>
<!-- Card without badge (for comparison) -->
<div style="display: flex; gap: 14px; padding: 14px; background: #ebe4f105; border: 1px solid #ebe4f110; border-radius: 12px; margin: 0 12px 12px;">
<div style="width: 80px; height: 120px; border-radius: 8px; background: #2a1f35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #3d2d52;">
<span style="color: #6b5a7d; font-size: 10px;">2:3</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 6px;">
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 14px; font-weight: 600; color: #ebe4f1;">Cyberpunk 2077</span>
<!-- No badge -->
</div>
<span style="font-size: 11px; color: #8b7a9e;">CD Projekt Red · Publisher</span>
<p style="font-size: 11px; color: #6b5a7d; line-height: 1.4; margin: 0;">An open-world action-adventure story set in Night City...</p>
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;">
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">RPG</span>
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">Action</span>
</div>
<div style="display: flex; gap: 12px; margin-top: 4px;">
<span style="font-size: 11px; color: #eb3779;">🎮 45 Benchmarks</span>
<span style="font-size: 11px; color: #9b6fc7;">⚙️ 12 Presets</span>
<span style="font-size: 11px; color: #fb793c;">💬 34 Comments</span>
</div>
</div>
</div>
</div>
</div>
.superpowers/brainstorm/44094-1777186296/content/search-card-final.html
+130
View File
@@ -0,0 +1,130 @@
<h2>Search Card — Final Design</h2>
<p class="subtitle">Existing layout preserved. Added: Raw Performer badge, real Avg FPS, real Version. No other layout changes.</p>
<div class="mockup">
<div class="mockup-header">Local Result — With Raw Performer</div>
<div class="mockup-body" style="padding: 0;">
<div style="display: flex; gap: 14px; padding: 14px; background: #ebe4f105; border: 1px solid #ebe4f110; border-radius: 12px; margin: 12px;">
<!-- Cover (unchanged) -->
<div style="width: 80px; height: 120px; border-radius: 8px; background: #2a1f35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #3d2d52;">
<span style="color: #6b5a7d; font-size: 10px;">2:3</span>
</div>
<!-- Content (unchanged layout) -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 6px;">
<!-- Title + Raw Performer badge (NEW) -->
<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
<span style="font-size: 14px; font-weight: 600; color: #ebe4f1;">Baldur's Gate 3</span>
<span style="background: linear-gradient(135deg, #22c55e30, #22c55e10); border: 1px solid #22c55e50; padding: 1px 8px; border-radius: 10px; font-size: 9px; color: #4ade80; font-weight: 600;">⚡ RAW PERFORMER</span>
</div>
<span style="font-size: 11px; color: #8b7a9e;">Larian Studios · Publisher</span>
<p style="font-size: 11px; color: #6b5a7d; line-height: 1.4; margin: 0;">Gather your party and return to the Forgotten Realms...</p>
<!-- Tags (unchanged) -->
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;">
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">RPG</span>
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">Strategy</span>
</div>
<!-- Stats (unchanged) -->
<div style="display: flex; gap: 12px; margin-top: 4px;">
<span style="font-size: 11px; color: #eb3779;">🎮 28 Benchmarks</span>
<span style="font-size: 11px; color: #9b6fc7;">⚙️ 5 Presets</span>
<span style="font-size: 11px; color: #fb793c;">💬 12 Comments</span>
</div>
</div>
<!-- Right panel (existing, now with real data) -->
<div style="display: flex; flex-direction: column; align-items: end; justify-content: center; gap: 10px; min-width: 100px; border-left: 1px solid #ebe4f110; padding-left: 14px;">
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d; letter-spacing: 0.5px;">Deck</div>
<div style="font-size: 12px; color: #22c55e; font-weight: 500;">Native</div>
</div>
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d; letter-spacing: 0.5px;">Best FPS</div>
<div style="font-size: 12px; color: #22c55e; font-weight: 600; font-variant-numeric: tabular-nums;">68</div>
</div>
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d; letter-spacing: 0.5px;">Version</div>
<div style="font-size: 12px; color: #8b7a9e; font-variant-numeric: tabular-nums;">v4.1.1.6</div>
</div>
</div>
</div>
</div>
</div>
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Local Result — Without Raw Performer (for comparison)</div>
<div class="mockup-body" style="padding: 0;">
<div style="display: flex; gap: 14px; padding: 14px; background: #ebe4f105; border: 1px solid #ebe4f110; border-radius: 12px; margin: 12px;">
<div style="width: 80px; height: 120px; border-radius: 8px; background: #2a1f35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #3d2d52;">
<span style="color: #6b5a7d; font-size: 10px;">2:3</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 6px;">
<!-- Title — no badge -->
<span style="font-size: 14px; font-weight: 600; color: #ebe4f1;">Cyberpunk 2077</span>
<span style="font-size: 11px; color: #8b7a9e;">CD Projekt Red · Publisher</span>
<p style="font-size: 11px; color: #6b5a7d; line-height: 1.4; margin: 0;">An open-world action-adventure story set in Night City...</p>
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;">
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">RPG</span>
</div>
<div style="display: flex; gap: 12px; margin-top: 4px;">
<span style="font-size: 11px; color: #eb3779;">🎮 45 Benchmarks</span>
<span style="font-size: 11px; color: #9b6fc7;">⚙️ 12 Presets</span>
</div>
</div>
<!-- Right panel — best FPS lower, no raw performer -->
<div style="display: flex; flex-direction: column; align-items: end; justify-content: center; gap: 10px; min-width: 100px; border-left: 1px solid #ebe4f110; padding-left: 14px;">
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d; letter-spacing: 0.5px;">Deck</div>
<div style="font-size: 12px; color: #3b82f6; font-weight: 500;">Proton</div>
</div>
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d; letter-spacing: 0.5px;">Best FPS</div>
<div style="font-size: 12px; color: #fb793c; font-weight: 600; font-variant-numeric: tabular-nums;">42</div>
</div>
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d; letter-spacing: 0.5px;">Version</div>
<div style="font-size: 12px; color: #8b7a9e; font-variant-numeric: tabular-nums;">v2.13</div>
</div>
</div>
</div>
</div>
</div>
<div class="mockup" style="margin-top: 16px;">
<div class="mockup-header">Steam-Only Result (unchanged — no local data)</div>
<div class="mockup-body" style="padding: 0;">
<div style="display: flex; gap: 14px; padding: 14px; background: #ebe4f105; border: 1px solid #ebe4f110; border-radius: 12px; margin: 12px;">
<div style="width: 80px; height: 120px; border-radius: 8px; background: #2a1f35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #3d2d52;">
<span style="color: #6b5a7d; font-size: 10px;">2:3</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 6px;">
<span style="font-size: 14px; font-weight: 600; color: #ebe4f1;">Elden Ring</span>
<span style="font-size: 11px; color: #8b7a9e;">FromSoftware · Bandai Namco</span>
<p style="font-size: 11px; color: #6b5a7d; line-height: 1.4; margin: 0;">THE NEW FANTASY ACTION RPG...</p>
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;">
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">RPG</span>
<span style="font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ebe4f108; border: 1px solid #ebe4f115; color: #6b5a7d;">Action</span>
</div>
<!-- Steam links (unchanged) -->
<div style="display: flex; gap: 6px; margin-top: 4px;">
<span style="font-size: 10px; padding: 3px 8px; border-radius: 6px; background: #1b2838; border: 1px solid #2a475e; color: #c6d4df;">Steam ↗</span>
<span style="font-size: 10px; padding: 3px 8px; border-radius: 6px; background: #7c3aed15; border: 1px solid #7c3aed30; color: #a78bfa;">ProtonDB ↗</span>
<span style="font-size: 10px; padding: 3px 8px; border-radius: 6px; background: #3b82f615; border: 1px solid #3b82f630; color: #60a5fa;">SteamDB ↗</span>
</div>
</div>
<!-- Right panel — all dashes (unchanged) -->
<div style="display: flex; flex-direction: column; align-items: end; justify-content: center; gap: 10px; min-width: 100px; border-left: 1px solid #ebe4f110; padding-left: 14px;">
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Deck</div>
<div style="font-size: 12px; color: #6b5a7d;">—</div>
</div>
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Best FPS</div>
<div style="font-size: 12px; color: #6b5a7d;">—</div>
</div>
<div style="text-align: right;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Version</div>
<div style="font-size: 12px; color: #6b5a7d;">—</div>
</div>
</div>
</div>
</div>
</div>
.superpowers/brainstorm/44094-1777186296/content/stats-layouts.html
+191
View File
@@ -0,0 +1,191 @@
<h2>Stats Dashboard — Layout Alternatives</h2>
<p class="subtitle">Three layout options for the statistics section. Click the one that feels best.</p>
<style>
.layout-demo { border: 1px solid #3d2d52; border-radius: 10px; padding: 16px; background: #0d0814; }
.chart-placeholder { border: 1px dashed #3d2d52; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #4a3a5c; font-size: 11px; text-align: center; padding: 8px; }
.chart-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #6b5a7d; margin-bottom: 6px; }
.full-badge { display: inline-block; font-size: 8px; background: #eb377920; color: #eb3779; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
</style>
<!-- ════════════════════════════════════════════════════════════ -->
<!-- OPTION A: Featured Row + Asymmetric Grid -->
<!-- ════════════════════════════════════════════════════════════ -->
<div class="option" data-choice="a" onclick="toggleSelect(this)" style="cursor: pointer; border-color: transparent;">
<div class="letter" style="margin-bottom: 12px;">A</div>
<h3 style="margin-bottom: 4px;">Featured Row + Asymmetric Grid</h3>
<p class="subtitle" style="margin-bottom: 16px;">Top chart gets a larger container with summary stats beside it. Remaining charts in a flowing grid.</p>
<div class="layout-demo">
<!-- Featured: Historical with side stats -->
<div style="display: flex; gap: 12px; margin-bottom: 12px;">
<div style="flex: 3; border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div class="chart-label">📈 Historical AVG FPS <span class="full-badge">FEATURED</span></div>
<div class="chart-placeholder" style="height: 160px;">[Stacked Area Chart — full width of container]</div>
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Overall Avg</div>
<div style="font-size: 22px; font-weight: 700; color: #22c55e;">54 FPS</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Best Device</div>
<div style="font-size: 13px; font-weight: 600; color: #ebe4f1;">OLED</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Entries</div>
<div style="font-size: 22px; font-weight: 700; color: #a78bfa;">42</div>
</div>
</div>
</div>
<!-- Full-width: Upscaler grouped bar -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
<div class="chart-label">🎮 FPS by Upscaler & Frame Gen <span class="full-badge">FULL</span></div>
<div class="chart-placeholder" style="height: 130px;">[Grouped Bar — FSR version × Frame Gen method]</div>
</div>
<!-- 3-column grid -->
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">📊 Boxplot</div>
<div class="chart-placeholder" style="height: 100px;">[FPS distribution per device]</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">📉 FPS Range</div>
<div class="chart-placeholder" style="height: 100px;">[Low → High per entry]</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">🖥️ Devices</div>
<div class="chart-placeholder" style="height: 100px;">[Donut: entries per device]</div>
</div>
</div>
<!-- Full-width: Community Trust -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div class="chart-label">✅ Community Trust <span class="full-badge">FULL</span></div>
<div class="chart-placeholder" style="height: 80px;">[Horizontal bar: verified + vote ratio per entry]</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════════════════════════ -->
<!-- OPTION B: Dashboard Cards with KPI Strip -->
<!-- ════════════════════════════════════════════════════════════ -->
<div class="option" data-choice="b" onclick="toggleSelect(this)" style="cursor: pointer; border-color: transparent; margin-top: 24px;">
<div class="letter" style="margin-bottom: 12px;">B</div>
<h3 style="margin-bottom: 4px;">Dashboard Cards with KPI Strip</h3>
<p class="subtitle" style="margin-bottom: 16px;">Quick-glance KPI numbers at top, then a clean 2×2 grid of charts, with full-width charts breaking the rhythm where needed.</p>
<div class="layout-demo">
<!-- KPI Strip -->
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px;">
<div style="background: #22c55e10; border: 1px solid #22c55e30; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Avg FPS</div>
<div style="font-size: 20px; font-weight: 700; color: #22c55e;">54</div>
</div>
<div style="background: #3b82f610; border: 1px solid #3b82f630; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Best</div>
<div style="font-size: 20px; font-weight: 700; color: #60a5fa;">71</div>
</div>
<div style="background: #fb793c10; border: 1px solid #fb793c30; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Worst</div>
<div style="font-size: 20px; font-weight: 700; color: #fb793c;">38</div>
</div>
<div style="background: #a78bfa10; border: 1px solid #a78bfa30; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Std Dev</div>
<div style="font-size: 20px; font-weight: 700; color: #a78bfa;">±8</div>
</div>
<div style="background: #ebe4f108; border: 1px solid #ebe4f115; border-radius: 8px; padding: 10px; text-align: center;">
<div style="font-size: 9px; text-transform: uppercase; color: #6b5a7d;">Entries</div>
<div style="font-size: 20px; font-weight: 700; color: #ebe4f1;">42</div>
</div>
</div>
<!-- Full-width: Historical -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px; margin-bottom: 10px;">
<div class="chart-label">📈 Historical AVG FPS <span class="full-badge">FULL</span></div>
<div class="chart-placeholder" style="height: 150px;">[Stacked Area]</div>
</div>
<!-- 2×2 Grid -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">🎮 FPS by Upscaler & Frame Gen</div>
<div class="chart-placeholder" style="height: 120px;">[Grouped Bar]</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">📊 FPS Distribution (Boxplot)</div>
<div class="chart-placeholder" style="height: 120px;">[Boxplot per device]</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">📉 FPS Range</div>
<div class="chart-placeholder" style="height: 120px;">[Low → High]</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">🖥️ Entries per Device</div>
<div class="chart-placeholder" style="height: 120px;">[Donut]</div>
</div>
</div>
<!-- Full-width: Community Trust -->
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div class="chart-label">✅ Community Trust <span class="full-badge">FULL</span></div>
<div class="chart-placeholder" style="height: 80px;">[Horizontal bar]</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════════════════════════ -->
<!-- OPTION C: Sectioned with Visual Separator -->
<!-- ════════════════════════════════════════════════════════════ -->
<div class="option" data-choice="c" onclick="toggleSelect(this)" style="cursor: pointer; border-color: transparent; margin-top: 24px;">
<div class="letter" style="margin-bottom: 12px;">C</div>
<h3 style="margin-bottom: 4px;">Sectioned with Visual Separator</h3>
<p class="subtitle" style="margin-bottom: 16px;">Divides stats into logical groups with subtle dividers. Each group has a label. Full-width charts anchor each section.</p>
<div class="layout-demo">
<!-- Section: Performance Overview -->
<div style="margin-bottom: 16px;">
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #eb3779; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #eb377920;">Performance Overview</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px; margin-bottom: 10px;">
<div class="chart-label">📈 Historical AVG FPS <span class="full-badge">FULL</span></div>
<div class="chart-placeholder" style="height: 150px;">[Stacked Area]</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">📊 FPS Distribution</div>
<div class="chart-placeholder" style="height: 110px;">[Boxplot]</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">📉 FPS Range</div>
<div class="chart-placeholder" style="height: 110px;">[Low → High]</div>
</div>
</div>
</div>
<!-- Section: Technology Impact -->
<div style="margin-bottom: 16px;">
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #a78bfa; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #a78bfa20;">Technology Impact</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 12px;">
<div class="chart-label">🎮 FPS by Upscaler & Frame Gen <span class="full-badge">FULL</span></div>
<div class="chart-placeholder" style="height: 130px;">[Grouped Bar]</div>
</div>
</div>
<!-- Section: Data Coverage & Trust -->
<div>
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #22c55e; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #22c55e20;">Data Coverage & Trust</div>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-bottom: 10px;">
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">🖥️ Devices</div>
<div class="chart-placeholder" style="height: 100px;">[Donut]</div>
</div>
<div style="border: 1px solid #3d2d52; border-radius: 8px; padding: 10px;">
<div class="chart-label">✅ Community Trust <span class="full-badge">FULL</span></div>
<div class="chart-placeholder" style="height: 100px;">[Horizontal bar]</div>
</div>
</div>
</div>
</div>
</div>
.superpowers/brainstorm/44094-1777186296/content/stats-priority.html
+63
View File
@@ -0,0 +1,63 @@
<h2>Stats Dashboard — Chart Priority</h2>
<p class="subtitle">Which charts should be <strong>full-width</strong> (high importance) vs half-width? Select all that you want full-width.</p>
<div class="options" data-multiselect>
<div class="option" data-choice="boxplot" onclick="toggleSelect(this)">
<div class="letter">📊</div>
<div class="content">
<h3>AVG FPS Boxplot</h3>
<p>Min / Q1 / Median / Q3 / Max per device. Shows spread and outliers. Core metric.</p>
</div>
</div>
<div class="option" data-choice="historical" onclick="toggleSelect(this)">
<div class="letter">📈</div>
<div class="content">
<h3>Historical AVG FPS (Stacked Area)</h3>
<p>FPS trend over time by Proton/SteamOS version. Shows if updates help or hurt performance.</p>
</div>
</div>
<div class="option" data-choice="upscaler-bar" onclick="toggleSelect(this)">
<div class="letter">🎮</div>
<div class="content">
<h3>FPS by Upscaler & Frame Gen (Grouped Bar)</h3>
<p>Compare FPS across FSR versions × frame gen methods. Shows the real cost/benefit of each combo.</p>
</div>
</div>
<div class="option" data-choice="device-pie" onclick="toggleSelect(this)">
<div class="letter">🖥️</div>
<div class="content">
<h3>Entries per Device (Donut)</h3>
<p>Simple count of benchmarks per hardware. Shows data coverage.</p>
</div>
</div>
<div class="option" data-choice="fps-range" onclick="toggleSelect(this)">
<div class="letter">📉</div>
<div class="content">
<h3>FPS Range: Low vs High (Range Bar)</h3>
<p>Visualizes fpsLow to fpsHigh spread per entry. Shows consistency — tight range = stable performance.</p>
</div>
</div>
<div class="option" data-choice="load-times" onclick="toggleSelect(this)">
<div class="letter">⏱️</div>
<div class="content">
<h3>Load Times: SSD vs SD (Bar)</h3>
<p>Compare storage load times. Only shows when data exists. Useful for games with long loads.</p>
</div>
</div>
<div class="option" data-choice="proton-breakdown" onclick="toggleSelect(this)">
<div class="letter">🐧</div>
<div class="content">
<h3>Proton Version Breakdown (Stacked Bar)</h3>
<p>Distribution of entries by Proton version. Shows which Proton builds are most tested.</p>
</div>
</div>
<div class="option" data-choice="verified-sentiment" onclick="toggleSelect(this)">
<div class="letter">✅</div>
<div class="content">
<h3>Community Trust: Verified & Votes (Horizontal Bar)</h3>
<p>Shows verified count + upvote/downvote ratio per entry. Helps identify the most trusted benchmarks.</p>
</div>
</div>
</div>
<p class="subtitle" style="margin-top: 20px;">Charts you select will be full-width (one per row). Unselected charts will be half-width (2 per row).</p>
.superpowers/brainstorm/44094-1777186296/state/server-info
+1
View File
@@ -0,0 +1 @@
{"type":"server-started","port":49813,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:49813","screen_dir":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content","state_dir":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/state"}
.superpowers/brainstorm/44094-1777186296/state/server.log
+15
View File
@@ -0,0 +1,15 @@
{"type":"server-started","port":49813,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:49813","screen_dir":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content","state_dir":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/state"}
{"type":"screen-added","file":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content/game-page-layout.html"}
{"type":"screen-added","file":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content/badge-naming.html"}
{"source":"user-event","type":"click","text":"A\n \n Raw Performer\n Emphasizes unassisted performance. Technical, no-nonsense. \"Raw\" signals no upscaling tricks.","choice":"raw-performer","id":null,"timestamp":1777186841487}
{"type":"screen-added","file":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content/stats-priority.html"}
{"source":"user-event","type":"click","text":"📈\n \n Historical AVG FPS (Stacked Area)\n FPS trend over time by Proton/SteamOS version. Shows if updates help or hurt performance.","choice":"historical","id":null,"timestamp":1777186897413}
{"source":"user-event","type":"click","text":"✅\n \n Community Trust: Verified & Votes (Horizontal Bar)\n Shows verified count + upvote/downvote ratio per entry. Helps identify the most trusted benchmarks.","choice":"verified-sentiment","id":null,"timestamp":1777186960801}
{"source":"user-event","type":"click","text":"🖥️\n \n Entries per Device (Donut)\n Simple count of benchmarks per hardware. Shows data coverage.","choice":"device-pie","id":null,"timestamp":1777186972946}
{"source":"user-event","type":"click","text":"🖥️\n \n Entries per Device (Donut)\n Simple count of benchmarks per hardware. Shows data coverage.","choice":"device-pie","id":null,"timestamp":1777186978613}
{"source":"user-event","type":"click","text":"🎮\n \n FPS by Upscaler & Frame Gen (Grouped Bar)\n Compare FPS across FSR versions × frame gen methods. Shows the real cost/benefit of each combo.","choice":"upscaler-bar","id":null,"timestamp":1777186980875}
{"type":"screen-added","file":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content/game-page-v2.html"}
{"type":"screen-added","file":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content/stats-layouts.html"}
{"source":"user-event","type":"click","text":"A\n Featured Row + Asymmetric Grid\n Top chart gets a larger container with summary stats beside it. Remaining charts in a flowing grid.\n\n \n \n \n \n 📈 Historical AVG FPS FEATURED\n [Stacked Area Chart — full width of container]\n \n \n \n Overall Avg\n 54 FPS\n \n \n Best Device\n OLED\n \n \n Entries\n 42\n \n \n \n\n \n \n 🎮 FPS by Upscaler & Frame Gen FULL\n [Grouped Bar — FSR version × Frame Gen method]\n \n\n \n \n \n 📊 Boxplot\n [FPS distribution per device]\n \n \n 📉 FPS Range\n [Low → High per entry]\n \n \n 🖥️ Devices\n [Donut: entries per device]\n \n \n\n \n \n ✅ Community Trust FULL\n [Horizontal bar: verified + vote ratio per entry]","choice":"a","id":null,"timestamp":1777187409898}
{"type":"screen-added","file":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content/search-badge.html"}
{"type":"screen-added","file":"/Users/adrianbonpin/Documents/Code/personal/deckyvault/.superpowers/brainstorm/44094-1777186296/content/search-card-final.html"}
.superpowers/brainstorm/44094-1777186296/state/server.pid
+1
View File
@@ -0,0 +1 @@
44103