Skip to content

Commit 2e4e289

Browse files
web3dev1337web3dev1337
authored
Merge pull request #829 from web3dev1337/fix/site-real-install-steps
feat: show real install steps in site terminal animation
2 parents da21ed3 + 13791cb commit 2e4e289

2 files changed

Lines changed: 49 additions & 54 deletions

File tree

‎site/index.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -138,14 +138,16 @@ <h2 class="section-title">Seamless Ecosystem.</h2>
138138
<div class="term-title">~ / agent-workspace</div>
139139
</div>
140140
<div class="term-body">
141-
<div class="line"><span class="prompt">❯</span> <span class="command typing-1">npm install -g agent-workspace</span></div>
142-
<div class="line hidden response-1">Fetching packages... [████████████████████] 100%</div>
143-
<div class="line hidden response-1">Successfully installed agent-workspace v2.0.0</div>
144-
<div class="line hidden cmd-2"><span class="prompt">❯</span> <span class="command typing-2">agent-workspace init</span></div>
145-
<div class="line hidden response-2 text-cyan">◆ Initializing workspace environments...</div>
146-
<div class="line hidden response-2 text-blue-deep">◆ Detecting local repositories... [4 found]</div>
147-
<div class="line hidden response-2 text-success">✔ Workspace ready. Access via UI.</div>
148-
<div class="line hidden cmd-3"><span class="prompt blink">_</span></div>
141+
<div class="line"><span class="prompt">❯</span> <span class="command typing-1">git clone https://github.com/web3dev1337/claude-orchestrator.git</span></div>
142+
<div class="line hidden response-1">Cloning into 'claude-orchestrator'...</div>
143+
<div class="line hidden response-1 text-success">done.</div>
144+
<div class="line hidden cmd-2"><span class="prompt">❯</span> <span class="command typing-2">cd claude-orchestrator && npm install</span></div>
145+
<div class="line hidden response-2">added 847 packages in 12s</div>
146+
<div class="line hidden cmd-3"><span class="prompt">❯</span> <span class="command typing-3">npm start</span></div>
147+
<div class="line hidden response-3 text-cyan">◆ Starting server on port 3000...</div>
148+
<div class="line hidden response-3 text-blue-deep">◆ Client ready at http://localhost:2080</div>
149+
<div class="line hidden response-3 text-success">✔ Agent Workspace is running.</div>
150+
<div class="line hidden cmd-4"><span class="prompt blink">_</span></div>
149151
</div>
150152
</div>
151153
</div>

‎site/script.js‎

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -68,54 +68,47 @@ document.addEventListener('DOMContentLoaded', () => {
6868
terminalObserver.observe(terminalFluid);
6969
}
7070

71-
function startTerminalSequence() {
72-
const type1 = document.querySelector('.typing-1');
73-
const text1 = type1.textContent;
74-
type1.textContent = '';
75-
76-
let charIndex = 0;
77-
const typeInterval = setInterval(() => {
78-
if (charIndex < text1.length) {
79-
type1.textContent += text1.charAt(charIndex);
80-
charIndex++;
81-
} else {
82-
clearInterval(typeInterval);
83-
setTimeout(() => {
84-
document.querySelectorAll('.response-1').forEach(el => el.classList.remove('hidden'));
85-
setTimeout(() => {
86-
document.querySelector('.cmd-2').classList.remove('hidden');
87-
typeSecondCommand();
88-
}, 600);
89-
}, 300);
90-
}
91-
}, 40);
71+
function typeCommand(el, speed) {
72+
return new Promise(resolve => {
73+
const text = el.textContent;
74+
el.textContent = '';
75+
let i = 0;
76+
const iv = setInterval(() => {
77+
if (i < text.length) {
78+
el.textContent += text.charAt(i++);
79+
} else {
80+
clearInterval(iv);
81+
resolve();
82+
}
83+
}, speed);
84+
});
9285
}
9386

94-
function typeSecondCommand() {
95-
const type2 = document.querySelector('.typing-2');
96-
const text2 = type2.textContent;
97-
type2.textContent = '';
98-
99-
let charIndex = 0;
100-
const typeInterval = setInterval(() => {
101-
if (charIndex < text2.length) {
102-
type2.textContent += text2.charAt(charIndex);
103-
charIndex++;
104-
} else {
105-
clearInterval(typeInterval);
106-
setTimeout(() => {
107-
const responses = document.querySelectorAll('.response-2');
108-
let delay = 0;
109-
responses.forEach(el => {
110-
setTimeout(() => el.classList.remove('hidden'), delay);
111-
delay += 400;
112-
});
113-
setTimeout(() => {
114-
document.querySelector('.cmd-3').classList.remove('hidden');
115-
}, delay + 200);
116-
}, 300);
117-
}
118-
}, 50);
87+
function showResponses(selector, stagger) {
88+
return new Promise(resolve => {
89+
const els = document.querySelectorAll(selector);
90+
let delay = 0;
91+
els.forEach(el => {
92+
setTimeout(() => el.classList.remove('hidden'), delay);
93+
delay += stagger;
94+
});
95+
setTimeout(resolve, delay + 200);
96+
});
97+
}
98+
99+
async function startTerminalSequence() {
100+
await typeCommand(document.querySelector('.typing-1'), 30);
101+
await showResponses('.response-1', 400);
102+
103+
document.querySelector('.cmd-2').classList.remove('hidden');
104+
await typeCommand(document.querySelector('.typing-2'), 35);
105+
await showResponses('.response-2', 300);
106+
107+
document.querySelector('.cmd-3').classList.remove('hidden');
108+
await typeCommand(document.querySelector('.typing-3'), 40);
109+
await showResponses('.response-3', 400);
110+
111+
document.querySelector('.cmd-4').classList.remove('hidden');
119112
}
120113

121114
// 5. Neural Network / Particle Canvas Background

0 commit comments

Comments
 (0)