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

162 lines
10 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 – Annotations 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">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 bg-az-bg text-white font-semibold 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-64 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">Media Files</h3>
<div class="flex-1 overflow-y-auto min-h-0">
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 bg-az-border">
<span class="w-4 h-4 rounded-sm bg-az-blue flex items-center justify-center text-[9px]">P</span> Photobook1
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="w-4 h-4 rounded-sm bg-az-orange flex items-center justify-center text-[9px]">V</span> Video 02
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="w-4 h-4 rounded-sm bg-az-orange flex items-center justify-center text-[9px]">V</span> Video 03
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="w-4 h-4 rounded-sm bg-az-blue flex items-center justify-center text-[9px]">P</span> Photo002
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="w-4 h-4 rounded-sm bg-az-blue flex items-center justify-center text-[9px]">P</span> Photo003
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="w-4 h-4 rounded-sm bg-az-orange flex items-center justify-center text-[9px]">V</span> Video 04
</div>
</div>
<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="overflow-y-auto">
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#FF0000"></span> MilVeh
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#00FF00"></span> Truck
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#0000FF"></span> Vehicle
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#FFFF00"></span> Artillery
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#FF00FF"></span> Shadow
</div>
<div class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-b border-neutral-800 hover:bg-neutral-700">
<span class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0" style="background:#00FFFF"></span> Trenches
</div>
</div>
<div class="p-3 border-t border-az-border">
<label class="block text-az-text mb-1.5 text-[11px] uppercase tracking-wide">PhotoMode</label>
<div class="flex gap-2">
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
<input type="radio" name="photomode" checked class="rounded-full"> Regular
</label>
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
<input type="radio" name="photomode" class="rounded-full"> Winter
</label>
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
<input type="radio" name="photomode" class="rounded-full"> Night
</label>
</div>
</div>
</aside>
<main class="flex-1 flex flex-col">
<div class="flex-1 relative bg-neutral-900 flex items-center justify-center overflow-hidden">
<div class="w-[90%] aspect-video bg-gradient-to-br from-[#2d4a3e] via-[#3a5548] to-[#4a6858] rounded relative overflow-hidden">
<div class="absolute top-[35%] inset-x-0 h-px bg-white/10"></div>
<div class="absolute top-[25%] left-[30%] w-[20%] h-[30%] border-2 border-az-red rounded-sm">
<span class="absolute -top-5 left-0 bg-az-red text-white text-[10px] px-1.5 py-px rounded whitespace-nowrap">Mil. vehicle</span>
</div>
<div class="absolute top-[40%] left-[60%] w-[15%] h-[25%] border-2 border-az-orange rounded-sm">
<span class="absolute -top-5 left-0 bg-az-orange text-white text-[10px] px-1.5 py-px rounded whitespace-nowrap">Mil. vehicle</span>
</div>
</div>
</div>
<div class="bg-az-panel border-t border-az-border px-3 py-1.5">
<div class="w-full h-1 bg-az-border rounded mb-2 cursor-pointer">
<div class="w-[35%] h-full bg-az-blue rounded"></div>
</div>
<div class="flex items-center justify-center gap-1">
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">⏮</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">⏪</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">◀</button>
<button class="bg-az-blue text-white w-8 h-7 rounded text-xs flex items-center justify-center">▶</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">▶▶</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">⏭</button>
<span class="w-6"></span>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">1</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">5</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">10</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">30</button>
<button class="bg-az-border text-white w-8 h-7 rounded text-xs flex items-center justify-center hover:bg-az-muted">60</button>
</div>
</div>
</main>
<aside class="w-52 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">Annotations</h3>
<div class="flex-1 overflow-y-auto">
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(255,0,0,0.25),transparent)">
<span class="text-az-text text-xs">00:12</span>
<span>MilVeh</span>
</div>
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(0,255,0,0.25),transparent)">
<span class="text-az-text text-xs">00:18</span>
<span>Truck</span>
</div>
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(0,0,255,0.25),transparent)">
<span class="text-az-text text-xs">00:24</span>
<span>Vehicle</span>
</div>
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(255,255,0,0.25),transparent)">
<span class="text-az-text text-xs">00:31</span>
<span>Artillery</span>
</div>
<div class="flex justify-between items-center px-3 py-2 text-sm border-b border-neutral-800 cursor-pointer hover:opacity-90" style="background:linear-gradient(90deg,rgba(255,0,0,0.25),transparent)">
<span class="text-az-text text-xs">00:45</span>
<span>MilVeh</span>
</div>
</div>
</aside>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink