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

167 lines
13 KiB
HTML
Raw Permalink 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 – Dataset Explorer 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">FL03 <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 bg-az-bg text-white font-semibold 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-1 flex overflow-hidden p-4 gap-3">
<aside class="w-64 shrink-0 flex flex-col gap-3 border-r border-az-border pr-3">
<h2 class="text-sm font-semibold text-white">Detection Classes</h2>
<ul class="flex flex-col gap-1.5 text-sm text-az-text">
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#fa5252"></span>ArmorVehicle</li>
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#40c057"></span>Truck</li>
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#228be6"></span>Vehicle</li>
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#FFFF00"></span>Artillery</li>
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#FF00FF"></span>Shadow</li>
<li class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:#00FFFF"></span>Trenches</li>
</ul>
<label class="flex items-center gap-2 text-sm text-az-text cursor-pointer">
<input type="checkbox" class="rounded border-az-border bg-az-panel text-az-blue">
Show with objects only
</label>
<input type="text" placeholder="Search..." class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm w-full placeholder:text-az-muted">
</aside>
<div class="flex-1 flex flex-col overflow-hidden gap-3 min-w-0">
<div class="flex flex-wrap items-center gap-2">
<div class="flex items-center gap-1">
<span class="text-[11px] text-az-text uppercase tracking-wide">Date</span>
<input type="date" value="2025-02-09" class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm w-36">
<input type="date" value="2025-02-11" class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm w-36">
</div>
<div class="w-px h-6 bg-az-border mx-1"></div>
<div class="flex items-center gap-1">
<span class="text-[11px] text-az-text uppercase tracking-wide">Flight</span>
<select class="bg-az-border border border-az-muted text-white px-2.5 py-1 rounded text-sm min-w-[120px]">
<option>All</option>
</select>
</div>
<div class="w-px h-6 bg-az-border mx-1"></div>
<button class="px-3 py-1 rounded-full text-xs border border-az-blue bg-az-blue text-white">Created</button>
<button class="px-3 py-1 rounded-full text-xs border border-az-muted text-az-text hover:border-az-text hover:text-white">Edited / None</button>
<button class="px-3 py-1 rounded-full text-xs border border-az-blue bg-az-blue text-white">Validated</button>
</div>
<div class="flex-1 overflow-y-auto">
<div class="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2">
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#2d4a3e]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5568] to-[#2d3748]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#44322a]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#3a5548]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a4a58] to-[#2d3748]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5548] to-[#3a4538]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#44322a]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#4a5548]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#2d4a3e]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5568] to-[#2d3748]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#3a5548]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#44322a]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a4a58] to-[#2d3748]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5548] to-[#3a4538]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#2d4a3e]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d4a3e] to-[#553c2e]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#4a5568] to-[#3a4a58]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-orange text-white">Created</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#3a5548] to-[#4a5548]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-green text-white">Validated</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#553c2e] to-[#2d4a3e]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-blue text-white">Edited</span>
</div>
<div class="aspect-square bg-az-panel rounded border border-az-border hover:border-az-blue cursor-pointer relative transition-colors">
<div class="w-full h-full flex items-center justify-center"><div class="w-3/5 h-3/5 rounded bg-gradient-to-br from-[#2d3748] to-[#4a5568]"></div></div>
<span class="absolute bottom-1.5 left-1.5 text-[10px] px-2 py-0.5 rounded-full bg-az-border text-az-text">None</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink