──────
Build and Push Docker Images / detect-changes (push) Successful in 11s
Build and Push Docker Images / build-auth-api (push) Successful in 1m0s
Build and Push Docker Images / build-employee-api (push) Successful in 1m2s
Build and Push Docker Images / build-transit-api (push) Successful in 1m1s
Build and Push Docker Images / build-error-log-api (push) Successful in 1m5s
Build and Push Docker Images / build-admin-ui (push) Successful in 1m13s
Build and Push Docker Images / build-monitoring-ui (push) Successful in 1m15s
Build and Push Docker Images / deploy-test-node (push) Successful in 3s
Build and Push Docker Images / detect-changes (push) Successful in 11s
Build and Push Docker Images / build-auth-api (push) Successful in 1m0s
Build and Push Docker Images / build-employee-api (push) Successful in 1m2s
Build and Push Docker Images / build-transit-api (push) Successful in 1m1s
Build and Push Docker Images / build-error-log-api (push) Successful in 1m5s
Build and Push Docker Images / build-admin-ui (push) Successful in 1m13s
Build and Push Docker Images / build-monitoring-ui (push) Successful in 1m15s
Build and Push Docker Images / deploy-test-node (push) Successful in 3s
### Summary of Changes
1. Documentation Consolidation:
• Relocated the docs/ folder and all repository .md files (README.md, DEPLOYMENT.md, DOCKER_README.md,
DOMAINS_README.md, GETTING_STARTED.md, CI_CD_PORTAINER_GUIDE.md, ADMIN_DEPLOYMENT_SUMMARY.md,
SECURITY_PRIVATE_FILES.md, handoff.md, azure-project-plan.md, plus service-specific READMEs) into .
• Updated document links in README.md.
2. AI Agent Project Map:
• Created PROJECT_MAP.md in the project root containing complete architecture diagrams, service specs, ports, DB
schemas, environment variables, and developer workflows.
• Added PROJECT_MAP.md to .gitignore.
3. Monitoring UI & Infrastructure Integration:
• Added monitoring_ui service to docker-compose.yml (port 5175).
• Configured Gitea workflow docker-build.yml for monitoring_ui builds.
• Added CORS middleware headers in index.js.
• Added nginx.conf copy step in Dockerfile.
──────
### Recommended Commit Message
docs: consolidate project documentation into monitoring_ui and add agent project map
- Move all markdown documentation files and docs/ folder into monitoring_ui/docs/
- Update documentation hub index (monitoring_ui/docs/README.md) with relative paths
- Generate comprehensive AI agent reference map (PROJECT_MAP.md) in repository root
- Add PROJECT_MAP.md and monitoring_ui build output/env overrides to .gitignore
- Integrate monitoring_ui service into docker-compose.yml and Gitea CI workflow
- Configure CORS handling in employee_api for monitoring dashboard access
──────
### Alternative Short Commit Message
refactor(docs): move docs to monitoring_ui and create AI agent PROJECT_MAP.md
This commit is contained in:
@@ -0,0 +1,536 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Command Center | XTransit</title>
|
||||
<link rel="stylesheet" href="./theme.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="preview-root">
|
||||
<header class="preview-header">
|
||||
<div class="preview-header__brand">
|
||||
<span class="preview-header__logo">XT</span>
|
||||
<span>XTransit Operations</span>
|
||||
</div>
|
||||
<div class="preview-header__actions">
|
||||
<button
|
||||
class="preview-btn preview-btn--ghost"
|
||||
aria-label="Search services"
|
||||
>
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
|
||||
<path
|
||||
d="m16 16 4.5 4.5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Search</span>
|
||||
</button>
|
||||
<button
|
||||
class="preview-btn preview-btn--ghost"
|
||||
aria-label="View notifications"
|
||||
>
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9Z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M10 21h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="preview-badge preview-badge--warning">2</span>
|
||||
</button>
|
||||
<span class="preview-avatar" aria-label="Signed in as Ava Morgan"
|
||||
>AM</span
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="preview-nav" aria-label="Primary navigation">
|
||||
<a class="preview-nav__link preview-nav__link--active" href="#">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect
|
||||
x="3.5"
|
||||
y="3.5"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="13.5"
|
||||
y="3.5"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="3.5"
|
||||
y="13.5"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="13.5"
|
||||
y="13.5"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
</svg>
|
||||
<span>Command Center</span>
|
||||
</a>
|
||||
<a class="preview-nav__link" href="./service-catalog.html">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M4 6.5h16M4 12h16M4 17.5h16"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
<circle
|
||||
cx="7"
|
||||
cy="6.5"
|
||||
r="1.4"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
></circle>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="1.4"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
></circle>
|
||||
<circle
|
||||
cx="17"
|
||||
cy="17.5"
|
||||
r="1.4"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
></circle>
|
||||
</svg>
|
||||
<span>Service Catalog</span>
|
||||
</a>
|
||||
<a class="preview-nav__link" href="./request-lab.html">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M5 4.5h14v15H5z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M8 8h8M8 12h8M8 16h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Request Lab</span>
|
||||
</a>
|
||||
<a class="preview-nav__link" href="./incident-log.html">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M12 3.5 20 7v5c0 4.2-3.2 7.4-8 8.8C7.2 19.4 4 16.2 4 12V7l8-3.5Z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M12 8v4M12 15.5v.1"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Incident Log</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="preview-shell">
|
||||
<aside class="preview-sidebar" aria-label="Command center sections">
|
||||
<div class="preview-sidebar__section">Monitor</div>
|
||||
<a
|
||||
class="preview-sidebar__item preview-sidebar__item--active"
|
||||
href="#"
|
||||
>
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M4 17.5h16M6.5 14V9M12 14V5M17.5 14v-3"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
<path
|
||||
d="M4 19.5h16"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Overview</span>
|
||||
</a>
|
||||
<a class="preview-sidebar__item" href="./service-catalog.html">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect
|
||||
x="4"
|
||||
y="4"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="14"
|
||||
y="4"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="4"
|
||||
y="14"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
</svg>
|
||||
<span>Services</span>
|
||||
</a>
|
||||
<a class="preview-sidebar__item" href="./incident-log.html">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M5 4.5h14v15H5z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M8 8h8M8 12h6M8 16h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Activity</span>
|
||||
</a>
|
||||
<div class="preview-sidebar__section">Workspace</div>
|
||||
<a class="preview-sidebar__item" href="./request-lab.html">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="m8 8-4 4 4 4M16 8l4 4-4 4M14 5l-4 14"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Request Lab</span>
|
||||
</a>
|
||||
<a class="preview-sidebar__item" href="./incident-log.html">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M12 4.5v8l5 3"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<circle cx="12" cy="12" r="8.5" stroke-width="1.8"></circle>
|
||||
</svg>
|
||||
<span>Incident Log</span>
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<main class="preview-main">
|
||||
<section class="preview-hero" aria-labelledby="page-title">
|
||||
<div class="preview-hero__mesh"></div>
|
||||
<div class="preview-hero__eyebrow">Operations / Live overview</div>
|
||||
<h1 class="preview-hero__title" id="page-title">Command Center</h1>
|
||||
<p class="preview-hero__subtitle">
|
||||
Current health, polling freshness, and important service signals
|
||||
across the XTransit platform.
|
||||
</p>
|
||||
<div class="preview-hero__actions">
|
||||
<button class="preview-btn preview-btn--primary">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 4v8l4 2"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
<path
|
||||
d="M17 4h3v3"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Run health check</span>
|
||||
</button>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
><span class="preview-badge__dot"></span>Polling every 60
|
||||
seconds</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="preview-kpi-row" aria-label="Platform health summary">
|
||||
<article class="preview-kpi">
|
||||
<svg
|
||||
class="preview-icon preview-icon--lg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 19.5h16M6.5 16V8M12 16V4.5M17.5 16v-5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="preview-kpi__label">Monitored services</span>
|
||||
<strong class="preview-kpi__value">4</strong>
|
||||
<span class="preview-kpi__delta">Across APIs and admin UI</span>
|
||||
</article>
|
||||
<article class="preview-kpi">
|
||||
<svg
|
||||
class="preview-icon preview-icon--lg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="m5 12 4.5 4.5L19 7"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<circle cx="12" cy="12" r="9" stroke-width="1.8"></circle>
|
||||
</svg>
|
||||
<span class="preview-kpi__label">Operational</span>
|
||||
<strong class="preview-kpi__value">3</strong>
|
||||
<span class="preview-kpi__delta preview-kpi__delta--up"
|
||||
>75% of monitored services</span
|
||||
>
|
||||
</article>
|
||||
<article class="preview-kpi">
|
||||
<svg
|
||||
class="preview-icon preview-icon--lg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 4.5 20 19H4L12 4.5Z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M12 10v4M12 16.5v.1"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="preview-kpi__label">Degraded</span>
|
||||
<strong class="preview-kpi__value">1</strong>
|
||||
<span class="preview-kpi__delta"
|
||||
>Error Log API needs attention</span
|
||||
>
|
||||
</article>
|
||||
<article class="preview-kpi">
|
||||
<svg
|
||||
class="preview-icon preview-icon--lg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="8.5" stroke-width="1.8"></circle>
|
||||
<path
|
||||
d="M12 7v5l3.5 2"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="preview-kpi__label">Last poll</span>
|
||||
<strong class="preview-kpi__value">18 sec ago</strong>
|
||||
<span class="preview-kpi__delta">Next poll in 42 seconds</span>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="preview-two-column" aria-label="Service signals">
|
||||
<div>
|
||||
<div class="preview-section-title">
|
||||
<h2 class="preview-section-title__h">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 12h4l2-7 4 14 2-7h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
Service health
|
||||
</h2>
|
||||
<span class="preview-section-title__hint"
|
||||
>Live response checks</span
|
||||
>
|
||||
</div>
|
||||
<div class="preview-table-wrap">
|
||||
<table class="preview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Service</th>
|
||||
<th>Latency</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Transit API</strong><br /><span
|
||||
class="preview-section-title__hint"
|
||||
>/health</span
|
||||
>
|
||||
</td>
|
||||
<td>184 ms</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
><span class="preview-badge__dot"></span
|
||||
>Operational</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Employee API</strong><br /><span
|
||||
class="preview-section-title__hint"
|
||||
>/health</span
|
||||
>
|
||||
</td>
|
||||
<td>96 ms</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
><span class="preview-badge__dot"></span
|
||||
>Operational</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Error Log API</strong><br /><span
|
||||
class="preview-section-title__hint"
|
||||
>/health</span
|
||||
>
|
||||
</td>
|
||||
<td>121 ms</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--warning"
|
||||
><span class="preview-badge__dot"></span
|
||||
>Degraded</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Admin UI</strong><br /><span
|
||||
class="preview-section-title__hint"
|
||||
>http://localhost:5173</span
|
||||
>
|
||||
</td>
|
||||
<td>42 ms</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
><span class="preview-badge__dot"></span
|
||||
>Operational</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="preview-section-title">
|
||||
<h2 class="preview-section-title__h">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4.5 5.5h15v13h-15z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M8 9h8M8 13h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
Recent poll activity
|
||||
</h2>
|
||||
<span class="preview-section-title__hint">Updating</span>
|
||||
</div>
|
||||
<div
|
||||
class="preview-card"
|
||||
aria-label="Recent poll activity loading"
|
||||
>
|
||||
<div class="preview-skeleton preview-skeleton--title"></div>
|
||||
<div class="preview-skeleton preview-skeleton--line"></div>
|
||||
<div class="preview-skeleton preview-skeleton--line"></div>
|
||||
<div class="preview-skeleton preview-skeleton--line"></div>
|
||||
<div class="preview-skeleton preview-skeleton--block"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="preview-action-bar">
|
||||
<span class="preview-section-title__hint"
|
||||
>Signed in as Ava Morgan · Operator access</span
|
||||
>
|
||||
<button class="preview-btn preview-btn--secondary">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M4 12a8 8 0 1 0 2.3-5.7"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
<path
|
||||
d="M4 5v5h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Refresh overview</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,479 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Incident Log | Transit Operations</title>
|
||||
<link rel="stylesheet" href="./theme.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="preview-root">
|
||||
<header class="preview-header">
|
||||
<div class="preview-header__brand">
|
||||
<span class="preview-header__logo">TO</span>
|
||||
<span>Transit Operations</span>
|
||||
</div>
|
||||
<div class="preview-header__actions">
|
||||
<label class="preview-form__input" aria-label="Search console">
|
||||
<svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
|
||||
<path
|
||||
d="m16 16 5 5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search console"
|
||||
aria-label="Search console"
|
||||
style="
|
||||
border: 0;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
font: inherit;
|
||||
width: 135px;
|
||||
color: inherit;
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<a
|
||||
class="preview-header__action"
|
||||
href="#notifications"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="preview-avatar" aria-label="Signed in as Maya Chen"
|
||||
>MC</span
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="preview-nav" aria-label="Primary navigation">
|
||||
<a class="preview-nav__link" href="./command-center.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="4" y="4" width="6" height="6" stroke-width="1.8"></rect>
|
||||
<rect x="14" y="4" width="6" height="6" stroke-width="1.8"></rect>
|
||||
<rect x="4" y="14" width="6" height="6" stroke-width="1.8"></rect>
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="6"
|
||||
height="6"
|
||||
stroke-width="1.8"
|
||||
></rect></svg
|
||||
>Command center</a
|
||||
>
|
||||
<a class="preview-nav__link" href="./service-catalog.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 20V5l8-2 8 2v15M4 20h16M8 8h2m4 0h2m-8 4h2m4 0h2m-8 4h2m4 0h2"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Service catalog</a
|
||||
>
|
||||
<a class="preview-nav__link" href="./request-lab.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Request lab</a
|
||||
>
|
||||
<a
|
||||
class="preview-nav__link preview-nav__link--active"
|
||||
href="#"
|
||||
aria-current="page"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Incident log</a
|
||||
>
|
||||
</nav>
|
||||
|
||||
<div class="preview-shell">
|
||||
<aside class="preview-sidebar" aria-label="Incident log navigation">
|
||||
<div class="preview-sidebar__section">Monitor</div>
|
||||
<a class="preview-sidebar__item" href="./command-center.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 13h4l2-7 4 12 2-5h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Command center</a
|
||||
>
|
||||
<a
|
||||
class="preview-sidebar__item preview-sidebar__item--active"
|
||||
href="#"
|
||||
aria-current="page"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Incident log</a
|
||||
>
|
||||
<div class="preview-sidebar__section">Services</div>
|
||||
<a class="preview-sidebar__item" href="./service-catalog.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 20V5l8-2 8 2v15M4 20h16M8 8h2m4 0h2m-8 4h2m4 0h2"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Service catalog</a
|
||||
>
|
||||
<a class="preview-sidebar__item" href="./request-lab.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Request lab</a
|
||||
>
|
||||
</aside>
|
||||
|
||||
<main class="preview-main">
|
||||
<div class="preview-section-title">
|
||||
<div>
|
||||
<div class="preview-card__meta">MONITORING / INCIDENTS</div>
|
||||
<h1
|
||||
class="preview-hero__title"
|
||||
style="color: var(--color-text); margin-top: 4px"
|
||||
>
|
||||
Incident log
|
||||
</h1>
|
||||
</div>
|
||||
<a
|
||||
class="preview-btn preview-btn--primary"
|
||||
href="#refresh-incidents"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M20 11a8 8 0 1 0 1 4M20 5v6h-6"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Refresh incidents</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="preview-action-bar"
|
||||
style="justify-content: flex-start; padding: 0; border-top: 0"
|
||||
>
|
||||
<label class="preview-form__input"
|
||||
><span class="preview-card__meta">Service</span
|
||||
><select aria-label="Filter by service">
|
||||
<option>All services</option>
|
||||
<option>Auth API</option>
|
||||
<option>Employee API</option>
|
||||
<option>Transit API</option>
|
||||
<option>Error Log API</option>
|
||||
<option>Admin UI</option>
|
||||
</select></label
|
||||
>
|
||||
<label class="preview-form__input"
|
||||
><span class="preview-card__meta">Severity</span
|
||||
><select aria-label="Filter by severity">
|
||||
<option>All severities</option>
|
||||
<option>Critical</option>
|
||||
<option>Error</option>
|
||||
<option>Warning</option>
|
||||
<option>Info</option>
|
||||
</select></label
|
||||
>
|
||||
<label class="preview-form__input"
|
||||
><span class="preview-card__meta">Window</span
|
||||
><select aria-label="Filter by time window">
|
||||
<option>Last 24 hours</option>
|
||||
<option>Last 7 days</option>
|
||||
<option>Last 30 days</option>
|
||||
</select></label
|
||||
>
|
||||
<span class="preview-card__meta"
|
||||
>3 incidents in the selected window</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="preview-tabs" role="tablist" aria-label="Incident views">
|
||||
<a
|
||||
class="preview-tabs__tab preview-tabs__tab--active"
|
||||
href="#all-incidents"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
>All incidents</a
|
||||
>
|
||||
<a
|
||||
class="preview-tabs__tab"
|
||||
href="#delivery-status"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
>Delivery status</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<section id="all-incidents" aria-labelledby="all-incidents-heading">
|
||||
<div class="preview-section-title">
|
||||
<h2 class="preview-section-title__h" id="all-incidents-heading">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
Recent activity
|
||||
</h2>
|
||||
<span class="preview-section-title__hint"
|
||||
>Normalized from five connected services</span
|
||||
>
|
||||
</div>
|
||||
<div class="preview-table-wrap">
|
||||
<table class="preview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Service</th>
|
||||
<th>Code</th>
|
||||
<th>Message</th>
|
||||
<th>Severity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>09:42:18</strong></td>
|
||||
<td>Error Log API</td>
|
||||
<td><code>BAD_REQUEST</code></td>
|
||||
<td>Missing route identifier</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--warning"
|
||||
><span class="preview-badge__dot"></span>Warning</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>09:37:04</strong></td>
|
||||
<td>Transit API</td>
|
||||
<td><code>FORBIDDEN</code></td>
|
||||
<td>Admin role required</td>
|
||||
<td>
|
||||
<span class="preview-badge"
|
||||
><span class="preview-badge__dot"></span>Info</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>09:18:51</strong></td>
|
||||
<td>Employee API</td>
|
||||
<td><code>INTERNAL_ERROR</code></td>
|
||||
<td>Employee lookup timed out</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--danger"
|
||||
><span class="preview-badge__dot"></span>Critical</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="preview-card-list" aria-labelledby="severity-heading">
|
||||
<div class="preview-section-title">
|
||||
<h2 class="preview-section-title__h" id="severity-heading">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3 3 20h18L12 3ZM12 9v5m0 3h.01"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
Severity summary
|
||||
</h2>
|
||||
<span class="preview-section-title__hint">Current window</span>
|
||||
</div>
|
||||
<div class="preview-card-grid">
|
||||
<article class="preview-card">
|
||||
<div class="preview-card__title">
|
||||
<svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3 3 20h18L12 3Zm0 6v5m0 3h.01"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
Warning
|
||||
</div>
|
||||
<strong class="preview-kpi__value">1</strong>
|
||||
<p class="preview-card__body">
|
||||
Requires review before the next dispatch cycle.
|
||||
</p>
|
||||
</article>
|
||||
<article class="preview-card">
|
||||
<div class="preview-card__title">
|
||||
<svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="8.5" stroke-width="1.8"></circle>
|
||||
<path
|
||||
d="M12 8v4l2.5 2"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
Info
|
||||
</div>
|
||||
<strong class="preview-kpi__value">1</strong>
|
||||
<p class="preview-card__body">
|
||||
Access policy event recorded from Transit API.
|
||||
</p>
|
||||
</article>
|
||||
<article class="preview-card">
|
||||
<div class="preview-card__title">
|
||||
<svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3 3 20h18L12 3Zm0 6v5m0 3h.01"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
Critical
|
||||
</div>
|
||||
<strong class="preview-kpi__value">1</strong>
|
||||
<p class="preview-card__body">
|
||||
Employee lookup timeout needs immediate attention.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="delivery-status"
|
||||
class="preview-error"
|
||||
aria-labelledby="delivery-heading"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon preview-icon--lg preview-error__icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3 3 20h18L12 3Zm0 6v5m0 3h.01"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="preview-error__body">
|
||||
<strong class="preview-error__title" id="delivery-heading"
|
||||
>Error log API delayed</strong
|
||||
><span class="preview-error__text"
|
||||
>Last successful pull was 3 minutes ago</span
|
||||
>
|
||||
</div>
|
||||
<a class="preview-btn preview-btn--secondary" href="#retry-delivery"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M20 11a8 8 0 1 0 1 4M20 5v6h-6"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Retry</a
|
||||
>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"generatedAt": "2026-09-20T00:00:00.000Z",
|
||||
"previewStatus": "generating",
|
||||
"pages": [
|
||||
{
|
||||
"slug": "command-center",
|
||||
"title": "Command Center",
|
||||
"route": "/",
|
||||
"status": "pending"
|
||||
},
|
||||
{
|
||||
"slug": "service-catalog",
|
||||
"title": "Service Catalog",
|
||||
"route": "/services",
|
||||
"status": "pending"
|
||||
},
|
||||
{
|
||||
"slug": "request-lab",
|
||||
"title": "Request Lab",
|
||||
"route": "/requests",
|
||||
"status": "pending"
|
||||
},
|
||||
{
|
||||
"slug": "incident-log",
|
||||
"title": "Incident Log",
|
||||
"route": "/incidents",
|
||||
"status": "pending"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,495 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Request Lab | XTransit Operations</title>
|
||||
<link rel="stylesheet" href="./theme.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="preview-root">
|
||||
<header class="preview-header">
|
||||
<div class="preview-header__brand">
|
||||
<span class="preview-header__logo" aria-hidden="true">XT</span>
|
||||
<span>XTransit Operations</span>
|
||||
</div>
|
||||
<div class="preview-header__actions">
|
||||
<label class="preview-header__search" aria-label="Search operations">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
|
||||
<path
|
||||
d="m16 16 4.2 4.2"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<input
|
||||
class="preview-form__input"
|
||||
type="search"
|
||||
placeholder="Search operations"
|
||||
value=""
|
||||
/>
|
||||
</label>
|
||||
<a class="preview-header__action" href="#" aria-label="Notifications">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="preview-avatar" aria-label="Signed in as Maya Chen"
|
||||
>MC</span
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="preview-nav" aria-label="Primary navigation">
|
||||
<a class="preview-nav__link" href="./command-center.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect
|
||||
x="4"
|
||||
y="4"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="14"
|
||||
y="4"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="4"
|
||||
y="14"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect>
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="1"
|
||||
stroke-width="1.8"
|
||||
></rect></svg
|
||||
>Command Center</a
|
||||
>
|
||||
<a class="preview-nav__link" href="./service-catalog.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 5h14v14H5zM8 9h8M8 13h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Service Catalog</a
|
||||
>
|
||||
<a
|
||||
class="preview-nav__link preview-nav__link--active"
|
||||
href="#"
|
||||
aria-current="page"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 6h16M4 12h10M4 18h16"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
<circle cx="17" cy="12" r="2" stroke-width="1.8"></circle></svg
|
||||
>Request Lab</a
|
||||
>
|
||||
<a class="preview-nav__link" href="./incident-log.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 4 21 20H3L12 4Z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M12 9v5M12 17h.01"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path></svg
|
||||
>Incident Log</a
|
||||
>
|
||||
</nav>
|
||||
|
||||
<div class="preview-shell">
|
||||
<aside class="preview-sidebar" aria-label="Operations sections">
|
||||
<div class="preview-sidebar__section">Workspace</div>
|
||||
<a class="preview-sidebar__item" href="./command-center.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 13h6V4H4v9ZM14 20h6v-9h-6v9ZM14 8h6V4h-6v4ZM4 20h6v-3H4v3Z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Command Center</a
|
||||
>
|
||||
<a class="preview-sidebar__item" href="./service-catalog.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M7 4h10v4H7zM4 10h16v10H4zM8 14h8M8 17h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
></path></svg
|
||||
>Service Catalog</a
|
||||
>
|
||||
<a
|
||||
class="preview-sidebar__item preview-sidebar__item--active"
|
||||
href="#"
|
||||
aria-current="page"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h8"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Request Lab</a
|
||||
>
|
||||
<a class="preview-sidebar__item" href="./incident-log.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 4 21 20H3L12 4Z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M12 9v5M12 17h.01"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path></svg
|
||||
>Incident Log</a
|
||||
>
|
||||
<div class="preview-sidebar__section">Tools</div>
|
||||
<a class="preview-sidebar__item" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
<circle cx="12" cy="12" r="3.5" stroke-width="1.8"></circle></svg
|
||||
>Environment</a
|
||||
>
|
||||
</aside>
|
||||
|
||||
<main class="preview-main">
|
||||
<div class="preview-section-title">
|
||||
<div>
|
||||
<div class="preview-section-title__h">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 5h16v14H4zM8 9h8M8 13h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
Request Lab
|
||||
</div>
|
||||
<div class="preview-section-title__hint">
|
||||
Run a bounded request against an approved upstream route and
|
||||
inspect timing.
|
||||
</div>
|
||||
</div>
|
||||
<span class="preview-badge"
|
||||
><span class="preview-badge__dot"></span>Authenticated
|
||||
session</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="preview-split">
|
||||
<form class="preview-form" aria-label="Request builder">
|
||||
<div class="preview-section-title">
|
||||
<div class="preview-section-title__h">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 6h14M5 12h9M5 18h14"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
<circle cx="17" cy="12" r="2" stroke-width="1.8"></circle>
|
||||
</svg>
|
||||
Request builder
|
||||
</div>
|
||||
<span class="preview-section-title__hint"
|
||||
>Allowlisted routes only</span
|
||||
>
|
||||
</div>
|
||||
<div class="preview-form__field">
|
||||
<label class="preview-form__label" for="preset">Preset</label>
|
||||
<select class="preview-form__select" id="preset">
|
||||
<option>
|
||||
Transit API GET /schedules/overview Schedule summary
|
||||
</option>
|
||||
<option>Transit API GET /admin/drivers Driver roster</option>
|
||||
<option>Employee API GET /health Service health</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="preview-two-column">
|
||||
<div class="preview-form__field">
|
||||
<label class="preview-form__label" for="service"
|
||||
>Service</label
|
||||
>
|
||||
<select class="preview-form__select" id="service">
|
||||
<option>Transit API</option>
|
||||
<option>Employee API</option>
|
||||
<option>Auth API</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="preview-form__field">
|
||||
<label class="preview-form__label" for="method">Method</label>
|
||||
<select class="preview-form__select" id="method">
|
||||
<option>GET</option>
|
||||
<option>POST</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-form__field">
|
||||
<label class="preview-form__label" for="path">Path</label>
|
||||
<input
|
||||
class="preview-form__input"
|
||||
id="path"
|
||||
type="text"
|
||||
value="/schedules/overview"
|
||||
/>
|
||||
</div>
|
||||
<div class="preview-two-column">
|
||||
<div class="preview-form__field">
|
||||
<label class="preview-form__label" for="timeout"
|
||||
>Timeout</label
|
||||
>
|
||||
<input
|
||||
class="preview-form__input"
|
||||
id="timeout"
|
||||
type="number"
|
||||
value="5000"
|
||||
/>
|
||||
<span class="preview-form__hint">Milliseconds</span>
|
||||
</div>
|
||||
<div class="preview-form__field">
|
||||
<label class="preview-form__label" for="query"
|
||||
>Query fields</label
|
||||
>
|
||||
<input
|
||||
class="preview-form__input"
|
||||
id="query"
|
||||
type="text"
|
||||
value="date=2026-09-20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-form__field">
|
||||
<label class="preview-form__label" for="body">Body</label>
|
||||
<textarea
|
||||
class="preview-form__textarea"
|
||||
id="body"
|
||||
placeholder="No request body for this GET route"
|
||||
></textarea>
|
||||
<span class="preview-form__hint"
|
||||
>Safe limit: 10 requests per minute, 5-second timeout.</span
|
||||
>
|
||||
</div>
|
||||
<section class="preview-error" aria-label="Request response">
|
||||
<svg
|
||||
class="preview-icon preview-icon--lg preview-error__icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 4 21 20H3L12 4Z"
|
||||
stroke-width="1.8"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M12 9v5M12 17h.01"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="preview-error__body">
|
||||
<div class="preview-error__title">Request blocked</div>
|
||||
<div class="preview-error__text">
|
||||
Admin role required for /admin/drivers
|
||||
</div>
|
||||
<button
|
||||
class="preview-btn preview-btn--secondary"
|
||||
type="button"
|
||||
>
|
||||
Retry request
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<section class="preview-table-wrap" aria-labelledby="history-title">
|
||||
<div
|
||||
class="preview-section-title"
|
||||
style="padding: 20px 20px 12px"
|
||||
>
|
||||
<div class="preview-section-title__h" id="history-title">
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 5h16v15H4zM8 9h8M8 13h5M8 17h8"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
Request history
|
||||
</div>
|
||||
<span class="preview-section-title__hint"
|
||||
>Today, 09:00–12:00 UTC</span
|
||||
>
|
||||
</div>
|
||||
<table class="preview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Request</th>
|
||||
<th>Status</th>
|
||||
<th>Duration</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>GET</strong> /schedules/overview</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>200 OK</span
|
||||
>
|
||||
</td>
|
||||
<td>214 ms</td>
|
||||
<td>11:42:18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>GET</strong> /admin/drivers</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--danger"
|
||||
>403</span
|
||||
>
|
||||
</td>
|
||||
<td>88 ms</td>
|
||||
<td>11:36:02</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>GET</strong> /health</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>200 OK</span
|
||||
>
|
||||
</td>
|
||||
<td>42 ms</td>
|
||||
<td>11:20:44</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>GET</strong> /schedules/overview</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>200 OK</span
|
||||
>
|
||||
</td>
|
||||
<td>197 ms</td>
|
||||
<td>10:58:09</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>GET</strong> /admin/drivers</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--danger"
|
||||
>403</span
|
||||
>
|
||||
</td>
|
||||
<td>91 ms</td>
|
||||
<td>10:41:27</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="preview-action-bar">
|
||||
<span class="preview-form__hint"
|
||||
>Requests are logged to the operations audit trail.</span
|
||||
>
|
||||
<button class="preview-btn preview-btn--secondary" type="button">
|
||||
Clear
|
||||
</button>
|
||||
<button class="preview-btn preview-btn--primary" type="submit">
|
||||
<svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="m5 12 5 5L20 7"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Run request
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,608 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Service Catalog | Transit Operations</title>
|
||||
<link rel="stylesheet" href="./theme.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="preview-root">
|
||||
<header class="preview-header">
|
||||
<div class="preview-header__brand">
|
||||
<div class="preview-header__logo" aria-hidden="true">TO</div>
|
||||
<span>Transit Operations</span>
|
||||
</div>
|
||||
<div class="preview-header__actions">
|
||||
<label
|
||||
class="preview-form__input"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
min-width: 220px;
|
||||
"
|
||||
aria-label="Search services"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
|
||||
<path
|
||||
d="m16 16 4.5 4.5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search services"
|
||||
style="
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<a class="preview-header__action" href="#" aria-label="Notifications">
|
||||
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="preview-avatar" aria-label="Signed in as Olivia Moore">
|
||||
OM
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="preview-nav" aria-label="Primary navigation">
|
||||
<a class="preview-nav__link" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 13h6V4H4v9Zm10 7h6v-9h-6v9ZM4 20h6v-3H4v3Zm10-12h6V4h-6v4Z"
|
||||
stroke-width="1.7"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Command Center</a
|
||||
>
|
||||
<a
|
||||
class="preview-nav__link preview-nav__link--active"
|
||||
href="./service-catalog.html"
|
||||
aria-current="page"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h3"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Service Catalog</a
|
||||
>
|
||||
<a class="preview-nav__link" href="./request-lab.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Request Lab</a
|
||||
>
|
||||
<a class="preview-nav__link" href="./incident-log.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="m12 4 8 16H4L12 4Zm0 5v5M12 17v.5"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Incident Log</a
|
||||
>
|
||||
</nav>
|
||||
|
||||
<div class="preview-shell">
|
||||
<aside class="preview-sidebar" aria-label="Service catalog navigation">
|
||||
<div class="preview-sidebar__section">Monitor</div>
|
||||
<a class="preview-sidebar__item" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 13h6V4H4v9Zm10 7h6v-9h-6v9ZM4 20h6v-3H4v3Zm10-12h6V4h-6v4Z"
|
||||
stroke-width="1.7"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Command Center</a
|
||||
>
|
||||
<a
|
||||
class="preview-sidebar__item preview-sidebar__item--active"
|
||||
href="./service-catalog.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h3"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Service Catalog</a
|
||||
>
|
||||
<a class="preview-sidebar__item" href="./request-lab.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Request Lab</a
|
||||
>
|
||||
<a class="preview-sidebar__item" href="./incident-log.html"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="m12 4 8 16H4L12 4Zm0 5v5M12 17v.5"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Incident Log</a
|
||||
>
|
||||
<div class="preview-sidebar__section">Workspace</div>
|
||||
<a class="preview-sidebar__item" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
></path></svg
|
||||
>Route mappings</a
|
||||
>
|
||||
<a class="preview-sidebar__item" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3 4 7v5c0 4.5 3.4 7.6 8 9 4.6-1.4 8-4.5 8-9V7l-8-4Zm0 5v4m0 4v.5"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Access policies</a
|
||||
>
|
||||
</aside>
|
||||
|
||||
<main class="preview-main">
|
||||
<div class="preview-section-title">
|
||||
<div>
|
||||
<div
|
||||
class="preview-section-title__h"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M6 4h12v16H6zM9 8h6M9 12h6M9 16h3"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Service Catalog
|
||||
</div>
|
||||
<p class="preview-card__body">
|
||||
Inspect upstream capabilities and representative route coverage
|
||||
across the transit platform.
|
||||
</p>
|
||||
</div>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
><span class="preview-badge__dot"></span>5 services
|
||||
monitored</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="preview-tabs" role="tablist" aria-label="Catalog views">
|
||||
<a
|
||||
class="preview-tabs__tab preview-tabs__tab--active"
|
||||
href="#catalog"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
>Catalog</a
|
||||
>
|
||||
<a
|
||||
class="preview-tabs__tab"
|
||||
href="#unmapped"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
>Unmapped routes <span class="preview-badge">0</span></a
|
||||
>
|
||||
</div>
|
||||
|
||||
<section id="catalog" aria-label="Service catalog">
|
||||
<div class="preview-section-title" style="margin-bottom: 12px">
|
||||
<h2
|
||||
class="preview-section-title__h"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 6h16v12H4zM8 10h8M8 14h5"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Monitored services
|
||||
</h2>
|
||||
<span class="preview-section-title__hint"
|
||||
>Last inventory sync 09:42 UTC</span
|
||||
>
|
||||
</div>
|
||||
<div class="preview-card-list">
|
||||
<article class="preview-card">
|
||||
<div class="preview-section-title">
|
||||
<h3
|
||||
class="preview-card__title"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h3"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Auth API
|
||||
</h3>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Healthy</span
|
||||
>
|
||||
</div>
|
||||
<p class="preview-card__body">
|
||||
Identity and session access for operations staff.
|
||||
</p>
|
||||
<p class="preview-card__meta">4 endpoints · 2 route mappings</p>
|
||||
</article>
|
||||
<article class="preview-card">
|
||||
<div class="preview-section-title">
|
||||
<h3
|
||||
class="preview-card__title"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
></path></svg
|
||||
>Employee API
|
||||
</h3>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Healthy</span
|
||||
>
|
||||
</div>
|
||||
<p class="preview-card__body">
|
||||
Staff records, roles, and workforce administration.
|
||||
</p>
|
||||
<p class="preview-card__meta">7 endpoints · 1 route mapping</p>
|
||||
</article>
|
||||
<article class="preview-card">
|
||||
<div class="preview-section-title">
|
||||
<h3
|
||||
class="preview-card__title"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 17h16M5 17V8h14v9M8 8V5h8v3M8 20h8"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Transit API
|
||||
</h3>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Healthy</span
|
||||
>
|
||||
</div>
|
||||
<p class="preview-card__body">
|
||||
Routes, stops, fleet data, and daily schedules.
|
||||
</p>
|
||||
<p class="preview-card__meta">
|
||||
18 endpoints · 2 route mappings
|
||||
</p>
|
||||
</article>
|
||||
<article class="preview-card">
|
||||
<div class="preview-section-title">
|
||||
<h3
|
||||
class="preview-card__title"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 4h14v16H5zM8 8h8M8 12h5M8 16h3"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Error Log API
|
||||
</h3>
|
||||
<span class="preview-badge preview-badge--warning"
|
||||
>Degraded</span
|
||||
>
|
||||
</div>
|
||||
<p class="preview-card__body">
|
||||
Centralized application errors and diagnostic events.
|
||||
</p>
|
||||
<p class="preview-card__meta">3 endpoints · 1 route mapping</p>
|
||||
</article>
|
||||
<article class="preview-card">
|
||||
<div class="preview-section-title">
|
||||
<h3
|
||||
class="preview-card__title"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 5h16v14H4zM8 9h8M8 13h5M8 17h3"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Admin UI
|
||||
</h3>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Healthy</span
|
||||
>
|
||||
</div>
|
||||
<p class="preview-card__body">
|
||||
Signed-in administration workspace for transit teams.
|
||||
</p>
|
||||
<p class="preview-card__meta">12 screens · 0 route mappings</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="coverage-title">
|
||||
<div class="preview-section-title" style="margin-bottom: 12px">
|
||||
<h2
|
||||
id="coverage-title"
|
||||
class="preview-section-title__h"
|
||||
style="display: flex; align-items: center; gap: 8px"
|
||||
>
|
||||
<svg
|
||||
class="preview-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M5 5h14v14H5zM8 9h8M8 13h8M8 17h4"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Representative route coverage
|
||||
</h2>
|
||||
<span class="preview-section-title__hint"
|
||||
>4 mapped capabilities</span
|
||||
>
|
||||
</div>
|
||||
<div class="preview-table-wrap">
|
||||
<table class="preview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Service</th>
|
||||
<th>Capability</th>
|
||||
<th>Route</th>
|
||||
<th>Access</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Transit API</strong></td>
|
||||
<td>Daily schedules</td>
|
||||
<td><code>/schedule/daily</code></td>
|
||||
<td><span class="preview-badge">Authenticated</span></td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Mapped</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Transit API</strong></td>
|
||||
<td>Route detail</td>
|
||||
<td><code>/routes/:routeId</code></td>
|
||||
<td><span class="preview-badge">Authenticated</span></td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Mapped</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Employee API</strong></td>
|
||||
<td>Create employee</td>
|
||||
<td><code>/createemployee</code></td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--warning"
|
||||
>Admin</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Mapped</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Error Log API</strong></td>
|
||||
<td>Read error log</td>
|
||||
<td><code>/error_log</code></td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--warning"
|
||||
>Admin</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<span class="preview-badge preview-badge--success"
|
||||
>Mapped</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="unmapped"
|
||||
class="preview-empty"
|
||||
aria-label="Unmapped routes empty state"
|
||||
>
|
||||
<div class="preview-empty__icon">
|
||||
<svg
|
||||
class="preview-icon preview-icon--lg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M4 5h11v14H4zM8 9h3M8 13h3M17 15l4 4M15 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="preview-empty__title">No unmapped routes</div>
|
||||
<div class="preview-empty__body">
|
||||
All discovered upstream capabilities are currently represented in
|
||||
the catalog.
|
||||
</div>
|
||||
<a class="preview-btn preview-btn--primary" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 5v14M5 12h14"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
></path></svg
|
||||
>Add route mapping</a
|
||||
>
|
||||
</section>
|
||||
|
||||
<div class="preview-action-bar">
|
||||
<span class="preview-section-title__hint"
|
||||
>Catalog source: route inventory and service manifests</span
|
||||
>
|
||||
<a class="preview-btn preview-btn--secondary" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 4v11m0 0 4-4m-4 4-4-4M5 19h14"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path></svg
|
||||
>Export catalog</a
|
||||
>
|
||||
<a class="preview-btn preview-btn--primary" href="#"
|
||||
><svg
|
||||
class="preview-icon preview-icon--sm"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 5v14M5 12h14"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
></path></svg
|
||||
>Add route mapping</a
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<footer class="preview-footer">
|
||||
<span>Transit Operations Console</span
|
||||
><span>Environment: Production · Read-only catalog</span>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,592 @@
|
||||
:root {
|
||||
--color-primary: #155eef;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-accent: #f59e0b;
|
||||
--color-on-accent: #172033;
|
||||
--color-surface: #f6f8fb;
|
||||
--color-surface-raised: #ffffff;
|
||||
--color-surface-sunken: #eef2f7;
|
||||
--color-text: #172033;
|
||||
--color-muted: #667085;
|
||||
--color-border: #d9e0ea;
|
||||
--color-success: #16803c;
|
||||
--color-warning: #b54708;
|
||||
--color-danger: #d92d20;
|
||||
--font-body: "Segoe UI Variable", "Segoe UI", sans-serif;
|
||||
--font-heading: var(--font-body);
|
||||
--text-xs: 11px;
|
||||
--text-sm: 13px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 17px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 38px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 28px;
|
||||
--space-7: 40px;
|
||||
--space-8: 56px;
|
||||
--shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06);
|
||||
--shadow-md: 0 5px 16px rgba(23, 32, 51, 0.1);
|
||||
--shadow-lg: 0 16px 32px rgba(23, 32, 51, 0.14);
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-heading);
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.preview-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.preview-shell {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.preview-main {
|
||||
flex: 1;
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
min-width: 0;
|
||||
}
|
||||
.preview-split,
|
||||
.preview-two-column {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
.preview-split {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
.preview-two-column {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.preview-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-3) var(--space-6);
|
||||
background: var(--color-surface-raised);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.preview-header__brand,
|
||||
.preview-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.preview-header__brand {
|
||||
font-weight: 700;
|
||||
}
|
||||
.preview-header__logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-header__action {
|
||||
color: var(--color-muted);
|
||||
display: inline-flex;
|
||||
}
|
||||
.preview-nav {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-2) var(--space-6);
|
||||
background: var(--color-surface-raised);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.preview-nav__link,
|
||||
.preview-sidebar__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--color-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.preview-nav__link {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-nav__link--active,
|
||||
.preview-sidebar__item--active {
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-sidebar {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-4) var(--space-3);
|
||||
background: var(--color-surface-sunken);
|
||||
border-right: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.preview-sidebar__section {
|
||||
padding: var(--space-3) var(--space-2) var(--space-1);
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.preview-sidebar__item {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: var(--space-6);
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(135deg, #155eef, #174ea6);
|
||||
color: var(--color-on-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.preview-hero__mesh {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.35;
|
||||
background:
|
||||
radial-gradient(60% 80% at 100% 0%, #7aa7ff, transparent 70%),
|
||||
radial-gradient(60% 80% at 0% 100%, #0e3b8e, transparent 70%);
|
||||
}
|
||||
.preview-hero > *:not(.preview-hero__mesh) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.preview-hero__eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.preview-hero__title {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 700;
|
||||
max-width: 28ch;
|
||||
}
|
||||
.preview-hero__subtitle {
|
||||
max-width: 62ch;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.preview-hero__actions,
|
||||
.preview-action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.preview-kpi-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.preview-kpi,
|
||||
.preview-card,
|
||||
.preview-form,
|
||||
.preview-empty,
|
||||
.preview-table-wrap {
|
||||
background: var(--color-surface-raised);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.preview-kpi {
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.preview-kpi__label {
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.preview-kpi__value {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
}
|
||||
.preview-kpi__delta {
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.preview-kpi__delta--up {
|
||||
color: var(--color-success);
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-section-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.preview-section-title__h {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
}
|
||||
.preview-section-title__hint {
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.preview-card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.preview-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.preview-card {
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
.preview-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.preview-card__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-card__body,
|
||||
.preview-card__meta {
|
||||
margin: 0;
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-card__meta {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.preview-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: var(--radius-pill);
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
color: var(--color-primary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-badge--success {
|
||||
background: #e7f6ec;
|
||||
color: var(--color-success);
|
||||
}
|
||||
.preview-badge--warning {
|
||||
background: #fff4e5;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
.preview-badge--danger {
|
||||
background: #feeceb;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.preview-badge__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.preview-form {
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.preview-form__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.preview-form__label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-form__hint {
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.preview-form__input,
|
||||
.preview-form__textarea,
|
||||
.preview-form__select {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font: inherit;
|
||||
}
|
||||
.preview-form__textarea {
|
||||
min-height: 96px;
|
||||
resize: vertical;
|
||||
}
|
||||
.preview-form__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.preview-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
font: inherit;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-btn--primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.preview-btn--secondary {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.preview-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.preview-table-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.preview-table th,
|
||||
.preview-table td {
|
||||
text-align: left;
|
||||
padding: var(--space-3);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-table th {
|
||||
background: var(--color-surface-sunken);
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.preview-table tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.preview-action-bar {
|
||||
justify-content: flex-end;
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
.preview-tabs {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.preview-tabs__tab {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-tabs__tab--active {
|
||||
color: var(--color-primary);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-7) var(--space-4);
|
||||
text-align: center;
|
||||
}
|
||||
.preview-empty__icon {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--radius-pill);
|
||||
background: #e6eeff;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.preview-empty__title {
|
||||
font-weight: 700;
|
||||
}
|
||||
.preview-empty__body {
|
||||
max-width: 40ch;
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-error {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid #f4b8b4;
|
||||
border-radius: var(--radius-md);
|
||||
background: #fff4f3;
|
||||
}
|
||||
.preview-error__icon {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.preview-error__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.preview-error__title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
.preview-error__text {
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.preview-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-xs);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
.preview-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
}
|
||||
.preview-icon--sm {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.preview-icon--lg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.preview-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--color-primary);
|
||||
background: #e6eeff;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.preview-skeleton {
|
||||
background: linear-gradient(90deg, #e8edf4 25%, #f7f9fc 37%, #e8edf4 63%);
|
||||
background-size: 400% 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
animation: preview-shimmer 1.4s ease infinite;
|
||||
}
|
||||
.preview-skeleton--line {
|
||||
height: 12px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.preview-skeleton--title {
|
||||
height: 18px;
|
||||
width: 40%;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.preview-skeleton--block {
|
||||
height: 96px;
|
||||
}
|
||||
@keyframes preview-shimmer {
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.preview-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.preview-main {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
.preview-nav {
|
||||
overflow-x: auto;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
}
|
||||
.preview-split,
|
||||
.preview-two-column {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.preview-header {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
.preview-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.preview-card,
|
||||
.preview-skeleton {
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user