mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 10:51:11 +00:00
Armen Rohalov
2a62415f0c
ui_design v2: tactical-ops redesign of all 5 pages Two parallel takes on visual polish for flights, annotations, dataset explorer, admin, and settings. - v2/plugin/ — self-contained HTML produced via the frontend-design plugin, adheres to v2/plugin/_design_system.md.. - v2/stitch/ — Google Stitch MCP exports against the same design system. IA from the original wireframes in _docs/ui_design/ is preserved verbatim — this pass is visual only.
346 lines
16 KiB
HTML
346 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
body {
|
|
background-color: #0A0D10;
|
|
color: #E8ECF1;
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
.font-headline { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
.corner-bracket {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-color: #FF9D3D;
|
|
}
|
|
.bracket-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
|
|
.bracket-tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
|
|
.bracket-bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
|
|
.bracket-br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
|
|
|
|
.scanline {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: rgba(255, 157, 61, 0.03);
|
|
position: absolute;
|
|
animation: scan 8s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes scan {
|
|
from { top: 0; }
|
|
to { top: 100%; }
|
|
}
|
|
|
|
.tabular-nums { font-variant-numeric: tabular-nums; }
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar { width: 4px; height: 4px; }
|
|
::-webkit-scrollbar-track { background: #0A0D10; }
|
|
::-webkit-scrollbar-thumb { background: #252B34; }
|
|
::-webkit-scrollbar-thumb:hover { background: #3B4451; }
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
0: "#0A0D10",
|
|
1: "#13171C",
|
|
2: "#1A1F26"
|
|
},
|
|
hairline: "#252B34",
|
|
raised: "#3B4451",
|
|
primary: "#FF9D3D",
|
|
cyan: "#36D6C5",
|
|
red: "#FF4756",
|
|
green: "#3DDC84",
|
|
blue: "#4E9EFF",
|
|
"on-primary": "#0A0D10"
|
|
},
|
|
borderRadius: {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "9999px"
|
|
},
|
|
fontFamily: {
|
|
headline: ["JetBrains Mono"],
|
|
body: ["IBM Plex Sans"],
|
|
mono: ["JetBrains Mono"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-[#0A0D10] text-[#E8ECF1] antialiased min-h-screen pb-24">
|
|
<!-- TopAppBar Shell -->
|
|
<header class="fixed top-0 w-full h-[48px] z-50 bg-[#0A0D10] border-b border-[#252B34] flex justify-between items-center px-4">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-headline font-black text-lg tracking-tighter text-[#FF9D3D]">AZAION</span>
|
|
<div class="flex items-center bg-[#13171C] border border-[#252B34] px-2 py-0.5 rounded-sm cursor-pointer hover:border-[#FF9D3D] transition-colors">
|
|
<span class="font-mono text-[10px] tracking-widest text-[#FF9D3D]">FL02</span>
|
|
<span class="material-symbols-outlined text-[14px] text-[#FF9D3D] ml-1">arrow_drop_down</span>
|
|
</div>
|
|
</div>
|
|
<nav class="hidden md:flex h-full items-center">
|
|
<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">FLIGHTS</a>
|
|
<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">ANNOTATIONS</a>
|
|
<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">DATASET</a>
|
|
<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center px-4 font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">ADMIN</a>
|
|
</nav>
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-mono text-[10px] text-[#9AA4B2] hidden sm:block">USER@AZAION.MIL</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-1 text-[#FF9D3D] active:opacity-80 transition-opacity">
|
|
<span class="material-symbols-outlined text-[20px]" data-weight="fill">settings</span>
|
|
</button>
|
|
<button class="p-1 text-[#5B6573] hover:text-[#FF4756] active:opacity-80 transition-opacity">
|
|
<span class="material-symbols-outlined text-[20px]">power_settings_new</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="mt-16 px-5 max-w-[1600px] mx-auto">
|
|
<div class="scanline"></div>
|
|
<!-- Row 1: Configurations -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-5 mb-5">
|
|
<!-- 01 - Tenant Config -->
|
|
<section class="lg:col-span-3 bg-[#13171C] border border-[#252B34] p-4 relative">
|
|
<div class="corner-bracket bracket-tl"></div>
|
|
<div class="corner-bracket bracket-tr"></div>
|
|
<div class="corner-bracket bracket-bl"></div>
|
|
<div class="corner-bracket bracket-br"></div>
|
|
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">01 — TENANT CONFIGURATION</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-mono text-[10px] text-[#5B6573] uppercase">MILITARY UNIT</label>
|
|
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-body" type="text" value="72nd Brigade"/>
|
|
<span class="text-[9px] text-[#5B6573] font-mono">USED IN PDF EXPORT HEADERS</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-mono text-[10px] text-[#5B6573] uppercase">UNIT NAME</label>
|
|
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-body" type="text" value="Alpha Company"/>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-mono text-[10px] text-[#5B6573] uppercase">DEF. WIDTH</label>
|
|
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-mono tabular-nums" type="text" value="1920"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-mono text-[10px] text-[#5B6573] uppercase">DEF. FOV</label>
|
|
<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-mono tabular-nums" type="text" value="84"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 02 - Directories -->
|
|
<section class="lg:col-span-3 bg-[#13171C] border border-[#252B34] p-4 relative">
|
|
<div class="corner-bracket bracket-tl"></div>
|
|
<div class="corner-bracket bracket-tr"></div>
|
|
<div class="corner-bracket bracket-bl"></div>
|
|
<div class="corner-bracket bracket-br"></div>
|
|
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">02 — DIRECTORIES</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-mono text-[10px] text-[#5B6573] uppercase">IMAGES PATH</label>
|
|
<div class="flex">
|
|
<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
|
|
<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
|
|
/mnt/nas/azaion/images/
|
|
</div>
|
|
<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
|
|
</div>
|
|
<div class="flex items-center gap-1 mt-1">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-[#3DDC84]"></div>
|
|
<span class="text-[9px] text-[#3DDC84] font-mono">MOUNTED (NVME_01)</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-mono text-[10px] text-[#5B6573] uppercase">LABELS PATH</label>
|
|
<div class="flex">
|
|
<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
|
|
<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
|
|
/mnt/nas/azaion/labels/
|
|
</div>
|
|
<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-mono text-[10px] text-[#5B6573] uppercase">THUMBNAILS</label>
|
|
<div class="flex">
|
|
<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
|
|
<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
|
|
/var/www/azaion/thumbs/
|
|
</div>
|
|
<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 03 - Aircrafts -->
|
|
<section class="lg:col-span-6 bg-[#13171C] border border-[#252B34] p-4 relative flex flex-col">
|
|
<div class="corner-bracket bracket-tl"></div>
|
|
<div class="corner-bracket bracket-tr"></div>
|
|
<div class="corner-bracket bracket-bl"></div>
|
|
<div class="corner-bracket bracket-br"></div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] uppercase">03 — AIRCRAFTS</h2>
|
|
<button class="bg-[#FF9D3D] text-[#0A0D10] font-mono font-bold text-[9px] px-3 py-1 rounded-sm hover:opacity-90 active:scale-95 transition-all flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px]">add</span>
|
|
ADD AIRCRAFT
|
|
</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-[#252B34]">
|
|
<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase">MODEL</th>
|
|
<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase text-center">TYPE</th>
|
|
<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase text-right">DEFAULT</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm">
|
|
<tr class="hover:bg-[#1A1F26] transition-colors group">
|
|
<td class="py-3 font-medium text-[#E8ECF1]">DJI Mavic 3</td>
|
|
<td class="py-3">
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#4E9EFF] rounded-full">
|
|
<div class="w-1 h-1 rounded-full bg-[#4E9EFF]"></div>
|
|
<span class="text-[9px] font-mono text-[#4E9EFF]">PLANE</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 text-right">
|
|
<button class="text-[#FF9D3D]">
|
|
<span class="material-symbols-outlined text-[18px]" data-weight="fill">star</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-[#1A1F26] transition-colors group">
|
|
<td class="py-3 font-medium text-[#E8ECF1]">Matrice 300 RTK</td>
|
|
<td class="py-3">
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#3DDC84] rounded-full">
|
|
<div class="w-1 h-1 rounded-full bg-[#3DDC84]"></div>
|
|
<span class="text-[9px] font-mono text-[#3DDC84]">COPTER</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 text-right">
|
|
<button class="text-[#5B6573] hover:text-[#FF9D3D]">
|
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-[#1A1F26] transition-colors group">
|
|
<td class="py-3 font-medium text-[#E8ECF1]">Autel EVO II Dual</td>
|
|
<td class="py-3">
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#3DDC84] rounded-full">
|
|
<div class="w-1 h-1 rounded-full bg-[#3DDC84]"></div>
|
|
<span class="text-[9px] font-mono text-[#3DDC84]">COPTER</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 text-right">
|
|
<button class="text-[#5B6573] hover:text-[#FF9D3D]">
|
|
<span class="material-symbols-outlined text-[18px]">star</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Row 2: Misc -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<!-- 04 - Language -->
|
|
<section class="bg-[#13171C] border border-[#252B34] p-4 relative">
|
|
<div class="corner-bracket bracket-tl"></div>
|
|
<div class="corner-bracket bracket-tr"></div>
|
|
<div class="corner-bracket bracket-bl"></div>
|
|
<div class="corner-bracket bracket-br"></div>
|
|
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">04 — LANGUAGE</h2>
|
|
<div class="flex border border-[#252B34] w-fit">
|
|
<button class="px-6 py-2 font-mono text-xs bg-[#FF9D3D] text-[#0A0D10] font-bold">EN</button>
|
|
<button class="px-6 py-2 font-mono text-xs text-[#9AA4B2] hover:bg-[#1A1F26] transition-colors">UA</button>
|
|
</div>
|
|
</section>
|
|
<!-- 05 - Session -->
|
|
<section class="bg-[#13171C] border border-[#252B34] p-4 relative">
|
|
<div class="corner-bracket bracket-tl"></div>
|
|
<div class="corner-bracket bracket-tr"></div>
|
|
<div class="corner-bracket bracket-bl"></div>
|
|
<div class="corner-bracket bracket-br"></div>
|
|
<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">05 — SESSION</h2>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<button class="border border-[#FF4756] text-[#FF4756] font-mono text-[10px] px-4 py-2 hover:bg-[#FF4756] hover:text-[#0A0D10] transition-all uppercase">
|
|
Sign out everywhere
|
|
</button>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-mono text-[9px] text-[#5B6573] uppercase">LAST LOGIN: 2023-10-24 14:32:01</p>
|
|
<p class="font-mono text-[9px] text-[#5B6573] uppercase">IP: 192.168.1.104 (LOCAL)</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<!-- Footer Shell -->
|
|
<footer class="fixed bottom-0 left-0 right-0 z-50 bg-[#0A0D10] flex flex-row-reverse items-center gap-4 p-4 border-t border-[#252B34] h-14">
|
|
<button class="bg-[#FF9D3D] text-[#0A0D10] font-bold px-6 py-1.5 rounded-sm font-headline font-mono text-[10px] tracking-[0.12em] uppercase active:scale-[0.98] transition-transform">
|
|
SAVE CHANGES
|
|
</button>
|
|
<button class="border border-[#252B34] text-[#9AA4B2] px-6 py-1.5 rounded-sm font-headline font-mono text-[10px] tracking-[0.12em] uppercase hover:border-[#3B4451] hover:text-[#E8ECF1] active:scale-[0.98] transition-transform">
|
|
CANCEL
|
|
</button>
|
|
<div class="mr-auto">
|
|
<div class="flex items-center gap-2 border border-[#FF9D3D] bg-transparent px-3 py-1 rounded-full">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-[#FF9D3D] animate-pulse"></div>
|
|
<span class="font-mono text-[9px] text-[#FF9D3D] uppercase font-bold tracking-wider">UNSAVED CHANGES IN TENANT</span>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:block">
|
|
<span class="font-mono text-[9px] text-[#5B6573] uppercase tracking-[0.12em]">SYSTEM STATUS: OPTIMAL // ENCRYPTION AES-256</span>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Subtle atmosphere: Interactive input highlights
|
|
const inputs = document.querySelectorAll('input');
|
|
inputs.forEach(input => {
|
|
input.addEventListener('focus', () => {
|
|
input.parentElement.closest('section').style.borderColor = '#FF9D3D';
|
|
});
|
|
input.addEventListener('blur', () => {
|
|
input.parentElement.closest('section').style.borderColor = '#252B34';
|
|
});
|
|
});
|
|
|
|
// Simulating unsaved changes logic
|
|
const originalValues = Array.from(inputs).map(i => i.value);
|
|
inputs.forEach((input, idx) => {
|
|
input.addEventListener('input', () => {
|
|
const statusPill = document.querySelector('.mr-auto .border');
|
|
if(input.value !== originalValues[idx]) {
|
|
statusPill.classList.remove('opacity-0');
|
|
statusPill.classList.add('opacity-100');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |