Edom
1ba126c92b
站点按 bloub 三栏做自定义、动画时间线和设置，支持序列导出。 形体只留常见几种并配中文名；动画页右栏拉满时间线旁空位，滚动条隐藏。 机芯补 GROK.create / <grok-bot>，以及暂停冻结。
89 lines
2.7 KiB
HTML
89 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Grok Bot · 最小嵌入</title>
|
|
<style>
|
|
:root { --disk: #f3efe6; --ink: #161513; --mute: #6d675d; --paper: #ece7dc; }
|
|
html, body { margin: 0; min-height: 100%; background: #1a1916; color: var(--paper); }
|
|
body {
|
|
font: 14px/1.55 "SF Pro Text", "PingFang SC", sans-serif;
|
|
padding: 40px 28px 64px;
|
|
max-width: 640px;
|
|
}
|
|
h1 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
|
|
p { margin: 0 0 22px; color: var(--mute); font-size: 13px; }
|
|
a { color: #e8d7a4; }
|
|
.disk {
|
|
width: 96px; height: 96px; border-radius: 50%;
|
|
background: var(--disk);
|
|
display: grid; place-items: center;
|
|
box-shadow: inset 0 -8px 18px rgba(40, 30, 10, 0.08), 0 12px 28px rgba(0,0,0,.3);
|
|
}
|
|
grok-bot { color-scheme: light; }
|
|
pre {
|
|
margin: 22px 0 0;
|
|
padding: 14px 16px;
|
|
background: #22211d;
|
|
border: 1px solid #2e2c27;
|
|
border-radius: 12px;
|
|
overflow: auto;
|
|
font: 12px/1.5 ui-monospace, Menlo, monospace;
|
|
color: #d8d0c0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>最小嵌入</h1>
|
|
<p>
|
|
登录页原参数：64px · blob · black · <code>loginWrap</code>。
|
|
<a href="index.html">回 playground</a>
|
|
</p>
|
|
<div class="disk">
|
|
<grok-bot state="idle" shape="blob" color="black" size="64" mode="hold"></grok-bot>
|
|
</div>
|
|
<pre>
|
|
<!-- 任意页面 -->
|
|
<script src="geometry-data.js"></script>
|
|
<script src="src/math.js"></script>
|
|
<script src="src/tables.js"></script>
|
|
<script src="src/pose.js"></script>
|
|
<script src="src/tricks.js"></script>
|
|
<script src="src/fx.js"></script>
|
|
<script src="src/eyes.js"></script>
|
|
<script src="src/character.js"></script>
|
|
<script src="src/api.js"></script>
|
|
|
|
<grok-bot state="idle" shape="blob" color="black" size="64"></grok-bot>
|
|
|
|
<script>
|
|
const el = document.querySelector("grok-bot");
|
|
el.setState("playful");
|
|
el.spin(1);
|
|
|
|
// 或命令式
|
|
const { setState, spin, destroy } = GROK.create("#host", {
|
|
sizePx: 64, shape: "blob", color: "black", loginWrap: true, mode: "hold",
|
|
});
|
|
|
|
// 换皮：只覆盖你有的部分
|
|
GROK.create("#other", {
|
|
eyes: MY_EYES,
|
|
shapes: { blob: MY_BLOB },
|
|
playlist: { idle: [0], playful: [1] },
|
|
});
|
|
</script>
|
|
</pre>
|
|
<script src="geometry-data.js"></script>
|
|
<script src="src/math.js"></script>
|
|
<script src="src/tables.js"></script>
|
|
<script src="src/pose.js"></script>
|
|
<script src="src/tricks.js"></script>
|
|
<script src="src/fx.js"></script>
|
|
<script src="src/eyes.js"></script>
|
|
<script src="src/character.js"></script>
|
|
<script src="src/api.js"></script>
|
|
</body>
|
|
</html>
|