mirror of
https://github.com/azaion/ui.git
synced 2026-04-22 12:16:34 +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,161 @@
|
||||
<!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
Block a user