mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 12:01:11 +00:00
ui_design v2: redesign of all 5 pages
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.
This commit is contained in:
Armen Rohalov
@@ -0,0 +1,133 @@
|
||||
# Azaion Tactical Ops — Design System (Plugin Version)
|
||||
|
||||
Shared aesthetic spec for every page in `_docs/ui_design/v2/plugin/`. **Every page must adhere to this contract.** If a page deviates from a token here, that's a bug.
|
||||
|
||||
## Aesthetic
|
||||
|
||||
Defense / mission-control console. Dense, technical, deliberate. Think air-traffic-control + military HUD + Bloomberg Terminal — never gamer-RGB, never consumer-glossy.
|
||||
|
||||
## Palette (dark only, no light mode)
|
||||
|
||||
```
|
||||
--surface-0: #0A0D10 /* page bg */
|
||||
--surface-1: #13171C /* panels, sidebars */
|
||||
--surface-2: #1A1F26 /* raised rows, hover */
|
||||
--surface-input: #0A0D10 /* input fill, sits darker than the panel containing it */
|
||||
--border-hair: #252B34 /* 1px borders, used everywhere */
|
||||
--border-raised: #3B4451 /* used for active/focus 2px */
|
||||
--text-primary: #E8ECF1
|
||||
--text-secondary: #9AA4B2
|
||||
--text-muted: #5B6573
|
||||
--accent-amber: #FF9D3D /* primary / brand / warnings */
|
||||
--accent-cyan: #36D6C5 /* live data, friendly */
|
||||
--accent-red: #FF4756 /* hostile, destructive, GPS-denied */
|
||||
--accent-green: #3DDC84 /* validated, connected, ready */
|
||||
--accent-blue: #4E9EFF /* info, edited */
|
||||
```
|
||||
|
||||
Class colors (used in detection-class swatches) stay as-is from README.md (`#FF0000`, `#00FF00`, `#0000FF`, `#FFFF00`, `#FF00FF`, `#00FFFF` etc.) — those are domain data, not theme.
|
||||
|
||||
## Typography
|
||||
|
||||
- Headline / display / micro-labels / numerics → **JetBrains Mono** (Google Fonts)
|
||||
- Body / general UI text → **IBM Plex Sans** (Google Fonts)
|
||||
- ALL-CAPS micro-labels: `font: 10px/1.4 'JetBrains Mono'; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary)`
|
||||
- Numerics: always `font-variant-numeric: tabular-nums`
|
||||
- Body default: `13px/1.5 'IBM Plex Sans'`, primary color
|
||||
- Page section heading: `11px` mono, uppercase, amber color
|
||||
|
||||
Include the Google Fonts links in each `<head>`:
|
||||
|
||||
```html
|
||||
<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">
|
||||
```
|
||||
|
||||
## Form language
|
||||
|
||||
- 1px hairline borders everywhere; corners square or `border-radius: 2px` / `4px` max — never `rounded-full` outside of status dots and avatar.
|
||||
- Active panel borders use 2px in amber (`--accent-amber`) or cyan.
|
||||
- **Corner brackets** — the signature element. Frame *every* major panel/card with four 8px L-shaped brackets, drawn as two 1px lines per corner in amber (or in the panel-active color). Use this CSS helper:
|
||||
|
||||
```css
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
```
|
||||
|
||||
then `<div class="bracket panel">…<span class="br"></span></div>`.
|
||||
|
||||
- Subtle background grid (60px × 60px, 3% white) on map/canvas surfaces:
|
||||
|
||||
```css
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
```
|
||||
|
||||
- Status pills: leading 6px dot + UPPERCASE 10px mono label, 1px border in status color, transparent fill, 2px radius.
|
||||
|
||||
```html
|
||||
<span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
|
||||
```
|
||||
|
||||
- Live indicator: 6px dot in cyan or red, with `animation: pulse 1.6s ease-in-out infinite`.
|
||||
|
||||
## Spacing
|
||||
|
||||
- Base 4px.
|
||||
- Panel padding: 16px.
|
||||
- Form gap: 12px between fields.
|
||||
- Tight list row height: 28px (sidebars), 32px (tables).
|
||||
- Header bar height: 48px.
|
||||
|
||||
## Components
|
||||
|
||||
**Buttons**
|
||||
|
||||
- Primary: `bg: amber; color: #0A0D10; border: 1px solid amber; padding: 6px 14px; font: 11px mono; letter-spacing: 0.08em; text-transform: uppercase`
|
||||
- Secondary: `bg: transparent; color: amber; border: 1px solid amber` (with hover → fill at 12% opacity)
|
||||
- Ghost: same as secondary but `border: 1px solid var(--border-hair); color: var(--text-secondary)`
|
||||
- Danger: red variant of primary
|
||||
- Icon button: 28×28, ghost styling
|
||||
|
||||
**Inputs**
|
||||
|
||||
- `bg: var(--surface-input); border: 1px solid var(--border-hair); border-radius: 2px; padding: 6px 10px; height: 32px; font: 12px 'IBM Plex Sans'; color: var(--text-primary)`
|
||||
- Focus: `border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber)`
|
||||
- Placeholder: `var(--text-muted)`
|
||||
|
||||
**Tables**
|
||||
|
||||
- No zebra stripes. Row separator = 1px hairline. Header row: 10px mono uppercase, secondary text. Hover row → `var(--surface-2)`.
|
||||
|
||||
## Global header
|
||||
|
||||
```
|
||||
[AZAION mark] [FLIGHT SELECTOR ▾] | FLIGHTS / ANNOTATIONS / DATASET / ADMIN [user@x.com] [⚙] [⏻]
|
||||
```
|
||||
|
||||
- Logo: amber, JetBrains Mono Bold, `tracking: 0.2em`, `font-size: 14px`.
|
||||
- Flight selector: 28px-tall pill with mono flight id + ▾ icon, 1px amber border, surface-1 fill.
|
||||
- Tab nav: each tab is a flat label with 2px bottom border in amber when active, no top-rounding, 12px sans.
|
||||
- Header bottom: 1px hairline.
|
||||
|
||||
## Mobile bottom nav (optional, only if implementing responsive)
|
||||
|
||||
Hide tab nav at `< 768px` and show a 56px fixed bottom bar with 5 icon+label items.
|
||||
|
||||
## Don't
|
||||
|
||||
- No purple gradients. No glassmorphism. No drop shadows over 4px blur.
|
||||
- No emoji used as functional UI. (Decorative readouts may use the bracket characters `⌐ ¬ ⌜ ⌝ ⌞ ⌟`.)
|
||||
- No rounded-full anywhere except status dots and avatar circle.
|
||||
- Don't change the IA / panel arrangement defined in `../../README.md` — this pass is visual polish only.
|
||||
@@ -0,0 +1,837 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,876 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AZAION // Annotations</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; }
|
||||
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
|
||||
.num { font-variant-numeric: tabular-nums; }
|
||||
|
||||
.micro {
|
||||
font: 500 10px/1.4 'JetBrains Mono', monospace;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.section-h {
|
||||
font: 600 11px/1.4 'JetBrains Mono', 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 { 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; }
|
||||
|
||||
.bracket-cyan::before, .bracket-cyan::after,
|
||||
.bracket-cyan > .br::before, .bracket-cyan > .br::after { border-color: var(--accent-cyan); }
|
||||
|
||||
/* ── Canvas grid backdrop ─────────────────────────────────── */
|
||||
.grid-bg {
|
||||
background-color: #0E1216;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
/* faux terrain wash so the canvas reads as imagery */
|
||||
.terrain {
|
||||
background-color: #11181B;
|
||||
background-image:
|
||||
radial-gradient(900px 500px at 30% 40%, rgba(48,72,60,0.45), transparent 60%),
|
||||
radial-gradient(700px 400px at 75% 65%, rgba(40,52,68,0.35), transparent 65%),
|
||||
radial-gradient(400px 300px at 60% 30%, rgba(82,64,40,0.18), transparent 70%),
|
||||
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: auto, auto, auto, 48px 48px, 48px 48px;
|
||||
}
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 28px; padding: 0 12px;
|
||||
font: 600 11px/1 'JetBrains Mono', monospace;
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
border: 1px solid var(--border-hair); border-radius: 2px;
|
||||
color: var(--text-secondary); background: transparent;
|
||||
transition: background .12s, color .12s, border-color .12s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover { background: var(--surface-2); color: var(--text-primary); }
|
||||
.btn-amber {
|
||||
background: var(--accent-amber); color: #0A0D10; border-color: var(--accent-amber);
|
||||
}
|
||||
.btn-amber:hover { filter: brightness(1.08); background: var(--accent-amber); color: #0A0D10; }
|
||||
.btn-ghost-amber { color: var(--accent-amber); border-color: var(--accent-amber); }
|
||||
.btn-ghost-amber:hover { background: rgba(255,157,61,0.12); color: var(--accent-amber); }
|
||||
.btn-danger { color: var(--accent-red); border-color: rgba(255,71,86,0.4); }
|
||||
.btn-danger:hover { background: rgba(255,71,86,0.12); color: var(--accent-red); border-color: var(--accent-red); }
|
||||
|
||||
.icobtn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 28px; height: 28px;
|
||||
border: 1px solid var(--border-hair); border-radius: 2px;
|
||||
background: var(--surface-1); color: var(--text-secondary);
|
||||
transition: background .12s, color .12s, border-color .12s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icobtn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-raised); }
|
||||
.icobtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
|
||||
|
||||
/* ── Inputs ───────────────────────────────────────────────── */
|
||||
.inp {
|
||||
height: 28px; padding: 0 10px;
|
||||
background: var(--surface-input); color: var(--text-primary);
|
||||
border: 1px solid var(--border-hair); border-radius: 2px;
|
||||
font: 12px 'IBM Plex Sans', sans-serif; outline: none;
|
||||
transition: border-color .12s, box-shadow .12s;
|
||||
}
|
||||
.inp::placeholder { color: var(--text-muted); }
|
||||
.inp:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
|
||||
|
||||
/* ── Pills ────────────────────────────────────────────────── */
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 20px; padding: 0 8px; border-radius: 2px;
|
||||
font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; border: 1px solid; background: transparent;
|
||||
}
|
||||
.pill .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
|
||||
.pill-green { color: var(--accent-green); border-color: rgba(61,220,132,0.5); }
|
||||
.pill-green .dot { background: var(--accent-green); }
|
||||
.pill-cyan { color: var(--accent-cyan); border-color: rgba(54,214,197,0.5); }
|
||||
.pill-cyan .dot { background: var(--accent-cyan); }
|
||||
.pill-amber { color: var(--accent-amber); border-color: rgba(255,157,61,0.5); }
|
||||
.pill-amber .dot { background: var(--accent-amber); }
|
||||
.pill-red { color: var(--accent-red); border-color: rgba(255,71,86,0.5); }
|
||||
.pill-red .dot { background: var(--accent-red); }
|
||||
|
||||
.live-dot {
|
||||
width: 6px; height: 6px; border-radius: 999px;
|
||||
background: var(--accent-cyan);
|
||||
box-shadow: 0 0 0 0 rgba(54,214,197,0.5);
|
||||
animation: pulse 1.6s ease-in-out infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%,100% { box-shadow: 0 0 0 0 rgba(54,214,197,0.5); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(54,214,197,0); }
|
||||
}
|
||||
|
||||
/* ── Media row ────────────────────────────────────────────── */
|
||||
.media-row {
|
||||
position: relative;
|
||||
display: grid; grid-template-columns: 44px 1fr auto; gap: 8px;
|
||||
align-items: center;
|
||||
height: 32px; padding: 0 12px 0 14px;
|
||||
border-bottom: 1px solid var(--border-hair);
|
||||
cursor: pointer; user-select: none;
|
||||
}
|
||||
.media-row:hover { background: var(--surface-2); }
|
||||
.media-row.active {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
.media-row.active::before {
|
||||
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
||||
width: 2px; background: var(--accent-amber);
|
||||
}
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 40px; height: 16px; border-radius: 2px;
|
||||
font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: 0.1em;
|
||||
border: 1px solid;
|
||||
}
|
||||
.chip-photo { color: var(--accent-cyan); border-color: rgba(54,214,197,0.45); background: rgba(54,214,197,0.06); }
|
||||
.chip-video { color: var(--accent-amber); border-color: rgba(255,157,61,0.45); background: rgba(255,157,61,0.06); }
|
||||
|
||||
/* ── Class row ────────────────────────────────────────────── */
|
||||
.class-row {
|
||||
display: grid; grid-template-columns: 16px 1fr auto; gap: 10px;
|
||||
align-items: center; height: 28px; padding: 0 12px;
|
||||
border-bottom: 1px solid var(--border-hair);
|
||||
cursor: pointer;
|
||||
}
|
||||
.class-row:hover { background: var(--surface-2); }
|
||||
.class-row.active { background: var(--surface-2); }
|
||||
.class-row.active .kbd { color: var(--accent-amber); border-color: var(--accent-amber); }
|
||||
.swatch { width: 12px; height: 12px; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
|
||||
.kbd {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 18px; height: 16px; padding: 0;
|
||||
font: 600 10px/1 'JetBrains Mono', monospace;
|
||||
color: var(--text-muted); border: 1px solid var(--border-hair); border-radius: 2px;
|
||||
background: var(--surface-0);
|
||||
}
|
||||
|
||||
/* ── Segmented control (PhotoMode) ────────────────────────── */
|
||||
.seg {
|
||||
display: grid; grid-template-columns: 1fr 1fr 1fr;
|
||||
border: 1px solid var(--border-hair); border-radius: 2px;
|
||||
background: var(--surface-input); overflow: hidden;
|
||||
}
|
||||
.seg button {
|
||||
height: 28px;
|
||||
font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: var(--text-secondary);
|
||||
background: transparent; border-right: 1px solid var(--border-hair);
|
||||
cursor: pointer; transition: background .12s, color .12s;
|
||||
}
|
||||
.seg button:last-child { border-right: 0; }
|
||||
.seg button:hover { background: var(--surface-2); color: var(--text-primary); }
|
||||
.seg button.active { background: var(--accent-amber); color: #0A0D10; }
|
||||
|
||||
/* ── Annotation list row (gradient stripe) ────────────────── */
|
||||
.ann-row {
|
||||
position: relative;
|
||||
display: grid; grid-template-columns: 44px 1fr auto; gap: 8px;
|
||||
align-items: center;
|
||||
height: 36px; padding: 0 12px;
|
||||
border-bottom: 1px solid var(--border-hair);
|
||||
cursor: pointer;
|
||||
background-color: var(--surface-1);
|
||||
}
|
||||
.ann-row::after {
|
||||
content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
|
||||
background-image: var(--row-grad, none);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ann-row > * { position: relative; z-index: 1; }
|
||||
.ann-row:hover { background-color: var(--surface-2); }
|
||||
|
||||
/* ── Bounding box label chip ──────────────────────────────── */
|
||||
.bbox-label {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 22px; padding: 0 8px;
|
||||
font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 2px;
|
||||
background: rgba(10,13,16,0.92);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-hair);
|
||||
}
|
||||
.bbox-label .conf { color: var(--text-secondary); font-weight: 500; }
|
||||
|
||||
/* progress bar */
|
||||
.scrub {
|
||||
height: 4px; background: var(--surface-2); border: 1px solid var(--border-hair);
|
||||
border-radius: 2px; position: relative; cursor: pointer;
|
||||
}
|
||||
.scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-amber); }
|
||||
.scrub .head {
|
||||
position: absolute; top: 50%; width: 2px; height: 10px; background: var(--accent-amber);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.scrub .head-knob {
|
||||
position: absolute; top: 50%; width: 12px; height: 12px;
|
||||
background: var(--accent-amber);
|
||||
border: 2px solid var(--surface-1);
|
||||
border-radius: 999px;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 0 1px var(--accent-amber), 0 0 8px rgba(255,157,61,0.45);
|
||||
z-index: 2;
|
||||
cursor: grab;
|
||||
}
|
||||
.scrub .tick {
|
||||
position: absolute; top: 50%; width: 1px; height: 6px; background: var(--text-muted);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.scrub .mark {
|
||||
position: absolute; top: -3px; width: 2px; height: 10px;
|
||||
}
|
||||
|
||||
/* volume */
|
||||
.vol {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
height: 2px; width: 72px; background: var(--border-hair); outline: none; border-radius: 2px;
|
||||
}
|
||||
.vol::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; appearance: none;
|
||||
width: 10px; height: 10px; background: var(--accent-amber); border-radius: 0; cursor: pointer;
|
||||
}
|
||||
|
||||
/* Top header tabs */
|
||||
.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;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab:hover { color: var(--text-primary); }
|
||||
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
|
||||
|
||||
/* Vertical hairline column separator */
|
||||
.vhair { width: 1px; background: var(--border-hair); }
|
||||
|
||||
/* Splitter affordance */
|
||||
.split {
|
||||
width: 4px; cursor: col-resize; background: transparent;
|
||||
position: relative;
|
||||
}
|
||||
.split::after {
|
||||
content: ''; position: absolute; left: 1px; top: 0; bottom: 0; width: 1px;
|
||||
background: var(--border-hair);
|
||||
}
|
||||
.split:hover::after { background: var(--accent-amber); }
|
||||
|
||||
/* AI banner */
|
||||
.ai-banner {
|
||||
backdrop-filter: blur(6px);
|
||||
background: rgba(10,13,16,0.78);
|
||||
border: 1px solid rgba(54,214,197,0.4);
|
||||
}
|
||||
|
||||
/* Crosshair on canvas */
|
||||
.crosshair {
|
||||
position: absolute; pointer-events: none;
|
||||
width: 100%; height: 100%; left: 0; top: 0;
|
||||
background:
|
||||
linear-gradient(rgba(255,157,61,0.10), rgba(255,157,61,0.10)) no-repeat,
|
||||
linear-gradient(rgba(255,157,61,0.10), rgba(255,157,61,0.10)) no-repeat;
|
||||
background-size: 100% 1px, 1px 100%;
|
||||
background-position: 0 62%, 47% 0;
|
||||
}
|
||||
|
||||
/* Selected handles */
|
||||
.handle {
|
||||
position: absolute; width: 6px; height: 6px;
|
||||
background: var(--accent-amber); border: 1px solid #0A0D10;
|
||||
}
|
||||
|
||||
/* 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); }
|
||||
|
||||
/* Scrollbars */
|
||||
::-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; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen overflow-hidden">
|
||||
|
||||
<!-- ───────────────────────────────────────────── GLOBAL HEADER -->
|
||||
<header class="h-12 flex items-center px-4 gap-3 border-b" style="border-color: var(--border-hair); background: var(--surface-1);">
|
||||
<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="live-dot"></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 active">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="tab">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="live-dot"></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 GRID -->
|
||||
<div class="flex" style="height: calc(100vh - 48px);">
|
||||
|
||||
<!-- ============ LEFT SIDEBAR ============ -->
|
||||
<aside class="flex flex-col shrink-0" style="width: 264px; background: var(--surface-1);">
|
||||
|
||||
<!-- Media list -->
|
||||
<div class="flex flex-col flex-1 min-h-0">
|
||||
<div class="flex items-center justify-between px-3 h-9 border-b" style="border-color: var(--border-hair);">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="section-h">Media Files</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-muted);">24</span>
|
||||
</div>
|
||||
<button class="icobtn" style="width:22px;height:22px;" title="Upload">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-3 py-2 border-b" style="border-color: var(--border-hair);">
|
||||
<div class="relative">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2" style="color: var(--text-muted);">
|
||||
<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
|
||||
</svg>
|
||||
<input class="inp w-full pl-7" placeholder="filter by name…" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto min-h-0">
|
||||
<div class="media-row">
|
||||
<span class="chip chip-video">VIDEO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">recon_north_03.mp4</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">04:12</span>
|
||||
</div>
|
||||
<div class="media-row active">
|
||||
<span class="chip chip-video">VIDEO</span>
|
||||
<span class="truncate" style="color: var(--text-primary); font-weight: 500;">strike_zone_07.mp4</span>
|
||||
<span class="mono text-[11px]" style="color: var(--accent-amber);">02:47</span>
|
||||
</div>
|
||||
<div class="media-row">
|
||||
<span class="chip chip-photo">PHOTO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">orthoframe_0142.jpg</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
|
||||
</div>
|
||||
<div class="media-row">
|
||||
<span class="chip chip-photo">PHOTO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">orthoframe_0143.jpg</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
|
||||
</div>
|
||||
<div class="media-row">
|
||||
<span class="chip chip-video">VIDEO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">patrol_sector_b.mp4</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">11:08</span>
|
||||
</div>
|
||||
<div class="media-row">
|
||||
<span class="chip chip-photo">PHOTO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">orthoframe_0144.jpg</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
|
||||
</div>
|
||||
<div class="media-row">
|
||||
<span class="chip chip-video">VIDEO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">night_ir_pass_02.mp4</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">07:33</span>
|
||||
</div>
|
||||
<div class="media-row">
|
||||
<span class="chip chip-photo">PHOTO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">orthoframe_0145.jpg</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
|
||||
</div>
|
||||
<div class="media-row">
|
||||
<span class="chip chip-video">VIDEO</span>
|
||||
<span class="truncate" style="color: var(--text-primary);">corridor_east_01.mp4</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">03:51</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detection classes -->
|
||||
<div class="border-t" style="border-color: var(--border-hair);">
|
||||
<div class="flex items-center justify-between px-3 h-9 border-b" style="border-color: var(--border-hair);">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="section-h">Detection Classes</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-muted);">06</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[28px_1fr_auto] px-3 h-6 items-center border-b" style="border-color: var(--border-hair);">
|
||||
<span class="micro">#</span>
|
||||
<span class="micro">NAME</span>
|
||||
<span class="micro">KEY</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="class-row active">
|
||||
<span class="swatch" style="background:#FF0000"></span>
|
||||
<span style="color: var(--text-primary); font-weight: 500;">MilVeh</span>
|
||||
<span class="kbd">1</span>
|
||||
</div>
|
||||
<div class="class-row">
|
||||
<span class="swatch" style="background:#00FF00"></span>
|
||||
<span style="color: var(--text-primary);">Truck</span>
|
||||
<span class="kbd">2</span>
|
||||
</div>
|
||||
<div class="class-row">
|
||||
<span class="swatch" style="background:#0000FF"></span>
|
||||
<span style="color: var(--text-primary);">Vehicle</span>
|
||||
<span class="kbd">3</span>
|
||||
</div>
|
||||
<div class="class-row">
|
||||
<span class="swatch" style="background:#FFFF00"></span>
|
||||
<span style="color: var(--text-primary);">Artillery</span>
|
||||
<span class="kbd">4</span>
|
||||
</div>
|
||||
<div class="class-row">
|
||||
<span class="swatch" style="background:#FF00FF"></span>
|
||||
<span style="color: var(--text-primary);">Shadow</span>
|
||||
<span class="kbd">5</span>
|
||||
</div>
|
||||
<div class="class-row">
|
||||
<span class="swatch" style="background:#00FFFF"></span>
|
||||
<span style="color: var(--text-primary);">Trenches</span>
|
||||
<span class="kbd">6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PhotoMode -->
|
||||
<div class="p-3 border-t" style="border-color: var(--border-hair);">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="micro">PhotoMode</span>
|
||||
</div>
|
||||
<div class="seg">
|
||||
<button class="active">Regular</button>
|
||||
<button>Winter</button>
|
||||
<button>Night</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="split"></div>
|
||||
|
||||
<!-- ============ MAIN VIEWER ============ -->
|
||||
<main class="flex-1 flex flex-col min-w-0" style="background: var(--surface-0);">
|
||||
|
||||
<!-- Toolbar above canvas -->
|
||||
<div class="h-9 flex items-center gap-3 px-4 border-b" style="border-color: var(--border-hair); background: var(--surface-1);">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="section-h">Canvas</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-muted);">strike_zone_07.mp4</span>
|
||||
<span class="mono text-[10px] px-1.5 py-0.5 border" style="color: var(--text-secondary); border-color: var(--border-hair);">1920×1080 · 30 FPS</span>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<span class="micro">ZOOM</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-primary);">142%</span>
|
||||
<span class="mx-2 h-4 w-px" style="background: var(--border-hair);"></span>
|
||||
<span class="micro">CURSOR</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-primary);">0.452, 0.318</span>
|
||||
<span class="mx-2 h-4 w-px" style="background: var(--border-hair);"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Canvas -->
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<div class="absolute inset-0 terrain"></div>
|
||||
|
||||
<!-- AI Detection banner -->
|
||||
<div class="absolute top-6 right-6 ai-banner rounded-[2px] px-3 py-2 w-72">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="live-dot"></span>
|
||||
<span class="micro" style="color: var(--accent-cyan);">AI DETECTION IN PROGRESS</span>
|
||||
<span class="ml-auto mono text-[10px]" style="color: var(--text-muted);">3.2s</span>
|
||||
</div>
|
||||
<div class="mono text-[10px] space-y-0.5" style="color: var(--text-secondary);">
|
||||
<div><span style="color: var(--text-muted);">[14:22:41]</span> tile 04/16 → 2 candidates</div>
|
||||
<div><span style="color: var(--text-muted);">[14:22:42]</span> tile 05/16 → 1 candidate (conf 0.94)</div>
|
||||
<div><span style="color: var(--accent-cyan);">[14:22:43]</span> filtering by min_conf=0.25…</div>
|
||||
</div>
|
||||
<div class="mt-2 h-[2px] bg-black/40 overflow-hidden">
|
||||
<div style="height:100%; width: 38%; background: var(--accent-cyan);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ───────── Bounding Box 1: Friendly + Ready (cyan) ───────── -->
|
||||
<div class="absolute" style="top: 28%; left: 18%; width: 22%; height: 28%;">
|
||||
<div class="absolute inset-0 border-2" style="border-color: var(--accent-cyan); background: rgba(54,214,197,0.05);"></div>
|
||||
<!-- corner brackets accent on the bbox -->
|
||||
<div class="absolute -top-px -left-px w-2 h-2 border-t-2 border-l-2" style="border-color: var(--accent-cyan);"></div>
|
||||
<div class="absolute -top-px -right-px w-2 h-2 border-t-2 border-r-2" style="border-color: var(--accent-cyan);"></div>
|
||||
<div class="absolute -bottom-px -left-px w-2 h-2 border-b-2 border-l-2" style="border-color: var(--accent-cyan);"></div>
|
||||
<div class="absolute -bottom-px -right-px w-2 h-2 border-b-2 border-r-2" style="border-color: var(--accent-cyan);"></div>
|
||||
<!-- selection handles -->
|
||||
<div class="handle" style="top: -3px; left: -3px;"></div>
|
||||
<div class="handle" style="top: -3px; left: calc(50% - 3px);"></div>
|
||||
<div class="handle" style="top: -3px; right: -3px;"></div>
|
||||
<div class="handle" style="top: calc(50% - 3px); left: -3px;"></div>
|
||||
<div class="handle" style="top: calc(50% - 3px); right: -3px;"></div>
|
||||
<div class="handle" style="bottom: -3px; left: -3px;"></div>
|
||||
<div class="handle" style="bottom: -3px; left: calc(50% - 3px);"></div>
|
||||
<div class="handle" style="bottom: -3px; right: -3px;"></div>
|
||||
|
||||
<!-- Label -->
|
||||
<div class="absolute" style="top: -26px; left: -2px;">
|
||||
<div class="bbox-label" style="border-color: rgba(54,214,197,0.6);">
|
||||
<!-- Friendly = rectangle (cyan) -->
|
||||
<svg width="11" height="9" viewBox="0 0 11 9">
|
||||
<rect x="0.5" y="0.5" width="10" height="8" fill="#87CEEB" stroke="#0A0D10" stroke-width="1"/>
|
||||
</svg>
|
||||
<!-- Ready = green dot -->
|
||||
<span style="width:6px;height:6px;border-radius:999px;background:var(--accent-green);display:inline-block;"></span>
|
||||
<span style="color: var(--accent-cyan);">VEHICLE</span>
|
||||
<span class="conf">94.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- corner coords -->
|
||||
<div class="absolute -bottom-4 right-0 mono text-[9px]" style="color: var(--text-muted);">0.40, 0.56</div>
|
||||
</div>
|
||||
|
||||
<!-- ───────── Bounding Box 2: Hostile + Ready (red) ───────── -->
|
||||
<div class="absolute" style="top: 44%; left: 56%; width: 18%; height: 24%;">
|
||||
<div class="absolute inset-0 border-2" style="border-color: var(--accent-red); background: rgba(255,71,86,0.06);"></div>
|
||||
<div class="absolute -top-px -left-px w-2 h-2 border-t-2 border-l-2" style="border-color: var(--accent-red);"></div>
|
||||
<div class="absolute -top-px -right-px w-2 h-2 border-t-2 border-r-2" style="border-color: var(--accent-red);"></div>
|
||||
<div class="absolute -bottom-px -left-px w-2 h-2 border-b-2 border-l-2" style="border-color: var(--accent-red);"></div>
|
||||
<div class="absolute -bottom-px -right-px w-2 h-2 border-b-2 border-r-2" style="border-color: var(--accent-red);"></div>
|
||||
|
||||
<div class="absolute" style="top: -26px; left: -2px;">
|
||||
<div class="bbox-label" style="border-color: rgba(255,71,86,0.6);">
|
||||
<!-- Hostile = diamond (red, rotated square) -->
|
||||
<svg width="11" height="11" viewBox="0 0 11 11">
|
||||
<polygon points="5.5,0.7 10.3,5.5 5.5,10.3 0.7,5.5" fill="#FF0000" stroke="#0A0D10" stroke-width="1"/>
|
||||
</svg>
|
||||
<span style="width:6px;height:6px;border-radius:999px;background:var(--accent-green);display:inline-block;"></span>
|
||||
<span style="color: var(--accent-red);">MILVEH</span>
|
||||
<span class="conf">88.6%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -bottom-4 right-0 mono text-[9px]" style="color: var(--text-muted);">0.74, 0.68</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrubber + Controls -->
|
||||
<div class="border-t" style="border-color: var(--border-hair); background: var(--surface-1);">
|
||||
<!-- Scrubber -->
|
||||
<div class="px-4 pt-3 pb-2">
|
||||
<div class="scrub">
|
||||
<div class="fill" style="width: 35%;"></div>
|
||||
<!-- annotation marks -->
|
||||
<div class="mark" style="left: 8%; background: #FF0000;"></div>
|
||||
<div class="mark" style="left: 12%; background: #00FF00;"></div>
|
||||
<div class="mark" style="left: 18%; background: #0000FF;"></div>
|
||||
<div class="mark" style="left: 26%; background: #FFFF00;"></div>
|
||||
<div class="mark" style="left: 35%; background: var(--accent-amber);"></div>
|
||||
<div class="mark" style="left: 51%; background: #FF0000;"></div>
|
||||
<div class="mark" style="left: 60%; background: #FFFF00;"></div>
|
||||
<div class="mark" style="left: 73%; background: #00FFFF;"></div>
|
||||
<div class="mark" style="left: 84%; background: #FF0000;"></div>
|
||||
<div class="head" style="left: 35%;"></div>
|
||||
<div class="head-knob" style="left: 35%;"></div>
|
||||
<!-- tick marks -->
|
||||
<div class="tick" style="left: 0%;"></div>
|
||||
<div class="tick" style="left: 25%;"></div>
|
||||
<div class="tick" style="left: 50%;"></div>
|
||||
<div class="tick" style="left: 75%;"></div>
|
||||
<div class="tick" style="left: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls row -->
|
||||
<div class="px-4 pb-3 flex items-center gap-3">
|
||||
<!-- Transport group -->
|
||||
<div class="flex items-center gap-1 p-1 border rounded-[2px]" style="border-color: var(--border-hair);">
|
||||
<button class="icobtn" title="Previous media" style="border: 0; background: transparent;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
|
||||
</button>
|
||||
<button class="icobtn" title="Back 5s" style="border: 0; background: transparent;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M11 18V6l-8.5 6zM22 18V6l-8.5 6z"/></svg>
|
||||
</button>
|
||||
<button class="icobtn active" title="Play" style="background: rgba(255,157,61,0.12);">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
<button class="icobtn" title="Forward 5s" style="border: 0; background: transparent;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M13 6v12l8.5-6zM2 6v12l8.5-6z"/></svg>
|
||||
</button>
|
||||
<button class="icobtn" title="Next media" style="border: 0; background: transparent;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M16 6h2v12h-2zM6 18l8.5-6L6 6z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="micro">FRAME STEP</span>
|
||||
<div class="flex items-center gap-1 p-1 border rounded-[2px]" style="border-color: var(--border-hair);">
|
||||
<button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">1</button>
|
||||
<button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">5</button>
|
||||
<button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">10</button>
|
||||
<button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">30</button>
|
||||
<button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">60</button>
|
||||
</div>
|
||||
|
||||
<span class="mx-1 h-5 w-px" style="background: var(--border-hair);"></span>
|
||||
|
||||
<button class="btn btn-ghost-amber">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
|
||||
Save
|
||||
</button>
|
||||
<button class="btn btn-danger">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
||||
Delete
|
||||
</button>
|
||||
<button class="btn btn-danger" title="Delete all on frame">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11l4 6M14 11l-4 6"/></svg>
|
||||
Delete All
|
||||
</button>
|
||||
|
||||
<span class="mx-1 h-5 w-px" style="background: var(--border-hair);"></span>
|
||||
|
||||
<button class="btn btn-amber">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V3h4"/><path d="M17 3h4v4"/><path d="M21 17v4h-4"/><path d="M7 21H3v-4"/><circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none"/></svg>
|
||||
AI Detect
|
||||
<span class="ml-1 mono opacity-70" style="font-size:9px;">[R]</span>
|
||||
</button>
|
||||
|
||||
<span class="mx-1 h-5 w-px" style="background: var(--border-hair);"></span>
|
||||
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button class="icobtn" title="Mute">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z"/></svg>
|
||||
</button>
|
||||
<input type="range" class="vol" min="0" max="100" value="62" />
|
||||
<span class="mono text-[10px]" style="color: var(--text-muted); width: 24px;">62</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="px-4 h-7 flex items-center border-t" style="border-color: var(--border-hair); background: var(--surface-0);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-primary);">00:58.412</span>
|
||||
<span class="mono text-[11px] mx-1.5" style="color: var(--text-muted);">/</span>
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">02:47.000</span>
|
||||
<span class="mx-3 h-4 w-px" style="background: var(--border-hair);"></span>
|
||||
<span class="micro">FRAME</span>
|
||||
<span class="mono text-[11px] ml-1.5" style="color: var(--text-primary);">1284 / 5040</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="split"></div>
|
||||
|
||||
<!-- ============ RIGHT SIDEBAR — Annotations List ============ -->
|
||||
<aside class="flex flex-col shrink-0" style="width: 232px; background: var(--surface-1);">
|
||||
<div class="flex items-center justify-between px-3 h-9 border-b" style="border-color: var(--border-hair);">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="section-h">Annotations</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-muted);">14</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="icobtn" style="width:22px;height:22px;" title="Filter">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.5 10 19 14 21 14 12.5"/></svg>
|
||||
</button>
|
||||
<button class="icobtn" style="width:22px;height:22px;" title="Sort">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h13M3 12h9M3 18h5M17 8l4-4 4 4M21 4v16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[44px_1fr_auto] gap-2 px-3 h-6 items-center border-b" style="border-color: var(--border-hair);">
|
||||
<span class="micro">TIME</span>
|
||||
<span class="micro">CLASS</span>
|
||||
<span class="micro">CONF</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto min-h-0">
|
||||
<!-- 00:12 — single class red 95% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.55) 0%, rgba(255,0,0,0.10) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">00:12</span>
|
||||
<span style="color: var(--text-primary); font-weight: 500;">MilVeh</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">95%</span>
|
||||
</div>
|
||||
<!-- 00:18 — multi: green 88% + blue 71% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,255,0,0.50) 0%, rgba(0,255,0,0.10) 48%, rgba(0,0,255,0.40) 52%, rgba(0,0,255,0.08) 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">00:18</span>
|
||||
<span style="color: var(--text-primary);">Truck +1</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">88%</span>
|
||||
</div>
|
||||
<!-- 00:24 — single blue 76% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,0,255,0.40) 0%, rgba(0,0,255,0.08) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">00:24</span>
|
||||
<span style="color: var(--text-primary);">Vehicle</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">76%</span>
|
||||
</div>
|
||||
<!-- 00:31 — yellow 92% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,255,0,0.50) 0%, rgba(255,255,0,0.10) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">00:31</span>
|
||||
<span style="color: var(--text-primary);">Artillery</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">92%</span>
|
||||
</div>
|
||||
<!-- 00:45 — multi: red 94 + yellow 81 + cyan 64 -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.52) 0%, rgba(255,0,0,0.10) 30%, rgba(255,255,0,0.42) 34%, rgba(255,255,0,0.08) 64%, rgba(0,255,255,0.30) 68%, rgba(0,255,255,0.05) 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--accent-amber);">00:45</span>
|
||||
<span style="color: var(--text-primary); font-weight: 600;">MilVeh +2</span>
|
||||
<span class="mono text-[10px]" style="color: var(--accent-amber);">94%</span>
|
||||
</div>
|
||||
<!-- 00:58 — current frame, selected look (cyan + red co-present) -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(54,214,197,0.55) 0%, rgba(54,214,197,0.10) 48%, rgba(255,71,86,0.50) 52%, rgba(255,71,86,0.10) 100%); background-color: var(--surface-2);">
|
||||
<span class="mono text-[11px]" style="color: var(--accent-amber); font-weight: 600;">00:58</span>
|
||||
<span style="color: var(--text-primary); font-weight: 600;">Vehicle, MilVeh</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-primary);">94%</span>
|
||||
</div>
|
||||
<!-- 01:09 — magenta 70% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,255,0.40) 0%, rgba(255,0,255,0.08) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">01:09</span>
|
||||
<span style="color: var(--text-primary);">Shadow</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">70%</span>
|
||||
</div>
|
||||
<!-- 01:22 — cyan + green -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,255,255,0.45) 0%, rgba(0,255,255,0.10) 48%, rgba(0,255,0,0.40) 52%, rgba(0,255,0,0.08) 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">01:22</span>
|
||||
<span style="color: var(--text-primary);">Trenches +1</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">83%</span>
|
||||
</div>
|
||||
<!-- 01:38 — red 97% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.58) 0%, rgba(255,0,0,0.12) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">01:38</span>
|
||||
<span style="color: var(--text-primary);">MilVeh</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">97%</span>
|
||||
</div>
|
||||
<!-- 01:51 — empty frame (no detections) -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(221,221,221,0.10), rgba(221,221,221,0.04));">
|
||||
<span class="mono text-[11px]" style="color: var(--text-muted);">01:51</span>
|
||||
<span style="color: var(--text-muted); font-style: italic;">empty frame</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-muted);">—</span>
|
||||
</div>
|
||||
<!-- 02:04 — green -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,255,0,0.45) 0%, rgba(0,255,0,0.10) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">02:04</span>
|
||||
<span style="color: var(--text-primary);">Truck</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">85%</span>
|
||||
</div>
|
||||
<!-- 02:19 — yellow + red -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,255,0,0.45) 0%, rgba(255,255,0,0.10) 48%, rgba(255,0,0,0.50) 52%, rgba(255,0,0,0.10) 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">02:19</span>
|
||||
<span style="color: var(--text-primary);">Artillery +1</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">79%</span>
|
||||
</div>
|
||||
<!-- 02:33 — blue 68% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,0,255,0.35) 0%, rgba(0,0,255,0.06) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">02:33</span>
|
||||
<span style="color: var(--text-primary);">Vehicle</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">68%</span>
|
||||
</div>
|
||||
<!-- 02:41 — red 91% -->
|
||||
<div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.52) 0%, rgba(255,0,0,0.10) 60%, transparent 100%);">
|
||||
<span class="mono text-[11px]" style="color: var(--text-secondary);">02:41</span>
|
||||
<span style="color: var(--text-primary);">MilVeh</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-secondary);">91%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer summary -->
|
||||
<div class="border-t px-3 py-2.5" style="border-color: var(--border-hair); background: var(--surface-0);">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="micro">SUMMARY</span>
|
||||
<span class="mono text-[10px]" style="color: var(--text-muted);">14 ann · 3 empty</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 h-2">
|
||||
<span style="flex: 5; background: #FF0000; height: 100%;"></span>
|
||||
<span style="flex: 3; background: #00FF00; height: 100%;"></span>
|
||||
<span style="flex: 2; background: #0000FF; height: 100%;"></span>
|
||||
<span style="flex: 2; background: #FFFF00; height: 100%;"></span>
|
||||
<span style="flex: 1; background: #FF00FF; height: 100%;"></span>
|
||||
<span style="flex: 1; background: #00FFFF; height: 100%;"></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-2 mono text-[10px]" style="color: var(--text-muted);">
|
||||
<span><span style="color:#FF0000;">■</span> 5</span>
|
||||
<span><span style="color:#00FF00;">■</span> 3</span>
|
||||
<span><span style="color:#0000FF;">■</span> 2</span>
|
||||
<span><span style="color:#FFFF00;">■</span> 2</span>
|
||||
<span><span style="color:#FF00FF;">■</span> 1</span>
|
||||
<span><span style="color:#00FFFF;">■</span> 1</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,876 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,895 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AZAION // FLIGHTS — Tactical Ops</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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
|
||||
.num { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; }
|
||||
|
||||
.micro {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.section-head {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
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 { 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; }
|
||||
|
||||
.bracket-cyan::before, .bracket-cyan::after,
|
||||
.bracket-cyan > .br::before, .bracket-cyan > .br::after { border-color: var(--accent-cyan); }
|
||||
.bracket-red::before, .bracket-red::after,
|
||||
.bracket-red > .br::before, .bracket-red > .br::after { border-color: var(--accent-red); }
|
||||
|
||||
.hair { border-color: var(--border-hair); }
|
||||
.panel { background: var(--surface-1); border: 1px solid var(--border-hair); }
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
background: var(--accent-amber); color: #0A0D10; border: 1px solid var(--accent-amber);
|
||||
padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
|
||||
transition: filter .12s;
|
||||
}
|
||||
.btn-primary:hover { filter: brightness(1.08); }
|
||||
.btn-secondary {
|
||||
background: transparent; color: var(--accent-amber); border: 1px solid var(--accent-amber);
|
||||
padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
}
|
||||
.btn-secondary:hover { background: rgba(255,157,61,0.12); }
|
||||
.btn-ghost {
|
||||
background: transparent; color: var(--text-secondary); border: 1px solid var(--border-hair);
|
||||
padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
}
|
||||
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-raised); }
|
||||
.btn-danger {
|
||||
background: var(--accent-red); color: #0A0D10; border: 1px solid var(--accent-red);
|
||||
padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
|
||||
}
|
||||
.btn-cyan {
|
||||
background: transparent; color: var(--accent-cyan); border: 1px solid var(--accent-cyan);
|
||||
padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
}
|
||||
.btn-cyan:hover { background: rgba(54,214,197,0.10); }
|
||||
|
||||
/* Inputs */
|
||||
.ipt {
|
||||
background: var(--surface-input); border: 1px solid var(--border-hair);
|
||||
border-radius: 2px; padding: 6px 10px; height: 32px;
|
||||
font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
|
||||
color: var(--text-primary); width: 100%;
|
||||
}
|
||||
.ipt:focus { outline: none; border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
|
||||
.ipt::placeholder { color: var(--text-muted); }
|
||||
.ipt-num { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }
|
||||
select.ipt { 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: 26px; }
|
||||
input[type="date"].ipt { color-scheme: dark; }
|
||||
|
||||
/* Pill / status */
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 2px 8px; border-radius: 2px; border: 1px solid currentColor;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
background: transparent;
|
||||
}
|
||||
.pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex-shrink: 0; }
|
||||
.pill-green { color: var(--accent-green); }
|
||||
.pill-cyan { color: var(--accent-cyan); }
|
||||
.pill-red { color: var(--accent-red); }
|
||||
.pill-amber { color: var(--accent-amber); }
|
||||
.pill-muted { color: var(--text-secondary); border-color: var(--border-hair); }
|
||||
|
||||
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
|
||||
.pulse { animation: pulse 1.6s ease-in-out infinite; }
|
||||
|
||||
/* Header live-dot — glow-ring animation, matches other plugin pages */
|
||||
.live-dot {
|
||||
width: 6px; height: 6px; border-radius: 999px;
|
||||
background: var(--accent-cyan);
|
||||
box-shadow: 0 0 0 0 rgba(54,214,197,0.5);
|
||||
animation: liveDotPulse 1.6s ease-in-out infinite;
|
||||
display: inline-block;
|
||||
flex: none;
|
||||
}
|
||||
@keyframes liveDotPulse {
|
||||
0%,100% { box-shadow: 0 0 0 0 rgba(54,214,197,0.5); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(54,214,197,0); }
|
||||
}
|
||||
|
||||
/* Draw-mode selector buttons */
|
||||
.dmode {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||||
height: 32px; padding: 0 8px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px; font-weight: 600;
|
||||
letter-spacing: 0.10em; text-transform: uppercase;
|
||||
border: 1px solid; border-radius: 2px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: background-color .12s, color .12s, box-shadow .12s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dmode:hover { background-color: rgba(255,255,255,0.04); }
|
||||
.dmode-sq { width: 32px; height: 32px; padding: 0; }
|
||||
.dmode-amber { color: var(--accent-amber); border-color: var(--accent-amber); }
|
||||
.dmode-amber.active { background-color: rgba(255,157,61,0.20); box-shadow: inset 0 0 0 1px var(--accent-amber); }
|
||||
.dmode-green { color: var(--accent-green); border-color: var(--accent-green); }
|
||||
.dmode-green.active { background-color: rgba(61,220,132,0.18); box-shadow: inset 0 0 0 1px var(--accent-green); }
|
||||
.dmode-red { color: var(--accent-red); border-color: var(--accent-red); }
|
||||
.dmode-red.active { background-color: rgba(255,71,86,0.18); box-shadow: inset 0 0 0 1px var(--accent-red); }
|
||||
|
||||
/* Params panel collapse */
|
||||
.params-panel { width: 290px; transition: width .18s ease; }
|
||||
.params-panel.collapsed { width: 44px; }
|
||||
.params-panel.collapsed .panel-body { display: none; }
|
||||
.params-panel:not(.collapsed) .collapsed-rail { display: none; }
|
||||
.collapsed-rail {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||||
padding: 10px 6px;
|
||||
}
|
||||
.rail-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
border: 1px solid var(--border-hair); border-radius: 2px;
|
||||
background: var(--surface-0); color: var(--text-secondary);
|
||||
cursor: pointer; transition: color .12s, border-color .12s, background-color .12s;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 12px;
|
||||
}
|
||||
.rail-btn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-2); }
|
||||
.collapse-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 26px; height: 26px;
|
||||
border: 1px solid var(--border-hair); border-radius: 2px;
|
||||
background: var(--surface-1); color: var(--text-secondary);
|
||||
cursor: pointer; transition: color .12s, border-color .12s;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 12px;
|
||||
}
|
||||
.collapse-btn:hover { color: var(--accent-amber); border-color: var(--accent-amber); }
|
||||
|
||||
/* Tab nav */
|
||||
.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;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab:hover { color: var(--text-primary); }
|
||||
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
|
||||
|
||||
/* 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); }
|
||||
|
||||
/* Flight list row */
|
||||
.fl-row {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
height: 28px; padding: 0 12px;
|
||||
border-bottom: 1px solid var(--border-hair);
|
||||
cursor: pointer;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.fl-row:hover { background: var(--surface-2); }
|
||||
.fl-row.active { background: var(--surface-2); position: relative; }
|
||||
.fl-row.active::before {
|
||||
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
|
||||
background: var(--accent-amber);
|
||||
}
|
||||
.fl-row .fid { color: var(--accent-amber); }
|
||||
.fl-row .meta { margin-left: auto; font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; }
|
||||
|
||||
/* Waypoint row */
|
||||
.wp-row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
height: 30px; padding: 0 4px;
|
||||
border-bottom: 1px solid var(--border-hair);
|
||||
font-size: 12px; color: var(--text-primary);
|
||||
}
|
||||
.wp-row:last-child { border-bottom: none; }
|
||||
.wp-row .wp-id {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
color: var(--text-secondary); width: 28px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.wp-row .wp-marker { width: 10px; height: 10px; flex-shrink: 0; }
|
||||
.wp-row .wp-tag {
|
||||
margin-left: auto; font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
|
||||
color: var(--text-muted); border: 1px solid var(--border-hair);
|
||||
padding: 1px 5px; border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Map background grid */
|
||||
.map-grid {
|
||||
background-color: #0F1318;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
radial-gradient(ellipse at 30% 40%, rgba(54,214,197,0.04), transparent 60%),
|
||||
radial-gradient(ellipse at 80% 70%, rgba(255,157,61,0.03), transparent 65%);
|
||||
background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
|
||||
}
|
||||
|
||||
/* GPS-Denied accent state */
|
||||
.gps-active-frame {
|
||||
border: 2px solid var(--accent-red) !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,71,86,0.12);
|
||||
}
|
||||
.gps-active-frame.bracket::before, .gps-active-frame.bracket::after,
|
||||
.gps-active-frame.bracket > .br::before, .gps-active-frame.bracket > .br::after {
|
||||
border-color: var(--accent-red);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: var(--surface-0); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 0; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
|
||||
|
||||
/* Map waypoint markers (svg-styled overlays) */
|
||||
.wp-marker-map {
|
||||
position: absolute; transform: translate(-50%, -50%);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.wp-square { width: 12px; height: 12px; background: #0A0D10; border: 1.5px solid var(--accent-cyan); }
|
||||
.wp-square.corrected { border-color: var(--accent-cyan); background: rgba(54,214,197,0.15); }
|
||||
.wp-diamond { width: 14px; height: 14px; background: var(--accent-green); border: 1.5px solid #0A0D10; transform: translate(-50%,-50%) rotate(45deg); box-shadow: 0 0 0 1px var(--accent-green); }
|
||||
.wp-octagon {
|
||||
width: 16px; height: 16px; background: var(--accent-red);
|
||||
clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
|
||||
}
|
||||
|
||||
.crosshair-x, .crosshair-y {
|
||||
position: absolute; background: rgba(255,255,255,0.06); pointer-events: none;
|
||||
}
|
||||
.crosshair-x { left: 0; right: 0; height: 1px; top: 50%; }
|
||||
.crosshair-y { top: 0; bottom: 0; width: 1px; left: 50%; }
|
||||
|
||||
.map-axis-label {
|
||||
position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 9px;
|
||||
color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
details > summary { list-style: none; cursor: pointer; }
|
||||
details > summary::-webkit-details-marker { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex flex-col overflow-hidden">
|
||||
|
||||
<!-- ========================= GLOBAL HEADER ========================= -->
|
||||
<header class="h-12 flex items-center px-4 gap-3 border-b" style="border-color: var(--border-hair); background: var(--surface-1);">
|
||||
<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="live-dot"></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 active">Flights</a>
|
||||
<a href="annotations.html" class="tab">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="tab">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="live-dot"></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 ROW ========================= -->
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<!-- FLIGHT LIST SIDEBAR (~200px) -->
|
||||
<!-- =========================================================== -->
|
||||
<aside class="w-[210px] shrink-0 flex flex-col border-r hair" style="background: var(--surface-1);">
|
||||
<div class="px-3 py-2.5 flex items-center justify-between border-b hair">
|
||||
<span class="section-head">Flight Roster</span>
|
||||
<span class="micro num" style="color: var(--text-muted);">04</span>
|
||||
</div>
|
||||
|
||||
<!-- Filter -->
|
||||
<div class="px-3 py-2 border-b hair">
|
||||
<div class="relative">
|
||||
<input class="ipt h-7 text-[11px] pl-7 mono" placeholder="SEARCH FLIGHTS" style="letter-spacing:0.08em;">
|
||||
<svg class="absolute left-2 top-1/2 -translate-y-1/2" width="11" height="11" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flight list -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="fl-row active">
|
||||
<span class="fid">FL02</span>
|
||||
<span style="color: var(--accent-amber);" title="Pinned">★</span>
|
||||
<span class="meta num">05/12</span>
|
||||
</div>
|
||||
<div class="fl-row">
|
||||
<span class="fid">FL01</span>
|
||||
<span class="meta num">05/09</span>
|
||||
</div>
|
||||
<div class="fl-row">
|
||||
<span class="fid">FL03</span>
|
||||
<span class="meta num">05/08</span>
|
||||
</div>
|
||||
<div class="fl-row">
|
||||
<span class="fid">FL04</span>
|
||||
<span class="meta num">05/03</span>
|
||||
</div>
|
||||
<div class="fl-row">
|
||||
<span class="fid" style="color: var(--text-muted);">FL05</span>
|
||||
<span class="micro" style="color: var(--text-muted);">DRAFT</span>
|
||||
<span class="meta num">04/28</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create -->
|
||||
<div class="p-3 border-t hair">
|
||||
<button class="btn-primary w-full flex items-center justify-center gap-2">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 1 V9 M1 5 H9" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
Create New
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Telemetry card -->
|
||||
<div class="m-3 mt-0 bracket panel p-3" style="padding:12px;">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="micro" style="color: var(--accent-amber);">// Telemetry</span>
|
||||
</div>
|
||||
<label class="micro block mb-1">Date</label>
|
||||
<input type="date" value="2025-03-01" class="ipt ipt-num text-[12px]">
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<!-- PARAMS / GPS-DENIED PANEL (~280px) — both modes visible -->
|
||||
<!-- =========================================================== -->
|
||||
<aside id="paramsPanel" class="params-panel shrink-0 overflow-y-auto border-r hair" style="background: var(--surface-1);">
|
||||
|
||||
<!-- Collapsed rail (visible only when .collapsed) -->
|
||||
<div class="collapsed-rail">
|
||||
<button class="rail-btn" onclick="toggleParams()" title="Expand parameters">»</button>
|
||||
<span class="block w-6 h-px" style="background: var(--border-hair);"></span>
|
||||
<button class="dmode dmode-sq dmode-amber active" title="Points">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="1.6" fill="currentColor"/><circle cx="18" cy="6" r="1.6" fill="currentColor"/><circle cx="12" cy="14" r="1.6" fill="currentColor"/><circle cx="6" cy="20" r="1.6" fill="currentColor"/><circle cx="18" cy="20" r="1.6" fill="currentColor"/></svg>
|
||||
</button>
|
||||
<button class="dmode dmode-sq dmode-green" title="Work Area">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="4 7 12 3 20 7 20 17 12 21 4 17"/></svg>
|
||||
</button>
|
||||
<button class="dmode dmode-sq dmode-red" title="No-Go Zone">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="5.6" y1="5.6" x2="18.4" y2="18.4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Expanded body -->
|
||||
<div class="panel-body">
|
||||
|
||||
<!-- Mode toggle bar -->
|
||||
<div class="flex items-stretch border-b hair" style="background: var(--surface-0);">
|
||||
<button id="tabFP" onclick="setMode('fp')" class="flex-1 py-2.5 mono text-[10px] uppercase tracking-[0.14em] border-b-2 transition"
|
||||
style="color: var(--text-primary); border-color: var(--accent-amber); background: var(--surface-1);">
|
||||
Flight Params
|
||||
</button>
|
||||
<button id="tabGPS" onclick="setMode('gps')" class="flex-1 py-2.5 mono text-[10px] uppercase tracking-[0.14em] border-b-2 transition"
|
||||
style="color: var(--text-secondary); border-color: transparent;">
|
||||
GPS-Denied
|
||||
</button>
|
||||
<button class="collapse-btn shrink-0 mx-1 self-center" onclick="toggleParams()" title="Collapse">«</button>
|
||||
</div>
|
||||
|
||||
<!-- ============== FLIGHT PARAMETERS ============== -->
|
||||
<section id="flightParams" class="p-4 space-y-5">
|
||||
|
||||
<!-- Draw-mode selector -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<span class="micro" style="color: var(--accent-amber);">// Draw Mode</span>
|
||||
<span class="micro num" style="color: var(--text-muted);">click map to plot</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button class="dmode dmode-amber active" data-mode="points">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="1.6" fill="currentColor"/><circle cx="18" cy="6" r="1.6" fill="currentColor"/><circle cx="12" cy="14" r="1.6" fill="currentColor"/><circle cx="6" cy="20" r="1.6" fill="currentColor"/><circle cx="18" cy="20" r="1.6" fill="currentColor"/><path d="M6 6l6 8 6-8M6 20l6-6 6 6" opacity="0.45"/></svg>
|
||||
<span>Points</span>
|
||||
</button>
|
||||
<button class="dmode dmode-green" data-mode="work">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="4 7 12 3 20 7 20 17 12 21 4 17"/></svg>
|
||||
<span>Work Area</span>
|
||||
</button>
|
||||
<button class="dmode dmode-red" data-mode="nogo">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="5.6" y1="5.6" x2="18.4" y2="18.4"/></svg>
|
||||
<span>No-Go Zone</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center justify-between">
|
||||
<h2 class="section-head">Mission Config</h2>
|
||||
<span class="pill pill-amber"><span class="dot"></span>FL02</span>
|
||||
</header>
|
||||
|
||||
<div class="bracket panel p-3 space-y-3">
|
||||
<div>
|
||||
<label class="micro block mb-1.5">Aircraft</label>
|
||||
<select class="ipt">
|
||||
<option>DJI Mavic 3 Enterprise</option>
|
||||
<option>DJI Matrice 350 RTK</option>
|
||||
<option>Autel EVO Max 4T</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="micro block mb-1.5">Default Height</label>
|
||||
<div class="relative">
|
||||
<input type="number" value="100" class="ipt ipt-num pr-9">
|
||||
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style="color: var(--text-muted);">M</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="micro block mb-1.5">Focal Length</label>
|
||||
<div class="relative">
|
||||
<input type="number" value="24" class="ipt ipt-num pr-10">
|
||||
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style="color: var(--text-muted);">MM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="micro block mb-1.5">Comm Address / Port</label>
|
||||
<input type="text" value="192.168.1.42:8080" class="ipt ipt-num">
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<!-- Waypoints -->
|
||||
<div class="bracket panel p-3">
|
||||
<header class="flex items-center justify-between mb-2.5">
|
||||
<span class="section-head">Waypoints</span>
|
||||
<span class="micro num" style="color: var(--text-muted);">06 PTS</span>
|
||||
</header>
|
||||
|
||||
<div class="space-y-0">
|
||||
<div class="wp-row">
|
||||
<span class="wp-id">00</span>
|
||||
<span class="wp-marker" style="background: var(--accent-green); transform: rotate(45deg);"></span>
|
||||
<span class="mono text-[11px]">START</span>
|
||||
<span class="wp-tag" style="color: var(--accent-green); border-color: var(--accent-green);">ORIGIN</span>
|
||||
</div>
|
||||
<div class="wp-row">
|
||||
<span class="wp-id">01</span>
|
||||
<span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
|
||||
<span class="mono text-[11px]">Point 1</span>
|
||||
<span class="wp-tag">TRACK</span>
|
||||
</div>
|
||||
<div class="wp-row">
|
||||
<span class="wp-id">02</span>
|
||||
<span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
|
||||
<span class="mono text-[11px]">Point 2</span>
|
||||
<span class="wp-tag" style="color: var(--accent-red); border-color: var(--accent-red);">MIL-VEH</span>
|
||||
</div>
|
||||
<div class="wp-row">
|
||||
<span class="wp-id">03</span>
|
||||
<span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
|
||||
<span class="mono text-[11px]">Point 3</span>
|
||||
</div>
|
||||
<div class="wp-row">
|
||||
<span class="wp-id">04</span>
|
||||
<span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
|
||||
<span class="mono text-[11px]">Point 4</span>
|
||||
<span class="wp-tag">CONFIRM</span>
|
||||
</div>
|
||||
<div class="wp-row">
|
||||
<span class="wp-id">FN</span>
|
||||
<span class="wp-marker" style="background: var(--accent-red); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);"></span>
|
||||
<span class="mono text-[11px]">FINISH</span>
|
||||
<span class="wp-tag" style="color: var(--accent-red); border-color: var(--accent-red);">TARGET</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button onclick="setMode('gps')" class="btn-secondary" style="color: var(--accent-red); border-color: var(--accent-red);">GPS-Denied</button>
|
||||
<button class="btn-cyan">Upload</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== GPS-DENIED MODE ============== -->
|
||||
<section id="gpsDenied" class="p-4 space-y-5 hidden">
|
||||
<header class="flex items-center justify-between">
|
||||
<h2 class="section-head" style="color: var(--accent-red);">GPS-Denied // Active</h2>
|
||||
<span class="pill pill-red"><span class="dot pulse"></span>GPS-DENIED ACTIVE</span>
|
||||
</header>
|
||||
|
||||
<!-- Frame with red accent -->
|
||||
<div id="gpsFrame" class="bracket bracket-red panel gps-active-frame p-3">
|
||||
<header class="flex items-center justify-between mb-3">
|
||||
<span class="section-head" style="color: var(--accent-red);">// Orthophoto Upload</span>
|
||||
<span class="micro num" style="color: var(--text-muted);">03 / 12</span>
|
||||
</header>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-2.5 border hair px-2.5 py-2" style="background: var(--surface-0);">
|
||||
<span class="w-6 h-6 flex items-center justify-center shrink-0 mono text-[10px]" style="background: var(--accent-cyan); color: #0A0D10; font-weight: 700;">P1</span>
|
||||
<span class="mono text-[11px] flex-1 truncate">ortho_001.jpg</span>
|
||||
<span class="num text-[10px]" style="color: var(--text-secondary);">48.8566, 2.3522</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 border hair px-2.5 py-2" style="background: var(--surface-0);">
|
||||
<span class="w-6 h-6 flex items-center justify-center shrink-0 mono text-[10px]" style="background: var(--accent-cyan); color: #0A0D10; font-weight: 700;">P2</span>
|
||||
<span class="mono text-[11px] flex-1 truncate">ortho_002.jpg</span>
|
||||
<span class="num text-[10px]" style="color: var(--text-secondary);">48.8612, 2.3601</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 border hair px-2.5 py-2" style="background: var(--surface-0);">
|
||||
<span class="w-6 h-6 flex items-center justify-center shrink-0 mono text-[10px]" style="background: var(--accent-cyan); color: #0A0D10; font-weight: 700;">P3</span>
|
||||
<span class="mono text-[11px] flex-1 truncate">ortho_003.jpg</span>
|
||||
<span class="num text-[10px]" style="color: var(--text-secondary);">48.8703, 2.3754</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full mt-2.5 py-2 mono text-[10px] uppercase tracking-[0.12em] border border-dashed flex items-center justify-center gap-2"
|
||||
style="border-color: var(--border-raised); color: var(--text-secondary); background: transparent;">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 1 V9 M1 5 H9" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
Upload Photos
|
||||
</button>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<!-- Live GPS readout -->
|
||||
<div class="bracket panel p-3">
|
||||
<header class="flex items-center justify-between mb-2.5">
|
||||
<span class="section-head">// Live GPS</span>
|
||||
<span class="pill pill-green"><span class="dot pulse"></span>CONNECTED</span>
|
||||
</header>
|
||||
<div class="space-y-1.5 text-[12px]">
|
||||
<div class="flex items-center justify-between py-1 border-b hair">
|
||||
<span class="micro">Status</span>
|
||||
<span class="mono" style="color: var(--accent-green);">CONNECTED · STREAMING</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1 border-b hair">
|
||||
<span class="micro">Latitude</span>
|
||||
<span class="num">48.85660° N</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1 border-b hair">
|
||||
<span class="micro">Longitude</span>
|
||||
<span class="num">02.35220° E</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1 border-b hair">
|
||||
<span class="micro">Satellites</span>
|
||||
<span class="num" style="color: var(--accent-cyan);">12 / 14</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1">
|
||||
<span class="micro">Drift</span>
|
||||
<span class="num" style="color: var(--accent-amber);">±2.4 M</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<!-- GPS Correction -->
|
||||
<div class="bracket panel p-3">
|
||||
<header class="flex items-center justify-between mb-2.5">
|
||||
<span class="section-head">// GPS Correction</span>
|
||||
</header>
|
||||
<div class="space-y-2.5">
|
||||
<div>
|
||||
<label class="micro block mb-1.5">Waypoint #</label>
|
||||
<input type="number" value="03" class="ipt ipt-num">
|
||||
</div>
|
||||
<div>
|
||||
<label class="micro block mb-1.5">Corrected GPS</label>
|
||||
<input type="text" value="48.86120, 2.36011" class="ipt ipt-num">
|
||||
</div>
|
||||
<button class="btn-primary w-full">Apply Correction</button>
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<button onclick="setMode('fp')" class="btn-ghost w-full">‹ Back to Flight Params</button>
|
||||
</section>
|
||||
|
||||
</div><!-- /.panel-body -->
|
||||
</aside>
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<!-- MAP VIEW -->
|
||||
<!-- =========================================================== -->
|
||||
<main class="flex-1 relative overflow-hidden map-grid">
|
||||
|
||||
<!-- crosshairs -->
|
||||
<div class="crosshair-x"></div>
|
||||
<div class="crosshair-y"></div>
|
||||
|
||||
<!-- axis labels -->
|
||||
<div class="map-axis-label" style="top: 8px; left: 12px;">SECTOR 04-K // ZOOM 17</div>
|
||||
<div class="map-axis-label" style="top: 8px; left: 50%; transform: translateX(-50%);">— TARGET CORRIDOR —</div>
|
||||
<div class="map-axis-label" style="bottom: 8px; left: 12px;">N 48.8566 // E 02.3522</div>
|
||||
<div class="map-axis-label" style="bottom: 8px; right: 12px;">GRID 60M · WGS-84</div>
|
||||
|
||||
<!-- Compass rosette top-left -->
|
||||
<div class="absolute top-12 left-4 w-20 h-20 flex items-center justify-center border hair bracket panel"
|
||||
style="background: rgba(19,23,28,0.6); backdrop-filter: blur(2px);">
|
||||
<svg width="60" height="60" viewBox="-30 -30 60 60" style="color: var(--accent-amber);">
|
||||
<circle r="24" fill="none" stroke="currentColor" stroke-opacity="0.3" stroke-width="0.7"/>
|
||||
<circle r="20" fill="none" stroke="currentColor" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<line x1="0" y1="-26" x2="0" y2="-20" stroke="currentColor" stroke-width="1.5"/>
|
||||
<line x1="0" y1="20" x2="0" y2="26" stroke="currentColor" stroke-opacity="0.4" stroke-width="0.8"/>
|
||||
<line x1="-26" y1="0" x2="-20" y2="0" stroke="currentColor" stroke-opacity="0.4" stroke-width="0.8"/>
|
||||
<line x1="20" y1="0" x2="26" y2="0" stroke="currentColor" stroke-opacity="0.4" stroke-width="0.8"/>
|
||||
<text x="0" y="-12" text-anchor="middle" font-family="JetBrains Mono" font-size="7" fill="currentColor" font-weight="700">N</text>
|
||||
<polygon points="0,-16 -3,-8 0,-10 3,-8" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<!-- SVG paths overlay -->
|
||||
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<marker id="arrowCyan" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
||||
<path d="M0,0 L10,5 L0,10 z" fill="#36D6C5"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- Original (planned) path — red dashed -->
|
||||
<polyline points="150,450 250,350 350,280 450,320 550,250 650,200"
|
||||
fill="none" stroke="#FF4756" stroke-width="1.5"
|
||||
stroke-dasharray="5 4" opacity="0.85"/>
|
||||
<!-- Corrected (live) path — cyan solid -->
|
||||
<polyline points="150,460 255,358 360,290 455,328 555,260 650,210"
|
||||
fill="none" stroke="#36D6C5" stroke-width="2"
|
||||
marker-end="url(#arrowCyan)"/>
|
||||
<!-- Correction ties (thin perpendicular linkers between original/corrected) -->
|
||||
<g stroke="#36D6C5" stroke-width="0.6" stroke-dasharray="2 2" opacity="0.4">
|
||||
<line x1="250" y1="350" x2="255" y2="358"/>
|
||||
<line x1="350" y1="280" x2="360" y2="290"/>
|
||||
<line x1="450" y1="320" x2="455" y2="328"/>
|
||||
<line x1="550" y1="250" x2="555" y2="260"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Waypoint markers on map -->
|
||||
<!-- Start: diamond (green) -->
|
||||
<div class="wp-marker-map" style="left:18.75%; top:75%;">
|
||||
<div class="wp-diamond"></div>
|
||||
<span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-green); letter-spacing: 0.1em;">WP-00 · START</span>
|
||||
</div>
|
||||
<!-- Intermediate: square handles -->
|
||||
<div class="wp-marker-map" style="left:31.25%; top:58.3%;">
|
||||
<div class="wp-square"></div>
|
||||
<span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-01</span>
|
||||
</div>
|
||||
<div class="wp-marker-map" style="left:43.75%; top:46.7%;">
|
||||
<div class="wp-square"></div>
|
||||
<span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-02</span>
|
||||
</div>
|
||||
<div class="wp-marker-map" style="left:56.25%; top:53.3%;">
|
||||
<div class="wp-square"></div>
|
||||
<span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-03</span>
|
||||
<span class="absolute -top-4 -left-1 mono text-[8px]" style="color: var(--accent-amber); letter-spacing: 0.1em;">CORRECTED</span>
|
||||
</div>
|
||||
<div class="wp-marker-map" style="left:68.75%; top:41.7%;">
|
||||
<div class="wp-square"></div>
|
||||
<span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-04</span>
|
||||
</div>
|
||||
<!-- Finish: octagon (red) -->
|
||||
<div class="wp-marker-map" style="left:81.25%; top:33.3%;">
|
||||
<div class="wp-octagon"></div>
|
||||
<span class="absolute top-3.5 left-3.5 mono text-[9px] num" style="color: var(--accent-red); letter-spacing: 0.1em;">WP-FN · TARGET</span>
|
||||
</div>
|
||||
|
||||
<!-- ============ MAP HUD: TOP-RIGHT STATUS ============ -->
|
||||
<div class="absolute top-4 right-4 w-[240px] bracket panel p-3" style="background: rgba(19,23,28,0.92); backdrop-filter: blur(4px);">
|
||||
<header class="flex items-center justify-between mb-2.5 pb-2 border-b hair">
|
||||
<span class="flex items-center gap-2 mono text-[10px]" style="color: var(--accent-cyan); letter-spacing: 0.14em;">
|
||||
<span class="w-1.5 h-1.5 rounded-full pulse" style="background: var(--accent-cyan);"></span>
|
||||
LIVE · CONNECTED
|
||||
</span>
|
||||
<span class="micro num" style="color: var(--text-muted);">FL02</span>
|
||||
</header>
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="micro">Sat</span>
|
||||
<span class="num text-[12px]" style="color: var(--accent-green);">12 / 14</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="micro">Lat</span>
|
||||
<span class="num text-[12px]">48.85660° N</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="micro">Lon</span>
|
||||
<span class="num text-[12px]">02.35220° E</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="micro">Alt</span>
|
||||
<span class="num text-[12px]">320 M / AGL</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="micro">Hdg</span>
|
||||
<span class="num text-[12px]" style="color: var(--accent-amber);">047° NE</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="micro">Spd</span>
|
||||
<span class="num text-[12px]">11.4 M/S</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1.5 mt-1.5 border-t hair">
|
||||
<span class="micro">Link</span>
|
||||
<span class="num text-[11px]" style="color: var(--accent-green);">RSSI -52 DBM</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<!-- ============ MAP HUD: LEGEND BOTTOM-LEFT ============ -->
|
||||
<div class="absolute bottom-12 left-4 w-[200px] bracket panel p-3" style="background: rgba(19,23,28,0.92);">
|
||||
<header class="mb-2 pb-1.5 border-b hair">
|
||||
<span class="section-head">// Map Legend</span>
|
||||
</header>
|
||||
<div class="space-y-1.5 text-[11px]">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<svg width="22" height="6"><line x1="0" y1="3" x2="22" y2="3" stroke="#FF4756" stroke-width="1.5" stroke-dasharray="3 3"/></svg>
|
||||
<span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Planned · Original</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<svg width="22" height="6"><line x1="0" y1="3" x2="22" y2="3" stroke="#36D6C5" stroke-width="2"/></svg>
|
||||
<span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Corrected · Live</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 pt-1.5 border-t hair">
|
||||
<div style="width:10px; height:10px; background: var(--accent-green); transform: rotate(45deg);"></div>
|
||||
<span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Origin / Start</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div style="width:10px; height:10px; background: transparent; border: 1.5px solid var(--accent-cyan);"></div>
|
||||
<span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Waypoint</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div style="width:11px; height:11px; background: var(--accent-red); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);"></div>
|
||||
<span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Target / Finish</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
|
||||
<!-- ============ MAP TOOLBAR: RIGHT EDGE ============ -->
|
||||
<div class="absolute top-1/2 right-4 -translate-y-1/2 flex flex-col gap-1.5">
|
||||
<button class="w-8 h-8 flex items-center justify-center border hair panel mono text-[11px]" title="Zoom in" style="color: var(--text-primary);">+</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border hair panel mono text-[11px]" title="Zoom out" style="color: var(--text-primary);">−</button>
|
||||
<div class="w-8 h-px" style="background: var(--border-hair);"></div>
|
||||
<button class="w-8 h-8 flex items-center justify-center border hair panel" title="Recenter" style="color: var(--accent-amber);">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/></svg>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border hair panel" title="Layers" style="color: var(--text-secondary);">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ============ BOTTOM STATUS STRIP ============ -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-7 flex items-center px-3 gap-4 border-t hair"
|
||||
style="background: var(--surface-1);">
|
||||
<span class="pill pill-green"><span class="dot pulse"></span>TELEMETRY · LIVE</span>
|
||||
<span class="micro" style="color: var(--text-muted);">SSE</span>
|
||||
<span class="micro num" style="color: var(--text-secondary);">FRAME 12,847 / 18,400</span>
|
||||
<span class="micro" style="color: var(--text-muted);">·</span>
|
||||
<span class="micro num" style="color: var(--text-secondary);">LAT 48.85660 N · LON 02.35220 E</span>
|
||||
<span class="ml-auto micro num" style="color: var(--text-muted);">LAST PING +0.42S</span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setMode(mode) {
|
||||
const fp = document.getElementById('flightParams');
|
||||
const gps = document.getElementById('gpsDenied');
|
||||
const tabFP = document.getElementById('tabFP');
|
||||
const tabGPS = document.getElementById('tabGPS');
|
||||
if (mode === 'gps') {
|
||||
fp.classList.add('hidden');
|
||||
gps.classList.remove('hidden');
|
||||
tabFP.style.color = 'var(--text-secondary)';
|
||||
tabFP.style.borderColor = 'transparent';
|
||||
tabFP.style.background = 'transparent';
|
||||
tabGPS.style.color = 'var(--text-primary)';
|
||||
tabGPS.style.borderColor = 'var(--accent-red)';
|
||||
tabGPS.style.background = 'var(--surface-1)';
|
||||
} else {
|
||||
gps.classList.add('hidden');
|
||||
fp.classList.remove('hidden');
|
||||
tabGPS.style.color = 'var(--text-secondary)';
|
||||
tabGPS.style.borderColor = 'transparent';
|
||||
tabGPS.style.background = 'transparent';
|
||||
tabFP.style.color = 'var(--text-primary)';
|
||||
tabFP.style.borderColor = 'var(--accent-amber)';
|
||||
tabFP.style.background = 'var(--surface-1)';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleParams() {
|
||||
document.getElementById('paramsPanel').classList.toggle('collapsed');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,653 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AZAION // SETTINGS</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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
|
||||
.num { 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);
|
||||
}
|
||||
.section-heading {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-amber);
|
||||
}
|
||||
|
||||
/* Corner brackets — every major panel */
|
||||
.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; }
|
||||
|
||||
.panel {
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--border-hair);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.inp {
|
||||
width: 100%;
|
||||
background: var(--surface-input);
|
||||
border: 1px solid var(--border-hair);
|
||||
border-radius: 2px;
|
||||
padding: 6px 10px;
|
||||
height: 32px;
|
||||
color: var(--text-primary);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
transition: border-color .12s, box-shadow .12s;
|
||||
}
|
||||
.inp:focus {
|
||||
border-color: var(--accent-amber);
|
||||
box-shadow: 0 0 0 1px var(--accent-amber);
|
||||
}
|
||||
.inp.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
||||
.inp::placeholder { color: var(--text-muted); }
|
||||
|
||||
/* Path input with folder-icon prefix */
|
||||
.path-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.path-wrap .icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
color: var(--text-muted);
|
||||
display: flex; align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.path-wrap .inp {
|
||||
padding-left: 30px;
|
||||
padding-right: 70px;
|
||||
}
|
||||
.path-wrap .browse {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-hair);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: color .12s, border-color .12s, background .12s;
|
||||
}
|
||||
.path-wrap .browse:hover {
|
||||
color: var(--accent-amber);
|
||||
border-color: var(--accent-amber);
|
||||
background: rgba(255,157,61,0.06);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 14px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background .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.05); }
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--accent-amber);
|
||||
border-color: var(--accent-amber);
|
||||
}
|
||||
.btn-secondary:hover { background: rgba(255,157,61,0.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-ghost {
|
||||
background: transparent;
|
||||
color: var(--accent-red);
|
||||
border-color: rgba(255,71,86,0.5);
|
||||
}
|
||||
.btn-danger-ghost:hover { background: rgba(255,71,86,0.08); border-color: var(--accent-red); }
|
||||
|
||||
/* Chips for aircraft type */
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid;
|
||||
background: transparent;
|
||||
}
|
||||
.chip .dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
.chip-blue { color: var(--accent-blue); border-color: rgba(78,158,255,0.45); }
|
||||
.chip-blue .dot { background: var(--accent-blue); }
|
||||
.chip-green { color: var(--accent-green); border-color: rgba(61,220,132,0.45); }
|
||||
.chip-green .dot { background: var(--accent-green); }
|
||||
|
||||
/* Segmented language pills */
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--border-hair);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
background: var(--surface-input);
|
||||
}
|
||||
.seg button {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 18px;
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: background .12s, color .12s;
|
||||
}
|
||||
.seg button + button { border-left: 1px solid var(--border-hair); }
|
||||
.seg button:hover { color: var(--text-primary); }
|
||||
.seg button.active {
|
||||
background: var(--accent-amber);
|
||||
color: #0A0D10;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Stars for default aircraft */
|
||||
.star {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
transition: color .12s, transform .12s;
|
||||
}
|
||||
.star:hover { color: var(--accent-amber); }
|
||||
.star.active { color: var(--accent-amber); }
|
||||
|
||||
/* Table */
|
||||
table.ac { width: 100%; border-collapse: collapse; }
|
||||
table.ac thead th {
|
||||
text-align: left;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border-hair);
|
||||
background: var(--surface-1);
|
||||
}
|
||||
table.ac tbody td {
|
||||
padding: 0 14px;
|
||||
height: 38px;
|
||||
border-bottom: 1px solid var(--border-hair);
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
table.ac tbody tr:last-child td { border-bottom: 0; }
|
||||
table.ac tbody tr:hover td { background: var(--surface-2); }
|
||||
table.ac td.model { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
||||
table.ac td.center { text-align: center; }
|
||||
|
||||
/* Header */
|
||||
.topbar { height: 48px; border-bottom: 1px solid var(--border-hair); background: var(--surface-1); }
|
||||
.logo {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
color: var(--accent-amber);
|
||||
letter-spacing: 0.20em;
|
||||
font-size: 14px;
|
||||
}
|
||||
.flight-pill {
|
||||
height: 28px;
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--accent-amber);
|
||||
background: var(--surface-1);
|
||||
color: var(--text-primary);
|
||||
border-radius: 2px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.10em;
|
||||
}
|
||||
.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;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab:hover { color: var(--text-primary); }
|
||||
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
|
||||
|
||||
/* Live dot for status */
|
||||
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.85); } }
|
||||
|
||||
/* 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-1); }
|
||||
.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); }
|
||||
|
||||
.hairline { background: var(--border-hair); }
|
||||
|
||||
/* Sticky footer */
|
||||
.footer-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(10,13,16,0) 0%, var(--surface-0) 50%);
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: var(--surface-0); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 0; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
|
||||
|
||||
/* Tiny readout label rows */
|
||||
.field-label {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.field-hint {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Unit suffix overlay for numeric inputs */
|
||||
.num-wrap { position: relative; }
|
||||
.num-wrap .suffix {
|
||||
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
.num-wrap .inp { padding-right: 36px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
|
||||
<!-- ============ TOP BAR ============ -->
|
||||
<header class="topbar flex items-center px-4 gap-3 shrink-0">
|
||||
<div class="logo">AZAION</div>
|
||||
|
||||
<span class="micro" style="color: var(--text-muted);">//</span>
|
||||
|
||||
<button class="flight-pill">
|
||||
<span class="live-dot"></span>
|
||||
<span class="mono" 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 flex items-center">Flights</a>
|
||||
<a href="annotations.html" class="tab flex items-center">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="tab flex items-center">Dataset</a>
|
||||
<a href="admin.html" class="tab flex items-center">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="live-dot"></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 active" 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 GRID ============ -->
|
||||
<main class="flex-1 pt-5 px-6 pb-6 flex flex-col gap-5 overflow-y-auto">
|
||||
|
||||
<!-- ROW 1: Tenant / Directories / Aircrafts -->
|
||||
<section class="flex gap-5 items-start">
|
||||
|
||||
<!-- TENANT CONFIGURATION -->
|
||||
<div class="w-[300px] shrink-0">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="section-heading">TENANT CONFIGURATION</span>
|
||||
<span class="micro">01</span>
|
||||
</div>
|
||||
<div class="bracket panel p-4">
|
||||
<div class="space-y-3">
|
||||
|
||||
<div>
|
||||
<div class="field-label">
|
||||
<label class="micro">Military Unit</label>
|
||||
<span class="mono text-[9px] text-[var(--text-muted)]">REQ</span>
|
||||
</div>
|
||||
<input class="inp" type="text" value="72nd Mechanized Brigade">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="field-label">
|
||||
<label class="micro">Name</label>
|
||||
</div>
|
||||
<input class="inp" type="text" value="Alpha Company">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<div class="field-label">
|
||||
<label class="micro">Cam Width</label>
|
||||
<span class="mono text-[9px] text-[var(--text-muted)]">PX</span>
|
||||
</div>
|
||||
<div class="num-wrap">
|
||||
<input class="inp mono num" type="text" value="1920">
|
||||
<span class="suffix">px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="field-label">
|
||||
<label class="micro">Cam FoV</label>
|
||||
<span class="mono text-[9px] text-[var(--text-muted)]">DEG</span>
|
||||
</div>
|
||||
<div class="num-wrap">
|
||||
<input class="inp mono num" type="text" value="84.0">
|
||||
<span class="suffix">°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIRECTORIES -->
|
||||
<div class="w-[340px] shrink-0">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="section-heading">DIRECTORIES</span>
|
||||
<span class="micro">02</span>
|
||||
</div>
|
||||
<div class="bracket panel p-4">
|
||||
<div class="space-y-3">
|
||||
|
||||
<div>
|
||||
<div class="field-label">
|
||||
<label class="micro">Images Dir</label>
|
||||
<span class="mono text-[9px] text-[var(--accent-green)]">MOUNTED</span>
|
||||
</div>
|
||||
<div class="path-wrap">
|
||||
<span class="icon">
|
||||
<!-- folder icon -->
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input class="inp mono" type="text" value="/data/azaion/images">
|
||||
<button class="browse" type="button">Browse</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="field-label">
|
||||
<label class="micro">Labels Dir</label>
|
||||
<span class="mono text-[9px] text-[var(--accent-green)]">MOUNTED</span>
|
||||
</div>
|
||||
<div class="path-wrap">
|
||||
<span class="icon">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input class="inp mono" type="text" value="/data/azaion/labels">
|
||||
<button class="browse" type="button">Browse</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="field-label">
|
||||
<label class="micro">Thumbnails Dir</label>
|
||||
<span class="mono text-[9px] text-[var(--accent-amber)]">CACHE</span>
|
||||
</div>
|
||||
<div class="path-wrap">
|
||||
<span class="icon">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input class="inp mono" type="text" value="/var/cache/azaion/thumbs">
|
||||
<button class="browse" type="button">Browse</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 pt-3 border-t border-[var(--border-hair)] flex items-center justify-between">
|
||||
<span class="micro">Storage Free</span>
|
||||
<span class="mono num text-[11px] text-[var(--text-primary)]">412.8 / 960.0 GB</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AIRCRAFTS -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="section-heading">AIRCRAFTS</span>
|
||||
<span class="micro">03</span>
|
||||
<span class="mono text-[10px] text-[var(--text-muted)]">· 4 REGISTERED</span>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="button">
|
||||
<span class="text-[14px] leading-none">+</span>
|
||||
<span>Add Aircraft</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bracket panel overflow-hidden">
|
||||
<table class="ac">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-[44%]">Model</th>
|
||||
<th>Type</th>
|
||||
<th class="text-center w-24">Default</th>
|
||||
<th class="w-12"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="model">DJI Mavic 3 Enterprise</td>
|
||||
<td><span class="chip chip-green"><span class="dot"></span>Copter</span></td>
|
||||
<td class="center"><button class="star active" title="Default">★</button></td>
|
||||
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="model">Matrice 300 RTK</td>
|
||||
<td><span class="chip chip-green"><span class="dot"></span>Copter</span></td>
|
||||
<td class="center"><button class="star" title="Set default">☆</button></td>
|
||||
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="model">Fixed-Wing Scout Mk.II</td>
|
||||
<td><span class="chip chip-blue"><span class="dot"></span>Plane</span></td>
|
||||
<td class="center"><button class="star" title="Set default">☆</button></td>
|
||||
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="model">Leleka-100</td>
|
||||
<td><span class="chip chip-blue"><span class="dot"></span>Plane</span></td>
|
||||
<td class="center"><button class="star" title="Set default">☆</button></td>
|
||||
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ROW 2: Language + Session -->
|
||||
<section class="flex gap-5 items-start">
|
||||
|
||||
<!-- LANGUAGE -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="section-heading">LANGUAGE</span>
|
||||
<span class="micro">04</span>
|
||||
</div>
|
||||
<span class="micro">Locale · <span class="text-[var(--text-primary)]">EN-US</span></span>
|
||||
</div>
|
||||
<div class="bracket panel p-4">
|
||||
<div class="flex items-center gap-6 flex-wrap">
|
||||
<div class="seg" role="tablist">
|
||||
<button class="active" type="button">EN</button>
|
||||
<button type="button">UA</button>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="micro">Affects all UI text</span>
|
||||
<span class="mono text-[10px] text-[var(--text-muted)] mt-1">Detection class names also use the localized field from seed data.</span>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-2 mono text-[10px] text-[var(--text-muted)]">
|
||||
<span class="live-dot" style="background:var(--accent-green)"></span>
|
||||
<span>i18n BUNDLE <span class="text-[var(--text-secondary)] num">v2.4.1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SESSION -->
|
||||
<div class="w-[380px] shrink-0">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="section-heading">SESSION</span>
|
||||
<span class="micro">05</span>
|
||||
</div>
|
||||
<span class="micro text-[var(--accent-cyan)]">ACTIVE</span>
|
||||
</div>
|
||||
<div class="bracket panel p-4">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="micro">Last Login</span>
|
||||
<span class="mono num text-[12px] text-[var(--text-primary)] mt-1">2026-05-16 · 08:42:11 UTC</span>
|
||||
<span class="mono text-[10px] text-[var(--text-muted)] mt-0.5 truncate">SRC 10.42.13.7 · TOKEN …f3a9c1</span>
|
||||
</div>
|
||||
<button class="btn btn-danger-ghost shrink-0" type="button">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
Sign out everywhere
|
||||
</button>
|
||||
</div>
|
||||
<span class="br"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ============ STICKY FOOTER ============ -->
|
||||
<div class="footer-bar mt-auto">
|
||||
<div class="flex items-center gap-4 pt-4 border-t border-[var(--border-hair)]">
|
||||
<div class="flex items-center gap-2 mono text-[10px] text-[var(--text-muted)] uppercase tracking-[0.14em]">
|
||||
<span class="live-dot"></span>
|
||||
<span>Unsaved changes detected in <span class="text-[var(--accent-amber)]">TENANT</span></span>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-3">
|
||||
<button class="btn btn-ghost" type="button">Cancel</button>
|
||||
<button class="btn btn-primary" type="button">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user