aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/pw-server/src')
-rw-r--r--web/pw-server/src/routes/register.svelte75
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