mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 08:31:10 +00:00
Armen Rohalov
2a62415f0c
ui_design v2: tactical-ops redesign of all 5 pages Two parallel takes on visual polish for flights, annotations, dataset explorer, admin, and settings. - v2/plugin/ — self-contained HTML produced via the frontend-design plugin, adheres to v2/plugin/_design_system.md.. - v2/stitch/ — Google Stitch MCP exports against the same design system. IA from the original wireframes in _docs/ui_design/ is preserved verbatim — this pass is visual only.
838 lines
49 KiB
HTML
838 lines
49 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AZAION // ADMIN — System Configuration</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--surface-0: #0A0D10;
|
|
--surface-1: #13171C;
|
|
--surface-2: #1A1F26;
|
|
--surface-input: #0A0D10;
|
|
--border-hair: #252B34;
|
|
--border-raised: #3B4451;
|
|
--text-primary: #E8ECF1;
|
|
--text-secondary: #9AA4B2;
|
|
--text-muted: #5B6573;
|
|
--accent-amber: #FF9D3D;
|
|
--accent-cyan: #36D6C5;
|
|
--accent-red: #FF4756;
|
|
--accent-green: #3DDC84;
|
|
--accent-blue: #4E9EFF;
|
|
}
|
|
|
|
html, body { background: var(--surface-0); color: var(--text-primary); }
|
|
body {
|
|
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
font-feature-settings: "ss01", "cv11";
|
|
}
|
|
|
|
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
|
|
.tnum { font-variant-numeric: tabular-nums; }
|
|
|
|
.micro {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.sect-head {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--accent-amber);
|
|
}
|
|
|
|
/* Corner brackets */
|
|
.bracket { position: relative; }
|
|
.bracket::before, .bracket::after,
|
|
.bracket > .br::before, .bracket > .br::after {
|
|
content: ''; position: absolute; width: 8px; height: 8px;
|
|
border-color: var(--accent-amber); border-style: solid; border-width: 0;
|
|
pointer-events: none;
|
|
}
|
|
.bracket::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
|
|
.bracket::after { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
|
|
.bracket > .br::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
|
|
.bracket > .br::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
|
|
|
|
/* Subtle grid backdrop */
|
|
.grid-bg {
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
}
|
|
|
|
/* Inputs */
|
|
.inp {
|
|
background: var(--surface-input);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
height: 32px;
|
|
padding: 6px 10px;
|
|
font: 12px 'IBM Plex Sans';
|
|
color: var(--text-primary);
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
.inp:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
|
|
.inp::placeholder { color: var(--text-muted); }
|
|
.inp-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
height: 28px; padding: 0 12px;
|
|
font: 600 11px 'JetBrains Mono', monospace;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
border-radius: 2px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: background-color .12s, color .12s, border-color .12s;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent-amber);
|
|
color: #0A0D10;
|
|
border-color: var(--accent-amber);
|
|
}
|
|
.btn-primary:hover { filter: brightness(1.08); }
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--accent-amber);
|
|
border-color: var(--accent-amber);
|
|
}
|
|
.btn-secondary:hover { background: rgba(255,157,61,.12); }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-hair);
|
|
}
|
|
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-raised); }
|
|
.btn-danger {
|
|
background: var(--accent-red);
|
|
color: #0A0D10;
|
|
border-color: var(--accent-red);
|
|
}
|
|
|
|
/* Icon button */
|
|
.ibtn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 24px; height: 24px;
|
|
border: 1px solid transparent;
|
|
border-radius: 2px;
|
|
color: var(--text-muted);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: color .1s, background .1s, border-color .1s;
|
|
}
|
|
.ibtn:hover { color: var(--text-primary); background: var(--surface-2); border-color: var(--border-hair); }
|
|
.ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,.08); }
|
|
.ibtn.edit:hover { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,.08); }
|
|
.ibtn.cyan:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(54,214,197,.08); }
|
|
|
|
/* Header-scoped icon buttons override the smaller in-table variant */
|
|
header .ibtn {
|
|
width: 28px; height: 28px;
|
|
border: 1px solid var(--border-hair);
|
|
color: var(--text-secondary);
|
|
}
|
|
header .ibtn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-raised); }
|
|
header .ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
|
|
header .ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
|
|
|
|
/* Pills */
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
height: 18px; padding: 0 8px;
|
|
font: 600 10px 'JetBrains Mono', monospace;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
border: 1px solid currentColor;
|
|
border-radius: 2px;
|
|
background: transparent;
|
|
}
|
|
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
.pill-green { color: var(--accent-green); }
|
|
.pill-red { color: var(--accent-red); }
|
|
.pill-cyan { color: var(--accent-cyan); }
|
|
.pill-amber { color: var(--accent-amber); }
|
|
.pill-blue { color: var(--accent-blue); }
|
|
.pill-muted { color: var(--text-muted); }
|
|
|
|
/* Chip (role chips, type chips — solid filled, denser) */
|
|
.chip {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
height: 18px; min-width: 60px; padding: 0 8px;
|
|
font: 600 10px 'JetBrains Mono', monospace;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
border-radius: 2px;
|
|
}
|
|
.chip-admin { background: rgba(255,157,61,.16); color: var(--accent-amber); border: 1px solid rgba(255,157,61,.35); }
|
|
.chip-operator { background: rgba(78,158,255,.14); color: var(--accent-blue); border: 1px solid rgba(78,158,255,.35); }
|
|
.chip-viewer { background: rgba(154,164,178,.10); color: var(--text-secondary); border: 1px solid var(--border-hair); }
|
|
|
|
/* Type squares (P / C / F) */
|
|
.type-sq {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 16px; height: 16px;
|
|
border-radius: 2px;
|
|
font: 700 9px 'JetBrains Mono', monospace;
|
|
color: #0A0D10;
|
|
flex: none;
|
|
}
|
|
|
|
/* Color swatch */
|
|
.swatch {
|
|
display: inline-block; width: 12px; height: 12px;
|
|
border: 1px solid rgba(255,255,255,0.18);
|
|
border-radius: 1px;
|
|
flex: none;
|
|
}
|
|
|
|
/* Segmented control */
|
|
.seg { display: inline-flex; border: 1px solid var(--border-hair); border-radius: 2px; overflow: hidden; }
|
|
.seg-btn {
|
|
height: 30px; padding: 0 14px;
|
|
font: 600 10px 'JetBrains Mono', monospace;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
background: var(--surface-input);
|
|
border-right: 1px solid var(--border-hair);
|
|
cursor: pointer;
|
|
transition: background .1s, color .1s;
|
|
}
|
|
.seg-btn:last-child { border-right: 0; }
|
|
.seg-btn:hover { color: var(--text-primary); }
|
|
.seg-btn.active {
|
|
background: var(--accent-amber);
|
|
color: #0A0D10;
|
|
}
|
|
|
|
/* Header bar */
|
|
.tab {
|
|
display: inline-flex; align-items: center;
|
|
height: 48px; padding: 0 14px;
|
|
font: 500 12px/1 'JetBrains Mono', monospace;
|
|
letter-spacing: 0.10em; text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid transparent;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.tab:hover { color: var(--text-primary); }
|
|
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
|
|
|
|
/* Table rows */
|
|
.row-hover:hover { background: var(--surface-2); }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: var(--surface-0); }
|
|
::-webkit-scrollbar-thumb { background: #1f2630; border-radius: 2px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #2a323e; }
|
|
|
|
/* Star button */
|
|
.star { color: var(--accent-amber); }
|
|
.star-off { color: var(--text-muted); }
|
|
|
|
/* Pulse for live dot */
|
|
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
|
|
.live { animation: pulse 1.6s ease-in-out infinite; }
|
|
|
|
/* Reveal-on-hover */
|
|
.row-hover .reveal { opacity: 0; transition: opacity .12s; }
|
|
.row-hover:hover .reveal { opacity: 1; }
|
|
|
|
/* Card panel base */
|
|
.panel {
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Help hint under labels */
|
|
.hint { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
|
|
|
|
/* tabular numbers in tables */
|
|
table.tabular td, table.tabular th { font-variant-numeric: tabular-nums; }
|
|
|
|
/* keep selects matching inp */
|
|
select.inp { appearance: none; -webkit-appearance: none; background-image:
|
|
linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
|
|
linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
|
|
background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
|
|
background-size: 5px 5px, 5px 5px;
|
|
background-repeat: no-repeat;
|
|
padding-right: 28px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="h-screen flex flex-col overflow-hidden">
|
|
|
|
<!-- ========== GLOBAL HEADER ========== -->
|
|
<header class="flex items-center px-4 gap-3 border-b" style="background: var(--surface-1); border-color: var(--border-hair); height: 48px;">
|
|
<span class="mono font-bold" style="color: var(--accent-amber); letter-spacing: 0.2em; font-size: 14px;">AZAION</span>
|
|
|
|
<span class="micro" style="color: var(--text-muted);">//</span>
|
|
|
|
<button class="inline-flex items-center gap-2 mono" style="height: 28px; padding: 0 10px; background: var(--surface-1); border: 1px solid var(--accent-amber); border-radius: 2px; font-size: 11px; letter-spacing: 0.10em;">
|
|
<span class="dot live" style="display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);"></span>
|
|
<span style="color: var(--text-primary);">FL-03</span>
|
|
<span style="color: var(--text-secondary); font-size: 10px;">▾</span>
|
|
</button>
|
|
|
|
<nav class="flex items-center self-stretch ml-3">
|
|
<a href="flights.html" class="tab">Flights</a>
|
|
<a href="annotations.html" class="tab">Annotations</a>
|
|
<a href="dataset_explorer.html" class="tab">Dataset</a>
|
|
<a href="#" class="tab active">Admin</a>
|
|
</nav>
|
|
|
|
<div class="flex items-center gap-2 ml-auto micro">
|
|
<span class="dot live" style="display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);"></span>
|
|
<span style="color: var(--accent-cyan);">LINK</span>
|
|
<span style="color: var(--border-raised);">|</span>
|
|
<span style="color: var(--text-secondary); text-transform: none; letter-spacing: 0;">user@azaion.com</span>
|
|
<span style="color: var(--border-raised); margin: 0 4px;">|</span>
|
|
<a href="#" class="ibtn" title="Settings">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
|
</a>
|
|
<a href="#" class="ibtn danger" title="Sign out">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ========== MAIN LAYOUT ========== -->
|
|
<main class="flex flex-1 overflow-hidden" style="background: var(--surface-0);">
|
|
|
|
<!-- ============ LEFT PANEL: DETECTION CLASSES (340px) ============ -->
|
|
<aside class="shrink-0 flex flex-col" style="width: 340px; background: var(--surface-1); border-right: 1px solid var(--border-hair);">
|
|
|
|
<div class="px-4 pt-4 pb-3 flex items-center justify-between border-b" style="border-color: var(--border-hair);">
|
|
<div class="flex items-center gap-2">
|
|
<span class="sect-head">DETECTION CLASSES</span>
|
|
<span class="mono tnum" style="font-size: 10px; color: var(--text-muted);">[19]</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search + Add -->
|
|
<div class="px-4 py-3 flex items-center gap-2 border-b" style="border-color: var(--border-hair);">
|
|
<div class="relative flex-1">
|
|
<svg class="absolute left-2 top-1/2 -translate-y-1/2" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--text-muted);"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
<input type="text" placeholder="Search class…" class="inp" style="padding-left: 26px; height: 28px; font-size: 11px;">
|
|
</div>
|
|
<button class="btn btn-primary">
|
|
<span>+ ADD</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="flex-1 overflow-y-auto">
|
|
<table class="w-full tabular">
|
|
<thead class="sticky top-0" style="background: var(--surface-1);">
|
|
<tr style="border-bottom: 1px solid var(--border-hair);">
|
|
<th class="text-left px-3 py-2 micro" style="width: 36px;">#</th>
|
|
<th class="text-left px-2 py-2 micro">Name</th>
|
|
<th class="text-center px-2 py-2 micro" style="width: 30px;">Hex</th>
|
|
<th class="text-right px-3 py-2 micro" style="width: 60px;">Ops</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Row template -->
|
|
<!-- 0 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">00</td>
|
|
<td class="px-2"><span style="font-size: 12px;">ArmorVehicle</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #FF0000;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit" title="Edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger" title="Delete"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 1 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">01</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Truck</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #00FF00;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 2 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">02</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Vehicle</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #0000FF;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 3 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">03</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Artillery</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #FFFF00;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 4 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">04</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Shadow</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #FF00FF;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 5 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">05</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Trenches</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #00FFFF;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 6 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">06</td>
|
|
<td class="px-2"><span style="font-size: 12px;">MilitaryMan</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #188021;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 7 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">07</td>
|
|
<td class="px-2"><span style="font-size: 12px;">TyreTracks</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #800000;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 8 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">08</td>
|
|
<td class="px-2"><span style="font-size: 12px;">AdditionArmoredTank</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #008000;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 9 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">09</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Smoke</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #000080;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 10 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">10</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Plane</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #4060FF;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 11 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">11</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Moto</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #808000;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 12 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">12</td>
|
|
<td class="px-2"><span style="font-size: 12px;">CamouflageNet</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #800080;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 13 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">13</td>
|
|
<td class="px-2"><span style="font-size: 12px;">CamouflageBranches</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #2F4F4F;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 14 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">14</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Roof</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #1E90FF;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 15 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">15</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Building</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #FFB6C1;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 16 — inline edit example -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--accent-amber); height: 32px; background: rgba(255,157,61,.06);">
|
|
<td class="px-3 mono tnum" style="color: var(--accent-amber); font-size: 12px;">16</td>
|
|
<td class="px-2">
|
|
<input type="text" value="Caponier" class="inp inp-mono" style="height: 22px; padding: 0 6px; font-size: 11px;">
|
|
</td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #C04060; box-shadow: 0 0 0 1px var(--accent-amber);"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="inline-flex gap-1">
|
|
<button class="ibtn cyan" title="Save"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="20 6 9 17 4 12"/></svg></button>
|
|
<button class="ibtn" title="Cancel"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 17 -->
|
|
<tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">17</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Ammo</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #33658A;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<!-- 18 -->
|
|
<tr class="row-hover" style="height: 32px;">
|
|
<td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">18</td>
|
|
<td class="px-2"><span style="font-size: 12px;">Protect.Struct</span></td>
|
|
<td class="px-2 text-center"><span class="swatch" style="background: #969647;"></span></td>
|
|
<td class="px-3 text-right">
|
|
<span class="reveal inline-flex gap-1">
|
|
<button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
|
|
<button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ============ CENTER COLUMN ============ -->
|
|
<section class="flex-1 overflow-y-auto grid-bg">
|
|
<div class="max-w-[920px] mx-auto p-6 space-y-6">
|
|
|
|
<!-- ===== AI RECOGNITION SETTINGS ===== -->
|
|
<div>
|
|
<div class="flex items-end justify-between mb-3">
|
|
<div>
|
|
<div class="sect-head">AI RECOGNITION ENGINE</div>
|
|
<div class="hint mt-1">Detection model runtime parameters. Applied per-flight, hot-reloaded.</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 micro">
|
|
<span style="color: var(--text-muted);">MODEL</span>
|
|
<span class="mono tnum" style="color: var(--text-primary);">YOLOV8-X · CKPT-241</span>
|
|
<span class="pill pill-cyan"><span class="dot live"></span>LOADED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bracket panel p-5">
|
|
<span class="br"></span>
|
|
|
|
<div class="grid grid-cols-3 gap-x-6 gap-y-4">
|
|
<!-- Frames -->
|
|
<div>
|
|
<label class="micro block mb-1">Frames To Recognize</label>
|
|
<div class="hint mb-2">Number of consecutive frames the model averages before emitting a detection.</div>
|
|
<div class="flex items-stretch gap-2">
|
|
<input class="inp inp-mono" value="4" style="text-align: right; width: 88px;">
|
|
<div class="flex flex-col" style="border: 1px solid var(--border-hair); border-radius: 2px;">
|
|
<button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input); border-bottom: 1px solid var(--border-hair);">▲</button>
|
|
<button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input);">▼</button>
|
|
</div>
|
|
<span class="micro self-center" style="color: var(--text-muted);">FR</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Seconds -->
|
|
<div>
|
|
<label class="micro block mb-1">Min Seconds Between</label>
|
|
<div class="hint mb-2">Cooldown gap between successive inference calls on the same video stream.</div>
|
|
<div class="flex items-stretch gap-2">
|
|
<input class="inp inp-mono" value="2" style="text-align: right; width: 88px;">
|
|
<div class="flex flex-col" style="border: 1px solid var(--border-hair); border-radius: 2px;">
|
|
<button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input); border-bottom: 1px solid var(--border-hair);">▲</button>
|
|
<button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input);">▼</button>
|
|
</div>
|
|
<span class="micro self-center" style="color: var(--text-muted);">SEC</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confidence -->
|
|
<div>
|
|
<label class="micro block mb-1">Min Confidence</label>
|
|
<div class="hint mb-2">Detections below this threshold are discarded before reaching the canvas.</div>
|
|
<div class="flex items-stretch gap-2">
|
|
<input class="inp inp-mono" value="25" style="text-align: right; width: 88px;">
|
|
<div class="flex flex-col" style="border: 1px solid var(--border-hair); border-radius: 2px;">
|
|
<button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input); border-bottom: 1px solid var(--border-hair);">▲</button>
|
|
<button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input);">▼</button>
|
|
</div>
|
|
<span class="micro self-center" style="color: var(--text-muted);">%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- footer / telemetry -->
|
|
<div class="mt-5 pt-4 flex items-center justify-between" style="border-top: 1px dashed var(--border-hair);">
|
|
<div class="flex items-center gap-5 micro">
|
|
<span style="color: var(--text-muted);">LAST RUN <span class="mono tnum" style="color: var(--text-secondary);">11:43:09Z</span></span>
|
|
<span style="color: var(--text-muted);">FRAMES <span class="mono tnum" style="color: var(--text-secondary);">14,228</span></span>
|
|
<span style="color: var(--text-muted);">AVG CONF <span class="mono tnum" style="color: var(--accent-green);">71.4%</span></span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn btn-ghost">RESET</button>
|
|
<button class="btn btn-primary">APPLY</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== GPS DEVICE SETTINGS ===== -->
|
|
<div>
|
|
<div class="flex items-end justify-between mb-3">
|
|
<div>
|
|
<div class="sect-head">GPS DEVICE LINK</div>
|
|
<div class="hint mt-1">Ground-station receiver feeding the GPS-Denied correction pipeline.</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 micro">
|
|
<span style="color: var(--text-muted);">SOCKET</span>
|
|
<span class="mono tnum" style="color: var(--text-primary);">UDP/192.168.1.100:9001</span>
|
|
<span class="pill pill-green"><span class="dot"></span>CONNECTED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bracket panel p-5">
|
|
<span class="br"></span>
|
|
|
|
<div class="grid grid-cols-2 gap-x-6 gap-y-4">
|
|
<!-- Address -->
|
|
<div>
|
|
<label class="micro block mb-1">Device Address</label>
|
|
<div class="hint mb-2">IPv4 endpoint or hostname of the GPS receiver bridge.</div>
|
|
<input class="inp inp-mono" value="192.168.1.100" placeholder="0.0.0.0">
|
|
</div>
|
|
|
|
<!-- Port -->
|
|
<div>
|
|
<label class="micro block mb-1">Device Port</label>
|
|
<div class="hint mb-2">UDP port the receiver streams NMEA sentences on.</div>
|
|
<input class="inp inp-mono" value="9001" placeholder="9001" style="text-align: right;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Protocol — segmented -->
|
|
<div class="mt-5">
|
|
<label class="micro block mb-1">Protocol</label>
|
|
<div class="hint mb-2">Wire format negotiated with the receiver. Switch only when the device is offline.</div>
|
|
<div class="seg">
|
|
<button class="seg-btn active">NMEA</button>
|
|
<button class="seg-btn">UBX</button>
|
|
<button class="seg-btn">MAVLINK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<div class="mt-5 pt-4 flex items-center justify-between" style="border-top: 1px dashed var(--border-hair);">
|
|
<div class="flex items-center gap-5 micro">
|
|
<span style="color: var(--text-muted);">FIX <span class="mono tnum" style="color: var(--accent-green);">3D · 11 SAT</span></span>
|
|
<span style="color: var(--text-muted);">HDOP <span class="mono tnum" style="color: var(--text-secondary);">0.82</span></span>
|
|
<span style="color: var(--text-muted);">LAST PKT <span class="mono tnum" style="color: var(--text-secondary);">+12ms</span></span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn btn-ghost">PING</button>
|
|
<button class="btn btn-secondary">RECONNECT</button>
|
|
<button class="btn btn-primary">APPLY</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ RIGHT PANEL: DEFAULT AIRCRAFTS (280px) ============ -->
|
|
<aside class="shrink-0 flex flex-col" style="width: 280px; background: var(--surface-1); border-left: 1px solid var(--border-hair);">
|
|
|
|
<div class="px-4 pt-4 pb-3 flex items-center justify-between border-b" style="border-color: var(--border-hair);">
|
|
<div class="flex items-center gap-2">
|
|
<span class="sect-head">DEFAULT AIRCRAFTS</span>
|
|
</div>
|
|
<span class="mono tnum" style="font-size: 10px; color: var(--text-muted);">[06]</span>
|
|
</div>
|
|
|
|
<!-- legend -->
|
|
<div class="px-4 py-2.5 flex items-center gap-3 border-b micro" style="border-color: var(--border-hair); background: var(--surface-0);">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="type-sq" style="background: var(--accent-blue);">P</span>
|
|
<span style="color: var(--text-muted);">PLANE</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="type-sq" style="background: var(--accent-green);">C</span>
|
|
<span style="color: var(--text-muted);">COPTER</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="type-sq" style="background: var(--accent-amber);">F</span>
|
|
<span style="color: var(--text-muted);">FIXED-W</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- list -->
|
|
<div class="flex-1 overflow-y-auto">
|
|
|
|
<!-- selected default -->
|
|
<div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair); background: var(--surface-2); border-left: 2px solid var(--accent-amber);">
|
|
<span class="type-sq" style="background: var(--accent-green);">C</span>
|
|
<div class="flex-1 min-w-0">
|
|
<div style="font-size: 12.5px;">DJI Mavic 3</div>
|
|
<div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-001 · 4K · 46MIN</div>
|
|
</div>
|
|
<button class="star" title="Default"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
|
|
</div>
|
|
|
|
<div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
|
|
<span class="type-sq" style="background: var(--accent-green);">C</span>
|
|
<div class="flex-1 min-w-0">
|
|
<div style="font-size: 12.5px;">Matrice 300 RTK</div>
|
|
<div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-002 · 4K · 55MIN</div>
|
|
</div>
|
|
<button class="reveal ibtn" title="Set default"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
|
|
<span class="star-off" style="display: var(--show-fb, inline-block);"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
|
|
</div>
|
|
|
|
<div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
|
|
<span class="type-sq" style="background: var(--accent-amber);">F</span>
|
|
<div class="flex-1 min-w-0">
|
|
<div style="font-size: 12.5px;">Leleka-100</div>
|
|
<div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-003 · HD · 180MIN</div>
|
|
</div>
|
|
<button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
|
|
<span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
|
|
</div>
|
|
|
|
<div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
|
|
<span class="type-sq" style="background: var(--accent-blue);">P</span>
|
|
<div class="flex-1 min-w-0">
|
|
<div style="font-size: 12.5px;">Fixed Wing Scout</div>
|
|
<div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-004 · 1080P · 95MIN</div>
|
|
</div>
|
|
<button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
|
|
<span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
|
|
</div>
|
|
|
|
<div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
|
|
<span class="type-sq" style="background: var(--accent-green);">C</span>
|
|
<div class="flex-1 min-w-0">
|
|
<div style="font-size: 12.5px;">Autel EVO II Pro</div>
|
|
<div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-005 · 6K · 40MIN</div>
|
|
</div>
|
|
<button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
|
|
<span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
|
|
</div>
|
|
|
|
<div class="row-hover flex items-center gap-3 px-4 py-2.5">
|
|
<span class="type-sq" style="background: var(--accent-amber);">F</span>
|
|
<div class="flex-1 min-w-0">
|
|
<div style="font-size: 12.5px;">PD-2 Recon</div>
|
|
<div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-006 · HD · 600MIN</div>
|
|
</div>
|
|
<button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
|
|
<span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Add new -->
|
|
<div class="px-4 py-3 border-t" style="border-color: var(--border-hair); background: var(--surface-0);">
|
|
<button class="btn btn-secondary w-full justify-center">+ ADD AIRCRAFT</button>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|