feat: keymanweb 2.0 (UI + Keyboard + Example + Map)

[Meng-Heng]

Fix #119

Some pointers for reviews:

Run

1. web.keyman.com
2. website.localhost
3. s.keyman.com
4. api.keyman.com

Files & Folders

1. feature: store files that has UI manipulation & UI-related functions.
2. operation: store logic from getting the keyboard data for search to displaying the keyboard & example.
3. state: localStorage that remember important user interaction on the elements.
4. main.mjs: act as the center & the head of the JS files

Expected to see

1. Desktop
   
2. Tablet
   
3. Phone
   

Thank you.

---

Old redesign

I'm placing the layout in here for now along with the stylings but I still have more interfaces to work on, including getting the actual keyman keyboard.

@keymanapp-test-bot skip

[Meng-Heng]

Please test it out and let me know.

Some pointers for reviews:

Run

1. web.keyman.com
2. website.local.proxy
3. s.keyman.com
4. api.keyman.com

Files & Folders

1. feature: store files that has UI manipulation & UI-related functions.
2. operation: store logic from getting the keyboard data for search to displaying the keyboard & example.
3. state: localStorage that remember important user interaction on the elements.
4. main.mjs: act as the center & the head of the JS files

Expected to see

1. Desktop
   
2. Tablet
   
3. Phone
   

Thank you.

[darcywong00]

FYI the PHP unit tests failed with

[Mon Jan 12 05:03:45.182035 2026] [php7:warn] [pid 28] [client 172.17.0.1:51126] PHP Warning: require_once(inc/foot.php): failed to open stream: No such file or directory in /var/www/html/index.php on line 207
[Mon Jan 12 05:03:45.182072 2026] [php7:error] [pid 28] [client 172.17.0.1:51126] PHP Fatal error: require_once(): Failed opening required 'inc/foot.php' (include_path='/var/www/html/_includes:.') in /var/www/html/index.php on line 207
Error: Process completed with exit code 1.

[Meng-Heng]

Thank you, @darcywong00. I'll work on resolving that.

[mcdurdin]

@Meng-Heng I would like to do a more detailed review. But in the interests of moving forward, here are some thoughts on a first-pass UI review:

• key cap letters too small
• no tooltips on controls at top right
• dragging grabber down should shrink OSK, not make it disappear
• "Please wait it's loading" --> needs tweak

The menu:

• It needs a title on the top to make it clear it's a menu -- otherwise the 'Instruction' text looks like the title
• "Instruction" --> "Help" --> this can be a small widget saying '[x] Show site help' under the main menu items
• SIL logo has hand but no link
• Keyboard Help --> How to use
• key strokes --> keystrokes (Keyboard Help)
• privacy policy can just be a link at the bottom next to KMW version
• Keyman --> Visit Keyman should be 'get this keyboard on <windows|mac|etc>'
• KeymanHelp --> Keyman Help
• Whole menu looks clickable ... but it isn't
• (Visible | Hidden) --> not clear what this is for, need to use a standard widget

Order of links:

• How to use
• Keyman Help
• Download Keyman (aka Get this keyboard)
• Bookmarklet
• Website Plugin

Search box:

• Not clear that you can type to search
• Title "Results" of search results probably not needed
• Clicking outside the search box doesn't hide it
• + sign to add the keyboard to the site is too hidden - we need to be able to click anywhere on the keyboard box to add the keyboard --> not clear that keyboard name is clickable
• Icons for supported platforms not needed here
• "Most Downloads" --> "Popular Keyboards"
  -> don't show language for popular keyboards
• Pressing Shift+Home does not select text
• Rapid typing gives wrong results for keyboard search; e.g. "Angkor" does not find Khmer Angkor reliably
• 'Show More' link does not work reliably -> e.g. for Khmer (NIDA) Basic it shows less content after clicking it
• Don't show page controls if < 10 results

Added keyboards:

• These should be shown in the banner area individually unless there is insufficient space
  • On desktop, hovering over a keyboard should give access to the 4 controls, clicking should select it
• Unnecessary scrollbars visible
• Highlighting is unclear - colours and backgrounds

Text 'Selected: US Basic keyboard' in the search box is a little confusing

Notice: Undefined variable: result in /var/www/html/prog/renderLanguageExample.php on line 266

1. Instructions should be visible in the keyboard selection box to start with
2. Perhaps the search box should be focused on first visit to push users towards choosing a keyboard
3. Not sure 'pouplar keyboarsd' is all that helpful, a drill-down search would be more useful. Esp. given top 10 keyboards all African at this point.

Instructions:

1. Search for any language, keyboard, or country