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
23 KiB
HTML
191 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Как ИИ-роботы общаются друг с другом?</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','Arial',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.15em;color:var(--yellow);margin-bottom:20px;opacity:0;animation:fadeUp 0.6s 0.2s forwards}
|
||
.hero h1{font-size:clamp(1.8rem,5vw,4rem);font-weight:900;line-height:1.12;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:560px;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.15em;color:var(--yellow);margin-bottom:16px}
|
||
.section-title{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:900;line-height:1.15;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:19px;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:11px;font-weight:700;padding:6px 10px;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:14px;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(1.8rem,4vw,3.2rem);font-weight:900;line-height:1.2;margin-bottom:20px}
|
||
.final-section p{font-size:17px;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">🤖 ИИ-роботы объясняет</div>
|
||
<h1>Как <span>ИИ-агенты</span><br>общаются друг с другом?</h1>
|
||
<p class="hero-lead">Представь команду роботов — у каждого своя работа. Они отправляют друг другу сообщения, чтобы работать вместе. Именно так работают ИИ-агенты!</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 style="font-size:36px;margin-bottom:12px;display:block">⚡</span><div style="font-size:18px;font-weight:900;color:var(--green)">Боб — Молниеносный</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-fast"></div></div><div style="font-size:22px;font-weight:900;color:var(--green);margin-top:8px">97 действий/сек</div><div style="font-size:14px;color:#ffffffaa;line-height:1.5;margin-top:8px">Для Боба час — как минута. Он делает столько всего за так мало времени!</div></div>
|
||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">🧠</span><div style="font-size:18px;font-weight:900;color:var(--blue)">Мартин — Нормальный</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-normal"></div></div><div style="font-size:22px;font-weight:900;color:var(--blue);margin-top:8px">2.6 действий/сек</div><div style="font-size:14px;color:#ffffffaa;line-height:1.5;margin-top:8px">Мартин координирует всё. Не слишком быстро, не слишком медленно — в самый раз.</div></div>
|
||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">🐢</span><div style="font-size:18px;font-weight:900;color:var(--purple)">Диана — Тщательная</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-slow"></div></div><div style="font-size:22px;font-weight:900;color:var(--purple);margin-top:8px">0.04 действий/сек</div><div style="font-size:14px;color:#ffffffaa;line-height:1.5;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">6 раз из 10</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>как ИИ-команды <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>
|