This repository contains a fully interactive front-end prototype for a theme-park planning kiosk.
The interface is based on my original TEL2 HCI design slides and implemented with HTML + TailwindCSS (CDN) + Vanilla JavaScript.
Users can browse attractions, inspect detail panels, apply filters, manage a trip plan, and respond to real-time recommendations based on wait-time changes—all within a single-page kiosk-style UI.
The system simulates an in-park digital kiosk where visitors can:
- Explore rides, eateries, and shows
- View attraction details in modal panels
- Filter activities based on type, wait time, or height requirement
- Search by keyword
- Add items to a personalized trip plan
- Visualize their planned schedule with Wait / Play / Walk segments
- Receive dynamic recommendations when wait times change
- Return to the kiosk and automatically restore the saved plan
This prototype focuses on interaction design, information architecture, and lightweight client-side logic.
- Multi-category browsing (Rides, Shows, Eateries)
- Responsive grid layout
- Attraction cards with wait-time metadata
- Filter by attraction type
- Additional filters: wait time and rider height
- Keyword search
- Includes empty-state feedback for unmatched queries
- Each attraction includes:
- Description
- Height requirement
- Current wait time
- Add-to-trip action
- Add attractions to a personalized itinerary
- Instant confirmation messages
- Displays activities across three time slots
- Wait / Play / Walk segments represented as labelled chips
- Detects overlapping activities and provides alerts
- Suggests alternative activities when waits exceed thresholds
- Users may accept or ignore recommendations
- Simulates kiosk recognition of returning visitors
- Restores saved trip plan with updated wait times
- HTML5
- TailwindCSS (CDN)
- Vanilla JavaScript
- Fully client-side, no backend, no framework
- Minimal DOM-based state management
This design makes the project very lightweight and ideal for GitHub Pages deployment.