mirror of
https://github.com/azaion/ui.git
synced 2026-04-22 06:46:34 +00:00
Refactor project structure and dependencies; rename package to azaion-ui, update version to 0.0.1, and remove unused files. Introduce new routing and authentication features in App component.
This commit is contained in:
Oleksandr Bezdieniezhnykh
Binary file not shown.
@@ -0,0 +1,419 @@
|
||||
# Azaion UI Design
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
| Device | Min Width | Viewport | Aspect Ratio |
|
||||
|--------|-----------|----------|--------------|
|
||||
| Mobile | 640px | 390px | 32:20 |
|
||||
| Tablet/PC | 1280px | 780px / 1280×800 | 16:10 |
|
||||
| Mini Laptop | 1280px+ | 1280px | Responsive |
|
||||
|
||||
## Pages
|
||||
|
||||
| Page | Wireframe |
|
||||
|------|-----------|
|
||||
| Login | *(no wireframe — see Login Page Layout below)* |
|
||||
| Flights | [flights.html](./flights.html) (includes GPS-Denied panel via toggle) |
|
||||
| Annotations | [annotations.html](./annotations.html) |
|
||||
| Dataset Explorer | [dataset_explorer.html](./dataset_explorer.html) |
|
||||
| Admin | [admin.html](./admin.html) |
|
||||
| Settings | [settings.html](./settings.html) |
|
||||
|
||||
## Global Header
|
||||
|
||||
All pages share a common header:
|
||||
|
||||
```
|
||||
[AZAION Logo] [Flight Selector ▼] | Flights | Annotations | Dataset | Admin | [User] [Settings] [Logout]
|
||||
```
|
||||
|
||||
### Flight Selector
|
||||
|
||||
The flight selector is a dropdown in the header. Clicking the selector opens a dropdown panel containing:
|
||||
|
||||
- Text filter input (search by flight name)
|
||||
- Scrollable list of flights showing: flight name, created date
|
||||
- Clicking a flight selects it and closes the dropdown
|
||||
|
||||
The selected flight is the **global context** for the application. When a flight is selected:
|
||||
|
||||
- **Annotations tab**: media list filters by `GET /media?flightId=<selectedFlightId>`
|
||||
- **Dataset Explorer**: flight filter pre-selects the current flight
|
||||
- **Flights tab**: the selected flight is highlighted in the flight list sidebar
|
||||
|
||||
The selector persists the selected flight in `UserSettings` (see [Database Schema](../00_database_schema.md)). On app load, the last selected flight is restored.
|
||||
|
||||
## Mobile Bottom Navigation
|
||||
|
||||
On mobile devices, a bottom navigation bar replaces the header tabs:
|
||||
|
||||
```
|
||||
[ FL ] [ ANN ] [ DATA ] [ ADM ] [ ⚙ ]
|
||||
```
|
||||
|
||||
## Flights Page Layout
|
||||
|
||||
Flights and GPS-Denied share a single page. The left panel toggles between Flight Parameters and GPS-Denied mode via a toggle button.
|
||||
|
||||
### Flight List Sidebar (far left, ~200px)
|
||||
- List of flights (e.g. FL01, FL02, FL03) with created date
|
||||
- "Create New" button
|
||||
- Telemetry section with DatePicker
|
||||
|
||||
### Left Panel (~260px, toggleable)
|
||||
|
||||
**Flight Parameters mode** (default):
|
||||
- Aircraft selector (dropdown)
|
||||
- Default Height (input)
|
||||
- Camera settings: FocalLength (mm), SensorWidth (mm), Altitude (m)
|
||||
- Communication Address / Port
|
||||
- Waypoints list: Start, Point1, Point2... (with labels), Finish
|
||||
- **GPS-Denied toggle** button: switches this panel to GPS-Denied mode
|
||||
- Upload action
|
||||
|
||||
**GPS-Denied mode** (toggled):
|
||||
- **Orthophoto Upload**: List of uploaded photos with name and GPS coordinates, upload button
|
||||
- **Live GPS**: Real-time GPS data via SSE (status, lat, lon, satellites)
|
||||
- **GPS Correction**: Waypoint number input, corrected GPS input, apply button
|
||||
- **Back to Flight** button: returns to Flight Parameters mode
|
||||
|
||||
### Map View (right, ~800px)
|
||||
Interactive map displaying waypoints connected by the flight path.
|
||||
|
||||
In GPS-Denied mode, the map additionally shows:
|
||||
- Original flight path (red dashed line)
|
||||
- Corrected path (green solid line) overlay
|
||||
- Waypoint markers with correction indicators
|
||||
|
||||
## Login Page Layout
|
||||
|
||||
Displayed before authentication. No header navigation — only the login form.
|
||||
|
||||
### Login Form (centered, ~400px wide)
|
||||
- Email input
|
||||
- Password input
|
||||
- "Login" button
|
||||
- Status / error message area
|
||||
|
||||
### Unlock Progress States
|
||||
|
||||
After successful login, the UI shows a progress screen while the binary-split unlock flow completes:
|
||||
|
||||
```
|
||||
Authenticating → Downloading key → Decrypting → Starting services → Ready
|
||||
```
|
||||
|
||||
Each state is displayed with a spinner or progress indicator. On **Ready**, the UI navigates to the main application.
|
||||
|
||||
---
|
||||
|
||||
## Annotations Tab Layout
|
||||
|
||||
All panels are separated by draggable splitters. Panel widths persist across sessions via `UserSettings` table.
|
||||
|
||||
### Left Panel (~250px)
|
||||
|
||||
#### Media List
|
||||
- List of media files (photos, videos) for the selected flight
|
||||
- Columns: File name, Duration (for videos)
|
||||
- Files with existing annotations are highlighted (darker background)
|
||||
- Clicking a media item loads it in the viewer; double-click starts playback
|
||||
- Text filter input above the list to search by file name
|
||||
- Context menu: "Delete media" (with confirmation dialog)
|
||||
- Media files are loaded from the backend via `GET /media?flightId=`. The media sidebar shows files associated with the selected flight via the Media API.
|
||||
|
||||
#### Detection Classes (below media list)
|
||||
- DataGrid with columns: Key (color + number), Name
|
||||
- PhotoMode switcher at bottom: Regular (0) | Winter (20) | Night (40)
|
||||
- Selecting a class sets the active drawing class; `yoloId = classId + photoModeOffset`
|
||||
- Keyboard: press `1–9` to select class by number
|
||||
- Captions hidden when panel width < 230px
|
||||
|
||||
### Main Viewer (center)
|
||||
|
||||
#### Canvas Editor
|
||||
Interactive annotation drawing tool overlaid on the image/video frame:
|
||||
- **Draw**: click-and-drag to create a bounding box
|
||||
- **Resize**: 8 directional handles on selected box
|
||||
- **Move**: drag a selected box to reposition
|
||||
- **Multi-select**: Ctrl+click to select multiple boxes
|
||||
- **Zoom**: Ctrl+mouse wheel to zoom in/out
|
||||
- **Pan**: Ctrl+drag to pan when zoomed
|
||||
- **Crosshair**: cursor shows crosshair with active class name hint
|
||||
- All coordinates are clamped to image bounds (normalized 0.0–1.0)
|
||||
- **Tile zoom**: when opening a tile-based detection result (from large image split processing), the editor automatically zooms and centers on the specific tile region within the full image
|
||||
|
||||
#### Bounding Box Labels
|
||||
Each bounding box displays:
|
||||
- Affiliation icon (see [Affiliation Icons](#affiliation-icons) below)
|
||||
- Combat readiness indicator (see [Combat Readiness](#combat-readiness) below)
|
||||
- Detection class name
|
||||
- Confidence percentage (shown only when < 99.5%)
|
||||
|
||||
#### Video Controls
|
||||
- Progress bar (click/drag to seek)
|
||||
- Toolbar buttons: Play, Pause, Stop, Previous frame, Next frame, Save, Delete selected, Delete all, Mute/Unmute, Volume slider
|
||||
- Frame-by-frame step buttons: 1, 5, 10, 30, 60 frames — these jump the exact number of frames forward (not time-based). The web video player must support frame-accurate seeking. Frame duration = 1 / video FPS.
|
||||
- AI Detect button — triggers AI detection on the current frame/media
|
||||
- GPS panel toggle — shows/hides the MapMatcher panel below the viewer
|
||||
- Sound detections button (placeholder for future audio analysis)
|
||||
- Drone maintenance button (placeholder for future UAV diagnostics)
|
||||
- Status bar: current time / total time, help text, status messages
|
||||
|
||||
#### Video Annotation Time-Window Display
|
||||
|
||||
During video playback, annotations are displayed on the canvas based on their `Time` (video playback position). An annotation is visible when the current playback position falls within a time window around its `Time`:
|
||||
|
||||
| Threshold | Value | Description |
|
||||
|-----------|-------|-------------|
|
||||
| Before | 50 ms | Show annotation this much before its `Time` |
|
||||
| After | 150 ms | Keep annotation visible this long after its `Time` |
|
||||
|
||||
The UI maintains an interval lookup (e.g. interval tree) keyed by `[Time - 50ms, Time + 150ms]` for each annotation. On each position update from the video player, the UI queries for all overlapping intervals and renders those annotations on the canvas. Annotations outside the window are cleared.
|
||||
|
||||
#### AI Detection Progress
|
||||
When AI detection is triggered, a modal dialog appears showing:
|
||||
- Scrolling log of detection progress
|
||||
- Stop button (Esc to dismiss)
|
||||
- Detection results are streamed via SSE (`DetectionEvent`)
|
||||
|
||||
#### Camera Config (per-session)
|
||||
Camera settings are adjustable per annotation session. They are displayed when the user opens the current flight's settings panel (accessed from the Flight Parameters panel on the Flights tab). These override the global defaults for GSD-based detection size validation.
|
||||
- Altitude: slider (0–10000 m) + numeric input (50–5000, step 10)
|
||||
- FocalLength: numeric input (0.1–100 mm, step 0.05)
|
||||
- SensorWidth: numeric input (0.1–100 mm, step 0.05)
|
||||
|
||||
See [Annotations — Camera Settings](../01_annotations.md#camera-settings-per-session) for API endpoints.
|
||||
|
||||
### Annotations List (right sidebar, ~200px)
|
||||
- DataGrid with columns: Frame time (e.g. "00:12"), Class name
|
||||
- Rows are colored with a gradient matching the detection class colors (see [Annotation Row Gradient](#annotation-row-gradient) below)
|
||||
- Double-click a row to seek the video to that frame and zoom to the annotation
|
||||
- Multi-select with Ctrl for bulk delete
|
||||
- Selecting a row highlights the corresponding bounding box on the canvas
|
||||
|
||||
### Help System
|
||||
- Menu: Help > "How to annotate" opens a help window (see [Annotation Quality Guidelines](#annotation-quality-guidelines) below)
|
||||
- Step-by-step guidance in the status bar: Initial → Play Video → Pause for Annotations → Annotation Help
|
||||
|
||||
---
|
||||
|
||||
## Dataset Explorer Layout
|
||||
|
||||
### Left Panel (~250px)
|
||||
|
||||
#### Detection Classes
|
||||
- Same DetectionClasses control as the Annotations tab (class list + PhotoMode switcher)
|
||||
- Selecting a class filters the grid to show only annotations of that class
|
||||
|
||||
#### Filters
|
||||
- "Show with objects only" checkbox — hides annotations with no detections
|
||||
- Text search input — search by annotation name (throttled, 400ms debounce)
|
||||
|
||||
### Filter Bar (top of main area)
|
||||
- Date range picker (from / to)
|
||||
- Flight filter dropdown
|
||||
- Status filter buttons: None, Created, Edited, Validated
|
||||
|
||||
### Main Area (tabbed)
|
||||
|
||||
#### Annotations Tab (default)
|
||||
- Virtualized grid of annotation thumbnail tiles (responsive, min 180px per tile)
|
||||
- Each tile shows: thumbnail image, annotation name, created date + creator email
|
||||
- Seed annotations are highlighted with a red border (`IsSeed` flag)
|
||||
- Double-click a tile to open it in the Editor tab
|
||||
- Multi-select for bulk validation
|
||||
- Keyboard: Del (delete), Enter (save), V (validate), Up/Down/PageUp/PageDown (navigate)
|
||||
|
||||
#### Editor Tab (hidden until opened)
|
||||
- Full Canvas Editor (same as Annotations tab) for inline annotation editing
|
||||
- Esc to close and return to grid
|
||||
- Keyboard: 1–9 (class select), Enter (save), Del (delete selected), X (delete all)
|
||||
|
||||
#### Class Distribution Tab
|
||||
- Horizontal bar chart showing annotation count per detection class
|
||||
- Each bar is colored with the class color
|
||||
- Displays: colored bar, class label, count
|
||||
|
||||
### Status Bar (bottom)
|
||||
- Validate button (visible when annotations are selected) — bulk-validates selected annotations
|
||||
- Refresh thumbnails button — regenerates the thumbnail database with progress bar
|
||||
- Selected annotation name
|
||||
- Status text
|
||||
|
||||
---
|
||||
|
||||
## Admin Tab Layout
|
||||
|
||||
### Detection Classes Table (left, ~340px)
|
||||
- Numbered rows (0–16) with columns: #, Name, Icon, Delete
|
||||
- Sample classes: Military Vehicle, Truck, Car, Artillery, Active Mine
|
||||
|
||||
### AI Recognition Settings (center)
|
||||
- #Frames To Recognize (default: 4)
|
||||
- Min Seconds Between Recognition (default: 2)
|
||||
- Min Confidence Threshold % (default: 25)
|
||||
|
||||
### GPS Device Settings (center, below AI)
|
||||
- Device Address, Port, Protocol
|
||||
|
||||
### Default Aircrafts Sidebar (right, ~280px)
|
||||
- List of default aircraft with type indicator (P=Plane, C=Copter)
|
||||
- Star icon for default selection
|
||||
|
||||
### User Management (separate section / sub-page)
|
||||
User CRUD is hosted on the remote Admin API. In the React UI, this is a sub-section of the Admin tab or a separate page accessible from the Admin area. Full details are in a separate repository; the initial implementation provides basic user list and create/edit/deactivate functionality. See [Authentication — User Management](../10_auth.md#user-management-admin-only) for endpoints.
|
||||
|
||||
- User table: Name, Email, Role, Status (Active/Inactive)
|
||||
- Create user form: Name, Email, Password, Role selector
|
||||
- Edit user: inline edit or modal
|
||||
- Deactivate user (soft delete — sets Status to Inactive)
|
||||
|
||||
---
|
||||
|
||||
## Settings Tab Layout
|
||||
|
||||
### Tenant Configuration (left column, ~300px)
|
||||
- Military Unit
|
||||
- Name
|
||||
- Default Camera Width (px)
|
||||
- Default Camera FoV (°)
|
||||
|
||||
### Directories (center column, ~300px)
|
||||
- Images Dir
|
||||
- Labels Dir
|
||||
- Thumbnails Dir
|
||||
|
||||
### Aircrafts Table (right)
|
||||
- Columns: Model, Type (Plane/Copter), Default toggle
|
||||
|
||||
---
|
||||
|
||||
## Resizable Panels
|
||||
|
||||
All multi-panel layouts (Annotations, Dataset Explorer) use draggable splitters between columns. Users can resize panels by dragging the splitter. Panel widths are saved to the `UserSettings` table in the database and restored on next session. Each user has their own stored layout preferences.
|
||||
|
||||
---
|
||||
|
||||
## Confirmation Dialogs
|
||||
|
||||
Destructive actions require a confirmation dialog before execution:
|
||||
|
||||
| Action | Dialog message |
|
||||
|--------|---------------|
|
||||
| Delete media file | "Delete this media file?" |
|
||||
| Delete selected annotations | "Delete selected annotations?" |
|
||||
| Delete all annotations | "Delete all annotations for this frame?" |
|
||||
| Deactivate user | "Deactivate this user?" |
|
||||
|
||||
Dialogs use a standard modal with Cancel / Confirm buttons. Cancel is the default focused button.
|
||||
|
||||
---
|
||||
|
||||
## Annotation Quality Guidelines
|
||||
|
||||
The help window (accessible from Help > "How to annotate") contains the following annotation quality rules:
|
||||
|
||||
1. Annotations must contain objects of the best clarity and quality. Heavily blurred or smoke-obscured objects are not suitable.
|
||||
2. The more angles of the same object the better. If the video shows an object small at first and then the camera zooms in, both the small and large views should be annotated. If an object is static and the angle doesn't change, one annotation is enough; if it moves and is visible from different sides, annotate once per angle.
|
||||
3. Objects with shapes that significantly differ from a rectangle: do not include protruding parts (e.g. a tank's barrel) if it adds too much empty space to the bounding box. Similarly for trenches — if they span a large area, create several smaller annotations of the trench segments rather than one large box with too much background.
|
||||
4. Any existing marks on the video (OSD overlays, HUD elements, etc.) must not be inside annotations. An annotation must contain only the specific object without lines or overlays on it.
|
||||
5. Each video should have 2–3 empty frames saved without any objects or annotations, for better training (negative samples). Simply press Enter on a few different frames with nothing in them.
|
||||
6. Objects of the same class must be visually similar, while objects of different classes must be visually distinct. Since this is a dataset for neural network training (not a military equipment catalog), class assignment should follow visual similarity for better recognition. For example, self-propelled artillery on tracks should be annotated as "Armored Vehicle" because it visually resembles a tank more than a mortar.
|
||||
|
||||
---
|
||||
|
||||
## Affiliation Icons
|
||||
|
||||
Bounding box labels display an affiliation icon using NATO MIL-STD-2525-style shapes:
|
||||
|
||||
| Affiliation | Shape | Color | Description |
|
||||
|-------------|-------|-------|-------------|
|
||||
| Friendly | Rectangle | Light blue (#87CEEB) | Blue filled rectangle with dark outline |
|
||||
| Hostile | Diamond | Red (#FF0000) | Red filled diamond (rotated square) with dark outline |
|
||||
| Unknown | Quatrefoil | Yellow (#FFD700) | Yellow filled four-lobed clover shape with dark outline |
|
||||
| None | *(no icon)* | — | No affiliation icon displayed |
|
||||
|
||||
The React UI renders these as inline SVGs next to the class label inside each bounding box overlay.
|
||||
|
||||
---
|
||||
|
||||
## Combat Readiness
|
||||
|
||||
Bounding box labels display a combat readiness indicator alongside the affiliation icon:
|
||||
|
||||
| Value | Indicator | Description |
|
||||
|-------|-----------|-------------|
|
||||
| Ready | Green dot | Target is combat-ready |
|
||||
| NotReady | Gray dot | Target is not combat-ready |
|
||||
| Unknown | *(no indicator)* | Readiness not assessed |
|
||||
|
||||
The indicator is rendered as a small circle next to the affiliation icon inside the bounding box overlay.
|
||||
|
||||
---
|
||||
|
||||
## Annotation Row Gradient
|
||||
|
||||
In the Annotations list (right sidebar), each row's background is a horizontal linear gradient composed of the colors of all detections in that annotation:
|
||||
|
||||
- Each detection contributes a gradient stop using its class color
|
||||
- The color opacity is modulated by the detection's confidence (higher confidence = more opaque)
|
||||
- If no detections exist, the row has a subtle light gray background (`#40DDDDDD`)
|
||||
- The gradient runs left-to-right, with equal-width stops per detection
|
||||
|
||||
This provides a quick visual summary of what classes are present in each annotation and how confident the detections are.
|
||||
|
||||
---
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
### Annotations Tab
|
||||
|
||||
| Key | Action |
|
||||
|-----|--------|
|
||||
| `1–9` / `NumPad1–9` | Select detection class |
|
||||
| `Space` | Pause / resume playback |
|
||||
| `Left` | Previous frame |
|
||||
| `Right` | Next frame |
|
||||
| `Ctrl+Left` | Skip 5 seconds back |
|
||||
| `Ctrl+Right` | Skip 5 seconds forward |
|
||||
| `Enter` | Save annotations and continue |
|
||||
| `Del` | Delete selected annotations |
|
||||
| `X` | Delete all annotations |
|
||||
| `R` | Trigger AI detection |
|
||||
| `M` | Mute / unmute |
|
||||
| `VolumeUp` / `VolumeDown` | Volume +/- 5 |
|
||||
| `PageUp` / `PageDown` | Previous / next media file |
|
||||
|
||||
### Dataset Explorer
|
||||
|
||||
| Key | Action |
|
||||
|-----|--------|
|
||||
| `1–9` | Select detection class |
|
||||
| `Enter` | Save annotations |
|
||||
| `Del` | Delete selected annotations |
|
||||
| `X` | Delete all annotations |
|
||||
| `Esc` | Close editor, return to grid |
|
||||
| `Up` / `Down` | Navigate thumbnails |
|
||||
| `PageUp` / `PageDown` | Page navigation |
|
||||
| `V` | Validate selected annotations |
|
||||
|
||||
---
|
||||
|
||||
## Localization
|
||||
|
||||
The UI supports Ukrainian (UA) and English (EN) localization. Language is selectable per user session.
|
||||
|
||||
Detection class names use Ukrainian display names from the seed data alongside the English `Name`. See [Admin — Default Seed Classes](../07_admin.md#default-seed-classes).
|
||||
|
||||
---
|
||||
|
||||
## Color Scheme
|
||||
|
||||
- Primary: Dark navy/blue (#343a40)
|
||||
- Secondary: Orange/amber accents (#fd7e14)
|
||||
- Background: Dark gray (#1e1e1e)
|
||||
- Text: White/light gray (#ffffff, #adb5bd)
|
||||
- Success: Green (#40c057)
|
||||
- Primary buttons: Blue (#228be6)
|
||||
- Danger: Red (#fa5252)
|
||||
@@ -0,0 +1,236 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Azaion – Admin Tab Wireframe</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
az: { bg: '#1e1e1e', panel: '#2b2b2b', header: '#343a40', border: '#495057', muted: '#6c757d', text: '#adb5bd', orange: '#fd7e14', blue: '#228be6', red: '#fa5252', green: '#40c057' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-az-bg text-white h-screen flex flex-col font-sans">
|
||||
|
||||
<header class="flex items-center bg-az-header px-4 py-2 gap-2 border-b border-az-border">
|
||||
<span class="font-extrabold text-az-orange tracking-wider">AZAION</span>
|
||||
<span class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm">FL02 <span class="text-az-orange ml-1">♥</span></span>
|
||||
<nav class="flex gap-0.5 ml-4">
|
||||
<a href="flights.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Flights</a>
|
||||
<a href="annotations.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Dataset Explorer</a>
|
||||
<a href="admin.html" class="px-4 py-1.5 text-sm bg-az-bg text-white font-semibold rounded-t">Admin</a>
|
||||
</nav>
|
||||
<div class="ml-auto flex items-center gap-3 text-sm text-az-text">
|
||||
<span>user@azaion.com</span>
|
||||
<a href="settings.html" class="hover:text-white">⚙</a>
|
||||
<a href="#" class="hover:text-white">⏻</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
|
||||
<div class="w-[340px] bg-az-panel border-r border-az-border flex flex-col shrink-0">
|
||||
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Detection Classes</h3>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-az-text text-[11px] uppercase tracking-wide border-b border-az-border">
|
||||
<th class="px-3 py-2 text-left w-10">#</th>
|
||||
<th class="px-2 py-2 text-left">Name</th>
|
||||
<th class="px-2 py-2 text-center w-12">Icon</th>
|
||||
<th class="px-2 py-2 text-center w-10"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">0</td>
|
||||
<td class="px-2 py-2">ArmorVehicle</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#fa5252]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">1</td>
|
||||
<td class="px-2 py-2">Truck</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#40c057]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">2</td>
|
||||
<td class="px-2 py-2">Vehicle</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#228be6]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">3</td>
|
||||
<td class="px-2 py-2">Artillery</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#FFFF00]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">4</td>
|
||||
<td class="px-2 py-2">Shadow</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#FF00FF]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">5</td>
|
||||
<td class="px-2 py-2">Trenches</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#00FFFF]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">6</td>
|
||||
<td class="px-2 py-2">MilitaryMan</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#188021]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">7</td>
|
||||
<td class="px-2 py-2">TyreTracks</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#800000]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">8</td>
|
||||
<td class="px-2 py-2">AdditionArmoredTank</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#008000]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">9</td>
|
||||
<td class="px-2 py-2">Smoke</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#000080]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">10</td>
|
||||
<td class="px-2 py-2">Plane</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#000080]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">11</td>
|
||||
<td class="px-2 py-2">Moto</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#808000]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">12</td>
|
||||
<td class="px-2 py-2">CamouflageNet</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#800080]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">13</td>
|
||||
<td class="px-2 py-2">CamouflageBranches</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#2f4f4f]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">14</td>
|
||||
<td class="px-2 py-2">Roof</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#1e90ff]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">15</td>
|
||||
<td class="px-2 py-2">Building</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#ffb6c1]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">16</td>
|
||||
<td class="px-2 py-2">Caponier</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#ffb6c1]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">17</td>
|
||||
<td class="px-2 py-2">Ammo</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#33658a]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2 text-az-text">18</td>
|
||||
<td class="px-2 py-2">Protect.Struct</td>
|
||||
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#969647]"></span></td>
|
||||
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col overflow-y-auto p-4 gap-6">
|
||||
|
||||
<div>
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">AI Recognition Settings</h3>
|
||||
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3 max-w-md">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-sm text-az-text"># Frames To Recognize</label>
|
||||
<input type="number" value="4" class="w-20 bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm text-right">
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-sm text-az-text">Min Seconds Between Recognition</label>
|
||||
<input type="number" value="2" class="w-20 bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm text-right">
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-sm text-az-text">Min Confidence Threshold (%)</label>
|
||||
<input type="number" value="25" class="w-20 bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm text-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">GPS Device Settings</h3>
|
||||
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3 max-w-md">
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Device Address</label>
|
||||
<input type="text" placeholder="192.168.1.100" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Device Port</label>
|
||||
<input type="number" placeholder="9001" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Protocol</label>
|
||||
<select class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
<option>NMEA</option><option>UBX</option><option>MAVLink</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-[280px] bg-az-panel border-l border-az-border flex flex-col shrink-0">
|
||||
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Default Aircrafts</h3>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="flex items-center gap-2 px-3 py-2.5 text-sm border-b border-neutral-800 bg-az-border">
|
||||
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px]">P</span>
|
||||
<span>DJI Mavic 3</span>
|
||||
<span class="ml-auto text-az-orange text-xs">★</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2.5 text-sm border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="w-5 h-5 rounded bg-az-green flex items-center justify-center text-[9px]">C</span>
|
||||
<span>Matrice 300 RTK</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2.5 text-sm border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="w-5 h-5 rounded bg-az-orange flex items-center justify-center text-[9px]">P</span>
|
||||
<span>Fixed Wing Scout</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Azaion – Annotations Tab Wireframe</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
az: { bg: '#1e1e1e', panel: '#2b2b2b', header: '#343a40', border: '#495057', muted: '#6c757d', text: '#adb5bd', orange: '#fd7e14', blue: '#228be6', red: '#fa5252', green: '#40c057' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-az-bg text-white h-screen flex flex-col font-sans">
|
||||
|
||||
<header class="flex items-center bg-az-header px-4 py-2 gap-2 border-b border-az-border">
|
||||
<span class="font-extrabold text-az-orange tracking-wider">AZAION</span>
|
||||
<span class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm">FL03 <span class="text-az-orange ml-1">♥</span></span>
|
||||
<nav class="flex gap-0.5 ml-4">
|
||||
<a href="flights.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Flights</a>
|
||||
<a href="annotations.html" class="px-4 py-1.5 text-sm bg-az-bg text-white font-semibold rounded-t">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Dataset Explorer</a>
|
||||
<a href="admin.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Admin</a>
|
||||
</nav>
|
||||
<div class="ml-auto flex items-center gap-3 text-sm text-az-text">
|
||||
<span>user@azaion.com</span>
|
||||
<a href="settings.html" class="hover:text-white">⚙</a>
|
||||
<a href="#" class="hover:text-white">⏻</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
|
||||
<aside class="w-64 bg-az-panel border-r border-az-border flex flex-col shrink-0">
|
||||
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Media Files</h3>
|
||||
<div class="flex-1 overflow-y-auto min-h-0">
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 bg-az-border">
|
||||
<span class="w-4 h-4 rounded-sm bg-az-blue flex items-center justify-center text-[9px]">P</span> Photobook1
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="w-4 h-4 rounded-sm bg-az-orange flex items-center justify-center text-[9px]">V</span> Video 02
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="w-4 h-4 rounded-sm bg-az-orange flex items-center justify-center text-[9px]">V</span> Video 03
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="w-4 h-4 rounded-sm bg-az-blue flex items-center justify-center text-[9px]">P</span> Photo002
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="w-4 h-4 rounded-sm bg-az-blue flex items-center justify-center text-[9px]">P</span> Photo003
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="w-4 h-4 rounded-sm bg-az-orange flex items-center justify-center text-[9px]">V</span> Video 04
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Detection Classes</h3>
|
||||
<div class="overflow-y-auto">
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#FF0000"></span> MilVeh
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#00FF00"></span> Truck
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#0000FF"></span> Vehicle
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#FFFF00"></span> Artillery
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#FF00FF"></span> Shadow
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#00FFFF"></span> Trenches
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border-t border-az-border">
|
||||
<label class="block text-az-text mb-1.5 text-[11px] uppercase tracking-wide">PhotoMode</label>
|
||||
<div class="flex gap-2">
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
|
||||
<input type="radio" name="photomode" checked class="rounded-full"> Regular
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
|
||||
<input type="radio" name="photomode" class="rounded-full"> Winter
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
|
||||
<input type="radio" name="photomode" class="rounded-full"> Night
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 flex flex-col">
|
||||
<div class="flex-1 relative bg-neutral-900 flex items-center justify-center overflow-hidden">
|
||||
<div class="w-[90%] aspect-video bg-gradient-to-br from-[#2d4a3e] via-[#3a5548] to-[#4a6858] rounded relative overflow-hidden">
|
||||
<div class="absolute top-[35%] inset-x-0 h-px bg-white/10"></div>
|
||||
<div class="absolute top-[25%] left-[30%] w-[20%] h-[30%] border-2 border-az-red rounded-sm">
|
||||
<span class="absolute -top-5 left-0 bg-az-red text-white text-[10px] px-1.5 py-px rounded whitespace-nowrap">Mil. vehicle</span>
|
||||
</div>
|
||||
<div class="absolute top-[40%] left-[60%] w-[15%] h-[25%] border-2 border-az-orange rounded-sm">
|
||||
<span class="absolute -top-5 left-0 bg-az-orange text-white text-[10px] px-1.5 py-px rounded whitespace-nowrap">Mil. vehicle</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-az-panel border-t border-az-border px-3 py-1.5">
|
||||
<div class="w-full h-1 bg-az-border rounded mb-2 cursor-pointer">
|
||||
<div class="w-[35%] h-full bg-az-blue rounded"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">⏮</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">⏪</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">◀</button>
|
||||
<button class="bg-az-blue text-white w-8 h-7 rounded text-xs flex items-center justify-center">▶</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">▶▶</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">⏭</button>
|
||||
<span class="w-6"></span>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">1</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">5</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">10</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">30</button>
|
||||
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">60</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="w-52 bg-az-panel border-l border-az-border flex flex-col shrink-0">
|
||||
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Annotations</h3>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(255,0,0,0.25),transparent)">
|
||||
<span class="text-az-text text-xs">00:12</span>
|
||||
<span>MilVeh</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(0,255,0,0.25),transparent)">
|
||||
<span class="text-az-text text-xs">00:18</span>
|
||||
<span>Truck</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(0,0,255,0.25),transparent)">
|
||||
<span class="text-az-text text-xs">00:24</span>
|
||||
<span>Vehicle</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(255,255,0,0.25),transparent)">
|
||||
<span class="text-az-text text-xs">00:31</span>
|
||||
<span>Artillery</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(255,0,0,0.25),transparent)">
|
||||
<span class="text-az-text text-xs">00:45</span>
|
||||
<span>MilVeh</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,166 @@
|
||||
<!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 Wireframe</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
az: { bg: '#1e1e1e', panel: '#2b2b2b', header: '#343a40', border: '#495057', muted: '#6c757d', text: '#adb5bd', orange: '#fd7e14', blue: '#228be6', red: '#fa5252', green: '#40c057' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-az-bg text-white h-screen flex flex-col font-sans">
|
||||
|
||||
<header class="flex items-center bg-az-header px-4 py-2 gap-2 border-b border-az-border">
|
||||
<span class="font-extrabold text-az-orange tracking-wider">AZAION</span>
|
||||
<span class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm">FL03 <span class="text-az-orange ml-1">♥</span></span>
|
||||
<nav class="flex gap-0.5 ml-4">
|
||||
<a href="flights.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Flights</a>
|
||||
<a href="annotations.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="px-4 py-1.5 text-sm bg-az-bg text-white font-semibold rounded-t">Dataset Explorer</a>
|
||||
<a href="admin.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Admin</a>
|
||||
</nav>
|
||||
<div class="ml-auto flex items-center gap-3 text-sm text-az-text">
|
||||
<span>user@azaion.com</span>
|
||||
<a href="settings.html" class="hover:text-white">⚙</a>
|
||||
<a href="#" class="hover:text-white">⏻</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 flex overflow-hidden p-4 gap-3">
|
||||
|
||||
<aside class="w-64 shrink-0 flex flex-col gap-3 border-r border-az-border pr-3">
|
||||
<h2 class="text-sm font-semibold text-white">Detection Classes</h2>
|
||||
<ul class="flex flex-col gap-1.5 text-sm text-az-text">
|
||||
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#fa5252"></span>ArmorVehicle</li>
|
||||
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#40c057"></span>Truck</li>
|
||||
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#228be6"></span>Vehicle</li>
|
||||
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#FFFF00"></span>Artillery</li>
|
||||
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#FF00FF"></span>Shadow</li>
|
||||
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#00FFFF"></span>Trenches</li>
|
||||
</ul>
|
||||
<label class="flex items-center gap-2 text-sm text-az-text cursor-pointer">
|
||||
<input type="checkbox" class="rounded border-az-border bg-az-panel text-az-blue">
|
||||
Show with objects only
|
||||
</label>
|
||||
<input type="text" placeholder="Search..." class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm w-full placeholder:text-az-muted">
|
||||
</aside>
|
||||
|
||||
<div class="flex-1 flex flex-col overflow-hidden gap-3 min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[11px] text-az-text uppercase tracking-wide">Date</span>
|
||||
<input type="date" value="2025-02-09" class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm w-36">
|
||||
<input type="date" value="2025-02-11" class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm w-36">
|
||||
</div>
|
||||
<div class="w-px h-6 bg-az-border mx-1"></div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[11px] text-az-text uppercase tracking-wide">Flight</span>
|
||||
<select class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm min-w-[120px]">
|
||||
<option>All</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-px h-6 bg-az-border mx-1"></div>
|
||||
<button class="px-3 py-1 rounded-full text-xs border border-az-blue bg-az-blue text-white">Created</button>
|
||||
<button class="px-3 py-1 rounded-full text-xs border border-az-muted text-az-text hover:border-az-text hover:text-white">Edited / None</button>
|
||||
<button class="px-3 py-1 rounded-full text-xs border border-az-blue bg-az-blue text-white">Validated</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2">
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#2d4a3e]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5568] to-[#2d3748]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#44322a]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#3a5548]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a4a58] to-[#2d3748]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5548] to-[#3a4538]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#44322a]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#4a5548]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#2d4a3e]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5568] to-[#2d3748]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#3a5548]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#44322a]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a4a58] to-[#2d3748]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5548] to-[#3a4538]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#2d4a3e]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#553c2e]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5568] to-[#3a4a58]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#4a5548]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#2d4a3e]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
|
||||
</div>
|
||||
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
|
||||
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d3748] to-[#4a5568]"></div></div>
|
||||
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Azaion – Flights Tab Wireframe</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
az: { bg: '#1e1e1e', panel: '#2b2b2b', header: '#343a40', border: '#495057', muted: '#6c757d', text: '#adb5bd', orange: '#fd7e14', blue: '#228be6', red: '#fa5252', green: '#40c057' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-az-bg text-white h-screen flex flex-col font-sans">
|
||||
|
||||
<header class="flex items-center bg-az-header px-4 py-2 gap-2 border-b border-az-border">
|
||||
<span class="font-extrabold text-az-orange tracking-wider">AZAION</span>
|
||||
<span class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm">FL02 <span class="text-az-orange ml-1">♥</span></span>
|
||||
<nav class="flex gap-0.5 ml-4">
|
||||
<a href="flights.html" class="px-4 py-1.5 text-sm bg-az-bg text-white font-semibold rounded-t">Flights</a>
|
||||
<a href="annotations.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Dataset Explorer</a>
|
||||
<a href="admin.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Admin</a>
|
||||
</nav>
|
||||
<div class="ml-auto flex items-center gap-3 text-sm text-az-text">
|
||||
<span>user@azaion.com</span>
|
||||
<a href="settings.html" class="hover:text-white">⚙</a>
|
||||
<a href="#" class="hover:text-white">⏻</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
|
||||
<aside class="w-[200px] bg-az-panel border-r border-az-border flex flex-col shrink-0">
|
||||
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Flights</h3>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 bg-az-border">
|
||||
<span>FL02</span><span class="text-az-orange text-xs">♥</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span>FL01</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span>FL03</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<span>FL04</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mx-3 my-2 py-1.5 bg-az-blue text-white rounded text-xs hover:brightness-110">+ Create New</button>
|
||||
<div class="border-t border-az-border p-3">
|
||||
<label class="block text-[11px] text-az-text uppercase tracking-wide mb-1.5">Telemetry</label>
|
||||
<input type="date" value="2025-03-01" class="w-full bg-az-border border border-az-muted text-white px-2 py-1 rounded text-xs">
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="w-[260px] bg-az-panel border-r border-az-border overflow-y-auto shrink-0 relative">
|
||||
<div id="flightParams" class="p-3">
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Flight Parameters</h3>
|
||||
<div class="mb-2.5">
|
||||
<label class="block text-[11px] text-az-text mb-1">Aircraft</label>
|
||||
<select class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
|
||||
<option>Select aircraft...</option><option>DJI Mavic 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2.5">
|
||||
<label class="block text-[11px] text-az-text mb-1">Default Height (m)</label>
|
||||
<input type="number" value="100" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
|
||||
</div>
|
||||
<div class="mb-2.5">
|
||||
<label class="block text-[11px] text-az-text mb-1">Camera FOV / Length / Field</label>
|
||||
<input type="text" placeholder="FOV parameters" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-[11px] text-az-text mb-1">Communication Addr / Port</label>
|
||||
<input type="text" placeholder="192.168.1.1:8080" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
|
||||
</div>
|
||||
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-2">Waypoints</h3>
|
||||
<div class="space-y-0">
|
||||
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
|
||||
<span class="text-az-orange font-semibold min-w-[24px]">A1</span> Start
|
||||
</div>
|
||||
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
|
||||
<span class="text-az-orange font-semibold min-w-[24px]">A1</span> Point1 <span class="text-az-text text-[11px] ml-auto">Track Conf</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
|
||||
<span class="text-az-orange font-semibold min-w-[24px]">A1</span> Point2 <span class="text-az-text text-[11px] ml-auto">MilVeh</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
|
||||
<span class="text-az-orange font-semibold min-w-[24px]">A3</span> Point3
|
||||
</div>
|
||||
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
|
||||
<span class="text-az-orange font-semibold min-w-[24px]">A3</span> Point4 <span class="text-az-text text-[11px] ml-auto">Con</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
|
||||
<span class="text-az-orange font-semibold min-w-[24px]">—</span> Finish
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 mt-2.5">
|
||||
<button onclick="toggleGpsDenied()" class="px-2.5 py-1 rounded border border-az-red text-az-red text-[11px] hover:bg-az-red/10">GPS-Denied</button>
|
||||
<button class="px-2.5 py-1 rounded border border-az-green text-az-green text-[11px] hover:bg-az-green/10">Upload</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="gpsDenied" class="hidden p-3">
|
||||
<div class="flex items-center justify-between px-0 py-0 mb-3">
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide">GPS-Denied</h3>
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] border border-az-red text-az-red">Active</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h4 class="text-[11px] text-az-text uppercase tracking-wide mb-2">Orthophoto Upload</h4>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-2 bg-az-border rounded px-2.5 py-2 text-xs">
|
||||
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px] shrink-0">P</span>
|
||||
<span class="flex-1 truncate">ortho_001.jpg</span>
|
||||
<span class="text-az-text text-[10px] shrink-0">48.85,2.35</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-az-border rounded px-2.5 py-2 text-xs">
|
||||
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px] shrink-0">P</span>
|
||||
<span class="flex-1 truncate">ortho_002.jpg</span>
|
||||
<span class="text-az-text text-[10px] shrink-0">48.86,2.36</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-az-border rounded px-2.5 py-2 text-xs">
|
||||
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px] shrink-0">P</span>
|
||||
<span class="flex-1 truncate">ortho_003.jpg</span>
|
||||
<span class="text-az-text text-[10px] shrink-0">48.87,2.37</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-2 py-1.5 border border-dashed border-az-muted text-az-text text-xs rounded hover:border-az-blue hover:text-white">+ Upload Photos</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h4 class="text-[11px] text-az-text uppercase tracking-wide mb-2">Live GPS</h4>
|
||||
<div class="bg-az-border rounded p-2.5 text-xs space-y-1.5">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-az-text">Status</span>
|
||||
<span class="text-az-green">Connected</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-az-text">Lat</span>
|
||||
<span>48.8566</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-az-text">Lon</span>
|
||||
<span>2.3522</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-az-text">Satellites</span>
|
||||
<span>12</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h4 class="text-[11px] text-az-text uppercase tracking-wide mb-2">GPS Correction</h4>
|
||||
<div class="space-y-2">
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Waypoint #</label>
|
||||
<input type="number" value="3" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Corrected GPS</label>
|
||||
<input type="text" placeholder="48.8566, 2.3522" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
|
||||
</div>
|
||||
<button class="w-full py-1.5 bg-az-blue text-white rounded text-xs hover:brightness-110">Apply Correction</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="toggleGpsDenied()" class="w-full py-1.5 border border-az-border text-az-text text-xs rounded hover:bg-az-border hover:text-white">Back to Flight</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 bg-neutral-900 relative overflow-hidden">
|
||||
<div class="w-full h-full bg-gradient-to-b from-[#1a2a1a] via-[#2a3a2a] to-[#1a2a1a] relative">
|
||||
<div class="absolute inset-0" style="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"></div>
|
||||
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="none">
|
||||
<polyline points="150,450 250,350 350,280 450,320 550,250 650,200" fill="none" stroke="#fa5252" stroke-width="2" stroke-dasharray="6,4"/>
|
||||
<polyline points="150,460 255,358 360,290 455,328 555,260 650,210" fill="none" stroke="#40c057" stroke-width="1.5" opacity="0.6"/>
|
||||
</svg>
|
||||
<div class="absolute w-3 h-3 bg-az-green border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:18.75%;top:75%"></div>
|
||||
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:31.25%;top:58.3%"></div>
|
||||
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:43.75%;top:46.7%"></div>
|
||||
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:56.25%;top:53.3%"></div>
|
||||
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:68.75%;top:41.7%"></div>
|
||||
<div class="absolute w-3 h-3 bg-az-red border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:81.25%;top:33.3%"></div>
|
||||
<div class="absolute top-3 right-3 bg-az-panel/90 border border-az-border rounded px-3 py-2 text-[10px]">
|
||||
<div class="flex items-center gap-2 mb-1"><span class="w-2 h-2 rounded-full bg-az-red"></span> Original path</div>
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-az-green"></span> Corrected path</div>
|
||||
</div>
|
||||
<span class="absolute bottom-2 right-2 text-[11px] text-az-muted">~800px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleGpsDenied() {
|
||||
const fp = document.getElementById('flightParams');
|
||||
const gps = document.getElementById('gpsDenied');
|
||||
fp.classList.toggle('hidden');
|
||||
gps.classList.toggle('hidden');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Azaion – Settings Tab Wireframe</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
az: { bg: '#1e1e1e', panel: '#2b2b2b', header: '#343a40', border: '#495057', muted: '#6c757d', text: '#adb5bd', orange: '#fd7e14', blue: '#228be6', red: '#fa5252', green: '#40c057' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-az-bg text-white h-screen flex flex-col font-sans">
|
||||
|
||||
<header class="flex items-center bg-az-header px-4 py-2 gap-2 border-b border-az-border">
|
||||
<span class="font-extrabold text-az-orange tracking-wider">AZAION</span>
|
||||
<span class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm">FL02 <span class="text-az-orange ml-1">♥</span></span>
|
||||
<nav class="flex gap-0.5 ml-4">
|
||||
<a href="flights.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Flights</a>
|
||||
<a href="annotations.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Annotations</a>
|
||||
<a href="dataset_explorer.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Dataset Explorer</a>
|
||||
<a href="admin.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Admin</a>
|
||||
</nav>
|
||||
<div class="ml-auto flex items-center gap-3 text-sm text-az-text">
|
||||
<span>user@azaion.com</span>
|
||||
<a href="settings.html" class="hover:text-white text-white font-semibold">⚙</a>
|
||||
<a href="#" class="hover:text-white">⏻</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 overflow-hidden p-4 gap-6">
|
||||
|
||||
<div class="w-[300px] shrink-0 space-y-5">
|
||||
<div>
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Tenant</h3>
|
||||
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3">
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Military Unit</label>
|
||||
<input type="text" value="72nd Brigade" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Name</label>
|
||||
<input type="text" value="Alpha Company" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Default Camera Width (px)</label>
|
||||
<input type="number" value="1920" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Default Camera FoV (°)</label>
|
||||
<input type="number" value="84" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[300px] shrink-0">
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Directories</h3>
|
||||
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3">
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Images Dir</label>
|
||||
<input type="text" value="/data/images" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Labels Dir</label>
|
||||
<input type="text" value="/data/labels" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-az-text mb-1">Thumbnails Dir</label>
|
||||
<input type="text" value="/data/thumbnails" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Aircrafts</h3>
|
||||
<div class="bg-az-panel rounded border border-az-border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-az-text text-[11px] uppercase tracking-wide border-b border-az-border">
|
||||
<th class="px-3 py-2 text-left">Model</th>
|
||||
<th class="px-3 py-2 text-left">Type</th>
|
||||
<th class="px-3 py-2 text-center w-20">Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-neutral-800 bg-az-border">
|
||||
<td class="px-3 py-2.5">DJI Mavic 3</td>
|
||||
<td class="px-3 py-2.5 text-az-text">Plane</td>
|
||||
<td class="px-3 py-2.5 text-center"><span class="text-az-orange">★</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2.5">Matrice 300 RTK</td>
|
||||
<td class="px-3 py-2.5 text-az-text">Copter</td>
|
||||
<td class="px-3 py-2.5 text-center"><span class="text-az-muted">☆</span></td>
|
||||
</tr>
|
||||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||||
<td class="px-3 py-2.5">Fixed Wing Scout</td>
|
||||
<td class="px-3 py-2.5 text-az-text">Plane</td>
|
||||
<td class="px-3 py-2.5 text-center"><span class="text-az-muted">☆</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user