diff --git a/public/admin/index.html b/public/admin/index.html index e34bf42..6b1d4fe 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -25,6 +25,7 @@ .badge{font-size:.65rem;padding:2px 8px;border-radius:10px;text-transform:uppercase;font-weight:600;letter-spacing:.3px} .badge.online{background:rgba(74,222,128,.15);color:#86efac} .badge.offline{background:rgba(255,255,255,.06);color:#777} .badge.playing{background:rgba(96,165,250,.15);color:#93c5fd} .badge.sleeping{background:rgba(251,191,36,.15);color:#fcd34d} + .badge.auto{background:rgba(168,85,247,.15);color:#d8b4fe} .badge.manual{background:rgba(148,163,184,.15);color:#cbd5e1} .name-input{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#fff;font-size:.85rem;padding:3px 7px;width:130px} .name-input:focus{outline:none;border-color:#6366f1} .info-row{font-size:.72rem;color:#666;margin-bottom:.75rem;display:flex;gap:1rem;flex-wrap:wrap} @@ -43,6 +44,8 @@ select:focus{outline:none;border-color:#6366f1} option{background:#1a1a2e;color:#e0e0e0} input[type=range]{width:110px;accent-color:#6366f1} + input[type=time]{padding:4px 8px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(255,255,255,.05);color:#ddd;font-size:.78rem} + input[type=time]:focus{outline:none;border-color:#6366f1} .rval{font-size:.78rem;color:#999;min-width:28px} .tgl{position:relative;width:36px;height:20px;cursor:pointer}.tgl input{display:none} .tgl-s{position:absolute;inset:0;background:rgba(255,255,255,.08);border-radius:10px;transition:.2s} @@ -60,7 +63,7 @@ .api-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:1rem;margin-bottom:.6rem} .api-card h3{font-size:.85rem;font-weight:500;color:#a5b4fc;margin-bottom:.4rem} .mtd{display:inline-block;font-size:.65rem;font-weight:700;padding:1px 5px;border-radius:3px;margin-right:5px} - .mtd.get{background:rgba(34,197,94,.18);color:#86efac}.mtd.post{background:rgba(59,130,246,.18);color:#93c5fd}.mtd.del{background:rgba(239,68,68,.18);color:#fca5a5} + .mtd.get{background:rgba(34,197,94,.18);color:#86efac}.mtd.post{background:rgba(59,130,246,.18);color:#93c5fd}.mtd.del{background:rgba(239,68,68,.18);color:#fca5a5}.mtd.put{background:rgba(234,179,8,.18);color:#fde68a} .ep{font-family:monospace;font-size:.82rem;color:#bbb} .api-card p{font-size:.75rem;color:#777;margin:.3rem 0} pre{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);border-radius:7px;padding:8px 10px;font-size:.72rem;color:#bbb;overflow-x:auto;margin-top:.4rem;white-space:pre-wrap;word-break:break-all;position:relative} @@ -78,6 +81,18 @@ .input-row input{padding:6px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#ddd;font-size:.82rem;width:100%} .input-row input:focus{outline:none;border-color:#6366f1} .input-row .field{flex:1;min-width:140px} + /* Global settings panel */ + .settings-panel{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.2);border-radius:12px;padding:1.25rem;margin-bottom:1rem} + .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem} + .settings-block h3{font-size:.82rem;font-weight:600;color:#a5b4fc;text-transform:uppercase;letter-spacing:.4px;margin-bottom:.6rem} + .srow{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;flex-wrap:wrap} + .srow .clbl{min-width:80px} + .save-bar{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06)} + .save-msg{font-size:.78rem;color:#86efac;opacity:0;transition:opacity .3s}.save-msg.show{opacity:1} + .btn.save{background:rgba(99,102,241,.25);border-color:rgba(99,102,241,.5);color:#c7d2fe;font-weight:500;padding:7px 18px} + .btn.save:hover{background:rgba(99,102,241,.4)} + .sleep-fields{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} + .hint{font-size:.68rem;color:#666;margin-top:.3rem;line-height:1.4}
@@ -89,13 +104,54 @@ -Open Frambe on a tablet or screen to see it here
Open Frambe on a tablet or screen to see it here