plainleaf/client/html/admin.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <base href="/.admin/" />
    <link rel="icon" type="image/png" href="assets/favicon-96x96.png" sizes="96x96" />
    <title>SilverBullet Admin</title>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      * {
        padding: 0;
        margin: 0;
      }

      html {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
          "Noto Color Emoji";
        --primary-button-color: #eee;
        --primary-button-background-color: #464cfc;
        --primary-button-hover-background-color: color-mix(
          in srgb,
          var(--primary-button-background-color),
          black 35%
        );
        --primary-button-border-color: transparent;
        --modal-border-color: #6c6c6c;
        --top-color: #66a3bb;
        --bottom-color: #0b3a69;
        min-height: 100%;
        background: linear-gradient(
          var(--top-color),
          var(--bottom-color)
        );
      }

      h1,
      h2 {
        font-size: 1.5rem;
        font-weight: normal;
      }

      input,
      select {
        font-family: inherit;
        font-size: inherit;
        padding: 0.5em;
      }

      button {
        font-family: inherit;
        font-size: inherit;
        background: var(--primary-button-background-color);
        color: var(--primary-button-color);
        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.05);
        border: 1px solid var(--primary-button-border-color);
        padding: 0.7em;
        border-radius: 0.5em;
        cursor: pointer;

        &:hover {
          background-color: var(--primary-button-hover-background-color);
        }

        &:focus {
          outline: 2px solid var(--primary-button-background-color);
          outline-offset: -3px;
        }
      }

      body { max-width: 720px; margin: 0 auto; padding: 2rem 1rem; }

      /* Same "floating island" card as the login page (auth.html). */
      #root {
        padding: 3em;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;
        background-color: white;
        border: var(--modal-border-color) 1px solid;
        margin-block: 2rem;
      }
      .sb-admin-error { color: #b00020; }
      .sb-admin-ok { color: #1a7f37; }
      .sb-admin-warn { color: #9a6700; }
      /* Aligned columns: name | binding link | status | actions. Each row is a
         subgrid so cells line up across rows while rows keep their borders. */
      .sb-space-list {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr max-content max-content max-content;
      }
      .sb-space-list li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        column-gap: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #8884;
      }
      .sb-actions { display: flex; gap: 0.5rem; }
      .sb-actions button { padding: 0.35em 0.7em; }
      .sb-badge { font-size: 0.8em; padding: 0.1em 0.5em; border-radius: 0.5em; background: #8883; }
      .sb-badge.errored { background: #b0002033; }
      form label { display: block; margin-top: 0.75rem; font-weight: 600; }
      form input[type="text"], form input[type="password"], form select { width: 100%; padding: 0.4rem; }
      .row { display: flex; gap: 0.5rem; margin-top: 1rem; }
      details { margin-top: 1rem; }

      /* Binding-value input dressed up as the URL it will produce: fixed
         scheme/host parts as affixes around the editable segment. */
      .sb-url-input {
        display: flex;
        align-items: stretch;
        border: 1px solid #767676;
        border-radius: 3px;
        background: white;
        overflow: hidden;
      }
      .sb-url-input:focus-within {
        outline: 2px solid var(--primary-button-background-color);
        outline-offset: -1px;
      }
      .sb-url-input input,
      form .sb-url-input input[type="text"] {
        border: none;
        flex: 1;
        min-width: 0;
        width: auto;
      }
      .sb-url-input input:focus {
        outline: none;
      }
      .sb-url-affix {
        display: flex;
        align-items: center;
        padding: 0.4rem 0.5rem;
        background: #f0f0f0;
        color: #555;
        white-space: nowrap;
        user-select: none;
      }
      .sb-url-affix:first-child { border-right: 1px solid #ddd; }
      .sb-url-affix:last-child { border-left: 1px solid #ddd; }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="assets/admin.js"></script>
  </body>
</html>