Spaces:
Runtime error
Runtime error
Merge branch 'ui-update'
Browse files- frontend/src/lib/App.svelte +23 -16
- frontend/src/lib/Buttons/AboutButton.svelte +1 -8
- frontend/src/lib/Buttons/MaskButton.svelte +2 -4
- frontend/src/lib/Buttons/PPButton.svelte +1 -1
- frontend/src/lib/Buttons/RoomsSelector.svelte +66 -65
- frontend/src/lib/Cursor.svelte +5 -6
- frontend/src/lib/Frame.svelte +13 -12
- frontend/src/lib/Icons/Cursor.svelte +13 -5
- frontend/src/lib/Icons/LoadingIcon.svelte +11 -8
- frontend/src/lib/Icons/Mask.svelte +2 -2
- frontend/src/lib/Icons/People.svelte +11 -4
- frontend/src/lib/Menu.svelte +8 -3
- frontend/src/lib/PaintCanvas.svelte +7 -2
- frontend/src/lib/PaintFrame.svelte +63 -49
- frontend/src/lib/PromptModal.svelte +11 -13
- frontend/src/lib/constants.ts +12 -6
- stablediffusion-infinity/rooms.db +0 -0
- static/_app/immutable/assets/app-a867e11d.css +1 -1
- static/_app/immutable/chunks/App-b4e90bcb.js +0 -0
frontend/src/lib/App.svelte
CHANGED
@@ -6,7 +6,7 @@
|
|
6 |
import ShareWithCommunity from '$lib/Buttons/ShareWithCommunity.svelte';
|
7 |
import Menu from '$lib/Menu.svelte';
|
8 |
import PromptModal from '$lib/PromptModal.svelte';
|
9 |
-
import { COLORS
|
10 |
import { PUBLIC_WS_INPAINTING } from '$env/static/public';
|
11 |
import type { PromptImgKey, Presence } from '$lib/types';
|
12 |
import { Status } from '$lib/types';
|
@@ -15,7 +15,7 @@
|
|
15 |
import { base64ToBlob, uploadImage } from '$lib/utils';
|
16 |
import { nanoid } from 'nanoid';
|
17 |
import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
|
18 |
-
import { CANVAS_SIZE, FRAME_SIZE} from '$lib/constants';
|
19 |
|
20 |
/**
|
21 |
* The main Liveblocks code for the example.
|
@@ -178,22 +178,31 @@
|
|
178 |
</div>
|
179 |
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
180 |
<div
|
181 |
-
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-
|
182 |
{showAbout ? 'flex' : 'hidden'}"
|
183 |
on:click={() => (showAbout = false)}
|
184 |
>
|
185 |
<div class="max-w-md">
|
186 |
-
<h2 class="font-bold text-xl font-mono">Stable Difussion Multiplayer</h2>
|
187 |
<p>
|
188 |
-
Hugging Face face GPU Spaces
|
189 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
190 |
</p>
|
191 |
<p>
|
192 |
Thanks to <a
|
193 |
href="https://twitter.com/lkwq007"
|
194 |
target="_blank"
|
195 |
rel="noopener noreferrer"
|
196 |
-
class="text-blue-400
|
197 |
>
|
198 |
Lnyan</a
|
199 |
>
|
@@ -202,12 +211,11 @@
|
|
202 |
href="https://github.com/lkwq007/stablediffusion-infinity"
|
203 |
target="_blank"
|
204 |
rel="noopener noreferrer"
|
205 |
-
class="text-blue-400
|
206 |
>Stable Diffusion Infinity
|
207 |
</a>.
|
208 |
</p>
|
209 |
-
<
|
210 |
-
<p>
|
211 |
Runwayml Inpaiting Stable Diffusion
|
212 |
<a
|
213 |
href="https://github.com/runwayml/stable-diffusion"
|
@@ -217,9 +225,9 @@
|
|
217 |
https://github.com/runwayml/stable-diffusion</a
|
218 |
>
|
219 |
</p>
|
220 |
-
<p class="text-base">
|
221 |
Multiplayer API by
|
222 |
-
<LiveBlocks />
|
223 |
</p>
|
224 |
</div>
|
225 |
</div>
|
@@ -245,7 +253,6 @@
|
|
245 |
{/if}
|
246 |
{#if presence?.cursor}
|
247 |
<Cursor
|
248 |
-
emoji={EMOJIS[1 + (connectionId % (EMOJIS.length - 1))]}
|
249 |
color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
|
250 |
position={presence?.cursor}
|
251 |
transform={$currZoomTransform}
|
@@ -255,10 +262,10 @@
|
|
255 |
{/if}
|
256 |
</main>
|
257 |
</div>
|
258 |
-
<div class="fixed top-0 right-0 z-10 p-2">
|
259 |
<ShareWithCommunity />
|
260 |
-
</div>
|
261 |
-
<div class="fixed bottom-
|
262 |
<Menu on:prompt={onPrompt} {isLoading} on:toggleAbout={() => (showAbout = !showAbout)} />
|
263 |
</div>
|
264 |
|
|
|
6 |
import ShareWithCommunity from '$lib/Buttons/ShareWithCommunity.svelte';
|
7 |
import Menu from '$lib/Menu.svelte';
|
8 |
import PromptModal from '$lib/PromptModal.svelte';
|
9 |
+
import { COLORS } from '$lib/constants';
|
10 |
import { PUBLIC_WS_INPAINTING } from '$env/static/public';
|
11 |
import type { PromptImgKey, Presence } from '$lib/types';
|
12 |
import { Status } from '$lib/types';
|
|
|
15 |
import { base64ToBlob, uploadImage } from '$lib/utils';
|
16 |
import { nanoid } from 'nanoid';
|
17 |
import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
|
18 |
+
import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
|
19 |
|
20 |
/**
|
21 |
* The main Liveblocks code for the example.
|
|
|
178 |
</div>
|
179 |
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
180 |
<div
|
181 |
+
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll
|
182 |
{showAbout ? 'flex' : 'hidden'}"
|
183 |
on:click={() => (showAbout = false)}
|
184 |
>
|
185 |
<div class="max-w-md">
|
186 |
+
<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
|
187 |
<p>
|
188 |
+
Hugging Face face GPU Spaces <a
|
189 |
+
href="https://huggingface.co/docs/hub/spaces-gpus"
|
190 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
191 |
+
>https://huggingface.co/docs/hub/spaces-gpus</a
|
192 |
+
>
|
193 |
+
Diffusers
|
194 |
+
<a
|
195 |
+
href="https://huggingface.co/docs/diffusers/index"
|
196 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
197 |
+
>https://huggingface.co/docs/diffusers/index</a
|
198 |
+
>
|
199 |
</p>
|
200 |
<p>
|
201 |
Thanks to <a
|
202 |
href="https://twitter.com/lkwq007"
|
203 |
target="_blank"
|
204 |
rel="noopener noreferrer"
|
205 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
206 |
>
|
207 |
Lnyan</a
|
208 |
>
|
|
|
211 |
href="https://github.com/lkwq007/stablediffusion-infinity"
|
212 |
target="_blank"
|
213 |
rel="noopener noreferrer"
|
214 |
+
class="text-blue-400 hover:text-blue-600 underline"
|
215 |
>Stable Diffusion Infinity
|
216 |
</a>.
|
217 |
</p>
|
218 |
+
<p class="mb-6">
|
|
|
219 |
Runwayml Inpaiting Stable Diffusion
|
220 |
<a
|
221 |
href="https://github.com/runwayml/stable-diffusion"
|
|
|
225 |
https://github.com/runwayml/stable-diffusion</a
|
226 |
>
|
227 |
</p>
|
228 |
+
<p class="text-base flex items-center">
|
229 |
Multiplayer API by
|
230 |
+
<LiveBlocks classList="ml-2" />
|
231 |
</p>
|
232 |
</div>
|
233 |
</div>
|
|
|
253 |
{/if}
|
254 |
{#if presence?.cursor}
|
255 |
<Cursor
|
|
|
256 |
color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
|
257 |
position={presence?.cursor}
|
258 |
transform={$currZoomTransform}
|
|
|
262 |
{/if}
|
263 |
</main>
|
264 |
</div>
|
265 |
+
<!-- <div class="fixed top-0 right-0 z-10 p-2">
|
266 |
<ShareWithCommunity />
|
267 |
+
</div> -->
|
268 |
+
<div class="fixed bottom-32 left-0 right-0 z-10 my-2">
|
269 |
<Menu on:prompt={onPrompt} {isLoading} on:toggleAbout={() => (showAbout = !showAbout)} />
|
270 |
</div>
|
271 |
|
frontend/src/lib/Buttons/AboutButton.svelte
CHANGED
@@ -1,8 +1,4 @@
|
|
1 |
-
<button
|
2 |
-
on:click
|
3 |
-
class="button-paint"
|
4 |
-
title="Prompt and Paint"
|
5 |
-
>
|
6 |
<span>About</span>
|
7 |
</button>
|
8 |
|
@@ -10,7 +6,4 @@
|
|
10 |
/* .button {
|
11 |
@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
|
12 |
} */
|
13 |
-
.button-paint {
|
14 |
-
@apply text-xs md:text-sm font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 rounded-xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
|
15 |
-
}
|
16 |
</style>
|
|
|
1 |
+
<button on:click title="Prompt and Paint" class="underline w-[210px] text-sm">
|
|
|
|
|
|
|
|
|
2 |
<span>About</span>
|
3 |
</button>
|
4 |
|
|
|
6 |
/* .button {
|
7 |
@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
|
8 |
} */
|
|
|
|
|
|
|
9 |
</style>
|
frontend/src/lib/Buttons/MaskButton.svelte
CHANGED
@@ -8,12 +8,10 @@
|
|
8 |
<button
|
9 |
on:click
|
10 |
disabled={isLoading}
|
11 |
-
class="{className} rounded-full disabled:opacity-50 {isActive
|
12 |
-
? 'text-blue-700'
|
13 |
-
: 'text-gray-800'}"
|
14 |
title="Draw to Mask"
|
15 |
>
|
16 |
-
<Mask />
|
17 |
</button>
|
18 |
|
19 |
<style lang="postcss" scoped>
|
|
|
8 |
<button
|
9 |
on:click
|
10 |
disabled={isLoading}
|
11 |
+
class="{className} rounded-full disabled:opacity-50 {isActive ? 'text-white' : 'text-blue-200'}"
|
|
|
|
|
12 |
title="Draw to Mask"
|
13 |
>
|
14 |
+
<Mask classList="text-3xl" />
|
15 |
</button>
|
16 |
|
17 |
<style lang="postcss" scoped>
|
frontend/src/lib/Buttons/PPButton.svelte
CHANGED
@@ -24,6 +24,6 @@
|
|
24 |
@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
|
25 |
} */
|
26 |
.button-paint {
|
27 |
-
@apply text-xs md:text-sm font-mono bg-
|
28 |
}
|
29 |
</style>
|
|
|
24 |
@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
|
25 |
} */
|
26 |
.button-paint {
|
27 |
+
@apply text-xs md:text-sm font-mono bg-blue-100 text-blue-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 rounded-xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
|
28 |
}
|
29 |
</style>
|
frontend/src/lib/Buttons/RoomsSelector.svelte
CHANGED
@@ -45,76 +45,77 @@
|
|
45 |
</script>
|
46 |
|
47 |
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
48 |
-
|
49 |
-
|
50 |
-
class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch]
|
51 |
-
{isLoading ? 'opacity-50' : ''}
|
52 |
-
{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
|
53 |
-
title="Choose a different room"
|
54 |
-
bind:this={boxEl}
|
55 |
-
>
|
56 |
-
{#if !collapsed}
|
57 |
-
<div class="absolute left-0 right-0 bottom-full rounded-t-xl bg-violet-100 px-1">
|
58 |
-
<ul class="relative overflow-y-scroll max-h-72">
|
59 |
-
<li class="grid-row gap-2 pb-3 sticky top-0 bg-violet-100 py-2">
|
60 |
-
<Room />
|
61 |
-
<span> room </span>
|
62 |
-
<People />
|
63 |
-
<span> players </span>
|
64 |
-
</li>
|
65 |
-
{#each rooms as room}
|
66 |
-
<li>
|
67 |
-
<!-- svelte-ignore a11y-invalid-attribute -->
|
68 |
-
<a
|
69 |
-
href="#"
|
70 |
-
on:click|preventDefault={() => changeRoom(room)}
|
71 |
-
class="grid-row gap-2 hover:bg-gray-300
|
72 |
-
{room.room_id === $selectedRoomID ? 'text-green-600' : ''}"
|
73 |
-
>
|
74 |
-
<span>
|
75 |
-
{#if room.room_id === $selectedRoomID}
|
76 |
-
<Pin />
|
77 |
-
{/if}
|
78 |
-
</span>
|
79 |
-
<span>room {room.id} </span>
|
80 |
-
<span />
|
81 |
-
<span>{room.users_count} / {MAX_CAPACITY}</span>
|
82 |
-
</a>
|
83 |
-
</li>
|
84 |
-
{/each}
|
85 |
-
</ul>
|
86 |
-
<div class="border-t-2 border-t-gray-400 border-opacity-50" />
|
87 |
-
</div>
|
88 |
-
{/if}
|
89 |
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
90 |
<div
|
91 |
-
class=
|
92 |
-
|
|
|
|
|
93 |
>
|
94 |
-
{#if
|
95 |
-
<div class="
|
96 |
-
<
|
97 |
-
|
98 |
-
|
99 |
-
|
100 |
-
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
|
105 |
-
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
|
112 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
113 |
</div>
|
114 |
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
115 |
</div>
|
116 |
-
|
117 |
-
|
118 |
|
119 |
<style lang="postcss" scoped>
|
120 |
.grid-row {
|
|
|
45 |
</script>
|
46 |
|
47 |
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
48 |
+
<div class="min-w-[25ch]">
|
49 |
+
{#if loadingRooms}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
50 |
<div
|
51 |
+
class="text-xs rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative z-0
|
52 |
+
{isLoading ? 'opacity-50' : ''}"
|
53 |
+
title="Choose a different room"
|
54 |
+
bind:this={boxEl}
|
55 |
>
|
56 |
+
{#if !collapsed}
|
57 |
+
<div class="absolute left-0 right-0 bottom-full rounded-xl bg-blue-600 px-1">
|
58 |
+
<ul class="relative overflow-y-scroll max-h-72">
|
59 |
+
<li class="grid-row gap-2 pb-3 sticky top-0 py-2">
|
60 |
+
<Room />
|
61 |
+
<span> room </span>
|
62 |
+
<People />
|
63 |
+
<span> players </span>
|
64 |
+
</li>
|
65 |
+
{#each rooms as room}
|
66 |
+
<li>
|
67 |
+
<!-- svelte-ignore a11y-invalid-attribute -->
|
68 |
+
<a
|
69 |
+
href="#"
|
70 |
+
on:click|preventDefault={() => changeRoom(room)}
|
71 |
+
class="grid-row gap-2 hover:bg-gray-300
|
72 |
+
{room.room_id === $selectedRoomID ? 'text-black' : ''}"
|
73 |
+
>
|
74 |
+
<span>
|
75 |
+
{#if room.room_id === $selectedRoomID}
|
76 |
+
<Pin />
|
77 |
+
{/if}
|
78 |
+
</span>
|
79 |
+
<span>room {room.id} </span>
|
80 |
+
<span />
|
81 |
+
<span>{room.users_count} / {MAX_CAPACITY}</span>
|
82 |
+
</a>
|
83 |
+
</li>
|
84 |
+
{/each}
|
85 |
+
</ul>
|
86 |
+
<div class="border-t-2 border-t-gray-400 border-opacity-50" />
|
87 |
</div>
|
88 |
{/if}
|
89 |
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
90 |
+
<div
|
91 |
+
class={isLoading ? 'cursor-wait' : 'cursor-pointer'}
|
92 |
+
on:click={() => (isLoading ? null : (collapsed = !collapsed))}
|
93 |
+
>
|
94 |
+
{#if selectedRoom}
|
95 |
+
<div class="grid-row gap-2">
|
96 |
+
<Room />
|
97 |
+
<span>
|
98 |
+
room {selectedRoom?.id}
|
99 |
+
</span>
|
100 |
+
<People />
|
101 |
+
<span>
|
102 |
+
{selectedRoom?.users_count} / {MAX_CAPACITY}
|
103 |
+
</span>
|
104 |
+
</div>
|
105 |
+
{:else}
|
106 |
+
<div class="grid-row gap-2">
|
107 |
+
<Room />
|
108 |
+
<span>
|
109 |
+
Loading...
|
110 |
+
<People />
|
111 |
+
<span> ... / ... </span>
|
112 |
+
</span>
|
113 |
+
</div>
|
114 |
+
{/if}
|
115 |
+
</div>
|
116 |
</div>
|
117 |
+
{/if}
|
118 |
+
</div>
|
119 |
|
120 |
<style lang="postcss" scoped>
|
121 |
.grid-row {
|
frontend/src/lib/Cursor.svelte
CHANGED
@@ -3,7 +3,6 @@
|
|
3 |
import Cursor from '$lib/Icons/Cursor.svelte';
|
4 |
export let transform: ZoomTransform;
|
5 |
export let color = '';
|
6 |
-
export let emoji: string;
|
7 |
export let position = { x: 0, y: 0 };
|
8 |
|
9 |
$: coord = {
|
@@ -13,19 +12,19 @@
|
|
13 |
</script>
|
14 |
|
15 |
<div
|
16 |
-
class="cursor"
|
17 |
style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});`}
|
18 |
>
|
19 |
-
<Cursor classList={'block z-0 col-span-2 row-span-2'} />
|
20 |
-
|
21 |
{#if emoji}
|
22 |
<div
|
23 |
-
class="absolute right-0
|
24 |
style={`text-shadow: 0px 5px 5px ${color}`}
|
25 |
>
|
26 |
{emoji}
|
27 |
</div>
|
28 |
-
{/if}
|
29 |
</div>
|
30 |
|
31 |
<style lang="postcss" scoped>
|
|
|
3 |
import Cursor from '$lib/Icons/Cursor.svelte';
|
4 |
export let transform: ZoomTransform;
|
5 |
export let color = '';
|
|
|
6 |
export let position = { x: 0, y: 0 };
|
7 |
|
8 |
$: coord = {
|
|
|
12 |
</script>
|
13 |
|
14 |
<div
|
15 |
+
class="cursor text-4xl"
|
16 |
style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});`}
|
17 |
>
|
18 |
+
<Cursor classList={'block z-0 col-span-2 row-span-2 text-8xl'} fill={color} />
|
19 |
+
<!--
|
20 |
{#if emoji}
|
21 |
<div
|
22 |
+
class="absolute right-0 col-start-2 row-start-2 text-8xl"
|
23 |
style={`text-shadow: 0px 5px 5px ${color}`}
|
24 |
>
|
25 |
{emoji}
|
26 |
</div>
|
27 |
+
{/if} -->
|
28 |
</div>
|
29 |
|
30 |
<style lang="postcss" scoped>
|
frontend/src/lib/Frame.svelte
CHANGED
@@ -14,20 +14,21 @@
|
|
14 |
</script>
|
15 |
|
16 |
<div
|
17 |
-
class="
|
18 |
style={`width: ${FRAME_SIZE}px;
|
19 |
-
height: ${FRAME_SIZE}px;
|
20 |
-
translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
|
21 |
>
|
22 |
<div class="pointer-events-none touch-none">
|
23 |
-
<div class="font-bold text-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
|
|
|
|
|
|
|
|
28 |
</div>
|
29 |
-
|
30 |
</div>
|
31 |
-
|
32 |
-
<style lang="postcss" scoped>
|
33 |
-
</style>
|
|
|
14 |
</script>
|
15 |
|
16 |
<div
|
17 |
+
class="absolute top-0 left-0 border-8 border-dashed border-black flex items-center justify-center bg-black/60"
|
18 |
style={`width: ${FRAME_SIZE}px;
|
19 |
+
height: ${FRAME_SIZE}px;
|
20 |
+
transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
|
21 |
>
|
22 |
<div class="pointer-events-none touch-none">
|
23 |
+
<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10 line-clamp-4 flex">
|
24 |
+
{#if isLoading}
|
25 |
+
<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
|
26 |
+
<p class="text-4xl">Someone is painting:</p>
|
27 |
+
{:else}
|
28 |
+
<p class="text-4xl">Someone is typing:</p>
|
29 |
+
{/if}
|
30 |
+
|
31 |
+
<span class="italic font-normal">"{prompt}"</span>
|
32 |
</div>
|
33 |
+
</div>
|
34 |
</div>
|
|
|
|
|
|
frontend/src/lib/Icons/Cursor.svelte
CHANGED
@@ -1,16 +1,24 @@
|
|
1 |
<script lang="ts">
|
2 |
export let classList = '';
|
|
|
3 |
</script>
|
4 |
|
5 |
<svg
|
6 |
class={classList}
|
7 |
-
width="
|
8 |
-
|
9 |
-
|
10 |
xmlns="http://www.w3.org/2000/svg"
|
11 |
>
|
12 |
<path
|
13 |
-
d="
|
14 |
-
fill
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
15 |
/>
|
16 |
</svg>
|
|
|
1 |
<script lang="ts">
|
2 |
export let classList = '';
|
3 |
+
export let fill = '';
|
4 |
</script>
|
5 |
|
6 |
<svg
|
7 |
class={classList}
|
8 |
+
width="1em"
|
9 |
+
height="1em"
|
10 |
+
viewBox="0 0 12 12"
|
11 |
xmlns="http://www.w3.org/2000/svg"
|
12 |
>
|
13 |
<path
|
14 |
+
d="M3.09022 1.77278C2.25499 1.40456 1.40358 2.25597 1.7718 3.0912L4.57875 9.45818C4.95365 10.3086 6.18455 10.2323 6.4516 9.34213L6.9637 7.63515C7.06029 7.31317 7.31219 7.06126 7.63417 6.96467L9.34117 6.45258C10.2313 6.18552 10.3076 4.95463 9.45722 4.57972L3.09022 1.77278Z"
|
15 |
+
{fill}
|
16 |
+
/>
|
17 |
+
<path
|
18 |
+
fill-rule="evenodd"
|
19 |
+
clip-rule="evenodd"
|
20 |
+
d="M3.66305 9.86091L0.856101 3.49392C0.119663 1.82347 1.82248 0.120639 3.49294 0.857077L9.85994 3.66402C11.5607 4.41383 11.4082 6.87562 9.62784 7.40973L7.92085 7.92182L7.40875 9.62881C6.87465 11.4092 4.41286 11.5617 3.66305 9.86091ZM1.77113 3.09053C1.40291 2.2553 2.25432 1.40388 3.08955 1.7721L9.45654 4.57905C10.3069 4.95395 10.2307 6.18485 9.34049 6.4519L7.6335 6.964C7.31152 7.06059 7.05961 7.3125 6.96302 7.63448L6.45093 9.34146C6.18387 10.2316 4.95298 10.3079 4.57807 9.45751L1.77113 3.09053Z"
|
21 |
+
{fill}
|
22 |
+
fill-opacity="0.2"
|
23 |
/>
|
24 |
</svg>
|
frontend/src/lib/Icons/LoadingIcon.svelte
CHANGED
@@ -4,17 +4,20 @@
|
|
4 |
|
5 |
<svg
|
6 |
class={classList}
|
7 |
-
width="51"
|
8 |
-
viewBox="0 0 21 21"
|
9 |
-
fill="none"
|
10 |
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
11 |
>
|
|
|
12 |
<path
|
13 |
-
d="M21 10.5C21 4.70101 16.299 0 10.5 0C4.70101 0 0 4.70101 0 10.5C0 16.299 4.70101 21 10.5 21C16.299 21 21 16.299 21 10.5Z"
|
14 |
-
fill="white"
|
15 |
-
/>
|
16 |
-
<path
|
17 |
-
d="M10.5006 17C9.6233 17 8.77136 16.8286 7.97021 16.4896C7.19572 16.1621 6.50122 15.6924 5.90448 15.0957C5.30774 14.499 4.83797 13.8046 4.5104 13.0302C4.1714 12.2291 4 11.3772 4 10.5C4 10.2474 4.20441 10.043 4.45708 10.043C4.70974 10.043 4.91415 10.2474 4.91415 10.5C4.91415 11.2541 5.06143 11.9854 5.35345 12.6747C5.63532 13.3399 6.0378 13.9379 6.55074 14.4508C7.06368 14.9637 7.66169 15.3674 8.32698 15.6479C9.01514 15.9387 9.74646 16.0859 10.5006 16.0859C11.2548 16.0859 11.9861 15.9387 12.6756 15.6467C13.3409 15.3648 13.9389 14.9624 14.4518 14.4495C14.9647 13.9366 15.3685 13.3387 15.6491 12.6734C15.9398 11.9854 16.0871 11.2541 16.0871 10.5C16.0871 9.7459 15.9398 9.01465 15.6478 8.32529C15.3669 7.66166 14.9604 7.05857 14.4505 6.54922C13.9417 6.03876 13.3384 5.63215 12.6743 5.35205C11.9861 5.06133 11.2548 4.91406 10.5006 4.91406C10.248 4.91406 10.0436 4.70967 10.0436 4.45703C10.0436 4.20439 10.248 4 10.5006 4C11.378 4 12.2299 4.17139 13.0311 4.51035C13.8055 4.83789 14.5 5.30762 15.0968 5.9043C15.6935 6.50098 16.162 7.19668 16.4896 7.96982C16.8286 8.7709 17 9.62275 17 10.5C17 11.3772 16.8286 12.2291 16.4896 13.0302C16.1633 13.8046 15.6935 14.499 15.0968 15.0957C14.5 15.6924 13.8043 16.1608 13.0311 16.4884C12.2299 16.8286 11.378 17 10.5006 17Z"
|
18 |
fill="currentColor"
|
|
|
19 |
/>
|
20 |
</svg>
|
|
|
4 |
|
5 |
<svg
|
6 |
class={classList}
|
|
|
|
|
|
|
7 |
xmlns="http://www.w3.org/2000/svg"
|
8 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
9 |
+
aria-hidden="true"
|
10 |
+
fill="none"
|
11 |
+
focusable="false"
|
12 |
+
role="img"
|
13 |
+
width="1em"
|
14 |
+
height="1em"
|
15 |
+
preserveAspectRatio="xMidYMid meet"
|
16 |
+
viewBox="0 0 24 24"
|
17 |
>
|
18 |
+
<circle class="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
19 |
<path
|
|
|
|
|
|
|
|
|
|
|
20 |
fill="currentColor"
|
21 |
+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
22 |
/>
|
23 |
</svg>
|
frontend/src/lib/Icons/Mask.svelte
CHANGED
@@ -4,8 +4,8 @@
|
|
4 |
|
5 |
<svg
|
6 |
class={classList}
|
7 |
-
width="
|
8 |
-
height="
|
9 |
viewBox="-2 -2 14 14"
|
10 |
fill="none"
|
11 |
xmlns="http://www.w3.org/2000/svg"
|
|
|
4 |
|
5 |
<svg
|
6 |
class={classList}
|
7 |
+
width="1em"
|
8 |
+
height="1em"
|
9 |
viewBox="-2 -2 14 14"
|
10 |
fill="none"
|
11 |
xmlns="http://www.w3.org/2000/svg"
|
frontend/src/lib/Icons/People.svelte
CHANGED
@@ -2,21 +2,28 @@
|
|
2 |
export let classList = '';
|
3 |
</script>
|
4 |
|
5 |
-
<svg
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
6 |
<path
|
7 |
fill-rule="evenodd"
|
8 |
clip-rule="evenodd"
|
9 |
d="M6.41113 3.73486C6.97158 4.11531 7.3643 4.63076 7.3643 5.31801V6.54526H8.59155C8.81654 6.54526 9.00063 6.36118 9.00063 6.13618V5.31801C9.00063 4.42621 7.5402 3.8985 6.41113 3.73486Z"
|
10 |
-
fill="
|
11 |
/>
|
12 |
<path
|
13 |
d="M3.27305 3.27266C4.17677 3.27266 4.90938 2.54005 4.90938 1.63633C4.90938 0.732611 4.17677 0 3.27305 0C2.36933 0 1.63672 0.732611 1.63672 1.63633C1.63672 2.54005 2.36933 3.27266 3.27305 3.27266Z"
|
14 |
-
fill="
|
15 |
/>
|
16 |
<path
|
17 |
fill-rule="evenodd"
|
18 |
clip-rule="evenodd"
|
19 |
d="M5.72716 3.27266C6.63124 3.27266 7.36349 2.54041 7.36349 1.63633C7.36349 0.732258 6.63124 0 5.72716 0C5.53489 0 5.3549 0.0409082 5.18308 0.0981798C5.53511 0.533533 5.72715 1.07646 5.72715 1.63633C5.72715 2.1962 5.53511 2.73913 5.18308 3.17448C5.3549 3.23176 5.53489 3.27266 5.72716 3.27266ZM3.27266 3.68175C2.18041 3.68175 0 4.22992 0 5.31808V6.13624C0 6.36124 0.184087 6.54533 0.409083 6.54533H6.13625C6.36124 6.54533 6.54533 6.36124 6.54533 6.13624V5.31808C6.54533 4.22992 4.36492 3.68175 3.27266 3.68175Z"
|
20 |
-
fill="
|
21 |
/>
|
22 |
</svg>
|
|
|
2 |
export let classList = '';
|
3 |
</script>
|
4 |
|
5 |
+
<svg
|
6 |
+
class={classList}
|
7 |
+
height="1em"
|
8 |
+
width="1em"
|
9 |
+
viewBox="0 0 9 7"
|
10 |
+
fill="none"
|
11 |
+
xmlns="http://www.w3.org/2000/svg"
|
12 |
+
>
|
13 |
<path
|
14 |
fill-rule="evenodd"
|
15 |
clip-rule="evenodd"
|
16 |
d="M6.41113 3.73486C6.97158 4.11531 7.3643 4.63076 7.3643 5.31801V6.54526H8.59155C8.81654 6.54526 9.00063 6.36118 9.00063 6.13618V5.31801C9.00063 4.42621 7.5402 3.8985 6.41113 3.73486Z"
|
17 |
+
fill="currentColor"
|
18 |
/>
|
19 |
<path
|
20 |
d="M3.27305 3.27266C4.17677 3.27266 4.90938 2.54005 4.90938 1.63633C4.90938 0.732611 4.17677 0 3.27305 0C2.36933 0 1.63672 0.732611 1.63672 1.63633C1.63672 2.54005 2.36933 3.27266 3.27305 3.27266Z"
|
21 |
+
fill="currentColor"
|
22 |
/>
|
23 |
<path
|
24 |
fill-rule="evenodd"
|
25 |
clip-rule="evenodd"
|
26 |
d="M5.72716 3.27266C6.63124 3.27266 7.36349 2.54041 7.36349 1.63633C7.36349 0.732258 6.63124 0 5.72716 0C5.53489 0 5.3549 0.0409082 5.18308 0.0981798C5.53511 0.533533 5.72715 1.07646 5.72715 1.63633C5.72715 2.1962 5.53511 2.73913 5.18308 3.17448C5.3549 3.23176 5.53489 3.27266 5.72716 3.27266ZM3.27266 3.68175C2.18041 3.68175 0 4.22992 0 5.31808V6.13624C0 6.36124 0.184087 6.54533 0.409083 6.54533H6.13625C6.36124 6.54533 6.54533 6.36124 6.54533 6.13624V5.31808C6.54533 4.22992 4.36492 3.68175 3.27266 3.68175Z"
|
27 |
+
fill="currentColor"
|
28 |
/>
|
29 |
</svg>
|
frontend/src/lib/Menu.svelte
CHANGED
@@ -21,8 +21,13 @@
|
|
21 |
});
|
22 |
</script>
|
23 |
|
24 |
-
<div class="
|
25 |
-
<PPButton {isLoading} on:click={() => dispatch('prompt')} />
|
26 |
-
<RoomsSelector {isLoading} />
|
27 |
<AboutButton on:click={() => dispatch('toggleAbout')} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
28 |
</div>
|
|
|
21 |
});
|
22 |
</script>
|
23 |
|
24 |
+
<div class="flex items-center justify-between px-12">
|
|
|
|
|
25 |
<AboutButton on:click={() => dispatch('toggleAbout')} />
|
26 |
+
|
27 |
+
<button
|
28 |
+
on:click={() => dispatch('prompt')}
|
29 |
+
class="text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center"
|
30 |
+
>π Paint</button
|
31 |
+
><RoomsSelector {isLoading} />
|
32 |
+
<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
|
33 |
</div>
|
frontend/src/lib/PaintCanvas.svelte
CHANGED
@@ -132,9 +132,14 @@
|
|
132 |
|
133 |
<div
|
134 |
bind:this={containerEl}
|
135 |
-
class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-gray-
|
136 |
>
|
137 |
-
<canvas
|
|
|
|
|
|
|
|
|
|
|
138 |
<slot />
|
139 |
</div>
|
140 |
|
|
|
132 |
|
133 |
<div
|
134 |
bind:this={containerEl}
|
135 |
+
class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-gray-200"
|
136 |
>
|
137 |
+
<canvas
|
138 |
+
bind:this={$canvasEl}
|
139 |
+
{width}
|
140 |
+
{height}
|
141 |
+
class="absolute top-0 left-0 bg-white shadow-2xl"
|
142 |
+
/>
|
143 |
<slot />
|
144 |
</div>
|
145 |
|
frontend/src/lib/PaintFrame.svelte
CHANGED
@@ -205,7 +205,17 @@
|
|
205 |
class="absolute top-0 left-0 pen"
|
206 |
style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
|
207 |
>
|
208 |
-
<div class="frame" style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;`}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
209 |
<canvas
|
210 |
class={dragEnabled ? '' : 'bg-white'}
|
211 |
bind:this={$maskEl}
|
@@ -215,63 +225,77 @@
|
|
215 |
<div class="pointer-events-none touch-none">
|
216 |
{#if prompt}
|
217 |
<div class="pointer-events-none touch-none">
|
218 |
-
<div class="font-bold text-
|
219 |
{prompt}
|
220 |
</div>
|
221 |
</div>
|
222 |
{/if}
|
223 |
</div>
|
224 |
-
|
225 |
-
|
226 |
-
|
227 |
-
|
228 |
-
{/if}
|
229 |
-
{#if !isDragging}
|
230 |
<div
|
231 |
-
class="
|
232 |
-
style={`transform: scale(${Math.max(2.5 - transform.k, 1)}); transform-origin: 0 0;`}
|
233 |
>
|
234 |
-
<div class="py-3">
|
235 |
-
<PPButton {isLoading} on:click={() => dispatch('prompt')} />
|
236 |
-
</div>
|
237 |
{#if $loadingState !== ''}
|
238 |
-
<div class="
|
239 |
{#if $loadingState === 'NFSW'}
|
240 |
<h2 class="text-red-500 text-2xl font-bold">NSFW Alert</h2>
|
241 |
<h3 class="text-red-500 text-lg">
|
242 |
Possible NSFW result detected, please try again
|
243 |
</h3>
|
244 |
{/if}
|
245 |
-
<p>{$loadingState}
|
246 |
</div>
|
|
|
|
|
247 |
{/if}
|
248 |
</div>
|
249 |
-
|
250 |
-
|
251 |
-
|
252 |
-
|
253 |
-
|
254 |
-
|
255 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
256 |
{isLoading}
|
257 |
-
|
258 |
-
|
|
|
259 |
/>
|
260 |
-
|
261 |
-
<
|
262 |
-
|
263 |
-
|
264 |
-
|
265 |
-
on:click={toggleDrawMask}
|
266 |
-
/>
|
267 |
-
{#if !dragEnabled}
|
268 |
-
<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
|
269 |
-
<UndoButton className={'p-1'} {isLoading} on:click={cleanMask} />
|
270 |
-
{/if}
|
271 |
-
</div>
|
272 |
</div>
|
273 |
-
|
274 |
-
|
275 |
</div>
|
276 |
</div>
|
277 |
<div
|
@@ -284,16 +308,6 @@
|
|
284 |
|
285 |
<style lang="postcss" scoped>
|
286 |
.frame {
|
287 |
-
@apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-
|
288 |
-
}
|
289 |
-
.hand {
|
290 |
-
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHSSURBVHgBzVQ9LENRFD4VozZWP4ku/jqJAYNoEQaWNpEwIYJFBINY6UCn6mKTKhYNSTuwVFBiaEgai9bP4CWKUftqv845vU+k7evr2C/5cu6799zvnHvOvQ+gUmEqNimEsKLZQ3YgA0j6TiNXeJPJlIZygEK1yFAmo4rj0Kkg0Jj4DyHyMxKyIt/I+zH5LJrau8V76lPMLa6KjU2vyKhZsbHl1YTX8/dX5X071eyPdX5xDRrr68BiNsNJ+AxsrS1sCf6DIEQub2hoNxJjxO7ivHnMNZqzzlHAIJBIvkBPV6cm7JC11RULWMw1LELRhwf6IPXxxSSRyMU1ztk5mKpmyX9aV0x2KUoitMHW1sxHjd3HWYQyGh7sY1+Z3ZTRMfcpCxLxHwZhZnIc63TEC3TU3iEXj2XdqGGOomKyBhxNq1fi6ZVF3J5tyK+rPGqHXmZX6OAgR61eVCc9UBDE332rzlu3uj0+WRs7GKGxoY5MWi8zZWZygp1KZUSg6yIR1RNzYQeV2/MQLC/MQqmM5HoYb8CDNl/w0GUTlpFLVDPfzi5myZ0DW3szX5Ex5whYLGYFp/pRTAEjyHcaFoX4RvqKPXRTOaJoHJDrmoKMlv0Lqhj8AlEeE/77ZUZMAAAAAElFTkSuQmCC')
|
291 |
-
8 8,
|
292 |
-
pointer;
|
293 |
-
}
|
294 |
-
.pen {
|
295 |
-
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAExSURBVHgBnZJBjkRQEIZLt45YSIwTsLUQbuAqc4LpG3AUO9ueE5idpSFhSyKxsWCBDfKmyozZtcafVLz38r6/Sr0COCDGmEwBZ4TgB0bDfuUchvM8Z7ZtM1VVGa13m9BFuh1FEZNlmdERmfxJvryCi6JwNU2DOI4hCAJAkyVIHMe1mzCVStloS+F53lJJ0yytcA/BFKZprqXfT8FPM/u+r4ZhGJRl2ZyCkyRp0jRlfd8z13X3wyTs7oPg1YDeejeM4ghcN7quAz0ZgoC/AY7jAM/zrSRJb88M+Ov12s7zLN9ut+UAewDjOEJd18u3qqrN2eeHYfgWBMGmy1mWARnRetU0TZ9bBhecpnes4H+iVhj7AaIotoZh3DcNLMsq0MDquu6xHpKhoihf2A8LExRbBj/Uih2c7AwcBQAAAABJRU5ErkJggg==')
|
296 |
-
8 8,
|
297 |
-
pointer;
|
298 |
}
|
299 |
</style>
|
|
|
205 |
class="absolute top-0 left-0 pen"
|
206 |
style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
|
207 |
>
|
208 |
+
<div class="frame relative" style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;`}>
|
209 |
+
{#if isLoading}
|
210 |
+
<LoadingIcon classList={'absolute inset-0 m-auto animate-spin text-6xl text-black'} />
|
211 |
+
{/if}
|
212 |
+
{#if $myPresence?.status !== 'masking'}
|
213 |
+
<div
|
214 |
+
class="absolute inset-0 bg-gradient-to-t {isDragging
|
215 |
+
? 'from-blue-700/40'
|
216 |
+
: 'from-blue-700/90'} to-blue-500/10"
|
217 |
+
/>
|
218 |
+
{/if}
|
219 |
<canvas
|
220 |
class={dragEnabled ? '' : 'bg-white'}
|
221 |
bind:this={$maskEl}
|
|
|
225 |
<div class="pointer-events-none touch-none">
|
226 |
{#if prompt}
|
227 |
<div class="pointer-events-none touch-none">
|
228 |
+
<div class="font-bold text-4xl text-[#387CFF] text-center px-2 line-clamp-4">
|
229 |
{prompt}
|
230 |
</div>
|
231 |
</div>
|
232 |
{/if}
|
233 |
</div>
|
234 |
+
<div
|
235 |
+
class="absolute bottom-0 origin-bottom-left"
|
236 |
+
style={`transform: scale(${Math.max(2.5 - transform.k, 1)});`}
|
237 |
+
>
|
|
|
|
|
238 |
<div
|
239 |
+
class="pl-3 pr-5 py-1 bg-blue-700/90 text-white text-lg xl:text-2xl rounded-tr-xl font-medium tracking-wide"
|
|
|
240 |
>
|
|
|
|
|
|
|
241 |
{#if $loadingState !== ''}
|
242 |
+
<div class="">
|
243 |
{#if $loadingState === 'NFSW'}
|
244 |
<h2 class="text-red-500 text-2xl font-bold">NSFW Alert</h2>
|
245 |
<h3 class="text-red-500 text-lg">
|
246 |
Possible NSFW result detected, please try again
|
247 |
</h3>
|
248 |
{/if}
|
249 |
+
<p>{$loadingState}...</p>
|
250 |
</div>
|
251 |
+
{:else}
|
252 |
+
π€ Drag me
|
253 |
{/if}
|
254 |
</div>
|
255 |
+
</div>
|
256 |
+
<div
|
257 |
+
class="absolute left-full"
|
258 |
+
style={`transform: scale(${Math.max(2.5 - transform.k, 1)}); transform-origin: 0 0;`}
|
259 |
+
>
|
260 |
+
{#if !isLoading}
|
261 |
+
<div class="mx-4 flex flex-col gap-2">
|
262 |
+
<button
|
263 |
+
on:click={() => dispatch('prompt')}
|
264 |
+
class="w-10 h-10 bg-blue-600 hover:saturate-150 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
|
265 |
+
>
|
266 |
+
π
|
267 |
+
</button>
|
268 |
+
<button
|
269 |
+
on:click={toggleDrawMask}
|
270 |
+
class="w-10 h-10 bg-blue-600 hover:saturate-150 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
|
271 |
+
>
|
272 |
+
<svg class="text-white" width="1em" height="1em" viewBox="0 0 100 100"
|
273 |
+
><path
|
274 |
+
fill="currentColor"
|
275 |
+
d="m65.453 10.826l-.053 5c3.073.034 6.144.549 9.059 1.52l1.58-4.744a34.758 34.758 0 0 0-10.586-1.776zm-5.365.352a35.131 35.131 0 0 0-10.26 3.119l2.17 4.506a30.166 30.166 0 0 1 8.799-2.674l-.71-4.951zm20.908 3.51l-2.283 4.447a30.131 30.131 0 0 1 7.447 5.394l3.522-3.549a35.101 35.101 0 0 0-8.686-6.293zM35 19.125c-19.3 0-35 15.7-35 35s15.7 35 35 35c8.934 0 17.087-3.374 23.275-8.904c.005 0 .01 0 .014.002c.065-.059.127-.121.191-.18l.125-.115a34.677 34.677 0 0 0 2.461-2.496c.083-.092.167-.183.248-.276c.399-.455.79-.919 1.165-1.394c-.482-.04-.961-.092-1.436-.155c-.318-.041-.632-.094-.947-.146c-.158-.026-.316-.046-.473-.074a29.93 29.93 0 0 1-1.383-.283a29.851 29.851 0 0 1-1.183-.301c-.065-.018-.13-.033-.194-.051C44.234 71.216 35 59.651 35 45.875a29.876 29.876 0 0 1 9.557-21.955c.162-.151.324-.302.49-.45c.249-.22.504-.436.76-.65c.158-.131.313-.266.474-.394c.415-.332.837-.656 1.27-.965a35.075 35.075 0 0 0-2.867-.965l-.03-.008c-.287-.082-.577-.155-.867-.23c-.215-.056-.43-.118-.646-.17c-.349-.084-.701-.155-1.053-.229c-.126-.026-.25-.057-.377-.082l-.002.002A34.83 34.83 0 0 0 35 19.125zm58.2 5.928l-4.028 2.967a30.012 30.012 0 0 1 4.252 8.15l4.736-1.606a34.98 34.98 0 0 0-4.96-9.511zm6.294 14.717l-4.924.87c.536 3.029.603 6.145.194 9.19l4.955.666c.48-3.562.4-7.19-.225-10.726zM93.8 54.338a30.198 30.198 0 0 1-3.936 8.314l4.143 2.801a35.162 35.162 0 0 0 4.586-9.695l-4.793-1.42zm-6.803 11.928a29.79 29.79 0 0 1-7.213 5.687l2.451 4.358a34.776 34.776 0 0 0 8.428-6.647l-3.666-3.398zm-11.394 7.638a30.155 30.155 0 0 1-9.002 1.887l.265 4.992a35.12 35.12 0 0 0 10.498-2.199l-1.761-4.68z"
|
276 |
+
color="currentColor"
|
277 |
+
/></svg
|
278 |
+
>
|
279 |
+
</button>
|
280 |
+
<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
|
281 |
+
|
282 |
+
<!-- <DragButton className={'p-1'} {isLoading} isActive={dragEnabled} on:click={toggleDrag} /> -->
|
283 |
+
<!-- <div class="bg-blue-700 rounded-lg shadow-lg">
|
284 |
+
azeeza
|
285 |
+
<MaskButton
|
286 |
{isLoading}
|
287 |
+
className={'p-1'}
|
288 |
+
isActive={!dragEnabled}
|
289 |
+
on:click={toggleDrawMask}
|
290 |
/>
|
291 |
+
{#if !dragEnabled}
|
292 |
+
<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
|
293 |
+
<UndoButton className={'p-1'} {isLoading} on:click={cleanMask} />
|
294 |
+
{/if}
|
295 |
+
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
296 |
</div>
|
297 |
+
{/if}
|
298 |
+
</div>
|
299 |
</div>
|
300 |
</div>
|
301 |
<div
|
|
|
308 |
|
309 |
<style lang="postcss" scoped>
|
310 |
.frame {
|
311 |
+
@apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-blue-700;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
312 |
}
|
313 |
</style>
|
frontend/src/lib/PromptModal.svelte
CHANGED
@@ -25,7 +25,6 @@
|
|
25 |
window.addEventListener('keyup', onKeyup);
|
26 |
window.addEventListener('pointerdown', cancelHandler, true);
|
27 |
|
28 |
-
|
29 |
return () => {
|
30 |
window.removeEventListener('keyup', onKeyup);
|
31 |
window.removeEventListener('pointerdown', cancelHandler, true);
|
@@ -64,29 +63,28 @@
|
|
64 |
</script>
|
65 |
|
66 |
<form
|
67 |
-
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80
|
68 |
on:submit|preventDefault={onPrompt}
|
69 |
>
|
70 |
-
<div
|
|
|
|
|
|
|
71 |
<input
|
72 |
value={prompt}
|
73 |
bind:this={inputEl}
|
74 |
on:click|stopPropagation
|
75 |
on:input={onInput}
|
76 |
-
class="
|
77 |
-
placeholder="
|
78 |
title="Input prompt to generate image and obtain palette"
|
79 |
type="text"
|
80 |
name="prompt"
|
81 |
/>
|
82 |
-
<button
|
83 |
-
|
|
|
|
|
84 |
>
|
85 |
</div>
|
86 |
</form>
|
87 |
-
|
88 |
-
<style lang="postcss" scoped>
|
89 |
-
.input {
|
90 |
-
@apply flex-grow text-sm m-2 p-0 disabled:opacity-50 italic placeholder:text-black text-black placeholder:text-opacity-50 border-0 focus:outline-none focus:border-gray-400 focus:ring-1;
|
91 |
-
}
|
92 |
-
</style>
|
|
|
25 |
window.addEventListener('keyup', onKeyup);
|
26 |
window.addEventListener('pointerdown', cancelHandler, true);
|
27 |
|
|
|
28 |
return () => {
|
29 |
window.removeEventListener('keyup', onKeyup);
|
30 |
window.removeEventListener('pointerdown', cancelHandler, true);
|
|
|
63 |
</script>
|
64 |
|
65 |
<form
|
66 |
+
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
|
67 |
on:submit|preventDefault={onPrompt}
|
68 |
>
|
69 |
+
<div
|
70 |
+
class="flex bg-white itemx-center overflow-hidden rounded-lg w-full max-w-lg 2xl:max-w-xl"
|
71 |
+
bind:this={boxEl}
|
72 |
+
>
|
73 |
<input
|
74 |
value={prompt}
|
75 |
bind:this={inputEl}
|
76 |
on:click|stopPropagation
|
77 |
on:input={onInput}
|
78 |
+
class="flex-1 outline-none ring-0 border-none text-xl 2xl:text-2xl"
|
79 |
+
placeholder="Describe your prompt"
|
80 |
title="Input prompt to generate image and obtain palette"
|
81 |
type="text"
|
82 |
name="prompt"
|
83 |
/>
|
84 |
+
<button
|
85 |
+
on:click|preventDefault={onPrompt}
|
86 |
+
class="font-bold bg-blue-700 text-white border-l-2 px-5 text-xl 2xl:text-2xl spacing tracking-wide"
|
87 |
+
type="submit"><span class="mr-2">π</span> Paint</button
|
88 |
>
|
89 |
</div>
|
90 |
</form>
|
|
|
|
|
|
|
|
|
|
|
|
frontend/src/lib/constants.ts
CHANGED
@@ -1,9 +1,15 @@
|
|
1 |
-
|
2 |
-
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
7 |
|
8 |
export const EMOJIS = ['π', 'π', 'π', 'π', 'π¦', 'π', 'π', 'π', 'π¦', 'π¦', 'π·', 'π¦', 'π’', 'π', 'π¦', 'π¦', 'π¦', 'π', 'π¦', 'π ', 'π', 'π‘', 'π¬', 'π¦', 'π³', 'π', 'π', 'π
', 'π', 'π¦', 'π¦', 'π¦§', 'π', 'π¦', 'π¦', 'πͺ', 'π«', 'π¦', 'π', 'π', 'π', 'π', 'π',
|
9 |
'π', 'π', 'π', 'π', 'π©', 'π', 'π', 'π¦', 'π¦
', 'π¦', 'π¦’', 'π¦', 'π¦', 'π¦', 'π¦', 'π', 'π', 'πΏ', 'π', 'πΏ', 'π¦', 'π¦', 'π»', 'π»', 'π¨', 'πΌ', 'π΅', 'π', 'π', 'π', 'π', 'π', 'π²', 'π¦', 'π¦', 'π', 'π’', 'π¦', 'π', 'π¦', 'π§', 'π¦
', 'π¦', 'π¦', 'π¦']
|
|
|
1 |
+
export const COLORS = [
|
2 |
+
'#505669',
|
3 |
+
'#414AA6',
|
4 |
+
'#1C5B92',
|
5 |
+
'#216B44',
|
6 |
+
'#893301',
|
7 |
+
'#912728',
|
8 |
+
'#98184D',
|
9 |
+
'#743095',
|
10 |
+
'#5F4199',
|
11 |
+
'#8f3f94'
|
12 |
+
];
|
13 |
|
14 |
export const EMOJIS = ['π', 'π', 'π', 'π', 'π¦', 'π', 'π', 'π', 'π¦', 'π¦', 'π·', 'π¦', 'π’', 'π', 'π¦', 'π¦', 'π¦', 'π', 'π¦', 'π ', 'π', 'π‘', 'π¬', 'π¦', 'π³', 'π', 'π', 'π
', 'π', 'π¦', 'π¦', 'π¦§', 'π', 'π¦', 'π¦', 'πͺ', 'π«', 'π¦', 'π', 'π', 'π', 'π', 'π',
|
15 |
'π', 'π', 'π', 'π', 'π©', 'π', 'π', 'π¦', 'π¦
', 'π¦', 'π¦’', 'π¦', 'π¦', 'π¦', 'π¦', 'π', 'π', 'πΏ', 'π', 'πΏ', 'π¦', 'π¦', 'π»', 'π»', 'π¨', 'πΌ', 'π΅', 'π', 'π', 'π', 'π', 'π', 'π²', 'π¦', 'π¦', 'π', 'π’', 'π¦', 'π', 'π¦', 'π§', 'π¦
', 'π¦', 'π¦', 'π¦']
|
stablediffusion-infinity/rooms.db
ADDED
Binary file (12.3 kB). View file
|
|
static/_app/immutable/assets/app-a867e11d.css
CHANGED
@@ -1 +1 @@
|
|
1 |
-
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.top-0{top:0px}.left-0{left:0px}.bottom-0{bottom:0px}.right-0{right:0px}.top-1\/2{top:50%}.left-1\/2{left:50%}.top-full{top:100%}.left-full{left:100%}.bottom-full{bottom:100%}.z-50{z-index:50}.z-0{z-index:0}.z-10{z-index:10}.col-span-2{grid-column:span 2 / span 2}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2 / span 2}.row-start-2{grid-row-start:2}.m-2{margin:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mx-4{margin-left:1rem;margin-right:1rem}.mt-3{margin-top:.75rem}.mr-2{margin-right:.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-screen{height:100vh}.h-\[512px\]{height:512px}.h-full{height:100%}.h-4{height:1rem}.max-h-screen{max-height:100vh}.max-h-72{max-height:18rem}.w-screen{width:100vw}.w-\[512px\]{width:512px}.w-max{width:-moz-max-content;width:max-content}.w-full{width:100%}.w-4{width:1rem}.min-w-\[25ch\]{min-width:25ch}.max-w-md{max-width:28rem}.max-w-\[25px\]{max-width:25px}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-wait{cursor:wait}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.overflow-hidden{overflow:hidden}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:.75rem}.rounded-sm{border-radius:.125rem}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border-0{border-width:0px}.border-2{border-width:2px}.border-r-2{border-right-width:2px}.border-l-2{border-left-width:2px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-gray-800{--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity))}.border-violet-700{--tw-border-opacity: 1;border-color:rgb(109 40 217 / var(--tw-border-opacity))}.border-t-gray-400{--tw-border-opacity: 1;border-top-color:rgb(156 163 175 / var(--tw-border-opacity))}.border-opacity-50{--tw-border-opacity: .5}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-violet-100{--tw-bg-opacity: 1;background-color:rgb(237 233 254 / var(--tw-bg-opacity))}.bg-opacity-80{--tw-bg-opacity: .8}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-1{padding:.25rem}.p-0{padding:0}.px-3{padding-left:.75rem;padding-right:.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pb-3{padding-bottom:.75rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.tracking-tight{letter-spacing:-.025em}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-\[\#EC8E65\]{--tw-text-opacity: 1;color:rgb(236 142 101 / var(--tw-text-opacity))}.text-\[\#387CFF\]{--tw-text-opacity: 1;color:rgb(56 124 255 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-violet-900{--tw-text-opacity: 1;color:rgb(76 29 149 / var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring-8{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-\[\#EC8E65\]{--tw-ring-opacity: 1;--tw-ring-color: rgb(236 142 101 / var(--tw-ring-opacity))}.ring-\[\#387CFF\]{--tw-ring-opacity: 1;--tw-ring-color: rgb(56 124 255 / var(--tw-ring-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.placeholder\:text-black::-moz-placeholder{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.placeholder\:text-black::placeholder{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.placeholder\:text-opacity-50::-moz-placeholder{--tw-text-opacity: .5}.placeholder\:text-opacity-50::placeholder{--tw-text-opacity: .5}.hover\:bg-gray-300:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.hover\:no-underline:hover{text-decoration-line:none}.focus\:border-gray-400:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-color-scheme: dark){.dark\:bg-\[rgb\(11\,15\,25\)\]{--tw-bg-opacity: 1;background-color:rgb(11 15 25 / var(--tw-bg-opacity))}.dark\:bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.dark\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}}@media (min-width: 768px){.md\:text-sm{font-size:.875rem;line-height:1.25rem}}
|
|
|
1 |
+
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.top-0{top:0px}.left-0{left:0px}.bottom-0{bottom:0px}.right-0{right:0px}.top-1\/2{top:50%}.left-1\/2{left:50%}.top-full{top:100%}.left-full{left:100%}.bottom-full{bottom:100%}.z-50{z-index:50}.z-0{z-index:0}.z-10{z-index:10}.col-span-2{grid-column:span 2 / span 2}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2 / span 2}.row-start-2{grid-row-start:2}.m-2{margin:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mx-4{margin-left:1rem;margin-right:1rem}.mt-3{margin-top:.75rem}.mr-2{margin-right:.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-screen{height:100vh}.h-\[512px\]{height:512px}.h-full{height:100%}.h-4{height:1rem}.max-h-screen{max-height:100vh}.max-h-72{max-height:18rem}.w-screen{width:100vw}.w-\[512px\]{width:512px}.w-max{width:-moz-max-content;width:max-content}.w-full{width:100%}.w-4{width:1rem}.min-w-\[25ch\]{min-width:25ch}.max-w-md{max-width:28rem}.max-w-\[25px\]{max-width:25px}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-wait{cursor:wait}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.overflow-hidden{overflow:hidden}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:.75rem}.rounded-sm{border-radius:.125rem}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border-0{border-width:0px}.border-2{border-width:2px}.border-r-2{border-right-width:2px}.border-l-2{border-left-width:2px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-gray-800{--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity))}.border-violet-700{--tw-border-opacity: 1;border-color:rgb(109 40 217 / var(--tw-border-opacity))}.border-t-gray-400{--tw-border-opacity: 1;border-top-color:rgb(156 163 175 / var(--tw-border-opacity))}.border-opacity-50{--tw-border-opacity: .5}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(237 233 254 / var(--tw-bg-opacity))}.bg-opacity-80{--tw-bg-opacity: .8}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-1{padding:.25rem}.p-0{padding:0}.px-3{padding-left:.75rem;padding-right:.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pb-3{padding-bottom:.75rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.tracking-tight{letter-spacing:-.025em}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-\[\#EC8E65\]{--tw-text-opacity: 1;color:rgb(236 142 101 / var(--tw-text-opacity))}.text-\[\#387CFF\]{--tw-text-opacity: 1;color:rgb(56 124 255 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-blue-900{--tw-text-opacity: 1;color:rgb(76 29 149 / var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring-8{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-\[\#EC8E65\]{--tw-ring-opacity: 1;--tw-ring-color: rgb(236 142 101 / var(--tw-ring-opacity))}.ring-\[\#387CFF\]{--tw-ring-opacity: 1;--tw-ring-color: rgb(56 124 255 / var(--tw-ring-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.placeholder\:text-black::-moz-placeholder{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.placeholder\:text-black::placeholder{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.placeholder\:text-opacity-50::-moz-placeholder{--tw-text-opacity: .5}.placeholder\:text-opacity-50::placeholder{--tw-text-opacity: .5}.hover\:bg-gray-300:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.hover\:no-underline:hover{text-decoration-line:none}.focus\:border-gray-400:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-color-scheme: dark){.dark\:bg-\[rgb\(11\,15\,25\)\]{--tw-bg-opacity: 1;background-color:rgb(11 15 25 / var(--tw-bg-opacity))}.dark\:bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.dark\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}}@media (min-width: 768px){.md\:text-sm{font-size:.875rem;line-height:1.25rem}}
|
static/_app/immutable/chunks/App-b4e90bcb.js
CHANGED
The diff for this file is too large to render.
See raw diff
|
|