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

README.md

@@ -1,3 +1,106 @@
 # keymanweb.com
 
-Home page for online web keyboard with support for over 2000 languages
+This is the source for the website https://keymanweb.com/, which hosts the
+KeymanWeb online keyboard supporting over 2500 different languages. This site
+runs on Apache in a Docker container.
+
+## Other Keyman websites
+
+* **[api.keyman.com]** - database backend for Keyman websites
+* **[help.keyman.com]** - documentation home for Keyman
+* **[keyman.com]** - Keyman home
+* **[keymanweb.com]** - KeymanWeb online keyboard
+* **[s.keyman.com]** - static Javascript, font, and related resources
+* **[website-local-proxy]** - run all Keyman sites on localhost on the same port
+
+## How to run keymanweb.com locally
+
+When run locally, this site can be accessed at http://localhost:8057 or
+http://web.keyman.com.localhost:8057. Note that the site is internally called
+web.keyman.com, but the public site is at keymanweb.com; web.keyman.com
+automatically forwards to keymanweb.com.
+
+**Recommended:** Use [website-local-proxy] to run multiple keyman.com sites
+all from the same port (default port 80).
+
+**Recommended:** Use [shared-sites] to control startup and shutdown of all
+keyman.com sites together.
+
+### Prerequisites
+
+The host machine needs the following apps installed:
+* [Git]
+* Bash 5.x (on Windows, you can use Git Bash that comes with [Git])
+* [Docker Desktop]
+
+  <details>
+  <summary>Configuration of Docker on Windows</summary>
+
+    On Windows machines, you can setup Docker in two different ways, either of
+    which should work:
+    * [Enable Hyper-V on Windows 11](https://techcommunity.microsoft.com/t5/educator-developer-blog/step-by-step-enabling-hyper-v-for-use-on-windows-11/ba-p/3745905)
+    * [WSL2](https://ubuntu.com/tutorials/install-ubuntu-on-wsl2-on-windows-10#1-overview)
+
+  </details>
+
+### Actions
+
+#### Build the Docker image
+
+The first time you want to start up the site, or if there have been Docker
+configuration changes, you will need to rebuild the Docker images. Start a bash
+shell, and from this folder, run:
+
+```sh
+./build.sh build
+```
+
+#### Start the Docker container
+
+To start up the website, in bash, run:
+
+```sh
+./build.sh start --debug
+```
+
+Once the container starts, you can access the web.keyman.com site at
+http://localhost:8057 or http://web.keyman.com.localhost:8057. Note that the
+site is internally called web.keyman.com, but the public site is at
+keymanweb.com; web.keyman.com automatically forwards to keymanweb.com.
+
+#### Stop the Docker container
+
+In bash, run:
+
+```sh
+./build.sh stop
+```
+
+#### Remove the Docker container and image
+
+In bash, run:
+
+```sh
+./build.sh clean
+```
+
+#### Running tests
+
+To check for broken links and .php file conformance, when the site is running,
+in bash, run:
+
+```sh
+./build.sh test
+```
+
+[Git]: https://git-scm.com/downloads
+[Docker Desktop]: https://docs.docker.com/get-docker/
+[api.keyman.com]: https://github.com/keymanapp/api.keyman.com
+[help.keyman.com]: https://github.com/keymanapp/help.keyman.com
+[keyman.com]: https://github.com/keymanapp/keyman.com
+[keymanweb.com]: https://github.com/keymanapp/keymanweb.com
+[s.keyman.com]: https://github.com/keymanapp/s.keyman.com
+[website-local-proxy]: https://github.com/keymanapp/website-local-proxy
+[shared-sites]: https://github.com/keymanapp/shared-sites
+[enable Hyper-V]: https://techcommunity.microsoft.com/t5/educator-developer-blog/step-by-step-enabling-hyper-v-for-use-on-windows-11/ba-p/3745905
+[enable WSL2]: https://ubuntu.com/tutorials/install-ubuntu-on-wsl2-on-windows-10#1-overview

build.sh

@@ -2,7 +2,7 @@
 ## START STANDARD SITE BUILD SCRIPT INCLUDE
 readonly THIS_SCRIPT="$(readlink -f "${BASH_SOURCE[0]}")"
 readonly BOOTSTRAP="$(dirname "$THIS_SCRIPT")/resources/bootstrap.inc.sh"
-readonly BOOTSTRAP_VERSION=v1.0.6
+readonly BOOTSTRAP_VERSION=v1.08
 [ -f "$BOOTSTRAP" ] && source "$BOOTSTRAP" || source <(curl -H "Cache-Control: no-cache" -fs https://raw.githubusercontent.com/keymanapp/shared-sites/$BOOTSTRAP_VERSION/bootstrap.inc.sh)
 ## END STANDARD SITE BUILD SCRIPT INCLUDE
 

cdn/dev/css/kmw-body.css

@@ -0,0 +1,139 @@
+/*
+  Name:             KeymanWeb's Body Styles
+  Copyright:        Copyright (C) 2025 SIL Global
+  Create Date:      5 November 2024
+
+  Modified Date:    
+  Authors:          Meng-Heng
+
+  History:         
+
+  Description:      All of the styles for KMW's Body
+*/
+/*
+=========
+==Icons==
+=========
+*/
+.fa-grip-lines:hover {
+    cursor: grab;
+}
+/*
+================
+==Section Tag==
+================
+*/
+.container-flex {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+/*
+==============
+==Text area==
+==============
+*/
+.textarea-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: var(--textarea-width);
+    height: var(--textarea-height);
+}
+
+.text-area {
+    padding: 10px;
+    resize: none;
+    width: 100%;
+    height: 100% !important;
+    box-shadow: var(--textarea-box);
+    font-size: 16px;
+    border: none;
+    padding: 10px;
+    line-height: 1.6em;
+    font-family:SindhiWeb,Verdana,GeezWeb,LaoWeb,TibetanWeb,MyanmarWeb,SinhalaWeb,TamilWeb,KhmerWeb,LatinWeb,OriyaWeb,EgyptianWeb !important;
+}
+/*
+============
+==Divider==
+============
+*/
+.divider-container i {
+    opacity: 50%;
+}
+
+.divider-container i:hover {
+    color: var(--keyman-blue);
+    opacity: 100%;
+}
+/*
+=====================================
+==Items in the middle of the divider==
+=====================================
+*/
+.middle-divider {
+    grid-area: middle;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+/*
+=============
+==Keyboard==
+=============
+*/
+.keyboard-container {
+    width: 70vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.keyboard-area {
+    user-select: none;
+    flex: 1;
+    width: 70vw;
+    height: 100%;
+    border: var(--keyman-blue) 1px solid !important;
+}
+
+.phone.kmw-osk-frame, .tablet.kmw-osk-frame {
+  display: block !important;
+  position: relative !important;
+  height: 100% !important;
+  width: 100% !important;
+  max-width: 100vw !important;
+  max-height: 50vh !important;
+  z-index: 0 !important;
+}
+/*
+=============
+==Examples==
+=============
+*/
+.example-box {
+    background-color: var(--keyman-blue);
+    color: white;
+    width: 70vw;
+    text-align: center;
+    padding: 5px;
+    border-bottom: 1px solid rgb(159, 159, 159);
+}
+
+#exampleBox {
+    visibility: visible !important;
+}
+
+.example-box p {
+    margin: 10px;
+}
+
+#example {
+    visibility: visible !important;
+}
+
+/* End of Section Tag */