feat: improve some styles
This commit is contained in:
parent
1c9977bc02
commit
71f7a955f0
@ -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;
|
||||
|
||||
68
src/lib/components/Loader.svelte
Normal file
68
src/lib/components/Loader.svelte
Normal 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>
|
||||
@ -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>
|
||||
{/if}
|
||||
<div class="button-wrapper">
|
||||
<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%;
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
animation: fadeIn 1s ease forwards;
|
||||
animation-delay: var(--delay);
|
||||
font-size: 0.7em;
|
||||
color: #fffa;
|
||||
color: #fffffff2;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
|
||||
@ -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);
|
||||
box-shadow: 0 0 70px #ffb11b22;
|
||||
/*background: rgba(0, 0, 0, 0.7);*/
|
||||
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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
68
static/border_b.svg
Normal file
68
static/border_b.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
84
static/cursor.svg
Normal file
84
static/cursor.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
5
static/loader.svg
Normal file
5
static/loader.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 664 B |
Loading…
Reference in New Issue
Block a user