7 files changed, 93 insertions, 4 deletions
diff --git a/src/lib/Mnemonic.svelte b/src/lib/Mnemonic.svelte
new file mode 100644
index 0000000..117c98f
--- /dev/null
+++ b/src/lib/Mnemonic.svelte
@@ -0,0 +1,16 @@
+<script>
+  let { mnemonic } = $props();
+</script>
+
+<div class="card">
+  <div
+    class="card-body text-secondary grid grid-flow-col grid-rows-6 sm:grid-rows-none grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-x-8 gap-y-2 justify-center whitespace-nowrap m-auto"
+  >
+    {#each mnemonic.split(" ") as w, i}
+      <div>
+        <span class="select-none text-neutral">{i + 1}.</span>
+        <span>{@html w === "-" ? "&mdash;" : w}</span>
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 856f2b6..02f71ba 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,7 @@
-// place files you want to import through the `$lib` alias in this folder.
+import { writable } from 'svelte/store';
+import { browser } from "$app/environment";
+
+export const focus = (el: HTMLElement) =>
+	browser && screen.width > 1280 && setTimeout(() => el.focus(), 1);
+
+export const mnemonic = writable();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b93e9ba..1729999 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,4 +4,14 @@
 	let { children } = $props();
 </script>
 
-{@render children()}
+<div class="container mx-auto mt-10 space-y-5 rounded-2xl bg-gray-100 p-8 text-xl shadow-lg">
+	<div class="flex">
+		<a href="/" class="mx-auto text-2xl">Bitcoin Wallet</a>
+	</div>
+
+	{@render children()}
+</div>
+
+<div class="my-4 flex">
+	<a href="https://github.com/asoltys/paper" class="mx-auto">Source code</a>
+</div>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const ssr = false;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..44bcb6a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,14 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<div class="flex flex-wrap justify-center gap-2">
+	<a
+		href="/create"
+		class="flex w-full justify-center gap-2 rounded-2xl border bg-white p-4 md:w-60"
+	>
+		<img src="/random.svg" class="w-8" />
+		<div class="my-auto">Generate</div>
+	</a>
+
+	<a href="/type" class="flex w-full justify-center gap-2 rounded-2xl border bg-white p-4 md:w-60">
+		<img src="/type.svg" class="w-8" />
+		<div class="my-auto">Import</div>
+	</a>
+</div>
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
new file mode 100644
index 0000000..1d09990
--- /dev/null
+++ b/src/routes/create/+page.svelte
@@ -0,0 +1,44 @@
+<script>
+	import { goto } from '$app/navigation';
+	import { onMount, tick } from 'svelte';
+	import { mnemonic, focus } from '$lib';
+	import { generateMnemonic } from '@scure/bip39';
+	import { wordlist } from '@scure/bip39/wordlists/english';
+	import Mnemonic from '$lib/Mnemonic.svelte';
+
+	let password;
+
+	let submitted;
+	let bm;
+	onMount(async () => {
+		$mnemonic = await generateMnemonic(wordlist);
+	});
+
+	let submit = async () => {
+		submitted = true;
+		await tick();
+
+		goto('/created');
+	};
+</script>
+
+<Mnemonic mnemonic={$mnemonic} />
+
+<form class="space-y-5 text-center" on:submit|preventDefault={submit}>
+	<div>
+		<input
+			use:focus
+			name="password"
+			class="rounded-2xl bg-white p-4 text-2xl"
+			placeholder="Passphrase"
+			bind:value={password}
+		/>
+	</div>
+
+	<button
+		type="submit"
+		class="mx-auto flex w-full justify-center gap-2 rounded-2xl border bg-white p-4 md:w-60"
+	>
+		<div class="my-auto">Submit</div>
+	</button>
+</form>
diff --git a/src/routes/created/+page.svelte b/src/routes/created/+page.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/routes/created/+page.svelte