Quick summary
ORBIT is a working forum interface. A sticky banner carries the mark and a central search; below it an asymmetric grid holds a community rail on the left, a fluid feed in the middle, and a community metadata and rules card on the right. Every post card hangs off a vertical vote rail whose track doubles as a signed meter — the top half lights orange when you upvote, the bottom half periwinkle when you downvote. A text bar at the head of the feed opens the composer, and posting appends a new block straight into the live posts array. Press a card’s comment button and the whole centre column becomes a thread panel: the post in full, a comment box, and the replies nested down their own alignment lines, with a back link to the feed.
Who this template is for
This build is for anyone who needs a community surface — a product adding discussion, a studio shipping a members’ room, a developer who wants forum mechanics written plainly enough to lift.
- Products and brands that want a discussion surface with the mechanics people already know — voting, threads, communities — without renting someone else’s platform
- Developers who want a worked reference for the hard parts: a vote rule that cannot stack, view-state routing without a router, and a recursive comment tree that stays legible four levels down
- Anyone learning front-end state who wants a real application small enough to read end to end — twelve files, no framework, no build step
What problem this template solves
Most product front ends you can actually read are either a framework tutorial with three fake rows in it, or a real app whose logic is buried under a build pipeline. This build is neither.
- Interface clones stop at the layout — the mechanics that make the product work are left as an exercise
- Real state rules are the hard part, and they are exactly what a screenshot cannot show you
- A build behind a bundler is a build you cannot read: the file you open is not the code that runs
What you get with this template
Twelve files and an index.html. Open it and the forum runs — no install, no bundler, no server.
- The full two-view application: the feed with its three-column grid, the composer, and the thread panel with its nested reply tree and back link
- Seven seeded communities with their own hue, rules, moderators and member counts — and twelve seeded posts carrying real comment trees four levels deep
- The mechanics in readable files: the vote rule, the hot-sort gravity, the focus-preserving re-render, and localStorage persistence with a version key that discards stale saves
Page sections overview
| Section | Purpose |
|---|---|
| The Vote Rail | A signed meter, not just two arrows. |
| The One-Step Rule | Pressing harder does nothing, by construction. |
| The Composer | A text bar that becomes a form and appends to the array. |
| The Thread Panel | The comment button changes the view, not the page. |
| The Reply Tree | Alignment lines that are also the collapse control. |
Design & branding system
The design brief was a room built for reading at night — quiet ground, one loud accent, and colour used only where it carries meaning.
- A near-black ground with four raised greys, so cards, rails and popovers separate by elevation rather than by borders shouting at each other
- Two signal colours and no more: ember for up, periwinkle for down. Every other coloured pixel is a community’s own hue, driven by a single custom property
- IBM Plex Sans for the interface and IBM Plex Mono for every number — scores, member counts, timestamps — so tallies line up and read as data
Mobile & speed optimization
The three columns fold in stages rather than all at once, so each width gets a layout that was actually designed.
- The right rail drops below 1260px and the left rail becomes a drawer below 960px, reachable from a banner control and dismissable with Escape or a tap outside
- Below 720px the byline shortens and action labels give way to their icons, so a post card’s metadata still fits on one line at 390px
- No horizontal overflow at any width — verified by measurement at 1440, 1180, 900 and 390px rather than by eye
How this template helps you convert
A working product beats a mockup. The page is arranged so a visitor can use the thing before deciding anything.
- Visitors interact immediately — the live build is on the page, with no signup or install in the way
- Every mechanic is inspectable, which turns a curious visitor into someone who wants the brief behind it
- The one-time prompt unlock is a concrete next step while the product is still open in the tab
Other information about this template
A few notes before you build on this one.
- Classic script tags in dependency order, the same no-build convention as this studio’s browser games — it opens straight off disk with no server and no bundler
- All user text is written through textContent; the one markup escape hatch exists only for the trusted inline icon constants, so a post body can never become markup
- State persists to localStorage behind a version key, so changing the seeded data discards stale saves instead of half-merging them
- Cloned from the layout, mechanics and dark identity of a well-known link aggregator — deliberately branded ORBIT, with its own mark, palette and copy, rather than impersonating a real service
The voting rule
the brief’s hardest requirement is one line of arithmetic — next = (prev === dir ? 0 : dir). Because the stored vote only ever holds −1, 0 or 1, a reader can never move a score more than one step from the tally they arrived at. The same arrow twice retracts; the opposite arrow moves by two and lands one step the other side. The app replays a mashed sequence against a probe object at boot and logs an error if the drift ever escapes that range.
How it is built
classic script tags in dependency order, the same no-build convention as the studio’s browser games — so the file you open is the code that runs, and it opens straight off disk. One state object, one notify() fan-out, four re-rendered regions and no virtual DOM. Every element is built through a small hyperscript helper that writes user text with textContent, so post and comment bodies can never become markup.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
