151 lines
6.4 KiB
HTML
151 lines
6.4 KiB
HTML
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
|
||
.wrap { max-width: 900px; margin: 0 auto; }
|
||
|
||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
|
||
.tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
|
||
.tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
|
||
|
||
.page-header { margin-bottom: 40px; }
|
||
.page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
|
||
.page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
|
||
.page-sub { font-size: 14px; color: #52525b; }
|
||
|
||
.roadmap { display: flex; flex-direction: column; gap: 10px; }
|
||
|
||
.roadmap-item {
|
||
display: grid;
|
||
grid-template-columns: 52px 1fr auto;
|
||
gap: 0 16px;
|
||
align-items: center;
|
||
padding: 20px;
|
||
border: 1px solid #1c1c1f;
|
||
border-radius: 10px;
|
||
background: #0d0d0f;
|
||
}
|
||
|
||
/* Upvote button */
|
||
.upvote {
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
gap: 3px; width: 44px; height: 52px;
|
||
border: 1px solid #27272a; border-radius: 8px; background: transparent;
|
||
cursor: pointer; color: #52525b; transition: all 0.15s;
|
||
font-size: 11px; font-weight: 700; font-family: inherit;
|
||
}
|
||
.upvote:hover { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,0.06); }
|
||
.upvote.voted { border-color: rgba(251,191,36,0.4); color: #fbbf24; background: rgba(251,191,36,0.08); }
|
||
.upvote svg { width: 14px; height: 14px; }
|
||
|
||
.roadmap-body { }
|
||
.roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
|
||
.roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.65; }
|
||
|
||
.right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
|
||
.status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
|
||
.badge-planned { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
|
||
.badge-inprogress { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
|
||
|
||
.group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #3f3f46; margin: 28px 0 10px; }
|
||
.group-label:first-child { margin-top: 0; }
|
||
|
||
.roadmap-note { margin-top: 32px; padding: 16px 20px; border: 1px solid #18181b; border-radius: 8px; font-size: 12px; color: #3f3f46; line-height: 1.6; }
|
||
.roadmap-note a { color: #52525b; text-decoration: underline; text-underline-offset: 3px; }
|
||
|
||
.auth-hint { font-size: 10px; color: #3f3f46; margin-top: 4px; }
|
||
</style>
|
||
|
||
<div class="wrap">
|
||
<div class="page-header">
|
||
<p class="page-label">Battl Builders</p>
|
||
<h1 class="page-title">Updates</h1>
|
||
<p class="page-sub">What we've shipped and what's coming next.</p>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<div class="tab">What's New</div>
|
||
<div class="tab active">What's Next</div>
|
||
<div class="tab">Give Feedback</div>
|
||
</div>
|
||
|
||
<div class="roadmap">
|
||
<div class="group-label">In Progress</div>
|
||
|
||
<div class="roadmap-item">
|
||
<button class="upvote voted" title="Remove vote">
|
||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||
24
|
||
</button>
|
||
<div class="roadmap-body">
|
||
<div class="roadmap-item-title">Compatibility engine — gas system + buffer</div>
|
||
<div class="roadmap-item-desc">Automatic warnings when barrel length and gas system length don't match, and when buffer weight conflicts with your stock or brace selection.</div>
|
||
</div>
|
||
<div class="right-col">
|
||
<span class="status-badge badge-inprogress">In Progress</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roadmap-item">
|
||
<button class="upvote" title="Upvote">
|
||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||
11
|
||
</button>
|
||
<div class="roadmap-body">
|
||
<div class="roadmap-item-title">Mobile builder experience</div>
|
||
<div class="roadmap-item-desc">Full 375px breakpoint pass on the builder, parts browser, and build summary. Lighthouse score target ≥70.</div>
|
||
</div>
|
||
<div class="right-col">
|
||
<span class="status-badge badge-inprogress">In Progress</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="group-label">Planned</div>
|
||
|
||
<div class="roadmap-item">
|
||
<button class="upvote" title="Upvote">
|
||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||
38
|
||
</button>
|
||
<div class="roadmap-body">
|
||
<div class="roadmap-item-title">Expanded parts catalog</div>
|
||
<div class="roadmap-item-desc">50–75 SKUs across all 10 slots, 3–5 options per category, with live AvantLink pricing.</div>
|
||
</div>
|
||
<div class="right-col">
|
||
<span class="status-badge badge-planned">Planned</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roadmap-item">
|
||
<button class="upvote" title="Upvote">
|
||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||
17
|
||
</button>
|
||
<div class="roadmap-body">
|
||
<div class="roadmap-item-title">Caliber cross-compatibility checks</div>
|
||
<div class="roadmap-item-desc">Flag mismatches between upper and lower when mixing calibers (e.g., .300 Blackout upper on a 5.56 lower).</div>
|
||
</div>
|
||
<div class="right-col">
|
||
<span class="status-badge badge-planned">Planned</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roadmap-item">
|
||
<button class="upvote" title="Upvote">
|
||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||
9
|
||
</button>
|
||
<div class="roadmap-body">
|
||
<div class="roadmap-item-title">Build guides — first wave</div>
|
||
<div class="roadmap-item-desc">Three long-form guides targeting "AR-15 build planner" and related keywords. Written for the ICP: experienced shooter, not an expert builder.</div>
|
||
</div>
|
||
<div class="right-col">
|
||
<span class="status-badge badge-planned">Planned</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roadmap-note">
|
||
Don't see what you need? <a href="#">Give us feedback →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|