mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 11:01: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.
369 lines
25 KiB
HTML
369 lines
25 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"/>
|
|
<title>AZAION OPS - DATASET EXPLORER</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
0: "#0A0D10",
|
|
1: "#13171C",
|
|
2: "#1A1F26"
|
|
},
|
|
hairline: "#252B34",
|
|
raised: "#3B4451",
|
|
amber: "#FF9D3D",
|
|
cyan: "#36D6C5",
|
|
red: "#FF4756",
|
|
green: "#3DDC84",
|
|
blue: "#4E9EFF",
|
|
text: {
|
|
primary: "#E8ECF1",
|
|
secondary: "#9AA4B2",
|
|
muted: "#5B6573"
|
|
}
|
|
},
|
|
fontFamily: {
|
|
headline: ["JetBrains Mono", "monospace"],
|
|
display: ["JetBrains Mono", "monospace"],
|
|
body: ["IBM Plex Sans", "sans-serif"],
|
|
label: ["JetBrains Mono", "monospace"]
|
|
},
|
|
letterSpacing: {
|
|
'technical': '0.12em',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #0A0D10;
|
|
color: #E8ECF1;
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
}
|
|
.font-mono-tabular {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.bracket-tl::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
|
.bracket-tr::before { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
|
.bracket-bl::before { content: ''; position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
|
|
.bracket-br::before { content: ''; position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
|
|
|
|
.scanline {
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.02) 50%);
|
|
background-size: 100% 4px;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="h-screen flex flex-col overflow-hidden">
|
|
<!-- TopNavBar -->
|
|
<header class="flex justify-between items-center px-4 w-full h-[48px] bg-[#0A0D10] border-b border-[#252B34] z-50">
|
|
<div class="flex items-center gap-6">
|
|
<span class="font-headline font-bold text-[#FF9D3D] tracking-widest text-lg">AZAION OPS</span>
|
|
<div class="bg-surface-2 border border-hairline px-2 py-0.5 flex items-center gap-2 cursor-pointer hover:border-amber transition-colors">
|
|
<span class="font-headline text-[10px] text-amber tracking-technical">FL03</span>
|
|
<span class="material-symbols-outlined text-[14px] text-text-secondary">arrow_drop_down</span>
|
|
</div>
|
|
<nav class="flex gap-6 h-[48px] items-center">
|
|
<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">FLIGHTS</a>
|
|
<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">ANNOTATIONS</a>
|
|
<a class="font-headline text-[10px] tracking-technical uppercase text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center" href="#">DATASET</a>
|
|
<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">ADMIN</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2 px-3 py-1 bg-amber/10 border border-amber/30">
|
|
<span class="w-2 h-2 rounded-full bg-amber animate-pulse"></span>
|
|
<span class="font-headline text-[10px] text-amber tracking-technical">MISSION READY</span>
|
|
</div>
|
|
<div class="flex gap-3 text-text-secondary">
|
|
<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">notifications</span>
|
|
<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">settings</span>
|
|
<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">account_circle</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<!-- SideNavBar / Left Sidebar -->
|
|
<aside class="w-64 bg-[#13171C] border-r border-[#252B34] flex flex-col h-full shrink-0">
|
|
<div class="p-4 border-b border-hairline">
|
|
<h3 class="font-headline text-[10px] tracking-technical text-text-muted mb-4 uppercase">DETECTION CLASSES</h3>
|
|
<div class="space-y-2">
|
|
<!-- Class Items -->
|
|
<div class="flex items-center justify-between group cursor-crosshair">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-cyan"></div>
|
|
<span class="font-headline text-[11px] text-text-primary uppercase">MilVeh</span>
|
|
</div>
|
|
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">124</span>
|
|
</div>
|
|
<div class="flex items-center justify-between group cursor-crosshair">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-amber"></div>
|
|
<span class="font-headline text-[11px] text-text-primary uppercase">Truck</span>
|
|
</div>
|
|
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">087</span>
|
|
</div>
|
|
<div class="flex items-center justify-between group cursor-crosshair">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-green"></div>
|
|
<span class="font-headline text-[11px] text-text-primary uppercase">Vehicle</span>
|
|
</div>
|
|
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">061</span>
|
|
</div>
|
|
<div class="flex items-center justify-between group cursor-crosshair opacity-50">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-red"></div>
|
|
<span class="font-headline text-[11px] text-text-primary uppercase">Artillery</span>
|
|
</div>
|
|
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">032</span>
|
|
</div>
|
|
<div class="flex items-center justify-between group cursor-crosshair">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-raised"></div>
|
|
<span class="font-headline text-[11px] text-text-primary uppercase">Shadow</span>
|
|
</div>
|
|
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">214</span>
|
|
</div>
|
|
<div class="flex items-center justify-between group cursor-crosshair">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-blue"></div>
|
|
<span class="font-headline text-[11px] text-text-primary uppercase">Trenches</span>
|
|
</div>
|
|
<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-b border-hairline">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="font-headline text-[10px] tracking-technical text-text-secondary uppercase">Objects Only</span>
|
|
<button class="w-8 h-4 bg-surface-0 border border-hairline relative">
|
|
<div class="absolute top-0 right-0 w-4 h-[14px] bg-amber"></div>
|
|
</button>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-text-muted text-[16px]">search</span>
|
|
<input class="w-full bg-surface-0 border border-hairline h-8 pl-8 font-headline text-[10px] text-text-primary focus:ring-1 focus:ring-amber focus:border-amber outline-none" placeholder="FILTER BY ID..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 flex-1">
|
|
<div class="relative p-4 border border-hairline bg-surface-2 overflow-hidden">
|
|
<div class="bracket-tl"></div><div class="bracket-tr"></div><div class="bracket-bl"></div><div class="bracket-br"></div>
|
|
<h4 class="font-headline text-[10px] tracking-technical text-amber mb-3 uppercase">QUICK STATS</h4>
|
|
<div class="space-y-2 font-mono-tabular text-[10px]">
|
|
<div class="flex justify-between border-b border-hairline pb-1">
|
|
<span class="text-text-muted">TOTAL</span>
|
|
<span class="text-text-primary">01,842</span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-hairline pb-1">
|
|
<span class="text-text-muted">VALIDATED</span>
|
|
<span class="text-text-primary text-green">01,504</span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-hairline pb-1">
|
|
<span class="text-text-muted">PENDING</span>
|
|
<span class="text-text-primary text-amber">00,338</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-hairline flex flex-col gap-2">
|
|
<div class="flex items-center gap-3 px-3 py-2 hover:bg-surface-2 text-text-muted hover:text-text-primary transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined text-[18px]">build</span>
|
|
<span class="font-headline text-[10px] tracking-technical">DIAGNOSTICS</span>
|
|
</div>
|
|
<button class="w-full border border-red text-red font-headline text-[10px] py-2 tracking-technical hover:bg-red/10 transition-all">TERMINATE SESSION</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col bg-surface-0 relative overflow-hidden">
|
|
<!-- Filter Bar -->
|
|
<div class="h-12 border-b border-hairline bg-surface-1 flex items-center px-4 justify-between shrink-0">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center border border-hairline bg-surface-0 h-7 px-2">
|
|
<span class="font-mono-tabular text-[11px] text-text-primary uppercase">2025-02-09</span>
|
|
<span class="mx-2 text-text-muted">—</span>
|
|
<span class="font-mono-tabular text-[11px] text-text-primary uppercase">2025-02-11</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 border border-hairline bg-surface-0 h-7 px-3 cursor-pointer">
|
|
<span class="w-2 h-2 rounded-full bg-amber"></span>
|
|
<span class="font-headline text-[11px] text-text-primary">FL-03</span>
|
|
<span class="material-symbols-outlined text-[14px]">arrow_drop_down</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-hairline"></div>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 h-6 border border-hairline text-text-muted font-headline text-[10px] flex items-center tracking-technical">NONE</span>
|
|
<span class="px-2 h-6 border border-amber/30 bg-amber/10 text-amber font-headline text-[10px] flex items-center tracking-technical">CREATED</span>
|
|
<span class="px-2 h-6 border border-blue text-blue font-headline text-[10px] flex items-center tracking-technical">EDITED</span>
|
|
<span class="px-2 h-6 border border-green bg-green/10 text-green font-headline text-[10px] flex items-center tracking-technical">VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<button class="w-8 h-8 flex items-center justify-center border border-hairline text-text-secondary hover:border-amber"><span class="material-symbols-outlined text-[18px]">grid_view</span></button>
|
|
<button class="w-8 h-8 flex items-center justify-center border border-hairline text-text-secondary hover:border-amber"><span class="material-symbols-outlined text-[18px]">list</span></button>
|
|
</div>
|
|
</div>
|
|
<!-- Tab Strip -->
|
|
<div class="flex border-b border-hairline bg-surface-1 px-4">
|
|
<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-amber border-b-2 border-amber">ANNOTATIONS</button>
|
|
<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-text-muted hover:text-text-primary transition-colors">EDITOR</button>
|
|
<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-text-muted hover:text-text-primary transition-colors">CLASS DISTRIBUTION</button>
|
|
</div>
|
|
<!-- Annotation Grid -->
|
|
<div class="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-raised">
|
|
<div class="grid grid-cols-6 gap-2">
|
|
<!-- SELECTED TILE 1 -->
|
|
<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
|
|
<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</div>
|
|
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
|
|
<div class="w-full h-full bg-gradient-to-br from-emerald-900/40 to-emerald-950/80 p-4">
|
|
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Overhead satellite imagery view of a tactical forest environment with dense pine trees and forest clearings, captured in a high-contrast cinematic military aesthetic with deep emerald and forest green tones. The lighting is diffused and moody, suggesting late afternoon surveillance conditions." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZwHF0AGwGxdwnLxfsEd3dpitJogOaQpNG9slAfON3bmZ4RJaRwEUqFug_t_9_jBBontbW--0jIzc3JP3FNa54HzGWTAW-YEyhtStHld5Y6fESKmeG1T0kMLcyUufABqLmiOHkbPTkrUTqd_SCbl9frdThLUJKzTCifR7e-P4Pp4Fth5EKHCuhQF6-G9iSFmBQSHhIwztSXdFc8icy9Hc78XowZg7ApF3FUb9J58fr_9tG1C0CMsQHQRxeibwqIL1wWjFL8JQX_clL"/>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1">
|
|
<div class="flex items-center gap-1 border border-green bg-green/10 px-1 py-0.5">
|
|
<span class="w-1 h-1 rounded-full bg-green"></span>
|
|
<span class="font-headline text-[8px] text-green uppercase">VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- SEED ANNOTATION TILE -->
|
|
<div class="aspect-square bg-surface-1 border border-red relative group cursor-pointer overflow-hidden">
|
|
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
|
|
<div class="w-full h-full bg-gradient-to-br from-slate-700/40 to-slate-900/80 p-4">
|
|
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="High-altitude aerial reconnaissance photo of an industrial urban gray logistics yard with large warehouse buildings and parked military trucks, styled in a monochromatic tactical console aesthetic with cold gray and steel blue highlights. Hard shadows define the sharp geometric edges of the structures." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDoU_a9p0-IJp50fhCLTE-DwYSPqqwg7OpqZvedAnd9dt_IHLoKUqBlwqbMqAXh16APb9_SsVYqX8D5sTeN3YUgKCjS02xq0KQyJe8JZhzWcmIUt-0BEkJmYm7mC-GhbOgpBwJOzb_nW0v-dXd1jG8J8x3VN_vs1UB0rWTcKDej0DCD-Pu0G8l70gMrfS6YiYw3AFmeBkeHIkdhTG2p9R9AbNrw1TSOZ-dX3Ug4H58KFSSJSWIFOTK_zUpEe1Wt0qR5Ad9cc2KDyj3B"/>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1">
|
|
<div class="flex items-center gap-1 border border-amber/30 bg-amber/10 px-1 py-0.5">
|
|
<span class="w-1 h-1 rounded-full bg-amber"></span>
|
|
<span class="font-headline text-[8px] text-amber uppercase">CREATED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- STANDARD TILES (Loop representation) -->
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative group cursor-pointer overflow-hidden">
|
|
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
|
|
<div class="w-full h-full bg-gradient-to-br from-orange-900/40 to-orange-950/80 p-4">
|
|
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Top-down thermal scan perspective of a vast desert expanse with shifting sand dunes and scattered brush, rendered in tactical desert tan and warm brown hues. The visual style is grainy and technical, mimicking a low-altitude drone feed under harsh midday sun." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0pqdeg1e8c_3U4DtQ-ZOfV6BmqEiXafEZh7NIYNbZQH9wvAvvhkK-yIHxXA9YW0qeX6pbNw5828CaeEEohxAslUJoxCCQDZctcD116r3hjk3xd2XfcWPjpsuwzAAncZ7Rn1G8X0NaStgmavXFXSU2GvygcODvB9WRZ810ECwdYNjG3Ta4Djwt8dQNPTggoYFKXKrQUmjKHy2tEVPpKFtAR2dlJvsWKUinJz45wbHNmYZrqF8y2C81Ir_-3CK_FO8IEaqkD6uxeJGV"/>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1">
|
|
<div class="flex items-center gap-1 border border-blue px-1 py-0.5">
|
|
<span class="w-1 h-1 rounded-full bg-blue"></span>
|
|
<span class="font-headline text-[8px] text-blue uppercase">EDITED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Repeat for 18+ items -->
|
|
<!-- tile 4 -->
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative group cursor-pointer overflow-hidden">
|
|
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">11 MAY · XC</div>
|
|
<div class="w-full h-full bg-gradient-to-br from-pink-950/40 to-black p-4">
|
|
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Electronic surveillance view of a rocky coastline at dusk, featuring dark pink and deep purple lighting highlights on jagged cliff faces. The style is that of a specialized tactical sensor array with visible noise patterns and technical overlay characteristics." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBmWx_3z5QEWlHjjyY9V_44FP6IJeBOXAf_PNaQOG_1Czq3nV1-1VmC7F8c2s0DSTu22-fYpYBtpSIfW-kaw-0Vh7R04HgP4WMfiKLyQbkKB_hMJOACRRC-842y00IulZlEc8k0pgwhqEuuB05ryZSh9Ka-CPwOyyjk5-mrWSP-IQia7iOqNHAeUcBGrtBYlQ2KEroHs_hEUMo7O-0Lg7wAGSslxK-jY20kIpuU_Fg7_XXP-0l54aJdVetKR3RKX864vzk1CUJO00sK"/>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1">
|
|
<div class="flex items-center gap-1 border border-hairline px-1 py-0.5">
|
|
<span class="w-1 h-1 rounded-full bg-text-muted"></span>
|
|
<span class="font-headline text-[8px] text-text-muted uppercase">NONE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- SELECTED TILE 2 -->
|
|
<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
|
|
<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</div>
|
|
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">10 MAY · RD</div>
|
|
<div class="w-full h-full bg-gradient-to-br from-blue-900/40 to-slate-900/80 p-4">
|
|
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Nadir drone view of a frozen arctic plain with deep snow drifts and blue ice fissures, styled in a cold white and cyan military imagery aesthetic. The lighting is bright and flat, characteristic of overcast polar surveillance missions." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4f1LSl-0OM7MAyUiSgDYQmqdSYe1togt8aSpmiSzl2z3MvkEMbslpDsFEL5ySzBDwBCaDb5SrRZcQDtv11duF2tPo86SkHD6HxnHZWHktpUtN67S3lGiIoJvbPzhTj4gdEbzvOzH2E8mTzvNQs8g6lz9KkpNwCFCN-CyzW0SoOJmHvaM3XKBgE7iNKQroGTnyqImiWOemd8pfBujP5djPswarBzfKgzNbmEU3KgXofVA0ZFb2oPZ5cDc5HWfGCad60NhTf906Ots_"/>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1">
|
|
<div class="flex items-center gap-1 border border-green bg-green/10 px-1 py-0.5">
|
|
<span class="w-1 h-1 rounded-full bg-green"></span>
|
|
<span class="font-headline text-[8px] text-green uppercase">VALIDATED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- tile 6 -->
|
|
<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
|
|
<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</div>
|
|
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">09 MAY · RD</div>
|
|
<div class="w-full h-full bg-gradient-to-br from-gray-700/40 to-gray-900/80 p-4">
|
|
<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Aerial drone camera feed showing an abandoned rural farming area with dilapidated barns and overgrown fields, captured in a stark urban gray and muted olive palette. Technical metadata overlays might be inferred by the precision framing and tactical perspective." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDd_sJhVwnkVBWWrM9DIzpU1MQUy2fRutHktUF4nU7H60J5RlwUJ3uETjgy9Q-TLgZGHgb6qujRL75JHJ4b-YfMr3Rwg0rDSX9XhC2jN-4eWu4aGpcvVqOe838jdKwWsmN8Xs8r1i5aZe5ThoJHgWkT4YzG9LO6wqYAe4Eut88IFfxDtW6QGCI4GmMFf9rwpNzgL1F1SNuBzG5FX_oSIuHPgBFm-0uMX21IU4Ni4erv85cVseLLT9nNNwuLl1R_JYwz63-6kD2acRp1"/>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1">
|
|
<div class="flex items-center gap-1 border border-blue px-1 py-0.5">
|
|
<span class="w-1 h-1 rounded-full bg-blue"></span>
|
|
<span class="font-headline text-[8px] text-blue uppercase">EDITED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Fill grid with generic stylized tiles -->
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative group overflow-hidden">
|
|
<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">08 MAY · RD</div>
|
|
<div class="w-full h-full bg-surface-2 flex items-center justify-center">
|
|
<div class="w-full h-full opacity-10 scanline absolute inset-0"></div>
|
|
<span class="font-headline text-[8px] text-text-muted">IMG_DATA_007</span>
|
|
</div>
|
|
</div>
|
|
<!-- Repeating pattern -->
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-red relative overflow-hidden">
|
|
<div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div>
|
|
<div class="absolute top-1 left-1 bg-red/20 px-1 font-headline text-[7px] text-red">SEED</div>
|
|
</div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-blue-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-blue-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div></div>
|
|
<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Status Bar -->
|
|
<footer class="h-12 border-t border-hairline bg-surface-1 flex items-center px-4 justify-between shrink-0">
|
|
<div class="flex items-center gap-3">
|
|
<button class="bg-amber text-surface-0 font-headline text-[10px] h-8 px-4 font-bold tracking-technical flex items-center gap-2 hover:opacity-90 active:scale-95 transition-all">
|
|
VALIDATE (3)
|
|
</button>
|
|
<button class="border border-hairline text-text-secondary font-headline text-[10px] h-8 px-4 tracking-technical hover:text-amber transition-colors">
|
|
REFRESH THUMBNAILS
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<span class="font-mono-tabular text-[11px] text-text-primary tracking-wide">ann_0247_FL03_117.jpg</span>
|
|
<div class="w-32 h-0.5 bg-hairline mt-1 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-amber w-1/3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[14px] text-text-muted">schedule</span>
|
|
<span class="font-mono-tabular text-[10px] text-text-muted uppercase">Last scan: 14:22</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-hairline"></div>
|
|
<span class="font-mono-tabular text-[10px] text-amber">3 SELECTED</span>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
</body></html> |