Error Page V10

Author: Colorlib
Released: September 2026
License: CC BY 3.0
A connection-lost page for a note-taking web app, meant to be served as a service worker's offline fallback. A status pill in the header follows navigator.onLine and the online and offline events, and the heading, copy and unplugged-cable illustration switch to a reconnected state when the network comes back. It also lists notes that are available offline and how many changes are waiting to sync.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 313 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Live indicator driven by navigator.onLine plus online and offline events
- Retry checks the connection and reports the result in a status region
- Cable illustration plugs itself in when the connection returns
- data-demo="offline" previews the offline state; remove it in production
- List of cached notes and a pending-sync counter

