```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Deployment Records</title>
<style>
/* Reset & Base Variables */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg-canvas: #090d16;
--panel-bg: #111827;
--panel-header-bg: #161f30;
--border-color: #1f293d;
--border-color-subtle: #182234;
--text-main: #e2e8f0;
--text-muted: #94a3b8;
--text-dim: #64748b;
--accent-blue: #38bdf8;
--accent-blue-bg: rgba(56, 189, 248, 0.08);
--row-hover-bg: #1a2436;
--row-selected-bg: #13233a;
--row-selected-border: #2563eb;
--status-success-bg: rgba(16, 185, 129, 0.12);
--status-success-text: #34d399;
--status-success-border: rgba(16, 185, 129, 0.25);
--status-failed-bg: rgba(239, 68, 68, 0.12);
--status-failed-text: #f87171;
--status-failed-border: rgba(239, 68, 68, 0.25);
--status-progress-bg: rgba(59, 130, 246, 0.12);
--status-progress-text: #60a5fa;
--status-progress-border: rgba(59, 130, 246, 0.25);
--status-rollback-bg: rgba(168, 85, 247, 0.12);
--status-rollback-text: #c084fc;
--status-rollback-border: rgba(168, 85, 247, 0.25);
--status-cancelled-bg: rgba(100, 116, 139, 0.15);
--text-cancelled: #cbd5e1;
--status-cancelled-border: rgba(100, 116, 139, 0.3);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
body {
background-color: var(--bg-canvas);
color: var(--text-main);
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Container Card */
.table-card {
width: 100%;
max-width: 1160px;
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Action Bar Header */
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: var(--panel-header-bg);
border-bottom: 1px solid var(--border-color);
}
.toolbar-title-group {
display: flex;
align-items: center;
gap: 12px;
}
.toolbar-title {
font-size: 14px;
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.01em;
}
.badge-count {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
padding: 1px 7px;
border-radius: 12px;
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 10px;
color: var(--text-dim);
pointer-events: none;
}
.search-input {
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 5px 10px 5px 30px;
color: var(--text-main);
font-size: 12px;
width: 220px;
outline: none;
transition: border-color 0.15s ease;
}
.search-input:focus {
border-color: var(--accent-blue);
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-color);
color: var(--text-muted);
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
}
.btn:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-main);
}
/* Table Component */
.table-wrapper {
width: 100%;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
white-space: nowrap;
}
th {
background: var(--panel-header-bg);
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 10px 16px;
border-bottom: 1px solid var(--border-color);
user-select: none;
}
th.sortable {
cursor: pointer;
transition: color 0.15s ease;
}
th.sortable:hover {
color: var(--text-main);
}
.th-content {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Sortable Header Active State */
th.is-sorted {
color: var(--accent-blue);
background: rgba(56, 189, 248, 0.03);
}
th .sort-icon {
opacity: 0.3;
transition: opacity 0.15s ease;
}
th.sortable:hover .sort-icon {
opacity: 0.7;
}
th.is-sorted .sort-icon {
opacity: 1;
color: var(--accent-blue);
}
/* Table Body */
td {
padding: 11px 16px;
border-bottom: 1px solid var(--border-color-subtle);
color: var(--text-muted);
vertical-align: middle;
}
tr {
transition: background-color 0.12s ease;
position: relative;
}
/* Interactive States (Requirements) */
/* Hovered Row State */
tr.is-hovered, tr:hover {
background-color: var(--row-hover-bg) !important;
}
tr.is-hovered td, tr:hover td {
color: var(--text-main);
}
/* Selected Row State */
tr.is-selected {
background-color: var(--row-selected-bg) !important;
}
tr.is-selected td {
color: var(--text-main);
border-bottom-color: rgba(37, 99, 235, 0.2);
}
tr.is-selected::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--row-selected-border);
}
/* Checkbox Styling */
.checkbox-col {
width: 38px;
padding-right: 0;
text-align: center;
}
.custom-checkbox {
appearance: none;
width: 15px;
height: 15px;
border: 1px solid var(--border-color);
border-radius: 3px;
background: rgba(0, 0, 0, 0.3);
cursor: pointer;
display: inline-block;
vertical-align: middle;
position: relative;
outline: none;
}
.custom-checkbox:checked {
background-color: #2563eb;
border-color: #3b82f6;
}
.custom-checkbox:checked::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Status Badges - Accessible (Text + Shape/Icon + Color) */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid transparent;
width: fit-content;
}
.status-badge svg {
flex-shrink: 0;
}
.status-success {
background: var(--status-success-bg);
color: var(--status-success-text);
border-color: var(--status-success-border);
}
.status-failed {
background: var(--status-failed-bg);
color: var(--status-failed-text);
border-color: var(--status-failed-border);
}
.status-progress {
background: var(--status-progress-bg);
color: var(--status-progress-text);
border-color: var(--status-progress-border);
}
.status-rollback {
background: var(--status-rollback-bg);
color: var(--status-rollback-text);
border-color: var(--status-rollback-border);
}
.status-cancelled {
background: var(--status-cancelled-bg);
color: var(--text-cancelled);
border-color: var(--status-cancelled-border);
}
/* Cell Content Styling */
.service-cell {
display: flex;
flex-direction: column;
}
.service-name {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--text-main);
}
.service-id {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
margin-top: 1px;
}
.region-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
background: rgba(255, 255, 255, 0.03);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.user-cell {
display: flex;
align-items: center;
gap: 8px;
}
.avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: #334155;
color: #e2e8f0;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.avatar.system {
background: #1e293b;
color: var(--accent-blue);
border-color: rgba(56, 189, 248, 0.2);
}
.user-name {
color: var(--text-main);
font-size: 12px;
}
.duration-cell {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
}
.timestamp-cell {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* Actions Column */
.actions-col {
text-align: right;
width: 40px;
}
.icon-btn {
background: transparent;
border: none;
color: var(--text-dim);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.icon-btn:hover {
color: var(--text-main);
background: rgba(255, 255, 255, 0.08);
}
/* Animations */
.spin {
animation: spin 1.5s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Table Footer */
.table-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: var(--panel-header-bg);
border-top: 1px solid var(--border-color);
font-size: 12px;
color: var(--text-dim);
}
.footer-pagination {
display: flex;
align-items: center;
gap: 6px;
}
.state-indicator-bar {
display: flex;
gap: 16px;
margin-bottom: 12px;
font-size: 11px;
color: var(--text-dim);
padding: 0 4px;
}
.state-tag {
display: inline-flex;
align-items: center;
gap: 5px;
}
.state-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
/* Visual State Annotations for Demo Clarity */
.label-hovered { background-color: var(--accent-blue); }
.label-selected { background-color: var(--row-selected-border); }
.label-sorted { background-color: #eab308; }
</style>
</head>
<body>
<div style="width: 100%; max-width: 1160px;">
<!-- State Hints for Reviewer Clarity -->
<div class="state-indicator-bar">
<span class="state-tag"><span class="state-dot label-sorted"></span> Header: "Timestamp" active sort state</span>
<span class="state-tag"><span class="state-dot label-selected"></span> Row 2: Selected state</span>
<span class="state-tag"><span class="state-dot label-hovered"></span> Row 3: Hovered state</span>
</div>
<!-- Main Data Table Container -->
<div class="table-card">
<!-- Toolbar -->
<div class="table-toolbar">
<div class="toolbar-title-group">
<span class="toolbar-title">Deployment Logs</span>
<span class="badge-count">8 Total</span>
</div>
<div class="toolbar-actions">
<div class="search-input-wrapper">
<svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" class="search-input" placeholder="Filter deployments..." value="production">
</div>
<button class="btn">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
Filter
</button>
<button class="btn">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
Export
</button>
</div>
</div>
<!-- Table Wrapper -->
<div class="table-wrapper">
<table>
<thead>
<tr>
<th class="checkbox-col">
<input type="checkbox" class="custom-checkbox" aria-label="Select all rows">
</th>
<th class="sortable">
<div class="th-content">
Status
<svg class="sort-icon" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 15l5 5 5-5M7 9l5-5 5 5"/></svg>
</div>
</th>
<th class="sortable">
<div class="th-content">
Service Name
<svg class="sort-icon" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 15l5 5 5-5M7 9l5-5 5 5"/></svg>
</div>
</th>
<th class="sortable">
<div class="th-content">
Region
<svg class="sort-icon" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 15l5 5 5-5M7 9l5-5 5 5"/></svg>
</div>
</th>
<th class="sortable">
<div class="th-content">
Deployed By
<svg class="sort-icon" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 15l5 5 5-5M7 9l5-5 5 5"/></svg>
</div>
</th>
<th class="sortable">
<div class="th-content">
Duration
<svg class="sort-icon" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 15l5 5 5-5M7 9l5-5 5 5"/></svg>
</div>
</th>
<!-- ACTIVE SORTED COLUMN HEADER -->
<th class="sortable is-sorted">
<div class="th-content">
Timestamp
<!-- Active Descending Sort Arrow -->
<svg class="sort-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
</div>
</th>
<th class="actions-col"></th>
</tr>
</thead>
<tbody>
<!-- Row 1: Normal Standard Success -->
<tr>
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox">
</td>
<td>
<!-- Status 1: Success (Icon + Label) -->
<span class="status-badge status-success" title="Deployment completed successfully">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
Success
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">api-gateway-edge</span>
<span class="service-id">dep-8f92a1c0</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
us-east-1
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar">SC</div>
<span class="user-name">Sarah Chen</span>
</div>
</td>
<td class="duration-cell">1m 42s</td>
<td class="timestamp-cell">2023-10-26 14:32:01</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
<!-- Row 2: SELECTED ROW (Requirement) -->
<tr class="is-selected">
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox" checked>
</td>
<td>
<!-- Status 1: Success -->
<span class="status-badge status-success" title="Deployment completed successfully">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
Success
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">auth-service-v2</span>
<span class="service-id">dep-7c81b0d9</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
eu-west-1
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar">AR</div>
<span class="user-name">Alex Rivera</span>
</div>
</td>
<td class="duration-cell">48s</td>
<td class="timestamp-cell">2023-10-26 14:15:22</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
<!-- Row 3: HOVERED ROW (Requirement) -->
<tr class="is-hovered">
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox">
</td>
<td>
<!-- Status 2: Failed (Icon + Label) -->
<span class="status-badge status-failed" title="Build failed at step #4 (tests)">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
Failed
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">payment-processor</span>
<span class="service-id">dep-6a50f3e2</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
us-west-2
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar">MV</div>
<span class="user-name">Marcus Vance</span>
</div>
</td>
<td class="duration-cell">3m 11s</td>
<td class="timestamp-cell">2023-10-26 13:58:40</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
<!-- Row 4: In Progress -->
<tr>
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox">
</td>
<td>
<!-- Status 3: In Progress (Icon + Label) -->
<span class="status-badge status-progress" title="Container rollout in progress">
<svg class="spin" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
In Progress
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">billing-worker-cluster</span>
<span class="service-id">dep-5d41e7a8</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
us-east-1
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar system">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="2" y="2" width="20" height="8" rx="2"></rect><rect x="2" y="14" width="20" height="8" rx="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
</div>
<span class="user-name">GitHub Actions</span>
</div>
</td>
<td class="duration-cell">1m 05s</td>
<td class="timestamp-cell">2023-10-26 13:42:19</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
<!-- Row 5: Rolled Back -->
<tr>
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox">
</td>
<td>
<!-- Status 4: Rolled Back (Icon + Label) -->
<span class="status-badge status-rollback" title="Automatically rolled back due to error threshold">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
Rolled Back
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">search-indexer-v1</span>
<span class="service-id">dep-4c30d6b5</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
ap-northeast-1
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar">ER</div>
<span class="user-name">Elena Rostova</span>
</div>
</td>
<td class="duration-cell">8m 30s</td>
<td class="timestamp-cell">2023-10-26 11:04:15</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
<!-- Row 6: Success -->
<tr>
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox">
</td>
<td>
<span class="status-badge status-success" title="Deployment completed successfully">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
Success
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">user-profile-db</span>
<span class="service-id">dep-3b20c5a4</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
eu-central-1
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar">DK</div>
<span class="user-name">David Kim</span>
</div>
</td>
<td class="duration-cell">2m 14s</td>
<td class="timestamp-cell">2023-10-26 09:18:50</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
<!-- Row 7: Cancelled -->
<tr>
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox">
</td>
<td>
<!-- Status 5: Cancelled (Icon + Label) -->
<span class="status-badge status-cancelled" title="Deployment manually cancelled by user">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
Cancelled
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">analytics-pipeline</span>
<span class="service-id">dep-2a10b493</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
us-east-1
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar">SC</div>
<span class="user-name">Sarah Chen</span>
</div>
</td>
<td class="duration-cell">14s</td>
<td class="timestamp-cell">2023-10-25 22:41:03</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
<!-- Row 8: Success -->
<tr>
<td class="checkbox-col">
<input type="checkbox" class="custom-checkbox">
</td>
<td>
<span class="status-badge status-success" title="Deployment completed successfully">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
Success
</span>
</td>
<td>
<div class="service-cell">
<span class="service-name">notification-hub</span>
<span class="service-id">dep-1099a382</span>
</div>
</td>
<td>
<span class="region-badge">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path></svg>
sa-east-1
</span>
</td>
<td>
<div class="user-cell">
<div class="avatar">AR</div>
<span class="user-name">Alex Rivera</span>
</div>
</td>
<td class="duration-cell">3m 02s</td>
<td class="timestamp-cell">2023-10-25 18:05:12</td>
<td class="actions-col">
<button class="icon-btn" title="More options">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Table Footer / Pagination -->
<div class="table-footer">
<span>Showing <strong>1 - 8</strong> of <strong>142</strong> deployment records</span>
<div class="footer-pagination">
<button class="btn" disabled style="opacity: 0.5; cursor: not-allowed;">Previous</button>
<button class="btn">Next</button>
</div>
</div>
</div>
</div>
</body>
</html>
```