Ulas Kalayci
c4cb52d042
Extracts the tab-bar UI into a reusable renderSubTabs() utility (public/utils/sub-tabs.js + public/styles/sub-tabs.css) so all sub-module navigation shares one implementation and visual style. - Settings: replaces template-literal <nav class="settings-tabs"> with renderSubTabs(); tabs now show icon + label (pill-style), group separators via separatorBefore, panel switching via onChange - Kitchen: renderKitchenTabsBar() becomes a thin wrapper around renderSubTabs(); kitchen-tabs.css keeps only layout adjustment rules - CSS: kitchen-tab* rules removed from kitchen-tabs.css, settings-tab-btn* rules removed from settings.css; both now inherit from sub-tabs.css - tokens.css: adds --sub-tabs-height (52px default; kitchen overrides to --kitchen-tabs-height: 56px) - test-browser-loader.mjs: resolves browser-absolute /utils/*.js imports to public/ directory for Node test compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
89 lines
3.8 KiB
HTML
89 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- Viewport: edge-to-edge, kein Zoom (PWA-native feel) -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=5" />
|
|
|
|
<!-- PWA / Theme -->
|
|
<meta name="theme-color" content="#4F46E5" media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color" content="#222220" media="(prefers-color-scheme: dark)" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
|
|
<!-- iOS-spezifisch -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Oikos" />
|
|
<meta name="description" content="Oikos - Familienplaner" />
|
|
<title>Oikos</title>
|
|
|
|
<!-- PWA -->
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="apple-touch-icon" href="/icons/icon-192.png" />
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />
|
|
|
|
<!-- DNS-Prefetch für externe Ressourcen -->
|
|
<link rel="dns-prefetch" href="https://openweathermap.org" />
|
|
|
|
<!-- Preload: kritische ES-Module (modulepreload ist korrekt für type="module") -->
|
|
<link rel="modulepreload" href="/api.js" />
|
|
<link rel="modulepreload" href="/router.js" />
|
|
<link rel="modulepreload" href="/rrule-ui.js" />
|
|
|
|
<!-- Theme: explizite Nutzer-Overrides vor CSS-Rendering anwenden (Flash-Prevention).
|
|
System-Präferenz wird durch @media (prefers-color-scheme: dark) in tokens.css
|
|
direkt per CSS behandelt — kein JS-matchMedia erforderlich. -->
|
|
<script src="/theme-init.js"></script>
|
|
|
|
<!-- Styles (Basis - seitenspezifische CSS wird vom Router on-demand geladen) -->
|
|
<link rel="stylesheet" href="/styles/tokens.css" />
|
|
<link rel="stylesheet" href="/styles/reset.css" />
|
|
<link rel="stylesheet" href="/styles/pwa.css" />
|
|
<link rel="stylesheet" href="/styles/layout.css" />
|
|
<link rel="stylesheet" href="/styles/glass.css" />
|
|
<link rel="stylesheet" href="/styles/sub-tabs.css" />
|
|
<link rel="stylesheet" href="/styles/kitchen-tabs.css" />
|
|
<link rel="stylesheet" href="/styles/login.css" />
|
|
|
|
<!-- Lucide Icons (lokal, v0.469.0) -->
|
|
<script src="/lucide.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Offline-Banner: sichtbar wenn navigator.onLine === false -->
|
|
<div id="offline-banner" class="offline-banner" hidden aria-live="polite" role="status">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" aria-hidden="true">
|
|
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
<path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path>
|
|
<path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path>
|
|
<path d="M10.71 5.05A16 16 0 0 1 22.56 9"></path>
|
|
<path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path>
|
|
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
|
|
<line x1="12" y1="20" x2="12.01" y2="20"></line>
|
|
</svg>
|
|
<span data-i18n="offline.banner"></span>
|
|
</div>
|
|
|
|
<!-- App-Shell - wird durch JavaScript gefüllt -->
|
|
<div id="app" class="app-shell">
|
|
<!-- Skeleton-Loading während Initialisierung -->
|
|
<div id="app-loading" class="app-loading" aria-live="polite" aria-label="Lade Oikos…">
|
|
<div class="app-loading__logo">Oikos</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module (ES-Module, kein Bundler) -->
|
|
<script type="module" src="/api.js"></script>
|
|
<script type="module" src="/router.js"></script>
|
|
|
|
<!-- Install-Prompt (PWA) -->
|
|
<oikos-install-prompt></oikos-install-prompt>
|
|
<script type="module" src="/components/oikos-install-prompt.js"></script>
|
|
|
|
<!-- Service Worker registrieren -->
|
|
<script src="/sw-register.js" defer></script>
|
|
</body>
|
|
</html>
|