Serve static maintenance page with 503 when PocketBase is unreachable
This commit is contained in:
tleininger committed
1 parent
ed6aa5d5ec
commit
7e56e83953
7 files changed
+500
-4
No files matched your search
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Static maintenance page shown when PocketBase is unreachable. The gate in Program.cs
|
||||
serves this file with status 503 before any component renders, so it must stand on
|
||||
its own: no menu, no PocketBase, no script, and its styles are inlined rather than
|
||||
linked to the fingerprinted app.css (whose hashed name this static file cannot know).
|
||||
The tokens below are a copy of the ones this page needs from app.css, light and dark,
|
||||
under the same names -- when a colour changes there, change it here too. The header
|
||||
band and the signet mirror MainLayout and Signet.razor, so the page still looks like
|
||||
the site. The font is our own self-hosted Nunito; static files stay reachable while
|
||||
PocketBase is down, the gate only covers pages.
|
||||
-->
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta name="robots" content="noindex"/>
|
||||
<title>Elternbeirat der IGMH – gerade nicht erreichbar</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-brand: #2b6f9c;
|
||||
--color-brand-dark: #1f5477;
|
||||
--color-header: #2a77a6;
|
||||
--color-on-header: #fff;
|
||||
--color-accent-dark: #4f9247;
|
||||
--gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #3a7a3e 100%);
|
||||
--color-focus: #1f5477;
|
||||
--color-heading: #2b6f9c;
|
||||
--color-text: #222;
|
||||
--color-text-soft: #555;
|
||||
--color-bg: #fff;
|
||||
--color-page: #f4f6f4;
|
||||
--color-border: #e0e0e0;
|
||||
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
--space-4: 1.5rem;
|
||||
--space-5: 2rem;
|
||||
--radius: 12px;
|
||||
--shadow: 0 1px 3px rgba(31, 58, 95, 0.08), 0 4px 12px rgba(31, 58, 95, 0.06);
|
||||
|
||||
--font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-size-body: 1.0625rem;
|
||||
--font-weight-heading: 800;
|
||||
--letter-spacing-heading: -0.015em;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-brand: #7cc0ec;
|
||||
--color-brand-dark: #a3d5f4;
|
||||
--color-header: #266f9c;
|
||||
--color-accent-dark: #86c97d;
|
||||
--gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #2f6b33 100%);
|
||||
--color-focus: #a3d5f4;
|
||||
--color-heading: #c9ced6;
|
||||
--color-text: #a2a8b2;
|
||||
--color-text-soft: #a2a8b2;
|
||||
--color-bg: #222834;
|
||||
--color-page: #171b22;
|
||||
--color-border: #333b47;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Absolute path: this file is served for any page URL, e.g. /posts/new-board,
|
||||
where a relative "fonts/..." would point into /posts/. */
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
src: url("/fonts/nunito-latin-wght.woff2") format("woff2");
|
||||
font-weight: 400 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.65;
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100dvh;
|
||||
background: var(--color-page);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-body);
|
||||
}
|
||||
|
||||
/* The header band of MainLayout without the menu: there is nothing to
|
||||
navigate to while the pages are down. */
|
||||
header {
|
||||
background: var(--gradient-brand);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-3) 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--color-on-header);
|
||||
}
|
||||
|
||||
.signet {
|
||||
flex-shrink: 0;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.signet-bubble {
|
||||
fill: var(--color-on-header);
|
||||
}
|
||||
|
||||
.signet-figures {
|
||||
fill: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 1.35rem;
|
||||
font-weight: var(--font-weight-heading);
|
||||
letter-spacing: var(--letter-spacing-heading);
|
||||
}
|
||||
|
||||
.brand-school {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
main {
|
||||
box-sizing: border-box;
|
||||
max-width: 36rem;
|
||||
margin: var(--space-5) auto;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--color-heading);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.25;
|
||||
font-weight: var(--font-weight-heading);
|
||||
letter-spacing: var(--letter-spacing-heading);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-brand);
|
||||
font-weight: 600;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-brand-dark);
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: 3px solid var(--color-focus);
|
||||
outline-offset: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin-top: var(--space-4);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--color-border);
|
||||
color: var(--color-text-soft);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<!-- Not a link: the start page is down as well, it would only lead here. -->
|
||||
<svg class="signet" viewBox="0 0 40 40" width="40" height="40" aria-hidden="true" focusable="false">
|
||||
<path class="signet-bubble"
|
||||
d="M8 4h24a6 6 0 0 1 6 6v15a6 6 0 0 1-6 6H18l-8 6v-6H8a6 6 0 0 1-6-6V10a6 6 0 0 1 6-6z"/>
|
||||
<g class="signet-figures">
|
||||
<circle cx="15" cy="12" r="3.5"/>
|
||||
<path d="M9 26c0-5 2.7-8 6-8s6 3 6 8z"/>
|
||||
<circle cx="26" cy="16" r="2.6"/>
|
||||
<path d="M21.5 26c0-3.8 2-6 4.5-6s4.5 2.2 4.5 6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="brand-text">
|
||||
<span class="brand-name">Elternbeirat</span>
|
||||
<span class="brand-school">IGMH Mannheim</span>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Die Seite ist gerade nicht erreichbar</h1>
|
||||
<p>
|
||||
Wir bitten um Entschuldigung. Die Website des Elternbeirats der IGMH ist im
|
||||
Moment nicht verfügbar. Wir arbeiten daran, bitte versuchen Sie es in Kürze
|
||||
noch einmal.
|
||||
</p>
|
||||
<p class="contact">
|
||||
In dringenden Fällen erreichen Sie den Elternbeirat per E-Mail:<br/>
|
||||
<a href="mailto:kontakt@elternbeirat-igmh.info">kontakt@elternbeirat-igmh.info</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user