DCSOlympus/manager/ejs/welcome.ejs
2024-03-04 17:38:34 +01:00

68 lines
1.8 KiB
Plaintext

<style>
#manager-welcome {
display: flex;
flex-direction: column;
row-gap: 20px;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#manager-welcome .instructions {
width: 40%;
text-align: center;
color: var(--offwhite);
}
#manager-welcome .option {
background-color: var(--background);
border: 1px solid var(--offwhite);
width: 460px;
height: 70px;
color: var(--offwhite);
display: flex;
font-size: var(--very-large);
font-weight: 600;
padding-left: 15px;
align-items: center;
border-radius: 5px;
cursor: pointer;
background-color: transparent;
color: var(--offwhite);
}
#manager-welcome .option:hover {
color: var(--background);
background-color: var(--offwhite);
}
#manager-welcome .option.disabled {
pointer-events: none;
color: var(--darkgray);
border-color: var(--darkgray);
}
#manager-welcome .option * {
pointer-events: none;
}
</style>
<div id="manager-welcome">
<div class="instructions" style="font-size: 28px; font-weight: bold;">
Do you want to use the Olympus Manager in Basic or Expert mode?
</div>
<div class="instructions" style="color: var(--gray);">
Basic mode is recommended for most users. <br>
Expert mode is for those who know how Olympus works or for server owners.
</div>
<div class="instructions" style="color: var(--gray); font-weight: bold;">
You can change this setting at any time.
</div>
<div class="option basic" onclick="signal('onBasicClicked')">
Basic mode
</div>
<div class="option expert" onclick="signal('onExpertClicked')">
Expert mode
</div>
</div>