| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="theme-color" content="#0d82df" /> |
| <meta |
| name="description" |
| content="Design and export balanced Hugging Face logo wallpapers in real time." |
| /> |
| <title>TileKit Wallpaper Studio</title> |
| </head> |
| <body> |
| <main class="app-shell"> |
| <header class="hero"> |
| <div> |
| <p class="eyebrow">Browser-native TileKit</p> |
| <h1><span aria-hidden="true">🤗</span> Wallpaper Studio</h1> |
| </div> |
| <a href="https://github.com/osolmaz/tools/tree/main/tilekit" target="_blank" rel="noreferrer"> |
| Source |
| </a> |
| </header> |
|
|
| <section class="workspace"> |
| <aside class="controls" aria-label="Wallpaper controls"> |
| <div class="control-section"> |
| <div class="section-heading"> |
| <h2>Canvas</h2> |
| <span id="pixel-count">2.1 MP</span> |
| </div> |
| <label> |
| Resolution |
| <select id="resolution"> |
| <option value="1920x1080">Full HD · 1920×1080</option> |
| <option value="2560x1440">QHD · 2560×1440</option> |
| <option value="3840x2160" selected>4K · 3840×2160</option> |
| <option value="5120x2880">5K · 5120×2880</option> |
| <option value="7680x4320">8K · 7680×4320</option> |
| <option value="custom">Custom</option> |
| </select> |
| </label> |
| <div class="split-inputs"> |
| <label>Width <input id="width" type="number" min="640" max="7680" step="8" value="3840" /></label> |
| <label>Height <input id="height" type="number" min="360" max="4320" step="8" value="2160" /></label> |
| </div> |
| </div> |
|
|
| <div class="control-section"> |
| <div class="section-heading"><h2>Symbol</h2></div> |
| <div class="symbol-switch" role="group" aria-label="Symbol type"> |
| <button id="logo-mode" class="symbol-mode" type="button" aria-pressed="true">HF logo</button> |
| <button id="emoji-mode" class="symbol-mode" type="button" aria-pressed="false"><span id="mode-emoji">🤗</span> Emoji</button> |
| </div> |
| <div id="emoji-controls" hidden> |
| <button id="emoji-picker-toggle" class="emoji-picker-toggle" type="button" aria-expanded="false" aria-controls="emoji-picker-panel"> |
| <span id="selected-emoji" class="selected-emoji">🤗</span> |
| <span><strong id="selected-emoji-name">Hugging face</strong><small>Choose emoji</small></span> |
| <span aria-hidden="true">⌄</span> |
| </button> |
| <div id="emoji-picker-panel" class="emoji-picker-panel" hidden> |
| <div class="picker-loading">Loading emoji…</div> |
| </div> |
| </div> |
| <p class="control-note">Uses Apple Emoji on Apple devices and the native emoji style elsewhere.</p> |
| </div> |
|
|
| <div class="control-section"> |
| <div class="section-heading"><h2>Layout</h2><button id="reset" class="text-button">Reset</button></div> |
| <label class="range-label"> |
| <span>Density <output id="density-value">88</output></span> |
| <input id="density" type="range" min="24" max="512" step="1" value="88" /> |
| </label> |
| <label class="range-label"> |
| <span>Logo size <output id="size-value">1.00×</output></span> |
| <input id="logo-size" type="range" min="0.5" max="1.6" step="0.01" value="1" /> |
| </label> |
| <label class="range-label"> |
| <span>Size variation <output id="size-variation-value">100%</output></span> |
| <input id="size-variation" type="range" min="0" max="1.5" step="0.01" value="1" /> |
| </label> |
| <label class="range-label"> |
| <span>Spacing <output id="spacing-value">1.00×</output></span> |
| <input id="spacing" type="range" min="0.25" max="2" step="0.01" value="1" /> |
| </label> |
| <label class="range-label"> |
| <span>Rotation <output id="rotation-value">52°</output></span> |
| <input id="rotation" type="range" min="0" max="70" step="1" value="52" /> |
| </label> |
| <div class="seed-row"> |
| <label>Seed <input id="seed" type="number" min="0" max="4294967295" step="1" value="84237" /></label> |
| <button id="randomize" class="icon-button" title="Randomize seed" aria-label="Randomize seed">↻</button> |
| </div> |
| </div> |
|
|
| <button id="export" class="export-button">Render 4K PNG</button> |
| <button id="share" class="share-button" type="button">Copy share URL</button> |
| <p id="export-status" class="export-status" role="status">Rendered locally in your browser.</p> |
| </aside> |
|
|
| <section class="preview-panel" aria-label="Live wallpaper preview"> |
| <div class="preview-toolbar"> |
| <span><i class="live-dot"></i> Live preview</span> |
| <span id="render-stats">Ready</span> |
| </div> |
| <div id="canvas-wrap" class="canvas-wrap"> |
| <canvas id="preview" aria-label="Wallpaper preview"></canvas> |
| </div> |
| </section> |
| </section> |
| </main> |
| <script type="module" src="/src/main.ts"></script> |
| </body> |
| </html> |
|
|
