224 lines
16 KiB
HTML
224 lines
16 KiB
HTML
<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>
|