azaion/ui
1
0
Fork 0
mirror of https://github.com/azaion/ui.git synced 2026-06-21 08:31:10 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
dfcdc266300e694083e0f310db1b386532136044
ui/_docs/ui_design/v2/stitch/annotations.html
T
Armen Rohalov 2a62415f0c ui_design v2: redesign of all 5 pages 
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.
2026-05-16 20:09:16 +03:00

389 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
Reference in New Issue View Git Blame Copy Permalink