Files
chart/web/templates/view.html
Mikhail Chusavitin c025ae0477 Redesign chart UI toward clean professional style
- Replace warm serif theme with Semantic UI-inspired design:
  white background, Lato font, subtle transparent borders
- Section cards become transparent wrappers with standalone h2
  headings; tables carry their own border and shadow
- Status indicators replaced with plain colored symbols
  (✓ ✗ ! ? –) — no badge backgrounds
- Remove section nav (table of contents)
- Fix HTML: remove redundant div in header, error section
  tag → div[role=alert], add aria-label to nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-18 02:03:05 +03:00

154 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title }}</title>
<link rel="stylesheet" href="/static/view.css">
</head>
<body>
<header class="page-header">
<h1>{{ .Title }}</h1>
{{ if .DownloadArchiveURL }}
<div class="header-actions">
<a class="header-action" href="{{ .DownloadArchiveURL }}">{{ if .DownloadArchiveLabel }}{{ .DownloadArchiveLabel }}{{ else }}Download archive{{ end }}</a>
</div>
{{ end }}
</header>
<main class="page-main">
{{ if .NoticeTitle }}
<section class="notice-panel">
<h2>{{ .NoticeTitle }}</h2>
<p>{{ .NoticeBody }}</p>
</section>
{{ end }}
{{ if .HasSnapshot }}
<section class="meta-panel">
<h2>Snapshot Metadata</h2>
<table class="kv-table">
<tbody>
{{ range .Meta }}
<tr>
<th>{{ .Key }}</th>
<td>{{ .Value }}</td>
</tr>
{{ end }}
</tbody>
</table>
</section>
<div class="sections-grid">
{{ range .Sections }}
<section class="section-card {{ if or (eq .ID "board") (eq .ID "firmware") }}section-card-half{{ else }}section-card-full{{ end }}" id="{{ .ID }}">
<h2>{{ .Title }}</h2>
{{ if eq .Kind "object" }}
<table class="kv-table">
<tbody>
{{ range .Rows }}
<tr>
<th>{{ .Key }}</th>
<td>
{{ range joinLines .Value }}
<div>{{ . }}</div>
{{ end }}
</td>
</tr>
{{ end }}
</tbody>
</table>
{{ end }}
{{ if eq .Kind "table" }}
{{ $section := . }}
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
{{ range .Columns }}
<th>{{ . }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range .Items }}
<tr>
{{ $row := . }}
{{ range $section.Columns }}
<td>
{{ $value := index $row.Cells . }}
{{ if eq . "status" }}
<span class="status-badge {{ statusClass $value }}">{{ $value }}</span>
{{ else }}
{{ range joinLines $value }}
<div>{{ . }}</div>
{{ end }}
{{ end }}
</td>
{{ end }}
</tr>
{{ end }}
</tbody>
</table>
</div>
{{ end }}
{{ if eq .Kind "grouped_tables" }}
{{ range .Groups }}
<div class="table-group">
<h3>{{ .Title }}</h3>
{{ $group := . }}
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
{{ range .Columns }}
<th>{{ . }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range .Items }}
<tr>
{{ $row := . }}
{{ range $group.Columns }}
<td>
{{ $value := index $row.Cells . }}
{{ if eq . "status" }}
<span class="status-badge {{ statusClass $value }}">{{ $value }}</span>
{{ else }}
{{ range joinLines $value }}
<div>{{ . }}</div>
{{ end }}
{{ end }}
</td>
{{ end }}
</tr>
{{ end }}
</tbody>
</table>
</div>
</div>
{{ end }}
{{ end }}
</section>
{{ end }}
</div>
{{ end }}
{{ if .Error }}
<div role="alert" class="error-box">{{ .Error }}</div>
{{ end }}
{{ if not .HasSnapshot }}
<section class="empty-panel">
<h2>Snapshot Viewer</h2>
<p>This page renders one Reanimator snapshot provided by the embedding application.</p>
</section>
{{ end }}
</main>
</body>
</html>