105 lines
5.5 KiB
HTML
105 lines
5.5 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: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #1c1c1f; border-radius: 10px; background: #0d0d0f; }
|
||
.dot-col { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 5px; flex-shrink: 0; }
|
||
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
|
||
.status-planned .status-dot { background: #3f3f46; }
|
||
.status-inprogress .status-dot { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.5); }
|
||
.status-shipped .status-dot { background: #4ade80; }
|
||
.roadmap-body { flex: 1; }
|
||
.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; }
|
||
.status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; }
|
||
.status-planned .status-badge { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
|
||
.status-inprogress .status-badge { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
|
||
.status-shipped .status-badge { background: rgba(74,222,128,0.08); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
|
||
|
||
.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; }
|
||
</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 status-inprogress">
|
||
<div class="dot-col"><span class="status-dot"></span></div>
|
||
<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/brace selection.</div>
|
||
</div>
|
||
<span class="status-badge">In Progress</span>
|
||
</div>
|
||
|
||
<div class="roadmap-item status-inprogress">
|
||
<div class="dot-col"><span class="status-dot"></span></div>
|
||
<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>
|
||
<span class="status-badge">In Progress</span>
|
||
</div>
|
||
|
||
<div class="group-label">Planned</div>
|
||
|
||
<div class="roadmap-item status-planned">
|
||
<div class="dot-col"><span class="status-dot"></span></div>
|
||
<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>
|
||
<span class="status-badge">Planned</span>
|
||
</div>
|
||
|
||
<div class="roadmap-item status-planned">
|
||
<div class="dot-col"><span class="status-dot"></span></div>
|
||
<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>
|
||
<span class="status-badge">Planned</span>
|
||
</div>
|
||
|
||
<div class="roadmap-item status-planned">
|
||
<div class="dot-col"><span class="status-dot"></span></div>
|
||
<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>
|
||
<span class="status-badge">Planned</span>
|
||
</div>
|
||
|
||
<div class="roadmap-note">
|
||
Have something you want to see? <a href="#">Give us feedback →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|