Files
oikos/public/index.html
T
Ulas 6bc4c46f03 fix(security): eliminate XSS vectors and restore zoom accessibility
- Extract shared esc() utility (public/utils/html.js) replacing 8
  duplicate escHtml() functions across all page modules
- Apply HTML escaping to all user-controlled data in innerHTML
  templates: titles, names, locations, descriptions, colors, notes
  content, weather data, autocomplete suggestions
- Remove user-scalable=no and maximum-scale=1 from viewport meta
  tag, restoring pinch-to-zoom for WCAG 1.4.4 compliance
- Bump version to 0.7.1
2026-04-04 06:25:28 +02:00

82 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<!-- Viewport: edge-to-edge, kein Auto-Zoom bei Inputs -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<!-- PWA / Theme -->
<meta name="theme-color" content="#007AFF" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#1C1C1E" 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 -->
<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/login.css" />
<link rel="stylesheet" href="/styles/dashboard.css" />
<link rel="stylesheet" href="/styles/tasks.css" />
<link rel="stylesheet" href="/styles/shopping.css" />
<link rel="stylesheet" href="/styles/meals.css" />
<link rel="stylesheet" href="/styles/calendar.css" />
<link rel="stylesheet" href="/styles/notes.css" />
<link rel="stylesheet" href="/styles/contacts.css" />
<link rel="stylesheet" href="/styles/budget.css" />
<link rel="stylesheet" href="/styles/settings.css" />
<!-- Theme: Vor CSS-Rendering anwenden (Flash-Prevention) -->
<script>
(function() {
var t = localStorage.getItem('oikos-theme');
if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
})();
</script>
<!-- Lucide Icons (lokal, v0.469.0) -->
<script src="/lucide.min.js"></script>
</head>
<body>
<!-- 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>