diff --git a/frontend/index.html b/frontend/index.html index de010d4..4ce53ec 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,16 +5,21 @@ - + + + + - + + - + - + + - + Shinkan Jinkendo diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png new file mode 100644 index 0000000..545fcd4 Binary files /dev/null and b/frontend/public/apple-touch-icon.png differ diff --git a/frontend/public/favicon-32.png b/frontend/public/favicon-32.png new file mode 100644 index 0000000..362bbe6 Binary files /dev/null and b/frontend/public/favicon-32.png differ diff --git a/frontend/public/icon-192.png b/frontend/public/icon-192.png new file mode 100644 index 0000000..77c88ea Binary files /dev/null and b/frontend/public/icon-192.png differ diff --git a/frontend/public/icon-512.png b/frontend/public/icon-512.png new file mode 100644 index 0000000..a612be2 Binary files /dev/null and b/frontend/public/icon-512.png differ diff --git a/frontend/public/manifest.webmanifest b/frontend/public/manifest.webmanifest new file mode 100644 index 0000000..e0a9d34 --- /dev/null +++ b/frontend/public/manifest.webmanifest @@ -0,0 +1,25 @@ +{ + "name": "Shinkan Jinkendo", + "short_name": "Shinkan", + "description": "Trainer- und Vereinsplattform für Kampfsport-Trainingsplanung", + "start_url": "/", + "scope": "/", + "display": "standalone", + "background_color": "#f4f3ef", + "theme_color": "#1D9E75", + "lang": "de", + "icons": [ + { + "src": "/icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "/icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any maskable" + } + ] +} diff --git a/frontend/src/app.css b/frontend/src/app.css index e352aeb..50dd191 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -33,18 +33,28 @@ html, body, #root { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text1); -webkit-text-size-adjust: 100%; } -.app-shell { display: flex; flex-direction: column; height: 100%; max-width: 600px; margin: 0 auto; } +.app-shell { display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh; max-width: 600px; margin: 0 auto; } .app-header { height: var(--header-h); display: flex; align-items: center; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } +/* iPhone: Web-App (standalone) / Safari mit viewport-fit=cover — Kopf unter Statusleiste ausrichten */ +@media (max-width: 1023px) { + .app-header.app-header--mobile { + height: auto; + min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); + padding-top: env(safe-area-inset-top, 0px); + padding-left: max(16px, env(safe-area-inset-left, 0px)); + padding-right: max(16px, env(safe-area-inset-right, 0px)); + } +} .app-logo { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; } /* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */ .app-main { flex: 1; overflow-y: auto; - padding: 16px 16px calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px); + padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px) max(16px, env(safe-area-inset-left, 0px)); } .bottom-nav { @@ -66,7 +76,7 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we -ms-overflow-style: none; justify-content: flex-start; gap: 2px; - padding: var(--nav-pad-top) 6px env(safe-area-inset-bottom, 0px); + padding: var(--nav-pad-top) max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px)); min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px)); height: auto; box-sizing: border-box; @@ -2174,7 +2184,8 @@ a.analysis-split__nav-item { .app-shell { display: flex; flex-direction: column; - height: 100%; + min-height: 100%; + min-height: 100dvh; max-width: 600px; margin: 0 auto; }