max/silvester-23
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: improve some styles

Browse Source
This commit is contained in:
max_richter 2023-11-12 23:54:51 +01:00
parent 1c9977bc02
commit 71f7a955f0
11 changed files with 334 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/lib/components/InputRange.svelte
View File

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

68
src/lib/components/Loader.svelte Normal file
View File

@ -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>

78
src/lib/components/Questions.svelte
View File

@ -6,6 +6,7 @@
import Button from './button.svelte'; import Button from './button.svelte';
import InputRange from './InputRange.svelte'; import InputRange from './InputRange.svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import Loader from './Loader.svelte';
let data = persisted<{ let data = persisted<{
name: string; name: string;
@ -34,6 +35,7 @@
adelsTitel: undefined, adelsTitel: undefined,
adelsTitelSuggestions: [], adelsTitelSuggestions: [],
provideAdelsTitel: undefined, provideAdelsTitel: undefined,
portraitPublic: true,
confidence: undefined, confidence: undefined,
confidenceAccepted: false, confidenceAccepted: false,
createPersonality: undefined createPersonality: undefined
@ -87,20 +89,23 @@
<div class="wrapper"> <div class="wrapper">
<section in:slide={{ delay: 500 }}> <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} /> <input placeholder="Name" type="text" bind:value={$data.name} />
{#if !$data.nameAccepted} {#if !$data.nameAccepted}
<button <button
on:click={() => { on:click={() => {
$data.nameAccepted = true; $data.nameAccepted = true;
}}>name speichern</button }}>Name akzeptieren</button
> >
{/if} {/if}
</section> </section>
{#if ($data.name && $data.nameAccepted) || $data.confidence !== undefined} {#if ($data.name && $data.nameAccepted) || $data.confidence !== undefined}
<section in:slide={{ delay: 0, duration: 500 }}> <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 }}> <div in:fade={{ delay: 1200 }}>
<InputRange bind:value={$data.confidence} /> <InputRange bind:value={$data.confidence} />
</div> </div>
@ -116,7 +121,9 @@
{#if $data.confidence !== undefined && $data.confidenceAccepted && $data.createPersonality === undefined} {#if $data.confidence !== undefined && $data.confidenceAccepted && $data.createPersonality === undefined}
<section in:slide out:slide> <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> <div>
<button <button
on:click={() => { on:click={() => {
@ -138,7 +145,7 @@
{#if $data.createPersonality === true} {#if $data.createPersonality === true}
<section in:fade out:slide> <section in:fade out:slide>
{#if $data.provideAdelsTitel === undefined} {#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> <div>
<button <button
on:click={() => { on:click={() => {
@ -160,7 +167,10 @@
{/if} {/if}
{#if loadingAdelsTitel} {#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'} {:else if typeof $data.adelsTitel === 'string'}
<TextSplit content="Euer Adelstitel" /> <TextSplit content="Euer Adelstitel" />
<input placeholder="Name" type="text" bind:value={$data.adelsTitel} /> <input placeholder="Name" type="text" bind:value={$data.adelsTitel} />
@ -194,7 +204,9 @@
{#if $data.adelsTitel && $data.adelsTitelAccepted && $data.providePortrait !== false} {#if $data.adelsTitel && $data.adelsTitelAccepted && $data.providePortrait !== false}
<section transition:slide> <section transition:slide>
{#if $data.providePortrait === undefined} {#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> <div>
<button <button
on:click={() => { on:click={() => {
@ -229,27 +241,26 @@
<option value="braunem">braunen</option> <option value="braunem">braunen</option>
</select> Haaren zeichnen </select> Haaren zeichnen
</p> </p>
<button on:click={() => fetchPortrait()}> porträt malen (~30 Sekunden)</button> <button on:click={() => fetchPortrait()}> porträt malen (~15 Sekunden)</button>
{:else if loadingPortrait} {: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} {:else if $data.portraitUrl}
<div in:slide={{ duration: 2000 }} class="portrait"> <div in:slide={{ duration: 2000 }} class="portrait">
<ImageFrame src={$data.portraitUrl} alt="portrait" /> <ImageFrame src={$data.portraitUrl} alt="portrait" />
{#if !$data.portraitAccepted} {#if !$data.portraitAccepted}
<input bind:checked={$data.portraitPublic} type="checkbox" id="display-portrait" />
<label for="display-portrait">Porträt öffentlich anzeigen</label>
<br />
<button <button
on:click={() => { on:click={() => {
$data.portraitAccepted = true; $data.portraitAccepted = true;
}}>portrait akzeptieren</button }}>Porträt annehmen</button
> >
<button <button
on:click={() => { on:click={() => {
$data.portraitUrl = undefined; $data.portraitUrl = undefined;
}}>neues portrait</button }}>Neues Porträt anfordern</button
> >
{/if} {/if}
</div> </div>
@ -258,15 +269,18 @@
{/if} {/if}
{#if $data.portraitAccepted} {#if $data.portraitAccepted}
<div class="button-wrapper"> {#if isSubmitting}
{#if isSubmitting} <section in:slide style="border: none;">
<section in:slide> <div style="display: flex; gap: 20px; align-items: center;">
<Loader />
<p>Einladung wird abgeschickt</p> <p>Einladung wird abgeschickt</p>
</section> </div>
{:else} </section>
<Button on:click={() => submit()}>Einladung abschicken</Button> {:else}
{/if} <div class="button-wrapper">
</div> <Button on:click={() => submit()}>Möchtet Ihr diese königliche Einladung annehmen?</Button>
</div>
{/if}
{/if} {/if}
</div> </div>
@ -276,7 +290,7 @@
justify-content: center; justify-content: center;
padding-block: 20px; padding-block: 20px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 99%;
max-width: 500px; max-width: 500px;
padding-block: 50px; padding-block: 50px;
font-size: 2em; font-size: 2em;
@ -299,8 +313,8 @@
width: 100%; width: 100%;
font-size: 1em; font-size: 1em;
margin: 0 auto; margin: 0 auto;
width: fit-content;
border-bottom: 1px solid white; border-bottom: 1px solid white;
box-sizing: border-box;
} }
input[type='text']::after { input[type='text']::after {
content: ''; content: '';
@ -309,16 +323,28 @@
width: 100%; width: 100%;
} }
select {
background: transparent;
color: white;
border: none;
padding: 5px;
border-bottom: 1px solid white;
}
select > option {
color: black;
}
section { section {
color: white; color: white;
font-family: 'Parisienne', cursive; font-family: 'Parisienne', cursive;
max-width: 500px; max-width: 500px;
padding: 20px;
margin: 0 auto; margin: 0 auto;
font-size: 2em; font-size: 2em;
width: 70%; width: 70%;
border-width: 30px; border-width: 30px;
border-style: solid; border-style: solid;
border-image: url(/border.svg); border-image: url(/border_b.svg);
border-image-repeat: stretch; border-image-repeat: stretch;
border-image-slice: 100%; border-image-slice: 100%;
border-image-slice: 24% 23%; border-image-slice: 24% 23%;

2
src/lib/components/TextSplit.svelte
View File

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

10
src/lib/components/button.svelte
View File

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

2
src/lib/components/maskenball.svelte
View File

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

8
src/routes/+page.svelte
View File

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

0
static/border.svg → static/border_a.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

68
static/border_b.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

84
static/cursor.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

5
static/loader.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 664 B