According to the light one should be ... for the next .. seconds.
This example constitutes a complete system, defining this web page as well as a web server in the cloud (or on your computer).
It is represented (admittedly quit terse) as a description only about 100 lines long.
About 20% is simple ECMAScript, about 10% is CSS; the rest are various XML dialects, mainly XHTML and SVG.
The signal lights image is actually a small state machine on its own.
It is described in the SVG language, and uses and a little bit of CSS.
The SVG source is stored in /favicon.ico, because at that location it may double as the "Favourites Icon" for certain browsers.
It works, because the #target mechanism of your browsers CSS engine lets us achieve seven different representations in one single declaration.
Along with obvious behaviours (like driving, clearing, halting, and engaging), the SVG also can represent itself with all lights on or lights off. Finally it has an alerted state too.
The client side is represented by an ECMAscript object:
A full cycle for the lights from green to green takes 10 pulses. The duration of a pulse can be set with
The state change is described with a small <script/> stored
in an editable stash on the server. The script invokes the TrafficLight object.