Book Bahamas · Nassau

Instructor app

A clickable prototype of the whole instructor day: pick up a booking, check the rider and the machine, run the ride, close it out. Twenty-one screens, no back end — everything runs in the page.

21Screens
1Rider per ski
0Servers needed

Walk it end to end

~4 minutes

Follow these in order and the prototype behaves like one continuous shift. Each screen hands the next one its data through the address bar, so the numbers stay consistent all the way to the receipt.

  1. Open the appSplash, then sign in

    Nothing is checked — tap Sign in.

  2. Start the dayNext ride, countdown, today's four bookings

    Tap Start check-in on the boarding pass.

  3. Check the rider inFive-item safety gate, locked until it's complete

    Tick the first four. The fifth, Machine checked, won't tick — tap it.

  4. Check the machineAssign a ski, fuel and hours, six-point walkaround

    Try setting fuel to ¼ — it blocks the launch. Photos are optional.

  5. Run the rideRising tide, hold-to-fire SOS, overtime warnings

    Hold the SOS button a full two seconds. A tap deliberately does nothing.

  6. Close it outRider ashore, readings in, damage after, settle up

    Enter engine hours below 388.4 and it catches you.

  7. Read the receiptTrack, timings, payment, rider feedback

    Arriving from close-out, this fills with the ride you just ran.

All screens

21
SplashBrand moment on cold start. Auto-advances, or tap to skip. splash.html Sign inEmail and password with a reveal toggle. No credential check behind it. login.html RegisterInvite code, your details, password, certifications. Four steps, none of them gated. register.html Reset passwordRequest a link. Resend has a cooldown so it feels real. reset-password.html TodayNext ride as a boarding pass, or a live card when one's running. Day log and shortcuts. dashboard.html Check-inThe safety gate. Nothing launches until life jackets, briefing, ID, waiver and machine are done. current-ride.html Machine checkUnit assignment, fuel and hours out, six-point damage walkaround, safety kit. machine-check.html ConditionsWind, swell, visibility against the limits, and the authority to stand a ride down. weather-hold.html On the waterBuilt for sun and wet hands. Tide fills the screen across the hour; SOS needs a two-second hold. live-ride.html Close outRider off the water first, then readings in, damage after, tip and surcharge, machine away. close-out.html Ride summaryThe receipt: track drawn on a map, timings, payment breakdown, rider feedback. ride-summary.html ScheduleTap through the week. Each day renders its own list; Sunday shows the empty state. my-schedule.html TrackingWhere the rider is before they arrive. Distance and ETA count down live. tracking.html NavigateRoute to the dock, four turn-by-turn steps, handoff to the phone's map app. navigation.html Scan bookingQR viewfinder plus manual lookup. Try RS-1256, then RS-1249, then anything else. scan-booking.html ProfileCertifications with expiry warnings, working preferences, and an edit sheet. profile.html ScenariosNine ways a shift goes wrong (and one where it doesn't), each walked step by step. scenarios.html Help CenterSame shape as the customer one: hero, action tiles, your reports, searchable FAQ. Try typing "fuel". help-center.html My reportsEvery ticket the instructor has filed, filtered by open, in review or resolved. my-reports.html Report threadOne ticket: progress rail, the whole conversation with the base, and a reply box. report-details.html Report an issueNo-show, unfit rider, weather, machine fault, paperwork, incident. report-issue.html

States worth seeing

Shortcuts

Some screens only look interesting partway through. These jump straight there.

All data here is inventedPrices, phone numbers, engine hours, certification dates and rider names are placeholders chosen to make each state visible. Nothing is saved — reload and it resets.

Every ride is one rider on one machine, plus the instructor.
Twenty-one pages sharing styles.css and icons.js. No build step, no framework, no network calls — keep the files in one folder and open this page.
Best viewed on a phone, or a narrow browser window. On a real device the SOS button vibrates and the ride screen keeps the display awake.