new layout test
This commit is contained in:
1 parent
cbcec71e77
commit
27842eb786
3 files changed
+105
-70
No files matched your search
+41
-31
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user