ACIL FM

Nama	Ukuran	Aksi
css	-	Open
.htaccess	647 B	View DL Edit
breadth.html	13 MB	View DL Edit
eslint.config.mjs	803 B	View DL Edit
guide_1.html	18.76 MB	View DL Edit
guide_market.html	18.76 MB	View DL Edit
guide_ranktop5.html	29.76 MB	View DL Edit
index.html	31.38 MB	View DL Edit
ls-bias.html	18.24 MB	View DL Edit
opsdeck-basic.html	7.11 MB	View DL Edit
opsdeck.html	4.96 MB	View DL Edit
rank_top5.html	24.79 MB	View DL Edit
risk.html	13.32 MB	View DL Edit
trade.html	13.87 MB	View DL Edit

Edit file: /home/benbot/public_html/monitor/opsdeck.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpsDeck — Shell</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      :root {
        --bg: #0b0f14;
        --panel: #0f1520;
        --line: #243041;
        --fg: #e6eef7;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family:
          system-ui,
          Segoe UI,
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
      }
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 16px;
      }
      .bar {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
        flex-wrap: wrap;
      }
      input,
      button {
        background: #121822;
        border: 1px solid var(--line);
        color: var(--fg);
        border-radius: 8px;
        padding: 8px;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 12px;
      }
      .card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px;
        min-height: 80px;
      }
      .muted {
        opacity: 0.7;
        font-size: 12px;
      }
      .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
      }
      .ok {
        background: #2ecc71;
      }
      .err {
        background: #e74c3c;
      }
      .warn {
        background: #f1c40f;
      }
      .idle {
        background: #7f8c8d;
      }
      pre {
        white-space: pre-wrap;
        font-family: ui-monospace, Consolas, monospace;
        font-size: 12px;
        line-height: 1.4;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="bar">
        <strong>OpsDeck • Shell</strong>
        <label
          >Server:
          <input id="base" value="http://127.0.0.1:8790" size="30" />
        </label>
        <button id="connectBtn">Connect</button>
        <span id="status" class="muted"
          ><span class="dot idle"></span>disconnected</span
        >
      </div>

<div class="grid">
        <div class="card" style="grid-column: span 4">
          <h3>Health</h3>
          <div id="health">—</div>
          <div class="muted" id="healthNote">/health polling…</div>
        </div>
        <div class="card" style="grid-column: span 8">
          <h3>Live Events</h3>
          <pre id="tape">(connect to start SSE stream)</pre>
        </div>
      </div>
    </div>

function setStatus(kind, text) {
        const el = $("#status");
        el.innerHTML = `<span class="dot ${kind}"></span>` + (text || kind);
      }

async function pollHealth(base) {
        try {
          const r = await fetch(base.replace(/\/$/, "") + "/health", {
            cache: "no-store",
          });
          if (!r.ok) throw new Error(r.status);
          const j = await r.json();
          $("#health").textContent = JSON.stringify(j);
          $("#healthNote").textContent = "health OK";
          setStatus("ok", "connected");
        } catch (e) {
          $("#healthNote").textContent = "health error: " + e;
          setStatus("err", "health error");
        }
      }

$("#connectBtn").onclick = () => {
        const base = $("#base").value.trim();
        pollHealth(base);
        connectSSE(base);
      };

// optional: try auto connect
      (function auto() {
        const base = $("#base").value.trim();
        pollHealth(base);
        connectSSE(base);
      })();
    </script>
  </body>
</html>

Batal