azaion/ui
1
0
Fork 0
mirror of https://github.com/azaion/ui.git synced 2026-06-21 17:01:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui_design v2: redesign of all 5 pages

Browse Source 
ui_design v2: tactical-ops redesign of all 5 pages

Two parallel takes on visual polish for flights, annotations, dataset
explorer, admin, and settings.

- v2/plugin/ — self-contained HTML produced via the frontend-design
  plugin, adheres to v2/plugin/_design_system.md..
- v2/stitch/ — Google Stitch MCP exports against the same design
  system.

IA from the original wireframes in _docs/ui_design/ is preserved
verbatim — this pass is visual only.
This commit is contained in:
Armen Rohalov
2026-05-16 20:09:16 +03:00
parent 401f43d845
commit 2a62415f0c
13 changed files with 6145 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_docs/ui_design/v2/stitch/admin.html
+348
View File
@@ -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&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
_docs/ui_design/v2/stitch/annotations.html
+389
View File
@@ -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&amp;family=IBM+Plex+Sans:wght@300;400;600&amp;family=Public+Sans:wght@400;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
_docs/ui_design/v2/stitch/dataset_explorer.html
+369
View File
@@ -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&amp;family=IBM+Plex+Sans:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
_docs/ui_design/v2/stitch/flights.html
+338
View File
@@ -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&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
_docs/ui_design/v2/stitch/settings.html
+346
View File
@@ -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&amp;family=IBM+Plex+Sans:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>