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