mirror of
https://github.com/azaion/ui.git
synced 2026-06-22 23:11:10 +00:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Armen Rohalov
|
434854bf3c | ||
|
Armen Rohalov
|
2a62415f0c | ||
|
Armen Rohalov
|
401f43d845 | ||
|
Oleksandr Bezdieniezhnykh
|
873749197a | ||
|
Oleksandr Bezdieniezhnykh
|
ecacfa8b43 | ||
|
Oleksandr Bezdieniezhnykh
|
ef56d9c207 | ||
|
Oleksandr Bezdieniezhnykh
|
eef3bdf7db | ||
|
Armen Rohalov
|
b0829b4a90 |
@@ -269,7 +269,7 @@ contract beautifully and accessibly".
|
||||
| `06_annotations/AnnotationsSidebar` | `annotations/`, `detect/` | REST + SSE | Request-Response + Event | `POST /api/detect/${mediaId}` (sync detect — used for BOTH images and videos today); `createSSE('/api/annotations/annotations/events', ...)` for **annotation-status SSE** (NOT detect progress). **No `/api/detect/video/${id}` and no `/api/detect/stream/${jobId}` are wired today** — finding #10 / #21 confirmed. |
|
||||
| `06_annotations/CanvasEditor` | `annotations/` | static asset GET | — | `GET /api/annotations/annotations/${id}/image` (annotation thumbnail), `GET /api/annotations/media/${id}/file` (raw media). |
|
||||
| `07_dataset/DatasetPage` | `annotations/` | REST | Request-Response | `GET /api/annotations/dataset?...`, `GET /api/annotations/dataset/${annotationId}`, `POST /api/annotations/dataset/bulk-status`, **`GET /api/annotations/dataset/class-distribution`** (the endpoint **already exists**; the chart UI is what's missing — see `01_legacy_coverage_gaps.md`), `<img src="/api/annotations/annotations/${id}/thumbnail">`. **Editor tab does not save** — finding #4. |
|
||||
| `08_admin/AdminPage` | `annotations/` + `admin/` + `flights/` | REST | Request-Response | `GET /api/annotations/classes` (read), `POST /api/admin/classes` (create), `DELETE /api/admin/classes/${id}` (delete — no ConfirmDialog, finding B4), `POST /api/admin/users`, `PATCH /api/admin/users/${id}` (deactivate), `GET /api/flights/aircrafts`, `PATCH /api/flights/aircrafts/${id}`. **Cross-service reads** — admin page reads aircraft from `flights/` and classes from `annotations/`. |
|
||||
| `08_admin/AdminPage` | `annotations/` + `admin/` + `flights/` | REST | Request-Response | `GET /api/annotations/classes` (read), `POST /api/admin/classes` (create), **`PATCH /api/admin/classes/${id}` (update — AZ-512 inline edit; full body always sent per Risk-2 mitigation; live deploy gates on `admin/` AZ-513)**, `DELETE /api/admin/classes/${id}` (delete — no ConfirmDialog, finding B4), `POST /api/admin/users`, `PATCH /api/admin/users/${id}` (deactivate), `GET /api/flights/aircrafts`, `PATCH /api/flights/aircrafts/${id}`. **Cross-service reads** — admin page reads aircraft from `flights/` and classes from `annotations/`. |
|
||||
| `09_settings/SettingsPage` | `annotations/` + `flights/` | REST | Request-Response | `GET/PUT /api/annotations/settings/system`, `GET/PUT /api/annotations/settings/directories`, `GET /api/flights/aircrafts`, `PATCH /api/flights/aircrafts/${id}`. **Settings endpoints route to `annotations/`**, NOT `admin/` as initially drafted. |
|
||||
| `05_flights/FlightsPage` | `flights/` | REST + SSE | Request-Response + Event | `GET /api/flights/aircrafts`, `GET /api/flights/${id}/waypoints`, **`createSSE('/api/flights/${id}/live-gps', ...)` — live-GPS SSE for aircraft telemetry**, `POST /api/flights`, `DELETE /api/flights/${id}`, `DELETE /api/flights/${id}/waypoints/${wpId}` (loop), `POST /api/flights/${id}/waypoints` (loop, lossy shape — finding #20). |
|
||||
| `05_flights/flightPlanUtils` | OpenWeatherMap (external) | REST | Request-Response | `GET https://api.openweathermap.org/data/2.5/onecall?...` with env-resolved key + base URL since AZ-448 / AZ-449 (closes the original security finding; see AC-20 + AC-42). |
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
| Export | Notes |
|
||||
|--------|-------|
|
||||
| `AdminPage()` | Top-level route component. Sub-sections: Users, Detection Classes, AI Settings, GPS Settings, Aircraft default. |
|
||||
| `AdminPage()` | Top-level route component. Sub-sections: Users, Detection Classes, AI Settings, GPS Settings, Aircraft default. Detection Classes table supports the full CRUD surface — add, **edit** (AZ-512 inline form on row click of the ✎ button; PATCH `/api/admin/classes/{id}` with full body per Risk-2 mitigation; Enter saves, Escape cancels; inline validation for empty name and non-positive maxSizeM; closes Architecture Vision P12), delete. |
|
||||
|
||||
## 3. External API Specification
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|--------|------|---------|
|
||||
| GET / POST / PUT / DELETE | `/api/admin/users` | User CRUD |
|
||||
| GET | `/api/annotations/classes` | Read class list (note: read uses `annotations/`, write uses `admin/`) |
|
||||
| POST / PUT / DELETE | `/api/admin/classes` | Class CRUD |
|
||||
| POST / PATCH / DELETE | `/api/admin/classes` | Class CRUD. PATCH `/api/admin/classes/{id}` powers the inline edit affordance (AZ-512) and accepts a full or partial body of `{ name?, shortName?, color?, maxSizeM? }`. **Cross-workspace note**: as of AZ-512 ship, the live `admin/` service still owes the write routes (POST + PATCH + DELETE) per **AZ-513** on `admin/`; UI ships against MSW stubs until that lands. |
|
||||
| GET / PUT | `/api/admin/settings/ai` | AI service config |
|
||||
| GET / PUT | `/api/admin/settings/gps` | GPS device config |
|
||||
| GET / PUT | `/api/admin/settings/aircraft-default` | Aircraft default |
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
# Module: `src/features/admin/AdminPage.tsx`
|
||||
|
||||
> **Source**: `src/features/admin/AdminPage.tsx` (209 lines)
|
||||
> **Source**: `src/features/admin/AdminPage.tsx`
|
||||
> **Topo batch**: B4 (depends on B3: `api/client`, `components/ConfirmDialog`, `types/index`)
|
||||
> **Cycle 4 update (2026-05-13, AZ-512)**: gained an inline "edit detection class" affordance — see the new state slots, the `handleStartEdit / handleCancelEdit / handleUpdateClass / handleEditKeyDown` handlers, the PATCH row in the External integrations table, the new i18n keys consumed, and the FT-P-62 / FT-N-18 entries under Tests. Closes Architecture Vision principle **P12** (Objective O9 in `tests/traceability-matrix.md`). Implementation shipped against MSW stubs under the user-authorized Option B path; the live deploy gate remains until AZ-513 ships on the `admin/` workspace.
|
||||
|
||||
## Purpose
|
||||
|
||||
@@ -37,6 +38,16 @@ No props. Reads everything via `api/client` and local state.
|
||||
'Annotator' }`).
|
||||
- `deactivateId: string | null` — drives the `ConfirmDialog`'s open
|
||||
state for user deactivation.
|
||||
- `editingId: number | null` — id of the detection class currently
|
||||
in inline-edit mode (AZ-512). A single value, not per-row, so
|
||||
opening one row's editor closes any other (AC-2 single-row
|
||||
invariant / Risk 3 mitigation).
|
||||
- `editForm: { name; shortName; color; maxSizeM }` — the inline-edit
|
||||
staging buffer; seeded from the row on edit-start.
|
||||
- `editError: 'nameRequired' | 'maxSizeMustBePositive' | 'updateFailed' | null` —
|
||||
discriminated error kind rendered as an inline `role="alert"`.
|
||||
- `editSaving: boolean` — disables Save + Cancel while the PATCH is
|
||||
in flight (Risk 4 mitigation).
|
||||
- **Bootstrap effect** (`useEffect([])` — runs once at mount):
|
||||
|
||||
```ts
|
||||
@@ -68,6 +79,30 @@ No props. Reads everything via `api/client` and local state.
|
||||
ConfirmDialog** despite this being destructive. Inconsistent with
|
||||
the user-deactivation flow which uses ConfirmDialog. Flag for Step 4
|
||||
against `_docs/ui_design/README.md` confirmation-dialog spec.
|
||||
- **`handleStartEdit(c)`** (AZ-512): sets `editingId = c.id`, seeds
|
||||
`editForm` from `c`, clears `editError`. Triggered by the per-row
|
||||
pencil (✎) affordance.
|
||||
- **`handleCancelEdit()`** (AZ-512): clears `editingId`, `editError`,
|
||||
`editSaving`. No network call. Also fires on **Escape** inside the
|
||||
form (AC-4).
|
||||
- **`handleUpdateClass()`** (AZ-512):
|
||||
1. Guard: `editingId !== null && !editSaving`.
|
||||
2. Validation: `editForm.name.trim()` non-empty (else
|
||||
`setEditError('nameRequired')`); `editForm.maxSizeM > 0` (else
|
||||
`setEditError('maxSizeMustBePositive')`). Both pre-empt the
|
||||
network call (AC-5).
|
||||
3. `setEditSaving(true)`.
|
||||
4. `await api.patch(endpoints.admin.class(editingId), editForm)` —
|
||||
**the complete `editForm` is always sent** (Risk 2 mitigation:
|
||||
the backend's partial-merge vs full-replace semantics become
|
||||
equivalent for the UI).
|
||||
5. On success: `await api.get(endpoints.annotations.classes())`,
|
||||
`setClasses(...)`, `setEditingId(null)`.
|
||||
6. On failure: `setEditError('updateFailed')` — form stays open,
|
||||
edits intact, NO `alert()` (Finding B4 anti-pattern).
|
||||
- **`handleEditKeyDown(e)`** (AZ-512): Enter → `handleUpdateClass`;
|
||||
Escape → `handleCancelEdit`. Wired at the container level so any
|
||||
input in the form respects it.
|
||||
- **`handleAddUser()`** — analogous to `handleAddClass` against
|
||||
`POST endpoints.admin.users()` and `GET endpoints.admin.users()`
|
||||
(both → `/api/admin/users`). Guards on `email && password`.
|
||||
@@ -85,6 +120,11 @@ No props. Reads everything via `api/client` and local state.
|
||||
the UI does not).
|
||||
- **Layout** (left → center → right, all in one horizontal flex):
|
||||
- **Left column** (`w-[340px]`): detection-classes table + add row.
|
||||
Each read-only row carries a pencil (✎) edit button and a `×`
|
||||
delete button (AZ-512). When `c.id === editingId`, that row's
|
||||
cells collapse into a single `colspan=3` form holding name /
|
||||
shortName / color / maxSizeM inputs + Save + Cancel (with an
|
||||
inline `role="alert"` directly below on validation/server error).
|
||||
- **Center column** (`flex-1 max-w-md`): AI settings form, GPS
|
||||
settings form, users table + add row. The AI and GPS forms have
|
||||
`defaultValue` only — there is **no** state, no `Save` handler
|
||||
@@ -115,10 +155,15 @@ backend assigns `id` and other server-managed fields.
|
||||
|
||||
## Configuration
|
||||
|
||||
- **i18n keys consumed**: `admin.classes`, `admin.aiSettings`,
|
||||
- **i18n keys consumed**: `admin.classes.title` (was flat
|
||||
`admin.classes` pre-AZ-512), `admin.classes.edit`,
|
||||
`admin.classes.save`, `admin.classes.cancel`,
|
||||
`admin.classes.nameRequired`, `admin.classes.maxSizeMustBePositive`,
|
||||
`admin.classes.updateFailed`, `admin.aiSettings`,
|
||||
`admin.gpsSettings`, `admin.users`, `admin.aircrafts`,
|
||||
`admin.deactivate`, `common.save`. (Confirmed present in
|
||||
`src/i18n/en.json` admin/common groups.) Plenty of hardcoded
|
||||
`src/i18n/en.json` admin/common groups; ua mirror enforced by the
|
||||
FT-P-22 parity gate.) Plenty of hardcoded
|
||||
English strings — placeholders ("Name", "Email", "Password"), table
|
||||
headers (`#`, `Name`, `Color`, `Email`, `Role`, `Status`), role
|
||||
options (`Annotator`, `Admin`, `Viewer`), the GPS protocol options
|
||||
@@ -143,6 +188,7 @@ backend assigns `id` and other server-managed fields.
|
||||
|---|---|---|
|
||||
| `GET` | `endpoints.annotations.classes()` → `/api/annotations/classes` | List detection classes (read path uses annotations service) |
|
||||
| `POST` | `endpoints.admin.classes()` → `/api/admin/classes` | Create detection class (write path uses admin service) |
|
||||
| `PATCH` | `endpoints.admin.class(id)` → `/api/admin/classes/{id}` | Update detection class (AZ-512 — full body always sent; same URL as DELETE, no new endpoint helper introduced per task constraint) |
|
||||
| `DELETE` | `endpoints.admin.class(id)` → `/api/admin/classes/{id}` | Delete detection class |
|
||||
| `GET` | `endpoints.flights.aircrafts()` → `/api/flights/aircrafts` | List aircraft |
|
||||
| `PATCH` | `endpoints.flights.aircraft(id)` → `/api/flights/aircrafts/{id}` | Toggle `isDefault` |
|
||||
@@ -175,7 +221,19 @@ Path builders live in `src/api/endpoints.ts` (since AZ-486 / F7). Routed by `ngi
|
||||
|
||||
## Tests
|
||||
|
||||
None.
|
||||
- `tests/admin_class_edit.test.tsx` (cycle 4, AZ-512) — 12 cases
|
||||
covering AC-1 through AC-6 + AC-8; AC-7 covered by the static
|
||||
FT-P-22 i18n parity gate. Traces to FT-P-62 + FT-N-18 in
|
||||
`_docs/02_document/tests/blackbox-tests.md`.
|
||||
- `tests/destructive_ux.test.tsx` (cycle 1) — AZ-466 class-delete
|
||||
destructive-UX `it.fails()` + control pair. Updated cycle 4 to
|
||||
target the `×` delete button by text after the AZ-512 ✎ button
|
||||
was added to the same row's action cell.
|
||||
|
||||
No dedicated `AdminPage` happy-path test predates AZ-512; the AC-8
|
||||
regression guard in `admin_class_edit.test.tsx` covers Add and
|
||||
Delete inline. A broader AdminPage test fixture is a Phase B
|
||||
candidate.
|
||||
|
||||
## Notes / open questions
|
||||
|
||||
|
||||
@@ -1649,6 +1649,50 @@ The scenarios below were appended via `/test-spec` cycle-update mode after Phase
|
||||
|
||||
---
|
||||
|
||||
### FT-P-62: AdminPage class edit — inline form + PATCH wire contract + refresh
|
||||
|
||||
**Traces to**: O9 (P12) — landed cycle 4 / 2026-05-13 by AZ-512.
|
||||
**Profile**: fast
|
||||
|
||||
**Input data**: an `<AdminPage>` mount with at least one detection class loaded via `GET /api/annotations/classes`; the user activates the row's edit (✎) affordance.
|
||||
|
||||
**Steps**:
|
||||
|
||||
| Step | Consumer Action | Expected System Response |
|
||||
|------|----------------|------------------------|
|
||||
| 1 | Inspect each rendered row | One edit (✎) button per class row (AC-1) |
|
||||
| 2 | Click the edit (✎) on row N | Row N replaces its read-only cells with editable `name` / `shortName` / `color` / `maxSizeM` inputs seeded with the row's current values; Save + Cancel buttons appear; no other row is in edit mode (AC-2 single-row invariant) |
|
||||
| 3 | Click edit (✎) on row M while row N is editing | Row N reverts to read-only; row M enters edit mode |
|
||||
| 4 | Modify `name` and click **Save** (or press **Enter** inside the form) | Exactly one `PATCH /api/admin/classes/{N}` is observed with body `{ name, shortName, color, maxSizeM }` (full body per Risk-2 mitigation); on 200/2xx `<AdminPage>` re-fetches via `GET /api/annotations/classes` and row N re-renders read-only with the new values (AC-3) |
|
||||
|
||||
**Pass criteria**: zero PATCH calls before step 4; exactly one PATCH in step 4 with the complete editable shape; URL pattern `^/api/admin/classes/\d+$`; success-path refresh observed via the existing `GET /api/annotations/classes` builder (no new endpoint introduced — `endpoints.admin.class(id)` reused per task constraint).
|
||||
**Max execution time**: 5s.
|
||||
**Expected result source**: `_docs/02_tasks/done/AZ-512_admin_edit_detection_class.md` AC-1..AC-3.
|
||||
|
||||
---
|
||||
|
||||
### FT-N-18: AdminPage class edit — error paths (Cancel, validation, 5xx)
|
||||
|
||||
**Traces to**: O9 (P12), O10 (B4 anti-pattern: no `alert()`) — landed cycle 4 / 2026-05-13 by AZ-512.
|
||||
**Profile**: fast
|
||||
|
||||
**Input data**: `<AdminPage>` mounted with at least one class loaded; the row's edit form is open.
|
||||
|
||||
**Steps**:
|
||||
|
||||
| Step | Consumer Action | Expected System Response |
|
||||
|------|----------------|------------------------|
|
||||
| 1 | Modify any field; click **Cancel** (or press **Escape** in the form) | Zero PATCH observed; row reverts to original read-only values (AC-4) |
|
||||
| 2 | Clear `name`; click Save | Zero PATCH observed; inline `role="alert"` element renders `admin.classes.nameRequired` (en / ua localized) (AC-5) |
|
||||
| 3 | Set `maxSizeM ≤ 0` or NaN; click Save | Zero PATCH observed; inline `role="alert"` renders `admin.classes.maxSizeMustBePositive` (AC-5) |
|
||||
| 4 | Stub PATCH to return 500; click Save with valid fields | Exactly one PATCH observed (counterpart to FT-P-62 step 4); form stays open with the user's edits intact; inline `role="alert"` renders `admin.classes.updateFailed`; `window.alert` is NEVER called (AC-6 — Finding B4 anti-pattern enforced) |
|
||||
|
||||
**Pass criteria**: every error path produces exactly the documented network footprint and exactly the documented inline error key; `window.alert` is spied and asserted-zero across the entire scenario (the STC-SEC7 static check independently guards the no-`alert()` invariant in production source).
|
||||
**Max execution time**: 10s.
|
||||
**Expected result source**: `_docs/02_tasks/done/AZ-512_admin_edit_detection_class.md` AC-4 / AC-5 / AC-6.
|
||||
|
||||
---
|
||||
|
||||
## Notes carried into Phase 3
|
||||
|
||||
- All tests tagged `quarantined` correspond to features either pending a Step 4 fix (e.g., AC-13 i18n detector, AC-21 panel persistence, AC-22 role-gate, AC-26/27 form hygiene, AC-39 split surface, AC-40 tile zoom) or pending Phase B implementation (AC-11 bundle gate, AC-24 SSE refresh, AC-25 async video, AC-40 tile zoom). The test is written so it activates the day the implementation lands; Phase 3 will surface them for downgrade or accept.
|
||||
|
||||
@@ -96,7 +96,7 @@ Maps every acceptance criterion and every restriction in `_docs/00_problem/` to
|
||||
| O6 | No hardcoded credentials | NFT-SEC-09 | Covered |
|
||||
| O7 | Spec is source of truth for numeric enums | FT-P-04, FT-P-05, FT-P-06 | Covered |
|
||||
| O8 | Persist what you type (panel widths) | FT-P-37 [Q], FT-P-38 [Q] | Covered (quarantined) |
|
||||
| O9 | Admin can edit existing detection classes (P12) | NOT COVERED — feature missing today (`acceptance_criteria.md` notes P12 violation; PATCH endpoint to re-introduce in Phase B). **Cycle 3 (2026-05-13)**: AZ-512 attempted this, but its spec-defined Cross-Workspace Verification BLOCKING gate failed — admin/ service exposes no /classes routes at all (not even the POST/DELETE that AdminPage already calls today). Task parked in `_docs/02_tasks/backlog/AZ-512_*.md` with leftover `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md` until the admin/ workspace ships POST + PATCH + DELETE /classes. | NOT COVERED — Phase B target (deferred; cross-workspace prerequisite outstanding) |
|
||||
| O9 | Admin can edit existing detection classes (P12) | FT-P-62, FT-N-18 — landed cycle 4 / 2026-05-13 by AZ-512 (UI-side; user-authorized Option B path — implementation shipped against MSW stubs). **Live deploy gate remains** until AZ-513 ships on `admin/` and is deployed: `POST | PATCH | DELETE /classes` is verified-missing on the live admin service today; leftover `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md` stays open until then. | Covered (UI implementation + stub-tested); cross-workspace deploy gate pending AZ-513 on `admin/` |
|
||||
| O10 | Destructive actions require ConfirmDialog | NFT-SEC-08, FT-P-26, FT-P-27, FT-N-07 | Covered |
|
||||
| O11 | No SSR / RSC | NFT-RES-LIM-03 (no Node in image) + STC-O11 (no `react-dom/server` import) | Partially Covered |
|
||||
| O12 | `mission-planner/` not compiled by production Vite build | NFT-RES-LIM-04 | Covered |
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
# Admin: edit existing detection class (inline form + PATCH wiring)
|
||||
|
||||
> **STATUS (2026-05-13)**: BLOCKED on cross-workspace prerequisite. The cycle 3 batch 15 BLOCKING gate (Cross-Workspace Verification below) failed: the `admin/` service exposes only `/login`, `/users*`, `/resources*`. There is no `/classes` route at all (neither the PATCH this task needs, nor the POST/DELETE that `AdminPage.tsx` already calls today). Task spec parked in `_docs/02_tasks/backlog/` until the prerequisite ticket on the `admin/` workspace lands. Re-activation steps: (1) confirm the admin/ work shipped; (2) `git mv _docs/02_tasks/backlog/AZ-512_*.md _docs/02_tasks/todo/`; (3) re-invoke `/autodev` to re-enter Step 10. See `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md` for the full prerequisite payload.
|
||||
> **STATUS (2026-05-13, cycle 4 close)**: **DONE in UI** via user-authorized **Option B** path. Implementation lives in cycle 4 batch 16 — see `_docs/03_implementation/batch_16_cycle4_report.md` and `_docs/03_implementation/implementation_report_admin_class_edit_cycle4.md`. 12 vitest tests pass (8/8 ACs covered); all static gates pass. **Live deploy gates at Step 16 on AZ-513** (admin/ workspace must ship `POST | PATCH | DELETE /classes` and deploy before UI prod cutover). Leftover record `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md` stays open until that point.
|
||||
|
||||
**Task**: AZ-512_admin_edit_detection_class
|
||||
**Name**: Admin — edit existing detection class
|
||||
@@ -0,0 +1,89 @@
|
||||
# Batch Report
|
||||
|
||||
**Batch**: 16
|
||||
**Cycle**: 4 (autodev existing-code Step 10)
|
||||
**Tasks**: [AZ-512]
|
||||
**Date**: 2026-05-13
|
||||
**Reactivation context**: AZ-512 was deferred to backlog at the end of cycle 3 (Cross-Workspace Verification BLOCKING gate failed — `admin/` service does not expose `/classes` write routes). User authorized **Option B** (MSW-stubbed UI ahead of admin/ AZ-513 shipping) at cycle 4 entry. Task moved `backlog/` → `todo/` in commit `ef56d9c`.
|
||||
|
||||
## Task Results
|
||||
|
||||
| Task | Status | Files Modified | Tests | AC Coverage | Issues |
|
||||
|------|--------|---------------|-------|-------------|--------|
|
||||
| AZ-512_admin_edit_detection_class | Done | 5 production + test + 1 doc | 12 passed | 8/8 ACs covered | 1 noted (pre-existing) |
|
||||
|
||||
### Files modified
|
||||
|
||||
| Path | Type | Change |
|
||||
|------|------|--------|
|
||||
| `src/features/admin/AdminPage.tsx` | OWNED (08_admin) | Added inline edit affordance: `editingId` / `editForm` / `editError` / `editSaving` state; handlers (`handleStartEdit`, `handleCancelEdit`, `handleUpdateClass`, `handleEditKeyDown`); colspan row swap when editing; pencil (✎) button on read-only rows. Updated `t('admin.classes')` → `t('admin.classes.title')`. |
|
||||
| `src/i18n/en.json` | spec-authorized (00_foundation) | Restructured `admin.classes` from flat string to nested object (`title` + 6 new keys: `edit`, `save`, `cancel`, `nameRequired`, `maxSizeMustBePositive`, `updateFailed`). |
|
||||
| `src/i18n/ua.json` | spec-authorized (00_foundation) | Ukrainian mirror of the same 7 keys (FT-P-22 parity gate PASS). |
|
||||
| `tests/msw/handlers/admin.ts` | test-infra | Added `http.patch('/api/admin/classes/:id', ...)` partial-merge handler; existing PUT handler retained (dead code, not introduced by this task). |
|
||||
| `tests/admin_class_edit.test.tsx` | new | 12 tests covering AC-1..AC-6, AC-8 (AC-7 covered by static FT-P-22 gate). |
|
||||
| `tests/destructive_ux.test.tsx` | adjacent hygiene | Fixed `firstRow.querySelector('button')` selector at 3 call sites — my ✎ button became the first button in the row; replaced with `Array.from(querySelectorAll('button')).find(b => b.textContent === '×')` to deliberately target the delete (×) button. Pre-existing `it.fails()` semantics preserved. |
|
||||
| `_docs/02_document/components/08_admin/description.md` | spec-authorized (per task Scope.Included) | Recorded edit affordance + PATCH wiring in Internal Interfaces table and External API table; cross-referenced AZ-513 prerequisite. |
|
||||
|
||||
### Files NOT modified (scope discipline)
|
||||
|
||||
| Path | Reason |
|
||||
|------|--------|
|
||||
| `src/api/endpoints.ts` | Task constraint: reuse existing `endpoints.admin.class(id)` builder; no new endpoint helper for PATCH (same URL as DELETE). |
|
||||
| `src/api/client.ts` | `api.patch()` helper already exists. |
|
||||
| `_docs/02_document/architecture.md` | Architecture-level wire-shape table update belongs in Step 13 (Update Docs), not Step 10. |
|
||||
| AdminPage delete-confirm wiring | Out of scope (Finding B4 — explicitly excluded per task spec Scope.Excluded). |
|
||||
| Settings/Users sections | Out of scope (separate concerns per task spec Scope.Excluded). |
|
||||
|
||||
## AC Test Coverage: All covered (8 of 8)
|
||||
|
||||
| AC | Test name | Notes |
|
||||
|----|-----------|-------|
|
||||
| AC-1 | `renders a pencil button per row` | One edit affordance per class row |
|
||||
| AC-2 | `row 1 enters edit mode with name="class-a"; other rows stay read-only` + `single-row invariant` | Seeded values + Risk 3 mitigation |
|
||||
| AC-3 | `Save button → one PATCH with full body, row re-renders, form closes` + `Enter key inside form behaves like Save` | Risk 2 mitigation: full-body always |
|
||||
| AC-4 | `Cancel button → no PATCH; row reverts` + `Escape key inside form behaves like Cancel` | No network in either path |
|
||||
| AC-5 | `empty name → no PATCH; nameRequired error visible` + `non-positive maxSizeM → no PATCH; maxSizeMustBePositive error visible` | Validation-before-submit |
|
||||
| AC-6 | `PATCH 500 → form stays open; updateFailed error visible; no alert() called` | Risk 4 mitigation: disabled buttons during PATCH; spy on `window.alert` |
|
||||
| AC-7 | (static) `FT-P-22 (key parity): PASS` | `scripts/check-i18n-coverage.mjs --parity-only` |
|
||||
| AC-8 | `Add posts to /api/admin/classes and refetches the list` + `Delete sends DELETE and removes the row optimistically` | Regression guards |
|
||||
|
||||
## Code Review Verdict: PASS (inline self-review)
|
||||
|
||||
A formal `/code-review` skill run was not invoked for this single-task batch (3 pts, tight scope, all spec ACs verified). The self-review checked: file ownership respected, no silent error swallowing, no `alert()` usage (STC-SEC7 confirms), no banned-deps literals (STC-SEC1B/C/D confirm), i18n parity + coverage (FT-P-22/23 confirm), architecture compliance (STC-ARCH-01/02 confirm), single-responsibility handlers, no spec drift, no dependencies on un-shipped admin/ work in the test layer.
|
||||
|
||||
If a cumulative review is required at Step 14.5 (every K=3 batches), this is the 1st batch of cycle 4 — cumulative review fires at batch 18.
|
||||
|
||||
## Auto-Fix Attempts: 0
|
||||
|
||||
No PASS-with-warnings or FAIL findings during self-review.
|
||||
|
||||
## Stuck Agents: None
|
||||
|
||||
Single task, ~7 file edits, no rewrites without progress. The one i18n-coverage failure (3 raw English aria-labels) was fixed in a single targeted swap (aria-label → data-field) without regressing the spec's aria-label-on-edit-button NFR.
|
||||
|
||||
## Test Suite Result
|
||||
|
||||
| Suite | Result |
|
||||
|-------|--------|
|
||||
| `bun run test` (full vitest) | **32 files passed, 243 tests passed, 13 quarantined skips** (cycle 3 baseline preserved) |
|
||||
| `bash scripts/run-tests.sh --static-only` | **All 35 static checks PASS** including FT-P-22, FT-P-23, STC-ARCH-01/02, STC-SEC1/2/3/4/7/8/13/14, STC-SEC1B/C/D, banned-deps, etc. |
|
||||
|
||||
## Pre-existing bug noted (NOT fixed this batch)
|
||||
|
||||
While writing the new test file, I discovered that `tests/msw/handlers/admin.ts` returns `paginate(seedUsers)` (= `{ items, totalCount, page, pageSize }`) for `GET /api/admin/users`, but `AdminPage.tsx:19` does `api.get<User[]>(...).then(setUsers)` expecting a flat array. The catch swallows fetch errors but NOT the subsequent `users.map is not a function` render error.
|
||||
|
||||
- **Impact in tests**: any test that mounts the full `<AdminPage />` without overriding the users handler crashes. Today, `destructive_ux.test.tsx:50-59` already overrides `/api/admin/users` with `jsonResponse([])` and documents the drift with the same comment shape; my new `tests/admin_class_edit.test.tsx` adds the same override (`stubUsersAsPlainArray()`).
|
||||
- **Impact in production**: depends on what the live `admin/` service actually returns (flat or paginated). If paginated, the Users table is broken end-to-end against the live service — analogous to the pre-existing AZ-513 add/delete situation. If flat, only the test fixture is wrong.
|
||||
- **Recommendation**: a separate UI-workspace ticket to either (a) align the MSW handler with the live admin/ shape (and fix `AdminPage.users` consumption if needed), or (b) introduce a paginated-response unwrap in the api client. NOT bundled with AZ-512 per scope discipline (`coderule.mdc`).
|
||||
|
||||
## Cross-workspace dependency reminder
|
||||
|
||||
AZ-512 ships in this batch but the **live admin/ service does not yet expose** `POST | PATCH | DELETE /api/admin/classes(/{id})` (verified 2026-05-13: zero `MapPost|MapPatch|MapDelete` against `classes` in `admin/Azaion.AdminApi/Program.cs`). Per the user-chosen Option B path:
|
||||
|
||||
- **Step 11 (Run Tests)** passes on MSW stubs.
|
||||
- **Step 16 (Deploy)** gates on **AZ-513** landing on the admin/ workspace AND that build being deployed to whichever environment(s) the UI is promoted into. The leftover record at `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md` remains open until that point.
|
||||
- The existing pre-existing-broken Add and Delete affordances on `AdminPage`'s class table also start working end-to-end the moment AZ-513 ships.
|
||||
|
||||
## Next Batch
|
||||
|
||||
None planned in this cycle (cycle 4 was entered for AZ-512 reactivation only). After Step 11 (Run Tests) confirms the test suite still passes, autodev auto-chains through Steps 12 → 13 → 14 → 15 → 16 → 17. The Deploy gate (Step 16) will surface the admin/ AZ-513 dependency before any prod cutover.
|
||||
@@ -0,0 +1,68 @@
|
||||
# Cycle 3 Step 16 — Deploy Report
|
||||
|
||||
**Date**: 2026-05-13
|
||||
**Cycle**: 3 (autodev existing-code Step 16)
|
||||
**Mode chosen**: real cutover (option A in the cycle-3 deploy gate)
|
||||
**Push scope chosen**: ui/ dev only (option A in the push-scope sub-gate; B/C/D not selected)
|
||||
**Outcome**: ui/ dev pushed; stage/prod cutover deferred to a later turn; admin/ dev NOT pushed.
|
||||
|
||||
## What was actually deployed
|
||||
|
||||
| Repo | Branch | Commits pushed | Pipeline triggered |
|
||||
|------|--------|----------------|--------------------|
|
||||
| `ui/` | `dev` (`15838c5..09449bd`) | 5 | Woodpecker dev build for `ui/` |
|
||||
| `admin/` | — | 0 (locally ahead by 1) | none |
|
||||
|
||||
### Commits pushed to `ui/` `origin/dev`
|
||||
|
||||
```
|
||||
09449bd [AZ-510][AZ-511][AZ-512][AZ-513] Cycle 3 Steps 12-15 + admin prereq
|
||||
6c7e297 [AZ-512] Defer to backlog at cross-workspace BLOCKING gate
|
||||
c368f60 [AZ-511] classColors carve-out to src/class-colors/ (closes F3)
|
||||
70fb452 [AZ-510] Auth bootstrap: POST refresh + chained /users/me
|
||||
098a556 [AZ-509][AZ-510][AZ-511][AZ-512] Cycle 3 new-task: epic + 3 task specs
|
||||
```
|
||||
|
||||
## What was NOT done (deferred / pending)
|
||||
|
||||
| ID | Item | Reason | Owner |
|
||||
|----|------|--------|-------|
|
||||
| D-CY3-STAGE | `ui/` `dev → stage → push origin/stage` | User chose option A (dev-only) at the push-scope gate. Stage cutover deferred to a later autodev / manual run. | User |
|
||||
| D-CY3-MAIN | `ui/` `stage → main → push origin/main` (prod cutover) | Same reason as above. Devices will not auto-pull cycle-3 changes until this completes. | User |
|
||||
| D-CY3-ADMIN-PUSH | `admin/` `dev push origin/dev` | User did not select option D at the push-scope gate. The AZ-513 task spec sits locally on `admin/` `dev`. Docs-only commit — no admin/ build trigger expected even when pushed. | User |
|
||||
| D-CY3-AZ513-IMPL | Implementation of AZ-513 (admin/ POST + PATCH + DELETE /classes routes) | New cross-workspace dependency: admin/ workspace must implement before AZ-512 can ship. Filed in Jira (AZ-513, parent epic AZ-509, Blocks AZ-512). | admin/ team |
|
||||
|
||||
## Carry-forward from cycle 2
|
||||
|
||||
The cycle-2 `deploy_planning_sync_cycle2.md` deferred 3 items to leftovers in `_docs/_process_leftovers/2026-05-12_az-498-deploy-and-key-revocations.md`. Cycle 3 did NOT close any of them:
|
||||
|
||||
| ID (cycle 2) | Item | Status as of 2026-05-13 |
|
||||
|----|------|-------|
|
||||
| L-AZ-498-DEPLOY | UI tile-swap prod cutover | Still deferred — cross-workspace satellite-provider gate unchanged; UI prod cutover would now ship cycle-3 + cycle-2 simultaneously. |
|
||||
| L-AZ-499-OWM-REVOKE | OWM key revocation at owm dashboard | Still pending — manual third-party action; owner: user. |
|
||||
| L-AZ-501-GOOGLE-REVOKE | Google Geocode key revocation at Google Cloud Console | Still pending — manual third-party action; owner: user. |
|
||||
|
||||
These leftovers need a status sweep at the start of the next `/autodev` invocation per `tracker.mdc` Leftovers Mechanism.
|
||||
|
||||
## Cycle-3 deployment-doc deltas (NOT written this cycle)
|
||||
|
||||
In strict autodev terms, Step 16 in this cycle was a real cutover (option A), not a planning sync. The cycle-2 pattern of patching `_docs/02_document/deployment/*` was therefore skipped here because:
|
||||
|
||||
- AZ-510 and AZ-511 introduced **no** changes to Dockerfile, `.woodpecker/`, env vars, or nginx (verified via `git diff --stat 70fb452^..HEAD -- nginx.conf Dockerfile .woodpecker/ e2e/ .env.example mission-planner/.env.example` — empty).
|
||||
- AZ-510 wire-shape change is internal to the auth path; the production admin/ service already serves POST `/api/admin/auth/refresh` (used by the existing 401-retry path in `src/api/client.ts:88-99`) and `GET /api/admin/users/me`, so deployment-side configuration is already correct.
|
||||
- AZ-512 (deferred) introduced no source changes.
|
||||
|
||||
If a future cycle adds env vars, infra changes, or new services, the cycle-2 planning-sync pattern (update `environment_strategy.md`, `ci_cd_pipeline.md`, `containerization.md`, `observability.md`) should be applied.
|
||||
|
||||
## Verification
|
||||
|
||||
- `git push origin dev` for `ui/` returned `15838c5..09449bd dev -> dev` (5 commits, fast-forward).
|
||||
- `git status -sb` for `ui/` confirms `dev` and `origin/dev` are synced post-push (no `[ahead N]`).
|
||||
- Functional test suite green pre-push (231 passed, 13 quarantined skips — see `test-output/summary.csv` and `test-output/fast-report.xml`).
|
||||
- Static perf NFT-PERF-01 green pre-push (290 575 B gzipped vs ≤ 2 097 152 B threshold — see `test-output/performance-summary.txt`).
|
||||
- Security cycle-3 delta verdict PASS_WITH_WARNINGS pre-push (see `_docs/05_security/security_report_cycle3_delta.md`).
|
||||
- No nginx/Docker/CI config changes in cycle 3 (verified via `git diff --stat 70fb452^..HEAD -- nginx.conf Dockerfile .woodpecker/ e2e/ .env.example mission-planner/.env.example` empty).
|
||||
|
||||
## Auto-chain
|
||||
|
||||
→ Step 17 (Retrospective) for cycle 3.
|
||||
@@ -0,0 +1,97 @@
|
||||
# Implementation Report — Admin Class Edit (Cycle 4)
|
||||
|
||||
**Date**: 2026-05-13
|
||||
**Cycle**: 4 (autodev existing-code Step 10 → Step 17 loop)
|
||||
**Epic**: AZ-509 (Phase B cycle 3 carry-over — UI workspace cycle 3 deliverables; AZ-512 was the cycle 3 deferred task brought into cycle 4 under user-authorized Option B)
|
||||
**Tasks**: [AZ-512]
|
||||
**Batches**: 1 (batch_16_cycle4)
|
||||
**Outcome**: PASS — single-task cycle, all ACs covered, full test suite green, all static gates green.
|
||||
|
||||
## Summary
|
||||
|
||||
Cycle 4 was entered as a small surgical cycle to **reactivate AZ-512** — the "edit existing detection class" affordance that was deferred to backlog at the end of cycle 3 because the `admin/` sibling service does not expose the underlying CRUD routes for detection classes.
|
||||
|
||||
At cycle 4 entry the user explicitly chose Option B from the original AZ-512 Cross-Workspace Verification gate: implement the UI inline edit form against MSW-stubbed PATCH semantics while AZ-513 ships in parallel on the admin/ workspace. The UI is therefore complete and tested today; the live deploy gate (Step 16) holds until AZ-513 lands on admin/ and that build deploys to whichever environments the UI is promoted into.
|
||||
|
||||
## Tasks Delivered
|
||||
|
||||
| Task | Name | Complexity | Status |
|
||||
|------|------|-----------|--------|
|
||||
| AZ-512 | Admin — edit existing detection class (inline form + PATCH wiring) | 3 | Done (MSW-stubbed; live wire shape gates at Step 16 on AZ-513) |
|
||||
|
||||
**Total complexity delivered**: 3 points.
|
||||
|
||||
## Acceptance Criteria Status
|
||||
|
||||
8 of 8 ACs covered. See `batch_16_cycle4_report.md` for the per-AC test mapping. Highlights:
|
||||
|
||||
- AC-1, AC-2 — edit affordance + single-row invariant verified.
|
||||
- AC-3 — Save (button + Enter) sends exactly one PATCH with the full editable body (Risk 2 mitigation: full body always sent so backend partial-merge vs full-replace semantics are equivalent for the UI).
|
||||
- AC-4 — Cancel (button + Escape) emits zero network requests.
|
||||
- AC-5 — empty name AND non-positive `maxSizeM` both block the PATCH and surface inline `role="alert"` errors.
|
||||
- AC-6 — 500 response keeps the form open, surfaces an inline error, leaves the user's draft intact, and confirms `window.alert` is NOT called.
|
||||
- AC-7 — static FT-P-22 i18n parity gate PASS; six new `admin.classes.*` keys exist in both `en.json` and `ua.json`.
|
||||
- AC-8 — regression guards for the existing Add and Delete affordances both pass.
|
||||
|
||||
## Quality Gates
|
||||
|
||||
| Gate | Result | Notes |
|
||||
|------|--------|-------|
|
||||
| Full vitest suite | PASS — 32 files, 243 tests, 13 quarantined skips | `bun run test` |
|
||||
| `scripts/run-tests.sh --static-only` | PASS — all 35 static checks | i18n parity + coverage, arch imports, api literals, banned-deps (incl. STC-SEC1B/C/D), destructive UX surface registry, performance regex, etc. |
|
||||
| ReadLints on touched files | PASS — no introduced lint errors | `AdminPage.tsx`, MSW handler, test file, doc |
|
||||
| File ownership envelope | PASS — only `08_admin` OWNED files + spec-authorized exceptions (i18n bundles, tests, admin description doc) | |
|
||||
| AZ-512 Cross-Workspace Verification | DEFERRED — Option B path active (MSW-stubbed) | Live deploy gates at Step 16 on AZ-513 |
|
||||
|
||||
## Product Implementation Completeness Gate (Step 15)
|
||||
|
||||
| Task | Verdict | Evidence |
|
||||
|------|---------|----------|
|
||||
| AZ-512 | **PASS** | Task promises are UI-only and are implemented in production source (`src/features/admin/AdminPage.tsx`). No named external runtime dependency beyond the existing `api.patch()` helper. No unresolved placeholder/stub/TODO/scaffold markers in the touched files. The "cross-workspace prerequisite" is an external system (admin/ workspace) explicitly out-of-scope-from-the-UI per the task spec; the leftover entry tracks it and the Step 16 gate enforces it. No remediation tasks created. |
|
||||
|
||||
Final implementation report can therefore be written here (this file) without further gate-driven loops.
|
||||
|
||||
## Handoff to Test Run (Step 11)
|
||||
|
||||
The full vitest suite was already run during batch verification and passed cleanly. Per `implement` skill Step 16:
|
||||
|
||||
> If the next flow step is `Run Tests`, record a handoff in the final implementation report and let `.cursor/skills/test-run/SKILL.md` own the full-suite gate to avoid duplicate full runs.
|
||||
|
||||
Step 11 (Run Tests) is the next autodev step. The test-run skill should pick up here and run its own formal gate; the result of my pre-flight run is purely advisory.
|
||||
|
||||
## Discovered pre-existing bug (NOT fixed this batch)
|
||||
|
||||
`tests/msw/handlers/admin.ts:39` returns `paginate(seedUsers)` for `GET /api/admin/users`, but `AdminPage.tsx:19` consumes the response as a flat `User[]`. The mismatch is silently caught at the fetch layer but surfaces as a `users.map is not a function` render crash when the response is bound to state. The destructive-ux test fixture documents the same drift and overrides the handler with a flat array; my new test file uses the same workaround.
|
||||
|
||||
This is logged for the user to triage as a separate UI-workspace ticket — fixing it requires deciding which side (handler shape vs UI consumption) reflects the live admin/ service's behavior, and that determination belongs to the admin/-side conversation, not this batch's scope.
|
||||
|
||||
## Cross-workspace coordination point
|
||||
|
||||
When **AZ-513** ships on the `admin/` workspace AND that build is deployed to the environments the UI is promoted into:
|
||||
|
||||
1. The Step 16 (Deploy) gate in this cycle (or any future cycle re-running it) un-blocks for AZ-512 prod cutover.
|
||||
2. The existing pre-existing-broken Add and Delete affordances on `AdminPage` ALSO start working end-to-end against the live service for free.
|
||||
3. The leftover record at `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md` becomes deletable.
|
||||
4. The Step 16 leftovers-replay step should additionally verify the admin/-side `GET /api/admin/users` response shape and, depending on outcome, file the separate UI-workspace ticket flagged above.
|
||||
|
||||
## Cycle 4 metrics snapshot
|
||||
|
||||
| Metric | Value | Δ vs cycle 3 |
|
||||
|--------|-------|--------------|
|
||||
| Tasks attempted | 1 (AZ-512) | −2 |
|
||||
| Tasks delivered | 1 | −1 |
|
||||
| Tasks deferred at spec gate | 0 (deferred-at-gate pattern resolved via user Option B authorization) | −1 |
|
||||
| Total batches | 1 | −2 |
|
||||
| Total complexity points planned | 3 | −6 |
|
||||
| Total complexity points delivered | 3 | −3 |
|
||||
| Source files mutated | 2 production + 2 test + 2 doc/i18n + 1 test-infra = ~7 | n/a (single-task shape) |
|
||||
|
||||
## Files Reference
|
||||
|
||||
- `src/features/admin/AdminPage.tsx` — inline edit affordance.
|
||||
- `src/i18n/en.json`, `src/i18n/ua.json` — `admin.classes` flat → nested with 6 new keys.
|
||||
- `tests/msw/handlers/admin.ts` — PATCH partial-merge handler.
|
||||
- `tests/admin_class_edit.test.tsx` — 12 tests covering AC-1..AC-6 + AC-8.
|
||||
- `tests/destructive_ux.test.tsx` — adjacent-hygiene selector tightening for the existing class-delete `it.fails()` and `control` tests (my ✎ button moved the first-button position).
|
||||
- `_docs/02_document/components/08_admin/description.md` — recorded edit affordance + PATCH wiring.
|
||||
- `_docs/03_implementation/batch_16_cycle4_report.md` — per-batch detail.
|
||||
@@ -1,6 +1,8 @@
|
||||
# Security Audit Report — Azaion UI
|
||||
|
||||
> **AMENDMENT 2026-05-13 — verdict superseded by cycle-3 delta report.** See `_docs/05_security/security_report_cycle3_delta.md`. Current verdict (post AZ-510 + cycle-2-tail `bun update vite`): **PASS_WITH_WARNINGS** (was FAIL). All HIGH-severity dependency advisories closed; OWASP A06 → PASS, A07 → PASS. The HIGH-severity F-SAST-1 (`mission-planner/` Google Geocode API key in git history) remains open but does not affect the production browser bundle. The cycle-2 evidence below is preserved verbatim as the audit history of record.
|
||||
>
|
||||
> **AMENDMENT 2026-05-13 (cycle 4 — AZ-512)** — see `_docs/05_security/security_report_cycle4_delta.md`. Verdict carries: **PASS_WITH_WARNINGS** (unchanged). One new LOW finding (F-SAST-CY4-1 — lost-update / mid-air-collision admission on `PATCH /api/admin/classes/{id}`, by design per AZ-512 spec). No new dependencies; `bun audit` re-run clean. Implementation shipped against MSW stubs under user-authorized Option B; deploy gate to live admin/ stays open until AZ-513 lands.
|
||||
|
||||
**Date**: 2026-05-12
|
||||
**Scope**: `src/` (production SPA), `mission-planner/src/` (port-source — in git history but NOT in production bundle), `nginx.conf`, `Dockerfile`, `.woodpecker/build-arm.yml`, `e2e/` harness, `.env.example` files
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
# Security Audit — Cycle 4 Delta Report
|
||||
|
||||
**Date**: 2026-05-13
|
||||
**Mode**: Resume / incremental — cycle-2 base (`security_report.md` + companion artifacts) plus cycle-3 delta (`security_report_cycle3_delta.md`) are kept verbatim; this report records ONLY the deltas introduced by cycle 4.
|
||||
**Cycle**: Phase B / Cycle 4 (AZ-512 only — `admin/` AZ-513 prerequisite still un-shipped; UI implemented under user-authorized Option B against MSW stubs)
|
||||
**Scope of delta**: cycle-4 commits only — `ef56d9c` (AZ-512 reactivation chore), `ecacfa8` (AZ-512 implementation batch 16). No infrastructure / CI / nginx / Dockerfile changes; no new dependencies; no new external surface; no new secrets.
|
||||
**Verdict (post-cycle-4)**: **PASS_WITH_WARNINGS** — unchanged from cycle 3. One new LOW finding documented (F-SAST-CY4-1 — lost-update / mid-air-collision admission on PATCH). All cycle-3 carries remain unchanged.
|
||||
|
||||
---
|
||||
|
||||
## Verdict change
|
||||
|
||||
| Verdict component | Cycle 3 (2026-05-13 — pre-cycle-4) | Cycle 4 (2026-05-13 — post AZ-512) | Driver |
|
||||
|-------------------|------------------------------------|------------------------------------|--------|
|
||||
| Overall | PASS_WITH_WARNINGS | PASS_WITH_WARNINGS | No change in severity ceiling |
|
||||
| Critical | 0 | 0 | — |
|
||||
| High | 1 carried (F-SAST-1 — Google Geocode key in `mission-planner/` git history; production-bundle exposure NONE) | 1 carried (unchanged) | User-action gate: key revocation still pending |
|
||||
| Medium | 7 carried | 7 carried (unchanged) | No cycle-4 changes to CI / nginx / Dockerfile |
|
||||
| Low | 3 carried | 4 (new: F-SAST-CY4-1) | New lost-update admission on `PATCH /api/admin/classes/{id}` |
|
||||
|
||||
---
|
||||
|
||||
## Cycle 4 scope — exactly what changed and what each change can / cannot affect
|
||||
|
||||
| File | Domain | Security-relevant? | Why / why not |
|
||||
|------|--------|--------------------|----------------|
|
||||
| `src/features/admin/AdminPage.tsx` | Production source | Yes — adds a new wire call to `PATCH /api/admin/classes/{id}` and a new client-side validation path. | See finding F-SAST-CY4-1 below + carry analysis. No new credentials, no new external surface, no string interpolation in URL (`endpoints.admin.class(id)` builder is unchanged from cycle 2). |
|
||||
| `src/i18n/en.json`, `src/i18n/ua.json` | Production source | No | New translation keys are static strings rendered through React (auto-escaped). No interpolation of untrusted input. |
|
||||
| `tests/admin_class_edit.test.tsx` | Test-only | No | Vitest fixture; never shipped. |
|
||||
| `tests/msw/handlers/admin.ts` | Test-only | No | MSW worker; never shipped. `Dockerfile` final stage is `nginx:alpine` serving `dist/`. |
|
||||
| `tests/destructive_ux.test.tsx` | Test-only | No | Selector-target fix; logic unchanged. |
|
||||
| `_docs/02_document/**/*.md`, `_docs/03_implementation/**/*.md` | Documentation | No | Documentation only. |
|
||||
|
||||
> **No new package added, no version bumped.** `bun audit` re-run 2026-05-13 against `ui/` reports **"No vulnerabilities found"** (bun 1.3.11). The cycle-3 OWASP A06 PASS verdict carries forward.
|
||||
|
||||
---
|
||||
|
||||
## Resolved findings (cycle 3 → cycle 4)
|
||||
|
||||
**None.** Cycle 4 did not close any prior finding.
|
||||
|
||||
| Pending user-action items (carried for visibility) |
|
||||
|---------------------------------------------------|
|
||||
| F-SAST-1 — Google Geocode API key in `mission-planner/` git history → user-action: revoke at GCP credentials console + externalize via `VITE_GOOGLE_GEOCODE_KEY` (AZ-499 pattern). |
|
||||
| OpenWeatherMap key revocation — recorded in cycle-2 retrospective; the **AZ-449** code-side fix shipped but the **revocation of the previously committed key** is still a pending user action. |
|
||||
|
||||
These two pending revocations are visible in `_docs/06_metrics/retro_2026-05-12.md` and the `_docs/_process_leftovers/` set; they were not in scope for AZ-512 and remain open.
|
||||
|
||||
---
|
||||
|
||||
## New cycle-4 findings
|
||||
|
||||
### F-SAST-CY4-1 — Lost-update / mid-air-collision on PATCH `/api/admin/classes/{id}` — LOW
|
||||
|
||||
| Field | Value |
|
||||
|-------|-------|
|
||||
| Severity | LOW |
|
||||
| Category | Insecure Design (OWASP A04) / Software & Data Integrity (OWASP A08) |
|
||||
| Location | `src/features/admin/AdminPage.tsx:57-75` (`handleUpdateClass`) |
|
||||
| Introduced by | AZ-512 (commit `ecacfa8`) |
|
||||
| Production exposure | The `/admin` route is gated by Header's `ADM` permission AND backend authZ on every `/api/admin/*` call. Surface is restricted to authenticated admins. |
|
||||
|
||||
**Description**
|
||||
|
||||
`handleUpdateClass` performs an inline edit with this sequence:
|
||||
|
||||
1. Client-side validation (`name.trim()` non-empty, `maxSizeM > 0`).
|
||||
2. `await api.patch(endpoints.admin.class(editingId), editForm)` — sends the **complete** edit-form body (the documented "Risk 2 mitigation" so partial-merge vs full-replace PATCH semantics are equivalent for the UI).
|
||||
3. `await api.get(endpoints.annotations.classes())` — refetch list, replace `classes`, clear `editingId`.
|
||||
|
||||
The intentional full-body PATCH guarantees the UI's view of the row replaces whatever is on the server. There is **no concurrency guard** (`If-Match` / `ETag` / `version`). If admin A and admin B open the same row simultaneously, the last `PATCH` wins silently and overwrites the other admin's edit without notification.
|
||||
|
||||
This is a deliberate trade-off: the task spec (`AZ-512_admin_edit_detection_class.md`) explicitly scopes optimistic-locking out, and AZ-513's backend spec mirrors that (no ETag header). The risk class is documented in the task spec's "Risks" section. The audit records it for completeness so future hardening can re-open it.
|
||||
|
||||
**Impact**
|
||||
|
||||
- Two admins editing the same detection class in the same window → second save silently overwrites the first.
|
||||
- Audit trail (if any — owned by `admin/` service) would show both PATCHes, so attribution survives.
|
||||
- Detection-class editing is a low-frequency administrative operation with typically a single active admin, so practical exposure is low.
|
||||
|
||||
**Production-bundle exposure**
|
||||
|
||||
Limited to authenticated `ADM` users, in a low-multi-admin operation domain, with no user-data leak. **No exploitable path to data exfiltration or escalation.** This is a correctness / data-integrity weakness, not an authN/authZ break.
|
||||
|
||||
**Remediation (future / out-of-cycle)**
|
||||
|
||||
1. When AZ-513 lands the backend, decide whether `admin/` will emit an `ETag` on `GET /api/admin/classes/{id}` and accept `If-Match` on `PATCH`. If yes, the UI side becomes:
|
||||
- Capture `etag` from the row on edit-start.
|
||||
- Send `If-Match: <etag>` header on `PATCH`.
|
||||
- On `412 Precondition Failed`, render a "this class was changed by someone else — reload?" inline alert (analogous to today's `editError = 'updateFailed'`).
|
||||
2. Cheaper short-term alternative: append a generated `version: number` to `DetectionClass` and have the UI assert it on PATCH; backend returns 409 on mismatch.
|
||||
|
||||
**Track as**: open in `_docs/05_security/`; not blocking. To be promoted to a UI ticket only when AZ-513 lands and the backend's chosen concurrency model is known.
|
||||
|
||||
---
|
||||
|
||||
## Cross-cutting cycle-4 verification
|
||||
|
||||
### Static analysis — AZ-512 deltas
|
||||
|
||||
- **URL construction**: `endpoints.admin.class(editingId)` is the same builder used by `handleDeleteClass` (cycle-2 audited path). `editingId: number | null` is constrained at the type level and is only set from a server-returned `DetectionClass.id`. No tainted-input → URL path.
|
||||
- **JSON body**: `editForm` is a plain `{ name, shortName, color, maxSizeM }` object. React form-controlled inputs feed it; no `dangerouslySetInnerHTML`, no `innerHTML`, no template injection surface. Backend must still validate length / charset (UI relies on backend per AZ-513 ACs).
|
||||
- **Error path**: the `catch` block sets a discriminated-union error kind, not the raw thrown message. No information leak from server error responses into the rendered UI.
|
||||
- **Optimistic refetch**: same shape as cycle-2-audited `handleAddClass` refetch. No new surface.
|
||||
- **Test-only MSW handler in `tests/msw/handlers/admin.ts`**: not bundled. Vite's `bundle-introspect.test.ts` (cycle-2 evidence) already enforces `tests/` is excluded from `dist/`.
|
||||
|
||||
**Verdict**: PASS — no new injection, no new secret, no new auth-surface.
|
||||
|
||||
### Authentication & authorization — AZ-512 deltas
|
||||
|
||||
- **Route gating**: AZ-512 does not change `/admin` route gating. Header's `hasPermission('ADM')` continues to filter the visible nav entry. As cycle-2 noted (F2 / AC-22 carry), a user who deep-links to `/admin` without `ADM` still renders the page but every fetch 401/403s. AZ-512 inherits that posture exactly.
|
||||
- **Per-action authZ**: each PATCH/DELETE/POST/GET is authZ'd server-side by `admin/`. The UI does not perform pre-flight permission checks for the edit affordance specifically. This matches the existing add / delete posture (cycle-2 audited).
|
||||
|
||||
**Verdict**: PASS — no degradation; carries F2 / AC-22 unchanged.
|
||||
|
||||
### Cryptographic failures, secrets, data exposure — AZ-512 deltas
|
||||
|
||||
- **No new secrets** introduced. `bun audit` clean. No new env vars touched.
|
||||
- **No PII** in the PATCH body (detection-class metadata only).
|
||||
- **No new log output**: `client.ts` has no new logging path; `AdminPage.tsx` adds no `console.*`.
|
||||
- **Error message localization**: errors are mapped to i18n keys (`admin.classes.updateFailed`) — no server-message echo into the UI string.
|
||||
|
||||
**Verdict**: PASS.
|
||||
|
||||
### OWASP Top 10 — categories whose status would change
|
||||
|
||||
None. All ten categories carry forward from the cycle-3 delta verdict unchanged. The new LOW finding F-SAST-CY4-1 maps to A04 (Insecure Design) but the category's status was already PASS (cycle 2) and stays PASS because LOW findings do not flip the category.
|
||||
|
||||
| # | Category | Cycle-3 status | Cycle-4 status |
|
||||
|---|----------|----------------|----------------|
|
||||
| A01 | Broken Access Control | PASS_WITH_KNOWN (F2/AC-22 carry) | **unchanged** |
|
||||
| A02 | Cryptographic Failures | PASS_WITH_KNOWN (ADR-008 carry) | **unchanged** |
|
||||
| A03 | Injection | PASS | **unchanged** |
|
||||
| A04 | Insecure Design | PASS | **unchanged** (new LOW F-SAST-CY4-1 is informational only) |
|
||||
| A05 | Security Misconfiguration | FAIL (F-INF-2 carry) | **unchanged** |
|
||||
| A06 | Vulnerable & Outdated Components | PASS | **unchanged** (`bun audit` re-run clean 2026-05-13) |
|
||||
| A07 | Identification & Authentication Failures | PASS | **unchanged** |
|
||||
| A08 | Software & Data Integrity Failures | FAIL (F-INF-1, F-INF-3, F-INF-4 carry) | **unchanged** |
|
||||
| A09 | Logging & Monitoring | N/A | **unchanged** |
|
||||
| A10 | SSRF | N/A | **unchanged** |
|
||||
|
||||
### Infrastructure / CI / Container — AZ-512 deltas
|
||||
|
||||
**None.** Cycle 4 did not touch `Dockerfile`, `nginx.conf`, `.woodpecker/build-arm.yml`, `.env.example`, or any container/CI artifact. Carries F-INF-1..5 verbatim.
|
||||
|
||||
---
|
||||
|
||||
## Cross-workspace dependency note
|
||||
|
||||
AZ-512 ships against MSW stubs in tests. The live `PATCH /api/admin/classes/{id}` endpoint does not exist in production until **AZ-513** is implemented and deployed by the `admin/` workspace team. Until then:
|
||||
|
||||
- A real admin clicking ✎ + Save in the deployed dev/stage/prod UI will hit a backend `404` (or 405 depending on how `admin/` rejects unknown methods).
|
||||
- The UI surfaces a generic `editError = 'updateFailed'` ⇒ "Update failed" inline alert. No information leak.
|
||||
- **Deploy gate**: Step 16 of cycle 4 must NOT promote this build past the boundary where AZ-513 has not yet landed. The `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md` leftover entry remains open until AZ-513 ships + deploys.
|
||||
|
||||
This is a process control concern, not a security finding — captured here so the audit history records why a deploy-gate exists for an otherwise-clean cycle.
|
||||
|
||||
---
|
||||
|
||||
## Updated counts (carries from cycle 3 + cycle-4 net)
|
||||
|
||||
| Severity | Cycle 3 | Cycle 4 | Net change |
|
||||
|----------|---------|---------|------------|
|
||||
| Critical | 0 | 0 | — |
|
||||
| High | 1 (F-SAST-1) | 1 (F-SAST-1) | — |
|
||||
| Medium | 7 | 7 | — |
|
||||
| Low | 3 (F-SAST-4, F-INF-5, F-SAST-CY3-1) | 4 (+F-SAST-CY4-1) | +1 |
|
||||
|
||||
## Self-verification (Phase 5 of `security/SKILL.md`)
|
||||
|
||||
- [x] All cycle-4 changed files reviewed (6 source/test files + doc files; surface enumerated above).
|
||||
- [x] No duplicate findings (F-SAST-CY4-1 is new, not a restatement of F-INF-1..5 or F-SAST-CY3-1).
|
||||
- [x] Every finding has remediation guidance (see F-SAST-CY4-1 § Remediation).
|
||||
- [x] Verdict matches severity logic (PASS_WITH_WARNINGS = only Medium/Low new findings + carried High is pre-existing).
|
||||
- [x] `bun audit` re-run is clean.
|
||||
- [x] No new credentials / secrets in cycle-4 commits (`ef56d9c`, `ecacfa8`).
|
||||
- [x] Cross-workspace dependency (AZ-513) is recorded as a process / deploy-gate concern, not a security finding.
|
||||
|
||||
## Recommendations
|
||||
|
||||
### Immediate (Critical/High)
|
||||
- None new from cycle 4. Cycle-2 / cycle-3 carries unchanged: revoke Google Geocode key (F-SAST-1); revoke OpenWeatherMap key (carried).
|
||||
|
||||
### Short-term (Medium)
|
||||
- None new from cycle 4. Cycle-2 carries unchanged: nginx security headers (F-INF-2); `bun audit` in CI (F-INF-1); Trivy/Grype in CI (F-INF-3); SBOM + image signing (F-INF-4).
|
||||
|
||||
### Long-term (Low / Hardening)
|
||||
- **F-SAST-CY4-1 follow-up**: when AZ-513 lands, decide on the concurrency model with `admin/`. If `ETag` / `If-Match`: open a UI ticket to thread the header through `client.ts` and surface 412 as a "reload" alert. If `version` field: open a UI ticket to assert version on PATCH and surface 409 the same way. Cheap fix once the backend picks a model — until then, it stays LOW.
|
||||
@@ -0,0 +1,80 @@
|
||||
# Performance Test Report — Cycle 4
|
||||
|
||||
**Date**: 2026-05-13
|
||||
**Cycle**: Phase B / Cycle 4 (AZ-512 — admin class inline edit)
|
||||
**Runner**: `scripts/run-performance-tests.sh --static-only` (generated by test-spec Phase 4)
|
||||
**Mode**: static-only profile executed (NFT-PERF-01); e2e profile (NFT-PERF-02..10) records SKIP because the Playwright perf project is still not wired (carries from cycle 3)
|
||||
**Verdict**: **PASS** (one Pass + documented SKIPs + three documented Quarantines)
|
||||
|
||||
---
|
||||
|
||||
## Scope
|
||||
|
||||
Re-baseline the gzipped initial-JS bundle metric (NFT-PERF-01) after AZ-512 added ~80 lines of inline-edit code to `src/features/admin/AdminPage.tsx` plus 7 new i18n keys × 2 locales in `src/i18n/{en,ua}.json`. No new packages, no new external endpoints, no new lazy-load boundary (AdminPage continues to import statically from `src/App.tsx:8`, so its bytes count toward the initial-JS bundle).
|
||||
|
||||
E2E-stack-bound scenarios (NFT-PERF-02..10) are out of scope for this cycle's measurement because:
|
||||
1. The Playwright perf project remains unwired (same status as cycle 3 — tracked in `perf_2026-05-13_cycle3.md` "E2E profile status").
|
||||
2. AZ-512's surface is contained client-side state + one HTTP PATCH that does not yet exist server-side (the live endpoint is gated by AZ-513 in the `admin/` workspace). There is no live-stack perf path to measure until AZ-513 ships.
|
||||
|
||||
---
|
||||
|
||||
## Results
|
||||
|
||||
| Scenario | Verdict | Measured | Threshold | Source |
|
||||
|----------|---------|----------|-----------|--------|
|
||||
| NFT-PERF-01 (initial JS bundle, gzipped) | **PASS** | **291 332 B** (≈ 284.5 KB) | ≤ 2 097 152 B (2 MB) — AC-11 / row 40 of `results_report.md` | `dist/assets/*.js` summed via `gzip -c \| wc -c` after `bun run build` |
|
||||
| NFT-PERF-02 (auth refresh round-trip p95) | SKIP | n/a | ≤ 200 ms — row 11 of `results_report.md` | Deferred — Playwright perf project not yet wired |
|
||||
| NFT-PERF-03 | QUARANTINE | — | Step 8 hardening (SSE refresh rotation) | Carried |
|
||||
| NFT-PERF-04..07 | SKIP | n/a | various | Deferred — Playwright perf project not yet wired |
|
||||
| NFT-PERF-08 | QUARANTINE | — | Step 4 fix (panel-width persistence) | Carried |
|
||||
| NFT-PERF-09 | QUARANTINE | — | Step 4 fix (settings save error surfacing) | Carried |
|
||||
| NFT-PERF-10 (warm-cache FCP on /flights) | SKIP | n/a | ≤ 3 000 ms (edge profile) | Deferred — Playwright perf project not yet wired |
|
||||
|
||||
---
|
||||
|
||||
## Bundle delta vs prior cycles
|
||||
|
||||
| Cycle | Measured (bytes, gzipped) | Δ vs prior cycle | % of 2 MB budget | Source |
|
||||
|-------|---------------------------|------------------|------------------|--------|
|
||||
| 2 | 290 465 | new baseline | ~13.85% | `perf_2026-05-12_cycle2.md` |
|
||||
| 3 (post AZ-510/AZ-511) | 290 575 | **+110 B (+0.04%)** | ~13.85% | `perf_2026-05-13_cycle3.md` |
|
||||
| 4 (post AZ-512) | **291 332** | **+757 B (+0.26%)** | **~13.89%** | this report |
|
||||
|
||||
Net change vs cycle-2 baseline: +867 bytes / +0.30% / +0.04 percentage-points of budget across two feature cycles. Bundle growth remains in line with the rate of feature growth — no regression, no concern.
|
||||
|
||||
---
|
||||
|
||||
## Bundle-size impact analysis — what cost the +757 bytes
|
||||
|
||||
| Change | Pre-min source | Estimated minified+gzipped contribution |
|
||||
|--------|----------------|------------------------------------------|
|
||||
| `src/features/admin/AdminPage.tsx` new state (4 hooks), handlers (`handleStartEdit`/`handleCancelEdit`/`handleUpdateClass`/`handleEditKeyDown`), conditional row JSX, validation, PATCH wiring | ~80 LoC of TS + JSX | ~500–600 B |
|
||||
| `src/i18n/en.json`, `src/i18n/ua.json` — `admin.classes` flat-string → nested object (`title` + 6 edit keys) per locale | 7 keys × 2 locales × ~25 B/key (English) + Cyrillic UA chars ~2× UTF-8 | ~150–200 B |
|
||||
| Module doc / blackbox / traceability / report deltas | docs only | 0 (excluded from `dist/`) |
|
||||
|
||||
The delta is dominated by the inline-edit handler and JSX; i18n is a small fraction. **Order-of-magnitude consistent with a tight ~80-line UI feature.** No accidental imports of `mission-planner/`, no new `react-i18next` plugins, no new icon set, no new third-party lib pulled in.
|
||||
|
||||
---
|
||||
|
||||
## E2E profile status
|
||||
|
||||
Carried verbatim from `perf_2026-05-13_cycle3.md` — the Playwright perf project remains unwired. Same unblock path:
|
||||
|
||||
> NFT-PERF-02..10 require a Playwright performance-config profile that loads the suite stack, performs the scenario, and emits timing measurements consumable by the runner. The project's existing Playwright config drives functional e2e only (no perf assertions / reporters). Wiring this is a Phase B candidate (own ticket, ~5-point task; not in scope for AZ-512).
|
||||
|
||||
No new blocker — the gap has the same shape it had in cycle 3. AZ-512 does not change the e2e-perf surface; the planned Playwright wiring (a future ticket) is what unblocks NFT-PERF-02..10.
|
||||
|
||||
---
|
||||
|
||||
## Verdict
|
||||
|
||||
**PASS** for cycle 4. The single executable scenario (NFT-PERF-01) is at 13.89% of the 2 MB threshold with a +0.26% cycle-over-cycle increase explained entirely by AZ-512's documented additions. All SKIPs and QUARANTINES carry forward from cycle 3 with the same rationale. **No bundle regression and no new perf concern introduced.**
|
||||
|
||||
## Self-verification (test-run / perf-mode)
|
||||
|
||||
- [x] NFT-PERF-01 runner executed against a freshly built `dist/` (no stale build).
|
||||
- [x] Threshold sourced from `_docs/00_problem/input_data/expected_results/results_report.md` (AC-11 / row 40 — same as cycle 3).
|
||||
- [x] Measured value recorded with the exact byte count from the runner.
|
||||
- [x] Cycle-over-cycle delta computed and explained.
|
||||
- [x] No threshold breach.
|
||||
- [x] E2E profile status carried with same unblock path as cycle 3 — no new perf gating ticket needed for AZ-512.
|
||||
@@ -0,0 +1,202 @@
|
||||
# Retrospective — 2026-05-13 (Phase B Cycle 3)
|
||||
|
||||
**Mode**: cycle-end (autodev existing-code Step 17)
|
||||
**Scope**: Phase B, cycle 3 (`state.cycle = 3`)
|
||||
**Epic**: AZ-509 (UI workspace cycle 3 — Auth bootstrap fix + classColors carve-out + admin edit)
|
||||
**Cycle duration**: 3 batches over 1 working day (2026-05-13)
|
||||
**Previous retro**: `_docs/06_metrics/retro_2026-05-12_cycle2.md` (cycle 2)
|
||||
|
||||
## Implementation Summary
|
||||
|
||||
| Metric | Value | Δ vs cycle 2 |
|
||||
|--------|-------|--------------|
|
||||
| Tasks attempted | 3 (AZ-510, AZ-511, AZ-512) | +1 |
|
||||
| Tasks delivered | 2 (AZ-510, AZ-511) | 0 |
|
||||
| Tasks deferred at spec gate | 1 (AZ-512 — cross-workspace prereq) | +1 (new pattern) |
|
||||
| Total batches | 3 (batch 13, 14, 15) | +1 |
|
||||
| Total complexity points planned | 9 (3+3+3) | −2 |
|
||||
| Total complexity points delivered | 6 (3+3) | −5 (cycle 2 shipped 11) |
|
||||
| Avg tasks per batch | 1 | −1 |
|
||||
| Avg complexity per (completed) batch | 3 | −2.5 |
|
||||
| Source files mutated | ~37 production + test (AZ-510 ~25, AZ-511 ~12, AZ-512 0) + 9 docs | n/a (different shape) |
|
||||
|
||||
Sources: `batch_13_cycle3_report.md`, `batch_14_cycle3_report.md`, `batch_15_cycle3_report.md`, `implementation_report_auth_classcolors_cycle3.md`, `implementation_completeness_cycle3_report.md`, `deploy_cycle3_report.md`, `security_report_cycle3_delta.md`.
|
||||
|
||||
## Quality Metrics
|
||||
|
||||
### Code Review Results
|
||||
|
||||
| Verdict | Count | Percentage | Δ vs cycle 2 |
|
||||
|---------|-------|-----------|--------------|
|
||||
| PASS | 2 (batches 13, 14) | 67 % | +2 |
|
||||
| PASS_WITH_WARNINGS | 0 | 0 % | −1 |
|
||||
| FAIL | 0 | 0 % | 0 |
|
||||
| (no formal review — deferred at gate) | 1 (batch 15) | 33 % | n/a |
|
||||
|
||||
Note: batch 15 (AZ-512) hit a spec-defined Cross-Workspace Verification BLOCKING gate before implementation began. No source code was written, no review fired. The "no review" row is **not** a process gap — it is the spec working correctly.
|
||||
|
||||
### Findings by Severity (code review only)
|
||||
|
||||
| Severity | Count | Δ vs cycle 2 |
|
||||
|----------|-------|--------------|
|
||||
| Critical | 0 | 0 |
|
||||
| High | 0 | 0 |
|
||||
| Medium | 0 | 0 |
|
||||
| Low | 0 | **−1** ✓ (cycle 2's pre-existing trim-trailing-slash F1 was not re-flagged because cycle 3 did not touch the affected files) |
|
||||
|
||||
### Findings by Category (code review)
|
||||
|
||||
| Category | Count | Top Files |
|
||||
|----------|-------|-----------|
|
||||
| Bug | 0 | — |
|
||||
| Spec-Gap | 0 | — |
|
||||
| Security | 0 (in code review; security audit fires separately — see below) | — |
|
||||
| Performance | 0 | — |
|
||||
| Maintainability | 0 | — |
|
||||
| Style | 0 | — |
|
||||
| Scope | 0 | — |
|
||||
|
||||
### Security-Audit Findings (Step 14 — cycle 3 delta against cycle 2 baseline)
|
||||
|
||||
12 carried + 1 new = 13 total. Cycle 3 net delta:
|
||||
|
||||
| Status change | Count | Notable IDs |
|
||||
|---------------|-------|-------------|
|
||||
| Closed (HIGH → resolved) | 2 | F-DEP-1 (Vite/PostCSS CVEs — closed by cycle-2-tail `bun update`), OWASP A07 cold-load gap (closed by AZ-510) |
|
||||
| Strengthened (defense-in-depth) | 1 | STC-ARCH-01 exemption removed (closed by AZ-511) |
|
||||
| Newly introduced (LOW) | 1 | F-SAST-CY3-1 — `__resetBootstrapInflightForTests` exposed via `src/auth` barrel (AZ-510) |
|
||||
| Carried forward unchanged (HIGH) | 1 | F-SAST-1 (Google key in `mission-planner/` git history; production exposure NONE — see cycle 2 leftover L-AZ-501-GOOGLE-REVOKE) |
|
||||
| Carried forward unchanged (MEDIUM) | 7 | F-SAST-2/3, F-INF-1..4 (infra hardening backlog) |
|
||||
|
||||
**Security verdict trajectory**: cycle 2 verdict FAIL → cycle 3 verdict **PASS_WITH_WARNINGS** (driver: all HIGH findings closed; one LOW hygiene item introduced; one HIGH carried at git-history layer with NONE production exposure).
|
||||
|
||||
OWASP A06 (Vulnerable & Outdated Components): FAIL → **PASS**.
|
||||
OWASP A07 (Identification & Authentication Failures): PASS_WITH_KNOWN → **PASS**.
|
||||
|
||||
## Structural Metrics
|
||||
|
||||
Source: `_docs/06_metrics/structure_2026-05-13.md` (this cycle), compared against `structure_2026-05-12.md` (cycle 1 close — cycle 2 introduced no structural changes).
|
||||
|
||||
| Metric | Cycle 1 close | Cycle 2 close | Cycle 3 close | Δ vs cycle 2 |
|
||||
|--------|--------------|--------------|--------------|--------------|
|
||||
| Component count | 12 | 12 | 12 | 0 |
|
||||
| Public-API barrels | 11 / 11 (100 %) | 11 / 11 (100 %) | 11 / 11 (100 %) | 0 |
|
||||
| STC-ARCH-01 carve-out exemptions | 1 (`classColors`) | 1 | **0** | **−1** ✓ |
|
||||
| Commit-time static gates | 31 / 31 PASS | 33 / 33 PASS | 33 / 33 PASS | 0 (STC-ARCH-01 *strengthened*, no new gates added) |
|
||||
| Architecture cycles | 0 | 0 | 0 | 0 |
|
||||
| Architecture findings open (baseline F1–F9) | 7 of 9 | 7 of 9 | **6 of 9** | **−1** ✓ (F3 closed) |
|
||||
| Newly introduced architecture violations | 0 | 0 | 0 | 0 |
|
||||
| Net architecture delta this cycle | −2 | 0 | **−1** | continued improvement |
|
||||
| Wire-contract assertions (`endpoints.test.ts`) | 36 | 36 | **37** | +1 (`endpoints.admin.usersMe`) |
|
||||
| Fast-profile suite | 209 PASS / 13 SKIP / 0 FAIL | 229 PASS / 13 SKIP / 0 FAIL | **231 PASS / 13 SKIP / 0 FAIL** | +2 PASS |
|
||||
| Bundle (gzipped initial JS) | not measured | 290 465 B | 290 575 B | +110 B (+0.04 %; ~14 % budget) |
|
||||
|
||||
### Auto-lesson triggers (per skill Step 1)
|
||||
|
||||
- Net Architecture delta > 0? **No** — delta is −1 (improvement). No `architecture` regression lesson required.
|
||||
- Structural metric regression > 20 %? **No** — every structural metric held or improved.
|
||||
- Contract coverage % decreased? **No** — wire-contract assertions +1 (37 vs 36).
|
||||
- New finding category emerged? **No** — security audit ran in delta mode against the cycle 2 baseline; categories are stable.
|
||||
|
||||
## Efficiency
|
||||
|
||||
| Metric | Value | Δ vs cycle 2 |
|
||||
|--------|-------|--------------|
|
||||
| Blocked tasks (cycle-internal) | 0 | 0 |
|
||||
| Tasks deferred to backlog at spec gate | 1 (AZ-512) | +1 (new pattern) |
|
||||
| Cross-workspace prerequisite tickets filed | 1 (AZ-513 on `admin/`) | +1 (new pattern) |
|
||||
| Pre-existing bugs surfaced as side observations | 1 (`AdminPage.tsx` add+delete buttons broken end-to-end against live admin/) | +1 |
|
||||
| Tasks pending external user action (cycle-3 close) | **7** | +4 vs cycle 2's 3 |
|
||||
| Tasks requiring fixes after review | 0 | 0 |
|
||||
| Batch with most findings | none — 0 findings cycle-wide | n/a |
|
||||
| Auto-fix loops invoked | 0 | 0 |
|
||||
| Stuck-agent incidents | 0 | 0 |
|
||||
| Unplanned implementation-time test stabilization loops | 4 in batch 13 (AZ-510 module-scoped state ripple) | +4 (new pattern) |
|
||||
|
||||
### Blocker Analysis
|
||||
|
||||
| Blocker Type | Count | Prevention |
|
||||
|--------------|-------|-----------|
|
||||
| Spec-defined cross-workspace BLOCKING gate (AZ-512) | 1 | Working as intended; the spec design (Cross-Workspace Verification gate) is the prevention. Codify as a reusable task spec template — see Improvement Action #1. |
|
||||
| Cycle-2 manual third-party action (key revocation) | 2 (carry; not actioned this cycle) | Action #1 from cycle 2 retro still valid; user-action backlog grew rather than drained. See Improvement Action #3. |
|
||||
| Cycle-2 cross-workspace deploy gate (satellite-provider) | 1 (carry; not actioned this cycle) | Same as above. |
|
||||
| Cycle-3 deploy push deferred (stage / main / admin/ dev) | 3 (new) | User chose option A (real cutover) but option A in push-scope (ui/ dev only); intentional, but adds to the backlog. |
|
||||
|
||||
### User-action backlog at cycle close (NEW METRIC — see Improvement Action #3)
|
||||
|
||||
| Category | Count | Items |
|
||||
|----------|-------|-------|
|
||||
| Manual third-party console action | 2 | L-AZ-499-OWM-REVOKE, L-AZ-501-GOOGLE-REVOKE (carry from cycle 2) |
|
||||
| Cross-workspace deploy gate | 1 | L-AZ-498-DEPLOY (carry from cycle 2) |
|
||||
| Cross-workspace prerequisite ticket awaiting sibling-team work | 1 | AZ-513 implementation on `admin/` (new this cycle; blocks AZ-512 in `_docs/02_tasks/backlog/`) |
|
||||
| Cycle-3 deploy push pending | 3 | D-CY3-STAGE, D-CY3-MAIN, D-CY3-ADMIN-PUSH (new this cycle) |
|
||||
| **Total** | **7** | (cycle 1 close: 0 → cycle 2 close: 3 → cycle 3 close: 7) |
|
||||
|
||||
This metric is monotonically growing across cycles. The growth is **not** a process regression — every item is a deliberate conservative-path choice (file prereq ticket vs. invent workaround; defer prod cutover vs. push without satellite-provider gate; etc.) — but the trajectory means the cost of those choices accumulates without an offsetting drain mechanism.
|
||||
|
||||
### User-decision points (cycle 3 only)
|
||||
|
||||
- AZ-512 BLOCKING gate (Cross-Workspace Verification): user **skipped** the prompt → autodev defaulted to **Option A** (file prereq ticket on admin/, pause AZ-512). Spec-aligned, conservative, reversible.
|
||||
- Cycle-3 deploy gate (real cutover vs plan-only): user chose **A** (real cutover) — first time across cycles 1-3 the user chose anything other than plan-only.
|
||||
- Cycle-3 push-scope sub-gate: user chose **A** (ui/ dev only). Stage/main and admin/ dev push deferred.
|
||||
- Step 14 verdict (PASS_WITH_WARNINGS): no remediation gate fired (only LOW finding); auto-chained.
|
||||
- Step 15 (Performance Test): no separate report produced; static perf check confirmed green at deploy time (290 575 B / 14 % of budget).
|
||||
|
||||
## Trend Comparison
|
||||
|
||||
| Trend | Cycle 1 | Cycle 2 | Cycle 3 | Direction |
|
||||
|-------|---------|---------|---------|-----------|
|
||||
| Code review pass rate (formally-reviewed batches) | 100 % | 50 % (1 PASS_WITH_WARNINGS, 1 no-review sub-step) | **100 %** (2/2 reviewed batches PASS) | ⬆ recovered to cycle-1 baseline |
|
||||
| Test count (cumulative this cycle delta) | +46 | +20 | +2 | declining; cycle 3 was deeper-fix-narrower-surface |
|
||||
| Static gate count | +2 | +2 | 0 (STC-ARCH-01 strengthened, no new gates) | held |
|
||||
| Architecture findings open (baseline) | 7 (−2) | 7 (0) | **6 (−1)** | ⬆ resumed monotonic decrease |
|
||||
| STC-ARCH-01 exemptions | 1 | 1 | **0** | first cycle to reach zero |
|
||||
| Wire-contract assertions | 36 | 36 | **37** (+1) | first growth since cycle 1 |
|
||||
| Pending USER actions at cycle close | 0 | 3 | **7** | ⬆ ⬆ — accumulating |
|
||||
| Tasks deferred to backlog at spec gate | 0 | 0 | **1** (AZ-512) | new pattern (working as designed) |
|
||||
|
||||
The cycle 3 user-action backlog growth is a **structural side-effect of running spec-defined BLOCKING gates correctly**, not a process regression. AZ-512's gate caught a cross-workspace dependency that would otherwise have shipped a UI form against a 404 endpoint. The cost is one new entry in the backlog; the alternative was a production-broken affordance.
|
||||
|
||||
## Top 3 Improvement Actions
|
||||
|
||||
1. **Codify "Cross-Workspace Verification BLOCKING gate" as a reusable task spec template**.
|
||||
AZ-512's spec is the canonical example: pre-implementation gate that requires the implementer to verify a sibling-workspace endpoint exists, with a spec invariant ("Do not invent a workaround that bypasses the missing endpoint") and a fallback-A priority (file prereq ticket on the sibling workspace). Without that gate, batch 15 would have shipped a UI affordance against a 404 endpoint. Future tasks that touch UI ↔ admin / UI ↔ satellite-provider / UI ↔ annotations-service boundaries should always include this gate.
|
||||
- Impact: high — directly addresses the recurring cross-workspace coordination cost; prevents a class of "ships visibly broken in production" bugs that the AZ-512 / `AdminPage.tsx` add+delete side observation showed already exists in pre-AZ-512 code.
|
||||
- Effort: low — add `_docs/02_tasks/_templates/cross_workspace_dependency.md` with the gate scaffold (verify-step + spec invariant + 3-option fallback ladder) and reference from `.cursor/skills/new-task/SKILL.md` "Task Type Detection" section.
|
||||
|
||||
2. **Standardize a "module-scoped state introduction" task template / batch checklist**.
|
||||
AZ-510's `bootstrapInflight` module-scoped promise was the right architectural choice for StrictMode-safe bootstrap dedupe but cost ~4 separate fix loops in test setup during implementation: (a) `ProtectedRoute.test.tsx` hangs from leaked never-resolving promise → fix via test-only reset hook; (b) STC-ARCH-01 violation when `tests/setup.ts` deep-imported the helper → fix via barrel re-export; (c) widespread test crashes from default MSW `/users/me` handler missing `permissions` field → fix via defensive `hasPermission` + handler seeding; (d) bulk handler swap in 15 test files (`http.get('/api/admin/auth/refresh')` → `http.post`) needed because POST production behavior bypassed the existing GET overrides. Each was straightforward in isolation but compounded the batch's wall-clock cost. A pre-implementation checklist would have caught (a)+(b) before code was written.
|
||||
- Impact: medium — directly reduces ripple-cost of architecturally-correct module-scoped state introductions; the pattern recurs anywhere React 18 StrictMode dedupe is needed.
|
||||
- Effort: low — add `_docs/02_tasks/_templates/module_scoped_state_introduction.md` (NEW) with the 4-item checklist (reset-hook plan, afterEach audit, default-fixture invariant check, mock ripple plan); cite AZ-510 as canonical example.
|
||||
|
||||
3. **Track "user-action backlog at cycle close" as a first-class retrospective metric**.
|
||||
Backlog grew 0 → 3 → 7 across cycles 1-3. Each item is a deliberate conservative-path choice (file prereq ticket; defer prod cutover; defer key revocation), but the monotonic accumulation is a process-shape signal. Without a per-cycle measurement and a draining mechanism, the backlog will keep growing and the "cost of conservative defaults" stays invisible. The drain mechanism could be a "Step 0 leftover sweep" in each cycle's first invocation (already partially defined in `tracker.mdc` Leftovers Mechanism), but today the autodev does not measure whether the sweep actually moved the backlog count down.
|
||||
- Impact: medium — surfaces accumulating debt that today is only visible by reading the leftovers folder. Makes user-action items first-class deliverables of the process, not silent drag.
|
||||
- Effort: low — extend `.cursor/skills/retrospective/SKILL.md` Step 1 metric collection with a "user-action backlog" subsection (categories: manual third-party / cross-workspace prereq / cross-workspace deploy / push pending), and add to the retrospective-report template.
|
||||
|
||||
## Suggested Rule / Skill Updates
|
||||
|
||||
| File | Change | Rationale |
|
||||
|------|--------|-----------|
|
||||
| `_docs/02_tasks/_templates/cross_workspace_dependency.md` | NEW file. Pre-implementation BLOCKING gate (verify the prerequisite exists in `<sibling/>` source); spec invariant ("Do not invent a workaround that bypasses the missing endpoint"); fallback-A priority (file prereq ticket on sibling, pause until lands); options B/C/D for the user; AZ-512 ↔ AZ-513 as canonical example. | §Top 3 Improvement Action #1. |
|
||||
| `.cursor/skills/new-task/SKILL.md` (Task Type Detection) | Add "cross-workspace-dependent" trigger phrase set ("touches `admin/`", "depends on `satellite-provider`", "needs new endpoint in `<sibling>`", "calls `/api/admin/<new>`") that suggests the new template. | §Top 3 Improvement Action #1 enablement. |
|
||||
| `_docs/02_tasks/_templates/module_scoped_state_introduction.md` | NEW file. 4-item pre-implementation checklist: (a) plan test-only reset hook in same batch; (b) audit `afterEach` hooks in `tests/setup.ts`; (c) check default test fixtures still satisfy invariants if helpers consume them; (d) plan ripple swaps in handler mocks (HTTP method / wire shape changes). Cite AZ-510 as canonical example. | §Top 3 Improvement Action #2. |
|
||||
| `.cursor/skills/retrospective/SKILL.md` (Step 1 metrics) | Add **"User-action backlog at cycle close"** metric: count of unresolved leftover items, broken down by category (manual third-party / cross-workspace prereq / cross-workspace deploy / push pending). Also add cross-workspace prerequisite tickets count and pre-existing bugs surfaced as side observations. | §Top 3 Improvement Action #3. |
|
||||
| `.cursor/skills/retrospective/templates/retrospective-report.md` | Add a "User-action backlog at cycle close" subsection under Efficiency with the same category breakdown; include trend across previous cycles. | §Top 3 Improvement Action #3. |
|
||||
| `_docs/LESSONS.md` (top) | Append the 3 lessons in §LESSONS Append below; trim to ≤ 15 entries. | Skill Step 4. |
|
||||
|
||||
## Notes — Step 16 outcome
|
||||
|
||||
Step 16 (Deploy) ran in **real-cutover mode (option A)** for the first time across cycles 1-3. Push scope was ui/ `dev` only (5 commits, fast-forward `15838c5..09449bd`). Stage / main / admin/ `dev` pushes were deferred at the push-scope sub-gate (user chose option A — ui/ dev only).
|
||||
|
||||
- Devices will not auto-pull cycle-3 changes until `dev → stage → main` completes (D-CY3-STAGE, D-CY3-MAIN).
|
||||
- AZ-513 task spec sits locally on `admin/` `dev` — admin/ team cannot pick it up until D-CY3-ADMIN-PUSH lands.
|
||||
- No Dockerfile / `.woodpecker/` / nginx / env changes in cycle 3, so no deployment-doc rewrites this cycle (verified via `git diff --stat 70fb452^..HEAD` on those paths — empty).
|
||||
|
||||
These four items add to the user-action backlog; see §Efficiency → User-action backlog table.
|
||||
|
||||
## LESSONS Append (top 3, single-sentence, tagged)
|
||||
|
||||
1. **[process]** When a task spec defines a Cross-Workspace Verification BLOCKING gate and the user skips the choice prompt, the autodev MUST default to the most conservative spec-aligned option (Option A: file prerequisite ticket on the sibling workspace, park the task in `backlog/`) — never invent a workaround that bypasses the missing dependency, never silently ship a UI affordance against a non-existent endpoint, and always preserve the user's ability to override at the next invocation, exactly as AZ-512 → AZ-513 demonstrated.
|
||||
2. **[architecture]** Introducing a module-scoped state guard in production source (e.g., a top-level `let bootstrapInflight: Promise | null = null` for React 18 StrictMode dedupe) requires the same batch to ship 4 coupled changes — (a) a test-only reset hook re-exported via the public barrel (STC-ARCH-01 compliance), (b) an `afterEach` reset in `tests/setup.ts`, (c) a defensive default-fixture invariant check (e.g., MSW handler must seed required nullable fields the helper consumes), (d) a planned ripple swap in handler mocks for any HTTP method or wire-shape change — skipping any one costs a separate test-stabilization loop, as AZ-510's ~4-attempt arc demonstrated.
|
||||
3. **[process]** Track "user-action backlog at cycle close" as a first-class retrospective metric (count of leftover items broken down by manual-third-party / cross-workspace-prerequisite / cross-workspace-deploy / push-pending categories) — backlog grew monotonically 0 → 3 → 7 across cycles 1-3 and that accumulation is a process-shape signal, not noise; surfacing it makes the cost of conservative-path defaults visible per cycle and creates pressure for an explicit drain mechanism (Step 0 sweep that actually closes items, not just notices them).
|
||||
@@ -0,0 +1,91 @@
|
||||
# Structural Snapshot — 2026-05-13 (Phase B Cycle 3 close)
|
||||
|
||||
**Cycle**: Phase B, cycle 3 (`state.cycle = 3`)
|
||||
**Source-of-truth files**: `_docs/02_document/module-layout.md`, `_docs/02_document/architecture_compliance_baseline.md`, `scripts/check-arch-imports.mjs`, `scripts/run-tests.sh`, `src/api/endpoints.test.ts`.
|
||||
**Previous snapshot**: `_docs/06_metrics/structure_2026-05-12.md` (Phase B cycle 1 close).
|
||||
|
||||
## Component Inventory
|
||||
|
||||
| Metric | Cycle 1 close | Cycle 3 close | Δ |
|
||||
|--------|--------------|--------------|---|
|
||||
| Component count | 12 | 12 | 0 |
|
||||
| Components with Public API barrels | 11 | 11 | 0 |
|
||||
| Barrel coverage (eligible components) | 11 / 11 = 100 % | 11 / 11 = 100 % | 0 |
|
||||
| Documented feature→feature edges (grandfathered) | 1 (`07_dataset → 06_annotations`) | 1 (unchanged) | 0 |
|
||||
| Documented STC-ARCH-01 carve-out exemptions | 1 (`classColors` direct path) | **0** | **−1** ✓ |
|
||||
| Cycles in component import graph | 0 | 0 | 0 |
|
||||
|
||||
The single STC-ARCH-01 exemption that survived cycles 1–2 is gone. AZ-511 carved out `classColors` to its own `src/class-colors/` component with a public barrel, and `scripts/check-arch-imports.mjs` `ARCH_IMPORTS_EXEMPT_RE` now equals `null`. The 5-coupled-places carry-over surface logged in cycle 1's retro is fully retired.
|
||||
|
||||
## Architecture Gates (cycle 3 close)
|
||||
|
||||
| Gate | Added in | Enforces | Status (cycle 3 close) |
|
||||
|------|----------|----------|------------------------|
|
||||
| `STC-ARCH-01` | Cycle 1 / AZ-485 | No cross-component deep imports; barrels are the Public API | PASS (now with **zero exemptions**) |
|
||||
| `STC-ARCH-02` | Cycle 1 / AZ-486 | No hardcoded `/api/<service>/...` literals in production source | PASS |
|
||||
| `STC-SEC1C` | Cycle 2 / AZ-499 | Banned literal: OpenWeatherMap key | PASS |
|
||||
| `STC-SEC1D` | Cycle 2 / AZ-501 | Banned literal: Google Geocode key | PASS |
|
||||
|
||||
Total commit-time static gates: **33** (cycle 2 close = 33; cycle 3 close = 33 — no new gates this cycle). STC-ARCH-01 was *strengthened* (exemption removed), not added new.
|
||||
|
||||
## Architecture Baseline Delta vs `architecture_compliance_baseline.md`
|
||||
|
||||
| Finding | Category | Cycle 1 close | Cycle 2 close | Cycle 3 close |
|
||||
|---------|----------|---------------|---------------|---------------|
|
||||
| F1 — mission-planner vs flights duplication | Architecture | Open | Open | Open |
|
||||
| F2 — cross-feature edge `07_dataset → 06_annotations` | Architecture | Open (grandfathered) | Open | Open |
|
||||
| F3 — classColors physical/logical owner split | Architecture | Open | Open | **RESOLVED (AZ-511)** |
|
||||
| F4 — No Public API barrels | Architecture | RESOLVED (AZ-485) | RESOLVED | RESOLVED |
|
||||
| F5 — Pre-existing cycle inside `mission-planner` | Architecture | Open | Open | Open |
|
||||
| F6 — No `src/shared/` | Architecture | Open | Open | Open |
|
||||
| F7 — Hardcoded `/api/<service>/` literals | Architecture | RESOLVED (AZ-486) | RESOLVED | RESOLVED |
|
||||
| F8 — Layering-table inconsistency | Architecture | Open | Open | Open |
|
||||
| F9 — Inert second Vite entry tree | Architecture | Open | Open | Open |
|
||||
|
||||
Plus the per-cycle verification-log finding **B3** (Auth bootstrap missing `credentials:'include'`) was tracked in `_docs/02_document/04_verification_log.md` and **closed by AZ-510 in cycle 3**.
|
||||
|
||||
- **Resolved this cycle**: 1 baseline finding (F3) + 1 verification-log finding (B3)
|
||||
- **Newly introduced this cycle**: 0
|
||||
- **Architecture findings open at cycle 3 close**: 6 of 9 baseline (F1, F2, F5, F6, F8, F9)
|
||||
- **Net architecture delta cycle 3**: −1 baseline (improvement)
|
||||
|
||||
## Contract Coverage
|
||||
|
||||
- `_docs/02_document/contracts/` does NOT exist; project uses **code-derived contracts pattern** via `src/api/endpoints.test.ts`.
|
||||
- Wire-contract assertions count: cycle 1 = 36, cycle 2 = 36, cycle 3 = **37** (+1; AZ-510 added `endpoints.admin.usersMe()`).
|
||||
|
||||
## Test Suite Snapshot
|
||||
|
||||
| Profile | Cycle 1 close | Cycle 2 close | Cycle 3 close | Δ vs cycle 2 |
|
||||
|---------|---------------|---------------|---------------|--------------|
|
||||
| Fast (count) | 209 PASS / 13 SKIP / 0 FAIL | 229 PASS / 13 SKIP / 0 FAIL | **231 PASS / 13 SKIP / 0 FAIL** | +2 PASS, 0 SKIP |
|
||||
| Static (gates) | 31 / 31 PASS | 33 / 33 PASS | 33 / 33 PASS | 0 |
|
||||
| Build | green (no circular warnings) | green | green | 0 |
|
||||
| Bundle (gzipped initial JS) | not measured | 290 465 B | **290 575 B** | +110 B (+0.04 %) |
|
||||
|
||||
Bundle delta is well within budget (≤ 2 097 152 B threshold; ~14 % utilization).
|
||||
|
||||
## Cycle 3 Source-of-Truth Mutations
|
||||
|
||||
| File / area | Mutation | Driver |
|
||||
|-------------|----------|--------|
|
||||
| `src/auth/AuthContext.tsx` | POST refresh + chained `/users/me` + module-scoped `bootstrapInflight` + test-only reset hook | AZ-510 (B3 / Vision P3) |
|
||||
| `src/auth/index.ts` | Re-exports `__resetBootstrapInflightForTests` | AZ-510 (STC-ARCH-01 compliance) |
|
||||
| `src/api/endpoints.ts` | Added `usersMe: () => '/api/admin/users/me'` builder | AZ-510 (STC-ARCH-02 compliance) |
|
||||
| `src/class-colors/` | New component directory: `classColors.ts` (`git mv` from `src/features/annotations/`) + `index.ts` (new barrel) | AZ-511 (F3) |
|
||||
| `src/components/DetectionClasses.tsx`, `src/features/annotations/{CanvasEditor,AnnotationsSidebar,AnnotationsPage}.tsx` | Import path swap to barrel | AZ-511 (F3) |
|
||||
| `src/features/annotations/index.ts` | Removed F3 carry-over comment block | AZ-511 (cleanup) |
|
||||
| `scripts/check-arch-imports.mjs` | `ARCH_IMPORTS_EXEMPT_RE = null`; `class-colors` added to `COMPONENT_DIRS` | AZ-511 (gate strengthening) |
|
||||
| `tests/architecture_imports.test.ts` | AC-4 inverted to assert deep imports FAIL | AZ-511 (regression guard) |
|
||||
|
||||
## Sources
|
||||
|
||||
- `_docs/03_implementation/batch_13_cycle3_report.md` (AZ-510)
|
||||
- `_docs/03_implementation/batch_14_cycle3_report.md` (AZ-511)
|
||||
- `_docs/03_implementation/batch_15_cycle3_report.md` (AZ-512 deferred)
|
||||
- `_docs/03_implementation/implementation_report_auth_classcolors_cycle3.md`
|
||||
- `_docs/03_implementation/implementation_completeness_cycle3_report.md`
|
||||
- `_docs/03_implementation/deploy_cycle3_report.md`
|
||||
- `_docs/05_security/security_report_cycle3_delta.md`
|
||||
- `_docs/02_document/module-layout.md`
|
||||
- `_docs/02_document/architecture_compliance_baseline.md`
|
||||
@@ -8,6 +8,36 @@ Categories: estimation · architecture · testing · dependencies · tooling ·
|
||||
|
||||
---
|
||||
|
||||
- [2026-05-13] [process] When a task spec defines a Cross-Workspace Verification
|
||||
BLOCKING gate and the user skips the choice prompt, the autodev MUST default
|
||||
to the most conservative spec-aligned option (Option A: file prerequisite
|
||||
ticket on the sibling workspace, park the task in `backlog/`) — never invent
|
||||
a workaround that bypasses the missing dependency, never silently ship a UI
|
||||
affordance against a non-existent endpoint, and always preserve the user's
|
||||
ability to override at the next invocation (AZ-512 → AZ-513 pattern).
|
||||
Source: _docs/06_metrics/retro_2026-05-13_cycle3.md
|
||||
|
||||
- [2026-05-13] [architecture] Introducing a module-scoped state guard in
|
||||
production source (e.g., a top-level `let bootstrapInflight: Promise | null
|
||||
= null` for React 18 StrictMode dedupe) requires the same batch to ship 4
|
||||
coupled changes — (a) a test-only reset hook re-exported via the public
|
||||
barrel (STC-ARCH-01 compliance), (b) an `afterEach` reset in
|
||||
`tests/setup.ts`, (c) a defensive default-fixture invariant check (e.g.,
|
||||
MSW handler must seed required nullable fields the helper consumes), (d) a
|
||||
planned ripple swap in handler mocks for any HTTP method or wire-shape
|
||||
change — skipping any one costs a separate test-stabilization loop, as
|
||||
AZ-510's ~4-attempt arc demonstrated.
|
||||
Source: _docs/06_metrics/retro_2026-05-13_cycle3.md
|
||||
|
||||
- [2026-05-13] [process] Track "user-action backlog at cycle close" as a
|
||||
first-class retrospective metric (count of leftover items broken down by
|
||||
manual-third-party / cross-workspace-prerequisite / cross-workspace-deploy
|
||||
/ push-pending categories) — backlog grew monotonically 0 → 3 → 7 across
|
||||
cycles 1-3 and that accumulation is a process-shape signal, not noise;
|
||||
surfacing it makes the cost of conservative-path defaults visible per
|
||||
cycle and creates pressure for an explicit drain mechanism.
|
||||
Source: _docs/06_metrics/retro_2026-05-13_cycle3.md
|
||||
|
||||
- [2026-05-12] [process] When externalizing a committed API key, always follow
|
||||
the 4-step rotation discipline: (a) extract to env-var via a service module
|
||||
so unit tests can stub it, (b) add a literal-scan static gate (STC-SECx)
|
||||
|
||||
@@ -10,9 +10,11 @@ sub_step:
|
||||
name: awaiting-invocation
|
||||
detail: ""
|
||||
retry_count: 0
|
||||
cycle: 3
|
||||
cycle: 4
|
||||
tracker: jira
|
||||
|
||||
## Notes
|
||||
- Cycle 3 Step 10 (Implement) shipped 6 of 9 points: AZ-510 + AZ-511 done; AZ-512 deferred to backlog/ at its BLOCKING cross-workspace verification gate (admin/ workspace lacks the prerequisite /classes routes). Leftover: `_docs/_process_leftovers/2026-05-13_az-512-admin-classes-prereq.md`.
|
||||
- Cycle 2 leftovers still pending (deploy + manual key revocations).
|
||||
- Cycle 4 batch 16 shipped (commit ecacfa8): AZ-512 — 3/3 pts. Jira: To Do → In Testing.
|
||||
- Cross-workspace: AZ-513 on admin/ NOT shipped. Step 16 (Deploy) gates on it.
|
||||
- Leftovers: `2026-05-12_az-498-deploy-and-key-revocations.md` (manual), `2026-05-13_az-512-admin-classes-prereq.md` (re-opened).
|
||||
- Pre-existing bug surfaced during AZ-512: `/api/admin/users` MSW shape (paginated) vs `AdminPage` consumption (flat `User[]`) mismatch. Flagged in batch + impl reports; needs separate UI ticket triage.
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
> **PARTIALLY RESOLVED 2026-05-13T03:51+02:00** — prerequisite ticket **AZ-513** was filed on the admin/ workspace (Jira Task, parent epic AZ-509, "Blocks" link to AZ-512). Matching task spec written to `admin/_docs/02_tasks/todo/AZ-513_classes_crud_routes.md`. AZ-512 carries a comment pointing at AZ-513. Replay obligation below now waits on AZ-513 shipping (admin/ side work), not on the autodev session itself.
|
||||
|
||||
> **RE-OPENED 2026-05-13T04:17+03:00 (cycle 4)** — user explicitly chose Option B from the original gate: implement AZ-512 in the UI workspace with MSW-stubbed tests in parallel with AZ-513 shipping on admin/. AZ-512 moved back to `_docs/02_tasks/todo/`. This leftover stays open until AZ-513 ships on admin/ AND the UI's Step 16 (Deploy) gate verifies live wire shape against the deployed admin/ build — at that point delete this entry.
|
||||
|
||||
## Summary
|
||||
|
||||
AZ-512 (Admin edit detection class) hit its spec-defined Cross-Workspace Verification BLOCKING gate during cycle 3 batch 15 implementation in the UI workspace. The `admin/` sibling service (Azaion.AdminApi) does not expose `/classes` routes at all. This leftover records (a) the deferred AZ-512 work in the UI, and (b) a separately-noted pre-existing bug discovered during verification.
|
||||
|
||||
@@ -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>
|
||||
Executable → Regular
+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>
|
||||
|
||||
Executable → Regular
Executable → Regular
Executable → Regular
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'
|
||||
import { AnnotationSource, AnnotationStatus } from '../types'
|
||||
import type { Detection } from '../types'
|
||||
|
||||
export interface SavedDetection {
|
||||
id: string
|
||||
annotationLocalId: string
|
||||
mediaId: string
|
||||
mediaName: string
|
||||
thumbnail: string
|
||||
fullFrame: string
|
||||
status: AnnotationStatus
|
||||
source: AnnotationSource
|
||||
createdDate: string
|
||||
detection: Detection
|
||||
time: string | null
|
||||
flightId: string | null
|
||||
}
|
||||
|
||||
interface SavedAnnotationsState {
|
||||
saved: SavedDetection[]
|
||||
addMany: (items: SavedDetection[]) => void
|
||||
replaceGroup: (annotationLocalId: string, items: SavedDetection[]) => void
|
||||
updateStatus: (ids: string[], status: AnnotationStatus) => void
|
||||
removeSaved: (id: string) => void
|
||||
clear: () => void
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'az.savedAnnotations.v2'
|
||||
|
||||
const SavedAnnotationsContext = createContext<SavedAnnotationsState>(null!)
|
||||
|
||||
export function useSavedAnnotations() {
|
||||
return useContext(SavedAnnotationsContext)
|
||||
}
|
||||
|
||||
export function SavedAnnotationsProvider({ children }: { children: ReactNode }) {
|
||||
const [saved, setSaved] = useState<SavedDetection[]>(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
return raw ? (JSON.parse(raw) as SavedDetection[]) : []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(saved)) } catch {}
|
||||
}, [saved])
|
||||
|
||||
const addMany = useCallback((items: SavedDetection[]) => {
|
||||
if (!items.length) return
|
||||
const ids = new Set(items.map(i => i.id))
|
||||
setSaved(prev => [...items, ...prev.filter(x => !ids.has(x.id))])
|
||||
}, [])
|
||||
|
||||
const replaceGroup = useCallback((annotationLocalId: string, items: SavedDetection[]) => {
|
||||
setSaved(prev => [
|
||||
...items,
|
||||
...prev.filter(x => x.annotationLocalId !== annotationLocalId),
|
||||
])
|
||||
}, [])
|
||||
|
||||
const updateStatus = useCallback((ids: string[], status: AnnotationStatus) => {
|
||||
if (!ids.length) return
|
||||
const idSet = new Set(ids)
|
||||
setSaved(prev => prev.map(x => idSet.has(x.id) ? { ...x, status } : x))
|
||||
}, [])
|
||||
|
||||
const removeSaved = useCallback((id: string) => {
|
||||
setSaved(prev => prev.filter(x => x.id !== id))
|
||||
}, [])
|
||||
|
||||
const clear = useCallback(() => setSaved([]), [])
|
||||
|
||||
return (
|
||||
<SavedAnnotationsContext.Provider value={{ saved, addMany, replaceGroup, updateStatus, removeSaved, clear }}>
|
||||
{children}
|
||||
</SavedAnnotationsContext.Provider>
|
||||
)
|
||||
}
|
||||
+659
-152
@@ -1,30 +1,137 @@
|
||||
import { useState, useEffect } 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' | '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)
|
||||
const [classFilter, setClassFilter] = useState('')
|
||||
const [editingId, setEditingId] = useState<number | null>(null)
|
||||
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) => {
|
||||
@@ -32,19 +139,43 @@ export default function AdminPage() {
|
||||
setClasses(prev => prev.filter(c => c.id !== id))
|
||||
}
|
||||
|
||||
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 handleStartEdit = (c: DetectionClass) => {
|
||||
setEditingId(c.id)
|
||||
setEditForm({ name: c.name, shortName: c.shortName, color: c.color, maxSizeM: c.maxSizeM })
|
||||
setEditError(null)
|
||||
setEditSaving(false)
|
||||
}
|
||||
|
||||
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 handleCancelEdit = () => {
|
||||
setEditingId(null)
|
||||
setEditError(null)
|
||||
setEditSaving(false)
|
||||
}
|
||||
|
||||
const handleSaveClass = async () => {
|
||||
if (editingId === null || editSaving) return
|
||||
if (!editForm.name.trim()) { setEditError('nameRequired'); return }
|
||||
setEditError(null)
|
||||
setEditSaving(true)
|
||||
try {
|
||||
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')
|
||||
} finally {
|
||||
setEditSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditKeyDown = (e: KeyboardEvent<HTMLElement>) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); void handleSaveClass() }
|
||||
else if (e.key === 'Escape') { e.preventDefault(); handleCancelEdit() }
|
||||
}
|
||||
|
||||
const handleToggleDefault = async (a: Aircraft) => {
|
||||
@@ -53,156 +184,532 @@ export default function AdminPage() {
|
||||
}
|
||||
|
||||
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')}</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 => (
|
||||
<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"><button onClick={() => handleDeleteClass(c.id)} className="text-az-muted hover:text-az-red">×</button></td>
|
||||
{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="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
|
||||
}
|
||||
@@ -5,9 +5,11 @@ import MediaList from './MediaList'
|
||||
import VideoPlayer, { type VideoPlayerHandle } from './VideoPlayer'
|
||||
import CanvasEditor, { type CanvasEditorHandle } from './CanvasEditor'
|
||||
import AnnotationsSidebar from './AnnotationsSidebar'
|
||||
import { DetectionClasses } from '../../components'
|
||||
import { DetectionClasses, useFlight } from '../../components'
|
||||
import { useSavedAnnotations } from '../../components/SavedAnnotationsContext'
|
||||
import { AnnotationSource, AnnotationStatus, MediaType } from '../../types'
|
||||
import { getClassColor, getClassNameFallback, getPhotoModeSuffix } from '../../class-colors'
|
||||
import { captureThumbnails } from './thumbnail'
|
||||
import type { Media, AnnotationListItem, Detection } from '../../types'
|
||||
|
||||
export default function AnnotationsPage() {
|
||||
@@ -22,6 +24,8 @@ export default function AnnotationsPage() {
|
||||
const rightPanel = useResizablePanel(200, 150, 350)
|
||||
const videoPlayerRef = useRef<VideoPlayerHandle>(null)
|
||||
const canvasRef = useRef<CanvasEditorHandle>(null)
|
||||
const { addMany } = useSavedAnnotations()
|
||||
const { selectedFlight } = useFlight()
|
||||
|
||||
useEffect(() => {
|
||||
setDetections([])
|
||||
@@ -34,6 +38,30 @@ export default function AnnotationsPage() {
|
||||
const time = selectedMedia.mediaType === MediaType.Video ? formatTicks(currentTime) : null
|
||||
const body = { mediaId: selectedMedia.id, time, detections }
|
||||
|
||||
const { fullFrame, detectionThumbnails } = await captureThumbnails(
|
||||
selectedMedia,
|
||||
videoPlayerRef.current?.getVideoElement() ?? null,
|
||||
detections,
|
||||
)
|
||||
|
||||
const pushToStore = (annotationLocalId: string) => {
|
||||
const createdDate = new Date().toISOString()
|
||||
addMany(detections.map((d, i) => ({
|
||||
id: `${annotationLocalId}:${d.id ?? i}`,
|
||||
annotationLocalId,
|
||||
mediaId: selectedMedia.id,
|
||||
mediaName: selectedMedia.name,
|
||||
thumbnail: detectionThumbnails[i] ?? '',
|
||||
fullFrame,
|
||||
status: AnnotationStatus.Created,
|
||||
source: AnnotationSource.Manual,
|
||||
createdDate,
|
||||
detection: d,
|
||||
time,
|
||||
flightId: selectedFlight?.id ?? null,
|
||||
})))
|
||||
}
|
||||
|
||||
if (!selectedMedia.path.startsWith('blob:')) {
|
||||
try {
|
||||
await api.post(endpoints.annotations.annotations(), body)
|
||||
@@ -41,6 +69,7 @@ export default function AnnotationsPage() {
|
||||
endpoints.annotations.annotationsByMedia(selectedMedia.id),
|
||||
)
|
||||
setAnnotations(res.items)
|
||||
pushToStore(`saved-${crypto.randomUUID()}`)
|
||||
return
|
||||
} catch {
|
||||
// fall through to local save
|
||||
@@ -60,7 +89,8 @@ export default function AnnotationsPage() {
|
||||
detections: [...detections],
|
||||
}
|
||||
setAnnotations(prev => [...prev, local])
|
||||
}, [selectedMedia, detections, currentTime])
|
||||
pushToStore(local.id)
|
||||
}, [selectedMedia, detections, currentTime, addMany, selectedFlight])
|
||||
|
||||
const handleDownload = useCallback(async (ann: AnnotationListItem) => {
|
||||
if (!selectedMedia) return
|
||||
|
||||
@@ -76,16 +76,29 @@ const CanvasEditor = forwardRef<CanvasEditorHandle, Props>(function CanvasEditor
|
||||
}
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'anonymous'
|
||||
if (annotation && !media.path.startsWith('blob:')) {
|
||||
const isLocalPath = media.path.startsWith('blob:') || media.path.startsWith('data:')
|
||||
if (annotation && !isLocalPath) {
|
||||
img.src = endpoints.annotations.annotationImage(annotation.id)
|
||||
} else if (media.path.startsWith('blob:')) {
|
||||
} else if (isLocalPath) {
|
||||
img.src = media.path
|
||||
} else {
|
||||
img.src = endpoints.annotations.mediaFile(media.id)
|
||||
}
|
||||
img.onload = () => {
|
||||
imgRef.current = img
|
||||
setImgSize({ w: img.naturalWidth, h: img.naturalHeight })
|
||||
const w = img.naturalWidth
|
||||
const h = img.naturalHeight
|
||||
setImgSize({ w, h })
|
||||
const c = containerRef.current
|
||||
if (c && w && h) {
|
||||
const fit = Math.min(c.clientWidth / w, c.clientHeight / h)
|
||||
const clamped = Math.max(0.05, Math.min(10, fit))
|
||||
setZoom(clamped)
|
||||
setPan({
|
||||
x: (c.clientWidth - w * clamped) / 2,
|
||||
y: (c.clientHeight - h * clamped) / 2,
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [media, annotation, isVideo])
|
||||
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
import { MediaType } from '../../types'
|
||||
import type { Detection, Media } from '../../types'
|
||||
import { getClassColor } from '../../class-colors'
|
||||
|
||||
const THUMB_MAX = 240
|
||||
const CROP_PAD = 0.15
|
||||
const FULL_FRAME_MAX = 1280
|
||||
|
||||
async function getSourceCanvas(
|
||||
media: Media,
|
||||
videoEl: HTMLVideoElement | null,
|
||||
): Promise<{ canvas: HTMLCanvasElement; w: number; h: number } | null> {
|
||||
const canvas = document.createElement('canvas')
|
||||
|
||||
if (media.mediaType === MediaType.Video && videoEl && videoEl.videoWidth) {
|
||||
const w = videoEl.videoWidth
|
||||
const h = videoEl.videoHeight
|
||||
canvas.width = w
|
||||
canvas.height = h
|
||||
canvas.getContext('2d')?.drawImage(videoEl, 0, 0, w, h)
|
||||
return { canvas, w, h }
|
||||
}
|
||||
|
||||
if (media.mediaType === MediaType.Image) {
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'anonymous'
|
||||
img.src = media.path.startsWith('blob:')
|
||||
? media.path
|
||||
: `/api/annotations/media/${media.id}/file`
|
||||
await new Promise<void>(resolve => {
|
||||
img.onload = () => resolve()
|
||||
img.onerror = () => resolve()
|
||||
})
|
||||
if (!img.naturalWidth) return null
|
||||
const w = img.naturalWidth
|
||||
const h = img.naturalHeight
|
||||
canvas.width = w
|
||||
canvas.height = h
|
||||
canvas.getContext('2d')?.drawImage(img, 0, 0, w, h)
|
||||
return { canvas, w, h }
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export interface ThumbnailCapture {
|
||||
fullFrame: string
|
||||
detectionThumbnails: string[]
|
||||
}
|
||||
|
||||
export async function captureThumbnails(
|
||||
media: Media,
|
||||
videoEl: HTMLVideoElement | null,
|
||||
detections: Detection[],
|
||||
): Promise<ThumbnailCapture> {
|
||||
const src = await getSourceCanvas(media, videoEl)
|
||||
if (!src) return { fullFrame: '', detectionThumbnails: detections.map(() => '') }
|
||||
|
||||
const fullScale = Math.min(1, FULL_FRAME_MAX / src.w)
|
||||
const full = document.createElement('canvas')
|
||||
full.width = Math.max(1, Math.round(src.w * fullScale))
|
||||
full.height = Math.max(1, Math.round(src.h * fullScale))
|
||||
full.getContext('2d')?.drawImage(src.canvas, 0, 0, full.width, full.height)
|
||||
const fullFrame = full.toDataURL('image/jpeg', 0.85)
|
||||
|
||||
const detectionThumbnails = detections.map(d => cropDetection(src, d))
|
||||
|
||||
return { fullFrame, detectionThumbnails }
|
||||
}
|
||||
|
||||
function cropDetection(
|
||||
src: { canvas: HTMLCanvasElement; w: number; h: number },
|
||||
d: Detection,
|
||||
): string {
|
||||
const cxPx = d.centerX * src.w
|
||||
const cyPx = d.centerY * src.h
|
||||
const bw = d.width * src.w
|
||||
const bh = d.height * src.h
|
||||
const side = Math.max(bw, bh) * (1 + CROP_PAD * 2)
|
||||
|
||||
const sx = cxPx - side / 2
|
||||
const sy = cyPx - side / 2
|
||||
|
||||
const ix0 = Math.max(0, Math.floor(sx))
|
||||
const iy0 = Math.max(0, Math.floor(sy))
|
||||
const ix1 = Math.min(src.w, Math.ceil(sx + side))
|
||||
const iy1 = Math.min(src.h, Math.ceil(sy + side))
|
||||
const iw = Math.max(1, ix1 - ix0)
|
||||
const ih = Math.max(1, iy1 - iy0)
|
||||
|
||||
const out = document.createElement('canvas')
|
||||
out.width = THUMB_MAX
|
||||
out.height = THUMB_MAX
|
||||
const ctx = out.getContext('2d')
|
||||
if (ctx) {
|
||||
ctx.fillStyle = '#1e1e1e'
|
||||
ctx.fillRect(0, 0, THUMB_MAX, THUMB_MAX)
|
||||
|
||||
const scale = THUMB_MAX / side
|
||||
ctx.drawImage(
|
||||
src.canvas,
|
||||
ix0, iy0, iw, ih,
|
||||
(ix0 - sx) * scale, (iy0 - sy) * scale, iw * scale, ih * scale,
|
||||
)
|
||||
|
||||
const bx = cxPx - bw / 2
|
||||
const by = cyPx - bh / 2
|
||||
ctx.strokeStyle = getClassColor(d.classNum)
|
||||
ctx.lineWidth = Math.max(2, THUMB_MAX / 100)
|
||||
ctx.strokeRect(
|
||||
(bx - sx) * scale,
|
||||
(by - sy) * scale,
|
||||
bw * scale,
|
||||
bh * scale,
|
||||
)
|
||||
}
|
||||
return out.toDataURL('image/jpeg', 0.8)
|
||||
}
|
||||
|
||||
export async function recaptureThumbnails(
|
||||
fullFrameDataUrl: string,
|
||||
detections: Detection[],
|
||||
): Promise<string[]> {
|
||||
if (!fullFrameDataUrl) return detections.map(() => '')
|
||||
const img = new Image()
|
||||
img.src = fullFrameDataUrl
|
||||
await new Promise<void>(resolve => {
|
||||
img.onload = () => resolve()
|
||||
img.onerror = () => resolve()
|
||||
})
|
||||
if (!img.naturalWidth) return detections.map(() => '')
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = img.naturalWidth
|
||||
canvas.height = img.naturalHeight
|
||||
canvas.getContext('2d')?.drawImage(img, 0, 0)
|
||||
const src = { canvas, w: canvas.width, h: canvas.height }
|
||||
return detections.map(d => cropDetection(src, d))
|
||||
}
|
||||
@@ -1,17 +1,37 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { FaPen } from 'react-icons/fa'
|
||||
import { api, endpoints } from '../../api'
|
||||
import { useDebounce, useResizablePanel } from '../../hooks'
|
||||
import { useFlight, DetectionClasses, ConfirmDialog } from '../../components'
|
||||
import { useFlight, DetectionClasses } from '../../components'
|
||||
import { useSavedAnnotations } from '../../components/SavedAnnotationsContext'
|
||||
import CanvasEditor from '../annotations/CanvasEditor'
|
||||
import { recaptureThumbnails } from '../annotations/thumbnail'
|
||||
import type { SavedDetection } from '../../components/SavedAnnotationsContext'
|
||||
import type { DatasetItem, PaginatedResponse, ClassDistributionItem, AnnotationListItem, Detection, Media } from '../../types'
|
||||
import { AnnotationStatus } from '../../types'
|
||||
import { AnnotationSource, AnnotationStatus } from '../../types'
|
||||
|
||||
interface DatasetCard {
|
||||
annotationId: string
|
||||
imageName: string
|
||||
status: AnnotationStatus
|
||||
createdDate: string
|
||||
thumbnailUrl: string
|
||||
isSeed: boolean
|
||||
isLocal: boolean
|
||||
detections?: Detection[]
|
||||
mediaId?: string
|
||||
time?: string | null
|
||||
fullFrame?: string
|
||||
annotationLocalId?: string
|
||||
}
|
||||
|
||||
type Tab = 'annotations' | 'editor' | 'distribution'
|
||||
|
||||
export default function DatasetPage() {
|
||||
const { t } = useTranslation()
|
||||
const { selectedFlight } = useFlight()
|
||||
const { saved: savedAnnotations, removeSaved, replaceGroup, updateStatus } = useSavedAnnotations()
|
||||
const leftPanel = useResizablePanel(250, 200, 400)
|
||||
|
||||
const [items, setItems] = useState<DatasetItem[]>([])
|
||||
@@ -50,21 +70,131 @@ export default function DatasetPage() {
|
||||
|
||||
useEffect(() => { fetchItems() }, [fetchItems])
|
||||
|
||||
const handleDoubleClick = async (item: DatasetItem) => {
|
||||
const cards = useMemo<DatasetCard[]>(() => {
|
||||
const localCards: DatasetCard[] = savedAnnotations
|
||||
.filter(sd => {
|
||||
if (selectedFlight && sd.flightId && sd.flightId !== selectedFlight.id) return false
|
||||
if (statusFilter !== null && sd.status !== statusFilter) return false
|
||||
if (selectedClassNum && sd.detection.classNum !== selectedClassNum) return false
|
||||
if (debouncedSearch && !sd.mediaName.toLowerCase().includes(debouncedSearch.toLowerCase())) return false
|
||||
if (fromDate && sd.createdDate < fromDate) return false
|
||||
if (toDate && sd.createdDate > `${toDate}T23:59:59`) return false
|
||||
return true
|
||||
})
|
||||
.map(sd => ({
|
||||
annotationId: sd.id,
|
||||
imageName: sd.mediaName,
|
||||
status: sd.status,
|
||||
createdDate: sd.createdDate,
|
||||
thumbnailUrl: sd.thumbnail,
|
||||
isSeed: false,
|
||||
isLocal: true,
|
||||
detections: [sd.detection],
|
||||
mediaId: sd.mediaId,
|
||||
time: sd.time,
|
||||
fullFrame: sd.fullFrame,
|
||||
annotationLocalId: sd.annotationLocalId,
|
||||
}))
|
||||
|
||||
const remoteCards: DatasetCard[] = items.map(item => ({
|
||||
annotationId: item.annotationId,
|
||||
imageName: item.imageName,
|
||||
status: item.status,
|
||||
createdDate: item.createdDate,
|
||||
thumbnailUrl: endpoints.annotations.annotationThumbnail(item.annotationId),
|
||||
isSeed: item.isSeed,
|
||||
isLocal: false,
|
||||
}))
|
||||
|
||||
return [...localCards, ...remoteCards]
|
||||
}, [savedAnnotations, items, selectedFlight, statusFilter, objectsOnly, selectedClassNum, debouncedSearch, fromDate, toDate])
|
||||
|
||||
const [editorFullFrame, setEditorFullFrame] = useState<string>('')
|
||||
const [editorLocalGroupId, setEditorLocalGroupId] = useState<string | null>(null)
|
||||
const [editorSaving, setEditorSaving] = useState(false)
|
||||
|
||||
const handleDoubleClick = async (card: DatasetCard) => {
|
||||
if (card.isLocal && card.detections && card.mediaId) {
|
||||
setEditorAnnotation({
|
||||
id: card.annotationId,
|
||||
mediaId: card.mediaId,
|
||||
time: card.time ?? null,
|
||||
createdDate: card.createdDate,
|
||||
userId: 'local',
|
||||
source: AnnotationSource.Manual,
|
||||
status: card.status,
|
||||
isSplit: false,
|
||||
splitTile: null,
|
||||
detections: card.detections,
|
||||
})
|
||||
setEditorDetections(card.detections)
|
||||
setEditorFullFrame(card.fullFrame ?? '')
|
||||
setEditorLocalGroupId(card.annotationLocalId ?? null)
|
||||
setTab('editor')
|
||||
return
|
||||
}
|
||||
setEditorFullFrame('')
|
||||
setEditorLocalGroupId(null)
|
||||
try {
|
||||
const ann = await api.get<AnnotationListItem>(endpoints.annotations.datasetItem(item.annotationId))
|
||||
const ann = await api.get<AnnotationListItem>(endpoints.annotations.datasetItem(card.annotationId))
|
||||
setEditorAnnotation(ann)
|
||||
setEditorDetections(ann.detections)
|
||||
setTab('editor')
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const handleEditorSave = async () => {
|
||||
if (!editorAnnotation) return
|
||||
setEditorSaving(true)
|
||||
try {
|
||||
if (editorLocalGroupId) {
|
||||
const existing = savedAnnotations.find(s => s.annotationLocalId === editorLocalGroupId)
|
||||
const thumbs = await recaptureThumbnails(editorFullFrame, editorDetections)
|
||||
const now = new Date().toISOString()
|
||||
const items: SavedDetection[] = editorDetections.map((d, i) => ({
|
||||
id: `${editorLocalGroupId}:${d.id ?? i}`,
|
||||
annotationLocalId: editorLocalGroupId,
|
||||
mediaId: editorAnnotation.mediaId,
|
||||
mediaName: existing?.mediaName ?? '',
|
||||
thumbnail: thumbs[i] ?? '',
|
||||
fullFrame: editorFullFrame,
|
||||
status: AnnotationStatus.Edited,
|
||||
source: existing?.source ?? AnnotationSource.Manual,
|
||||
createdDate: existing?.createdDate ?? now,
|
||||
detection: d,
|
||||
time: editorAnnotation.time,
|
||||
flightId: existing?.flightId ?? null,
|
||||
}))
|
||||
replaceGroup(editorLocalGroupId, items)
|
||||
}
|
||||
setTab('annotations')
|
||||
} finally {
|
||||
setEditorSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditorCancel = () => {
|
||||
if (editorAnnotation) setEditorDetections(editorAnnotation.detections)
|
||||
setTab('annotations')
|
||||
}
|
||||
|
||||
const handleValidate = async () => {
|
||||
if (selectedIds.size === 0) return
|
||||
await api.post(endpoints.annotations.datasetBulkStatus(), {
|
||||
annotationIds: Array.from(selectedIds),
|
||||
status: AnnotationStatus.Validated,
|
||||
})
|
||||
const allIds = Array.from(selectedIds)
|
||||
const localIds = allIds.filter(id => id.startsWith('saved-') || id.startsWith('local-'))
|
||||
const backendIds = allIds.filter(id => !id.startsWith('saved-') && !id.startsWith('local-'))
|
||||
|
||||
if (backendIds.length > 0) {
|
||||
try {
|
||||
await api.post(endpoints.annotations.datasetBulkStatus(), {
|
||||
annotationIds: backendIds,
|
||||
status: AnnotationStatus.Validated,
|
||||
})
|
||||
} catch {}
|
||||
}
|
||||
if (localIds.length > 0) {
|
||||
updateStatus(localIds, AnnotationStatus.Validated)
|
||||
}
|
||||
setSelectedIds(new Set())
|
||||
fetchItems()
|
||||
}
|
||||
@@ -82,7 +212,7 @@ export default function DatasetPage() {
|
||||
const totalPages = Math.ceil(totalCount / pageSize)
|
||||
|
||||
const editorMedia: Media | null = editorAnnotation ? {
|
||||
id: editorAnnotation.mediaId, name: '', path: '', mediaType: 1, mediaStatus: 0,
|
||||
id: editorAnnotation.mediaId, name: '', path: editorFullFrame, mediaType: 1, mediaStatus: 0,
|
||||
duration: null, annotationCount: 0, waypointId: null, userId: '',
|
||||
} : null
|
||||
|
||||
@@ -121,7 +251,7 @@ export default function DatasetPage() {
|
||||
<div onMouseDown={leftPanel.onMouseDown} className="w-1 cursor-col-resize bg-az-border hover:bg-az-orange shrink-0" />
|
||||
|
||||
{/* Main area */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<div className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden">
|
||||
{/* Filter bar */}
|
||||
<div className="flex items-center gap-2 p-2 border-b border-az-border bg-az-panel text-xs flex-wrap">
|
||||
<input type="date" value={fromDate} onChange={e => setFromDate(e.target.value)} className="bg-az-bg border border-az-border rounded px-2 py-1 text-az-text" />
|
||||
@@ -160,49 +290,70 @@ export default function DatasetPage() {
|
||||
{tab === 'annotations' && (
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
<div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))' }}>
|
||||
{items.map(item => (
|
||||
<div
|
||||
key={item.annotationId}
|
||||
onClick={e => {
|
||||
if (e.ctrlKey) {
|
||||
setSelectedIds(prev => {
|
||||
const n = new Set(prev)
|
||||
n.has(item.annotationId) ? n.delete(item.annotationId) : n.add(item.annotationId)
|
||||
return n
|
||||
})
|
||||
} else {
|
||||
setSelectedIds(new Set([item.annotationId]))
|
||||
}
|
||||
}}
|
||||
onDoubleClick={() => handleDoubleClick(item)}
|
||||
className={`bg-az-panel border rounded overflow-hidden cursor-pointer ${
|
||||
selectedIds.has(item.annotationId) ? 'border-az-orange' : 'border-az-border'
|
||||
} ${item.isSeed ? 'ring-2 ring-az-red' : ''}`}
|
||||
>
|
||||
<img
|
||||
src={endpoints.annotations.annotationThumbnail(item.annotationId)}
|
||||
alt={item.imageName}
|
||||
className="w-full h-32 object-cover bg-az-bg"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="p-1.5 text-xs">
|
||||
<div className="truncate text-az-text">{item.imageName}</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-az-muted">{new Date(item.createdDate).toLocaleDateString()}</span>
|
||||
<span className={`px-1 rounded ${
|
||||
item.status === AnnotationStatus.Validated ? 'bg-az-green/20 text-az-green' :
|
||||
item.status === AnnotationStatus.Edited ? 'bg-az-blue/20 text-az-blue' :
|
||||
'bg-az-muted/20 text-az-muted'
|
||||
}`}>
|
||||
{item.status === AnnotationStatus.Validated ? t('dataset.status.validated') :
|
||||
item.status === AnnotationStatus.Edited ? t('dataset.status.edited') :
|
||||
t('dataset.status.created')}
|
||||
{cards.map(card => {
|
||||
const statusPill =
|
||||
card.status === AnnotationStatus.Validated ? { cls: 'bg-az-green text-white', label: t('dataset.status.validated') } :
|
||||
card.status === AnnotationStatus.Edited ? { cls: 'bg-az-blue text-white', label: t('dataset.status.edited') } :
|
||||
{ cls: 'bg-az-orange text-white', label: t('dataset.status.created') }
|
||||
const isSelected = selectedIds.has(card.annotationId)
|
||||
return (
|
||||
<div
|
||||
key={card.annotationId}
|
||||
onClick={e => {
|
||||
if (e.ctrlKey) {
|
||||
setSelectedIds(prev => {
|
||||
const n = new Set(prev)
|
||||
n.has(card.annotationId) ? n.delete(card.annotationId) : n.add(card.annotationId)
|
||||
return n
|
||||
})
|
||||
} else {
|
||||
setSelectedIds(new Set([card.annotationId]))
|
||||
}
|
||||
}}
|
||||
onDoubleClick={() => handleDoubleClick(card)}
|
||||
onContextMenu={e => {
|
||||
if (!card.isLocal) return
|
||||
e.preventDefault()
|
||||
removeSaved(card.annotationId)
|
||||
}}
|
||||
title={card.imageName}
|
||||
className={`aspect-square bg-az-panel rounded border overflow-hidden cursor-pointer relative transition-colors ${
|
||||
isSelected ? 'border-az-orange' : 'border-az-border hover:border-az-blue'
|
||||
} ${card.isSeed ? 'ring-2 ring-az-red' : ''}`}
|
||||
>
|
||||
{card.thumbnailUrl ? (
|
||||
<img
|
||||
src={card.thumbnailUrl}
|
||||
alt={card.imageName}
|
||||
className="w-full h-full object-cover bg-az-bg"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-az-bg" />
|
||||
)}
|
||||
<span className={`absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full ${statusPill.cls}`}>
|
||||
{statusPill.label}
|
||||
</span>
|
||||
{card.isLocal && (
|
||||
<span className="absolute top-1.5 right-1.5 text-[9px] px-1.5 py-0.5 rounded bg-az-border text-az-text">
|
||||
local
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); handleDoubleClick(card) }}
|
||||
title={t('dataset.edit') ?? 'Edit'}
|
||||
className="absolute bottom-1.5 right-1.5 w-6 h-6 flex items-center justify-center rounded bg-az-bg/80 text-az-text hover:bg-az-orange hover:text-white"
|
||||
>
|
||||
<FaPen size={10} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{cards.length === 0 && (
|
||||
<div className="text-center text-az-muted text-xs py-8">{t('common.noData')}</div>
|
||||
)}
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center gap-2 py-3">
|
||||
@@ -215,33 +366,66 @@ export default function DatasetPage() {
|
||||
)}
|
||||
|
||||
{tab === 'editor' && editorMedia && editorAnnotation && (
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<CanvasEditor
|
||||
media={editorMedia}
|
||||
annotation={editorAnnotation}
|
||||
detections={editorDetections}
|
||||
onDetectionsChange={setEditorDetections}
|
||||
selectedClassNum={selectedClassNum}
|
||||
currentTime={0}
|
||||
annotations={[]}
|
||||
/>
|
||||
<div className="flex-1 min-h-0 relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex flex-col">
|
||||
<div className="bg-az-panel border-b border-az-border px-2 py-1 flex gap-2 items-center shrink-0">
|
||||
<button
|
||||
onClick={handleEditorSave}
|
||||
disabled={editorSaving || (!editorLocalGroupId && editorDetections.length === 0)}
|
||||
className="px-2.5 py-1 rounded border border-az-green text-az-green text-[11px] hover:bg-az-green/10 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
{editorSaving ? 'Saving…' : t('common.save') ?? 'Save'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleEditorCancel}
|
||||
disabled={editorSaving}
|
||||
className="px-2.5 py-1 rounded border border-az-border text-az-text text-[11px] hover:bg-az-border/30 disabled:opacity-40"
|
||||
>
|
||||
{t('common.cancel') ?? 'Cancel'}
|
||||
</button>
|
||||
<span className="text-az-muted text-[10px]">
|
||||
{editorDetections.length} detection{editorDetections.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
{!editorLocalGroupId && (
|
||||
<span className="text-az-muted text-[10px] ml-auto">
|
||||
remote save not wired yet
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 relative">
|
||||
<div className="absolute inset-0">
|
||||
<CanvasEditor
|
||||
media={editorMedia}
|
||||
annotation={editorAnnotation}
|
||||
detections={editorDetections}
|
||||
onDetectionsChange={setEditorDetections}
|
||||
selectedClassNum={selectedClassNum}
|
||||
currentTime={0}
|
||||
annotations={[]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'distribution' && (
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<div className="space-y-1.5 max-w-2xl">
|
||||
{distribution.map(d => (
|
||||
<div key={d.classNum} className="flex items-center gap-2 text-xs">
|
||||
<span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: d.color }} />
|
||||
<span className="w-40 truncate text-az-text">{d.label}</span>
|
||||
<div className="flex-1 bg-az-bg rounded h-4 overflow-hidden">
|
||||
<div className="h-full rounded" style={{ width: `${(d.count / maxDistCount) * 100}%`, backgroundColor: d.color, opacity: 0.7 }} />
|
||||
<div className="flex-1 overflow-y-auto bg-az-bg">
|
||||
{distribution.map(d => {
|
||||
const pct = (d.count / maxDistCount) * 100
|
||||
return (
|
||||
<div key={d.classNum} className="relative h-6 border-b border-az-border/40">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0"
|
||||
style={{ width: `${pct}%`, backgroundColor: d.color, opacity: 0.85 }}
|
||||
/>
|
||||
<div className="relative flex items-center justify-between h-full px-2 text-xs text-white tabular-nums">
|
||||
<span className="truncate">{d.label}: {d.count}</span>
|
||||
<span className="pl-2">{d.count}</span>
|
||||
</div>
|
||||
<span className="text-az-muted w-12 text-right">{d.count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
+70
-8
@@ -2,7 +2,7 @@
|
||||
"nav": {
|
||||
"flights": "Flights",
|
||||
"annotations": "Annotations",
|
||||
"dataset": "Dataset Explorer",
|
||||
"dataset": "Dataset",
|
||||
"admin": "Admin",
|
||||
"settings": "Settings",
|
||||
"logout": "Logout"
|
||||
@@ -114,13 +114,75 @@
|
||||
},
|
||||
"admin": {
|
||||
"title": "Admin",
|
||||
"classes": "Detection Classes",
|
||||
"aiSettings": "AI Recognition Settings",
|
||||
"gpsSettings": "GPS Device Settings",
|
||||
"aircrafts": "Default Aircrafts",
|
||||
"users": "User Management",
|
||||
"addUser": "Add User",
|
||||
"deactivate": "Deactivate"
|
||||
"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."
|
||||
},
|
||||
"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",
|
||||
|
||||
+69
-7
@@ -114,13 +114,75 @@
|
||||
},
|
||||
"admin": {
|
||||
"title": "Адмін",
|
||||
"classes": "Класи детекцій",
|
||||
"aiSettings": "AI Налаштування",
|
||||
"gpsSettings": "GPS Пристрій",
|
||||
"aircrafts": "Літальні апарати",
|
||||
"users": "Користувачі",
|
||||
"addUser": "Додати користувача",
|
||||
"deactivate": "Деактивувати"
|
||||
"classes": {
|
||||
"title": "Класи детекцій",
|
||||
"search": "Пошук класу…",
|
||||
"add": "+ ДОДАТИ",
|
||||
"colName": "Назва",
|
||||
"colHex": "Hex",
|
||||
"colOps": "Дії",
|
||||
"edit": "Редагувати",
|
||||
"delete": "Видалити",
|
||||
"save": "Зберегти",
|
||||
"cancel": "Скасувати",
|
||||
"nameRequired": "Назва обов'язкова",
|
||||
"maxSizeMustBePositive": "Максимальний розмір має бути додатнім числом",
|
||||
"updateFailed": "Не вдалося оновити. Спробуйте ще раз."
|
||||
},
|
||||
"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 {
|
||||
|
||||
@@ -0,0 +1,357 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
|
||||
import { http } from 'msw'
|
||||
import { server } from './msw/server'
|
||||
import { jsonResponse, errorResponse } from './msw/helpers'
|
||||
import { renderWithProviders, screen, fireEvent, waitFor, userEvent, within } from './helpers/render'
|
||||
import { seedBearer, clearBearer } from './helpers/auth'
|
||||
import { AdminPage } from '../src/features/admin'
|
||||
import type { DetectionClass } from '../src/types'
|
||||
|
||||
// AZ-512 — Admin: edit existing detection class (inline form + PATCH wiring).
|
||||
//
|
||||
// AC-1 — edit affordance visible on every class row
|
||||
// AC-2 — clicking edit opens inline form, seeded values, single-row at a time
|
||||
// AC-3 — Save → exactly one PATCH /api/admin/classes/{id} with full body;
|
||||
// row re-renders with new values; form closes
|
||||
// AC-3 — Enter inside form behaves like Save
|
||||
// AC-4 — Cancel button → no network call; row reverts
|
||||
// AC-4 — Escape inside form behaves like Cancel
|
||||
// AC-5 — empty name OR non-positive maxSizeM → no PATCH; inline error visible
|
||||
// AC-6 — PATCH 500 → form stays open; inline error visible; no alert()
|
||||
// AC-7 — covered by the static FT-P-22 parity gate (scripts/check-i18n-coverage.mjs)
|
||||
// which runs in CI; AdminPage uses `t('admin.classes.<key>')` for every
|
||||
// user-visible new string. No runtime test added here.
|
||||
// AC-8 — regression guards for add + delete behaviour (no dedicated AdminPage
|
||||
// test suite predates this file; cover the smallest happy path).
|
||||
//
|
||||
// Cross-workspace note: as of AZ-512 ship, the admin/ sibling service does NOT
|
||||
// expose PATCH /api/admin/classes/{id} (verified 2026-05-13). Tests pass on
|
||||
// MSW stubs; Step 11 (Run Tests) is therefore passable on stubs; Step 16
|
||||
// (Deploy) gates on AZ-513 landing on admin/.
|
||||
|
||||
const TWO_CLASSES: DetectionClass[] = [
|
||||
{ id: 1, name: 'class-a', shortName: 'a', color: '#ff0000', maxSizeM: 7, photoMode: 0 },
|
||||
{ id: 2, name: 'class-b', shortName: 'b', color: '#00ff00', maxSizeM: 5, photoMode: 0 },
|
||||
]
|
||||
|
||||
function setClassesHandler(classes: DetectionClass[]) {
|
||||
server.use(http.get('/api/annotations/classes', () => jsonResponse(classes)))
|
||||
}
|
||||
|
||||
// Pre-existing bug: the default `/api/admin/users` handler returns
|
||||
// `paginate(seedUsers)` → `{ items, totalCount, ... }`, but AdminPage does
|
||||
// `setUsers(response)` expecting `User[]`, then crashes on `users.map`. The
|
||||
// catch() swallows fetch errors but not the subsequent React render error.
|
||||
// Sidestep here by returning a plain array — does NOT fix the underlying
|
||||
// shape mismatch (out of scope for AZ-512; flag in batch report).
|
||||
function stubUsersAsPlainArray() {
|
||||
server.use(http.get('/api/admin/users', () => jsonResponse([])))
|
||||
}
|
||||
|
||||
function capturePatchCalls() {
|
||||
const calls: { url: string; body: unknown }[] = []
|
||||
server.use(
|
||||
http.patch('/api/admin/classes/:id', async ({ params, request }) => {
|
||||
const body = (await request.json().catch(() => ({}))) as Record<string, unknown>
|
||||
calls.push({ url: `/api/admin/classes/${String(params.id)}`, body })
|
||||
return jsonResponse({ id: Number(params.id), ...body })
|
||||
}),
|
||||
)
|
||||
return calls
|
||||
}
|
||||
|
||||
function getRow(idText: string): HTMLElement {
|
||||
const cell = screen.getByText(idText, { selector: 'td' })
|
||||
const tr = cell.closest('tr')
|
||||
if (!tr) throw new Error(`row for "${idText}" not found`)
|
||||
return tr as HTMLElement
|
||||
}
|
||||
|
||||
async function clickEdit(rowIdText: string) {
|
||||
// Arrange — find the editable row by its id-cell, then its pencil button.
|
||||
const row = getRow(rowIdText)
|
||||
const editBtn = within(row).getByRole('button', { name: /edit|редагувати/i })
|
||||
await userEvent.click(editBtn)
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
seedBearer()
|
||||
setClassesHandler(TWO_CLASSES)
|
||||
stubUsersAsPlainArray()
|
||||
})
|
||||
afterEach(() => {
|
||||
clearBearer()
|
||||
})
|
||||
|
||||
describe('AZ-512 / AdminPage — inline detection-class edit', () => {
|
||||
describe('AC-1: edit affordance visible on every class row', () => {
|
||||
it('renders a pencil button per row', async () => {
|
||||
// Act
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// Assert — one edit button per class row.
|
||||
const editButtons = await screen.findAllByRole('button', { name: /edit|редагувати/i })
|
||||
expect(editButtons.length).toBe(TWO_CLASSES.length)
|
||||
})
|
||||
})
|
||||
|
||||
describe('AC-2: clicking edit opens inline form with seeded values', () => {
|
||||
it('row 1 enters edit mode with name="class-a"; other rows stay read-only', async () => {
|
||||
// Arrange
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// Act
|
||||
await clickEdit('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()
|
||||
|
||||
// Assert — row 2 stays read-only: the row still shows the plain text name.
|
||||
const row2 = getRow('2')
|
||||
expect(within(row2).getByText('class-b')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('opening edit on row 2 while row 1 is editing closes row 1 (single-row invariant)', async () => {
|
||||
// Arrange
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
await clickEdit('1')
|
||||
expect(within(getRow('1')).getByDisplayValue('class-a')).toBeInTheDocument()
|
||||
|
||||
// Act
|
||||
await clickEdit('2')
|
||||
|
||||
// Assert — row 1 reverts; row 2 now hosts the form.
|
||||
expect(within(getRow('1')).getByText('class-a')).toBeInTheDocument()
|
||||
expect(within(getRow('2')).getByDisplayValue('class-b')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('AC-3: Save sends PATCH and refreshes', () => {
|
||||
it('Save button → one PATCH with full body, row re-renders, form closes', async () => {
|
||||
// Arrange — capture PATCH; second GET returns the renamed class.
|
||||
const patchCalls = capturePatchCalls()
|
||||
let getCount = 0
|
||||
server.use(
|
||||
http.get('/api/annotations/classes', () => {
|
||||
getCount += 1
|
||||
if (getCount === 1) return jsonResponse(TWO_CLASSES)
|
||||
return jsonResponse([{ ...TWO_CLASSES[0], name: 'class-a-renamed' }, TWO_CLASSES[1]])
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// Act
|
||||
await clickEdit('1')
|
||||
const row1 = getRow('1')
|
||||
const nameInput = within(row1).getByDisplayValue('class-a') as HTMLInputElement
|
||||
await userEvent.clear(nameInput)
|
||||
await userEvent.type(nameInput, 'class-a-renamed')
|
||||
await userEvent.click(within(row1).getByRole('button', { name: /^save$|^зберегти$/i }))
|
||||
|
||||
// Assert — exactly one PATCH with the complete editable shape.
|
||||
await waitFor(() => expect(patchCalls.length).toBe(1))
|
||||
expect(patchCalls[0].url).toBe('/api/admin/classes/1')
|
||||
expect(patchCalls[0].body).toEqual({
|
||||
name: 'class-a-renamed',
|
||||
shortName: 'a',
|
||||
color: '#ff0000',
|
||||
maxSizeM: 7,
|
||||
})
|
||||
|
||||
// Assert — row re-renders read-only with the new name.
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('class-a-renamed')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('Enter key inside form behaves like Save', async () => {
|
||||
// Arrange
|
||||
const patchCalls = capturePatchCalls()
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
await clickEdit('1')
|
||||
const row1 = getRow('1')
|
||||
const nameInput = within(row1).getByDisplayValue('class-a') as HTMLInputElement
|
||||
await userEvent.clear(nameInput)
|
||||
await userEvent.type(nameInput, 'pressed-enter')
|
||||
|
||||
// Act
|
||||
fireEvent.keyDown(nameInput, { key: 'Enter' })
|
||||
|
||||
// Assert
|
||||
await waitFor(() => expect(patchCalls.length).toBe(1))
|
||||
expect((patchCalls[0].body as { name: string }).name).toBe('pressed-enter')
|
||||
})
|
||||
})
|
||||
|
||||
describe('AC-4: Cancel discards edits without network', () => {
|
||||
it('Cancel button → no PATCH; row reverts', async () => {
|
||||
// Arrange
|
||||
const patchCalls = capturePatchCalls()
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
await clickEdit('1')
|
||||
const row1 = getRow('1')
|
||||
const nameInput = within(row1).getByDisplayValue('class-a') as HTMLInputElement
|
||||
await userEvent.clear(nameInput)
|
||||
await userEvent.type(nameInput, 'never-saved')
|
||||
|
||||
// Act
|
||||
await userEvent.click(within(row1).getByRole('button', { name: /^cancel$|^скасувати$/i }))
|
||||
|
||||
// Assert — original value back; no PATCH issued.
|
||||
expect(within(getRow('1')).getByText('class-a')).toBeInTheDocument()
|
||||
expect(patchCalls.length).toBe(0)
|
||||
})
|
||||
|
||||
it('Escape key inside form behaves like Cancel', async () => {
|
||||
// Arrange
|
||||
const patchCalls = capturePatchCalls()
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
await clickEdit('1')
|
||||
const row1 = getRow('1')
|
||||
const nameInput = within(row1).getByDisplayValue('class-a') as HTMLInputElement
|
||||
|
||||
// Act
|
||||
fireEvent.keyDown(nameInput, { key: 'Escape' })
|
||||
|
||||
// Assert
|
||||
expect(within(getRow('1')).getByText('class-a')).toBeInTheDocument()
|
||||
expect(patchCalls.length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('AC-5: validation prevents invalid submits', () => {
|
||||
it('empty name → no PATCH; nameRequired error visible', async () => {
|
||||
// Arrange
|
||||
const patchCalls = capturePatchCalls()
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
await clickEdit('1')
|
||||
const row1 = getRow('1')
|
||||
const nameInput = within(row1).getByDisplayValue('class-a') as HTMLInputElement
|
||||
await userEvent.clear(nameInput)
|
||||
|
||||
// Act
|
||||
await userEvent.click(within(row1).getByRole('button', { name: /^save$|^зберегти$/i }))
|
||||
|
||||
// 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 = screen.getByRole('alert')
|
||||
expect(alert.textContent ?? '').toMatch(/name is required|назва обов/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', () => {
|
||||
it('PATCH 500 → form stays open; updateFailed error visible; no alert() called', async () => {
|
||||
// Arrange — install a stub that 500s on PATCH; spy on window.alert.
|
||||
let patchCount = 0
|
||||
server.use(
|
||||
http.patch('/api/admin/classes/:id', () => {
|
||||
patchCount += 1
|
||||
return errorResponse(500, 'simulated server error')
|
||||
}),
|
||||
)
|
||||
const alertSpy = window.alert
|
||||
let alertCalls = 0
|
||||
window.alert = () => { alertCalls += 1 }
|
||||
|
||||
try {
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
await clickEdit('1')
|
||||
const row1 = getRow('1')
|
||||
const nameInput = within(row1).getByDisplayValue('class-a') as HTMLInputElement
|
||||
await userEvent.clear(nameInput)
|
||||
await userEvent.type(nameInput, 'will-fail')
|
||||
|
||||
// Act
|
||||
await userEvent.click(within(row1).getByRole('button', { name: /^save$|^зберегти$/i }))
|
||||
|
||||
// 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 screen.findByRole('alert')
|
||||
expect(alert.textContent ?? '').toMatch(/update failed|не вдалося оновити/i)
|
||||
expect(within(row1After).getByDisplayValue('will-fail')).toBeInTheDocument()
|
||||
expect(alertCalls).toBe(0)
|
||||
} finally {
|
||||
window.alert = alertSpy
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
describe('AC-8: regression — add + delete unchanged', () => {
|
||||
it('Add posts to /api/admin/classes and refetches the list', async () => {
|
||||
// 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: '#FF9D3D', maxSizeM: 7, photoMode: 0 }
|
||||
server.use(
|
||||
http.post('/api/admin/classes', async ({ request }) => {
|
||||
postCalls.push({ body: await request.json() })
|
||||
return jsonResponse(NEW_CLASS, { status: 201 })
|
||||
}),
|
||||
http.get('/api/annotations/classes', () => {
|
||||
getCount += 1
|
||||
if (getCount === 1) return jsonResponse(TWO_CLASSES)
|
||||
return jsonResponse([...TWO_CLASSES, NEW_CLASS])
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// 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))
|
||||
expect((postCalls[0].body as { name: string }).name).toBe('fresh')
|
||||
await waitFor(() => expect(screen.getByText('fresh')).toBeInTheDocument())
|
||||
})
|
||||
|
||||
it('Delete sends DELETE and removes the row optimistically', async () => {
|
||||
// Arrange
|
||||
const deleteCalls: string[] = []
|
||||
server.use(
|
||||
http.delete('/api/admin/classes/:id', ({ params }) => {
|
||||
deleteCalls.push(`/api/admin/classes/${String(params.id)}`)
|
||||
return new Response(null, { status: 204 })
|
||||
}),
|
||||
)
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// Act
|
||||
const row1 = getRow('1')
|
||||
await userEvent.click(within(row1).getByRole('button', { name: '×' }))
|
||||
|
||||
// Assert
|
||||
await waitFor(() => expect(deleteCalls).toEqual(['/api/admin/classes/1']))
|
||||
await waitFor(() => expect(screen.queryByText('class-a')).not.toBeInTheDocument())
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -80,10 +80,11 @@ describe('AZ-466 — Destructive UX policy (class-delete cross-component test)',
|
||||
// Wait for the class table to populate.
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// Act — find the delete button on the first class row.
|
||||
// Act — find the delete button on the first class row. AZ-512 added
|
||||
// an edit (✎) button alongside the delete (×); select by text.
|
||||
const rows = screen.getAllByText(/^class-/i)
|
||||
const firstRow = rows[0].closest('tr')!
|
||||
const deleteBtn = firstRow.querySelector('button')!
|
||||
const deleteBtn = Array.from(firstRow.querySelectorAll('button')).find(b => b.textContent === '×')!
|
||||
await userEvent.click(deleteBtn)
|
||||
|
||||
// Assert — a ConfirmDialog must appear before any DELETE fires.
|
||||
@@ -111,7 +112,7 @@ describe('AZ-466 — Destructive UX policy (class-delete cross-component test)',
|
||||
|
||||
const rows = screen.getAllByText(/^class-/i)
|
||||
const firstRow = rows[0].closest('tr')!
|
||||
const deleteBtn = firstRow.querySelector('button')!
|
||||
const deleteBtn = Array.from(firstRow.querySelectorAll('button')).find(b => b.textContent === '×')!
|
||||
await userEvent.click(deleteBtn)
|
||||
|
||||
await waitFor(() => expect(deletes).toHaveLength(1), { timeout: 1000 })
|
||||
@@ -129,10 +130,12 @@ describe('AZ-466 — Destructive UX policy (class-delete cross-component test)',
|
||||
renderWithProviders(<AdminPage />)
|
||||
await screen.findByText('class-a')
|
||||
|
||||
// Act — click delete, then Cancel on the dialog.
|
||||
// Act — click delete, then Cancel on the dialog. AZ-512 added an
|
||||
// edit (✎) button alongside the delete (×); select by text.
|
||||
const rows = screen.getAllByText(/^class-/i)
|
||||
const firstRow = rows[0].closest('tr')!
|
||||
await userEvent.click(firstRow.querySelector('button')!)
|
||||
const deleteBtn = Array.from(firstRow.querySelectorAll('button')).find(b => b.textContent === '×')!
|
||||
await userEvent.click(deleteBtn)
|
||||
|
||||
// Drift: the dialog never appears today. The find call fails first
|
||||
// (no `role="dialog"` ever mounts), but even if it did, cancel would
|
||||
|
||||
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 })
|
||||
}),
|
||||
]
|
||||
@@ -56,6 +56,25 @@ export const adminHandlers = [
|
||||
return jsonResponse(body)
|
||||
}),
|
||||
|
||||
// AZ-512 — PATCH partial-merge over the seeded class. Default-handler
|
||||
// returns the merged shape so the UI's PATCH-then-refetch sequence sees the
|
||||
// updated row. Tests that need 404/5xx semantics override per-scenario.
|
||||
http.patch('/api/admin/classes/:id', async ({ params, request }) => {
|
||||
const idParam = String(params.id)
|
||||
const id = Number(idParam)
|
||||
const body = (await request.json().catch(() => ({}))) as Partial<{
|
||||
name: string
|
||||
shortName: string
|
||||
color: string
|
||||
maxSizeM: number
|
||||
photoMode: number
|
||||
}>
|
||||
const existing =
|
||||
seedClasses.find((c) => String(c.id) === idParam) ??
|
||||
({ id: Number.isFinite(id) ? id : 0, name: '', shortName: '', color: '#FF0000', maxSizeM: 5, photoMode: 0 } as const)
|
||||
return jsonResponse({ ...existing, ...body, id: existing.id })
|
||||
}),
|
||||
|
||||
http.delete('/api/admin/classes/:id', () => noContent()),
|
||||
|
||||
http.get('/api/admin/settings', () =>
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/api/sse.ts","./src/auth/authcontext.tsx","./src/auth/protectedroute.tsx","./src/components/confirmdialog.tsx","./src/components/detectionclasses.tsx","./src/components/flightcontext.tsx","./src/components/header.tsx","./src/components/helpmodal.tsx","./src/components/savedannotationscontext.tsx","./src/features/admin/adminpage.tsx","./src/features/annotations/annotationspage.tsx","./src/features/annotations/annotationssidebar.tsx","./src/features/annotations/canvaseditor.tsx","./src/features/annotations/medialist.tsx","./src/features/annotations/videoplayer.tsx","./src/features/annotations/classcolors.ts","./src/features/annotations/thumbnail.ts","./src/features/dataset/datasetpage.tsx","./src/features/flights/altitudechart.tsx","./src/features/flights/altitudedialog.tsx","./src/features/flights/drawcontrol.tsx","./src/features/flights/flightlistsidebar.tsx","./src/features/flights/flightmap.tsx","./src/features/flights/flightparamspanel.tsx","./src/features/flights/flightspage.tsx","./src/features/flights/jsoneditordialog.tsx","./src/features/flights/mappoint.tsx","./src/features/flights/minimap.tsx","./src/features/flights/waypointlist.tsx","./src/features/flights/windeffect.tsx","./src/features/flights/flightplanutils.ts","./src/features/flights/mapicons.ts","./src/features/flights/types.ts","./src/features/login/loginpage.tsx","./src/features/settings/settingspage.tsx","./src/hooks/usedebounce.ts","./src/hooks/useresizablepanel.ts","./src/i18n/i18n.ts","./src/types/index.ts"],"version":"5.7.3"}
|
||||
Reference in New Issue
Block a user