Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-mode/llms.txt
Use this file to discover all available pages before exploring further.
The Contact page transforms the humble contact form into an arcade high-score initials entry screen. Instead of a name field, visitors set three individual letter slots — just as a player would enter their initials after beating a high score. Below the initials picker, a styled message textarea accepts the visitor’s note, and a coin-insert submit button sends the transmission. The page cycles through three states: entry, loading, and success.
Route
| Property | Value |
|---|
| Hash route | /#/contact |
| Page heading | ENTER INITIALS |
| Subtitle | LEAVE A MESSAGE FOR PLAYER 1 |
Initials Entry
Three letter slots are displayed side by side, each showing a single uppercase letter from A–Z. The active slot is highlighted with a neon cursor effect.
Keyboard Controls
| Input | Action |
|---|
← / → | Move focus left or right between slots |
↑ | Cycle the active slot’s letter forward (A → B → … → Z → A) |
↓ | Cycle the active slot’s letter backward (A → Z → … → B → A) |
| Tap / Click | Select a slot to make it active |
The initials entry interaction is designed to work both on keyboard (arrow keys) and on touch (tap to select, then use on-screen arrows). The three-slot layout is fixed — visitors cannot type free-form text into the initials field.
Message Field
Below the initials slots, a textarea is labelled:
| Property | Value |
|---|
| Character limit | 500 characters |
| Counter | Live remaining-character count displayed below the field |
| Focus style | Neon magenta box-shadow glow activates on focus |
Submit Button & State Machine
The submit button progresses through three states as the form is completed and submitted:
| State | Button Label | Trigger |
|---|
| Idle | INSERT COIN TO CONTINUE | Default — form is ready to submit |
| Loading | TRANSMITTING... | Activates immediately on form submission |
| Success | (see below) | Activates when the server acknowledges the message |
Success State
When the transmission is acknowledged, the form is replaced by a success screen displaying:
SCORE SAVED!
TRANSMISSION RECEIVED. WILL RESPOND SHORTLY.
The three-state button pattern prevents double-submissions naturally — once the button enters the TRANSMITTING... state it is disabled until the success or error state resolves.