Network · gate

Gate

The answer to a scan, read at arm's length like a ticket gate's display: a green arrow through, a check-first, or a red cross. For check-in at the door and handover at the booth.

Gate

It replaces the camera until the next scan. The symbol, the title and the color always agree, and the title says it in words, so it works for color-blind panitia and in sunlight.

Preview

Checked in

Malik Ihsan

Regular · Code K7P3QX

Show code

<Gate verdict="go">
  <GateTitle>Checked in</GateTitle>
  <GateHolder name="Malik Ihsan">Regular · Code K7P3QX</GateHolder>
  <GateActions>
    <Button variant="primary" size="lg" onClick={next} autoFocus>Scan next</Button>
    <Button variant="quiet" onClick={undo}>Undo check-in</Button>
  </GateActions>
</Gate>

Verdicts

Preview

Already checked in

Malik Ihsan

Regular · Code K7P3QX

Checked in at 18:42 by Dimas. If it's someone else, check their ID.

Not valid today

Malik Ihsan

Day 2 only · Code M2Q9TA

This ticket is for Sun, Nov 15.

Verdict	Symbol	Use for
go	Arrow up, on success	Checked in. Order handed over.
hold	Exclamation mark, on warning	Let them through only after a look: already checked in, already picked up, unpaid.
stop	Cross, on danger	Don't let them through: canceled, wrong day, not found.

Beep and buzz

Like a fare gate, the scanner answers out loud, so staff at a loud door know the verdict before they read it. Each verdict has its own rhythm, in sound and in the phone's buzz (Android; iPhones stay silent to the touch). Sound can be turned off per phone with GateSoundToggle; the buzz always comes.

Try each verdictSound starts after the first tap on the page: browsers allow no sound before that, so the scanner primes it on pointerdown.

Preview

Show code

const gate = useGateSignal()

<div onPointerDown={gate.prime}>
  <GateSoundToggle />
  …
</div>

// When the answer comes back:
gate.signal(verdict)

Verdict	Sound	Buzz
go	One high beep (1320 Hz, 120ms)	One short buzz
hold	Two middle beeps (880 Hz)	Two short buzzes
stop	One low buzzer tone (220 Hz, 450ms)	One long buzz

Rules

It announces itself (role="status", aria-live="assertive") and focuses “Scan next”, so the door keeps moving.
The description says what happened and what to do, with the time and who, never a code.
It fades in once. Nothing flashes or loops. The beep and buzz play once per answer, never on “Scan next”.

Don’t

A toast for a scan result, or a green check with no words.

The gate, full width, with the verdict as the title and the holder's name under it.