Each pane has a "source" link on it so you might study how the PHP code is interacting with the server. It has not been written to be secure, so you are advised to not copy and paste verbatim.
Translations you upload are persisted across visits, but all other changes (username, language etc) are forgotten when you close the browser.
1. Main Window
The demopage demonstrates crowd-sourcing translations for a cartoon, but it could be an academic paper, video or any other kind of media.
Within each bubble appears either the newmark (here, "pk-fireexit") if there's no translation into your language, or a random choice among all the translations uploaded in your language. If you have just uploaded a translation, or have just chosen someone else's translation, then that choice is presented each time.
Original displays the cartoon without the bubbles.
Inline uses HTML5 to display preset translations directly over the door.
Callout, when visible, returns you to the page with bubbles.
2. Translations Window
For creating, editing, deleting and otherwise manipulating the translations themselves.
Click on a hyperlink in a bubble to bring up this menu.
See more displays the other available translations matching your language.
Offer another presents a form for uploading a brand new translation, defaulting to your language.
Edit allows you to edit the current translation. If you were not the original uploader of that translation, the demopage (will) upload your edit as a brand new copy that you do own.
Delete removes the current translation from the service
Lock/Unlock If you are test05, these two allow you to force everyone else to see this particular translation regardless of how many people prefer another. If you are not, this creates a preference such that your particular user sees this translation.
History Displays the edits to which this translation was subjected.
3. Service Window
Changing account details and also the language you're pretending to use. If you have signed up, you may also use your details here.
Whole list (will) display a menu of all languages for which a translation is available.
4. HTTP Window
Observe the exchanges between the demopage and the csi18n server in response to your activity.
- RED: Immediately following an <hr> line. The request sent from the demopage to the csi18n server. If the request has a body, it appears after a single empty line.
- YELLOW: Always starts with "HTTP/1.1". The response headers received back from the csi18n server.
- GREEN: Always follow the response headers and a single empty line. The response body received back from the csi18n server.
The exchange only covers your own activity - you cannot see any other user's activity - and is only kept on screen for as long as the demopage is open in your browser. Latest activity is at the bottom.