DCSOlympus/manager/ejs/result.ejs

<style>
    #manager-result .content {
        width: 100% !important;
    }
    
    #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;
    }

    #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 {
        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(--darkgray);
        border-left: 5px solid 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;
        width: 500px;
    }

    #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="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
        </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="buttons-footer">
            <div class="button back">
                Back to main menu
            </div>
        </div>
    </div>
</div>