Create the form for register

src/lib/global.css

@@ -62,3 +62,69 @@ body{
 .button:active{
     transform: translateY(1px);
 }
+
+.standardForm{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    max-width: 360px;
+    margin: 0 auto;
+    padding: 2rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 10px;
+}
+
+.standardForm label{
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    color: var(--color-text);
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.standardForm input,
+.standardForm textarea,
+.standardForm select{
+    border: 1px solid var(--color-border);
+    outline: none;
+    background: var(--color-surface-alt);
+    color: var(--color-text);
+    border-radius: 6px;
+    padding: 0.6rem 0.8rem;
+    font-size: 1rem;
+    font-family: inherit;
+    transition: border-color 0.15s ease;
+}
+
+.standardForm input:focus,
+.standardForm textarea:focus,
+.standardForm select:focus{
+    border-color: var(--color-primary);
+}
+
+.standardForm .error{
+    color: var(--color-error);
+    font-size: 0.85rem;
+}
+
+.standardForm .formFooter{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+}
+
+.standardForm .formFooter a{
+    color: var(--color-primary);
+    text-decoration: none;
+}
+
+.standardForm .formFooter a:hover{
+    color: var(--color-primary-hover);
+    text-decoration: underline;
+}

src/routes/+layout.svelte

@@ -23,6 +23,10 @@
             <a href="/register" class="button">Sign Up</a>
         {/if}
     {/if}
+
+    {#if page.url.pathname === "/register"}
+        <a href="/login" class="button">Log In</a>
+    {/if}
 </header>
 
 {@render children()}

src/routes/login/+page.svelte

@@ -0,0 +1,9 @@
+<script>
+    const submit = ()=>{
+        console.log("submitting");
+    }
+</script>
+
+<form class="standardForm" onsubmit={submit}>
+    
+</form>

src/routes/register/+page.svelte

@@ -0,0 +1,37 @@
+<script>
+    import {enhance} from "$app/forms";
+</script>
+
+<div class="container">
+    <form class="standardForm" method="POST" use:enhance>
+        <h1>Sign Up</h1>
+
+        <label>Name
+            <input name="name" type="text" required>
+        </label>
+
+        <label>Email
+            <input name="email" type="email" required>
+        </label>
+
+        <label>Password
+            <input name="password" type="password" required>
+        </label>
+
+        <label>Confirm Password
+            <input name="confirmPassword" type="password" required>
+        </label>
+
+        <button>Register</button>
+    </form>
+</div>
+
+<style>
+    .container{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - 75px);
+    }
+</style>