Added splash screen (via feature switch).

client/public/stylesheets/layout.css

@@ -349,15 +349,19 @@ dl.data-grid dd {
 }
 
 
-.ol-panel.ol-dialog {
+.ol-dialog {
 	align-self: center;
 	background-color: var( --background-slate-blue );
+	color:white;
 	justify-self: center;
-	padding:25px;
 	position: absolute;
 	z-index:1000;
 }
 
+.ol-panel.ol-dialog {
+	padding:25px;
+}
+
 .ol-dialog-close {
 	cursor: pointer;
 	font-size:16px;

client/public/stylesheets/olympus.css

@@ -82,7 +82,7 @@ form > div {
 
 
 .pill {
-    background-color: var( --background-darksteel );
+    background-color: var( --background-dark-steel );
     border-radius: var(--border-radius-sm);
     padding: 4px 8px;
     width: fit-content;
@@ -773,4 +773,76 @@ body[data-hide-naval] #unit-visibility-control-naval {
 
 #reaction-to-threat-buttons-container button[title="Abort"].selected::before {
     background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
+}
+
+
+#splash-screen {
+    background-image: url( "/images/splash/splash_pic_ship.png" );
+    background-position:100% 50%;
+    background-size:320px;
+    border-radius: var( --border-radius-lg );
+    display:none;
+    overflow: hidden;
+    width:700px;
+}
+
+#splash-content {
+    background-color: var( --background-steel );
+    display: flex;
+    flex-direction: column;
+    padding:20px;
+    position:relative;
+    row-gap:10px;
+    width:55%;
+    z-index:10;
+}
+
+#splash-content::after {
+    background-color: var( --background-steel );
+    content: "";
+    display: block;
+    height:250px;
+    position: absolute;
+    right:0;
+    top:0;
+    transform: rotate(-23deg);
+    transform-origin: top right;
+    width:200px;
+    z-index: -1;
+}
+
+#splash-content #app-summary {
+    background-image: url( "/images/olympus-500x500.png" );
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    background-size:75px 75px;
+    content: "";
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 75px;
+    text-indent: 85px;
+}
+
+#splash-content #app-summary > * {
+    height:fit-content;
+    line-height: 25px;
+    white-space: nowrap;
+    width:fit-content;
+}
+
+#splash-content .app-version {
+    font-size:11px;
+}
+
+#splash-content #legal-stuff h4 {
+    text-transform:uppercase;
+}
+
+#splash-content #legal-stuff p {
+    font-size:10px;
+}
+
+.feature-splashScreen #splash-screen {
+    display:flex;
 }

client/src/FeatureSwitches.ts

@@ -87,6 +87,13 @@ export class FeatureSwitches {
             "label": "Force show unit control panel",
             "masterSwitch": true,
             "name": "forceShowUnitControlPanel"
+        }),
+        
+        new FeatureSwitch({
+            "defaultEnabled": false,
+            "label": "Show splash screen",
+            "masterSwitch": true,
+            "name": "splashScreen"
         })
 
     ];

client/views/dialogs.ejs

@@ -1,4 +1,25 @@
-<div id="aircraft-settings-dialog" class="ol-panel ol-dialog" role="dialog">
+<div id="splash-screen" class="ol-dialog" data-on-click="closeDialog">
+
+    <div id="splash-content" class="ol-dialog-content">
+
+        <div id="app-summary">
+            <h2>DCS Olympus</h2>
+            <h4>Dynamic Unit Command</h4>
+            <div class="app-version">Version <span class="app-version-number">v0.1.0</span></div>
+        </div>
+
+        <div id="legal-stuff">
+            <h4>Disclaimer</h4>
+            <p>We ain't no friends with no Eagle Dynamics.</p>
+        </div>
+
+    </div>
+
+</div>
+
+
+
+<div id="aircraft-settings-dialog" class="ol-panel ol-dialog hide" >
 
     <div class="ol-dialog-close" data-on-click="closeDialog"></div>
 

client/views/navbar.ejs

@@ -7,7 +7,7 @@
         <div class="ol-select-options">
             <div id="olympus-toolbar-summary">
                 <h3>Olympus</h3>
-                <div class="accent-green">v0.1.0</div>
+                <div class="accent-green app-version-number">v0.1.0</div>
             </div>
             <div>
                 <a href="https://www.discord.com" target="_blank">Discord</a>