mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Implement more wizard page, result page still wip
This commit is contained in:
Pax1601
@@ -1,142 +1,89 @@
|
||||
<style>
|
||||
#manager-connections .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-connections .option:hover {
|
||||
color: var(--background);
|
||||
background-color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-connections .buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
#manager-connections .success,
|
||||
#manager-connections .error {
|
||||
#connections-page .success,
|
||||
#connections-page .error {
|
||||
position: absolute;
|
||||
left: 420px;
|
||||
left: 320px;
|
||||
display: flex;
|
||||
width: 150px;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#manager-connections .success {
|
||||
#connections-page .success {
|
||||
content: url("./icons/check-solid-green.svg");
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#manager-connections .error img {
|
||||
#connections-page .error img {
|
||||
content: url("./icons/triangle-exclamation-solid.svg");
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#manager-connections .error span {
|
||||
#connections-page .error span {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: var(--red);
|
||||
height: fit-content;
|
||||
}
|
||||
</style>
|
||||
<div id="manager-connections">
|
||||
<div class="step-summary">
|
||||
<div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
|
||||
<div class="blue">Type of install</div>
|
||||
<div class="white">Ports and address</div>
|
||||
<div class="empty">Passwords</div>
|
||||
<div class="empty"> <%= install? 'Install': 'Update' %></div>
|
||||
<div id="connections-page">
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
Step 3 of 4
|
||||
</div>
|
||||
<div class="title">
|
||||
Manually set Olympus port and address settings
|
||||
</div>
|
||||
<div class="note">
|
||||
Please note: you may be required to allow these ports through your firewall and modem/router via port
|
||||
forwarding. <br>
|
||||
Otherwise, others may not be able to connect to Olympus.
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<% if (selectAutoOrManual) { %>
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Do you want to set port and address settings manually?
|
||||
</span>
|
||||
<span>
|
||||
We can auto setup ports and addresses for you, or you can set the manually. <br>
|
||||
If you don't have an understanding of how Olympus works, we recommend the auto option.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<div class="option button auto">
|
||||
Auto apply settings
|
||||
<div class="wizard-inputs">
|
||||
<div class="input-group client-port">
|
||||
<span>Client port
|
||||
<img src="./icons/circle-info-solid.svg"
|
||||
title="This port is used to allow access to Olympus.
|
||||
Be sure to allow this port through your firewall if you want people to connect remotely">
|
||||
</span>
|
||||
<div>
|
||||
<input type="number" min="1024" max="65535" value="<%= activeInstance[" clientPort"] %>">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
</div>
|
||||
<div class="option button manual">
|
||||
Manually set options
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% } else { %>
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Enter the ports and address to use.
|
||||
</span>
|
||||
<span>
|
||||
Select client and backend ports, making sure they are free to use with the provided check. <br>
|
||||
Unless you want to support direct API calls to the backend, you can keep the address to localhost even for dedicated servers.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group client-port">
|
||||
<span>Client port
|
||||
<img src="./icons/circle-info-solid.svg" title="This port is used to allow access to Olympus. Be sure to allow this port through your firewall if you want people to connect remotely">
|
||||
</span>
|
||||
<div>
|
||||
<input type="number" min="1024" max="65535" value="<%= activeInstance["clientPort"] %>">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group backend-port">
|
||||
<span>Backend port
|
||||
<img src="./icons/circle-info-solid.svg" title="This port is used to allow access to Olympus. Be sure to allow this port through your firewall if you want people to connect remotely.">
|
||||
</span>
|
||||
<div>
|
||||
<input type="number" min="1024" max="65535" value="<%= activeInstance["backendPort"] %>">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group backend-address">
|
||||
<span>Backend address
|
||||
<img src="./icons/circle-info-solid.svg" title="This is the backend address Olympus will listen on. Unless you know what you are doing, leave it as localhost, even for dedicated server installations.">
|
||||
</span>
|
||||
<input type="text" value="<%= activeInstance["backendAddress"] %>">
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="buttons-footer">
|
||||
<div class="button back">
|
||||
Back
|
||||
</div>
|
||||
<div class="button next">
|
||||
Next
|
||||
</div>
|
||||
</div>
|
||||
<div class="button cancel">
|
||||
<%= install? "Cancel installation": "Cancel editing" %>
|
||||
<div class="input-group backend-port">
|
||||
<span>Backend port
|
||||
<img src="./icons/circle-info-solid.svg"
|
||||
title="This port is used by Olympus to communicate with DCS.
|
||||
You only need to allow it through your firewall if you enable direct API connection">
|
||||
</span>
|
||||
<div>
|
||||
<input type="number" min="1024" max="65535" value="<%= activeInstance[" backendPort"] %>"
|
||||
onchange="signal('onBackendPortChanged', this.value)">
|
||||
<img class="success hide">
|
||||
<div class="error hide">
|
||||
<img> <span>Port already in use</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group backend-address">
|
||||
<span onclick="signal('onEnableAPIClicked')">
|
||||
<div class="checkbox"></div> Enable direct backend API connection
|
||||
<img src="./icons/circle-info-solid.svg"
|
||||
title="Allows services to connect to Olympus directly.
|
||||
This is NOT NEEDED for normal Olympus operation, even for dedicated servers.
|
||||
Leave it unchecked if in doubt.">
|
||||
</span>
|
||||
</div>
|
||||
<div class="note warning">
|
||||
Note: if you enable direct backend API connection, you will be required to run DCS as admin or run the netsh
|
||||
command for others to connect. Leave unchecked if you don't know what this is. <br>See the Olympus
|
||||
documentation for more details.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
manager/ejs/connectionsType.ejs
Normal file
25
manager/ejs/connectionsType.ejs
Normal file
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div>
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
Step 2 of 4
|
||||
</div>
|
||||
<div class="title">
|
||||
Do you want to set port and address settings?
|
||||
</div>
|
||||
<div class="description">
|
||||
We can automatically set port and address settings for you, or you can set them manually. <br>
|
||||
If you don't have a good understanding of how Olympus works, we recommend the <i>auto apply settings</i> option.
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-inputs">
|
||||
<div class="button radio auto selected" onclick="signal('onConnectionsTypeClicked', 'auto')">
|
||||
Auto apply settings
|
||||
</div>
|
||||
<div class="button radio manual" onclick="signal('onConnectionsTypeClicked', 'manual')">
|
||||
Manually set
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,51 +1,37 @@
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div id="manager-passwords">
|
||||
<div class="step-summary">
|
||||
<div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
|
||||
<div class="blue">Type of install</div>
|
||||
<div class="blue">Ports and address</div>
|
||||
<div class="white">Passwords</div>
|
||||
<div class="empty"> <%= install? 'Install': 'Update' %></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="instructions">
|
||||
<span>
|
||||
Enter your passwords to access Olympus
|
||||
</span>
|
||||
<span>
|
||||
When logging into Olympus, these passwords will let you access the different roles. Gamemaster is the default.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</style>
|
||||
<div id="passwords-page">
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
Step 4 of 4
|
||||
</div>
|
||||
<div class="title">
|
||||
Enter your passwords for Olympus
|
||||
</div>
|
||||
<div class="description">
|
||||
When logging into Olympus, these passwords will let you access the different roles. <br>
|
||||
Game Master is the default and is used as a global commander. The other two are used as a part of the RTS mode.
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-inputs">
|
||||
<div class="input-group game-master">
|
||||
<span>Game Master Password<img src="./icons/circle-info-solid.svg" title="This password is used to access Olympus as Game Master with full privileges.">
|
||||
<span>Game Master Password<img src="./icons/circle-info-solid.svg"
|
||||
title="This password is used to access Olympus as Game Master with full privileges.">
|
||||
</span>
|
||||
<input type="password" minlength="8">
|
||||
</div>
|
||||
<div class="input-group blue-commander">
|
||||
<span>Blue Commander Password<img src="./icons/circle-info-solid.svg" title="This password is used to access Olympus as blue coalition Commander.">
|
||||
<span>Blue Commander Password<img src="./icons/circle-info-solid.svg"
|
||||
title="This password is used to access Olympus as blue coalition Commander.">
|
||||
</span>
|
||||
<input type="password" minlength="8">
|
||||
</div>
|
||||
<div class="input-group red-commander">
|
||||
<span>Red Commander Password<img src="./icons/circle-info-solid.svg" title="This password is used to access Olympus as red coalition Commander.">
|
||||
<span>Red Commander Password<img src="./icons/circle-info-solid.svg"
|
||||
title="This password is used to access Olympus as red coalition Commander.">
|
||||
</span>
|
||||
<input type="password" minlength="8">
|
||||
</div>
|
||||
<div class="buttons-footer">
|
||||
<div class="button back">
|
||||
Back
|
||||
</div>
|
||||
<div class="button next">
|
||||
Next
|
||||
</div>
|
||||
</div>
|
||||
<% if (!singleInstance) { %>
|
||||
<div class="button cancel">
|
||||
<%= install? "Cancel installation": "Cancel editing" %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,146 +1,128 @@
|
||||
<style>
|
||||
#manager-result .content {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#manager-result img.success {
|
||||
content: url("./icons/check-solid-green.svg");
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
#result-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
padding: 60px 120px;
|
||||
}
|
||||
|
||||
#manager-result img.error {
|
||||
content: url("./icons/triangle-exclamation-solid.svg");
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
#result-page .result-summary {
|
||||
padding: 25px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#manager-result img.wait {
|
||||
content: url("./icons/spinner-solid.svg");
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
#manager-result .summary {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#manager-result .summary.success {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
#manager-result .summary.error {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
#manager-result .info {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-result .step {
|
||||
#result-page .result-summary .title {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#result-page .result-summary .title img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#result-page .result-summary .description {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#result-page .result-summary.wait{
|
||||
color: var(--offwhite);
|
||||
column-gap: 10px;
|
||||
border: 1px solid var(--offwhite);
|
||||
}
|
||||
|
||||
#manager-result .result {
|
||||
cursor: pointer;
|
||||
background-color: var(--darkgray);
|
||||
border-left: 5px solid var(--blue);
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
color: white;
|
||||
#result-page .result-summary.success{
|
||||
color: var(--background-color);
|
||||
background-color: var(--green);
|
||||
}
|
||||
|
||||
#result-page .result-summary.error{
|
||||
color: var(--background-color);
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
#result-page .usage-instructions {
|
||||
background-color: var(--background-usage);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding-left: 15px;
|
||||
flex-direction: row;
|
||||
column-gap: 25px;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
width: 500px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
#manager-result .result>img {
|
||||
margin-left: 5px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#manager-result .result>div {
|
||||
#result-page .usage-instructions>div {
|
||||
color: var(--offwhite);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
#manager-result .result>div>span:nth-child(1) {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#manager-result .result>div>span:nth-child(2) {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: start;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#result-page .usage-instructions>div>img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#result-page .usage-instructions>img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
<div id="manager-result">
|
||||
<div class="content">
|
||||
<div class="step hook <%= !install? 'hide': '' %>">
|
||||
Installing hook scripts<img class="wait"><img class="success hide"><img class="error hide">
|
||||
</div>
|
||||
<div class="step mod <%= !install? 'hide': '' %>">
|
||||
Installing mod folder<img class="wait"><img class="success hide"><img class="error hide">
|
||||
</div>
|
||||
<div class="step json <%= !install? 'hide': '' %>">
|
||||
Installing configuration file<img class="wait"><img class="success hide"><img class="error hide">
|
||||
</div>
|
||||
<div class="step config">
|
||||
Applying configuration<img class="wait"><img class="success hide"><img class="error hide">
|
||||
</div>
|
||||
<div class="step shortcuts <%= !install? 'hide': '' %>">
|
||||
Creating shortcuts<img class="wait"><img class="success hide"><img class="error hide">
|
||||
</div>
|
||||
|
||||
<div class="summary success hide">
|
||||
Olympus successfully installed in the following DCS instance
|
||||
</div>
|
||||
|
||||
<div class="summary error hide">
|
||||
An error has occurred while installing Olympus
|
||||
</div>
|
||||
|
||||
<div class="info success hide">
|
||||
You may now start DCS and use Olympus either with the shortcuts or the "View and manage instances" entry in the
|
||||
main menu.
|
||||
</div>
|
||||
|
||||
<div class="info error hide">
|
||||
Please make sure DCS is not currently being executed. Check <%= logLocation %> for more info.
|
||||
</div>
|
||||
|
||||
<div class="result">
|
||||
<img class="wait"><img class="success hide"><img class="error hide">
|
||||
<div id="result-page">
|
||||
<div class="result-summary wait">
|
||||
<div class="title"><img src="./icons/spinner-solid.svg">Please wait while Olympus is being added to <i><%= activeInstance["name"] %></i></div>
|
||||
</div>
|
||||
<div class="result-summary success">
|
||||
<div class="title"><img src="./icons/check-solid-background.svg">Olympus successfully added to <i><%= activeInstance["name"] %></i></div>
|
||||
<div class="description">See the <b>DCS Olympus Wiki</b> for more information on how to use Olympus and for troubleshooting issues. You may now close the installer.</div>
|
||||
</div>
|
||||
<div class="result-summary error">
|
||||
<div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while adding Olympus to <i><%= activeInstance["name"] %></i></div>
|
||||
<div class="description">See the manager log located in TODO for more information.</div>
|
||||
</div>
|
||||
<div>
|
||||
How to launch Olympus
|
||||
</div>
|
||||
<div>
|
||||
To launch Olympus, there are shortcuts available in the DCS Olympus folder under Saved Games.
|
||||
</div>
|
||||
<div class="usage-instructions">
|
||||
<div>
|
||||
<img src="./icons/server-solid.svg">
|
||||
<div>
|
||||
<span>
|
||||
<%= activeInstance.name %>
|
||||
</span>
|
||||
<span><img src="./icons/folder-open-solid.svg">
|
||||
<%= activeInstance.folder %>
|
||||
</span>
|
||||
Launch the Olympus Server via the shortcut in DCS Olympus / Saved Games.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons-footer">
|
||||
<div class="button back">
|
||||
Back to main menu
|
||||
<img src="./icons/arrow-right-solid.svg">
|
||||
<div>
|
||||
<img src="./icons/chrome.svg">
|
||||
<div>
|
||||
Visit http://localhost:3000 in a web browser (Google Chrome recommended).
|
||||
</div>
|
||||
</div>
|
||||
<img src="./icons/arrow-right-solid.svg">
|
||||
<div>
|
||||
<img src="./icons/gamepad-solid.svg">
|
||||
<div>
|
||||
Launch DCS, load a mission and unpause the game. Enjoy!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Alternatively, you can run the Olympus Client instead to replace the first two steps above.
|
||||
</div>
|
||||
|
||||
<div class="buttons-footer">
|
||||
<div class="button return">
|
||||
Return to main menu
|
||||
</div>
|
||||
<div class="button close">
|
||||
Close manager
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,23 +1,25 @@
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
Step 1 of 4
|
||||
<div>
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
Step 1 of 4
|
||||
</div>
|
||||
<div class="title">
|
||||
Do you want to add Olympus for singleplayer or multiplayer?
|
||||
</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="title">
|
||||
Do you want to add Olympus for singleplayer or multiplayer?
|
||||
</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 class="wizard-inputs">
|
||||
<div class="button radio singleplayer selected" onclick="signal('onInstallTypeClicked', 'singleplayer')">
|
||||
Singleplayer
|
||||
</div>
|
||||
<div class="button radio multiplayer" onclick="signal('onInstallTypeClicked', 'multiplayer')">
|
||||
Multiplayer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -13,11 +13,20 @@
|
||||
}
|
||||
|
||||
.instructions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
color: var(--offwhite);
|
||||
}
|
||||
|
||||
.instructions .step {
|
||||
font-size: 14px;
|
||||
color: var(--lightgray);
|
||||
}
|
||||
|
||||
.instructions .description {
|
||||
font-size: 14px;
|
||||
color: var(--lightgray);
|
||||
}
|
||||
|
||||
.instructions .title {
|
||||
@@ -25,7 +34,7 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
.content > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -34,6 +43,32 @@
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wizard-inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.wizard-page .button.radio {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 100%;
|
||||
background-color: var(--background-note);
|
||||
color: var(--offwhite);
|
||||
border-left: 5px solid var(--offwhite);
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: var(--background-warning);
|
||||
border-left: 5px solid var(--orange);
|
||||
}
|
||||
|
||||
</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;">
|
||||
@@ -43,10 +78,10 @@
|
||||
|
||||
</div>
|
||||
<div class="buttons-footer">
|
||||
<div class="button back" style="color: var(--offwhite); background-color: var(--background); border: 1px solid var(--offwhite);">
|
||||
<div class="button back" style="color: var(--offwhite); background-color: var(--background); border: 1px solid var(--offwhite);" onclick="signal('onBackClicked')">
|
||||
Back
|
||||
</div>
|
||||
<div class="button next" style="color: var(--background); background-color: var(--offwhite);">
|
||||
<div class="button next" style="color: var(--background); background-color: var(--offwhite);" onclick="signal('onNextClicked')">
|
||||
Next
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user