A concept redesign of ThingsBoard Cloud's Home page, reframed around the state of the system rather than a fixed marketing layout. Single file, vanilla HTML/CSS/JS, no build step.
Live: https://lapenko.github.io/thingsboard-proto/
The page leads with operational signal — an alarm triage queue and device health — and adapts to the tenant's state. The dark bar at the top is prototype scaffolding (not part of the design); it switches between demo scenarios so the same page can be seen under different conditions:
- Busy — active alarms across severities, several silent devices.
- Calm — a few low-severity alarms, every device reporting.
- All clear — no active alarms, all devices reporting.
- Setting up — a fresh tenant with nothing connected yet.
- Alarms as a task list, not a number. Severity counters double as filters; the queue shows originator, type, age, acknowledgement and assignee, with inline and bulk actions.
- Device health first. Inactive devices are surfaced by how long they've been silent.
- Two kinds of empty, read differently. "No active alarms" (calm, all is well) looks distinct from "nothing set up yet" (a fresh tenant needs guidance, not reassurance).
- A setup bridge. While the tenant is empty, a dismissible prompt points to onboarding; once devices report, it's gone.
- Responsive down to mobile.
Built as a design exercise. Not affiliated with ThingsBoard.