mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 08:01:10 +00:00
Armen Rohalov
2a62415f0c
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.
389 lines
23 KiB
HTML
389 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="en"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>AZAION - ANNOTATIONS MISSION CONTROL</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Sans:wght@300;400;600&family=Public+Sans:wght@400;700;900&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
surface: {
|
||
0: "#0A0D10",
|
||
1: "#13171C",
|
||
2: "#1A1F26"
|
||
},
|
||
hairline: "#252B34",
|
||
raised: "#3B4451",
|
||
amber: "#FF9D3D",
|
||
cyan: "#36D6C5",
|
||
red: "#FF4756",
|
||
green: "#3DDC84",
|
||
blue: "#4E9EFF",
|
||
onSurface: "#E8ECF1",
|
||
onSurfaceMuted: "#9AA4B2",
|
||
onSurfaceDim: "#5B6573"
|
||
},
|
||
borderRadius: {
|
||
"DEFAULT": "0.125rem",
|
||
"lg": "0.25rem",
|
||
"xl": "0.5rem",
|
||
"full": "0.75rem"
|
||
},
|
||
fontFamily: {
|
||
headline: ["JetBrains Mono", "monospace"],
|
||
mono: ["JetBrains Mono", "monospace"],
|
||
body: ["IBM Plex Sans", "sans-serif"],
|
||
display: ["Public Sans", "sans-serif"],
|
||
label: ["JetBrains Mono", "monospace"]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
font-size: 18px;
|
||
vertical-align: middle;
|
||
}
|
||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||
.grid-overlay {
|
||
background-image:
|
||
linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
}
|
||
.corner-br-tl { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
||
.corner-br-tr { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
||
.corner-br-bl { position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
||
.corner-br-br { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-surface-0 text-onSurface font-body selection:bg-amber selection:text-surface-0">
|
||
<!-- TOP APP BAR -->
|
||
<header class="flex justify-between items-center w-full px-4 h-12 z-50 bg-surface-0 border-b border-hairline sticky top-0">
|
||
<div class="flex items-center gap-6">
|
||
<div class="flex items-center gap-3">
|
||
<span class="font-headline font-bold text-lg tracking-widest text-amber">AZAION</span>
|
||
<div class="flex items-center bg-surface-1 border border-hairline px-2 py-0.5 rounded gap-2 hover:bg-surface-2 cursor-pointer transition-colors">
|
||
<span class="font-mono text-[10px] tracking-[0.12em] text-cyan">FL03</span>
|
||
<span class="material-symbols-outlined text-onSurfaceMuted text-xs">arrow_drop_down</span>
|
||
</div>
|
||
</div>
|
||
<nav class="flex h-full items-center gap-6">
|
||
<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">FLIGHTS</a>
|
||
<a class="text-amber border-b-2 border-amber pb-1 font-mono text-[10px] tracking-[0.12em]" href="#">ANNOTATIONS</a>
|
||
<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">DATASET</a>
|
||
<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">ADMIN</a>
|
||
</nav>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex items-center gap-2">
|
||
<button class="material-symbols-outlined text-onSurfaceMuted hover:text-amber transition-colors">notifications</button>
|
||
<button class="material-symbols-outlined text-onSurfaceMuted hover:text-amber transition-colors">settings</button>
|
||
</div>
|
||
<div class="h-8 w-8 rounded-full border border-hairline overflow-hidden">
|
||
<img alt="OPERATOR_AVATAR" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuASYqj8bWeEeCca3bmY7NxlGYCVcmdnDq3yHr_pfZTBas40iXPGGKH9abX9DL_udecDU2eIzbJ8XUvC59UxCerboKPAY33bxx8skyI6h4wuSW7R-PwRrOUAsU9v_yb6cLJAXxMHrIKdFoOPnSG-7ABapnWZNPrC2j95duK6YKey-O8E6cFlE1zVZVqHyemxjiI8oc7x73Fv8W64PvBPzgzVDBw6kYjiaNtdbO5jhoai44fer1uuD3ExqtUErNwL-BYI_qzO00RgvEO2"/>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="flex h-[calc(100vh-48px)] overflow-hidden">
|
||
<!-- LEFT SIDEBAR: MEDIA FILES & CLASSES -->
|
||
<aside class="w-[250px] bg-surface-1 border-r border-hairline flex flex-col shrink-0 overflow-y-auto">
|
||
<!-- MEDIA FILES SECTION -->
|
||
<section class="p-4 border-b border-hairline relative">
|
||
<div class="corner-br-tl"></div>
|
||
<div class="corner-br-tr"></div>
|
||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-4">MEDIA FILES</h3>
|
||
<div class="space-y-1">
|
||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1 border border-blue text-blue text-[8px] font-mono rounded-sm">PHOTO</span>
|
||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Aerial_01</span>
|
||
</div>
|
||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:00</span>
|
||
</div>
|
||
<div class="flex items-center justify-between px-2 py-1.5 bg-surface-2 border-l-2 border-amber transition-colors cursor-pointer text-xs">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||
<span class="font-body text-onSurface">Video 02</span>
|
||
</div>
|
||
<span class="font-mono text-[9px] text-amber tabular-nums">02:14</span>
|
||
</div>
|
||
<!-- Mock more rows -->
|
||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Recon_Unit_B</span>
|
||
</div>
|
||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">05:41</span>
|
||
</div>
|
||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1 border border-blue text-blue text-[8px] font-mono rounded-sm">PHOTO</span>
|
||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Border_P_44</span>
|
||
</div>
|
||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:00</span>
|
||
</div>
|
||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Strike_Log_09</span>
|
||
</div>
|
||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">01:12</span>
|
||
</div>
|
||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
|
||
<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Thermal_HD</span>
|
||
</div>
|
||
<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:45</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 relative">
|
||
<input class="w-full bg-surface-0 border border-hairline text-xs font-mono px-3 py-2 focus:ring-1 focus:ring-amber focus:border-amber outline-none placeholder-onSurfaceDim text-onSurface" placeholder="SEARCH ASSETS..." type="text"/>
|
||
<span class="material-symbols-outlined absolute right-2 top-2 text-onSurfaceDim text-sm">search</span>
|
||
</div>
|
||
</section>
|
||
<!-- DETECTION CLASSES -->
|
||
<section class="p-4 border-b border-hairline">
|
||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-4">DETECTION CLASSES</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between group cursor-pointer">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-3 h-3 bg-red"></div>
|
||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">MilVeh</span>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-onSurfaceDim">1</span>
|
||
</div>
|
||
<div class="flex items-center justify-between group cursor-pointer">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-3 h-3 bg-green"></div>
|
||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Truck</span>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-onSurfaceDim">2</span>
|
||
</div>
|
||
<div class="flex items-center justify-between group cursor-pointer">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-3 h-3 bg-blue"></div>
|
||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Vehicle</span>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-onSurfaceDim">3</span>
|
||
</div>
|
||
<div class="flex items-center justify-between group cursor-pointer">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-3 h-3 bg-yellow-400"></div>
|
||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Artillery</span>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-onSurfaceDim">4</span>
|
||
</div>
|
||
<div class="flex items-center justify-between group cursor-pointer">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-3 h-3 bg-magenta-500 bg-fuchsia-600"></div>
|
||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Shadow</span>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-onSurfaceDim">5</span>
|
||
</div>
|
||
<div class="flex items-center justify-between group cursor-pointer">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-3 h-3 bg-cyan"></div>
|
||
<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Trenches</span>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-onSurfaceDim">6</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- PHOTO MODE -->
|
||
<section class="p-4 mt-auto">
|
||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-2">PHOTOMODE</h3>
|
||
<div class="flex border border-hairline overflow-hidden h-8">
|
||
<button class="flex-1 bg-amber text-surface-0 font-mono text-[9px] font-bold tracking-wider">REGULAR</button>
|
||
<button class="flex-1 bg-surface-1 text-onSurfaceDim font-mono text-[9px] border-l border-hairline hover:bg-surface-2 transition-colors">WINTER</button>
|
||
<button class="flex-1 bg-surface-1 text-onSurfaceDim font-mono text-[9px] border-l border-hairline hover:bg-surface-2 transition-colors">NIGHT</button>
|
||
</div>
|
||
</section>
|
||
</aside>
|
||
<!-- MAIN VIEWER -->
|
||
<section class="flex-1 flex flex-col bg-surface-0 relative">
|
||
<!-- VIEWER AREA -->
|
||
<div class="flex-1 relative overflow-hidden group cursor-crosshair">
|
||
<img class="w-full h-full object-cover grayscale-[0.2]" data-alt="A top-down aerial satellite view of a muddy dirt track winding through a dense coniferous forest with dark green pine trees. The image has a tactical drone-feed aesthetic with a subtle digital noise overlay and a technical grid. High-contrast lighting highlights the textures of the mud and the individual needles of the evergreens. Minimalist but detailed, following a military-grade intelligence visual style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuACEEDvgvY6EghK5wwUjyhV-MloxdbkAm6e6WWU6rFHfmfSM0PjLeVbyxe_oP4sk1JjaKSGE0znfRfEiW6q8WsNGvP7e5iH1eUueipOVFk8bDUFA7GdIOW3E2gxKSxc4zyv2lwVfXmABFesr8RD50odvKWtfGIS93sldZYrbZxcJ_hzEsYAVJtKGZG5rkOtcdy5AFGGHqsae8FkjhkNyR7--CHoNYgUPMsWphF6yBuS4m9Ya9QJ4o5ZsTd691ZXlE56XFDP-xuIxg9R"/>
|
||
<div class="absolute inset-0 grid-overlay pointer-events-none"></div>
|
||
<!-- Bounding Box 1 (Friendly/MilVeh) -->
|
||
<div class="absolute top-[20%] left-[30%] w-[120px] h-[80px] border-2 border-cyan pointer-events-none">
|
||
<div class="absolute -top-7 left-0 flex items-center gap-1.5 whitespace-nowrap bg-surface-0/80 px-2 py-0.5 border border-cyan/30">
|
||
<svg fill="none" height="12" stroke="#36D6C5" stroke-width="2" viewbox="0 0 24 24" width="12">
|
||
<rect height="12" rx="1" width="20" x="2" y="6"></rect>
|
||
<path d="M12 6v12M2 12h20"></path>
|
||
</svg>
|
||
<div class="w-1.5 h-1.5 rounded-full bg-green animate-pulse"></div>
|
||
<span class="font-mono text-[10px] text-cyan tabular-nums uppercase">Mil. vehicle 87%</span>
|
||
</div>
|
||
</div>
|
||
<!-- Bounding Box 2 (Hostile/Truck) -->
|
||
<div class="absolute top-[55%] left-[60%] w-[150px] h-[100px] border-2 border-red pointer-events-none">
|
||
<div class="absolute -top-7 left-0 flex items-center gap-1.5 whitespace-nowrap bg-surface-0/80 px-2 py-0.5 border border-red/30">
|
||
<svg fill="none" height="12" stroke="#FF4756" stroke-width="2" viewbox="0 0 24 24" width="12">
|
||
<path d="M12 2L2 12l10 10 10-10L12 2z"></path>
|
||
<path d="M12 7v10M7 12h10"></path>
|
||
</svg>
|
||
<div class="w-1.5 h-1.5 rounded-full bg-green"></div>
|
||
<span class="font-mono text-[10px] text-red tabular-nums uppercase">Truck 94%</span>
|
||
</div>
|
||
</div>
|
||
<!-- Cursor Label -->
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
|
||
<div class="w-6 h-6 border-t border-l border-amber opacity-50 absolute -top-4 -left-4"></div>
|
||
<div class="w-6 h-6 border-b border-r border-amber opacity-50 absolute -bottom-4 -right-4"></div>
|
||
<div class="ml-4 -mt-4 px-2 py-0.5 bg-amber/20 border border-amber/40">
|
||
<span class="font-mono text-[9px] text-amber font-bold tracking-widest">MilVeh</span>
|
||
</div>
|
||
</div>
|
||
<!-- AI Running Banner -->
|
||
<div class="absolute top-4 right-4 bg-surface-1/90 border border-hairline p-3 min-w-[240px]">
|
||
<div class="corner-br-tl"></div><div class="corner-br-tr"></div><div class="corner-br-bl"></div><div class="corner-br-br"></div>
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<div class="w-2 h-2 rounded-full bg-cyan animate-ping"></div>
|
||
<span class="font-headline text-[10px] text-onSurface font-bold tracking-widest">AI DETECTION RUNNING</span>
|
||
</div>
|
||
<div class="font-mono text-[9px] text-onSurfaceMuted tabular-nums">23/50 FRAMES ANALYZED</div>
|
||
<div class="font-mono text-[8px] text-onSurfaceDim mt-1 overflow-hidden truncate">LOG: SECTOR_B // THREAD_ID_771 // SIG_LOCK</div>
|
||
</div>
|
||
</div>
|
||
<!-- VIDEO TOOLBAR -->
|
||
<div class="bg-surface-1 border-t border-hairline h-24 flex flex-col">
|
||
<div class="flex-1 flex items-center px-4 justify-between">
|
||
<div class="flex items-center gap-6">
|
||
<div class="flex items-center gap-4 text-onSurfaceMuted">
|
||
<button class="material-symbols-outlined hover:text-onSurface">skip_previous</button>
|
||
<button class="material-symbols-outlined hover:text-onSurface">fast_rewind</button>
|
||
<button class="material-symbols-outlined text-amber scale-125">play_arrow</button>
|
||
<button class="material-symbols-outlined hover:text-onSurface">fast_forward</button>
|
||
<button class="material-symbols-outlined hover:text-onSurface">skip_next</button>
|
||
</div>
|
||
<div class="flex items-center gap-2 border-l border-hairline pl-6">
|
||
<span class="text-[9px] font-mono text-onSurfaceDim">FRAME STEP:</span>
|
||
<div class="flex gap-1">
|
||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">1</button>
|
||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">5</button>
|
||
<button class="px-2 py-0.5 bg-amber text-surface-0 border border-amber text-[10px] font-mono font-bold">10</button>
|
||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">30</button>
|
||
<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">60</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-surface-2 transition-all">SAVE</button>
|
||
<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-red/10 hover:text-red transition-all">DELETE</button>
|
||
<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-red/10 hover:text-red transition-all">DELETE ALL</button>
|
||
<button class="px-4 py-1.5 bg-amber text-surface-0 border border-amber text-[10px] font-mono font-bold hover:opacity-90 transition-all">AI DETECT</button>
|
||
<div class="flex items-center gap-2 ml-4 border-l border-hairline pl-4">
|
||
<span class="material-symbols-outlined text-onSurfaceDim text-sm">volume_up</span>
|
||
<div class="w-16 h-1 bg-hairline relative">
|
||
<div class="absolute left-0 top-0 h-full w-[70%] bg-onSurfaceMuted"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- STATUS BAR & SCRUBBER -->
|
||
<div class="h-8 border-t border-hairline bg-surface-0 flex items-center px-4 justify-between">
|
||
<div class="flex items-center gap-4">
|
||
<span class="font-mono text-[10px] text-amber tabular-nums">00:12 / 02:14</span>
|
||
<span class="text-[9px] text-onSurfaceDim font-body uppercase">Press 1–9 to select class · space to pause</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="flex items-center gap-2 border border-green px-2 py-0.5 rounded-full">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-green"></div>
|
||
<span class="font-mono text-[9px] text-green font-bold">READY</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Progress Scrubber -->
|
||
<div class="h-1 bg-surface-1 relative cursor-pointer">
|
||
<div class="absolute h-full bg-amber w-[35%] z-10 shadow-[0_0_10px_rgba(255,157,61,0.5)]"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- RIGHT SIDEBAR: ANNOTATIONS -->
|
||
<aside class="w-[220px] bg-surface-1 border-l border-hairline flex flex-col shrink-0 overflow-y-auto">
|
||
<div class="p-4 border-b border-hairline flex justify-between items-center">
|
||
<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase">ANNOTATIONS</h3>
|
||
<span class="font-mono text-[10px] text-onSurfaceDim">128</span>
|
||
</div>
|
||
<div class="flex-1">
|
||
<!-- Annotation Rows -->
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:08</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_A</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:09</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_B</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline bg-surface-2 border-l-2 border-amber transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-yellow-400 tabular-nums shrink-0">00:12</span>
|
||
<span class="font-mono text-[10px] text-onSurface font-bold truncate">00:12 — Artillery</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-green/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-green tabular-nums shrink-0">00:15</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">Truck_01</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-green/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-green tabular-nums shrink-0">00:15</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">Truck_02</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-cyan/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-cyan tabular-nums shrink-0">00:22</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">Trench_Alpha</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-blue/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-blue tabular-nums shrink-0">00:28</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">Civ_Vehicle</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-fuchsia-600/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-fuchsia-400 tabular-nums shrink-0">00:31</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">Unknown_Shadow</span>
|
||
</div>
|
||
<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
|
||
<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:45</span>
|
||
<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_C</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4 border-t border-hairline mt-auto">
|
||
<button class="w-full border border-hairline py-2 text-[10px] font-mono text-onSurfaceDim hover:text-onSurface hover:bg-surface-2 transition-all uppercase tracking-widest">
|
||
EXPORT DATA (.JSON)
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
</main>
|
||
<!-- FOOTER PANEL OVERLAY -->
|
||
<div class="fixed bottom-12 right-6 flex flex-col gap-2 pointer-events-none">
|
||
<div class="bg-surface-1/90 border border-hairline p-2 pr-8 relative pointer-events-auto">
|
||
<div class="corner-br-tl"></div><div class="corner-br-tr"></div><div class="corner-br-bl"></div><div class="corner-br-br"></div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-mono text-[8px] text-onSurfaceDim">GPS:</span>
|
||
<span class="font-mono text-[9px] text-cyan tabular-nums">48.2082° N, 16.3738° E</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-mono text-[8px] text-onSurfaceDim">ALT:</span>
|
||
<span class="font-mono text-[9px] text-cyan tabular-nums">1,240m AMSL</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body></html> |