elpatron/beauty-bookings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: elpatron:92ed7a2c930e375be625bc7a5c28ca8b43e9147a
Branches Tags
elpatron:master elpatron:Multiple-Treatments elpatron:Nachricht-An-Kunde
elpatron:v0.1.5.2 elpatron:v0.1.5.1 elpatron:v0.1.5 elpatron:v0.1.4 elpatron:v0.1.3 elpatron:v0.1.0
..
compare: elpatron:8aea5bb4001270418d4626551789bddc1cfa1d2a
Branches Tags
elpatron:master elpatron:Multiple-Treatments elpatron:Nachricht-An-Kunde
elpatron:v0.1.5.2 elpatron:v0.1.5.1 elpatron:v0.1.5 elpatron:v0.1.4 elpatron:v0.1.3 elpatron:v0.1.0

4 Commits
92ed7a2c93 ... 8aea5bb400

Author SHA1 Message Date
elpatron
8aea5bb400 Verbesserungen für PWA-Installations-Prompt: Mobile-Menü-Überlappung behoben, iOS safe-area Unterstützung, localStorage-Fehlerbehandlung und erweiterte standalone-Erkennung 2025-10-07 13:41:03 +02:00
elpatron
14d0c2f9c3 Add PWA manifest and apple-touch-icon meta tag 2025-10-07 13:12:31 +02:00
elpatron
eb9ddc535f Add static serving for /icons/* and manifest.json 2025-10-07 12:58:36 +02:00
elpatron
8fa17f58c9 Add PWA icons (192x192, 512x512, apple-touch-icon) 2025-10-07 12:46:17 +02:00
10 changed files with 199 additions and 3 deletions
Expand all files Collapse all files

6
index.html
View File

@@ -3,7 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#ec4899" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Stargirlnails" />
<title>Stargirlnails Kiel - Terminbuchung</title> <title>Stargirlnails Kiel - Terminbuchung</title>
</head> </head>
<body> <body>

45
public/icons/README.md Normal file
View File

@@ -0,0 +1,45 @@
# PWA Icons Required
This directory must contain the following icon files for proper PWA installation on iOS and Android devices:
## Required Icon Files
### Android Icons
- **icon-192x192.png** (192×192 pixels)
- Used for Android home screen and app drawer
- Should have transparent background or match theme color
- Include safe zone padding for maskable icons (40px margin)
- **icon-512x512.png** (512×512 pixels)
- Used for Android splash screens and high-resolution displays
- Should have transparent background or match theme color
- Include safe zone padding for maskable icons (102px margin)
### iOS Icon
- **apple-touch-icon.png** (180×180 pixels)
- Used for iOS home screen
- Should NOT have transparent background (iOS adds its own rounded corners)
- Fill entire canvas with brand colors/logo
- iOS automatically applies rounded corners and shadow
## Design Guidelines
1. **Brand consistency**: Use Stargirlnails logo and brand colors
2. **Theme color**: Primary pink (#ec4899) matches manifest theme_color
3. **Contrast**: Ensure icon is visible on various backgrounds
4. **Simplicity**: Icons should be recognizable at small sizes
5. **No text**: Avoid small text that becomes unreadable when scaled
## Testing
After adding icons:
- Test on Android: Check home screen icon appearance
- Test on iOS Safari: Add to home screen and verify icon quality
- Validate with Lighthouse PWA audit
## Placeholder
Until actual icons are created, you can use a favicon.png (if available) or generate placeholder icons using tools like:
- https://realfavicongenerator.net/
- https://www.pwabuilder.com/imageGenerator

BIN
public/icons/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/icons/icon-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/icons/icon-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

32
public/manifest.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "Stargirlnails Kiel - Terminbuchung",
"short_name": "Stargirlnails",
"description": "Online Terminbuchung für Nagelstudio Stargirlnails in Kiel",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ec4899",
"orientation": "portrait",
"lang": "de",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
}
]
}

16
src/client/app.tsx
View File

@@ -16,6 +16,7 @@ import BookingStatusPage from "@/client/components/booking-status-page";
import ReviewSubmissionPage from "@/client/components/review-submission-page"; import ReviewSubmissionPage from "@/client/components/review-submission-page";
import LegalPage from "@/client/components/legal-page"; import LegalPage from "@/client/components/legal-page";
import { ProfileLanding } from "@/client/components/profile-landing"; import { ProfileLanding } from "@/client/components/profile-landing";
import { PWAInstallPrompt } from "@/client/components/pwa-install-prompt";
function App() { function App() {
const { user, isLoading, isOwner } = useAuth(); const { user, isLoading, isOwner } = useAuth();
@@ -36,10 +37,15 @@ function App() {
// Handle booking status page // Handle booking status page
const path = window.location.pathname; const path = window.location.pathname;
const PwaPrompt = <PWAInstallPrompt />;
if (path.startsWith('/booking/')) { if (path.startsWith('/booking/')) {
const token = path.split('/booking/')[1]; const token = path.split('/booking/')[1];
if (token) { if (token) {
return <BookingStatusPage token={token} />; return <>
{PwaPrompt}
<BookingStatusPage token={token} />
</>;
} }
} }
@@ -47,7 +53,10 @@ function App() {
if (path.startsWith('/review/')) { if (path.startsWith('/review/')) {
const token = path.split('/review/')[1]; const token = path.split('/review/')[1];
if (token) { if (token) {
return <ReviewSubmissionPage token={token} />; return <>
{PwaPrompt}
<ReviewSubmissionPage token={token} />
</>;
} }
} }
@@ -381,6 +390,9 @@ function App() {
)} )}
</main> </main>
{/* PWA Installation Prompt for iOS */}
<PWAInstallPrompt hidden={isMobileMenuOpen} />
{/* Footer */} {/* Footer */}
<footer className="bg-white border-t border-pink-100 mt-16"> <footer className="bg-white border-t border-pink-100 mt-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

93
src/client/components/pwa-install-prompt.tsx Normal file
View File

@@ -0,0 +1,93 @@
import { useEffect, useState } from 'react';
declare global {
interface Navigator { standalone?: boolean }
}
const LAST_SHOWN_KEY = 'pwaInstallPrompt_lastShown';
function isIOS(): boolean {
if (typeof navigator === 'undefined') return false;
const ua = navigator.userAgent || '';
const iOS = /iPhone|iPad|iPod/i.test(ua);
const iPadOS13Plus = /Macintosh/.test(ua) && 'ontouchend' in document;
return iOS || iPadOS13Plus;
}
function isSafari(): boolean {
const ua = navigator.userAgent || '';
const isSafari = /Safari/i.test(ua) && !/CriOS|FxiOS|EdgiOS/i.test(ua);
return isSafari;
}
function isStandalone(): boolean {
const navStandalone = (navigator as any)?.standalone === true;
const mm = typeof window !== 'undefined' && window.matchMedia
? window.matchMedia('(display-mode: standalone)').matches
: false;
return Boolean(navStandalone || mm);
}
export function PWAInstallPrompt({ hidden = false }: { hidden?: boolean }) {
if (hidden) return null;
const [show, setShow] = useState(false);
const [initialized, setInitialized] = useState(false);
useEffect(() => {
// Only run on client
if (typeof window === 'undefined') return;
const eligible = isIOS() && isSafari() && !isStandalone();
if (!eligible) {
setInitialized(true);
return;
}
let lastShown = 0;
try {
lastShown = Number(localStorage.getItem(LAST_SHOWN_KEY) || 0);
} catch {}
const oneWeek = 7 * 24 * 60 * 60 * 1000;
const shouldShow = !lastShown || Date.now() - lastShown > oneWeek;
setShow(shouldShow);
setInitialized(true);
}, []);
const dismiss = () => {
try { localStorage.setItem(LAST_SHOWN_KEY, String(Date.now())); } catch {}
setShow(false);
};
if (!initialized || !show) return null;
return (
<div
role="dialog"
aria-label="PWA Installation Anleitung"
className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-4"
style={{ paddingBottom: `max(env(safe-area-inset-bottom), 1rem)` }}
>
<div className="relative max-w-3xl mx-auto rounded-xl shadow-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white p-4 sm:p-6">
<button aria-label="Hinweis schließen" onClick={dismiss} className="absolute top-2 right-2 text-white/90 hover:text-white text-2xl leading-none">×</button>
<div className="flex items-start gap-3">
<div className="text-2xl">📱</div>
<div className="flex-1">
<h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
<p className="text-white/90 mb-2">So installierst du Stargirlnails als App auf deinem iPhone/iPad:</p>
<ol className="list-decimal pl-5 space-y-1 text-white/95">
<li>Öffne diese Seite in Safari (nicht Chrome oder andere Browser).</li>
<li>Tippe auf das Teilen-Symbol (□↑) unten in der Mitte.</li>
<li>Scrolle nach unten und wähle „Zum Home-Bildschirm".</li>
<li>Tippe auf „Hinzufügen".</li>
</ol>
<p className="mt-3 text-sm text-white/90">✨ Schneller Zugriff, keine App-Store-Installation nötig, automatische Updates.</p>
</div>
</div>
</div>
</div>
);
}
export default PWAInstallPrompt;

2
src/server/index.ts
View File

@@ -63,6 +63,8 @@ if (process.env.NODE_ENV === 'production') {
} }
app.use('/favicon.png', serveStatic({ path: './public/favicon.png' })); app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' })); app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' }));
app.use('/icons/*', serveStatic({ root: './public' }));
app.use('/manifest.json', serveStatic({ path: './public/manifest.json' }));
app.route("/rpc", rpcApp); app.route("/rpc", rpcApp);
app.route("/caldav", caldavApp); app.route("/caldav", caldavApp);

8
src/server/routes/client-entry.tsx
View File

@@ -30,12 +30,18 @@ export function clientEntry(c: Context<BlankEnv>) {
} }
return c.html( return c.html(
<html lang="en"> <html lang="de">
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="theme-color" content="#ec4899" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Stargirlnails" />
<title>Stargirlnails Kiel</title> <title>Stargirlnails Kiel</title>
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
{cssFiles && cssFiles.map((css: string) => ( {cssFiles && cssFiles.map((css: string) => (
<link key={css} rel="stylesheet" href={css} /> <link key={css} rel="stylesheet" href={css} />
))} ))}