**Version:** 1.0
**Phase:** 3.2 — Design Mockups
**Style:** Dieselpunk / Interwar 1920s Spain
**Renderer:** Vanilla JS + Canvas2D
**Status:** Draft for Implementation
---
|---|---|---|
---
|---|---|---|
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ │ │ ◈ TELEGRAPH ◈ PLOTTING ◈ BALLISTIC ◈ LOADING ◈ AIMING │ │ [locked] [active] [locked] [locked] [locked] │ │ ▲ BRASS BOTTOM BORDER (3px) │ │ │ │ MISSION 01 │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ HEIGHT: 56px fixed top BACKGROUND: #1E1E1E BOTTOM BORDER: 2px solid #B8860B (brass) FONT: IBM Plex Mono 13px 600, UPPERCASE ACTIVE TAB: text #B8860B,3px brass bottom border LOCKED TAB: text #5C5C5C, cursor: not-allowed MISSION LABEL: Lora 12px, #8A8A7A, right-aligned
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ TELEGRAPH OFFICE ● [status light] │ │──────────────────────────────────────────────────────────────────────────────│ │ │ │ ╔══════════════════════════════════════════════════════════════════════╗ │ │ ║ · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ║ │ │ ║ · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ║ │ │ ║ ║ │ │ ║ ▶ MISSION 01 ORDERS ║ │ │ ║ ───────────────────────────────── ║ │ │ ║ ║ │ │ ║ YOUR POS: F5 8:1 ║ │ │ ║ TARGET: B4 4:2 ║ │ │ ║ AMMO: HE ║ │ │ ║ ║ │ │ ║ · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ║ │ │ ║ · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ║ │ │ ╚══════════════════════════════════════════════════════════════════════╝ │ │ │ │ │ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ │ │ COPY POSITION │ │ COPY TARGET │ │ COPY AMMO │ │ │ │ [brass btn] │ │ [brass btn] │ │ [brass btn] │ │ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ │ │ │ │ FONT: IBM Plex Mono 16px / Lora 14px │ PAPER TAPE: #E8DCC4 background, #2A2A2A text │ BUTTONS: #2A2A2A bg, 2px solid #B8860B border, #B8860B text │ STATUS LIGHT: #8B0000 (new msg) / #B8860B (read) / #3A3A3A (idle) │ │ └──────────────────────────────────────────────────────────────────────────────┘ LAYOUT: Centered paper tape strip, full width PAPER TAPE STYLE: - Background: #E8DCC4 (cream) - Box shadow: inset 0 2px 8px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3) - Border-radius: 2px (torn paper feel) - Perforated edges: 2px dashed #C9B98A - Font: IBM Plex Mono 16px, #2A2A2A - Typewriter animation on new message arrival COPY BUTTONS: - Background: #2A2A2A - Border: 2px solid #B8860B - Text: #B8860B, IBM Plex Mono 13px 600, UPPERCASE - Hover: background #3A3A3A, box-shadow 0 0 8px rgba(184,134,11,0.4) - Active: scale(0.97) - Padding: 10px 20px, border-radius 4px - Click feedback: 200ms brass glow + checkmark flash STATUS LIGHT: - 12px circle, top-right of header - Red (#8B0000) = new message unread - Brass (#B8860B) = message read - Dim (#3A3A3A) = idle
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ PLOTTING TABLE │ │──────────────────────────────────────────────────────────────────────────────│ │ │ │ TACTICAL MAP (parchment) │ BEARING & RANGE TOOL │ │ 14×10 grid (A–N, 1–10) │ ────────────────────── │ │ ───────────────────────── │ │ │ │ FROM: [pos marker] │ │ A B C D E F G H I J K L M N │ TO: [tgt marker] │ │ 1 ┌──┬──┬──┬──┬──┬──┬──┬──┬──┐ │ │ │ 2 │ │ │ │ │ │ │ │ │ │ │ BRG: 237° │ │ 3 │ │ │ │ │ │ │ │ │ │ │ RNG: 18,400m │ │ 4 │ │ │ │ │ │✕ │ │ │ │ │ │ │ 5 │ │ │ │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ 6 │ │ │ │ │▲ │ │ │ │ │ │ │COPY BRG │ │COPY RNG │ │ │ 7 │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ │ │ 8 │ │ │ │ │ │ │ │ │ │ │ │ │ 9 │ │ │ │ │ │ │ │ │ │ │ ────────────────────── │ │10 │ │ │ │ │ │ │ │ │ │ │ INSTRUCTIONS │ │ └──┴──┴──┴──┴──┴──┴──┴──┴──┘ │ 1. Click YOUR POS cell │ │ │ 2. Click TARGET cell │ │ Grid: #7A8A5A lines on │ 3. Copy values │ │ #D4C9A8 parchment │ │ │ │ Map border: 4px solid #4A4A3A │ │ ▲ = Position marker (#B8860B) │ Tool panel: #1E1E1E bg │ │ ✕ = Target marker (#8B0000) │ │ │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ TACTICAL MAP: - Background: #D4C9A8 (parchment) - Grid lines: #7A8A5A (olive-green), 1px - Column labels (A–N): top edge, IBM Plex Mono 11px #5A5A4A - Row labels (1–10): left edge, IBM Plex Mono 11px #5A5A4A - Position marker: ▲ triangle, #B8860B brass, 18px - Target marker: ✕ cross, #8B0000 signal red, 18px - Hover cell: rgba(184,134,11,0.2) highlight - Selected cell: 2px solid #B8860B border - Map border: 4px solid #4A4A3A (olive frame) BEARING & RANGE TOOL PANEL: - Background: #1E1E1E, border 1px solid #3A3A3A - Section header: Lora 14px 600, #B8860B - Value display: IBM Plex Mono 20px 600, #E8DCC4 - Copy buttons: brass outline style (same as telegraph) - Instructions text: Lora 12px, #8A8A7A, italic
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ BALLISTIC COMPUTER │ │──────────────────────────────────────────────────────────────────────────────│ │ │ │ ┌─────────────────────────┐ ┌────────────────────────────────────────┐ │ │ │ INPUT RACK │ │ SOLUTION DISPLAY │ │ │ │ ───────────────── │ │ ───────────────────────────────── │ │ │ │ │ │ │ │ │ │ RNG (m): │ │ ┌────────────────────────────────┐ │ │ │ │ ┌───────────────────┐ │ │ │ ELEVATION ◁ ─ ▷ │ │ │ │ │ │ 18,400 │ │ │ │ ████ 52° │ │ │ │ │ └───────────────────┘ │ │ │ [mils] │ │ │ │ │ │ │ └────────────────────────────────┘ │ │ │ │ BRG (°): │ │ │ │ │ │ ┌───────────────────┐ │ │ ┌────────────────────────────────┐ │ │ │ │ │ 237 │ │ │ │ CHARGE ◁ ─ ▷ │ │ │ │ │ └───────────────────┘ │ │ │ ████ 7 │ │ │ │ │ │ │ │ [level] │ │ │ │ │ ┌───────────────────┐ │ │ └────────────────────────────────┘ │ │ │ │ │ PASTE INPUT │ │ │ │ │ │ │ └───────────────────┘ │ │ ┌────────────────────────────────┐ │ │ │ │ │ │ │ FUZE TIMER ◁ ─ ▷ │ │ │ │ │ (Reads from clipboard) │ │ │ ████ 28s │ │ │ │ │ │ │ │ [seconds] │ │ │ │ └─────────────────────────┘ │ └────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────┐ │ │ │ │ │ COPY ALL SOLUTION │ │ │ │ │ └────────────────────────────────┘ │ │ │ └────────────────────────────────────────┘ │ │ │ │ STATUS: AWAITING INPUT RANGE BUCKET: 15000–20000m │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ INPUT RACK: - Background: #1E1E1E, brass rivets at corners - Section label: Lora 12px, #B8860B, uppercase - Input fields: #0D0D0D background, #E8DCC4 text, 2px solid #3A3A3A border - Focus state: border #B8860B, box-shadow 0 0 6px rgba(184,134,11,0.3) - PASTE INPUT button: brass outline, reads RNG and BRG from clipboard - If clipboard empty: input fields show --, status shows AWAITING INPUT SOLUTION DISPLAY: - Three mechanical gauge panels stacked vertically - Each gauge: brass dial ring #B8860B, dark face #0D0D0D, needle #D4A017 - Value label: IBM Plex Mono 28px 600, #E8DCC4 - +/- buttons: 36px × 28px, brass outline, IBM Plex Mono 14px - COPY ALL SOLUTION button: full-width, brass fill, copies ELEV/CHARGE/FUZE - Gauge needles animate (CSS transition 600ms ease-out) when values change STATUS LINE: - Bottom of station, full width - Left: current status text, IBM Plex Mono 12px, #8A8A7A - Right: range bucket indicator, Lora 12px italic
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ SHELL LOADING │ │──────────────────────────────────────────────────────────────────────────────│ │ │ │ ┌─────────────────┐ ┌─────────────────────┐ ┌────────────────────────┐ │ │ │ MAGAZINE │ │ CHARGE & FUZE │ │ LOAD PANEL │ │ │ │ ───────────── │ │ ───────────────── │ │ ────────────────── │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────┐ │ │ CHARGE: │ │ ROUND: │ │ │ │ │ HE │ │ │ ○ Light │ │ HE / Chg 7 │ │ │ │ │ [sel] │ │ │ ● Medium ← │ │ Fuze: 28s │ │ │ │ └──────────┘ │ │ ○ Heavy │ │ │ │ │ │ │ │ │ │ ┌────────────────┐ │ │ │ │ ┌──────────┐ │ │ FUZE TIMER: │ │ │ │ │ │ │ │ │ SMK │ │ │ 2.0 ═══════●══ 11.5│ │ │ LOAD GUN │ │ │ │ │ └──────────┘ │ │ Current: 28s │ │ │ │ │ │ │ │ │ │ │ │ └────────────────┘ │ │ │ │ ┌──────────┐ │ │ Presets: 18s 28s 38s│ │ │ │ │ │ │ ILL │ │ │ │ │ [brass+red gradient] │ │ │ │ └──────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────┐ │ │ │ │ │ │ │ │ │ AP │ │ │ │ │ │ │ │ │ └──────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Shell info: │ │ │ │ │ │ │ │ High Explosive │ │ │ │ │ │ │ │ 22kg, 700m/s │ │ │ │ │ │ │ └─────────────────┘ └─────────────────────┘ └────────────────────────┘ │ │ │ │ LOADING SEQUENCE: ████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 40% │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ MAGAZINE DISPLAY: - Background: #1E1E1E, border 1px solid #3A3A3A - 4 shell type buttons in 2×2 grid - Button: 80px × 60px, #0D0D0D background, #5C5C5C border - Selected: #B8860B border 3px, inner glow - Shell type label: IBM Plex Mono 14px 600, #E8DCC4 - Shell info below grid: Lora 12px, #8A8A7A, description of selected type CHARGE SELECTOR: - Radio-style: 3 options stacked vertically - Option: ○ circle + label, IBM Plex Mono 13px - Unselected: circle #5C5C5C - Selected: circle #B8860B, filled FUZE TIMER SELECTOR: - Range input: styled slider, track #3A3A3A, thumb #B8860B - Min label: 2.0s, Max label: 11.5s - Current value display: IBM Plex Mono 18px 600, #E8DCC4 - Below slider, clickable preset buttons: 18s, 28s, 38s LOAD GUN BUTTON: - 160px × 60px, border-radius 8px - Background: linear gradient #8B0000 → #5C0000 - Text: LOAD GUN, IBM Plex Mono 16px 700, #E8DCC4 - Hover: box-shadow 0 0 16px rgba(139,0,0,0.6) - Active: scale(0.97) - Disabled: background #3A3A3A, text #5C5C5C LOADING SEQUENCE PROGRESS BAR: - Only visible during loading - Bar: 300px × 8px, background #3A3A3A, fill #B8860B - Label above: IBM Plex Mono 11px, #8A8A7A - Animation: fills over 8 seconds, step increments visible
---
┌──────────────────────────────────────────────────────────────────────────────┐
│ AIMING STATION │
│──────────────────────────────────────────────────────────────────────────────│
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ ELEVATION │ │ AZIMUTH │ │ FUZE │ │
│ │ ───────── │ │ ───────── │ │ ───────── │ │
│ │ │ │ │ │ │ │
│ │ ◁ 52° ▷ │ │ ◁ 237° ▷ │ │ ◁ 28s ▷ │ │
│ │ [mils] │ │ [degrees] │ │ [seconds] │ │
│ │ │ │ │ │ │ │
│ │ ───────── │ │ ───────── │ │ ───────── │ │
│ │ MATCH: ✓ │ │ MATCH: ✓ │ │ MATCH: ✓ │ │
│ │ (#4A7A4A) │ │ (#4A7A4A) │ │ (#4A7A4A) │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ OVERALL STATUS: ✓ READY TO FIRE │
│ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ╔═══════════════════════════╗ │ │
│ │ ║ ║ │ │
│ │ ║ FIRE ║ │ │
│ │ ║ (lever) ║ │ │
│ │ ║ ║ │ │
│ │ ╚═══════════════════════════╝ │ │
│ │ │ │
│ │ pull up to fire │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
GAUGE DIAL (each of 3):
- Container: 140px × 160px, background #1E1E1E, 2px solid #3A3A3A, border-radius 8px
- Dial face: circular, 100px diameter, background #0D0D0D, brass ring border 3px #B8860B
- Center value: IBM Plex Mono 24px 600, #E8DCC4
- Unit label below value: IBM Plex Mono 11px, #8A8A7A
- +/- buttons: 36px × 28px, brass outline, IBM Plex Mono 14px
- Tick marks around dial: 36 ticks, every 10° major tick labeled
- Match indicator: below dial, ✓ green (#4A7A4A) or ✗ red (#8B0000), IBM Plex Mono 12px
FIRE LEVER:
- Large mechanical lever, center-bottom of station
- Track: vertical slot, 40px wide × 200px tall, #3A3A3A background, brass frame
- Handle: 60px × 30px horizontal bar, #B8860B brass
- States:
- LOCKED: handle at bottom, #5C5C5C grey, LOCKED label
- UNLOCKED: handle at bottom, pulsing glow, READY label
- FIRING: handle animates up slot over 400ms, then disappears
- When all 3 gauges match: unlock with brass glow pulse animation
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ 📋 CLIPBOARD │ │ │ │ ───────────────────────────────────────────────────────────────── │ │ │ │ │ │ │ │ POS: F5 8:1 │ TGT: B4 4:2 │ RNG: 18,400m │ BRG: 237° │ │ │ │ ELEV: 52° │ CHG: 7 │ FUZE: 28s │ SHELL: HE │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ │ POSITION: bottom-left, 16px from edges │ │ SIZE: auto width, max 90% viewport, wraps to 2 rows if needed │ │ BACKGROUND: rgba(30,30,30,0.95), backdrop-filter: blur(8px) │ │ BORDER: 1px solid #3A3A3A, border-radius 8px │ │ PADDING: 12px 16px │ │ │ │ LABELS: IBM Plex Mono 11px, #8A8A7A, UPPERCASE │ │ VALUES: IBM Plex Mono 13px 500, #E8DCC4 │ │ EMPTY VALUE: -- in #5C5C5C │ │ VALUE HIGHLIGHT ON UPDATE: 300ms box-shadow: 0 0 8px rgba(184,134,11,0.8) │ │ │ └──────────────────────────────────────────────────────────────────────────────┘
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌────────────────────────────────┐ │ │ │ FIELD MANUAL │ │ │ │ ──────────────────────────── │ │ │ │ │ │ │ │ "Gunner, your orders are in. │ │ │ │ Copy YOUR POS, TARGET, and │ │ │ │ AMMO to the clipboard. │ │ │ │ Every value you copy moves │ │ │ │ us closer to fire." │ │ │ │ │ │ │ │ [CONTINUE] │ │ │ └────────────────────────────────┘ │ │ │ │ POSITION: centered overlay, 480px max-width │ │ BACKGROUND: rgba(30,30,30,0.96), border 2px solid #B8860B │ │ BORDER-RADIUS: 8px │ │ PADDING: 24px 32px │ │ │ │ HEADER: Lora 14px 700, #B8860B, uppercase, letter-spacing 2px │ │ DIVIDER: 1px solid #3A3A3A │ │ BODY TEXT: Lora 14px, #E8DCC4, line-height 1.7 │ │ CONTINUE BUTTON: brass outline, centered, 120px × 40px │ │ TYPEWRITER ANIMATION: 30ms per character, cursor | blinks │ │ │ └──────────────────────────────────────────────────────────────────────────────┘
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ │ │ A B C D E F G H I J K L M N │ │ 1 ┌──┬──┬──┬──┬──┬──┬──┬──┬──┐ │ │ 2 │ │ │ │ │ │ │ │ │ │ │ │ 3 │ │ │ │ │ │ │ │ │ │ │ │ 4 │ │ │ │ │ │ ✕ ───────────────╮ │ │ 5 │ │ │ │ │ │ │ │ │ │ │ │ │ │ 6 │ │ │ │ │▲ ───────● ╭───── │ │ │ 7 │ │ │ │ │ │ │ │ │ │ │ │ │ │ 8 │ │ │ │ │ │ │ │ │ │ │ │ │ │ 9 │ │ │ │ │ │ │ │ │ │ │ │ │ │10 │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──┴──┴──┴──┴──┴──┴──┴──┴──┘ │ │ │ │ ▲ = Position marker (brass #B8860B) │ │ ✕ = Target marker (red #8B0000) │ │ ● = Shell dot (8px circle, brass #B8860B with #D4A017 glow) │ │ - - - = Trajectory line (dashed 3px, rgba(184,134,11,0.5), dash 8,4) │ │ │ │ ┌─────────────────┐ │ │ │ 00:35 │ ← flight timer │ │ └─────────────────┘ │ │ │ │ SHELL DOT: 8px circle, #B8860B brass fill, #D4A017 glow │ │ TRAJECTORY: Dashed 3px, rgba(184,134,11,0.5), dash pattern 8,4 │ │ IMPACT MARKER: 24px crosshair, #8B0000 if miss, #B8860B if hit │ │ TIMER: top-center overlay, IBM Plex Mono 20px 600, #E8DCC4 │ │ │ │ IMPACT FEEDBACK: │ │ HIT: screen flash rgba(184,134,11,0.3), "SPLASH — DIRECT HIT" brass │ │ MISS: screen flash rgba(139,0,0,0.2), "SPLASH — MISS" red │ │ │ └──────────────────────────────────────────────────────────────────────────────┘
---
┌──────────────────────────────────────────────────────────────────────────────┐ │ [TELEGRAPH] [PLOTTING] [BALLISTIC] [LOADING] [AIMING] MISSION 01 │ ← 56px nav ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ ┌──────────────────────────────┐ │ │ │ │ │ │ │ ACTIVE STATION CANVAS │ │ │ │ (telegraph/plotting/ │ │ │ │ ballistic/loading/aiming) │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────┘ │ │ │ │ ┌────────────────────────┐ ┌──────────────────────┐ │ │ │ 📋 CLIPBOARD │ │ FIELD MANUAL │ │ │ │ ────────────────── │ │ ────────────────── │ │ │ │ POS: F5 8:1 │ ... │ │ "Gunner, your..." │ │ │ └────────────────────────┘ └──────────────────────┘ │ │ │ │ STATUS: SHELLS: [PENDING:0] [PLOTTED:1] [FIRED:2] │ └──────────────────────────────────────────────────────────────────────────────┘ LAYOUT NOTES: - Full window viewport minus station nav bar (56px top) - Clipboard panel: fixed bottom-left, 16px from edges - Narration box: fixed center, appears during tutorial - Status bar: fixed bottom, full width - Single canvas element fills remaining space - Responsive: minimum 1024px width (desktop/tablet landscape)
---
|---|---|
|---|---|
|---|---|
---
*Mockups by Sally (Designer)*
*Phase 3.2 — Design Mockups*