diff options
| author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-03-18 19:43:41 +0100 |
|---|---|---|
| committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-03-18 19:43:41 +0100 |
| commit | e4e581b3462debeada522e8f034189e01785421c (patch) | |
| tree | 64b466fc16c17aa92234c5b6cff7d8a54dcc870e | |
| parent | 236a1669d096e1ff99a9e82eada65f2e0a293b51 (diff) | |
| download | planetwars.dev-e4e581b3462debeada522e8f034189e01785421c.tar.xz planetwars.dev-e4e581b3462debeada522e8f034189e01785421c.zip | |
style registration page
| -rw-r--r-- | web/pw-server/src/routes/register.svelte | 75 |
1 files changed, 67 insertions, 8 deletions
diff --git a/web/pw-server/src/routes/register.svelte b/web/pw-server/src/routes/register.svelte index 6344399..1b0b84a 100644 --- a/web/pw-server/src/routes/register.svelte +++ b/web/pw-server/src/routes/register.svelte @@ -28,11 +28,70 @@ }; </script> -<h1>Register</h1> -<form on:submit|preventDefault={onSubmit}> - <label for="username">Username</label> - <input name="username" bind:value={username} /> - <label for="password">Password</label> - <input type="password" name="password" bind:value={password} /> - <button type="submit">Register</button> -</form> +<div class="page-card"> + <div class="page-card-content"> + <h1 class="page-card-header">Create account</h1> + <form class="register-form" on:submit|preventDefault={onSubmit}> + <label for="username">Username</label> + <input name="username" bind:value={username} /> + <label for="password">Password</label> + <input type="password" name="password" bind:value={password} /> + <button type="submit">Sign up</button> + </form> + </div> +</div> + +<style lang="scss"> + .page-card { + margin: 50px auto; + width: 40%; + max-width: 600px; + border: 1px solid #b5b5b5; + box-sizing: border-box; + border-radius: 0px; + } + + .page-card-content { + margin: 20px 50px; + } + + .page-card-header { + padding-top: .5em; + padding-bottom: 1em; + text-align: center; + } + + .register-form { + box-sizing: border-box; + display: flex; + flex-direction: column; + font-size: 18px; + } + + .register-form label { + margin: 10px 5px; + font-weight: 500; + } + + .register-form input { + margin: 10px 5px; + font-size: 1rem; + // height: 2.5em; + display: block; + border-radius: 4px; + border: 1px solid #b5b5b5; + padding: .75rem 1rem; + } + + .register-form button { + background-color: lightgreen; + padding: 8px 16px; + border-radius: 8px; + border: 0; + font-size: 18pt; + display: block; + margin: 10px auto; + margin-top: 16px; + + } +</style>
\ No newline at end of file |