mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
5fe125beff
# Conflicts: # client/public/stylesheets/olympus.css # client/public/stylesheets/style.css
1660 lines
82 KiB
HTML
1660 lines
82 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Olympus UI Kit</title>
|
|
<link rel="stylesheet" type="text/css" href="./themes/olympus/olympus.css" />
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/olympus.css" />
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/units.css" />
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/uikit.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="content-wrapper">
|
|
|
|
<h1>Olympus UI Kit</h1>
|
|
|
|
<div id="tabs">
|
|
<div class="section-header">Typeography</div>
|
|
<div class="section-header">Navbar</div>
|
|
<div class="section-header">Context menu</div>
|
|
<div class="section-header">Buttons</div>
|
|
<div class="section-header">Ground Units</div>
|
|
<div class="section-header">Planes</div>
|
|
<div class="section-header">.ol-panel</div>
|
|
</div>
|
|
|
|
<section>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Headings</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
<h1>h1 | open sans | 32px</h1>
|
|
<h2>h2 | open sans | 24px</h2>
|
|
<h3>h3 | open sans | 18.72px</h3>
|
|
<h4>h4 | open sans | 16px</h4>
|
|
<h5>h5 | open sans | 13.28px</h5>
|
|
<h6>h6 | open sans | 10.72px</h6>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="paragraph" class="content">
|
|
|
|
<div class="content-header">Paragraph</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
<div class="caption">Plain</div>
|
|
<p>Nullam iaculis nisi sed mi tincidunt pretium blandit tempus urna. Vestibulum non ex vitae massa tristique auctor. Praesent orci justo, porttitor pellentesque convallis non, commodo at augue.</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<div class="caption">In a panel</div>
|
|
<div class="ol-panel">
|
|
<p>Donec nibh est, fringilla sed pharetra eu, varius vel sem. Aliquam ac libero leo. Sed consectetur enim aliquam dui pellentesque luctus. Pellentesque vel iaculis quam.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Primary nav</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<nav id="primary-toolbar" class="ol-panel">
|
|
<div id="app-icon">
|
|
(I)
|
|
</div>
|
|
<div id="map-type" class="ol-select">
|
|
<div class="ol-select-value">ArcGIS Satellite</div>
|
|
<div class="ol-select-options">
|
|
<div>
|
|
<button>ArcGIS Satellite</button>
|
|
</div>
|
|
<div>
|
|
<button>USGS Topographic</button>
|
|
</div>
|
|
<div>
|
|
<button>OpenStreet Map</button>
|
|
</div>
|
|
<div>
|
|
<button>OPENVKarte</button>
|
|
</div>
|
|
<div>
|
|
<button>ESRI.Delorme</button>
|
|
</div>
|
|
<div>
|
|
<button>CyclOSM</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ol-select">
|
|
<div class="ol-select-value">Caucasus</div>
|
|
<div class="ol-select-options">
|
|
<div>
|
|
<button>Caucasus</button>
|
|
</div>
|
|
<div>
|
|
<button>Nevada</button>
|
|
</div>
|
|
<div>
|
|
<button>Syria</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ol-group">
|
|
<button>A</button>
|
|
<button>B</button>
|
|
<button>C</button>
|
|
</div>
|
|
|
|
<div class="ol-group ol-group-checkbox">
|
|
|
|
<div class="ol-checkbox">
|
|
<div class="ol-checkbox-input">
|
|
<input id="checkbox-1" type="checkbox" />
|
|
</div>
|
|
<label for="checkbox-1">My label</label>
|
|
</div>
|
|
|
|
<div class="ol-checkbox">
|
|
<div class="ol-checkbox-input">
|
|
<input id="checkbox-2" type="checkbox" />
|
|
</div>
|
|
<label for="checkbox-2">My label</label>
|
|
</div>
|
|
|
|
<div class="ol-checkbox">
|
|
<div class="ol-checkbox-input">
|
|
<input id="checkbox-3" type="checkbox" />
|
|
</div>
|
|
<label for="checkbox-3">My label</label>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Context menu</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="ol-contextmenu" style="position: relative; left: 0px; top:0px;">
|
|
<div class="ol-panel">
|
|
<div> Title </div>
|
|
<div>
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<ul id="list" class="ol-panel ol-scroll">
|
|
<li><button>Option 1</button></li>
|
|
<li><button>Option 2</button></li>
|
|
<li><button>Option 3</button></li>
|
|
<li><button>Option 4</button></li>
|
|
<li><button>Option 5</button></li>
|
|
<li><button>Option 6</button></li>
|
|
<li><button>Option 7</button></li>
|
|
<li><button>Option 8</button></li>
|
|
<li><button>Option 9</button></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Buttons</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
<button>Button enabled</button>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<button disabled="disabled">Button disabled</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Ground</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral</div>
|
|
|
|
<div class="unit unit-ground unit-vehicle" data-coalition="">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">Z</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Blue</div>
|
|
|
|
<div class="unit unit-ground unit-vehicle" data-coalition="blue">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">Y</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Red</div>
|
|
|
|
<div class="unit unit-ground unit-vehicle" data-coalition="red">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">X</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">SAM</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral</div>
|
|
|
|
<div class="unit unit-ground unit-ground-sam" data-coalition="">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">Z</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Blue</div>
|
|
|
|
<div class="unit unit-ground unit-ground-sam" data-coalition="blue">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">Y</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Red</div>
|
|
|
|
<div class="unit unit-ground unit-ground-sam" data-coalition="red">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">X</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Planes</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral, not selected</div>
|
|
|
|
<div class="unit unit-air">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral, selected</div>
|
|
|
|
<div class="unit unit-air" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, not selected</div>
|
|
|
|
<div class="unit unit-air" data-coalition="blue">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, selected</div>
|
|
|
|
<div class="unit unit-air" data-coalition="blue" data-is-selected="true" data-has-fox-1="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, not selected</div>
|
|
|
|
|
|
<div class="unit unit-air" data-coalition="red">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, selected</div>
|
|
|
|
|
|
<div class="unit unit-air" data-coalition="red" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Hotgroup</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral</div>
|
|
<div class="unit unit-air" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral, selected</div>
|
|
|
|
<div class="unit unit-air" data-is-selected="true" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR</div>
|
|
|
|
<div class="unit unit-air" data-coalition="blue" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, selected</div>
|
|
|
|
<div class="unit unit-air" data-coalition="blue" data-is-selected="true" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR</div>
|
|
|
|
<div class="unit unit-air" data-coalition="red" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, selected</div>
|
|
|
|
<div class="unit unit-air" data-coalition="red" data-is-selected="true" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Fuel states (AI only)</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">0% (empty)</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-has-low-fuel="true" data-coalition="red" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:0%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">10%</div>
|
|
|
|
<div class="unit unit-air" data-pilot="ai" data-has-low-fuel="true" data-coalition="red" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:10%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">20%</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-has-low-fuel="true" data-coalition="red">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:20%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">50%</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:50%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">75%</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:75%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">100%</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Ordinance (AI only)</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Blue</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="blue" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Blue</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="blue" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Red</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Red</div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Virtual velocity indicator</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(0deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">1</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 80px; transform:rotate(45deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">2</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(90deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">3</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(180deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">5</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 20px; transform:rotate(272deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">5</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Flight Information</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="blue">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 30px; transform:rotate(90deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Olympus 1-1</div>
|
|
<div class="unit-heading">090</div>
|
|
<div class="unit-altitude">25</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption"> </div>
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Status icons</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="unit unit-air" data-status="rtb" data-pilot="ai">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-status"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="unit unit-air" data-status="rtb" data-coalition="blue" data-is-in-hotgroup="true" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-status"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(315deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="unit unit-air" data-status="rtb" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-status"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(270deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="unit unit-air" data-status="hold" data-pilot="ai">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-status"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="unit unit-air" data-status="hold" data-coalition="blue" data-is-in-hotgroup="true" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-status"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(315deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="unit unit-air" data-status="hold" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-status"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(280deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Overlaying planes</div>
|
|
<div class="content-body">
|
|
|
|
<div id="overlaying-planes" class="example">
|
|
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
|
<div class="unit-selected-spotlight"></div>
|
|
<div class="unit-marker-border"></div>
|
|
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">4</div>
|
|
</div>
|
|
<div class="unit-marker"></div>
|
|
<div class="unit-short-label">18</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level" style="width:100%;"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div class="unit-ammo-fox-1"></div>
|
|
<div class="unit-ammo-fox-2"></div>
|
|
<div class="unit-ammo-fox-3"></div>
|
|
<div class="unit-ammo-other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">31</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Plain panel</div>
|
|
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="ol-panel">
|
|
Disconnected
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Panel list</div>
|
|
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Basic list</div>
|
|
|
|
<div class="ol-panel">
|
|
<div class="ol-panel-list">
|
|
<div class="list-item">List item 1</div>
|
|
<div class="list-item">List item 2</div>
|
|
<div class="list-item">List item 3</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">List with .highlight-primary</div>
|
|
|
|
<div class="ol-panel">
|
|
<div class="ol-panel-list">
|
|
<div class="list-item highlight-primary">List item with highlight-primary</div>
|
|
<div class="list-item highlight-bluefor">List item with highlight-bluefor</div>
|
|
<div class="list-item highlight-redfor">List item with highlight-redfor</div>
|
|
<div class="list-item highlight-neutral">List item with highlight-neutral</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Sortable list</div>
|
|
|
|
<div class="ol-panel">
|
|
<div class="ol-panel-list sortable">
|
|
<div class="sortable-item">
|
|
<div class="handle"><img src="images/buttons/reorder.svg" /></div>
|
|
<div class="list-item">List item 1</div>
|
|
</div>
|
|
<div class="sortable-item">
|
|
<div class="handle"><img src="images/buttons/reorder.svg" /></div>
|
|
<div class="list-item">List item 2</div>
|
|
</div>
|
|
<div class="sortable-item">
|
|
<div class="handle"><img src="images/buttons/reorder.svg" /></div>
|
|
<div class="list-item">List item 3</div>
|
|
</div>
|
|
</div>
|
|
<!-- JavaScript: new Sortable( element:HTMLElement, [ options:object ]) -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Panel board</div>
|
|
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="ol-panel">
|
|
<div class="ol-panel-board">
|
|
<div class="panel-section">
|
|
<h1>Unit Callsign</h1>
|
|
<div class="pill highlight-primary">Airframe</div>
|
|
<div class="pill highlight-neutral">Group</div>
|
|
</div>
|
|
<div class="panel-section">
|
|
<h2>Flight data</h2>
|
|
</div>
|
|
<div class="panel-section">
|
|
<h2>Loadout</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Button group</div>
|
|
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="ol-panel">
|
|
<div class="ol-button-group">
|
|
<button>A</button>
|
|
<button>B</button>
|
|
<button>C</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function showSection() {
|
|
|
|
document.querySelectorAll( "section" ).forEach( section => { section.style.display="none"; } );
|
|
|
|
const section = location.hash;
|
|
|
|
if ( section ) {
|
|
const index = section.split( "-" )[ 1 ];
|
|
document.querySelector( "section:nth-of-type(" + index + ")" ).style.display = "flex";
|
|
}
|
|
|
|
}
|
|
|
|
document.querySelectorAll( ".section-header" ).forEach( ( sh, i ) => {
|
|
sh.addEventListener( "click", ev => {
|
|
ev.preventDefault();
|
|
document.location.hash = "#section-" + ( i + 1 );
|
|
showSection();
|
|
|
|
});
|
|
});
|
|
|
|
showSection();
|
|
|
|
document.querySelectorAll( ".unit" ).forEach( unit => {
|
|
unit.addEventListener( "click", ev => {
|
|
console.log( unit.dataset.isSelected );
|
|
unit.dataset.isSelected = ( unit.dataset.isSelected === "true" ) ? null : "true";
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |