From aca6fe9f80136796f40c48a4a7af458d00b034c8 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Dec 2025 02:08:29 +0000 Subject: [PATCH 1/2] Clarify install vs update messaging and add install instructions Changes: - Update app update UI text from "Install Update" to "Update App" - Change toast messages to use "update" instead of "install" - Update GuideDialog to reflect new terminology - Add prominent install instructions info box to landing page (docs/index.html) with clear steps for both Android and iOS users This resolves confusion between PWA "install to home screen" and "install app update" by using distinct terminology for each action. --- docs/index.html | 44 ++++++++++++++++++++++++++- src/lib/components/GuideDialog.svelte | 4 +-- src/routes/settings/+page.svelte | 8 ++--- 3 files changed, 49 insertions(+), 7 deletions(-) diff --git a/docs/index.html b/docs/index.html index 3c88868..9242c08 100644 --- a/docs/index.html +++ b/docs/index.html @@ -69,6 +69,32 @@ color: #333; } + /* Info Box (for helpful tips) */ + .info-box { + background: #dbeafe; + border-left: 4px solid #3b82f6; + padding: 1rem 1.5rem; + margin: 2rem 0; + border-radius: 4px; + color: #333; + font-size: 0.95rem; + } + .info-box h3 { + margin-top: 0; + color: #1e40af; + font-size: 1.1rem; + } + .info-box strong { + color: #1e40af; + } + .info-box ul { + margin: 0.5rem 0; + padding-left: 1.5rem; + } + .info-box li { + margin: 0.5rem 0; + } + /* CTA Button */ .cta-button { display: inline-block; @@ -230,7 +256,23 @@

My PT

Try It Now -

Works on any device with a modern web browser. For the best experience, use the "Add to Home Screen" option on your device to install it like a regular app.

+
+

📱 Install to Home Screen

+

Android (Chrome/Edge):

+ +

iOS (Safari):

+ +

+ Once installed, the app works offline and opens like a native app with no browser UI. +

+
diff --git a/src/lib/components/GuideDialog.svelte b/src/lib/components/GuideDialog.svelte index 4e49548..15738b1 100644 --- a/src/lib/components/GuideDialog.svelte +++ b/src/lib/components/GuideDialog.svelte @@ -376,8 +376,8 @@

You can check for new versions in Settings > Support > Check for App Update. When an update is available, the card - changes to "Install Update" - tap it to install the new version and - reload the app. You may also receive a notification when an update + changes to "Update App" - tap it to update the app and + reload. You may also receive a notification when an update becomes available. Your data is always preserved during updates.

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index d378f0c..ea4b0fa 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -77,7 +77,7 @@ newWorker.addEventListener('statechange', () => { if (newWorker.state === 'installed' && registration?.waiting) { updateAvailable = true; - toastStore.show('New version available. Open Settings to install.', 'info'); + toastStore.show('New version available. Open Settings to update.', 'info'); } }); }); @@ -122,11 +122,11 @@ } } - // User taps "Install Update" + // User taps "Update App" function installUpdate() { if (registration?.waiting) { registration.waiting.postMessage({ type: 'SKIP_WAITING' }); - toastStore.show('Installing update...', 'success'); + toastStore.show('Updating app...', 'success'); } } @@ -585,7 +585,7 @@
-

{updateAvailable ? 'Install Update' : 'Check for App Update'}

+

{updateAvailable ? 'Update App' : 'Check for App Update'}

{updateAvailable ? 'A new version is ready to install' From 581dfe4822f740d5113955bd399b6def24427b9c Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Dec 2025 02:39:55 +0000 Subject: [PATCH 2/2] Convert install instructions to modal dialog Changed from intrusive info box to CSS-only modal dialog that appears when clicking "Install to Home Screen" button next to "Try It Now". Changes: - Add secondary CTA button that triggers modal - Modal uses :target pseudo-class (no JavaScript needed) - Condensed spacing in modal content for better readability - Click close button or backdrop to dismiss - Much less intrusive UX for landing page --- docs/index.html | 93 +++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 75 insertions(+), 18 deletions(-) diff --git a/docs/index.html b/docs/index.html index 9242c08..271b038 100644 --- a/docs/index.html +++ b/docs/index.html @@ -69,30 +69,79 @@ color: #333; } - /* Info Box (for helpful tips) */ - .info-box { - background: #dbeafe; - border-left: 4px solid #3b82f6; - padding: 1rem 1.5rem; - margin: 2rem 0; - border-radius: 4px; - color: #333; - font-size: 0.95rem; + /* Modal Dialog */ + .modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + align-items: center; + justify-content: center; + } + .modal-overlay:target { + display: flex; } - .info-box h3 { + .modal-content { + background: white; + padding: 2rem; + border-radius: 8px; + max-width: 500px; + width: 90%; + max-height: 80vh; + overflow-y: auto; + position: relative; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + } + .modal-content h3 { margin-top: 0; color: #1e40af; - font-size: 1.1rem; + font-size: 1.3rem; + } + .modal-content p { + margin: 0.5rem 0; } - .info-box strong { + .modal-content strong { color: #1e40af; } - .info-box ul { - margin: 0.5rem 0; + .modal-content ul { + margin: 0.25rem 0 0.75rem 0; padding-left: 1.5rem; + line-height: 1.4; } - .info-box li { - margin: 0.5rem 0; + .modal-content li { + margin: 0.25rem 0; + } + .modal-close { + position: absolute; + top: 0.5rem; + right: 0.75rem; + font-size: 2rem; + color: #666; + text-decoration: none; + line-height: 1; + } + .modal-close:hover { + color: #333; + } + .cta-button-secondary { + display: inline-block; + background: white; + color: #3b82f6; + border: 2px solid #3b82f6; + padding: 0.75rem 1.5rem; + margin: 1rem 0.5rem; + text-decoration: none; + border-radius: 6px; + font-weight: bold; + transition: all 0.2s ease; + } + .cta-button-secondary:hover { + background: #eff6ff; + transform: translateY(-2px); } /* CTA Button */ @@ -254,26 +303,34 @@

My PT

Try It Now + 📱 Install to Home Screen
+ -
+ +

What is My PT?