Ulas Kalayci
85 lines
3.4 KiB
HTML
85 lines
3.4 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" />
|
|
|
|
<!-- 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/login.css" />
|
|
<link rel="stylesheet" href="/styles/reminders.css" />
|
|
|
|
<!-- 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>
|
|
(function() {
|
|
var stored = localStorage.getItem('oikos-theme');
|
|
if (stored === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
} else if (stored === 'light') {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
}
|
|
// System/null: tokens.css @media (prefers-color-scheme: dark) übernimmt
|
|
})();
|
|
</script>
|
|
|
|
<!-- Lucide Icons (lokal, v0.469.0) -->
|
|
<script src="/lucide.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Skip-Link: sichtbar bei Keyboard-Fokus, verknüpft mit <main id="main-content"> -->
|
|
<a href="#main-content" class="sr-only">Zum Hauptinhalt springen</a>
|
|
|
|
<!-- 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>
|