~starkingdoms/starkingdoms

851a8901a97aa214e739073f1ac70ad353ff8b62 — ghostly_zsh 6 days ago 26b8917 
feat: improved main menu
patch browse .tar.gz 
1 files changed, 108 insertions(+), 4 deletions(-)

M crates/unified/index.html

M crates/unified/index.html => crates/unified/index.html +108 -4
@@ 2,12 2,116 @@
  <head>
    <meta content="text/html; charset=utf8" http-equiv="content-type" />
    <title>starkingdoms</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');

:root {
    --rosewater-color: #f5e0dc;
    --flamingo-color: #f2cdcd;
    --pink-color: #f5c2e7;
    --mauve-color: #cba6f7;
    --red-color: #f38ba8;
    --maroon-color: #eba0ac;
    --peach-color: #fab387;
    --yellow-color: #f9e2af;
    --green-color: #a6e3a1;
    --teal-color: #94e2d5;
    --sky-color: #89dceb;
    --sapphire-color: #74c7ec;
    --blue-color: #89b4fa;
    --lavender-color: #b4befe;
    --text-color: #cdd6f4;
    --subtext-1-color: #bac2de;
    --subtext-0-color: #a6adc8;
    --overlay-2-color: #9399b2;
    --overlay-1-color: #7f849c;
    --overlay-0-color: #6c7086;
    --surface-2-color: #585b70;
    --surface-1-color: #45475a;
    --surface-0-color: #313244;
    --base-color: #1e1e2e;
    --mantle-color: #181825;
    --crust-color: #11111b;
}

body {
    background-color: var(--crust-color);
    color: var(--text-color);
}

#server-box {
    position: absolute;
    left: 20px;
    top: 20px;
    padding: 40px;
    border-radius: 20px;
    background-color: var(--mantle-color);
}
#game-title {
    font-size: 40pt;
    font-weight: bold;
}
.label {
    font-family: Fira Mono;
    display: block;
}
#url-label {
    margin-top: 10px;
}
.text-input {
    display: block;
    background-color: var(--base-color);
    border-style: none;
    color: var(--text-color);
    font-family: Fira Mono;
    padding: 2px 4px;
    width: 100%;
}
#button-bar {
    display: flex;
    flex-direction: horizontal;
    padding-top: 20px;
    gap: 160px;
    justify-content: center;
}
#play {
    background-color: var(--surface-2-color);
    border-style: none;
    padding: 2px 6px;
    color: var(--text-color);
    font-family: Fira Mono;
}
#play:hover {
    background-color: var(--surface-1-color);
}
#play:active {
    background-color: var(--surface-0-color);
}
#ship-editor {
    background-color: var(--blue-color);
    border-style: none;
    font-family: Fira Mono;
    padding: 2px 6px;
    color: var(--crust-color);
}
#ship-editor:active {
    background-color: var(--lavender-color);
}
</style>
  </head>
  <body>
    <div id="menu">
    <label for="url">input server url</label>
    <input id="url" type="text" />
    <button id="play">play!</button>
        <div id="server-box">
            <span id="game-title">Starkingdoms</span>
            <label id="username-label" class="label" for="url">Username: </label>
            <input id="username" class="text-input" type="text" />
            <label id="url-label" class="label" for="url">Server: </label>
            <input id="url" class="text-input" type="text" />
            <div id="button-bar">
                <button id="play">Play</button>
                <button id="ship-editor">Ship Editor</button>
            </div>
        </div>
    </div>

    <script type="module">


@@ 24,4 128,4 @@
      document.getElementById('play').addEventListener('click', run);
    </script>
  </body>
</html>
\ No newline at end of file
</html>