ed694c9821
Earlier polish landed a dark dev-tool aesthetic (Linear / Vercel /
Resend). The user reminded that we agreed on the Claude / Anthropic
design language — cream paper background, warm charcoal ink, serif
display type, rust/terracotta accent. Pivoting accordingly.
Changes (style.css; HTML headers gain h1 → home link)
- Surface palette
- bg: #f5f0e8 (warm cream paper)
- surface-1/2/3: cream → light tan progression
- border / border-strong: soft warm tan
- Ink palette (warm-tinted neutral, not blue-tinted gray)
- text-primary: #1b1916
- text-secondary: #54514a
- text-muted: #8a857a
- text-faint: #b6b0a3
- Accent rust palette
- accent: #c14a1a (terracotta) / hover #a73d12
- success: olive green #4a6f2a
- warning: mustard #a86c1f
- danger: rust red #a33419
- info: muted slate blue #4a5d8c
- Typography: serif/sans/mono trio
- --font-serif: "Tiempos Headline", "Source Serif Pro", "IBM Plex Serif",
Georgia, "Apple SD Gothic Neo", "Noto Serif KR"
- --font-sans: "Styrene B", "Styrene A", "Inter", "Pretendard", system stack
- --font-mono: JetBrains Mono / SF Mono / Menlo
- Body font-size bumped 14 → 15 px for paper readability
- h1, page-title h2, h2 section titles all serif now (no uppercase /
letterspaced caps — Claude aesthetic favors true serif headlines)
- budget-card amount uses serif numerals
- Component tweaks
- Buttons: cream surface default; primary = rust filled; danger = outlined
- Inputs: 3 px rgba accent ring on focus (Claude form style)
- Badges: warm pill background + 1 px tinted border for definition on cream
- Cards: soft 1 px shadow-card token, no heavy elevation
- Scrollbar: themed thumb against surface-1
- Empty-state icon: serif character in accent color
- Page-title row gains a bottom border (paper-rule separator)
XSS policy comment + textContent-only contract unchanged. No build system.
Tests
- ruff check / mypy --strict / 5 static smoke tests: PASS
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
47 lines
1.2 KiB
HTML
47 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>my-deepagent · runs</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body data-page="index">
|
|
<header>
|
|
<h1><a href="/">my-deepagent</a></h1>
|
|
<nav>
|
|
<a href="/" class="active">Runs</a>
|
|
<a href="/new.html">새 Run</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<div id="error" class="error-banner" style="display:none"></div>
|
|
|
|
<div class="page-title">
|
|
<h2>최근 Runs</h2>
|
|
<span class="page-subtitle">최신 50개</span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<table id="runs">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 22%">Run</th>
|
|
<th style="width: 13%">State</th>
|
|
<th>Repo</th>
|
|
<th style="width: 12%">Branch</th>
|
|
<th style="width: 16%">Created</th>
|
|
<th style="width: 16%">Ended</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2 class="section-title">예산 (현재)</h2>
|
|
<div id="budget-summary" class="budget-grid"></div>
|
|
</main>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|