diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 4fdf58702..8eec03b32 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -15,7 +15,7 @@ - + diff --git a/docs/assets/js/download-highlight.js b/docs/assets/js/site.js similarity index 66% rename from docs/assets/js/download-highlight.js rename to docs/assets/js/site.js index a54c19eeb..536fb65c2 100644 --- a/docs/assets/js/download-highlight.js +++ b/docs/assets/js/site.js @@ -64,4 +64,30 @@ document.addEventListener('DOMContentLoaded', function() { addRecommendation(link); } }); + + // --- Touch / Mobile Device Detection for Keyboard Notice --- + const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0); + const keyboardNotice = document.getElementById('keyboard-notice'); + if (keyboardNotice && isTouchDevice) { + keyboardNotice.style.border = '2px solid #cc9933'; + } + + // --- PWA Instructions Platform Detection & Focus --- + const ua = navigator.userAgent || ''; + const isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); + const isAndroid = /Android/.test(ua); + + const iosBlock = document.getElementById('pwa-ios'); + const androidBlock = document.getElementById('pwa-android'); + + if (isIOS && iosBlock && androidBlock) { + // Move iOS block above Android block and highlight + iosBlock.parentNode.insertBefore(iosBlock, androidBlock); + iosBlock.style.borderLeft = '3px solid #5cb85c'; + iosBlock.style.paddingLeft = '0.5em'; + } else if (isAndroid && androidBlock && iosBlock) { + // Highlight Android block + androidBlock.style.borderLeft = '3px solid #5cb85c'; + androidBlock.style.paddingLeft = '0.5em'; + } }); diff --git a/docs/index.md b/docs/index.md index 1decde297..43fdfac49 100644 --- a/docs/index.md +++ b/docs/index.md @@ -14,7 +14,7 @@ title: Play MUME with MMapper Choose your preferred platform to start using MMapper {{ site.github.latest_release.tag_name }}:
- + Web diff --git a/docs/web.md b/docs/web.md new file mode 100644 index 000000000..2a80d8c6b --- /dev/null +++ b/docs/web.md @@ -0,0 +1,56 @@ +--- +layout: default +title: Get MMapper Web +--- + +MMapper Web allows you to run MMapper directly in your web browser with no installation required. You can also install it as a Progressive Web App (PWA) on mobile devices or desktop for a standalone app experience. + + + Launch MMapper Web + + +
+ Installing MMapper as a Web App (PWA):
+ You can install MMapper on your mobile device or tablet for quick home screen access and a full-screen experience. + +
+

iOS (iPhone & iPad - Safari)

+
    +
  1. Open MMapper Web in Safari.
    2. +
  2. Tap the Share button (the square icon with an upward arrow) in the browser toolbar.
    3. +
  3. Scroll down the menu and tap Add to Home Screen.
    4. +
  4. Tap Add in the top-right corner to confirm.
    5. +
+
+ +
+

Android (Chrome)

+
    +
  1. Open MMapper Web in Chrome.
    2. +
  2. Tap the Menu icon (three dots) in the top-right corner.
    3. +
  3. Tap Install app or Add to Home screen.
    4. +
  4. Follow the on-screen prompts to complete the installation.
    5. +
+
+
+ +
+ Physical Keyboard Recommended for Touch & Mobile Devices:
+ MMapper is a full graphical MUD client and map display, so an on-screen virtual keyboard takes up vital screen space needed for playing.
+ If you are playing on an iPad, iPhone, Android tablet, or smartphone, we strongly recommend connecting an external Bluetooth keyboard or keyboard cover to keep the entire screen visible. +
+ +
+ Looking for Beta or Development Builds? +
+

These are pre-release builds and may be unstable. They are intended for testing and advanced users. Use at your own risk.

+

Launch MMapper Web Beta

+
+
+ +## Frequently Asked Questions +1. What new features, changes, or bug fixes are in this version? +2. What is [MUME](https://mume.org)? + +## Found a bug? +Please report it [here](https://github.com/MUME/MMapper/issues).