Ship hermit binary (cst-agent symlink), ~/.config/hermit with legacy fallback, Hermit color theme and mini crab frames, plus SVG→PUA font build pipeline. Co-authored-by: Cursor <cursoragent@cursor.com>
15 lines
43 KiB
HTML
15 lines
43 KiB
HTML
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hermit · Flat Motion Kit</title><style>
|
||
:root{color-scheme:light;--bg:#f8f6f2;--surface:#fffefa;--ink:#302c35;--muted:#89828e;--line:#e6e1db;--accent:#a65535;--stage:#eeeae3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;transition:background .4s,color .4s}body.dark{color-scheme:dark;--bg:#201e25;--surface:#29262f;--ink:#f6ede5;--muted:#b0a5b7;--line:#443b49;--accent:#ffb48a;--stage:#332d39}button,a,input{ -webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b28bd5;outline-offset:4px}header,main,footer{max-width:1160px;margin:auto;padding:0 36px}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-weight:650;letter-spacing:1px}.brand span{background:#ff9858;width:27px;height:24px;border-radius:8px;display:grid;place-items:center;color:#8554a8;font-size:16px;letter-spacing:3px}.meta,.eyebrow{font:11px ui-monospace,monospace;letter-spacing:2px;color:var(--muted)}.intro{padding:55px 0 32px;display:flex;justify-content:space-between;align-items:end}h1{font-size:42px;line-height:1.25;letter-spacing:-2px;font-weight:550;margin:14px 0}h1 em{font-style:normal;color:var(--accent)}.intro p{color:var(--muted);margin:0;font-size:14px}.edition{font:12px ui-monospace,monospace;color:var(--muted);text-align:right}.hero{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface)}.playground{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#f6d5b72b,transparent 65%),var(--stage);position:relative}.stage-label{position:absolute;top:22px;left:24px}.main-icon{width:206px;height:206px}.main-icon svg{width:100%;height:100%;animation:enter .5s ease-out}.size-row{display:flex;align-items:center;gap:16px;color:var(--muted);font:10px ui-monospace,monospace}.size-row svg{width:32px;height:32px}.size-row svg:nth-of-type(2){width:24px;height:24px}.size-row svg:nth-of-type(3){width:16px;height:16px}.console-side{padding:30px;display:flex;flex-direction:column;justify-content:space-between}.topline{display:flex;justify-content:space-between;align-items:center}.badge{font:10px ui-monospace,monospace;letter-spacing:1.5px;border:1px solid var(--line);padding:6px 10px;border-radius:20px}.dot-live{color:#8aa47b;margin-right:6px}.console{font:12px/2 ui-monospace,SFMono-Regular,Consolas,monospace;padding:20px 0}.dim{color:var(--muted)}.command{color:var(--accent)}.console h2{font:500 23px/1.3 system-ui;margin:18px 0 9px}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.control{background:transparent;border:1px solid var(--line);padding:7px 12px;border-radius:9px}.control.active{background:var(--stage)}.speed{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}input{width:68px;accent-color:#b86e47}.section-line{display:flex;align-items:center;justify-content:space-between;margin:34px 0 17px}.section-line h2{font-weight:500;font-size:15px;margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{padding:0;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:17px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}.card:hover{transform:translateY(-3px)}.card.selected{border-color:#ce966f;box-shadow:0 0 0 2px #cd976c20}.card-top{display:flex;justify-content:space-between;padding:16px 18px 0;font:10px ui-monospace,monospace;color:var(--muted);letter-spacing:1px}.card.selected .card-top{color:var(--accent)}.card-art{height:134px;display:grid;place-items:center}.card-art svg{width:128px;height:128px}.card-info{padding:7px 20px 20px}.card-info strong{font-size:15px;font-weight:550}.card-info p{font-size:12px;color:var(--muted);margin:5px 0 0}.bottom{display:flex;align-items:center;justify-content:space-between;margin:28px 0 40px;gap:15px;padding:20px 0;border-top:1px solid var(--line)}.bottom p{margin:0;color:var(--muted);font-size:12px}.download{background:var(--ink);color:var(--bg);text-decoration:none;padding:11px 18px;border-radius:10px;font-size:12px;white-space:nowrap}footer{padding-bottom:26px;display:flex;justify-content:space-between;font:10px ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}.paused svg *{animation-play-state:paused!important}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){header,main,footer{padding-left:20px;padding-right:20px}header{height:72px}.intro{padding-top:32px}.edition{display:none}h1{font-size:32px}.hero{grid-template-columns:1fr}.playground{min-height:260px}.console-side{padding:22px}.grid{grid-template-columns:repeat(2,1fr)}.card-info{padding:7px 14px 16px}.bottom{align-items:start;flex-direction:column}.meta{font-size:9px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
|
||
.playground{background:var(--stage)}.hero,.card{border-radius:6px}.card.selected{box-shadow:none;border-color:#f68042}.brand span{background:#f68042;border-radius:3px;color:#9957ad}.main-icon{width:240px;height:200px}.main-icon svg{animation:none}.card-art svg{width:100px;height:81px}.size-row svg{width:32px;height:26px}.size-row svg:nth-of-type(2){width:24px;height:20px}.size-row svg:nth-of-type(3){width:16px;height:13px}.download{display:inline-block;border-radius:4px}.downloads{display:flex;gap:8px}.control{border-radius:4px}.live-hermit .live-body,.live-hermit .live-eyes{animation:none!important;transform-origin:0 0;transform-box:view-box}.live-accent{transition:opacity .45s ease}.card.selected{border-color:#d27b4f}.card-art{transition:background .35s}.card.selected .card-art{background:#f6804209}.main-icon{width:252px;height:210px}@media(prefers-reduced-motion:reduce){.live-accent{transition:none}}</style><body><header><div class="brand"><span>ıı</span>Hermit / 寄居蟹</div><div class="meta">AGENT MOTION KIT · VOL. 03</div></header><main><section class="intro"><div><div class="eyebrow">A LITTLE PRESENCE IN YOUR TERMINAL</div><h1>一个壳,<em>一个小伙伴。</em></h1><p>终端是它的壳。橙色小寄居蟹,简单而有表情。</p></div><div class="edition">06 EXPRESSIONS<br>FLAT SVG / TWO SIZES</div></section><section class="hero"><div class="playground"><div class="stage-label eyebrow">FULL ICON / 带壳</div><div id="mainIcon" class="main-icon"></div><div class="size-row" id="sizes"></div></div><div class="console-side"><div class="topline"><span class="meta">HERMIT / TERMINAL</span><span class="badge"><span class="dot-live">●</span><span id="badge"></span></span></div><div class="console"><div class="dim">~/your-next-idea</div><div class="command">❯ hermit agent</div><h2 id="stateTitle"></h2><div id="stateText" class="dim" aria-live="polite"></div></div><div class="controls"><button id="pause" class="control" aria-pressed="false">Ⅱ 暂停</button><button id="cycle" class="control" aria-pressed="false">↻ 自动轮播</button><button id="theme" class="control" aria-pressed="false">◐ 深色</button><label class="speed">速度 <input id="speed" aria-label="动画速度" type="range" min="0.5" max="2" step="0.25" value="1"><output id="rate">1×</output></label></div></div></section><div class="section-line"><h2>小图标 / 无壳状态</h2><span class="meta">CLICK TO EXPLORE ↓</span></div><section class="grid" id="grid" aria-label="选择动画状态"></section><div class="bottom"><div><p>大图标带终端壳,小图标只保留寄居蟹。纯色扁平,柔和配色,表情连续变换。</p><p>原生终端通常不渲染 SVG;适用于 CLI 的图形界面、Webview 和文档。</p></div><div class="downloads"><a class="download" id="download" download>↓ 无壳 SVG</a> <a class="download" id="downloadShell" download>↓ 带壳 SVG</a></div></div></main><footer><span>HERMIT — SMALL FRIEND, BIG IDEAS.</span><span>CRAFTED IN SVG · 2026</span></footer><script>const states=[["idle", "等待输入", "READY", "轻轻呼吸,眨眼待命。"], ["question", "请求问题", "NEEDS INPUT", "歪头与问号,等待你的回答。"], ["thinking", "思考", "THINKING", "眼睛侧望,小钳子托住下巴。"], ["coding", "写码", "CODING", "眼睛变成 >_,专注写码。"], ["success", "完成", "COMPLETE", "弯起眼睛,任务完成。"], ["error", "遇到问题", "NEEDS CARE", "一个小叹号,提示需要关注。"]];const icons={"idle": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"idle\" role=\"img\" aria-label=\"Hermit 等待输入 无壳\"><title>Hermit · 等待输入</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M29 23v5m10-5v5\"/></g></g></svg>", "question": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"question\" role=\"img\" aria-label=\"Hermit 请求问题 无壳\"><title>Hermit · 请求问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M30 22v4m10-4v4\"/></g><path class=\"hermit-mark\" d=\"M47 13c0-6 8-6 8-1 0 3-4 3-4 6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"/></g></svg>", "thinking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"thinking\" role=\"img\" aria-label=\"Hermit 思考 无壳\"><title>Hermit · 思考</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M31 22v3m10-3v3\"/></g><path class=\"hermit-mark\" d=\"M43 32v7h-8\" stroke=\"#e9ba47\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>", "coding": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"coding\" role=\"img\" aria-label=\"Hermit 写码 无壳\"><title>Hermit · 写码</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 21 4 4-4 4m10-1h5\"/></g></g></svg>", "success": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"success\" role=\"img\" aria-label=\"Hermit 完成 无壳\"><title>Hermit · 完成</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 25 3-3 3 3m5 0 3-3 3 3\"/></g></g></svg>", "error": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"error\" role=\"img\" aria-label=\"Hermit 遇到问题 无壳\"><title>Hermit · 遇到问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 22 5 2m6 0 5-2\"/></g><path class=\"hermit-mark\" d=\"M52 12v6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\"/></g></svg>"};const large={"idle": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"idle\" role=\"img\" aria-label=\"Hermit 等待输入 带壳\"><title>Hermit · 等待输入</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M29 23v5m10-5v5\"/></g></g></g></svg>", "question": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"question\" role=\"img\" aria-label=\"Hermit 请求问题 带壳\"><title>Hermit · 请求问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M30 22v4m10-4v4\"/></g><path class=\"hermit-mark\" d=\"M47 13c0-6 8-6 8-1 0 3-4 3-4 6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"/></g></g></svg>", "thinking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"thinking\" role=\"img\" aria-label=\"Hermit 思考 带壳\"><title>Hermit · 思考</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M31 22v3m10-3v3\"/></g><path class=\"hermit-mark\" d=\"M43 32v7h-8\" stroke=\"#e9ba47\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></g></svg>", "coding": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"coding\" role=\"img\" aria-label=\"Hermit 写码 带壳\"><title>Hermit · 写码</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 21 4 4-4 4m10-1h5\"/></g></g></g></svg>", "success": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"success\" role=\"img\" aria-label=\"Hermit 完成 带壳\"><title>Hermit · 完成</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 25 3-3 3 3m5 0 3-3 3 3\"/></g></g></g></svg>", "error": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"error\" role=\"img\" aria-label=\"Hermit 遇到问题 带壳\"><title>Hermit · 遇到问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 22 5 2m6 0 5-2\"/></g><path class=\"hermit-mark\" d=\"M52 12v6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\"/></g></g></svg>"};let current=0,timer=null;const $=id=>document.getElementById(id);function art(key,shell=false){return(shell?large:icons)[key]}function speed(){document.querySelectorAll('svg').forEach(s=>s.style.setProperty('--speed',$('speed').value));$('rate').textContent=$('speed').value+'×'}function select(i){current=i;const [key,title,label,desc]=states[i];updateStage(key);$('sizes').innerHTML=art(key)+'32'+art(key)+'24'+art(key)+'16 PX';$('stateTitle').textContent=title;$('badge').textContent=label;$('stateText').textContent=desc;document.querySelectorAll('.card').forEach((b,j)=>{b.classList.toggle('selected',i===j);b.setAttribute('aria-pressed',i===j)});[['download',icons[key],key],['downloadShell',large[key],key+'-shell']].forEach(([id,svg,name])=>{$(id).href='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svg);$(id).download='hermit-'+name+'.svg'});speed()}
|
||
states.forEach(([key,title,label,desc],i)=>{const b=document.createElement('button');b.className='card';b.innerHTML='<div class="card-top"><span>0'+(i+1)+' / '+label+'</span><span>'+(i<4?'CORE':'EXTRA')+'</span></div><div class="card-art">'+art(key)+'</div><div class="card-info"><strong>'+title+'</strong><p>'+desc+'</p></div>';b.onclick=()=>select(i);$('grid').appendChild(b)});
|
||
$('pause').onclick=()=>{const on=document.body.classList.toggle('paused');$('pause').textContent=on?'▶ 播放':'Ⅱ 暂停';$('pause').setAttribute('aria-pressed',on)};$('theme').onclick=()=>{const on=document.body.classList.toggle('dark');$('theme').textContent=on?'◐ 浅色':'◐ 深色';$('theme').setAttribute('aria-pressed',on)};$('cycle').onclick=()=>{if(timer){clearInterval(timer);timer=null}else{timer=setInterval(()=>{if(!document.body.classList.contains('paused'))select((current+1)%states.length)},4000)}$('cycle').classList.toggle('active',!!timer);$('cycle').setAttribute('aria-pressed',!!timer);$('cycle').textContent=timer?'↻ 停止轮播':'↻ 自动轮播'};
|
||
const reduced=matchMedia('(prefers-reduced-motion: reduce)');let stageKey=null,transitionStart=0;let shape=null,fromShape=null,toShape=null;let pose=[0,0,1,1],fromPose=pose.slice(),toPose=pose.slice();
|
||
const faces={idle:[[29,23,29,25.5,29,28],[39,23,39,25.5,39,28]],question:[[30,22,30,24,30,26],[40,22,40,24,40,26]],thinking:[[31,22,31,23.5,31,25],[41,22,41,23.5,41,25]],coding:[[27,21,31,25,27,29],[37,28,39.5,28,42,28]],success:[[27,25,30,22,33,25],[38,25,41,22,44,25]],error:[[27,22,29.5,23,32,24],[38,24,40.5,23,43,22]]};
|
||
const poses={idle:[0,0,1,1],question:[5,-.7,1,1],thinking:[-3,-.3,1,1],coding:[-1,0,1.025,.98],success:[0,-1.5,.98,1.02],error:[-3,.6,1,1]};
|
||
function updateStage(key){
|
||
if(stageKey===null){$('mainIcon').innerHTML=art(key,true);const root=$('mainIcon').querySelector('svg');root.classList.add('live-hermit');const body=root.querySelector('.hermit-body');body.classList.add('live-body');body.querySelector('.hermit-eyes').innerHTML='<path id="liveEyes"/>';body.querySelector('.hermit-eyes').classList.add('live-eyes');let parser=new DOMParser();for(const state of ['question','thinking','error']){let doc=parser.parseFromString(icons[state],'image/svg+xml');let mark=doc.querySelector('.hermit-mark');mark=document.importNode(mark,true);mark.setAttribute('data-state',state);mark.classList.add('live-accent');mark.style.opacity='0';body.appendChild(mark)}shape=faces[key].flat();}
|
||
fromShape=shape.slice();toShape=faces[key].flat();fromPose=pose.slice();toPose=poses[key];transitionStart=performance.now();stageKey=key;
|
||
$('mainIcon').querySelectorAll('.live-accent').forEach(el=>el.style.opacity=el.dataset.state===key?'1':'0');
|
||
}
|
||
let lastTime=0,motionTime=0;function frame(now){let delta=lastTime?Math.min(now-lastTime,50):0;lastTime=now;if(!document.body.classList.contains('paused'))motionTime+=delta*Number($('speed').value);if(stageKey){let t=reduced.matches?1:Math.min(1,(now-transitionStart)/620);let e=t*t*t*(t*(t*6-15)+10);shape=fromShape.map((v,i)=>v+(toShape[i]-v)*e);pose=fromPose.map((v,i)=>v+(toPose[i]-v)*e);let moving=!reduced.matches;let phase=motionTime/1000;let breathe=moving?Math.sin(phase*1.8):0;let rot=pose[0]+(moving?Math.sin(phase*(stageKey==='coding'?5:1.6))*(stageKey==='coding'?1.5:1):0);let y=pose[1]+breathe*.8;let blinkPhase=motionTime%5400;let blink=moving&&blinkPhase>2350&&blinkPhase<2650?1-.88*Math.sin((blinkPhase-2350)/300*Math.PI):1;let a=shape.map((v,i)=>i%2===1?25+(v-25)*blink:v);$('liveEyes').setAttribute('d','M'+a.slice(0,2).join(' ')+' L'+a.slice(2,4).join(' ')+' L'+a.slice(4,6).join(' ')+' M'+a.slice(6,8).join(' ')+' L'+a.slice(8,10).join(' ')+' L'+a.slice(10,12).join(' '));$('mainIcon').querySelector('.live-body').setAttribute('transform',`translate(32 ${35+y}) rotate(${rot}) scale(${pose[2]} ${pose[3]}) translate(-32 -35)`);let feet=$('mainIcon').querySelector('.live-body > path');feet.setAttribute('d',`M23 36v${5+(moving?Math.sin(phase*2.5)*.5:0)}m18 ${-5-(moving?Math.sin(phase*2.5)*.5:0)}v${5-(moving?Math.sin(phase*2.5)*.5:0)}`)}requestAnimationFrame(frame)}requestAnimationFrame(frame);
|
||
$('speed').oninput=speed;select(0);</script></body></html> |