mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 11:11:10 +00:00
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.
This commit is contained in:
Armen Rohalov
@@ -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&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"/>
|
||||
<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>
|
||||
Reference in New Issue
Block a user