<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>multiavatar WASM demo</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem auto; max-width: 640px; padding: 0 1rem; color: #1a1a1a; }
h1 { font-size: 1.4rem; }
label { display: block; margin: 1rem 0 0.3rem; font-weight: 600; }
input { width: 100%; box-sizing: border-box; padding: 0.5rem; font-size: 1rem; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.cell { text-align: center; }
.cell img { display: block; width: 128px; height: 128px; border: 1px solid #ddd; border-radius: 8px; }
.cell span { font-size: 0.75rem; color: #666; }
.gif { animation: none; }
</style>
</head>
<body>
<h1>multiavatar · WASM demo</h1>
<label for="input">输入任意字符串（决定头像形状）</label>
<input id="input" value="demon1110" autocomplete="off" />
<div class="row">
<div class="cell"><img id="png" alt="PNG" /><span>PNG 256</span></div>
<div class="cell"><img id="jpg" alt="JPG" /><span>JPEG 256</span></div>
<div class="cell"><img id="gif" class="gif" alt="GIF" /><span>GIF 96</span></div>
<div class="cell"><img id="fav" alt="ICO" /><span>ICO (ZIP)</span></div>
</div>
<p id="svg-info" style="font-size:0.8rem;color:#444"></p>
<script type="module" src="./demo.js"></script>
</body>
</html>