API Uptime Strips Error Block for React

Nothing leaves the page. Pressing it checks the address (an empty or malformed one gets a sentence under the field and focus), waits 700 ms behind a spinner, and swaps the form for "Noted, in this demo" with the address you typed and a Change address button that brings the form back with your text in it. A polite status message says no email will be sent. To wire it, post the address to your status provider or subscriber list where the code says so, keep the busy state until it answers, and show its error under the field when it refuses.

Edit APIS. Each API lists its incidents as a day place (0 is the oldest of thirty, 29 is today) and the minutes of errors that day; a day with no entry is clean. LAST_DAY is the strip's last date, written out so the server and every visitor's time zone agree, and a day counts as partial under DOWN_FROM minutes and as down from it. The uptime is 100 - minutes / (30 * 1440) * 100, so it always agrees with the bars.

By height, weight and words. A clean day is a short, light bar, a partial outage is taller and darker, and a day of an hour or more is the tallest and solid. Today's state is a shape and a word beside the API's name, and the day's note names the minutes, so the page reads the same in grayscale, in dark mode and for people who can't tell red from green. The page uses no status color at all.

The 120 days are one tab stop. The left and right arrow keys move along an API's days, the up and down arrow keys move to the same day of the next API, and Home and End jump to the ends of a row. Every day is a named button ("Oct 14, Query API: 1 hour 45 minutes of errors"), so a screen reader reads the note on focus; the readout under the rows repeats it for sighted users and is hidden from assistive technology. On a touch screen, tap a day to read it.

Yes. Serve the page with a 503 status, and add a Retry-After header with the number of seconds (or a date) when you can give an honest estimate, so browsers, crawlers and API clients know the outage is temporary and when to come back. A 200 with this page on it tells search engines the outage is your content, and a 404 tells them the address is gone. The block can't set the status; your server or framework does.

The headline and the form stack, with the form first so Notify me is on the first screen, and each API becomes a name with its uptime on one line and the thirty cells filling the width below it. The sentence that explains the bars is hidden from sight but still read aloud, and the rest holds from 320 px up.