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,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>
|
||||
Reference in New Issue
Block a user