150 lines
9.8 KiB
HTML
150 lines
9.8 KiB
HTML
<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>
|