<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Deployment records table</title>
  <style>
    :root {
      --canvas: #eef0f2;
      --surface: #ffffff;
      --line: #dfe3e7;
      --line-strong: #cbd2d9;
      --text: #20262d;
      --muted: #68737e;
      --header: #f7f8f9;
      --hover: #f4f7fa;
      --selected: #edf4fb;
      --selected-line: #5f87aa;
      --blue: #356b96;
      --green: #27724b;
      --red: #9d3c3c;
      --amber: #8a6315;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 56px;
      background: var(--canvas);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 13px;
      line-height: 1.35;
    }

    .table-card {
      width: 1060px;
      background: var(--surface);
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(27, 37, 46, .06);
    }

    .table-toolbar {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 17px 0 18px;
      border-bottom: 1px solid var(--line);
    }

    .table-title {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .table-title h1 {
      margin: 0;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: -.01em;
    }

    .record-count {
      color: var(--muted);
      font-size: 12px;
    }

    .updated {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: 12px;
    }

    .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4b8a67;
      box-shadow: 0 0 0 3px #e9f3ed;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    col.status { width: 149px; }
    col.service { width: 238px; }
    col.region { width: 165px; }
    col.deployer { width: 186px; }
    col.duration { width: 124px; }
    col.timestamp { width: 198px; }

    thead th {
      height: 39px;
      padding: 0 18px;
      background: var(--header);
      border-bottom: 1px solid var(--line-strong);
      color: #5b6670;
      text-align: left;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .035em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    thead th:not(:first-child),
    tbody td:not(:first-child) {
      border-left: 1px solid #edf0f2;
    }

    .sort-header {
      color: #38434c;
    }

    .sort-button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: default;
      letter-spacing: inherit;
      text-transform: inherit;
    }

    .sort-mark {
      display: inline-flex;
      flex-direction: column;
      gap: 1px;
      width: 8px;
      height: 12px;
      justify-content: center;
    }

    .sort-mark i {
      display: block;
      width: 0;
      height: 0;
      margin: 0 auto;
      border-left: 3.5px solid transparent;
      border-right: 3.5px solid transparent;
    }

    .sort-mark .up {
      border-bottom: 4px solid #9ca5ad;
    }

    .sort-mark .down {
      border-top: 4px solid #3d6e97;
    }

    tbody tr {
      height: 48px;
      background: #fff;
    }

    tbody tr + tr td {
      border-top: 1px solid var(--line);
    }

    tbody tr.is-hovered td {
      background: var(--hover);
    }

    tbody tr.is-hovered td:first-child {
      box-shadow: inset 3px 0 0 #abb8c5;
    }

    tbody tr.is-selected td {
      background: var(--selected);
      border-top-color: #c7dae9;
      border-bottom: 1px solid #c7dae9;
    }

    tbody tr.is-selected td:first-child {
      box-shadow: inset 3px 0 0 var(--selected-line);
    }

    td {
      padding: 0 18px;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status-cell {
      padding-right: 12px;
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 550;
      font-size: 12px;
    }

    .status-icon {
      width: 16px;
      height: 16px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 16px;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 750;
      line-height: 1;
    }

    .succeeded .status-icon {
      color: var(--green);
      background: #e8f4ed;
      border: 1px solid #a8cfb6;
    }

    .running .status-icon {
      color: var(--blue);
      background: #eaf2f8;
      border: 1px solid #abc6dd;
      font-size: 9px;
    }

    .failed .status-icon {
      color: var(--red);
      background: #f9eded;
      border: 1px solid #dfb4b4;
      font-size: 13px;
    }

    .queued .status-icon {
      color: var(--amber);
      background: #fbf4e5;
      border: 1px solid #dec68b;
      font-size: 12px;
    }

    .service-name {
      color: #25313a;
      font-weight: 620;
      letter-spacing: -.005em;
    }

    .service-meta {
      display: inline;
      margin-left: 7px;
      color: #79838c;
      font-size: 12px;
    }

    .region, .deployer, .timestamp {
      color: #48545e;
    }

    .duration {
      color: #34414b;
      font-variant-numeric: tabular-nums;
    }

    .timestamp {
      font-variant-numeric: tabular-nums;
      font-size: 12px;
    }

    .table-footer {
      min-height: 38px;
      display: flex;
      align-items: center;
      padding: 0 18px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    .state-note {
      margin-left: auto;
      color: #74808a;
    }

    .state-note strong {
      color: #53616c;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <section class="table-card" aria-labelledby="deployments-title">
    <header class="table-toolbar">
      <div class="table-title">
        <h1 id="deployments-title">Deployment history</h1>
        <span class="record-count">8 records</span>
      </div>
      <div class="updated">
        <span class="live-dot" aria-hidden="true"></span>
        Updated just now
      </div>
    </header>

    <table aria-label="Server deployment records">
      <colgroup>
        <col class="status">
        <col class="service">
        <col class="region">
        <col class="deployer">
        <col class="duration">
        <col class="timestamp">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Status</th>
          <th scope="col">Service name</th>
          <th scope="col">Region</th>
          <th scope="col">Deployed by</th>
          <th scope="col">Duration</th>
          <th scope="col" class="sort-header" aria-sort="descending">
            <button class="sort-button" type="button" aria-label="Timestamp, sorted descending">
              Timestamp
              <span class="sort-mark" aria-hidden="true">
                <i class="up"></i><i class="down"></i>
              </span>
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">api-gateway</span><span class="service-meta">v2.14.0</span></td>
          <td class="region">us-east-1</td>
          <td class="deployer">Maya Chen</td>
          <td class="duration">2m 18s</td>
          <td class="timestamp">Today, 14:32</td>
        </tr>
        <tr class="is-hovered">
          <td class="status-cell">
            <span class="status running"><span class="status-icon">●</span>Running</span>
          </td>
          <td><span class="service-name">billing-worker</span><span class="service-meta">v1.9.3</span></td>
          <td class="region">eu-west-1</td>
          <td class="deployer">Arjun Patel</td>
          <td class="duration">1m 07s</td>
          <td class="timestamp">Today, 14:18</td>
        </tr>
        <tr class="is-selected" aria-selected="true">
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">checkout-web</span><span class="service-meta">v4.6.1</span></td>
          <td class="region">us-west-2</td>
          <td class="deployer">Nora Williams</td>
          <td class="duration">3m 42s</td>
          <td class="timestamp">Today, 13:56</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status failed"><span class="status-icon">×</span>Failed</span>
          </td>
          <td><span class="service-name">search-indexer</span><span class="service-meta">v3.2.8</span></td>
          <td class="region">ap-southeast-1</td>
          <td class="deployer">Leo Martins</td>
          <td class="duration">0m 49s</td>
          <td class="timestamp">Today, 13:41</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">identity-service</span><span class="service-meta">v5.1.0</span></td>
          <td class="region">us-east-1</td>
          <td class="deployer">Maya Chen</td>
          <td class="duration">2m 05s</td>
          <td class="timestamp">Today, 13:22</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status queued"><span class="status-icon">⋯</span>Queued</span>
          </td>
          <td><span class="service-name">reporting-api</span><span class="service-meta">v2.8.4</span></td>
          <td class="region">eu-central-1</td>
          <td class="deployer">Priya Shah</td>
          <td class="duration">—</td>
          <td class="timestamp">Today, 13:09</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">notification-hub</span><span class="service-meta">v1.12.2</span></td>
          <td class="region">us-west-2</td>
          <td class="deployer">Ethan Brooks</td>
          <td class="duration">1m 54s</td>
          <td class="timestamp">Today, 12:47</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">asset-processor</span><span class="service-meta">v2.3.7</span></td>
          <td class="region">ap-southeast-1</td>
          <td class="deployer">Arjun Patel</td>
          <td class="duration">4m 11s</td>
          <td class="timestamp">Today, 12:18</td>
        </tr>
      </tbody>
    </table>

    <footer class="table-footer">
      Showing 8 most recent deployments
      <span class="state-note"><strong>Selected:</strong> checkout-web &nbsp;·&nbsp; Hover preview shown on billing-worker</span>
    </footer>
  </section>
</body>
</html>