f243bfe89a
Reskin the whole app via design tokens in tailwind-theme.css (remapped color ramps) plus a define-once component layer in lib/styles/components.css (.btn, .card, .input, .chip, .badge, .sheet, …). Buttons are muted/outlined gold rather than flat fills. Self-host Inter + Fraunces (woff2) under the existing font-src 'self' CSP. Restyle the shared components and the account, admin, host, join, recover and upload screens against the new tokens. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
96 lines
3.5 KiB
HTML
96 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<!-- viewport-fit=cover activates the env(safe-area-inset-*) padding used by the
|
|
bottom nav, sheets, toasts and FAB on notched / home-indicator devices. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="text-scale" content="scale" />
|
|
<!-- Light/dark theme-color so the browser chrome matches the active theme. -->
|
|
<meta name="theme-color" content="#faf9f7" media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color" content="#100f0f" media="(prefers-color-scheme: dark)" />
|
|
<!-- Installable PWA keepsake: manifest + Apple home-screen metadata. -->
|
|
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
|
|
<link rel="icon" href="%sveltekit.assets%/icon.svg" type="image/svg+xml" />
|
|
<link rel="apple-touch-icon" href="%sveltekit.assets%/icon.svg" />
|
|
<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="EventSnap" />
|
|
<!--
|
|
FOUC guard: apply the dark class *before* paint, so reloads of pages with
|
|
theme=dark don't flash a white screen. Mirrors the logic in
|
|
`src/lib/theme-store.ts`; kept in sync by hand (it's 6 lines).
|
|
-->
|
|
<!-- nonce is required: our CSP sets script-src 'self', and SvelteKit's
|
|
mode:'auto' only hashes scripts *it* injects, not this template-authored
|
|
one. %sveltekit.nonce% is substituted per request and added to the CSP. -->
|
|
<script nonce="%sveltekit.nonce%">
|
|
(function () {
|
|
try {
|
|
var pref = localStorage.getItem('eventsnap_theme') || 'system';
|
|
var dark =
|
|
pref === 'dark' ||
|
|
(pref === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
if (dark) document.documentElement.classList.add('dark');
|
|
} catch (_) {}
|
|
})();
|
|
</script>
|
|
%sveltekit.head%
|
|
</head>
|
|
<body data-sveltekit-preload-data="hover">
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
|
|
<!--
|
|
Cold-start placeholder. With `ssr = false` the app renders entirely client-side,
|
|
so `%sveltekit.body%` is empty until the JS bundle mounts. This themed spinner
|
|
(the FOUC guard above has already applied `.dark`) fills that gap instead of a
|
|
blank flash, and mirrors the /-route splash. The root layout's onMount removes
|
|
it once the app has painted. Inline <style> is permitted by our CSP
|
|
(style-src 'unsafe-inline'); intentionally no <script> here so script-src stays 'self'.
|
|
-->
|
|
<div id="app-boot" role="status" aria-label="Lädt">
|
|
<span class="app-boot__spinner"></span>
|
|
<span class="app-boot__label">EventSnap</span>
|
|
</div>
|
|
<style>
|
|
#app-boot {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
background: #faf9f7;
|
|
}
|
|
html.dark #app-boot {
|
|
background: #100f0f;
|
|
}
|
|
.app-boot__spinner {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 9999px;
|
|
border: 2px solid #e5e4e1;
|
|
border-top-color: #8a6a2b;
|
|
animation: app-boot-spin 0.6s linear infinite;
|
|
}
|
|
html.dark .app-boot__spinner {
|
|
border-color: #3b3a38;
|
|
border-top-color: #c6a24a;
|
|
}
|
|
.app-boot__label {
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
color: #8a6a2b;
|
|
}
|
|
@keyframes app-boot-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|