Skip to content

Clarify app install vs update messaging #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NateEaton merged 2 commits into from
Dec 5, 2025
Merged

Clarify app install vs update messaging #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aca6fe9
Clarify install vs update messaging and add install instructions
claude Dec 5, 2025
581dfe4
Convert install instructions to modal dialog
claude Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 101 additions & 2 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,81 @@
color: #333;
}

/* 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;
}
.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.3rem;
}
.modal-content p {
margin: 0.5rem 0;
}
.modal-content strong {
color: #1e40af;
}
.modal-content ul {
margin: 0.25rem 0 0.75rem 0;
padding-left: 1.5rem;
line-height: 1.4;
}
.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 */
.cta-button {
display: inline-block;
Expand Down Expand Up @@ -228,11 +303,35 @@ <h1>My PT</h1>

<div class="cta-center">
<a class="cta-button" href="https://my-pt-pwa.vercel.app/" target="_blank">Try It Now</a>
<a class="cta-button-secondary" href="#install-modal">📱 Install to Home Screen</a>
</div>

<p class="device-note">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.</p>
</header>

<!-- Install Instructions Modal -->
<div id="install-modal" class="modal-overlay">
<div class="modal-content">
<a href="#" class="modal-close">&times;</a>
<h3>📱 Install to Home Screen</h3>

<p><strong>Android (Chrome/Edge):</strong></p>
<ul>
<li>Tap the menu (⋮) → <strong>Add to Home screen</strong> or <strong>Install app</strong></li>
<li>Confirm to add the app icon to your home screen</li>
</ul>

<p><strong>iOS (Safari):</strong></p>
<ul>
<li>Tap the Share button <strong>⎋</strong> (bottom center)</li>
<li>Scroll down and tap <strong>Add to Home Screen</strong></li>
<li>Tap <strong>Add</strong> to confirm</li>
</ul>

<p style="margin-top: 0.75rem; font-size: 0.9rem; font-style: italic;">
Once installed, the app works offline and opens like a native app with no browser UI.
</p>
</div>
</div>

<section>
<h2>What is My PT?</h2>
<p>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/GuideDialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,8 +376,8 @@
<p>
You can check for new versions in <strong>Settings > Support >
Check for App Update</strong>. 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.
</p>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/routes/settings/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
});
});
Expand Down Expand Up @@ -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');
}
}

Expand Down Expand Up @@ -585,7 +585,7 @@
</div>

<div class="card-content">
<h3>{updateAvailable ? 'Install Update' : 'Check for App Update'}</h3>
<h3>{updateAvailable ? 'Update App' : 'Check for App Update'}</h3>
<p>
{updateAvailable
? 'A new version is ready to install'
Expand Down