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>
62 lines
2.1 KiB
HTML
62 lines
2.1 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 · 새 Run</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body data-page="new">
|
|
<header>
|
|
<h1><a href="/">my-deepagent</a></h1>
|
|
<nav>
|
|
<a href="/">Runs</a>
|
|
<a href="/new.html" class="active">새 Run</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<div id="error" class="error-banner" style="display:none"></div>
|
|
|
|
<div class="page-title">
|
|
<h2>새 Run 시작</h2>
|
|
<span class="page-subtitle">워크플로우 + repo + 요구사항</span>
|
|
</div>
|
|
|
|
<form id="start-form" autocomplete="off">
|
|
<div class="card" style="padding: 20px;">
|
|
<div class="form-row">
|
|
<label for="template">워크플로우 템플릿</label>
|
|
<select id="template" required></select>
|
|
</div>
|
|
|
|
<div class="form-grid">
|
|
<div class="form-row">
|
|
<label for="repo-path">repo 절대경로</label>
|
|
<input id="repo-path" type="text" placeholder="/Users/me/projects/my-thing" required />
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="base-branch">base branch</label>
|
|
<input id="base-branch" type="text" value="main" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="requirements">requirements <span class="hint">— 자유 텍스트, 마크다운 OK</span></label>
|
|
<textarea id="requirements" rows="6" placeholder="이 workflow가 다룰 요구사항을 적어주세요."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Persona 오버라이드 <span class="hint" style="text-transform: none; letter-spacing: 0; font-weight: 400;">(선택, 비우면 자동 선택)</span></h2>
|
|
<div id="override-fields" class="card"></div>
|
|
|
|
<div class="action-bar">
|
|
<button type="submit" class="primary">▶︎ 시작</button>
|
|
<a class="button" href="/">취소</a>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|