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>

web/static/view.css

@@ -1,20 +1,20 @@
 :root {
-  --bg: #f4f1ea;
+  --bg:          #ffffff;
-  --panel: #fffdf9;
+  --surface:     #ffffff;
-  --border: #d8d0c3;
+  --surface-2:   #f9fafb;
-  --ink: #26231e;
+  --border:      rgba(34, 36, 38, 0.15);
-  --muted: #6a6258;
+  --border-lite: rgba(34, 36, 38, 0.1);
-  --accent: #8f3b2e;
+  --ink:         rgba(0, 0, 0, 0.87);
-  --ok-bg: #d8f1df;
+  --muted:       rgba(0, 0, 0, 0.6);
-  --ok-fg: #1f6a32;
+  --accent:      #2185d0;
-  --warn-bg: #fff0bf;
+  --accent-dark: #1678c2;
-  --warn-fg: #8a6200;
+  --accent-bg:   #dff0ff;
-  --crit-bg: #ffd7d2;
+  --crit-border: #e0b4b4;
-  --crit-fg: #9a2419;
+  --ok-bg:       #fcfff5; --ok-fg:      #2c662d;
-  --unknown-bg: #e3e5e8;
+  --warn-bg:     #fffaf3; --warn-fg:    #573a08;
-  --unknown-fg: #4f5965;
+  --crit-bg:     #fff6f6; --crit-fg:    #9f3a38;
-  --empty-bg: #ece7de;
+  --unknown-bg:  #f9fafb; --unknown-fg: rgba(0, 0, 0, 0.5);
-  --empty-fg: #72675b;
+  --empty-bg:    #f9fafb; --empty-fg:   rgba(0, 0, 0, 0.4);
 }
 
 * {
@@ -23,32 +23,30 @@
 
 body {
   margin: 0;
-  background:
+  background: var(--bg);
-    radial-gradient(circle at top left, #efe1cf 0, transparent 30%),
-    linear-gradient(180deg, #f8f4ed 0%, var(--bg) 100%);
   color: var(--ink);
-  font: 14px/1.45 "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
+  font: 14px/1.5 Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 
+/* ── Header ──────────────────────────────────────── */
+
 .page-header {
+  background: #1b1c1d;
+  padding: 14px 24px;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 24px 28px 18px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 }
 
 .page-header h1 {
   margin: 0;
-  font-size: 32px;
+  font-size: 18px;
-  line-height: 1.1;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
 }
 
-.page-header p {
+/* ── Main layout ─────────────────────────────────── */
-  margin: 6px 0 0;
-  color: var(--muted);
-}
 
 .header-actions {
   display: flex;
@@ -58,148 +56,210 @@ body {
 .header-action {
   display: inline-block;
   text-decoration: none;
-  border-radius: 999px;
+  border-radius: 4px;
-  background: var(--accent);
+  background: rgba(255, 255, 255, 0.12);
-  color: #fff;
+  color: rgba(255, 255, 255, 0.85);
-  padding: 10px 16px;
+  padding: 6px 14px;
+  font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
+  transition: background 0.1s ease;
+}
+
+.header-action:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .page-main {
-  width: min(1500px, calc(100vw - 32px));
+  width: min(1500px, calc(100vw - 48px));
-  margin: 0 auto;
+  margin: 28px auto 56px;
-  padding: 20px 0 32px;
 }
 
+/* ── Meta-panel and upload — классические карточки ── */
+
 .empty-panel,
 .meta-panel,
 .notice-panel,
-.section-card,
 .upload-panel {
-  background: var(--panel);
+  background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 14px;
+  border-radius: 4px;
-  box-shadow: 0 10px 30px rgba(78, 54, 26, 0.05);
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-  padding: 18px;
+  overflow: hidden;
-  margin-bottom: 16px;
+  margin-bottom: 28px;
 }
 
 .empty-panel h2,
-.section-card h2,
 .meta-panel h2,
 .notice-panel h2,
 .upload-panel h2 {
   display: block;
-  margin: 0 0 12px;
+  margin: 0;
-  font-size: 18px;
+  padding: 13px 16px;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--ink);
 }
 
 .empty-panel p,
 .notice-panel p,
 .upload-panel p {
   margin: 0;
+  padding: 12px 16px 0;
   color: var(--muted);
 }
 
+.empty-panel p:last-child {
+  padding-bottom: 16px;
+}
+
+/* ── Section cards — heading + table, без обёртки ─── */
+
+.section-card {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  overflow: visible;
+  margin-bottom: 32px;
+}
+
+.section-card h2 {
+  display: block;
+  margin: 0 0 10px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  font-size: 18px;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* таблица внутри section-card получает свой бордер */
+.section-card .table-wrap {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+  overflow-x: auto;
+}
+
+.section-card .kv-table {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+}
+
+/* ── Upload ──────────────────────────────────────── */
+
 .upload-panel {
-  width: min(680px, 100%);
+  width: min(520px, 100%);
   margin-left: auto;
   margin-right: auto;
 }
 
 .upload-dropzone {
   display: block;
-  margin-top: 16px;
+  margin: 12px 16px 0;
   border: 1px dashed var(--border);
-  border-radius: 12px;
+  border-radius: 4px;
-  padding: 18px;
+  padding: 16px;
-  background: #faf6ef;
+  background: var(--surface-2);
+  cursor: pointer;
+  transition: border-color 0.1s ease, background 0.1s ease;
+}
+
+.upload-dropzone:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
 }
 
 .upload-dropzone input {
   display: block;
   width: 100%;
   margin-bottom: 12px;
+  font: inherit;
+  color: var(--ink);
 }
 
 .upload-eyebrow {
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   color: var(--accent);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
 }
 
 .upload-dropzone strong {
   display: block;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
-  font-size: 18px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.upload-dropzone span:last-child {
+  color: var(--muted);
+  font-size: 13px;
 }
 
 .upload-actions {
-  margin-top: 14px;
+  padding: 12px 16px 16px;
 }
 
 .upload-actions button {
-  border: 0;
-  border-radius: 999px;
   background: var(--accent);
   color: #fff;
-  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 18px;
   font: inherit;
   font-weight: 700;
   cursor: pointer;
+  transition: background 0.1s ease;
 }
 
+.upload-actions button:hover {
+  background: var(--accent-dark);
+}
+
+.upload-actions button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ── Error ───────────────────────────────────────── */
+
 .error-box {
-  margin-bottom: 16px;
+  margin: 12px 16px;
-  border: 1px solid var(--crit-fg);
+  border: 1px solid var(--crit-border);
-  border-radius: 10px;
+  border-radius: 4px;
-  padding: 12px;
+  padding: 10px 14px;
   background: var(--crit-bg);
   color: var(--crit-fg);
 }
 
-.section-nav {
+/* ── Sections grid ───────────────────────────────── */
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 0 0 16px;
-}
-
-.section-nav a {
-  text-decoration: none;
-  color: var(--accent);
-  background: rgba(143, 59, 46, 0.08);
-  padding: 7px 11px;
-  border-radius: 999px;
-}
 
 .sections-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
+  gap: 0 32px;
 }
 
-.section-card {
+.section-card-half { grid-column: span 1; }
-  margin-bottom: 0;
+.section-card-full { grid-column: 1 / -1; }
-}
 
-.section-card-half {
+/* ── Tables ──────────────────────────────────────── */
-  grid-column: span 1;
-}
-
-.section-card-full {
-  grid-column: 1 / -1;
-}
 
 .kv-table,
 .data-table {
   width: 100%;
   border-collapse: collapse;
+  font-size: 14px;
+  background: var(--surface);
 }
 
 .kv-table th,
@@ -208,8 +268,8 @@ body {
 .data-table td {
   vertical-align: top;
   text-align: left;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-lite);
-  padding: 10px 8px;
+  padding: 11px 14px;
 }
 
 .kv-table tr:first-child th,
@@ -221,65 +281,72 @@ body {
 
 .kv-table th,
 .data-table th {
-  color: var(--muted);
+  background: var(--surface-2);
+  color: var(--ink);
   font-weight: 700;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border-lite);
+  border-top: 0;
 }
 
+.kv-table th {
+  width: 1%;
+}
+
+.data-table tbody tr:hover {
+  background: rgba(0, 0, 0, 0.04);
+  transition: background 0.1s ease;
+}
+
+/* table-wrap уже получил border в .section-card .table-wrap */
 .table-wrap {
   overflow-x: auto;
 }
 
+/* для meta-panel table-wrap без дублирования бордера */
+.meta-panel .table-wrap {
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+}
+
 .table-group + .table-group {
-  margin-top: 18px;
+  border-top: 1px solid var(--border);
 }
 
 .table-group h3 {
-  margin: 0 0 8px;
+  margin: 0;
+  padding: 9px 14px;
   color: var(--muted);
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border-lite);
 }
 
-.data-table thead th {
+/* ── Status ──────────────────────────────────────── */
-  position: sticky;
-  top: 0;
-  background: #f7f1e7;
-}
 
 .status-badge {
   display: inline-block;
-  border-radius: 999px;
+  font-size: 0;
-  padding: 3px 9px;
-  font-weight: 700;
   white-space: nowrap;
 }
 
-.status-ok {
+.status-badge::before {
-  background: var(--ok-bg);
+  font-size: 15px;
-  color: var(--ok-fg);
+  font-weight: 700;
+  line-height: 1;
 }
 
-.status-warning {
+.status-ok::before       { content: '✓'; color: #16ab39; }
-  background: var(--warn-bg);
+.status-warning::before  { content: '!'; color: #f2711c; }
-  color: var(--warn-fg);
+.status-critical::before { content: '✗'; color: #db2828; }
-}
+.status-unknown::before  { content: '?'; color: rgba(0, 0, 0, 0.4); }
+.status-empty::before    { content: '–'; color: rgba(0, 0, 0, 0.3); }
 
-.status-critical {
+/* ── Responsive ──────────────────────────────────── */
-  background: var(--crit-bg);
-  color: var(--crit-fg);
-}
-
-.status-unknown {
-  background: var(--unknown-bg);
-  color: var(--unknown-fg);
-}
-
-.status-empty {
-  background: var(--empty-bg);
-  color: var(--empty-fg);
-}
 
 @media (max-width: 720px) {
   .page-header {
@@ -287,7 +354,8 @@ body {
   }
 
   .page-main {
-    width: min(100vw - 20px, 1500px);
+    width: calc(100vw - 24px);
+    margin-top: 20px;
   }
 
   .sections-grid {
@@ -295,18 +363,7 @@ body {
   }
 
   .page-header {
-    padding: 18px 14px 14px;
+    padding: 12px 16px;
-  }
-
-  .page-header h1 {
-    font-size: 26px;
-  }
-
-  .empty-panel,
-  .meta-panel,
-  .section-card,
-  .upload-panel {
-    padding: 14px;
   }
 
   .section-card-half,

web/templates/upload.html

@@ -8,9 +8,7 @@
 </head>
 <body>
   <header class="page-header">
-    <div>
     <h1>{{ .Title }}</h1>
-    </div>
   </header>
 
   <main class="page-main">

web/templates/view.html

@@ -8,9 +8,7 @@
 </head>
 <body>
   <header class="page-header">
-    <div>
     <h1>{{ .Title }}</h1>
-    </div>
     {{ if .DownloadArchiveURL }}
     <div class="header-actions">
       <a class="header-action" href="{{ .DownloadArchiveURL }}">{{ if .DownloadArchiveLabel }}{{ .DownloadArchiveLabel }}{{ else }}Download archive{{ end }}</a>
@@ -41,13 +39,7 @@
       </table>
     </section>
 
-    <nav class="section-nav">
+<div class="sections-grid">
-      {{ range .Sections }}
-      <a href="#{{ .ID }}">{{ .Title }}</a>
-      {{ end }}
-    </nav>
-
-    <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>
@@ -147,7 +139,7 @@
     {{ end }}
 
     {{ if .Error }}
-    <section class="error-box">{{ .Error }}</section>
+    <div role="alert" class="error-box">{{ .Error }}</div>
     {{ end }}
 
     {{ if not .HasSnapshot }}