DCSOlympus/manager/ejs/managerresult.ejs

<style>
    #manager-result {
        display: flex;
        flex-direction: column;
        row-gap: 15px;
    }

    #manager-result img.success {
        content: url("./icons/check-solid-green.svg");
        height: 20px;
        width: 20px;
    }

    #manager-result img.error {
        content: url("./icons/triangle-exclamation-solid.svg");
        height: 20px;
        width: 20px;
    }

    #manager-result img.wait {
        content: url("./icons/spinner-solid.svg");
        height: 20px;
        width: 20px;
        animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(360deg)
        }
    }

    #manager-result .summary {
        font-weight: 600;
        font-size: 14px;
    }

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

    .step {
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: 600;
        color: var(--offwhite);
        column-gap: 10px;
    }

    #manager-result>.result {
        cursor: pointer;
        background-color: var(--blue);
        width: 100%;
        height: 80px;
        color: white;
        display: flex;
        font-size: 13px;
        font-weight: 600;
        padding-left: 15px;
        align-items: center;
        border-radius: 5px;
    }

    #manager-result>.result>img {
        margin-left: 5px;
        margin-right: 20px;
    }

    #manager-result>.result>div {
        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;
        font-size: 13px;
        font-weight: normal;
    }
</style>
<div id="manager-result">
    <div class="page-header">
        Please wait while Olympus is being installed
    </div>
    <div class="step hook">
        Installing hook scripts<img class="wait"><img class="success hide"><img class="error hide">
    </div>
    <div class="step mod">
        Installing mod folder<img class="wait"><img class="success hide"><img class="error hide">
    </div>
    <div class="step json">
        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">
        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="result">
        <img class="wait"><img class="success hide"><img class="error hide">
        <div>
            <span>
                <%= instance.name %>
            </span>
            <span><img src="./icons/folder-open-solid.svg">
                <%= instance.folder %>
            </span>
        </div>
    </div>

    <div class="info success">
        You may now start DCS and use Olympus either with the shortcuts or the "View and manage Olympus" entry in the
        main menu
    </div>

    <div class="info error">
        Please make sure DCS is not currently being executed
    </div>

    <div class="buttons-footer">
        <div class="button back">
            Back to main menu
        </div>
        <!--<div class="button cancel">
            Close
        </div>-->
    </div>
</div>