mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
More work on new manager design
This commit is contained in:
Pax1601
@@ -1,62 +1,55 @@
|
||||
<style>
|
||||
#summary {
|
||||
width: 70%;
|
||||
#manager-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
color: var(--offwhite);
|
||||
padding: 80px;
|
||||
min-height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#summary .icon {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
#summary div:nth-child(1) {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#summary div:nth-child(2) {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#summary div:nth-child(3) {
|
||||
color: var(--lightgray);
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
margin-top: 20px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#manager-menu #menu {
|
||||
#manager-menu>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
width: 60%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#manager-menu .option {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--offwhite);
|
||||
width: 460px;
|
||||
height: 70px;
|
||||
height: 110px;
|
||||
color: var(--offwhite);
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
align-items: start;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: var(--offwhite);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
row-gap: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#manager-menu .option>div {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#manager-menu .option::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("./icons/chevron-right-solid.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#manager-menu .option:hover {
|
||||
@@ -73,29 +66,31 @@
|
||||
#manager-menu .option * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#manager-menu .divider {
|
||||
width: 460px;
|
||||
border-color: var(--darkgray) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="manager-menu">
|
||||
<div id="summary">
|
||||
<div>DCS OLYMPUS <img class="icon" src="../img/OlympusLogoFinal_4k.png" \></div>
|
||||
<div>INSTALL WIZARD AND MANAGER</div>
|
||||
<div>Using this manager, you can install Olympus, update settings, and view and manage instances</div>
|
||||
<div id="summary" style="width: 70%; height: 100%; color: var(--offwhite); padding: 80px;">
|
||||
<div style="font-size: 50px; font-weight: bold;">
|
||||
DCS OLYMPUS <img src="../img/OlympusLogoFinal_4k.png" style="height: 100px; width: 100px; margin-bottom: -30px;"\>
|
||||
</div>
|
||||
<div style="font-size: 20px; font-weight: bold;">
|
||||
INSTALL WIZARD AND MANAGER
|
||||
</div>
|
||||
<div style="color: var(--lightgray); font-size: 13px; font-weight: normal; margin-top: 20px; width: 300px;">
|
||||
Using this manager, you can install Olympus, update settings, and view and manage instances
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<div class="option install <%= installEnabled? '': 'disabled' %>">
|
||||
Run Install wizard
|
||||
<div id="menu" style="row-gap: 20px; width: 60%;">
|
||||
<div class="option <%= installEnabled? '': 'disabled' %>" onclick="signal('onInstallClicked')">
|
||||
Add Olympus
|
||||
<div>
|
||||
Add or update Olympus to a new DCS instance
|
||||
</div>
|
||||
</div>
|
||||
<div class="option edit <%= editEnabled? '': 'disabled' %>">
|
||||
Update settings
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="option uninstall <%= uninstallEnabled? '': 'disabled' %>">
|
||||
Remove Olympus
|
||||
<div class="option <%= editEnabled? '': 'disabled' %>" onclick="signal('onEditClicked')">
|
||||
Change settings
|
||||
<div>
|
||||
Adjust port, address and password settings
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,61 +1,23 @@
|
||||
<style>
|
||||
#manager-type .option {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--offwhite);
|
||||
width: 220px;
|
||||
height: 60px;
|
||||
color: var(--offwhite);
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: var(--offwhite);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#manager-type .option:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-type .buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="manager-type">
|
||||
<div class="step-summary">
|
||||
<div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
|
||||
<div class="white">Type of install</div>
|
||||
<div class="empty">Ports and address</div>
|
||||
<div class="empty">Passwords</div>
|
||||
<div class="empty"> <%= install? 'Install': 'Update' %></div>
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
Step 1 of 4
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Do you want to install Olympus for singleplayer or multiplayer?
|
||||
</span>
|
||||
<span>
|
||||
Select Single player if you only want to play locally on your own computer. <br>
|
||||
If you want Olympus to be used on a different computer or over the internet for a dedicated server, select the multiplayer option.
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="option button singleplayer">
|
||||
Singleplayer
|
||||
</div>
|
||||
<div class="option button multiplayer">
|
||||
Multiplayer
|
||||
</div>
|
||||
</div>
|
||||
<div class="button cancel">
|
||||
<%= install? "Cancel installation": "Cancel editing" %>
|
||||
</div>
|
||||
<div class="title">
|
||||
Do you want to add Olympus for singleplayer or multiplayer?
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
Select singleplayer if you only want to play locally on your own computer. <br>
|
||||
Select multiplayer if you want Olympus to be useable over the internet from a different computer, or this instance is a dedicated server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button">
|
||||
Singleplayer
|
||||
</div>
|
||||
<div class="button">
|
||||
Multiplayer
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<style>
|
||||
#manager-welcome {
|
||||
#manager-welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
@@ -8,7 +8,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#manager-welcome span {
|
||||
#manager-welcome .instructions {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
color: var(--offwhite);
|
||||
@@ -48,20 +48,20 @@
|
||||
|
||||
</style>
|
||||
<div id="manager-welcome">
|
||||
<span style="font-size: 28px; font-weight: bold;">
|
||||
Do you want to use the Olympus Manager in basic or advanced mode?
|
||||
</span>
|
||||
<span style="color: var(--gray);">
|
||||
<div class="instructions" style="font-size: 28px; font-weight: bold;">
|
||||
Do you want to use the Olympus Manager in basic or Expert mode?
|
||||
</div>
|
||||
<div class="instructions" style="color: var(--gray);">
|
||||
Basic mode is recommended for most users. <br>
|
||||
Advanced mode is for those who know how Olympus works or for server owners.
|
||||
</span>
|
||||
<span style="color: var(--gray); font-weight: bold;">
|
||||
Expert mode is for those who know how Olympus works or for server owners.
|
||||
</div>
|
||||
<div class="instructions" style="color: var(--gray); font-weight: bold;">
|
||||
You can change this setting at any time.
|
||||
</span>
|
||||
<div class="option basic">
|
||||
</div>
|
||||
<div class="option basic" onclick="signal('onBasicClicked')">
|
||||
Basic mode
|
||||
</div>
|
||||
<div class="option advanced">
|
||||
Advanced mode
|
||||
<div class="option expert" onclick="signal('onExpertClicked')">
|
||||
Expert mode
|
||||
</div>
|
||||
</div>
|
||||
53
manager/ejs/wizard.ejs
Normal file
53
manager/ejs/wizard.ejs
Normal file
@@ -0,0 +1,53 @@
|
||||
<style>
|
||||
.wizard-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
padding: 60px 120px;
|
||||
}
|
||||
|
||||
.buttons-footer {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
color: var(--offwhite);
|
||||
}
|
||||
|
||||
.instructions .step {
|
||||
|
||||
}
|
||||
|
||||
.instructions .title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
<div class="wizard-page">
|
||||
<div class="cancel" style="font-size: 14px; font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px;">
|
||||
<img src="./icons/chevron-left-solid.svg" style="height: 14px;">Cancel install
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
<div class="buttons-footer">
|
||||
<div class="button back" style="color: var(--offwhite); background-color: var(--background); border: 1px solid var(--offwhite);">
|
||||
Back
|
||||
</div>
|
||||
<div class="button next" style="color: var(--background); background-color: var(--offwhite);">
|
||||
Next
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user