mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 13:51:11 +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.
338 lines
16 KiB
HTML
338 lines
16 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 Tactical Ops - FLIGHTS</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
body {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
background-color: #0A0D10;
|
|
color: #E8ECF1;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
.font-headline { font-family: 'JetBrains Mono', monospace; }
|
|
.tabular-nums { font-variant-numeric: tabular-nums; }
|
|
.scanline-overlay {
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
.grid-bg {
|
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
}
|
|
/* Corner Brackets */
|
|
.corner-bracket {
|
|
position: relative;
|
|
}
|
|
.corner-bracket::before, .corner-bracket::after,
|
|
.corner-bracket > .bracket-bottom::before, .corner-bracket > .bracket-bottom::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-color: #FF9D3D;
|
|
border-style: solid;
|
|
pointer-events: none;
|
|
}
|
|
/* Top Left */
|
|
.corner-bracket::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
|
|
/* Top Right */
|
|
.corner-bracket::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
|
|
/* Bottom Left */
|
|
.bracket-bottom::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
|
|
/* Bottom Right */
|
|
.bracket-bottom::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: #13171C; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #252B34; }
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
0: "#0A0D10",
|
|
1: "#13171C",
|
|
2: "#1A1F26"
|
|
},
|
|
hairline: "#252B34",
|
|
amber: "#FF9D3D",
|
|
cyan: "#36D6C5",
|
|
red: "#FF4756",
|
|
green: "#3DDC84"
|
|
},
|
|
fontFamily: {
|
|
headline: ["JetBrains Mono", "monospace"],
|
|
body: ["IBM Plex Sans", "sans-serif"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="h-screen flex flex-col">
|
|
<!-- TopAppBar -->
|
|
<header class="bg-[#13171C] border-b border-[#252B34] h-12 flex justify-between items-center px-4 z-50">
|
|
<div class="flex items-center gap-6">
|
|
<span class="font-headline text-lg font-bold tracking-tighter text-[#FF9D3D]">AZAION</span>
|
|
<div class="flex items-center border border-amber px-2 py-0.5 rounded-sm gap-2 bg-surface-2 cursor-pointer">
|
|
<span class="font-headline text-[10px] tracking-[0.12em] text-amber">FL02</span>
|
|
<span class="material-symbols-outlined text-amber text-xs">arrow_drop_down</span>
|
|
</div>
|
|
<nav class="flex h-12 items-center">
|
|
<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">FLIGHTS</a>
|
|
<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">ANNOTATIONS</a>
|
|
<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">DATASET</a>
|
|
<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">ADMIN</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-headline text-[10px] tracking-[0.12em] text-cyan">SYSTEM_STATUS: OK</span>
|
|
<div class="w-1.5 h-1.5 rounded-full bg-cyan shadow-[0_0_4px_#36D6C5]"></div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[#5B6573] text-lg hover:text-white cursor-pointer">settings</span>
|
|
<span class="material-symbols-outlined text-[#5B6573] text-lg hover:text-white cursor-pointer">notifications</span>
|
|
<div class="flex items-center gap-2 pl-2 border-l border-hairline">
|
|
<span class="font-headline text-[10px] text-secondary">OPERATOR_042</span>
|
|
<span class="material-symbols-outlined text-[#5B6573] text-xl">account_circle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="flex-1 flex overflow-hidden">
|
|
<!-- Column 1: Flights Sidebar -->
|
|
<aside class="w-[200px] bg-surface-1 border-r border-hairline flex flex-col p-4 corner-bracket">
|
|
<div class="bracket-bottom"></div>
|
|
<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-4">FLIGHTS_INDEX</h2>
|
|
<div class="flex-1 space-y-1 overflow-y-auto custom-scrollbar">
|
|
<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer transition-colors">
|
|
<div class="font-headline text-xs text-white">FL01</div>
|
|
<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-24 08:30</div>
|
|
</div>
|
|
<div class="px-3 py-2 bg-surface-2 border-l-2 border-amber cursor-pointer">
|
|
<div class="font-headline text-xs text-amber">FL02</div>
|
|
<div class="font-headline text-[9px] text-amber/60 tracking-tighter">2023-11-24 10:15</div>
|
|
</div>
|
|
<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer">
|
|
<div class="font-headline text-xs text-white">FL03</div>
|
|
<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-24 14:00</div>
|
|
</div>
|
|
<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer">
|
|
<div class="font-headline text-xs text-white">FL04</div>
|
|
<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-25 09:12</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 pt-4 border-t border-hairline">
|
|
<h3 class="font-headline text-[10px] tracking-[0.12em] text-muted mb-2">TELEMETRY_LOG</h3>
|
|
<div class="bg-surface-0 border border-hairline p-2 flex items-center justify-between cursor-pointer">
|
|
<span class="font-headline text-[10px] text-secondary">24_NOV_2023</span>
|
|
<span class="material-symbols-outlined text-xs text-muted">calendar_today</span>
|
|
</div>
|
|
</div>
|
|
<button class="mt-6 w-full border border-amber py-2 font-headline text-[10px] tracking-[0.12em] text-amber hover:bg-amber/10 transition-colors uppercase">
|
|
+ NEW FLIGHT
|
|
</button>
|
|
</aside>
|
|
<!-- Column 2: Parameters & Waypoints -->
|
|
<aside class="w-[260px] bg-surface-1 border-r border-hairline flex flex-col p-4 corner-bracket">
|
|
<div class="bracket-bottom"></div>
|
|
<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-4">FLIGHT_PARAMETERS</h2>
|
|
<div class="space-y-4 mb-6">
|
|
<div>
|
|
<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">AIRCRAFT</label>
|
|
<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white">DJI Mavic 3 Enterprise</div>
|
|
</div>
|
|
<div>
|
|
<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">DEFAULT_HEIGHT</label>
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white flex-1 tabular-nums">100</div>
|
|
<span class="font-headline text-[10px] text-muted">M</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<div>
|
|
<label class="font-headline text-[9px] text-muted block mb-1">FOCAL</label>
|
|
<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">24MM</div>
|
|
</div>
|
|
<div>
|
|
<label class="font-headline text-[9px] text-muted block mb-1">SENSOR</label>
|
|
<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">17.3MM</div>
|
|
</div>
|
|
<div>
|
|
<label class="font-headline text-[9px] text-muted block mb-1">ALT</label>
|
|
<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">45M</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">COMM_ADDR</label>
|
|
<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white font-headline tabular-nums">192.168.1.1:8080</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex flex-col min-h-0">
|
|
<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-2">WAYPOINTS_V1</h2>
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar border border-hairline">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="bg-surface-2 sticky top-0">
|
|
<tr>
|
|
<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">ID</th>
|
|
<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">LABEL</th>
|
|
<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">STATUS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-[10px] font-headline">
|
|
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
|
<td class="p-2 text-green">A1</td>
|
|
<td class="p-2">START_POINT</td>
|
|
<td class="p-2 text-green">LOCKED</td>
|
|
</tr>
|
|
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
|
<td class="p-2 text-amber">A2</td>
|
|
<td class="p-2">TRANS_01</td>
|
|
<td class="p-2 text-amber">READY</td>
|
|
</tr>
|
|
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
|
<td class="p-2 text-amber">A3</td>
|
|
<td class="p-2">TRANS_02</td>
|
|
<td class="p-2 text-amber">READY</td>
|
|
</tr>
|
|
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
|
<td class="p-2 text-amber">A4</td>
|
|
<td class="p-2">TRANS_03</td>
|
|
<td class="p-2 text-muted">PENDING</td>
|
|
</tr>
|
|
<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
|
|
<td class="p-2 text-amber">A5</td>
|
|
<td class="p-2">TRANS_04</td>
|
|
<td class="p-2 text-muted">PENDING</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-2 cursor-pointer">
|
|
<td class="p-2 text-red">A6</td>
|
|
<td class="p-2">FINISH_LINE</td>
|
|
<td class="p-2 text-muted">PENDING</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 mt-4">
|
|
<button class="border border-red text-red font-headline text-[10px] py-2 hover:bg-red/10 transition-colors">GPS-DENIED</button>
|
|
<button class="border border-green text-green font-headline text-[10px] py-2 hover:bg-green/10 transition-colors">UPLOAD</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Column 3: Map View -->
|
|
<section class="flex-1 relative bg-surface-0 grid-bg overflow-hidden">
|
|
<div class="absolute inset-0 scanline-overlay"></div>
|
|
<!-- Map Simulation (SVG Path) -->
|
|
<svg class="absolute inset-0 w-full h-full opacity-60">
|
|
<!-- Original Path (Red Dashed) -->
|
|
<path d="M 200,600 L 400,450 L 550,500 L 700,300 L 900,350 L 1100,200" fill="none" stroke="#FF4756" stroke-dasharray="8,4" stroke-width="2"></path>
|
|
<!-- Corrected Path (Cyan Solid) -->
|
|
<path d="M 200,600 L 420,430 L 580,480 L 720,280 L 930,330 L 1100,200" fill="none" stroke="#36D6C5" stroke-width="2"></path>
|
|
</svg>
|
|
<!-- Waypoint Markers -->
|
|
<div class="absolute" style="top: 600px; left: 200px; transform: translate(-50%, -50%);">
|
|
<div class="w-4 h-4 bg-green border-2 border-white"></div>
|
|
<span class="absolute top-6 left-1/2 -translate-x-1/2 font-headline text-[9px] text-green">START</span>
|
|
</div>
|
|
<div class="absolute" style="top: 430px; left: 420px; transform: translate(-50%, -50%);">
|
|
<div class="w-3 h-3 bg-amber border border-white"></div>
|
|
<span class="absolute top-4 left-1/2 -translate-x-1/2 font-headline text-[9px] text-amber">A2</span>
|
|
</div>
|
|
<div class="absolute" style="top: 480px; left: 580px; transform: translate(-50%, -50%);">
|
|
<div class="w-3 h-3 bg-amber border border-white"></div>
|
|
<span class="absolute top-4 left-1/2 -translate-x-1/2 font-headline text-[9px] text-amber">A3</span>
|
|
</div>
|
|
<div class="absolute" style="top: 280px; left: 720px; transform: translate(-50%, -50%);">
|
|
<div class="w-3 h-3 bg-amber border border-white"></div>
|
|
</div>
|
|
<div class="absolute" style="top: 330px; left: 930px; transform: translate(-50%, -50%);">
|
|
<div class="w-3 h-3 bg-amber border border-white"></div>
|
|
</div>
|
|
<div class="absolute" style="top: 200px; left: 1100px; transform: translate(-50%, -50%);">
|
|
<div class="w-4 h-4 bg-red rotate-45 border-2 border-white"></div>
|
|
<span class="absolute top-6 left-1/2 -translate-x-1/2 font-headline text-[9px] text-red">FINISH</span>
|
|
</div>
|
|
<!-- HUD (Top-Right) -->
|
|
<div class="absolute top-6 right-6 p-4 bg-surface-1/80 border border-hairline corner-bracket backdrop-blur-sm min-w-[180px]">
|
|
<div class="bracket-bottom"></div>
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<div class="w-2 h-2 rounded-full bg-cyan animate-pulse"></div>
|
|
<span class="font-headline text-[10px] tracking-widest text-white">LIVE • CONNECTED</span>
|
|
</div>
|
|
<div class="space-y-1 font-headline text-[11px] tabular-nums">
|
|
<div class="flex justify-between">
|
|
<span class="text-muted">LAT</span>
|
|
<span class="text-white">48.856621</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-muted">LON</span>
|
|
<span class="text-white">2.352212</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-muted">SAT</span>
|
|
<span class="text-white">12_ACTIVE</span>
|
|
</div>
|
|
<div class="flex justify-between border-t border-hairline pt-1 mt-1">
|
|
<span class="text-muted">ALT</span>
|
|
<span class="text-cyan">45.28M</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Map Controls Overlay -->
|
|
<div class="absolute top-6 left-6 flex flex-col gap-2">
|
|
<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2">
|
|
<span class="material-symbols-outlined text-sm">add</span>
|
|
</button>
|
|
<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2">
|
|
<span class="material-symbols-outlined text-sm">remove</span>
|
|
</button>
|
|
<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2 mt-4">
|
|
<span class="material-symbols-outlined text-sm">layers</span>
|
|
</button>
|
|
</div>
|
|
<!-- Legend (Bottom-Left) -->
|
|
<div class="absolute bottom-6 left-6 p-3 bg-surface-1/90 border border-hairline text-[10px] font-headline flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-red"></div>
|
|
<span class="text-muted uppercase">Original path</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-cyan"></div>
|
|
<span class="text-muted uppercase">Corrected path</span>
|
|
</div>
|
|
</div>
|
|
<!-- Compass Overlay -->
|
|
<div class="absolute bottom-6 right-6 opacity-40">
|
|
<svg height="80" viewbox="0 0 80 80" width="80">
|
|
<circle cx="40" cy="40" fill="none" r="38" stroke="#252B34" stroke-width="1"></circle>
|
|
<text fill="#5B6573" font-family="JetBrains Mono" font-size="8" text-anchor="middle" x="40" y="12">N</text>
|
|
<path d="M 40,20 L 45,40 L 40,60 L 35,40 Z" fill="#FF9D3D"></path>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Contextual Footer / Status Bar -->
|
|
<footer class="h-6 bg-[#13171C] border-t border-[#252B34] flex justify-between items-center px-4">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-headline text-[9px] text-muted">LOG_BUFFER: 100%</span>
|
|
<span class="font-headline text-[9px] text-muted">FRAME_RATE: 60FPS</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-headline text-[9px] text-muted">SECTOR_7_ACTIVE</span>
|
|
<span class="font-headline text-[9px] text-amber uppercase">Security level: ALPHA</span>
|
|
</div>
|
|
</footer>
|
|
</body></html> |