X-BaYx/posturecheck

A multilingual, human-centred website that guides a keyboard user through self-assessing and fixing their typing posture, in English, Twi and Gonja # PostureCheck A multilingual website that helps keyboard users **capture, check, correct and compare** their typing posture. Built for the CEM100 MSc Project at Robert Gordon University. Plain HTML, CSS and vanilla JavaScript. No frameworks, no dependencies, no server, no cookies, no analytics. **Photos never leave the device:** capture and comparison are entirely client-side, which is a core ethics requirement of the project. ## Run it Double-click `index.html` for a quick look. Everything works except the live camera. Browsers only allow camera access on a secure context (HTTPS or localhost), so to use the camera, serve the folder: ```bash python3 -m http.server 8000 ``` Then open `localhost`. Any static host (GitHub Pages, Netlify, RGU web space) works too, and HTTPS enables the camera automatically. On `file://` the app detects the restriction and offers photo upload instead. ## Structure ``` . ├── index.html All seven screens, the SVG posture diagram, footer references ├── css/styles.css Stylesheet (layout, checklist, print styles) ├── js/ │ ├── i18n-data.js All interface strings: en, tw, gjn │ ├── i18n.js Translation engine (data-i18n attributes) │ ├── capture.js Camera, timer, upload fallback, image downscaling │ └── app.js Step wizard, checklist, fixes, before/after compare ├── tools/ │ ├── audit-i18n.js Checks every referenced key exists in English │ └── export-translations.js Writes reviewer CSVs for Twi and Gonja └── test/ jsdom behaviour suite and axe-core accessibility run ``` ## The flow 1. **Learn.** Annotated SVG of a balanced setup with eight criteria taken from the ergonomics literature: screen height, head position, shoulders, elbows at 90 to 110 degrees, straight wrists, back support, feet flat, and a flat keyboard (Asundi et al., 2012). 2. **Capture (before).** Side-view photo by camera with a 10-second timer, or by upload. …