update giao diện web

orangepi-server/static/style.css

@@ -184,6 +184,7 @@ input, button { font-family: inherit; color: inherit; }
     .app-main { padding: 12px; gap: 14px; }
     .status-chip span:last-child { display: none; }
     .status-chip { padding: 6px 8px; }
+    .legend { display: none !important; }
 }
 
 /* ---------- Panels ---------- */
@@ -460,6 +461,140 @@ input, button { font-family: inherit; color: inherit; }
     box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-blue) 30%, transparent);
 }
 .btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-blue) 40%, transparent); }
+.btn-sm { padding: 6px 10px; font-size: 11px; border-radius: 8px; }
+
+/* Tabs (Radar / History) */
+.tabs-row {
+    display: flex; gap: 6px; padding: 6px;
+    background: var(--bg-elev-1);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    margin-bottom: 12px;
+}
+.tab-btn {
+    flex: 1 1 0;
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    padding: 8px 12px;
+    background: transparent; color: var(--text-muted);
+    border: none; border-radius: 10px;
+    font-size: 13px; font-weight: 600; cursor: pointer;
+    transition: all .2s;
+}
+.tab-btn:hover { color: var(--text); }
+.tab-btn.tab-active {
+    background: var(--surface); color: var(--text);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+}
+.tab-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.tab-panel { display: flex; flex-direction: column; gap: 16px; }
+
+/* History card + filters */
+.history-toolbar {
+    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
+    margin-bottom: 16px;
+}
+.history-toolbar-title h3 { margin-bottom: 4px; }
+.history-summary { font-size: 12px; color: var(--text-muted); }
+.history-filters {
+    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
+    justify-content: flex-end;
+}
+.field { display: inline-flex; flex-direction: column; gap: 4px; }
+.field > span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
+.field input {
+    height: 34px; padding: 0 10px;
+    border-radius: 8px; border: 1px solid var(--border);
+    background: var(--bg-elev-1); color: var(--text);
+    font-size: 12px; font-family: "JetBrains Mono", monospace;
+}
+.field-range .range { display: inline-flex; align-items: center; gap: 6px; }
+.field-range .range input { width: 68px; }
+.field-range .sep { color: var(--text-dim); font-size: 12px; }
+
+/* 24-hour bar summary */
+.history-hourly {
+    display: grid; grid-template-columns: repeat(24, 1fr);
+    gap: 3px; align-items: end;
+    height: 90px; margin-bottom: 18px;
+    padding: 8px 6px;
+    background: var(--bg-elev-1);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+}
+.hour-bar {
+    position: relative;
+    width: 100%;
+    background: linear-gradient(180deg, var(--accent-blue), color-mix(in srgb, var(--accent-mauve) 60%, var(--accent-blue)));
+    border-radius: 3px 3px 0 0;
+    min-height: 2px;
+    max-height: 100%;
+    transition: transform .2s;
+    cursor: help;
+}
+.hour-bar:hover { transform: scaleY(1.1); }
+.hour-bar[data-count="0"] { background: var(--bg-elev-2); opacity: .6; }
+.hour-bar[title]::after {
+    content: attr(title);
+    position: absolute; bottom: calc(100% + 6px); left: 50%;
+    transform: translateX(-50%);
+    background: var(--surface); border: 1px solid var(--border);
+    color: var(--text); font-size: 11px; padding: 2px 6px; border-radius: 6px;
+    white-space: nowrap; display: none; box-shadow: var(--shadow-sm);
+}
+.hour-bar:hover[title]::after { display: block; }
+
+/* Detection list items */
+.history-list {
+    display: flex; flex-direction: column; gap: 8px;
+    max-height: 560px; overflow: auto;
+    padding-right: 4px;
+}
+.history-empty {
+    padding: 22px 14px; text-align: center;
+    color: var(--text-muted); font-size: 13px;
+    border: 1px dashed var(--border); border-radius: 10px;
+}
+.detect {
+    display: grid; grid-template-columns: auto auto 1fr auto;
+    gap: 10px 14px; align-items: center;
+    padding: 10px 12px;
+    background: var(--bg-elev-1);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    transition: background .2s;
+}
+.detect:hover { background: var(--bg-elev-2); }
+.detect-time {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px; color: var(--accent-blue); font-weight: 700;
+}
+.detect-slot {
+    width: 36px; height: 36px; border-radius: 10px;
+    display: inline-flex; align-items: center; justify-content: center;
+    font-weight: 800; font-size: 14px;
+    border: 1px solid;
+}
+.detect-slot.s1 { background: color-mix(in srgb, var(--z1) 30%, transparent); color: var(--z1); border-color: color-mix(in srgb, var(--z1) 60%, transparent); }
+.detect-slot.s2 { background: color-mix(in srgb, var(--z2) 30%, transparent); color: var(--z2); border-color: color-mix(in srgb, var(--z2) 60%, transparent); }
+.detect-slot.s3 { background: color-mix(in srgb, var(--z3) 30%, transparent); color: var(--z3); border-color: color-mix(in srgb, var(--z3) 60%, transparent); }
+.detect-meta {
+    display: flex; flex-wrap: wrap; gap: 10px 14px;
+    font-size: 12px; color: var(--text-muted);
+}
+.detect-meta .kv { display: inline-flex; gap: 4px; align-items: baseline; }
+.detect-meta .kv b { color: var(--text); font-weight: 600; font-family: "JetBrains Mono", monospace; }
+.detect-dist {
+    font-weight: 700; color: var(--text); font-size: 14px;
+    font-family: "JetBrains Mono", monospace;
+}
+
+@media (max-width: 600px) {
+    .history-toolbar { grid-template-columns: 1fr; }
+    .history-filters { justify-content: flex-start; }
+    .detect { grid-template-columns: auto 1fr auto; row-gap: 6px; }
+    .detect-time { grid-column: 1 / -1; }
+}
 
 /* Toast */
 .toast-container {