seo/control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename status sections and simplify fan mode UI

Browse Source
This commit is contained in:
seo
2026-06-07 06:18:59 +09:00
parent 50494844b0
commit a68d75e745
1 changed files with 7 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.php
+7 -10
View File
@@ -97,7 +97,7 @@ a{color:inherit;text-decoration:none}
.stack{display:grid;gap:18px}.card{background:var(--card);border:1px solid rgba(84,101,128,.62);border-radius:22px;padding:18px;box-shadow:var(--shadow);min-width:0}.card h2{margin:0 0 16px;font-size:18px;font-weight:500}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.stat{background:var(--card2);border-radius:16px;padding:14px}.stat.featured{grid-column:1/-1;min-height:112px;display:flex;flex-direction:column;justify-content:center}.stat.featured .stat-value{font-size:36px}.stat-label{color:var(--sub);font-size:13px;margin-bottom:8px}.stat-value{font-size:24px;font-weight:500;word-break:break-word}
.row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-bottom:12px}.small{color:var(--sub);font-size:13px}.select{width:130px;height:42px;border-radius:12px;border:1px solid var(--line);background:#11151d;color:#fff;padding:0 12px}.mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mode-options label{display:block;min-width:0}.mode-options input{position:absolute;opacity:0;pointer-events:none}.mode-options span{display:grid;place-items:center;min-height:42px;border:1px solid var(--line);border-radius:12px;background:#11151d;color:var(--sub);cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.mode-options input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}.mode-options input[value="off"]:checked+span,.mode-options input[value="disabled"]:checked+span{background:var(--red);border-color:var(--red)}.mode-options input:focus-visible+span{outline:2px solid rgba(59,130,246,.65);outline-offset:2px}
.control-row{align-items:center}.slider-value{width:62px;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.slider-value{width:62px;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.slider-wrap{display:flex;gap:12px;align-items:center}.slider-wrap[hidden]{display:none}.slider{width:100%;accent-color:var(--blue)}
.select:focus,.slider:focus{outline:2px solid rgba(59,130,246,.65);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed}
@@ -143,20 +143,17 @@ a{color:inherit;text-decoration:none}
<main class="layout">
<section class="stack">
<div class="card">
<h2>Fan Control</h2>
<h2>Fan Status</h2>
<div class="stat-grid">
<div class="stat featured"><div class="stat-label">CPU Temp</div><div class="stat-value" id="tempValue">-</div></div>
<div class="stat"><div class="stat-label">Fan RPM</div><div class="stat-value" id="fanRpm">-</div></div>
<div class="stat"><div class="stat-label">PWM %</div><div class="stat-value" id="fanPercent">-</div></div>
</div>
<div style="height:18px"></div>
<div class="row control-row">
<div class="small">Mode</div>
<div class="mode-options" id="fanModeOptions" role="radiogroup" aria-label="Fan mode">
<label><input type="radio" name="fanModeOption" value="auto" checked><span>auto</span></label>
<label><input type="radio" name="fanModeOption" value="manual"><span>manual</span></label>
<label><input type="radio" name="fanModeOption" value="off"><span>off</span></label>
</div>
<div class="mode-options" id="fanModeOptions" role="radiogroup" aria-label="Fan mode">
<label><input type="radio" name="fanModeOption" value="auto" checked><span>auto</span></label>
<label><input type="radio" name="fanModeOption" value="manual"><span>manual</span></label>
<label><input type="radio" name="fanModeOption" value="off"><span>off</span></label>
</div>
<div class="slider-wrap" id="fanSliderWrap" hidden>
<input type="range" min="0" max="255" value="120" class="slider" id="fanSlider">
@@ -165,7 +162,7 @@ a{color:inherit;text-decoration:none}
</div>
<div class="card">
<h2>WiFi Control</h2>
<h2>WiFi Status</h2>
<div class="stat-grid">
<div class="stat"><div class="stat-label">2.4G Clients</div><div class="stat-value" id="wifi24">-</div></div>
<div class="stat"><div class="stat-label">5G Clients</div><div class="stat-value" id="wifi5">-</div></div>