Changed style of unitinfopanel

This commit is contained in:
dpassoni
2023-01-24 18:50:08 +01:00
parent 4e7f6c6c39
commit b8b2590323
20 changed files with 383 additions and 200 deletions

View File

@@ -4,18 +4,21 @@
<title>Olympus client</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="stylesheets/leaflet.css">
<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">
</head>
<body>
<div id="map-container"></div>
<%- include('unitinfo.ejs') %>
<%- include('selectionwheel.ejs') %>
<%- include('selectionscroll.ejs') %>
<div class="olympus-dropdown" id="map-source-dropdown">Satellite</div>
<div class="olympus-dropdown" id="scenario-dropdown">Nevada</div>
<%- include('unitcontrol.ejs') %>
<%- include('visibilitycontrol.ejs') %>
<%- include('connectionstatus.ejs') %>
<div class="olympus-dropdown" id="map-source-dropdown"></div>
<div class="olympus-dropdown" id="scenario-dropdown"></div>
<%- include('unitinfopanel.ejs') %>
<%- include('unitcontrolpanel.ejs') %>
<%- include('visibilitycontrolpanel.ejs') %>
<%- include('connectionstatuspanel.ejs') %>
<script src="javascripts/bundle.js"></script>
</body>

View File

@@ -1,78 +0,0 @@
<div class="olympus-panel" id="unit-info-panel">
<table>
<tr>
<td colspan="4" class="olympus-panel-title">
UNIT INFO
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Name:
</td>
<td class="olympus-panel-content" id="unit-name">
</td>
<td class="olympus-panel-label">
Group:
</td>
<td class="olympus-panel-content" id="group-name">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Heading:
</td>
<td class="olympus-panel-content" id="heading">
</td>
<td class="olympus-panel-label">
Altitude:
</td>
<td class="olympus-panel-content" id="altitude">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Ground speed:
</td>
<td class="olympus-panel-content" id="groundspeed">
</td>
<td class="olympus-panel-label">
Fuel:
</td>
<td class="olympus-panel-content" id="fuel">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Position:
</td>
<td class="olympus-panel-content" colspan="3" id="position">
</td>
<td>
</td>
</tr>
</table>
<table class="panel-table" id="tactical-info-table">
<tr>
<td colspan="4" class="olympus-panel-title">
TACTICAL INFO
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Current task:
</td>
<td class="olympus-panel-content" colspan="3" id="task">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Weapons:
</td>
<td class="olympus-panel-content" colspan="3" id="loadout">
</td>
</tr>
<tr>
<td style="height:100%"></td>
</tr>
</table>
</div>

View File

@@ -0,0 +1,35 @@
<div class="olympus-panel padding-large" id="unit-info-panel">
<div id="general">
<div id="name">Olympus-6</div>
<div class="rectangular-container">F-15C</div>
<div class="rectangular-container">Olympus-1</div>
<div class="rounded-container" id="task">Reaching destination</div>
</div>
<div class="vl h-margin-largest"></div>
<div id="flight-data">
<div id="flight-data-label">Flight data</div>
<div id="latitude">N37°17'33.25"</div>
<div id="longitude">W115°42'14.70"</div>
<img class="flight-data-icon" src="images/icons/speed.svg">
<div class="flight-data-label">Ground Speed</div>
<div class="flight-data-value">308 kts</div>
<img class="flight-data-icon" src="images/icons/altitude.svg">
<div class="flight-data-label">Altitude</div>
<div class="flight-data-value">1064 ft</div>
<img class="flight-data-icon" src="images/icons/heading.svg">
<div class="flight-data-label">Heading</div>
<div class="flight-data-value">67</div>
</div>
<div class="vl h-margin-largest"></div>
<div id="loadout-data">
<div id="loadout-label">Loadout</div>
<img class="flight-data-icon" src="images/icons/fuel.svg">
<div class="flight-data-label">Fuel</div>
<div class="flight-data-value">15%</div>
<div class="rectangular-container-dark">2x AIM-120B</div>
<div class="rectangular-container-dark">2x AIM-9P</div>
<div class="rectangular-container-dark">100x 50mm HE</div>
<div class="rectangular-container-dark">2x AGM-68</div>
</div>
</div>