More svg injection, removing stringed html from code

This commit is contained in:
Pax1601
2023-05-24 08:21:04 +02:00
parent a2664dc676
commit e7ce9ac76d
123 changed files with 1439 additions and 1829 deletions

View File

@@ -9,9 +9,7 @@
<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;700;800&display=swap" rel="stylesheet">
<script src="javascripts/svg-inject.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700;800&display=swap">
</head>
<body>

View File

@@ -4,7 +4,7 @@
<img src="images/icon.png" class="main-logo" />
</div>
<div class="ol-select-options">
<div id="olympus-toolbar-summary">
<div id="toolbar-summary">
<h3>DCS Olympus</h3>
<div class="accent-green app-version-number">version v0.2.1</div>
</div>

View File

@@ -40,21 +40,21 @@
<div id="roe">
<h4>Rules of engagement</h4>
<div id="roe-buttons-container" class="ol-group ol-button-box">
<div id="roe-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the roe buttons will be shown -->
</div>
</div>
<div id="threat">
<h4>Reaction to threat</h4>
<div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box">
<div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the reaction to threat buttons will be shown -->
</div>
</div>
<div id="emissions-countermeasures">
<h4>Radar & ECM</h4>
<div id="emissions-countermeasures-buttons-container" class="ol-group ol-button-box">
<div id="emissions-countermeasures-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the emissions/countermeasures buttons will be shown -->
</div>
</div>

View File

@@ -2,7 +2,7 @@
<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="./resources/theme/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" />
@@ -172,7 +172,7 @@
<div data-object="unit-groundunit-other" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">Z</div>
</div>
@@ -184,7 +184,7 @@
<div data-object="unit-groundunit-other" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">Y</div>
</div>
@@ -196,7 +196,7 @@
<div data-object="unit-groundunit-other" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">X</div>
</div>
@@ -218,7 +218,7 @@
<div data-object="unit-groundunit-sam" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">Z</div>
</div>
@@ -230,7 +230,7 @@
<div data-object="unit-groundunit-sam" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">Y</div>
</div>
@@ -242,7 +242,7 @@
<div data-object="unit-groundunit-sam" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">X</div>
</div>
@@ -263,7 +263,7 @@
<div data-object="unit-navyunit" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">Z</div>
</div>
@@ -275,7 +275,7 @@
<div data-object="unit-navyunit" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">Y</div>
</div>
@@ -287,7 +287,7 @@
<div data-object="unit-navyunit" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">X</div>
</div>
@@ -308,7 +308,7 @@
<div data-object="unit-building" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">J</div>
</div>
@@ -320,7 +320,7 @@
<div data-object="unit-building" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">K</div>
</div>
@@ -332,7 +332,7 @@
<div data-object="unit-building" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">L</div>
</div>
@@ -360,7 +360,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:0%;"></div>
@@ -384,7 +384,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:10%;"></div>
@@ -407,7 +407,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:20%;"></div>
@@ -430,7 +430,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:50%;"></div>
@@ -453,7 +453,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:75%;"></div>
@@ -476,7 +476,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -509,7 +509,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -539,7 +539,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -568,7 +568,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -598,7 +598,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -628,7 +628,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -657,7 +657,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -695,7 +695,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -725,7 +725,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -754,7 +754,7 @@
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-icon"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -791,7 +791,7 @@
<div class="example">
<div data-object="unit-missile">
<div class="unit-marker"></div>
<div class="unit-icon"></div>
</div>
</div>
@@ -800,7 +800,7 @@
<div class="example">
<div data-object="unit-missile" data-coalition="blue">
<div class="unit-marker" style="transform: rotate( 90deg );"></div>
<div class="unit-icon" style="transform: rotate( 90deg );"></div>
</div>
</div>
@@ -808,7 +808,7 @@
<div class="example">
<div data-object="unit-missile" data-coalition="red">
<div class="unit-marker" style="transform: rotate( 225deg );"></div>
<div class="unit-icon" style="transform: rotate( 225deg );"></div>
</div>
</div>
@@ -1183,19 +1183,19 @@
<div class="caption">Actions</div>
<div class="icon-list">
<div>
<img src="/themes/olympus/images/icons_actions_gas_dark.svg" />
<img src="/resources/theme/images/icons_actions_gas_dark.svg" />
<span>icons_actions_gas</span>
</div>
<div>
<img src="/themes/olympus/images/icons_actions_nothing_dark.svg" />
<img src="/resources/theme/images/icons_actions_nothing_dark.svg" />
<span>icons_actions_nothing</span>
</div>
<div>
<img src="/themes/olympus/images/icons_actions_rtb_dark.svg" />
<img src="/resources/theme/images/icons_actions_rtb_dark.svg" />
<span>icons_actions_rtb</span>
</div>
<div>
<img src="/themes/olympus/images/icons_actions_search_dark.svg" />
<img src="/resources/theme/images/icons_actions_search_dark.svg" />
<span>icons_actions_search</span>
</div>
</div>
@@ -1205,19 +1205,19 @@
<div class="caption">RoE</div>
<div class="icon-list">
<div>
<img src="/themes/olympus/images/icons_roe_free_dark.svg" />
<img src="/resources/theme/images/icons_roe_free_dark.svg" />
<span>icons_roe_free</span>
</div>
<div>
<img src="/themes/olympus/images/icons_roe_return_dark.svg" />
<img src="/resources/theme/images/icons_roe_return_dark.svg" />
<span>icons_roe_return</span>
</div>
<div>
<img src="/themes/olympus/images/icons_roe_stop_dark.svg" />
<img src="/resources/theme/images/icons_roe_stop_dark.svg" />
<span>icons_roe_stop</span>
</div>
<div>
<img src="/themes/olympus/images/icons_roe_target_dark.svg" />
<img src="/resources/theme/images/icons_roe_target_dark.svg" />
<span>icons_roe_target</span>
</div>
</div>
@@ -1227,11 +1227,11 @@
<div class="caption">Threat</div>
<div class="icon-list">
<div>
<img src="/themes/olympus/images/icons_threat_protect_dark.svg" />
<img src="/resources/theme/images/icons_threat_protect_dark.svg" />
<span>icons_threat_protect</span>
</div>
<div>
<img src="/themes/olympus/images/icons_threat_retreat_dark.svg" />
<img src="/resources/theme/images/icons_threat_retreat_dark.svg" />
<span>icons_threat_retreat</span>
</div>
</div>