Mercurial
annotate mrjunejune/src/offline.html @ 272:41a49c29a28f
polish JRPG conversation experience
Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Fri, 07 Aug 2026 16:05:29 -0700 |
| parents | 60a876c4587a |
| children |
| rev | line source |
|---|---|
| 209 | 1 <!doctype html> |
| 2 <html lang="en"> | |
| 3 <head> | |
| 4 <meta charset="UTF-8"> | |
| 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
6 <link rel="stylesheet" href="/public/design-system/styles/tokens.css"> |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
7 <link rel="stylesheet" href="/public/design-system/styles/themes.css"> |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
8 <link rel="stylesheet" href="/public/design-system/styles/components.css"> |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
9 <script |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
10 type="module" |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
11 src="/public/design-system/components/index.js" |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
12 ></script> |
| 209 | 13 <title>Offline - MrJuneJune</title> |
| 14 <style> | |
| 15 body { | |
| 16 font-family: system-ui, -apple-system, sans-serif; | |
| 17 display: flex; | |
| 18 flex-direction: column; | |
| 19 align-items: center; | |
| 20 justify-content: center; | |
| 21 min-height: 100vh; | |
| 22 margin: 0; | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
23 padding: var(--zenbu-sys-padding-lg); |
|
211
a6d8d32a0261
[MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents:
209
diff
changeset
|
24 background: linear-gradient(135deg, #544e43 0%, #3a3630 100%); |
| 209 | 25 color: white; |
| 26 text-align: center; | |
| 27 } | |
| 28 | |
| 29 h1 { | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
30 font-size: var(--zenbu-sys-font-size-3xl); |
| 209 | 31 margin: 0 0 0.5em 0; |
| 32 } | |
| 33 | |
| 34 p { | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
35 font-size: var(--zenbu-sys-font-size-lg); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
36 line-height: var(--zenbu-sys-line-height-lg); |
| 209 | 37 margin: 0 0 2em 0; |
| 38 opacity: 0.9; | |
| 39 } | |
| 40 | |
| 41 button { | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
42 min-height: var(--zenbu-control-height); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
43 padding: |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
44 var(--zenbu-control-padding-block) |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
45 var(--zenbu-control-padding-inline); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
46 font-size: var(--zenbu-control-font-size); |
| 209 | 47 background: white; |
|
211
a6d8d32a0261
[MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents:
209
diff
changeset
|
48 color: #544e43; |
| 209 | 49 border: none; |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
50 border-radius: var(--zenbu-sys-radius-control); |
| 209 | 51 cursor: pointer; |
| 52 font-weight: bold; | |
| 53 transition: transform 0.2s; | |
| 54 } | |
| 55 | |
| 56 button:hover { | |
| 57 transform: scale(1.05); | |
| 58 } | |
| 59 | |
| 60 .icon { | |
| 61 font-size: 5em; | |
| 62 margin-bottom: 0.3em; | |
| 63 } | |
| 64 </style> | |
| 65 </head> | |
| 66 <body> | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
67 <div class="icon"> |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
68 <zen-icon name="offline" label="Offline"></zen-icon> |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
69 </div> |
| 209 | 70 <h1>You're Offline</h1> |
| 71 <p>It looks like you've lost your internet connection.<br>Don't worry, some cached pages might still work!</p> | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
72 <zen-button appearance="plain" size="lg"> |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
73 <button onclick="window.location.reload()">Try Again</button> |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
74 </zen-button> |
| 209 | 75 </body> |
| 76 </html> |