DCSOlympus/manager/ejs/menu.ejs

<style>
    #summary {
        width: 70%;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        color: var(--offwhite);
        padding: 80px;
    }

    #summary .icon {
        height: 100px;
        width: 100px;
        margin-bottom: -30px;
    }

    #summary div:nth-child(1) {
        font-size: 50px;
        font-weight: bold;
    }

    #summary div:nth-child(2) {
        font-size: 20px;
        font-weight: bold;
    }

    #summary div:nth-child(3) {
        color: var(--lightgray);
        font-size: 13px;
        font-weight: normal;
        margin-top: 20px;
        width: 300px;
    }

    #manager-menu #menu {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        width: 60%;
        justify-content: center;
        align-items: center;
    }

    #manager-menu .option {
        background-color: var(--background);
        border: 1px solid var(--offwhite);
        width: 460px;
        height: 80px;
        color: var(--offwhite);
        display: flex;
        font-size: 20px;
        font-weight: 600;
        padding-left: 15px;
        align-items: center;
        border-radius: 5px;
        cursor: pointer;
        background-color: transparent;
        color: var(--offwhite);
    }

    #manager-menu .option:hover {
        color: var(--background);
        background-color: var(--offwhite);
    }

    #manager-menu .option.disabled {
        pointer-events: none;
        color: var(--darkgray);
        border-color: var(--darkgray);
    }

    #manager-menu .option * {
        pointer-events: none;
    }

</style>
<div id="manager-menu">
    <div id="summary">
        <div>DCS OLYMPUS <img class="icon" src="../img/OlympusLogoFinal_4k.png" \></div>
        <div>INSTALL WIZARD AND MANAGER</div>
        <div>Using this manager, you can install Olympus, update settings, and view and manage instances</div>
    </div>
    <div id="menu"> 
        <div class="option install <%= installEnabled? '': 'disabled' %>">
            Install Olympus
        </div>
        <div class="option update <%= updateEnabled? '': 'disabled' %>">
            Update/remove Olympus
        </div>
        <div class="option divider"></div>
        <div class="option manage <%= manageEnabled? '': 'disabled' %>">
            View and manage instances
        </div>
    </div>
</div>