System Monitor

Монитор системных ресурсов в стиле терминала — CPU, RAM, Network и Disk с анимированными прогресс барами и графиком нагрузки. Подходит для дашбордов и DevOps интерфейсов. Чистый HTML+CSS без JavaScript.

<div class="sysmon">

  <div class="sysmon-header">
    <div class="sysmon-title">> System Monitor_</div>
    <div class="sysmon-status">
      <span class="status-dot"></span>
      <span class="status-text">ONLINE</span>
    </div>
  </div>

  <div class="sysmon-grid">

    <div class="sysmon-card">
      <div class="sysmon-card-header">
        <span class="sysmon-card-label">CPU</span>
        <span class="sysmon-card-value cpu-val">73%</span>
      </div>
      <div class="progress-wrap">
        <div class="progress-bar cpu-bar" style="width:73%"></div>
      </div>
      <div class="sysmon-card-meta">
        <span>8 cores</span>
        <span>3.2 GHz</span>
      </div>
    </div>

    <div class="sysmon-card">
      <div class="sysmon-card-header">
        <span class="sysmon-card-label">RAM</span>
        <span class="sysmon-card-value ram-val">58%</span>
      </div>
      <div class="progress-wrap">
        <div class="progress-bar ram-bar" style="width:58%"></div>
      </div>
      <div class="sysmon-card-meta">
        <span>9.3 / 16 GB</span>
        <span>DDR4</span>
      </div>
    </div>

    <div class="sysmon-card">
      <div class="sysmon-card-header">
        <span class="sysmon-card-label">DISK</span>
        <span class="sysmon-card-value disk-val">41%</span>
      </div>
      <div class="progress-wrap">
        <div class="progress-bar disk-bar" style="width:41%"></div>
      </div>
      <div class="sysmon-card-meta">
        <span>205 / 512 GB</span>
        <span>SSD</span>
      </div>
    </div>

    <div class="sysmon-card">
      <div class="sysmon-card-header">
        <span class="sysmon-card-label">NET</span>
        <span class="sysmon-card-value net-val">12 MB/s</span>
      </div>
      <div class="progress-wrap">
        <div class="progress-bar net-bar" style="width:24%"></div>
      </div>
      <div class="sysmon-card-meta">
        <span>UP 2.1</span>
        <span>DOWN 9.9</span>
      </div>
    </div>

  </div>

  <!-- График CPU -->
  <div class="chart-section">
    <div class="chart-label">CPU Load History</div>
    <div class="cpu-chart">
      <div class="cpu-bar-h" style="height:45%"></div>
      <div class="cpu-bar-h" style="height:62%"></div>
      <div class="cpu-bar-h" style="height:38%"></div>
      <div class="cpu-bar-h" style="height:71%"></div>
      <div class="cpu-bar-h" style="height:55%"></div>
      <div class="cpu-bar-h" style="height:83%"></div>
      <div class="cpu-bar-h" style="height:67%"></div>
      <div class="cpu-bar-h" style="height:49%"></div>
      <div class="cpu-bar-h" style="height:74%"></div>
      <div class="cpu-bar-h" style="height:58%"></div>
      <div class="cpu-bar-h" style="height:91%"></div>
      <div class="cpu-bar-h" style="height:73%"></div>
      <div class="cpu-bar-h active" style="height:73%"></div>
    </div>
  </div>

  <!-- Процессы -->
  <div class="processes">
    <div class="proc-title">Top Processes</div>
    <div class="proc-row">
      <span class="proc-name">node</span>
      <span class="proc-cpu">32.1%</span>
      <span class="proc-ram">1.2 GB</span>
    </div>
    <div class="proc-row">
      <span class="proc-name">chrome</span>
      <span class="proc-cpu">18.4%</span>
      <span class="proc-ram">890 MB</span>
    </div>
    <div class="proc-row">
      <span class="proc-name">python</span>
      <span class="proc-cpu">12.7%</span>
      <span class="proc-ram">340 MB</span>
    </div>
    <div class="proc-row">
      <span class="proc-name">vscode</span>
      <span class="proc-cpu">8.2%</span>
      <span class="proc-ram">280 MB</span>
    </div>
  </div>

</div>

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

.sysmon {
  font-family: monospace;
  background: #080d1a;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #e2e8f0;
}

/* Шапка */
.sysmon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sysmon-title {
  font-size: 15px;
  font-weight: bold;
  color: #00ff9c;
}

.sysmon-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff9c;
  box-shadow: 0 0 8px #00ff9c;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.status-text {
  font-size: 10px;
  color: #00ff9c;
  letter-spacing: 0.1em;
}

/* Карточки */
.sysmon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sysmon-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sysmon-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sysmon-card-label {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
}

.sysmon-card-value {
  font-size: 14px;
  font-weight: bold;
}

.cpu-val  { color: #f87171; }
.ram-val  { color: #fbbf24; }
.disk-val { color: #22d3ee; }
.net-val  { color: #a78bfa; }

/* Прогресс бары */
.progress-wrap {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 2px;
  animation: load-in 1s ease-out forwards;
}

@keyframes load-in {
  from { width: 0% !important; }
}

.cpu-bar  { background: linear-gradient(90deg, #f8717144, #f87171); }
.ram-bar  { background: linear-gradient(90deg, #fbbf2444, #fbbf24); }
.disk-bar { background: linear-gradient(90deg, #22d3ee44, #22d3ee); }
.net-bar  { background: linear-gradient(90deg, #a78bfa44, #a78bfa); }

.sysmon-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}

/* График */
.chart-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px;
}

.chart-label {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cpu-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 70px;
}

.cpu-bar-h {
  flex: 1;
  background: rgba(248,113,113,0.2);
  border-radius: 3px 3px 0 0;
  border-top: 1px solid rgba(248,113,113,0.4);
  animation: load-in 1s ease-out forwards;
}

.cpu-bar-h.active {
  background: rgba(248,113,113,0.5);
  border-top-color: #f87171;
  box-shadow: 0 0 8px rgba(248,113,113,0.3);
}

/* Процессы */
.processes {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proc-title {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.proc-name {
  flex: 1;
  color: #00ff9c;
}

.proc-cpu {
  width: 45px;
  text-align: right;
  color: #f87171;
}

.proc-ram {
  width: 55px;
  text-align: right;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 400px) {
  .sysmon-grid { grid-template-columns: 1fr; }
}

👁 1