new layout test

This commit is contained in:
esef committed 2026-07-12 19:06:58 +03:00
1 parent cbcec71e77
commit 27842eb786
3 files changed
+105 -70

No files matched your search

+41 -31
View File
@@ -115,50 +115,60 @@
</header>
<div class="dash-grid">
<!-- Uptime -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">⏱️</div>
<span class="card-label">System Uptime</span>
</div>
<!-- Row 1: 3 boxes -->
<div class="dash-card span2">
<div class="card-top"><span class="card-label">Uptime</span></div>
<p class="card-value" id="dash-uptime">—</p>
<span class="card-detail">since last boot</span>
</div>
<div class="dash-card span2">
<div class="card-top"><span class="card-label">Disk</span></div>
<p class="card-value" id="dash-disk-val">—</p>
<div class="card-bar-wrap"><div class="card-bar-fill disk" id="dash-disk-bar" style="width:0%"></div></div>
<span class="card-detail" id="dash-disk-detail"></span>
</div>
<div class="dash-card span2">
<div class="card-top"><span class="card-label">Load Average</span></div>
<p class="card-value" id="dash-load">—</p>
<span class="card-detail">1m / 5m / 15m</span>
</div>
<!-- CPU -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">⚡</div>
<span class="card-label">CPU</span>
</div>
<!-- Row 2: 3 boxes -->
<div class="dash-card span2">
<div class="card-top"><span class="card-label">Network</span></div>
<p class="card-value" id="dash-net">—</p>
<span class="card-detail" id="dash-net-detail"></span>
</div>
<div class="dash-card span2">
<div class="card-top"><span class="card-label">Processes</span></div>
<p class="card-value" id="dash-procs">—</p>
<span class="card-detail">running</span>
</div>
<div class="dash-card span2">
<div class="card-top"><span class="card-label">Swap</span></div>
<p class="card-value" id="dash-swap-val">—</p>
<div class="card-bar-wrap"><div class="card-bar-fill swap" id="dash-swap-bar" style="width:0%"></div></div>
<span class="card-detail" id="dash-swap-detail"></span>
</div>
<!-- Row 3: 2 boxes stretched -->
<div class="dash-card span3">
<div class="card-top"><span class="card-label">CPU</span></div>
<p class="card-value" id="dash-cpu-val">—</p>
<div class="card-bar-wrap"><div class="card-bar-fill cpu" id="dash-cpu-bar" style="width:0%"></div></div>
</div>
<!-- RAM -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">💾</div>
<span class="card-label">Memory</span>
</div>
<div class="dash-card span3">
<div class="card-top"><span class="card-label">Memory</span></div>
<p class="card-value" id="dash-ram-val">—</p>
<div class="card-bar-wrap"><div class="card-bar-fill ram" id="dash-ram-bar" style="width:0%"></div></div>
<span class="card-detail" id="dash-ram-detail"></span>
</div>
<!-- Disk -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">💿</div>
<span class="card-label">Disk</span>
</div>
<p class="card-value" id="dash-disk-val">—</p>
<div class="card-bar-wrap"><div class="card-bar-fill disk" id="dash-disk-bar" style="width:0%"></div></div>
<span class="card-detail" id="dash-disk-detail"></span>
<!-- Row 4: full width -->
<div class="dash-card span6">
<div class="card-top"><span class="card-label">System Info</span></div>
<pre class="card-fetch" id="dash-fetch">—</pre>
</div>
</div>
<p class="dash-footer">synced every 10s</p>
</section>
<script src="js/gallery.js" defer></script>