mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 08:21:11 +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.
877 lines
38 KiB
HTML
877 lines
38 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 // Dataset Explorer</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">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
s0: '#0A0D10',
|
|
s1: '#13171C',
|
|
s2: '#1A1F26',
|
|
sin: '#0A0D10',
|
|
bh: '#252B34',
|
|
br2: '#3B4451',
|
|
tp: '#E8ECF1',
|
|
ts: '#9AA4B2',
|
|
tm: '#5B6573',
|
|
amber: '#FF9D3D',
|
|
cyan: '#36D6C5',
|
|
red: '#FF4756',
|
|
green: '#3DDC84',
|
|
blue: '#4E9EFF',
|
|
},
|
|
fontFamily: {
|
|
sans: ['"IBM Plex Sans"', 'system-ui', 'sans-serif'],
|
|
mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<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: 13px/1.5 'IBM Plex Sans', system-ui, sans-serif; }
|
|
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
|
|
.num { font-variant-numeric: tabular-nums; }
|
|
.micro {
|
|
font: 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
}
|
|
.sec-heading {
|
|
font: 600 11px/1.2 'JetBrains Mono', ui-monospace, monospace;
|
|
letter-spacing: 0.14em;
|
|
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 { content:''; position:absolute; bottom: -1px; left: -1px; width:8px; height:8px; border-bottom: 1px solid var(--accent-amber); border-left: 1px solid var(--accent-amber); }
|
|
.bracket > .br::after { content:''; position:absolute; bottom: -1px; right: -1px; width:8px; height:8px; border-bottom: 1px solid var(--accent-amber); border-right:1px solid var(--accent-amber); }
|
|
|
|
/* base panel */
|
|
.panel {
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* inputs */
|
|
.inp {
|
|
background: var(--surface-input);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
color: var(--text-primary);
|
|
font: 12px 'IBM Plex Sans', system-ui, sans-serif;
|
|
outline: none;
|
|
}
|
|
.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', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
|
|
|
|
/* buttons */
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 6px 14px;
|
|
border-radius: 2px;
|
|
font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
.btn-primary { background: var(--accent-amber); color: #0A0D10; border-color: var(--accent-amber); }
|
|
.btn-primary:hover { filter: brightness(1.08); }
|
|
.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-secondary { background: transparent; color: var(--accent-amber); border-color: var(--accent-amber); }
|
|
.btn-secondary:hover { background: rgba(255,157,61,0.12); }
|
|
|
|
/* status pill */
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 3px 8px;
|
|
border-radius: 2px;
|
|
font: 600 10px 'JetBrains Mono', ui-monospace, monospace;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
background: transparent;
|
|
border: 1px solid var(--border-hair);
|
|
color: var(--text-secondary);
|
|
}
|
|
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 6px; }
|
|
.pill-green { color: var(--accent-green); border-color: var(--accent-green); }
|
|
.pill-amber { color: var(--accent-amber); border-color: var(--accent-amber); }
|
|
.pill-blue { color: var(--accent-blue); border-color: var(--accent-blue); }
|
|
.pill-red { color: var(--accent-red); border-color: var(--accent-red); }
|
|
.pill-none { color: var(--text-muted); border-color: var(--border-raised); }
|
|
.pill-cyan { color: var(--accent-cyan); border-color: var(--accent-cyan); }
|
|
|
|
/* status chips (filter) */
|
|
.chip {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 0 10px; height: 24px;
|
|
border-radius: 2px;
|
|
font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
background: transparent;
|
|
border: 1px solid var(--border-hair);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
.chip .dot { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 6px; }
|
|
.chip:hover { color: var(--text-primary); border-color: var(--border-raised); }
|
|
.chip-active-green { color: var(--accent-green); border-color: var(--accent-green); background: rgba(61,220,132,0.12); }
|
|
.chip-active-amber { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.12); }
|
|
.chip-active-blue { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(78,158,255,0.12); }
|
|
.chip-active-muted { color: var(--text-primary); border-color: var(--border-raised); background: rgba(91,101,115,0.18); }
|
|
|
|
/* Toggle switch — square knob, 2px radius */
|
|
.switch {
|
|
position: relative;
|
|
width: 30px; height: 16px;
|
|
background: var(--surface-input);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
flex: 0 0 30px;
|
|
transition: background-color 120ms, border-color 120ms;
|
|
}
|
|
.switch::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 1px; left: 1px;
|
|
width: 12px; height: 12px;
|
|
background: var(--text-muted);
|
|
border-radius: 2px;
|
|
transition: transform 120ms, background-color 120ms;
|
|
}
|
|
.switch.on { background: rgba(255,157,61,0.22); border-color: var(--accent-amber); }
|
|
.switch.on::after { transform: translateX(14px); background: var(--accent-amber); }
|
|
|
|
/* Detection class row */
|
|
.class-row {
|
|
display: flex; align-items: center; gap: 10px;
|
|
height: 28px; padding: 0 8px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
}
|
|
.class-row:hover { background: var(--surface-2); color: var(--text-primary); }
|
|
.class-row.active { background: var(--surface-2); color: var(--text-primary); }
|
|
.class-row.active .count { color: var(--accent-amber); border-color: var(--accent-amber); }
|
|
.swatch { width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid rgba(255,255,255,0.10); }
|
|
.count {
|
|
margin-left: auto;
|
|
padding: 2px 6px;
|
|
font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--text-secondary);
|
|
background: var(--surface-input);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Tab strip */
|
|
.tab {
|
|
display: inline-flex; align-items: center;
|
|
height: 48px; padding: 0 14px;
|
|
font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
.tab:hover { color: var(--text-primary); }
|
|
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
|
|
.tab .badge {
|
|
font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
|
|
color: var(--text-muted);
|
|
padding: 1px 5px;
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
line-height: 1;
|
|
}
|
|
.tab.active .badge { color: var(--accent-amber); border-color: var(--accent-amber); }
|
|
|
|
/* Thumbnail tile */
|
|
.tile {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: border-color 100ms;
|
|
}
|
|
.tile:hover { border-color: var(--accent-amber); }
|
|
.tile.seed { border-color: var(--accent-red); }
|
|
.tile.selected { border: 2px solid var(--accent-amber); }
|
|
.tile .img {
|
|
position: absolute; inset: 0;
|
|
background-size: cover; background-position: center;
|
|
}
|
|
.tile .scrim {
|
|
position: absolute; inset: 0;
|
|
background:
|
|
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
|
|
linear-gradient(180deg, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.55) 100%);
|
|
background-size: 24px 24px, 24px 24px, 100% 100%;
|
|
pointer-events: none;
|
|
}
|
|
.tile .pill { padding: 2px 6px; font-size: 9px; letter-spacing: 0.08em; }
|
|
.tile .corner-tag {
|
|
position: absolute; top: 6px; right: 6px;
|
|
font: 500 9px 'JetBrains Mono', ui-monospace, monospace;
|
|
color: var(--text-primary);
|
|
background: rgba(10,13,16,0.65);
|
|
border: 1px solid var(--border-hair);
|
|
padding: 1px 5px;
|
|
letter-spacing: 0.06em;
|
|
border-radius: 2px;
|
|
}
|
|
.tile .check {
|
|
position: absolute; top: 4px; left: 4px;
|
|
width: 14px; height: 14px;
|
|
background: var(--accent-amber);
|
|
color: #0A0D10;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: 2px;
|
|
}
|
|
.tile .bbox {
|
|
position: absolute;
|
|
border: 1px solid;
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
|
|
}
|
|
|
|
/* live dot animation */
|
|
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.35 } }
|
|
.live { animation: pulse 1.6s ease-in-out infinite; }
|
|
|
|
/* Icon buttons in header */
|
|
.ibtn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 28px; height: 28px;
|
|
border: 1px solid var(--border-hair); border-radius: 2px;
|
|
color: var(--text-secondary); background: transparent;
|
|
transition: color .12s, border-color .12s, background-color .12s;
|
|
cursor: pointer;
|
|
}
|
|
.ibtn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-2); }
|
|
.ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
|
|
.ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 2px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
/* divider */
|
|
.vdiv { width: 1px; height: 20px; background: var(--border-hair); }
|
|
|
|
/* tile scene gradients (varied) */
|
|
.scene-forest-1 { background: radial-gradient(120% 80% at 30% 20%, #2f4636 0%, #1c2a22 55%, #0e1612 100%); }
|
|
.scene-forest-2 { background: linear-gradient(160deg, #324a3a 0%, #1b2820 60%, #0e1612 100%); }
|
|
.scene-urban-1 { background: linear-gradient(155deg, #3a4150 0%, #232a36 55%, #14181f 100%); }
|
|
.scene-urban-2 { background: radial-gradient(120% 90% at 70% 30%, #4a5568 0%, #2a313d 60%, #14181f 100%); }
|
|
.scene-desert-1 { background: linear-gradient(165deg, #6a513a 0%, #44332a 55%, #1f1813 100%); }
|
|
.scene-desert-2 { background: radial-gradient(110% 85% at 20% 70%, #7a5a3e 0%, #4a3522 60%, #20160d 100%); }
|
|
.scene-dusk-1 { background: linear-gradient(180deg, #2a1d2d 0%, #3b2a35 30%, #1d2230 70%, #0d1118 100%); }
|
|
.scene-dusk-2 { background: linear-gradient(180deg, #1a2438 0%, #2d2236 45%, #1a1820 100%); }
|
|
.scene-field-1 { background: linear-gradient(160deg, #4a5232 0%, #2e3520 60%, #15170d 100%); }
|
|
.scene-field-2 { background: radial-gradient(120% 80% at 60% 40%, #5a5a30 0%, #353720 55%, #15170d 100%); }
|
|
.scene-coast-1 { background: linear-gradient(170deg, #2d4a52 0%, #1e3036 60%, #0c1416 100%); }
|
|
.scene-night-1 { background: radial-gradient(140% 100% at 50% 30%, #1c2740 0%, #10182a 60%, #06080f 100%); }
|
|
.scene-snow-1 { background: linear-gradient(180deg, #4a5560 0%, #2c333c 55%, #161a20 100%); }
|
|
.scene-rural-1 { background: linear-gradient(160deg, #3d4a35 0%, #2a3328 50%, #141a14 100%); }
|
|
|
|
/* faint terrain dot pattern overlay */
|
|
.terrain::before {
|
|
content: '';
|
|
position: absolute; inset: 0;
|
|
background-image:
|
|
radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
|
|
radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1px);
|
|
background-size: 7px 7px, 9px 9px;
|
|
background-position: 0 0, 3px 4px;
|
|
mix-blend-mode: overlay;
|
|
opacity: 0.6;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="h-screen flex flex-col overflow-hidden">
|
|
|
|
<!-- ============ HEADER ============ -->
|
|
<header class="flex items-center h-12 px-4 gap-3 border-b border-[color:var(--border-hair)] bg-[color:var(--surface-1)] shrink-0">
|
|
<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="w-1.5 h-1.5 rounded-full live" style="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 active">Dataset</a>
|
|
<a href="admin.html" class="tab">Admin</a>
|
|
</nav>
|
|
|
|
<div class="ml-auto flex items-center gap-2" style="font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase;">
|
|
<span class="w-1.5 h-1.5 rounded-full live" style="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="settings.html" 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 ============ -->
|
|
<div class="flex-1 flex overflow-hidden p-3 gap-3">
|
|
|
|
<!-- ============ LEFT PANEL ============ -->
|
|
<aside class="bracket panel flex flex-col" style="width:250px; flex-shrink:0;">
|
|
<span class="br"></span>
|
|
|
|
<!-- Detection Classes -->
|
|
<div class="px-3 pt-3 pb-2 flex items-center justify-between border-b border-[color:var(--border-hair)]">
|
|
<span class="sec-heading">Detection Classes</span>
|
|
<span class="mono text-[10px] text-tm">16</span>
|
|
</div>
|
|
|
|
<div class="px-2 py-2 flex flex-col gap-0.5 overflow-y-auto" style="max-height: 46vh;">
|
|
<div class="class-row active">
|
|
<span class="swatch" style="background:#FF0000"></span>
|
|
<span class="text-[12px]">ArmorVehicle</span>
|
|
<span class="count num">124</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#00B341"></span>
|
|
<span class="text-[12px]">Truck</span>
|
|
<span class="count num">86</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#0044FF"></span>
|
|
<span class="text-[12px]">Vehicle</span>
|
|
<span class="count num">312</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#FFFF00"></span>
|
|
<span class="text-[12px]">Artillery</span>
|
|
<span class="count num">47</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#FF00FF"></span>
|
|
<span class="text-[12px]">Shadow</span>
|
|
<span class="count num">203</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#00FFFF"></span>
|
|
<span class="text-[12px]">Trenches</span>
|
|
<span class="count num">59</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#FF6B00"></span>
|
|
<span class="text-[12px]">ActiveMine</span>
|
|
<span class="count num">12</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#9D4EFF"></span>
|
|
<span class="text-[12px]">AAGun</span>
|
|
<span class="count num">8</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#FFFFFF"></span>
|
|
<span class="text-[12px]">Bunker</span>
|
|
<span class="count num">21</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#7AB800"></span>
|
|
<span class="text-[12px]">Infantry</span>
|
|
<span class="count num">73</span>
|
|
</div>
|
|
<div class="class-row">
|
|
<span class="swatch" style="background:#FF1493"></span>
|
|
<span class="text-[12px]">UAV</span>
|
|
<span class="count num">5</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="mt-auto border-t border-[color:var(--border-hair)] px-3 py-3 flex flex-col gap-3">
|
|
<div class="micro">Filters</div>
|
|
|
|
<!-- Toggle row -->
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<span class="text-[12px] text-tp">Show with objects only</span>
|
|
<span class="text-[10px] text-tm">Hide empty frames</span>
|
|
</div>
|
|
<div class="switch on" role="switch" aria-checked="true"></div>
|
|
</div>
|
|
|
|
<!-- Search -->
|
|
<div class="relative">
|
|
<svg class="absolute left-2.5 top-1/2 -translate-y-1/2" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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 class="inp w-full" style="padding-left:28px" placeholder="Search annotation name…" />
|
|
</div>
|
|
|
|
<!-- Quick stats -->
|
|
<div class="grid grid-cols-2 gap-2 pt-1">
|
|
<div class="border border-[color:var(--border-hair)] rounded-[2px] p-2">
|
|
<div class="micro" style="color:var(--text-muted)">Total</div>
|
|
<div class="mono text-[15px] text-tp">1,047</div>
|
|
</div>
|
|
<div class="border border-[color:var(--border-hair)] rounded-[2px] p-2">
|
|
<div class="micro" style="color:var(--text-muted)">Validated</div>
|
|
<div class="mono text-[15px] text-green">612</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ============ MAIN AREA ============ -->
|
|
<main class="flex-1 flex flex-col min-w-0 gap-3">
|
|
|
|
<!-- Filter Bar -->
|
|
<div class="bracket panel relative flex items-center gap-3 px-3" style="height:48px;">
|
|
<span class="br"></span>
|
|
|
|
<!-- Date Range -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="micro">Range</span>
|
|
<input class="inp inp-mono" style="width:104px" value="2025-02-09" />
|
|
<span class="mono text-tm">—</span>
|
|
<input class="inp inp-mono" style="width:104px" value="2025-02-11" />
|
|
</div>
|
|
|
|
<span class="vdiv"></span>
|
|
|
|
<!-- Flight -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="micro">Flight</span>
|
|
<button class="inp flex items-center gap-2" style="padding:0 10px; height:28px;">
|
|
<span class="w-1.5 h-1.5 rounded-full" style="background:var(--accent-amber)"></span>
|
|
<span class="mono text-[12px] text-tp tracking-wider">FL-03</span>
|
|
<span class="text-[10px] text-tm ml-1">▾</span>
|
|
</button>
|
|
</div>
|
|
|
|
<span class="vdiv"></span>
|
|
|
|
<!-- Status chips -->
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="micro mr-1">Status</span>
|
|
<button class="chip">
|
|
<span class="dot" style="background:var(--text-muted)"></span>None
|
|
</button>
|
|
<button class="chip chip-active-amber">
|
|
<span class="dot" style="background:var(--accent-amber)"></span>Created
|
|
</button>
|
|
<button class="chip chip-active-blue">
|
|
<span class="dot" style="background:var(--accent-blue)"></span>Edited
|
|
</button>
|
|
<button class="chip chip-active-green">
|
|
<span class="dot" style="background:var(--accent-green)"></span>Validated
|
|
</button>
|
|
</div>
|
|
|
|
<div class="ml-auto flex items-center gap-3">
|
|
<span class="micro" style="color:var(--text-muted)">Showing</span>
|
|
<span class="mono text-[12px] text-tp">214<span class="text-tm"> / 1047</span></span>
|
|
<span class="vdiv"></span>
|
|
<button class="w-7 h-7 flex items-center justify-center border border-[color:var(--border-hair)] rounded-[2px] text-ts hover:text-tp hover:border-[color:var(--border-raised)]" title="Sort">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
|
|
</button>
|
|
<button class="w-7 h-7 flex items-center justify-center border border-[color:var(--border-hair)] rounded-[2px] text-ts hover:text-tp hover:border-[color:var(--border-raised)]" title="Grid density">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab strip + grid panel -->
|
|
<div class="bracket panel relative flex-1 flex flex-col min-h-0 overflow-hidden">
|
|
<span class="br"></span>
|
|
|
|
<!-- Tabs -->
|
|
<div class="flex items-center px-2 border-b border-[color:var(--border-hair)] shrink-0">
|
|
<div class="tab active">
|
|
<span>Annotations</span>
|
|
<span class="badge num">214</span>
|
|
</div>
|
|
<div class="tab">
|
|
<span>Editor</span>
|
|
<span class="badge">—</span>
|
|
</div>
|
|
<div class="tab">
|
|
<span>Class Distribution</span>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-2 px-2 micro" style="color:var(--text-muted)">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-cyan live"></span>
|
|
<span>Live sync</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid -->
|
|
<div class="flex-1 overflow-y-auto p-2">
|
|
<div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));">
|
|
|
|
<!-- Tile 1 - Validated, forest, selected -->
|
|
<div class="tile selected">
|
|
<div class="img scene-forest-1 terrain"></div>
|
|
<div class="bbox" style="top:38%; left:30%; width:24%; height:18%; border-color:#FF0000;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="check"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|
<div class="corner-tag mono">12 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 2 - Created, urban -->
|
|
<div class="tile">
|
|
<div class="img scene-urban-1 terrain"></div>
|
|
<div class="bbox" style="top:48%; left:42%; width:18%; height:14%; border-color:#0044FF;"></div>
|
|
<div class="bbox" style="top:30%; left:18%; width:12%; height:10%; border-color:#FF00FF;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">12 MAY · AB</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-amber"><span class="dot"></span>CREATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 3 - Validated, desert -->
|
|
<div class="tile">
|
|
<div class="img scene-desert-1 terrain"></div>
|
|
<div class="bbox" style="top:55%; left:35%; width:30%; height:20%; border-color:#FF0000;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">11 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 4 - Edited, forest 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-forest-2 terrain"></div>
|
|
<div class="bbox" style="top:42%; left:50%; width:20%; height:16%; border-color:#00B341;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">11 MAY · MK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-blue"><span class="dot"></span>EDITED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 5 - None, urban 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-urban-2 terrain"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">11 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-none"><span class="dot"></span>NONE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 6 - Validated, field -->
|
|
<div class="tile">
|
|
<div class="img scene-field-1 terrain"></div>
|
|
<div class="bbox" style="top:36%; left:24%; width:22%; height:18%; border-color:#FF0000;"></div>
|
|
<div class="bbox" style="top:60%; left:58%; width:14%; height:10%; border-color:#FFFF00;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">11 MAY · OK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 7 - Created, desert 2, SEED -->
|
|
<div class="tile seed">
|
|
<div class="img scene-desert-2 terrain"></div>
|
|
<div class="bbox" style="top:44%; left:36%; width:28%; height:22%; border-color:#FF6B00;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">10 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-amber"><span class="dot"></span>CREATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 8 - Validated, forest, selected -->
|
|
<div class="tile selected">
|
|
<div class="img scene-forest-1 terrain"></div>
|
|
<div class="bbox" style="top:30%; left:28%; width:18%; height:16%; border-color:#FF0000;"></div>
|
|
<div class="bbox" style="top:56%; left:52%; width:20%; height:14%; border-color:#0044FF;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="check"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|
<div class="corner-tag mono">10 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 9 - Edited, dusk -->
|
|
<div class="tile">
|
|
<div class="img scene-dusk-1 terrain"></div>
|
|
<div class="bbox" style="top:48%; left:40%; width:24%; height:16%; border-color:#00B341;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">10 MAY · MK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-blue"><span class="dot"></span>EDITED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 10 - None, urban 1 -->
|
|
<div class="tile">
|
|
<div class="img scene-urban-1 terrain"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">10 MAY · AB</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-none"><span class="dot"></span>NONE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 11 - Validated, forest 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-forest-2 terrain"></div>
|
|
<div class="bbox" style="top:38%; left:32%; width:26%; height:20%; border-color:#FF0000;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">10 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 12 - Created, desert -->
|
|
<div class="tile">
|
|
<div class="img scene-desert-1 terrain"></div>
|
|
<div class="bbox" style="top:50%; left:46%; width:18%; height:14%; border-color:#FFFF00;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">10 MAY · OK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-amber"><span class="dot"></span>CREATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 13 - Validated, urban 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-urban-2 terrain"></div>
|
|
<div class="bbox" style="top:32%; left:22%; width:18%; height:14%; border-color:#0044FF;"></div>
|
|
<div class="bbox" style="top:58%; left:56%; width:24%; height:18%; border-color:#FF00FF;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">09 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 14 - Edited, dusk 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-dusk-2 terrain"></div>
|
|
<div class="bbox" style="top:44%; left:38%; width:22%; height:16%; border-color:#9D4EFF;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">09 MAY · MK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-blue"><span class="dot"></span>EDITED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 15 - None, field 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-field-2 terrain"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">09 MAY · OK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-none"><span class="dot"></span>NONE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 16 - Validated, coast, selected -->
|
|
<div class="tile selected">
|
|
<div class="img scene-coast-1 terrain"></div>
|
|
<div class="bbox" style="top:40%; left:30%; width:24%; height:18%; border-color:#FF0000;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="check"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|
<div class="corner-tag mono">09 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 17 - Created, night, SEED -->
|
|
<div class="tile seed">
|
|
<div class="img scene-night-1 terrain"></div>
|
|
<div class="bbox" style="top:46%; left:42%; width:20%; height:14%; border-color:#00FFFF;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">09 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-amber"><span class="dot"></span>CREATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 18 - Validated, snow -->
|
|
<div class="tile">
|
|
<div class="img scene-snow-1 terrain"></div>
|
|
<div class="bbox" style="top:42%; left:36%; width:22%; height:18%; border-color:#FF0000;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">09 MAY · AB</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 19 - Edited, rural -->
|
|
<div class="tile">
|
|
<div class="img scene-rural-1 terrain"></div>
|
|
<div class="bbox" style="top:50%; left:30%; width:30%; height:18%; border-color:#00B341;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">08 MAY · MK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-blue"><span class="dot"></span>EDITED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 20 - Validated, forest 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-forest-2 terrain"></div>
|
|
<div class="bbox" style="top:34%; left:26%; width:20%; height:16%; border-color:#FF0000;"></div>
|
|
<div class="bbox" style="top:60%; left:56%; width:18%; height:12%; border-color:#FFFF00;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">08 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 21 - None, dusk 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-dusk-2 terrain"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">08 MAY · OK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-none"><span class="dot"></span>NONE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 22 - Created, desert 2 -->
|
|
<div class="tile">
|
|
<div class="img scene-desert-2 terrain"></div>
|
|
<div class="bbox" style="top:48%; left:40%; width:24%; height:18%; border-color:#FF6B00;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">08 MAY · RD</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-amber"><span class="dot"></span>CREATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 23 - Validated, urban 1 -->
|
|
<div class="tile">
|
|
<div class="img scene-urban-1 terrain"></div>
|
|
<div class="bbox" style="top:40%; left:34%; width:22%; height:16%; border-color:#0044FF;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">08 MAY · AB</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile 24 - Edited, coast -->
|
|
<div class="tile">
|
|
<div class="img scene-coast-1 terrain"></div>
|
|
<div class="bbox" style="top:48%; left:44%; width:18%; height:14%; border-color:#00FFFF;"></div>
|
|
<div class="scrim"></div>
|
|
<div class="corner-tag mono">08 MAY · MK</div>
|
|
<div class="absolute bottom-1.5 left-1.5">
|
|
<span class="pill pill-blue"><span class="dot"></span>EDITED</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Bar -->
|
|
<div class="bracket panel relative flex items-center gap-3 px-3 shrink-0" style="height:44px;">
|
|
<span class="br"></span>
|
|
|
|
<button class="btn btn-primary">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Validate (3)
|
|
</button>
|
|
|
|
<button class="btn btn-ghost">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/><path d="M20.49 15A9 9 0 0 1 5.64 18.36L1 14"/></svg>
|
|
Refresh Thumbnails
|
|
</button>
|
|
|
|
<span class="vdiv"></span>
|
|
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<span class="micro">Selected</span>
|
|
<span class="mono text-[12px] text-tp truncate">ann_FL03_0231_ArmorVehicle_07</span>
|
|
</div>
|
|
|
|
<div class="ml-auto flex items-center gap-3">
|
|
<span class="text-[11px] text-tm">3 of 214 selected</span>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|