azaion/ui
1
0
Fork 0
mirror of https://github.com/azaion/ui.git synced 2026-04-23 07:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
0c8eaca4ffe27b33c8284684560dfa9cf2459ec5
ui/_docs/ui_design/admin.html
T

237 lines
14 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azaion – Admin Tab Wireframe</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
az: { bg: '#1e1e1e', panel: '#2b2b2b', header: '#343a40', border: '#495057', muted: '#6c757d', text: '#adb5bd', orange: '#fd7e14', blue: '#228be6', red: '#fa5252', green: '#40c057' }
}
}
}
}
</script>
</head>
<body class="bg-az-bg text-white h-screen flex flex-col font-sans">
<header class="flex items-center bg-az-header px-4 py-2 gap-2 border-b border-az-border">
<span class="font-extrabold text-az-orange tracking-wider">AZAION</span>
<span class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm">FL02 <span class="text-az-orange ml-1">♥</span></span>
<nav class="flex gap-0.5 ml-4">
<a href="flights.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Flights</a>
<a href="annotations.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Annotations</a>
<a href="dataset_explorer.html" class="px-4 py-1.5 text-sm text-az-text hover:text-white rounded-t">Dataset Explorer</a>
<a href="admin.html" class="px-4 py-1.5 text-sm bg-az-bg text-white font-semibold rounded-t">Admin</a>
</nav>
<div class="ml-auto flex items-center gap-3 text-sm text-az-text">
<span>user@azaion.com</span>
<a href="settings.html" class="hover:text-white">⚙</a>
<a href="#" class="hover:text-white">⏻</a>
</div>
</header>
<div class="flex flex-1 overflow-hidden">
<div class="w-[340px] bg-az-panel border-r border-az-border flex flex-col shrink-0">
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Detection Classes</h3>
<div class="flex-1 overflow-y-auto">
<table class="w-full text-sm">
<thead>
<tr class="text-az-text text-[11px] uppercase tracking-wide border-b border-az-border">
<th class="px-3 py-2 text-left w-10">#</th>
<th class="px-2 py-2 text-left">Name</th>
<th class="px-2 py-2 text-center w-12">Icon</th>
<th class="px-2 py-2 text-center w-10"></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">0</td>
<td class="px-2 py-2">ArmorVehicle</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#fa5252]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">1</td>
<td class="px-2 py-2">Truck</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#40c057]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">2</td>
<td class="px-2 py-2">Vehicle</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#228be6]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">3</td>
<td class="px-2 py-2">Artillery</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#FFFF00]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">4</td>
<td class="px-2 py-2">Shadow</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#FF00FF]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">5</td>
<td class="px-2 py-2">Trenches</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#00FFFF]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">6</td>
<td class="px-2 py-2">MilitaryMan</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#188021]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">7</td>
<td class="px-2 py-2">TyreTracks</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#800000]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">8</td>
<td class="px-2 py-2">AdditionArmoredTank</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#008000]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">9</td>
<td class="px-2 py-2">Smoke</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#000080]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">10</td>
<td class="px-2 py-2">Plane</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#000080]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">11</td>
<td class="px-2 py-2">Moto</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#808000]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">12</td>
<td class="px-2 py-2">CamouflageNet</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#800080]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">13</td>
<td class="px-2 py-2">CamouflageBranches</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#2f4f4f]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">14</td>
<td class="px-2 py-2">Roof</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#1e90ff]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">15</td>
<td class="px-2 py-2">Building</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#ffb6c1]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">16</td>
<td class="px-2 py-2">Caponier</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#ffb6c1]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">17</td>
<td class="px-2 py-2">Ammo</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#33658a]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
<td class="px-3 py-2 text-az-text">18</td>
<td class="px-2 py-2">Protect.Struct</td>
<td class="px-2 py-2 text-center"><span class="inline-block w-5 h-5 rounded bg-[#969647]"></span></td>
<td class="px-2 py-2 text-center"><button class="text-az-muted hover:text-az-red text-xs">✕</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="flex-1 flex flex-col overflow-y-auto p-4 gap-6">
<div>
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">AI Recognition Settings</h3>
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3 max-w-md">
<div class="flex items-center justify-between">
<label class="text-sm text-az-text"># Frames To Recognize</label>
<input type="number" value="4" class="w-20 bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm text-right">
</div>
<div class="flex items-center justify-between">
<label class="text-sm text-az-text">Min Seconds Between Recognition</label>
<input type="number" value="2" class="w-20 bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm text-right">
</div>
<div class="flex items-center justify-between">
<label class="text-sm text-az-text">Min Confidence Threshold (%)</label>
<input type="number" value="25" class="w-20 bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm text-right">
</div>
</div>
</div>
<div>
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">GPS Device Settings</h3>
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3 max-w-md">
<div>
<label class="block text-[11px] text-az-text mb-1">Device Address</label>
<input type="text" placeholder="192.168.1.100" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
</div>
<div>
<label class="block text-[11px] text-az-text mb-1">Device Port</label>
<input type="number" placeholder="9001" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
</div>
<div>
<label class="block text-[11px] text-az-text mb-1">Protocol</label>
<select class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
<option>NMEA</option><option>UBX</option><option>MAVLink</option>
</select>
</div>
</div>
</div>
</div>
<div class="w-[280px] bg-az-panel border-l border-az-border flex flex-col shrink-0">
<h3 class="px-3 py-2.5 text-xs text-az-text uppercase tracking-wide border-b border-az-border">Default Aircrafts</h3>
<div class="flex-1 overflow-y-auto">
<div class="flex items-center gap-2 px-3 py-2.5 text-sm border-b border-neutral-800 bg-az-border">
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px]">P</span>
<span>DJI Mavic 3</span>
<span class="ml-auto text-az-orange text-xs">★</span>
</div>
<div class="flex items-center gap-2 px-3 py-2.5 text-sm border-b border-neutral-800 hover:bg-neutral-700">
<span class="w-5 h-5 rounded bg-az-green flex items-center justify-center text-[9px]">C</span>
<span>Matrice 300 RTK</span>
</div>
<div class="flex items-center gap-2 px-3 py-2.5 text-sm border-b border-neutral-800 hover:bg-neutral-700">
<span class="w-5 h-5 rounded bg-az-orange flex items-center justify-center text-[9px]">P</span>
<span>Fixed Wing Scout</span>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink