Public Access
237 lines
9.1 KiB
HTML
237 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="en-AU">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="theme-color" content="#0b4f4a">
|
|
<title>Visitor sign in</title>
|
|
<link rel="stylesheet" href="/css/kiosk.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bar">
|
|
<p class="site" id="siteName">Visitor sign in</p>
|
|
<p class="clock" id="clock"></p>
|
|
</header>
|
|
|
|
<main id="app">
|
|
|
|
<!-- ---------------------------------------------------- site picker -->
|
|
<section class="screen" id="screen-site">
|
|
<h1 class="welcome">Which site is this kiosk at?</h1>
|
|
<p class="hint">This tablet remembers the answer, so you only pick once.</p>
|
|
<div class="host-list" id="site-list"></div>
|
|
</section>
|
|
|
|
<!-- ---------------------------------------------------------- home -->
|
|
<section class="screen" id="screen-home">
|
|
<h1 class="welcome">Welcome. Are you coming in, or heading out?</h1>
|
|
<div class="doors">
|
|
<button class="door door-in" data-go="guest-name">
|
|
<span class="door-title">Sign in</span>
|
|
<span class="door-sub">First time, or an occasional visit</span>
|
|
</button>
|
|
<button class="door door-out" data-go="signout-find">
|
|
<span class="door-title">Sign out</span>
|
|
<span class="door-sub">Leaving the site</span>
|
|
</button>
|
|
</div>
|
|
<button class="text-action" data-go="freq-pin">I have a PIN — I come here regularly</button>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------- guest: name -->
|
|
<section class="screen" id="screen-guest-name" data-step="1">
|
|
<div class="rail" data-rail></div>
|
|
<h2>What's your name?</h2>
|
|
<label class="field">
|
|
<span>First name</span>
|
|
<input id="in-first" autocomplete="off" autocapitalize="words" enterkeyhint="next">
|
|
</label>
|
|
<label class="field">
|
|
<span>Last name</span>
|
|
<input id="in-last" autocomplete="off" autocapitalize="words" enterkeyhint="next">
|
|
</label>
|
|
<div class="nav">
|
|
<button class="ghost" data-go="home">Back</button>
|
|
<button class="primary" data-next="guest-name">Continue</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------- guest: host -->
|
|
<section class="screen" id="screen-guest-host" data-step="2">
|
|
<div class="rail" data-rail></div>
|
|
<h2>Who are you here to see?</h2>
|
|
<label class="field">
|
|
<span>Start typing a name</span>
|
|
<input id="in-host-search" autocomplete="off" enterkeyhint="search" placeholder="e.g. Rogerson">
|
|
</label>
|
|
<div class="host-list" id="host-list" role="listbox" aria-label="People you can visit"></div>
|
|
<div class="nav">
|
|
<button class="ghost" data-back>Back</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ---------------------------------------------- guest: contact -->
|
|
<section class="screen" id="screen-guest-contact" data-step="3">
|
|
<div class="rail" data-rail></div>
|
|
<h2>How can we reach you today?</h2>
|
|
<p class="hint">One of these is enough. We use it to sign you out and in an emergency.</p>
|
|
<label class="field">
|
|
<span>Mobile number</span>
|
|
<input id="in-phone" type="tel" inputmode="tel" autocomplete="tel" enterkeyhint="next">
|
|
</label>
|
|
<label class="field">
|
|
<span>Email address</span>
|
|
<input id="in-email" type="email" inputmode="email" autocomplete="email" enterkeyhint="next">
|
|
</label>
|
|
<div class="nav">
|
|
<button class="ghost" data-back>Back</button>
|
|
<button class="primary" data-next="guest-contact">Continue</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------ guest: check -->
|
|
<section class="screen" id="screen-guest-check" data-step="4">
|
|
<div class="rail" data-rail></div>
|
|
<h2>Do you hold a WWCC or VIT registration?</h2>
|
|
<div class="choices" id="check-choices">
|
|
<button class="choice" data-check="WWCC">Working with Children Check</button>
|
|
<button class="choice" data-check="VIT">Victorian Institute of Teaching</button>
|
|
<button class="choice" data-check="NONE">I don't have one</button>
|
|
</div>
|
|
<label class="field" id="check-number-field" hidden>
|
|
<span id="check-number-label">Card number</span>
|
|
<input id="in-check-number" autocomplete="off" autocapitalize="characters" enterkeyhint="next">
|
|
</label>
|
|
<div class="nav">
|
|
<button class="ghost" data-back>Back</button>
|
|
<button class="primary" id="check-continue" hidden>Continue</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------------- photo -->
|
|
<section class="screen" id="screen-photo" data-step="5">
|
|
<div class="rail" data-rail></div>
|
|
<h2>Look at the camera</h2>
|
|
<p class="hint">The photo stays on this site's server. It is not sent anywhere else.</p>
|
|
<div class="camera">
|
|
<video id="cam-video" playsinline muted autoplay></video>
|
|
<img id="cam-shot" alt="The photo you just took" hidden>
|
|
<canvas id="cam-canvas" hidden></canvas>
|
|
</div>
|
|
<p class="camera-error" id="cam-error" hidden></p>
|
|
<div class="nav">
|
|
<button class="ghost" data-back>Back</button>
|
|
<button class="primary" id="cam-take">Take photo</button>
|
|
<button class="ghost" id="cam-retake" hidden>Retake</button>
|
|
<button class="primary" id="cam-use" hidden>Use this photo</button>
|
|
<button class="ghost" id="cam-skip" hidden>Continue without a photo</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------------ review -->
|
|
<section class="screen" id="screen-review" data-step="6">
|
|
<div class="rail" data-rail></div>
|
|
<h2>Check these details, then sign in</h2>
|
|
<dl class="review" id="review-list"></dl>
|
|
<div class="nav">
|
|
<button class="ghost" data-go="home">Start over</button>
|
|
<button class="primary" id="do-signin">Sign in</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------- recurring: the PIN -->
|
|
<section class="screen" id="screen-freq-pin">
|
|
<h2>Welcome back</h2>
|
|
<label class="field">
|
|
<span>Mobile number</span>
|
|
<input id="in-freq-phone" type="tel" inputmode="tel" autocomplete="tel" enterkeyhint="next">
|
|
</label>
|
|
<label class="field field-pin">
|
|
<span>4 digit PIN</span>
|
|
<input id="in-freq-pin" type="password" inputmode="numeric" maxlength="4" autocomplete="off" enterkeyhint="go">
|
|
</label>
|
|
<div class="nav">
|
|
<button class="ghost" data-go="home">Back</button>
|
|
<button class="primary" id="do-freq-auth">Continue</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- --------------------------------------------- recurring: host -->
|
|
<section class="screen" id="screen-freq-host">
|
|
<h2 id="freq-greeting">Who are you here to see?</h2>
|
|
<label class="field">
|
|
<span>Start typing a name</span>
|
|
<input id="in-freq-host-search" autocomplete="off" enterkeyhint="search">
|
|
</label>
|
|
<div class="host-list" id="freq-host-list" role="listbox" aria-label="People you can visit"></div>
|
|
<div class="nav">
|
|
<button class="ghost" data-go="home">Cancel</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- --------------------------------------------------- signed in -->
|
|
<section class="screen screen-done" id="screen-done-in">
|
|
<p class="mark">Signed in</p>
|
|
<h2 id="done-in-message"></h2>
|
|
<p class="hint" id="done-in-detail"></p>
|
|
<div class="nav">
|
|
<button class="primary" data-go="home">Done</button>
|
|
<button class="ghost" id="reprint-badge" hidden>Print the badge again</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------- sign out: find -->
|
|
<section class="screen" id="screen-signout-find">
|
|
<h2>Signing out</h2>
|
|
<label class="field">
|
|
<span>Last name</span>
|
|
<input id="out-last" autocomplete="off" autocapitalize="words" enterkeyhint="next">
|
|
</label>
|
|
<label class="field">
|
|
<span>Mobile number or email</span>
|
|
<input id="out-contact" autocomplete="off" enterkeyhint="go">
|
|
</label>
|
|
<div class="nav">
|
|
<button class="ghost" data-go="home">Back</button>
|
|
<button class="primary" id="do-signout-find">Find my visit</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------ sign out: pick -->
|
|
<section class="screen" id="screen-signout-pick">
|
|
<h2>Is this you?</h2>
|
|
<div class="host-list" id="signout-list"></div>
|
|
<div class="nav">
|
|
<button class="ghost" data-go="signout-find">Back</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- -------------------------------------------------- signed out -->
|
|
<section class="screen screen-done" id="screen-done-out">
|
|
<p class="mark">Signed out</p>
|
|
<h2 id="done-out-message"></h2>
|
|
<p class="hint">Thanks for visiting. Travel safely.</p>
|
|
<div class="nav">
|
|
<button class="primary" data-go="home">Done</button>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<p class="alert" id="alert" role="alert" hidden></p>
|
|
|
|
<footer class="foot">
|
|
<span>Created by: Jess Rogerson (yelling commands at Claude.AI)</span>
|
|
<span>
|
|
<button class="foot-link" id="change-site" hidden></button>
|
|
<a href="/admin">Admin</a>
|
|
</span>
|
|
</footer>
|
|
|
|
<iframe id="badge-frame" title="Badge printing" aria-hidden="true"></iframe>
|
|
|
|
<script src="/js/kiosk.js"></script>
|
|
</body>
|
|
</html>
|