mirror of
https://github.com/azaion/ui.git
synced 2026-04-22 22:16:34 +00:00
Oleksandr Bezdieniezhnykh
118 lines
5.3 KiB
HTML
118 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Azaion – Settings 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 text-az-text hover:text-white 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 text-white font-semibold">⚙</a>
|
||
<a href="#" class="hover:text-white">⏻</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="flex flex-1 overflow-hidden p-4 gap-6">
|
||
|
||
<div class="w-[300px] shrink-0 space-y-5">
|
||
<div>
|
||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Tenant</h3>
|
||
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3">
|
||
<div>
|
||
<label class="block text-[11px] text-az-text mb-1">Military Unit</label>
|
||
<input type="text" value="72nd Brigade" 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">Name</label>
|
||
<input type="text" value="Alpha Company" 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">Default Camera Width (px)</label>
|
||
<input type="number" value="1920" 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">Default Camera FoV (°)</label>
|
||
<input type="number" value="84" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-[300px] shrink-0">
|
||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Directories</h3>
|
||
<div class="bg-az-panel rounded border border-az-border p-4 space-y-3">
|
||
<div>
|
||
<label class="block text-[11px] text-az-text mb-1">Images Dir</label>
|
||
<input type="text" value="/data/images" 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">Labels Dir</label>
|
||
<input type="text" value="/data/labels" 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">Thumbnails Dir</label>
|
||
<input type="text" value="/data/thumbnails" class="w-full bg-az-border border border-az-muted text-white px-2.5 py-1.5 rounded text-sm">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex-1">
|
||
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Aircrafts</h3>
|
||
<div class="bg-az-panel rounded border border-az-border overflow-hidden">
|
||
<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">Model</th>
|
||
<th class="px-3 py-2 text-left">Type</th>
|
||
<th class="px-3 py-2 text-center w-20">Default</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="border-b border-neutral-800 bg-az-border">
|
||
<td class="px-3 py-2.5">DJI Mavic 3</td>
|
||
<td class="px-3 py-2.5 text-az-text">Plane</td>
|
||
<td class="px-3 py-2.5 text-center"><span class="text-az-orange">★</span></td>
|
||
</tr>
|
||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||
<td class="px-3 py-2.5">Matrice 300 RTK</td>
|
||
<td class="px-3 py-2.5 text-az-text">Copter</td>
|
||
<td class="px-3 py-2.5 text-center"><span class="text-az-muted">☆</span></td>
|
||
</tr>
|
||
<tr class="border-b border-neutral-800 hover:bg-neutral-700">
|
||
<td class="px-3 py-2.5">Fixed Wing Scout</td>
|
||
<td class="px-3 py-2.5 text-az-text">Plane</td>
|
||
<td class="px-3 py-2.5 text-center"><span class="text-az-muted">☆</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|