✦ StealThis .dev
Pages Medium

DIY — Device Hub Page

A dense, utilitarian device hub page for a fictional laptop in the FIXWELL repair-manual community — breadcrumb trail, an SVG device render with model-identification tips in a mono callout, a repairability score chip, an animated stat strip, guides grouped into component accordions with difficulty badges and a dimming filter, a symptom-to-guide troubleshooting list, a sticky parts-and-tools rail with price chips and add-to-cart toasts, plus a related-models row.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Device Hub Page

This is the landing page a repair community builds for one machine — here the fictional Volta Book 14 (2023) on the fictional FIXWELL wiki. The hero pairs a hand-drawn SVG render of the laptop with the facts you need before you pick up a driver: model year, a repairability score chip that jumps to its breakdown, and a monospace callout showing exactly what the etched base label looks like so you can confirm you are on the right page. A four-cell stat strip counts up guides, average repair time, community answers and catalogued parts as it scrolls into view.

The body is the guide index. Guides are grouped by component — Display, Battery, Keyboard, Storage, Fan, Ports — inside accordion sections; each row carries a difficulty badge, an estimated time and a step count. The difficulty filter does not delete rows, it dims the non-matching ones and auto-opens any collapsed section that still has matches, so you keep a sense of how much of the catalogue a given skill level unlocks. Below it, a symptom-to-guide list maps real-sounding complaints (“shuts down at 30 % battery”) to the fix, with a community report tally.

The right rail is sticky: parts for this exact model with part numbers and prices, then the tools the guides call for, a running subtotal, and add-to-cart buttons that flip to a green “Added” state and fire a toast. A related-models row closes the page for people who landed on the wrong revision.

How this look is built

The information architecture takes its cue from iFixit-style device pages, but everything modern here is CSS: the accordions animate with grid-template-rows: 0fr → 1fr instead of the old fixed-max-height hack, so panels expand to their true content height with no magic numbers and no JS measurement; the two-column shell is CSS grid with a position: sticky rail that collapses to a single column under 980px; the blueprint-ish hero backdrop is two repeating linear gradients rather than an image; and the stat counters plus the score bars are driven by a single IntersectionObserver that unobserves each element after it fires, so the reveal costs nothing on scroll. Everything is drawn in inline SVG, so the page has zero network requests beyond the font stylesheet.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.