max/silvester-24
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
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;
</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
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 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,15 +269,18 @@
{/if}
{#if $data.portraitAccepted}
<div class="button-wrapper">
{#if isSubmitting}
<section in:slide>
{#if isSubmitting}
<section in:slide style="border: none;">
<div style="display: flex; gap: 20px; align-items: center;">
<Loader />
<p>Einladung wird abgeschickt</p>
</section>
{:else}
<Button on:click={() => submit()}>Einladung abschicken</Button>
{/if}
</div>
</div>
</section>
{:else}
<div class="button-wrapper">
<Button on:click={() => submit()}>Möchtet Ihr diese königliche Einladung annehmen?</Button>
</div>
{/if}
{/if}
</div>
@ -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%;

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

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

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

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

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

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

8
src/routes/+page.svelte
View File

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