mirror of
https://github.com/azaion/ui.git
synced 2026-04-22 08:56:35 +00:00
Refactor project structure and dependencies; rename package to azaion-ui, update version to 0.0.1, and remove unused files. Introduce new routing and authentication features in App component.
This commit is contained in:
Oleksandr Bezdieniezhnykh
@@ -0,0 +1,214 @@
|
||||
<!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
Block a user