Create the style for the new character page

src/routes/(app)/game/[game_id]/character/new/+page.server.js

@@ -1,24 +1,6 @@
 import {PUBLIC_API_URL} from "$env/static/public";
 import {error} from "@sveltejs/kit";
 
-export async function load({fetch, params}){
-    const {game_id} = params;
-
-    const response = await fetch(`${PUBLIC_API_URL}/game/${game_id}`, {
-        method: "GET",
-        headers: {"Content-Type": "application/json"},
-        credentials: "include"
-    });
-
-    const data = await response.json();
-    if(!response.ok){
-        if(response.status === 401){
-            error(response.status, {
-                message: data.error.message,
-                back: "/"
-            });
-        }
-    }
-
-    return {data};
+export async function load({params}){
+    return {params};
 }

src/routes/(app)/game/[game_id]/character/new/+page.svelte

@@ -9,16 +9,96 @@
     }
 </script>
 
-<main>
-    <form bind:value={submit}>
-        <label>Name:
-            <input bind:value={name} type="text" required>
-        </label>
-
-        <label>Description:
-            <textarea bind:value={description}></textarea>
-        </label>
-
-        <button>Create Character</button>
-    </form>
-</main>
+<div class="page">
+    <main>
+        <div class="heading">
+            <h1>Create Your Character</h1>
+            <p>Who will you be in this world?</p>
+        </div>
+
+        <form class="standardForm" onsubmit={submit}>
+            <label>Name
+                <input bind:value={name} type="text" placeholder="e.g. Aldric the Grey" required>
+            </label>
+
+            <label>Description
+                <textarea bind:value={description} placeholder="Describe your character's appearance, background, personality, or anything else that defines them…" rows="6" required></textarea>
+            </label>
+
+            <button type="submit">Create Character</button>
+        </form>
+    </main>
+</div>
+
+<style>
+    .page {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        background: #0b0b10;
+    }
+
+    header {
+        padding: 1.25rem 2rem;
+        border-bottom: 1px solid #1e1e28;
+    }
+
+    .back {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 0.85rem;
+        font-weight: 500;
+        color: #6b6b7a;
+        text-decoration: none;
+        transition: color 0.15s;
+    }
+
+    .back:hover { color: #a1a1aa; }
+
+    main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 1.5rem 6rem;
+        gap: 2rem;
+    }
+
+    .heading {
+        text-align: center;
+        max-width: 480px;
+    }
+
+    h1 {
+        font-size: clamp(1.8rem, 4vw, 2.4rem);
+        font-weight: 800;
+        letter-spacing: -1.5px;
+        color: #e5e5ea;
+        margin-bottom: 0.5rem;
+    }
+
+    .heading p {
+        font-size: 0.95rem;
+        color: #6b6b7a;
+    }
+
+    .standardForm {
+        width: 100%;
+        max-width: 780px;
+        padding: 3rem;
+    }
+
+    textarea {
+        resize: vertical;
+        min-height: 220px;
+        line-height: 1.6;
+    }
+
+    @media (max-width: 700px) {
+        .standardForm { padding: 1.75rem; }
+        textarea { min-height: 140px; }
+        main { padding: 2rem 1.25rem 4rem; }
+    }
+</style>