mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
1454 lines
70 KiB
HTML
1454 lines
70 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Olympus UI Kit</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/olympus.css" />
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/uikit.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="content-wrapper">
|
|
|
|
<h1>Olympus UI Kit</h1>
|
|
|
|
<div class="section-header">Typeography</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>
|
|
|
|
|
|
|
|
<div class="section-header">Buttons</div>
|
|
<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>
|
|
|
|
|
|
<div class="section-header">Units</div>
|
|
<section>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Human-controlled</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, not selected</div>
|
|
<div class="unit" data-pilot="human" data-coalition="blue" data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, selected</div>
|
|
<div class="unit"
|
|
data-pilot="human"
|
|
data-coalition="blue"
|
|
data-fuel-level="100"
|
|
data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, not selected</div>
|
|
<div class="unit"
|
|
data-pilot="human"
|
|
data-coalition="red"
|
|
data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">5</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, selected</div>
|
|
<div class="unit"
|
|
data-pilot="human"
|
|
data-coalition="red"
|
|
data-fuel-level="100"
|
|
data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">5</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">Neutral</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Not selected, no hotgroup</div>
|
|
<div class="unit" data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Selected, no hotgroup</div>
|
|
<div class="unit"
|
|
data-fuel-level="100"
|
|
data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Not selected, in hotgroup</div>
|
|
<div class="unit" data-fuel-level="100" data-is-in-hotgroup="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Selected, in hotgroup</div>
|
|
<div class="unit"
|
|
data-fuel-level="100"
|
|
data-is-selected="true"
|
|
data-is-in-hotgroup="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">1</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">BLUEFOR</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Not selected, no hotgroup</div>
|
|
<div class="unit" data-coalition="blue"
|
|
data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Selected, no hotgroup</div>
|
|
<div class="unit" data-coalition="blue"
|
|
data-fuel-level="100"
|
|
data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Not selected, in hotgroup</div>
|
|
<div class="unit" data-coalition="blue" data-is-in-hotgroup="true"
|
|
data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Selected, in hotgroup</div>
|
|
<div class="unit" data-coalition="blue"
|
|
data-fuel-level="100"
|
|
data-is-selected="true"
|
|
data-is-in-hotgroup="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">1</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">REDFOR</div>
|
|
<div class="content-body">
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Not selected, no hotgroup</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">23</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Selected, no hotgroup</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="100" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">31</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Not selected, in hotgroup</div>
|
|
<div class="unit" data-coalition="red" data-is-in-hotgroup="true"
|
|
data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">33</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Selected, in hotgroup</div>
|
|
<div class="unit" data-coalition="red" data-is-selected="true" data-is-in-hotgroup="true"
|
|
data-fuel-level="100">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">21</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">1</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="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" data-coalition="red"
|
|
data-fuel-level="0"
|
|
data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
<div class="unit-fuel-empty">X</div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">10%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="10" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
<div class="unit-fuel-empty">X</div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">20%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="20" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
<div class="unit-fuel-empty">X</div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">30%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="30" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">40%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="40" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">50%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="50" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">60%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="60" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">70%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="70" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">80%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="80" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">90%</div>
|
|
<div class="unit" data-coalition="red"
|
|
data-fuel-level="90" data-is-selected="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="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">BLUEFOR, Fox 1</div>
|
|
<div class="unit"
|
|
data-coalition="blue"
|
|
data-fuel-level="100"
|
|
data-is-selected="true"
|
|
data-has-fox-1="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, Fox 2</div>
|
|
<div class="unit"
|
|
data-coalition="blue"
|
|
data-fuel-level="100"
|
|
data-is-selected="true"
|
|
data-has-fox-2="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, Fox 3</div>
|
|
<div class="unit"
|
|
data-coalition="red"
|
|
data-is-selected="true"
|
|
data-fuel-level="100"
|
|
data-has-fox-3="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, other ammo</div>
|
|
<div class="unit"
|
|
data-coalition="red"
|
|
data-fuel-level="100"
|
|
data-is-selected="true"
|
|
data-has-other-ammo="true">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Neutral, all ordinance</div>
|
|
<div class="unit"
|
|
data-fuel-level="100"
|
|
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-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="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">BLUEFOR, stationary</div>
|
|
<div class="unit"
|
|
data-coalition="blue"
|
|
data-pilot="human">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading" style="width:0;"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, 360°</div>
|
|
<div class="unit"
|
|
data-coalition="blue"
|
|
data-pilot="human">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading" style="transform:rotate(360deg); width:24px;"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">BLUEFOR, 121°</div>
|
|
<div class="unit"
|
|
data-coalition="blue"
|
|
data-pilot="human">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading" style="transform:rotate(121deg); width:34px;"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, 201°</div>
|
|
<div class="unit"
|
|
data-coalition="red"
|
|
data-pilot="human">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading" style="transform:rotate(201deg); width:45px;"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">REDFOR, 329°</div>
|
|
<div class="unit"
|
|
data-coalition="red"
|
|
data-pilot="human">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading" style="transform:rotate(329deg); width:70px;"></div>
|
|
</div>
|
|
<div class="unit-id">33</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id">6</div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="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">Olympus 1-1; 090°; 20,000ft</div>
|
|
<div class="unit"
|
|
data-coalition="blue"
|
|
data-pilot="human">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading" style="transform: rotate(90deg); width:40;"></div>
|
|
</div>
|
|
<div class="unit-id">18</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id"></div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="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">20</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
|
|
<div class="caption">Olympus 3-1; 260°; 30,000ft</div>
|
|
<div class="unit"
|
|
data-coalition="red"
|
|
data-pilot="human">
|
|
<div class="unit-spotlight">
|
|
<div class="unit-selected-border">
|
|
<div class="unit-vvi">
|
|
<div class="unit-vvi-heading" style="transform: rotate(260deg); width:60px;"></div>
|
|
</div>
|
|
<div class="unit-id">29</div>
|
|
</div>
|
|
</div>
|
|
<div class="unit-hotgroup">
|
|
<div class="unit-hotgroup-id"></div>
|
|
</div>
|
|
<div class="unit-fuel">
|
|
<div class="unit-fuel-level"></div>
|
|
</div>
|
|
<div class="unit-ammo">
|
|
<div data-ammo-type="fox-1"></div>
|
|
<div data-ammo-type="fox-2"></div>
|
|
<div data-ammo-type="fox-3"></div>
|
|
<div data-ammo-type="other"></div>
|
|
</div>
|
|
<div class="unit-summary">
|
|
<div class="unit-callsign">Olympus 3-1</div>
|
|
<div class="unit-heading">260</div>
|
|
<div class="unit-altitude">30</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="section-header">.ol-panel</div>
|
|
<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>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |