Certification Rings Awards Block for React

Edit CERTIFICATIONS at the top of the file: each has a name, an issuer, the day it was issued and its last day. The ring's share, the label and the standing are all worked out from those days, so nothing else needs editing. Keep a multiple of three (or of two on a phone) so that every row of the band is full.

From AS_OF, a fixed day the block is read as of: the days from the issue day to AS_OF, over the days from the issue day to the last day, rounded and held between 0 and 100. Nothing reads the clock at render, so the server and the browser agree; set AS_OF yourself to keep it current.

RENEWAL_WINDOW, 90 days: a certification whose last day is that close, or past, reads "Renewal due". The third cell is inside the window so both words show. The word, not a colour, carries the state.

Each ring is one image with a spoken label, "93% of the term has run", and its drawing and the number inside are not read separately. The certification is a heading in a list named Certifications, with the issuer and the last month as text.

No. The council, the standard and the certifications are made up, and nothing here is a sustainability claim. If you show real certifications, name the certifier in text and use its official mark only if its rules allow it.

The cells run two across in three rows, each with the same ring size, and long names wrap inside their cell. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the order mirrors and the rings fill the same way, since a ring is symmetric.