Mercurial
comparison mrjunejune/src/talk/index.html @ 258:60a876c4587a
[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 | c1eab8c0b0f9 |
| children |
comparison
equal
deleted
inserted
replaced
| 257:609d3c6aff4e | 258:60a876c4587a |
|---|---|
| 3 <head> | 3 <head> |
| 4 <meta charset="UTF-8"> | 4 <meta charset="UTF-8"> |
| 5 <title>Talk!</title> | 5 <title>Talk!</title> |
| 6 {{/parts/base_head.html}} | 6 {{/parts/base_head.html}} |
| 7 <style> | 7 <style> |
| 8 body { font-family: sans-serif; padding: 20px; } | 8 body { font-family: sans-serif; padding: var(--zenbu-sys-padding-lg); } |
| 9 #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: 10px; padding: 10px; } | 9 #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: var(--zenbu-sys-space-control); padding: var(--zenbu-sys-padding-md); } |
| 10 #chat { display: flex; gap: 10px; } | 10 #chat { display: flex; gap: 10px; } |
| 11 input { flex-grow: 1; } | 11 input { flex-grow: 1; } |
| 12 </style> | 12 </style> |
| 13 </head> | 13 </head> |
| 14 <body> | 14 <body> |
| 17 <h1>Talk with strangers xDDD</h1> | 17 <h1>Talk with strangers xDDD</h1> |
| 18 | 18 |
| 19 <div id="messages"></div> | 19 <div id="messages"></div> |
| 20 | 20 |
| 21 <div id="chat"> | 21 <div id="chat"> |
| 22 <input type="text" id="messageInput" placeholder="Type a message..."> | 22 <zen-input appearance="plain" size="md"> |
| 23 <button id="sendBtn">Send</button> | 23 <input type="text" id="messageInput" placeholder="Type a message..."> |
| 24 </zen-input> | |
| 25 <zen-button appearance="plain" size="md"> | |
| 26 <button id="sendBtn">Send</button> | |
| 27 </zen-button> | |
| 24 </div> | 28 </div> |
| 25 </main> | 29 </main> |
| 26 {{/parts/footer.html}} | 30 {{/parts/footer.html}} |
| 27 <script> | 31 <script> |
| 28 const host = window.location.hostname; | 32 const host = window.location.hostname; |