feat: improve some styles

src/lib/components/InputRange.svelte

@@ -4,10 +4,31 @@
 	export let value = 50;
 </script>
 
-<input type="range" {min} {max} bind:value step={10} />
+<div class="wrapper">
+	<input type="range" {min} {max} bind:value step={10} />
+	<p class="left">gar nicht</p>
+	<p class="right">sehr</p>
+</div>
 
 <style>
+	.left,
+	.right {
+		position: absolute;
+		font-size: 0.6em;
+		top: 32px;
+	}
+
+	.right {
+		right: 0px;
+	}
+
+	.wrapper {
+		position: relative;
+		margin-block: 20px;
+	}
+
 	input[type='range'] {
+		position: relative;
 		height: 32px;
 		appearance: none;
 		margin: 10px 0;
@@ -19,55 +40,68 @@
 	}
 	input[type='range']::-webkit-slider-runnable-track {
 		width: 100%;
-		height: 7px;
+		height: 3px;
 		cursor: pointer;
 		animate: 0.2s;
 		box-shadow: 0px 0px 0px #000000;
-		background: #d9c556;
+		background: #b5a446;
 		border-radius: 29px;
 		border: 0px solid #010101;
 	}
 	input[type='range']::-webkit-slider-thumb {
 		box-shadow: 0px 0px 0px #000031;
 		border: 0px solid #00001e;
-		height: 26px;
+		height: 40px;
 		width: 26px;
 		border-radius: 26px;
 		background: #ffffff;
 		cursor: pointer;
 		-webkit-appearance: none;
-		margin-top: -9.5px;
+		margin-top: -18px;
+
+		background: url(/cursor.svg);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 77%;
 	}
 	input[type='range']:focus::-webkit-slider-runnable-track {
 		background: #d9c556;
 	}
 	input[type='range']::-moz-range-track {
 		width: 100%;
-		height: 7px;
+		height: 3px;
 		cursor: pointer;
 		animate: 0.2s;
 		box-shadow: 0px 0px 0px #000000;
-		background: #d9c556;
+		background: #b5a446;
 		border-radius: 29px;
 		border: 0px solid #010101;
 	}
 	input[type='range']::-moz-range-thumb {
 		box-shadow: 0px 0px 0px #000031;
 		border: 0px solid #00001e;
-		height: 26px;
+		height: 40px;
 		width: 26px;
-		border-radius: 26px;
 		background: #ffffff;
+		background: red;
 		cursor: pointer;
+		background: url(/cursor.svg);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 77%;
 	}
 	input[type='range']::-ms-track {
 		width: 100%;
-		height: 7px;
+		height: 3px;
 		cursor: pointer;
 		animate: 0.2s;
 		background: transparent;
 		border-color: transparent;
 		color: transparent;
+		background: url(/cursor.svg);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 77%;
 	}
 	input[type='range']::-ms-fill-lower {
 		background: #d9c556;
@@ -90,6 +124,10 @@
 		border-radius: 26px;
 		background: #ffffff;
 		cursor: pointer;
+		background: url(/cursor.svg);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 77%;
 	}
 	input[type='range']:focus::-ms-fill-lower {
 		background: #d9c556;

src/lib/components/Loader.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+</script>
+
+<svg width="27" height="62" viewBox="0 0 27 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M13.5 6C1.99999 6 2.99999 19.0174 13.5 29.5174C24 40.0174 28.5 55.5 13.5 55.5C2 55.5 -0.999994 44 14.5 28.5C29.5 13.5 21 6 13.5 6Z"
+	/>
+	<path
+		d="M13.5019 19C-1.41403 19 -0.116993 25.3114 13.5019 30.4024C27.1209 35.4933 32.9575 43 13.502 43C-1.41402 43 -5.30514 37.4242 14.799 29.9091C34.2546 22.6364 23.2297 19 13.5019 19Z"
+	/>
+	<path
+		d="M13.5007 1C8.13095 1 8.59788 16.7786 13.5007 29.5059C18.4035 42.2332 20.5047 61 13.5007 61C8.13095 61 6.73015 47.0606 13.9676 28.2727C20.9716 10.0909 17.0027 1 13.5007 1Z"
+	/>
+</svg>
+
+<style>
+	svg > path:nth-child(1) {
+		animation: dashA 3s linear infinite;
+		animation-delay: 200ms;
+		stroke-dasharray: 133;
+	}
+
+	svg > path:nth-child(2) {
+		animation: dashB 3s linear infinite;
+		animation-delay: 400ms;
+		stroke-dasharray: 113;
+	}
+
+	svg > path:nth-child(3) {
+		animation: dashC 3s linear infinite;
+		animation-delay: 600ms;
+		stroke-dasharray: 126;
+	}
+
+	svg > path {
+		stroke-dasharray: 1000;
+		animation: dash 5s ease infinite;
+		stroke: goldenrod;
+		stroke-dashoffset: var(--dash);
+	}
+
+	@keyframes dashA {
+		from {
+			stroke-dashoffset: 0;
+		}
+		to {
+			stroke-dashoffset: 266;
+		}
+	}
+
+	@keyframes dashB {
+		from {
+			stroke-dashoffset: 0;
+		}
+		to {
+			stroke-dashoffset: 226;
+		}
+	}
+
+	@keyframes dashC {
+		from {
+			stroke-dashoffset: 0;
+		}
+		to {
+			stroke-dashoffset: 252;
+		}
+	}
+</style>

src/lib/components/Questions.svelte

@@ -6,6 +6,7 @@
 	import Button from './button.svelte';
 	import InputRange from './InputRange.svelte';
 	import { goto } from '$app/navigation';
+	import Loader from './Loader.svelte';
 
 	let data = persisted<{
 		name: string;
@@ -34,6 +35,7 @@
 		adelsTitel: undefined,
 		adelsTitelSuggestions: [],
 		provideAdelsTitel: undefined,
+		portraitPublic: true,
 		confidence: undefined,
 		confidenceAccepted: false,
 		createPersonality: undefined
@@ -87,20 +89,23 @@
 
 <div class="wrapper">
 	<section in:slide={{ delay: 500 }}>
-		<TextSplit content="Wie lautet euer Name?" />
+		<TextSplit content="Wie lauten Euer Vor- und Nachname, edler Gast?" />
 		<input placeholder="Name" type="text" bind:value={$data.name} />
 		{#if !$data.nameAccepted}
 			<button
 				on:click={() => {
 					$data.nameAccepted = true;
-				}}>name speichern</button
+				}}>Name akzeptieren</button
 			>
 		{/if}
 	</section>
 
 	{#if ($data.name && $data.nameAccepted) || $data.confidence !== undefined}
 		<section in:slide={{ delay: 0, duration: 500 }}>
-			<TextSplit content="Wie sicher können wir mit eurem Erscheinen rechnen?" delay={0} />
+			<TextSplit
+				content="Wie sicher dürfen wir mit Eurem glanzvollen Erscheinen rechnen?"
+				delay={0}
+			/>
 			<div in:fade={{ delay: 1200 }}>
 				<InputRange bind:value={$data.confidence} />
 			</div>
@@ -116,7 +121,9 @@
 
 	{#if $data.confidence !== undefined && $data.confidenceAccepted && $data.createPersonality === undefined}
 		<section in:slide out:slide>
-			<TextSplit content="Sollen wir eine alternative Persönlichkeit für euch finden?" />
+			<TextSplit
+				content="Möchtet Ihr, dass wir eine alternative Persönlichkeit für Euch erschaffen?"
+			/>
 			<div>
 				<button
 					on:click={() => {
@@ -138,7 +145,7 @@
 	{#if $data.createPersonality === true}
 		<section in:fade out:slide>
 			{#if $data.provideAdelsTitel === undefined}
-				<TextSplit content="Sollen wir einen Adelstitel vorschlagen?" />
+				<TextSplit content="Möchtet Ihr einen würdigen Adelstitel für Euch in Erwägung ziehen?" />
 				<div>
 					<button
 						on:click={() => {
@@ -160,7 +167,10 @@
 			{/if}
 
 			{#if loadingAdelsTitel}
-				<p>Loading Adelstitel</p>
+				<div style="display: flex; gap: 20px; align-items: center;">
+					<Loader />
+					<p>Adelstitel werden geschmiedet</p>
+				</div>
 			{:else if typeof $data.adelsTitel === 'string'}
 				<TextSplit content="Euer Adelstitel" />
 				<input placeholder="Name" type="text" bind:value={$data.adelsTitel} />
@@ -194,7 +204,9 @@
 	{#if $data.adelsTitel && $data.adelsTitelAccepted && $data.providePortrait !== false}
 		<section transition:slide>
 			{#if $data.providePortrait === undefined}
-				<TextSplit content="Sollen unsere Künstler ein Portrait eurer Figur anfertigen lassen?" />
+				<TextSplit
+					content="Sollten unsere begabten Künstler ein majestätisches Porträt von Euch anfertigen?"
+				/>
 				<div>
 					<button
 						on:click={() => {
@@ -229,27 +241,26 @@
 						<option value="braunem">braunen</option>
 					</select> Haaren zeichnen
 				</p>
-				<button on:click={() => fetchPortrait()}> porträt malen (~30 Sekunden)</button>
+				<button on:click={() => fetchPortrait()}> porträt malen (~15 Sekunden)</button>
 			{:else if loadingPortrait}
-				<p>Portrait wird gemalt</p>
+				<div style="display: flex; gap: 20px; align-items: center;">
+					<Loader />
+					<p>Euer edles Antlitz wird gemalt</p>
+				</div>
 			{:else if $data.portraitUrl}
 				<div in:slide={{ duration: 2000 }} class="portrait">
 					<ImageFrame src={$data.portraitUrl} alt="portrait" />
 
 					{#if !$data.portraitAccepted}
-						<input bind:checked={$data.portraitPublic} type="checkbox" id="display-portrait" />
-						<label for="display-portrait">Porträt öffentlich anzeigen</label>
-						<br />
-
 						<button
 							on:click={() => {
 								$data.portraitAccepted = true;
-							}}>portrait akzeptieren</button
+							}}>Porträt annehmen</button
 						>
 						<button
 							on:click={() => {
 								$data.portraitUrl = undefined;
-							}}>neues portrait</button
+							}}>Neues Porträt anfordern</button
 						>
 					{/if}
 				</div>
@@ -258,16 +269,19 @@
 	{/if}
 
 	{#if $data.portraitAccepted}
-		<div class="button-wrapper">
 		{#if isSubmitting}
-				<section in:slide>
+			<section in:slide style="border: none;">
+				<div style="display: flex; gap: 20px; align-items: center;">
+					<Loader />
 					<p>Einladung wird abgeschickt</p>
+				</div>
 			</section>
 		{:else}
-				<Button on:click={() => submit()}>Einladung abschicken</Button>
+			<div class="button-wrapper">
-			{/if}
+				<Button on:click={() => submit()}>Möchtet Ihr diese königliche Einladung annehmen?</Button>
 			</div>
 		{/if}
+	{/if}
 </div>
 
 <style>
@@ -276,7 +290,7 @@
 		justify-content: center;
 		padding-block: 20px;
 		margin: 0 auto;
-		width: 100%;
+		width: 99%;
 		max-width: 500px;
 		padding-block: 50px;
 		font-size: 2em;
@@ -299,8 +313,8 @@
 		width: 100%;
 		font-size: 1em;
 		margin: 0 auto;
-		width: fit-content;
 		border-bottom: 1px solid white;
+		box-sizing: border-box;
 	}
 	input[type='text']::after {
 		content: '';
@@ -309,16 +323,28 @@
 		width: 100%;
 	}
 
+	select {
+		background: transparent;
+		color: white;
+		border: none;
+		padding: 5px;
+		border-bottom: 1px solid white;
+	}
+
+	select > option {
+		color: black;
+	}
 	section {
 		color: white;
 		font-family: 'Parisienne', cursive;
 		max-width: 500px;
+		padding: 20px;
 		margin: 0 auto;
 		font-size: 2em;
 		width: 70%;
 		border-width: 30px;
 		border-style: solid;
-		border-image: url(/border.svg);
+		border-image: url(/border_b.svg);
 		border-image-repeat: stretch;
 		border-image-slice: 100%;
 		border-image-slice: 24% 23%;

src/lib/components/TextSplit.svelte

@@ -31,7 +31,7 @@
 		animation: fadeIn 1s ease forwards;
 		animation-delay: var(--delay);
 		font-size: 0.7em;
-		color: #fffa;
+		color: #fffffff2;
 	}
 	@keyframes fadeIn {
 		from {

src/lib/components/button.svelte

@@ -17,7 +17,7 @@
 		color: #ceba51;
 		background: transparent;
 		border-width: 30px;
-		border-image: url(/border.png);
+		border-image: url(/border_b.svg);
 		border-image-repeat: stretch;
 		border-image-slice: 100%;
 		border-image-slice: 24% 23%;
@@ -32,17 +32,17 @@
 	button::after {
 		content: '';
 		position: absolute;
-		background: rgba(0, 0, 0, 0.7);
+		/*background: rgba(0, 0, 0, 0.7);*/
-		box-shadow: 0 0 70px #ffb11b22;
+		filter: drop-shadow(0 0 70px #ffb11b22);
 		top: -15px;
 		left: -15px;
 		z-index: -1;
 		width: calc(100% + 30px);
 		height: calc(100% + 30px);
-		transition: box-shadow 0.8s ease;
+		transition: filter 0.8s ease;
 	}
 
 	button:hover::after {
-		box-shadow: 0 0 40px #ffb11b55;
+		filter: drop-shadow(0 0 40px #ffb11b55);
 	}
 </style>

src/lib/components/maskenball.svelte

@@ -8,7 +8,7 @@
 		font-family: Parisienne;
 		color: #d9c556;
 		text-align: center;
-		font-size: 4em;
+		font-size: min(7vw, 2em);
 		margin-top: 0em;
 		animation: fadeIn 5s ease forwards;
 		animation-delay: 3s;

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import FadeIn from '$lib/components/FadeIn.svelte';
 	import Questions from '$lib/components/Questions.svelte';
 	import TextSplit from '$lib/components/TextSplit.svelte';
 	import Button from '$lib/components/button.svelte';
@@ -9,6 +8,7 @@
 	import Maskenball from '$lib/components/maskenball.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
+
 	let curtainsVisible = false;
 	let buttonVisible = false;
 	let maskVisible = false;
@@ -18,10 +18,6 @@
 
 	onMount(() => {
 		curtainsVisible = true;
-		// curtainsVisible = false;
-		// maskVisible = true;
-		// maskSmall = true;
-		// questionVisible = true;
 		setTimeout(() => {
 			buttonVisible = true;
 		}, 1500);
@@ -95,7 +91,7 @@
 	}
 
 	:global(.center.maskSmall > p) {
-		font-size: 2em;
+		font-size: min(5vw, 2em);
 	}
 
 	.einladung {

static/border_b.svg

@@ -0,0 +1,68 @@
+<svg width="115" height="121" viewBox="0 0 115 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_42_413)">
+<path d="M101.093 107.198C100.663 105.425 102.645 104.179 104.439 105.833C106.481 107.715 103.961 111.603 101.093 110.921C98.2253 110.238 97.2693 107.881 97.2693 103.785C97.2693 100.508 97.2693 73.8961 97.2693 61.0001" stroke="#CCB951"/>
+<path d="M101.5 98.5C101.5 96.7303 104.5 97 104.5 98.5C104.5 100 103.5 101 101.972 101C100 101 98.1478 98.5686 98.1478 95.3659C98.1478 87.5001 101.972 83.5001 101.972 61.0001M97.5 61.0001C98 69.5 101.5 72.0149 101 78.0149" stroke="#CCB951"/>
+<path d="M96.7845 97.6389C71 97.6389 58 105 58 97.6389" stroke="#CCB951"/>
+<path d="M96.7845 97.6389C71 97.6389 64.5 109 58 103" stroke="#CCB951"/>
+</g>
+<g filter="url(#filter1_d_42_413)">
+<path d="M101.093 13.8777C100.663 15.6868 102.645 16.9576 104.439 15.2704C106.481 13.3511 103.961 9.38466 101.093 10.0811C98.2253 10.7774 97.2693 13.1813 97.2693 17.3596C97.2693 20.7023 97.2693 47.8459 97.2693 61" stroke="#CCB951"/>
+<path d="M101.5 22.75C101.5 24.5551 104.5 24.28 104.5 22.75C104.5 21.22 103.5 20.2 101.972 20.2C100 20.2 98.1478 22.68 98.1478 25.9467C98.1478 33.9698 101.972 38.0498 101.972 60.9998M97.5 60.9998C98 52.33 101.5 49.7648 101 43.6448" stroke="#CCB951"/>
+<path d="M96.7845 23.6284C71 23.6284 58 16.12 58 23.6284" stroke="#CCB951"/>
+<path d="M96.7845 23.6284C71 23.6284 64.5 12.04 58 18.16" stroke="#CCB951"/>
+</g>
+<g filter="url(#filter2_d_42_413)">
+<path d="M14.0448 107.198C14.4838 105.425 12.4621 104.179 10.6318 105.833C8.54979 107.715 11.1194 111.603 14.0448 110.921C16.9702 110.238 17.9453 107.881 17.9453 103.785C17.9453 100.508 17.9453 73.8961 17.9453 61" stroke="#CCB951"/>
+<path d="M13.63 98.5C13.63 96.7303 10.57 97 10.57 98.5C10.57 100 11.59 101 13.1488 101C15.16 101 17.0493 98.5686 17.0493 95.3659C17.0493 87.5001 13.1488 83.5001 13.1488 61.0001M17.71 61.0001C17.2 69.5 13.63 72.0149 14.14 78.0149" stroke="#CCB951"/>
+<path d="M18.4398 97.6389C44.74 97.6389 58 105 58 97.6389" stroke="#CCB951"/>
+<path d="M18.4398 97.6389C44.74 97.6389 51.37 109 58 103" stroke="#CCB951"/>
+</g>
+<g filter="url(#filter3_d_42_413)">
+<path d="M14.0448 13.8777C14.4838 15.6868 12.4621 16.9576 10.6318 15.2704C8.54979 13.3511 11.1194 9.38466 14.0448 10.0811C16.9702 10.7774 17.9453 13.1813 17.9453 17.3596C17.9453 20.7023 17.9453 47.8459 17.9453 61" stroke="#CCB951"/>
+<path d="M13.63 22.75C13.63 24.5551 10.57 24.28 10.57 22.75C10.57 21.22 11.59 20.2 13.1488 20.2C15.16 20.2 17.0493 22.68 17.0493 25.9467C17.0493 33.9698 13.1488 38.0498 13.1488 60.9998M17.71 60.9998C17.2 52.33 13.63 49.7648 14.14 43.6448" stroke="#CCB951"/>
+<path d="M18.4398 23.6284C44.74 23.6284 58 16.12 58 23.6284" stroke="#CCB951"/>
+<path d="M18.4398 23.6284C44.74 23.6284 51.37 12.04 58 18.16" stroke="#CCB951"/>
+</g>
+<defs>
+<filter id="filter0_d_42_413" x="48.6" y="52.0708" width="65.9811" height="68.33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.45"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.8 0 0 0 0 0.72549 0 0 0 0 0.317647 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_42_413"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_42_413" result="shape"/>
+</filter>
+<filter id="filter1_d_42_413" x="48.6" y="0.599085" width="65.9811" height="69.3295" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.45"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.8 0 0 0 0 0.72549 0 0 0 0 0.317647 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_42_413"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_42_413" result="shape"/>
+</filter>
+<filter id="filter2_d_42_413" x="0.475329" y="52.0702" width="66.9247" height="68.3306" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.45"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.8 0 0 0 0 0.72549 0 0 0 0 0.317647 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_42_413"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_42_413" result="shape"/>
+</filter>
+<filter id="filter3_d_42_413" x="0.475326" y="0.599207" width="66.9247" height="69.33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.45"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.8 0 0 0 0 0.72549 0 0 0 0 0.317647 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_42_413"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_42_413" result="shape"/>
+</filter>
+</defs>
+</svg>

static/cursor.svg

@@ -0,0 +1,84 @@
+<svg width="14" height="31" viewBox="0 0 14 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 0C7 5.67742 13 9.80645 13 16" stroke="url(#paint0_linear_63_437)"/>
+<path d="M9.5277 7C11.4235 10 7 12.5 7 16" stroke="url(#paint1_linear_63_437)"/>
+<path d="M9 11C9 13.5 10.5 13.2778 10.5 16" stroke="url(#paint2_linear_63_437)"/>
+<path d="M7.5 3C8 4 9 9.5 7 9.5" stroke="url(#paint3_linear_63_437)"/>
+<path d="M7 0C7 5.67742 1 9.80645 1 16" stroke="url(#paint4_linear_63_437)"/>
+<path d="M4.4723 7C2.57653 10 7 12.5 7 16" stroke="url(#paint5_linear_63_437)"/>
+<path d="M5 11C5 13.5 3.5 13.2778 3.5 16" stroke="url(#paint6_linear_63_437)"/>
+<path d="M6.5 3C6 4 5 9.5 7 9.5" stroke="url(#paint7_linear_63_437)"/>
+<path d="M7 31C7 25.6774 13 21.8065 13 16" stroke="url(#paint8_linear_63_437)"/>
+<path d="M9.5277 24.4375C11.4235 21.625 7 19.2812 7 16" stroke="url(#paint9_linear_63_437)"/>
+<path d="M9 20.6875C9 18.3438 10.5 18.5521 10.5 16" stroke="url(#paint10_linear_63_437)"/>
+<path d="M7.5 28.1875C8 27.25 9 22.0938 7 22.0938" stroke="url(#paint11_linear_63_437)"/>
+<path d="M7 31C7 25.6774 1 21.8065 1 16" stroke="url(#paint12_linear_63_437)"/>
+<path d="M4.4723 24.4375C2.57653 21.625 7 19.2812 7 16" stroke="url(#paint13_linear_63_437)"/>
+<path d="M5 20.6875C5 18.3438 3.5 18.5521 3.5 16" stroke="url(#paint14_linear_63_437)"/>
+<path d="M6.5 28.1875C6 27.25 5 22.0938 7 22.0938" stroke="url(#paint15_linear_63_437)"/>
+<defs>
+<linearGradient id="paint0_linear_63_437" x1="10" y1="0" x2="10" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint1_linear_63_437" x1="8.5" y1="16" x2="8.5" y2="7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint2_linear_63_437" x1="9.75" y1="16" x2="9.75" y2="11" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint3_linear_63_437" x1="7" y1="6.25" x2="8.19648" y2="6.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint4_linear_63_437" x1="4" y1="0" x2="4" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint5_linear_63_437" x1="5.5" y1="16" x2="5.5" y2="7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint6_linear_63_437" x1="4.25" y1="16" x2="4.25" y2="11" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint7_linear_63_437" x1="7" y1="6.25" x2="5.80352" y2="6.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint8_linear_63_437" x1="10" y1="31" x2="10" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint9_linear_63_437" x1="8.5" y1="16" x2="8.5" y2="24.4375" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint10_linear_63_437" x1="9.75" y1="16" x2="9.75" y2="20.6875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint11_linear_63_437" x1="7" y1="25.1406" x2="8.19648" y2="25.1406" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint12_linear_63_437" x1="4" y1="31" x2="4" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint13_linear_63_437" x1="5.5" y1="16" x2="5.5" y2="24.4375" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint14_linear_63_437" x1="4.25" y1="16" x2="4.25" y2="20.6875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+<linearGradient id="paint15_linear_63_437" x1="7" y1="25.1406" x2="5.80352" y2="25.1406" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCB951"/>
+<stop offset="1" stop-color="#8B7F41"/>
+</linearGradient>
+</defs>
+</svg>

static/loader.svg

@@ -0,0 +1,5 @@
+<svg width="27" height="62" viewBox="0 0 27 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 6C1.99999 6 2.99999 19.0174 13.5 29.5174C24 40.0174 28.5 55.5 13.5 55.5C2 55.5 -0.999994 44 14.5 28.5C29.5 13.5 21 6 13.5 6Z" stroke="black"/>
+<path d="M13.5019 19C-1.41403 19 -0.116993 25.3114 13.5019 30.4024C27.1209 35.4933 32.9575 43 13.502 43C-1.41402 43 -5.30514 37.4242 14.799 29.9091C34.2546 22.6364 23.2297 19 13.5019 19Z" stroke="black"/>
+<path d="M13.5007 1C8.13095 1 8.59788 16.7786 13.5007 29.5059C18.4035 42.2332 20.5047 61 13.5007 61C8.13095 61 6.73015 47.0606 13.9676 28.2727C20.9716 10.0909 17.0027 1 13.5007 1Z" stroke="black"/>
+</svg>