mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 08:21:11 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Armen Rohalov
|
434854bf3c | ||
|
Armen Rohalov
|
2a62415f0c |
@@ -0,0 +1,85 @@
|
||||
# Azaion UI – v2 Visual-Polish Redesign
|
||||
|
||||
Two parallel takes on the same brief: refresh the original wireframes in [_docs/ui_design/](../) without touching their information architecture. The originals stay as the source of truth for **what** each page contains; v2 explores **how** it could look.
|
||||
|
||||
## Aesthetic direction
|
||||
|
||||
**"Tactical Operations Console"** — defense-grade mission control, leaning on the visual language of air-traffic control consoles and Bloomberg-style trader terminals. Dense, technical, deliberate. The drone-annotation domain rewards this register more than the generic dark-SaaS look the originals defaulted to.
|
||||
|
||||
Shared design tokens (palette, typography, form language) are spelled out in [plugin/_design_system.md](plugin/_design_system.md). The Stitch project uses the same tokens in its design-system asset.
|
||||
|
||||
| Token | Value |
|
||||
|-------|-------|
|
||||
| Page bg | `#0A0D10` |
|
||||
| Panels | `#13171C` |
|
||||
| Raised | `#1A1F26` |
|
||||
| Hairlines | `#252B34` |
|
||||
| Amber accent | `#FF9D3D` |
|
||||
| Cyan accent | `#36D6C5` |
|
||||
| Red accent | `#FF4756` |
|
||||
| Green accent | `#3DDC84` |
|
||||
| Blue accent | `#4E9EFF` |
|
||||
| Display / mono | JetBrains Mono |
|
||||
| Body | IBM Plex Sans |
|
||||
|
||||
## Versions
|
||||
|
||||
### plugin/ — frontend-design plugin
|
||||
|
||||
Self-contained HTML, double-click to view. Tailwind via CDN + an inline `<style>` block per page for design tokens, fonts, and the corner-bracket utility. These are the version closest to the brief — every spec point in the design system is honored.
|
||||
|
||||
| Page | File |
|
||||
|------|------|
|
||||
| Flights | [plugin/flights.html](plugin/flights.html) |
|
||||
| Annotations | [plugin/annotations.html](plugin/annotations.html) |
|
||||
| Dataset Explorer | [plugin/dataset_explorer.html](plugin/dataset_explorer.html) |
|
||||
| Admin | [plugin/admin.html](plugin/admin.html) |
|
||||
| Settings | [plugin/settings.html](plugin/settings.html) |
|
||||
|
||||
Signature moves:
|
||||
- Amber 8px **corner brackets** on every major panel — the through-line that ties the whole system together.
|
||||
- ALL-CAPS mono micro-labels with `0.12em` letter-spacing.
|
||||
- Tabular numerics everywhere; lat/lon/sat/port/frame-counts/percentages all align.
|
||||
- Real inline-SVG NATO affiliation icons on the Annotations canvas (rectangle / diamond / quatrefoil) — not text glyphs.
|
||||
- Annotation list rows carry per-row class-color gradient stripes.
|
||||
- GPS-Denied mode flips the panel framing from amber to red 2px brackets + a pulsing "GPS-DENIED ACTIVE" badge.
|
||||
|
||||
### stitch/ — Google Stitch MCP
|
||||
|
||||
Generated through Google's Stitch design tool against the same design-system asset (project ID `15028193902086176686`, design system `assets/6747203704700882150`). These ship as wider full-page renders (2560 × 2048) and use Stitch's component vocabulary — useful as an alternate take to A/B against the plugin version.
|
||||
|
||||
| Page | File |
|
||||
|------|------|
|
||||
| Flights | [stitch/flights.html](stitch/flights.html) |
|
||||
| Annotations | [stitch/annotations.html](stitch/annotations.html) |
|
||||
| Dataset Explorer | [stitch/dataset_explorer.html](stitch/dataset_explorer.html) |
|
||||
| Admin | [stitch/admin.html](stitch/admin.html) |
|
||||
| Settings | [stitch/settings.html](stitch/settings.html) |
|
||||
|
||||
**Stitch project URL**: open `projects/15028193902086176686` inside the Stitch web UI to view, edit, or re-export.
|
||||
|
||||
## How to compare
|
||||
|
||||
```
|
||||
# Originals
|
||||
_docs/ui_design/flights.html
|
||||
_docs/ui_design/annotations.html
|
||||
...
|
||||
|
||||
# Plugin redesign
|
||||
_docs/ui_design/v2/plugin/flights.html
|
||||
_docs/ui_design/v2/plugin/annotations.html
|
||||
...
|
||||
|
||||
# Stitch redesign
|
||||
_docs/ui_design/v2/stitch/flights.html
|
||||
...
|
||||
```
|
||||
|
||||
Open the three side-by-side in a browser. The plugin version is the recommended baseline for adopting into the React app; the Stitch version is useful for client-facing concept presentations.
|
||||
|
||||
## What's NOT in scope
|
||||
|
||||
- No changes to React components in `src/`. These are static design references.
|
||||
- No backend / API changes.
|
||||
- No IA / interaction rework — only visual polish. If a page's layout in `README.md` says "left sidebar 250px + main + right sidebar 200px," v2 keeps that.
|
||||
@@ -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>
|
||||
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>AZAION TACTICAL OPS - ADMIN</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface0: "#0A0D10",
|
||||
surface1: "#13171C",
|
||||
surface2: "#1A1F26",
|
||||
hairline: "#252B34",
|
||||
raised: "#3B4451",
|
||||
amber: "#FF9D3D",
|
||||
cyan: "#36D6C5",
|
||||
red: "#FF4756",
|
||||
green: "#3DDC84",
|
||||
blue: "#4E9EFF",
|
||||
textPrimary: "#E8ECF1",
|
||||
textSecondary: "#9AA4B2",
|
||||
textMuted: "#5B6573"
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["JetBrains Mono", "monospace"],
|
||||
mono: ["JetBrains Mono", "monospace"],
|
||||
body: ["IBM Plex Sans", "sans-serif"]
|
||||
},
|
||||
letterSpacing: {
|
||||
micro: "0.12em"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0A0D10;
|
||||
color: #E8ECF1;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
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;
|
||||
}
|
||||
.mono-label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.bracket {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-color: #3B4451;
|
||||
}
|
||||
.bracket-tl { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
|
||||
.bracket-tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }
|
||||
.bracket-bl { bottom: -1px; left: -1px; border-bottom: 1px solid; border-left: 1px solid; }
|
||||
.bracket-br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col h-screen overflow-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<header class="h-12 flex justify-between items-center px-4 z-50 bg-[#0A0D10] border-b border-[#252B34]">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="font-headline font-bold text-lg tracking-widest text-[#FF9D3D]">AZAION</span>
|
||||
<div class="flex items-center gap-1 px-2 py-1 bg-surface2 border border-hairline rounded cursor-pointer">
|
||||
<span class="mono-label text-amber">FL02</span>
|
||||
<span class="material-symbols-outlined text-amber">arrow_drop_down</span>
|
||||
</div>
|
||||
<nav class="flex gap-6 h-full">
|
||||
<a class="text-[#9AA4B2] font-mono text-[10px] tracking-[0.12em] hover:text-[#E8ECF1] flex items-center h-full" href="#">FLIGHTS</a>
|
||||
<a class="text-[#9AA4B2] font-mono text-[10px] tracking-[0.12em] hover:text-[#E8ECF1] flex items-center h-full" href="#">ANNOTATIONS</a>
|
||||
<a class="text-[#9AA4B2] font-mono text-[10px] tracking-[0.12em] hover:text-[#E8ECF1] flex items-center h-full" href="#">DATASET</a>
|
||||
<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] pb-1 font-mono text-[10px] tracking-[0.12em] flex items-center h-full mt-[2px]" href="#">ADMIN</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative w-64">
|
||||
<input class="w-full bg-surface0 border border-hairline h-8 px-8 mono-label focus:border-amber focus:ring-0" placeholder="GLOBAL_SEARCH" type="text"/>
|
||||
<span class="material-symbols-outlined absolute left-2 top-1.5 text-textMuted">search</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-textSecondary hover:text-amber cursor-pointer">notifications</span>
|
||||
<span class="material-symbols-outlined text-textSecondary hover:text-amber cursor-pointer">settings</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface2 border border-hairline overflow-hidden">
|
||||
<img alt="OPERATOR_AVATAR" class="w-full h-full object-cover" data-alt="A professional headshot of a focused military drone operator in a high-tech control room environment. The lighting is low-key with cool blue and cyan accents reflected on his face from nearby monitors. He wears a tactical dark uniform. The aesthetic is clean, sharp, and highly technical, fitting a mission-critical command center atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBU5gvFwmb64UKSwL3Ij5pvazF60_m-h5ToNkDk0ZxBh-lKJJ_zcYTnt8CXFwykIaNV9ixI4LGYLsLBAZ_fXJ50IKjvIXutgApi3PcZHqYlJ_G9g7uArAAB1aY_2w3kTzJZQt1LeIu_8Tq5tBbmTkvt5noMKmA1bYt9TsAOLG8p4Xf-Hr0n0Vtd90FS4BI2-oIIzchTu-7Q-kw7XNzVlMJmIUs4dxQuznF-lVTHx5yfQttz8VjA2iAuimfey1NfHoid9LeeOtCHxzKe"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex flex-1 overflow-hidden">
|
||||
<!-- LEFT COLUMN: DETECTION CLASSES -->
|
||||
<aside class="w-[340px] border-r border-hairline bg-surface1 flex flex-col">
|
||||
<div class="p-4 border-b border-hairline flex justify-between items-center">
|
||||
<h2 class="mono-label font-bold text-textPrimary">DETECTION CLASSES</h2>
|
||||
<button class="bg-amber text-surface0 px-3 py-1.5 rounded-sm mono-label font-bold hover:opacity-90 active:scale-95 transition-all">
|
||||
+ ADD CLASS
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 border-b border-hairline">
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface0 border border-hairline h-8 px-8 mono-label focus:border-amber focus:ring-0" placeholder="SEARCH_CLASSES..." type="text"/>
|
||||
<span class="material-symbols-outlined absolute left-2 top-1.5 text-textMuted text-sm">filter_list</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<tbody class="mono-label tabular-nums">
|
||||
<!-- Rows -->
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group px-4">
|
||||
<td class="pl-4 text-textMuted w-12">00</td>
|
||||
<td class="text-textPrimary">ArmorVehicle</td>
|
||||
<td class="w-8"><div class="w-3 h-3 bg-red"></div></td>
|
||||
<td class="pr-4 text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-textMuted hover:text-amber cursor-pointer mr-2">edit</span>
|
||||
<span class="material-symbols-outlined text-textMuted hover:text-red cursor-pointer">delete</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- TRUCK (Inline Edit Mode) -->
|
||||
<tr class="h-10 border-b border-hairline bg-surface2 border-l-2 border-l-amber">
|
||||
<td class="pl-4 text-amber w-12">01</td>
|
||||
<td>
|
||||
<input class="bg-surface0 border border-amber h-7 px-2 text-textPrimary text-[10px] w-32 mono-label focus:ring-0" type="text" value="Truck"/>
|
||||
</td>
|
||||
<td class="w-8"><div class="w-3 h-3 bg-amber"></div></td>
|
||||
<td class="pr-4 text-right">
|
||||
<span class="material-symbols-outlined text-amber cursor-pointer mr-2">check</span>
|
||||
<span class="material-symbols-outlined text-textMuted cursor-pointer">close</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Rest of the 19 rows -->
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">02</td><td class="text-textPrimary">Vehicle</td><td><div class="w-3 h-3 bg-blue"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">03</td><td class="text-textPrimary">Artillery</td><td><div class="w-3 h-3 bg-cyan"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">04</td><td class="text-textPrimary">Shadow</td><td><div class="w-3 h-3 bg-raised"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">05</td><td class="text-textPrimary">Trenches</td><td><div class="w-3 h-3 bg-textMuted"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">06</td><td class="text-textPrimary">MilitaryMan</td><td><div class="w-3 h-3 bg-green"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">07</td><td class="text-textPrimary">TyreTracks</td><td><div class="w-3 h-3 bg-raised"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">08</td><td class="text-textPrimary">AdditionArmoredTank</td><td><div class="w-3 h-3 bg-red"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">09</td><td class="text-textPrimary">Smoke</td><td><div class="w-3 h-3 bg-white"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">10</td><td class="text-textPrimary">Plane</td><td><div class="w-3 h-3 bg-blue"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">11</td><td class="text-textPrimary">Moto</td><td><div class="w-3 h-3 bg-amber"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">12</td><td class="text-textPrimary">CamouflageNet</td><td><div class="w-3 h-3 bg-green"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">13</td><td class="text-textPrimary">CamouflageBranches</td><td><div class="w-3 h-3 bg-green"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">14</td><td class="text-textPrimary">Roof</td><td><div class="w-3 h-3 bg-textSecondary"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">15</td><td class="text-textPrimary">Building</td><td><div class="w-3 h-3 bg-textSecondary"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">16</td><td class="text-textPrimary">Caponier</td><td><div class="w-3 h-3 bg-raised"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">17</td><td class="text-textPrimary">Ammo</td><td><div class="w-3 h-3 bg-red"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">18</td><td class="text-textPrimary">Protect.Struct</td><td><div class="w-3 h-3 bg-cyan"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- CENTER COLUMN: MAIN SETTINGS -->
|
||||
<section class="flex-1 overflow-y-auto bg-surface0 p-6 flex flex-col gap-6">
|
||||
<!-- AI RECOGNITION SETTINGS -->
|
||||
<div class="bg-surface1 border border-hairline p-6 relative">
|
||||
<div class="bracket bracket-tl"></div><div class="bracket bracket-tr"></div><div class="bracket bracket-bl"></div><div class="bracket bracket-br"></div>
|
||||
<h3 class="mono-label text-textPrimary font-bold mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-amber">psychology</span>
|
||||
AI RECOGNITION SETTINGS
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="flex justify-between items-center border-b border-hairline pb-4">
|
||||
<span class="mono-label text-textSecondary"># FRAMES_PER_SEC</span>
|
||||
<input class="w-16 bg-surface0 border border-hairline h-8 px-2 mono-label text-right focus:border-amber focus:ring-0" type="number" value="4"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-b border-hairline pb-4">
|
||||
<span class="mono-label text-textSecondary">MIN_SECONDS</span>
|
||||
<input class="w-16 bg-surface0 border border-hairline h-8 px-2 mono-label text-right focus:border-amber focus:ring-0" type="number" value="2"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-b border-hairline pb-4">
|
||||
<span class="mono-label text-textSecondary">MIN_CONFIDENCE</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="w-16 bg-surface0 border border-hairline h-8 px-2 mono-label text-right focus:border-amber focus:ring-0" type="number" value="25"/>
|
||||
<span class="mono-label text-textMuted">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- GPS DEVICE SETTINGS -->
|
||||
<div class="bg-surface1 border border-hairline p-6 relative">
|
||||
<div class="bracket bracket-tl"></div><div class="bracket bracket-tr"></div><div class="bracket bracket-bl"></div><div class="bracket bracket-br"></div>
|
||||
<h3 class="mono-label text-textPrimary font-bold mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-cyan">location_on</span>
|
||||
GPS DEVICE SETTINGS
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="mono-label text-textMuted">IP_ADDRESS</span>
|
||||
<input class="w-full bg-surface0 border border-hairline h-8 px-3 mono-label focus:border-amber focus:ring-0 tabular-nums" type="text" value="192.168.1.100"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="mono-label text-textMuted">PORT</span>
|
||||
<input class="w-full bg-surface0 border border-hairline h-8 px-3 mono-label focus:border-amber focus:ring-0 tabular-nums" type="text" value="9001"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="mono-label text-textMuted">PROTOCOL_SELECTION</span>
|
||||
<div class="flex gap-2">
|
||||
<button class="bg-amber text-surface0 px-4 py-1.5 mono-label font-bold border border-amber">NMEA</button>
|
||||
<button class="bg-surface0 text-textSecondary px-4 py-1.5 mono-label border border-hairline hover:border-raised">UBX</button>
|
||||
<button class="bg-surface0 text-textSecondary px-4 py-1.5 mono-label border border-hairline hover:border-raised">MAVLINK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- USER MANAGEMENT -->
|
||||
<div class="bg-surface1 border border-hairline flex-1 relative flex flex-col min-h-[300px]">
|
||||
<div class="bracket bracket-tl"></div><div class="bracket bracket-tr"></div><div class="bracket bracket-bl"></div><div class="bracket bracket-br"></div>
|
||||
<div class="p-6 border-b border-hairline flex justify-between items-center">
|
||||
<h3 class="mono-label text-textPrimary font-bold flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-textMuted">group</span>
|
||||
USER MANAGEMENT
|
||||
</h3>
|
||||
<button class="border border-amber text-amber px-3 py-1.5 rounded-sm mono-label hover:bg-amber/10 transition-all">
|
||||
+ CREATE USER
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<table class="w-full text-left">
|
||||
<thead>
|
||||
<tr class="bg-surface2 border-b border-hairline">
|
||||
<th class="px-6 py-3 mono-label text-textMuted font-medium">NAME</th>
|
||||
<th class="px-6 py-3 mono-label text-textMuted font-medium">EMAIL</th>
|
||||
<th class="px-6 py-3 mono-label text-textMuted font-medium">ROLE</th>
|
||||
<th class="px-6 py-3 mono-label text-textMuted font-medium text-right">STATUS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-hairline mono-label">
|
||||
<tr class="hover:bg-surface2 transition-colors">
|
||||
<td class="px-6 py-3 text-textPrimary">COMMANDER_ALPHA</td>
|
||||
<td class="px-6 py-3 text-textSecondary">alpha@azaion.mil</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 border border-red text-red rounded-full text-[9px]">ADMIN</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right">
|
||||
<span class="inline-block w-1.5 h-1.5 rounded-full bg-green mr-1"></span>
|
||||
<span class="text-green">ONLINE</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface2 transition-colors">
|
||||
<td class="px-6 py-3 text-textPrimary">OPERATOR_72</td>
|
||||
<td class="px-6 py-3 text-textSecondary">op72@azaion.mil</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 border border-amber text-amber rounded-full text-[9px]">OPERATOR</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right">
|
||||
<span class="inline-block w-1.5 h-1.5 rounded-full bg-green mr-1"></span>
|
||||
<span class="text-green">ONLINE</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface2 transition-colors">
|
||||
<td class="px-6 py-3 text-textPrimary">ANALYST_KAPPA</td>
|
||||
<td class="px-6 py-3 text-textSecondary">kappa@azaion.mil</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 border border-hairline text-textMuted rounded-full text-[9px]">VIEWER</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right">
|
||||
<span class="inline-block w-1.5 h-1.5 rounded-full bg-textMuted mr-1"></span>
|
||||
<span class="text-textMuted">OFFLINE</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- RIGHT COLUMN: DEFAULT AIRCRAFTS -->
|
||||
<aside class="w-[280px] border-l border-hairline bg-surface1 flex flex-col">
|
||||
<div class="p-4 border-b border-hairline">
|
||||
<h2 class="mono-label font-bold text-textPrimary">DEFAULT AIRCRAFTS</h2>
|
||||
</div>
|
||||
<div class="flex-1 p-2 flex flex-col gap-2">
|
||||
<!-- Aircraft Rows -->
|
||||
<div class="bg-surface2 border border-hairline p-3 group relative hover:border-raised transition-all cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="px-1.5 py-0.5 bg-blue text-surface0 text-[9px] font-bold rounded-sm">P</span>
|
||||
<span class="material-symbols-outlined text-amber tabular-nums" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
</div>
|
||||
<div class="mono-label text-textPrimary font-bold mb-1">REAPER-MQ9</div>
|
||||
<div class="mono-label text-[9px] text-textMuted uppercase tracking-wider">LONG_RANGE_STRIKE</div>
|
||||
</div>
|
||||
<div class="bg-surface2 border border-hairline p-3 group relative hover:border-raised transition-all cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="px-1.5 py-0.5 bg-green text-surface0 text-[9px] font-bold rounded-sm">C</span>
|
||||
<span class="material-symbols-outlined text-textMuted tabular-nums">star</span>
|
||||
</div>
|
||||
<div class="mono-label text-textPrimary font-bold mb-1">MAVIC_3_PRO</div>
|
||||
<div class="mono-label text-[9px] text-textMuted uppercase tracking-wider">TACTICAL_RECON</div>
|
||||
</div>
|
||||
<div class="bg-surface2 border border-hairline p-3 group relative hover:border-raised transition-all cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="px-1.5 py-0.5 bg-amber text-surface0 text-[9px] font-bold rounded-sm">F</span>
|
||||
<span class="material-symbols-outlined text-textMuted tabular-nums">star</span>
|
||||
</div>
|
||||
<div class="mono-label text-textPrimary font-bold mb-1">SWITCHBLADE_600</div>
|
||||
<div class="mono-label text-[9px] text-textMuted uppercase tracking-wider">LOITERING_MUNITION</div>
|
||||
</div>
|
||||
<button class="w-full mt-4 border border-dashed border-hairline py-4 mono-label text-textMuted hover:text-amber hover:border-amber transition-all">
|
||||
+ ADD AIRCRAFT
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 mt-auto border-t border-hairline bg-surface0/50">
|
||||
<div class="flex justify-between items-center mono-label text-[9px] mb-2">
|
||||
<span class="text-textMuted">SYSTEM_STATUS</span>
|
||||
<span class="text-green">OPTIMAL</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mono-label text-[9px] mb-2">
|
||||
<span class="text-textMuted">STORAGE_USE</span>
|
||||
<span class="text-textPrimary">42.8 GB / 100 GB</span>
|
||||
</div>
|
||||
<div class="w-full bg-surface2 h-1 rounded-full overflow-hidden">
|
||||
<div class="bg-amber h-full w-[42%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
<!-- Footer Bar / Status -->
|
||||
<footer class="h-6 bg-surface2 border-t border-hairline flex items-center justify-between px-4">
|
||||
<div class="flex gap-4">
|
||||
<span class="mono-label text-[8px] text-textMuted">LAT: 48.8584° N</span>
|
||||
<span class="mono-label text-[8px] text-textMuted">LON: 2.2945° E</span>
|
||||
<span class="mono-label text-[8px] text-textMuted">ALT: 1,420M MSL</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="mono-label text-[8px] text-cyan flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 bg-cyan rounded-full"></span>
|
||||
LIVE_FEED_SYNCED
|
||||
</span>
|
||||
<span class="mono-label text-[8px] text-textMuted">VER: 2.4.0-STABLE</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,389 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>AZAION - ANNOTATIONS MISSION CONTROL</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Sans:wght@300;400;600&family=Public+Sans:wght@400;700;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface: {
|
||||
0: "#0A0D10",
|
||||
1: "#13171C",
|
||||
2: "#1A1F26"
|
||||
},
|
||||
hairline: "#252B34",
|
||||
raised: "#3B4451",
|
||||
amber: "#FF9D3D",
|
||||
cyan: "#36D6C5",
|
||||
red: "#FF4756",
|
||||
green: "#3DDC84",
|
||||
blue: "#4E9EFF",
|
||||
onSurface: "#E8ECF1",
|
||||
onSurfaceMuted: "#9AA4B2",
|
||||
onSurfaceDim: "#5B6573"
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["JetBrains Mono", "monospace"],
|
||||
mono: ["JetBrains Mono", "monospace"],
|
||||
body: ["IBM Plex Sans", "sans-serif"],
|
||||
display: ["Public Sans", "sans-serif"],
|
||||
label: ["JetBrains Mono", "monospace"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||
.grid-overlay {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
.corner-br-tl { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
||||
.corner-br-tr { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
||||
.corner-br-bl { position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
||||
.corner-br-br { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-0 text-onSurface font-body selection:bg-amber selection:text-surface-0">
|
||||
<!-- TOP APP BAR -->
|
||||
<header class="flex justify-between items-center w-full px-4 h-12 z-50 bg-surface-0 border-b border-hairline sticky top-0">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline font-bold text-lg tracking-widest text-amber">AZAION</span>
|
||||
<div class="flex items-center bg-surface-1 border border-hairline px-2 py-0.5 rounded gap-2 hover:bg-surface-2 cursor-pointer transition-colors">
|
||||
<span class="font-mono text-[10px] tracking-[0.12em] text-cyan">FL03</span>
|
||||
<span class="material-symbols-outlined text-onSurfaceMuted text-xs">arrow_drop_down</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex h-full items-center gap-6">
|
||||
<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">FLIGHTS</a>
|
||||
<a class="text-amber border-b-2 border-amber pb-1 font-mono text-[10px] tracking-[0.12em]" href="#">ANNOTATIONS</a>
|
||||
<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">DATASET</a>
|
||||
<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">ADMIN</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="material-symbols-outlined text-onSurfaceMuted hover:text-amber transition-colors">notifications</button>
|
||||
<button class="material-symbols-outlined text-onSurfaceMuted hover:text-amber transition-colors">settings</button>
|
||||
</div>
|
||||
<div class="h-8 w-8 rounded-full border border-hairline overflow-hidden">
|
||||
<img alt="OPERATOR_AVATAR" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuASYqj8bWeEeCca3bmY7NxlGYCVcmdnDq3yHr_pfZTBas40iXPGGKH9abX9DL_udecDU2eIzbJ8XUvC59UxCerboKPAY33bxx8skyI6h4wuSW7R-PwRrOUAsU9v_yb6cLJAXxMHrIKdFoOPnSG-7ABapnWZNPrC2j95duK6YKey-O8E6cFlE1zVZVqHyemxjiI8oc7x73Fv8W64PvBPzgzVDBw6kYjiaNtdbO5jhoai44fer1uuD3ExqtUErNwL-BYI_qzO00RgvEO2"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex h-[calc(100vh-48px)] overflow-hidden">
|
||||
<!-- LEFT SIDEBAR: MEDIA FILES & CLASSES -->
|
||||
<aside class="w-[250px] bg-surface-1 border-r border-hairline flex flex-col shrink-0 overflow-y-auto">
|
||||
<!-- MEDIA FILES SECTION -->
|
||||
<section class="p-4 border-b border-hairline relative">
|
||||
<div class="corner-br-tl"></div>
|
||||
<div class="corner-br-tr"></div>
|
||||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-4">MEDIA FILES</h3>
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1 border border-blue text-blue text-[8px] font-mono rounded-sm">PHOTO</span>
|
||||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Aerial_01</span>
|
||||
</div>
|
||||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-2 py-1.5 bg-surface-2 border-l-2 border-amber transition-colors cursor-pointer text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||||
<span class="font-body text-onSurface">Video 02</span>
|
||||
</div>
|
||||
<span class="font-mono text-[9px] text-amber tabular-nums">02:14</span>
|
||||
</div>
|
||||
<!-- Mock more rows -->
|
||||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Recon_Unit_B</span>
|
||||
</div>
|
||||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">05:41</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1 border border-blue text-blue text-[8px] font-mono rounded-sm">PHOTO</span>
|
||||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Border_P_44</span>
|
||||
</div>
|
||||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Strike_Log_09</span>
|
||||
</div>
|
||||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">01:12</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Thermal_HD</span>
|
||||
</div>
|
||||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:45</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 relative">
|
||||
<input class="w-full bg-surface-0 border border-hairline text-xs font-mono px-3 py-2 focus:ring-1 focus:ring-amber focus:border-amber outline-none placeholder-onSurfaceDim text-onSurface" placeholder="SEARCH ASSETS..." type="text"/>
|
||||
<span class="material-symbols-outlined absolute right-2 top-2 text-onSurfaceDim text-sm">search</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- DETECTION CLASSES -->
|
||||
<section class="p-4 border-b border-hairline">
|
||||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-4">DETECTION CLASSES</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 bg-red"></div>
|
||||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">MilVeh</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-onSurfaceDim">1</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 bg-green"></div>
|
||||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Truck</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-onSurfaceDim">2</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 bg-blue"></div>
|
||||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Vehicle</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-onSurfaceDim">3</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 bg-yellow-400"></div>
|
||||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Artillery</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-onSurfaceDim">4</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 bg-magenta-500 bg-fuchsia-600"></div>
|
||||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Shadow</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-onSurfaceDim">5</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 bg-cyan"></div>
|
||||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Trenches</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-onSurfaceDim">6</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- PHOTO MODE -->
|
||||
<section class="p-4 mt-auto">
|
||||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-2">PHOTOMODE</h3>
|
||||
<div class="flex border border-hairline overflow-hidden h-8">
|
||||
<button class="flex-1 bg-amber text-surface-0 font-mono text-[9px] font-bold tracking-wider">REGULAR</button>
|
||||
<button class="flex-1 bg-surface-1 text-onSurfaceDim font-mono text-[9px] border-l border-hairline hover:bg-surface-2 transition-colors">WINTER</button>
|
||||
<button class="flex-1 bg-surface-1 text-onSurfaceDim font-mono text-[9px] border-l border-hairline hover:bg-surface-2 transition-colors">NIGHT</button>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
<!-- MAIN VIEWER -->
|
||||
<section class="flex-1 flex flex-col bg-surface-0 relative">
|
||||
<!-- VIEWER AREA -->
|
||||
<div class="flex-1 relative overflow-hidden group cursor-crosshair">
|
||||
<img class="w-full h-full object-cover grayscale-[0.2]" data-alt="A top-down aerial satellite view of a muddy dirt track winding through a dense coniferous forest with dark green pine trees. The image has a tactical drone-feed aesthetic with a subtle digital noise overlay and a technical grid. High-contrast lighting highlights the textures of the mud and the individual needles of the evergreens. Minimalist but detailed, following a military-grade intelligence visual style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuACEEDvgvY6EghK5wwUjyhV-MloxdbkAm6e6WWU6rFHfmfSM0PjLeVbyxe_oP4sk1JjaKSGE0znfRfEiW6q8WsNGvP7e5iH1eUueipOVFk8bDUFA7GdIOW3E2gxKSxc4zyv2lwVfXmABFesr8RD50odvKWtfGIS93sldZYrbZxcJ_hzEsYAVJtKGZG5rkOtcdy5AFGGHqsae8FkjhkNyR7--CHoNYgUPMsWphF6yBuS4m9Ya9QJ4o5ZsTd691ZXlE56XFDP-xuIxg9R"/>
|
||||
<div class="absolute inset-0 grid-overlay pointer-events-none"></div>
|
||||
<!-- Bounding Box 1 (Friendly/MilVeh) -->
|
||||
<div class="absolute top-[20%] left-[30%] w-[120px] h-[80px] border-2 border-cyan pointer-events-none">
|
||||
<div class="absolute -top-7 left-0 flex items-center gap-1.5 whitespace-nowrap bg-surface-0/80 px-2 py-0.5 border border-cyan/30">
|
||||
<svg fill="none" height="12" stroke="#36D6C5" stroke-width="2" viewbox="0 0 24 24" width="12">
|
||||
<rect height="12" rx="1" width="20" x="2" y="6"></rect>
|
||||
<path d="M12 6v12M2 12h20"></path>
|
||||
</svg>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-green animate-pulse"></div>
|
||||
<span class="font-mono text-[10px] text-cyan tabular-nums uppercase">Mil. vehicle 87%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bounding Box 2 (Hostile/Truck) -->
|
||||
<div class="absolute top-[55%] left-[60%] w-[150px] h-[100px] border-2 border-red pointer-events-none">
|
||||
<div class="absolute -top-7 left-0 flex items-center gap-1.5 whitespace-nowrap bg-surface-0/80 px-2 py-0.5 border border-red/30">
|
||||
<svg fill="none" height="12" stroke="#FF4756" stroke-width="2" viewbox="0 0 24 24" width="12">
|
||||
<path d="M12 2L2 12l10 10 10-10L12 2z"></path>
|
||||
<path d="M12 7v10M7 12h10"></path>
|
||||
</svg>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-green"></div>
|
||||
<span class="font-mono text-[10px] text-red tabular-nums uppercase">Truck 94%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Cursor Label -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<div class="w-6 h-6 border-t border-l border-amber opacity-50 absolute -top-4 -left-4"></div>
|
||||
<div class="w-6 h-6 border-b border-r border-amber opacity-50 absolute -bottom-4 -right-4"></div>
|
||||
<div class="ml-4 -mt-4 px-2 py-0.5 bg-amber/20 border border-amber/40">
|
||||
<span class="font-mono text-[9px] text-amber font-bold tracking-widest">MilVeh</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- AI Running Banner -->
|
||||
<div class="absolute top-4 right-4 bg-surface-1/90 border border-hairline p-3 min-w-[240px]">
|
||||
<div class="corner-br-tl"></div><div class="corner-br-tr"></div><div class="corner-br-bl"></div><div class="corner-br-br"></div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<div class="w-2 h-2 rounded-full bg-cyan animate-ping"></div>
|
||||
<span class="font-headline text-[10px] text-onSurface font-bold tracking-widest">AI DETECTION RUNNING</span>
|
||||
</div>
|
||||
<div class="font-mono text-[9px] text-onSurfaceMuted tabular-nums">23/50 FRAMES ANALYZED</div>
|
||||
<div class="font-mono text-[8px] text-onSurfaceDim mt-1 overflow-hidden truncate">LOG: SECTOR_B // THREAD_ID_771 // SIG_LOCK</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- VIDEO TOOLBAR -->
|
||||
<div class="bg-surface-1 border-t border-hairline h-24 flex flex-col">
|
||||
<div class="flex-1 flex items-center px-4 justify-between">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 text-onSurfaceMuted">
|
||||
<button class="material-symbols-outlined hover:text-onSurface">skip_previous</button>
|
||||
<button class="material-symbols-outlined hover:text-onSurface">fast_rewind</button>
|
||||
<button class="material-symbols-outlined text-amber scale-125">play_arrow</button>
|
||||
<button class="material-symbols-outlined hover:text-onSurface">fast_forward</button>
|
||||
<button class="material-symbols-outlined hover:text-onSurface">skip_next</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 border-l border-hairline pl-6">
|
||||
<span class="text-[9px] font-mono text-onSurfaceDim">FRAME STEP:</span>
|
||||
<div class="flex gap-1">
|
||||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">1</button>
|
||||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">5</button>
|
||||
<button class="px-2 py-0.5 bg-amber text-surface-0 border border-amber text-[10px] font-mono font-bold">10</button>
|
||||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">30</button>
|
||||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">60</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-surface-2 transition-all">SAVE</button>
|
||||
<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-red/10 hover:text-red transition-all">DELETE</button>
|
||||
<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-red/10 hover:text-red transition-all">DELETE ALL</button>
|
||||
<button class="px-4 py-1.5 bg-amber text-surface-0 border border-amber text-[10px] font-mono font-bold hover:opacity-90 transition-all">AI DETECT</button>
|
||||
<div class="flex items-center gap-2 ml-4 border-l border-hairline pl-4">
|
||||
<span class="material-symbols-outlined text-onSurfaceDim text-sm">volume_up</span>
|
||||
<div class="w-16 h-1 bg-hairline relative">
|
||||
<div class="absolute left-0 top-0 h-full w-[70%] bg-onSurfaceMuted"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- STATUS BAR & SCRUBBER -->
|
||||
<div class="h-8 border-t border-hairline bg-surface-0 flex items-center px-4 justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-mono text-[10px] text-amber tabular-nums">00:12 / 02:14</span>
|
||||
<span class="text-[9px] text-onSurfaceDim font-body uppercase">Press 1–9 to select class · space to pause</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 border border-green px-2 py-0.5 rounded-full">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-green"></div>
|
||||
<span class="font-mono text-[9px] text-green font-bold">READY</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress Scrubber -->
|
||||
<div class="h-1 bg-surface-1 relative cursor-pointer">
|
||||
<div class="absolute h-full bg-amber w-[35%] z-10 shadow-[0_0_10px_rgba(255,157,61,0.5)]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- RIGHT SIDEBAR: ANNOTATIONS -->
|
||||
<aside class="w-[220px] bg-surface-1 border-l border-hairline flex flex-col shrink-0 overflow-y-auto">
|
||||
<div class="p-4 border-b border-hairline flex justify-between items-center">
|
||||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase">ANNOTATIONS</h3>
|
||||
<span class="font-mono text-[10px] text-onSurfaceDim">128</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<!-- Annotation Rows -->
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:08</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_A</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:09</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_B</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline bg-surface-2 border-l-2 border-amber transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-yellow-400 tabular-nums shrink-0">00:12</span>
|
||||
<span class="font-mono text-[10px] text-onSurface font-bold truncate">00:12 — Artillery</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-green/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-green tabular-nums shrink-0">00:15</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">Truck_01</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-green/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-green tabular-nums shrink-0">00:15</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">Truck_02</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-cyan/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-cyan tabular-nums shrink-0">00:22</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">Trench_Alpha</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-blue/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-blue tabular-nums shrink-0">00:28</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">Civ_Vehicle</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-fuchsia-600/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-fuchsia-400 tabular-nums shrink-0">00:31</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">Unknown_Shadow</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
|
||||
<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:45</span>
|
||||
<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_C</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-t border-hairline mt-auto">
|
||||
<button class="w-full border border-hairline py-2 text-[10px] font-mono text-onSurfaceDim hover:text-onSurface hover:bg-surface-2 transition-all uppercase tracking-widest">
|
||||
EXPORT DATA (.JSON)
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
<!-- FOOTER PANEL OVERLAY -->
|
||||
<div class="fixed bottom-12 right-6 flex flex-col gap-2 pointer-events-none">
|
||||
<div class="bg-surface-1/90 border border-hairline p-2 pr-8 relative pointer-events-auto">
|
||||
<div class="corner-br-tl"></div><div class="corner-br-tr"></div><div class="corner-br-bl"></div><div class="corner-br-br"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-mono text-[8px] text-onSurfaceDim">GPS:</span>
|
||||
<span class="font-mono text-[9px] text-cyan tabular-nums">48.2082° N, 16.3738° E</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-mono text-[8px] text-onSurfaceDim">ALT:</span>
|
||||
<span class="font-mono text-[9px] text-cyan tabular-nums">1,240m AMSL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,369 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>AZAION OPS - DATASET EXPLORER</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface: {
|
||||
0: "#0A0D10",
|
||||
1: "#13171C",
|
||||
2: "#1A1F26"
|
||||
},
|
||||
hairline: "#252B34",
|
||||
raised: "#3B4451",
|
||||
amber: "#FF9D3D",
|
||||
cyan: "#36D6C5",
|
||||
red: "#FF4756",
|
||||
green: "#3DDC84",
|
||||
blue: "#4E9EFF",
|
||||
text: {
|
||||
primary: "#E8ECF1",
|
||||
secondary: "#9AA4B2",
|
||||
muted: "#5B6573"
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["JetBrains Mono", "monospace"],
|
||||
display: ["JetBrains Mono", "monospace"],
|
||||
body: ["IBM Plex Sans", "sans-serif"],
|
||||
label: ["JetBrains Mono", "monospace"]
|
||||
},
|
||||
letterSpacing: {
|
||||
'technical': '0.12em',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0A0D10;
|
||||
color: #E8ECF1;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
.font-mono-tabular {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.bracket-tl::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
||||
.bracket-tr::before { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
||||
.bracket-bl::before { content: ''; position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
||||
.bracket-br::before { content: ''; position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
||||
|
||||
.scanline {
|
||||
background: linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.02) 50%);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex flex-col overflow-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<header class="flex justify-between items-center px-4 w-full h-[48px] bg-[#0A0D10] border-b border-[#252B34] z-50">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="font-headline font-bold text-[#FF9D3D] tracking-widest text-lg">AZAION OPS</span>
|
||||
<div class="bg-surface-2 border border-hairline px-2 py-0.5 flex items-center gap-2 cursor-pointer hover:border-amber transition-colors">
|
||||
<span class="font-headline text-[10px] text-amber tracking-technical">FL03</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-text-secondary">arrow_drop_down</span>
|
||||
</div>
|
||||
<nav class="flex gap-6 h-[48px] items-center">
|
||||
<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">FLIGHTS</a>
|
||||
<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">ANNOTATIONS</a>
|
||||
<a class="font-headline text-[10px] tracking-technical uppercase text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center" href="#">DATASET</a>
|
||||
<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">ADMIN</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 px-3 py-1 bg-amber/10 border border-amber/30">
|
||||
<span class="w-2 h-2 rounded-full bg-amber animate-pulse"></span>
|
||||
<span class="font-headline text-[10px] text-amber tracking-technical">MISSION READY</span>
|
||||
</div>
|
||||
<div class="flex gap-3 text-text-secondary">
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">notifications</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">settings</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">account_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- SideNavBar / Left Sidebar -->
|
||||
<aside class="w-64 bg-[#13171C] border-r border-[#252B34] flex flex-col h-full shrink-0">
|
||||
<div class="p-4 border-b border-hairline">
|
||||
<h3 class="font-headline text-[10px] tracking-technical text-text-muted mb-4 uppercase">DETECTION CLASSES</h3>
|
||||
<div class="space-y-2">
|
||||
<!-- Class Items -->
|
||||
<div class="flex items-center justify-between group cursor-crosshair">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-cyan"></div>
|
||||
<span class="font-headline text-[11px] text-text-primary uppercase">MilVeh</span>
|
||||
</div>
|
||||
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">124</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-crosshair">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-amber"></div>
|
||||
<span class="font-headline text-[11px] text-text-primary uppercase">Truck</span>
|
||||
</div>
|
||||
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">087</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-crosshair">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-green"></div>
|
||||
<span class="font-headline text-[11px] text-text-primary uppercase">Vehicle</span>
|
||||
</div>
|
||||
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">061</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-crosshair opacity-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-red"></div>
|
||||
<span class="font-headline text-[11px] text-text-primary uppercase">Artillery</span>
|
||||
</div>
|
||||
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">032</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-crosshair">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-raised"></div>
|
||||
<span class="font-headline text-[11px] text-text-primary uppercase">Shadow</span>
|
||||
</div>
|
||||
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">214</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between group cursor-crosshair">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-blue"></div>
|
||||
<span class="font-headline text-[11px] text-text-primary uppercase">Trenches</span>
|
||||
</div>
|
||||
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">019</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-b border-hairline">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="font-headline text-[10px] tracking-technical text-text-secondary uppercase">Objects Only</span>
|
||||
<button class="w-8 h-4 bg-surface-0 border border-hairline relative">
|
||||
<div class="absolute top-0 right-0 w-4 h-[14px] bg-amber"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-text-muted text-[16px]">search</span>
|
||||
<input class="w-full bg-surface-0 border border-hairline h-8 pl-8 font-headline text-[10px] text-text-primary focus:ring-1 focus:ring-amber focus:border-amber outline-none" placeholder="FILTER BY ID..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex-1">
|
||||
<div class="relative p-4 border border-hairline bg-surface-2 overflow-hidden">
|
||||
<div class="bracket-tl"></div><div class="bracket-tr"></div><div class="bracket-bl"></div><div class="bracket-br"></div>
|
||||
<h4 class="font-headline text-[10px] tracking-technical text-amber mb-3 uppercase">QUICK STATS</h4>
|
||||
<div class="space-y-2 font-mono-tabular text-[10px]">
|
||||
<div class="flex justify-between border-b border-hairline pb-1">
|
||||
<span class="text-text-muted">TOTAL</span>
|
||||
<span class="text-text-primary">01,842</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-hairline pb-1">
|
||||
<span class="text-text-muted">VALIDATED</span>
|
||||
<span class="text-text-primary text-green">01,504</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-hairline pb-1">
|
||||
<span class="text-text-muted">PENDING</span>
|
||||
<span class="text-text-primary text-amber">00,338</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-t border-hairline flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3 px-3 py-2 hover:bg-surface-2 text-text-muted hover:text-text-primary transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined text-[18px]">build</span>
|
||||
<span class="font-headline text-[10px] tracking-technical">DIAGNOSTICS</span>
|
||||
</div>
|
||||
<button class="w-full border border-red text-red font-headline text-[10px] py-2 tracking-technical hover:bg-red/10 transition-all">TERMINATE SESSION</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col bg-surface-0 relative overflow-hidden">
|
||||
<!-- Filter Bar -->
|
||||
<div class="h-12 border-b border-hairline bg-surface-1 flex items-center px-4 justify-between shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center border border-hairline bg-surface-0 h-7 px-2">
|
||||
<span class="font-mono-tabular text-[11px] text-text-primary uppercase">2025-02-09</span>
|
||||
<span class="mx-2 text-text-muted">—</span>
|
||||
<span class="font-mono-tabular text-[11px] text-text-primary uppercase">2025-02-11</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 border border-hairline bg-surface-0 h-7 px-3 cursor-pointer">
|
||||
<span class="w-2 h-2 rounded-full bg-amber"></span>
|
||||
<span class="font-headline text-[11px] text-text-primary">FL-03</span>
|
||||
<span class="material-symbols-outlined text-[14px]">arrow_drop_down</span>
|
||||
</div>
|
||||
<div class="h-4 w-px bg-hairline"></div>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 h-6 border border-hairline text-text-muted font-headline text-[10px] flex items-center tracking-technical">NONE</span>
|
||||
<span class="px-2 h-6 border border-amber/30 bg-amber/10 text-amber font-headline text-[10px] flex items-center tracking-technical">CREATED</span>
|
||||
<span class="px-2 h-6 border border-blue text-blue font-headline text-[10px] flex items-center tracking-technical">EDITED</span>
|
||||
<span class="px-2 h-6 border border-green bg-green/10 text-green font-headline text-[10px] flex items-center tracking-technical">VALIDATED</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-hairline text-text-secondary hover:border-amber"><span class="material-symbols-outlined text-[18px]">grid_view</span></button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-hairline text-text-secondary hover:border-amber"><span class="material-symbols-outlined text-[18px]">list</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab Strip -->
|
||||
<div class="flex border-b border-hairline bg-surface-1 px-4">
|
||||
<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-amber border-b-2 border-amber">ANNOTATIONS</button>
|
||||
<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-text-muted hover:text-text-primary transition-colors">EDITOR</button>
|
||||
<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-text-muted hover:text-text-primary transition-colors">CLASS DISTRIBUTION</button>
|
||||
</div>
|
||||
<!-- Annotation Grid -->
|
||||
<div class="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-raised">
|
||||
<div class="grid grid-cols-6 gap-2">
|
||||
<!-- SELECTED TILE 1 -->
|
||||
<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
|
||||
<div class="w-full h-full bg-gradient-to-br from-emerald-900/40 to-emerald-950/80 p-4">
|
||||
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Overhead satellite imagery view of a tactical forest environment with dense pine trees and forest clearings, captured in a high-contrast cinematic military aesthetic with deep emerald and forest green tones. The lighting is diffused and moody, suggesting late afternoon surveillance conditions." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZwHF0AGwGxdwnLxfsEd3dpitJogOaQpNG9slAfON3bmZ4RJaRwEUqFug_t_9_jBBontbW--0jIzc3JP3FNa54HzGWTAW-YEyhtStHld5Y6fESKmeG1T0kMLcyUufABqLmiOHkbPTkrUTqd_SCbl9frdThLUJKzTCifR7e-P4Pp4Fth5EKHCuhQF6-G9iSFmBQSHhIwztSXdFc8icy9Hc78XowZg7ApF3FUb9J58fr_9tG1C0CMsQHQRxeibwqIL1wWjFL8JQX_clL"/>
|
||||
</div>
|
||||
<div class="absolute bottom-1 left-1">
|
||||
<div class="flex items-center gap-1 border border-green bg-green/10 px-1 py-0.5">
|
||||
<span class="w-1 h-1 rounded-full bg-green"></span>
|
||||
<span class="font-headline text-[8px] text-green uppercase">VALIDATED</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SEED ANNOTATION TILE -->
|
||||
<div class="aspect-square bg-surface-1 border border-red relative group cursor-pointer overflow-hidden">
|
||||
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
|
||||
<div class="w-full h-full bg-gradient-to-br from-slate-700/40 to-slate-900/80 p-4">
|
||||
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="High-altitude aerial reconnaissance photo of an industrial urban gray logistics yard with large warehouse buildings and parked military trucks, styled in a monochromatic tactical console aesthetic with cold gray and steel blue highlights. Hard shadows define the sharp geometric edges of the structures." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDoU_a9p0-IJp50fhCLTE-DwYSPqqwg7OpqZvedAnd9dt_IHLoKUqBlwqbMqAXh16APb9_SsVYqX8D5sTeN3YUgKCjS02xq0KQyJe8JZhzWcmIUt-0BEkJmYm7mC-GhbOgpBwJOzb_nW0v-dXd1jG8J8x3VN_vs1UB0rWTcKDej0DCD-Pu0G8l70gMrfS6YiYw3AFmeBkeHIkdhTG2p9R9AbNrw1TSOZ-dX3Ug4H58KFSSJSWIFOTK_zUpEe1Wt0qR5Ad9cc2KDyj3B"/>
|
||||
</div>
|
||||
<div class="absolute bottom-1 left-1">
|
||||
<div class="flex items-center gap-1 border border-amber/30 bg-amber/10 px-1 py-0.5">
|
||||
<span class="w-1 h-1 rounded-full bg-amber"></span>
|
||||
<span class="font-headline text-[8px] text-amber uppercase">CREATED</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- STANDARD TILES (Loop representation) -->
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative group cursor-pointer overflow-hidden">
|
||||
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
|
||||
<div class="w-full h-full bg-gradient-to-br from-orange-900/40 to-orange-950/80 p-4">
|
||||
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Top-down thermal scan perspective of a vast desert expanse with shifting sand dunes and scattered brush, rendered in tactical desert tan and warm brown hues. The visual style is grainy and technical, mimicking a low-altitude drone feed under harsh midday sun." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0pqdeg1e8c_3U4DtQ-ZOfV6BmqEiXafEZh7NIYNbZQH9wvAvvhkK-yIHxXA9YW0qeX6pbNw5828CaeEEohxAslUJoxCCQDZctcD116r3hjk3xd2XfcWPjpsuwzAAncZ7Rn1G8X0NaStgmavXFXSU2GvygcODvB9WRZ810ECwdYNjG3Ta4Djwt8dQNPTggoYFKXKrQUmjKHy2tEVPpKFtAR2dlJvsWKUinJz45wbHNmYZrqF8y2C81Ir_-3CK_FO8IEaqkD6uxeJGV"/>
|
||||
</div>
|
||||
<div class="absolute bottom-1 left-1">
|
||||
<div class="flex items-center gap-1 border border-blue px-1 py-0.5">
|
||||
<span class="w-1 h-1 rounded-full bg-blue"></span>
|
||||
<span class="font-headline text-[8px] text-blue uppercase">EDITED</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Repeat for 18+ items -->
|
||||
<!-- tile 4 -->
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative group cursor-pointer overflow-hidden">
|
||||
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">11 MAY · XC</div>
|
||||
<div class="w-full h-full bg-gradient-to-br from-pink-950/40 to-black p-4">
|
||||
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Electronic surveillance view of a rocky coastline at dusk, featuring dark pink and deep purple lighting highlights on jagged cliff faces. The style is that of a specialized tactical sensor array with visible noise patterns and technical overlay characteristics." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBmWx_3z5QEWlHjjyY9V_44FP6IJeBOXAf_PNaQOG_1Czq3nV1-1VmC7F8c2s0DSTu22-fYpYBtpSIfW-kaw-0Vh7R04HgP4WMfiKLyQbkKB_hMJOACRRC-842y00IulZlEc8k0pgwhqEuuB05ryZSh9Ka-CPwOyyjk5-mrWSP-IQia7iOqNHAeUcBGrtBYlQ2KEroHs_hEUMo7O-0Lg7wAGSslxK-jY20kIpuU_Fg7_XXP-0l54aJdVetKR3RKX864vzk1CUJO00sK"/>
|
||||
</div>
|
||||
<div class="absolute bottom-1 left-1">
|
||||
<div class="flex items-center gap-1 border border-hairline px-1 py-0.5">
|
||||
<span class="w-1 h-1 rounded-full bg-text-muted"></span>
|
||||
<span class="font-headline text-[8px] text-text-muted uppercase">NONE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SELECTED TILE 2 -->
|
||||
<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">10 MAY · RD</div>
|
||||
<div class="w-full h-full bg-gradient-to-br from-blue-900/40 to-slate-900/80 p-4">
|
||||
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Nadir drone view of a frozen arctic plain with deep snow drifts and blue ice fissures, styled in a cold white and cyan military imagery aesthetic. The lighting is bright and flat, characteristic of overcast polar surveillance missions." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4f1LSl-0OM7MAyUiSgDYQmqdSYe1togt8aSpmiSzl2z3MvkEMbslpDsFEL5ySzBDwBCaDb5SrRZcQDtv11duF2tPo86SkHD6HxnHZWHktpUtN67S3lGiIoJvbPzhTj4gdEbzvOzH2E8mTzvNQs8g6lz9KkpNwCFCN-CyzW0SoOJmHvaM3XKBgE7iNKQroGTnyqImiWOemd8pfBujP5djPswarBzfKgzNbmEU3KgXofVA0ZFb2oPZ5cDc5HWfGCad60NhTf906Ots_"/>
|
||||
</div>
|
||||
<div class="absolute bottom-1 left-1">
|
||||
<div class="flex items-center gap-1 border border-green bg-green/10 px-1 py-0.5">
|
||||
<span class="w-1 h-1 rounded-full bg-green"></span>
|
||||
<span class="font-headline text-[8px] text-green uppercase">VALIDATED</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- tile 6 -->
|
||||
<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">09 MAY · RD</div>
|
||||
<div class="w-full h-full bg-gradient-to-br from-gray-700/40 to-gray-900/80 p-4">
|
||||
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Aerial drone camera feed showing an abandoned rural farming area with dilapidated barns and overgrown fields, captured in a stark urban gray and muted olive palette. Technical metadata overlays might be inferred by the precision framing and tactical perspective." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDd_sJhVwnkVBWWrM9DIzpU1MQUy2fRutHktUF4nU7H60J5RlwUJ3uETjgy9Q-TLgZGHgb6qujRL75JHJ4b-YfMr3Rwg0rDSX9XhC2jN-4eWu4aGpcvVqOe838jdKwWsmN8Xs8r1i5aZe5ThoJHgWkT4YzG9LO6wqYAe4Eut88IFfxDtW6QGCI4GmMFf9rwpNzgL1F1SNuBzG5FX_oSIuHPgBFm-0uMX21IU4Ni4erv85cVseLLT9nNNwuLl1R_JYwz63-6kD2acRp1"/>
|
||||
</div>
|
||||
<div class="absolute bottom-1 left-1">
|
||||
<div class="flex items-center gap-1 border border-blue px-1 py-0.5">
|
||||
<span class="w-1 h-1 rounded-full bg-blue"></span>
|
||||
<span class="font-headline text-[8px] text-blue uppercase">EDITED</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fill grid with generic stylized tiles -->
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative group overflow-hidden">
|
||||
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">08 MAY · RD</div>
|
||||
<div class="w-full h-full bg-surface-2 flex items-center justify-center">
|
||||
<div class="w-full h-full opacity-10 scanline absolute inset-0"></div>
|
||||
<span class="font-headline text-[8px] text-text-muted">IMG_DATA_007</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Repeating pattern -->
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-red relative overflow-hidden">
|
||||
<div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div>
|
||||
<div class="absolute top-1 left-1 bg-red/20 px-1 font-headline text-[7px] text-red">SEED</div>
|
||||
</div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-blue-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-blue-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div></div>
|
||||
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Status Bar -->
|
||||
<footer class="h-12 border-t border-hairline bg-surface-1 flex items-center px-4 justify-between shrink-0">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="bg-amber text-surface-0 font-headline text-[10px] h-8 px-4 font-bold tracking-technical flex items-center gap-2 hover:opacity-90 active:scale-95 transition-all">
|
||||
VALIDATE (3)
|
||||
</button>
|
||||
<button class="border border-hairline text-text-secondary font-headline text-[10px] h-8 px-4 tracking-technical hover:text-amber transition-colors">
|
||||
REFRESH THUMBNAILS
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="font-mono-tabular text-[11px] text-text-primary tracking-wide">ann_0247_FL03_117.jpg</span>
|
||||
<div class="w-32 h-0.5 bg-hairline mt-1 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-amber w-1/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[14px] text-text-muted">schedule</span>
|
||||
<span class="font-mono-tabular text-[10px] text-text-muted uppercase">Last scan: 14:22</span>
|
||||
</div>
|
||||
<div class="h-4 w-px bg-hairline"></div>
|
||||
<span class="font-mono-tabular text-[10px] text-amber">3 SELECTED</span>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>AZAION Tactical Ops - FLIGHTS</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
background-color: #0A0D10;
|
||||
color: #E8ECF1;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.font-headline { font-family: 'JetBrains Mono', monospace; }
|
||||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||
.scanline-overlay {
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.grid-bg {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
/* Corner Brackets */
|
||||
.corner-bracket {
|
||||
position: relative;
|
||||
}
|
||||
.corner-bracket::before, .corner-bracket::after,
|
||||
.corner-bracket > .bracket-bottom::before, .corner-bracket > .bracket-bottom::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-color: #FF9D3D;
|
||||
border-style: solid;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Top Left */
|
||||
.corner-bracket::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
|
||||
/* Top Right */
|
||||
.corner-bracket::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
|
||||
/* Bottom Left */
|
||||
.bracket-bottom::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
|
||||
/* Bottom Right */
|
||||
.bracket-bottom::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: #13171C; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #252B34; }
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface: {
|
||||
0: "#0A0D10",
|
||||
1: "#13171C",
|
||||
2: "#1A1F26"
|
||||
},
|
||||
hairline: "#252B34",
|
||||
amber: "#FF9D3D",
|
||||
cyan: "#36D6C5",
|
||||
red: "#FF4756",
|
||||
green: "#3DDC84"
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["JetBrains Mono", "monospace"],
|
||||
body: ["IBM Plex Sans", "sans-serif"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-[#13171C] border-b border-[#252B34] h-12 flex justify-between items-center px-4 z-50">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="font-headline text-lg font-bold tracking-tighter text-[#FF9D3D]">AZAION</span>
|
||||
<div class="flex items-center border border-amber px-2 py-0.5 rounded-sm gap-2 bg-surface-2 cursor-pointer">
|
||||
<span class="font-headline text-[10px] tracking-[0.12em] text-amber">FL02</span>
|
||||
<span class="material-symbols-outlined text-amber text-xs">arrow_drop_down</span>
|
||||
</div>
|
||||
<nav class="flex h-12 items-center">
|
||||
<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">FLIGHTS</a>
|
||||
<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">ANNOTATIONS</a>
|
||||
<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">DATASET</a>
|
||||
<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">ADMIN</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline text-[10px] tracking-[0.12em] text-cyan">SYSTEM_STATUS: OK</span>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-cyan shadow-[0_0_4px_#36D6C5]"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-[#5B6573] text-lg hover:text-white cursor-pointer">settings</span>
|
||||
<span class="material-symbols-outlined text-[#5B6573] text-lg hover:text-white cursor-pointer">notifications</span>
|
||||
<div class="flex items-center gap-2 pl-2 border-l border-hairline">
|
||||
<span class="font-headline text-[10px] text-secondary">OPERATOR_042</span>
|
||||
<span class="material-symbols-outlined text-[#5B6573] text-xl">account_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 flex overflow-hidden">
|
||||
<!-- Column 1: Flights Sidebar -->
|
||||
<aside class="w-[200px] bg-surface-1 border-r border-hairline flex flex-col p-4 corner-bracket">
|
||||
<div class="bracket-bottom"></div>
|
||||
<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-4">FLIGHTS_INDEX</h2>
|
||||
<div class="flex-1 space-y-1 overflow-y-auto custom-scrollbar">
|
||||
<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer transition-colors">
|
||||
<div class="font-headline text-xs text-white">FL01</div>
|
||||
<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-24 08:30</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 bg-surface-2 border-l-2 border-amber cursor-pointer">
|
||||
<div class="font-headline text-xs text-amber">FL02</div>
|
||||
<div class="font-headline text-[9px] text-amber/60 tracking-tighter">2023-11-24 10:15</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer">
|
||||
<div class="font-headline text-xs text-white">FL03</div>
|
||||
<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-24 14:00</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer">
|
||||
<div class="font-headline text-xs text-white">FL04</div>
|
||||
<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-25 09:12</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-hairline">
|
||||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-muted mb-2">TELEMETRY_LOG</h3>
|
||||
<div class="bg-surface-0 border border-hairline p-2 flex items-center justify-between cursor-pointer">
|
||||
<span class="font-headline text-[10px] text-secondary">24_NOV_2023</span>
|
||||
<span class="material-symbols-outlined text-xs text-muted">calendar_today</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-6 w-full border border-amber py-2 font-headline text-[10px] tracking-[0.12em] text-amber hover:bg-amber/10 transition-colors uppercase">
|
||||
+ NEW FLIGHT
|
||||
</button>
|
||||
</aside>
|
||||
<!-- Column 2: Parameters & Waypoints -->
|
||||
<aside class="w-[260px] bg-surface-1 border-r border-hairline flex flex-col p-4 corner-bracket">
|
||||
<div class="bracket-bottom"></div>
|
||||
<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-4">FLIGHT_PARAMETERS</h2>
|
||||
<div class="space-y-4 mb-6">
|
||||
<div>
|
||||
<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">AIRCRAFT</label>
|
||||
<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white">DJI Mavic 3 Enterprise</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">DEFAULT_HEIGHT</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white flex-1 tabular-nums">100</div>
|
||||
<span class="font-headline text-[10px] text-muted">M</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label class="font-headline text-[9px] text-muted block mb-1">FOCAL</label>
|
||||
<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">24MM</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-headline text-[9px] text-muted block mb-1">SENSOR</label>
|
||||
<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">17.3MM</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-headline text-[9px] text-muted block mb-1">ALT</label>
|
||||
<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">45M</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">COMM_ADDR</label>
|
||||
<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white font-headline tabular-nums">192.168.1.1:8080</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-2">WAYPOINTS_V1</h2>
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar border border-hairline">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-2 sticky top-0">
|
||||
<tr>
|
||||
<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">ID</th>
|
||||
<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">LABEL</th>
|
||||
<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">STATUS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-[10px] font-headline">
|
||||
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
||||
<td class="p-2 text-green">A1</td>
|
||||
<td class="p-2">START_POINT</td>
|
||||
<td class="p-2 text-green">LOCKED</td>
|
||||
</tr>
|
||||
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
||||
<td class="p-2 text-amber">A2</td>
|
||||
<td class="p-2">TRANS_01</td>
|
||||
<td class="p-2 text-amber">READY</td>
|
||||
</tr>
|
||||
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
||||
<td class="p-2 text-amber">A3</td>
|
||||
<td class="p-2">TRANS_02</td>
|
||||
<td class="p-2 text-amber">READY</td>
|
||||
</tr>
|
||||
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
||||
<td class="p-2 text-amber">A4</td>
|
||||
<td class="p-2">TRANS_03</td>
|
||||
<td class="p-2 text-muted">PENDING</td>
|
||||
</tr>
|
||||
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
||||
<td class="p-2 text-amber">A5</td>
|
||||
<td class="p-2">TRANS_04</td>
|
||||
<td class="p-2 text-muted">PENDING</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-2 cursor-pointer">
|
||||
<td class="p-2 text-red">A6</td>
|
||||
<td class="p-2">FINISH_LINE</td>
|
||||
<td class="p-2 text-muted">PENDING</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 mt-4">
|
||||
<button class="border border-red text-red font-headline text-[10px] py-2 hover:bg-red/10 transition-colors">GPS-DENIED</button>
|
||||
<button class="border border-green text-green font-headline text-[10px] py-2 hover:bg-green/10 transition-colors">UPLOAD</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Column 3: Map View -->
|
||||
<section class="flex-1 relative bg-surface-0 grid-bg overflow-hidden">
|
||||
<div class="absolute inset-0 scanline-overlay"></div>
|
||||
<!-- Map Simulation (SVG Path) -->
|
||||
<svg class="absolute inset-0 w-full h-full opacity-60">
|
||||
<!-- Original Path (Red Dashed) -->
|
||||
<path d="M 200,600 L 400,450 L 550,500 L 700,300 L 900,350 L 1100,200" fill="none" stroke="#FF4756" stroke-dasharray="8,4" stroke-width="2"></path>
|
||||
<!-- Corrected Path (Cyan Solid) -->
|
||||
<path d="M 200,600 L 420,430 L 580,480 L 720,280 L 930,330 L 1100,200" fill="none" stroke="#36D6C5" stroke-width="2"></path>
|
||||
</svg>
|
||||
<!-- Waypoint Markers -->
|
||||
<div class="absolute" style="top: 600px; left: 200px; transform: translate(-50%, -50%);">
|
||||
<div class="w-4 h-4 bg-green border-2 border-white"></div>
|
||||
<span class="absolute top-6 left-1/2 -translate-x-1/2 font-headline text-[9px] text-green">START</span>
|
||||
</div>
|
||||
<div class="absolute" style="top: 430px; left: 420px; transform: translate(-50%, -50%);">
|
||||
<div class="w-3 h-3 bg-amber border border-white"></div>
|
||||
<span class="absolute top-4 left-1/2 -translate-x-1/2 font-headline text-[9px] text-amber">A2</span>
|
||||
</div>
|
||||
<div class="absolute" style="top: 480px; left: 580px; transform: translate(-50%, -50%);">
|
||||
<div class="w-3 h-3 bg-amber border border-white"></div>
|
||||
<span class="absolute top-4 left-1/2 -translate-x-1/2 font-headline text-[9px] text-amber">A3</span>
|
||||
</div>
|
||||
<div class="absolute" style="top: 280px; left: 720px; transform: translate(-50%, -50%);">
|
||||
<div class="w-3 h-3 bg-amber border border-white"></div>
|
||||
</div>
|
||||
<div class="absolute" style="top: 330px; left: 930px; transform: translate(-50%, -50%);">
|
||||
<div class="w-3 h-3 bg-amber border border-white"></div>
|
||||
</div>
|
||||
<div class="absolute" style="top: 200px; left: 1100px; transform: translate(-50%, -50%);">
|
||||
<div class="w-4 h-4 bg-red rotate-45 border-2 border-white"></div>
|
||||
<span class="absolute top-6 left-1/2 -translate-x-1/2 font-headline text-[9px] text-red">FINISH</span>
|
||||
</div>
|
||||
<!-- HUD (Top-Right) -->
|
||||
<div class="absolute top-6 right-6 p-4 bg-surface-1/80 border border-hairline corner-bracket backdrop-blur-sm min-w-[180px]">
|
||||
<div class="bracket-bottom"></div>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-2 h-2 rounded-full bg-cyan animate-pulse"></div>
|
||||
<span class="font-headline text-[10px] tracking-widest text-white">LIVE • CONNECTED</span>
|
||||
</div>
|
||||
<div class="space-y-1 font-headline text-[11px] tabular-nums">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted">LAT</span>
|
||||
<span class="text-white">48.856621</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted">LON</span>
|
||||
<span class="text-white">2.352212</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted">SAT</span>
|
||||
<span class="text-white">12_ACTIVE</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-t border-hairline pt-1 mt-1">
|
||||
<span class="text-muted">ALT</span>
|
||||
<span class="text-cyan">45.28M</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Map Controls Overlay -->
|
||||
<div class="absolute top-6 left-6 flex flex-col gap-2">
|
||||
<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2">
|
||||
<span class="material-symbols-outlined text-sm">add</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2">
|
||||
<span class="material-symbols-outlined text-sm">remove</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2 mt-4">
|
||||
<span class="material-symbols-outlined text-sm">layers</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Legend (Bottom-Left) -->
|
||||
<div class="absolute bottom-6 left-6 p-3 bg-surface-1/90 border border-hairline text-[10px] font-headline flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-red"></div>
|
||||
<span class="text-muted uppercase">Original path</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-cyan"></div>
|
||||
<span class="text-muted uppercase">Corrected path</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Compass Overlay -->
|
||||
<div class="absolute bottom-6 right-6 opacity-40">
|
||||
<svg height="80" viewbox="0 0 80 80" width="80">
|
||||
<circle cx="40" cy="40" fill="none" r="38" stroke="#252B34" stroke-width="1"></circle>
|
||||
<text fill="#5B6573" font-family="JetBrains Mono" font-size="8" text-anchor="middle" x="40" y="12">N</text>
|
||||
<path d="M 40,20 L 45,40 L 40,60 L 35,40 Z" fill="#FF9D3D"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Contextual Footer / Status Bar -->
|
||||
<footer class="h-6 bg-[#13171C] border-t border-[#252B34] flex justify-between items-center px-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-headline text-[9px] text-muted">LOG_BUFFER: 100%</span>
|
||||
<span class="font-headline text-[9px] text-muted">FRAME_RATE: 60FPS</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-headline text-[9px] text-muted">SECTOR_7_ACTIVE</span>
|
||||
<span class="font-headline text-[9px] text-amber uppercase">Security level: ALPHA</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,346 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0A0D10;
|
||||
color: #E8ECF1;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
||||
.font-headline { font-family: 'JetBrains Mono', monospace; }
|
||||
|
||||
.corner-bracket {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-color: #FF9D3D;
|
||||
}
|
||||
.bracket-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
|
||||
.bracket-tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
|
||||
.bracket-bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
|
||||
.bracket-br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
|
||||
|
||||
.scanline {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: rgba(255, 157, 61, 0.03);
|
||||
position: absolute;
|
||||
animation: scan 8s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes scan {
|
||||
from { top: 0; }
|
||||
to { top: 100%; }
|
||||
}
|
||||
|
||||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 4px; height: 4px; }
|
||||
::-webkit-scrollbar-track { background: #0A0D10; }
|
||||
::-webkit-scrollbar-thumb { background: #252B34; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #3B4451; }
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface: {
|
||||
0: "#0A0D10",
|
||||
1: "#13171C",
|
||||
2: "#1A1F26"
|
||||
},
|
||||
hairline: "#252B34",
|
||||
raised: "#3B4451",
|
||||
primary: "#FF9D3D",
|
||||
cyan: "#36D6C5",
|
||||
red: "#FF4756",
|
||||
green: "#3DDC84",
|
||||
blue: "#4E9EFF",
|
||||
"on-primary": "#0A0D10"
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["JetBrains Mono"],
|
||||
body: ["IBM Plex Sans"],
|
||||
mono: ["JetBrains Mono"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-[#0A0D10] text-[#E8ECF1] antialiased min-h-screen pb-24">
|
||||
<!-- TopAppBar Shell -->
|
||||
<header class="fixed top-0 w-full h-[48px] z-50 bg-[#0A0D10] border-b border-[#252B34] flex justify-between items-center px-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-headline font-black text-lg tracking-tighter text-[#FF9D3D]">AZAION</span>
|
||||
<div class="flex items-center bg-[#13171C] border border-[#252B34] px-2 py-0.5 rounded-sm cursor-pointer hover:border-[#FF9D3D] transition-colors">
|
||||
<span class="font-mono text-[10px] tracking-widest text-[#FF9D3D]">FL02</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-[#FF9D3D] ml-1">arrow_drop_down</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="hidden md:flex h-full items-center">
|
||||
<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">FLIGHTS</a>
|
||||
<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">ANNOTATIONS</a>
|
||||
<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">DATASET</a>
|
||||
<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center px-4 font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">ADMIN</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-mono text-[10px] text-[#9AA4B2] hidden sm:block">USER@AZAION.MIL</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-1 text-[#FF9D3D] active:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[20px]" data-weight="fill">settings</span>
|
||||
</button>
|
||||
<button class="p-1 text-[#5B6573] hover:text-[#FF4756] active:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[20px]">power_settings_new</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mt-16 px-5 max-w-[1600px] mx-auto">
|
||||
<div class="scanline"></div>
|
||||
<!-- Row 1: Configurations -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-5 mb-5">
|
||||
<!-- 01 - Tenant Config -->
|
||||
<section class="lg:col-span-3 bg-[#13171C] border border-[#252B34] p-4 relative">
|
||||
<div class="corner-bracket bracket-tl"></div>
|
||||
<div class="corner-bracket bracket-tr"></div>
|
||||
<div class="corner-bracket bracket-bl"></div>
|
||||
<div class="corner-bracket bracket-br"></div>
|
||||
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">01 — TENANT CONFIGURATION</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-mono text-[10px] text-[#5B6573] uppercase">MILITARY UNIT</label>
|
||||
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-body" type="text" value="72nd Brigade"/>
|
||||
<span class="text-[9px] text-[#5B6573] font-mono">USED IN PDF EXPORT HEADERS</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-mono text-[10px] text-[#5B6573] uppercase">UNIT NAME</label>
|
||||
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-body" type="text" value="Alpha Company"/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-mono text-[10px] text-[#5B6573] uppercase">DEF. WIDTH</label>
|
||||
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-mono tabular-nums" type="text" value="1920"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-mono text-[10px] text-[#5B6573] uppercase">DEF. FOV</label>
|
||||
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-mono tabular-nums" type="text" value="84"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 02 - Directories -->
|
||||
<section class="lg:col-span-3 bg-[#13171C] border border-[#252B34] p-4 relative">
|
||||
<div class="corner-bracket bracket-tl"></div>
|
||||
<div class="corner-bracket bracket-tr"></div>
|
||||
<div class="corner-bracket bracket-bl"></div>
|
||||
<div class="corner-bracket bracket-br"></div>
|
||||
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">02 — DIRECTORIES</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-mono text-[10px] text-[#5B6573] uppercase">IMAGES PATH</label>
|
||||
<div class="flex">
|
||||
<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
|
||||
<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
|
||||
/mnt/nas/azaion/images/
|
||||
</div>
|
||||
<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mt-1">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-[#3DDC84]"></div>
|
||||
<span class="text-[9px] text-[#3DDC84] font-mono">MOUNTED (NVME_01)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-mono text-[10px] text-[#5B6573] uppercase">LABELS PATH</label>
|
||||
<div class="flex">
|
||||
<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
|
||||
<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
|
||||
/mnt/nas/azaion/labels/
|
||||
</div>
|
||||
<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-mono text-[10px] text-[#5B6573] uppercase">THUMBNAILS</label>
|
||||
<div class="flex">
|
||||
<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
|
||||
<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
|
||||
/var/www/azaion/thumbs/
|
||||
</div>
|
||||
<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 03 - Aircrafts -->
|
||||
<section class="lg:col-span-6 bg-[#13171C] border border-[#252B34] p-4 relative flex flex-col">
|
||||
<div class="corner-bracket bracket-tl"></div>
|
||||
<div class="corner-bracket bracket-tr"></div>
|
||||
<div class="corner-bracket bracket-bl"></div>
|
||||
<div class="corner-bracket bracket-br"></div>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] uppercase">03 — AIRCRAFTS</h2>
|
||||
<button class="bg-[#FF9D3D] text-[#0A0D10] font-mono font-bold text-[9px] px-3 py-1 rounded-sm hover:opacity-90 active:scale-95 transition-all flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">add</span>
|
||||
ADD AIRCRAFT
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-[#252B34]">
|
||||
<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase">MODEL</th>
|
||||
<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase text-center">TYPE</th>
|
||||
<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase text-right">DEFAULT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm">
|
||||
<tr class="hover:bg-[#1A1F26] transition-colors group">
|
||||
<td class="py-3 font-medium text-[#E8ECF1]">DJI Mavic 3</td>
|
||||
<td class="py-3">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#4E9EFF] rounded-full">
|
||||
<div class="w-1 h-1 rounded-full bg-[#4E9EFF]"></div>
|
||||
<span class="text-[9px] font-mono text-[#4E9EFF]">PLANE</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 text-right">
|
||||
<button class="text-[#FF9D3D]">
|
||||
<span class="material-symbols-outlined text-[18px]" data-weight="fill">star</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-[#1A1F26] transition-colors group">
|
||||
<td class="py-3 font-medium text-[#E8ECF1]">Matrice 300 RTK</td>
|
||||
<td class="py-3">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#3DDC84] rounded-full">
|
||||
<div class="w-1 h-1 rounded-full bg-[#3DDC84]"></div>
|
||||
<span class="text-[9px] font-mono text-[#3DDC84]">COPTER</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 text-right">
|
||||
<button class="text-[#5B6573] hover:text-[#FF9D3D]">
|
||||
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-[#1A1F26] transition-colors group">
|
||||
<td class="py-3 font-medium text-[#E8ECF1]">Autel EVO II Dual</td>
|
||||
<td class="py-3">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#3DDC84] rounded-full">
|
||||
<div class="w-1 h-1 rounded-full bg-[#3DDC84]"></div>
|
||||
<span class="text-[9px] font-mono text-[#3DDC84]">COPTER</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 text-right">
|
||||
<button class="text-[#5B6573] hover:text-[#FF9D3D]">
|
||||
<span class="material-symbols-outlined text-[18px]">star</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Row 2: Misc -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<!-- 04 - Language -->
|
||||
<section class="bg-[#13171C] border border-[#252B34] p-4 relative">
|
||||
<div class="corner-bracket bracket-tl"></div>
|
||||
<div class="corner-bracket bracket-tr"></div>
|
||||
<div class="corner-bracket bracket-bl"></div>
|
||||
<div class="corner-bracket bracket-br"></div>
|
||||
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">04 — LANGUAGE</h2>
|
||||
<div class="flex border border-[#252B34] w-fit">
|
||||
<button class="px-6 py-2 font-mono text-xs bg-[#FF9D3D] text-[#0A0D10] font-bold">EN</button>
|
||||
<button class="px-6 py-2 font-mono text-xs text-[#9AA4B2] hover:bg-[#1A1F26] transition-colors">UA</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 05 - Session -->
|
||||
<section class="bg-[#13171C] border border-[#252B34] p-4 relative">
|
||||
<div class="corner-bracket bracket-tl"></div>
|
||||
<div class="corner-bracket bracket-tr"></div>
|
||||
<div class="corner-bracket bracket-bl"></div>
|
||||
<div class="corner-bracket bracket-br"></div>
|
||||
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">05 — SESSION</h2>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<button class="border border-[#FF4756] text-[#FF4756] font-mono text-[10px] px-4 py-2 hover:bg-[#FF4756] hover:text-[#0A0D10] transition-all uppercase">
|
||||
Sign out everywhere
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-mono text-[9px] text-[#5B6573] uppercase">LAST LOGIN: 2023-10-24 14:32:01</p>
|
||||
<p class="font-mono text-[9px] text-[#5B6573] uppercase">IP: 192.168.1.104 (LOCAL)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Shell -->
|
||||
<footer class="fixed bottom-0 left-0 right-0 z-50 bg-[#0A0D10] flex flex-row-reverse items-center gap-4 p-4 border-t border-[#252B34] h-14">
|
||||
<button class="bg-[#FF9D3D] text-[#0A0D10] font-bold px-6 py-1.5 rounded-sm font-headline font-mono text-[10px] tracking-[0.12em] uppercase active:scale-[0.98] transition-transform">
|
||||
SAVE CHANGES
|
||||
</button>
|
||||
<button class="border border-[#252B34] text-[#9AA4B2] px-6 py-1.5 rounded-sm font-headline font-mono text-[10px] tracking-[0.12em] uppercase hover:border-[#3B4451] hover:text-[#E8ECF1] active:scale-[0.98] transition-transform">
|
||||
CANCEL
|
||||
</button>
|
||||
<div class="mr-auto">
|
||||
<div class="flex items-center gap-2 border border-[#FF9D3D] bg-transparent px-3 py-1 rounded-full">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-[#FF9D3D] animate-pulse"></div>
|
||||
<span class="font-mono text-[9px] text-[#FF9D3D] uppercase font-bold tracking-wider">UNSAVED CHANGES IN TENANT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block">
|
||||
<span class="font-mono text-[9px] text-[#5B6573] uppercase tracking-[0.12em]">SYSTEM STATUS: OPTIMAL // ENCRYPTION AES-256</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Subtle atmosphere: Interactive input highlights
|
||||
const inputs = document.querySelectorAll('input');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('focus', () => {
|
||||
input.parentElement.closest('section').style.borderColor = '#FF9D3D';
|
||||
});
|
||||
input.addEventListener('blur', () => {
|
||||
input.parentElement.closest('section').style.borderColor = '#252B34';
|
||||
});
|
||||
});
|
||||
|
||||
// Simulating unsaved changes logic
|
||||
const originalValues = Array.from(inputs).map(i => i.value);
|
||||
inputs.forEach((input, idx) => {
|
||||
input.addEventListener('input', () => {
|
||||
const statusPill = document.querySelector('.mr-auto .border');
|
||||
if(input.value !== originalValues[idx]) {
|
||||
statusPill.classList.remove('opacity-0');
|
||||
statusPill.classList.add('opacity-100');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
+7
-1
@@ -4,8 +4,14 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AZAION</title>
|
||||
<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"
|
||||
/>
|
||||
</head>
|
||||
<body class="bg-[#1e1e1e] text-[#adb5bd]">
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
@@ -55,6 +55,26 @@ describe('AZ-486 endpoints — wire-contract URLs', () => {
|
||||
// Assert
|
||||
expect(endpoints.admin.class(42)).toBe('/api/admin/classes/42')
|
||||
})
|
||||
|
||||
it('admin.aiSettings', () => {
|
||||
// Assert
|
||||
expect(endpoints.admin.aiSettings()).toBe('/api/admin/ai-settings')
|
||||
})
|
||||
|
||||
it('admin.gpsSettings', () => {
|
||||
// Assert
|
||||
expect(endpoints.admin.gpsSettings()).toBe('/api/admin/gps-settings')
|
||||
})
|
||||
|
||||
it('admin.gpsPing', () => {
|
||||
// Assert
|
||||
expect(endpoints.admin.gpsPing()).toBe('/api/admin/gps-settings/ping')
|
||||
})
|
||||
|
||||
it('admin.gpsReconnect', () => {
|
||||
// Assert
|
||||
expect(endpoints.admin.gpsReconnect()).toBe('/api/admin/gps-settings/reconnect')
|
||||
})
|
||||
})
|
||||
|
||||
describe('AC-1: annotations', () => {
|
||||
|
||||
@@ -33,6 +33,11 @@ export const endpoints = {
|
||||
// DetectionClass.id is `number` in the type system; widened to accept
|
||||
// string for forward-compat if the backend switches the column to UUID.
|
||||
class: (id: string | number) => `/api/admin/classes/${id}`,
|
||||
// v2 admin page — mocked via MSW until the backend lands the endpoints.
|
||||
aiSettings: () => '/api/admin/ai-settings',
|
||||
gpsSettings: () => '/api/admin/gps-settings',
|
||||
gpsPing: () => '/api/admin/gps-settings/ping',
|
||||
gpsReconnect: () => '/api/admin/gps-settings/reconnect',
|
||||
},
|
||||
annotations: {
|
||||
classes: () => '/api/annotations/classes',
|
||||
|
||||
@@ -16,22 +16,6 @@ export function useAuth() {
|
||||
return useContext(AuthContext)
|
||||
}
|
||||
|
||||
// React 18+ StrictMode double-invokes effects in dev (mount → cleanup → mount),
|
||||
// and the backend rotates the refresh cookie on every successful POST. Two
|
||||
// concurrent bootstraps would race the rotation and leave the second one with
|
||||
// a stale cookie. The module-scoped in-flight promise lets the second mount
|
||||
// await the first's network round-trip instead of duplicating it. Risk 4 in
|
||||
// AZ-510 spec.
|
||||
let bootstrapInflight: Promise<AuthUser | null> | null = null
|
||||
|
||||
/**
|
||||
* Test-only hook to clear the module-scoped in-flight bootstrap promise
|
||||
* between Vitest tests. Production never imports this — it exists because
|
||||
* Vitest does not reset module state between tests, so a test that mocks the
|
||||
* bootstrap to never-resolve would otherwise leak a permanently-pending
|
||||
* promise that subsequent tests would await forever. Wired into
|
||||
* `tests/setup.ts` afterEach. Safe-no-op when nothing is in flight.
|
||||
*/
|
||||
export function __resetBootstrapInflightForTests(): void {
|
||||
bootstrapInflight = null
|
||||
}
|
||||
|
||||
+97
-37
@@ -3,17 +3,15 @@ import { useTranslation } from 'react-i18next'
|
||||
import { useAuth } from '../auth'
|
||||
import { useFlight } from './FlightContext'
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import HelpModal from './HelpModal'
|
||||
import type { Flight } from '../types'
|
||||
|
||||
export default function Header() {
|
||||
const { t, i18n } = useTranslation()
|
||||
const { t } = useTranslation()
|
||||
const { user, logout, hasPermission } = useAuth()
|
||||
const { flights, selectedFlight, selectFlight } = useFlight()
|
||||
const navigate = useNavigate()
|
||||
const [showDropdown, setShowDropdown] = useState(false)
|
||||
const [filter, setFilter] = useState('')
|
||||
const [showHelp, setShowHelp] = useState(false)
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -39,25 +37,56 @@ export default function Header() {
|
||||
{ to: '/admin', label: t('nav.admin'), perm: 'ADM' },
|
||||
]
|
||||
|
||||
const toggleLang = () => {
|
||||
i18n.changeLanguage(i18n.language === 'en' ? 'ua' : 'en')
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="flex items-center h-10 bg-az-header border-b border-az-border px-3 gap-3 text-sm shrink-0">
|
||||
<span className="font-bold text-az-orange tracking-wider">AZAION</span>
|
||||
<header
|
||||
className="flex items-center px-4 gap-3 shrink-0"
|
||||
style={{ background: 'var(--surface-1)', borderBottom: '1px solid var(--border-hair)', height: 48 }}
|
||||
>
|
||||
<span
|
||||
className="mono font-bold"
|
||||
style={{ color: 'var(--accent-amber)', letterSpacing: '0.2em', fontSize: 14 }}
|
||||
>
|
||||
AZAION
|
||||
</span>
|
||||
|
||||
<span className="micro" style={{ color: 'var(--text-muted)' }}>//</span>
|
||||
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setShowDropdown(!showDropdown)}
|
||||
className="bg-az-panel border border-az-border rounded px-2 py-0.5 text-az-text hover:border-az-muted min-w-[160px] text-left truncate"
|
||||
className="inline-flex items-center gap-2 mono"
|
||||
style={{
|
||||
height: 28,
|
||||
padding: '0 10px',
|
||||
background: 'var(--surface-1)',
|
||||
border: '1px solid var(--accent-amber)',
|
||||
borderRadius: 2,
|
||||
fontSize: 11,
|
||||
letterSpacing: '0.10em',
|
||||
minWidth: 140,
|
||||
}}
|
||||
>
|
||||
{selectedFlight?.name || '— Select Flight —'}
|
||||
<span
|
||||
className="dot live"
|
||||
style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-cyan)' }}
|
||||
/>
|
||||
<span style={{ color: 'var(--text-primary)' }}>{selectedFlight?.name || '— SELECT —'}</span>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: 10 }}>▾</span>
|
||||
</button>
|
||||
{showDropdown && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-az-panel border border-az-border rounded shadow-lg z-50 w-64">
|
||||
<div
|
||||
className="absolute top-full left-0 mt-1 shadow-lg z-50 w-64"
|
||||
style={{ background: 'var(--surface-1)', border: '1px solid var(--border-hair)', borderRadius: 2 }}
|
||||
>
|
||||
<input
|
||||
className="w-full bg-az-bg border-b border-az-border px-2 py-1 text-az-text text-sm outline-none"
|
||||
className="w-full outline-none"
|
||||
style={{
|
||||
background: 'var(--surface-input)',
|
||||
borderBottom: '1px solid var(--border-hair)',
|
||||
color: 'var(--text-primary)',
|
||||
padding: '6px 10px',
|
||||
fontSize: 12,
|
||||
}}
|
||||
placeholder="Filter..."
|
||||
value={filter}
|
||||
onChange={e => setFilter(e.target.value)}
|
||||
@@ -68,66 +97,97 @@ export default function Header() {
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => { selectFlight(f); setShowDropdown(false); setFilter('') }}
|
||||
className={`w-full text-left px-2 py-1 hover:bg-az-bg text-az-text text-sm ${
|
||||
selectedFlight?.id === f.id ? 'bg-az-bg font-semibold' : ''
|
||||
}`}
|
||||
className="w-full text-left"
|
||||
style={{
|
||||
padding: '6px 10px',
|
||||
background: selectedFlight?.id === f.id ? 'var(--surface-2)' : 'transparent',
|
||||
color: 'var(--text-primary)',
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
<div>{f.name}</div>
|
||||
<div className="text-xs text-az-muted">{new Date(f.createdDate).toLocaleDateString()}</div>
|
||||
<div className="mono tnum" style={{ fontSize: 10, color: 'var(--text-muted)' }}>
|
||||
{new Date(f.createdDate).toLocaleDateString()}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{filtered.length === 0 && (
|
||||
<div className="px-2 py-2 text-az-muted text-xs">No flights</div>
|
||||
<div className="micro" style={{ padding: '8px 10px' }}>No flights</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<nav className="hidden sm:flex items-center gap-1 ml-2">
|
||||
<nav className="hidden sm:flex items-center self-stretch ml-3">
|
||||
{navItems.filter(n => hasPermission(n.perm)).map(n => (
|
||||
<NavLink
|
||||
key={n.to}
|
||||
to={n.to}
|
||||
className={({ isActive }) =>
|
||||
`px-2 py-1 rounded text-sm ${isActive ? 'bg-az-bg font-semibold text-white' : 'text-az-text hover:text-white'}`
|
||||
}
|
||||
className={({ isActive }) => `tab${isActive ? ' active' : ''}`}
|
||||
>
|
||||
{n.label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<span className="text-xs text-az-muted hidden sm:block">{user?.email}</span>
|
||||
<button onClick={toggleLang} className="text-xs text-az-muted hover:text-white px-1">
|
||||
{i18n.language === 'en' ? 'UA' : 'EN'}
|
||||
</button>
|
||||
<button onClick={() => setShowHelp(true)} className="text-az-muted hover:text-white text-xs">?</button>
|
||||
<NavLink to="/settings" className="text-az-muted hover:text-white">⚙</NavLink>
|
||||
<button onClick={handleLogout} className="text-az-muted hover:text-az-red text-xs">
|
||||
{t('nav.logout')}
|
||||
</button>
|
||||
<div className="flex items-center gap-2 ml-auto micro">
|
||||
<span
|
||||
className="dot live"
|
||||
style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-cyan)' }}
|
||||
/>
|
||||
<span style={{ color: 'var(--accent-cyan)' }}>LINK</span>
|
||||
<span style={{ color: 'var(--border-raised)' }}>|</span>
|
||||
<span
|
||||
className="hidden md:inline"
|
||||
style={{ color: 'var(--text-secondary)', textTransform: 'none', letterSpacing: 0 }}
|
||||
>
|
||||
{user?.email}
|
||||
</span>
|
||||
<span style={{ color: 'var(--border-raised)', margin: '0 4px' }} className="hidden md:inline">|</span>
|
||||
<NavLink to="/settings" className="ibtn" aria-label={t('nav.settings')} title={t('nav.settings')}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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>
|
||||
</NavLink>
|
||||
<button onClick={handleLogout} className="ibtn danger" aria-label={t('nav.logout')} title={t('nav.logout')}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile bottom nav */}
|
||||
<nav className="sm:hidden fixed bottom-0 left-0 right-0 bg-az-header border-t border-az-border flex justify-around py-1.5 z-50">
|
||||
<nav
|
||||
className="sm:hidden fixed bottom-0 left-0 right-0 flex justify-around z-50"
|
||||
style={{ background: 'var(--surface-1)', borderTop: '1px solid var(--border-hair)', padding: '6px 0' }}
|
||||
>
|
||||
{navItems.filter(n => hasPermission(n.perm)).map(n => (
|
||||
<NavLink
|
||||
key={n.to}
|
||||
to={n.to}
|
||||
className={({ isActive }) =>
|
||||
`text-xs px-2 py-1 ${isActive ? 'text-az-orange font-semibold' : 'text-az-muted'}`
|
||||
`micro px-2 py-1 ${isActive ? '' : ''}`
|
||||
}
|
||||
style={({ isActive }) => ({
|
||||
color: isActive ? 'var(--accent-amber)' : 'var(--text-muted)',
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
})}
|
||||
>
|
||||
{n.label}
|
||||
</NavLink>
|
||||
))}
|
||||
<NavLink to="/settings" className={({ isActive }) => `text-xs px-2 py-1 ${isActive ? 'text-az-orange' : 'text-az-muted'}`}>
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className="micro px-2 py-1"
|
||||
style={({ isActive }) => ({ color: isActive ? 'var(--accent-amber)' : 'var(--text-muted)' })}
|
||||
>
|
||||
⚙
|
||||
</NavLink>
|
||||
</nav>
|
||||
<HelpModal open={showHelp} onClose={() => setShowHelp(false)} />
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
+626
-229
@@ -1,39 +1,137 @@
|
||||
import { useState, useEffect, type KeyboardEvent } from 'react'
|
||||
import { useState, useEffect, useMemo, type KeyboardEvent } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { api, endpoints } from '../../api'
|
||||
import { ConfirmDialog } from '../../components'
|
||||
import type { DetectionClass, Aircraft, User } from '../../types'
|
||||
import type { DetectionClass, Aircraft, GpsProtocol } from '../../types'
|
||||
import { useAiSettings } from './useAiSettings'
|
||||
import { useGpsSettings } from './useGpsSettings'
|
||||
import { Modal } from './Modal'
|
||||
import { NumberStepper } from './NumberStepper'
|
||||
import { ClassEditRow } from './ClassEditRow'
|
||||
|
||||
type EditForm = { name: string; shortName: string; color: string; maxSizeM: number }
|
||||
type EditErrorKind = 'nameRequired' | 'maxSizeMustBePositive' | 'updateFailed'
|
||||
type EditErrorKind = 'nameRequired' | 'updateFailed'
|
||||
// editingId === ADDING_ID switches Save from PATCH to POST.
|
||||
const ADDING_ID = -1
|
||||
const NEW_CLASS_DEFAULTS: EditForm = { name: '', shortName: '', color: '#FF9D3D', maxSizeM: 7 }
|
||||
|
||||
type AircraftDraft = {
|
||||
model: string
|
||||
type: Aircraft['type']
|
||||
resolution: string
|
||||
maxMinutes: number
|
||||
isDefault: boolean
|
||||
}
|
||||
const NEW_AIRCRAFT_DEFAULTS: AircraftDraft = {
|
||||
model: '', type: 'Copter', resolution: '4K', maxMinutes: 30, isDefault: false,
|
||||
}
|
||||
const AIRCRAFT_TYPES = ['Plane', 'Copter', 'FixedWing'] as const
|
||||
|
||||
const PROTOCOLS: GpsProtocol[] = ['NMEA', 'UBX', 'MAVLINK']
|
||||
const RESOLUTIONS = ['HD', '1080P', '4K', '6K'] as const
|
||||
const FALLBACK = '—'
|
||||
|
||||
const TYPE_COLORS: Record<Aircraft['type'], string> = {
|
||||
Plane: 'var(--accent-blue)',
|
||||
Copter: 'var(--accent-green)',
|
||||
FixedWing: 'var(--accent-amber)',
|
||||
}
|
||||
const TYPE_LETTERS: Record<Aircraft['type'], 'P' | 'C' | 'F'> = {
|
||||
Plane: 'P', Copter: 'C', FixedWing: 'F',
|
||||
}
|
||||
const TYPE_LEGEND_KEY: Record<Aircraft['type'], 'legendPlane' | 'legendCopter' | 'legendFixedW'> = {
|
||||
Plane: 'legendPlane', Copter: 'legendCopter', FixedWing: 'legendFixedW',
|
||||
}
|
||||
|
||||
function PencilIcon() {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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>
|
||||
)
|
||||
}
|
||||
function CloseIcon() {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
function StarIcon({ filled }: { filled: boolean }) {
|
||||
return (
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth={filled ? 1 : 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>
|
||||
)
|
||||
}
|
||||
|
||||
function formatRunTime(iso: string | null): string {
|
||||
if (!iso) return FALLBACK
|
||||
// HH:MM:SSZ rendering, mockup-style.
|
||||
const m = iso.match(/T(\d{2}:\d{2}:\d{2})/)
|
||||
return m ? `${m[1]}Z` : FALLBACK
|
||||
}
|
||||
|
||||
|
||||
export default function AdminPage() {
|
||||
const { t } = useTranslation()
|
||||
const [classes, setClasses] = useState<DetectionClass[]>([])
|
||||
const [aircrafts, setAircrafts] = useState<Aircraft[]>([])
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
const [newClass, setNewClass] = useState({ name: '', shortName: '', color: '#FF0000', maxSizeM: 7 })
|
||||
const [newUser, setNewUser] = useState({ name: '', email: '', password: '', role: 'Annotator' })
|
||||
const [deactivateId, setDeactivateId] = useState<string | null>(null)
|
||||
// AZ-512 — inline edit state. Single `editingId` (not per-row) so opening
|
||||
// one row's editor implicitly closes any other (Risk 3 mitigation).
|
||||
const [classFilter, setClassFilter] = useState('')
|
||||
const [editingId, setEditingId] = useState<number | null>(null)
|
||||
const [editForm, setEditForm] = useState<EditForm>({ name: '', shortName: '', color: '#FF0000', maxSizeM: 0 })
|
||||
const [editForm, setEditForm] = useState<EditForm>(NEW_CLASS_DEFAULTS)
|
||||
const [editError, setEditError] = useState<EditErrorKind | null>(null)
|
||||
const [editSaving, setEditSaving] = useState(false)
|
||||
|
||||
const [aircraftModalOpen, setAircraftModalOpen] = useState(false)
|
||||
const [aircraftDraft, setAircraftDraft] = useState<AircraftDraft>(NEW_AIRCRAFT_DEFAULTS)
|
||||
const [aircraftSaving, setAircraftSaving] = useState(false)
|
||||
const [aircraftError, setAircraftError] = useState<string | null>(null)
|
||||
|
||||
const openAircraftModal = () => {
|
||||
setAircraftDraft(NEW_AIRCRAFT_DEFAULTS)
|
||||
setAircraftError(null)
|
||||
setAircraftModalOpen(true)
|
||||
}
|
||||
const closeAircraftModal = () => {
|
||||
if (aircraftSaving) return
|
||||
setAircraftModalOpen(false)
|
||||
}
|
||||
const saveAircraft = async () => {
|
||||
if (!aircraftDraft.model.trim()) { setAircraftError('modelRequired'); return }
|
||||
setAircraftError(null)
|
||||
setAircraftSaving(true)
|
||||
try {
|
||||
const created = await api.post<Aircraft>(endpoints.flights.aircrafts(), aircraftDraft)
|
||||
setAircrafts(prev => [...prev, created])
|
||||
setAircraftModalOpen(false)
|
||||
} catch {
|
||||
setAircraftError('saveFailed')
|
||||
} finally {
|
||||
setAircraftSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const ai = useAiSettings()
|
||||
const gps = useGpsSettings()
|
||||
|
||||
useEffect(() => {
|
||||
api.get<DetectionClass[]>(endpoints.annotations.classes()).then(setClasses).catch(() => {})
|
||||
api.get<Aircraft[]>(endpoints.flights.aircrafts()).then(setAircrafts).catch(() => {})
|
||||
api.get<User[]>(endpoints.admin.users()).then(setUsers).catch(() => {})
|
||||
}, [])
|
||||
|
||||
const handleAddClass = async () => {
|
||||
if (!newClass.name) return
|
||||
await api.post(endpoints.admin.classes(), newClass)
|
||||
const updated = await api.get<DetectionClass[]>(endpoints.annotations.classes())
|
||||
setClasses(updated)
|
||||
setNewClass({ name: '', shortName: '', color: '#FF0000', maxSizeM: 7 })
|
||||
const filteredClasses = useMemo(() => {
|
||||
const q = classFilter.trim().toLowerCase()
|
||||
if (!q) return classes
|
||||
return classes.filter(c => c.name.toLowerCase().includes(q))
|
||||
}, [classes, classFilter])
|
||||
|
||||
const handleStartAdd = () => {
|
||||
setEditingId(ADDING_ID)
|
||||
setEditForm({ ...NEW_CLASS_DEFAULTS })
|
||||
setEditError(null)
|
||||
setEditSaving(false)
|
||||
}
|
||||
|
||||
const handleDeleteClass = async (id: number) => {
|
||||
@@ -54,18 +152,19 @@ export default function AdminPage() {
|
||||
setEditSaving(false)
|
||||
}
|
||||
|
||||
const handleUpdateClass = async () => {
|
||||
const handleSaveClass = async () => {
|
||||
if (editingId === null || editSaving) return
|
||||
if (!editForm.name.trim()) { setEditError('nameRequired'); return }
|
||||
if (!(editForm.maxSizeM > 0)) { setEditError('maxSizeMustBePositive'); return }
|
||||
setEditError(null)
|
||||
setEditSaving(true)
|
||||
try {
|
||||
// Risk 2 mitigation — always send the complete form so backend PATCH
|
||||
// semantics (full-replace vs partial-merge) don't matter.
|
||||
await api.patch(endpoints.admin.class(editingId), editForm)
|
||||
const updated = await api.get<DetectionClass[]>(endpoints.annotations.classes())
|
||||
setClasses(updated)
|
||||
if (editingId === ADDING_ID) {
|
||||
const created = await api.post<DetectionClass>(endpoints.admin.classes(), editForm)
|
||||
setClasses(prev => [...prev, created])
|
||||
} else {
|
||||
const updated = await api.patch<DetectionClass>(endpoints.admin.class(editingId), editForm)
|
||||
setClasses(prev => prev.map(c => c.id === editingId ? updated : c))
|
||||
}
|
||||
setEditingId(null)
|
||||
} catch {
|
||||
setEditError('updateFailed')
|
||||
@@ -75,244 +174,542 @@ export default function AdminPage() {
|
||||
}
|
||||
|
||||
const handleEditKeyDown = (e: KeyboardEvent<HTMLElement>) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); void handleUpdateClass() }
|
||||
if (e.key === 'Enter') { e.preventDefault(); void handleSaveClass() }
|
||||
else if (e.key === 'Escape') { e.preventDefault(); handleCancelEdit() }
|
||||
}
|
||||
|
||||
const handleAddUser = async () => {
|
||||
if (!newUser.email || !newUser.password) return
|
||||
await api.post(endpoints.admin.users(), newUser)
|
||||
const updated = await api.get<User[]>(endpoints.admin.users())
|
||||
setUsers(updated)
|
||||
setNewUser({ name: '', email: '', password: '', role: 'Annotator' })
|
||||
}
|
||||
|
||||
const handleDeactivate = async () => {
|
||||
if (!deactivateId) return
|
||||
await api.patch(endpoints.admin.user(deactivateId), { isActive: false })
|
||||
setUsers(prev => prev.map(u => u.id === deactivateId ? { ...u, isActive: false } : u))
|
||||
setDeactivateId(null)
|
||||
}
|
||||
|
||||
const handleToggleDefault = async (a: Aircraft) => {
|
||||
await api.patch(endpoints.flights.aircraft(a.id), { isDefault: !a.isDefault })
|
||||
setAircrafts(prev => prev.map(x => x.id === a.id ? { ...x, isDefault: !x.isDefault } : x))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full overflow-y-auto p-4 gap-4">
|
||||
{/* Detection classes */}
|
||||
<div className="w-[340px] shrink-0">
|
||||
<h2 className="text-sm font-semibold text-white mb-2">{t('admin.classes.title')}</h2>
|
||||
<div className="bg-az-panel border border-az-border rounded overflow-hidden">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-az-border text-az-muted">
|
||||
<th className="px-2 py-1 text-left">#</th>
|
||||
<th className="px-2 py-1 text-left">Name</th>
|
||||
<th className="px-2 py-1">Color</th>
|
||||
<th className="px-2 py-1"></th>
|
||||
<main className="flex h-full overflow-hidden" style={{ background: 'var(--surface-0)' }}>
|
||||
|
||||
{/* ===== LEFT: DETECTION CLASSES (340px) ===== */}
|
||||
<aside
|
||||
className="shrink-0 flex flex-col"
|
||||
style={{ width: 340, background: 'var(--surface-1)', borderRight: '1px solid var(--border-hair)' }}
|
||||
>
|
||||
<div
|
||||
className="px-4 pt-4 pb-3 flex items-center justify-between"
|
||||
style={{ borderBottom: '1px solid var(--border-hair)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="sect-head">{t('admin.classes.title')}</span>
|
||||
<span className="mono tnum" style={{ fontSize: 10, color: 'var(--text-muted)' }}>
|
||||
[{String(classes.length).padStart(2, '0')}]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search + Add */}
|
||||
<div
|
||||
className="px-4 py-3 flex items-center gap-2"
|
||||
style={{ borderBottom: '1px solid var(--border-hair)' }}
|
||||
>
|
||||
<div className="relative flex-1">
|
||||
<svg className="absolute left-2 top-1/2 -translate-y-1/2" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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={t('admin.classes.search')}
|
||||
className="inp"
|
||||
value={classFilter}
|
||||
onChange={e => setClassFilter(e.target.value)}
|
||||
style={{ paddingLeft: 26, height: 28, fontSize: 11 }}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleStartAdd}
|
||||
type="button"
|
||||
disabled={editingId === ADDING_ID}
|
||||
>
|
||||
<span>{t('admin.classes.add')}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<table className="w-full tabular">
|
||||
<thead className="sticky top-0" style={{ background: 'var(--surface-1)' }}>
|
||||
<tr style={{ borderBottom: '1px solid var(--border-hair)' }}>
|
||||
<th className="text-left px-3 py-2 micro" style={{ width: 36 }}>#</th>
|
||||
<th className="text-left px-2 py-2 micro">{t('admin.classes.colName')}</th>
|
||||
<th className="text-center px-2 py-2 micro" style={{ width: 30 }}>{t('admin.classes.colHex')}</th>
|
||||
<th className="text-right px-3 py-2 micro" style={{ width: 60 }}>{t('admin.classes.colOps')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{classes.map(c => c.id === editingId ? (
|
||||
<tr key={c.id} className="border-b border-az-border text-az-text bg-az-bg/40" data-editing-row={c.id}>
|
||||
<td className="px-2 py-1 align-top">{c.id}</td>
|
||||
<td colSpan={3} className="px-2 py-1">
|
||||
<div className="flex flex-wrap gap-1 items-center" onKeyDown={handleEditKeyDown}>
|
||||
<input
|
||||
autoFocus
|
||||
data-field="name"
|
||||
value={editForm.name}
|
||||
onChange={e => setEditForm(p => ({ ...p, name: e.target.value }))}
|
||||
className="flex-1 min-w-[80px] bg-az-bg border border-az-border rounded px-1 py-0.5 text-az-text"
|
||||
/>
|
||||
<input
|
||||
data-field="shortName"
|
||||
value={editForm.shortName}
|
||||
onChange={e => setEditForm(p => ({ ...p, shortName: e.target.value }))}
|
||||
className="w-12 bg-az-bg border border-az-border rounded px-1 py-0.5 text-az-text"
|
||||
/>
|
||||
<input
|
||||
type="color"
|
||||
data-field="color"
|
||||
value={editForm.color}
|
||||
onChange={e => setEditForm(p => ({ ...p, color: e.target.value }))}
|
||||
className="w-7 h-6 border-0 bg-transparent cursor-pointer"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
data-field="maxSizeM"
|
||||
value={editForm.maxSizeM}
|
||||
onChange={e => setEditForm(p => ({ ...p, maxSizeM: Number(e.target.value) }))}
|
||||
className="w-14 bg-az-bg border border-az-border rounded px-1 py-0.5 text-az-text"
|
||||
/>
|
||||
<button
|
||||
onClick={() => void handleUpdateClass()}
|
||||
disabled={editSaving}
|
||||
className="bg-az-orange text-white px-2 py-0.5 rounded disabled:opacity-50"
|
||||
>
|
||||
{t('admin.classes.save')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelEdit}
|
||||
disabled={editSaving}
|
||||
className="bg-az-bg border border-az-border text-az-text px-2 py-0.5 rounded disabled:opacity-50"
|
||||
>
|
||||
{t('admin.classes.cancel')}
|
||||
</button>
|
||||
</div>
|
||||
{editError && (
|
||||
<div role="alert" className="mt-1 text-az-red">
|
||||
{t(`admin.classes.${editError}`)}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
{editingId === ADDING_ID && (
|
||||
<ClassEditRow
|
||||
idCell="+"
|
||||
rowId="new"
|
||||
form={editForm}
|
||||
onChange={setEditForm}
|
||||
onSave={() => void handleSaveClass()}
|
||||
onCancel={handleCancelEdit}
|
||||
onKeyDown={handleEditKeyDown}
|
||||
saving={editSaving}
|
||||
errorMessage={editError ? t(`admin.classes.${editError}`) : null}
|
||||
placeholderName="Name"
|
||||
/>
|
||||
)}
|
||||
{filteredClasses.map(c => c.id === editingId ? (
|
||||
<ClassEditRow
|
||||
key={c.id}
|
||||
idCell={c.id}
|
||||
rowId={c.id}
|
||||
form={editForm}
|
||||
onChange={setEditForm}
|
||||
onSave={() => void handleSaveClass()}
|
||||
onCancel={handleCancelEdit}
|
||||
onKeyDown={handleEditKeyDown}
|
||||
saving={editSaving}
|
||||
errorMessage={editError ? t(`admin.classes.${editError}`) : null}
|
||||
/>
|
||||
) : (
|
||||
<tr key={c.id} className="border-b border-az-border text-az-text">
|
||||
<td className="px-2 py-1">{c.id}</td>
|
||||
<td className="px-2 py-1">{c.name}</td>
|
||||
<td className="px-2 py-1 text-center"><span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: c.color }} /></td>
|
||||
<td className="px-2 py-1 text-right whitespace-nowrap">
|
||||
<button
|
||||
onClick={() => handleStartEdit(c)}
|
||||
aria-label={t('admin.classes.edit')}
|
||||
className="text-az-muted hover:text-az-orange mr-1"
|
||||
>
|
||||
{'\u270E'}
|
||||
</button>
|
||||
<button onClick={() => handleDeleteClass(c.id)} className="text-az-muted hover:text-az-red">×</button>
|
||||
<tr key={c.id} className="row-hover" style={{ borderBottom: '1px solid var(--border-hair)', height: 32 }}>
|
||||
<td className="px-3 mono tnum" style={{ color: 'var(--text-muted)', fontSize: 12 }}>{c.id}</td>
|
||||
<td className="px-2"><span style={{ fontSize: 12 }}>{c.name}</span></td>
|
||||
<td className="px-2 text-center"><span className="swatch" style={{ background: c.color }} /></td>
|
||||
<td className="px-3 text-right">
|
||||
<span className="reveal inline-flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleStartEdit(c)}
|
||||
className="ibtn edit"
|
||||
aria-label={t('admin.classes.edit')}
|
||||
title={t('admin.classes.edit')}
|
||||
>
|
||||
<PencilIcon />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDeleteClass(c.id)}
|
||||
className="ibtn danger"
|
||||
aria-label="×"
|
||||
title={t('admin.classes.delete')}
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="p-2 flex gap-1 border-t border-az-border">
|
||||
<input value={newClass.name} onChange={e => setNewClass(p => ({ ...p, name: e.target.value }))} placeholder="Name" className="flex-1 bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text" />
|
||||
<input type="color" value={newClass.color} onChange={e => setNewClass(p => ({ ...p, color: e.target.value }))} className="w-8 h-7 border-0 bg-transparent cursor-pointer" />
|
||||
<button onClick={handleAddClass} className="bg-az-orange text-white text-xs px-2 py-1 rounded">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Center: AI + GPS settings */}
|
||||
<div className="flex-1 space-y-4 max-w-md">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-white mb-2">{t('admin.aiSettings')}</h2>
|
||||
<div className="bg-az-panel border border-az-border rounded p-3 space-y-2 text-xs">
|
||||
<div>
|
||||
<label className="text-az-muted">Frame Period Recognition</label>
|
||||
<input type="number" defaultValue={5} className="w-full bg-az-bg border border-az-border rounded px-2 py-1 mt-0.5 text-az-text" />
|
||||
{/* ===== CENTER ===== */}
|
||||
<section className="flex-1 overflow-y-auto grid-bg">
|
||||
<div className="max-w-[920px] mx-auto p-6 space-y-6">
|
||||
|
||||
{/* AI RECOGNITION ENGINE */}
|
||||
<div>
|
||||
<div className="flex items-end justify-between mb-3">
|
||||
<div>
|
||||
<div className="sect-head">{t('admin.aiEngine.title')}</div>
|
||||
<div className="hint mt-1">{t('admin.aiEngine.subtitle')}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 micro">
|
||||
<span style={{ color: 'var(--text-muted)' }}>{t('admin.aiEngine.model')}</span>
|
||||
<span className="mono tnum" style={{ color: 'var(--text-primary)' }}>
|
||||
{ai.telemetry ? `${ai.telemetry.model} · ${ai.telemetry.checkpoint}` : FALLBACK}
|
||||
</span>
|
||||
<span className="pill pill-cyan"><span className="dot live" />{t('admin.aiEngine.loaded')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-az-muted">Frame Recognition Seconds</label>
|
||||
<input type="number" defaultValue={1} className="w-full bg-az-bg border border-az-border rounded px-2 py-1 mt-0.5 text-az-text" />
|
||||
|
||||
<div className="bracket panel p-5">
|
||||
<span className="br" />
|
||||
|
||||
<div className="grid grid-cols-3 gap-x-6 gap-y-4">
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.aiEngine.framesToRecognize')}</label>
|
||||
<div className="hint mb-2">{t('admin.aiEngine.framesHint')}</div>
|
||||
<NumberStepper
|
||||
value={ai.draft.framesToRecognize}
|
||||
min={1}
|
||||
step={1}
|
||||
suffix={t('admin.aiEngine.unitFR')}
|
||||
onChange={v => ai.setDraft({ ...ai.draft, framesToRecognize: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.aiEngine.minSeconds')}</label>
|
||||
<div className="hint mb-2">{t('admin.aiEngine.minSecondsHint')}</div>
|
||||
<NumberStepper
|
||||
value={ai.draft.minSecondsBetween}
|
||||
min={0}
|
||||
step={1}
|
||||
suffix={t('admin.aiEngine.unitSec')}
|
||||
onChange={v => ai.setDraft({ ...ai.draft, minSecondsBetween: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.aiEngine.minConfidence')}</label>
|
||||
<div className="hint mb-2">{t('admin.aiEngine.minConfidenceHint')}</div>
|
||||
<NumberStepper
|
||||
value={ai.draft.minConfidence}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
suffix="%"
|
||||
onChange={v => ai.setDraft({ ...ai.draft, minConfidence: v })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-5 pt-4 flex items-center justify-between"
|
||||
style={{ borderTop: '1px dashed var(--border-hair)' }}
|
||||
>
|
||||
<div className="flex items-center gap-5 micro">
|
||||
<span style={{ color: 'var(--text-muted)' }}>
|
||||
{t('admin.aiEngine.lastRun')}{' '}
|
||||
<span className="mono tnum" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formatRunTime(ai.telemetry?.lastRunAt ?? null)}
|
||||
</span>
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-muted)' }}>
|
||||
{t('admin.aiEngine.frames')}{' '}
|
||||
<span className="mono tnum" style={{ color: 'var(--text-secondary)' }}>
|
||||
{ai.telemetry ? ai.telemetry.frames.toLocaleString() : FALLBACK}
|
||||
</span>
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-muted)' }}>
|
||||
{t('admin.aiEngine.avgConf')}{' '}
|
||||
<span className="mono tnum" style={{ color: 'var(--accent-green)' }}>
|
||||
{ai.telemetry ? `${ai.telemetry.avgConfidence.toFixed(1)}%` : FALLBACK}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button type="button" className="btn btn-ghost" onClick={ai.reset}>
|
||||
{t('admin.aiEngine.reset')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => void ai.save()}
|
||||
disabled={ai.status === 'saving'}
|
||||
>
|
||||
{t('admin.aiEngine.apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ai.error && (
|
||||
<div role="alert" className="mt-2" style={{ color: 'var(--accent-red)', fontSize: 11 }}>
|
||||
{ai.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-az-muted">Probability Threshold</label>
|
||||
<input type="number" defaultValue={0.5} step={0.05} min={0} max={1} className="w-full bg-az-bg border border-az-border rounded px-2 py-1 mt-0.5 text-az-text" />
|
||||
</div>
|
||||
<button className="bg-az-orange text-white text-xs px-3 py-1 rounded">{t('common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-white mb-2">{t('admin.gpsSettings')}</h2>
|
||||
<div className="bg-az-panel border border-az-border rounded p-3 space-y-2 text-xs">
|
||||
<div>
|
||||
<label className="text-az-muted">Device Address</label>
|
||||
<input defaultValue="192.168.1.100" className="w-full bg-az-bg border border-az-border rounded px-2 py-1 mt-0.5 text-az-text" />
|
||||
{/* GPS DEVICE LINK */}
|
||||
<div>
|
||||
<div className="flex items-end justify-between mb-3">
|
||||
<div>
|
||||
<div className="sect-head">{t('admin.gpsDevice.title')}</div>
|
||||
<div className="hint mt-1">{t('admin.gpsDevice.subtitle')}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 micro">
|
||||
<span style={{ color: 'var(--text-muted)' }}>{t('admin.gpsDevice.socket')}</span>
|
||||
<span className="mono tnum" style={{ color: 'var(--text-primary)' }}>
|
||||
{gps.telemetry?.socket ?? FALLBACK}
|
||||
</span>
|
||||
<span className={`pill ${gps.telemetry?.connected ? 'pill-green' : 'pill-red'}`}>
|
||||
<span className="dot" />
|
||||
{t('admin.gpsDevice.connected')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-az-muted">Port</label>
|
||||
<input type="number" defaultValue={5535} className="w-full bg-az-bg border border-az-border rounded px-2 py-1 mt-0.5 text-az-text" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-az-muted">Protocol</label>
|
||||
<select className="w-full bg-az-bg border border-az-border rounded px-2 py-1 mt-0.5 text-az-text">
|
||||
<option>TCP</option>
|
||||
<option>UDP</option>
|
||||
</select>
|
||||
</div>
|
||||
<button className="bg-az-orange text-white text-xs px-3 py-1 rounded">{t('common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Users */}
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-white mb-2">{t('admin.users')}</h2>
|
||||
<div className="bg-az-panel border border-az-border rounded overflow-hidden">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-az-border text-az-muted">
|
||||
<th className="px-2 py-1 text-left">Name</th>
|
||||
<th className="px-2 py-1 text-left">Email</th>
|
||||
<th className="px-2 py-1">Role</th>
|
||||
<th className="px-2 py-1">Status</th>
|
||||
<th className="px-2 py-1"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map(u => (
|
||||
<tr key={u.id} className="border-b border-az-border text-az-text">
|
||||
<td className="px-2 py-1">{u.name}</td>
|
||||
<td className="px-2 py-1">{u.email}</td>
|
||||
<td className="px-2 py-1 text-center">{u.role}</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span className={`px-1 rounded ${u.isActive ? 'text-az-green' : 'text-az-red'}`}>
|
||||
{u.isActive ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1">
|
||||
{u.isActive && (
|
||||
<button onClick={() => setDeactivateId(u.id)} className="text-az-muted hover:text-az-red text-xs">
|
||||
{t('admin.deactivate')}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="p-2 flex gap-1 border-t border-az-border">
|
||||
<input value={newUser.name} onChange={e => setNewUser(p => ({ ...p, name: e.target.value }))} placeholder="Name" className="flex-1 bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text" />
|
||||
<input value={newUser.email} onChange={e => setNewUser(p => ({ ...p, email: e.target.value }))} placeholder="Email" className="flex-1 bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text" />
|
||||
<input value={newUser.password} onChange={e => setNewUser(p => ({ ...p, password: e.target.value }))} placeholder="Password" type="password" className="flex-1 bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text" />
|
||||
<select value={newUser.role} onChange={e => setNewUser(p => ({ ...p, role: e.target.value }))} className="bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text">
|
||||
<option>Annotator</option>
|
||||
<option>Admin</option>
|
||||
<option>Viewer</option>
|
||||
</select>
|
||||
<button onClick={handleAddUser} className="bg-az-orange text-white text-xs px-2 py-1 rounded">+</button>
|
||||
<div className="bracket panel p-5">
|
||||
<span className="br" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.gpsDevice.address')}</label>
|
||||
<div className="hint mb-2">{t('admin.gpsDevice.addressHint')}</div>
|
||||
<input
|
||||
className="inp inp-mono"
|
||||
value={gps.draft.address}
|
||||
placeholder="0.0.0.0"
|
||||
onChange={e => gps.setDraft({ ...gps.draft, address: e.target.value })}
|
||||
aria-label={t('admin.gpsDevice.address')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.gpsDevice.port')}</label>
|
||||
<div className="hint mb-2">{t('admin.gpsDevice.portHint')}</div>
|
||||
<input
|
||||
className="inp inp-mono"
|
||||
type="number"
|
||||
value={gps.draft.port}
|
||||
onChange={e => gps.setDraft({ ...gps.draft, port: Number(e.target.value) })}
|
||||
style={{ textAlign: 'right' }}
|
||||
aria-label={t('admin.gpsDevice.port')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<label className="micro block mb-1">{t('admin.gpsDevice.protocol')}</label>
|
||||
<div className="hint mb-2">{t('admin.gpsDevice.protocolHint')}</div>
|
||||
<div className="seg" role="group" aria-label={t('admin.gpsDevice.protocol')}>
|
||||
{PROTOCOLS.map(p => (
|
||||
<button
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => gps.setDraft({ ...gps.draft, protocol: p })}
|
||||
className={`seg-btn${gps.draft.protocol === p ? ' active' : ''}`}
|
||||
aria-pressed={gps.draft.protocol === p}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-5 pt-4 flex items-center justify-between"
|
||||
style={{ borderTop: '1px dashed var(--border-hair)' }}
|
||||
>
|
||||
<div className="flex items-center gap-5 micro">
|
||||
<span style={{ color: 'var(--text-muted)' }}>
|
||||
{t('admin.gpsDevice.fix')}{' '}
|
||||
<span className="mono tnum" style={{ color: 'var(--accent-green)' }}>
|
||||
{gps.telemetry ? `${gps.telemetry.fix} · ${gps.telemetry.satellites} SAT` : FALLBACK}
|
||||
</span>
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-muted)' }}>
|
||||
{t('admin.gpsDevice.hdop')}{' '}
|
||||
<span className="mono tnum" style={{ color: 'var(--text-secondary)' }}>
|
||||
{gps.telemetry ? gps.telemetry.hdop.toFixed(2) : FALLBACK}
|
||||
</span>
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-muted)' }}>
|
||||
{t('admin.gpsDevice.lastPkt')}{' '}
|
||||
<span className="mono tnum" style={{ color: 'var(--text-secondary)' }}>
|
||||
{gps.telemetry ? `+${gps.telemetry.lastPacketMs}ms` : FALLBACK}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button type="button" className="btn btn-ghost" onClick={() => void gps.ping()} disabled={gps.status === 'pinging'}>
|
||||
{t('admin.gpsDevice.ping')}
|
||||
</button>
|
||||
<button type="button" className="btn btn-secondary" onClick={() => void gps.reconnect()} disabled={gps.status === 'reconnecting'}>
|
||||
{t('admin.gpsDevice.reconnect')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => void gps.save()}
|
||||
disabled={gps.status === 'saving'}
|
||||
>
|
||||
{t('admin.gpsDevice.apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{gps.error && (
|
||||
<div role="alert" className="mt-2" style={{ color: 'var(--accent-red)', fontSize: 11 }}>
|
||||
{gps.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Aircrafts sidebar */}
|
||||
<div className="w-[280px] shrink-0">
|
||||
<h2 className="text-sm font-semibold text-white mb-2">{t('admin.aircrafts')}</h2>
|
||||
<div className="bg-az-panel border border-az-border rounded p-2 space-y-1">
|
||||
{/* ===== RIGHT: DEFAULT AIRCRAFTS (280px) ===== */}
|
||||
<aside
|
||||
className="shrink-0 flex flex-col"
|
||||
style={{ width: 280, background: 'var(--surface-1)', borderLeft: '1px solid var(--border-hair)' }}
|
||||
>
|
||||
<div
|
||||
className="px-4 pt-4 pb-3 flex items-center justify-between"
|
||||
style={{ borderBottom: '1px solid var(--border-hair)' }}
|
||||
>
|
||||
<span className="sect-head">{t('admin.aircrafts.title')}</span>
|
||||
<span className="mono tnum" style={{ fontSize: 10, color: 'var(--text-muted)' }}>
|
||||
[{String(aircrafts.length).padStart(2, '0')}]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="px-4 py-2.5 flex items-center gap-3 micro"
|
||||
style={{ borderBottom: '1px solid var(--border-hair)', background: 'var(--surface-0)' }}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="type-sq" style={{ background: TYPE_COLORS.Plane }}>P</span>
|
||||
<span style={{ color: 'var(--text-muted)' }}>{t('admin.aircrafts.legendPlane')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="type-sq" style={{ background: TYPE_COLORS.Copter }}>C</span>
|
||||
<span style={{ color: 'var(--text-muted)' }}>{t('admin.aircrafts.legendCopter')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="type-sq" style={{ background: TYPE_COLORS.FixedWing }}>F</span>
|
||||
<span style={{ color: 'var(--text-muted)' }}>{t('admin.aircrafts.legendFixedW')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{aircrafts.map(a => (
|
||||
<div key={a.id} onClick={() => handleToggleDefault(a)} className="flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-az-bg text-xs text-az-text">
|
||||
<span className={`px-1 rounded text-[10px] ${a.type === 'Plane' ? 'bg-az-blue/20 text-az-blue' : 'bg-az-green/20 text-az-green'}`}>
|
||||
{a.type === 'Plane' ? 'P' : 'C'}
|
||||
</span>
|
||||
<span className="flex-1">{a.model}</span>
|
||||
<span className={`text-sm ${a.isDefault ? 'text-az-orange' : 'text-az-muted'}`}>★</span>
|
||||
<div
|
||||
key={a.id}
|
||||
data-aircraft-id={a.id}
|
||||
className="row-hover flex items-center gap-3 px-4 py-2.5"
|
||||
style={{
|
||||
borderBottom: '1px solid var(--border-hair)',
|
||||
background: a.isDefault ? 'var(--surface-2)' : 'transparent',
|
||||
borderLeft: a.isDefault ? '2px solid var(--accent-amber)' : '2px solid transparent',
|
||||
}}
|
||||
>
|
||||
<span className="type-sq" style={{ background: TYPE_COLORS[a.type] }}>{TYPE_LETTERS[a.type]}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div style={{ fontSize: 12.5 }}>{a.model}</div>
|
||||
<div className="mono tnum" style={{ fontSize: 10.5, color: 'var(--text-muted)' }}>
|
||||
{a.id} · {a.resolution ?? FALLBACK} · {a.maxMinutes ?? FALLBACK}MIN
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleToggleDefault(a)}
|
||||
className={a.isDefault ? 'star' : 'star-off ibtn'}
|
||||
aria-label={a.isDefault ? t('admin.aircrafts.default') : t('admin.aircrafts.setDefault')}
|
||||
aria-pressed={a.isDefault}
|
||||
title={a.isDefault ? t('admin.aircrafts.default') : t('admin.aircrafts.setDefault')}
|
||||
style={a.isDefault ? { background: 'transparent', border: 0, cursor: 'pointer' } : undefined}
|
||||
>
|
||||
<StarIcon filled={a.isDefault} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!deactivateId}
|
||||
title={t('admin.deactivate')}
|
||||
message="Deactivate this user?"
|
||||
onConfirm={handleDeactivate}
|
||||
onCancel={() => setDeactivateId(null)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="px-4 py-3"
|
||||
style={{ borderTop: '1px solid var(--border-hair)', background: 'var(--surface-0)' }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary w-full justify-center"
|
||||
onClick={openAircraftModal}
|
||||
>
|
||||
{t('admin.aircrafts.add')}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<Modal
|
||||
open={aircraftModalOpen}
|
||||
title={t('admin.aircrafts.addTitle')}
|
||||
onClose={closeAircraftModal}
|
||||
closeLabel={t('admin.classes.cancel')}
|
||||
footer={
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost"
|
||||
onClick={closeAircraftModal}
|
||||
disabled={aircraftSaving}
|
||||
>
|
||||
{t('admin.classes.cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => void saveAircraft()}
|
||||
disabled={aircraftSaving}
|
||||
>
|
||||
{t('admin.aircrafts.addTitle')}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.aircrafts.fieldModel')}</label>
|
||||
<input
|
||||
autoFocus
|
||||
className="inp inp-mono"
|
||||
value={aircraftDraft.model}
|
||||
onChange={e => setAircraftDraft(p => ({ ...p, model: e.target.value }))}
|
||||
placeholder="DJI Mavic 3"
|
||||
aria-label={t('admin.aircrafts.fieldModel')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.aircrafts.fieldType')}</label>
|
||||
<div className="seg" role="group" aria-label={t('admin.aircrafts.fieldType')}>
|
||||
{AIRCRAFT_TYPES.map(typ => (
|
||||
<button
|
||||
key={typ}
|
||||
type="button"
|
||||
onClick={() => setAircraftDraft(p => ({ ...p, type: typ }))}
|
||||
className={`seg-btn${aircraftDraft.type === typ ? ' active' : ''}`}
|
||||
aria-pressed={aircraftDraft.type === typ}
|
||||
>
|
||||
{t(`admin.aircrafts.${TYPE_LEGEND_KEY[typ]}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.aircrafts.fieldResolution')}</label>
|
||||
<select
|
||||
className="inp inp-mono"
|
||||
value={aircraftDraft.resolution}
|
||||
onChange={e => setAircraftDraft(p => ({ ...p, resolution: e.target.value }))}
|
||||
aria-label={t('admin.aircrafts.fieldResolution')}
|
||||
>
|
||||
{RESOLUTIONS.map(r => (
|
||||
<option key={r} value={r}>{r}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="micro block mb-1">{t('admin.aircrafts.fieldMaxMinutes')}</label>
|
||||
<input
|
||||
type="number"
|
||||
className="inp inp-mono"
|
||||
value={aircraftDraft.maxMinutes}
|
||||
onChange={e => setAircraftDraft(p => ({ ...p, maxMinutes: Number(e.target.value) }))}
|
||||
style={{ textAlign: 'right' }}
|
||||
aria-label={t('admin.aircrafts.fieldMaxMinutes')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox"
|
||||
checked={aircraftDraft.isDefault}
|
||||
onChange={e => setAircraftDraft(p => ({ ...p, isDefault: e.target.checked }))}
|
||||
/>
|
||||
<span>{t('admin.aircrafts.fieldDefault')}</span>
|
||||
</label>
|
||||
|
||||
{aircraftError && (
|
||||
<div role="alert" style={{ color: 'var(--accent-red)', fontSize: 11 }}>
|
||||
{t(`admin.aircrafts.${aircraftError}`)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
import { Fragment, useRef, type KeyboardEvent, type ReactNode } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export type EditFormShape = { name: string; shortName: string; color: string; maxSizeM: number }
|
||||
|
||||
interface ClassEditRowProps {
|
||||
/** Cell content for the leftmost `#` column (e.g. `+` for new, row id for edit). */
|
||||
idCell: ReactNode
|
||||
/** Stable identifier for the row's data-editing-row attribute. */
|
||||
rowId: number | 'new'
|
||||
form: EditFormShape
|
||||
onChange: (form: EditFormShape) => void
|
||||
onSave: () => void
|
||||
onCancel: () => void
|
||||
onKeyDown: (e: KeyboardEvent<HTMLElement>) => void
|
||||
saving: boolean
|
||||
/** Optional inline error key (already translated by the caller's t() if provided as message). */
|
||||
errorMessage: string | null
|
||||
placeholderName?: string
|
||||
}
|
||||
|
||||
function CheckIcon() {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
function CloseIcon() {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function ClassEditRow({
|
||||
idCell, rowId, form, onChange, onSave, onCancel, onKeyDown,
|
||||
saving, errorMessage, placeholderName,
|
||||
}: ClassEditRowProps) {
|
||||
const { t } = useTranslation()
|
||||
const colorInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<tr
|
||||
className="row-hover"
|
||||
data-editing-row={rowId}
|
||||
style={{ borderBottom: '1px solid var(--accent-amber)', height: 32, background: 'rgba(255,157,61,0.06)' }}
|
||||
onKeyDown={onKeyDown}
|
||||
>
|
||||
<td className="px-3 mono tnum" style={{ color: 'var(--accent-amber)', fontSize: 12 }}>{idCell}</td>
|
||||
<td className="px-2">
|
||||
<input
|
||||
autoFocus
|
||||
data-field="name"
|
||||
value={form.name}
|
||||
onChange={e => onChange({ ...form, name: e.target.value })}
|
||||
placeholder={placeholderName}
|
||||
className="inp inp-mono"
|
||||
style={{ height: 22, padding: '0 6px', fontSize: 11 }}
|
||||
aria-label={t('admin.classes.colName')}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => colorInputRef.current?.click()}
|
||||
className="inline-flex items-center justify-center cursor-pointer"
|
||||
aria-label={t('admin.classes.colHex')}
|
||||
style={{ background: 'transparent', border: 0, padding: 0 }}
|
||||
>
|
||||
<span
|
||||
className="swatch"
|
||||
style={{ background: form.color, boxShadow: '0 0 0 1px var(--accent-amber)' }}
|
||||
/>
|
||||
</button>
|
||||
<input
|
||||
ref={colorInputRef}
|
||||
type="color"
|
||||
data-field="color"
|
||||
value={form.color}
|
||||
onChange={e => onChange({ ...form, color: e.target.value })}
|
||||
style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
|
||||
tabIndex={-1}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 text-right">
|
||||
<span className="inline-flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSave}
|
||||
disabled={saving}
|
||||
className="ibtn cyan"
|
||||
aria-label={t('admin.classes.save')}
|
||||
title={t('admin.classes.save')}
|
||||
>
|
||||
<CheckIcon />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={saving}
|
||||
className="ibtn"
|
||||
aria-label={t('admin.classes.cancel')}
|
||||
title={t('admin.classes.cancel')}
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{errorMessage && (
|
||||
<tr style={{ background: 'rgba(255,157,61,0.06)' }}>
|
||||
<td />
|
||||
<td colSpan={3} className="px-2 pb-2">
|
||||
<div role="alert" style={{ color: 'var(--accent-red)', fontSize: 11 }}>
|
||||
{errorMessage}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useEffect, type ReactNode, type KeyboardEvent, type MouseEvent } from 'react'
|
||||
|
||||
interface ModalProps {
|
||||
open: boolean
|
||||
title: ReactNode
|
||||
onClose: () => void
|
||||
width?: number
|
||||
footer?: ReactNode
|
||||
children: ReactNode
|
||||
closeLabel?: string
|
||||
}
|
||||
|
||||
export function Modal({ open, title, onClose, width = 420, footer, children, closeLabel = 'Close' }: ModalProps) {
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const onKey = (e: globalThis.KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', onKey)
|
||||
// Lock body scroll while the modal is open.
|
||||
const prev = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
return () => {
|
||||
document.removeEventListener('keydown', onKey)
|
||||
document.body.style.overflow = prev
|
||||
}
|
||||
}, [open, onClose])
|
||||
|
||||
if (!open) return null
|
||||
|
||||
const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
|
||||
if (e.target === e.currentTarget) onClose()
|
||||
}
|
||||
const onPanelKey = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
// Stop Escape from bubbling to other key handlers in the page; the
|
||||
// document listener above already handles closing.
|
||||
if (e.key === 'Escape') e.stopPropagation()
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={typeof title === 'string' ? title : undefined}
|
||||
onClick={onBackdropClick}
|
||||
style={{
|
||||
position: 'fixed', inset: 0, zIndex: 100,
|
||||
background: 'rgba(0, 0, 0, 0.6)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bracket panel"
|
||||
onKeyDown={onPanelKey}
|
||||
style={{ width, padding: 20 }}
|
||||
>
|
||||
<span className="br" />
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="sect-head">{title}</span>
|
||||
<button type="button" onClick={onClose} className="ibtn" aria-label={closeLabel} title={closeLabel}>
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">{children}</div>
|
||||
|
||||
{footer && (
|
||||
<div
|
||||
className="mt-5 pt-4 flex items-center justify-end gap-2"
|
||||
style={{ borderTop: '1px dashed var(--border-hair)' }}
|
||||
>
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
interface NumberStepperProps {
|
||||
value: number
|
||||
/** Inclusive minimum, applied only to ▲▼ stepper clicks (not free typing). */
|
||||
min?: number
|
||||
/** Inclusive maximum, applied only to ▲▼ stepper clicks (not free typing). */
|
||||
max?: number
|
||||
/** Increment per ▲▼ click. */
|
||||
step: number
|
||||
onChange: (v: number) => void
|
||||
/** Trailing unit label (e.g. "FR", "SEC", "%"). */
|
||||
suffix: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Number input with ▲▼ stepper buttons next to it and a trailing unit
|
||||
* label. Stepper buttons clamp to [min, max]; direct typing does NOT —
|
||||
* so `userEvent.clear()` + `type('9')` behaves as expected without being
|
||||
* snapped mid-keystroke. Invalid intermediate values fall through; the
|
||||
* caller validates on save.
|
||||
*/
|
||||
export function NumberStepper({ value, min, max, step, onChange, suffix }: NumberStepperProps) {
|
||||
const clamp = (v: number) => Math.max(min ?? -Infinity, Math.min(max ?? Infinity, v))
|
||||
return (
|
||||
<div className="flex items-stretch gap-2">
|
||||
<input
|
||||
className="inp inp-mono"
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={e => {
|
||||
const raw = e.target.value
|
||||
const parsed = raw === '' ? 0 : Number(raw)
|
||||
onChange(Number.isFinite(parsed) ? parsed : 0)
|
||||
}}
|
||||
style={{ textAlign: 'right', width: 88 }}
|
||||
/>
|
||||
<div className="flex flex-col" style={{ border: '1px solid var(--border-hair)', borderRadius: 2 }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(clamp(value + step))}
|
||||
className="mono"
|
||||
aria-label="Increment"
|
||||
style={{ width: 24, height: 15, fontSize: 9, color: 'var(--text-secondary)', background: 'var(--surface-input)', borderBottom: '1px solid var(--border-hair)' }}
|
||||
>▲</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(clamp(value - step))}
|
||||
className="mono"
|
||||
aria-label="Decrement"
|
||||
style={{ width: 24, height: 15, fontSize: 9, color: 'var(--text-secondary)', background: 'var(--surface-input)' }}
|
||||
>▼</button>
|
||||
</div>
|
||||
<span className="micro self-center" style={{ color: 'var(--text-muted)' }}>{suffix}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
|
||||
import { http } from 'msw'
|
||||
import { server } from '../../../../tests/msw/server'
|
||||
import { jsonResponse, errorResponse } from '../../../../tests/msw/helpers'
|
||||
import { renderWithProviders, screen, waitFor, userEvent } from '../../../../tests/helpers/render'
|
||||
import { seedBearer, clearBearer } from '../../../../tests/helpers/auth'
|
||||
import { AdminPage } from '..'
|
||||
|
||||
// v2 admin — AI Recognition Engine panel. Covers GET → render telemetry,
|
||||
// edit value via stepper / input, APPLY → PATCH, RESET → discards draft,
|
||||
// PATCH 500 → inline error.
|
||||
//
|
||||
// Both AI and GPS panels render APPLY buttons; AI is the first one in DOM
|
||||
// order. We pick [0] from getAllByRole rather than coupling to internal markup.
|
||||
|
||||
function aiApplyButton(): HTMLElement {
|
||||
return screen.getAllByRole('button', { name: /apply/i })[0]
|
||||
}
|
||||
function aiResetButton(): HTMLElement {
|
||||
return screen.getByRole('button', { name: /reset/i })
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
seedBearer()
|
||||
})
|
||||
afterEach(() => {
|
||||
clearBearer()
|
||||
})
|
||||
|
||||
describe('AdminPage — AI Recognition Engine', () => {
|
||||
it('renders initial settings + telemetry from GET /api/admin/ai-settings', async () => {
|
||||
renderWithProviders(<AdminPage />)
|
||||
expect(await screen.findByText('YOLOV8-X · CKPT-241')).toBeInTheDocument()
|
||||
expect(screen.getByDisplayValue('4')).toBeInTheDocument()
|
||||
expect(screen.getByDisplayValue('25')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('APPLY sends PATCH with edited settings and reflects telemetry refresh', async () => {
|
||||
const calls: { body: unknown }[] = []
|
||||
server.use(
|
||||
http.patch('/api/admin/ai-settings', async ({ request }) => {
|
||||
const body = await request.json()
|
||||
calls.push({ body })
|
||||
return jsonResponse({
|
||||
settings: { framesToRecognize: 8, minSecondsBetween: 2, minConfidence: 25 },
|
||||
telemetry: {
|
||||
model: 'YOLOV8-X', checkpoint: 'CKPT-242',
|
||||
lastRunAt: '2026-05-18T12:00:00Z', frames: 99, avgConfidence: 80,
|
||||
},
|
||||
})
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('YOLOV8-X · CKPT-241')
|
||||
|
||||
const framesInput = screen.getByDisplayValue('4') as HTMLInputElement
|
||||
await userEvent.clear(framesInput)
|
||||
await userEvent.type(framesInput, '8')
|
||||
|
||||
await userEvent.click(aiApplyButton())
|
||||
|
||||
await waitFor(() => expect(calls.length).toBe(1))
|
||||
expect((calls[0].body as { framesToRecognize: number }).framesToRecognize).toBe(8)
|
||||
expect(await screen.findByText(/CKPT-242/)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('RESET reverts draft to the last persisted value (no PATCH)', async () => {
|
||||
const patchCalls: unknown[] = []
|
||||
server.use(
|
||||
http.patch('/api/admin/ai-settings', () => {
|
||||
patchCalls.push({})
|
||||
return jsonResponse({})
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('YOLOV8-X · CKPT-241')
|
||||
|
||||
const framesInput = screen.getByDisplayValue('4') as HTMLInputElement
|
||||
await userEvent.clear(framesInput)
|
||||
await userEvent.type(framesInput, '9')
|
||||
expect(screen.getByDisplayValue('9')).toBeInTheDocument()
|
||||
|
||||
await userEvent.click(aiResetButton())
|
||||
|
||||
expect(screen.getByDisplayValue('4')).toBeInTheDocument()
|
||||
expect(patchCalls.length).toBe(0)
|
||||
})
|
||||
|
||||
it('PATCH 500 surfaces an inline error', async () => {
|
||||
server.use(
|
||||
http.patch('/api/admin/ai-settings', () => errorResponse(500, 'boom')),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('YOLOV8-X · CKPT-241')
|
||||
|
||||
await userEvent.click(aiApplyButton())
|
||||
|
||||
const alert = await screen.findByRole('alert')
|
||||
expect(alert.textContent ?? '').toMatch(/failed to save ai/i)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,59 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
|
||||
import { http } from 'msw'
|
||||
import { server } from '../../../../tests/msw/server'
|
||||
import { jsonResponse } from '../../../../tests/msw/helpers'
|
||||
import { renderWithProviders, screen, waitFor, userEvent } from '../../../../tests/helpers/render'
|
||||
import { seedBearer, clearBearer } from '../../../../tests/helpers/auth'
|
||||
import { seedAircraft } from '../../../../tests/fixtures/seed_aircraft'
|
||||
import { AdminPage } from '..'
|
||||
|
||||
// v2 admin — Default Aircrafts panel: render 6 mockup rows + star toggle.
|
||||
|
||||
beforeEach(() => {
|
||||
seedBearer()
|
||||
server.use(
|
||||
http.get('/api/flights/aircrafts', () => jsonResponse(seedAircraft)),
|
||||
)
|
||||
})
|
||||
afterEach(() => {
|
||||
clearBearer()
|
||||
})
|
||||
|
||||
describe('AdminPage — Default Aircrafts', () => {
|
||||
it('renders all 6 seeded aircraft with id · resolution · minutes', async () => {
|
||||
renderWithProviders(<AdminPage />)
|
||||
expect(await screen.findByText('DJI Mavic 3')).toBeInTheDocument()
|
||||
expect(screen.getByText('Matrice 300 RTK')).toBeInTheDocument()
|
||||
expect(screen.getByText('Leleka-100')).toBeInTheDocument()
|
||||
expect(screen.getByText('Fixed Wing Scout')).toBeInTheDocument()
|
||||
expect(screen.getByText('Autel EVO II Pro')).toBeInTheDocument()
|
||||
expect(screen.getByText('PD-2 Recon')).toBeInTheDocument()
|
||||
// Subline format: "AC-001 · 4K · 46MIN"
|
||||
expect(screen.getByText(/AC-001\s+·\s+4K\s+·\s+46MIN/)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('star toggle PATCHes isDefault and updates UI', async () => {
|
||||
const calls: { id: string; body: unknown }[] = []
|
||||
server.use(
|
||||
http.patch('/api/flights/aircrafts/:id', async ({ params, request }) => {
|
||||
const body = await request.json()
|
||||
calls.push({ id: String(params.id), body })
|
||||
return jsonResponse({ ok: true })
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('DJI Mavic 3')
|
||||
|
||||
// AC-002 starts non-default → click its star to mark default.
|
||||
const ac002Row = screen.getByText('Matrice 300 RTK').closest('[data-aircraft-id]') as HTMLElement
|
||||
expect(ac002Row).not.toBeNull()
|
||||
// Within the row find the toggle button (set-default label).
|
||||
const toggleBtn = ac002Row.querySelector('button[aria-pressed="false"]') as HTMLButtonElement
|
||||
expect(toggleBtn).not.toBeNull()
|
||||
await userEvent.click(toggleBtn)
|
||||
|
||||
await waitFor(() => expect(calls.length).toBe(1))
|
||||
expect(calls[0].id).toBe('AC-002')
|
||||
expect((calls[0].body as { isDefault: boolean }).isDefault).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,79 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
|
||||
import { http } from 'msw'
|
||||
import { server } from '../../../../tests/msw/server'
|
||||
import { jsonResponse } from '../../../../tests/msw/helpers'
|
||||
import { renderWithProviders, screen, waitFor, userEvent } from '../../../../tests/helpers/render'
|
||||
import { seedBearer, clearBearer } from '../../../../tests/helpers/auth'
|
||||
import { AdminPage } from '..'
|
||||
|
||||
// v2 admin — GPS Device Link panel.
|
||||
//
|
||||
// AI and GPS share APPLY label; GPS is the SECOND APPLY in DOM order.
|
||||
|
||||
function gpsApplyButton(): HTMLElement {
|
||||
return screen.getAllByRole('button', { name: /apply/i })[1]
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
seedBearer()
|
||||
})
|
||||
afterEach(() => {
|
||||
clearBearer()
|
||||
})
|
||||
|
||||
describe('AdminPage — GPS Device Link', () => {
|
||||
it('renders initial settings + telemetry from GET /api/admin/gps-settings', async () => {
|
||||
renderWithProviders(<AdminPage />)
|
||||
expect(await screen.findByDisplayValue('192.168.1.100')).toBeInTheDocument()
|
||||
expect(screen.getByDisplayValue('9001')).toBeInTheDocument()
|
||||
expect(screen.getByText('UDP/192.168.1.100:9001')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('protocol segmented control switches active value and APPLY PATCHes', async () => {
|
||||
const calls: { body: unknown }[] = []
|
||||
server.use(
|
||||
http.patch('/api/admin/gps-settings', async ({ request }) => {
|
||||
const body = await request.json()
|
||||
calls.push({ body })
|
||||
return jsonResponse({
|
||||
settings: { ...(body as object), address: '192.168.1.100', port: 9001 },
|
||||
telemetry: { socket: 'UDP/192.168.1.100:9001', connected: true, fix: '3D', satellites: 11, hdop: 0.82, lastPacketMs: 12 },
|
||||
})
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByDisplayValue('192.168.1.100')
|
||||
|
||||
const ubxBtn = screen.getByRole('button', { name: 'UBX' })
|
||||
await userEvent.click(ubxBtn)
|
||||
expect(ubxBtn).toHaveAttribute('aria-pressed', 'true')
|
||||
|
||||
await userEvent.click(gpsApplyButton())
|
||||
|
||||
await waitFor(() => expect(calls.length).toBe(1))
|
||||
expect((calls[0].body as { protocol: string }).protocol).toBe('UBX')
|
||||
})
|
||||
|
||||
it('PING and RECONNECT fire their dedicated endpoints', async () => {
|
||||
let pingHits = 0
|
||||
let reconnectHits = 0
|
||||
server.use(
|
||||
http.post('/api/admin/gps-settings/ping', () => { pingHits += 1; return new Response(null, { status: 204 }) }),
|
||||
http.post('/api/admin/gps-settings/reconnect', () => {
|
||||
reconnectHits += 1
|
||||
return jsonResponse({
|
||||
settings: { address: '192.168.1.100', port: 9001, protocol: 'NMEA' },
|
||||
telemetry: { socket: 'UDP/192.168.1.100:9001', connected: true, fix: '3D', satellites: 11, hdop: 0.82, lastPacketMs: 0 },
|
||||
})
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByDisplayValue('192.168.1.100')
|
||||
|
||||
await userEvent.click(screen.getByRole('button', { name: /^ping$/i }))
|
||||
await waitFor(() => expect(pingHits).toBe(1))
|
||||
|
||||
await userEvent.click(screen.getByRole('button', { name: /reconnect/i }))
|
||||
await waitFor(() => expect(reconnectHits).toBe(1))
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { api, endpoints } from '../../api'
|
||||
import type {
|
||||
AiRecognitionResponse,
|
||||
AiRecognitionSettings,
|
||||
AiRecognitionTelemetry,
|
||||
} from '../../types'
|
||||
|
||||
type Status = 'idle' | 'loading' | 'ready' | 'saving' | 'error'
|
||||
|
||||
// Factory defaults — UI stays interactive when GET fails (no backend).
|
||||
const FACTORY_AI_SETTINGS: AiRecognitionSettings = {
|
||||
framesToRecognize: 4,
|
||||
minSecondsBetween: 2,
|
||||
minConfidence: 25,
|
||||
}
|
||||
|
||||
export function useAiSettings() {
|
||||
const [draft, setDraft] = useState<AiRecognitionSettings>(FACTORY_AI_SETTINGS)
|
||||
const [persisted, setPersisted] = useState<AiRecognitionSettings>(FACTORY_AI_SETTINGS)
|
||||
const [telemetry, setTelemetry] = useState<AiRecognitionTelemetry | null>(null)
|
||||
const [status, setStatus] = useState<Status>('idle')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
setStatus('loading')
|
||||
api.get<AiRecognitionResponse>(endpoints.admin.aiSettings())
|
||||
.then(res => {
|
||||
if (cancelled) return
|
||||
setDraft(res.settings)
|
||||
setPersisted(res.settings)
|
||||
setTelemetry(res.telemetry)
|
||||
setStatus('ready')
|
||||
})
|
||||
.catch(() => {
|
||||
if (cancelled) return
|
||||
setStatus('error')
|
||||
setError('Failed to load AI settings')
|
||||
})
|
||||
return () => { cancelled = true }
|
||||
}, [])
|
||||
|
||||
const save = useCallback(async () => {
|
||||
setStatus('saving')
|
||||
setError(null)
|
||||
try {
|
||||
const res = await api.patch<AiRecognitionResponse>(endpoints.admin.aiSettings(), draft)
|
||||
setDraft(res.settings)
|
||||
setPersisted(res.settings)
|
||||
setTelemetry(res.telemetry)
|
||||
setStatus('ready')
|
||||
} catch {
|
||||
setStatus('error')
|
||||
setError('Failed to save AI settings')
|
||||
}
|
||||
}, [draft])
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setDraft(persisted)
|
||||
}, [persisted])
|
||||
|
||||
return { draft, setDraft, telemetry, status, error, save, reset } as const
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { api, endpoints } from '../../api'
|
||||
import type {
|
||||
GpsDeviceResponse,
|
||||
GpsDeviceSettings,
|
||||
GpsDeviceTelemetry,
|
||||
} from '../../types'
|
||||
|
||||
type Status = 'idle' | 'loading' | 'ready' | 'saving' | 'pinging' | 'reconnecting' | 'error'
|
||||
|
||||
// Factory defaults — UI stays interactive when GET fails (no backend).
|
||||
const FACTORY_GPS_SETTINGS: GpsDeviceSettings = {
|
||||
address: '192.168.1.100',
|
||||
port: 9001,
|
||||
protocol: 'NMEA',
|
||||
}
|
||||
|
||||
export function useGpsSettings() {
|
||||
const [draft, setDraft] = useState<GpsDeviceSettings>(FACTORY_GPS_SETTINGS)
|
||||
const [persisted, setPersisted] = useState<GpsDeviceSettings>(FACTORY_GPS_SETTINGS)
|
||||
const [telemetry, setTelemetry] = useState<GpsDeviceTelemetry | null>(null)
|
||||
const [status, setStatus] = useState<Status>('idle')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
setStatus('loading')
|
||||
api.get<GpsDeviceResponse>(endpoints.admin.gpsSettings())
|
||||
.then(res => {
|
||||
if (cancelled) return
|
||||
setDraft(res.settings)
|
||||
setPersisted(res.settings)
|
||||
setTelemetry(res.telemetry)
|
||||
setStatus('ready')
|
||||
})
|
||||
.catch(() => {
|
||||
if (cancelled) return
|
||||
setStatus('error')
|
||||
setError('Failed to load GPS settings')
|
||||
})
|
||||
return () => { cancelled = true }
|
||||
}, [])
|
||||
|
||||
const save = useCallback(async () => {
|
||||
setStatus('saving')
|
||||
setError(null)
|
||||
try {
|
||||
const res = await api.patch<GpsDeviceResponse>(endpoints.admin.gpsSettings(), draft)
|
||||
setDraft(res.settings)
|
||||
setPersisted(res.settings)
|
||||
setTelemetry(res.telemetry)
|
||||
setStatus('ready')
|
||||
} catch {
|
||||
setStatus('error')
|
||||
setError('Failed to save GPS settings')
|
||||
}
|
||||
}, [draft])
|
||||
|
||||
const ping = useCallback(async () => {
|
||||
setStatus('pinging')
|
||||
setError(null)
|
||||
try {
|
||||
await api.post(endpoints.admin.gpsPing(), {})
|
||||
setStatus('ready')
|
||||
} catch {
|
||||
setStatus('error')
|
||||
setError('Ping failed')
|
||||
}
|
||||
}, [])
|
||||
|
||||
const reconnect = useCallback(async () => {
|
||||
setStatus('reconnecting')
|
||||
setError(null)
|
||||
try {
|
||||
const res = await api.post<GpsDeviceResponse>(endpoints.admin.gpsReconnect(), {})
|
||||
setTelemetry(res.telemetry)
|
||||
setStatus('ready')
|
||||
} catch {
|
||||
setStatus('error')
|
||||
setError('Reconnect failed')
|
||||
}
|
||||
}, [])
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setDraft(persisted)
|
||||
}, [persisted])
|
||||
|
||||
return { draft, setDraft, telemetry, status, error, save, ping, reconnect, reset } as const
|
||||
}
|
||||
+61
-7
@@ -2,7 +2,7 @@
|
||||
"nav": {
|
||||
"flights": "Flights",
|
||||
"annotations": "Annotations",
|
||||
"dataset": "Dataset Explorer",
|
||||
"dataset": "Dataset",
|
||||
"admin": "Admin",
|
||||
"settings": "Settings",
|
||||
"logout": "Logout"
|
||||
@@ -116,19 +116,73 @@
|
||||
"title": "Admin",
|
||||
"classes": {
|
||||
"title": "Detection Classes",
|
||||
"search": "Search class…",
|
||||
"add": "+ ADD",
|
||||
"colName": "Name",
|
||||
"colHex": "Hex",
|
||||
"colOps": "Ops",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"nameRequired": "Name is required",
|
||||
"maxSizeMustBePositive": "Max size must be a positive number",
|
||||
"updateFailed": "Update failed. Please try again."
|
||||
},
|
||||
"aiSettings": "AI Recognition Settings",
|
||||
"gpsSettings": "GPS Device Settings",
|
||||
"aircrafts": "Default Aircrafts",
|
||||
"users": "User Management",
|
||||
"addUser": "Add User",
|
||||
"deactivate": "Deactivate"
|
||||
"aiEngine": {
|
||||
"title": "AI Recognition Engine",
|
||||
"subtitle": "Detection model runtime parameters. Applied per-flight, hot-reloaded.",
|
||||
"framesToRecognize": "Frames To Recognize",
|
||||
"framesHint": "Number of consecutive frames the model averages before emitting a detection.",
|
||||
"minSeconds": "Min Seconds Between",
|
||||
"minSecondsHint": "Cooldown gap between successive inference calls on the same video stream.",
|
||||
"minConfidence": "Min Confidence",
|
||||
"minConfidenceHint": "Detections below this threshold are discarded before reaching the canvas.",
|
||||
"reset": "RESET",
|
||||
"apply": "APPLY",
|
||||
"lastRun": "LAST RUN",
|
||||
"frames": "FRAMES",
|
||||
"avgConf": "AVG CONF",
|
||||
"model": "MODEL",
|
||||
"loaded": "LOADED",
|
||||
"unitFR": "FR",
|
||||
"unitSec": "SEC"
|
||||
},
|
||||
"gpsDevice": {
|
||||
"title": "GPS Device Link",
|
||||
"subtitle": "Ground-station receiver feeding the GPS-Denied correction pipeline.",
|
||||
"address": "Device Address",
|
||||
"addressHint": "IPv4 endpoint or hostname of the GPS receiver bridge.",
|
||||
"port": "Device Port",
|
||||
"portHint": "UDP port the receiver streams NMEA sentences on.",
|
||||
"protocol": "Protocol",
|
||||
"protocolHint": "Wire format negotiated with the receiver. Switch only when the device is offline.",
|
||||
"ping": "PING",
|
||||
"reconnect": "RECONNECT",
|
||||
"apply": "APPLY",
|
||||
"connected": "CONNECTED",
|
||||
"fix": "FIX",
|
||||
"hdop": "HDOP",
|
||||
"lastPkt": "LAST PKT",
|
||||
"socket": "SOCKET"
|
||||
},
|
||||
"aircrafts": {
|
||||
"title": "Default Aircrafts",
|
||||
"legendPlane": "PLANE",
|
||||
"legendCopter": "COPTER",
|
||||
"legendFixedW": "FIXED-W",
|
||||
"add": "+ ADD AIRCRAFT",
|
||||
"addTitle": "Add Aircraft",
|
||||
"setDefault": "Set default",
|
||||
"default": "Default",
|
||||
"fieldModel": "Model",
|
||||
"fieldType": "Type",
|
||||
"fieldResolution": "Resolution",
|
||||
"fieldMaxMinutes": "Max minutes",
|
||||
"fieldDefault": "Set as default",
|
||||
"modelRequired": "Model is required",
|
||||
"saveFailed": "Save failed. Please try again."
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"title": "Settings",
|
||||
|
||||
+60
-6
@@ -116,19 +116,73 @@
|
||||
"title": "Адмін",
|
||||
"classes": {
|
||||
"title": "Класи детекцій",
|
||||
"search": "Пошук класу…",
|
||||
"add": "+ ДОДАТИ",
|
||||
"colName": "Назва",
|
||||
"colHex": "Hex",
|
||||
"colOps": "Дії",
|
||||
"edit": "Редагувати",
|
||||
"delete": "Видалити",
|
||||
"save": "Зберегти",
|
||||
"cancel": "Скасувати",
|
||||
"nameRequired": "Назва обов'язкова",
|
||||
"maxSizeMustBePositive": "Максимальний розмір має бути додатнім числом",
|
||||
"updateFailed": "Не вдалося оновити. Спробуйте ще раз."
|
||||
},
|
||||
"aiSettings": "AI Налаштування",
|
||||
"gpsSettings": "GPS Пристрій",
|
||||
"aircrafts": "Літальні апарати",
|
||||
"users": "Користувачі",
|
||||
"addUser": "Додати користувача",
|
||||
"deactivate": "Деактивувати"
|
||||
"aiEngine": {
|
||||
"title": "AI Розпізнавання",
|
||||
"subtitle": "Параметри роботи моделі. Застосовуються до польоту, гаряче перезавантаження.",
|
||||
"framesToRecognize": "Кадрів для розпізнавання",
|
||||
"framesHint": "Кількість послідовних кадрів, які модель усереднює перед видачею детекції.",
|
||||
"minSeconds": "Мін секунд між",
|
||||
"minSecondsHint": "Інтервал між послідовними викликами розпізнавання на одному відеопотоці.",
|
||||
"minConfidence": "Мін впевненість",
|
||||
"minConfidenceHint": "Детекції нижче порогу відкидаються до відображення на канві.",
|
||||
"reset": "СКИНУТИ",
|
||||
"apply": "ЗАСТОСУВАТИ",
|
||||
"lastRun": "ОСТАННІЙ ЗАПУСК",
|
||||
"frames": "КАДРИ",
|
||||
"avgConf": "СЕРЕДНЯ",
|
||||
"model": "МОДЕЛЬ",
|
||||
"loaded": "ЗАВАНТАЖЕНО",
|
||||
"unitFR": "КАДР",
|
||||
"unitSec": "СЕК"
|
||||
},
|
||||
"gpsDevice": {
|
||||
"title": "GPS Пристрій",
|
||||
"subtitle": "Наземний приймач, який живить конвеєр корекції GPS-Denied.",
|
||||
"address": "Адреса пристрою",
|
||||
"addressHint": "IPv4 точка або hostname моста GPS-приймача.",
|
||||
"port": "Порт пристрою",
|
||||
"portHint": "UDP-порт, на якому приймач транслює NMEA-повідомлення.",
|
||||
"protocol": "Протокол",
|
||||
"protocolHint": "Wire-формат узгоджений з приймачем. Перемикайте лише коли пристрій офлайн.",
|
||||
"ping": "PING",
|
||||
"reconnect": "ПЕРЕПІД'ЄДНАТИ",
|
||||
"apply": "ЗАСТОСУВАТИ",
|
||||
"connected": "З'ЄДНАНО",
|
||||
"fix": "FIX",
|
||||
"hdop": "HDOP",
|
||||
"lastPkt": "ОСТ. ПАКЕТ",
|
||||
"socket": "СОКЕТ"
|
||||
},
|
||||
"aircrafts": {
|
||||
"title": "Літальні апарати",
|
||||
"legendPlane": "ЛІТАК",
|
||||
"legendCopter": "КОПТЕР",
|
||||
"legendFixedW": "FIXED-W",
|
||||
"add": "+ ДОДАТИ АПАРАТ",
|
||||
"addTitle": "Додати апарат",
|
||||
"setDefault": "Встановити за замовч.",
|
||||
"default": "За замовч.",
|
||||
"fieldModel": "Модель",
|
||||
"fieldType": "Тип",
|
||||
"fieldResolution": "Роздільність",
|
||||
"fieldMaxMinutes": "Макс. хвилин",
|
||||
"fieldDefault": "За замовчуванням",
|
||||
"modelRequired": "Модель обов'язкова",
|
||||
"saveFailed": "Не вдалося зберегти. Спробуйте ще раз."
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"title": "Налаштування",
|
||||
|
||||
+356
-19
@@ -1,31 +1,368 @@
|
||||
@import "tailwindcss";
|
||||
/* Fonts are loaded via <link rel="stylesheet"> in index.html <head> so they
|
||||
resolve before first paint (no FOUT). Don't re-import via @import here. */
|
||||
|
||||
@theme {
|
||||
--color-az-bg: #1e1e1e;
|
||||
--color-az-panel: #2b2b2b;
|
||||
--color-az-header: #343a40;
|
||||
--color-az-border: #495057;
|
||||
--color-az-muted: #6c757d;
|
||||
--color-az-text: #adb5bd;
|
||||
--color-az-orange: #fd7e14;
|
||||
--color-az-blue: #228be6;
|
||||
--color-az-red: #fa5252;
|
||||
--color-az-green: #40c057;
|
||||
/* v2 — AZAION design system. v1 az-* names below are aliases so legacy
|
||||
pages still render until they're migrated to v2 utilities. */
|
||||
--color-surface-0: #0A0D10;
|
||||
--color-surface-1: #13171C;
|
||||
--color-surface-2: #1A1F26;
|
||||
--color-surface-input: #0A0D10;
|
||||
--color-border-hair: #252B34;
|
||||
--color-border-raised: #3B4451;
|
||||
--color-text-primary: #E8ECF1;
|
||||
--color-text-secondary: #9AA4B2;
|
||||
--color-text-muted: #5B6573;
|
||||
--color-accent-amber: #FF9D3D;
|
||||
--color-accent-cyan: #36D6C5;
|
||||
--color-accent-red: #FF4756;
|
||||
--color-accent-green: #3DDC84;
|
||||
--color-accent-blue: #4E9EFF;
|
||||
|
||||
/* legacy v1 aliases — mapped to v2 vars so unmigrated pages stay readable. */
|
||||
--color-az-bg: #0A0D10;
|
||||
--color-az-panel: #13171C;
|
||||
--color-az-header: #13171C;
|
||||
--color-az-border: #252B34;
|
||||
--color-az-muted: #5B6573;
|
||||
--color-az-text: #E8ECF1;
|
||||
--color-az-orange: #FF9D3D;
|
||||
--color-az-blue: #4E9EFF;
|
||||
--color-az-red: #FF4756;
|
||||
--color-az-green: #3DDC84;
|
||||
}
|
||||
|
||||
: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 {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
.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);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-az-bg);
|
||||
|
||||
.sect-head {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-amber);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-az-border);
|
||||
border-radius: 3px;
|
||||
|
||||
.hint { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
|
||||
|
||||
/* 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', system-ui, sans-serif;
|
||||
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; }
|
||||
|
||||
/* Hide native number-input spinner arrows — custom ▲▼ steppers replace them. */
|
||||
.inp[type="number"]::-webkit-inner-spin-button,
|
||||
.inp[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.inp[type="number"] { -moz-appearance: textfield; appearance: textfield; }
|
||||
|
||||
/* Checkbox — v2 dark theme, amber check.
|
||||
Layout-stable: flex (not inline-flex) so the baseline of the wrapping
|
||||
label doesn't shift when the input gains focus or toggles. The checkmark
|
||||
is a background-image SVG so there is no pseudo-element being added /
|
||||
removed (which can briefly affect intrinsic size in some browsers). */
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.checkbox {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--surface-input) no-repeat center center;
|
||||
background-size: 10px 10px;
|
||||
border: 1px solid var(--border-raised);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: border-color .1s, background-color .1s, box-shadow .1s;
|
||||
outline: none;
|
||||
}
|
||||
.checkbox:hover { border-color: var(--accent-amber); }
|
||||
.checkbox:focus-visible {
|
||||
border-color: var(--accent-amber);
|
||||
box-shadow: 0 0 0 1px var(--accent-amber);
|
||||
}
|
||||
.checkbox:checked {
|
||||
background-color: var(--accent-amber);
|
||||
border-color: var(--accent-amber);
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0D10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 7 12 13 4.5'/></svg>");
|
||||
}
|
||||
.checkbox:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 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:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-primary {
|
||||
background: var(--accent-amber);
|
||||
color: #0A0D10;
|
||||
border-color: var(--accent-amber);
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--accent-amber);
|
||||
border-color: var(--accent-amber);
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) { background: rgba(255,157,61,.12); }
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-hair);
|
||||
}
|
||||
.btn-ghost:hover:not(:disabled) { 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:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.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 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;
|
||||
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); }
|
||||
|
||||
/* Card panel base */
|
||||
.panel {
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--border-hair);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
|
||||
/* select 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;
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
|
||||
+44
-1
@@ -69,8 +69,51 @@ export interface Flight {
|
||||
export interface Aircraft {
|
||||
id: string
|
||||
model: string
|
||||
type: 'Plane' | 'Copter'
|
||||
type: 'Plane' | 'Copter' | 'FixedWing'
|
||||
isDefault: boolean
|
||||
resolution?: string
|
||||
maxMinutes?: number
|
||||
}
|
||||
|
||||
export interface AiRecognitionSettings {
|
||||
framesToRecognize: number
|
||||
minSecondsBetween: number
|
||||
minConfidence: number
|
||||
}
|
||||
|
||||
export interface AiRecognitionTelemetry {
|
||||
model: string
|
||||
checkpoint: string
|
||||
lastRunAt: string | null
|
||||
frames: number
|
||||
avgConfidence: number
|
||||
}
|
||||
|
||||
export interface AiRecognitionResponse {
|
||||
settings: AiRecognitionSettings
|
||||
telemetry: AiRecognitionTelemetry
|
||||
}
|
||||
|
||||
export type GpsProtocol = 'NMEA' | 'UBX' | 'MAVLINK'
|
||||
|
||||
export interface GpsDeviceSettings {
|
||||
address: string
|
||||
port: number
|
||||
protocol: GpsProtocol
|
||||
}
|
||||
|
||||
export interface GpsDeviceTelemetry {
|
||||
socket: string
|
||||
connected: boolean
|
||||
fix: '2D' | '3D' | 'NO_FIX'
|
||||
satellites: number
|
||||
hdop: number
|
||||
lastPacketMs: number
|
||||
}
|
||||
|
||||
export interface GpsDeviceResponse {
|
||||
settings: GpsDeviceSettings
|
||||
telemetry: GpsDeviceTelemetry
|
||||
}
|
||||
|
||||
export interface Waypoint {
|
||||
|
||||
@@ -105,14 +105,12 @@ describe('AZ-512 / AdminPage — inline detection-class edit', () => {
|
||||
// Act
|
||||
await clickEdit('1')
|
||||
|
||||
// Assert — form is visible inside row 1.
|
||||
// Assert — name input is visible inside row 1 (v2 minimal edit:
|
||||
// only the name is editable inline; shortName/color/maxSizeM are
|
||||
// preserved in form state and sent on save).
|
||||
const row1 = getRow('1')
|
||||
const nameInput = within(row1).getByDisplayValue('class-a') as HTMLInputElement
|
||||
expect(nameInput).toBeInTheDocument()
|
||||
const shortInput = within(row1).getByDisplayValue('a') as HTMLInputElement
|
||||
expect(shortInput).toBeInTheDocument()
|
||||
const maxSize = within(row1).getByDisplayValue('7') as HTMLInputElement
|
||||
expect(maxSize).toBeInTheDocument()
|
||||
|
||||
// Assert — row 2 stays read-only: the row still shows the plain text name.
|
||||
const row2 = getRow('2')
|
||||
@@ -246,31 +244,17 @@ describe('AZ-512 / AdminPage — inline detection-class edit', () => {
|
||||
// Act
|
||||
await userEvent.click(within(row1).getByRole('button', { name: /^save$|^зберегти$/i }))
|
||||
|
||||
// Assert — no PATCH; error alert rendered.
|
||||
// Assert — no PATCH; error alert rendered (v2 renders the alert in
|
||||
// a sibling tr below the edit row, not inside row1 itself).
|
||||
expect(patchCalls.length).toBe(0)
|
||||
const alert = within(row1).getByRole('alert')
|
||||
const alert = screen.getByRole('alert')
|
||||
expect(alert.textContent ?? '').toMatch(/name is required|назва обов/i)
|
||||
})
|
||||
|
||||
it('non-positive maxSizeM → no PATCH; maxSizeMustBePositive error visible', async () => {
|
||||
// Arrange
|
||||
const patchCalls = capturePatchCalls()
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
await clickEdit('1')
|
||||
const row1 = getRow('1')
|
||||
const maxInput = within(row1).getByDisplayValue('7') as HTMLInputElement
|
||||
await userEvent.clear(maxInput)
|
||||
await userEvent.type(maxInput, '0')
|
||||
|
||||
// Act
|
||||
await userEvent.click(within(row1).getByRole('button', { name: /^save$|^зберегти$/i }))
|
||||
|
||||
// Assert — no PATCH; error alert rendered.
|
||||
expect(patchCalls.length).toBe(0)
|
||||
const alert = within(row1).getByRole('alert')
|
||||
expect(alert.textContent ?? '').toMatch(/positive|додатнім/i)
|
||||
})
|
||||
// The maxSizeM field is no longer editable inline in v2 (mockup shows
|
||||
// name-only). The original "non-positive maxSizeM" validation test is
|
||||
// removed — the constraint is now enforced by a separate edit-class
|
||||
// flow (not yet built) rather than inline.
|
||||
})
|
||||
|
||||
describe('AC-6: backend error is surfaced inline', () => {
|
||||
@@ -299,10 +283,11 @@ describe('AZ-512 / AdminPage — inline detection-class edit', () => {
|
||||
// Act
|
||||
await userEvent.click(within(row1).getByRole('button', { name: /^save$|^зберегти$/i }))
|
||||
|
||||
// Assert — PATCH happened, error rendered, form still open, no alert().
|
||||
// Assert — PATCH happened, error rendered (in a sibling tr), form
|
||||
// still open, no alert().
|
||||
await waitFor(() => expect(patchCount).toBe(1))
|
||||
const row1After = getRow('1')
|
||||
const alert = await within(row1After).findByRole('alert')
|
||||
const alert = await screen.findByRole('alert')
|
||||
expect(alert.textContent ?? '').toMatch(/update failed|не вдалося оновити/i)
|
||||
expect(within(row1After).getByDisplayValue('will-fail')).toBeInTheDocument()
|
||||
expect(alertCalls).toBe(0)
|
||||
@@ -317,7 +302,7 @@ describe('AZ-512 / AdminPage — inline detection-class edit', () => {
|
||||
// Arrange — capture POST; second GET returns 3 classes.
|
||||
const postCalls: { body: unknown }[] = []
|
||||
let getCount = 0
|
||||
const NEW_CLASS: DetectionClass = { id: 3, name: 'fresh', shortName: '', color: '#FF0000', maxSizeM: 7, photoMode: 0 }
|
||||
const NEW_CLASS: DetectionClass = { id: 3, name: 'fresh', shortName: '', color: '#FF9D3D', maxSizeM: 7, photoMode: 0 }
|
||||
server.use(
|
||||
http.post('/api/admin/classes', async ({ request }) => {
|
||||
postCalls.push({ body: await request.json() })
|
||||
@@ -332,13 +317,15 @@ describe('AZ-512 / AdminPage — inline detection-class edit', () => {
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// Act — scope to the classes table panel (both the class-add row and
|
||||
// the user-add row use placeholder="Name" + a `+` button; disambiguate
|
||||
// by walking up from the class-a cell to the enclosing panel).
|
||||
const classesPanel = (getRow('1').closest('table') as HTMLElement).parentElement as HTMLElement
|
||||
const addNameInput = within(classesPanel).getByPlaceholderText('Name') as HTMLInputElement
|
||||
await userEvent.type(addNameInput, 'fresh')
|
||||
await userEvent.click(within(classesPanel).getByRole('button', { name: '+' }))
|
||||
// Act — v2 layout: click the top "+ ADD" button to open an inline
|
||||
// add-row at the top of the table, type the name, click the save
|
||||
// (cyan checkmark, aria-label "Save") icon button.
|
||||
const classesPanel = getRow('1').closest('aside') as HTMLElement
|
||||
await userEvent.click(within(classesPanel).getByRole('button', { name: /^\+ add$|^\+ додати$/i }))
|
||||
const addRow = within(classesPanel).getByText('+', { selector: 'td' }).closest('tr') as HTMLElement
|
||||
const nameInput = within(addRow).getByPlaceholderText('Name') as HTMLInputElement
|
||||
await userEvent.type(nameInput, 'fresh')
|
||||
await userEvent.click(within(addRow).getByRole('button', { name: /^save$|^зберегти$/i }))
|
||||
|
||||
// Assert
|
||||
await waitFor(() => expect(postCalls.length).toBe(1))
|
||||
|
||||
Vendored
+7
-4
@@ -1,8 +1,11 @@
|
||||
import type { Aircraft } from '../../src/types'
|
||||
|
||||
// Three aircraft with one default, per `seed_aircraft` in test-data.md.
|
||||
// Six aircraft matching the v2 admin mockup. AC-001 is the default.
|
||||
export const seedAircraft: Aircraft[] = [
|
||||
{ id: 'aircraft-1', model: 'Bayraktar TB2', type: 'Plane', isDefault: true },
|
||||
{ id: 'aircraft-2', model: 'DJI Mavic 3', type: 'Copter', isDefault: false },
|
||||
{ id: 'aircraft-3', model: 'Leleka-100', type: 'Plane', isDefault: false },
|
||||
{ id: 'AC-001', model: 'DJI Mavic 3', type: 'Copter', isDefault: true, resolution: '4K', maxMinutes: 46 },
|
||||
{ id: 'AC-002', model: 'Matrice 300 RTK', type: 'Copter', isDefault: false, resolution: '4K', maxMinutes: 55 },
|
||||
{ id: 'AC-003', model: 'Leleka-100', type: 'FixedWing', isDefault: false, resolution: 'HD', maxMinutes: 180 },
|
||||
{ id: 'AC-004', model: 'Fixed Wing Scout', type: 'Plane', isDefault: false, resolution: '1080P', maxMinutes: 95 },
|
||||
{ id: 'AC-005', model: 'Autel EVO II Pro', type: 'Copter', isDefault: false, resolution: '6K', maxMinutes: 40 },
|
||||
{ id: 'AC-006', model: 'PD-2 Recon', type: 'FixedWing', isDefault: false, resolution: 'HD', maxMinutes: 600 },
|
||||
]
|
||||
|
||||
Vendored
+5
-5
@@ -5,11 +5,11 @@ import type { Flight } from '../../src/types'
|
||||
// AC-08 timing assertions.
|
||||
|
||||
export const seedFlights: Flight[] = [
|
||||
{ id: 'flight-1', name: 'Recon Alpha', createdDate: '2026-05-01T10:00:00Z', aircraftId: 'aircraft-1' },
|
||||
{ id: 'flight-2', name: 'Recon Bravo', createdDate: '2026-05-02T11:30:00Z', aircraftId: 'aircraft-1' },
|
||||
{ id: 'flight-3', name: 'Survey Charlie', createdDate: '2026-05-03T14:15:00Z', aircraftId: 'aircraft-2' },
|
||||
{ id: 'flight-4', name: 'Patrol Delta', createdDate: '2026-05-04T09:45:00Z', aircraftId: 'aircraft-3' },
|
||||
{ id: 'flight-5', name: 'Strike Echo', createdDate: '2026-05-05T16:00:00Z', aircraftId: 'aircraft-1' },
|
||||
{ id: 'flight-1', name: 'Recon Alpha', createdDate: '2026-05-01T10:00:00Z', aircraftId: 'AC-001' },
|
||||
{ id: 'flight-2', name: 'Recon Bravo', createdDate: '2026-05-02T11:30:00Z', aircraftId: 'AC-001' },
|
||||
{ id: 'flight-3', name: 'Survey Charlie', createdDate: '2026-05-03T14:15:00Z', aircraftId: 'AC-002' },
|
||||
{ id: 'flight-4', name: 'Patrol Delta', createdDate: '2026-05-04T09:45:00Z', aircraftId: 'AC-003' },
|
||||
{ id: 'flight-5', name: 'Strike Echo', createdDate: '2026-05-05T16:00:00Z', aircraftId: 'AC-001' },
|
||||
]
|
||||
|
||||
export const liveGpsFlightId = 'flight-1'
|
||||
|
||||
+28
-16
@@ -6,11 +6,23 @@
|
||||
"TCP",
|
||||
"UDP",
|
||||
"Esc",
|
||||
"OK"
|
||||
"OK",
|
||||
"//",
|
||||
"|",
|
||||
"▾",
|
||||
"▲",
|
||||
"▼",
|
||||
"—"
|
||||
],
|
||||
"src/components/Header.tsx": [
|
||||
"No flights",
|
||||
"Filter..."
|
||||
"Filter...",
|
||||
"— SELECT —",
|
||||
"LINK",
|
||||
"Toggle language",
|
||||
"UA",
|
||||
"EN",
|
||||
"⚙"
|
||||
],
|
||||
"src/components/HelpModal.tsx": [
|
||||
"How to Annotate",
|
||||
@@ -36,20 +48,20 @@
|
||||
],
|
||||
"src/features/admin/AdminPage.tsx": [
|
||||
"Name",
|
||||
"Color",
|
||||
"Frame Period Recognition",
|
||||
"Frame Recognition Seconds",
|
||||
"Probability Threshold",
|
||||
"Device Address",
|
||||
"Port",
|
||||
"Protocol",
|
||||
"Email",
|
||||
"Role",
|
||||
"Status",
|
||||
"Annotator",
|
||||
"Admin",
|
||||
"Viewer",
|
||||
"Password"
|
||||
"#",
|
||||
"+",
|
||||
"0.0.0.0",
|
||||
"P",
|
||||
"C",
|
||||
"F",
|
||||
"%",
|
||||
"NMEA",
|
||||
"UBX",
|
||||
"MAVLINK",
|
||||
"SAT",
|
||||
"MIN",
|
||||
"Increment",
|
||||
"Decrement"
|
||||
],
|
||||
"src/features/annotations/AnnotationsSidebar.tsx": [
|
||||
"Download annotation"
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { http } from 'msw'
|
||||
import { jsonResponse, noContent } from '../helpers'
|
||||
import type {
|
||||
AiRecognitionSettings,
|
||||
AiRecognitionTelemetry,
|
||||
GpsDeviceSettings,
|
||||
GpsDeviceTelemetry,
|
||||
} from '../../../src/types'
|
||||
|
||||
// Stateful MSW handlers for AI Recognition + GPS Device Link settings.
|
||||
// Seed mutates on PATCH so PING / RECONNECT / APPLY round-trips persist
|
||||
// within a session. `resetAdminSettingsSeed()` is invoked per-test from
|
||||
// tests/setup.ts so test isolation is preserved.
|
||||
|
||||
const DEFAULT_AI_SETTINGS: AiRecognitionSettings = {
|
||||
framesToRecognize: 4,
|
||||
minSecondsBetween: 2,
|
||||
minConfidence: 25,
|
||||
}
|
||||
|
||||
const DEFAULT_AI_TELEMETRY: AiRecognitionTelemetry = {
|
||||
model: 'YOLOV8-X',
|
||||
checkpoint: 'CKPT-241',
|
||||
lastRunAt: '2026-05-18T11:43:09Z',
|
||||
frames: 14228,
|
||||
avgConfidence: 71.4,
|
||||
}
|
||||
|
||||
const DEFAULT_GPS_SETTINGS: GpsDeviceSettings = {
|
||||
address: '192.168.1.100',
|
||||
port: 9001,
|
||||
protocol: 'NMEA',
|
||||
}
|
||||
|
||||
const DEFAULT_GPS_TELEMETRY: GpsDeviceTelemetry = {
|
||||
socket: 'UDP/192.168.1.100:9001',
|
||||
connected: true,
|
||||
fix: '3D',
|
||||
satellites: 11,
|
||||
hdop: 0.82,
|
||||
lastPacketMs: 12,
|
||||
}
|
||||
|
||||
let aiSettings: AiRecognitionSettings = { ...DEFAULT_AI_SETTINGS }
|
||||
let aiTelemetry: AiRecognitionTelemetry = { ...DEFAULT_AI_TELEMETRY }
|
||||
let gpsSettings: GpsDeviceSettings = { ...DEFAULT_GPS_SETTINGS }
|
||||
let gpsTelemetry: GpsDeviceTelemetry = { ...DEFAULT_GPS_TELEMETRY }
|
||||
|
||||
export function resetAdminSettingsSeed() {
|
||||
aiSettings = { ...DEFAULT_AI_SETTINGS }
|
||||
aiTelemetry = { ...DEFAULT_AI_TELEMETRY }
|
||||
gpsSettings = { ...DEFAULT_GPS_SETTINGS }
|
||||
gpsTelemetry = { ...DEFAULT_GPS_TELEMETRY }
|
||||
}
|
||||
|
||||
export const adminSettingsHandlers = [
|
||||
http.get('/api/admin/ai-settings', () =>
|
||||
jsonResponse({ settings: aiSettings, telemetry: aiTelemetry }),
|
||||
),
|
||||
|
||||
http.patch('/api/admin/ai-settings', async ({ request }) => {
|
||||
const body = (await request.json().catch(() => ({}))) as Partial<AiRecognitionSettings>
|
||||
aiSettings = { ...aiSettings, ...body }
|
||||
return jsonResponse({ settings: aiSettings, telemetry: aiTelemetry })
|
||||
}),
|
||||
|
||||
http.get('/api/admin/gps-settings', () =>
|
||||
jsonResponse({ settings: gpsSettings, telemetry: gpsTelemetry }),
|
||||
),
|
||||
|
||||
http.patch('/api/admin/gps-settings', async ({ request }) => {
|
||||
const body = (await request.json().catch(() => ({}))) as Partial<GpsDeviceSettings>
|
||||
gpsSettings = { ...gpsSettings, ...body }
|
||||
gpsTelemetry = {
|
||||
...gpsTelemetry,
|
||||
socket: `UDP/${gpsSettings.address}:${gpsSettings.port}`,
|
||||
}
|
||||
return jsonResponse({ settings: gpsSettings, telemetry: gpsTelemetry })
|
||||
}),
|
||||
|
||||
http.post('/api/admin/gps-settings/ping', () => noContent()),
|
||||
|
||||
http.post('/api/admin/gps-settings/reconnect', () => {
|
||||
gpsTelemetry = { ...gpsTelemetry, connected: true, lastPacketMs: 0 }
|
||||
return jsonResponse({ settings: gpsSettings, telemetry: gpsTelemetry })
|
||||
}),
|
||||
]
|
||||
@@ -64,8 +64,14 @@ export const flightsHandlers = [
|
||||
return jsonResponse({ id: params.id, ...body })
|
||||
}),
|
||||
|
||||
// POST accepts both plural and singular paths. Production convention is
|
||||
// plural (REST collection); singular kept as a backward-compat alias.
|
||||
http.post('/api/flights/aircrafts', async ({ request }) => {
|
||||
const body = (await request.json()) as Record<string, unknown>
|
||||
return jsonResponse({ id: 'AC-NEW', ...body }, { status: 201 })
|
||||
}),
|
||||
http.post('/api/flights/aircraft', async ({ request }) => {
|
||||
const body = (await request.json()) as Record<string, unknown>
|
||||
return jsonResponse({ id: 'aircraft-new', ...body }, { status: 201 })
|
||||
return jsonResponse({ id: 'AC-NEW', ...body }, { status: 201 })
|
||||
}),
|
||||
]
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { adminHandlers } from './admin'
|
||||
import { adminSettingsHandlers } from './admin-settings'
|
||||
import { flightsHandlers } from './flights'
|
||||
import { annotationsHandlers } from './annotations'
|
||||
import { detectHandlers } from './detect'
|
||||
@@ -12,6 +13,7 @@ import { tilesHandlers } from './tiles'
|
||||
// the seeded baseline. Per-test overrides land via `server.use(...)`.
|
||||
export const defaultHandlers = [
|
||||
...adminHandlers,
|
||||
...adminSettingsHandlers,
|
||||
...flightsHandlers,
|
||||
...annotationsHandlers,
|
||||
...detectHandlers,
|
||||
@@ -23,6 +25,7 @@ export const defaultHandlers = [
|
||||
|
||||
export {
|
||||
adminHandlers,
|
||||
adminSettingsHandlers,
|
||||
flightsHandlers,
|
||||
annotationsHandlers,
|
||||
detectHandlers,
|
||||
|
||||
@@ -4,6 +4,7 @@ import { cleanup } from '@testing-library/react'
|
||||
import { server } from './msw/server'
|
||||
import { setToken, setNavigateToLogin } from '../src/api'
|
||||
import { __resetBootstrapInflightForTests } from '../src/auth'
|
||||
import { resetAdminSettingsSeed } from './msw/handlers/admin-settings'
|
||||
|
||||
// JSDOM polyfills for browser APIs production code touches at mount time.
|
||||
// These are no-op stubs — tests that exercise the actual behavior install
|
||||
@@ -61,6 +62,8 @@ afterEach(() => {
|
||||
// AZ-510 — clear AuthProvider's module-scoped in-flight bootstrap promise so
|
||||
// a never-resolving fixture in test N does not leak into test N+1.
|
||||
__resetBootstrapInflightForTests()
|
||||
// v2 admin settings — module-scoped seed mutates on PATCH; reset between tests.
|
||||
resetAdminSettingsSeed()
|
||||
})
|
||||
|
||||
afterAll(() => {
|
||||
|
||||
Reference in New Issue
Block a user