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.success{
        color: var(--background-color);
        background-color: var(--green);
    }

    #result-page .result-summary.error{
        color: var(--background-color);
        background-color: var(--red);
    }

    #result-page .instructions-group {
        display: flex;
        color: var(--offwhite);
        flex-direction: column;
        row-gap: 15px;
    }

    #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 success hide">
        <div class="title"><img src="./icons/check-solid-background.svg">Olympus successfully added to <i style="margin-left: 3px"><%= 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 hide">
        <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 class="instructions-group hide">
        <div style="font-size: 18px; font-weight: bold; color: var(--offwhite);">
            How to launch Olympus
        </div>
        <div style="font-size: 13px; color: var(--offwhite);">
            To launch Olympus, there are shortcuts available in the DCS Olympus folder under Saved Games.
        </div>
        <% if (activeInstance["installationType"] === "singleplayer") { %>
            <div class="usage-instructions" style="width: 600px;">
                <div>
                    <img src="./icons/olympus_white.png">
                    <div>
                        Launch the Olympus Client via the shortcut in DCS Olympus / Saved Games.
                    </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 style="font-size: 13px;">
                Alternatively, you can run the Olympus Server instead and visit http://localhost:<%= activeInstance["clientPort"] %> in a web browser (Google Chrome recommended) to replace the first step above.
            </div>
        <% } else { %>
            <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://<%= ip %>:<%= activeInstance["clientPort"] %> 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 style="font-size: 13px;">
                Note, to access Olympus from this PC, you need to visit http://localhost:<%= activeInstance["clientPort"] %> in a web browser (Google Chrome recommended) instead.
            </div>
        <% } %>
    </div>

    <div class="buttons-footer">
        <div class="button back" style="color: var(--offwhite); background-color: var(--background); border: 1px solid var(--offwhite);" onclick="signal('onReturnClicked')">
            Return to main menu
        </div>
        <div class="button next" style="color: var(--background); background-color: var(--offwhite);" onclick="signal('onCloseManagerClicked')">
            Close manager
        </div>
    </div>
</div>