Something went wrong. Try again.
ATProto-based AI Assistant Chat interface.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168<!doctype html><!-- What the service worker shows when the app is opened without a connection. It stands alone, without the app's stylesheet, so it repeats the theme tokens it uses, and the theme test fails when they drift. It is laid out as the error page is, and follows the scheme chosen in Preferences as the app does. --><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="robots" content="noindex" /> <title>Offline</title> <script> try { const theme = localStorage.getItem('scn-chat:theme') if (theme === 'light' || theme === 'dark') document.documentElement.dataset.theme = theme } catch {} </script> <style> :root { --color-panel: light-dark(oklch(0.993 0 0), oklch(0.195 0 0)); --color-hover: light-dark(oklch(0.918 0 0), oklch(0.302 0 0)); --color-ink: light-dark(oklch(0.375 0 0), oklch(0.933 0 0)); --color-muted: light-dark(oklch(0.503 0 0), oklch(0.72 0 0)); --color-accent-strong: light-dark(oklch(0.464 0.143 145), oklch(0.843 0.107 145)); --color-accent-soft: light-dark(oklch(0.931 0.062 145), oklch(0.322 0.103 145)); --color-accent-soft-hover: light-dark(oklch(0.902 0.082 145), oklch(0.367 0.125 145)); --color-accent-border: light-dark(oklch(0.868 0.102 145), oklch(0.417 0.145 145)); --color-accent-mark: light-dark(oklch(0.579 0.179 145), oklch(0.676 0.167 145)); --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --text-body: 1rem; --text-title: 1.5rem; --tracking-title: -0.02em; --radius-md: 0.6rem;
color-scheme: light dark; font-size: 96.875%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; box-sizing: border-box; margin: 0; padding: 3rem 1rem; background: var(--color-panel); font: var(--text-body) / 1.55 var(--font-ui); text-align: center; } svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } svg * { vector-effect: non-scaling-stroke; } button svg { width: calc(16rem / 15); height: calc(16rem / 15); flex-shrink: 0; } .mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.125rem; border-radius: 50%; background: var(--color-hover); color: var(--color-muted); } .mark svg { width: 1.3125rem; height: 1.3125rem; } /* Parts the cloud under the slash, in the mark's own tint. */ .mark .gap { stroke: var(--color-hover); stroke-width: 5; } h1 { margin: 0; color: var(--color-ink); font-size: var(--text-title); font-weight: 600; line-height: 1.25; letter-spacing: var(--tracking-title); text-wrap: balance; } p { max-width: 26rem; margin: 0.5rem 0 0; color: var(--color-muted); text-wrap: pretty; } button { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.375rem; margin-top: 1.75rem; padding: 0 1rem; border: 1px solid var(--color-accent-border); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-strong); font: inherit; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition-property: background-color, scale; transition-duration: 150ms; transition-timing-function: ease-out; } button:hover { background: var(--color-accent-soft-hover); } button:focus-visible { outline: 2px solid var(--color-accent-mark); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { button:active { scale: 0.96; } } </style> </head> <body> <span class="mark"> <!-- The app's puffy cloud, struck through. --> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M6.5 19.25A4.25 4.25 0 0 1 5.76 10.82a6 6 0 0 1 11.98-.06 4.25 4.25 0 0 1-.24 8.49z" /> <path class="gap" d="M3.5 3.5l17 17" /> <path d="M3.5 3.5l17 17" /> </svg> </span> <h1>You’re offline</h1> <p>The app needs a connection to open. It opens on its own once you’re back online.</p> <button type="button" onclick="location.reload()"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M5.07 8A8 8 0 1 0 12 4" /> <path d="M14.92 2.01 12 4l1.99 2.92" /> </svg> Try again </button> <script> addEventListener('online', () => location.reload()) </script> </body></html>