diff --git a/cmd/server/templates/index.html b/cmd/server/templates/index.html index b16878c..7038d4f 100644 --- a/cmd/server/templates/index.html +++ b/cmd/server/templates/index.html @@ -395,8 +395,8 @@ display: grid; grid-template-columns:repeat(auto-fill, minmax(760px, 1fr)); align-items: start; - gap: 22px; - padding: 24px 28px 48px + gap: 14px; + padding: 16px 20px 36px } /* ═══ Card ═══ */ @@ -437,22 +437,22 @@ } .card-hd { - padding: 16px 20px 0; + padding: 8px 12px 0; display: flex; align-items: center; justify-content: space-between; - gap: 10px + gap: 6px } .card-id { display: flex; align-items: center; - gap: 8px; + gap: 6px; min-width: 0 } .card-id h3 { - font-size: 16px; + font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; @@ -460,25 +460,25 @@ } .card-tm { - font-size: 11px; + font-size: 9px; color: var(--dim); font-family: var(--mono); flex-shrink: 0 } .card-sub { - padding: 2px 20px 0; - font-size: 12px; + padding: 1px 12px 0; + font-size: 9px; color: var(--dim) } .badge { - font-size: 9px; + font-size: 7px; font-weight: 700; - letter-spacing: 1.2px; + letter-spacing: .8px; text-transform: uppercase; - padding: 3px 9px; - border-radius: 16px; + padding: 2px 6px; + border-radius: 10px; flex-shrink: 0; transition: background .3s, color .3s } @@ -498,7 +498,7 @@ display: flex; flex-wrap: wrap; gap: 0; - padding: 12px 0 0 + padding: 5px 0 0 } .card-col { @@ -506,8 +506,8 @@ min-width: 0; display: flex; flex-direction: column; - gap: var(--gap); - padding: 0 20px 18px + gap: 3px; + padding: 0 12px 8px } .card-left { @@ -529,17 +529,17 @@ /* ═══ Section ═══ */ .sec { background: var(--sec); - border-radius: var(--sec-r); - padding: var(--sec-pad) + border-radius: 6px; + padding: 6px 10px } .sec-tt { - font-size: 10px; + font-size: 8px; font-weight: 600; - letter-spacing: 1.5px; + letter-spacing: .8px; text-transform: uppercase; color: var(--dim); - margin-bottom: 10px + margin-bottom: 3px } .sec-tt .hl { @@ -555,49 +555,49 @@ .sr .sl { color: var(--dim); - font-size: 12px; + font-size: 9px; flex-shrink: 0 } .sr .sv { font-family: var(--mono); - font-size: 12px; + font-size: 9px; font-weight: 500 } .bar { - height: 12px; + height: 5px; background: var(--dim-bar); - border-radius: 6px; + border-radius: 3px; overflow: hidden } .bar .bf { height: 100%; - border-radius: 6px; + border-radius: 3px; transition: width .5s ease; min-width: 2px } .bar.mini { - height: 7px; - border-radius: 4px + height: 3px; + border-radius: 2px } .bar.mini .bf { - border-radius: 4px + border-radius: 2px } /* ═══ CPU ═══ */ .cpu-top { display: flex; - gap: 14px; + gap: 10px; align-items: center } .gauge { - width: 76px; - height: 76px; + width: 44px; + height: 44px; flex-shrink: 0 } @@ -619,15 +619,15 @@ .g-val { font-family: var(--mono); - font-size: 16px; + font-size: 11px; font-weight: 700; fill: var(--text) } .g-lbl { - font-size: 7px; + font-size: 5px; fill: var(--dim); - letter-spacing: 1px + letter-spacing: .6px } .cpu-inf { @@ -639,17 +639,17 @@ .cores { display: flex; - gap: 2px; + gap: 1px; flex-wrap: wrap; - margin-top: 6px + margin-top: 4px } .cbar { flex: 1; - min-width: 8px; - height: 20px; + min-width: 4px; + height: 8px; background: var(--dim-bar); - border-radius: 2px; + border-radius: 1px; position: relative; overflow: hidden } @@ -668,12 +668,12 @@ display: flex; justify-content: space-between; align-items: baseline; - margin-bottom: 6px + margin-bottom: 3px } .mem-hd .mp { font-family: var(--mono); - font-size: 16px; + font-size: 12px; font-weight: 700 } @@ -685,24 +685,24 @@ .gpu-table { width: 100%; border-collapse: collapse; - font-size: 11px; + font-size: 8px; font-family: var(--mono) } .gpu-table th { text-align: left; - font-size: 9px; + font-size: 7px; font-weight: 600; - letter-spacing: .8px; + letter-spacing: .4px; text-transform: uppercase; color: var(--dim); - padding: 6px 8px; + padding: 2px 4px; border-bottom: 1px solid var(--border); white-space: nowrap } .gpu-table td { - padding: 7px 8px; + padding: 2px 4px; border-bottom: 1px solid rgba(30, 37, 58, .5); white-space: nowrap } @@ -729,29 +729,29 @@ .gpu-vram-cell { display: flex; flex-direction: column; - gap: 3px; - min-width: 80px + gap: 2px; + min-width: 60px } /* ═══ Mining ═══ */ .m-status { display: flex; align-items: center; - gap: 8px; - font-size: 12px; - margin-bottom: 10px + gap: 6px; + font-size: 10px; + margin-bottom: 6px } .m-agent { color: var(--dim); - font-size: 11px; + font-size: 9px; font-family: var(--mono); margin-left: auto } .m-country { color: var(--dim); - font-size: 11px; + font-size: 9px; font-family: var(--mono); margin-left: auto } @@ -759,8 +759,8 @@ .m-hr-row { display: flex; align-items: center; - gap: 8px; - margin-bottom: 6px + gap: 6px; + margin-bottom: 4px } .m-hr-row:last-of-type { @@ -768,19 +768,19 @@ } .m-hr-lbl { - width: 26px; + width: 22px; text-align: right; font-family: var(--mono); - font-size: 10px; + font-size: 8px; color: var(--dim); flex-shrink: 0 } .m-hr-bar { flex: 1; - height: 8px; + height: 6px; background: var(--dim-bar); - border-radius: 4px; + border-radius: 3px; overflow: hidden } @@ -791,10 +791,10 @@ } .m-hr-val { - min-width: 86px; + min-width: 70px; text-align: right; font-family: var(--mono); - font-size: 11px; + font-size: 9px; font-weight: 500; flex-shrink: 0 } @@ -802,9 +802,9 @@ .m-shares { display: flex; justify-content: space-between; - margin-top: 10px; + margin-top: 6px; font-family: var(--mono); - font-size: 11px + font-size: 9px } .m-sh.valid { @@ -821,29 +821,29 @@ .m-chart { background: rgba(0, 0, 0, .15); - border-radius: 8px; - padding: 10px 12px; - margin-top: 10px; + border-radius: 5px; + padding: 6px 8px; + margin-top: 6px; overflow: hidden } .chart-lbl { - font-size: 10px; + font-size: 8px; color: var(--dim); font-family: var(--mono); - margin-bottom: 6px + margin-bottom: 4px } .chart-empty { color: var(--dim); - font-size: 11px; + font-size: 9px; text-align: center; - padding: 20px 0 + padding: 14px 0 } /* ═══ Misc ═══ */ .hw-status { - padding: 10px 16px + padding: 6px 10px } .hw-status-row { @@ -879,17 +879,17 @@ .off-actions { display: flex; justify-content: flex-end; - padding-top: 2px + padding-top: 0 } .btn-del { - padding: 5px 14px; + padding: 2px 8px; border: 1px solid var(--border); - border-radius: 7px; + border-radius: 4px; background: 0; color: var(--dim); font-family: var(--font); - font-size: 11px; + font-size: 9px; cursor: pointer; transition: all .2s } @@ -1408,18 +1408,18 @@ var h = '
| # | \u578B\u53F7 | \u8D1F\u8F7D | \u6E29\u5EA6 | \u529F\u8017 | \u6838\u5FC3 | \u663E\u5B58 | \u663E\u5B58\u7528\u91CF | \u98CE\u6247 | ' + + '\u7F16\u53F7 | \u8D1F\u8F7D | \u6E29\u5EA6 | \u529F\u8017 | \u6838\u5FC3 | \u663E\u5B58 | \u7528\u91CF | \u98CE\u6247 | ' + '
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ' + (i + 1) + ' | ' - + '' + esc(g.name || 'N/A') + ' | ' + + 'GPU' + (i + 1) + ' | ' + '' + gl.toFixed(0) + '% | ' + '' + tT(tmp > 0 ? tmp : null) + ' | ' + '' + Math.round(pwr) + ' W | ' @@ -1436,7 +1435,7 @@ + '' + Math.round(mc) + ' MHz | '; if (vt > 0) { var vp = vu / vt * 100; - h += '' + (vu / 1024).toFixed(1) + '/' + (vt / 1024).toFixed(1) + 'G'
+ h += ' | ';
} else {
h += '' + (vu / 1024).toFixed(1) + '/' + (vt / 1024).toFixed(0) + 'G'
+ ' \u2014 | ';
@@ -1481,7 +1480,7 @@
h += hrBar('30m', m.hashrate_30m || 0, maxHr) + hrBar('3h', m.hashrate_3h || 0, maxHr) + hrBar('24h', m.hashrate_24h || 0, maxHr);
/* 时间信息 */
- h += '';
+ h += ' ';
h += '\u6D3B\u8DC3 ' + fmtMsTs(m.last_active) + '';
h += '\u5F00\u59CB ' + fmtMsTs(m.opened_at) + '';
if (m.last_active > 0 && m.opened_at > 0) {
@@ -1522,7 +1521,7 @@
/* ═══ SVG Chart ═══ */
function buildChart(hist) {
if (!hist || hist.length < 2) return ' 数据采集中 (' + ((hist && hist.length) || 0) + '/2)... ';
- var W = 420, H = 100, pad = {t: 14, b: 16, l: 50, r: 10}, cW = W - pad.l - pad.r, cH = H - pad.t - pad.b;
+ var W = 420, H = 70, pad = {t: 10, b: 12, l: 44, r: 8}, cW = W - pad.l - pad.r, cH = H - pad.t - pad.b;
var vals = [], i;
for (i = 0; i < hist.length; i++) vals.push(hist[i].v);
var lo = vals[0], hi = vals[0];
@@ -1559,10 +1558,10 @@
svg += ' |