add basiv webview for font results

client/src/components/glyphview.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	let glyphSVG = $state("");
+
+	let { selectedChar = "", loading = $bindable() } = $props();
+
+	$effect(() => {
+		if (selectedChar === "") {
+			return;
+		}
+
+		loading = true;
+		const response = fetch(`http://localhost:8000/glyph/${selectedChar}`)
+		.then((data) => {
+			data.text().then((result) => { glyphSVG = result });
+		})
+		.catch((err) => {
+			console.log(err);
+		})
+		.finally(() => {
+			loading = false;
+		});
+	});
+
+	export { selectedChar }
+	export { loading }
+</script>
+
+<div class="glyph">
+{@html glyphSVG }
+</div>
+
+<style>
+	:global(.glyph > svg) {
+		max-height: 50vh;
+		max-width: 50vw;
+	}
+</style>

client/src/routes/+page.svelte

@@ -1,2 +1,48 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	import Glyphview from "../components/glyphview.svelte";
+
+	let charInput = $state("");
+	let glyphLoading = $state(false);
+</script>
+
+<h1>Font Explorer</h1>
+
+<div class="content">
+	<div class="char-input">
+		<input type="text" maxlength="1" bind:value={ charInput } disabled={ glyphLoading } />
+	</div>
+	<div>
+		<p>{ glyphLoading }</p>
+		<Glyphview selectedChar={charInput} bind:loading={glyphLoading} />
+	</div>
+</div>
+	
+
+<style>
+	.content {
+		display: grid;
+		grid-template-columns: 20% auto;
+		width: auto;
+		padding: 1em 2em;
+	}
+
+	.content > div {
+		border: solid 1px black;
+	}
+
+	.char-input {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: 0.1em;
+		padding: 0.2em;
+	}
+
+	.char-input > input {
+		width: 1.3em;
+		height: 1.3em;
+		font-size: 3em;
+		text-align: center;
+	}
+</style>