0d6b501fde
Animated educational explainer for ages 12+ explaining: - AI Agent communication & delegation - QC double-agent principle (60% trigger, score 1-10) - Causal Dilation Clock / Eigenzeit (proper time) - Live interactive demo with flying message animations Languages: Deutsch · English · 中文 · Русский · हिन्दी index.html as language picker entry point Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
191 lines
21 KiB
HTML
191 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI机器人如何互相通信？</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{--yellow:#FFD93D;--green:#6BCB77;--blue:#4D96FF;--pink:#FF6B6B;--purple:#C77DFF;--dark:#1a1a2e;--radius:20px}
|
||
body{font-family:'Nunito','PingFang SC','Microsoft YaHei',sans-serif;background:var(--dark);color:#fff;overflow-x:hidden}
|
||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
|
||
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:20px;opacity:0;animation:fadeUp 0.6s 0.2s forwards}
|
||
.hero h1{font-size:clamp(2rem,6vw,4.5rem);font-weight:900;line-height:1.15;margin-bottom:24px;opacity:0;animation:fadeUp 0.6s 0.4s forwards}
|
||
.hero h1 span{color:var(--yellow)}
|
||
.hero-lead{font-size:clamp(1rem,2vw,1.3rem);color:#ffffffbb;max-width:540px;line-height:1.7;margin-bottom:48px;opacity:0;animation:fadeUp 0.6s 0.6s forwards}
|
||
.hero-robots{display:flex;gap:32px;align-items:flex-end;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 0.6s 0.8s forwards}
|
||
.robot{display:flex;flex-direction:column;align-items:center;gap:8px}
|
||
.robot-body{width:90px;height:90px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:robotFloat 3s ease-in-out infinite;transition:transform 0.2s}
|
||
.robot-body:hover{transform:scale(1.08) translateY(-4px)}
|
||
.robot:nth-child(2) .robot-body{animation-delay:0.8s}.robot:nth-child(3) .robot-body{animation-delay:1.6s}
|
||
.robot-name{font-size:14px;font-weight:700;color:#ffffffcc}.robot-role{font-size:11px;color:#ffffff66;text-align:center;max-width:90px}
|
||
.r-martin{background:linear-gradient(135deg,#4D96FF,#2563eb)}.r-bob{background:linear-gradient(135deg,#6BCB77,#16a34a)}.r-diana{background:linear-gradient(135deg,#C77DFF,#7c3aed)}.r-qc{background:linear-gradient(135deg,#FF6B6B,#dc2626)}
|
||
section{padding:clamp(64px,8vw,120px) 20px;max-width:1100px;margin:0 auto}
|
||
.section-label{font-size:12px;font-weight:700;letter-spacing:0.12em;color:var(--yellow);margin-bottom:16px}
|
||
.section-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;line-height:1.2;margin-bottom:48px}
|
||
.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:48px}
|
||
.agent-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px;transition:border-color 0.2s,transform 0.2s}
|
||
.agent-card:hover{border-color:#ffffff30;transform:translateY(-4px)}
|
||
.agent-card-icon{font-size:48px;margin-bottom:16px;display:block}
|
||
.agent-card h3{font-size:20px;font-weight:900;margin-bottom:8px}.agent-card p{font-size:15px;color:#ffffffaa;line-height:1.6}
|
||
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;margin-top:12px}
|
||
.tag-blue{background:#4D96FF33;color:#4D96FF}.tag-green{background:#6BCB7733;color:#6BCB77}.tag-purple{background:#C77DFF33;color:#C77DFF}.tag-red{background:#FF6B6B33;color:#FF6B6B}
|
||
.stage-wrap{background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:40px;position:relative}
|
||
.stage{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:160px;position:relative}
|
||
.stage-agent{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
|
||
.stage-icon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.3s,box-shadow 0.3s}
|
||
.stage-icon.active{transform:scale(1.15);box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}
|
||
.stage-label{font-size:13px;font-weight:700;color:#ffffffcc}.stage-status{font-size:11px;color:#ffffff55;min-height:16px;text-align:center;max-width:80px}
|
||
.msg-bubble{position:absolute;top:50%;transform:translateY(-50%);background:var(--yellow);color:#1a1a2e;font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.3);pointer-events:none;opacity:0;z-index:10}
|
||
.msg-bubble.qc{background:var(--pink);color:#fff}
|
||
.arrow-line{flex:1;height:2px;background:#ffffff15;position:relative;min-width:30px}
|
||
.play-btn{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:14px 32px;font-family:inherit;font-size:17px;font-weight:900;cursor:pointer;margin-top:28px;transition:transform 0.15s;box-shadow:0 4px 20px rgba(255,217,61,0.3)}
|
||
.play-btn:hover{transform:translateY(-2px)}.play-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
|
||
.log-box{margin-top:20px;background:#00000030;border-radius:12px;padding:16px 20px;font-size:14px;color:#ffffffbb;min-height:48px;line-height:1.8;font-family:monospace}
|
||
.log-line{opacity:0;animation:fadeIn 0.4s forwards}.log-ok{color:var(--green)}.log-qc{color:var(--pink)}.log-time{color:var(--purple)}
|
||
.zeit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
|
||
.zeit-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px}
|
||
.zeit-bar-wrap{height:8px;background:#ffffff15;border-radius:99px;margin:16px 0 8px;overflow:hidden}
|
||
.zeit-bar{height:100%;border-radius:99px;transform:scaleX(0);transform-origin:left;animation:barGrow 1.5s ease-out forwards}
|
||
.zeit-bar-fast{background:var(--green);width:95%}.zeit-bar-normal{background:var(--blue);width:60%}.zeit-bar-slow{background:var(--purple);width:25%}
|
||
.qc-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
|
||
.qc-step{background:#ffffff0d;border:1px solid #ffffff15;border-radius:16px;padding:20px 24px;text-align:center;min-width:140px;transition:border-color 0.2s}
|
||
.qc-step:hover{border-color:var(--yellow)}.qc-step-icon{font-size:36px;margin-bottom:10px;display:block}.qc-step-title{font-size:15px;font-weight:700;margin-bottom:4px}.qc-step-desc{font-size:12px;color:#ffffffaa}
|
||
.qc-arrow{font-size:24px;color:#ffffff40;padding:0 8px;flex-shrink:0}
|
||
.score-demo{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
|
||
.score-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 20px;border-radius:14px;min-width:80px;font-weight:900}
|
||
.score-badge .num{font-size:28px;line-height:1}.score-badge .lbl{font-size:11px;opacity:0.8}
|
||
.score-fail{background:#FF6B6B22;border:2px solid var(--pink);color:var(--pink)}.score-ok{background:#FFD93D22;border:2px solid var(--yellow);color:var(--yellow)}.score-great{background:#6BCB7722;border:2px solid var(--green);color:var(--green)}
|
||
.final-section{text-align:center;padding:clamp(80px,10vw,140px) 20px}
|
||
.final-section h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:900;line-height:1.2;margin-bottom:20px}
|
||
.final-section p{font-size:18px;color:#ffffffaa;max-width:480px;margin:0 auto 36px;line-height:1.6}
|
||
.cta-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||
.cta-primary{background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:17px;font-weight:900;cursor:pointer;text-decoration:none;transition:transform 0.15s}
|
||
.cta-primary:hover{transform:translateY(-2px)}
|
||
.cta-secondary{background:transparent;color:#fff;border:2px solid #ffffff30;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;transition:border-color 0.2s,transform 0.15s}
|
||
.cta-secondary:hover{border-color:#ffffff60;transform:translateY(-2px)}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
|
||
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
||
@keyframes robotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
|
||
@keyframes barGrow{to{transform:scaleX(1)}}
|
||
@keyframes msgFly{0%{opacity:0;transform:translateY(-50%) translateX(0) scale(0.8)}15%{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-50%) translateX(var(--fly-dist)) scale(0.9)}}
|
||
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}50%{box-shadow:0 0 0 8px #FFD93D55,0 8px 30px rgba(0,0,0,0.4)}}
|
||
@keyframes scoreIn{from{opacity:0;transform:scale(0.5) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
|
||
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}
|
||
@media(max-width:600px){.stage{flex-direction:column;gap:20px}.arrow-line{width:2px;height:30px;min-width:unset}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="hero">
|
||
<div class="hero-eyebrow">🤖 AI机器人图解</div>
|
||
<h1>AI<span>智能体</span>如何<br>互相通信？</h1>
|
||
<p class="hero-lead">想象一个机器人团队——每个机器人都有自己的工作。他们互相发送消息来协同合作。这就是AI智能体的工作方式！</p>
|
||
<div class="hero-robots">
|
||
<div class="robot"><div class="robot-body r-martin">🧠</div><div class="robot-name">马丁</div><div class="robot-role">队长</div></div>
|
||
<div class="robot"><div class="robot-body r-bob">⚡</div><div class="robot-name">鲍勃</div><div class="robot-role">超级快速</div></div>
|
||
<div class="robot"><div class="robot-body r-diana">🐢</div><div class="robot-name">黛安娜</div><div class="robot-role">非常仔细</div></div>
|
||
<div class="robot"><div class="robot-body r-qc">🔍</div><div class="robot-name">质检员</div><div class="robot-role">质量控制</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<div class="section-label">团队成员</div>
|
||
<h2 class="section-title">每个机器人都有<br>自己的超能力</h2>
|
||
<div class="agent-grid">
|
||
<div class="agent-card"><span class="agent-card-icon">🧠</span><h3>马丁 — 队长</h3><p>马丁接收任务并分配工作。他等待结果并汇总一切。</p><span class="tag tag-blue">委派者</span></div>
|
||
<div class="agent-card"><span class="agent-card-icon">⚡</span><h3>鲍勃 — 闪电侠</h3><p>鲍勃工作超快。他立刻回复——就像在脑子里算简单数学题。</p><span class="tag tag-green">快速响应</span></div>
|
||
<div class="agent-card"><span class="agent-card-icon">🐢</span><h3>黛安娜 — 仔细派</h3><p>黛安娜需要更多时间，但做得非常仔细——就像写一篇完美的作文。</p><span class="tag tag-purple">慢速·仔细</span></div>
|
||
<div class="agent-card"><span class="agent-card-icon">🔍</span><h3>质检员 — 老师</h3><p>检查工作是否足够好。打分1到10分。分数太低？再来一次！</p><span class="tag tag-red">审查员·目标9/10</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="section-label">现场演示</div>
|
||
<h2 class="section-title">看他们如何<br>一起工作！</h2>
|
||
<div class="stage-wrap">
|
||
<div class="stage" id="stage">
|
||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-user">👤</div><div class="stage-label">你</div><div class="stage-status" id="ss-user">任务！</div></div>
|
||
<div class="arrow-line" id="line1" style="position:relative;"><div class="msg-bubble" id="msg1">📝 请做这个！</div></div>
|
||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-martin">🧠</div><div class="stage-label">马丁</div><div class="stage-status" id="ss-martin">等待中...</div></div>
|
||
<div class="arrow-line" id="line2" style="position:relative;"><div class="msg-bubble" id="msg2">📋 去处理这个！</div></div>
|
||
<div class="stage-agent"><div class="stage-icon r-bob" id="si-bob">⚡</div><div class="stage-label">鲍勃</div><div class="stage-status" id="ss-bob">准备好了</div></div>
|
||
<div class="arrow-line" id="line3" style="position:relative;"><div class="msg-bubble qc" id="msg3">🔍 这个好吗？</div></div>
|
||
<div class="stage-agent"><div class="stage-icon r-qc" id="si-qc">🔍</div><div class="stage-label">质检员</div><div class="stage-status" id="ss-qc">准备好了</div></div>
|
||
</div>
|
||
<div id="score-display" style="text-align:center;margin-top:24px;min-height:48px;"></div>
|
||
<div class="log-box" id="log">按下按钮，一起来看！👇</div>
|
||
<div style="text-align:center;"><button class="play-btn" id="play-btn" onclick="runDemo()">▶ 开始任务！</button></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="section-label">时间感知</div>
|
||
<h2 class="section-title">为什么每个机器人<br>感受时间不同</h2>
|
||
<p style="color:#ffffffaa;font-size:17px;max-width:580px;line-height:1.7;margin-bottom:40px;">你有没有这种感觉？玩游戏时间飞逝——等公交车时间却好慢。机器人也有同样的体验。研究人员把它叫做<strong style="color:var(--yellow)">本征时间（Eigenzeit）</strong>。</p>
|
||
<div class="zeit-cards">
|
||
<div class="zeit-card"><span class="zeit-emoji">⚡</span><div class="zeit-name" style="color:var(--green)">鲍勃 — 闪电速度</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-fast"></div></div><div class="zeit-rate" style="color:var(--green)">每秒97次操作</div><div class="zeit-desc" style="margin-top:8px">对鲍勃来说，一小时就像一分钟。他在如此短的时间内做了那么多！</div></div>
|
||
<div class="zeit-card"><span class="zeit-emoji">🧠</span><div class="zeit-name" style="color:var(--blue)">马丁 — 正常速度</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-normal"></div></div><div class="zeit-rate" style="color:var(--blue)">每秒2.6次操作</div><div class="zeit-desc" style="margin-top:8px">马丁协调一切。不快也不慢——刚刚好。</div></div>
|
||
<div class="zeit-card"><span class="zeit-emoji">🐢</span><div class="zeit-name" style="color:var(--purple)">黛安娜 — 仔细型</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-slow"></div></div><div class="zeit-rate" style="color:var(--purple)">每秒0.04次操作</div><div class="zeit-desc" style="margin-top:8px">黛安娜体验到拉伸的时间。每个任务对她来说都像一次长途旅行。</div></div>
|
||
</div>
|
||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 32px;margin-top:32px;">
|
||
<div style="font-size:22px;font-weight:900;margin-bottom:12px;">💡 这样记住它：</div>
|
||
<p style="font-size:16px;color:#ffffffbb;line-height:1.7;">玩电子游戏时，时间飞逝——你每分钟做很多动作。<br>等公交车时，时间爬行——你几乎什么都不做。<br><br>机器人有同样的现象。我们称之为<strong style="color:var(--yellow)">因果膨胀时钟（Causal Dilation Clock）</strong>——一个测量每个机器人真正活跃程度的时钟。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="section-label">质量系统</div>
|
||
<h2 class="section-title">双智能体<br>技巧 🔍</h2>
|
||
<p style="color:#ffffffaa;font-size:17px;max-width:560px;line-height:1.7;margin-bottom:40px;">好的工作总是要被检查的。在学校是老师，对我们的机器人来说，是<strong style="color:var(--pink)">质检员</strong>。</p>
|
||
<div class="qc-flow">
|
||
<div class="qc-step"><span class="qc-step-icon">📝</span><div class="qc-step-title">任务到达</div><div class="qc-step-desc">马丁接到工作</div></div>
|
||
<div class="qc-arrow">→</div>
|
||
<div class="qc-step"><span class="qc-step-icon">⚡</span><div class="qc-step-title">鲍勃工作</div><div class="qc-step-desc">快速完成任务</div></div>
|
||
<div class="qc-arrow">→</div>
|
||
<div class="qc-step" style="border-color:#FF6B6B55"><span class="qc-step-icon">🔍</span><div class="qc-step-title">质检检查</div><div class="qc-step-desc">10次中6次</div></div>
|
||
<div class="qc-arrow">→</div>
|
||
<div class="qc-step"><span class="qc-step-icon">🏆</span><div class="qc-step-title">结果</div><div class="qc-step-desc">够好？完成！</div></div>
|
||
</div>
|
||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:32px;text-align:center;">
|
||
<div style="font-size:18px;font-weight:700;margin-bottom:24px;color:#ffffffcc;">质检员给出的分数：</div>
|
||
<div class="score-demo">
|
||
<div class="score-badge score-fail"><span class="num">1-6</span><span class="lbl">😬 再来一次！</span></div>
|
||
<div class="score-badge score-ok"><span class="num">7-8</span><span class="lbl">😊 不错！</span></div>
|
||
<div class="score-badge score-great"><span class="num">9-10</span><span class="lbl">🌟 太棒了！</span></div>
|
||
</div>
|
||
<p style="margin-top:24px;color:#ffffffaa;font-size:15px;">低于7分 → 鲍勃必须再试！（最多再试2次）</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="final-section">
|
||
<h2>现在你知道<br>AI团队<span style="color:var(--yellow)">如何真正工作！</span></h2>
|
||
<p>智能体 · 委派 · 质量检查 · 本征时间 — 这不是魔法，这是聪明的团队合作！</p>
|
||
<div class="cta-group">
|
||
<a href="https://github.com/Jeuners/Time_Dilation_in_LLM_Agent_Systems" class="cta-primary">📄 阅读论文</a>
|
||
<a href="explainer-en.html" class="cta-secondary">🇬🇧 English</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const log=document.getElementById('log'),playBtn=document.getElementById('play-btn');let running=false;
|
||
function addLog(t,c='',d=0){return new Promise(r=>setTimeout(()=>{const e=document.createElement('div');e.className='log-line '+c;e.textContent=t;log.appendChild(e);log.scrollTop=log.scrollHeight;r()},d))}
|
||
function setActive(id,a=true){const e=document.getElementById(id);if(!e)return;a?(e.classList.add('active'),e.style.animation='pulse-glow 0.8s ease-in-out infinite'):(e.classList.remove('active'),e.style.animation='')}
|
||
function setStatus(id,t){const e=document.getElementById(id);if(e)e.textContent=t}
|
||
function flyMsg(id,lid){return new Promise(r=>{const b=document.getElementById(id),l=document.getElementById(lid);if(!b||!l){r();return}const d=l.offsetWidth;b.style.setProperty('--fly-dist',d+'px');b.style.left='0px';b.style.animation='none';b.offsetHeight;b.style.animation='msgFly 1.2s ease-in-out forwards';setTimeout(r,1300)})}
|
||
function showScore(s){const e=document.getElementById('score-display'),c=s>=9?'var(--green)':s>=7?'var(--yellow)':'var(--pink)',em=s>=9?'🌟':s>=7?'😊':'😬';e.innerHTML=`<div style="font-size:48px;animation:scoreIn 0.5s forwards;opacity:0">${em}</div><div style="font-size:22px;font-weight:900;color:${c};animation:scoreIn 0.5s 0.2s forwards;opacity:0">质检分数：${s}/10</div>`}
|
||
async function runDemo(){if(running)return;running=true;playBtn.disabled=true;log.innerHTML='';document.getElementById('score-display').innerHTML='';['si-user','si-martin','si-bob','si-qc'].forEach(id=>setActive(id,false));['ss-user','ss-martin','ss-bob','ss-qc'].forEach(id=>setStatus(id,'等待中...'));
|
||
const score=7+Math.floor(Math.random()*3),doQC=Math.random()<0.6;
|
||
setActive('si-user');setStatus('ss-user','任务！');await addLog('👤 你："请解释智能体如何工作！"');await flyMsg('msg1','line1');setActive('si-user',false);
|
||
setActive('si-martin');setStatus('ss-martin','分配中...');await addLog('🧠 马丁：我来分配任务...','' ,400);await new Promise(r=>setTimeout(r,600));
|
||
setStatus('ss-martin','→ 鲍勃');await flyMsg('msg2','line2');setActive('si-martin',false);
|
||
setActive('si-bob');setStatus('ss-bob','⚡ 工作中...');await addLog('⚡ 鲍勃：来了！（快速）','log-time',200);await new Promise(r=>setTimeout(r,1200));
|
||
setStatus('ss-bob','✅ 完成！');await addLog('⚡ 鲍勃：完成！"智能体是协同工作的机器人..."','log-ok',300);
|
||
if(doQC){await addLog('🔍 质检触发（60%概率）...','log-qc',600);setActive('si-bob',false);await flyMsg('msg3','line3');setActive('si-qc');setStatus('ss-qc','🔍 检查中...');await new Promise(r=>setTimeout(r,1500));setStatus('ss-qc',`✅ ${score}/10分`);await addLog(`🔍 质检员：${score}/10分 — ${score>=7?'通过！✅':'再来一次！❌'}`,'log-qc',200);showScore(score);setActive('si-qc',false);}
|
||
else{setActive('si-bob',false);await addLog('✓ 这次没有质检（40%概率）','',600);showScore(score);}
|
||
setActive('si-martin');setStatus('ss-martin','🏆 完成！');await addLog('🧠 马丁：任务完成！'+(doQC?`质检分数：${score}/10`:'直接交付。'),'log-ok',500);await new Promise(r=>setTimeout(r,400));setActive('si-martin',false);setStatus('ss-user','🎉 谢谢！');
|
||
running=false;playBtn.disabled=false;playBtn.textContent='▶ 再来一次！';}
|
||
const obs=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting)x.target.querySelectorAll('.zeit-bar').forEach(b=>b.style.animation='barGrow 1.5s ease-out forwards')})},{threshold:0.3});document.querySelectorAll('.zeit-cards').forEach(el=>obs.observe(el));
|
||
</script>
|
||
</body>
|
||
</html>
|