Initial portal commit: landing + 9 AI-powered apps
Apps: - dwg-rooms: extract room numbers from DWG/DXF - dwg-counting: count symbols in PDF drawings (OpenCV template matching) - contract-check: review PDF contracts against a checklist (Claude vision + Tesseract OCR fallback) - email-drafter: bullet notes → polished Czech/English business emails - invoice-extractor: PDF/image invoice → structured data → Excel - translator: Czech-first translator across 19 languages with tone control - vv-check: find inconsistent unit prices across VV sheets in one workbook - vv-compare: diff original vs new VV files (changes / added / removed) - feature-request: portal users submit ideas + sample files Infrastructure: - LiteLLM gateway with per-app virtual keys + budgets - Langfuse observability - Geist font, shared theme, cross-subdomain back link + theme sync via cookie/URL - Caddy reverse proxy on *.klas.chat
This commit is contained in:
Ondřej Glaser
264
contract-check/static/app.js
Normal file
264
contract-check/static/app.js
Normal file
@@ -0,0 +1,264 @@
|
||||
// Contract check frontend
|
||||
(() => {
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const sections = {
|
||||
setup: $("s-setup"),
|
||||
processing: $("s-processing"),
|
||||
results: $("s-results"),
|
||||
};
|
||||
const show = (name) => {
|
||||
for (const [k, el] of Object.entries(sections)) el.classList.toggle("hidden", k !== name);
|
||||
};
|
||||
|
||||
let state = {
|
||||
jobId: null,
|
||||
checklist: [],
|
||||
analysis: null,
|
||||
pendingFile: null, // File chosen by user but not yet uploaded
|
||||
};
|
||||
let nextCustomId = 1;
|
||||
|
||||
// ── Load default checklist ──
|
||||
async function loadChecklist() {
|
||||
try {
|
||||
const r = await fetch("/api/checklist");
|
||||
const data = await r.json();
|
||||
state.checklist = (data.items || []).map((it) => ({
|
||||
...it,
|
||||
checked: it.default !== false,
|
||||
}));
|
||||
renderChecklist();
|
||||
} catch (err) {
|
||||
alert("Nepodařilo se načíst kontrolní seznam: " + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function renderChecklist() {
|
||||
const c = $("checklist");
|
||||
c.innerHTML = "";
|
||||
for (const item of state.checklist) {
|
||||
const div = document.createElement("label");
|
||||
div.className = "checklist-item" + (item.custom ? " custom" : "");
|
||||
div.innerHTML = `
|
||||
<input type="checkbox" ${item.checked ? "checked" : ""}>
|
||||
<div class="checklist-item-body">
|
||||
<div class="checklist-item-label">${escapeHtml(item.label)}</div>
|
||||
${item.hint ? `<div class="checklist-item-hint">${escapeHtml(item.hint)}</div>` : ""}
|
||||
</div>
|
||||
${item.custom ? `<button class="checklist-remove" type="button" title="Odstranit">×</button>` : ""}
|
||||
`;
|
||||
const cb = div.querySelector("input");
|
||||
cb.addEventListener("change", () => {
|
||||
item.checked = cb.checked;
|
||||
updateRunButton();
|
||||
});
|
||||
const rm = div.querySelector(".checklist-remove");
|
||||
if (rm) {
|
||||
rm.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
state.checklist = state.checklist.filter((x) => x.id !== item.id);
|
||||
renderChecklist();
|
||||
updateRunButton();
|
||||
});
|
||||
}
|
||||
c.appendChild(div);
|
||||
}
|
||||
updateRunButton();
|
||||
}
|
||||
|
||||
$("check-all-btn").addEventListener("click", () => {
|
||||
for (const it of state.checklist) it.checked = true;
|
||||
renderChecklist();
|
||||
});
|
||||
$("uncheck-all-btn").addEventListener("click", () => {
|
||||
for (const it of state.checklist) it.checked = false;
|
||||
renderChecklist();
|
||||
});
|
||||
|
||||
$("add-item-form").addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
const input = $("add-item-input");
|
||||
const label = input.value.trim();
|
||||
if (!label) return;
|
||||
state.checklist.push({
|
||||
id: `custom_${nextCustomId++}`,
|
||||
label,
|
||||
hint: "",
|
||||
checked: true,
|
||||
custom: true,
|
||||
});
|
||||
input.value = "";
|
||||
renderChecklist();
|
||||
});
|
||||
|
||||
// ── File selection (just stores the file, doesn't upload yet) ──
|
||||
const fileInput = $("file-input");
|
||||
const dropZone = $("drop-zone");
|
||||
$("browse-btn").addEventListener("click", () => fileInput.click());
|
||||
fileInput.addEventListener("change", (e) => e.target.files[0] && setFile(e.target.files[0]));
|
||||
["dragenter", "dragover"].forEach((ev) =>
|
||||
dropZone.addEventListener(ev, (e) => { e.preventDefault(); dropZone.classList.add("drag-over"); }));
|
||||
["dragleave", "drop"].forEach((ev) =>
|
||||
dropZone.addEventListener(ev, (e) => { e.preventDefault(); dropZone.classList.remove("drag-over"); }));
|
||||
dropZone.addEventListener("drop", (e) => e.dataTransfer.files[0] && setFile(e.dataTransfer.files[0]));
|
||||
|
||||
function setFile(file) {
|
||||
state.pendingFile = file;
|
||||
$("file-info-name").textContent = file.name;
|
||||
$("file-info").classList.remove("hidden");
|
||||
dropZone.classList.add("compact");
|
||||
updateRunButton();
|
||||
}
|
||||
|
||||
$("file-info-clear").addEventListener("click", () => {
|
||||
state.pendingFile = null;
|
||||
fileInput.value = "";
|
||||
$("file-info").classList.add("hidden");
|
||||
dropZone.classList.remove("compact");
|
||||
updateRunButton();
|
||||
});
|
||||
|
||||
function updateRunButton() {
|
||||
const hasFile = !!state.pendingFile;
|
||||
const selectedCount = state.checklist.filter((it) => it.checked).length;
|
||||
const btn = $("run-btn");
|
||||
const hint = $("run-hint");
|
||||
// run-hint only exists after a file is selected (lives in the file-info strip)
|
||||
if (!hasFile) {
|
||||
btn.disabled = true;
|
||||
return;
|
||||
}
|
||||
if (selectedCount === 0) {
|
||||
btn.disabled = true;
|
||||
if (hint) hint.textContent = "Vyberte alespoň jednu položku ke kontrole níže.";
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
if (hint) hint.textContent = `Připraveno spustit kontrolu ${selectedCount} bodů.`;
|
||||
}
|
||||
}
|
||||
|
||||
$("run-btn").addEventListener("click", async () => {
|
||||
if (!state.pendingFile) return;
|
||||
const selected = state.checklist.filter((it) => it.checked);
|
||||
if (!selected.length) return;
|
||||
show("processing");
|
||||
$("processing-title").textContent = "Nahrávám smlouvu…";
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append("file", state.pendingFile);
|
||||
const ur = await fetch("/api/upload", { method: "POST", body: fd });
|
||||
if (!ur.ok) throw new Error((await ur.json()).detail || ur.statusText);
|
||||
const upJson = await ur.json();
|
||||
state.jobId = upJson.job_id;
|
||||
|
||||
$("processing-title").textContent = `Analyzuji smlouvu (${selected.length} bodů)…`;
|
||||
const ar = await fetch(`/api/analyze/${state.jobId}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
items: selected.map((it) => ({
|
||||
id: it.id,
|
||||
label: it.label,
|
||||
hint: it.hint || "",
|
||||
})),
|
||||
}),
|
||||
});
|
||||
if (!ar.ok) throw new Error((await ar.json()).detail || ar.statusText);
|
||||
state.analysis = await ar.json();
|
||||
renderResults();
|
||||
show("results");
|
||||
} catch (err) {
|
||||
alert("Chyba: " + err.message);
|
||||
show("setup");
|
||||
}
|
||||
});
|
||||
|
||||
function renderResults() {
|
||||
const a = state.analysis;
|
||||
const items = a.items || [];
|
||||
const usedOcr = !!a._used_ocr;
|
||||
const counts = items.reduce((acc, it) => {
|
||||
acc[it.status || "warning"] = (acc[it.status || "warning"] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
$("results-meta").textContent =
|
||||
`Vyhodnoceno ${items.length} bodů. ` +
|
||||
`OK: ${counts.ok || 0}, Pozor: ${counts.warning || 0}, ` +
|
||||
`Problém: ${counts.problem || 0}, Chybí: ${counts.missing || 0}.`;
|
||||
|
||||
const riskMap = {
|
||||
low: ["Nízké riziko", "risk-low"],
|
||||
medium: ["Střední riziko", "risk-medium"],
|
||||
high: ["Vysoké riziko", "risk-high"],
|
||||
};
|
||||
const r = riskMap[a.risk_level] || ["—", ""];
|
||||
const overall = $("overall-card");
|
||||
const ocrNotice = usedOcr
|
||||
? `<div class="ocr-notice">⚙ Smlouva neměla textovou vrstvu — použito OCR (rozpoznávání textu z obrazu). Stažené PDF bude obsahovat jen souhrnnou stránku, bez zvýraznění v původním textu (kvalita OCR neumožňuje spolehlivé vyhledání citací).</div>`
|
||||
: "";
|
||||
overall.innerHTML = `
|
||||
<div class="risk-badge ${r[1]}">${r[0]}</div>
|
||||
<div class="overall-text">
|
||||
${escapeHtml(a.overall_summary || "")}
|
||||
${ocrNotice}
|
||||
</div>
|
||||
`;
|
||||
|
||||
const findings = $("findings");
|
||||
findings.innerHTML = "";
|
||||
const labelMap = { ok: "OK", warning: "POZOR", problem: "PROBLÉM", missing: "CHYBÍ" };
|
||||
// Sort: problem > warning > missing > ok
|
||||
const order = { problem: 0, warning: 1, missing: 2, ok: 3 };
|
||||
const sorted = [...items].sort((a, b) =>
|
||||
(order[a.status] ?? 9) - (order[b.status] ?? 9)
|
||||
);
|
||||
for (const it of sorted) {
|
||||
const div = document.createElement("div");
|
||||
div.className = `finding status-${it.status || "warning"}`;
|
||||
const excerptsHtml = (it.excerpts || []).map((ex) => `
|
||||
<div class="excerpt">
|
||||
<div class="excerpt-text">
|
||||
${ex.page ? `<span class="excerpt-page">str. ${ex.page}</span>` : ""}
|
||||
<span>„${escapeHtml(ex.text || "")}"</span>
|
||||
</div>
|
||||
${ex.comment ? `<div class="excerpt-comment">${escapeHtml(ex.comment)}</div>` : ""}
|
||||
</div>
|
||||
`).join("");
|
||||
div.innerHTML = `
|
||||
<div class="finding-header">
|
||||
<span class="finding-status">${labelMap[it.status] || it.status || ""}</span>
|
||||
<span class="finding-title">${escapeHtml(it.title || it.label || it.id)}</span>
|
||||
</div>
|
||||
${it.summary ? `<p class="finding-summary">${escapeHtml(it.summary)}</p>` : ""}
|
||||
${excerptsHtml ? `<div class="finding-excerpts">${excerptsHtml}</div>` : ""}
|
||||
`;
|
||||
findings.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
$("download-pdf-btn").addEventListener("click", () => {
|
||||
if (!state.jobId) return;
|
||||
window.location.href = `/api/annotated/${state.jobId}`;
|
||||
});
|
||||
|
||||
$("restart-btn").addEventListener("click", () => {
|
||||
state = {
|
||||
jobId: null,
|
||||
checklist: state.checklist,
|
||||
analysis: null,
|
||||
pendingFile: null,
|
||||
};
|
||||
fileInput.value = "";
|
||||
$("file-info").classList.add("hidden");
|
||||
dropZone.classList.remove("compact");
|
||||
show("setup");
|
||||
updateRunButton();
|
||||
});
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, (c) =>
|
||||
({"&":"&","<":"<",">":">",'"':""","'":"'"}[c]));
|
||||
}
|
||||
|
||||
loadChecklist();
|
||||
})();
|
||||
341
contract-check/static/extra.css
Normal file
341
contract-check/static/extra.css
Normal file
@@ -0,0 +1,341 @@
|
||||
/* Contract-check specific styles */
|
||||
|
||||
/* Compact drop zone after a file is selected (still allows replacing) */
|
||||
.drop-zone.compact {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.drop-zone.compact .drop-icon,
|
||||
.drop-zone.compact .drop-text,
|
||||
.drop-zone.compact .drop-or,
|
||||
.drop-zone.compact .drop-formats {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
margin: 12px 0 24px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-left: 3px solid var(--primary);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
position: sticky;
|
||||
top: 64px; /* sits just below the sticky header */
|
||||
z-index: 10;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.file-info svg { color: var(--primary); flex-shrink: 0; }
|
||||
.file-info-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-info-name {
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-info-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.file-info .btn-link { flex-shrink: 0; }
|
||||
.file-info .btn { flex-shrink: 0; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.file-info { flex-wrap: wrap; }
|
||||
.file-info-text { flex-basis: 100%; }
|
||||
}
|
||||
.btn-link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-link:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
|
||||
|
||||
.run-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 22px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--border-default);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.run-hint {
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
|
||||
.checklist-panel {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
.panel-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.panel-actions { display: flex; gap: 6px; }
|
||||
.btn-sm { padding: 4px 10px; font-size: 12px; }
|
||||
|
||||
.checklist {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.checklist { grid-template-columns: 1fr; }
|
||||
}
|
||||
.checklist-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.checklist-item:hover { background: var(--bg-tertiary); }
|
||||
.checklist-item input[type=checkbox] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 2px;
|
||||
accent-color: var(--primary);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.checklist-item-body { flex: 1; min-width: 0; }
|
||||
.checklist-item-label {
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.35;
|
||||
}
|
||||
.checklist-item-hint {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 2px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.checklist-item.custom .checklist-item-label::after {
|
||||
content: " vlastní";
|
||||
font-size: 10px;
|
||||
color: var(--primary);
|
||||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
margin-left: 6px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.checklist-remove {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-quaternary);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 0 4px;
|
||||
align-self: center;
|
||||
}
|
||||
.checklist-remove:hover { color: #dc2626; }
|
||||
|
||||
.add-item-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid var(--border-default);
|
||||
padding-top: 14px;
|
||||
}
|
||||
.add-item-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-default);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.add-item-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
|
||||
}
|
||||
|
||||
.processing-sub {
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
margin: 8px auto 0;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
/* Results */
|
||||
.overall-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px 22px;
|
||||
margin: 16px 0 22px;
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.risk-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.risk-low { background: rgba(34, 197, 94, 0.12); color: #15803d; }
|
||||
.risk-medium { background: rgba(245, 158, 11, 0.15); color: #b45309; }
|
||||
.risk-high { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
|
||||
.overall-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.ocr-notice {
|
||||
margin-top: 12px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border-left: 3px solid #f59e0b;
|
||||
border-radius: 6px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.findings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.finding {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px 18px;
|
||||
border-left: 4px solid var(--border-default);
|
||||
}
|
||||
.finding.status-ok { border-left-color: #22c55e; }
|
||||
.finding.status-warning { border-left-color: #f59e0b; }
|
||||
.finding.status-problem { border-left-color: #ef4444; }
|
||||
.finding.status-missing { border-left-color: #94a3b8; }
|
||||
|
||||
.finding-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.finding-status {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.status-ok .finding-status { background: rgba(34,197,94,0.14); color: #15803d; }
|
||||
.status-warning .finding-status { background: rgba(245,158,11,0.16); color: #b45309; }
|
||||
.status-problem .finding-status { background: rgba(239,68,68,0.14); color: #b91c1c; }
|
||||
.status-missing .finding-status { background: rgba(148,163,184,0.20); color: #475569; }
|
||||
|
||||
.finding-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.finding-summary {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.55;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
.finding-excerpts {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.excerpt {
|
||||
font-size: 12.5px;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--border-strong);
|
||||
}
|
||||
.excerpt-text {
|
||||
color: var(--text-primary);
|
||||
font-style: italic;
|
||||
}
|
||||
.excerpt-comment {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.excerpt-page {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
padding: 1px 7px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||||
color: var(--primary);
|
||||
border-radius: 999px;
|
||||
font-style: normal;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 6px 12px 6px 10px; border-radius: 8px;
|
||||
font-size: 13px; font-weight: 500; color: var(--text-tertiary);
|
||||
text-decoration: none; border: 0.5px solid var(--border-default);
|
||||
background: var(--bg-primary); flex-shrink: 0;
|
||||
transition: color .15s, border-color .15s, background .15s;
|
||||
}
|
||||
.back-link:hover {
|
||||
color: var(--primary); border-color: var(--primary);
|
||||
background: color-mix(in srgb, var(--primary) 6%, var(--bg-primary));
|
||||
}
|
||||
.back-link svg { opacity: 0.8; }
|
||||
@media (max-width: 640px) {
|
||||
.back-link span { display: none; }
|
||||
.back-link { padding: 6px; }
|
||||
}
|
||||
148
contract-check/static/index.html
Normal file
148
contract-check/static/index.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontrola smluvních podmínek | Colsys AI</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap">
|
||||
<link rel="stylesheet" href="/static/styles.css">
|
||||
<link rel="stylesheet" href="/static/extra.css">
|
||||
<script>
|
||||
(function () {
|
||||
var t = null;
|
||||
try {
|
||||
var p = new URL(window.location.href).searchParams.get("theme");
|
||||
if (p === "dark" || p === "light") t = p;
|
||||
} catch (e) {}
|
||||
if (!t) { try { t = localStorage.getItem("app_theme"); } catch (e) {} }
|
||||
if (!t) {
|
||||
var m = document.cookie.match(/(?:^|;\s*)portal_theme=([^;]+)/);
|
||||
if (m) t = decodeURIComponent(m[1]);
|
||||
}
|
||||
if (t === "dark" || t === "light") {
|
||||
document.documentElement.classList.add(t);
|
||||
try { localStorage.setItem("app_theme", t); } catch (e) {}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="header-inner">
|
||||
<a href="https://ai.klas.chat" class="brand">
|
||||
<span class="brand-icon">C</span>
|
||||
<span class="brand-name">Colsys <span class="brand-ai">AI</span></span>
|
||||
</a>
|
||||
<span class="header-crumb">Kontrola smluvních podmínek</span>
|
||||
<a href="https://ai.klas.chat" class="back-link" title="Zpět na portál">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m15 18-6-6 6-6"/>
|
||||
</svg>
|
||||
<span>Zpět na portál</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
|
||||
<!-- ── Setup ──────────────────────────────── -->
|
||||
<section id="s-setup">
|
||||
<div class="section-intro">
|
||||
<h1 class="section-title">Kontrola smluvních podmínek</h1>
|
||||
<p class="section-desc">
|
||||
Nahrajte PDF smlouvu, vyberte body ke kontrole a spusťte analýzu.
|
||||
Výsledkem je shrnutí s odkazy na strany a PDF se zvýrazněnými pasážemi.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 1. Upload first -->
|
||||
<div id="drop-zone" class="drop-zone">
|
||||
<svg class="drop-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 16.5V4.5m0 0-3.75 3.75M12 4.5l3.75 3.75M4.5 19.5h15"/>
|
||||
</svg>
|
||||
<p class="drop-text">Přetáhněte PDF smlouvu sem</p>
|
||||
<p class="drop-or">nebo</p>
|
||||
<button class="btn btn-secondary" id="browse-btn" type="button">Vybrat soubor</button>
|
||||
<p class="drop-formats">Podporovaný formát: .pdf</p>
|
||||
<input type="file" id="file-input" accept=".pdf" style="display:none">
|
||||
</div>
|
||||
|
||||
<!-- Selected-file row with inline action (shown after pick) -->
|
||||
<div id="file-info" class="file-info hidden">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
<div class="file-info-text">
|
||||
<span class="file-info-name" id="file-info-name"></span>
|
||||
<span class="file-info-hint" id="run-hint">Vyberte body ke kontrole níže (výchozí jsou předvybrané).</span>
|
||||
</div>
|
||||
<button class="btn-link" id="file-info-clear" type="button">Změnit</button>
|
||||
<button class="btn btn-primary" id="run-btn" type="button" disabled>
|
||||
Spustit analýzu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Checklist -->
|
||||
<div class="checklist-panel">
|
||||
<div class="panel-header">
|
||||
<h2 class="panel-title">Co kontrolovat</h2>
|
||||
<div class="panel-actions">
|
||||
<button class="btn btn-secondary btn-sm" id="check-all-btn" type="button">Vybrat vše</button>
|
||||
<button class="btn btn-secondary btn-sm" id="uncheck-all-btn" type="button">Zrušit vše</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="checklist" class="checklist"></div>
|
||||
<form id="add-item-form" class="add-item-row">
|
||||
<input type="text" id="add-item-input" class="add-item-input"
|
||||
placeholder="Vlastní bod ke kontrole (např. „Zákaz vývozu IP" nebo „Penále za pozdní dodání")"
|
||||
autocomplete="off" maxlength="200">
|
||||
<button type="submit" class="btn btn-secondary">
|
||||
+ Přidat
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Processing ────────────────────────── -->
|
||||
<section id="s-processing" class="hidden">
|
||||
<div class="processing-card">
|
||||
<div class="spinner"></div>
|
||||
<h2 class="processing-title" id="processing-title">Analyzuji smlouvu…</h2>
|
||||
<p class="processing-sub">Toto může trvat 30–90 sekund. AI prochází text smlouvy
|
||||
a porovnává ji s vybranými body.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Results ───────────────────────────── -->
|
||||
<section id="s-results" class="hidden">
|
||||
<div class="results-header">
|
||||
<div>
|
||||
<h2 class="results-title">Výsledek kontroly</h2>
|
||||
<p class="results-meta" id="results-meta"></p>
|
||||
</div>
|
||||
<div class="results-actions">
|
||||
<button class="btn btn-secondary" id="restart-btn" type="button">Nová kontrola</button>
|
||||
<button class="btn btn-primary" id="download-pdf-btn" type="button">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v12m0 0-3.75-3.75M12 16.5l3.75-3.75M4.5 19.5h15"/>
|
||||
</svg>
|
||||
Stáhnout PDF se zvýrazněním
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overall-card" id="overall-card"></div>
|
||||
|
||||
<div class="findings" id="findings"></div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
461
contract-check/static/styles.css
Normal file
461
contract-check/static/styles.css
Normal file
@@ -0,0 +1,461 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f9fafb;
|
||||
--bg-tertiary: #f2f4f7;
|
||||
--text-primary: #101828;
|
||||
--text-secondary: #354052;
|
||||
--text-tertiary: #676f83;
|
||||
--text-quaternary: #98a2b2;
|
||||
--border-default: rgb(16 24 40 / 0.08);
|
||||
--border-strong: #d0d5dc;
|
||||
--border-subtle: rgb(16 24 40 / 0.04);
|
||||
--card: #ffffff;
|
||||
--primary: #155aef;
|
||||
--primary-hover: #004aeb;
|
||||
--accent-indigo: #444ce7;
|
||||
--shadow-card: 0 1px 2px rgb(16 24 40 / 0.05);
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
}
|
||||
|
||||
/* Dark theme — applies when (a) user OS prefers dark and no .light override,
|
||||
or (b) :root has explicit .dark class (set by portal_theme cookie). */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) {
|
||||
--bg-primary: #14181f;
|
||||
--bg-secondary: #1a1f29;
|
||||
--bg-tertiary: #232936;
|
||||
--text-primary: #f5f7fa;
|
||||
--text-secondary: #c8ccd5;
|
||||
--text-tertiary: #98a2b2;
|
||||
--text-quaternary: #676f83;
|
||||
--border-default: rgb(255 255 255 / 0.08);
|
||||
--border-strong: #354052;
|
||||
--border-subtle: rgb(255 255 255 / 0.04);
|
||||
--card: #1a1f29;
|
||||
}
|
||||
}
|
||||
:root.dark {
|
||||
--bg-primary: #14181f;
|
||||
--bg-secondary: #1a1f29;
|
||||
--bg-tertiary: #232936;
|
||||
--text-primary: #f5f7fa;
|
||||
--text-secondary: #c8ccd5;
|
||||
--text-tertiary: #98a2b2;
|
||||
--text-quaternary: #676f83;
|
||||
--border-default: rgb(255 255 255 / 0.08);
|
||||
--border-strong: #354052;
|
||||
--border-subtle: rgb(255 255 255 / 0.04);
|
||||
--card: #1a1f29;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ── Header ─────────────────────────────────────── */
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
border-bottom: 0.5px solid var(--border-default);
|
||||
background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.header-inner {
|
||||
max-width: 1280px; /* match portal max-w-7xl so brand doesn't shift */
|
||||
margin: 0 auto;
|
||||
height: 56px; /* portal uses h-14 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px; /* portal px-4 */
|
||||
gap: 16px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.header-inner { padding: 0 32px; } /* portal sm:px-8 */
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.brand-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--accent-indigo) 100%);
|
||||
box-shadow: 0 1px 2px rgb(16 24 40 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: -0.04em;
|
||||
color: white;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 14px; /* tailwind text-sm */
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em; /* tailwind tracking-tight */
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.brand-ai { color: var(--primary); }
|
||||
.header-crumb {
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ── Main ────────────────────────────────────────── */
|
||||
.main {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 24px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.header-inner { padding: 0 16px; }
|
||||
.main { padding: 24px 16px 60px; }
|
||||
}
|
||||
|
||||
/* ── Section intro ───────────────────────────────── */
|
||||
.section-intro { margin-bottom: 24px; }
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-desc {
|
||||
color: var(--text-tertiary);
|
||||
max-width: 580px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── Examples panel ──────────────────────────────── */
|
||||
.examples-panel {
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--card);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.examples-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.examples-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.examples-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.examples-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.examples-list:empty::before {
|
||||
content: "Zatím žádné vzory — přidejte alespoň jeden níže";
|
||||
font-size: 12px;
|
||||
color: var(--text-quaternary);
|
||||
font-style: italic;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.example-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: color-mix(in srgb, var(--primary) 10%, var(--bg-primary));
|
||||
border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
|
||||
color: var(--text-primary);
|
||||
padding: 4px 4px 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
.example-chip-remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-tertiary);
|
||||
padding: 0;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
.example-chip-remove:hover {
|
||||
background: color-mix(in srgb, var(--primary) 18%, transparent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.example-chip-remove svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.examples-input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.example-input {
|
||||
flex: 1;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-width: 0;
|
||||
}
|
||||
.example-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
|
||||
}
|
||||
.example-add-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Drop zone ───────────────────────────────────── */
|
||||
.drop-zone {
|
||||
border: 1.5px dashed var(--border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--card);
|
||||
padding: 56px 32px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.drop-zone:hover, .drop-zone.drag-over {
|
||||
border-color: var(--primary);
|
||||
background: color-mix(in srgb, var(--primary) 4%, var(--card));
|
||||
}
|
||||
.drop-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: var(--text-quaternary);
|
||||
margin: 0 auto 18px;
|
||||
display: block;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.drop-zone:hover .drop-icon, .drop-zone.drag-over .drop-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
.drop-text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.drop-or {
|
||||
font-size: 13px;
|
||||
color: var(--text-quaternary);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.drop-formats {
|
||||
font-size: 12px;
|
||||
color: var(--text-quaternary);
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* ── Buttons ─────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background 0.15s, box-shadow 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 2px rgb(21 90 239 / 0.25);
|
||||
}
|
||||
.btn-primary:hover { background: var(--primary-hover); }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: default; }
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-strong);
|
||||
}
|
||||
.btn-secondary:hover { background: var(--border-strong); }
|
||||
.btn-icon { width: 15px; height: 15px; flex-shrink: 0; }
|
||||
|
||||
/* ── Processing card ─────────────────────────────── */
|
||||
.processing-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 56px 32px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid var(--border-strong);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.75s linear infinite;
|
||||
margin: 0 auto 22px;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.processing-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.steps-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
.step-item.active {
|
||||
color: var(--primary);
|
||||
background: color-mix(in srgb, var(--primary) 8%, var(--bg-primary));
|
||||
}
|
||||
.step-item.done { color: #17b26a; }
|
||||
.step-item.error { color: #d92d20; background: #fef3f2; }
|
||||
.step-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Results ─────────────────────────────────────── */
|
||||
.results-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.results-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.015em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.results-meta {
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.results-actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
/* ── Table ───────────────────────────────────────── */
|
||||
.table-wrap {
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
background: var(--card);
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
min-width: 500px;
|
||||
}
|
||||
thead {
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
th {
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
td {
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
color: var(--text-primary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:nth-child(even) td { background: var(--bg-secondary); }
|
||||
td[contenteditable]:focus {
|
||||
outline: none;
|
||||
background: color-mix(in srgb, var(--primary) 6%, var(--bg-primary));
|
||||
box-shadow: inset 0 0 0 1.5px var(--primary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 99px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge-rule { background: #d1e0ff; color: #004aeb; }
|
||||
.badge-llm { background: #d1fae5; color: #065f46; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.badge-rule { background: #1e3a8a; color: #93c5fd; }
|
||||
.badge-llm { background: #064e3b; color: #6ee7b7; }
|
||||
}
|
||||
|
||||
.table-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-quaternary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
Reference in New Issue
Block a user