Onur Özkan committed
1 parent
43347c1172
commit
6e15063502
122 files changed
+7848
-9828
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
@@ -0,0 +1,360 @@
|
||||
/* Atlas Mission Control POC — all telemetry and operators are fictional. */
|
||||
const groups = [
|
||||
{ id: 'alpha', name: 'ALPHA', count: 12, task: 'Area Search', operator: 'Alex', progress: 82, health: 'nominal', color: 'cyan', icon: 'A', current: 'Search area north', next: 'Return', lease: 'Alex' },
|
||||
{ id: 'bravo', name: 'BRAVO', count: 10, task: 'Route Recon', operator: 'Sara', progress: 71, health: 'nominal', color: 'blue', icon: 'B', current: 'Coastal route', next: 'Survey pass', lease: 'Sara' },
|
||||
{ id: 'charlie', name: 'CHARLIE', count: 8, task: 'Relay', operator: 'David', progress: 64, health: 'nominal', color: 'violet', icon: 'C', current: 'Relay station', next: 'Hold', lease: 'David' },
|
||||
{ id: 'delta', name: 'DELTA', count: 12, task: 'Reserve', operator: 'Maria', progress: 35, health: 'attention', color: 'amber', icon: 'D', current: 'Ready reserve', next: 'Awaiting task', lease: 'Maria' },
|
||||
{ id: 'reserve', name: 'RESERVE', count: 8, task: 'Available', operator: 'Ken', progress: 100, health: 'nominal', color: 'violet', icon: 'R', current: 'Base service', next: 'Available', lease: 'Ken' }
|
||||
];
|
||||
|
||||
const operators = [
|
||||
{ id: 'alex', name: 'Alex', role: 'Commanding Alpha', color: 'cyan', activity: 'selected Alpha' },
|
||||
{ id: 'sara', name: 'Sara', role: 'Commanding Bravo', color: 'green', activity: 'updated Bravo search area' },
|
||||
{ id: 'david', name: 'David', role: 'Planning', color: 'amber', activity: 'drafted Task-144' },
|
||||
{ id: 'maria', name: 'Maria', role: 'Monitoring', color: 'violet', activity: 'added monitoring note' },
|
||||
{ id: 'ken', name: 'Ken', role: 'Engineering', color: 'yellow', activity: 'updated comms plan' }
|
||||
];
|
||||
|
||||
const alphaVehicles = [
|
||||
['UAV-01', 18, 32, 92], ['UAV-02', 25, 39, 86], ['UAV-03', 33, 28, 43],
|
||||
['UAV-04', 39, 44, 80], ['UAV-05', 45, 35, 74], ['UAV-06', 53, 45, 88],
|
||||
['UAV-07', 60, 30, 74], ['UAV-08', 66, 42, 83], ['UAV-09', 72, 35, 79],
|
||||
['UAV-10', 76, 51, 90], ['UAV-11', 55, 57, 82], ['UAV-12', 34, 57, 76]
|
||||
].map((item, index) => ({ id: item[0], x: item[1], y: item[2], energy: item[3], heading: 20 + index * 16, status: item[0] === 'UAV-03' ? 'critical' : 'nominal' }));
|
||||
|
||||
const availableVehicles = [
|
||||
['ALP-01', 18, 50, 92], ['ALP-02', 31, 47, 71], ['ALP-03', 17, 35, 82], ['ALP-04', 72, 42, 65],
|
||||
['ALP-05', 71, 55, 80], ['ALP-06', 64, 69, 74], ['ALP-07', 35, 18, 78], ['ALP-08', 38, 72, 61]
|
||||
].map(item => ({ id: item[0], x: item[1], y: item[2], energy: item[3], heading: 30, status: 'nominal' }));
|
||||
|
||||
const requestedView = new URLSearchParams(window.location.search).get('view');
|
||||
const validViews = ['overview', 'zoom', 'selection', 'collaboration', 'recovery', 'queue', 'system'];
|
||||
|
||||
let state = {
|
||||
view: validViews.includes(requestedView) ? requestedView : 'overview',
|
||||
selectedGroup: 'alpha',
|
||||
selectedVehicle: 'UAV-07',
|
||||
selectedCandidate: 'UAV-19',
|
||||
modal: null,
|
||||
toast: '',
|
||||
layersOpen: false,
|
||||
reassigned: false,
|
||||
queueDraft: false,
|
||||
queue: [
|
||||
{ title: 'Transit', detail: 'to Northern Sector', duration: '8 min', status: 'completed' },
|
||||
{ title: 'Search Area A', detail: 'coverage pattern', duration: '18 min', status: 'current' },
|
||||
{ title: 'Loiter', detail: '6 min', duration: '6 min', status: 'queued' },
|
||||
{ title: 'Return', detail: 'staging point', duration: '12 min', status: 'queued' },
|
||||
{ title: 'Recharge', detail: 'base service', duration: '35 min', status: 'queued' },
|
||||
{ title: 'Search Area B', detail: 'coverage pattern', duration: '20 min', status: 'queued' }
|
||||
]
|
||||
};
|
||||
|
||||
const icons = {
|
||||
menu: '<path d="M4 7h16M4 12h16M4 17h16"/>',
|
||||
map: '<path d="m4 6 5-2 6 2 5-2v14l-5 2-6-2-5 2V6Z"/><path d="M9 4v14m6-12v14"/>',
|
||||
layers: '<path d="m12 3 8 4.5-8 4.5-8-4.5L12 3Z"/><path d="m4 12 8 4.5 8-4.5M4 16.5l8 4.5 8-4.5"/>',
|
||||
plane: '<path d="m12 2 2.4 7.1 5.6 2.1v1.6l-6.2.5-1.1 7-1.5.1-1.2-7-6.2-.5v-1.6l5.6-2.1L12 2Z"/>',
|
||||
people: '<circle cx="9" cy="8" r="3"/><circle cx="16.5" cy="9" r="2.5"/><path d="M3.5 20c.5-3.5 2.4-5.3 5.5-5.3s5 1.8 5.5 5.3M14.2 15.2c3.1-.6 5.5 1.1 6.1 4.8"/>',
|
||||
task: '<rect x="5" y="4" width="14" height="17" rx="1"/><path d="M8 4.5h8v3H8zM8 12h8M8 16h5"/>',
|
||||
alert: '<path d="M12 3 21 20H3L12 3Z"/><path d="M12 9v5m0 3h.01"/>',
|
||||
shield: '<path d="M12 3 20 6v5c0 5-3.2 8.2-8 10-4.8-1.8-8-5-8-10V6l8-3Z"/><path d="m8.5 12 2.2 2.2 4.8-5"/>',
|
||||
chevron: '<path d="m8 10 4 4 4-4"/>',
|
||||
plus: '<path d="M12 5v14M5 12h14"/>',
|
||||
close: '<path d="m6 6 12 12M18 6 6 18"/>',
|
||||
target: '<circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3"/>',
|
||||
transfer: '<path d="M4 8h12l-3-3m3 3-3 3M20 16H8l3 3m-3-3 3-3"/>',
|
||||
hold: '<path d="M8 5v14M16 5v14"/>',
|
||||
move: '<path d="m4 11 16-7-7 16-2-7-7-2Z"/>',
|
||||
clock: '<circle cx="12" cy="12" r="8"/><path d="M12 7v5l3 2"/>',
|
||||
check: '<path d="m5 12 4.2 4.2L19 6.7"/>',
|
||||
search: '<circle cx="10.5" cy="10.5" r="5.5"/><path d="m15 15 5 5"/>',
|
||||
info: '<circle cx="12" cy="12" r="8"/><path d="M12 11v5m0-8h.01"/>',
|
||||
bolt: '<path d="m13 2-8 12h6l-1 8 8-12h-6l1-8Z"/>',
|
||||
route: '<path d="M5 18c3-8 6-12 14-12"/><circle cx="5" cy="18" r="2"/><path d="m16 4 3 2-3 2"/>',
|
||||
settings: '<circle cx="12" cy="12" r="3"/><path d="M19 12a7.2 7.2 0 0 0-.1-1.2l2-1.5-2-3.4-2.4 1a7 7 0 0 0-2-1.1L14.2 3h-4.1l-.4 2.8a7 7 0 0 0-2 1.1l-2.4-1-2 3.4 2 1.5a7.2 7.2 0 0 0 0 2.4l-2 1.5 2 3.4 2.4-1a7 7 0 0 0 2 1.1l.4 2.8h4.1l.4-2.8a7 7 0 0 0 2-1.1l2.4 1 2-3.4-2-1.5c.1-.4.1-.8.1-1.2Z"/>'
|
||||
};
|
||||
|
||||
function icon(name, extra = '') {
|
||||
return '<svg class="icon ' + extra + '" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' + (icons[name] || icons.info) + '</svg>';
|
||||
}
|
||||
|
||||
function groupById(id) {
|
||||
return groups.find(group => group.id === id) || groups[0];
|
||||
}
|
||||
|
||||
function statusTag(status, label) {
|
||||
const text = label || ({ nominal: 'Nominal', attention: 'Attention', critical: 'Critical', planned: 'Planned' }[status] || status);
|
||||
return '<span class="status ' + status + '"><span class="status-dot"></span>' + text + '</span>';
|
||||
}
|
||||
|
||||
function button(label, action, options = {}) {
|
||||
const cls = 'button ' + (options.kind || 'secondary') + (options.iconOnly ? ' icon-button' : '') + (options.className ? ' ' + options.className : '');
|
||||
const attrs = (options.disabled ? ' disabled' : '') + (options.label ? ' aria-label="' + options.label + '"' : '') + (options.value ? ' data-value="' + options.value + '"' : '');
|
||||
return '<button class="' + cls + '" data-action="' + action + '"' + attrs + '>' + (options.icon ? icon(options.icon) : '') + (options.iconOnly ? '' : '<span>' + label + '</span>') + '</button>';
|
||||
}
|
||||
|
||||
function navItem(id, label, iconName) {
|
||||
return '<button class="nav-item ' + (state.view === id ? 'is-active' : '') + '" data-action="set-view" data-value="' + id + '">' + icon(iconName) + '<span>' + label + '</span></button>';
|
||||
}
|
||||
|
||||
function topBar() {
|
||||
return '<header class="topbar">' +
|
||||
'<div class="brand">' + button('', 'toggle-menu', { icon: 'menu', iconOnly: true, label: 'Open navigation' }) +
|
||||
'<div class="brand-mark">A</div><span>ATLAS</span><span class="brand-divider"></span><span class="mission-name">Mission Alpha-17</span></div>' +
|
||||
'<nav class="view-nav" aria-label="POC screens">' +
|
||||
navItem('overview', 'Mission', 'map') + navItem('zoom', 'Zoom', 'target') + navItem('selection', 'Selection', 'search') +
|
||||
navItem('collaboration', 'Collaboration', 'people') + navItem('recovery', 'Recovery', 'alert') + navItem('queue', 'Intent queue', 'route') + navItem('system', 'System', 'settings') +
|
||||
'</nav>' +
|
||||
'<div class="top-metrics">' +
|
||||
'<div><small>Fleet</small><strong class="green">48 / 50 active</strong></div><div><small>Tasks</small><strong>7 active</strong></div><div><small>Alerts</small><strong class="amber">3</strong></div>' +
|
||||
'<div><small>Operators</small><strong class="green">5 online</strong></div><div class="hide-at-wide"><small>Network</small><strong class="green">Healthy</strong></div>' +
|
||||
'<div class="operator-avatar"><span>AX</span><div><strong>Alex</strong><small>Mission operator</small></div></div>' +
|
||||
'</div></header>';
|
||||
}
|
||||
|
||||
function mapBase() {
|
||||
return '<svg class="map-art" viewBox="0 0 1000 700" preserveAspectRatio="none" aria-hidden="true">' +
|
||||
'<defs><filter id="soft"><feGaussianBlur stdDeviation="9"/></filter><pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse"><path d="M0 0H64V64" fill="none" stroke="#6993b0" stroke-opacity=".11"/></pattern></defs>' +
|
||||
'<rect width="1000" height="700" fill="url(#grid)"/><path class="land" d="M0 0H352C397 63 392 126 447 179c48 47 30 105 87 162 35 35 30 116-11 151-47 40-126 53-169 109-42 55-8 102-54 99H0Z"/>' +
|
||||
'<path class="coast" d="M352 0c45 63 40 126 95 179 48 47 30 105 87 162 35 35 30 116-11 151-47 40-126 53-169 109-42 55-8 102-54 99"/><path class="river" d="M55 12c92 74 95 150 153 213 48 52 81 73 87 143 5 58-31 87-25 155 4 42 34 85 44 135"/>' +
|
||||
'<path class="road" d="M5 520C111 460 148 440 216 376s121-73 177-147c54-70 87-54 158-73 92-24 115-112 233-119"/><path class="road thin" d="M92 52c24 85 85 117 148 161 49 34 45 85 96 121M64 612c84-14 136-81 223-84 97-3 117-68 194-75"/>' +
|
||||
'<path class="hill" d="M62 104c56-48 121-47 164-16m-143 55c59-49 115-37 156-14M49 587c63-42 116-33 159-7"/><path class="hill" d="M120 245c34-26 71-31 108-20m-67 76c41-34 93-25 131-1"/>' +
|
||||
'<g class="town"><circle cx="208" cy="381" r="20"/><circle cx="208" cy="381" r="7"/><circle cx="114" cy="526" r="13"/><circle cx="114" cy="526" r="4"/></g>' +
|
||||
'</svg>' +
|
||||
'<span class="map-label north-point" style="left:14%;top:20%">North Point</span><span class="map-label cliffside" style="left:58%;top:26%">Cliffside</span><span class="map-label seabridge" style="left:42%;top:68%">Seabridge</span><span class="map-label west-cove" style="left:16%;top:74%">West Cove</span>' +
|
||||
'<div class="scale"><i></i><span>2 km</span></div>';
|
||||
}
|
||||
|
||||
function mapControls() {
|
||||
return '<div class="map-controls">' + button('', 'toggle-layers', { icon: 'layers', iconOnly: true, label: 'Toggle map layers' }) + button('', 'map-zoom-in', { icon: 'plus', iconOnly: true, label: 'Zoom map in' }) + button('−', 'map-zoom-out', { iconOnly: true, label: 'Zoom map out' }) + '</div>' +
|
||||
(state.layersOpen ? '<div class="layers-popover"><strong>Map layers</strong><label><input type="checkbox" checked> Search areas</label><label><input type="checkbox" checked> Planned routes</label><label><input type="checkbox" checked> Constraints</label><label><input type="checkbox"> Map labels</label></div>' : '');
|
||||
}
|
||||
|
||||
function taskArea(label = 'ALPHA\nSEARCH AREA', classes = '') {
|
||||
return '<div class="task-area ' + classes + '"><div class="task-shape"></div><span>' + label.replace('\n', '<br>') + '</span></div>';
|
||||
}
|
||||
|
||||
function groupMarker(group, x, y, active = false) {
|
||||
return '<button class="group-marker ' + group.color + (active ? ' is-selected' : '') + '" style="left:' + x + '%;top:' + y + '%" data-action="select-group" data-value="' + group.id + '">' +
|
||||
'<span class="marker-dot"><b>' + group.icon + '</b></span><span class="marker-card"><strong>' + group.name + '</strong><small>' + group.count + ' UAV · ' + group.task + ' · ' + group.progress + '%</small></span></button>';
|
||||
}
|
||||
|
||||
function vehicleMarker(vehicle, selected = false, label = false) {
|
||||
const critical = vehicle.status === 'critical';
|
||||
return '<button class="vehicle-marker ' + (critical ? 'critical' : '') + (selected ? ' selected' : '') + '" style="left:' + vehicle.x + '%;top:' + vehicle.y + '%;--heading:' + vehicle.heading + 'deg" data-action="select-vehicle" data-value="' + vehicle.id + '" aria-label="' + vehicle.id + ', ' + vehicle.energy + '% energy">' +
|
||||
icon('plane') + (label ? '<span>' + vehicle.id + '</span>' : '') + '</button>';
|
||||
}
|
||||
|
||||
function routeLine(className = '') {
|
||||
return '<svg class="route-line ' + className + '" viewBox="0 0 1000 700" preserveAspectRatio="none" aria-hidden="true"><path d="M180 535C195 463 238 445 282 384S367 280 433 256c76-27 100-91 179-102 82-11 124-55 217-37" fill="none"/><path class="planned-path" d="M610 142c86 55 127 80 166 168 27 59 72 67 151 104" fill="none"/></svg>';
|
||||
}
|
||||
|
||||
function overviewMap() {
|
||||
const g = groupById(state.selectedGroup);
|
||||
return '<div class="map-canvas overview-map">' + mapBase() + mapControls() + routeLine() + taskArea(g.name + '\nAREA ' + (g.task === 'Area Search' ? 'SEARCH' : g.task.toUpperCase()), 'alpha-area') +
|
||||
'<div class="coverage-ring"></div>' +
|
||||
alphaVehicles.map(vehicle => vehicleMarker(vehicle, false, vehicle.id === 'UAV-03')).join('') +
|
||||
groupMarker(groups[1], 65, 27) + groupMarker(groups[2], 69, 50) + groupMarker(groups[3], 73, 68) + groupMarker(groups[4], 57, 82) +
|
||||
'<div class="geofence red-zone"></div>' +
|
||||
'<div class="map-mini-exceptions"><strong>Exceptions (3)</strong><p>' + icon('alert') + ' UAV-27 · Navigation degraded</p><p>' + icon('info') + ' Alpha task behind schedule</p><a href="#" data-action="set-view" data-value="recovery">Review recovery</a></div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
function groupRail(compact = false) {
|
||||
return '<aside class="group-rail ' + (compact ? 'compact' : '') + '"><div class="rail-heading"><span>Groups</span>' + button('', 'new-group', { icon: 'plus', iconOnly: true, label: 'Create a new group' }) + '</div>' +
|
||||
'<div class="group-list">' + groups.map(group => {
|
||||
const selected = state.selectedGroup === group.id;
|
||||
return '<button class="group-card ' + (selected ? 'selected' : '') + '" data-action="select-group" data-value="' + group.id + '">' +
|
||||
'<span class="group-badge ' + group.color + '">' + group.icon + '</span><span class="group-card-main"><strong>' + group.name + '</strong><small>' + group.count + ' UAV</small><small>' + group.task + '</small><span class="operator-line">' + group.operator + '</span></span>' +
|
||||
'<span class="group-card-side">' + statusTag(group.health, '') + '<b>' + group.progress + '%</b><i class="mini-grid">' + Array(9).fill('<em></em>').join('') + '</i></span></button>';
|
||||
}).join('') + '</div>' + button('New group', 'new-group', { icon: 'plus', className: 'full-width' }) + '</aside>';
|
||||
}
|
||||
|
||||
function attentionRail() {
|
||||
return '<aside class="attention-rail"><div class="rail-heading"><span>Attention</span>' + button('', 'view-alerts', { icon: 'alert', iconOnly: true, label: 'View all alerts' }) + '</div>' +
|
||||
'<button class="attention-card warning" data-action="set-view" data-value="recovery">' + icon('alert') + '<span><strong>UAV-27</strong><small>Navigation degraded</small><small>Since 01:32:11</small></span><em>ALPHA</em></button>' +
|
||||
'<button class="attention-card amber" data-action="set-view" data-value="recovery">' + icon('clock') + '<span><strong>Alpha task behind schedule</strong><small>ETA impact +00:08:45</small></span><em>ALPHA</em></button>' +
|
||||
'<button class="attention-card amber" data-action="set-view" data-value="selection">' + icon('alert') + '<span><strong>Bravo approaching constraint</strong><small>R-210B coastal limit</small></span><em>BRAVO</em></button>' +
|
||||
'<div class="fleet-nominal">' + icon('check') + '<div><b>47</b><span>vehicles nominal</span><small>No action required</small></div></div>' +
|
||||
'</aside>';
|
||||
}
|
||||
|
||||
function contextBar() {
|
||||
const group = groupById(state.selectedGroup);
|
||||
return '<section class="context-bar"><div class="context-summary"><span class="group-badge ' + group.color + '">' + group.icon + '</span><div><h2>' + group.name + '</h2><small>' + group.count + ' vehicles</small></div><dl><div><dt>Task</dt><dd>' + group.task + '</dd></div><div><dt>Progress</dt><dd>' + group.progress + '% complete <i class="progress"><b style="width:' + group.progress + '%"></b></i></dd></div><div><dt>Operator</dt><dd>' + group.operator + '</dd></div><div><dt>Status</dt><dd>' + statusTag(group.health) + '</dd></div><div class="wide-only"><dt>Current</dt><dd>' + group.current + '</dd></div><div class="wide-only"><dt>Next</dt><dd>' + group.next + '</dd></div></dl></div>' +
|
||||
'<div class="context-actions">' + button('Task', 'open-preview', { icon: 'task' }) + button('Move', 'move-group', { icon: 'move' }) + button('Hold', 'hold-group', { icon: 'hold' }) + button('Group', 'group-vehicles', { icon: 'people' }) + button('Split', 'split-group', { icon: 'route' }) + button('Transfer', 'open-transfer', { icon: 'transfer' }) + button('Details', 'open-vehicle-detail', { icon: 'info' }) + '</div></section>';
|
||||
}
|
||||
|
||||
function overviewView() {
|
||||
return '<main class="workspace overview-workspace">' + groupRail() + '<section class="map-stage">' + overviewMap() + '</section>' + attentionRail() + contextBar() + '</main>';
|
||||
}
|
||||
|
||||
function zoomSmallMap(kind) {
|
||||
if (kind === 'strategic') {
|
||||
return '<div class="zoom-map strategic">' + mapBase() + taskArea('TASK 143', 'small-task violet') + groupMarker(groups[0], 35, 33, true) + groupMarker(groups[1], 20, 57) + groupMarker(groups[2], 38, 75) + groupMarker(groups[3], 68, 61) + '<div class="zoom-fleet">' + groups.map(g => '<span><b>' + g.name + '</b><i style="width:' + g.progress + '%"></i></span>').join('') + '</div></div>';
|
||||
}
|
||||
if (kind === 'operational') {
|
||||
return '<div class="zoom-map operational">' + mapBase() + taskArea('AREA SEARCH\n82%', 'wide alpha-area') + routeLine() + alphaVehicles.map(v => vehicleMarker(v)).join('') + '<div class="map-kpi"><small>Area search</small><b>82%</b><span class="ring"></span><em>Alex</em></div></div>';
|
||||
}
|
||||
return '<div class="zoom-map vehicle">' + mapBase() + taskArea('', 'wide alpha-area muted') + routeLine() + alphaVehicles.map(v => vehicleMarker(v, v.id === 'UAV-07')).join('') + '<aside class="vehicle-inspector"><div><strong>UAV-07</strong>' + button('', 'close-inspector', { icon: 'close', iconOnly: true, label: 'Close vehicle inspector' }) + '</div><small>ALPHA GROUP</small><dl><div><dt>Position</dt><dd>34.72245° N<br>18.28512° W</dd></div><div><dt>Heading</dt><dd>128°</dd></div><div><dt>Energy</dt><dd class="green">74%</dd></div><div><dt>Navigation</dt><dd class="green">Nominal</dd></div><div><dt>Communication</dt><dd class="green">Good</dd></div><div><dt>Payload</dt><dd>Imaging</dd></div></dl><hr><p><b>Current task</b>Search Area North</p><p><b>Next action</b>Sweep 4</p></aside></div>';
|
||||
}
|
||||
|
||||
function zoomFooter(kind) {
|
||||
const content = kind === 'strategic' ? '<h3>Groups and task intent</h3><p>High-level view of mission groups and task areas.</p>' : kind === 'operational' ? '<h3>Group composition and coverage</h3><p>Coordinated group view with coverage progress.</p>' : '<h3>Vehicle details on request</h3><p>Progressive disclosure for a selected vehicle.</p>';
|
||||
return '<footer class="zoom-footer">' + content + '</footer>';
|
||||
}
|
||||
|
||||
function zoomView() {
|
||||
return '<main class="zoom-view"><header class="view-intro"><div><h1>Semantic zoom <span>— shared multi-UAV mission planner</span></h1><p>Seamless transition from strategic intent to operational control to individual vehicle detail.</p></div><div class="legend">' + statusTag('blue', 'Active') + statusTag('cyan', 'Selected') + statusTag('nominal', 'Nominal') + statusTag('attention', 'Attention') + statusTag('planned', 'Planned') + '</div></header><section class="zoom-grid">' +
|
||||
'<article class="zoom-panel"><header><span class="letter">A</span><h2>Strategic</h2>' + button('', 'zoom-strategic', { icon: 'target', iconOnly: true, label: 'View strategic detail' }) + '</header>' + zoomSmallMap('strategic') + zoomFooter('strategic') + '</article>' +
|
||||
'<article class="zoom-panel"><header><span class="letter">B</span><h2>Operational — Alpha</h2>' + button('', 'zoom-operational', { icon: 'target', iconOnly: true, label: 'View operational detail' }) + '</header>' + zoomSmallMap('operational') + zoomFooter('operational') + '</article>' +
|
||||
'<article class="zoom-panel"><header><span class="letter">C</span><h2>Vehicle — UAV-07</h2>' + button('', 'zoom-vehicle', { icon: 'target', iconOnly: true, label: 'View vehicle detail' }) + '</header>' + zoomSmallMap('vehicle') + zoomFooter('vehicle') + '</article>' +
|
||||
'</section></main>';
|
||||
}
|
||||
|
||||
function filterChip(label, value) {
|
||||
return '<div class="filter-chip"><span>' + label + '</span><b>' + value + '</b><button data-action="remove-filter" aria-label="Remove ' + label + ' filter">' + icon('close') + '</button></div>';
|
||||
}
|
||||
|
||||
function selectionMap() {
|
||||
return '<div class="map-canvas selection-map">' + mapBase() + '<div class="selection-task violet">' + taskArea('TASK-143\nAREA SEARCH', 'violet') + '<span class="task-pin"></span></div>' + routeLine('selection-routes') + availableVehicles.map(v => vehicleMarker(v, true, true)).join('') + '<div class="floating-task-card"><h3>TASK-143 <span>Area search</span></h3><dl><div><dt>Priority</dt><dd class="amber">High</dd></div><div><dt>Assigned</dt><dd class="blue">Alpha / 4</dd></div><div><dt>Area</dt><dd>Northern sector</dd></div><div><dt>Progress</dt><dd>63% <i class="progress"><b style="width:63%"></b></i></dd></div><div><dt>Required</dt><dd>4 UAV</dd></div><div><dt>Health</dt><dd class="green">Green</dd></div></dl><footer>' + icon('clock') + ' Estimated completion <b>18 min</b></footer></div>' + mapControls() + '</div>';
|
||||
}
|
||||
|
||||
function smartSelectionView() {
|
||||
return '<main class="selection-workspace"><aside class="smart-panel"><header><h1>Smart selection</h1>' + button('', 'show-filter-help', { icon: 'info', iconOnly: true, label: 'Selection help' }) + '</header><label class="form-label">Natural language query</label><div class="natural-query">' + icon('search') + '<p>Available ISR aircraft within 20 km of Task Bravo with more than 60% energy.</p></div><div class="filter-heading"><label class="form-label">Structured filters</label><button data-action="clear-filters">Clear all</button></div><div class="filter-stack">' + filterChip('Type', 'ISR') + filterChip('Availability', 'Available') + filterChip('Distance', '< 20 km') + filterChip('Energy', '> 60%') + filterChip('Task', 'None') + '</div><div class="selection-result"><small>Results</small><strong>8 <span>vehicles selected</span></strong><p>Filter distribution</p><dl><div><dt>Type (ISR)</dt><dd><i style="width:72%"></i>32</dd></div><div><dt>Availability</dt><dd><i style="width:42%"></i>12</dd></div><div><dt>Distance</dt><dd><i style="width:32%"></i>9</dd></div><div><dt>Energy</dt><dd><i style="width:28%"></i>8</dd></div></dl></div>' + button('Assign task', 'open-preview', { icon: 'task', kind: 'primary', className: 'full-width' }) + '<small class="updated">Last updated: 14:32:10 UTC</small></aside><section class="selection-map-stage">' + selectionMap() + '</section>' + assignPanel() + '</main>';
|
||||
}
|
||||
|
||||
function validationRow(label, value, stateName = 'ok') {
|
||||
return '<div class="validation-row">' + icon(stateName === 'warning' ? 'alert' : stateName === 'info' ? 'info' : 'check') + '<span>' + label + '</span><b class="' + (stateName === 'warning' ? 'amber' : '') + '">' + value + '</b>' + (stateName === 'ok' ? '<i class="round-check">' + icon('check') + '</i>' : '') + '</div>';
|
||||
}
|
||||
|
||||
function assignPanel() {
|
||||
return '<aside class="assign-panel"><header><div><h1>Assign task</h1><p>6 vehicles selected</p></div>' + button('', 'close-assign', { icon: 'close', iconOnly: true, label: 'Close assignment panel' }) + '</header><dl class="task-meta"><div><dt>Task</dt><dd class="violet">TASK-143 / AREA SEARCH</dd></div><div><dt>Area</dt><dd class="violet">Northern sector</dd></div></dl><h2>Validation summary</h2><div class="validation-list">' + validationRow('Estimated completion', '18 min') + validationRow('Energy reserve', 'All above minimum') + validationRow('Route conflicts', 'None detected') + validationRow('Constraint conflicts', 'None detected') + validationRow('Vehicle compatibility', '6 / 6 compatible') + validationRow('Communication link', 'All links good') + validationRow('Assignment considerations', '1 aircraft may require reassignment.', 'warning') + '</div><div class="info-callout">' + icon('info') + '<p>Review the preview to confirm routing, timing, and resource allocation before assigning.</p></div><footer>' + button('Cancel', 'cancel-modal') + button('Preview', 'open-preview', { kind: 'secondary' }) + button('Confirm', 'confirm-assignment', { icon: 'check', kind: 'primary' }) + '</footer></aside>';
|
||||
}
|
||||
|
||||
function collabMap() {
|
||||
return '<div class="map-canvas collaboration-map">' + mapBase() + '<div class="collab-alpha-boundary">' + taskArea('ALPHA\n3 UAV · 1 USV', 'alpha-area') + alphaVehicles.slice(0, 3).map(v => vehicleMarker(v)).join('') + '</div>' +
|
||||
groupMarker(groups[1], 32, 23) + groupMarker(groups[2], 73, 23) + groupMarker(groups[3], 73, 53) + groupMarker(groups[4], 60, 75) +
|
||||
operators.map((op, i) => '<span class="operator-cursor ' + op.color + '" style="left:' + [20, 36, 74, 38, 62][i] + '%;top:' + [69, 25, 20, 80, 80][i] + '%"><i>◢</i><b>' + op.name + '</b></span>').join('') +
|
||||
'<article class="lease-card"><small>Command authority</small><h2>Alex</h2><p>lease expires <b>02:34</b></p><hr><small>Observers</small><p>' + statusTag('nominal', 'Sara') + statusTag('amber', 'David') + '</p></article>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
function collaborationView() {
|
||||
return '<main class="collaboration-workspace">' + groupRail(true) + '<section class="collab-map-stage">' + collabMap() + '</section><aside class="presence-panel"><header><h1>Mission presence</h1></header><div class="presence-list">' + operators.map(op => '<button class="presence-row" data-action="operator-detail" data-value="' + op.id + '"><i class="presence-dot ' + op.color + '"></i><span><strong>' + op.name + '</strong><small>' + op.role + '</small></span><b>⌄</b></button>').join('') + '</div><header class="subheading"><h2>Collaboration stream</h2><button data-action="view-history">View all</button></header><div class="collab-stream">' + operators.slice().reverse().map((op, i) => '<p><i class="presence-dot ' + op.color + '"></i><span>' + op.activity + '</span><small>' + (i * 2 + 2) + 'm ago</small></p>').join('') + '</div></aside><footer class="mission-events"><strong>Mission events</strong><div><span><i class="presence-dot cyan"></i>14:30:41Z Alex selected Alpha</span><span><i class="presence-dot amber"></i>14:28:15Z David drafted Task-144</span><span><i class="presence-dot green"></i>14:26:32Z Sara updated Bravo search area</span><span><i class="presence-dot violet"></i>14:24:10Z Maria added monitoring note</span></div><p>Shared awareness · authority changes are explicit and auditable.</p></footer></main>';
|
||||
}
|
||||
|
||||
function recoveryMap() {
|
||||
return '<div class="map-canvas recovery-map">' + mapBase() + taskArea('ALPHA\nSEARCH AREA', 'alpha-area') + routeLine() + alphaVehicles.slice(0, 4).map(v => vehicleMarker(v, false, true)).join('') + '<button class="failed-marker" style="left:71%;top:45%" data-action="show-failure"><span>!</span><b>UAV-03</b><small>Unavailable</small></button><article class="recovery-task-map-card">' + icon('people') + '<div><h2>Alpha Search</h2><p>Search and locate pattern</p></div><b class="amber">' + (state.reassigned ? '4 / 4' : '3 / 4') + '<small>assigned</small></b></article></div>';
|
||||
}
|
||||
|
||||
function candidateCard(id, energy, distance, compatibility, selected) {
|
||||
return '<button class="candidate-card ' + (selected ? 'selected' : '') + '" data-action="select-candidate" data-value="' + id + '"><header>' + icon('people') + '<span><strong>' + id + '</strong>' + statusTag('nominal', 'Ready') + '</span>' + (selected ? '<i class="round-check">' + icon('check') + '</i>' : '') + '</header><dl><div><dt>Energy</dt><dd>' + energy + '% ' + statusTag('nominal', '') + '</dd></div><div><dt>Distance to task</dt><dd>' + distance + ' km</dd></div><div><dt>Task compatibility</dt><dd class="' + (compatibility === 'Medium' ? 'amber' : 'green') + '">' + compatibility + '</dd></div><div><dt>Communication</dt><dd class="green">Strong</dd></div></dl>' + (selected ? '<footer>Recommended</footer>' : '') + '</button>';
|
||||
}
|
||||
|
||||
function recoveryView() {
|
||||
const active = state.selectedCandidate;
|
||||
return '<main class="recovery-workspace"><aside class="recovery-left"><header><h1>Attention</h1></header><article class="recovery-alert critical">' + icon('alert') + '<div><h2>UAV-03</h2><p>Navigation unavailable</p><small>Since 14:33:02</small><b>High priority</b></div></article><article class="recovery-alert amber">' + icon('alert') + '<div><h2>Alpha search coverage below required</h2><p>Coverage gap detected</p><b>Requires attention</b></div></article><div class="fleet-summary"><h2>Fleet summary</h2><strong>47</strong><p>vehicles nominal</p><small>All other vehicles operating normally.</small>' + button('View fleet status', 'view-fleet', { icon: 'task' }) + '</div></aside><section class="recovery-map-stage">' + recoveryMap() + '</section><aside class="recovery-right"><header><h1>' + icon('shield') + ' Keep TASK-143 on plan</h1></header><section class="current-state"><h2>Current state</h2><dl><div><dt>Task</dt><dd>Alpha Search</dd></div><div><dt>Required</dt><dd>4 vehicles</dd></div><div><dt>Current</dt><dd class="amber">' + (state.reassigned ? '4 / 4' : '3 / 4') + '<small>assigned</small></dd></div><div><dt>Completion impact</dt><dd class="amber">' + (state.reassigned ? 'None' : '+11 minutes') + '</dd></div></dl></section><section class="recommendations"><h2>Recommended replacements</h2><p>' + icon('info') + ' Select a vehicle to review. This is a system recommendation for operator approval.</p><div class="candidate-grid">' + candidateCard('UAV-19', 78, 6.2, 'High', active === 'UAV-19') + candidateCard('UAV-27', 64, 9.8, 'High', active === 'UAV-27') + candidateCard('UAV-31', 82, 12.4, 'Medium', active === 'UAV-31') + '</div><p class="recommendation-note">' + icon('info') + ' Recommended because it can join before coverage gap exceeds threshold.</p></section><section class="local-preview"><h2>Local preview of reassignment</h2><div><span>' + icon('plane') + ' ' + active + '</span><i></i><b>ALPHA SEARCH AREA</b></div></section><footer>' + button('Cancel', 'cancel-modal') + button('Compare candidates', 'compare-candidates') + button(state.reassigned ? 'Recommendation accepted' : 'Accept recommendation', 'accept-replacement', { icon: 'shield', kind: 'primary', disabled: state.reassigned }) + '</footer></aside><footer class="recovery-events"><span>' + icon('alert') + ' <b>14:33:02</b> system detected UAV-03 unavailable</span><span>' + icon('shield') + ' <b>14:33:04</b> system evaluated replacement options</span><span>' + icon('info') + ' <b>14:33:17</b> operator reviewing recommendation</span></footer></main>';
|
||||
}
|
||||
|
||||
function queueMap() {
|
||||
return '<div class="queue-map">' + mapBase() + routeLine() + '<div class="base-service">⌾<span>Base<br>Service</span></div>' + taskArea('Search Area A', 'queue-search') + taskArea('Search Area B', 'queue-search future') + '<div class="queue-group-label"><span class="group-badge blue">A</span><strong>ALPHA</strong><small>12</small></div><article class="queue-group-card"><span class="group-badge blue">A</span><h2>Alpha</h2><p>' + icon('people') + '12 vehicles</p><p>' + icon('search') + 'Search</p><p>' + icon('people') + 'Operator Alex</p>' + statusTag('nominal') + '</article></div>';
|
||||
}
|
||||
|
||||
function queueStep(step, index) {
|
||||
return '<article class="queue-step ' + step.status + '"><button class="drag-handle" aria-label="Drag to reorder">⠿</button><span class="step-number">' + (index + 1) + '</span><div><h2>' + step.title + '</h2><p>' + step.detail + '</p>' + (step.status === 'current' ? '<i class="progress"><b style="width:82%"></b></i><small>82% complete</small>' : '') + '</div><aside><b>Alex</b><small>' + step.duration + '</small>' + statusTag(step.status === 'completed' ? 'nominal' : step.status === 'current' ? 'blue' : 'planned', step.status) + '</aside><div class="step-arrows">' + button('', 'queue-up', { icon: 'chevron', iconOnly: true, label: 'Move step up', value: index }) + button('', 'queue-down', { icon: 'chevron', iconOnly: true, label: 'Move step down', value: index }) + '</div></article>';
|
||||
}
|
||||
|
||||
function queueView() {
|
||||
const current = state.queue[1];
|
||||
return '<main class="queue-workspace"><header class="queue-topline"><div><span>Mission</span><b>Coastal Survey</b></div><div><span>Time (local)</span><b>14:35:22</b></div><div><span>Weather</span><b>Overcast 18°C</b></div><div><span>Wind</span><b>12 kt NNE</b></div><div><span>Global status</span>' + statusTag('nominal') + '</div><div><span>Sync</span><b>3s ago</b></div></header><section class="queue-body"><section class="queue-map-stage">' + queueMap() + '</section><section class="queue-panel"><header><h1><span>Alpha</span> · Intent queue</h1><div>' + statusTag('planned', 'Draft changes') + button('', 'queue-menu', { icon: 'settings', iconOnly: true, label: 'Queue options' }) + '</div></header><div class="queue-content"><div class="step-list">' + state.queue.map(queueStep).join('') + '<div class="drop-zone">⠿ Drop step here to reorder</div></div><aside class="step-inspector"><header><b>Step 2 of 6</b>' + button('', 'close-inspector', { icon: 'close', iconOnly: true, label: 'Close step inspector' }) + '</header><h2>Goal</h2><p>Search Area A with coverage pattern to identify objects of interest.</p><h2>Owner</h2><p>' + icon('people') + ' Alex</p><h2>Resources</h2><p>' + icon('people') + ' 12 vehicles</p><h2>Est. duration</h2><p>' + icon('clock') + ' 18 min</p><h2>Expected finish</h2><p>⚑ 14:53 (local)</p><h2>Linked task</h2><p>⛓ TASK-143</p><h2>Local plan status</h2>' + statusTag('nominal', 'Plan valid') + '</aside></div><footer class="queue-actions">' + button('Add step', 'add-step', { icon: 'plus' }) + button('Reorder', 'reorder-queue', { icon: 'transfer' }) + button('Simulate timeline', 'simulate-queue', { icon: 'clock' }) + button('Review changes', 'review-queue', { kind: 'primary' }) + '</footer></section></section><footer class="queue-events"><strong>Activity timeline</strong><span><i class="presence-dot blue"></i>14:32 <b>Alex</b> reordered Return after Search Area A</span><span><i class="presence-dot blue"></i>14:33 <b>System</b> recomputed completion estimate</span></footer></main>';
|
||||
}
|
||||
|
||||
function systemView() {
|
||||
const color = (name, code, cls) => '<div class="swatch"><i class="' + cls + '"></i><b>' + name + '</b><small>' + code + '</small></div>';
|
||||
return '<main class="system-view"><header class="system-title"><h1>Design system</h1><p>Multi-UAV Mission Control <span>· Screen 7</span></p></header><section class="system-grid"><article class="system-card colors"><h2>1. Color and status</h2><p>Surface (Graphite / Navy)</p><div class="swatches">' + color('Surface 0', '#0B0F14', 's0') + color('Surface 1', '#111724', 's1') + color('Surface 2', '#171D2B', 's2') + color('Surface 3', '#1D2536', 's3') + color('Border', '#2A3447', 'border') + '</div><p>Semantic status (meaning over decoration)</p><div class="swatches semantic">' + color('Blue', 'Active / Primary', 'blue') + color('Cyan', 'Selected', 'cyan') + color('Green', 'Nominal', 'green') + color('Amber', 'Attention', 'amber') + color('Red', 'Critical', 'red') + color('Violet', 'Planned', 'violet') + '</div><ul><li>Color communicates state and priority, not category.</li><li>Do not rely on color alone—use icon, text, and shape.</li><li>Maintain WCAG AA contrast for all text.</li></ul></article><article class="system-card type"><h2>2. Typography</h2><h1>H1 <b>Mission / Group Heading</b></h1><h2>H2 <b>Task Heading</b></h2><p>Body / UI Text <b>Readable action and mission information</b></p><small>Metadata / Secondary</small><pre>UAV-3F7A2C 08:43:21Z ALT 3250 ft</pre></article><article class="system-card components"><h2>3. Components</h2><div class="component-columns"><section><p>Buttons (44px height)</p>' + button('Create group', 'new-group', { icon: 'plus', kind: 'primary' }) + button('Assign task', 'open-preview', { icon: 'task' }) + button('Remove', 'remove', { icon: 'close', kind: 'danger' }) + '</section><section><p>Status chips</p><div class="chip-wrap">' + statusTag('nominal') + statusTag('attention') + statusTag('critical') + statusTag('cyan', 'Selected') + statusTag('planned') + '</div></section><section><p>Authority</p><div class="authority-demo">' + icon('shield') + '<span>Authority<br><b>Operator</b></span></div><div class="authority-demo muted">▣ Read-only observer</div></section></div><div class="mini-components"><article class="mini-task"><b>ISR Sweep North</b>' + statusTag('nominal') + '<p>Type ISR</p><p>Area Sector 12</p><p>Assets 14 UAV</p></article><article class="mini-group"><span class="group-badge cyan">27</span><b>Group Alpha</b>' + statusTag('cyan', 'Selected') + '<p>Members 27 UAVs</p><p>Lead UAV-3F7A2C</p></article><article class="mini-alert">' + icon('alert') + '<span>' + statusTag('critical') + '<b>Link degraded on UAV-7B1C</b></span></article></div></article><article class="system-card interactions"><h2>4. Interaction states</h2><div class="multi-select-demo"><div class="select-map">' + alphaVehicles.slice(0, 9).map(v => vehicleMarker(v, v.id !== 'UAV-03')).join('') + '<i></i></div><div class="multi-summary">' + icon('check') + '<strong>27 vehicles selected</strong><span>ISR <b>14</b></span><span>Relay <b>7</b></span><span>Transport <b>6</b></span>' + button('Create group', 'new-group', { icon: 'plus', kind: 'primary' }) + button('Assign task', 'open-preview') + button('Add to group', 'group-vehicles') + '</div></div></article><article class="system-card state-cards"><h2>Selection state cards</h2><div class="selection-state-card selected"><span class="group-badge cyan">27</span><b>Group Alpha</b>' + statusTag('cyan', 'Selected') + '<small>Members · 27 UAVs</small></div><div class="selection-state-card"><span class="group-badge green">◈</span><b>ISR Sweep North</b>' + statusTag('nominal') + '<small>Start · 09:00Z · Assets 14 UAVs</small></div><div class="selection-state-card"><span class="group-badge blue">✈</span><b>UAV-3F7A2C</b>' + statusTag('cyan', 'Selected') + '<small>Type · ISR · Alt 3,250 ft</small></div><div class="selection-state-card muted"><span class="group-badge">□</span><b>No selection</b><small>Use selection tools to choose vehicles or groups.</small></div></article><article class="system-card responsive"><h2>5. Responsive composition</h2><p>Map-first layouts adapt by collapsing / expanding secondary panels.</p><div class="responsive-samples"><div><b>Laptop</b><i class="laptop"></i></div><div><b>27-inch</b><i class="monitor"></i></div><div><b>Ultrawide</b><i class="ultrawide"></i></div><div><b>4K wall</b><i class="wall"></i></div></div><h2>6. Density and accessibility</h2><div class="accessibility"><p><b>44px</b> minimum tap / click target</p><p class="focus-example">Assign task <kbd>Tab</kbd></p><p><b>Aa</b> high-contrast UI text</p><p>' + icon('info') + ' Semantic label and tooltip</p></div></article></section></main>';
|
||||
}
|
||||
|
||||
function modal() {
|
||||
if (!state.modal) return '';
|
||||
let content = '';
|
||||
if (state.modal === 'preview') {
|
||||
content = '<div class="modal-dialog command-preview" role="dialog" aria-modal="true" aria-labelledby="preview-title"><header><div><small>Command preview</small><h1 id="preview-title">Assign TASK-143</h1></div>' + button('', 'cancel-modal', { icon: 'close', iconOnly: true, label: 'Close command preview' }) + '</header><p class="preview-lede">6 selected vehicles will be assigned to <b>Area Search — Northern Sector</b>.</p><div class="preview-route"><div><i></i><b>Current assignment</b></div><span>' + icon('route') + '</span><div class="target"><i></i><b>Proposed task</b></div></div><div class="preview-validation">' + validationRow('Estimated completion', '18 min') + validationRow('Energy reserve', 'All above minimum') + validationRow('Route conflicts', 'None detected') + validationRow('Geofence conflicts', 'None detected') + validationRow('Vehicle compatibility', '6 / 6') + validationRow('Potential issue', '1 aircraft may require reassignment', 'warning') + '</div><footer>' + button('Cancel', 'cancel-modal') + button('Confirm assignment', 'confirm-assignment', { icon: 'check', kind: 'primary' }) + '</footer></div>';
|
||||
} else if (state.modal === 'transfer') {
|
||||
content = '<div class="modal-dialog transfer-dialog" role="dialog" aria-modal="true" aria-labelledby="transfer-title"><header><div><small>Command lease</small><h1 id="transfer-title">Operator B requests command</h1></div>' + button('', 'cancel-modal', { icon: 'close', iconOnly: true, label: 'Close request dialog' }) + '</header><div class="transfer-authority"><span class="group-badge cyan">A</span><div><b>Alpha · command authority</b><p>Held by Alex · lease expires 02:34</p></div></div><label>Reason<textarea readonly>Emergency intervention</textarea></label><p class="notice">' + icon('info') + ' This action will transfer command authority from <b>Alex</b> to <b>Sara</b>. The change is logged for all operators.</p><footer>' + button('Deny', 'deny-transfer') + button('Transfer control', 'confirm-transfer', { icon: 'transfer', kind: 'danger' }) + '</footer></div>';
|
||||
} else if (state.modal === 'help') {
|
||||
content = '<div class="modal-dialog help-dialog" role="dialog" aria-modal="true"><header><h1>Smart selection</h1>' + button('', 'cancel-modal', { icon: 'close', iconOnly: true, label: 'Close help' }) + '</header><p>Use a natural-language request or structured filters to select a resource-ready group of aircraft. The POC derives the result from fictional vehicles and always validates the task before confirmation.</p><footer>' + button('Got it', 'cancel-modal', { kind: 'primary' }) + '</footer></div>';
|
||||
}
|
||||
return '<div class="modal-backdrop" data-action="cancel-modal"><div data-stop-propagation>' + content + '</div></div>';
|
||||
}
|
||||
|
||||
function toast() {
|
||||
return state.toast ? '<div class="toast">' + icon('check') + '<span>' + state.toast + '</span><button data-action="clear-toast" aria-label="Dismiss notification">' + icon('close') + '</button></div>' : '';
|
||||
}
|
||||
|
||||
function app() {
|
||||
const views = { overview: overviewView, zoom: zoomView, selection: smartSelectionView, collaboration: collaborationView, recovery: recoveryView, queue: queueView, system: systemView };
|
||||
document.getElementById('app').innerHTML = topBar() + views[state.view]() + modal() + toast();
|
||||
}
|
||||
|
||||
function setToast(message) {
|
||||
state.toast = message;
|
||||
window.clearTimeout(window.__atlasToast);
|
||||
window.__atlasToast = window.setTimeout(() => { state.toast = ''; app(); }, 3600);
|
||||
}
|
||||
|
||||
function clickAction(action, value) {
|
||||
if (action === 'set-view') { state.view = value; state.modal = null; }
|
||||
if (action === 'select-group') { state.selectedGroup = value; state.view = state.view === 'collaboration' ? 'collaboration' : 'overview'; setToast(groupById(value).name + ' selected — contextual controls updated.'); }
|
||||
if (action === 'select-vehicle') { state.selectedVehicle = value; state.view = 'zoom'; setToast(value + ' selected — vehicle detail is shown on request.'); }
|
||||
if (action === 'toggle-layers') state.layersOpen = !state.layersOpen;
|
||||
if (action === 'open-preview') state.modal = 'preview';
|
||||
if (action === 'open-transfer') state.modal = 'transfer';
|
||||
if (action === 'cancel-modal' || action === 'close-assign' || action === 'close-inspector') state.modal = null;
|
||||
if (action === 'show-filter-help') state.modal = 'help';
|
||||
if (action === 'confirm-assignment') { state.modal = null; setToast('TASK-143 assigned after route, energy, and constraint validation.'); }
|
||||
if (action === 'confirm-transfer') { state.modal = null; groups[0].lease = 'Sara'; groups[0].operator = 'Sara'; setToast('Command lease transferred to Sara. The audit event is visible to all operators.'); }
|
||||
if (action === 'deny-transfer') { state.modal = null; setToast('Command request denied. Alex retains the Alpha command lease.'); }
|
||||
if (action === 'move-group') setToast('Move intent opened. A route preview would be required before confirmation.');
|
||||
if (action === 'hold-group') setToast('Hold intent queued for ' + groupById(state.selectedGroup).name + '.');
|
||||
if (action === 'group-vehicles') setToast('Create / add to group workflow opened for the current selection.');
|
||||
if (action === 'split-group') setToast('Split group is available after selecting a destination task.');
|
||||
if (action === 'open-vehicle-detail') { state.view = 'zoom'; state.selectedVehicle = 'UAV-07'; }
|
||||
if (action === 'select-candidate') state.selectedCandidate = value;
|
||||
if (action === 'accept-replacement') { state.reassigned = true; setToast(state.selectedCandidate + ' assigned to Alpha Search. Task coverage returned to 4 / 4.'); }
|
||||
if (action === 'show-failure') setToast('UAV-03 is unavailable. A replacement recommendation needs operator approval.');
|
||||
if (action === 'queue-up' || action === 'queue-down') {
|
||||
const index = Number(value); const direction = action === 'queue-up' ? -1 : 1; const next = index + direction;
|
||||
if (next >= 0 && next < state.queue.length) { const copy = state.queue.slice(); [copy[index], copy[next]] = [copy[next], copy[index]]; state.queue = copy; state.queueDraft = true; setToast('Intent queue reordered locally. Review changes to commit.'); }
|
||||
}
|
||||
if (action === 'review-queue') { state.queueDraft = false; setToast('Queue review recorded. The plan remains valid.'); }
|
||||
if (action === 'reorder-queue') { state.queueDraft = true; setToast('Reorder mode active — use the arrows on each intent step.'); }
|
||||
if (action === 'simulate-queue') setToast('Simulation complete: no constraints conflict with the proposed intent queue.');
|
||||
if (action === 'add-step') { state.queue.push({ title: 'New intent', detail: 'Configure task', duration: '—', status: 'queued' }); state.queueDraft = true; setToast('New draft intent added to the queue.'); }
|
||||
if (action === 'new-group') setToast('New group creation starts with a multi-vehicle selection.');
|
||||
if (action === 'remove-filter') setToast('Filter removed. The fictional result set has been recalculated.');
|
||||
if (action === 'clear-filters') setToast('Structured filters cleared. Use a query to build a new selection.');
|
||||
if (action === 'map-zoom-in') setToast('Map zoomed in — semantic detail increases as you select groups and vehicles.');
|
||||
if (action === 'map-zoom-out') setToast('Map zoomed out — groups aggregate to protect situational awareness.');
|
||||
if (action === 'view-alerts' || action === 'view-fleet' || action === 'view-history') setToast('This POC surfaces exceptions first; the nominal fleet stays intentionally quiet.');
|
||||
if (action === 'compare-candidates') setToast('Candidate comparison keeps energy, task compatibility, and link quality visible.');
|
||||
if (action === 'clear-toast') state.toast = '';
|
||||
app();
|
||||
}
|
||||
|
||||
document.addEventListener('click', event => {
|
||||
const el = event.target.closest('[data-action]');
|
||||
if (el) {
|
||||
event.preventDefault();
|
||||
clickAction(el.dataset.action, el.dataset.value);
|
||||
return;
|
||||
}
|
||||
if (event.target.closest('[data-stop-propagation]')) event.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key === 'Escape' && state.modal) { state.modal = null; app(); }
|
||||
});
|
||||
|
||||
app();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
@@ -0,0 +1,4 @@
|
||||
# Asset notice
|
||||
|
||||
Assets in this directory are project-supplied. Replacements require reviewed
|
||||
ownership, provenance, and licensing.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#0b0f14" />
|
||||
<meta name="description" content="Atlas multi-UAV mission control proof of concept" />
|
||||
<title>Atlas — Mission Control POC</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" aria-live="polite"></div>
|
||||
<script src="app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,459 @@
|
||||
:root {
|
||||
--surface-0: #0b0f14;
|
||||
--surface-1: #111724;
|
||||
--surface-2: #171d2b;
|
||||
--surface-3: #1d2536;
|
||||
--surface-4: #263247;
|
||||
--border: #2a3447;
|
||||
--border-soft: rgba(105, 133, 161, .22);
|
||||
--text: #edf3f7;
|
||||
--muted: #9aa8b7;
|
||||
--dim: #6e7d90;
|
||||
--blue: #227bed;
|
||||
--cyan: #2ab9d6;
|
||||
--green: #59c66f;
|
||||
--amber: #f0b544;
|
||||
--red: #ed5357;
|
||||
--violet: #9a73d8;
|
||||
--radius: 7px;
|
||||
--shadow: 0 14px 36px rgba(0, 0, 0, .3);
|
||||
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body, #app { min-height: 100%; margin: 0; }
|
||||
body {
|
||||
background: var(--surface-0);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
button, input, textarea { font: inherit; }
|
||||
button { color: inherit; }
|
||||
button:focus-visible, input:focus-visible, textarea:focus-visible {
|
||||
outline: 2px solid var(--cyan);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1 { font-size: 20px; line-height: 1.2; }
|
||||
h2 { font-size: 16px; line-height: 1.25; }
|
||||
h3 { font-size: 14px; }
|
||||
small { color: var(--muted); font-size: 11px; line-height: 1.3; }
|
||||
a { color: var(--cyan); }
|
||||
dl, dt, dd { margin: 0; }
|
||||
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
|
||||
.green { color: var(--green) !important; }
|
||||
.amber { color: var(--amber) !important; }
|
||||
.blue { color: var(--blue) !important; }
|
||||
.cyan { color: var(--cyan) !important; }
|
||||
.violet { color: var(--violet) !important; }
|
||||
.red { color: var(--red) !important; }
|
||||
|
||||
.topbar {
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 18px;
|
||||
padding: 0 16px;
|
||||
background: rgba(9, 14, 21, .97);
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.brand, .view-nav, .top-metrics, .operator-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.brand { gap: 10px; min-width: max-content; font-weight: 700; letter-spacing: .08em; }
|
||||
.brand-mark {
|
||||
width: 28px; height: 28px; display: grid; place-items: center;
|
||||
color: var(--cyan); border: 1px solid var(--blue); border-radius: 5px;
|
||||
font-size: 13px; box-shadow: inset 0 0 12px rgba(35, 123, 237, .18);
|
||||
}
|
||||
.brand-divider { width: 1px; height: 28px; background: var(--border); margin-left: 4px; }
|
||||
.mission-name { color: var(--muted); font-size: 12px; letter-spacing: .03em; }
|
||||
.view-nav { gap: 2px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
|
||||
.view-nav::-webkit-scrollbar { display: none; }
|
||||
.nav-item {
|
||||
height: 68px; display: inline-flex; gap: 7px; align-items: center; padding: 0 9px;
|
||||
background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer;
|
||||
white-space: nowrap; font-size: 12px;
|
||||
}
|
||||
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.025); }
|
||||
.nav-item.is-active { color: var(--cyan); border-bottom-color: var(--blue); background: rgba(35,123,237,.06); }
|
||||
.nav-item .icon { width: 16px; height: 16px; }
|
||||
.top-metrics { gap: 16px; }
|
||||
.top-metrics > div:not(.operator-avatar) { display: grid; gap: 2px; padding-right: 16px; border-right: 1px solid var(--border-soft); white-space: nowrap; }
|
||||
.top-metrics small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
|
||||
.top-metrics strong { font-size: 12px; font-weight: 600; }
|
||||
.operator-avatar { gap: 8px; min-width: 112px; }
|
||||
.operator-avatar > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--cyan); font-size: 10px; font-weight: 700; }
|
||||
.operator-avatar div { display: grid; gap: 2px; }
|
||||
.operator-avatar strong { text-transform: uppercase; font-size: 11px; }
|
||||
.operator-avatar small { font-size: 9px; }
|
||||
|
||||
.button {
|
||||
min-height: 40px; border: 1px solid var(--border); border-radius: 5px; padding: 0 13px;
|
||||
background: rgba(23, 31, 45, .96); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
cursor: pointer; font-weight: 600; font-size: 12px; transition: border-color .15s, background .15s, transform .15s;
|
||||
}
|
||||
.button:hover:not(:disabled) { border-color: #54708f; background: var(--surface-3); }
|
||||
.button:active:not(:disabled) { transform: translateY(1px); }
|
||||
.button.primary { background: var(--blue); border-color: #3b8af1; color: #fff; }
|
||||
.button.primary:hover:not(:disabled) { background: #3288f4; }
|
||||
.button.danger { background: #a92f37; border-color: #df555c; color: #fff; }
|
||||
.button.danger:hover:not(:disabled) { background: #c43e46; }
|
||||
.button:disabled { opacity: .48; cursor: not-allowed; }
|
||||
.icon-button { width: 40px; min-width: 40px; padding: 0; }
|
||||
.full-width { width: 100%; text-transform: uppercase; letter-spacing: .04em; }
|
||||
.status { display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
|
||||
.status-dot, .presence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); display: inline-block; }
|
||||
.status.nominal, .status.nominal .status-dot { color: var(--green); }
|
||||
.status.nominal .status-dot, .presence-dot.green { background: var(--green); }
|
||||
.status.attention, .status.attention .status-dot { color: var(--amber); }
|
||||
.status.attention .status-dot, .presence-dot.amber, .presence-dot.yellow { background: var(--amber); }
|
||||
.status.critical, .status.critical .status-dot { color: var(--red); }
|
||||
.status.critical .status-dot { background: var(--red); }
|
||||
.status.cyan, .status.cyan .status-dot { color: var(--cyan); }
|
||||
.status.cyan .status-dot, .presence-dot.cyan { background: var(--cyan); }
|
||||
.status.blue, .status.blue .status-dot { color: var(--blue); }
|
||||
.status.blue .status-dot, .presence-dot.blue { background: var(--blue); }
|
||||
.status.planned, .status.planned .status-dot { color: var(--violet); }
|
||||
.status.planned .status-dot, .presence-dot.violet { background: var(--violet); }
|
||||
|
||||
.workspace { min-height: calc(100vh - 68px); display: grid; background: var(--surface-0); }
|
||||
.overview-workspace { grid-template: minmax(580px, calc(100vh - 220px)) auto / 250px minmax(400px, 1fr) 250px; }
|
||||
.group-rail, .attention-rail { background: var(--surface-1); border-right: 1px solid var(--border); padding: 12px 10px; min-width: 0; }
|
||||
.attention-rail { border-right: 0; border-left: 1px solid var(--border); }
|
||||
.rail-heading { height: 34px; padding: 0 7px 9px; display: flex; align-items: center; justify-content: space-between; color: #c1ccda; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
|
||||
.rail-heading .button { min-height: 28px; width: 28px; min-width: 28px; border: 0; background: none; }
|
||||
.rail-heading .icon { width: 16px; height: 16px; }
|
||||
.group-list { display: grid; gap: 8px; margin-bottom: 12px; }
|
||||
.group-card {
|
||||
width: 100%; display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; text-align: left; min-height: 92px; padding: 10px;
|
||||
background: rgba(23, 31, 43, .72); border: 1px solid rgba(82,104,129,.26); border-radius: 6px; cursor: pointer;
|
||||
}
|
||||
.group-card:hover { border-color: #4d6380; background: var(--surface-2); }
|
||||
.group-card.selected { border-color: #2688db; box-shadow: inset 2px 0 0 var(--blue), 0 0 20px rgba(32, 120, 225, .08); }
|
||||
.group-badge {
|
||||
width: 34px; height: 34px; border: 1px solid #52667d; display: grid; place-items: center; border-radius: 50%;
|
||||
font-weight: 700; color: #c9d4de; flex: 0 0 auto;
|
||||
}
|
||||
.group-badge.cyan { border-color: var(--cyan); color: var(--cyan); }
|
||||
.group-badge.blue { border-color: var(--blue); color: #73b0ff; }
|
||||
.group-badge.green { border-color: var(--green); color: var(--green); }
|
||||
.group-badge.amber { border-color: var(--amber); color: var(--amber); }
|
||||
.group-badge.violet { border-color: var(--violet); color: var(--violet); }
|
||||
.group-card-main { min-width: 0; display: grid; align-content: start; gap: 2px; }
|
||||
.group-card-main strong { font-size: 13px; }
|
||||
.group-card-main small { font-size: 10px; }
|
||||
.operator-line { margin-top: auto; color: var(--muted); font-size: 10px; }
|
||||
.group-card-side { min-width: 34px; display: grid; justify-items: end; align-content: space-between; }
|
||||
.group-card-side .status { font-size: 0; }
|
||||
.group-card-side .status-dot { width: 8px; height: 8px; }
|
||||
.group-card-side > b { color: var(--cyan); font-size: 12px; }
|
||||
.mini-grid { display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; padding-top: 2px; }
|
||||
.mini-grid em { width: 3px; height: 3px; border-radius: 50%; background: var(--blue); }
|
||||
.group-card:nth-child(4) .mini-grid em { background: var(--amber); }
|
||||
.map-stage { min-width: 0; min-height: 0; position: relative; }
|
||||
.map-canvas, .zoom-map, .queue-map {
|
||||
min-height: 100%; overflow: hidden; position: relative; isolation: isolate;
|
||||
background: #07111c;
|
||||
}
|
||||
.map-canvas::before, .zoom-map::before, .queue-map::before {
|
||||
content: ""; position: absolute; inset: 0; z-index: -3; background:
|
||||
radial-gradient(ellipse at 24% 35%, rgba(43, 94, 87, .48), transparent 38%),
|
||||
radial-gradient(ellipse at 45% 72%, rgba(71, 91, 66, .26), transparent 32%),
|
||||
linear-gradient(135deg, #122531 0%, #0a151e 45%, #06121e 76%);
|
||||
}
|
||||
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .9; }
|
||||
.map-art .land { fill: rgba(45, 70, 65, .8); stroke: #4c6c6d; stroke-width: 2; }
|
||||
.map-art .coast { fill: none; stroke: #a6c3bb; stroke-opacity: .4; stroke-width: 2; }
|
||||
.map-art .river { fill: none; stroke: #5d91a4; stroke-opacity: .6; stroke-width: 3; }
|
||||
.map-art .road { fill: none; stroke: #acb5a1; stroke-opacity: .28; stroke-width: 2; stroke-dasharray: 3 2; }
|
||||
.map-art .road.thin { stroke-width: 1; stroke-dasharray: 5 5; }
|
||||
.map-art .hill { fill: none; stroke: #778f75; stroke-opacity: .32; stroke-width: 3; }
|
||||
.map-art .town { fill: #c0c9bb; fill-opacity: .22; stroke: #dfe4d6; stroke-opacity: .4; }
|
||||
.map-label { position: absolute; color: #c4d1d4; text-shadow: 0 1px 3px #000; font-size: 11px; }
|
||||
.scale { position: absolute; left: 16px; bottom: 16px; color: #d3dce3; font-family: var(--mono); font-size: 10px; display: grid; gap: 3px; }
|
||||
.scale i { width: 84px; height: 7px; border-bottom: 2px solid #e4eced; border-left: 2px solid #e4eced; border-right: 2px solid #e4eced; }
|
||||
.map-controls { position: absolute; right: 14px; top: 14px; z-index: 10; display: grid; gap: 5px; }
|
||||
.map-controls .button { background: rgba(12, 21, 31, .88); }
|
||||
.layers-popover { position: absolute; right: 60px; top: 14px; z-index: 11; padding: 12px; background: rgba(12,21,31,.98); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); display: grid; gap: 8px; min-width: 150px; }
|
||||
.layers-popover strong { font-size: 12px; }
|
||||
.layers-popover label { color: var(--muted); font-size: 11px; display: flex; gap: 7px; align-items: center; }
|
||||
.task-area { position: absolute; inset: 19% 28% 19% 19%; z-index: 1; pointer-events: none; }
|
||||
.task-shape { position: absolute; inset: 0; background: rgba(28, 122, 183, .16); clip-path: polygon(17% 0, 82% 7%, 100% 52%, 67% 100%, 8% 83%, 0 37%); border: 1px solid var(--cyan); }
|
||||
.task-shape::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(68,181,215,.14) 7px 8px); }
|
||||
.task-area::after { content: ""; position: absolute; inset: 0; clip-path: polygon(17% 0,82% 7%,100% 52%,67% 100%,8% 83%,0 37%); border: 1.4px solid var(--cyan); }
|
||||
.task-area span { position: absolute; left: 50%; top: 39%; transform: translate(-50%, -50%); color: #61d4ea; text-align: center; font-size: 13px; line-height: 1.45; font-weight: 600; white-space: nowrap; }
|
||||
.task-area.violet .task-shape { background: rgba(119, 75, 166, .22); }
|
||||
.task-area.violet::after { border-color: var(--violet); }
|
||||
.task-area.violet span { color: #be9bf3; }
|
||||
.task-area.muted { opacity: .55; }
|
||||
.route-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
|
||||
.route-line path { stroke: #51a0ec; stroke-width: 3; stroke-opacity: .86; stroke-dasharray: 8 7; }
|
||||
.route-line .planned-path { stroke: var(--violet); stroke-opacity: .68; stroke-width: 2.5; }
|
||||
.vehicle-marker {
|
||||
position: absolute; z-index: 4; transform: translate(-50%, -50%); background: none; border: 0; color: #bde6ff; padding: 7px; cursor: pointer;
|
||||
}
|
||||
.vehicle-marker .icon { transform: rotate(var(--heading)); width: 21px; height: 21px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.8)); stroke-width: 2.2; }
|
||||
.vehicle-marker::after { content: ""; position: absolute; left: 50%; bottom: 2px; height: 17px; border-left: 1px solid rgba(91, 194, 222, .55); transform: rotate(calc(var(--heading) + 180deg)); transform-origin: bottom; }
|
||||
.vehicle-marker:hover .icon, .vehicle-marker.selected .icon { color: white; stroke: var(--cyan); filter: drop-shadow(0 0 6px rgba(42,185,214,.7)); }
|
||||
.vehicle-marker.critical { color: var(--red); }
|
||||
.vehicle-marker.critical::after { border-color: var(--red); }
|
||||
.vehicle-marker > span { position: absolute; left: 20px; top: 4px; color: #fff; text-shadow: 0 1px 3px #000; font-size: 11px; white-space: nowrap; }
|
||||
.coverage-ring { position: absolute; width: 145px; height: 145px; right: 23%; top: 25%; border: 1px dashed rgba(100, 179, 223, .55); border-radius: 50%; z-index: 1; }
|
||||
.poi { position: absolute; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid currentColor; background: rgba(5,13,23,.75); font-weight: 600; }
|
||||
.poi-blue { color: #6ab0ff; border-color: #398dde; }
|
||||
.poi-violet { color: #c399ff; border-color: var(--violet); border-radius: 50%; }
|
||||
.geofence { position: absolute; z-index: 0; width: 130px; height: 100px; right: 8%; top: 7%; transform: rotate(-10deg); background: repeating-linear-gradient(45deg, rgba(237,83,87,.1) 0 5px, transparent 5px 10px); border: 1px solid rgba(237,83,87,.56); }
|
||||
.map-mini-exceptions { position: absolute; z-index: 8; right: 18px; bottom: 18px; padding: 12px; width: 215px; background: rgba(11,20,29,.94); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 11px; }
|
||||
.map-mini-exceptions strong { text-transform: uppercase; color: #b9c5d3; font-size: 10px; letter-spacing: .05em; }
|
||||
.map-mini-exceptions p { display: flex; gap: 6px; margin: 7px 0; color: #c8d0d6; }
|
||||
.map-mini-exceptions .icon { width: 14px; height: 14px; color: var(--amber); }
|
||||
.map-mini-exceptions a { font-size: 10px; text-transform: uppercase; }
|
||||
|
||||
.attention-card { width: 100%; padding: 12px 9px; display: grid; grid-template-columns: 23px 1fr; gap: 9px; text-align: left; background: rgba(29, 31, 25, .45); color: var(--text); border: 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
|
||||
.attention-card:hover { background: var(--surface-2); }
|
||||
.attention-card .icon { color: var(--amber); margin-top: 2px; }
|
||||
.attention-card.warning .icon { color: #f1b64b; }
|
||||
.attention-card span { display: grid; gap: 3px; }
|
||||
.attention-card strong { font-size: 12px; font-weight: 600; }
|
||||
.attention-card em { grid-column: 2; color: var(--blue); font-size: 9px; font-style: normal; text-transform: uppercase; }
|
||||
.fleet-nominal { margin: 16px 3px; padding: 15px; display: flex; gap: 12px; align-items: center; border: 1px solid var(--border); background: rgba(25,35,42,.8); }
|
||||
.fleet-nominal .icon { color: var(--green); width: 21px; height: 21px; }
|
||||
.fleet-nominal div { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 7px; }
|
||||
.fleet-nominal b { grid-row: span 2; color: var(--green); font-size: 30px; line-height: .85; }
|
||||
.fleet-nominal span { font-size: 10px; text-transform: uppercase; }
|
||||
.fleet-nominal small { grid-column: span 2; margin-top: 7px; }
|
||||
|
||||
.context-bar { grid-column: 2 / 4; border-top: 1px solid var(--border); background: var(--surface-1); }
|
||||
.context-summary { min-height: 70px; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border-soft); }
|
||||
.context-summary h2 { text-transform: uppercase; }
|
||||
.context-summary > div:nth-child(2) { display: grid; gap: 2px; min-width: 90px; }
|
||||
.context-summary > div:nth-child(2) small { color: var(--blue); text-transform: uppercase; }
|
||||
.context-summary dl { display: grid; grid-template-columns: repeat(6, minmax(82px, 1fr)); gap: 16px; flex: 1; }
|
||||
.context-summary dl div { display: grid; gap: 4px; min-width: 0; }
|
||||
.context-summary dt { color: var(--dim); font-size: 9px; text-transform: uppercase; }
|
||||
.context-summary dd { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.progress { display: inline-flex; height: 4px; width: 68px; margin-left: 5px; vertical-align: middle; background: #283440; border-radius: 4px; overflow: hidden; }
|
||||
.progress b { height: 100%; background: var(--blue); }
|
||||
.context-actions { padding: 8px 18px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
|
||||
.context-actions .button { text-transform: uppercase; font-size: 11px; }
|
||||
|
||||
.view-intro { padding: 24px 26px 18px; display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--border); }
|
||||
.view-intro h1 { font-size: 24px; text-transform: uppercase; letter-spacing: -.03em; }
|
||||
.view-intro h1 span { font-size: 16px; color: var(--muted); font-weight: 500; }
|
||||
.view-intro p { color: var(--muted); margin-top: 5px; }
|
||||
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 3px; }
|
||||
.zoom-view { min-height: calc(100vh - 68px); background: var(--surface-0); }
|
||||
.zoom-grid { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 12px; padding: 18px; }
|
||||
.zoom-panel { min-width: 0; min-height: 670px; display: grid; grid-template-rows: 56px 1fr 92px; border: 1px solid var(--border); background: var(--surface-1); border-radius: 5px; overflow: hidden; }
|
||||
.zoom-panel > header { display: flex; align-items: center; gap: 11px; padding: 0 14px; border-bottom: 1px solid var(--border); text-transform: uppercase; }
|
||||
.zoom-panel > header h2 { font-size: 15px; }
|
||||
.zoom-panel > header .button { margin-left: auto; min-height: 30px; width: 30px; min-width: 30px; }
|
||||
.letter { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; background: #245ea3; font-weight: 700; border-radius: 2px; }
|
||||
.zoom-map { min-height: 0; }
|
||||
.zoom-map .map-label { font-size: 9px; }
|
||||
.zoom-map .task-area { inset: 20% 16% 20% 17%; }
|
||||
.zoom-map .task-area.small-task { inset: 18% 12% 27% 48%; }
|
||||
.zoom-map .task-area.wide { inset: 16% 8% 17% 7%; }
|
||||
.zoom-map .task-area span { font-size: 11px; }
|
||||
.zoom-map .vehicle-marker { transform: translate(-50%, -50%) scale(.72); }
|
||||
.zoom-map .group-marker { transform: scale(.75); transform-origin: left top; }
|
||||
.zoom-map .group-marker .marker-card { font-size: 12px; }
|
||||
.zoom-map .route-line { opacity: .7; }
|
||||
.zoom-fleet { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; background: rgba(10, 18, 27, .83); border: 1px solid var(--border); padding: 8px; }
|
||||
.zoom-fleet span { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
|
||||
.zoom-fleet b { color: #cad7e0; font-size: 9px; }
|
||||
.zoom-fleet i { display: block; height: 4px; background: #2b3543; border-radius: 3px; }
|
||||
.zoom-fleet i::after { content: ""; display: block; width: 70%; height: 100%; background: var(--blue); border-radius: 3px; }
|
||||
.map-kpi { position: absolute; left: 14px; top: 14px; padding: 12px; min-width: 132px; background: rgba(10,20,29,.9); border: 1px solid var(--border); border-left: 2px solid var(--green); display: grid; gap: 3px; }
|
||||
.map-kpi b { color: var(--green); font-size: 22px; }
|
||||
.map-kpi .ring { position: absolute; right: 14px; top: 18px; width: 31px; height: 31px; border: 4px solid rgba(89,198,111,.25); border-top-color: var(--green); border-radius: 50%; }
|
||||
.map-kpi em { font-size: 10px; font-style: normal; color: var(--muted); }
|
||||
.vehicle-inspector { position: absolute; right: 12px; top: 18px; z-index: 11; width: 184px; padding: 13px; background: rgba(13,23,34,.96); border: 1px solid var(--border); box-shadow: var(--shadow); }
|
||||
.vehicle-inspector > div { display: flex; align-items: center; justify-content: space-between; }
|
||||
.vehicle-inspector > div .button { min-height: 22px; width: 22px; min-width: 22px; }
|
||||
.vehicle-inspector > div .icon { width: 14px; }
|
||||
.vehicle-inspector > small { color: var(--green); display: block; padding: 4px 0 9px; border-bottom: 1px solid var(--border); }
|
||||
.vehicle-inspector dl { display: grid; gap: 8px; padding: 10px 0; }
|
||||
.vehicle-inspector dl div { display: flex; justify-content: space-between; gap: 6px; }
|
||||
.vehicle-inspector dt { color: var(--muted); font-size: 9px; }
|
||||
.vehicle-inspector dd { text-align: right; color: #e0e8ee; font-size: 10px; }
|
||||
.vehicle-inspector hr { border: 0; border-top: 1px solid var(--border); }
|
||||
.vehicle-inspector p { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 10px; }
|
||||
.vehicle-inspector p b { color: var(--muted); font-weight: 400; }
|
||||
.zoom-footer { padding: 20px 12px; text-align: center; background: #101925; border-top: 1px solid var(--border); }
|
||||
.zoom-footer h3 { font-size: 15px; }
|
||||
.zoom-footer p { color: var(--muted); margin-top: 8px; font-size: 11px; }
|
||||
|
||||
.selection-workspace { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 315px minmax(420px,1fr) 365px; }
|
||||
.smart-panel, .assign-panel, .presence-panel { padding: 18px; background: var(--surface-1); border-right: 1px solid var(--border); min-width: 0; }
|
||||
.smart-panel header, .assign-panel > header, .presence-panel > header, .queue-panel > header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
|
||||
.smart-panel header .button, .assign-panel header .button { min-height: 30px; min-width: 30px; width: 30px; }
|
||||
.form-label { color: #c7d1dd; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; display: block; margin: 20px 0 9px; }
|
||||
.natural-query { padding: 13px; display: flex; gap: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; }
|
||||
.natural-query .icon { color: var(--cyan); width: 18px; }
|
||||
.natural-query p { color: #e3eaf0; font-size: 12px; line-height: 1.55; }
|
||||
.filter-heading { display: flex; justify-content: space-between; align-items: end; }
|
||||
.filter-heading .form-label { margin-bottom: 9px; }
|
||||
.filter-heading button, .subheading button { padding: 0; border: 0; background: none; color: var(--blue); cursor: pointer; font-size: 11px; }
|
||||
.filter-stack { display: grid; gap: 6px; }
|
||||
.filter-chip { min-height: 33px; display: grid; grid-template-columns: 1fr auto 24px; align-items: center; border: 1px solid var(--border); border-radius: 4px; background: rgba(25,34,47,.75); font-size: 11px; }
|
||||
.filter-chip > span { color: #cbd6df; text-transform: uppercase; font-size: 10px; padding-left: 10px; }
|
||||
.filter-chip > b { padding: 3px 8px; color: #72b0fd; background: rgba(35,123,237,.16); border-radius: 3px; font-weight: 500; }
|
||||
.filter-chip > button { width: 24px; height: 28px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
|
||||
.filter-chip .icon { width: 13px; }
|
||||
.selection-result { padding: 22px 0 14px; }
|
||||
.selection-result > small, .selection-result > p { display: block; text-transform: uppercase; font-size: 10px; margin-bottom: 5px; }
|
||||
.selection-result > strong { display: block; color: var(--blue); font-size: 38px; line-height: 1; margin-bottom: 18px; }
|
||||
.selection-result > strong span { font-size: 14px; text-transform: uppercase; }
|
||||
.selection-result dl { display: grid; gap: 8px; }
|
||||
.selection-result dl div { display: grid; grid-template-columns: 1fr 94px; align-items: center; gap: 8px; }
|
||||
.selection-result dt { color: var(--muted); font-size: 9px; text-transform: uppercase; }
|
||||
.selection-result dd { color: #acbac7; font-family: var(--mono); font-size: 9px; }
|
||||
.selection-result dd i { width: 58px; height: 5px; display: inline-block; background: linear-gradient(to right, var(--blue) 42%, #263647 42%); vertical-align: middle; margin-right: 4px; }
|
||||
.updated { display: block; margin: 14px 0 0; color: var(--dim); }
|
||||
.selection-map-stage { min-width: 0; }
|
||||
.selection-map .selection-task { position: absolute; inset: 7% 16% 37% 32%; z-index: 2; }
|
||||
.selection-map .task-area { inset: 0; }
|
||||
.selection-map .task-area span { top: 33%; padding: 11px; background: rgba(37,23,60,.85); border: 1px solid var(--violet); border-radius: 7px; }
|
||||
.task-pin { position: absolute; left: 53%; top: 52%; width: 10px; height: 10px; background: var(--violet); border-radius: 50%; box-shadow: 0 0 0 4px rgba(154,115,216,.25); }
|
||||
.selection-map .vehicle-marker { color: #a8ecf8; }
|
||||
.selection-map .vehicle-marker > span { padding: 4px 6px; left: 22px; top: -5px; background: rgba(12,21,31,.86); border: 1px solid #3b596d; border-radius: 10px; font-size: 9px; }
|
||||
.floating-task-card { position: absolute; z-index: 9; left: 25%; bottom: 8%; width: 330px; padding: 16px; background: rgba(13,22,33,.96); border: 1px solid #3c4d63; box-shadow: var(--shadow); border-radius: 7px; }
|
||||
.floating-task-card h3 { text-transform: uppercase; color: #b994f3; font-size: 17px; }
|
||||
.floating-task-card h3 span { display: block; font-size: 14px; }
|
||||
.floating-task-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px; border: 1px solid var(--border); }
|
||||
.floating-task-card dl div { padding: 10px; display: grid; gap: 5px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.floating-task-card dt { color: var(--muted); font-size: 9px; }
|
||||
.floating-task-card dd { font-size: 11px; }
|
||||
.floating-task-card footer { display: flex; gap: 7px; align-items: center; padding-top: 12px; color: var(--muted); font-size: 10px; }
|
||||
.floating-task-card footer .icon { width: 15px; }
|
||||
.floating-task-card footer b { margin-left: auto; color: var(--text); font-size: 12px; }
|
||||
.assign-panel { border-left: 1px solid var(--border); border-right: 0; padding: 18px 20px; }
|
||||
.assign-panel header h1 { text-transform: uppercase; font-size: 17px; }
|
||||
.assign-panel header p { color: var(--blue); text-transform: uppercase; font-size: 11px; margin-top: 5px; }
|
||||
.task-meta { display: grid; gap: 12px; padding: 20px 0; }
|
||||
.task-meta div { display: grid; grid-template-columns: 55px 1fr; gap: 10px; }
|
||||
.task-meta dt, .assign-panel h2 { color: var(--muted); text-transform: uppercase; font-size: 10px; }
|
||||
.task-meta dd { font-size: 12px; }
|
||||
.assign-panel h2 { margin: 7px 0 12px; }
|
||||
.validation-list { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
|
||||
.validation-row { min-height: 47px; display: grid; grid-template-columns: 21px 1fr minmax(86px,auto) 23px; gap: 8px; align-items: center; padding: 7px 11px; border-bottom: 1px solid var(--border-soft); }
|
||||
.validation-row:last-child { border-bottom: 0; }
|
||||
.validation-row > .icon { color: var(--muted); width: 17px; }
|
||||
.validation-row > span { font-size: 12px; }
|
||||
.validation-row > b { color: #d2dce5; font-size: 11px; font-weight: 500; text-align: right; }
|
||||
.round-check { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #0e2615; }
|
||||
.round-check .icon { width: 13px; height: 13px; stroke-width: 3; }
|
||||
.info-callout { display: flex; gap: 8px; margin-top: 13px; padding: 10px; border: 1px solid rgba(35,123,237,.46); background: rgba(35,123,237,.06); color: #a9c2df; border-radius: 5px; }
|
||||
.info-callout .icon { color: var(--blue); width: 17px; }
|
||||
.info-callout p { font-size: 11px; line-height: 1.4; }
|
||||
.assign-panel > footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-top: 18px; }
|
||||
|
||||
.collaboration-workspace { min-height: calc(100vh - 68px); display: grid; grid-template: 1fr auto / 270px minmax(430px, 1fr) 315px; }
|
||||
.group-rail.compact .group-card { min-height: 84px; }
|
||||
.group-rail.compact .group-card-main small:nth-of-type(2), .group-rail.compact .group-card-side { display: none; }
|
||||
.collab-map-stage { min-width: 0; position: relative; }
|
||||
.collaboration-map .task-area { inset: 35% 43% 22% 21%; }
|
||||
.collab-alpha-boundary { position: absolute; inset: 0; }
|
||||
.collab-alpha-boundary .vehicle-marker { transform: translate(-50%,-50%) scale(.8); }
|
||||
.group-marker { position: absolute; z-index: 7; display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--text); padding: 0; cursor: pointer; text-align: left; }
|
||||
.marker-dot { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; background: rgba(7,15,24,.72); }
|
||||
.marker-dot b { font-size: 14px; }
|
||||
.marker-card { padding: 6px 8px; display: grid; gap: 2px; background: rgba(9,16,25,.86); border: 1px solid rgba(80,104,130,.55); border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
|
||||
.marker-card strong { font-size: 12px; }
|
||||
.marker-card small { color: #c5d0da; font-size: 9px; white-space: nowrap; }
|
||||
.group-marker.cyan { color: var(--cyan); }.group-marker.blue { color: #4d93ff; }.group-marker.violet { color: #b18be8; }.group-marker.amber { color: var(--amber); }
|
||||
.group-marker.is-selected .marker-dot { box-shadow: 0 0 0 5px rgba(42,185,214,.15); }
|
||||
.operator-cursor { position: absolute; z-index: 12; display: grid; justify-items: center; gap: 2px; color: var(--cyan); font-size: 10px; }
|
||||
.operator-cursor i { font-size: 27px; line-height: .75; font-style: normal; text-shadow: 0 1px 4px #000; }
|
||||
.operator-cursor b { padding: 3px 5px; background: rgba(10,20,29,.9); border: 1px solid currentColor; border-radius: 3px; text-transform: uppercase; font-size: 8px; }
|
||||
.operator-cursor.green { color: var(--green); }.operator-cursor.amber { color: #ef8e4c; }.operator-cursor.violet { color: var(--violet); }.operator-cursor.yellow { color: #eed16a; }
|
||||
.lease-card { position: absolute; z-index: 12; left: 4%; top: 43%; width: 170px; padding: 14px; background: rgba(13,23,34,.95); border: 1px solid #336a8f; box-shadow: var(--shadow); }
|
||||
.lease-card small { color: #72c8e4; text-transform: uppercase; font-size: 9px; }
|
||||
.lease-card h2 { margin: 7px 0 2px; font-size: 19px; }
|
||||
.lease-card p { color: var(--muted); font-size: 11px; }
|
||||
.lease-card p b { color: var(--cyan); }.lease-card hr { margin: 12px 0; border: 0; border-top: 1px solid var(--border); }.lease-card .status { margin: 8px 9px 0 0; }
|
||||
.presence-panel { border-left: 1px solid var(--border); border-right: 0; padding: 18px 13px; }
|
||||
.presence-panel h1 { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
|
||||
.presence-list { border: 1px solid var(--border); margin-top: 12px; }
|
||||
.presence-row { width: 100%; min-height: 62px; display: grid; grid-template-columns: 10px 1fr 20px; align-items: center; gap: 9px; text-align: left; padding: 8px 11px; background: rgba(23,31,43,.64); border: 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
|
||||
.presence-row:hover { background: var(--surface-3); }
|
||||
.presence-row span { display: grid; gap: 3px; }.presence-row strong { text-transform: uppercase; font-size: 13px; }.presence-row b { color: var(--muted); font-size: 18px; }
|
||||
.subheading { margin-top: 24px; padding: 0 0 9px !important; border: 0 !important; }.subheading h2 { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
|
||||
.collab-stream { border: 1px solid var(--border); }
|
||||
.collab-stream p { min-height: 46px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; padding: 8px; border-bottom: 1px solid var(--border-soft); color: #c6d2dc; font-size: 10px; }
|
||||
.collab-stream small { color: var(--dim); font-size: 9px; }
|
||||
.mission-events { grid-column: 1 / -1; display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); background: #101822; }
|
||||
.mission-events > strong { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
|
||||
.mission-events > div { display: flex; gap: 20px; overflow: auto; }
|
||||
.mission-events span { min-width: max-content; color: #b7c4cf; font-size: 10px; }.mission-events .presence-dot { margin-right: 3px; }.mission-events p { grid-column: 1 / -1; color: var(--muted); text-align: center; margin-top: 6px; font-size: 11px; }
|
||||
|
||||
.recovery-workspace { min-height: calc(100vh - 68px); display: grid; grid-template: minmax(500px, 1fr) auto / 290px minmax(430px, 1fr) minmax(500px, 1.08fr); }
|
||||
.recovery-left { padding: 15px 10px; background: var(--surface-1); border-right: 1px solid var(--border); }
|
||||
.recovery-left > header { padding: 10px 6px 14px; border-bottom: 1px solid var(--border); }.recovery-left header h1, .recovery-right > header h1 { font-size: 15px; text-transform: uppercase; }
|
||||
.recovery-alert { margin-top: 14px; padding: 20px 14px; display: flex; gap: 13px; border: 1px solid; border-radius: 6px; }
|
||||
.recovery-alert.critical { border-color: rgba(237,83,87,.55); background: rgba(104,24,31,.4); }.recovery-alert.critical .icon { color: var(--red); }
|
||||
.recovery-alert.amber { border-color: rgba(240,181,68,.52); background: rgba(97,74,19,.34); }.recovery-alert.amber .icon { color: var(--amber); }
|
||||
.recovery-alert > .icon { width: 26px; height: 26px; margin-top: 4px; }.recovery-alert div { display: grid; gap: 6px; }.recovery-alert h2 { font-size: 14px; }.recovery-alert p { font-size: 12px; }.recovery-alert b { margin-top: 7px; width: max-content; padding: 5px 9px; font-size: 10px; font-weight: 500; border-radius: 3px; }.recovery-alert.critical b { background: rgba(237,83,87,.14); color: #fb9fa2; }.recovery-alert.amber b { background: rgba(240,181,68,.16); color: #f1c66d; }
|
||||
.fleet-summary { margin: auto 3px 0; margin-top: 90px; padding: 20px; border: 1px solid var(--border); background: rgba(25,35,42,.8); text-align: center; }.fleet-summary h2 { color: #cdd7df; text-transform: uppercase; font-size: 12px; text-align: left; }.fleet-summary > strong { display: block; margin: 26px 0 2px; color: var(--green); font-size: 49px; line-height: .85; }.fleet-summary > p { font-size: 13px; }.fleet-summary > small { display: block; margin: 20px 0; }.fleet-summary .button { width: 100%; }
|
||||
.recovery-map-stage { min-width: 0; }.recovery-map .task-area { inset: 20% 22% 28% 10%; }.recovery-map .vehicle-marker { transform: translate(-50%,-50%) scale(1.08); color: #79e394; }.recovery-map .route-line path { stroke: rgba(100,190,174,.65); }.failed-marker { position: absolute; z-index: 8; transform: translate(-50%,-50%); display: grid; grid-template-columns: 28px 1fr; column-gap: 7px; align-items: center; padding: 6px; color: #f77175; text-align: left; background: rgba(29,15,21,.9); border: 1px solid rgba(237,83,87,.62); border-radius: 20px; cursor: pointer; }.failed-marker span { grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; }.failed-marker b { font-size: 11px; }.failed-marker small { color: #f47479; font-size: 9px; }
|
||||
.recovery-task-map-card { position: absolute; z-index: 8; left: 15%; bottom: 11%; width: min(480px, 62%); display: flex; align-items: center; gap: 15px; padding: 19px; background: rgba(14,25,36,.96); border: 1px solid #405166; border-radius: 8px; box-shadow: var(--shadow); }.recovery-task-map-card > .icon { width: 36px; height: 36px; color: var(--blue); }.recovery-task-map-card div { display: grid; gap: 5px; }.recovery-task-map-card h2 { font-size: 18px; }.recovery-task-map-card p { color: var(--muted); font-size: 12px; }.recovery-task-map-card > b { margin-left: auto; display: grid; text-align: right; font-size: 24px; }.recovery-task-map-card > b small { font-size: 10px; }
|
||||
.recovery-right { background: var(--surface-1); border-left: 1px solid var(--border); padding: 18px; min-width: 0; }.recovery-right > header { padding: 2px 0 17px; }.recovery-right > header h1 { display: flex; align-items: center; gap: 9px; color: #d9e4ec; }.recovery-right > header .icon { color: var(--blue); width: 29px; height: 29px; }
|
||||
.current-state, .recommendations, .local-preview { border: 1px solid var(--border); background: rgba(24,34,46,.64); padding: 14px; margin-bottom: 10px; border-radius: 5px; }.current-state h2, .recommendations h2, .local-preview h2 { color: #c5d1dc; text-transform: uppercase; font-size: 11px; font-weight: 600; }.current-state dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }.current-state dl div { min-width: 0; display: grid; gap: 5px; padding-right: 7px; border-right: 1px solid var(--border-soft); }.current-state dt { color: var(--muted); font-size: 10px; }.current-state dd { font-size: 15px; }.current-state dd small { display: block; }
|
||||
.recommendations > p { display: flex; gap: 6px; align-items: center; margin: 11px 0; color: var(--muted); font-size: 10px; }.recommendations > p .icon { width: 15px; }.candidate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.candidate-card { min-width: 0; padding: 10px; background: rgba(14,23,34,.84); color: #e2eaf0; border: 1px solid #354355; border-radius: 5px; text-align: left; cursor: pointer; }.candidate-card:hover { border-color: #6887a8; }.candidate-card.selected { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 15px rgba(42,185,214,.09); }.candidate-card header { display: flex; gap: 8px; align-items: center; }.candidate-card header > .icon { color: #c3d0da; width: 24px; height: 24px; }.candidate-card header span { display: grid; gap: 3px; }.candidate-card header strong { font-size: 12px; }.candidate-card .status { font-size: 9px; }.candidate-card header .round-check { margin-left: auto; }.candidate-card dl { display: grid; gap: 8px; margin-top: 13px; }.candidate-card dl div { display: flex; justify-content: space-between; gap: 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(73,91,111,.32); }.candidate-card dt { color: var(--muted); font-size: 9px; }.candidate-card dd { font-size: 10px; }.candidate-card dd .status { font-size: 0; }.candidate-card dd .status-dot { display: inline-block; margin-left: 3px; }.candidate-card footer { margin: 10px -10px -10px; padding: 6px; border-top: 1px solid var(--cyan); color: var(--cyan); text-align: center; text-transform: uppercase; font-size: 9px; }
|
||||
.recommendation-note { margin-bottom: 0 !important; }.local-preview div { position: relative; height: 70px; margin-top: 8px; display: flex; align-items: center; gap: 12px; color: var(--green); }.local-preview div .icon { width: 25px; height: 25px; }.local-preview div > span { display: flex; align-items: center; gap: 5px; color: #dbe4ea; font-size: 11px; }.local-preview div i { flex: 1; height: 0; border-top: 2px dashed var(--cyan); }.local-preview div b { padding: 15px; color: #5bcff0; font-size: 11px; border: 1px dashed var(--cyan); }.recovery-right > footer { display: grid; grid-template-columns: 1fr 1.3fr 1.7fr; gap: 8px; }.recovery-events { grid-column: 1 / -1; min-height: 72px; display: flex; align-items: center; gap: 30px; padding: 12px 24px; background: #101923; border-top: 1px solid var(--border); overflow: auto; }.recovery-events span { min-width: max-content; display: flex; align-items: center; gap: 8px; color: #b8c4ce; font-size: 11px; }.recovery-events .icon { color: var(--amber); }.recovery-events span:first-child .icon { color: var(--red); }
|
||||
|
||||
.queue-workspace { min-height: calc(100vh - 68px); display: grid; grid-template-rows: 55px 1fr 82px; }.queue-topline { display: flex; align-items: center; gap: 0; padding: 0 18px; border-bottom: 1px solid var(--border); background: #0e151f; }.queue-topline > div { padding: 0 34px; display: grid; gap: 3px; border-right: 1px solid var(--border-soft); }.queue-topline > div:last-child { margin-left: auto; }.queue-topline span { color: var(--muted); text-transform: uppercase; font-size: 9px; }.queue-topline b { font-size: 12px; text-transform: uppercase; }.queue-body { min-height: 0; display: grid; grid-template-columns: minmax(360px, 1.06fr) minmax(540px, 1fr); gap: 12px; padding: 12px; background: #0b1119; }.queue-map-stage { min-height: 0; }.queue-map { border: 1px solid var(--border-soft); border-radius: 6px; }.queue-map .task-area { inset: 25% 15% 42% 42%; }.queue-map .task-area.queue-search { inset: 29% 17% 45% 38%; }.queue-map .task-area.queue-search.future { inset: 58% 11% 18% 57%; }.queue-map .task-area.queue-search.future .task-shape { background: rgba(119,75,166,.18); }.queue-map .task-area.queue-search.future::after { border-color: var(--violet); }.queue-map .task-area.queue-search.future span { color: #c499f1; }.base-service { position: absolute; left: 28%; bottom: 21%; display: grid; justify-items: center; color: var(--green); font-size: 27px; }.base-service span { color: #d8e3e5; font-size: 11px; text-align: center; }.queue-group-label { position: absolute; left: 52%; top: 40%; display: grid; justify-items: center; color: #e3edf2; }.queue-group-label .group-badge { margin-bottom: 6px; }.queue-group-label strong { font-size: 13px; }.queue-group-label small { color: #d5dee5; }.queue-group-card { position: absolute; left: 18px; bottom: 18px; width: 185px; padding: 16px; border: 1px solid #40526a; background: rgba(12,23,34,.94); border-radius: 6px; }.queue-group-card .group-badge { float: left; margin-right: 12px; }.queue-group-card h2 { padding-top: 6px; text-transform: uppercase; font-size: 17px; }.queue-group-card p { clear: both; display: flex; gap: 7px; align-items: center; padding-top: 13px; color: #d6e0e5; font-size: 11px; }.queue-group-card p .icon { width: 15px; color: #b9c9d5; }.queue-group-card .status { margin-top: 13px; }
|
||||
.queue-panel { min-width: 0; border: 1px solid var(--border); background: var(--surface-1); border-radius: 6px; display: grid; grid-template-rows: 54px 1fr 65px; overflow: hidden; }.queue-panel > header { padding: 0 14px; }.queue-panel > header h1 { text-transform: uppercase; font-size: 17px; }.queue-panel > header h1 span { color: var(--blue); }.queue-panel > header > div { display: flex; align-items: center; gap: 8px; }.queue-panel > header .button { min-height: 30px; width: 30px; min-width: 30px; }.queue-content { min-height: 0; display: grid; grid-template-columns: minmax(300px, 1fr) 270px; }.step-list { padding: 10px; overflow: auto; border-right: 1px solid var(--border); }.queue-step { min-height: 74px; display: grid; grid-template-columns: 18px 31px 1fr 77px 50px; align-items: center; gap: 9px; padding: 8px; margin-bottom: 7px; border: 1px solid #303e50; border-radius: 5px; background: rgba(30,41,55,.74); }.queue-step.current { border-color: var(--blue); box-shadow: inset 0 0 0 1px rgba(42,185,214,.75); }.queue-step.completed { opacity: .8; }.drag-handle { border: 0; background: none; color: var(--muted); cursor: grab; font-size: 18px; padding: 0; }.step-number { width: 28px; height: 28px; display: grid; place-items: center; background: #1d2b3c; border: 1px solid #405064; border-radius: 4px; font-weight: 600; }.queue-step > div:nth-of-type(1) { display: grid; gap: 3px; }.queue-step h2 { font-size: 13px; }.queue-step p { color: var(--muted); font-size: 10px; }.queue-step .progress { margin: 2px 0 0; width: 85px; }.queue-step > div small { color: var(--blue); text-transform: uppercase; font-size: 9px; }.queue-step > aside { display: grid; gap: 2px; justify-items: end; }.queue-step > aside b { font-size: 10px; }.queue-step > aside small { font-size: 9px; }.queue-step > aside .status { font-size: 8px; }.step-arrows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }.step-arrows .button { min-height: 26px; min-width: 22px; width: 22px; padding: 0; }.step-arrows .button:first-child .icon { transform: rotate(180deg); }.step-arrows .icon { width: 13px; }.drop-zone { min-height: 48px; display: grid; place-items: center; color: var(--violet); border: 1px dashed rgba(154,115,216,.65); background: rgba(99,63,140,.09); font-size: 11px; }.step-inspector { padding: 15px; background: #101824; overflow: auto; }.step-inspector > header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); }.step-inspector > header b, .step-inspector h2 { color: #a9bad0; text-transform: uppercase; font-size: 10px; }.step-inspector > header .button { min-height: 24px; min-width: 24px; width: 24px; }.step-inspector h2 { margin-top: 18px; }.step-inspector p { display: flex; gap: 7px; align-items: center; margin-top: 6px; color: #e0e7eb; font-size: 11px; line-height: 1.5; }.step-inspector p .icon { width: 15px; color: var(--muted); }.queue-actions { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.3fr; gap: 7px; padding: 10px; border-top: 1px solid var(--border); }.queue-actions .button { text-transform: uppercase; }.queue-events { display: flex; align-items: center; gap: 32px; padding: 12px 24px; border-top: 1px solid var(--border); background: #121b26; color: #b3c0ca; font-size: 11px; }.queue-events strong { color: #c6d0d9; text-transform: uppercase; font-size: 10px; }.queue-events b { color: var(--blue); }
|
||||
|
||||
.system-view { max-width: 1600px; margin: 0 auto; padding: 24px; }.system-title { margin-bottom: 12px; }.system-title h1 { font-size: 28px; text-transform: uppercase; }.system-title p { margin-top: 4px; color: var(--muted); }.system-title p span { color: var(--blue); }.system-grid { display: grid; grid-template-columns: 1.1fr .9fr 1.55fr; grid-template-rows: auto auto; border: 1px solid var(--border); }.system-card { min-width: 0; padding: 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-1); }.system-card h2 { margin-bottom: 15px; color: #e2e9ee; text-transform: uppercase; font-size: 12px; }.system-card > p { color: #c4d0d8; font-size: 11px; }.colors { grid-row: span 2; }.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin: 11px 0 22px; }.swatches.semantic { grid-template-columns: repeat(6, 1fr); }.swatch { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }.swatch i { height: 43px; border: 1px solid #364358; border-radius: 3px; background: var(--surface-0); }.swatch i.s0 { background: var(--surface-0); }.swatch i.s1 { background: var(--surface-1); }.swatch i.s2 { background: var(--surface-2); }.swatch i.s3 { background: var(--surface-3); }.swatch i.border { background: var(--border); }.swatch i.blue { background: var(--blue); }.swatch i.cyan { background: var(--cyan); }.swatch i.green { background: var(--green); }.swatch i.amber { background: var(--amber); }.swatch i.red { background: var(--red); }.swatch i.violet { background: var(--violet); }.swatch b { font-size: 10px; color: #d3dde5; }.colors ul { padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.65; }.type { min-height: 275px; }.type h1 { display: flex; gap: 10px; align-items: baseline; font-size: 25px; margin: 17px 0; }.type h1 b { font-size: 20px; }.type h2 { display: flex; gap: 10px; font-size: 19px; }.type h2 b { font-size: 16px; }.type > p { display: flex; gap: 11px; margin: 25px 0; }.type > small { display: block; }.type pre { color: #d4e0e6; font-family: var(--mono); font-size: 10px; }.components { min-height: 275px; }.component-columns { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 15px; }.component-columns section { display: grid; align-content: start; gap: 7px; }.component-columns p { color: var(--muted); font-size: 10px; }.component-columns .button { min-height: 34px; justify-content: flex-start; font-size: 10px; }.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }.authority-demo { padding: 8px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--blue); color: var(--cyan); border-radius: 4px; font-size: 10px; text-transform: uppercase; }.authority-demo.muted { border-color: var(--border); color: var(--muted); }.mini-components { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; margin-top: 18px; }.mini-components > article { min-height: 90px; padding: 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 10px; }.mini-components > article > b { display: inline-block; margin-right: 6px; }.mini-components p { margin-top: 6px; color: var(--muted); }.mini-alert { display: flex; gap: 9px; align-items: center; background: rgba(91,24,31,.45); border-color: rgba(237,83,87,.47) !important; }.mini-alert .icon { color: var(--red); }.mini-alert span { display: grid; gap: 6px; }.interactions { grid-column: span 2; }.multi-select-demo { border: 1px solid var(--border); }.select-map { position: relative; height: 166px; overflow: hidden; background: #0b1723; }.select-map .vehicle-marker { transform: translate(-50%,-50%) scale(.7); }.select-map > i { position: absolute; left: 21%; top: 15%; right: 21%; bottom: 15%; border: 1px solid var(--cyan); background: rgba(42,185,214,.08); }.multi-summary { display: grid; grid-template-columns: 31px 1fr repeat(3, .5fr); gap: 8px; align-items: center; padding: 13px; }.multi-summary > .icon { color: #092438; background: var(--cyan); border-radius: 3px; padding: 4px; width: 29px; height: 29px; }.multi-summary strong { text-transform: uppercase; font-size: 15px; }.multi-summary > span { display: grid; gap: 2px; color: var(--muted); text-transform: uppercase; font-size: 9px; }.multi-summary > span b { color: var(--blue); font-size: 16px; }.multi-summary .button { min-height: 37px; grid-row: 2; }.state-cards { grid-row: span 1; }.selection-state-card { min-height: 58px; display: grid; grid-template-columns: 35px 1fr auto; gap: 7px; align-items: center; padding: 8px; margin-bottom: 7px; border: 1px solid var(--border); border-radius: 4px; }.selection-state-card.selected { border-color: var(--cyan); }.selection-state-card .group-badge { width: 27px; height: 27px; font-size: 10px; }.selection-state-card b { font-size: 11px; }.selection-state-card small { grid-column: 2 / 4; }.selection-state-card.muted { opacity: .65; }.responsive { grid-column: 2 / -1; }.responsive-samples { display: grid; grid-template-columns: repeat(4,1fr); gap: 9pxLine truncated
|
||||
|
||||
.multi-summary { grid-template-columns: 31px 1fr repeat(3, 1fr); }
|
||||
.multi-summary .button:nth-of-type(1) { grid-column: 1 / 3; }
|
||||
.multi-summary .button:nth-of-type(2) { grid-column: 3 / 5; }
|
||||
.multi-summary .button:nth-of-type(3) { grid-column: 5 / 6; }
|
||||
|
||||
.modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,6,10,.68); backdrop-filter: blur(3px); }.modal-dialog { width: min(560px, 100%); padding: 22px; background: #141d29; border: 1px solid #405169; box-shadow: 0 28px 70px rgba(0,0,0,.6); border-radius: 8px; }.modal-dialog > header { display: flex; align-items: start; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border); }.modal-dialog > header small { color: var(--cyan); text-transform: uppercase; }.modal-dialog > header h1 { margin-top: 3px; font-size: 21px; }.modal-dialog > header .button { min-height: 30px; min-width: 30px; width: 30px; }.preview-lede { margin: 18px 0; color: #c4d1da; }.preview-route { min-height: 86px; display: grid; grid-template-columns: 1fr 38px 1fr; align-items: center; padding: 13px; background: #0d1721; border: 1px solid var(--border); }.preview-route div { display: grid; gap: 6px; justify-items: center; color: var(--muted); font-size: 11px; }.preview-route div i { width: 20px; height: 20px; border-radius: 50%; background: var(--blue); }.preview-route div.target i { background: var(--violet); }.preview-route > span { color: var(--cyan); text-align: center; }.preview-validation { margin-top: 16px; border: 1px solid var(--border); }.modal-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.transfer-authority { display: flex; gap: 11px; align-items: center; padding: 17px 0; }.transfer-authority p { margin-top: 4px; color: var(--muted); font-size: 12px; }.transfer-dialog label { display: grid; gap: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; }.transfer-dialog textarea { min-height: 65px; padding: 10px; resize: none; color: #dbe4e8; background: #0b131c; border: 1px solid var(--border); border-radius: 4px; }.notice { display: flex; gap: 7px; margin-top: 15px; color: #aebed0; font-size: 12px; line-height: 1.45; }.notice .icon { color: var(--blue); }.help-dialog p { margin-top: 18px; color: #c4d0d8; line-height: 1.65; }
|
||||
.toast { position: fixed; z-index: 1200; right: 20px; bottom: 20px; max-width: 430px; padding: 12px 11px 12px 14px; display: flex; align-items: center; gap: 10px; color: #dce8e9; background: #14232c; border: 1px solid #3b8291; box-shadow: var(--shadow); border-radius: 6px; font-size: 12px; }.toast > .icon { color: var(--green); }.toast button { margin-left: 5px; padding: 2px; display: grid; border: 0; background: transparent; color: var(--muted); cursor: pointer; }.toast button .icon { width: 15px; }
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.overview-workspace { grid-template-columns: 280px minmax(900px, 1fr) 280px; }
|
||||
.group-card { min-height: 102px; }
|
||||
.attention-card { padding: 16px 12px; }
|
||||
}
|
||||
@media (max-width: 1320px) {
|
||||
.top-metrics > div:nth-child(1), .top-metrics > div:nth-child(2), .top-metrics > div:nth-child(4) { display: none; }
|
||||
.overview-workspace { grid-template-columns: 215px minmax(400px, 1fr) 215px; }
|
||||
.group-card { grid-template-columns: 32px 1fr; min-height: 82px; }.group-card-side { display: none; }
|
||||
.context-summary dl { grid-template-columns: repeat(4, minmax(72px,1fr)); }.context-summary dl .wide-only { display: none; }
|
||||
.selection-workspace { grid-template-columns: 270px minmax(360px,1fr) 320px; }.smart-panel, .assign-panel { padding: 14px; }
|
||||
.recovery-workspace { grid-template-columns: 240px minmax(380px, 1fr) minmax(410px,.95fr); }.candidate-card { padding: 8px; }.candidate-grid { gap: 6px; }
|
||||
.collaboration-workspace { grid-template-columns: 225px minmax(400px,1fr) 275px; }
|
||||
}
|
||||
@media (max-width: 1050px) {
|
||||
.topbar { gap: 7px; }.view-nav { margin: 0; }.nav-item { padding: 0 7px; }.nav-item span { display: none; }.top-metrics > div:not(.operator-avatar) { display: none; }.operator-avatar { min-width: auto; }.operator-avatar div { display: none; }
|
||||
.overview-workspace { grid-template: minmax(520px,1fr) auto / 205px minmax(390px,1fr); }.attention-rail { display: none; }.context-bar { grid-column: 2; }.context-summary dl { grid-template-columns: repeat(3, minmax(80px,1fr)); }.context-actions { grid-template-columns: repeat(4,1fr); }
|
||||
.selection-workspace { grid-template-columns: 250px minmax(350px,1fr); }.assign-panel { display: none; }
|
||||
.collaboration-workspace { grid-template-columns: 210px minmax(420px,1fr); }.presence-panel { display: none; }.mission-events { grid-column: 1 / -1; }
|
||||
.recovery-workspace { grid-template: minmax(470px,1fr) auto / 210px minmax(420px,1fr); }.recovery-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }.fleet-summary { margin-top: 40px; }.recovery-events { display: none; }
|
||||
.queue-body { grid-template-columns: 1fr; }.queue-map-stage { min-height: 330px; }.queue-workspace { grid-template-rows: 55px auto 80px; }.queue-panel { min-height: 480px; }
|
||||
.system-grid { grid-template-columns: 1fr 1fr; }.colors { grid-row: auto; }.components, .responsive { grid-column: span 2; }.interactions { grid-column: span 1; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.topbar { height: 56px; padding: 0 8px; }.brand > span:not(.brand-mark), .brand-divider, .view-nav { display: none; }.top-metrics { margin-left: auto; }.operator-avatar > span { width: 28px; height: 28px; }
|
||||
.workspace, .overview-workspace { min-height: calc(100vh - 56px); }.overview-workspace { grid-template: minmax(420px,1fr) auto / 1fr; }.group-rail { display: none; }.context-bar { grid-column: 1; }.context-summary { padding: 8px 10px; }.context-summary dl { grid-template-columns: repeat(2,1fr); gap: 8px; }.context-summary dl div:nth-child(n+3) { display: none; }.context-actions { padding: 7px 10px; grid-template-columns: repeat(3,1fr); }.context-actions .button { min-height: 42px; padding: 0 7px; font-size: 10px; }
|
||||
.view-intro { padding: 17px 14px; }.view-intro h1 { font-size: 18px; }.view-intro h1 span { display: none; }.view-intro p { font-size: 11px; }.legend { display: none; }.zoom-grid { grid-template-columns: 1fr; padding: 10px; }.zoom-panel { min-height: 470px; grid-template-rows: 48px 1fr 74px; }
|
||||
.selection-workspace { display: block; }.smart-panel { border-right: 0; }.selection-map-stage { height: 470px; }.floating-task-card { left: 8%; bottom: 8%; width: 84%; }.selection-map .map-controls { display: none; }
|
||||
.collaboration-workspace { display: block; }.collaboration-workspace .group-rail { display: block; }.collab-map-stage { height: 510px; }.mission-events { display: block; }.mission-events > div { margin-top: 10px; }.mission-events p { margin-top: 9px; text-align: left; }
|
||||
.recovery-workspace { display: block; }.recovery-left { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.recovery-left > header { grid-column: 1 / -1; }.recovery-alert { margin-top: 0; padding: 12px; }.fleet-summary { display: none; }.recovery-map-stage { height: 430px; }.recovery-right { padding: 12px; }.current-state dl { grid-template-columns: 1fr 1fr; }.candidate-grid { grid-template-columns: 1fr; }.candidate-card dl { grid-template-columns: 1fr 1fr; }
|
||||
.queue-topline { gap: 8px; overflow: auto; padding: 0 10px; }.queue-topline > div { min-width: max-content; padding: 0 10px; }.queue-topline > div:nth-child(n+4) { display: none; }.queue-body { padding: 7px; }.queue-map-stage { min-height: 290px; }.queue-content { grid-template-columns: 1fr; }.step-inspector { display: none; }.queue-panel { grid-template-rows: 54px 1fr 112px; }.queue-actions { grid-template-columns: 1fr 1fr; }.queue-events { display: grid; gap: 6px; padding: 10px; }
|
||||
.system-view { padding: 13px; }.system-grid { display: block; }.system-card { border-right: 0; }.components, .responsive { min-height: auto; }.component-columns, .mini-components { grid-template-columns: 1fr; }.multi-summary { grid-template-columns: 31px 1fr 1fr 1fr; }.multi-summary .button { grid-column: span 2; }.responsive-samples { overflow: auto; grid-template-columns: repeat(4,92px); }.accessibility { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
Reference in new issue
Block a user