Wayfare Reference

v1.0 · 16 May 2026

A browsable index of all project files. Open any page in your browser to view it. Designed for developers and UI designers to understand the full surface area of the app.


Screens 7

Open these in your browser to see the live UI.

Marketing site — hero, problem, how it works, scouts showcase, FAQ, team, footer. First thing users see.
publicmarketingresponsive
Wayfare.html
Registration flow — choose role (traveller/scout), select access needs, set preferences, write bio.
publicauth
Sign Up.html
🔑
Login page — email/password with demo account (anika@wayfare.demo) pre-filled.
publicauth
Sign In.html
Post-login app — sidebar nav, plan builder (3 options), day-by-day itinerary, venue detail with score breakdown, camera AI with auto-narration, emergency dispatch, profile.
appcore
App.html
Self-contained version of the app with dependencies inlined. Works without internet (after initial load).
appoffline
Wayfare App (offline).html
📄
Full project plan — 17 people, 5 workstreams, RACI matrix, milestones, risks, mitigations. Sprint 0 to launch on May 22.
planninginternal
WBS.html
Tweaks Panel (embedded in Wayfare.html)
A11y toolbar — theme selector (soft/sage/night/contrast), font scale slider (0.85x–1.4x), reduced motion toggle. Accessible from the gear icon on the landing page.
a11yui
tweaks-panel.jsx

Component Library 9

React JSX files. All loaded via <script type="text/babel"> (Babel standalone, no bundler).

Shared components & utilities used across all pages.
shared
Icons — Inline SVG: mic, arrow, camera, pin, shield, star, wheelchair, eye, ear, more
Nav — Top navigation bar with brand, nav links, theme toggle, voice input
VoiceInput — Text input with mic button, preset suggestions, submit
LighthouseScore — A-F score badge visualisation
EmergencyFAB — Floating action button for emergency access
EmergencyModal — Multi-step safety flow modal
useTweaks — Hook for the live-editable tweaks panel
Landing page entry point. Assembles all sections, tweaks panel, emergency modal.
entry
12 landing page sections. Each is a self-contained React component.
landing
Hero — Headline, tagline, voice input with presets
Marquee — Logo/partner scroll
Problem — The accessibility gap in travel
HowItWorks — 3-step explainer
LighthouseExplainer — Score system details
Scouts — Human scout profiles
AppShowcase — Interactive app preview
CameraVoice — AI camera narration demo
EmergencySection — Safety feature highlight
Market — Market sizing / stats
Team — Team member cards
FAQ — Accordion FAQ
Full app shell — the post-login experience. Largest component (~2358 lines).
app
Sidebar — Nav icons + role-aware items (traveller vs scout)
Plan — "Where to?" input, 3 plan options, day-by-day timeline with scout cards
VenueDetail — Score breakdown, evidence rows, photo gallery, "Add to itinerary"
CameraAI — Webcam feed, auto-narration, voice Q&A, mute toggle
Emergency — Multi-stage dispatch flow
Trips / Saved / Profile — List views
Auth components — session management, sign in/up forms, mini a11y toolbar.
auth
Interactive app preview carousel for the landing page (AppShowcase section).
landing
App preview component for the offline bundle.
offline
App shell component for the offline bundle.
offline
Live-editable tweaks panel — theme, font scale, reduced motion. ~568 lines of reusable form controls.
a11y

Styles

Design tokens, reset, typography, layout helpers, buttons, cards, 4 themes, responsive breakpoints, a11y utilities. ~623 lines.
design tokens themes responsive
Themes — Soft (default), Sage Calm, High Contrast, Deep Night
Typography.h-display, .h-section, .h-card, .eyebrow, .lede
Components.btn, .card, .nav, .marquee, .accordion, .faq
A11y:focus-visible, .skip-link, [data-reduce-motion], font scaling
Auth page layout (split panel) + full app shell styles (sidebar, plan screen, timeline, camera, profile). ~516 lines.
authapp

Architecture Overview

LayerTechFiles
Marketing Site React 18 + Babel standalone Wayfare.html + main.jsx + sections.jsx + tweaks-panel.jsx
Auth React 18 + localStorage session Sign In.html + Sign Up.html + auth.jsx
App React 18 + mock data App.html + app-shell.jsx
Offline Self-contained bundle Wayfare App (offline).html + App-offline-src.html
Styles CSS custom properties (design tokens) styles.css + auth-app.css
Backend (planned) Python / FastAPI See WBS 2.x workstream
Planning WBS.html + uploads/SOW_Neaural_Knights.docx.pdf

Page Flow

Wayfare.html  (landing / marketing)
    |
    +--> Sign Up.html  (4-step wizard)
    |       |
    |       +--> App.html  (post-login)
    |
    +--> Sign In.html  (login)
            |
            +--> App.html  (post-login)

App.html  contains:
    +-- Plan a Trip   (3 plan options > day-by-day itinerary > venue detail)
    +-- My Trips      (saved trip list)
    +-- Camera AI     (live webcam + auto-narration + voice Q&A)
    +-- Browse Scouts (scout profiles)
    +-- Emergency     (multi-stage dispatch flow)
    +-- Profile       (user settings)
  

Key Features (for UI/QA review)

FeatureLocationNotes
Voice input + presetsLanding Hero → triggers sign upPresets: "Wheelchair user, Jaipur, 3 days" etc.
3-plan itinerary generatorApp → Plan a TripHeritage / Slow / Outdoor plan options
Wayfare Accessibility ScoreApp → Venue detail8-criterion A-F score with evidence rows
Scout cardsLanding Scouts + App → Browse scoutsReal photos, credentials, audit history
Live Camera AIApp → Camera AIWebcam frame capture, AI description, voice narration, Q&A
Emergency dispatchApp + Landing (floating button)Multi-step flow: reason, location, contact, "Help is on the way"
Sign Up needs selectionSign Up → step 2Mobility, low vision, deaf/HoH, cognitive, dietary
A11y tweaks panelLanding (gear icon), Auth (mini toolbar)Theme, font scale 0.85x-1.4x, reduced motion
WCAG AA complianceGlobalFocus rings, skip link, ARIA, high-contrast theme, screen reader support

Deliverables

📦
Wayfare — AI-Powered Accessible Travel Companion.zip
Full deliverable archive. Contains the complete project for handoff.
Wayfare — AI-Powered Accessible Travel Companion.zip
📄
Statement of Work — Neural Knights
SOW document for the project. Uploaded as PDF.
uploads/SOW_Neaural_Knights.docx.pdf

Wayfare · v1.0 · 16 May 2026 · README.md