One screen that replaces both legacy portal pages: the real-time campaign monitor and the end-of-flight report, advertiser-first with the ops detail underneath. This pack opens every state on your desktop, no server needed. The reference campaign is the flagship Binance, Always-On EU.
The same page renders the full campaign lifecycle from one file, switched by a URL state. Open each in light, or open the dark variant. Everything is sample data, deterministic, no backend.
The campaign is booked and nothing has served yet. Zeroed actuals against the booked plan, with the empty-state illustrations and the "what happens next" framing.
The live monitor: real-time pacing, the interactive hub map, the booked schedule, what ran and where, the media hub, contextual swaps, and the inline controls plus Blinky.
The end-of-flight report: locked outcomes against plan, the wrap panel, flight highlights, and a closing read. Nothing reads "live" anymore, anywhere on the page.
Two surfaces that are easy to miss inside the page. The contextual modal is the full creative-swap experience; the deep links jump you straight in.
Opens the live page with the "Contextual changes" experience expanded: the DOOH frame replay, the swap log, the variant outcomes, and the live rule strip.
campaign-details.html?ctx=1Opens the live page with the Frankfurt hub drawer expanded: the per-hub schedule, the granular flagship chart, pacing, and the inline Blinky actions.
campaign-details.html?hub=FRAOpens the booked state with the contextual modal showing its own day-0 framing. Good for reviewing every empty illustration and the "nothing served yet" copy.
campaign-details.html?state=day0&ctx=1Two companion docs. One for reviewers and designers, one for the engineers who will wire it to live data.
Every section, component, design rule, interaction, status, asset and state, section by section. The how and the why for reviewers and designers.
DOCUMENTATION.mdThe data contract (every object and its shape), the status registry, the notification system, the Blinky actions and their backend hooks, and the integration checklist.
IMPLEMENTATION-GUIDE.mdindex.html to open this page, then click into any state.campaign-details.html directly. Add ?state=day0 or ?state=ended for the other states.In the page header gear menu you can flip Light / Dark and Comfortable / Compact. Try Range, open a hub row, open Contextual changes, and shrink the window to a phone width.
Your choices stick across reloads. State is also in the URL, so you can copy a link to exactly what you are looking at.