RZREDZ.UI

Kiosk

A full screen for a tablet that stays on at a door: a name on top, big language buttons, a huge clock while it waits, one round state and one or two huge actions - read from across a room and pressed with a glove.

Example

kiosk fills the window with a column: kiosk-head, kiosk-langs, kiosk-main in the middle - the page's main - and kiosk-foot. It is not selectable and answers a tap at once, without waiting for a double tap. A kiosk is dark: data-theme="dark" on its html, or on the kiosk itself.

Riverside tower
Wednesday, November 4
07:42
Tap your card
Hold it to the reader under the screen
REDZ ERP · Site entrance
<div class="kiosk" data-theme="dark">
	<div class="kiosk-head"><i class="bi bi-geo-alt" aria-hidden="true"></i> Riverside tower</div>
	<div class="kiosk-langs" role="group" aria-label="Language">
		<button class="btn btn-xl" type="button" lang="en" aria-pressed="true">English</button>
		<button class="btn btn-xl" type="button" lang="th" aria-pressed="false">ไทย</button>
		<button class="btn btn-xl" type="button" lang="my" aria-pressed="false">မြန်မာ</button>
	</div>
	<div class="kiosk-main">
		<div class="kiosk-date">Wednesday, November 4</div>
		<div class="kiosk-clock">07:42</div>
		<div class="icon-tile icon-tile-info kiosk-state kiosk-state-idle"><i class="bi bi-person-badge" aria-hidden="true"></i></div>
		<div class="kiosk-title">Tap your card</div>
		<div class="kiosk-line">Hold it to the reader under the screen</div>
	</div>
	<div class="kiosk-foot">REDZ ERP · Site entrance</div>
</div>

The states

kiosk-state on an icon tile is the round state, in the tile's tones: kiosk-state-idle is smaller and breathes while the screen waits (still when motion is reduced), aria-busy="true" turns a ring round it while a tap is checked. kiosk-title and kiosk-line say what happened; a btn-xl in kiosk-main grows to a kiosk's size. kiosk-corner holds a camera's preview, mirrored, at the bottom end.

Sid Sample
Last in at 07:02
<div class="kiosk" data-theme="dark">
	<div class="kiosk-main">
		<div class="icon-tile icon-tile-success kiosk-state"><i class="bi bi-check-lg" aria-hidden="true"></i></div>
		<div class="kiosk-title">Sid Sample</div>
		<div class="kiosk-line">Last in at 07:02</div>
		<button class="btn btn-xl btn-success" type="button"><i class="bi bi-box-arrow-in-right" aria-hidden="true"></i>Check in</button>
		<button class="btn btn-xl btn-warning" type="button"><i class="bi bi-box-arrow-right" aria-hidden="true"></i>Check out</button>
		<button class="btn btn-text" type="button"><i class="bi bi-x-lg" aria-hidden="true"></i>Cancel</button>
	</div>
	<div class="kiosk-corner"></div>
</div>

A kiosk that reads badges through a keyboard-wedge reader takes what it types in a field kept focused offscreen, with inputmode="none" so no keyboard opens.

Accessibility

  • The words carry the state; the tone and the icon repeat them. Say a new state in a polite live region the page keeps - the title is a good one.
  • The language buttons are a named group of btn btn-xl toggles, each with its lang and aria-pressed; the pressed one turns light on dark.
  • The type grows with the screen; nothing is smaller than 14 px, and every button is at least 56 px tall.

Tokens

From css/components/kiosk.css. It declares --redz-btn-hover, --redz-btn-hover-fg on its root, never on rows or items.

It reads the theme's --redz-space-16, --redz-space-20, --redz-bg-page, --redz-text, --redz-space-32, --redz-space-12, --redz-bg, --redz-text-muted, --redz-tile-fg, --redz-fs-20, --redz-radius-16, --redz-fs-14.