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

215 lines
12 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 – Flights 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 bg-az-bg text-white font-semibold 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">⚙</a>
<a href="#" class="hover:text-white">⏻</a>
</div>
</header>
<div class="flex flex-1 overflow-hidden">
<aside class="w-[200px] 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">Flights</h3>
<div class="flex-1 overflow-y-auto">
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 bg-az-border">
<span>FL02</span><span class="text-az-orange text-xs">♥</span>
</div>
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span>FL01</span>
</div>
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span>FL03</span>
</div>
<div class="flex justify-between items-center px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span>FL04</span>
</div>
</div>
<button class="mx-3 my-2 py-1.5 bg-az-blue text-white rounded text-xs hover:brightness-110">+ Create New</button>
<div class="border-t border-az-border p-3">
<label class="block text-[11px] text-az-text uppercase tracking-wide mb-1.5">Telemetry</label>
<input type="date" value="2025-03-01" class="w-full bg-az-border border border-az-muted text-white px-2 py-1 rounded text-xs">
</div>
</aside>
<div class="w-[260px] bg-az-panel border-r border-az-border overflow-y-auto shrink-0 relative">
<div id="flightParams" class="p-3">
<h3 class="text-xs text-az-text uppercase tracking-wide mb-3">Flight Parameters</h3>
<div class="mb-2.5">
<label class="block text-[11px] text-az-text mb-1">Aircraft</label>
<select class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
<option>Select aircraft...</option><option>DJI Mavic 3</option>
</select>
</div>
<div class="mb-2.5">
<label class="block text-[11px] text-az-text mb-1">Default Height (m)</label>
<input type="number" value="100" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
</div>
<div class="mb-2.5">
<label class="block text-[11px] text-az-text mb-1">Camera FOV / Length / Field</label>
<input type="text" placeholder="FOV parameters" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
</div>
<div class="mb-4">
<label class="block text-[11px] text-az-text mb-1">Communication Addr / Port</label>
<input type="text" placeholder="192.168.1.1:8080" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
</div>
<h3 class="text-xs text-az-text uppercase tracking-wide mb-2">Waypoints</h3>
<div class="space-y-0">
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
<span class="text-az-orange font-semibold min-w-[24px]">A1</span> Start
</div>
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
<span class="text-az-orange font-semibold min-w-[24px]">A1</span> Point1 <span class="text-az-text text-[11px] ml-auto">Track Conf</span>
</div>
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
<span class="text-az-orange font-semibold min-w-[24px]">A1</span> Point2 <span class="text-az-text text-[11px] ml-auto">MilVeh</span>
</div>
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
<span class="text-az-orange font-semibold min-w-[24px]">A3</span> Point3
</div>
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
<span class="text-az-orange font-semibold min-w-[24px]">A3</span> Point4 <span class="text-az-text text-[11px] ml-auto">Con</span>
</div>
<div class="flex items-center gap-2 py-1.5 text-xs border-b border-neutral-800">
<span class="text-az-orange font-semibold min-w-[24px]">—</span> Finish
</div>
</div>
<div class="flex gap-1.5 mt-2.5">
<button onclick="toggleGpsDenied()" class="px-2.5 py-1 rounded border border-az-red text-az-red text-[11px] hover:bg-az-red/10">GPS-Denied</button>
<button class="px-2.5 py-1 rounded border border-az-green text-az-green text-[11px] hover:bg-az-green/10">Upload</button>
</div>
</div>
<div id="gpsDenied" class="hidden p-3">
<div class="flex items-center justify-between px-0 py-0 mb-3">
<h3 class="text-xs text-az-text uppercase tracking-wide">GPS-Denied</h3>
<span class="px-2 py-0.5 rounded-full text-[10px] border border-az-red text-az-red">Active</span>
</div>
<div class="mb-3">
<h4 class="text-[11px] text-az-text uppercase tracking-wide mb-2">Orthophoto Upload</h4>
<div class="space-y-1.5">
<div class="flex items-center gap-2 bg-az-border rounded px-2.5 py-2 text-xs">
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px] shrink-0">P</span>
<span class="flex-1 truncate">ortho_001.jpg</span>
<span class="text-az-text text-[10px] shrink-0">48.85,2.35</span>
</div>
<div class="flex items-center gap-2 bg-az-border rounded px-2.5 py-2 text-xs">
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px] shrink-0">P</span>
<span class="flex-1 truncate">ortho_002.jpg</span>
<span class="text-az-text text-[10px] shrink-0">48.86,2.36</span>
</div>
<div class="flex items-center gap-2 bg-az-border rounded px-2.5 py-2 text-xs">
<span class="w-5 h-5 rounded bg-az-blue flex items-center justify-center text-[9px] shrink-0">P</span>
<span class="flex-1 truncate">ortho_003.jpg</span>
<span class="text-az-text text-[10px] shrink-0">48.87,2.37</span>
</div>
</div>
<button class="w-full mt-2 py-1.5 border border-dashed border-az-muted text-az-text text-xs rounded hover:border-az-blue hover:text-white">+ Upload Photos</button>
</div>
<div class="mb-3">
<h4 class="text-[11px] text-az-text uppercase tracking-wide mb-2">Live GPS</h4>
<div class="bg-az-border rounded p-2.5 text-xs space-y-1.5">
<div class="flex justify-between">
<span class="text-az-text">Status</span>
<span class="text-az-green">Connected</span>
</div>
<div class="flex justify-between">
<span class="text-az-text">Lat</span>
<span>48.8566</span>
</div>
<div class="flex justify-between">
<span class="text-az-text">Lon</span>
<span>2.3522</span>
</div>
<div class="flex justify-between">
<span class="text-az-text">Satellites</span>
<span>12</span>
</div>
</div>
</div>
<div class="mb-3">
<h4 class="text-[11px] text-az-text uppercase tracking-wide mb-2">GPS Correction</h4>
<div class="space-y-2">
<div>
<label class="block text-[11px] text-az-text mb-1">Waypoint #</label>
<input type="number" value="3" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
</div>
<div>
<label class="block text-[11px] text-az-text mb-1">Corrected GPS</label>
<input type="text" placeholder="48.8566, 2.3522" class="w-full bg-az-border border border-az-muted text-white px-2 py-1.5 rounded text-xs">
</div>
<button class="w-full py-1.5 bg-az-blue text-white rounded text-xs hover:brightness-110">Apply Correction</button>
</div>
</div>
<button onclick="toggleGpsDenied()" class="w-full py-1.5 border border-az-border text-az-text text-xs rounded hover:bg-az-border hover:text-white">Back to Flight</button>
</div>
</div>
<div class="flex-1 bg-neutral-900 relative overflow-hidden">
<div class="w-full h-full bg-gradient-to-b from-[#1a2a1a] via-[#2a3a2a] to-[#1a2a1a] relative">
<div class="absolute inset-0" style="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"></div>
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="none">
<polyline points="150,450 250,350 350,280 450,320 550,250 650,200" fill="none" stroke="#fa5252" stroke-width="2" stroke-dasharray="6,4"/>
<polyline points="150,460 255,358 360,290 455,328 555,260 650,210" fill="none" stroke="#40c057" stroke-width="1.5" opacity="0.6"/>
</svg>
<div class="absolute w-3 h-3 bg-az-green border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:18.75%;top:75%"></div>
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:31.25%;top:58.3%"></div>
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:43.75%;top:46.7%"></div>
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:56.25%;top:53.3%"></div>
<div class="absolute w-3 h-3 bg-az-blue border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:68.75%;top:41.7%"></div>
<div class="absolute w-3 h-3 bg-az-red border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2" style="left:81.25%;top:33.3%"></div>
<div class="absolute top-3 right-3 bg-az-panel/90 border border-az-border rounded px-3 py-2 text-[10px]">
<div class="flex items-center gap-2 mb-1"><span class="w-2 h-2 rounded-full bg-az-red"></span> Original path</div>
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-az-green"></span> Corrected path</div>
</div>
<span class="absolute bottom-2 right-2 text-[11px] text-az-muted">~800px</span>
</div>
</div>
</div>
<script>
function toggleGpsDenied() {
const fp = document.getElementById('flightParams');
const gps = document.getElementById('gpsDenied');
fp.classList.toggle('hidden');
gps.classList.toggle('hidden');
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink