Mercurial

comparison mrjunejune/src/offline.html @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents a6d8d32a0261
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" href="/public/design-system/styles/tokens.css">
7 <link rel="stylesheet" href="/public/design-system/styles/themes.css">
8 <link rel="stylesheet" href="/public/design-system/styles/components.css">
9 <script
10 type="module"
11 src="/public/design-system/components/index.js"
12 ></script>
6 <title>Offline - MrJuneJune</title> 13 <title>Offline - MrJuneJune</title>
7 <style> 14 <style>
8 body { 15 body {
9 font-family: system-ui, -apple-system, sans-serif; 16 font-family: system-ui, -apple-system, sans-serif;
10 display: flex; 17 display: flex;
11 flex-direction: column; 18 flex-direction: column;
12 align-items: center; 19 align-items: center;
13 justify-content: center; 20 justify-content: center;
14 min-height: 100vh; 21 min-height: 100vh;
15 margin: 0; 22 margin: 0;
16 padding: 20px; 23 padding: var(--zenbu-sys-padding-lg);
17 background: linear-gradient(135deg, #544e43 0%, #3a3630 100%); 24 background: linear-gradient(135deg, #544e43 0%, #3a3630 100%);
18 color: white; 25 color: white;
19 text-align: center; 26 text-align: center;
20 } 27 }
21 28
22 h1 { 29 h1 {
23 font-size: 3em; 30 font-size: var(--zenbu-sys-font-size-3xl);
24 margin: 0 0 0.5em 0; 31 margin: 0 0 0.5em 0;
25 } 32 }
26 33
27 p { 34 p {
28 font-size: 1.2em; 35 font-size: var(--zenbu-sys-font-size-lg);
36 line-height: var(--zenbu-sys-line-height-lg);
29 margin: 0 0 2em 0; 37 margin: 0 0 2em 0;
30 opacity: 0.9; 38 opacity: 0.9;
31 } 39 }
32 40
33 button { 41 button {
34 padding: 12px 32px; 42 min-height: var(--zenbu-control-height);
35 font-size: 1em; 43 padding:
44 var(--zenbu-control-padding-block)
45 var(--zenbu-control-padding-inline);
46 font-size: var(--zenbu-control-font-size);
36 background: white; 47 background: white;
37 color: #544e43; 48 color: #544e43;
38 border: none; 49 border: none;
39 border-radius: 8px; 50 border-radius: var(--zenbu-sys-radius-control);
40 cursor: pointer; 51 cursor: pointer;
41 font-weight: bold; 52 font-weight: bold;
42 transition: transform 0.2s; 53 transition: transform 0.2s;
43 } 54 }
44 55
51 margin-bottom: 0.3em; 62 margin-bottom: 0.3em;
52 } 63 }
53 </style> 64 </style>
54 </head> 65 </head>
55 <body> 66 <body>
56 <div class="icon">📡</div> 67 <div class="icon">
68 <zen-icon name="offline" label="Offline"></zen-icon>
69 </div>
57 <h1>You're Offline</h1> 70 <h1>You're Offline</h1>
58 <p>It looks like you've lost your internet connection.<br>Don't worry, some cached pages might still work!</p> 71 <p>It looks like you've lost your internet connection.<br>Don't worry, some cached pages might still work!</p>
59 <button onclick="window.location.reload()">Try Again</button> 72 <zen-button appearance="plain" size="lg">
73 <button onclick="window.location.reload()">Try Again</button>
74 </zen-button>
60 </body> 75 </body>
61 </html> 76 </html>