Terminal Console

Имитация терминала с печатающимися командами и ответами системы. Анимированный курсор, цветной вывод, история команд. Подходит для портфолио, лендингов и hero-секций. Чистый HTML+CSS без JavaScript.

<div class="terminal">

  <div class="terminal-header">
    <div class="terminal-dots">
      <span class="tdot red"></span>
      <span class="tdot yellow"></span>
      <span class="tdot green"></span>
    </div>
    <div class="terminal-title">bash — 80x24</div>
    <div class="terminal-close">&#x2715;</div>
  </div>

  <div class="terminal-body">

    <div class="terminal-line">
      <span class="prompt">user@snippethub:~$</span>
      <span class="cmd type-1"> whoami</span>
    </div>
    <div class="terminal-output out-1">
      <span class="out-green">snippethub_admin</span>
    </div>

    <div class="terminal-line line-2">
      <span class="prompt">user@snippethub:~$</span>
      <span class="cmd type-2"> ls -la</span>
    </div>
    <div class="terminal-output out-2">
      <span class="out-blue">drwxr-xr-x</span> <span class="out-white">snippets/</span><br>
      <span class="out-blue">drwxr-xr-x</span> <span class="out-white">html-css/</span><br>
      <span class="out-blue">drwxr-xr-x</span> <span class="out-white">php/</span><br>
      <span class="out-blue">drwxr-xr-x</span> <span class="out-white">apps/</span><br>
      <span class="out-green">-rw-r--r--</span> <span class="out-white">index.php</span>
    </div>

    <div class="terminal-line line-3">
      <span class="prompt">user@snippethub:~$</span>
      <span class="cmd type-3"> cat status.txt</span>
    </div>
    <div class="terminal-output out-3">
      <span class="out-yellow">System:</span> <span class="out-green">ONLINE</span><br>
      <span class="out-yellow">Snippets:</span> <span class="out-white">142</span><br>
      <span class="out-yellow">Users:</span> <span class="out-white">1,024</span><br>
      <span class="out-yellow">Uptime:</span> <span class="out-green">99.9%</span>
    </div>

    <div class="terminal-line line-4">
      <span class="prompt">user@snippethub:~$</span>
      <span class="cursor-line">
        <span class="cmd type-4"> npm run deploy</span>
        <span class="cursor"></span>
      </span>
    </div>
    <div class="terminal-output out-4">
      <span class="out-green">Deploying...</span><br>
      <span class="out-white">Build successful</span><br>
      <span class="out-green">Done in 2.4s</span>
    </div>

    <div class="terminal-line line-5">
      <span class="prompt">user@snippethub:~$</span>
      <span class="cursor"></span>
    </div>

  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.terminal {
  font-family: 'Courier New', monospace;
  background: #0d1117;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  max-width: 560px;
}

/* Шапка */
.terminal-header {
  background: #161b22;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.tdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.tdot.red    { background: #ff5f57; }
.tdot.yellow { background: #febc2e; }
.tdot.green  { background: #28c840; }

.terminal-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

.terminal-close {
  font-size: 12px;
  color: rgba(255,255,255,0.2);
}

/* Тело */
.terminal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 320px;
}

/* Строки */
.terminal-line {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fade-in 0.3s ease forwards;
}

.terminal-line.line-2 { animation-delay: 1.2s; }
.terminal-line.line-3 { animation-delay: 2.8s; }
.terminal-line.line-4 { animation-delay: 4.4s; }
.terminal-line.line-5 { animation-delay: 6.2s; }

@keyframes fade-in {
  to { opacity: 1; }
}

.prompt {
  color: #00ff9c;
  font-size: 13px;
  white-space: nowrap;
}

.cursor-line {
  display: flex;
  align-items: center;
}

/* Команды с анимацией печати */
.cmd {
  color: #e2e8f0;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing 0.6s steps(20) forwards;
}

.type-1 { animation-delay: 0.3s; }
.type-2 { animation-delay: 1.5s; }
.type-3 { animation-delay: 3.1s; }
.type-4 { animation-delay: 4.7s; }

@keyframes typing {
  to { width: 100%; }
}

/* Вывод */
.terminal-output {
  padding: 4px 0 8px 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0;
  animation: fade-in 0.3s ease forwards;
}

.out-1 { animation-delay: 1s; }
.out-2 { animation-delay: 2.6s; }
.out-3 { animation-delay: 4.2s; }
.out-4 { animation-delay: 6s; }

.out-green  { color: #00ff9c; }
.out-blue   { color: #60a5fa; }
.out-yellow { color: #fbbf24; }
.out-white  { color: #e2e8f0; }
.out-red    { color: #f87171; }

/* Курсор */
.cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #00ff9c;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink-cursor 1s

👁 2