DCSOlympus/manager/ejs/result.ejs

<style>
    #result-page {
        display: flex;
        flex-direction: column;
        row-gap: 30px;
        padding: 60px 120px;
    }

    #result-page .result-summary {
        padding: 25px 15px;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    #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;
    }

    #result-page .result-summary.wait{
        color: var(--offwhite);
        border: 1px solid var(--offwhite);
    }

    #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;
        flex-direction: row;
        column-gap: 25px;
        align-items: center;
        padding: 25px;
    }

    #result-page .usage-instructions>div {
        color: var(--offwhite);
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        justify-items: center;
        align-items: start;
        font-size: 13px;
    }

    #result-page .usage-instructions>div>img {
        height: 40px;
        width: 40px;
    }

    #result-page .usage-instructions>img {
        height: 30px;
        width: 30px;
    }
</style>
<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>
                Launch the Olympus Server via the shortcut in DCS Olympus / Saved Games.
            </div>
        </div>
        <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>