Adjust typing animation and command display spacing

Refactor HTML structure for command input to use a single inline container with `white-space: pre` to precisely control spacing, and adjust JavaScript to add a trailing space to the typed text and increase the pause before the enter key press in the auto-type animation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6def8112-39d2-4641-b93b-f39108179f33
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3f816ee5-1289-41ac-aa73-2bd1494876d3
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/42ae33dd-8759-4196-85a5-434465c72ece/6def8112-39d2-4641-b93b-f39108179f33/roUqm0y
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
2026-04-24 03:55:18 +00:00
parent 4d0c742b02
commit 8b307b42b3
3 changed files with 19 additions and 16 deletions

View File

@@ -14,7 +14,7 @@
<main class="stage">
<div class="command-box" id="commandBox">
<span class="dollar">$</span><span class="typed" id="typed"></span><span class="prompt-space" aria-hidden="true"> </span><span class="user-input" id="userInput"></span><span class="caret" id="caret" aria-hidden="true"></span>
<span class="line"><span class="dollar">$ </span><span class="typed" id="typed"></span><span class="user-input" id="userInput"></span><span class="caret" id="caret" aria-hidden="true"></span></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" />