CreateNewWorldPage.html

<style>
    :host {
        background-image: var(--mc-ui-background-darken-img);
        background-repeat: repeat;
        background-size: auto;
        text-align: center;
    }
    mc-input {
        width: 46.5%;
        min-width: min(100%, 23ch);
        box-sizing: border-box;
        display: block;
        margin: 10px auto;
        padding: 1.5ex 1ch;
        text-align: start;
        border-color: #aaa;
    }
    .gen-options, .bottom-tools, mc-button {
        margin-top: 10px;
    }
</style>
<div class="container">
    <h1>Create New World</h1>
    <mc-input id="world-name" placeholder="Enter World Name, Default 'My World'"></mc-input>
    <mc-input id="world-seed" placeholder="World Seed, Empty for Random"></mc-input>
    <div class="gen-options">
        <mc-button id="world-type-btn">World Type:&emsp;<span id="world-type-echo">Normal</span></mc-button>
        <mc-button disabled>Trees:&emsp;<span id="tree-echo">On</span></mc-button>
    </div>
    <div class="bottom-tools">
        <mc-button id="create-new-word">Create New World</mc-button>
        <mc-button gotoPage="*pop">Cancel</mc-button>
    </div>
</div>