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
25 KiB
HTML
191 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hi">
|
|
<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&family=Noto+Sans+Devanagari: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:'Noto Sans Devanagari','Nunito',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.1em;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.3;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.25rem);color:#ffffffbb;max-width:560px;line-height:1.8;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.08em;color:var(--yellow);margin-bottom:16px}
|
|
.section-title{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:900;line-height:1.3;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:18px;font-weight:900;margin-bottom:8px;line-height:1.3}.agent-card p{font-size:14px;color:#ffffffaa;line-height:1.7}
|
|
.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:16px;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;line-height:1.3}.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.6rem,4vw,3rem);font-weight:900;line-height:1.3;margin-bottom:20px}
|
|
.final-section p{font-size:17px;color:#ffffffaa;max-width:480px;margin:0 auto 36px;line-height:1.7}
|
|
.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:16px;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:16px;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><span>AI एजेंट</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">QC जाँचकर्ता</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>QC जाँचकर्ता — शिक्षक</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">QC जाँच</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.8;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.6;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.6;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.6;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.8;">वीडियो गेम खेलते समय समय उड़ता है — तुम हर मिनट बहुत कुछ करते हो।<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.8;margin-bottom:40px;">अच्छे काम की हमेशा जाँच होती है। स्कूल में यह शिक्षक करते हैं। हमारे रोबोट के लिए यह <strong style="color:var(--pink)">QC जाँचकर्ता</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">QC जाँच</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;">QC जाँचकर्ता के अंक:</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">QC अंक: ${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('🔍 QC जाँच शुरू (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(`🔍 QC जाँचकर्ता: ${score}/10 — ${score>=7?'मंज़ूर! ✅':'फिर करो! ❌'}`,'log-qc',200);showScore(score);setActive('si-qc',false);}
|
|
else{setActive('si-bob',false);await addLog('✓ इस बार QC नहीं (40% मौका)','',600);showScore(score);}
|
|
setActive('si-martin');setStatus('ss-martin','🏆 हो गया!');await addLog('🧠 मार्टिन: मिशन पूरा! '+(doQC?`QC अंक: ${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>
|