host-services / static / index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Host services</title>
  <link rel="stylesheet" href="/app.css">
</head>
<body>
  <header>
    <div class="title">
      <h1 id="host">…</h1>
      <span class="sub" id="updated"></span>
    </div>
    <div class="counts" id="counts"></div>
  </header>

  <div id="errors" class="errors" hidden></div>

  <nav class="tabs">
    <button data-tab="services" class="on">Services</button>
    <button data-tab="lan">Network</button>
  </nav>

  <section id="tab-services">
    <div class="toolbar">
      <div class="chips" id="filters">
        <button data-f="all" class="on">All</button>
        <button data-f="active">Active</button>
        <button data-f="problems">Degraded / failed</button>
        <button data-f="dormant">Dormant</button>
      </div>
      <input id="q" type="search" placeholder="Filter by name, port, user…">
    </div>
    <div id="services" class="list"></div>
    <details class="system">
      <summary id="system-sum">Operating-system units</summary>
      <div id="system" class="syslist"></div>
    </details>
  </section>

  <section id="tab-lan" hidden>
    <div class="toolbar">
      <span id="lan-meta" class="sub"></span>
      <button id="scan" class="primary">Scan now</button>
    </div>
    <div id="lan" class="list"></div>
  </section>

  <script src="/app.js"></script>
</body>
</html>