KeshavAnandCode/terminal-portfolio-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update command line interface with interactive typing and visual feedback

Browse Source 
Refactors the command line interface to include an interactive SSH command input with real-time visual feedback, dynamic button icons, and animated responses to user commands, including navigation to documentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6def8112-39d2-4641-b93b-f39108179f33
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 49353dc6-fccb-41d3-8b94-6617238c72ba
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/42ae33dd-8759-4196-85a5-434465c72ece/6def8112-39d2-4641-b93b-f39108179f33/tF7dS0e
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
2026-04-24 03:48:17 +00:00
parent 9c878fb1d0
commit ac056ef7fb
3 changed files with 289 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@@ -13,18 +13,19 @@
<canvas id="field" aria-hidden="true"></canvas>
<main class="stage">
<div class="command-box" id="commandBox" role="button" tabindex="0" aria-label="Copy ssh command">
<span class="dollar">$</span><span class="typed" id="typed"></span><span class="caret" id="caret">&#9608;</span>
<button class="copy-btn" id="copyBtn" aria-label="Copy to clipboard">
<svg id="copyIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
<div class="command-box" id="commandBox">
<span class="dollar">$</span><span class="typed" id="typed"></span><span class="user-input" id="userInput"></span><span class="caret" id="caret">&#9608;</span>
<button class="action-btn" id="actionBtn" aria-label="Copy to clipboard">
<svg id="actionIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="iconPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
</div>
<a href="/docs.html" class="docs-hint" id="docsLink">how it works</a>
</main>
<a href="/docs.html" class="help-flag" id="helpFlag" aria-label="how it works">-h</a>
<span class="byline" id="byline">// vibe coded to present human code</span>
<span class="byline">// vibe coded to present human code</span>
<script type="module" src="/src/main.ts"></script>
</body>