| 1 | <!doctype html> |
| 2 | <html lang="en" > |
| 3 | <head> |
| 4 | <meta charset="utf-8" ><meta name="viewport" content="width=device-width,initial-scale=1" > |
| 5 | <meta name="color-scheme" content="light dark" ><title>Seedmark</title> |
| 6 | <link rel="stylesheet" href="/demo/style.css" > |
| 7 | </head> |
| 8 | <body> |
| 9 | <header><a href="/" class="brand" >Seedmark<span aria-hidden="true" >✳</span></a><nav aria-label="Preview" ><button id="grid-tab" aria-pressed="true" >Gallery</button><button id="chat-tab" aria-pressed="false" >Chat</button></nav><button id="theme" aria-label="Switch color theme" >◐</button></header> |
| 10 | <main> |
| 11 | <section class="workbench" aria-label="Avatar previews" > |
| 12 | <form id="seed-form" ><label for="seed" >Seed</label><input id="seed" name="seed" spellcheck="false" autocomplete="off" value="seedmark" ><button type="submit" >Generate</button><button type="button" id="shuffle" aria-label="Use a random seed" >↻</button></form> |
| 13 | <div class="filters" ><label for="family" >Family<select id="family" ><option value="all" >All families</option></select></label><label for="size" >Size<select id="size" ><option value="32" >32 px</option><option value="48" >48 px</option><option value="64" selected>64 px</option><option value="96" >96 px</option></select></label><label for="crop" >Crop<select id="crop" ><option value="square" >Square</option><option value="circle" >Circle</option></select></label><button id="more" >Next batch →</button></div> |
| 14 | <div id="gallery" aria-label="Generated avatars" ></div> |
| 15 | <section id="chat" aria-label="Example chat" hidden></section> |
| 16 | <p id="batch-note" role="status" ></p> |
| 17 | </section> |
| 18 | <aside aria-label="Selected avatar" > |
| 19 | <div id="selected" class="avatar" ></div> |
| 20 | <code id="selected-seed" ></code> |
| 21 | <div id="scale-preview" aria-label="Selected avatar at chat sizes" ></div> |
| 22 | <dl><div><dt>Family</dt><dd id="selected-family" ></dd></div><div><dt>Visual version</dt><dd id="selected-version" ></dd></div></dl> |
| 23 | <div id="palette" aria-label="Palette" ></div> |
| 24 | <div class="actions" ><button id="copy-svg" >Copy SVG</button><button id="download-svg" >Download</button></div> |
| 25 | <button id="copy-link" >Copy seed link</button> |
| 26 | <details><summary>Recipe</summary><pre id="recipe" ></pre></details> |
| 27 | <details><summary>Use the module</summary><pre><code>import { avatar } from './src/index.js' ; |
| 28 | |
| 29 | avatar('any seed text' , { size: 48 });</code></pre></details> |
| 30 | <p id="status" role="status" aria-live="polite" ></p> |
| 31 | </aside> |
| 32 | </main> |
| 33 | <script type="module" src="/demo/demo.js" ></script> |
| 34 | </body> |
| 35 | </html> |