Merge integration/rpa-dashboard-skills (ticket 03) into ticket 02
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
commit
1b6ae23573
15 files changed
+1213
-14
No files matched your search
@@ -0,0 +1,10 @@
|
||||
# Fixture (c): web project with an existing frontend
|
||||
|
||||
A plain HTML site in `web/` with its own teal theme: light and dark tokens in
|
||||
`web/css/theme.css`, layout in `web/css/app.css`, logic in `web/js/app.js`. No bot.
|
||||
|
||||
The no-AI skill should report this frontend (location, stack, colours), ask keep or
|
||||
restyle, never ask desktop or web, and build a dashboard page on sample data.
|
||||
- Keep: no colour question; the page uses the theme's tokens and fonts; no existing
|
||||
file changes.
|
||||
- Restyle: asks for colours; only token lines in the existing files change.
|
||||
@@ -0,0 +1,18 @@
|
||||
/* Layout and components. Colours and fonts come from theme.css. */
|
||||
* { box-sizing: border-box; margin: 0; }
|
||||
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }
|
||||
h1, h2 { font-family: var(--font-heading); }
|
||||
.topbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--color-brand); color: #ffffff; }
|
||||
.topbar nav { margin-left: auto; display: flex; gap: 12px; }
|
||||
.topbar a { color: #ffffff; text-decoration: none; }
|
||||
.page { max-width: 960px; margin: 24px auto; padding: 0 16px; }
|
||||
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; }
|
||||
.button { background: var(--color-brand); color: #ffffff; border: 0; border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
|
||||
.button.secondary { background: var(--color-brand-tint); color: var(--color-brand-strong); }
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
|
||||
th { text-align: left; background: var(--color-surface-alt); color: var(--color-text-muted); }
|
||||
th, td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
|
||||
.tag { padding: 2px 8px; border-radius: 999px; color: #ffffff; font-size: 12px; }
|
||||
.tag.ok { background: var(--color-success); }
|
||||
.tag.late { background: var(--color-warning); }
|
||||
.tag.failed { background: var(--color-danger); }
|
||||
@@ -0,0 +1,33 @@
|
||||
/* Field Ops Portal theme. Every colour and font the site uses comes from here. */
|
||||
:root {
|
||||
--color-brand: #0f766e;
|
||||
--color-brand-strong: #115e59;
|
||||
--color-brand-tint: #ccfbf1;
|
||||
--color-bg: #f8fafc;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-alt: #f1f5f9;
|
||||
--color-border: #e2e8f0;
|
||||
--color-text: #0f172a;
|
||||
--color-text-muted: #64748b;
|
||||
--color-success: #15803d;
|
||||
--color-warning: #b45309;
|
||||
--color-danger: #b91c1c;
|
||||
--font-sans: "Trebuchet MS", "Segoe UI", sans-serif;
|
||||
--font-heading: Georgia, "Times New Roman", serif;
|
||||
--radius: 6px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-brand: #0d9488;
|
||||
--color-brand-strong: #134e4a;
|
||||
--color-brand-tint: #134e4a;
|
||||
--color-bg: #0b1120;
|
||||
--color-surface: #111827;
|
||||
--color-surface-alt: #1f2937;
|
||||
--color-border: #334155;
|
||||
--color-text: #e2e8f0;
|
||||
--color-text-muted: #94a3b8;
|
||||
--color-success: #22c55e;
|
||||
--color-warning: #f59e0b;
|
||||
--color-danger: #ef4444;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Field Ops Portal</title>
|
||||
<link rel="stylesheet" href="css/theme.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<h1>Field Ops Portal</h1>
|
||||
<nav><a href="index.html">Jobs</a><button class="button secondary" id="theme-btn">Dark mode</button></nav>
|
||||
</header>
|
||||
<main class="page">
|
||||
<section class="card">
|
||||
<h2>Today's jobs</h2>
|
||||
<table>
|
||||
<thead><tr><th>Job</th><th>Site</th><th>Status</th></tr></thead>
|
||||
<tbody id="jobs"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
// Field Ops Portal: job list and dark toggle.
|
||||
const JOBS = [
|
||||
{ job: "J-101", site: "North depot", status: "Done", tag: "ok" },
|
||||
{ job: "J-102", site: "Harbour road", status: "Late", tag: "late" },
|
||||
{ job: "J-103", site: "West yard", status: "Failed", tag: "failed" },
|
||||
];
|
||||
|
||||
document.getElementById("jobs").innerHTML = JOBS.map(
|
||||
(j) => `<tr><td>${j.job}</td><td>${j.site}</td><td><span class="tag ${j.tag}">${j.status}</span></td></tr>`
|
||||
).join("");
|
||||
|
||||
document.getElementById("theme-btn").onclick = () => {
|
||||
const root = document.documentElement;
|
||||
root.dataset.theme = root.dataset.theme === "dark" ? "light" : "dark";
|
||||
};
|
||||
Reference in new issue
Block a user