mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 14:21: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.
654 lines
24 KiB
HTML
654 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AZAION // SETTINGS</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--surface-0: #0A0D10;
|
|
--surface-1: #13171C;
|
|
--surface-2: #1A1F26;
|
|
--surface-input: #0A0D10;
|
|
--border-hair: #252B34;
|
|
--border-raised: #3B4451;
|
|
--text-primary: #E8ECF1;
|
|
--text-secondary: #9AA4B2;
|
|
--text-muted: #5B6573;
|
|
--accent-amber: #FF9D3D;
|
|
--accent-cyan: #36D6C5;
|
|
--accent-red: #FF4756;
|
|
--accent-green: #3DDC84;
|
|
--accent-blue: #4E9EFF;
|
|
}
|
|
html, body { background: var(--surface-0); color: var(--text-primary); }
|
|
body {
|
|
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
|
|
.num { font-variant-numeric: tabular-nums; }
|
|
|
|
.micro {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
}
|
|
.section-heading {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--accent-amber);
|
|
}
|
|
|
|
/* Corner brackets — every major panel */
|
|
.bracket { position: relative; }
|
|
.bracket::before, .bracket::after,
|
|
.bracket > .br::before, .bracket > .br::after {
|
|
content: ''; position: absolute; width: 8px; height: 8px;
|
|
border-color: var(--accent-amber); border-style: solid; border-width: 0;
|
|
pointer-events: none;
|
|
}
|
|
.bracket::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
|
|
.bracket::after { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
|
|
.bracket > .br::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
|
|
.bracket > .br::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
|
|
|
|
.panel {
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Inputs */
|
|
.inp {
|
|
width: 100%;
|
|
background: var(--surface-input);
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
padding: 6px 10px;
|
|
height: 32px;
|
|
color: var(--text-primary);
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
font-size: 12px;
|
|
outline: none;
|
|
transition: border-color .12s, box-shadow .12s;
|
|
}
|
|
.inp:focus {
|
|
border-color: var(--accent-amber);
|
|
box-shadow: 0 0 0 1px var(--accent-amber);
|
|
}
|
|
.inp.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
|
.inp::placeholder { color: var(--text-muted); }
|
|
|
|
/* Path input with folder-icon prefix */
|
|
.path-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.path-wrap .icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
color: var(--text-muted);
|
|
display: flex; align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
.path-wrap .inp {
|
|
padding-left: 30px;
|
|
padding-right: 70px;
|
|
}
|
|
.path-wrap .browse {
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 4px;
|
|
height: 24px;
|
|
padding: 0 10px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: color .12s, border-color .12s, background .12s;
|
|
}
|
|
.path-wrap .browse:hover {
|
|
color: var(--accent-amber);
|
|
border-color: var(--accent-amber);
|
|
background: rgba(255,157,61,0.06);
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
padding: 7px 14px;
|
|
border-radius: 2px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: background .12s, color .12s, border-color .12s;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent-amber);
|
|
color: #0A0D10;
|
|
border-color: var(--accent-amber);
|
|
}
|
|
.btn-primary:hover { filter: brightness(1.05); }
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--accent-amber);
|
|
border-color: var(--accent-amber);
|
|
}
|
|
.btn-secondary:hover { background: rgba(255,157,61,0.12); }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-hair);
|
|
}
|
|
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-raised); }
|
|
.btn-danger-ghost {
|
|
background: transparent;
|
|
color: var(--accent-red);
|
|
border-color: rgba(255,71,86,0.5);
|
|
}
|
|
.btn-danger-ghost:hover { background: rgba(255,71,86,0.08); border-color: var(--accent-red); }
|
|
|
|
/* Chips for aircraft type */
|
|
.chip {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
border: 1px solid;
|
|
background: transparent;
|
|
}
|
|
.chip .dot { width: 6px; height: 6px; border-radius: 50%; }
|
|
.chip-blue { color: var(--accent-blue); border-color: rgba(78,158,255,0.45); }
|
|
.chip-blue .dot { background: var(--accent-blue); }
|
|
.chip-green { color: var(--accent-green); border-color: rgba(61,220,132,0.45); }
|
|
.chip-green .dot { background: var(--accent-green); }
|
|
|
|
/* Segmented language pills */
|
|
.seg {
|
|
display: inline-flex;
|
|
border: 1px solid var(--border-hair);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
background: var(--surface-input);
|
|
}
|
|
.seg button {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
padding: 7px 18px;
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
transition: background .12s, color .12s;
|
|
}
|
|
.seg button + button { border-left: 1px solid var(--border-hair); }
|
|
.seg button:hover { color: var(--text-primary); }
|
|
.seg button.active {
|
|
background: var(--accent-amber);
|
|
color: #0A0D10;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Stars for default aircraft */
|
|
.star {
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
padding: 4px;
|
|
transition: color .12s, transform .12s;
|
|
}
|
|
.star:hover { color: var(--accent-amber); }
|
|
.star.active { color: var(--accent-amber); }
|
|
|
|
/* Table */
|
|
table.ac { width: 100%; border-collapse: collapse; }
|
|
table.ac thead th {
|
|
text-align: left;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid var(--border-hair);
|
|
background: var(--surface-1);
|
|
}
|
|
table.ac tbody td {
|
|
padding: 0 14px;
|
|
height: 38px;
|
|
border-bottom: 1px solid var(--border-hair);
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
}
|
|
table.ac tbody tr:last-child td { border-bottom: 0; }
|
|
table.ac tbody tr:hover td { background: var(--surface-2); }
|
|
table.ac td.model { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
|
table.ac td.center { text-align: center; }
|
|
|
|
/* Header */
|
|
.topbar { height: 48px; border-bottom: 1px solid var(--border-hair); background: var(--surface-1); }
|
|
.logo {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 700;
|
|
color: var(--accent-amber);
|
|
letter-spacing: 0.20em;
|
|
font-size: 14px;
|
|
}
|
|
.flight-pill {
|
|
height: 28px;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--accent-amber);
|
|
background: var(--surface-1);
|
|
color: var(--text-primary);
|
|
border-radius: 2px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.10em;
|
|
}
|
|
.tab {
|
|
display: inline-flex; align-items: center;
|
|
height: 48px; padding: 0 14px;
|
|
font: 500 12px/1 'JetBrains Mono', monospace;
|
|
letter-spacing: 0.10em; text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
.tab:hover { color: var(--text-primary); }
|
|
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
|
|
|
|
/* Live dot for status */
|
|
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
|
|
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.85); } }
|
|
|
|
/* Icon buttons in header */
|
|
.ibtn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 28px; height: 28px;
|
|
border: 1px solid var(--border-hair); border-radius: 2px;
|
|
color: var(--text-secondary); background: transparent;
|
|
transition: color .12s, border-color .12s, background-color .12s;
|
|
cursor: pointer;
|
|
}
|
|
.ibtn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-1); }
|
|
.ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
|
|
.ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
|
|
|
|
.hairline { background: var(--border-hair); }
|
|
|
|
/* Sticky footer */
|
|
.footer-bar {
|
|
position: sticky;
|
|
bottom: 0;
|
|
background: linear-gradient(180deg, rgba(10,13,16,0) 0%, var(--surface-0) 50%);
|
|
padding-top: 16px;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: var(--surface-0); }
|
|
::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 0; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
|
|
|
|
/* Tiny readout label rows */
|
|
.field-label {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
}
|
|
.field-hint {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Unit suffix overlay for numeric inputs */
|
|
.num-wrap { position: relative; }
|
|
.num-wrap .suffix {
|
|
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
}
|
|
.num-wrap .inp { padding-right: 36px; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex flex-col">
|
|
|
|
<!-- ============ TOP BAR ============ -->
|
|
<header class="topbar flex items-center px-4 gap-3 shrink-0">
|
|
<div class="logo">AZAION</div>
|
|
|
|
<span class="micro" style="color: var(--text-muted);">//</span>
|
|
|
|
<button class="flight-pill">
|
|
<span class="live-dot"></span>
|
|
<span class="mono" style="color: var(--text-primary);">FL-03</span>
|
|
<span style="color: var(--text-secondary); font-size: 10px;">▾</span>
|
|
</button>
|
|
|
|
<nav class="flex items-center self-stretch ml-3">
|
|
<a href="flights.html" class="tab flex items-center">Flights</a>
|
|
<a href="annotations.html" class="tab flex items-center">Annotations</a>
|
|
<a href="dataset_explorer.html" class="tab flex items-center">Dataset</a>
|
|
<a href="admin.html" class="tab flex items-center">Admin</a>
|
|
</nav>
|
|
|
|
<div class="ml-auto flex items-center gap-2" style="font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase;">
|
|
<span class="live-dot"></span>
|
|
<span style="color: var(--accent-cyan);">LINK</span>
|
|
<span style="color: var(--border-raised);">|</span>
|
|
<span style="color: var(--text-secondary); text-transform: none; letter-spacing: 0;">user@azaion.com</span>
|
|
<span style="color: var(--border-raised); margin: 0 4px;">|</span>
|
|
<a href="settings.html" class="ibtn active" title="Settings">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
|
</a>
|
|
<a href="#" class="ibtn danger" title="Sign out">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============ MAIN GRID ============ -->
|
|
<main class="flex-1 pt-5 px-6 pb-6 flex flex-col gap-5 overflow-y-auto">
|
|
|
|
<!-- ROW 1: Tenant / Directories / Aircrafts -->
|
|
<section class="flex gap-5 items-start">
|
|
|
|
<!-- TENANT CONFIGURATION -->
|
|
<div class="w-[300px] shrink-0">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="section-heading">TENANT CONFIGURATION</span>
|
|
<span class="micro">01</span>
|
|
</div>
|
|
<div class="bracket panel p-4">
|
|
<div class="space-y-3">
|
|
|
|
<div>
|
|
<div class="field-label">
|
|
<label class="micro">Military Unit</label>
|
|
<span class="mono text-[9px] text-[var(--text-muted)]">REQ</span>
|
|
</div>
|
|
<input class="inp" type="text" value="72nd Mechanized Brigade">
|
|
</div>
|
|
|
|
<div>
|
|
<div class="field-label">
|
|
<label class="micro">Name</label>
|
|
</div>
|
|
<input class="inp" type="text" value="Alpha Company">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<div class="field-label">
|
|
<label class="micro">Cam Width</label>
|
|
<span class="mono text-[9px] text-[var(--text-muted)]">PX</span>
|
|
</div>
|
|
<div class="num-wrap">
|
|
<input class="inp mono num" type="text" value="1920">
|
|
<span class="suffix">px</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="field-label">
|
|
<label class="micro">Cam FoV</label>
|
|
<span class="mono text-[9px] text-[var(--text-muted)]">DEG</span>
|
|
</div>
|
|
<div class="num-wrap">
|
|
<input class="inp mono num" type="text" value="84.0">
|
|
<span class="suffix">°</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<span class="br"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIRECTORIES -->
|
|
<div class="w-[340px] shrink-0">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="section-heading">DIRECTORIES</span>
|
|
<span class="micro">02</span>
|
|
</div>
|
|
<div class="bracket panel p-4">
|
|
<div class="space-y-3">
|
|
|
|
<div>
|
|
<div class="field-label">
|
|
<label class="micro">Images Dir</label>
|
|
<span class="mono text-[9px] text-[var(--accent-green)]">MOUNTED</span>
|
|
</div>
|
|
<div class="path-wrap">
|
|
<span class="icon">
|
|
<!-- folder icon -->
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
|
|
</svg>
|
|
</span>
|
|
<input class="inp mono" type="text" value="/data/azaion/images">
|
|
<button class="browse" type="button">Browse</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="field-label">
|
|
<label class="micro">Labels Dir</label>
|
|
<span class="mono text-[9px] text-[var(--accent-green)]">MOUNTED</span>
|
|
</div>
|
|
<div class="path-wrap">
|
|
<span class="icon">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
|
|
</svg>
|
|
</span>
|
|
<input class="inp mono" type="text" value="/data/azaion/labels">
|
|
<button class="browse" type="button">Browse</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="field-label">
|
|
<label class="micro">Thumbnails Dir</label>
|
|
<span class="mono text-[9px] text-[var(--accent-amber)]">CACHE</span>
|
|
</div>
|
|
<div class="path-wrap">
|
|
<span class="icon">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
|
|
</svg>
|
|
</span>
|
|
<input class="inp mono" type="text" value="/var/cache/azaion/thumbs">
|
|
<button class="browse" type="button">Browse</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 pt-3 border-t border-[var(--border-hair)] flex items-center justify-between">
|
|
<span class="micro">Storage Free</span>
|
|
<span class="mono num text-[11px] text-[var(--text-primary)]">412.8 / 960.0 GB</span>
|
|
</div>
|
|
|
|
</div>
|
|
<span class="br"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AIRCRAFTS -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-3">
|
|
<span class="section-heading">AIRCRAFTS</span>
|
|
<span class="micro">03</span>
|
|
<span class="mono text-[10px] text-[var(--text-muted)]">· 4 REGISTERED</span>
|
|
</div>
|
|
<button class="btn btn-primary" type="button">
|
|
<span class="text-[14px] leading-none">+</span>
|
|
<span>Add Aircraft</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bracket panel overflow-hidden">
|
|
<table class="ac">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-[44%]">Model</th>
|
|
<th>Type</th>
|
|
<th class="text-center w-24">Default</th>
|
|
<th class="w-12"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="model">DJI Mavic 3 Enterprise</td>
|
|
<td><span class="chip chip-green"><span class="dot"></span>Copter</span></td>
|
|
<td class="center"><button class="star active" title="Default">★</button></td>
|
|
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="model">Matrice 300 RTK</td>
|
|
<td><span class="chip chip-green"><span class="dot"></span>Copter</span></td>
|
|
<td class="center"><button class="star" title="Set default">☆</button></td>
|
|
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="model">Fixed-Wing Scout Mk.II</td>
|
|
<td><span class="chip chip-blue"><span class="dot"></span>Plane</span></td>
|
|
<td class="center"><button class="star" title="Set default">☆</button></td>
|
|
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="model">Leleka-100</td>
|
|
<td><span class="chip chip-blue"><span class="dot"></span>Plane</span></td>
|
|
<td class="center"><button class="star" title="Set default">☆</button></td>
|
|
<td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<span class="br"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- ROW 2: Language + Session -->
|
|
<section class="flex gap-5 items-start">
|
|
|
|
<!-- LANGUAGE -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-3">
|
|
<span class="section-heading">LANGUAGE</span>
|
|
<span class="micro">04</span>
|
|
</div>
|
|
<span class="micro">Locale · <span class="text-[var(--text-primary)]">EN-US</span></span>
|
|
</div>
|
|
<div class="bracket panel p-4">
|
|
<div class="flex items-center gap-6 flex-wrap">
|
|
<div class="seg" role="tablist">
|
|
<button class="active" type="button">EN</button>
|
|
<button type="button">UA</button>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="micro">Affects all UI text</span>
|
|
<span class="mono text-[10px] text-[var(--text-muted)] mt-1">Detection class names also use the localized field from seed data.</span>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-2 mono text-[10px] text-[var(--text-muted)]">
|
|
<span class="live-dot" style="background:var(--accent-green)"></span>
|
|
<span>i18n BUNDLE <span class="text-[var(--text-secondary)] num">v2.4.1</span></span>
|
|
</div>
|
|
</div>
|
|
<span class="br"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SESSION -->
|
|
<div class="w-[380px] shrink-0">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-3">
|
|
<span class="section-heading">SESSION</span>
|
|
<span class="micro">05</span>
|
|
</div>
|
|
<span class="micro text-[var(--accent-cyan)]">ACTIVE</span>
|
|
</div>
|
|
<div class="bracket panel p-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="flex flex-col min-w-0">
|
|
<span class="micro">Last Login</span>
|
|
<span class="mono num text-[12px] text-[var(--text-primary)] mt-1">2026-05-16 · 08:42:11 UTC</span>
|
|
<span class="mono text-[10px] text-[var(--text-muted)] mt-0.5 truncate">SRC 10.42.13.7 · TOKEN …f3a9c1</span>
|
|
</div>
|
|
<button class="btn btn-danger-ghost shrink-0" type="button">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
<polyline points="16 17 21 12 16 7"/>
|
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
</svg>
|
|
Sign out everywhere
|
|
</button>
|
|
</div>
|
|
<span class="br"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- ============ STICKY FOOTER ============ -->
|
|
<div class="footer-bar mt-auto">
|
|
<div class="flex items-center gap-4 pt-4 border-t border-[var(--border-hair)]">
|
|
<div class="flex items-center gap-2 mono text-[10px] text-[var(--text-muted)] uppercase tracking-[0.14em]">
|
|
<span class="live-dot"></span>
|
|
<span>Unsaved changes detected in <span class="text-[var(--accent-amber)]">TENANT</span></span>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-3">
|
|
<button class="btn btn-ghost" type="button">Cancel</button>
|
|
<button class="btn btn-primary" type="button">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|