Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '1.4.x' into refactor/modal-header

Browse Source
This commit is contained in:
tglide
2023-08-22 17:47:38 +01:00
parent 404c01fbcb 4e15c39b62
commit 85addd18eb
412 changed files with 20293 additions and 3639 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.cjs
+3
View File
@@ -24,5 +24,8 @@ module.exports = {
browser: true,
es2017: true,
node: true
},
globals: {
globalThis: false // false means it is not writeable
}
};
.gitpod.yml
+9
View File
@@ -0,0 +1,9 @@
# This configuration file was automatically generated by Gitpod.
# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
# and commit this file to your remote git repository to share the goodness with others.
# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
tasks:
- init: npm install && npm run build
command: npm run dev
package-lock.json
Generated
+6569 -379
View File
File diff suppressed because it is too large Load Diff
package.json
+6 -2
View File
@@ -19,19 +19,23 @@
},
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/console": "^0.1.1",
"@appwrite.io/pink": "^0.0.6-rc.14",
"@analytics/google-tag-manager": "^0.5.3",
"@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
"@appwrite.io/pink": "0.1.0-next.4",
"@appwrite.io/pink-icons": "^0.1.0-next.4",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.44.2",
"@sentry/tracing": "^7.44.2",
"ai": "^2.1.15",
"analytics": "^0.8.1",
"dayjs": "^1.11.9",
"dotenv": "^16.0.3",
"echarts": "^5.4.1",
"logrocket": "^3.0.1",
"nanoid": "^4.0.2",
"pretty-bytes": "^6.1.0",
"prismjs": "^1.29.0",
"svelte-confetti": "^1.2.2",
"tippy.js": "^6.3.7",
"web-vitals": "^3.1.1"
},
src/app.html
+3 -1
View File
@@ -43,9 +43,11 @@
<link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
<link rel="stylesheet" href="/fonts/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- {{CLOUD_OG}} -->
%sveltekit.head%
</head>
<body>
<body data-sveltekit-preload-data="hover">
<div id="svelte">%sveltekit.body%</div>
</body>
</html>
src/lib/actions/analytics.ts
+32 -3
View File
@@ -1,8 +1,9 @@
import { page } from '$app/stores';
import { user } from '$lib/stores/user';
import { ENV, MODE, VARS } from '$lib/system';
import { ENV, MODE, VARS, isCloud } from '$lib/system';
import googleAnalytics from '@analytics/google-analytics';
import { AppwriteException } from '@appwrite.io/console';
import googleTagManager from '@analytics/google-tag-manager';
import Analytics from 'analytics';
import { get } from 'svelte/store';
@@ -11,7 +12,14 @@ const analytics = Analytics({
plugins: [
googleAnalytics({
measurementIds: [VARS.GOOGLE_ANALYTICS || 'G-R4YJ9JN8L4']
})
}),
...(isCloud
? [
googleTagManager({
containerId: [VARS.GOOGLE_TAG || 'GTM-P3T9TBV']
})
]
: [])
]
});
@@ -134,6 +142,7 @@ export enum Submit {
ProjectUpdateName = 'submit_project_update_name',
ProjectUpdateTeam = 'submit_project_update_team',
ProjectService = 'submit_project_service',
ProjectUpdateSMTP = 'submit_project_update_smtp',
MemberCreate = 'submit_member_create',
MemberDelete = 'submit_member_delete',
MembershipUpdateStatus = 'submit_membership_update_status',
@@ -145,6 +154,7 @@ export enum Submit {
AuthStatusUpdate = 'submit_auth_status_update',
AuthPasswordHistoryUpdate = 'submit_auth_password_history_limit_update',
AuthPasswordDictionaryUpdate = 'submit_auth_password_dictionary_update',
AuthPersonalDataCheckUpdate = 'submit_auth_personal_data_check_update',
SessionsLengthUpdate = 'submit_sessions_length_update',
SessionsLimitUpdate = 'submit_sessions_limit_update',
SessionDelete = 'submit_session_delete',
@@ -173,8 +183,13 @@ export enum Submit {
FunctionUpdateName = 'submit_function_update_name',
FunctionUpdatePermissions = 'submit_function_update_permissions',
FunctionUpdateSchedule = 'submit_function_update_schedule',
FunctionUpdateConfiguration = 'submit_function_update_configuration',
FunctionUpdateLogging = 'submit_function_update_logging',
FunctionUpdateTimeout = 'submit_function_update_timeout',
FunctionUpdateEvents = 'submit_function_update_events',
FunctionConnectRepo = 'submit_function_disconnect_repo',
FunctionDisconnectRepo = 'submit_function_disconnect_repo',
FunctionRedeploy = 'submit_function_redeploy',
DeploymentCreate = 'submit_deployment_create',
DeploymentDelete = 'submit_deployment_delete',
DeploymentUpdate = 'submit_deployment_update',
@@ -182,6 +197,7 @@ export enum Submit {
VariableCreate = 'submit_variable_create',
VariableDelete = 'submit_variable_delete',
VariableUpdate = 'submit_variable_update',
VariableEditor = 'submit_variable_editor',
KeyCreate = 'submit_key_create',
KeyDelete = 'submit_key_delete',
KeyUpdateName = 'submit_key_update_name',
@@ -212,5 +228,18 @@ export enum Submit {
BucketUpdateExtensions = 'submit_bucket_update_extensions',
FileCreate = 'submit_file_create',
FileDelete = 'submit_file_delete',
FileUpdatePermissions = 'submit_file_update_permissions'
FileUpdatePermissions = 'submit_file_update_permissions',
InstallationCreate = 'submit_installation_create',
InstallationDelete = 'submit_installation_delete',
EmailChangeLocale = 'submit_email_change_locale',
EmailResetTemplate = 'submit_email_reset_template',
EmailUpdateInviteTemplate = 'submit_email_update_invite_template',
EmailUpdateMagicUrlTemplate = 'submit_email_update_magic_url_template',
EmailUpdateRecoveryTemplate = 'submit_email_update_recovery_template',
EmailUpdateVerificationTemplate = 'submit_email_update_verification_template',
SmsChangeLocale = 'submit_sms_change_locale',
SmsResetTemplate = 'submit_sms_reset_template',
SmsUpdateInviteTemplate = 'submit_sms_update_invite_template',
SmsUpdateLoginTemplate = 'submit_sms_update_login_template',
SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template'
}
src/lib/actions/multi-actions.ts
+20
View File
@@ -0,0 +1,20 @@
import type { Action } from 'svelte/action';
export type MultiActionArray = Array<(node: HTMLElement) => ReturnType<Action>>;
export function multiAction(node: HTMLElement, arr: MultiActionArray) {
const destroyFns = arr.map((fn) => {
const actionReturn = fn(node);
return actionReturn
? actionReturn.destroy
: () => {
/* noop */
};
});
return {
destroy() {
destroyFns.forEach((fn) => fn());
}
};
}
src/lib/commandCenter/commandCenter.svelte
+18 -2
View File
@@ -33,6 +33,9 @@
import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands';
import { RootPanel } from './panels';
import { addSubPanel, clearSubPanels, subPanels } from './subPanels';
import { addNotification } from '$lib/stores/notifications';
let debugOverlayEnabled = false;
$: $registerCommands([
{
@@ -40,6 +43,20 @@
keys: ['k'],
ctrl: true,
forceEnable: true
},
{
label: 'Toggle debug overlay',
callback: () => {
debugOverlayEnabled = !debugOverlayEnabled;
addNotification({
title: 'Debug overlay',
message: debugOverlayEnabled ? 'Enabled' : 'Disabled',
type: 'info'
});
},
keys: ['d', 'o'],
group: 'misc',
disabled: !dev
}
]);
@@ -100,7 +117,7 @@
</div>
{/if}
{#if dev}
{#if dev && debugOverlayEnabled}
<div class="debug-keys" use:portal>
{#each keys as key, i (i)}
<kbd class="kbd" transition:fade|local={{ duration: 150 }}>
@@ -126,7 +143,6 @@
left: 50%;
transform: translateX(-50%);
padding: 0.5rem;
// background-color: hsl(var(--color-neutral-500) / 0.5);
z-index: 9999;
display: flex;
src/lib/commandCenter/commands.ts
+14 -10
View File
@@ -57,8 +57,8 @@ type KeyedCommand = BaseCommand & {
alt?: boolean;
};
function isKeyedCommand(command: Command): command is KeyedCommand {
return 'keys' in command;
export function isKeyedCommand(command: Command): command is KeyedCommand {
return 'keys' in command && Array.isArray((command as KeyedCommand).keys);
}
export type Command = KeyedCommand | BaseCommand;
@@ -83,7 +83,7 @@ function isInputEvent(event: KeyboardEvent) {
function getCommandRank(command: KeyedCommand) {
const { keys, ctrl: meta, shift, alt } = command;
const modifiers = [meta, shift, alt].filter(Boolean).length;
return keys.length + modifiers * 10;
return (keys?.length || 0) + modifiers * 10;
}
function hasDisputing(command: KeyedCommand, allCommands: Command[]) {
@@ -95,7 +95,7 @@ function hasDisputing(command: KeyedCommand, allCommands: Command[]) {
return false;
}
const keysString = command.keys.join('+');
const otherKeysString = otherCommand.keys.join('+');
const otherKeysString = otherCommand?.keys?.join('+');
const cmdRank = getCommandRank(command);
const otherCmdRank = getCommandRank(otherCommand);
@@ -195,8 +195,10 @@ export const commandCenterKeyDownHandler = derived(
const isShiftPressed = shift ? event.shiftKey : !event.shiftKey;
const isAltPressed = alt ? event.altKey : !event.altKey;
const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0));
const allKeysPressed = recentKeyCodes.join('').includes(commandKeyCodes.join(''));
const commandKeyCodes = keys?.map((key) => key.toUpperCase().charCodeAt(0));
const allKeysPressed = commandKeyCodes
? recentKeyCodes.join('').includes(commandKeyCodes.join(''))
: false;
if (allKeysPressed && isMetaPressed && isShiftPressed && isAltPressed) {
event.preventDefault();
@@ -288,10 +290,12 @@ export const commandGroupRanks = derived(groupRanksMap, ($groupRankTransformatio
const initialRanks = {
...Object.fromEntries(groups.map((group) => [group, 0])),
ungrouped: 9999,
databases: 3,
users: 2,
teams: 1,
navigation: -10,
databases: 50,
users: 40,
teams: 30,
projects: 20,
organizations: 10,
navigation: 0,
help: -20,
misc: -30
} as CommandGroupRanks;
src/lib/commandCenter/panels/ai.svelte
+77 -37
View File
@@ -1,17 +1,21 @@
<script lang="ts">
import Template from './template.svelte';
import { AvatarInitials, Code } from '$lib/components';
import { AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
import { user } from '$lib/stores/user';
import { useCompletion } from 'ai/svelte';
import { subPanels } from '../subPanels';
import { isLanguage, type Language } from '$lib/components/code.svelte';
import CoolerAppwrite from '$lib/images/appwrite-cooler.svg';
import { VARS } from '$lib/system';
const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
api: VARS.ASSISTANT_ENDPOINT
api: endpoint + '/console/assistant',
headers: {
'content-type': 'application/json'
}
});
const examples = [
@@ -57,7 +61,9 @@
answer.push({
type: 'code',
value: nextCodeMatch[2],
value: nextCodeMatch[2].startsWith('\n')
? nextCodeMatch[2].slice(1)
: nextCodeMatch[2],
language: isLanguage(language) ? language : 'js'
});
@@ -77,6 +83,11 @@
}
$: answer = parseCompletion($completion);
function getInitials(name: string) {
const [first, last] = name.split(' ');
return `${first?.[0] ?? ''}${last?.[0] ?? ''}`;
}
</script>
<Template
@@ -93,9 +104,14 @@
};
})}
clearOnCallback={false}
fullheight
--command-panel-max-height="40rem">
<div slot="search" />
on:keydown={(e) => {
e.detail.cancel();
}}
--min-height="40rem"
--max-height="52.5rem">
<div slot="search">
<span class="experimental border-gradient">EXPERIMENTAL</span>
</div>
<div slot="option" let:option class="u-flex u-cross-center u-gap-8">
<i class="icon-question-mark-circle" />
@@ -104,20 +120,28 @@
{#if $isLoading || answer}
<div class="content">
<div class="u-flex u-gap-8">
<div class="u-flex u-gap-8 u-cross-center">
<div class="avatar is-size-x-small">{getInitials($user.name)}</div>
<p class="u-opacity-75">{$input}</p>
</div>
<div class="u-flex u-gap-8 u-margin-block-start-24">
<div class="logo">
<img src={CoolerAppwrite} alt="Appwrite logo" />
<SvgIcon name="sparkles" type="color" />
</div>
<div class="answer">
{#if $isLoading && !$completion}
<p>...</p>
<LoadingDots />
{:else}
{#each answer as part}
{#if part.type === 'text'}
<p>{part.value}</p>
<p>{part.value.trimStart()}</p>
{:else if part.type === 'code'}
{#key part.value}
<Code language={part.language} code={part.value} />
<div
class="u-margin-block-start-8"
style="margin-block-end: 1rem;">
<Code language={part.language} code={part.value} noMargin />
</div>
{/key}
{/if}
{/each}
@@ -169,8 +193,16 @@
</Template>
<style lang="scss">
:global(.theme-dark) .content {
--logo-bg: #282a3b;
}
:global(.theme-light) .content {
--logo-bg: #f2f2f8;
}
.content {
overflow-y: auto;
overflow: auto;
padding: 1rem;
.logo {
@@ -182,7 +214,7 @@
flex-shrink: 0;
border-radius: 0.25rem;
background: #282a3b;
background: var(--logo-bg);
}
.answer {
@@ -192,29 +224,6 @@
white-space: pre-wrap;
}
}
h2 {
color: hsl(var(--color-neutral-70));
}
.examples {
display: flex;
flex-direction: column;
li {
padding: 0.59375rem 0.5rem;
button {
&:hover {
opacity: 0.75;
}
i {
color: hsl(var(--color-neutral-70));
}
}
}
}
}
.footer {
@@ -224,4 +233,35 @@
background-color: hsl(var(--color-neutral-150));
}
}
.experimental {
display: flex;
padding: 0.09375rem 0.25rem;
align-items: center;
color: var(--light-neutrals-30, #e8e9f0);
text-align: center;
font-family: Inter;
font-size: 0.625rem;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 0.9375rem */
letter-spacing: 0.075rem;
text-transform: uppercase;
background: rgba(240, 46, 101, 0.24);
--border-gradient: linear-gradient(
to bottom,
rgba(240, 46, 101, 0.48) 0%,
rgba(240, 46, 101, 0) 150%
)
border-box;
--border-size: 0.03rem;
--border-radius: 0.25rem;
border-radius: var(--border-radius);
}
:global(.theme-light) .experimental {
color: rgba(240, 46, 101, 1);
}
</style>
src/lib/commandCenter/panels/root.svelte
+2 -2
View File
@@ -4,7 +4,7 @@
<script lang="ts">
import { debounce } from '$lib/helpers/debounce';
import { isMac } from '$lib/helpers/platform';
import { commands, searchers, type Command } from '../commands';
import { commands, searchers, type Command, isKeyedCommand } from '../commands';
import Template from './template.svelte';
let search = '';
@@ -69,7 +69,7 @@
{#if hasAlt(command)}
<kbd class="kbd"> {isMac() ? '⌥' : 'Alt'} </kbd>
{/if}
{#if 'keys' in command}
{#if isKeyedCommand(command)}
{#each command.keys as key, i}
{@const hasNext = command.keys.length - 1 !== i}
src/lib/commandCenter/panels/template.svelte
+77 -13
View File
@@ -4,13 +4,13 @@
// This is the template for all panels used in the command center.
// Use this component when you want to create a new panel.
import { tick } from 'svelte';
import { createEventDispatcher, tick } from 'svelte';
import { getCommandCenterCtx } from '../commandCenter.svelte';
import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
type Option = $$Generic<Command>;
type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
export let options: Option[] | null = null;
export let search = '';
export let searchPlaceholder = 'Search...';
@@ -18,6 +18,7 @@
export let clearOnCallback = true;
let selected = 0;
let usingKeyboard = false;
let contentEl: HTMLElement;
async function triggerOption(option: Option) {
@@ -28,8 +29,25 @@
}
}
const dispatch = createEventDispatcher<{
keydown: {
originalEvent: KeyboardEvent;
cancel: () => void;
key: string;
};
}>();
function handleKeyDown(event: KeyboardEvent) {
if (!open) return;
usingKeyboard = true;
let canceled = false;
dispatch('keydown', {
originalEvent: event,
cancel: () => (canceled = true),
key: event.key
});
if (canceled) return;
if (options) {
if (event.key === 'ArrowDown') {
@@ -90,8 +108,9 @@
}
}
$: {
options;
$: if (selected > options?.length - 1) {
selected = options?.length - 1;
} else if (usingKeyboard && selected < 0 && options?.length) {
selected = 0;
}
@@ -173,13 +192,30 @@
triggerOption(option);
};
const getOptionFocusHandler = (option: IndexedOption) => () => {
selected = option.index;
const getOptionFocusHandler =
(option: IndexedOption, hover = false) =>
() => {
selected = option.index;
usingKeyboard = hover ? false : usingKeyboard;
};
const getOptionBlurHandler = () => () => {
selected = -1;
usingKeyboard = false;
};
const castOption = (option: IndexedOption) => option as Option;
$: breadcrumbs = $subPanels.filter((panel) => panel.name !== 'root').map((panel) => panel.name);
function getBreadcrumbs(subPanels: typeof $subPanels) {
return subPanels.filter((panel) => panel.name !== 'root').map((panel) => panel.name);
}
let breadcrumbs = getBreadcrumbs($subPanels);
// Avoid clearing subpanels before the closing transition is finished
$: if ($subPanels.length) {
breadcrumbs = getBreadcrumbs($subPanels);
}
const handleCrumbClick = (index: number) => {
if (index === breadcrumbs.length - 1) {
@@ -262,7 +298,8 @@
<button
class="option"
on:click={getOptionClickHandler(item)}
on:mouseover={getOptionFocusHandler(item)}
on:mouseover={getOptionFocusHandler(item, true)}
on:mouseleave={getOptionBlurHandler()}
on:focus={getOptionFocusHandler(item)}>
<slot name="option" option={castOption(item)}>
<div class="u-flex u-gap-8 u-cross-center">
@@ -350,6 +387,9 @@
--result-bg: hsl(var(--color-neutral-10));
--footer-bg: linear-gradient(180deg, #fff 0%, #e8e9f0 100%);
--icon-color: hsl(var(--color-neutral-50));
--label-color: hsl(var(--color-neutral-100));
}
:global(.theme-dark) .card {
@@ -364,15 +404,19 @@
--result-bg: hsl(var(--color-neutral-200));
--footer-bg: linear-gradient(180deg, #1b1b28 0%, #282a3b 100%);
--icon-color: hsl(var(--color-neutral-70));
--label-color: hsl(var(--color-neutral-30));
}
// Elements
.card {
display: flex;
flex-direction: column;
width: var(--command-panel-width, 42.5rem);
width: var(--width, 42.5rem);
max-width: 100%;
max-height: var(--command-panel-max-height, 32rem);
min-height: var(--min-height);
max-height: var(--max-height, 32rem);
overflow: hidden;
padding: 0;
@@ -388,7 +432,7 @@
backdrop-filter: blur(6px);
&.fullheight {
height: var(--command-panel-max-height, 32rem);
height: var(--max-height, 32rem);
}
:global(.kbd) {
@@ -458,6 +502,8 @@
position: relative;
z-index: 10;
font-size: 10px !important;
&:not(:first-child) {
margin-block-start: 1rem;
}
@@ -470,17 +516,35 @@
position: absolute;
inset: 0;
background-color: var(--result-bg);
border-radius: 0.75rem;
border-radius: 0.5rem;
translate: 0 -1px;
}
.option {
padding: 0.5rem 0.75rem;
padding: 0.5rem 9.5px;
font-size: 14px;
position: relative;
z-index: 10;
width: 100%;
box-shadow: none !important;
color: var(--label-color);
:global(i[class^='icon-']) {
font-size: 1rem !important;
width: 1rem !important;
height: 1rem !important;
color: var(--icon-color);
position: relative;
}
:global(i[class^='icon-']::before) {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
}
&.nested {
src/lib/commandCenter/searchers/files.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export const fileSearcher = (async (query: string) => {
const { files } = await sdk.forProject.storage.listFiles(
$bucket.$id,
[Query.orderDesc('$createdAt')],
[Query.orderDesc('')],
query || undefined
);
src/lib/commandCenter/searchers/functions.ts
+2 -2
View File
@@ -5,7 +5,7 @@ import { get } from 'svelte/store';
import type { Searcher } from '../commands';
import type { Models } from '@appwrite.io/console';
import { page } from '$app/stores';
import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/+page.svelte';
import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/store';
const getFunctionCommand = (fn: Models.Function, projectId: string) => {
return {
@@ -37,7 +37,7 @@ export const functionsSearcher = (async (query: string) => {
if (!$page.url.pathname.endsWith(func.$id)) {
await goto(`/console/project-${projectId}/functions/function-${func.$id}`);
}
showCreateDeployment();
showCreateDeployment.set(true);
},
group: 'functions',
icon: 'plus'
src/lib/commandCenter/searchers/projects.ts
+1 -1
View File
@@ -8,7 +8,7 @@ import type { Searcher } from '../commands';
export const projectsSearcher = (async (query: string) => {
const { projects } = await sdk.forConsole.projects.list([
Query.equal('teamId', get(organization).$id),
Query.orderDesc('$createdAt')
Query.orderDesc('')
]);
return projects
src/lib/components/alert.svelte
+15 -4
View File
@@ -4,19 +4,21 @@
export let dismissible = false;
export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
export let standalone = false;
export let buttons: Buttons[] = [];
export let isAction = false;
export let isStandalone = false;
const dispatch = createEventDispatcher();
</script>
<section
class="alert"
class:is-action={isAction}
class:is-standalone={isStandalone}
class:is-success={type === 'success'}
class:is-warning={type === 'warning'}
class:is-danger={type === 'error'}
class:is-info={type === 'info'}
class:is-standalone={standalone}>
class:is-info={type === 'info'}>
<div class="alert-grid">
{#if dismissible}
<button
@@ -41,7 +43,7 @@
</h6>
{/if}
<p class="alert-message"><slot /></p>
{#if buttons?.length}
{#if buttons?.length && !isAction}
<div class="alert-buttons u-flex">
{#each buttons as button}
<button class="button is-text" on:click={button.method}>
@@ -51,5 +53,14 @@
</div>
{/if}
</div>
{#if buttons?.length && isAction}
<div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
{#each buttons as button}
<button class="button is-text" on:click={button.method}>
<span class="text">{button.name}</span>
</button>
{/each}
</div>
{/if}
</div>
</section>
src/lib/components/avatarGroup.svelte
+20 -2
View File
@@ -2,11 +2,22 @@
import AvatarInitials from './avatarInitials.svelte';
export let avatars: string[] = [];
export let icons: string[] = [];
export let total = avatars.length;
export let size = 40;
export let avatarSize: keyof typeof Sizes = 'medium';
export let bordered = false;
enum Sizes {
xsmall = 'is-size-x-small',
small = 'is-size-small',
medium = '',
large = 'is-size-large',
xlarge = 'is-size-x-large'
}
</script>
<ul class="avatars-group">
<ul class="avatars-group" class:is-with-border={bordered}>
{#each avatars as name, index}
{#if index < 2}
<li class="avatars-group-item">
@@ -14,9 +25,16 @@
</li>
{/if}
{/each}
{#each icons as icon}
<li class="avatars-group-item">
<span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
</li>
{/each}
{#if total > 2}
<li class="avatars-group-item">
<div class="avatar">+{total - 2}</div>
<div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
</li>
{/if}
</ul>
src/lib/components/avatarInitials.svelte
+2 -1
View File
@@ -4,8 +4,9 @@
export let name: string;
export let size: number;
export let background: string | undefined = undefined;
$: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2).toString();
$: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
</script>
<Avatar {name} {size} {src} />
src/lib/components/box.svelte
+19 -8
View File
@@ -1,9 +1,20 @@
<div class="box">
<div class="u-flex u-gap-16">
<slot name="image" />
<div class="u-cross-child-center u-line-height-1-5">
<slot name="title" />
<slot />
</div>
</div>
<script lang="ts">
export let radius: keyof typeof radiuses = 'small';
export let padding = 24;
let classes = '';
export { classes as class };
enum radiuses {
xsmall = '--border-radius-extra-large',
small = '--border-radius-small',
medium = '--border-radius-medium',
large = '--border-radius-large'
}
</script>
<div
class="box {classes}"
style:--box-border-radius={`var(${radiuses[radius]})`}
style:--box-padding={`${padding / 16}rem`}>
<slot />
</div>
src/lib/components/boxAvatar.svelte
+9
View File
@@ -0,0 +1,9 @@
<div class="box">
<div class="u-flex u-gap-16">
<slot name="image" />
<div class="u-cross-child-center u-line-height-1-5">
<slot name="title" />
<slot />
</div>
</div>
</div>
src/lib/components/cardGrid.svelte
+7
View File
@@ -19,3 +19,10 @@
</div>
{/if}
</Card>
<style lang="scss">
.grid-1-2 > * {
width: 100%;
overflow: hidden;
}
</style>
src/lib/components/clickableListItem.svelte
+10 -6
View File
@@ -4,11 +4,15 @@
<li class="clickable-list-item">
<a {href} class="clickable-list-button" on:click>
<h5 class="clickable-list-title u-trim-1">
<slot />
</h5>
<div class="clickable-list-desc">
<p class="text u-margin-block-start-8"><slot name="desc" /></p>
</div>
{#if $$slots.default}
<h5 class="clickable-list-title u-trim-1">
<slot />
</h5>
{/if}
{#if $$slots.desc}
<div class="clickable-list-desc">
<p class="text u-margin-block-start-8"><slot name="desc" /></p>
</div>
{/if}
</a>
</li>
src/lib/components/code.svelte
+11 -3
View File
@@ -29,6 +29,7 @@
export let withLineNumbers = false;
export let withCopy = false;
export let noMargin = false;
export let allowScroll = false;
Prism.plugins.customClass.prefix('prism-');
@@ -56,8 +57,10 @@
</Copy>
{/if}
</div>
<pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
>{code}</code></pre>
<pre
class:with-scroll={allowScroll}
class={`language-${language}`}
class:line-numbers={withLineNumbers}><code>{code}</code></pre>
</section>
<style lang="scss" global>
@@ -76,6 +79,11 @@
}
}
.with-scroll {
height: 100%;
overflow: auto;
}
code,
pre {
&[class*='language-'] {
@@ -108,7 +116,7 @@
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: hsl(var(--p-box-background-color));
padding: 0;
padding-block-start: 4%;
margin: 0;
}
.prism-token {
src/lib/components/collapsibleItem.svelte
+6 -2
View File
@@ -1,15 +1,19 @@
<script lang="ts">
import { clickOnEnter } from '$lib/helpers/a11y';
export let withIndentation = false;
export let open = false;
</script>
<li class="collapsible-item">
<details class="collapsible-wrapper" {open}>
<summary class="collapsible-button">
<summary class="collapsible-button" on:keyup={clickOnEnter} on:click>
<slot name="beforetitle" />
<div>
<span class="text"><slot name="title" /></span>
<span class="collapsible-button-optional"><slot name="subtitle" /></span>
{#if $$slots.subtitle}
<span class="collapsible-button-optional"><slot name="subtitle" /></span>
{/if}
</div>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true" />
src/lib/components/customId.svelte
+2 -1
View File
@@ -7,6 +7,7 @@
export let name: string;
export let id: string;
export let autofocus = true;
export let fullWidth = false;
$: if (!show) {
id = null;
@@ -21,7 +22,7 @@
}
</script>
<InnerModal bind:show>
<InnerModal bind:show {fullWidth}>
<svelte:fragment slot="title">{name} ID</svelte:fragment>
<svelte:fragment slot="subtitle">
Enter a custom {name} ID. Leave blank for a randomly generated one.
src/lib/components/drop.svelte
+3 -1
View File
@@ -14,7 +14,9 @@
export let fullWidth = false;
export let fixed = false;
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
blur: undefined;
}>();
let element: HTMLDivElement;
let tooltip: HTMLDivElement;
src/lib/components/dropListLink.svelte
+7 -1
View File
@@ -4,10 +4,16 @@
export let href: string;
export let icon: string = null;
export let disabled = false;
export let external = false;
</script>
<li class="drop-list-item" on:click on:keyup={clickOnEnter}>
<a {href} class="drop-button" class:is-disabled={disabled}>
<a
{href}
class="drop-button"
class:is-disabled={disabled}
target={external ? '_blank' : ''}
rel={external ? 'noopener noreferrer' : ''}>
<span class="text"><slot /></span>
{#if icon}
<span class={`icon-${icon}`} aria-hidden="true" />
src/lib/components/emptySearch.svelte
+7 -4
View File
@@ -4,6 +4,7 @@
import Dark from '$lib/images/search-dark.svg';
import PaginationInline from './paginationInline.svelte';
export let hidePagination = false;
export let hidePages = false;
</script>
@@ -18,7 +19,9 @@
</div>
</article>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: 0</p>
<PaginationInline limit={1} offset={0} sum={0} {hidePages} />
</div>
{#if !hidePagination}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: 0</p>
<PaginationInline limit={1} offset={0} sum={0} {hidePages} />
</div>
{/if}
src/lib/components/eventModal.svelte
+1 -1
View File
@@ -245,7 +245,7 @@
}
</script>
<Modal title="Create Event" bind:show onSubmit={create} size="big">
<Modal title="Create event" bind:show onSubmit={create} size="big">
<slot />
<div>
<p class="u-text">Choose a service</p>
src/lib/components/floatingActionBar.svelte
+2
View File
@@ -21,6 +21,8 @@
border-radius: 0.5rem;
padding: 0.75rem 1rem;
width: clamp(0px, calc(100vw - 4rem), 32.5rem);
}
:global(.theme-dark) .floating-action-bar {
src/lib/components/id.svelte
+2
View File
@@ -3,6 +3,7 @@
export let value: string;
export let event: string = null;
export let centered = true;
function truncateText(node: HTMLElement) {
const MAX_TRIES = 100;
@@ -49,6 +50,7 @@
<Copy {value} {event}>
<div
class="interactive-text-output is-buttons-on-top"
class:u-text-center={centered}
style:min-inline-size="0"
style:display="inline-flex">
<span
src/lib/components/index.ts
+4
View File
@@ -29,6 +29,7 @@ export { default as AvatarInitials } from './avatarInitials.svelte';
export { default as AvatarGroup } from './avatarGroup.svelte';
export { default as Alert } from './alert.svelte';
export { default as Box } from './box.svelte';
export { default as BoxAvatar } from './boxAvatar.svelte';
export { default as Search } from './search.svelte';
export { default as SearchQuery } from './searchQuery.svelte';
export { default as GridItem1 } from './gridItem1.svelte';
@@ -52,7 +53,10 @@ export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
export { default as ClickableList } from './clickableList.svelte';
export { default as ClickableListItem } from './clickableListItem.svelte';
export { default as Id } from './id.svelte';
export { default as NumericList } from './numericList.svelte';
export { default as NumericListItem } from './numericListItem.svelte';
export { default as EyebrowHeading } from './eyebrowHeading.svelte';
export { default as SvgIcon } from './svgIcon.svelte';
export { default as MigrationBox } from './migrationBox.svelte';
export { default as FloatingActionBar } from './floatingActionBar.svelte';
export { default as LoadingDots } from './loadingDots.svelte';
src/lib/components/innerModal.svelte
+2 -1
View File
@@ -3,11 +3,12 @@
export let show = false;
export let closable = true;
export let fullWidth = false;
</script>
{#if show}
<FormItem>
<section class="modal is-inner-modal">
<section class="modal is-inner-modal" class:u-width-full-line={fullWidth}>
<div class="modal-form">
<header class="modal-header">
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
src/lib/components/labelCard.svelte
+8 -4
View File
@@ -31,10 +31,14 @@
bind:group
on:click />
<div class="u-flex u-flex-vertical u-gap-4">
<h4 class="body-text-2 u-bold"><slot name="title" /></h4>
<p class="u-color-text-gray u-small">
<slot />
</p>
{#if $$slots.title}
<h4 class="body-text-2 u-bold"><slot name="title" /></h4>
{/if}
{#if $$slots.default}
<p class="u-color-text-gray u-small">
<slot />
</p>
{/if}
</div>
{#if icon}
<span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />
src/lib/components/loadingDots.svelte
+56
View File
@@ -0,0 +1,56 @@
<!-- Loading dots -->
<script>
let className = '';
export { className as class };
</script>
<div class="loading-dots {className}">
<div class="dot" />
<div class="dot" />
<div class="dot" />
</div>
<style>
.loading-dots {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
gap: 0.25rem;
padding-inline: 0.5rem;
}
.dot {
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: hsl(var(--p-body-text-color));
animation: loading-dots 1s infinite ease-in-out;
}
.dot:nth-child(1) {
animation-delay: 0.1s;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
}
.dot:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes loading-dots {
0% {
transform: translateY(0.25rem);
}
25% {
transform: translateY(0rem);
}
50%,
100% {
transform: translateY(0.25rem);
}
}
</style>
src/lib/components/numericList.svelte
+3
View File
@@ -0,0 +1,3 @@
<ol class="numeric-list">
<slot />
</ol>
src/lib/components/numericListItem.svelte
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
export let fullWidth = false;
</script>
<li class="numeric-list-item">
<div class="u-margin-block-start-8" class:u-width-full-line={fullWidth}><slot /></div>
</li>
src/lib/components/permissions/actions.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
}
</script>
<DropList bind:show={showDropdown} placement="bottom-end">
<DropList bind:show={showDropdown} placement="bottom-end" fixed>
<slot />
<svelte:fragment slot="list">
<DropListItem disabled={$groups.has('any')} on:click={() => dispatch('create', ['any'])}>
src/lib/components/permissions/permissions.svelte
+68 -73
View File
@@ -12,7 +12,6 @@
<script lang="ts">
import { Button } from '$lib/elements/forms';
import {
Table,
TableBody,
TableCell,
TableCellHead,
@@ -20,10 +19,11 @@
TableRow
} from '$lib/elements/table';
import { symmetricDifference } from '$lib/helpers/array';
import { onDestroy, onMount } from 'svelte';
import { writable, type Unsubscriber } from 'svelte/store';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import Actions from './actions.svelte';
import Row from './row.svelte';
import Table from '$lib/elements/table/table.svelte';
export let withCreate = false;
export let permissions: string[] = [];
@@ -32,13 +32,12 @@
let showTeam = false;
let showCustom = false;
let showDropdown = false;
let unsubscribe: Unsubscriber;
const groups = writable<Map<string, Permission>>(new Map());
onMount(() => {
permissions.forEach(fromPermissionString);
unsubscribe = groups.subscribe(() => {
return groups.subscribe(() => {
const current = exportRoles();
if (symmetricDifference(current, permissions).length) {
permissions = current;
@@ -46,12 +45,6 @@
});
});
onDestroy(() => {
if (unsubscribe) {
unsubscribe();
}
});
function create(event: CustomEvent<string[]>) {
for (const role of event.detail) {
addRole(role);
@@ -142,74 +135,76 @@
</script>
{#if [...$groups]?.length}
<Table noMargin noStyles>
<TableHeader>
<TableCellHead width={70}>Role</TableCellHead>
{#if withCreate}
<TableCellHead width={70}>Create</TableCellHead>
{/if}
<TableCellHead width={70}>Read</TableCellHead>
<TableCellHead width={70}>Update</TableCellHead>
<TableCellHead width={70}>Delete</TableCellHead>
<TableCellHead width={40} />
</TableHeader>
<TableBody>
{#each [...$groups].sort(sortRoles) as [role, permission] (role)}
<TableRow>
<TableCell title="Role">
<Row {role} />
</TableCell>
<div class="table-wrapper">
<Table noMargin noStyles>
<TableHeader>
<TableCellHead width={140}>Role</TableCellHead>
{#if withCreate}
<TableCellHead width={60}>Create</TableCellHead>
{/if}
<TableCellHead width={50}>Read</TableCellHead>
<TableCellHead width={60}>Update</TableCellHead>
<TableCellHead width={60}>Delete</TableCellHead>
<TableCellHead width={32} />
</TableHeader>
<TableBody>
{#each [...$groups].sort(sortRoles) as [role, permission] (role)}
<TableRow>
<TableCell title="Role">
<Row {role} />
</TableCell>
{#if withCreate}
<TableCell title="Create">
{#if withCreate}
<TableCell title="Create">
<input
type="checkbox"
class="icon-check"
aria-label="Create"
checked={permission.create}
on:change={() => togglePermission(role, 'create')} />
</TableCell>
{/if}
<TableCell title="Read">
<input
type="checkbox"
class="icon-check"
aria-label="Create"
checked={permission.create}
on:change={() => togglePermission(role, 'create')} />
aria-label="Read"
checked={permission.read}
on:change={() => togglePermission(role, 'read')} />
</TableCell>
<TableCell title="Update">
<input
type="checkbox"
class="icon-check"
aria-label="Update"
checked={permission.update}
on:change={() => togglePermission(role, 'update')} />
</TableCell>
<TableCell title="Delete">
<input
type="checkbox"
class="icon-check"
aria-label="Delete"
checked={permission.delete}
on:change={() => togglePermission(role, 'delete')} />
</TableCell>
{/if}
<TableCell title="Read">
<input
type="checkbox"
class="icon-check"
aria-label="Read"
checked={permission.read}
on:change={() => togglePermission(role, 'read')} />
</TableCell>
<TableCell title="Update">
<input
type="checkbox"
class="icon-check"
aria-label="Update"
checked={permission.update}
on:change={() => togglePermission(role, 'update')} />
</TableCell>
<TableCell title="Delete">
<input
type="checkbox"
class="icon-check"
aria-label="Delete"
checked={permission.delete}
on:change={() => togglePermission(role, 'delete')} />
</TableCell>
<TableCell title="Remove" width={40}>
<div class="u-flex">
<button
class="button is-text is-only-icon"
type="button"
aria-label="delete"
on:click={() => deleteRole(role)}>
<span class="icon-x" aria-hidden="true" />
</button>
</div>
</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
<TableCell title="Remove" width={40}>
<div class="u-flex">
<button
class="button is-text is-only-icon"
type="button"
aria-label="delete"
on:click={() => deleteRole(role)}>
<span class="icon-x" aria-hidden="true" />
</button>
</div>
</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
</div>
<Actions
bind:showCustom
src/lib/components/permissions/roles.svelte
+3 -10
View File
@@ -10,8 +10,8 @@
TableRow
} from '$lib/elements/table';
import { symmetricDifference } from '$lib/helpers/array';
import { onDestroy, onMount } from 'svelte';
import { writable, type Unsubscriber } from 'svelte/store';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import Actions from './actions.svelte';
import type { Permission } from './permissions.svelte';
import Row from './row.svelte';
@@ -22,13 +22,12 @@
let showTeam = false;
let showCustom = false;
let showDropdown = false;
let unsubscribe: Unsubscriber;
const groups = writable<Map<string, Permission>>(new Map());
onMount(() => {
roles.forEach(addRole);
unsubscribe = groups.subscribe((n) => {
return groups.subscribe((n) => {
const current = Array.from(n.keys());
if (symmetricDifference(current, roles).length) {
roles = current;
@@ -36,12 +35,6 @@
});
});
onDestroy(() => {
if (unsubscribe) {
unsubscribe();
}
});
function create(event: CustomEvent<string[]>) {
for (const role of event.detail) {
addRole(role);
src/lib/components/secondaryTabs.svelte
+7 -1
View File
@@ -1,3 +1,9 @@
<ul class="secondary-tabs">
<script lang="ts">
export let large = false;
let classes: string = undefined;
export { classes as class };
</script>
<ul class="secondary-tabs {classes}" class:is-large={large}>
<slot />
</ul>
src/lib/components/secondaryTabsItem.svelte
+21 -5
View File
@@ -1,21 +1,37 @@
<script lang="ts">
export let href: string;
export let href: string = null;
export let disabled = false;
export let stretch = false;
export let fullWidth = false;
export let center = false;
</script>
<li class="secondary-tabs-item">
<li class="secondary-tabs-item" class:u-stretch={stretch}>
{#if href}
{#if disabled}
<button class="secondary-tabs-button" disabled>
<button
class="secondary-tabs-button"
class:u-width-full-line={fullWidth}
class:u-text-center={center}
disabled>
<span class="text"><slot /></span>
</button>
{:else}
<a class="secondary-tabs-button" {href}>
<a
class="secondary-tabs-button"
class:u-width-full-line={fullWidth}
class:u-text-center={center}
{href}>
<span class="text"><slot /></span>
</a>
{/if}
{:else}
<button class="secondary-tabs-button" {disabled} on:click>
<button
class="secondary-tabs-button"
class:u-width-full-line={fullWidth}
class:u-text-center={center}
{disabled}
on:click>
<span class="text"><slot /></span>
</button>
{/if}
src/lib/components/svgIcon.svelte
+16 -1
View File
@@ -3,8 +3,23 @@
export let name: string;
export let type: 'color' | 'grayscale' = 'color';
export let size = 40;
export let iconSize: keyof typeof iconSizes = 'medium';
let className = '';
export { className as class };
enum iconSizes {
small = '--icon-size-small',
medium = '--icon-size-medium',
large = '--icon-size-large',
xlarge = '--icon-size-extra-large'
}
</script>
<img class={className} src={$iconPath(name, type)} alt={name} />
<img
class={className}
width={size}
height={size}
style:inline-size={`var(${iconSizes[iconSize]})`}
src={$iconPath(name, type)}
alt={name} />
src/lib/components/tab.svelte
-1
View File
@@ -22,7 +22,6 @@
await goto(href);
await waitUntil(() => {
console.log('tickUntil', el);
return el.classList.contains('is-selected');
}, 1000);
el.focus();
src/lib/components/trim.svelte
+4 -2
View File
@@ -3,6 +3,7 @@
import { throttle } from '$lib/helpers/functions';
import { onMount } from 'svelte';
export let alternativeTrim = false;
let showTooltip = false;
let container: HTMLSpanElement | null;
@@ -15,11 +16,12 @@
<svelte:window on:resize={throttle(onResize, 250)} />
<span class="text u-trim" bind:this={container}>
<span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
{#if showTooltip}
<span
use:tooltip={{
content: container.innerText
content: container.innerText,
maxWidth: '30rem'
}}>
<slot />
</span>
src/lib/constants.ts
+5
View File
@@ -5,6 +5,8 @@ export const INTERVAL = 5 * 60000; // default interval to check for feedback
export enum Dependencies {
ORGANIZATION = 'dependency:organization',
PROJECT = 'dependency:project',
PROJECT_VARIABLES = 'dependency:project_variables',
PROJECT_INSTALLATIONS = 'dependency:project_installations',
PROJECTS = 'dependency:projects',
ACCOUNT = 'dependency:account',
ACCOUNT_SESSIONS = 'dependency:account_sessions',
@@ -23,8 +25,11 @@ export enum Dependencies {
FILE = 'dependency:file',
FILES = 'dependency:files',
FUNCTION = 'dependency:function',
FUNCTION_DOMAINS = 'dependency:function_domains',
FUNCTION_INSTALLATIONS = 'dependency:function_installations',
FUNCTIONS = 'dependency:functions',
VARIABLES = 'dependency:variables',
DEPLOYMENT = 'dependency:deployment',
DEPLOYMENTS = 'dependency:deployments',
EXECUTIONS = 'dependency:executions',
PLATFORM = 'dependency:platform',
src/lib/elements/forms/button.svelte
+22 -2
View File
@@ -3,9 +3,11 @@
import { getContext, hasContext } from 'svelte';
import { readable } from 'svelte/store';
import type { FormContext } from './form.svelte';
import { multiAction, type MultiActionArray } from '$lib/actions/multi-actions';
export let submit = false;
export let secondary = false;
export let github = false;
export let text = false;
export let danger = false;
export let disabled = false;
@@ -18,6 +20,7 @@
export let event: string = null;
let classes: string = undefined;
export { classes as class };
export let actions: MultiActionArray = [];
const isSubmitting = hasContext('form')
? getContext<FormContext>('form').isSubmitting
@@ -40,6 +43,7 @@
disabled && 'is-disabled',
round && 'is-only-icon',
secondary && 'is-secondary',
github && 'is-github',
text && 'is-text',
danger && 'is-danger',
fullWidth && 'is-full-width',
@@ -57,7 +61,8 @@
target={external ? '_blank' : ''}
rel={external ? 'noopener noreferrer' : ''}
class={resolvedClasses}
aria-label={ariaLabel}>
aria-label={ariaLabel}
use:multiAction={actions}>
<slot />
</a>
{:else}
@@ -67,7 +72,22 @@
disabled={internalDisabled}
class={resolvedClasses}
aria-label={ariaLabel}
type={submit === false ? 'button' : undefined}>
type={submit === false ? 'button' : undefined}
use:multiAction={actions}>
<slot />
</button>
{/if}
<style lang="scss">
.is-github {
background-color: #373b4d;
&:hover {
background-color: lighten($color: #373b4d, $amount: 2.5);
}
&:active {
background-color: darken($color: #373b4d, $amount: 5);
}
}
</style>
src/lib/elements/forms/formItem.svelte
+6 -1
View File
@@ -1,3 +1,8 @@
<li class="form-item">
<script lang="ts">
export let fullWidth = false;
export let isMultiple = false;
</script>
<li class="form-item" class:is-multiple={isMultiple} class:u-width-full-line={fullWidth}>
<slot />
</li>
src/lib/elements/forms/formItemPart.svelte
+8
View File
@@ -0,0 +1,8 @@
<script lang="ts">
export let fullWidth = false;
export let alignEnd = false;
</script>
<div class="form-item-part" class:u-cross-child-end={alignEnd} class:u-stretch={fullWidth}>
<slot />
</div>
src/lib/elements/forms/formList.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts">
export let isCommonSection = false;
export let gap = 24;
let classes: string = undefined;
let classes = '';
export { classes as class };
</script>
src/lib/elements/forms/index.ts
+1
View File
@@ -1,5 +1,6 @@
export { default as Form } from './form.svelte';
export { default as FormItem } from './formItem.svelte';
export { default as FormItemPart } from './formItemPart.svelte';
export { default as FormList } from './formList.svelte';
export { default as Button } from './button.svelte';
export { default as InputDomain } from './inputDomain.svelte';
src/lib/elements/forms/inputCheckbox.svelte
+5 -3
View File
@@ -3,6 +3,7 @@
export let label: string | undefined = undefined;
export let optionalText: string | undefined = undefined;
export let tooltip: string = null;
export let showLabel = true;
export let id: string;
export let value = false;
@@ -10,7 +11,7 @@
export let required = false;
export let disabled = false;
let element: HTMLInputElement;
export let element: HTMLInputElement | undefined = undefined;
let error: string;
const handleInvalid = (event: Event) => {
@@ -29,7 +30,7 @@
<FormItem>
{#if label}
<Label {required} {optionalText} hide={!showLabel} for={id}>
<Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>
{/if}
@@ -44,7 +45,8 @@
bind:this={element}
bind:checked={value}
on:invalid={handleInvalid}
on:click />
on:click
on:change />
</div>
{#if error}
<Helper type="warning">{error}</Helper>
src/lib/elements/forms/inputChoice.svelte
+19 -2
View File
@@ -8,6 +8,7 @@
export let value = false;
export let required = false;
export let disabled = false;
export let tooltip: string = null;
let element: HTMLInputElement;
let error: string;
@@ -39,8 +40,24 @@
on:invalid={handleInvalid} />
<div class="choice-item-content">
<div class:u-hide={!showLabel} class="choice-item-title">{label}</div>
{#if $$slots}
<h6 class:u-hide={!showLabel} class="choice-item-title">
{label}
</h6>
{#if tooltip}
<button class="tooltip" aria-label="variables info">
<span
class="icon-info"
aria-hidden="true"
style="font-size: var(--icon-size-small)" />
<span class="tooltip-popup" role="tooltip">
<p class="text">
{tooltip}
</p>
</span>
</button>
{/if}
{#if $$slots.default}
<p class="choice-item-paragraph"><slot /></p>
{/if}
</div>
src/lib/elements/forms/inputFile.svelte
+48 -12
View File
@@ -1,29 +1,53 @@
<script lang="ts">
import { Trim } from '$lib/components';
import { humanFileSize } from '$lib/helpers/sizeConvertion';
import { Helper } from '.';
import { onMount } from 'svelte';
import { Helper, Label } from '.';
export let label: string = null;
export let files: FileList;
export let list = new DataTransfer();
export let allowedFileExtensions: string[] = [];
export let maxSize: number = null;
export let required = false;
export let optionalText: string = null;
export let tooltip: string = null;
export let error: string = null;
let input: HTMLInputElement;
let hovering = false;
function setFiles(value: FileList) {
if (!value) return;
const hasInvalidExt = Array.from(value).some((file) => {
const fileExtension = file.name.split('.').pop();
return allowedFileExtensions?.length
? !allowedFileExtensions.includes(fileExtension)
: false;
});
if (hasInvalidExt) {
error = 'Invalid file extension';
return;
}
files = value;
input.files = value;
}
function resetFiles() {
setFiles(new DataTransfer().files);
}
function dropHandler(ev: DragEvent) {
ev.dataTransfer.dropEffect = 'move';
hovering = false;
if (ev.dataTransfer.items) {
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
list.items.clear();
list.items.add(ev.dataTransfer.items[i].getAsFile());
files = list.files;
}
if (!ev.dataTransfer.items) return;
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(ev.dataTransfer.items[i].getAsFile());
setFiles(dataTransfer.files);
}
}
}
@@ -47,10 +71,19 @@
}
$: fileArray = files?.length ? Array.from(files) : [];
onMount(() => {
setFiles(files);
});
const handleChange = (event: Event) => {
const target = event.currentTarget as HTMLInputElement;
setFiles(target.files);
};
</script>
<input
bind:files
on:change={handleChange}
bind:this={input}
accept={allowedFileExtensions.map((n) => `.${n}`).join(',')}
type="file"
@@ -60,11 +93,14 @@
<div>
{#if label}
<p class="text">{label}</p>
<Label {required} {optionalText} {tooltip} hide={!label}>
{label}
</Label>
{/if}
<div
class="box is-no-shadow u-padding-24"
style="--box-border-radius:var(--border-radius-xsmall); z-index: 1"
class:u-margin-block-start-8={!!label}
class:is-border-dashed={!hovering}
class:is-hover-with-file={hovering}
on:drop|preventDefault={dropHandler}
@@ -123,7 +159,7 @@
{fileSize.value + fileSize.unit}
</span>
<button
on:click={() => (files = null)}
on:click|preventDefault={resetFiles}
type="button"
class="button is-text is-only-icon u-margin-inline-start-auto"
aria-label="remove file"
src/lib/elements/forms/inputId.svelte
+2 -2
View File
@@ -47,12 +47,12 @@
</div>
</FormItem>
<div
class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center"
class="u-flex u-gap-4 u-margin-block-start-8 u-small"
class:u-color-text-warning={icon === 'exclamation'}>
<span
class:icon-info={icon === 'info'}
class:icon-exclamation={icon === 'exclamation'}
class="u-cross-center u-line-height-1 u-icon-small u-color-text-gray"
class="u-cross-center u-line-height-1 u-color-text-gray"
aria-hidden="true" />
<span class="text u-line-height-1-5">
Allowed characters: alphanumeric, non-leading hyphen, underscore, period
src/lib/elements/forms/inputPassword.svelte
+1 -1
View File
@@ -51,7 +51,7 @@
{label}
</Label>
<div class="input-text-wrapper">
<div class="input-text-wrapper" style={showPasswordButton ? '--amount-of-buttons: 1' : ''}>
{#if showInPlainText}
<input
{id}
src/lib/elements/forms/inputSelect.svelte
+2 -1
View File
@@ -8,6 +8,7 @@
export let value: string | number | boolean;
export let placeholder = '';
export let required = false;
export let hideRequired = false;
export let disabled = false;
export let options: {
value: string | boolean | number;
@@ -46,7 +47,7 @@
<FormItem>
{#if label}
<Label {required} {optionalText} hide={!showLabel} for={id}>
<Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>
{/if}
src/lib/elements/forms/inputSelectSearch.svelte
+16 -5
View File
@@ -16,13 +16,17 @@
export let label: string;
export let name = 'elements';
export let optionalText: string | undefined = undefined;
export let tooltip: string | undefined = undefined;
export let showLabel = true;
export let placeholder = '';
export let required = false;
export let hideRequired = false;
export let disabled = false;
export let fullWidth = false;
export let autofocus = false;
export let interactiveOutput = false;
// Input value
// stretch is used inside of a flex container to give the element flex:1
export let stretch = true;
export let search = '';
// The actual selected value
export let value: Option['value'];
@@ -82,9 +86,13 @@
value = option.value;
search = option.label;
// It's not working without this line.
!$$slots.output && (element.value = search);
if (!$$slots.output) {
element.value = search;
} else {
search = '';
}
hasFocus = false;
search = '';
dispatch('select', option);
}
@@ -99,7 +107,10 @@
$: showClearBtn = (hasFocus && search) || value;
</script>
<li class="u-position-relative form-item u-stretch">
<li
class="u-position-relative form-item"
class:u-width-full-line={fullWidth}
class:u-stretch={stretch}>
<DropList
bind:show={hasFocus}
noStyle
@@ -109,7 +120,7 @@
position="static"
fullWidth={true}
fixed>
<Label {required} {optionalText} hide={!showLabel} for={id}>
<Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id} {tooltip}>
{label}
</Label>
src/lib/elements/forms/inputSwitch.svelte
+1
View File
@@ -43,6 +43,7 @@
</div>
<div class="choice-item-content">
<div class="choice-item-title">{label}</div>
<slot name="description" />
</div>
</label>
{#if error}
src/lib/elements/forms/inputText.svelte
+9 -4
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem, Helper, Label } from '.';
import { FormItem, FormItemPart, Helper, Label } from '.';
import NullCheckbox from './nullCheckbox.svelte';
import TextCounter from './textCounter.svelte';
@@ -12,13 +12,16 @@
export let value = '';
export let placeholder = '';
export let required = false;
export let hideRequired = false;
export let nullable = false;
export let disabled = false;
export let readonly = false;
export let autofocus = false;
export let autocomplete = false;
export let fullWidth = false;
export let maxlength: number = null;
export let tooltip: string = null;
export let isMultiple = false;
let element: HTMLInputElement;
let error: string;
@@ -64,11 +67,13 @@
type $$Events = {
input: Event & { target: HTMLInputElement };
};
$: wrapper = isMultiple ? FormItemPart : FormItem;
</script>
<FormItem>
<svelte:component this={wrapper} {fullWidth}>
{#if label}
<Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
<Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>
{/if}
@@ -109,4 +114,4 @@
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
</svelte:component>
src/lib/elements/forms/inputTextarea.svelte
+2 -1
View File
@@ -3,6 +3,7 @@
import { FormItem, Helper, Label } from '.';
import NullCheckbox from './nullCheckbox.svelte';
import TextCounter from './textCounter.svelte';
import { clickOnEnter } from '$lib/helpers/a11y';
export let label: string;
export let showLabel = true;
@@ -61,7 +62,7 @@
{label}
</Label>
<div class="input-text-wrapper">
<div class="input-text-wrapper" on:click on:keyup={clickOnEnter}>
<textarea
{id}
{name}
src/lib/elements/forms/label.svelte
+9 -3
View File
@@ -1,6 +1,7 @@
<script lang="ts">
interface $$Props extends Partial<HTMLLabelElement> {
required?: boolean;
hideRequired?: boolean;
optionalText?: string | undefined;
hide?: boolean;
tooltip?: string;
@@ -8,12 +9,17 @@
}
export let required: $$Props['required'] = false;
export let hideRequired: $$Props['hideRequired'] = false;
export let optionalText: $$Props['optionalText'] = undefined;
export let hide: $$Props['hide'] = false;
export let tooltip: $$Props['tooltip'] = null;
</script>
<label class:is-required={required} class:u-hide={hide} class="label" {...$$restProps}>
<label
class:is-required={required && !hideRequired}
class:u-hide={hide}
class="label"
{...$$restProps}>
<slot />
</label>
@@ -22,8 +28,8 @@
{/if}
{#if tooltip}
<button class="tooltip" aria-label="variables info">
<span class="icon-info" aria-hidden="true" />
<button type="button" on:click|preventDefault class="tooltip" aria-label="input tooltip">
<span class="icon-info" aria-hidden="true" style="font-size: var(--icon-size-small)" />
<span class="tooltip-popup" role="tooltip">
<p class="text">
{tooltip}
src/lib/elements/table/cell.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
<div
style={width ? `--p-col-width:${width?.toString()}` : ''}
class="table-col"
class="table-col u-position-relative"
class:u-overflow-visible={showOverflow}
class:is-only-desktop={onlyDesktop}
data-title={title}
src/lib/elements/table/cellCheck.svelte
+25 -14
View File
@@ -6,24 +6,35 @@
export let id: string;
export let selectedIds: string[] = [];
let el: HTMLInputElement;
const handleClick = (e: Event) => {
// Prevent the link from being followed
e.preventDefault();
if (!isHTMLInputElement(el)) return;
selectedIds = toggle(selectedIds, id);
// Hack to make sure the checkbox is checked, independent of the
// preventDefault() call above
window.setTimeout(() => {
el.checked = selectedIds.includes(id);
});
};
</script>
<TableCell>
<div class="touch-area" on:click={handleClick} on:keypress={handleClick} />
<InputCheckbox
bind:element={el}
id="select-{id}"
value={selectedIds.includes(id)}
on:click={(e) => {
// Prevent the link from being followed
e.preventDefault();
const el = e.currentTarget;
if (!isHTMLInputElement(el)) return;
selectedIds = toggle(selectedIds, id);
// Hack to make sure the checkbox is checked, independent of the
// preventDefault() call above
window.setTimeout(() => {
el.checked = selectedIds.includes(id);
});
}} />
on:click={handleClick} />
</TableCell>
<style lang="scss">
.touch-area {
position: absolute;
inset: 0;
}
</style>
src/lib/elements/table/cellLink.svelte
+10 -1
View File
@@ -1,8 +1,17 @@
<script lang="ts">
export let href: string;
export let title: string;
export let external = false;
export let noStyle = false;
</script>
<div class="table-col" data-title={title} role="cell" data-private>
<a role="button" tabindex="0" class="link" {href}><slot /></a>
<a
role="button"
tabindex="0"
class:link={!noStyle}
{href}
target={external ? '_blank' : ''}
rel={external ? 'noopener noreferrer' : ''}><slot /></a>
</div>
src/lib/elements/table/table.svelte
+2
View File
@@ -1,12 +1,14 @@
<script lang="ts">
export let noMargin = false;
export let noStyles = false;
export let style = '';
</script>
<div
class="table is-selected-columns-mobile"
class:u-margin-block-start-32={!noMargin}
class:is-remove-outer-styles={noStyles}
{style}
role="table"
data-private>
<slot />
src/lib/elements/table/tableScroll.svelte
+1 -1
View File
@@ -38,7 +38,7 @@
};
</script>
<div class="table-with-scroll {noMargin ? '' : 'u-margin-block-start-32'}" data-private>
<div class="table-with-scroll" class:u-margin-block-start-32={!noMargin} data-private>
<div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
<table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
<slot />
src/lib/helpers/array.ts
+7 -1
View File
@@ -55,7 +55,7 @@ export function empty(arr: unknown[]): boolean {
export function at(array: readonly [], index: number): undefined;
export function at<T>(array: readonly T[], index: number): T;
export function at<T>(array: readonly T[] | [], index: number): T | undefined {
const len = array.length;
const len = array?.length;
if (!len) return undefined;
if (index < 0) index += len;
@@ -96,3 +96,9 @@ export function toggle<T>(arr: T[], elem: T): T[] {
arr.push(elem);
return arr;
}
// TODO: metric type is wrong
export function total(set: Array<number>): number {
if (!set) return 0;
return set.reduce((prev, curr) => prev + curr, 0);
}
src/lib/helpers/date.ts
+12
View File
@@ -1,3 +1,11 @@
import { browser } from '$app/environment';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
if (browser) {
dayjs.extend(relativeTime);
}
export const toLocaleDate = (datetime: string) => {
const date = new Date(datetime);
@@ -49,3 +57,7 @@ export const diffDays = (date1: Date, date2: Date) => {
const diffTime = Math.abs(date2.getTime() - date1.getTime());
return Math.floor(diffTime / (1000 * 60 * 60 * 24));
};
export function timeFromNow(datetime: string): string {
return dayjs().to(dayjs(datetime));
}
src/lib/helpers/mutation.ts
+6
View File
@@ -0,0 +1,6 @@
// Easier wrapper over mutation observer, which takes an element, a callback, and returns an unsubscribe fn
export function observeElement(el: HTMLElement, callback: MutationCallback): () => void {
const observer = new MutationObserver(callback);
observer.observe(el, { childList: true, subtree: true });
return () => observer.disconnect();
}
src/lib/helpers/object.ts
+11
View File
@@ -37,6 +37,17 @@ export function deepEqual<T>(obj1: T, obj2: T): boolean {
return true;
}
/**
* Creates a deep clone of the given object. This function uses the JSON methods for cloning,
* so it may not be suitable for objects with functions, symbols, or other non-JSON-safe data.
*
* @param obj the object to be cloned
* @returns a deep clone of the provided object
*/
export function deepClone<T>(obj: T): T {
return JSON.parse(JSON.stringify(obj));
}
export type DeepObj<T> = {
[K in keyof T]: T[K] extends object ? DeepObj<T[K]> : T[K];
};
src/lib/helpers/string.ts
+8
View File
@@ -40,3 +40,11 @@ export function camelize(str: string): string {
return firstChar.toLowerCase();
});
}
const formatter = Intl.NumberFormat('en', {
notation: 'compact'
});
export function formatNum(number: number): string {
return formatter.format(number);
}
src/lib/helpers/types.ts
-5
View File
@@ -1,10 +1,5 @@
import type { Writable } from 'svelte/store';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type DeepKeys<T extends Record<string, any>> = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[K in keyof T]: T[K] extends Record<string, any> ? `${K}.${DeepKeys<T[K]>}` : K;
}[keyof T];
export type WritableValue<T> = T extends Writable<infer U> ? U : never;
export function isHTMLElement(el: unknown): el is HTMLElement {
src/lib/images/appwrite-cloud.svg
+22
View File
@@ -0,0 +1,22 @@
<svg width="215" height="19" viewBox="0 0 215 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.82529 15.1522H2.60847L1.64748 17.8121H6.10352e-05L4.32453 5.9198H6.12639L10.4337 17.8121H8.78628L7.82529 15.1522ZM7.37911 13.8823L5.21688 7.84179L3.05464 13.8823H7.37911Z" fill="white"/>
<path d="M23.7474 9.35192C23.7474 10.3472 23.4041 11.1767 22.7177 11.8402C22.0427 12.4923 21.0074 12.8184 19.6117 12.8184H17.3121V17.8121H15.7505V5.85116H19.6117C20.9616 5.85116 21.9855 6.17721 22.6834 6.82931C23.3927 7.48141 23.7474 8.32228 23.7474 9.35192ZM19.6117 11.5313C20.4811 11.5313 21.1218 11.3425 21.5336 10.965C21.9455 10.5875 22.1514 10.0498 22.1514 9.35192C22.1514 7.87611 21.3048 7.1382 19.6117 7.1382H17.3121V11.5313H19.6117Z" fill="white"/>
<path d="M37.1172 9.35192C37.1172 10.3472 36.774 11.1767 36.0876 11.8402C35.4126 12.4923 34.3772 12.8184 32.9815 12.8184H30.682V17.8121H29.1204V5.85116H32.9815C34.3315 5.85116 35.3554 6.17721 36.0532 6.82931C36.7625 7.48141 37.1172 8.32228 37.1172 9.35192ZM32.9815 11.5313C33.851 11.5313 34.4916 11.3425 34.9035 10.965C35.3153 10.5875 35.5213 10.0498 35.5213 9.35192C35.5213 7.87611 34.6747 7.1382 32.9815 7.1382H30.682V11.5313H32.9815Z" fill="white"/>
<path d="M57.5229 5.85116L54.0564 17.8121H52.306L49.526 8.185L46.6431 17.8121L44.9098 17.8292L41.5635 5.85116H43.2281L45.8365 15.9931L48.7195 5.85116H50.4699L53.2156 15.9587L55.8411 5.85116H57.5229Z" fill="white"/>
<path d="M68.9619 17.8121L66.1132 12.9213H64.2255V17.8121H62.6639V5.85116H66.5251C67.4288 5.85116 68.1896 6.0056 68.8074 6.31449C69.4366 6.62338 69.9057 7.04096 70.2146 7.56722C70.5235 8.09347 70.6779 8.69409 70.6779 9.36908C70.6779 10.1928 70.4377 10.9192 69.9572 11.5485C69.4881 12.1777 68.7788 12.5953 67.8293 12.8012L70.8324 17.8121H68.9619ZM64.2255 11.6686H66.5251C67.3717 11.6686 68.0066 11.4627 68.4299 11.0508C68.8532 10.6275 69.0648 10.0669 69.0648 9.36908C69.0648 8.65977 68.8532 8.11063 68.4299 7.72166C68.018 7.33269 67.3831 7.1382 66.5251 7.1382H64.2255V11.6686Z" fill="white"/>
<path d="M78.0981 5.85116V17.8121H76.5365V5.85116H78.0981Z" fill="white"/>
<path d="M91.5536 5.85116V7.12104H88.2931V17.8121H86.7315V7.12104H83.4538V5.85116H91.5536Z" fill="white"/>
<path d="M98.4696 7.12104V11.1195H102.828V12.4065H98.4696V16.525H103.343V17.8121H96.908V5.834H103.343V7.12104H98.4696Z" fill="white"/>
<path d="M108.383 11.7716C108.383 10.5818 108.641 9.52352 109.155 8.59685C109.67 7.65874 110.385 6.93228 111.3 6.41746C112.227 5.8912 113.274 5.62807 114.441 5.62807C115.871 5.62807 117.095 6.0056 118.113 6.76067C119.131 7.51573 119.812 8.54537 120.155 9.84957H116.929C116.689 9.3462 116.346 8.96294 115.9 8.69981C115.465 8.43669 114.967 8.30512 114.407 8.30512C113.503 8.30512 112.771 8.61973 112.21 9.24895C111.649 9.87817 111.369 10.719 111.369 11.7716C111.369 12.8241 111.649 13.6649 112.21 14.2942C112.771 14.9234 113.503 15.238 114.407 15.238C114.967 15.238 115.465 15.1064 115.9 14.8433C116.346 14.5802 116.689 14.1969 116.929 13.6935H120.155C119.812 14.9977 119.131 16.0274 118.113 16.7824C117.095 17.5261 115.871 17.8979 114.441 17.8979C113.274 17.8979 112.227 17.6405 111.3 17.1257C110.385 16.5994 109.67 15.8729 109.155 14.9463C108.641 14.0196 108.383 12.9614 108.383 11.7716Z" fill="white"/>
<path d="M128.319 15.5469H132.163V17.8121H125.385V5.76536H128.319V15.5469Z" fill="white"/>
<path d="M142.692 17.9322C141.559 17.9322 140.518 17.6691 139.569 17.1428C138.631 16.6166 137.881 15.8844 137.321 14.9463C136.772 13.9967 136.497 12.9328 136.497 11.7544C136.497 10.576 136.772 9.5178 137.321 8.57969C137.881 7.64158 138.631 6.90939 139.569 6.38314C140.518 5.85688 141.559 5.59375 142.692 5.59375C143.825 5.59375 144.86 5.85688 145.798 6.38314C146.748 6.90939 147.491 7.64158 148.029 8.57969C148.578 9.5178 148.853 10.576 148.853 11.7544C148.853 12.9328 148.578 13.9967 148.029 14.9463C147.48 15.8844 146.736 16.6166 145.798 17.1428C144.86 17.6691 143.825 17.9322 142.692 17.9322ZM142.692 15.2552C143.653 15.2552 144.42 14.9348 144.992 14.2942C145.575 13.6535 145.867 12.8069 145.867 11.7544C145.867 10.6904 145.575 9.84385 144.992 9.21463C144.42 8.57397 143.653 8.25364 142.692 8.25364C141.72 8.25364 140.942 8.56825 140.358 9.19747C139.786 9.82669 139.5 10.679 139.5 11.7544C139.5 12.8184 139.786 13.6707 140.358 14.3113C140.942 14.9405 141.72 15.2552 142.692 15.2552Z" fill="white"/>
<path d="M156.8 5.76536V12.9728C156.8 13.6935 156.978 14.2484 157.332 14.6374C157.687 15.0263 158.207 15.2208 158.894 15.2208C159.58 15.2208 160.107 15.0263 160.473 14.6374C160.839 14.2484 161.022 13.6935 161.022 12.9728V5.76536H163.956V12.9556C163.956 14.031 163.727 14.9405 163.27 15.6842C162.812 16.4278 162.194 16.9884 161.416 17.3659C160.65 17.7434 159.792 17.9322 158.842 17.9322C157.893 17.9322 157.041 17.7492 156.285 17.3831C155.542 17.0055 154.953 16.445 154.518 15.7013C154.083 14.9463 153.866 14.031 153.866 12.9556V5.76536H156.8Z" fill="white"/>
<path d="M173.962 5.76536C175.232 5.76536 176.342 6.01704 177.291 6.52042C178.241 7.0238 178.973 7.7331 179.488 8.64833C180.014 9.55212 180.277 10.5989 180.277 11.7887C180.277 12.9671 180.014 14.0139 179.488 14.9291C178.973 15.8443 178.235 16.5536 177.274 17.057C176.325 17.5604 175.221 17.8121 173.962 17.8121H169.449V5.76536H173.962ZM173.773 15.2723C174.883 15.2723 175.747 14.9691 176.365 14.3628C176.982 13.7565 177.291 12.8984 177.291 11.7887C177.291 10.679 176.982 9.81525 176.365 9.19747C175.747 8.57969 174.883 8.2708 173.773 8.2708H172.383V15.2723H173.773Z" fill="white"/>
<path d="M195.974 18.1164C193.085 18.1164 190.743 15.7507 190.743 12.8325C190.743 10.1024 192.792 7.85585 195.422 7.57752C195.294 7.08627 195.226 6.57056 195.226 6.03881C195.226 2.70367 197.903 0 201.205 0C204.013 0 206.369 1.95563 207.011 4.59213C207.311 4.55057 207.618 4.5291 207.931 4.5291C211.645 4.5291 214.656 7.57073 214.656 11.3228C214.656 15.0748 211.645 18.1164 207.931 18.1164H195.974Z" fill="url(#paint0_linear_511_23621)"/>
<defs>
<linearGradient id="paint0_linear_511_23621" x1="202.699" y1="0" x2="202.699" y2="23.7487" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.7"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

src/lib/images/login/cloud-1.svg
+12
View File
@@ -0,0 +1,12 @@
<svg width="79" height="58" viewBox="0 0 79 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.0709 16.202C50.359 6.60814 40.4551 0 29 0C12.9837 0 0 12.9182 0 28.8535C0 44.7889 12.9837 57.7071 29 57.7071C34.828 57.7071 40.2545 55.9966 44.8 53.0527C48.4035 55.963 52.997 57.7071 58 57.7071C69.5756 57.7071 78.9594 48.3706 78.9594 36.8535C78.9594 25.3364 69.5756 16 58 16C57.006 16 56.0281 16.0689 55.0709 16.202Z" fill="url(#paint0_linear_23_6393)"/>
<defs>
<linearGradient id="paint0_linear_23_6393" x1="56.5" y1="-7" x2="58" y2="57.7071" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6893"/>
<stop offset="0.29541" stop-color="#F02E65"/>
<stop offset="0.351472" stop-color="#F02E65" stop-opacity="0.86"/>
<stop offset="0.526441" stop-color="#F02E65" stop-opacity="0.22"/>
<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 924 B

src/lib/images/login/cloud-2.svg
+11
View File
@@ -0,0 +1,11 @@
<svg width="191" height="100" viewBox="0 0 191 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M126.696 19.8455C117.599 7.79137 103.154 -6.10352e-05 86.8893 -6.10352e-05C69.103 -6.10352e-05 53.4929 9.31726 44.6736 23.3373C42.1709 22.8017 39.5741 22.5198 36.9115 22.5198C16.5258 22.5198 0 39.0456 0 59.4313C0 79.8169 16.5258 96.3428 36.9115 96.3428C44.529 96.3428 51.6075 94.0353 57.4862 90.0812C65.7285 96.1135 75.893 99.6748 86.8893 99.6748C96.8339 99.6748 106.098 96.7621 113.876 91.7432C117.567 92.9821 121.519 93.6533 125.627 93.6533C134.693 93.6533 142.996 90.385 149.421 84.9623C153.51 87.3486 158.266 88.7158 163.342 88.7158C178.617 88.7158 191 76.3327 191 61.0574C191 45.782 178.617 33.3989 163.342 33.3989C160.501 33.3989 157.76 33.8272 155.18 34.6227C148.646 25.9069 138.347 20.1766 126.696 19.8455Z" fill="url(#paint0_linear_23_6387)"/>
<defs>
<linearGradient id="paint0_linear_23_6387" x1="81.5" y1="4.5" x2="81.5" y2="78.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6893"/>
<stop offset="0.278871" stop-color="#F02E65" stop-opacity="0.99"/>
<stop offset="0.657422" stop-color="#EC2E65" stop-opacity="0.29"/>
<stop offset="1" stop-color="#EC2E65" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/lib/images/login/cloud-bg-mobile.svg
+626
View File
@@ -0,0 +1,626 @@
<svg width="390" height="499" viewBox="0 0 390 499" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_50_2588)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M404.589 174.588C404.996 171.711 405.206 168.771 405.206 165.783C405.206 131.109 376.91 103 342.006 103C316.927 103 295.26 117.511 285.048 138.543C279.481 140.709 274.298 143.638 269.63 147.2C265.573 131.641 251.343 120.151 234.412 120.151C216.796 120.151 202.104 132.59 198.751 149.108C189.115 143.548 177.917 140.364 165.971 140.364C157.066 140.364 148.577 142.133 140.84 145.337C131.125 121.585 107.664 104.837 80.2655 104.837C52.7894 104.837 29.2733 121.68 19.6085 145.539C12.2104 141.088 3.53231 138.526 -5.7481 138.526C-32.8203 138.526 -54.7666 160.328 -54.7666 187.221C-54.7666 201.495 -48.5846 214.334 -38.7354 223.241V438.658H404.589V174.588Z" fill="url(#paint0_linear_50_2588)" fill-opacity="0.28"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M402.739 170.875C396.943 142.142 371.402 120.496 340.772 120.496C319.043 120.496 299.875 131.39 288.5 147.98C281.446 150.722 274.945 154.556 269.209 159.273C262.68 147.368 249.959 139.288 235.336 139.288C223.724 139.288 213.311 144.383 206.246 152.443C196.008 146.945 184.285 143.824 171.828 143.824C158.398 143.824 145.822 147.452 135.039 153.775C123.599 134.933 102.797 122.333 79.0321 122.333C51.556 122.333 28.0399 139.176 18.3751 163.035C10.977 158.584 2.29892 156.022 -6.9815 156.022C-34.0537 156.022 -56 177.824 -56 204.718C-56 218.991 -49.818 231.83 -39.9688 240.737V456.155H403.356V456.154H402.739V170.875Z" fill="url(#paint1_linear_50_2588)"/>
<path d="M42.5201 -28.4292C42.5201 -28.2052 42.3663 -28.0236 42.1767 -28.0236C41.987 -28.0236 41.8332 -28.2052 41.8332 -28.4292C41.8332 -28.6532 41.987 -28.8349 42.1767 -28.8349C42.3663 -28.8349 42.5201 -28.6532 42.5201 -28.4292Z" fill="url(#paint2_linear_50_2588)" fill-opacity="0.7"/>
<path d="M60.6145 9.2556C60.6145 9.47964 60.4608 9.66125 60.2711 9.66125C60.0814 9.66125 59.9276 9.47964 59.9276 9.2556C59.9276 9.03157 60.0814 8.84995 60.2711 8.84995C60.4608 8.84995 60.6145 9.03157 60.6145 9.2556Z" fill="url(#paint3_linear_50_2588)" fill-opacity="0.7"/>
<path d="M68.3998 17.3687C68.3998 17.5927 68.246 17.7744 68.0564 17.7744C67.8667 17.7744 67.7129 17.5927 67.7129 17.3687C67.7129 17.1447 67.8667 16.963 68.0564 16.963C68.246 16.963 68.3998 17.1447 68.3998 17.3687Z" fill="url(#paint4_linear_50_2588)" fill-opacity="0.7"/>
<path d="M68.3998 1.02262C68.3998 1.24666 68.246 1.42828 68.0564 1.42828C67.8667 1.42828 67.7129 1.24666 67.7129 1.02262C67.7129 0.798585 67.8667 0.616971 68.0564 0.616971C68.246 0.616971 68.3998 0.798585 68.3998 1.02262Z" fill="url(#paint5_linear_50_2588)" fill-opacity="0.7"/>
<path d="M68.3998 1.02262C68.3998 1.24666 68.246 1.42828 68.0564 1.42828C67.8667 1.42828 67.7129 1.24666 67.7129 1.02262C67.7129 0.798585 67.8667 0.616971 68.0564 0.616971C68.246 0.616971 68.3998 0.798585 68.3998 1.02262Z" fill="url(#paint6_linear_50_2588)" fill-opacity="0.7"/>
<path d="M124.958 -22.0817C124.958 -21.8577 124.804 -21.6761 124.614 -21.6761C124.425 -21.6761 124.271 -21.8577 124.271 -22.0817C124.271 -22.3058 124.425 -22.4874 124.614 -22.4874C124.804 -22.4874 124.958 -22.3058 124.958 -22.0817Z" fill="url(#paint7_linear_50_2588)" fill-opacity="0.7"/>
<path d="M78.9329 -6.97061C78.9329 -6.74657 78.7791 -6.56495 78.5894 -6.56495C78.3997 -6.56495 78.246 -6.74657 78.246 -6.97061C78.246 -7.19464 78.3997 -7.37627 78.5894 -7.37627C78.7791 -7.37627 78.9329 -7.19464 78.9329 -6.97061Z" fill="url(#paint8_linear_50_2588)" fill-opacity="0.7"/>
<path d="M83.5125 -9.79486C83.5125 -9.57082 83.3587 -9.3892 83.169 -9.3892C82.9793 -9.3892 82.8256 -9.57082 82.8256 -9.79486C82.8256 -10.0189 82.9793 -10.2005 83.169 -10.2005C83.3587 -10.2005 83.5125 -10.0189 83.5125 -9.79486Z" fill="url(#paint9_linear_50_2588)" fill-opacity="0.7"/>
<path d="M97.2513 -18.5994C97.2513 -18.3754 97.0975 -18.1937 96.9078 -18.1937C96.7181 -18.1937 96.5643 -18.3754 96.5643 -18.5994C96.5643 -18.8234 96.7181 -19.005 96.9078 -19.005C97.0975 -19.005 97.2513 -18.8234 97.2513 -18.5994Z" fill="url(#paint10_linear_50_2588)" fill-opacity="0.7"/>
<path d="M101.831 -15.895C101.831 -15.671 101.677 -15.4894 101.487 -15.4894C101.298 -15.4894 101.144 -15.671 101.144 -15.895C101.144 -16.1191 101.298 -16.3007 101.487 -16.3007C101.677 -16.3007 101.831 -16.1191 101.831 -15.895Z" fill="url(#paint11_linear_50_2588)" fill-opacity="0.7"/>
<path d="M108.7 -24.0081C108.7 -23.7841 108.546 -23.6025 108.357 -23.6025C108.167 -23.6025 108.013 -23.7841 108.013 -24.0081C108.013 -24.2322 108.167 -24.4138 108.357 -24.4138C108.546 -24.4138 108.7 -24.2322 108.7 -24.0081Z" fill="url(#paint12_linear_50_2588)" fill-opacity="0.7"/>
<path d="M90.3819 17.3687C90.3819 17.5927 90.2281 17.7744 90.0384 17.7744C89.8487 17.7744 89.6949 17.5927 89.6949 17.3687C89.6949 17.1447 89.8487 16.963 90.0384 16.963C90.2281 16.963 90.3819 17.1447 90.3819 17.3687Z" fill="url(#paint13_linear_50_2588)" fill-opacity="0.7"/>
<path d="M17.1084 17.3687C17.1084 17.5927 16.9546 17.7744 16.7649 17.7744C16.5752 17.7744 16.4214 17.5927 16.4214 17.3687C16.4214 17.1447 16.5752 16.963 16.7649 16.963C16.9546 16.963 17.1084 17.1447 17.1084 17.3687Z" fill="url(#paint14_linear_50_2588)" fill-opacity="0.7"/>
<path d="M33.2385 8.84395C33.2385 9.06799 33.0847 9.24961 32.895 9.24961C32.7053 9.24961 32.5515 9.06799 32.5515 8.84395C32.5515 8.61992 32.7053 8.4383 32.895 8.4383C33.0847 8.4383 33.2385 8.61992 33.2385 8.84395Z" fill="url(#paint15_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-36.2674 -27.3133C-36.2674 -27.0893 -36.4212 -26.9077 -36.6109 -26.9077C-36.8006 -26.9077 -36.9544 -27.0893 -36.9544 -27.3133C-36.9544 -27.5373 -36.8006 -27.719 -36.6109 -27.719C-36.4212 -27.719 -36.2674 -27.5373 -36.2674 -27.3133Z" fill="url(#paint16_linear_50_2588)" fill-opacity="0.7"/>
<path d="M388.284 -12.3793C388.284 -12.1553 388.438 -11.9737 388.628 -11.9737C388.818 -11.9737 388.971 -12.1553 388.971 -12.3793C388.971 -12.6034 388.818 -12.785 388.628 -12.785C388.438 -12.785 388.284 -12.6034 388.284 -12.3793Z" fill="url(#paint17_linear_50_2588)" fill-opacity="0.7"/>
<path d="M376.835 -1.56188C376.835 -1.33784 376.989 -1.15621 377.179 -1.15621C377.369 -1.15621 377.522 -1.33784 377.522 -1.56188C377.522 -1.78591 377.369 -1.96753 377.179 -1.96753C376.989 -1.96753 376.835 -1.78591 376.835 -1.56188Z" fill="url(#paint18_linear_50_2588)" fill-opacity="0.7"/>
<path d="M360.807 -17.7881C360.807 -17.564 360.961 -17.3824 361.15 -17.3824C361.34 -17.3824 361.494 -17.564 361.494 -17.7881C361.494 -18.0121 361.34 -18.1937 361.15 -18.1937C360.961 -18.1937 360.807 -18.0121 360.807 -17.7881Z" fill="url(#paint19_linear_50_2588)" fill-opacity="0.7"/>
<path d="M352.742 5.13911C352.742 5.36315 352.896 5.54477 353.085 5.54477C353.275 5.54477 353.429 5.36315 353.429 5.13911C353.429 4.91507 353.275 4.73346 353.085 4.73346C352.896 4.73346 352.742 4.91507 352.742 5.13911Z" fill="url(#paint20_linear_50_2588)" fill-opacity="0.7"/>
<path d="M344.957 13.2522C344.957 13.4763 345.11 13.6579 345.3 13.6579C345.49 13.6579 345.643 13.4763 345.643 13.2522C345.643 13.0282 345.49 12.8466 345.3 12.8466C345.11 12.8466 344.957 13.0282 344.957 13.2522Z" fill="url(#paint21_linear_50_2588)" fill-opacity="0.7"/>
<path d="M344.957 5.13911C344.957 5.36315 345.11 5.54477 345.3 5.54477C345.49 5.54477 345.643 5.36315 345.643 5.13911C345.643 4.91507 345.49 4.73346 345.3 4.73346C345.11 4.73346 344.957 4.91507 344.957 5.13911Z" fill="url(#paint22_linear_50_2588)" fill-opacity="0.7"/>
<path d="M344.957 5.13911C344.957 5.36315 345.11 5.54477 345.3 5.54477C345.49 5.54477 345.643 5.36315 345.643 5.13911C345.643 4.91507 345.49 4.73346 345.3 4.73346C345.11 4.73346 344.957 4.91507 344.957 5.13911Z" fill="url(#paint23_linear_50_2588)" fill-opacity="0.7"/>
<path d="M291.884 -15.0837C291.884 -14.8597 292.038 -14.6781 292.227 -14.6781C292.417 -14.6781 292.571 -14.8597 292.571 -15.0837C292.571 -15.3078 292.417 -15.4894 292.227 -15.4894C292.038 -15.4894 291.884 -15.3078 291.884 -15.0837Z" fill="url(#paint24_linear_50_2588)" fill-opacity="0.7"/>
<path d="M280.634 -23.4366C280.634 -23.2125 280.787 -23.0309 280.977 -23.0309C281.167 -23.0309 281.32 -23.2125 281.32 -23.4366C281.32 -23.6606 281.167 -23.8422 280.977 -23.8422C280.787 -23.8422 280.634 -23.6606 280.634 -23.4366Z" fill="url(#paint25_linear_50_2588)" fill-opacity="0.7"/>
<path d="M296.464 1.1425C296.464 1.36653 296.617 1.54815 296.807 1.54815C296.997 1.54815 297.151 1.36653 297.151 1.1425C297.151 0.918459 296.997 0.736841 296.807 0.736841C296.617 0.736841 296.464 0.918459 296.464 1.1425Z" fill="url(#paint26_linear_50_2588)" fill-opacity="0.7"/>
<path d="M337.909 -6.97061C337.909 -6.74657 338.063 -6.56495 338.252 -6.56495C338.442 -6.56495 338.596 -6.74657 338.596 -6.97061C338.596 -7.19464 338.442 -7.37627 338.252 -7.37627C338.063 -7.37627 337.909 -7.19464 337.909 -6.97061Z" fill="url(#paint27_linear_50_2588)" fill-opacity="0.7"/>
<path d="M333.329 -1.56188C333.329 -1.33784 333.483 -1.15621 333.673 -1.15621C333.862 -1.15621 334.016 -1.33784 334.016 -1.56188C334.016 -1.78591 333.862 -1.96753 333.673 -1.96753C333.483 -1.96753 333.329 -1.78591 333.329 -1.56188Z" fill="url(#paint28_linear_50_2588)" fill-opacity="0.7"/>
<path d="M313.637 3.84687C313.637 4.0709 313.791 4.25252 313.981 4.25252C314.17 4.25252 314.324 4.0709 314.324 3.84687C314.324 3.62283 314.17 3.44121 313.981 3.44121C313.791 3.44121 313.637 3.62283 313.637 3.84687Z" fill="url(#paint29_linear_50_2588)" fill-opacity="0.7"/>
<path d="M336.535 -22.9264C336.535 -22.7023 336.689 -22.5207 336.879 -22.5207C337.068 -22.5207 337.222 -22.7023 337.222 -22.9264C337.222 -23.1504 337.068 -23.332 336.879 -23.332C336.689 -23.332 336.535 -23.1504 336.535 -22.9264Z" fill="url(#paint30_linear_50_2588)" fill-opacity="0.7"/>
<path d="M319.591 -18.5994C319.591 -18.3754 319.744 -18.1937 319.934 -18.1937C320.124 -18.1937 320.277 -18.3754 320.277 -18.5994C320.277 -18.8234 320.124 -19.005 319.934 -19.005C319.744 -19.005 319.591 -18.8234 319.591 -18.5994Z" fill="url(#paint31_linear_50_2588)" fill-opacity="0.7"/>
<path d="M315.011 -15.895C315.011 -15.671 315.165 -15.4894 315.354 -15.4894C315.544 -15.4894 315.698 -15.671 315.698 -15.895C315.698 -16.1191 315.544 -16.3007 315.354 -16.3007C315.165 -16.3007 315.011 -16.1191 315.011 -15.895Z" fill="url(#paint32_linear_50_2588)" fill-opacity="0.7"/>
<path d="M315.011 -21.3038C315.011 -21.0797 315.165 -20.8981 315.354 -20.8981C315.544 -20.8981 315.698 -21.0797 315.698 -21.3038C315.698 -21.5278 315.544 -21.7094 315.354 -21.7094C315.165 -21.7094 315.011 -21.5278 315.011 -21.3038Z" fill="url(#paint33_linear_50_2588)" fill-opacity="0.7"/>
<path d="M268.528 -21.3038C268.528 -21.0797 268.682 -20.8981 268.872 -20.8981C269.061 -20.8981 269.215 -21.0797 269.215 -21.3038C269.215 -21.5278 269.061 -21.7094 268.872 -21.7094C268.682 -21.7094 268.528 -21.5278 268.528 -21.3038Z" fill="url(#paint34_linear_50_2588)" fill-opacity="0.7"/>
<path d="M326.46 17.3687C326.46 17.5927 326.614 17.7744 326.803 17.7744C326.993 17.7744 327.147 17.5927 327.147 17.3687C327.147 17.1447 326.993 16.963 326.803 16.963C326.614 16.963 326.46 17.1447 326.46 17.3687Z" fill="url(#paint35_linear_50_2588)" fill-opacity="0.7"/>
<path d="M399.733 17.3687C399.733 17.5927 399.887 17.7744 400.077 17.7744C400.267 17.7744 400.42 17.5927 400.42 17.3687C400.42 17.1447 400.267 16.963 400.077 16.963C399.887 16.963 399.733 17.1447 399.733 17.3687Z" fill="url(#paint36_linear_50_2588)" fill-opacity="0.7"/>
<path d="M390.574 9.2556C390.574 9.47964 390.728 9.66125 390.918 9.66125C391.107 9.66125 391.261 9.47964 391.261 9.2556C391.261 9.03157 391.107 8.84995 390.918 8.84995C390.728 8.84995 390.574 9.03157 390.574 9.2556Z" fill="url(#paint37_linear_50_2588)" fill-opacity="0.7"/>
<path d="M404.313 -23.1968C404.313 -22.9728 404.467 -22.7912 404.657 -22.7912C404.846 -22.7912 405 -22.9728 405 -23.1968C405 -23.4209 404.846 -23.6025 404.657 -23.6025C404.467 -23.6025 404.313 -23.4209 404.313 -23.1968Z" fill="url(#paint38_linear_50_2588)" fill-opacity="0.7"/>
<path d="M401.794 -17.7881C401.794 -17.564 401.948 -17.3824 402.138 -17.3824C402.327 -17.3824 402.481 -17.564 402.481 -17.7881C402.481 -18.0121 402.327 -18.1937 402.138 -18.1937C401.948 -18.1937 401.794 -18.0121 401.794 -17.7881Z" fill="url(#paint39_linear_50_2588)" fill-opacity="0.7"/>
<path d="M72.4165 -27.4618C72.4165 -27.2378 72.2627 -27.0562 72.0731 -27.0562C71.8834 -27.0562 71.7296 -27.2378 71.7296 -27.4618C71.7296 -27.6859 71.8834 -27.8675 72.0731 -27.8675C72.2627 -27.8675 72.4165 -27.6859 72.4165 -27.4618Z" fill="url(#paint40_linear_50_2588)" fill-opacity="0.7"/>
<path d="M292.703 -29.5943C292.703 -29.3703 292.857 -29.1887 293.047 -29.1887C293.236 -29.1887 293.39 -29.3703 293.39 -29.5943C293.39 -29.8184 293.236 -30 293.047 -30C292.857 -30 292.703 -29.8184 292.703 -29.5943Z" fill="url(#paint41_linear_50_2588)" fill-opacity="0.7"/>
<path d="M48.1971 8.11188C48.1971 8.33592 48.0434 8.51754 47.8537 8.51754C47.664 8.51754 47.5102 8.33592 47.5102 8.11188C47.5102 7.88784 47.664 7.70622 47.8537 7.70622C48.0434 7.70622 48.1971 7.88784 48.1971 8.11188Z" fill="url(#paint42_linear_50_2588)" fill-opacity="0.7"/>
<path d="M35.5492 -24.3127C35.5492 -24.0887 35.3955 -23.9071 35.2058 -23.9071C35.0161 -23.9071 34.8623 -24.0887 34.8623 -24.3127C34.8623 -24.5368 35.0161 -24.7184 35.2058 -24.7184C35.3955 -24.7184 35.5492 -24.5368 35.5492 -24.3127Z" fill="url(#paint43_linear_50_2588)" fill-opacity="0.7"/>
<path d="M22.7821 4.31581C22.7821 4.53985 22.6284 4.72147 22.4387 4.72147C22.249 4.72147 22.0952 4.53985 22.0952 4.31581C22.0952 4.09178 22.249 3.91016 22.4387 3.91016C22.6284 3.91016 22.7821 4.09178 22.7821 4.31581Z" fill="url(#paint44_linear_50_2588)" fill-opacity="0.7"/>
<path d="M98.3454 -3.54555C98.3454 -3.32152 98.1917 -3.1399 98.002 -3.1399C97.8123 -3.1399 97.6585 -3.32152 97.6585 -3.54555C97.6585 -3.76959 97.8123 -3.95121 98.002 -3.95121C98.1917 -3.95121 98.3454 -3.76959 98.3454 -3.54555Z" fill="url(#paint45_linear_50_2588)" fill-opacity="0.7"/>
<path d="M149.356 -17.9653C149.356 -17.7412 149.202 -17.5596 149.012 -17.5596C148.823 -17.5596 148.669 -17.7412 148.669 -17.9653C148.669 -18.1893 148.823 -18.3709 149.012 -18.3709C149.202 -18.3709 149.356 -18.1893 149.356 -17.9653Z" fill="url(#paint46_linear_50_2588)" fill-opacity="0.7"/>
<path d="M152.841 -22.0817C152.841 -21.8577 152.688 -21.6761 152.498 -21.6761C152.308 -21.6761 152.154 -21.8577 152.154 -22.0817C152.154 -22.3058 152.308 -22.4874 152.498 -22.4874C152.688 -22.4874 152.841 -22.3058 152.841 -22.0817Z" fill="url(#paint47_linear_50_2588)" fill-opacity="0.7"/>
<path d="M201.638 -22.0817C201.638 -21.8577 201.484 -21.6761 201.294 -21.6761C201.104 -21.6761 200.951 -21.8577 200.951 -22.0817C200.951 -22.3058 201.104 -22.4874 201.294 -22.4874C201.484 -22.4874 201.638 -22.3058 201.638 -22.0817Z" fill="url(#paint48_linear_50_2588)" fill-opacity="0.7"/>
<path d="M226.036 -26.1982C226.036 -25.9742 225.882 -25.7926 225.692 -25.7926C225.503 -25.7926 225.349 -25.9742 225.349 -26.1982C225.349 -26.4223 225.503 -26.6039 225.692 -26.6039C225.882 -26.6039 226.036 -26.4223 226.036 -26.1982Z" fill="url(#paint49_linear_50_2588)" fill-opacity="0.7"/>
<path d="M233.007 -22.0817C233.007 -21.8577 232.853 -21.6761 232.663 -21.6761C232.473 -21.6761 232.32 -21.8577 232.32 -22.0817C232.32 -22.3058 232.473 -22.4874 232.663 -22.4874C232.853 -22.4874 233.007 -22.3058 233.007 -22.0817Z" fill="url(#paint50_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-32.782 -23.1968C-32.782 -22.9728 -32.9358 -22.7912 -33.1255 -22.7912C-33.3151 -22.7912 -33.4689 -22.9728 -33.4689 -23.1968C-33.4689 -23.4209 -33.3151 -23.6025 -33.1255 -23.6025C-32.9358 -23.6025 -32.782 -23.4209 -32.782 -23.1968Z" fill="url(#paint51_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-37.3131 9.32345C-37.3131 9.54749 -37.4668 9.7291 -37.6565 9.7291C-37.8462 9.7291 -38 9.54749 -38 9.32345C-38 9.09941 -37.8462 8.9178 -37.6565 8.9178C-37.4668 8.9178 -37.3131 9.09941 -37.3131 9.32345Z" fill="url(#paint52_linear_50_2588)" fill-opacity="0.7"/>
<path d="M140.532 4.4873C140.532 4.71134 140.378 4.89295 140.189 4.89295C139.999 4.89295 139.845 4.71134 139.845 4.4873C139.845 4.26326 139.999 4.08165 140.189 4.08165C140.378 4.08165 140.532 4.26326 140.532 4.4873Z" fill="url(#paint53_linear_50_2588)" fill-opacity="0.7"/>
<path d="M164.93 8.60379C164.93 8.82783 164.776 9.00944 164.587 9.00944C164.397 9.00944 164.243 8.82783 164.243 8.60379C164.243 8.37975 164.397 8.19813 164.587 8.19813C164.776 8.19813 164.93 8.37975 164.93 8.60379Z" fill="url(#paint54_linear_50_2588)" fill-opacity="0.7"/>
<path d="M168.416 4.4873C168.416 4.71134 168.262 4.89295 168.072 4.89295C167.882 4.89295 167.729 4.71134 167.729 4.4873C167.729 4.26326 167.882 4.08164 168.072 4.08164C168.262 4.08164 168.416 4.26326 168.416 4.4873Z" fill="url(#paint55_linear_50_2588)" fill-opacity="0.7"/>
<path d="M217.212 4.4873C217.212 4.71134 217.058 4.89295 216.868 4.89295C216.679 4.89295 216.525 4.71134 216.525 4.4873C216.525 4.26326 216.679 4.08164 216.868 4.08164C217.058 4.08164 217.212 4.26326 217.212 4.4873Z" fill="url(#paint56_linear_50_2588)" fill-opacity="0.7"/>
<path d="M241.61 0.370808C241.61 0.594845 241.456 0.776466 241.266 0.776466C241.077 0.776466 240.923 0.594845 240.923 0.370808C240.923 0.146771 241.077 -0.0348468 241.266 -0.0348468C241.456 -0.0348468 241.61 0.146771 241.61 0.370808Z" fill="url(#paint57_linear_50_2588)" fill-opacity="0.7"/>
<path d="M248.581 4.4873C248.581 4.71134 248.427 4.89295 248.237 4.89295C248.048 4.89295 247.894 4.71134 247.894 4.4873C247.894 4.26326 248.048 4.08164 248.237 4.08164C248.427 4.08164 248.581 4.26326 248.581 4.4873Z" fill="url(#paint58_linear_50_2588)" fill-opacity="0.7"/>
<path d="M180.872 -17.9942C180.872 -17.7702 180.718 -17.5885 180.528 -17.5885C180.339 -17.5885 180.185 -17.7702 180.185 -17.9942C180.185 -18.2182 180.339 -18.3999 180.528 -18.3999C180.718 -18.3999 180.872 -18.2182 180.872 -17.9942Z" fill="url(#paint59_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-5.3877 -1.02525C-5.3877 -0.801211 -5.54148 -0.61959 -5.73117 -0.61959C-5.92087 -0.61959 -6.07465 -0.801211 -6.07465 -1.02525C-6.07465 -1.24929 -5.92087 -1.43091 -5.73117 -1.43091C-5.54148 -1.43091 -5.3877 -1.24929 -5.3877 -1.02525Z" fill="url(#paint60_linear_50_2588)" fill-opacity="0.7"/>
<path d="M0.286034 -14.0781C0.286034 -13.8541 0.132263 -13.6725 -0.0574296 -13.6725C-0.247123 -13.6725 -0.400899 -13.8541 -0.400899 -14.0781C-0.400899 -14.3022 -0.247123 -14.4838 -0.0574296 -14.4838C0.132263 -14.4838 0.286034 -14.3022 0.286034 -14.0781Z" fill="url(#paint61_linear_50_2588)" fill-opacity="0.7"/>
<path d="M42.5201 28.7964C42.5201 29.0205 42.3663 29.2021 42.1767 29.2021C41.987 29.2021 41.8332 29.0205 41.8332 28.7964C41.8332 28.5724 41.987 28.3908 42.1767 28.3908C42.3663 28.3908 42.5201 28.5724 42.5201 28.7964Z" fill="url(#paint62_linear_50_2588)" fill-opacity="0.7"/>
<path d="M60.6145 66.4812C60.6145 66.7053 60.4608 66.8869 60.2711 66.8869C60.0814 66.8869 59.9276 66.7053 59.9276 66.4812C59.9276 66.2572 60.0814 66.0756 60.2711 66.0756C60.4608 66.0756 60.6145 66.2572 60.6145 66.4812Z" fill="url(#paint63_linear_50_2588)" fill-opacity="0.7"/>
<path d="M68.3998 74.5943C68.3998 74.8184 68.246 75 68.0564 75C67.8667 75 67.7129 74.8184 67.7129 74.5943C67.7129 74.3703 67.8667 74.1887 68.0564 74.1887C68.246 74.1887 68.3998 74.3703 68.3998 74.5943Z" fill="url(#paint64_linear_50_2588)" fill-opacity="0.7"/>
<path d="M68.3998 58.2483C68.3998 58.4723 68.246 58.6539 68.0564 58.6539C67.8667 58.6539 67.7129 58.4723 67.7129 58.2483C67.7129 58.0242 67.8667 57.8426 68.0564 57.8426C68.246 57.8426 68.3998 58.0242 68.3998 58.2483Z" fill="url(#paint65_linear_50_2588)" fill-opacity="0.7"/>
<path d="M68.3998 58.2483C68.3998 58.4723 68.246 58.6539 68.0564 58.6539C67.8667 58.6539 67.7129 58.4723 67.7129 58.2483C67.7129 58.0242 67.8667 57.8426 68.0564 57.8426C68.246 57.8426 68.3998 58.0242 68.3998 58.2483Z" fill="url(#paint66_linear_50_2588)" fill-opacity="0.7"/>
<path d="M124.958 35.1439C124.958 35.3679 124.804 35.5495 124.614 35.5495C124.425 35.5495 124.271 35.3679 124.271 35.1439C124.271 34.9199 124.425 34.7382 124.614 34.7382C124.804 34.7382 124.958 34.9199 124.958 35.1439Z" fill="url(#paint67_linear_50_2588)" fill-opacity="0.7"/>
<path d="M78.9329 50.255C78.9329 50.4791 78.7791 50.6607 78.5894 50.6607C78.3997 50.6607 78.246 50.4791 78.246 50.255C78.246 50.031 78.3997 49.8494 78.5894 49.8494C78.7791 49.8494 78.9329 50.031 78.9329 50.255Z" fill="url(#paint68_linear_50_2588)" fill-opacity="0.7"/>
<path d="M83.5125 47.4308C83.5125 47.6548 83.3587 47.8364 83.169 47.8364C82.9793 47.8364 82.8256 47.6548 82.8256 47.4308C82.8256 47.2067 82.9793 47.0251 83.169 47.0251C83.3587 47.0251 83.5125 47.2067 83.5125 47.4308Z" fill="url(#paint69_linear_50_2588)" fill-opacity="0.7"/>
<path d="M97.2513 38.6262C97.2513 38.8503 97.0975 39.0319 96.9078 39.0319C96.7181 39.0319 96.5643 38.8503 96.5643 38.6262C96.5643 38.4022 96.7181 38.2206 96.9078 38.2206C97.0975 38.2206 97.2513 38.4022 97.2513 38.6262Z" fill="url(#paint70_linear_50_2588)" fill-opacity="0.7"/>
<path d="M101.831 41.3306C101.831 41.5547 101.677 41.7363 101.487 41.7363C101.298 41.7363 101.144 41.5547 101.144 41.3306C101.144 41.1066 101.298 40.925 101.487 40.925C101.677 40.925 101.831 41.1066 101.831 41.3306Z" fill="url(#paint71_linear_50_2588)" fill-opacity="0.7"/>
<path d="M108.7 33.2175C108.7 33.4415 108.546 33.6232 108.357 33.6232C108.167 33.6232 108.013 33.4415 108.013 33.2175C108.013 32.9935 108.167 32.8119 108.357 32.8119C108.546 32.8119 108.7 32.9935 108.7 33.2175Z" fill="url(#paint72_linear_50_2588)" fill-opacity="0.7"/>
<path d="M90.3819 74.5943C90.3819 74.8184 90.2281 75 90.0384 75C89.8487 75 89.6949 74.8184 89.6949 74.5943C89.6949 74.3703 89.8487 74.1887 90.0384 74.1887C90.2281 74.1887 90.3819 74.3703 90.3819 74.5943Z" fill="url(#paint73_linear_50_2588)" fill-opacity="0.7"/>
<path d="M17.1084 74.5943C17.1084 74.8184 16.9546 75 16.7649 75C16.5752 75 16.4214 74.8184 16.4214 74.5943C16.4214 74.3703 16.5752 74.1887 16.7649 74.1887C16.9546 74.1887 17.1084 74.3703 17.1084 74.5943Z" fill="url(#paint74_linear_50_2588)" fill-opacity="0.7"/>
<path d="M33.2385 66.0696C33.2385 66.2936 33.0847 66.4752 32.895 66.4752C32.7053 66.4752 32.5515 66.2936 32.5515 66.0696C32.5515 65.8456 32.7053 65.6639 32.895 65.6639C33.0847 65.6639 33.2385 65.8456 33.2385 66.0696Z" fill="url(#paint75_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-36.2674 29.9123C-36.2674 30.1364 -36.4212 30.318 -36.6109 30.318C-36.8006 30.318 -36.9544 30.1364 -36.9544 29.9123C-36.9544 29.6883 -36.8006 29.5067 -36.6109 29.5067C-36.4212 29.5067 -36.2674 29.6883 -36.2674 29.9123Z" fill="url(#paint76_linear_50_2588)" fill-opacity="0.7"/>
<path d="M388.284 44.8463C388.284 45.0703 388.438 45.2519 388.628 45.2519C388.818 45.2519 388.971 45.0703 388.971 44.8463C388.971 44.6223 388.818 44.4406 388.628 44.4406C388.438 44.4406 388.284 44.6223 388.284 44.8463Z" fill="url(#paint77_linear_50_2588)" fill-opacity="0.7"/>
<path d="M376.835 55.6638C376.835 55.8878 376.989 56.0694 377.179 56.0694C377.369 56.0694 377.522 55.8878 377.522 55.6638C377.522 55.4397 377.369 55.2581 377.179 55.2581C376.989 55.2581 376.835 55.4397 376.835 55.6638Z" fill="url(#paint78_linear_50_2588)" fill-opacity="0.7"/>
<path d="M360.807 39.4376C360.807 39.6616 360.961 39.8432 361.15 39.8432C361.34 39.8432 361.494 39.6616 361.494 39.4376C361.494 39.2135 361.34 39.0319 361.15 39.0319C360.961 39.0319 360.807 39.2135 360.807 39.4376Z" fill="url(#paint79_linear_50_2588)" fill-opacity="0.7"/>
<path d="M352.742 62.3647C352.742 62.5888 352.896 62.7704 353.085 62.7704C353.275 62.7704 353.429 62.5888 353.429 62.3647C353.429 62.1407 353.275 61.9591 353.085 61.9591C352.896 61.9591 352.742 62.1407 352.742 62.3647Z" fill="url(#paint80_linear_50_2588)" fill-opacity="0.7"/>
<path d="M344.957 70.4779C344.957 70.7019 345.11 70.8835 345.3 70.8835C345.49 70.8835 345.643 70.7019 345.643 70.4779C345.643 70.2538 345.49 70.0722 345.3 70.0722C345.11 70.0722 344.957 70.2538 344.957 70.4779Z" fill="url(#paint81_linear_50_2588)" fill-opacity="0.7"/>
<path d="M344.957 62.3647C344.957 62.5888 345.11 62.7704 345.3 62.7704C345.49 62.7704 345.643 62.5888 345.643 62.3647C345.643 62.1407 345.49 61.9591 345.3 61.9591C345.11 61.9591 344.957 62.1407 344.957 62.3647Z" fill="url(#paint82_linear_50_2588)" fill-opacity="0.7"/>
<path d="M344.957 62.3647C344.957 62.5888 345.11 62.7704 345.3 62.7704C345.49 62.7704 345.643 62.5888 345.643 62.3647C345.643 62.1407 345.49 61.9591 345.3 61.9591C345.11 61.9591 344.957 62.1407 344.957 62.3647Z" fill="url(#paint83_linear_50_2588)" fill-opacity="0.7"/>
<path d="M291.884 42.1419C291.884 42.366 292.038 42.5476 292.227 42.5476C292.417 42.5476 292.571 42.366 292.571 42.1419C292.571 41.9179 292.417 41.7363 292.227 41.7363C292.038 41.7363 291.884 41.9179 291.884 42.1419Z" fill="url(#paint84_linear_50_2588)" fill-opacity="0.7"/>
<path d="M280.634 33.7891C280.634 34.0131 280.787 34.1947 280.977 34.1947C281.167 34.1947 281.32 34.0131 281.32 33.7891C281.32 33.565 281.167 33.3834 280.977 33.3834C280.787 33.3834 280.634 33.565 280.634 33.7891Z" fill="url(#paint85_linear_50_2588)" fill-opacity="0.7"/>
<path d="M296.464 58.3681C296.464 58.5922 296.617 58.7738 296.807 58.7738C296.997 58.7738 297.151 58.5922 297.151 58.3681C297.151 58.1441 296.997 57.9625 296.807 57.9625C296.617 57.9625 296.464 58.1441 296.464 58.3681Z" fill="url(#paint86_linear_50_2588)" fill-opacity="0.7"/>
<path d="M337.909 50.255C337.909 50.4791 338.063 50.6607 338.252 50.6607C338.442 50.6607 338.596 50.4791 338.596 50.255C338.596 50.031 338.442 49.8494 338.252 49.8494C338.063 49.8494 337.909 50.031 337.909 50.255Z" fill="url(#paint87_linear_50_2588)" fill-opacity="0.7"/>
<path d="M333.329 55.6638C333.329 55.8878 333.483 56.0694 333.673 56.0694C333.862 56.0694 334.016 55.8878 334.016 55.6638C334.016 55.4397 333.862 55.2581 333.673 55.2581C333.483 55.2581 333.329 55.4397 333.329 55.6638Z" fill="url(#paint88_linear_50_2588)" fill-opacity="0.7"/>
<path d="M313.637 61.0725C313.637 61.2965 313.791 61.4782 313.981 61.4782C314.17 61.4782 314.324 61.2965 314.324 61.0725C314.324 60.8485 314.17 60.6668 313.981 60.6668C313.791 60.6668 313.637 60.8485 313.637 61.0725Z" fill="url(#paint89_linear_50_2588)" fill-opacity="0.7"/>
<path d="M336.535 34.2993C336.535 34.5233 336.689 34.7049 336.879 34.7049C337.068 34.7049 337.222 34.5233 337.222 34.2993C337.222 34.0752 337.068 33.8936 336.879 33.8936C336.689 33.8936 336.535 34.0752 336.535 34.2993Z" fill="url(#paint90_linear_50_2588)" fill-opacity="0.7"/>
<path d="M319.591 38.6262C319.591 38.8503 319.744 39.0319 319.934 39.0319C320.124 39.0319 320.277 38.8503 320.277 38.6262C320.277 38.4022 320.124 38.2206 319.934 38.2206C319.744 38.2206 319.591 38.4022 319.591 38.6262Z" fill="url(#paint91_linear_50_2588)" fill-opacity="0.7"/>
<path d="M315.011 41.3306C315.011 41.5547 315.165 41.7363 315.354 41.7363C315.544 41.7363 315.698 41.5547 315.698 41.3306C315.698 41.1066 315.544 40.925 315.354 40.925C315.165 40.925 315.011 41.1066 315.011 41.3306Z" fill="url(#paint92_linear_50_2588)" fill-opacity="0.7"/>
<path d="M315.011 35.9219C315.011 36.1459 315.165 36.3275 315.354 36.3275C315.544 36.3275 315.698 36.1459 315.698 35.9219C315.698 35.6978 315.544 35.5162 315.354 35.5162C315.165 35.5162 315.011 35.6978 315.011 35.9219Z" fill="url(#paint93_linear_50_2588)" fill-opacity="0.7"/>
<path d="M268.528 35.9219C268.528 36.1459 268.682 36.3275 268.872 36.3275C269.061 36.3275 269.215 36.1459 269.215 35.9219C269.215 35.6978 269.061 35.5162 268.872 35.5162C268.682 35.5162 268.528 35.6978 268.528 35.9219Z" fill="url(#paint94_linear_50_2588)" fill-opacity="0.7"/>
<path d="M326.46 74.5943C326.46 74.8184 326.614 75 326.803 75C326.993 75 327.147 74.8184 327.147 74.5943C327.147 74.3703 326.993 74.1887 326.803 74.1887C326.614 74.1887 326.46 74.3703 326.46 74.5943Z" fill="url(#paint95_linear_50_2588)" fill-opacity="0.7"/>
<path d="M399.733 74.5943C399.733 74.8184 399.887 75 400.077 75C400.267 75 400.42 74.8184 400.42 74.5943C400.42 74.3703 400.267 74.1887 400.077 74.1887C399.887 74.1887 399.733 74.3703 399.733 74.5943Z" fill="url(#paint96_linear_50_2588)" fill-opacity="0.7"/>
<path d="M390.574 66.4812C390.574 66.7053 390.728 66.8869 390.918 66.8869C391.107 66.8869 391.261 66.7053 391.261 66.4812C391.261 66.2572 391.107 66.0756 390.918 66.0756C390.728 66.0756 390.574 66.2572 390.574 66.4812Z" fill="url(#paint97_linear_50_2588)" fill-opacity="0.7"/>
<path d="M404.313 34.0288C404.313 34.2529 404.467 34.4345 404.657 34.4345C404.846 34.4345 405 34.2529 405 34.0288C405 33.8048 404.846 33.6232 404.657 33.6232C404.467 33.6232 404.313 33.8048 404.313 34.0288Z" fill="url(#paint98_linear_50_2588)" fill-opacity="0.7"/>
<path d="M401.794 39.4376C401.794 39.6616 401.948 39.8432 402.138 39.8432C402.327 39.8432 402.481 39.6616 402.481 39.4376C402.481 39.2135 402.327 39.0319 402.138 39.0319C401.948 39.0319 401.794 39.2135 401.794 39.4376Z" fill="url(#paint99_linear_50_2588)" fill-opacity="0.7"/>
<path d="M72.4165 29.7638C72.4165 29.9879 72.2627 30.1695 72.0731 30.1695C71.8834 30.1695 71.7296 29.9879 71.7296 29.7638C71.7296 29.5398 71.8834 29.3582 72.0731 29.3582C72.2627 29.3582 72.4165 29.5398 72.4165 29.7638Z" fill="url(#paint100_linear_50_2588)" fill-opacity="0.7"/>
<path d="M292.703 27.6313C292.703 27.8553 292.857 28.0369 293.047 28.0369C293.236 28.0369 293.39 27.8553 293.39 27.6313C293.39 27.4073 293.236 27.2256 293.047 27.2256C292.857 27.2256 292.703 27.4073 292.703 27.6313Z" fill="url(#paint101_linear_50_2588)" fill-opacity="0.7"/>
<path d="M48.1971 65.3375C48.1971 65.5616 48.0434 65.7432 47.8537 65.7432C47.664 65.7432 47.5102 65.5616 47.5102 65.3375C47.5102 65.1135 47.664 64.9319 47.8537 64.9319C48.0434 64.9319 48.1971 65.1135 48.1971 65.3375Z" fill="url(#paint102_linear_50_2588)" fill-opacity="0.7"/>
<path d="M35.5492 32.9129C35.5492 33.137 35.3955 33.3186 35.2058 33.3186C35.0161 33.3186 34.8623 33.137 34.8623 32.9129C34.8623 32.6889 35.0161 32.5073 35.2058 32.5073C35.3955 32.5073 35.5492 32.6889 35.5492 32.9129Z" fill="url(#paint103_linear_50_2588)" fill-opacity="0.7"/>
<path d="M22.7821 61.5414C22.7821 61.7655 22.6284 61.9471 22.4387 61.9471C22.249 61.9471 22.0952 61.7655 22.0952 61.5414C22.0952 61.3174 22.249 61.1358 22.4387 61.1358C22.6284 61.1358 22.7821 61.3174 22.7821 61.5414Z" fill="url(#paint104_linear_50_2588)" fill-opacity="0.7"/>
<path d="M98.3454 53.6801C98.3454 53.9041 98.1917 54.0857 98.002 54.0857C97.8123 54.0857 97.6585 53.9041 97.6585 53.6801C97.6585 53.456 97.8123 53.2744 98.002 53.2744C98.1917 53.2744 98.3454 53.456 98.3454 53.6801Z" fill="url(#paint105_linear_50_2588)" fill-opacity="0.7"/>
<path d="M149.356 39.2604C149.356 39.4844 149.202 39.666 149.012 39.666C148.823 39.666 148.669 39.4844 148.669 39.2604C148.669 39.0363 148.823 38.8547 149.012 38.8547C149.202 38.8547 149.356 39.0363 149.356 39.2604Z" fill="url(#paint106_linear_50_2588)" fill-opacity="0.7"/>
<path d="M152.841 35.1439C152.841 35.3679 152.688 35.5495 152.498 35.5495C152.308 35.5495 152.154 35.3679 152.154 35.1439C152.154 34.9199 152.308 34.7382 152.498 34.7382C152.688 34.7382 152.841 34.9199 152.841 35.1439Z" fill="url(#paint107_linear_50_2588)" fill-opacity="0.7"/>
<path d="M201.638 35.1439C201.638 35.3679 201.484 35.5495 201.294 35.5495C201.104 35.5495 200.951 35.3679 200.951 35.1439C200.951 34.9199 201.104 34.7382 201.294 34.7382C201.484 34.7382 201.638 34.9199 201.638 35.1439Z" fill="url(#paint108_linear_50_2588)" fill-opacity="0.7"/>
<path d="M226.036 31.0274C226.036 31.2514 225.882 31.4331 225.692 31.4331C225.503 31.4331 225.349 31.2514 225.349 31.0274C225.349 30.8034 225.503 30.6217 225.692 30.6217C225.882 30.6217 226.036 30.8034 226.036 31.0274Z" fill="url(#paint109_linear_50_2588)" fill-opacity="0.7"/>
<path d="M233.007 35.1439C233.007 35.3679 232.853 35.5495 232.663 35.5495C232.473 35.5495 232.32 35.3679 232.32 35.1439C232.32 34.9199 232.473 34.7382 232.663 34.7382C232.853 34.7382 233.007 34.9199 233.007 35.1439Z" fill="url(#paint110_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-32.782 34.0288C-32.782 34.2529 -32.9358 34.4345 -33.1255 34.4345C-33.3151 34.4345 -33.4689 34.2529 -33.4689 34.0288C-33.4689 33.8048 -33.3151 33.6232 -33.1255 33.6232C-32.9358 33.6232 -32.782 33.8048 -32.782 34.0288Z" fill="url(#paint111_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-37.3131 66.5491C-37.3131 66.7731 -37.4668 66.9547 -37.6565 66.9547C-37.8462 66.9547 -38 66.7731 -38 66.5491C-38 66.3251 -37.8462 66.1434 -37.6565 66.1434C-37.4668 66.1434 -37.3131 66.3251 -37.3131 66.5491Z" fill="url(#paint112_linear_50_2588)" fill-opacity="0.7"/>
<path d="M140.532 61.7129C140.532 61.937 140.378 62.1186 140.189 62.1186C139.999 62.1186 139.845 61.937 139.845 61.7129C139.845 61.4889 139.999 61.3073 140.189 61.3073C140.378 61.3073 140.532 61.4889 140.532 61.7129Z" fill="url(#paint113_linear_50_2588)" fill-opacity="0.7"/>
<path d="M164.93 65.8294C164.93 66.0535 164.776 66.2351 164.587 66.2351C164.397 66.2351 164.243 66.0535 164.243 65.8294C164.243 65.6054 164.397 65.4238 164.587 65.4238C164.776 65.4238 164.93 65.6054 164.93 65.8294Z" fill="url(#paint114_linear_50_2588)" fill-opacity="0.7"/>
<path d="M168.416 61.7129C168.416 61.937 168.262 62.1186 168.072 62.1186C167.882 62.1186 167.729 61.937 167.729 61.7129C167.729 61.4889 167.882 61.3073 168.072 61.3073C168.262 61.3073 168.416 61.4889 168.416 61.7129Z" fill="url(#paint115_linear_50_2588)" fill-opacity="0.7"/>
<path d="M217.212 61.7129C217.212 61.937 217.058 62.1186 216.868 62.1186C216.679 62.1186 216.525 61.937 216.525 61.7129C216.525 61.4889 216.679 61.3073 216.868 61.3073C217.058 61.3073 217.212 61.4889 217.212 61.7129Z" fill="url(#paint116_linear_50_2588)" fill-opacity="0.7"/>
<path d="M241.61 57.5964C241.61 57.8205 241.456 58.0021 241.266 58.0021C241.077 58.0021 240.923 57.8205 240.923 57.5964C240.923 57.3724 241.077 57.1908 241.266 57.1908C241.456 57.1908 241.61 57.3724 241.61 57.5964Z" fill="url(#paint117_linear_50_2588)" fill-opacity="0.7"/>
<path d="M248.581 61.7129C248.581 61.937 248.427 62.1186 248.237 62.1186C248.048 62.1186 247.894 61.937 247.894 61.7129C247.894 61.4889 248.048 61.3073 248.237 61.3073C248.427 61.3073 248.581 61.4889 248.581 61.7129Z" fill="url(#paint118_linear_50_2588)" fill-opacity="0.7"/>
<path d="M180.872 39.2314C180.872 39.4555 180.718 39.6371 180.528 39.6371C180.339 39.6371 180.185 39.4555 180.185 39.2314C180.185 39.0074 180.339 38.8258 180.528 38.8258C180.718 38.8258 180.872 39.0074 180.872 39.2314Z" fill="url(#paint119_linear_50_2588)" fill-opacity="0.7"/>
<path d="M-5.3877 56.2004C-5.3877 56.4244 -5.54148 56.606 -5.73117 56.606C-5.92087 56.606 -6.07465 56.4244 -6.07465 56.2004C-6.07465 55.9764 -5.92087 55.7947 -5.73117 55.7947C-5.54148 55.7947 -5.3877 55.9764 -5.3877 56.2004Z" fill="url(#paint120_linear_50_2588)" fill-opacity="0.7"/>
<path d="M0.286034 43.1475C0.286034 43.3715 0.132263 43.5532 -0.0574296 43.5532C-0.247123 43.5532 -0.400899 43.3715 -0.400899 43.1475C-0.400899 42.9235 -0.247123 42.7418 -0.0574296 42.7418C0.132263 42.7418 0.286034 42.9235 0.286034 43.1475Z" fill="url(#paint121_linear_50_2588)" fill-opacity="0.7"/>
<defs>
<filter id="filter0_f_50_2588" x="-114.767" y="43" width="579.973" height="455.658" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="30" result="effect1_foregroundBlur_50_2588"/>
</filter>
<linearGradient id="paint0_linear_50_2588" x1="175.22" y1="103" x2="175.22" y2="438.658" gradientUnits="userSpaceOnUse">
<stop stop-color="#F02E65"/>
<stop offset="0.653751" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="0.699927" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_50_2588" x1="174.295" y1="120.496" x2="174.295" y2="456.155" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6893"/>
<stop offset="0.0582362" stop-color="#F02E65"/>
<stop offset="0.485307" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="0.619552" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="0.918726" stop-color="#F02E65" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint11_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint12_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint13_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint14_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint15_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint16_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint17_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint18_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint19_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint20_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint21_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint22_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint23_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint24_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint25_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint26_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint27_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint28_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint29_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint30_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint31_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint32_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint33_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint34_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint35_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint36_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint37_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint38_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint39_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint40_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint41_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint42_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint43_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint44_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint45_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint46_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint47_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint48_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint49_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint50_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint51_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint52_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint53_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint54_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint55_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint56_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint57_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint58_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint59_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint60_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint61_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint62_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint63_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint64_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint65_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint66_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint67_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint68_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint69_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint70_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint71_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint72_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint73_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint74_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint75_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint76_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint77_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint78_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint79_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint80_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint81_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint82_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint83_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint84_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint85_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint86_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint87_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint88_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint89_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint90_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint91_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint92_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint93_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint94_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint95_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint96_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint97_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint98_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint99_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint100_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint101_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint102_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint103_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint104_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint105_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint106_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint107_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint108_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint109_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint110_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint111_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint112_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint113_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint114_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint115_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint116_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint117_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint118_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint119_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint120_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint121_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

src/lib/images/login/cloud-bg.svg
+632
View File
@@ -0,0 +1,632 @@
<svg width="722" height="821" viewBox="0 0 722 821" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_23_6705)">
<rect width="719" height="821" fill="#1B1B28"/>
<g filter="url(#filter0_f_23_6705)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M721 386.476C721.659 382.037 722 377.5 722 372.889C722 319.379 676.109 276 619.5 276C578.826 276 543.685 298.395 527.124 330.851C518.094 334.195 509.689 338.715 502.119 344.212C495.538 320.2 472.46 302.467 445 302.467C416.429 302.467 392.602 321.663 387.165 347.155C371.536 338.574 353.375 333.661 334 333.661C319.557 333.661 305.789 336.391 293.242 341.335C277.485 304.681 239.435 278.836 195 278.836C150.439 278.836 112.3 304.828 96.6246 341.647C84.626 334.779 70.5515 330.825 55.5 330.825C11.5934 330.825 -24 364.47 -24 405.973C-24 428 -13.9739 447.814 2 461.559V794H721V386.476Z" fill="url(#paint0_linear_23_6705)" fill-opacity="0.28"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M718 380.747C708.6 336.405 667.177 303 617.5 303C582.258 303 551.17 319.812 532.723 345.414C521.282 349.645 510.739 355.563 501.436 362.842C490.847 344.47 470.216 332 446.5 332C427.667 332 410.78 339.863 399.321 352.302C382.716 343.817 363.704 339 343.5 339C321.718 339 301.321 344.599 283.833 354.356C265.279 325.28 231.542 305.836 193 305.836C148.439 305.836 110.3 331.828 94.6246 368.647C82.626 361.779 68.5515 357.825 53.5 357.825C9.59336 357.825 -26 391.47 -26 432.973C-26 455 -15.9739 474.814 0 488.559V821H718V380.747Z" fill="url(#paint1_linear_23_6705)"/>
<path d="M130.686 17.4235C130.686 17.7692 130.437 18.0494 130.129 18.0494C129.821 18.0494 129.571 17.7692 129.571 17.4235C129.571 17.0779 129.821 16.7976 130.129 16.7976C130.437 16.7976 130.686 17.0779 130.686 17.4235Z" fill="url(#paint2_linear_23_6705)" fill-opacity="0.7"/>
<path d="M160.054 75.5658C160.054 75.9114 159.804 76.1916 159.496 76.1916C159.189 76.1916 158.939 75.9114 158.939 75.5658C158.939 75.2201 159.189 74.9399 159.496 74.9399C159.804 74.9399 160.054 75.2201 160.054 75.5658Z" fill="url(#paint3_linear_23_6705)" fill-opacity="0.7"/>
<path d="M172.69 88.0831C172.69 88.4288 172.44 88.709 172.132 88.709C171.824 88.709 171.575 88.4288 171.575 88.0831C171.575 87.7375 171.824 87.4573 172.132 87.4573C172.44 87.4573 172.69 87.7375 172.69 88.0831Z" fill="url(#paint4_linear_23_6705)" fill-opacity="0.7"/>
<path d="M172.69 62.8635C172.69 63.2091 172.44 63.4893 172.132 63.4893C171.824 63.4893 171.575 63.2091 171.575 62.8635C171.575 62.5178 171.824 62.2376 172.132 62.2376C172.44 62.2376 172.69 62.5178 172.69 62.8635Z" fill="url(#paint5_linear_23_6705)" fill-opacity="0.7"/>
<path d="M172.69 62.8635C172.69 63.2091 172.44 63.4893 172.132 63.4893C171.824 63.4893 171.575 63.2091 171.575 62.8635C171.575 62.5178 171.824 62.2376 172.132 62.2376C172.44 62.2376 172.69 62.5178 172.69 62.8635Z" fill="url(#paint6_linear_23_6705)" fill-opacity="0.7"/>
<path d="M264.485 27.2167C264.485 27.5624 264.235 27.8426 263.927 27.8426C263.619 27.8426 263.37 27.5624 263.37 27.2167C263.37 26.8711 263.619 26.5909 263.927 26.5909C264.235 26.5909 264.485 26.8711 264.485 27.2167Z" fill="url(#paint7_linear_23_6705)" fill-opacity="0.7"/>
<path d="M189.785 50.5311C189.785 50.8767 189.535 51.1569 189.228 51.1569C188.92 51.1569 188.67 50.8767 188.67 50.5311C188.67 50.1854 188.92 49.9052 189.228 49.9052C189.535 49.9052 189.785 50.1854 189.785 50.5311Z" fill="url(#paint8_linear_23_6705)" fill-opacity="0.7"/>
<path d="M197.218 46.1737C197.218 46.5193 196.968 46.7995 196.66 46.7995C196.352 46.7995 196.103 46.5193 196.103 46.1737C196.103 45.828 196.352 45.5478 196.66 45.5478C196.968 45.5478 197.218 45.828 197.218 46.1737Z" fill="url(#paint9_linear_23_6705)" fill-opacity="0.7"/>
<path d="M219.516 32.5895C219.516 32.9352 219.267 33.2154 218.959 33.2154C218.651 33.2154 218.401 32.9352 218.401 32.5895C218.401 32.2439 218.651 31.9636 218.959 31.9636C219.267 31.9636 219.516 32.2439 219.516 32.5895Z" fill="url(#paint10_linear_23_6705)" fill-opacity="0.7"/>
<path d="M226.949 36.762C226.949 37.1076 226.699 37.3878 226.392 37.3878C226.084 37.3878 225.834 37.1076 225.834 36.762C225.834 36.4163 226.084 36.1361 226.392 36.1361C226.699 36.1361 226.949 36.4163 226.949 36.762Z" fill="url(#paint11_linear_23_6705)" fill-opacity="0.7"/>
<path d="M238.098 24.2446C238.098 24.5903 237.849 24.8705 237.541 24.8705C237.233 24.8705 236.983 24.5903 236.983 24.2446C236.983 23.8989 237.233 23.6187 237.541 23.6187C237.849 23.6187 238.098 23.8989 238.098 24.2446Z" fill="url(#paint12_linear_23_6705)" fill-opacity="0.7"/>
<path d="M208.367 88.0831C208.367 88.4288 208.117 88.709 207.81 88.709C207.502 88.709 207.252 88.4288 207.252 88.0831C207.252 87.7375 207.502 87.4573 207.81 87.4573C208.117 87.4573 208.367 87.7375 208.367 88.0831Z" fill="url(#paint13_linear_23_6705)" fill-opacity="0.7"/>
<path d="M89.4423 88.0831C89.4423 88.4288 89.1927 88.709 88.8848 88.709C88.577 88.709 88.3274 88.4288 88.3274 88.0831C88.3274 87.7375 88.577 87.4573 88.8848 87.4573C89.1927 87.4573 89.4423 87.7375 89.4423 88.0831Z" fill="url(#paint14_linear_23_6705)" fill-opacity="0.7"/>
<path d="M115.622 74.9307C115.622 75.2763 115.372 75.5565 115.064 75.5565C114.756 75.5565 114.507 75.2763 114.507 74.9307C114.507 74.585 114.756 74.3048 115.064 74.3048C115.372 74.3048 115.622 74.585 115.622 74.9307Z" fill="url(#paint15_linear_23_6705)" fill-opacity="0.7"/>
<path d="M2.81201 19.1452C2.81201 19.4908 2.56242 19.7711 2.25455 19.7711C1.94667 19.7711 1.69709 19.4908 1.69709 19.1452C1.69709 18.7995 1.94667 18.5193 2.25455 18.5193C2.56242 18.5193 2.81201 18.7995 2.81201 19.1452Z" fill="url(#paint16_linear_23_6705)" fill-opacity="0.7"/>
<path d="M691.87 42.1862C691.87 42.5318 692.12 42.812 692.428 42.812C692.736 42.812 692.985 42.5318 692.985 42.1862C692.985 41.8405 692.736 41.5603 692.428 41.5603C692.12 41.5603 691.87 41.8405 691.87 42.1862Z" fill="url(#paint17_linear_23_6705)" fill-opacity="0.7"/>
<path d="M673.288 58.876C673.288 59.2216 673.538 59.5018 673.846 59.5018C674.154 59.5018 674.403 59.2216 674.403 58.876C674.403 58.5303 674.154 58.2501 673.846 58.2501C673.538 58.2501 673.288 58.5303 673.288 58.876Z" fill="url(#paint18_linear_23_6705)" fill-opacity="0.7"/>
<path d="M647.273 33.8412C647.273 34.1869 647.523 34.4671 647.831 34.4671C648.139 34.4671 648.388 34.1869 648.388 33.8412C648.388 33.4956 648.139 33.2154 647.831 33.2154C647.523 33.2154 647.273 33.4956 647.273 33.8412Z" fill="url(#paint19_linear_23_6705)" fill-opacity="0.7"/>
<path d="M634.184 69.2146C634.184 69.5603 634.433 69.8405 634.741 69.8405C635.049 69.8405 635.299 69.5603 635.299 69.2146C635.299 68.869 635.049 68.5888 634.741 68.5888C634.433 68.5888 634.184 68.869 634.184 69.2146Z" fill="url(#paint20_linear_23_6705)" fill-opacity="0.7"/>
<path d="M621.548 81.732C621.548 82.0776 621.798 82.3579 622.105 82.3579C622.413 82.3579 622.663 82.0776 622.663 81.732C622.663 81.3863 622.413 81.1061 622.105 81.1061C621.798 81.1061 621.548 81.3863 621.548 81.732Z" fill="url(#paint21_linear_23_6705)" fill-opacity="0.7"/>
<path d="M621.548 69.2146C621.548 69.5603 621.798 69.8405 622.105 69.8405C622.413 69.8405 622.663 69.5603 622.663 69.2146C622.663 68.869 622.413 68.5888 622.105 68.5888C621.798 68.5888 621.548 68.869 621.548 69.2146Z" fill="url(#paint22_linear_23_6705)" fill-opacity="0.7"/>
<path d="M621.548 69.2146C621.548 69.5603 621.798 69.8405 622.105 69.8405C622.413 69.8405 622.663 69.5603 622.663 69.2146C622.663 68.869 622.413 68.5888 622.105 68.5888C621.798 68.5888 621.548 68.869 621.548 69.2146Z" fill="url(#paint23_linear_23_6705)" fill-opacity="0.7"/>
<path d="M535.41 38.0137C535.41 38.3594 535.66 38.6396 535.967 38.6396C536.275 38.6396 536.525 38.3594 536.525 38.0137C536.525 37.668 536.275 37.3878 535.967 37.3878C535.66 37.3878 535.41 37.668 535.41 38.0137Z" fill="url(#paint24_linear_23_6705)" fill-opacity="0.7"/>
<path d="M517.15 25.1264C517.15 25.4721 517.4 25.7523 517.708 25.7523C518.016 25.7523 518.265 25.4721 518.265 25.1264C518.265 24.7808 518.016 24.5006 517.708 24.5006C517.4 24.5006 517.15 24.7808 517.15 25.1264Z" fill="url(#paint25_linear_23_6705)" fill-opacity="0.7"/>
<path d="M542.843 63.0484C542.843 63.3941 543.092 63.6743 543.4 63.6743C543.708 63.6743 543.958 63.3941 543.958 63.0484C543.958 62.7028 543.708 62.4226 543.4 62.4226C543.092 62.4226 542.843 62.7028 542.843 63.0484Z" fill="url(#paint26_linear_23_6705)" fill-opacity="0.7"/>
<path d="M610.11 50.5311C610.11 50.8767 610.359 51.1569 610.667 51.1569C610.975 51.1569 611.224 50.8767 611.224 50.5311C611.224 50.1854 610.975 49.9052 610.667 49.9052C610.359 49.9052 610.11 50.1854 610.11 50.5311Z" fill="url(#paint27_linear_23_6705)" fill-opacity="0.7"/>
<path d="M602.677 58.876C602.677 59.2216 602.926 59.5018 603.234 59.5018C603.542 59.5018 603.792 59.2216 603.792 58.876C603.792 58.5303 603.542 58.2501 603.234 58.2501C602.926 58.2501 602.677 58.5303 602.677 58.876Z" fill="url(#paint28_linear_23_6705)" fill-opacity="0.7"/>
<path d="M570.716 67.2209C570.716 67.5665 570.965 67.8467 571.273 67.8467C571.581 67.8467 571.831 67.5665 571.831 67.2209C571.831 66.8752 571.581 66.595 571.273 66.595C570.965 66.595 570.716 66.8752 570.716 67.2209Z" fill="url(#paint29_linear_23_6705)" fill-opacity="0.7"/>
<path d="M607.88 25.9136C607.88 26.2592 608.129 26.5395 608.437 26.5395C608.745 26.5395 608.995 26.2592 608.995 25.9136C608.995 25.5679 608.745 25.2877 608.437 25.2877C608.129 25.2877 607.88 25.5679 607.88 25.9136Z" fill="url(#paint30_linear_23_6705)" fill-opacity="0.7"/>
<path d="M580.378 32.5895C580.378 32.9352 580.628 33.2154 580.936 33.2154C581.244 33.2154 581.493 32.9352 581.493 32.5895C581.493 32.2439 581.244 31.9636 580.936 31.9636C580.628 31.9636 580.378 32.2439 580.378 32.5895Z" fill="url(#paint31_linear_23_6705)" fill-opacity="0.7"/>
<path d="M572.946 36.762C572.946 37.1076 573.195 37.3878 573.503 37.3878C573.811 37.3878 574.06 37.1076 574.06 36.762C574.06 36.4163 573.811 36.1361 573.503 36.1361C573.195 36.1361 572.946 36.4163 572.946 36.762Z" fill="url(#paint32_linear_23_6705)" fill-opacity="0.7"/>
<path d="M572.946 28.4171C572.946 28.7627 573.195 29.0429 573.503 29.0429C573.811 29.0429 574.06 28.7627 574.06 28.4171C574.06 28.0714 573.811 27.7912 573.503 27.7912C573.195 27.7912 572.946 28.0714 572.946 28.4171Z" fill="url(#paint33_linear_23_6705)" fill-opacity="0.7"/>
<path d="M497.503 28.4171C497.503 28.7627 497.752 29.0429 498.06 29.0429C498.368 29.0429 498.618 28.7627 498.618 28.4171C498.618 28.0714 498.368 27.7912 498.06 27.7912C497.752 27.7912 497.503 28.0714 497.503 28.4171Z" fill="url(#paint34_linear_23_6705)" fill-opacity="0.7"/>
<path d="M591.528 88.0831C591.528 88.4288 591.777 88.709 592.085 88.709C592.393 88.709 592.642 88.4288 592.642 88.0831C592.642 87.7375 592.393 87.4573 592.085 87.4573C591.777 87.4573 591.528 87.7375 591.528 88.0831Z" fill="url(#paint35_linear_23_6705)" fill-opacity="0.7"/>
<path d="M710.452 88.0831C710.452 88.4288 710.702 88.709 711.01 88.709C711.318 88.709 711.567 88.4288 711.567 88.0831C711.567 87.7375 711.318 87.4573 711.01 87.4573C710.702 87.4573 710.452 87.7375 710.452 88.0831Z" fill="url(#paint36_linear_23_6705)" fill-opacity="0.7"/>
<path d="M695.587 75.5658C695.587 75.9114 695.836 76.1916 696.144 76.1916C696.452 76.1916 696.702 75.9114 696.702 75.5658C696.702 75.2201 696.452 74.9399 696.144 74.9399C695.836 74.9399 695.587 75.2201 695.587 75.5658Z" fill="url(#paint37_linear_23_6705)" fill-opacity="0.7"/>
<path d="M717.885 25.4963C717.885 25.842 718.135 26.1222 718.443 26.1222C718.75 26.1222 719 25.842 719 25.4963C719 25.1507 718.75 24.8705 718.443 24.8705C718.135 24.8705 717.885 25.1507 717.885 25.4963Z" fill="url(#paint38_linear_23_6705)" fill-opacity="0.7"/>
<path d="M713.797 33.8412C713.797 34.1869 714.047 34.4671 714.355 34.4671C714.662 34.4671 714.912 34.1869 714.912 33.8412C714.912 33.4956 714.662 33.2154 714.355 33.2154C714.047 33.2154 713.797 33.4956 713.797 33.8412Z" fill="url(#paint39_linear_23_6705)" fill-opacity="0.7"/>
<path d="M179.209 18.916C179.209 19.2617 178.959 19.5419 178.651 19.5419C178.343 19.5419 178.094 19.2617 178.094 18.916C178.094 18.5704 178.343 18.2902 178.651 18.2902C178.959 18.2902 179.209 18.5704 179.209 18.916Z" fill="url(#paint40_linear_23_6705)" fill-opacity="0.7"/>
<path d="M536.739 15.6259C536.739 15.9715 536.989 16.2517 537.297 16.2517C537.605 16.2517 537.854 15.9715 537.854 15.6259C537.854 15.2802 537.605 15 537.297 15C536.989 15 536.739 15.2802 536.739 15.6259Z" fill="url(#paint41_linear_23_6705)" fill-opacity="0.7"/>
<path d="M139.9 73.8012C139.9 74.1468 139.651 74.4271 139.343 74.4271C139.035 74.4271 138.785 74.1468 138.785 73.8012C138.785 73.4555 139.035 73.1753 139.343 73.1753C139.651 73.1753 139.9 73.4555 139.9 73.8012Z" fill="url(#paint42_linear_23_6705)" fill-opacity="0.7"/>
<path d="M119.372 23.7747C119.372 24.1203 119.123 24.4005 118.815 24.4005C118.507 24.4005 118.257 24.1203 118.257 23.7747C118.257 23.429 118.507 23.1488 118.815 23.1488C119.123 23.1488 119.372 23.429 119.372 23.7747Z" fill="url(#paint43_linear_23_6705)" fill-opacity="0.7"/>
<path d="M98.6509 67.9444C98.6509 68.2901 98.4013 68.5703 98.0935 68.5703C97.7856 68.5703 97.536 68.2901 97.536 67.9444C97.536 67.5987 97.7856 67.3185 98.0935 67.3185C98.4013 67.3185 98.6509 67.5987 98.6509 67.9444Z" fill="url(#paint44_linear_23_6705)" fill-opacity="0.7"/>
<path d="M221.292 55.8154C221.292 56.1611 221.042 56.4413 220.735 56.4413C220.427 56.4413 220.177 56.1611 220.177 55.8154C220.177 55.4698 220.427 55.1896 220.735 55.1896C221.042 55.1896 221.292 55.4698 221.292 55.8154Z" fill="url(#paint45_linear_23_6705)" fill-opacity="0.7"/>
<path d="M304.083 33.5679C304.083 33.9135 303.834 34.1938 303.526 34.1938C303.218 34.1938 302.968 33.9135 302.968 33.5679C302.968 33.2222 303.218 32.942 303.526 32.942C303.834 32.942 304.083 33.2222 304.083 33.5679Z" fill="url(#paint46_linear_23_6705)" fill-opacity="0.7"/>
<path d="M309.74 27.2167C309.74 27.5624 309.491 27.8426 309.183 27.8426C308.875 27.8426 308.625 27.5624 308.625 27.2167C308.625 26.8711 308.875 26.5909 309.183 26.5909C309.491 26.5909 309.74 26.8711 309.74 27.2167Z" fill="url(#paint47_linear_23_6705)" fill-opacity="0.7"/>
<path d="M388.938 27.2167C388.938 27.5624 388.688 27.8426 388.38 27.8426C388.072 27.8426 387.823 27.5624 387.823 27.2167C387.823 26.8711 388.072 26.5909 388.38 26.5909C388.688 26.5909 388.938 26.8711 388.938 27.2167Z" fill="url(#paint48_linear_23_6705)" fill-opacity="0.7"/>
<path d="M428.536 20.8656C428.536 21.2112 428.287 21.4914 427.979 21.4914C427.671 21.4914 427.422 21.2112 427.422 20.8656C427.422 20.5199 427.671 20.2397 427.979 20.2397C428.287 20.2397 428.536 20.5199 428.536 20.8656Z" fill="url(#paint49_linear_23_6705)" fill-opacity="0.7"/>
<path d="M439.85 27.2167C439.85 27.5624 439.601 27.8426 439.293 27.8426C438.985 27.8426 438.736 27.5624 438.736 27.2167C438.736 26.8711 438.985 26.5909 439.293 26.5909C439.601 26.5909 439.85 26.8711 439.85 27.2167Z" fill="url(#paint50_linear_23_6705)" fill-opacity="0.7"/>
<path d="M8.46897 25.4963C8.46897 25.842 8.21939 26.1222 7.91151 26.1222C7.60364 26.1222 7.35405 25.842 7.35405 25.4963C7.35405 25.1507 7.60364 24.8705 7.91151 24.8705C8.21939 24.8705 8.46897 25.1507 8.46897 25.4963Z" fill="url(#paint51_linear_23_6705)" fill-opacity="0.7"/>
<path d="M1.11492 75.6705C1.11492 76.0161 0.865336 76.2963 0.557459 76.2963C0.249583 76.2963 0 76.0161 0 75.6705C0 75.3248 0.249583 75.0446 0.557459 75.0446C0.865336 75.0446 1.11492 75.3248 1.11492 75.6705Z" fill="url(#paint52_linear_23_6705)" fill-opacity="0.7"/>
<path d="M289.762 68.209C289.762 68.5546 289.512 68.8348 289.204 68.8348C288.897 68.8348 288.647 68.5546 288.647 68.209C288.647 67.8633 288.897 67.5831 289.204 67.5831C289.512 67.5831 289.762 67.8633 289.762 68.209Z" fill="url(#paint53_linear_23_6705)" fill-opacity="0.7"/>
<path d="M329.361 74.5601C329.361 74.9058 329.111 75.186 328.803 75.186C328.495 75.186 328.246 74.9058 328.246 74.5601C328.246 74.2145 328.495 73.9343 328.803 73.9343C329.111 73.9343 329.361 74.2145 329.361 74.5601Z" fill="url(#paint54_linear_23_6705)" fill-opacity="0.7"/>
<path d="M335.018 68.209C335.018 68.5546 334.768 68.8348 334.46 68.8348C334.152 68.8348 333.903 68.5546 333.903 68.209C333.903 67.8633 334.152 67.5831 334.46 67.5831C334.768 67.5831 335.018 67.8633 335.018 68.209Z" fill="url(#paint55_linear_23_6705)" fill-opacity="0.7"/>
<path d="M414.215 68.209C414.215 68.5546 413.966 68.8348 413.658 68.8348C413.35 68.8348 413.1 68.5546 413.1 68.209C413.1 67.8633 413.35 67.5831 413.658 67.5831C413.966 67.5831 414.215 67.8633 414.215 68.209Z" fill="url(#paint56_linear_23_6705)" fill-opacity="0.7"/>
<path d="M453.814 61.8578C453.814 62.2035 453.564 62.4837 453.256 62.4837C452.949 62.4837 452.699 62.2035 452.699 61.8578C452.699 61.5122 452.949 61.2319 453.256 61.2319C453.564 61.2319 453.814 61.5122 453.814 61.8578Z" fill="url(#paint57_linear_23_6705)" fill-opacity="0.7"/>
<path d="M465.128 68.209C465.128 68.5546 464.878 68.8348 464.57 68.8348C464.262 68.8348 464.013 68.5546 464.013 68.209C464.013 67.8633 464.262 67.5831 464.57 67.5831C464.878 67.5831 465.128 67.8633 465.128 68.209Z" fill="url(#paint58_linear_23_6705)" fill-opacity="0.7"/>
<path d="M355.235 33.5232C355.235 33.8689 354.985 34.1491 354.677 34.1491C354.369 34.1491 354.12 33.8689 354.12 33.5232C354.12 33.1776 354.369 32.8974 354.677 32.8974C354.985 32.8974 355.235 33.1776 355.235 33.5232Z" fill="url(#paint59_linear_23_6705)" fill-opacity="0.7"/>
<path d="M52.9306 59.7039C52.9306 60.0496 52.681 60.3298 52.3731 60.3298C52.0652 60.3298 51.8156 60.0496 51.8156 59.7039C51.8156 59.3582 52.0652 59.078 52.3731 59.078C52.681 59.078 52.9306 59.3582 52.9306 59.7039Z" fill="url(#paint60_linear_23_6705)" fill-opacity="0.7"/>
<path d="M62.1392 39.5652C62.1392 39.9108 61.8896 40.191 61.5817 40.191C61.2739 40.191 61.0243 39.9108 61.0243 39.5652C61.0243 39.2195 61.2739 38.9393 61.5817 38.9393C61.8896 38.9393 62.1392 39.2195 62.1392 39.5652Z" fill="url(#paint61_linear_23_6705)" fill-opacity="0.7"/>
<path d="M130.686 105.714C130.686 106.06 130.437 106.34 130.129 106.34C129.821 106.34 129.571 106.06 129.571 105.714C129.571 105.369 129.821 105.089 130.129 105.089C130.437 105.089 130.686 105.369 130.686 105.714Z" fill="url(#paint62_linear_23_6705)" fill-opacity="0.7"/>
<path d="M160.054 163.857C160.054 164.202 159.804 164.483 159.496 164.483C159.189 164.483 158.939 164.202 158.939 163.857C158.939 163.511 159.189 163.231 159.496 163.231C159.804 163.231 160.054 163.511 160.054 163.857Z" fill="url(#paint63_linear_23_6705)" fill-opacity="0.7"/>
<path d="M172.69 176.374C172.69 176.72 172.44 177 172.132 177C171.824 177 171.575 176.72 171.575 176.374C171.575 176.028 171.824 175.748 172.132 175.748C172.44 175.748 172.69 176.028 172.69 176.374Z" fill="url(#paint64_linear_23_6705)" fill-opacity="0.7"/>
<path d="M172.69 151.154C172.69 151.5 172.44 151.78 172.132 151.78C171.824 151.78 171.575 151.5 171.575 151.154C171.575 150.809 171.824 150.529 172.132 150.529C172.44 150.529 172.69 150.809 172.69 151.154Z" fill="url(#paint65_linear_23_6705)" fill-opacity="0.7"/>
<path d="M172.69 151.154C172.69 151.5 172.44 151.78 172.132 151.78C171.824 151.78 171.575 151.5 171.575 151.154C171.575 150.809 171.824 150.529 172.132 150.529C172.44 150.529 172.69 150.809 172.69 151.154Z" fill="url(#paint66_linear_23_6705)" fill-opacity="0.7"/>
<path d="M264.485 115.508C264.485 115.853 264.235 116.134 263.927 116.134C263.619 116.134 263.37 115.853 263.37 115.508C263.37 115.162 263.619 114.882 263.927 114.882C264.235 114.882 264.485 115.162 264.485 115.508Z" fill="url(#paint67_linear_23_6705)" fill-opacity="0.7"/>
<path d="M189.785 138.822C189.785 139.168 189.535 139.448 189.228 139.448C188.92 139.448 188.67 139.168 188.67 138.822C188.67 138.476 188.92 138.196 189.228 138.196C189.535 138.196 189.785 138.476 189.785 138.822Z" fill="url(#paint68_linear_23_6705)" fill-opacity="0.7"/>
<path d="M197.218 134.465C197.218 134.81 196.968 135.091 196.66 135.091C196.352 135.091 196.103 134.81 196.103 134.465C196.103 134.119 196.352 133.839 196.66 133.839C196.968 133.839 197.218 134.119 197.218 134.465Z" fill="url(#paint69_linear_23_6705)" fill-opacity="0.7"/>
<path d="M219.516 120.88C219.516 121.226 219.267 121.506 218.959 121.506C218.651 121.506 218.401 121.226 218.401 120.88C218.401 120.535 218.651 120.255 218.959 120.255C219.267 120.255 219.516 120.535 219.516 120.88Z" fill="url(#paint70_linear_23_6705)" fill-opacity="0.7"/>
<path d="M226.949 125.053C226.949 125.399 226.699 125.679 226.392 125.679C226.084 125.679 225.834 125.399 225.834 125.053C225.834 124.707 226.084 124.427 226.392 124.427C226.699 124.427 226.949 124.707 226.949 125.053Z" fill="url(#paint71_linear_23_6705)" fill-opacity="0.7"/>
<path d="M238.098 112.536C238.098 112.881 237.849 113.161 237.541 113.161C237.233 113.161 236.983 112.881 236.983 112.536C236.983 112.19 237.233 111.91 237.541 111.91C237.849 111.91 238.098 112.19 238.098 112.536Z" fill="url(#paint72_linear_23_6705)" fill-opacity="0.7"/>
<path d="M208.367 176.374C208.367 176.72 208.117 177 207.81 177C207.502 177 207.252 176.72 207.252 176.374C207.252 176.028 207.502 175.748 207.81 175.748C208.117 175.748 208.367 176.028 208.367 176.374Z" fill="url(#paint73_linear_23_6705)" fill-opacity="0.7"/>
<path d="M89.4423 176.374C89.4423 176.72 89.1927 177 88.8848 177C88.577 177 88.3274 176.72 88.3274 176.374C88.3274 176.028 88.577 175.748 88.8848 175.748C89.1927 175.748 89.4423 176.028 89.4423 176.374Z" fill="url(#paint74_linear_23_6705)" fill-opacity="0.7"/>
<path d="M115.622 163.222C115.622 163.567 115.372 163.848 115.064 163.848C114.756 163.848 114.507 163.567 114.507 163.222C114.507 162.876 114.756 162.596 115.064 162.596C115.372 162.596 115.622 162.876 115.622 163.222Z" fill="url(#paint75_linear_23_6705)" fill-opacity="0.7"/>
<path d="M2.81201 107.436C2.81201 107.782 2.56242 108.062 2.25455 108.062C1.94667 108.062 1.69709 107.782 1.69709 107.436C1.69709 107.091 1.94667 106.81 2.25455 106.81C2.56242 106.81 2.81201 107.091 2.81201 107.436Z" fill="url(#paint76_linear_23_6705)" fill-opacity="0.7"/>
<path d="M691.87 130.477C691.87 130.823 692.12 131.103 692.428 131.103C692.736 131.103 692.985 130.823 692.985 130.477C692.985 130.131 692.736 129.851 692.428 129.851C692.12 129.851 691.87 130.131 691.87 130.477Z" fill="url(#paint77_linear_23_6705)" fill-opacity="0.7"/>
<path d="M673.288 147.167C673.288 147.513 673.538 147.793 673.846 147.793C674.154 147.793 674.403 147.513 674.403 147.167C674.403 146.821 674.154 146.541 673.846 146.541C673.538 146.541 673.288 146.821 673.288 147.167Z" fill="url(#paint78_linear_23_6705)" fill-opacity="0.7"/>
<path d="M647.273 122.132C647.273 122.478 647.523 122.758 647.831 122.758C648.139 122.758 648.388 122.478 648.388 122.132C648.388 121.787 648.139 121.506 647.831 121.506C647.523 121.506 647.273 121.787 647.273 122.132Z" fill="url(#paint79_linear_23_6705)" fill-opacity="0.7"/>
<path d="M634.184 157.506C634.184 157.851 634.433 158.131 634.741 158.131C635.049 158.131 635.299 157.851 635.299 157.506C635.299 157.16 635.049 156.88 634.741 156.88C634.433 156.88 634.184 157.16 634.184 157.506Z" fill="url(#paint80_linear_23_6705)" fill-opacity="0.7"/>
<path d="M621.548 170.023C621.548 170.369 621.798 170.649 622.105 170.649C622.413 170.649 622.663 170.369 622.663 170.023C622.663 169.677 622.413 169.397 622.105 169.397C621.798 169.397 621.548 169.677 621.548 170.023Z" fill="url(#paint81_linear_23_6705)" fill-opacity="0.7"/>
<path d="M621.548 157.506C621.548 157.851 621.798 158.131 622.105 158.131C622.413 158.131 622.663 157.851 622.663 157.506C622.663 157.16 622.413 156.88 622.105 156.88C621.798 156.88 621.548 157.16 621.548 157.506Z" fill="url(#paint82_linear_23_6705)" fill-opacity="0.7"/>
<path d="M621.548 157.506C621.548 157.851 621.798 158.131 622.105 158.131C622.413 158.131 622.663 157.851 622.663 157.506C622.663 157.16 622.413 156.88 622.105 156.88C621.798 156.88 621.548 157.16 621.548 157.506Z" fill="url(#paint83_linear_23_6705)" fill-opacity="0.7"/>
<path d="M535.41 126.305C535.41 126.65 535.66 126.931 535.967 126.931C536.275 126.931 536.525 126.65 536.525 126.305C536.525 125.959 536.275 125.679 535.967 125.679C535.66 125.679 535.41 125.959 535.41 126.305Z" fill="url(#paint84_linear_23_6705)" fill-opacity="0.7"/>
<path d="M517.15 113.417C517.15 113.763 517.4 114.043 517.708 114.043C518.016 114.043 518.265 113.763 518.265 113.417C518.265 113.072 518.016 112.792 517.708 112.792C517.4 112.792 517.15 113.072 517.15 113.417Z" fill="url(#paint85_linear_23_6705)" fill-opacity="0.7"/>
<path d="M542.843 151.339C542.843 151.685 543.092 151.965 543.4 151.965C543.708 151.965 543.958 151.685 543.958 151.339C543.958 150.994 543.708 150.714 543.4 150.714C543.092 150.714 542.843 150.994 542.843 151.339Z" fill="url(#paint86_linear_23_6705)" fill-opacity="0.7"/>
<path d="M610.11 138.822C610.11 139.168 610.359 139.448 610.667 139.448C610.975 139.448 611.224 139.168 611.224 138.822C611.224 138.476 610.975 138.196 610.667 138.196C610.359 138.196 610.11 138.476 610.11 138.822Z" fill="url(#paint87_linear_23_6705)" fill-opacity="0.7"/>
<path d="M602.677 147.167C602.677 147.513 602.926 147.793 603.234 147.793C603.542 147.793 603.792 147.513 603.792 147.167C603.792 146.821 603.542 146.541 603.234 146.541C602.926 146.541 602.677 146.821 602.677 147.167Z" fill="url(#paint88_linear_23_6705)" fill-opacity="0.7"/>
<path d="M570.716 155.512C570.716 155.858 570.965 156.138 571.273 156.138C571.581 156.138 571.831 155.858 571.831 155.512C571.831 155.166 571.581 154.886 571.273 154.886C570.965 154.886 570.716 155.166 570.716 155.512Z" fill="url(#paint89_linear_23_6705)" fill-opacity="0.7"/>
<path d="M607.88 114.205C607.88 114.55 608.129 114.83 608.437 114.83C608.745 114.83 608.995 114.55 608.995 114.205C608.995 113.859 608.745 113.579 608.437 113.579C608.129 113.579 607.88 113.859 607.88 114.205Z" fill="url(#paint90_linear_23_6705)" fill-opacity="0.7"/>
<path d="M580.378 120.88C580.378 121.226 580.628 121.506 580.936 121.506C581.244 121.506 581.493 121.226 581.493 120.88C581.493 120.535 581.244 120.255 580.936 120.255C580.628 120.255 580.378 120.535 580.378 120.88Z" fill="url(#paint91_linear_23_6705)" fill-opacity="0.7"/>
<path d="M572.946 125.053C572.946 125.399 573.195 125.679 573.503 125.679C573.811 125.679 574.06 125.399 574.06 125.053C574.06 124.707 573.811 124.427 573.503 124.427C573.195 124.427 572.946 124.707 572.946 125.053Z" fill="url(#paint92_linear_23_6705)" fill-opacity="0.7"/>
<path d="M572.946 116.708C572.946 117.054 573.195 117.334 573.503 117.334C573.811 117.334 574.06 117.054 574.06 116.708C574.06 116.362 573.811 116.082 573.503 116.082C573.195 116.082 572.946 116.362 572.946 116.708Z" fill="url(#paint93_linear_23_6705)" fill-opacity="0.7"/>
<path d="M497.503 116.708C497.503 117.054 497.752 117.334 498.06 117.334C498.368 117.334 498.618 117.054 498.618 116.708C498.618 116.362 498.368 116.082 498.06 116.082C497.752 116.082 497.503 116.362 497.503 116.708Z" fill="url(#paint94_linear_23_6705)" fill-opacity="0.7"/>
<path d="M591.528 176.374C591.528 176.72 591.777 177 592.085 177C592.393 177 592.642 176.72 592.642 176.374C592.642 176.028 592.393 175.748 592.085 175.748C591.777 175.748 591.528 176.028 591.528 176.374Z" fill="url(#paint95_linear_23_6705)" fill-opacity="0.7"/>
<path d="M710.452 176.374C710.452 176.72 710.702 177 711.01 177C711.318 177 711.567 176.72 711.567 176.374C711.567 176.028 711.318 175.748 711.01 175.748C710.702 175.748 710.452 176.028 710.452 176.374Z" fill="url(#paint96_linear_23_6705)" fill-opacity="0.7"/>
<path d="M695.587 163.857C695.587 164.202 695.836 164.483 696.144 164.483C696.452 164.483 696.702 164.202 696.702 163.857C696.702 163.511 696.452 163.231 696.144 163.231C695.836 163.231 695.587 163.511 695.587 163.857Z" fill="url(#paint97_linear_23_6705)" fill-opacity="0.7"/>
<path d="M717.885 113.787C717.885 114.133 718.135 114.413 718.443 114.413C718.75 114.413 719 114.133 719 113.787C719 113.442 718.75 113.161 718.443 113.161C718.135 113.161 717.885 113.442 717.885 113.787Z" fill="url(#paint98_linear_23_6705)" fill-opacity="0.7"/>
<path d="M713.797 122.132C713.797 122.478 714.047 122.758 714.355 122.758C714.662 122.758 714.912 122.478 714.912 122.132C714.912 121.787 714.662 121.506 714.355 121.506C714.047 121.506 713.797 121.787 713.797 122.132Z" fill="url(#paint99_linear_23_6705)" fill-opacity="0.7"/>
<path d="M179.209 107.207C179.209 107.553 178.959 107.833 178.651 107.833C178.343 107.833 178.094 107.553 178.094 107.207C178.094 106.861 178.343 106.581 178.651 106.581C178.959 106.581 179.209 106.861 179.209 107.207Z" fill="url(#paint100_linear_23_6705)" fill-opacity="0.7"/>
<path d="M536.739 103.917C536.739 104.263 536.989 104.543 537.297 104.543C537.605 104.543 537.854 104.263 537.854 103.917C537.854 103.571 537.605 103.291 537.297 103.291C536.989 103.291 536.739 103.571 536.739 103.917Z" fill="url(#paint101_linear_23_6705)" fill-opacity="0.7"/>
<path d="M139.9 162.092C139.9 162.438 139.651 162.718 139.343 162.718C139.035 162.718 138.785 162.438 138.785 162.092C138.785 161.747 139.035 161.466 139.343 161.466C139.651 161.466 139.9 161.747 139.9 162.092Z" fill="url(#paint102_linear_23_6705)" fill-opacity="0.7"/>
<path d="M119.372 112.066C119.372 112.411 119.123 112.692 118.815 112.692C118.507 112.692 118.257 112.411 118.257 112.066C118.257 111.72 118.507 111.44 118.815 111.44C119.123 111.44 119.372 111.72 119.372 112.066Z" fill="url(#paint103_linear_23_6705)" fill-opacity="0.7"/>
<path d="M98.6509 156.235C98.6509 156.581 98.4013 156.861 98.0935 156.861C97.7856 156.861 97.536 156.581 97.536 156.235C97.536 155.89 97.7856 155.61 98.0935 155.61C98.4013 155.61 98.6509 155.89 98.6509 156.235Z" fill="url(#paint104_linear_23_6705)" fill-opacity="0.7"/>
<path d="M221.292 144.106C221.292 144.452 221.042 144.732 220.735 144.732C220.427 144.732 220.177 144.452 220.177 144.106C220.177 143.761 220.427 143.481 220.735 143.481C221.042 143.481 221.292 143.761 221.292 144.106Z" fill="url(#paint105_linear_23_6705)" fill-opacity="0.7"/>
<path d="M304.083 121.859C304.083 122.205 303.834 122.485 303.526 122.485C303.218 122.485 302.968 122.205 302.968 121.859C302.968 121.513 303.218 121.233 303.526 121.233C303.834 121.233 304.083 121.513 304.083 121.859Z" fill="url(#paint106_linear_23_6705)" fill-opacity="0.7"/>
<path d="M309.74 115.508C309.74 115.853 309.491 116.134 309.183 116.134C308.875 116.134 308.625 115.853 308.625 115.508C308.625 115.162 308.875 114.882 309.183 114.882C309.491 114.882 309.74 115.162 309.74 115.508Z" fill="url(#paint107_linear_23_6705)" fill-opacity="0.7"/>
<path d="M388.938 115.508C388.938 115.853 388.688 116.134 388.38 116.134C388.072 116.134 387.823 115.853 387.823 115.508C387.823 115.162 388.072 114.882 388.38 114.882C388.688 114.882 388.938 115.162 388.938 115.508Z" fill="url(#paint108_linear_23_6705)" fill-opacity="0.7"/>
<path d="M428.536 109.157C428.536 109.502 428.287 109.782 427.979 109.782C427.671 109.782 427.422 109.502 427.422 109.157C427.422 108.811 427.671 108.531 427.979 108.531C428.287 108.531 428.536 108.811 428.536 109.157Z" fill="url(#paint109_linear_23_6705)" fill-opacity="0.7"/>
<path d="M439.85 115.508C439.85 115.853 439.601 116.134 439.293 116.134C438.985 116.134 438.736 115.853 438.736 115.508C438.736 115.162 438.985 114.882 439.293 114.882C439.601 114.882 439.85 115.162 439.85 115.508Z" fill="url(#paint110_linear_23_6705)" fill-opacity="0.7"/>
<path d="M8.46897 113.787C8.46897 114.133 8.21939 114.413 7.91151 114.413C7.60364 114.413 7.35405 114.133 7.35405 113.787C7.35405 113.442 7.60364 113.161 7.91151 113.161C8.21939 113.161 8.46897 113.442 8.46897 113.787Z" fill="url(#paint111_linear_23_6705)" fill-opacity="0.7"/>
<path d="M1.11492 163.961C1.11492 164.307 0.865336 164.587 0.557459 164.587C0.249583 164.587 0 164.307 0 163.961C0 163.616 0.249583 163.336 0.557459 163.336C0.865336 163.336 1.11492 163.616 1.11492 163.961Z" fill="url(#paint112_linear_23_6705)" fill-opacity="0.7"/>
<path d="M289.762 156.5C289.762 156.846 289.512 157.126 289.204 157.126C288.897 157.126 288.647 156.846 288.647 156.5C288.647 156.154 288.897 155.874 289.204 155.874C289.512 155.874 289.762 156.154 289.762 156.5Z" fill="url(#paint113_linear_23_6705)" fill-opacity="0.7"/>
<path d="M329.361 162.851C329.361 163.197 329.111 163.477 328.803 163.477C328.495 163.477 328.246 163.197 328.246 162.851C328.246 162.505 328.495 162.225 328.803 162.225C329.111 162.225 329.361 162.505 329.361 162.851Z" fill="url(#paint114_linear_23_6705)" fill-opacity="0.7"/>
<path d="M335.018 156.5C335.018 156.846 334.768 157.126 334.46 157.126C334.152 157.126 333.903 156.846 333.903 156.5C333.903 156.154 334.152 155.874 334.46 155.874C334.768 155.874 335.018 156.154 335.018 156.5Z" fill="url(#paint115_linear_23_6705)" fill-opacity="0.7"/>
<path d="M414.215 156.5C414.215 156.846 413.966 157.126 413.658 157.126C413.35 157.126 413.1 156.846 413.1 156.5C413.1 156.154 413.35 155.874 413.658 155.874C413.966 155.874 414.215 156.154 414.215 156.5Z" fill="url(#paint116_linear_23_6705)" fill-opacity="0.7"/>
<path d="M453.814 150.149C453.814 150.494 453.564 150.775 453.256 150.775C452.949 150.775 452.699 150.494 452.699 150.149C452.699 149.803 452.949 149.523 453.256 149.523C453.564 149.523 453.814 149.803 453.814 150.149Z" fill="url(#paint117_linear_23_6705)" fill-opacity="0.7"/>
<path d="M465.128 156.5C465.128 156.846 464.878 157.126 464.57 157.126C464.262 157.126 464.013 156.846 464.013 156.5C464.013 156.154 464.262 155.874 464.57 155.874C464.878 155.874 465.128 156.154 465.128 156.5Z" fill="url(#paint118_linear_23_6705)" fill-opacity="0.7"/>
<path d="M355.235 121.814C355.235 122.16 354.985 122.44 354.677 122.44C354.369 122.44 354.12 122.16 354.12 121.814C354.12 121.469 354.369 121.188 354.677 121.188C354.985 121.188 355.235 121.469 355.235 121.814Z" fill="url(#paint119_linear_23_6705)" fill-opacity="0.7"/>
<path d="M52.9306 147.995C52.9306 148.341 52.681 148.621 52.3731 148.621C52.0652 148.621 51.8156 148.341 51.8156 147.995C51.8156 147.649 52.0652 147.369 52.3731 147.369C52.681 147.369 52.9306 147.649 52.9306 147.995Z" fill="url(#paint120_linear_23_6705)" fill-opacity="0.7"/>
<path d="M62.1392 127.856C62.1392 128.202 61.8896 128.482 61.5817 128.482C61.2739 128.482 61.0243 128.202 61.0243 127.856C61.0243 127.51 61.2739 127.23 61.5817 127.23C61.8896 127.23 62.1392 127.51 62.1392 127.856Z" fill="url(#paint121_linear_23_6705)" fill-opacity="0.7"/>
</g>
<defs>
<filter id="filter0_f_23_6705" x="-84" y="216" width="866" height="638" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="30" result="effect1_foregroundBlur_23_6705"/>
</filter>
<linearGradient id="paint0_linear_23_6705" x1="349" y1="276" x2="349" y2="794" gradientUnits="userSpaceOnUse">
<stop stop-color="#F02E65"/>
<stop offset="0.653751" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="0.699927" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_23_6705" x1="347" y1="303" x2="347" y2="821" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6893"/>
<stop offset="0.0582362" stop-color="#F02E65"/>
<stop offset="0.653751" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="0.699927" stop-color="#F02E65" stop-opacity="0.2"/>
<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint11_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint12_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint13_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint14_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint15_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint16_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint17_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint18_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint19_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint20_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint21_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint22_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint23_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint24_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint25_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint26_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint27_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint28_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint29_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint30_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint31_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint32_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint33_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint34_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint35_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint36_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint37_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint38_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint39_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint40_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint41_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint42_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint43_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint44_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint45_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint46_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint47_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint48_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint49_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint50_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint51_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint52_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint53_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint54_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint55_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint56_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint57_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint58_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint59_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint60_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint61_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint62_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint63_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint64_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint65_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint66_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint67_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint68_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint69_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint70_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint71_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint72_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint73_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint74_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint75_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint76_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint77_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint78_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint79_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint80_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint81_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint82_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint83_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint84_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint85_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint86_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint87_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint88_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint89_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint90_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint91_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint92_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint93_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint94_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint95_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint96_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint97_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint98_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint99_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint100_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint101_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint102_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint103_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint104_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint105_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint106_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint107_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint108_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint109_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint110_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint111_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint112_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint113_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint114_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint115_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint116_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint117_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint118_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint119_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint120_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint121_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_23_6705">
<rect width="722" height="821" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

src/lib/layout/container.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
export let overlapCover = false;
export let size: 'small' | 'medium' | 'large' | 'xl' = null;
export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
$: style = size
? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
src/lib/layout/header.svelte
+101 -4
View File
@@ -3,10 +3,12 @@
import { base } from '$app/paths';
import { page } from '$app/stores';
import { Submit, trackEvent } from '$lib/actions/analytics';
import { tooltip } from '$lib/actions/tooltip';
import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
import { AvatarInitials, DropList, DropListItem, DropListLink } from '$lib/components';
import { Feedback } from '$lib/components/feedback';
import Button from '$lib/elements/forms/button.svelte';
import { isMac } from '$lib/helpers/platform';
import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
import DarkMode from '$lib/images/mode/dark-mode.svg';
import LightMode from '$lib/images/mode/light-mode.svg';
@@ -16,6 +18,7 @@
import { newOrgModal, organization, organizationList } from '$lib/stores/organization';
import { sdk } from '$lib/stores/sdk';
import { user } from '$lib/stores/user';
import { isCloud } from '$lib/system';
import { slide } from 'svelte/transition';
let showDropdown = false;
@@ -47,6 +50,17 @@
$: if (showDropdown) {
trackEvent('click_menu_dropdown');
}
const slideFade: typeof slide = (node, options) => {
const slideTrans = slide(node, options);
return {
...slideTrans,
css: (t, u) => `
${slideTrans.css(t, u)};
opacity: ${t};
`
};
};
</script>
<svelte:window on:click={onBlur} />
@@ -83,7 +97,18 @@
class="button is-small is-text">
<span class="text">Support</span>
</a>
<Button text class="is-small" on:click={toggleCommandCenter}>
<Button
actions={[
(node) => {
return tooltip(node, {
content: isMac() ? '⌘ + K' : 'Ctrl + K',
placement: 'bottom'
});
}
]}
text
class="is-small"
on:click={toggleCommandCenter}>
<i class="icon-search" />
</Button>
</nav>
@@ -107,7 +132,7 @@
{#if showDropdown}
<div
class="drop is-no-arrow is-block-end is-inline-end"
transition:slide={{ duration: 100 }}>
transition:slideFade={{ duration: 150 }}>
{#if $organizationList?.total}
<section class="drop-section u-overflow-y-auto u-max-height-200">
<ul class="drop-list">
@@ -134,7 +159,7 @@
<DropListLink
href={`${base}/console/account`}
on:click={() => (showDropdown = false)}>
Your Account
Your account
</DropListLink>
<DropListItem
icon="logout-right"
@@ -142,7 +167,7 @@
showDropdown = false;
logout();
}}>
Sign Out
Sign out
</DropListItem>
</ul>
</section>
@@ -195,9 +220,81 @@
</li>
</ul>
</section>
{#if isCloud}
<section class="drop-section">
<a
class="claim"
title="Gradient Border"
href="/card"
data-sveltekit-reload>
Claim your Cloud card
</a>
</section>
{/if}
</div>
{/if}
</div>
{/if}
</nav>
</div>
<style lang="scss">
.claim {
display: block;
background-image: linear-gradient(90deg, #fd7f34, #bd155b);
padding: 0.6875rem 0.625rem;
position: relative;
z-index: 0;
border-radius: 0.5rem;
text-align: center;
width: 100%;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 150%;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ffffff;
transition: 150ms ease;
&::before {
content: '';
position: absolute;
left: -1px;
top: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
background: linear-gradient(
113.48deg,
#3b3b4eaa -15.8%,
rgba(255, 255, 255, 0.7) 27.72%,
#3b3b4eaa 109.47%
);
z-index: -2;
border-radius: 0.3125rem;
}
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #1b1b28 0%, #272739 62.73%, #c81b4c 136.87%);
z-index: -1;
border-radius: 0.25rem;
}
&:hover {
opacity: 0.75;
}
}
</style>
src/lib/layout/logs.svelte
+320 -179
View File
@@ -1,40 +1,21 @@
<script lang="ts">
import { toLocaleDateTime } from '$lib/helpers/date';
import { humanFileSize } from '$lib/helpers/sizeConvertion';
import { log } from '$lib/stores/logs';
import { Output, Status, Tab, Tabs } from '../components';
import { Button } from '$lib/elements/forms';
import { base } from '$app/paths';
import { app } from '$lib/stores/app';
import { sdk } from '$lib/stores/sdk';
import { page } from '$app/stores';
import { Card, Code, Heading, Id, SvgIcon, Tab, Tabs } from '../components';
import { calculateTime } from '$lib/helpers/timeConversion';
import type { Models } from '@appwrite.io/console';
import {
TableBody,
TableCellHead,
TableCellText,
TableHeader,
TableRow,
TableScroll
} from '$lib/elements/table';
import { beforeNavigate } from '$app/navigation';
import { Pill } from '$lib/elements';
let selectedTab: string;
let rawData: string;
function isDeployment(data: Models.Deployment | Models.Execution): data is Models.Deployment {
if ('buildId' in data) {
selectedTab = 'logs';
rawData = `${sdk.forConsole.client.config.endpoint}/functions/${$log.func.$id}/deployments/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
return true;
}
}
function isExecution(data: Models.Deployment | Models.Execution): data is Models.Execution {
if ('trigger' in data) {
selectedTab = 'response';
rawData = `${sdk.forConsole.client.config.endpoint}/functions/${$log.func.$id}/executions/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
return true;
}
}
function scrollToTop() {
document
.getElementsByClassName('code-panel-content')[0]
.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}
let selectedRequest = 'parameters';
let selectedResponse = 'logs';
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
@@ -42,14 +23,47 @@
$log.show = false;
}
}
function parseUrl(url: string) {
if (!url) return;
const queryString = url.includes('?') ? url.split('?')[1] : '';
const queries: Record<string, string>[] = [];
for (const param of queryString.split('&')) {
let [key, ...valueArr] = param.split('=');
const value = valueArr.join('=');
if (key) {
queries.push({ key, value: value ?? '' });
}
}
return queries;
}
beforeNavigate((n) => {
if (!$log.show) return;
if (n.type === 'popstate') {
n.cancel();
}
$log.show = false;
});
$: parameters = parseUrl(execution?.requestPath);
$: execution = $log.data;
$: func = $log.func;
$: if (execution?.errors) {
selectedResponse = 'errors';
}
</script>
<svelte:window on:keydown={handleKeydown} />
{#if $log.data}
{#if execution}
<section class="cover-frame" data-private>
<header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
<h1 class="body-text-1 u-bold">Function ID: {$log.func.$id}</h1>
<div class="u-flex u-gap-8 u-cross-center">
<h1 class="body-text-1 u-bold">Function ID:</h1>
<Id value={func.$id}>{func.$id}</Id>
</div>
<button
on:click={() => ($log.show = false)}
class="button is-text is-only-icon"
@@ -58,158 +72,285 @@
<span class="icon-x" aria-hidden="true" />
</button>
</header>
{#if isDeployment($log.data)}
{@const size = humanFileSize($log.data.size)}
<div class="cover-frame-content u-flex u-flex-vertical">
<div class="u-flex u-gap-16">
<div class="avatar is-size-large">
<img
height="28"
width="28"
src={`${base}/icons/${$app.themeInUse}/color/${
$log.func.runtime.split('-')[0]
}.svg`}
alt="technology" />
</div>
<div>
<div class="u-flex u-gap-12 u-cross-center">
<h2 class="body-text-2 u-bold">Deployment ID:</h2>
<Output value={$log.data.$id}>
{$log.data.$id}
</Output>
</div>
<time class="u-block"
>Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
<div>Size: {size.value} {size.unit}</div>
</div>
<div class="status u-margin-inline-start-auto">
<div class="status u-margin-inline-start-auto">
<Status status={$log.data.status}>{$log.data.status}</Status>
<time>{calculateTime($log.data.buildTime)}</time>
</div>
</div>
<div class="cover-frame-content u-flex u-flex-vertical">
<div class="u-flex u-gap-16">
<div class="avatar is-size-large">
<SvgIcon
size={56}
type="color"
name={func.runtime.split('-')[0]}
iconSize="large" />
</div>
<div class="tabs u-margin-block-start-48 u-sep-block-end">
<Tabs>
<Tab
selected={selectedTab === 'logs'}
on:click={() => (selectedTab = 'logs')}>
Logs
</Tab>
<Tab
selected={selectedTab === 'errors'}
on:click={() => (selectedTab = 'errors')}>
Errors
</Tab>
</Tabs>
<div>
<h2 class="body-text-2 u-bold">Execution ID:</h2>
<Id value={execution.$id}>{execution.$id}</Id>
</div>
<div class="theme-dark u-stretch u-margin-block-start-32 u-overflow-hidden">
<section class="code-panel">
<header class="code-panel-header">
<div class="u-flex u-gap-16 u-margin-inline-start-auto">
<Button text external href={rawData}>
<span class="icon-external-link" aria-hidden="true" />
<span class="text">Raw data</span>
</Button>
<Button secondary on:click={scrollToTop}>
<span class="text">Scroll to top</span>
</Button>
</div>
</header>
{#if selectedTab === 'logs'}
<code class="code-panel-content">
{$log.data.buildStdout ? $log.data.buildStdout : 'No logs recorded'}
</code>
{:else}
<code class="code-panel-content">
{$log.data.buildStderr
? $log.data.buildStderr
: 'No errors recorded'}
</code>
{/if}
</section>
<ul>
<li class="text">
<b>Duration: </b>
<time>
{calculateTime(execution.duration)}
</time>
</li>
<li class="text">
<b>Created at:</b>
<time>
{toLocaleDateTime(execution.$createdAt)}
</time>
</li>
{#if execution?.requestHeaders?.host}
<li class="text">
<b>Host</b>
<span>
{execution.requestHeaders.host}
</span>
</li>
{/if}
</ul>
<div class="status u-margin-inline-start-auto">
<Pill
warning={execution.status === 'waiting'}
danger={execution.status === 'failed'}
success={execution.status === 'completed' || execution.status === 'ready'}
info={execution.status === 'processing' || execution.status === 'building'}>
{execution.status}
</Pill>
</div>
</div>
{:else if isExecution($log.data)}
<div class="cover-frame-content u-flex u-flex-vertical">
<div class="u-flex u-gap-16">
<div class="avatar is-size-large">
<img
height="28"
width="28"
src={`${base}/icons/${$app.themeInUse}/color/${
$log.func.runtime.split('-')[0]
}.svg`}
alt="technology" />
</div>
<div>
<div class="u-flex u-gap-12 u-cross-center">
<h2 class="body-text-2 u-bold">Execution ID:</h2>
<Output value={$log.data.$id}>
{$log.data.$id}
</Output>
</div>
<time class="u-block">
Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
</div>
<div>
<p>Triggered by: <b>{$log.data.trigger}</b></p>
</div>
<div class="status u-margin-inline-start-auto">
<Status status={$log.data.status}>{$log.data.status}</Status>
<time>{calculateTime($log.data.duration)}</time>
</div>
</div>
<div class="tabs u-margin-block-start-48 u-sep-block-end">
<Tabs>
<Tab
selected={selectedTab === 'response'}
on:click={() => (selectedTab = 'response')}>
Response
</Tab>
<Tab
selected={selectedTab === 'logs'}
on:click={() => (selectedTab = 'logs')}>
Logs
</Tab>
<Tab
selected={selectedTab === 'errors'}
on:click={() => (selectedTab = 'errors')}>
Errors
</Tab>
</Tabs>
</div>
<div class="theme-dark u-stretch u-margin-block-start-32 u-overflow-hidden">
<section class="code-panel">
<header class="code-panel-header">
<div class="u-flex u-gap-16 u-margin-inline-start-auto">
<Button text external href={rawData}>
<span class="icon-external-link" aria-hidden="true" />
<span class="text">Raw data</span>
</Button>
<Button secondary on:click={scrollToTop}>
<span class="text">Scroll to top</span>
</Button>
<div class="theme-dark u-stretch u-margin-block-start-32 u-overflow-hidden">
<section class="code-panel">
<header class="code-panel-header u-flex u-main-space-between u-width-full-line">
<div class="u-flex u-gap-24">
<div class="u-flex u-gap-16">
<h4 class="text u-bold">Method:</h4>
<span class="u-text-color-gray">{execution.requestMethod}</span>
</div>
</header>
{#if selectedTab === 'logs'}
<code class="code-panel-content">
{$log.data.stdout ? $log.data.stdout : 'No logs recorded'}
</code>
{:else if selectedTab === 'errors'}
<code class="code-panel-content">
{$log.data.stderr ? $log.data.stderr : 'No errors recorded'}
</code>
{:else}
<code class="code-panel-content">
{$log.data.response ? $log.data.response : 'No response recorded'}
</code>
{/if}
</section>
</div>
<div class="u-flex u-gap-16">
<h4 class="text u-bold">Path:</h4>
<span class="u-text-color-gray">{execution.requestPath}</span>
</div>
</div>
<div class="u-flex u-gap-24">
<div class="u-flex u-gap-16">
<h4 class="text u-bold">Triggered by:</h4>
<span class="u-text-color-gray">{execution.trigger}</span>
</div>
<div class="u-flex u-gap-16">
<h4 class="text u-bold">Status Code:</h4>
<span class="u-text-color-gray"
>{execution.responseStatusCode}</span>
</div>
</div>
</header>
<div class="code-panel-content grid-1-2" style="u-grid">
<div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
<Heading tag="h3" size="6">Request</Heading>
<div class="u-sep-block-end">
<Tabs>
<Tab
selected={selectedRequest === 'parameters'}
on:click={() => (selectedRequest = 'parameters')}>
Parameters
</Tab>
<Tab
selected={selectedRequest === 'headers'}
on:click={() => (selectedRequest = 'headers')}>
Headers
</Tab>
<Tab
selected={selectedRequest === 'body'}
on:click={() => (selectedRequest = 'body')}>
Body
</Tab>
</Tabs>
</div>
{#if selectedRequest === 'parameters'}
{#if parameters?.length}
<div class="u-margin-block-start-24">
<TableScroll noMargin>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Value</TableCellHead>
</TableHeader>
<TableBody>
{#each parameters as param}
<TableRow>
<TableCellText title="Key">
{param.key}
</TableCellText>
<TableCellText title="Value">
{param.value}
</TableCellText>
</TableRow>
{/each}
</TableBody>
</TableScroll>
</div>
{/if}
<p class="text u-text-center u-padding-24">
{parameters?.length
? 'Not all parameters data is'
: 'Parameters data is not'} captured by Appwrite for your user's
security and privacy. To display parameters data in the Logs tab,
use
<b>context.log()</b>.
<a
href="https://appwrite.io/docs/functions-develop#logging"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
{:else if selectedRequest === 'headers'}
{#if execution.requestHeaders.length}
<div class="u-margin-block-start-24">
<TableScroll noMargin>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Value</TableCellHead>
</TableHeader>
<TableBody>
{#each execution.requestHeaders as header}
<TableRow>
<TableCellText title="Name">
{header.name}
</TableCellText>
<TableCellText title="Value">
{header.value}
</TableCellText>
</TableRow>
{/each}
</TableBody>
</TableScroll>
</div>
{/if}
<p class="text u-text-center u-padding-24">
{execution.requestHeaders?.length
? 'Not all header data is'
: 'Header data is not'}
captured by Appwrite for your user's security and privacy. To display
header data in the Logs tab, use
<b>context.log()</b>.
<a
href="https://appwrite.io/docs/functions-develop#logging"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
{:else if selectedRequest === 'body'}
<p class="text u-text-center u-padding-24">
Body data is not captured by Appwrite for your user's security
and privacy. To display body data in the Logs tab, use
<b>context.log()</b>.
<a
href="https://appwrite.io/docs/functions-develop#logging"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
{/if}
</div>
<div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16">
<Heading tag="h3" size="6">Response</Heading>
<div class="u-sep-block-end">
<Tabs>
<Tab
selected={selectedResponse === 'logs'}
on:click={() => (selectedResponse = 'logs')}>
Logs
</Tab>
<Tab
selected={selectedResponse === 'errors'}
on:click={() => (selectedResponse = 'errors')}>
Errors
</Tab>
<Tab
selected={selectedResponse === 'headers'}
on:click={() => (selectedResponse = 'headers')}>
Headers
</Tab>
<Tab
selected={selectedResponse === 'body'}
on:click={() => (selectedResponse = 'body')}>
Body
</Tab>
</Tabs>
</div>
{#if selectedResponse === 'logs'}
{#if execution?.logs}
<Code withCopy noMargin code={execution.logs} language="sh" />
{:else}
<Card isDashed isTile>
<p class="text u-text-center">No response was recorded.</p>
</Card>
{/if}
{:else if selectedResponse === 'errors'}
{#if execution?.errors}
<Code withCopy noMargin code={execution.errors} language="sh" />
{:else}
<Card isDashed isTile>
<p class="text u-text-center">No response was recorded.</p>
</Card>
{/if}
{:else if selectedResponse === 'headers'}
{#if execution.responseHeaders.length}
<TableScroll noMargin>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Value</TableCellHead>
</TableHeader>
<TableBody>
{#each execution.responseHeaders as header}
<TableRow>
<TableCellText title="Name">
{header.name}
</TableCellText>
<TableCellText title="Value"
>{header.value}</TableCellText>
</TableRow>
{/each}
</TableBody>
</TableScroll>
{/if}
<p class="text u-text-center u-padding-24">
{execution.responseHeaders?.length
? 'Not all header data is'
: 'Header data is not'}
captured by Appwrite for your user's security and privacy. To display
header data in the Logs tab, use
<b>context.log()</b>.
<a
href="https://appwrite.io/docs/functions-develop#logging"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
{:else if selectedResponse === 'body'}
<p class="text u-text-center u-padding-24">
Body data is not captured by Appwrite for your user's security
and privacy. To display body data in the Logs tab, use
<b>context.log()</b>.
<a
href="https://appwrite.io/docs/functions-develop#logging"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
{/if}
</div>
</div>
</section>
</div>
{/if}
</div>
</section>
{/if}
src/lib/layout/shell.svelte
+9 -6
View File
@@ -26,14 +26,17 @@
}
};
/**
* Cancel navigation when wizard is open and triggered by popstate
*/
beforeNavigate((n) => {
/**
* Hide wizard when navigation is triggered by popstate.
*/
if (n.type === 'popstate' && $wizard.show) {
wizard.hide();
if (!$wizard.show || !$wizard.cover) return;
if (n.type === 'popstate') {
n.cancel();
}
if (n.type !== 'leave') {
wizard.hide();
}
});
</script>
@@ -42,7 +45,7 @@
<main
class:grid-with-side={showSideNavigation}
class:is-open={isOpen}
class:u-hide={$wizard.show || $log.show}>
class:u-hide={$wizard.show || $log.show || $wizard.cover}>
<header class="main-header u-padding-inline-end-0">
<button
class:u-hide={!showSideNavigation}
src/lib/layout/unauthenticated.svelte
+318 -54
View File
@@ -1,10 +1,17 @@
<script lang="ts">
import AppwriteLogo from '$lib/images/appwrite.svg';
import LoginLight from '$lib/images/login/login-light-mode.svg';
import LoginDark from '$lib/images/login/login-dark-mode.svg';
import { app } from '$lib/stores/app';
import { base } from '$app/paths';
import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
import AppwriteLogo from '$lib/images/appwrite.svg';
import Cloud1 from '$lib/images/login/cloud-1.svg';
import Cloud2 from '$lib/images/login/cloud-2.svg';
import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
import AppwriteCloudBgMobile from '$lib/images/login/cloud-bg-mobile.svg';
import LoginDark from '$lib/images/login/login-dark-mode.svg';
import LoginLight from '$lib/images/login/login-light-mode.svg';
import { app } from '$lib/stores/app';
import { user } from '$lib/stores/user';
import { isCloud } from '$lib/system';
import { onDestroy } from 'svelte';
export let imgLight = LoginLight;
export let imgDark = LoginDark;
@@ -22,60 +29,148 @@
'kotlin',
'swift'
];
let innerWidth = 0;
$: isMobile = innerWidth < 768;
const prevTheme = $app.theme;
$: if (isMobile && isCloud) {
$app.theme = 'dark';
} else {
$app.theme = prevTheme;
}
onDestroy(() => {
$app.theme = prevTheme;
});
</script>
<main class="grid-1-1 is-full-page" id="main">
<section class="grid-1-1-col-1 u-flex u-flex-vertical">
<div
class="container u-margin-block-start-20"
style="--p-container-max-size: var(--container-size-medium);">
<a href={user ? '/console' : '/'}>
<img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
<svelte:window bind:innerWidth />
<main class="grid-1-1 is-full-page" class:main-cloud={isCloud} id="main">
{#if isCloud}
<section
class="cloud-section grid-1-1-col-1 u-flex u-flex-vertical u-overflow-hidden"
style:--url={`url(${AppwriteCloudBg})`}>
<a class="logo" href={user ? '/console' : '/'}>
<img
src={AppwriteCloudLogo}
width="196"
height="47"
class="u-block"
alt="Appwrite" />
</a>
</div>
<div class="u-margin-block-start-auto" />
<div class="header">
<p>Cloud is Live</p>
<img src={Cloud1} alt="" class="cloud-1" />
<img src={Cloud2} alt="" class="cloud-2" />
</div>
<div class="u-margin-block-start-auto is-not-mobile" />
<div
class="container u-margin-block-start-20 is-not-mobile"
style="--p-container-max-size: var(--container-size-large);">
{#if $app.themeInUse === 'dark'}
<img src={imgDark} alt="" class="u-only-dark" />
{:else}
<img src={imgLight} alt="" class="u-only-light" />
{/if}
</div>
<p class="beta">Now in public <span>beta</span></p>
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto is-no-mobile" />
<div
class="container u-text-color-light-gray is-no-mobile"
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
<p>Integrate with your favourite technologies</p>
<ul
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-0-5">
{#each technologies as tech}
<li>
<img
src={`${base}/icons/dark/grayscale/${tech}.svg`}
alt={tech}
aria-hidden="true"
aria-label={tech} />
</li>
{/each}
</ul>
</div>
<div class="u-margin-block-start-40" />
</section>
{:else}
<section class="grid-1-1-col-1 u-flex u-flex-vertical">
<div
class="container u-margin-block-start-20"
style="--p-container-max-size: var(--container-size-medium);">
<a href={user ? '/console' : '/'}>
<img
src={AppwriteLogo}
width="196"
height="47"
class="u-block"
alt="Appwrite" />
</a>
</div>
<div class="u-margin-block-start-auto is-not-mobile" />
<div
class="container u-color-text-gray is-not-mobile"
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
<p>Integrate with your favourite technologies</p>
<ul
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-50">
{#each technologies as tech}
<li>
<img
src={`${base}/icons/${$app.themeInUse}/grayscale/${tech}.svg`}
alt={tech}
aria-hidden="true"
aria-label={tech} />
</li>
{/each}
</ul>
</div>
<div class="u-margin-block-start-40" />
</section>
<section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
<div class="container u-flex u-flex-vertical u-cross-center u-height-100-percent">
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto is-no-mobile" />
<div
class="container u-margin-block-start-20 is-no-mobile u-flex u-main-center"
style="--p-container-max-size: var(--container-size-large);">
{#if $app.themeInUse === 'dark'}
<img src={imgDark} alt="" class="u-only-dark" />
{:else}
<img src={imgLight} alt="" class="u-only-light" />
{/if}
</div>
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto is-no-mobile" />
<div
class="container u-text-color-light-gray is-no-mobile"
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
<p>Integrate with your favourite technologies</p>
<ul
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-0-5">
{#each technologies as tech}
<li>
<img
src={`${base}/icons/${$app.themeInUse}/grayscale/${tech}.svg`}
alt={tech}
aria-hidden="true"
aria-label={tech} />
</li>
{/each}
</ul>
</div>
<div class="u-margin-block-start-40" />
</section>
{/if}
<section
class="grid-1-1-col-2 u-flex u-main-center u-cross-center"
class:is-cloud={isCloud}
style:--url={`url(${AppwriteCloudBg})`}
style:--url-mobile={`url(${AppwriteCloudBgMobile})`}>
<div class="container u-flex u-flex-vertical u-cross-center" class:cloud-contents={isCloud}>
{#if isCloud}
<a class="mobile-logo is-only-mobile" href={user ? '/console' : '/'}>
<img
src={AppwriteCloudLogo}
width="196"
height="47"
class="u-block"
alt="Appwrite" />
</a>
<div class="is-only-mobile theme-dark">
<div class="mobile-beta">Public <span>beta</span></div>
</div>
{/if}
<div class="u-max-width-500 u-width-full-line">
<h1 class="heading-level-3 u-margin-block-start-auto"><slot name="title" /></h1>
<div class="u-margin-block-start-40">
<h1 class="heading-level-2 u-margin-block-start-auto">
{#if isCloud}
<img src={Cloud1} alt="" class="cloud-1" />
<img src={Cloud2} alt="" class="cloud-2" />
{/if}
<slot name="title" />
</h1>
<div class="u-margin-block-start-24">
<slot />
</div>
@@ -83,12 +178,181 @@
<slot name="links" />
</ul>
</div>
<div class="u-margin-block-start-auto" />
<p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
<!-- version 0.15.2.402 -->
</p>
<div class="u-margin-block-start-20" />
</div>
</section>
</main>
<style lang="scss">
@media (prefers-reduced-motion: reduce) {
main * {
animation: none !important;
}
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-8px);
}
100% {
transform: translatey(0px);
}
}
.cloud-section {
background: var(--url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: hsl(var(--color-neutral-5));
.logo {
display: block;
align-self: center;
margin-block-start: 32.5vh;
margin-block-start: 32.5lvh;
}
.header {
text-align: center;
align-self: center;
position: relative;
p {
font-family: 'Poppins';
font-size: clamp(3.5rem, 7vw, 5.25rem);
font-weight: 700;
}
.cloud-1 {
position: absolute;
top: 95%;
left: 0;
translate: 15% -50%;
animation: float 6s ease-in-out infinite;
}
.cloud-2 {
position: absolute;
top: 110%;
right: 0;
translate: 20% -50%;
animation: float 7s ease-in-out infinite;
animation-delay: 3s;
}
}
}
.beta,
.mobile-beta {
text-align: center;
align-self: center;
font-family: 'Poppins';
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
line-height: 130%;
letter-spacing: 0.25em;
color: hsl(var(--color-neutral-0));
> span {
background: linear-gradient(
180deg,
rgba(252, 252, 255, 0.5) 0%,
rgba(252, 252, 255, 0.25) 100%
);
border-radius: 5.38636px;
text-align: center;
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}
}
.beta {
margin-block-start: 4rem;
}
.mobile-logo {
margin-block-start: 1rem;
margin-block-end: 0.5rem;
}
.mobile-beta {
font-size: 0.75rem;
margin-block-end: 6rem;
> span {
background: hsl(var(--color-neutral-120));
padding: 0.25rem 0.375rem 0.25rem 0.5rem;
}
}
.cloud-contents {
justify-content: center;
}
.heading-level-2 {
.cloud-1,
.cloud-2 {
display: none;
}
}
@media (max-width: 767px) {
.heading-level-2 {
position: relative;
.cloud-1,
.cloud-2 {
display: block;
position: absolute;
}
.cloud-1 {
left: 32px;
top: -40px;
}
.cloud-2 {
right: 0;
top: 10px;
}
}
.main-cloud {
background-color: hsl(var(--color-neutral-500));
}
.cloud-contents {
justify-content: initial;
}
.is-cloud {
background: var(--url-mobile);
background-position: 0px calc(30px - 5vw);
background-size: 100vw;
background-repeat: no-repeat;
}
.cloud-section {
display: none;
}
section:last-child {
padding-block-end: 32px;
}
}
@media (min-width: 530px) and (max-width: 767px) {
.heading-level-2 {
.cloud-1 {
display: none;
}
}
.is-cloud {
background-position: 0px calc(30px - 15vw);
}
}
</style>
src/lib/layout/usage.svelte
+2 -82
View File
@@ -13,9 +13,8 @@
<script lang="ts">
import { Container } from '$lib/layout';
import { BarChart, LineChart } from '$lib/charts';
import { Card, SecondaryTabs, SecondaryTabsItem, Heading, Tiles } from '$lib/components';
import { Colors } from '$lib/charts/config';
import { BarChart } from '$lib/charts';
import { Card, SecondaryTabs, SecondaryTabsItem, Heading } from '$lib/components';
import type { Models } from '@appwrite.io/console';
import { page } from '$app/stores';
@@ -26,16 +25,7 @@
export let title: string;
export let count: Models.Metric[];
export let created: Models.Metric[];
export let read: Models.Metric[];
export let updated: Models.Metric[];
export let deleted: Models.Metric[];
export let countMetadata: MetricMetadata;
export let createdMetadata: MetricMetadata;
export let readMetadata: MetricMetadata;
export let updatedMetadata: MetricMetadata;
export let deletedMetadata: MetricMetadata;
export let path: string = null;
</script>
@@ -72,76 +62,6 @@
</div>
{/if}
</Card>
<Tiles>
<Card isTile>
{#if created}
<Heading tag="h6" size="6">{total(created)}</Heading>
<p>{createdMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: createdMetadata.legend,
data: [...created.map((e) => [e.date, e.value])],
color: Colors.Secondary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
{#if read}
<Heading tag="h6" size="6">{total(read)}</Heading>
<p>{readMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: readMetadata.legend,
data: [...read.map((e) => [e.date, e.value])],
color: Colors.Tertiary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
{#if updated}
<Heading tag="h6" size="6">{total(updated)}</Heading>
<p>{updatedMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: updatedMetadata.legend,
data: [...updated.map((e) => [e.date, e.value])],
color: Colors.Quaternary
}
]} />
</div>
{/if}
</Card>
<Card isTile>
{#if deleted}
<Heading tag="h6" size="6">{total(deleted)}</Heading>
<p>{deletedMetadata.title}</p>
<div class="u-margin-block-start-16" />
<div class="chart-container">
<LineChart
series={[
{
name: deletedMetadata.legend,
data: [...deleted.map((e) => [e.date, e.value])],
color: Colors.Quinary
}
]} />
</div>
{/if}
</Card>
</Tiles>
</Container>
<style lang="scss">
src/lib/layout/wizard.svelte
+11 -10
View File
@@ -26,7 +26,6 @@
const dispatch = createEventDispatcher();
let currentStep = 1;
let showExitModal = false;
function handleKeydown(event: KeyboardEvent) {
@@ -55,8 +54,8 @@
function handleStepClick(e: CustomEvent<number>) {
const step = e.detail;
if (step < currentStep) {
currentStep = step;
if (step < $wizard.step) {
$wizard.step = step;
}
}
@@ -79,12 +78,14 @@
dispatch('finish');
} else {
trackEvent('wizard_next');
currentStep++;
$wizard.step++;
}
}
$: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
$: isLastStep = currentStep === steps.size;
$: isLastStep = $wizard.step === steps.size;
$: console.log({ sortedSteps, current: $wizard.step });
</script>
<svelte:window on:keydown={handleKeydown} />
@@ -114,7 +115,7 @@
text: label,
optional
}))}
{currentStep} />
currentStep={$wizard.step} />
</aside>
<div class="wizard-media">
{#if $wizard.media}
@@ -124,24 +125,24 @@
<div class="wizard-main">
<Form noStyle onSubmit={submit}>
{#each sortedSteps as [step, { component }]}
{#if currentStep === step}
{#if $wizard.step === step}
<svelte:component this={component} />
{/if}
{/each}
<div class="form-footer">
<div class="u-flex u-main-end u-gap-12">
{#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
{#if !isLastStep && sortedSteps[$wizard.step - 1]?.[1]?.optional}
<Button text on:click={() => dispatch('finish')}>
Skip optional steps
</Button>
{/if}
{#if currentStep === 1}
{#if $wizard.step === 1}
<Button secondary on:click={handleExit}>Cancel</Button>
{:else}
<Button
secondary
on:click={() => currentStep--}
on:click={() => $wizard.step--}
on:click={() => trackEvent('wizard_back')}>Back</Button>
{/if}
src/lib/layout/wizardCover.svelte
+35
View File
@@ -0,0 +1,35 @@
<script lang="ts">
import { wizard } from '$lib/stores/wizard';
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
event.preventDefault();
wizard.hide();
}
}
</script>
<svelte:window on:keydown={handleKeydown} />
<section class="cover-frame is-color-header">
<header class="cover-frame-header">
<div
class="container u-flex u-gap-16 u-main-space-between u-cross-center"
style:--p-container-padding-block="0">
<div class="u-flex u-gap-8 u-cross-center">
<div class="body-text-1 u-bold"><slot name="title" /></div>
</div>
<button
on:click={wizard.hide}
class="button is-text is-only-icon"
style:--button-size="1.5rem"
aria-label="close popup">
<span class="icon-x" aria-hidden="true" />
</button>
</div>
</header>
<div class="cover-frame-content u-flex u-flex-vertical u-overflow-y-auto">
<slot />
</div>
</section>
src/lib/pages/domains/create.svelte
+42
View File
@@ -0,0 +1,42 @@
<script lang="ts">
import { Wizard } from '$lib/layout';
import { invalidate } from '$app/navigation';
import { wizard } from '$lib/stores/wizard';
import type { WizardStepsType } from '$lib/layout/wizard.svelte';
import { dependencyStore, domain } from './wizard/store';
import Step1 from './wizard/step1.svelte';
import Step2 from './wizard/step2.svelte';
import { onMount } from 'svelte';
import { sdk } from '$lib/stores/sdk';
import type { Models } from '@appwrite.io/console';
onMount(() => {
domain.set({ $id: '', domain: '' });
return sdk.forConsole.client.subscribe<Models.ProxyRule>('console', (data) =>
domain.set(data.payload)
);
});
async function onFinish() {
await invalidate($dependencyStore);
wizard.hide();
}
const stepsComponents: WizardStepsType = new Map();
stepsComponents.set(1, {
label: 'Add domain',
component: Step1
});
stepsComponents.set(2, {
label: 'Configuration',
component: Step2
});
</script>
<Wizard
title="Create domain"
steps={stepsComponents}
finalAction="Go to console"
on:exit={onFinish}
on:finish={onFinish} />
src/routes/console/project-[project]/settings/domains/delete.svelte → src/lib/pages/domains/delete.svelte
+8 -7
View File
@@ -1,21 +1,21 @@
<script lang="ts">
import { Modal } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { project } from '../../store';
import { sdk } from '$lib/stores/sdk';
import { addNotification } from '$lib/stores/notifications';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import type { Models } from '@appwrite.io/console';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import type { Dependencies } from '$lib/constants';
export let showDelete = false;
export let selectedDomain: Models.Domain;
export let selectedDomain: Models.ProxyRule;
export let dependency: Dependencies;
async function deleteDomain() {
try {
await sdk.forConsole.projects.deleteDomain($project.$id, selectedDomain.$id);
await invalidate(Dependencies.DOMAINS);
await sdk.forProject.proxy.deleteRule(selectedDomain.$id);
await invalidate(dependency);
showDelete = false;
addNotification({
type: 'success',
@@ -33,7 +33,7 @@
</script>
<Modal
title="Delete Domain"
title="Delete domain"
bind:show={showDelete}
onSubmit={deleteDomain}
icon="exclamation"
@@ -41,7 +41,8 @@
headerDivider={false}>
{#if selectedDomain}
<p data-private>
Are you sure you want to delete <b>{selectedDomain.domain}</b> from '{$project.name}'?
Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be
able to execute your function by visiting this domain.
</p>
{/if}
<svelte:fragment slot="footer">
src/lib/pages/domains/index.svelte
+197
View File
@@ -0,0 +1,197 @@
<script context="module" lang="ts">
export enum ProxyTypes {
API = 'api',
FUNCTION = 'function'
}
</script>
<script lang="ts">
import { DropList, DropListItem, Empty, Heading, Modal, Trim } from '$lib/components';
import {
TableBody,
TableCell,
TableCellHead,
TableCellLink,
TableHeader,
TableRow,
TableScroll
} from '$lib/elements/table';
import { Button } from '$lib/elements/forms';
import { onMount } from 'svelte';
import { dependencyStore, domain, typeStore } from './wizard/store';
import { toLocaleDate } from '$lib/helpers/date';
import { wizard } from '$lib/stores/wizard';
import type { Dependencies } from '$lib/constants';
import type { Models } from '@appwrite.io/console';
import Create from './create.svelte';
import Delete from './delete.svelte';
import Retry from './wizard/retry.svelte';
import { Pill } from '$lib/elements';
export let rules: Models.ProxyRuleList;
export let type: ProxyTypes;
export let dependency: Dependencies;
let showDomainsDropdown = [];
let showDelete = false;
let showRetry = false;
let selectedDomain: Models.ProxyRule;
let retryError = null;
onMount(() => {
typeStore.set(type);
dependencyStore.set(dependency);
});
function openWizard() {
wizard.start(Create);
}
function openRetry(rule: Models.ProxyRule, index?: number) {
retryError = null;
if (index !== undefined) {
showDomainsDropdown[index] = false;
}
domain.set(rule);
showRetry = true;
}
</script>
<div class="u-flex u-gap-12 common-section u-main-space-between">
<Heading tag="h2" size="5">
<slot name="heading" />
</Heading>
<Button on:click={openWizard}>
<span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
</Button>
</div>
{#if rules.total}
<TableScroll>
<TableHeader>
<TableCellHead>Name</TableCellHead>
<TableCellHead width={180}>Verification Status</TableCellHead>
<TableCellHead>Certificate Status</TableCellHead>
<TableCellHead width={40} />
</TableHeader>
<TableBody>
{#each rules.rules as domain, i}
<TableRow>
<TableCellLink title="Domain" href={`http://${domain.domain}`} external noStyle>
<span class="u-flex u-gap-4 u-cross-center">
<Trim>
<span class="link">{domain.domain}</span>
</Trim>
<span class="icon-external-link" aria-hidden="true" />
</span>
</TableCellLink>
<TableCell title="Verification">
{#if domain.status === 'created'}
<div class="u-flex u-gap-8 u-cross-center">
<Pill danger>
<span
class="icon-exclamation-circle u-color-text-danger"
aria-hidden="true" />
<span class="u-text">Failed</span>
</Pill>
<button type="button" on:click={() => openRetry(domain)}>
<span class="link">Retry</span>
</button>
</div>
{:else}
<Pill success>
<span
class="icon-check-circle u-color-text-success"
aria-hidden="true" />
<p class="text">Verified</p>
</Pill>
{/if}
</TableCell>
<TableCell title="Cartificate">
{#if domain.status === 'unverified'}
<div class="u-flex u-gap-8 u-cross-center">
<Pill danger>
<span
class="icon-exclamation-circle u-color-text-danger"
aria-hidden="true" />
<span class="u-text">Failed</span>
</Pill>
<button type="button" on:click={() => openRetry(domain)}>
<span class="link">Retry</span>
</button>
</div>
{:else if domain.status === 'verified'}
<div class="u-flex u-gap-8 u-cross-center">
<Pill success>
<span
class="icon-check-circle u-color-text-success"
aria-hidden="true" />
<span>Generated</span>
</Pill>
{#if domain.renewAt}
<span class="u-text-color-gray">
Auto-renewal: {toLocaleDate(domain.renewAt)}
</span>
{/if}
</div>
{:else}
<div class="u-flex u-gap-8 u-cross-center">
<Pill>
<span class="icon-clock u-text-color-gray" aria-hidden="true" />
<p class="text">Waiting to run</p>
</Pill>
</div>
{/if}
</TableCell>
<TableCell>
<DropList
bind:show={showDomainsDropdown[i]}
placement="bottom-start"
noArrow>
<Button
text
round
ariaLabel="more options"
on:click={() => (showDomainsDropdown[i] = !showDomainsDropdown[i])}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</Button>
<svelte:fragment slot="list">
<DropListItem icon="refresh" on:click={() => openRetry(domain, i)}>
{domain.status === 'unverfied'
? 'Retry generation'
: 'Retry verification'}
</DropListItem>
<DropListItem
icon="trash"
on:click={() => {
selectedDomain = domain;
showDelete = true;
showDomainsDropdown[i] = false;
}}>
Delete
</DropListItem>
</svelte:fragment>
</DropList>
</TableCell>
</TableRow>
{/each}
</TableBody>
</TableScroll>
{:else}
<Empty
single
href="https://appwrite.io/docs/custom-domains"
target="domain"
on:click={openWizard} />
{/if}
<Delete bind:showDelete bind:selectedDomain {dependency} />
<Modal bind:show={showRetry} headerDivider={false} bind:error={retryError} size="big">
<svelte:fragment slot="header">
Retry {$domain.status === 'unverfied' ? 'certificate generation' : 'verification'}
</svelte:fragment>
<Retry on:error={(e) => (retryError = e.detail)} />
<svelte:fragment slot="footer">
<Button text on:click={() => (showRetry = false)}>Close</Button>
</svelte:fragment>
</Modal>
src/lib/pages/domains/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { default as ProxyRulesPage, ProxyTypes } from './index.svelte';
export { default as Retry } from './wizard/retry.svelte';
src/routes/console/project-[project]/settings/domains/wizard/cnameTable.svelte → src/lib/pages/domains/wizard/cnameTable.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
$: cnameValue = $domain.domain.replace('.' + registerable, '');
</script>
<Table noStyles noMargin>
<Table noMargin noStyles style="--p-table-bg-color: var(--transparent);">
<TableHeader>
<TableCellHead>Type</TableCellHead>
<TableCellHead>Name</TableCellHead>
src/lib/pages/domains/wizard/retry.svelte
+79
View File
@@ -0,0 +1,79 @@
<script lang="ts">
import { Button } from '$lib/elements/forms';
import { sdk } from '$lib/stores/sdk';
import { domain } from './store';
import CnameTable from './cnameTable.svelte';
import { createEventDispatcher } from 'svelte';
import { Box, Code, Trim } from '$lib/components';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { addNotification } from '$lib/stores/notifications';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
let retrying = false;
const dispatch = createEventDispatcher();
async function retry() {
try {
retrying = true;
$domain = await sdk.forProject.proxy.updateRuleVerification($domain.$id);
invalidate(Dependencies.FUNCTION_DOMAINS);
addNotification({
message:
$domain.status === 'unverfied'
? 'Domain certificate has been generated successfully'
: 'Domain has been verified successfully',
type: 'success'
});
trackEvent(Submit.DomainUpdateVerification);
} catch (error) {
dispatch('error', error.message);
trackError(error, Submit.DomainUpdateVerification);
} finally {
retrying = false;
}
}
</script>
{#if $domain.status === 'created'}
<Box radius="small">
<div class="u-flex u-gap-8 u-cross-center">
<span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />
<p class="u-stretch">Verification failed</p>
<Button secondary on:click={retry} disabled={retrying}>
{#if retrying}
<div class="loader u-text-color-gray" />
{:else}
Retry
{/if}
</Button>
</div>
<p class="text u-margin-block-start-24">
In order to continue, set the following record on your DNS provider. Find a list of
domain providers and their DNS settings in our documentation. Changes may take time to
be effective.
</p>
<div class="u-margin-block-start-24">
<CnameTable />
</div>
</Box>
{:else if $domain.status === 'unverified'}
<Trim alternativeTrim><b>{$domain.domain}</b></Trim>
<Box radius="small">
<div class="u-flex u-gap-8 u-cross-center">
<span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />
<p class="u-stretch">Generation failed</p>
<Button secondary on:click={retry} disabled={retrying}>
{#if retrying}
<div class="loader u-text-color-gray" />
{:else}
Retry
{/if}
</Button>
</div>
{#if $domain?.logs}
<Code language="sh" withCopy code={$domain.logs} />
{/if}
</Box>
{/if}
src/lib/pages/domains/wizard/step1.svelte
+59
View File
@@ -0,0 +1,59 @@
<script lang="ts">
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { FormList, InputDomain } from '$lib/elements/forms';
import { WizardStep } from '$lib/layout';
import { sdk } from '$lib/stores/sdk';
import { func } from '$routes/console/project-[project]/functions/function-[function]/store';
import { ProxyTypes } from '../index.svelte';
import { domain, typeStore } from './store';
let error = null;
async function createDomain() {
try {
if ($domain.$id) {
await sdk.forProject.proxy.deleteRule($domain.$id);
}
$domain = await sdk.forProject.proxy.createRule(
$domain.domain,
$typeStore,
$typeStore === ProxyTypes.FUNCTION ? $func.$id : undefined
);
trackEvent(Submit.DomainCreate);
} catch (e) {
error = true;
trackError(e.message, Submit.DomainCreate);
}
}
</script>
<WizardStep beforeSubmit={createDomain}>
<svelte:fragment slot="title">Add function domain</svelte:fragment>
<svelte:fragment slot="subtitle">
Use your self-owned domain as the endpoint of your Appwrite API.
</svelte:fragment>
<FormList>
<InputDomain
id="domain"
label="Domain"
placeholder="appwrite.example.com"
autocomplete={false}
required
bind:value={$domain.domain} />
</FormList>
{#if error}
<div class="common-section">
<p>
You can find a list of domain providers and their DNS setting documentation <a
class="link"
href="https://appwrite.io/docs/custom-domains#addCNAME"
target="_blank"
rel="noreferrer">here</a
>. If your domain provider isn't listed, please contact us, and we'll include their
settings as well.
</p>
</div>
{/if}
</WizardStep>
src/lib/pages/domains/wizard/step2.svelte
+47
View File
@@ -0,0 +1,47 @@
<script lang="ts">
import { WizardStep } from '$lib/layout';
import { domain } from './store';
import Retry from './retry.svelte';
import { addNotification } from '$lib/stores/notifications';
function onRetryError(event: CustomEvent<string>) {
addNotification({
title: 'Error',
message: event.detail,
type: 'error'
});
}
</script>
<WizardStep>
<svelte:fragment slot="title">{$domain.domain}</svelte:fragment>
<div class="boxes-wrapper u-margin-block-start-24">
{#if $domain.status === 'created'}
<Retry on:error={onRetryError} />
{:else}
<div class="u-flex u-gap-8 u-cross-center">
<span class="icon-check u-color-text-success" aria-hidden="true" />
<p class="u-stretch">Domain verified</p>
</div>
{/if}
<div class="box">
<div class="u-flex u-gap-8 u-cross-center">
{#if $domain.status === 'verifying'}
<div
class="loader"
style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
<p class="u-stretch">Generating certificate</p>
{:else if $domain.status === 'verified'}
<span class="icon-check u-color-text-success" aria-hidden="true" />
<p class="u-stretch">Certificate generated</p>
{:else}
<span class="icon-clock u-text-color-gray" aria-hidden="true" />
<p class="u-stretch">
Certificate generation will begin after domain verification
</p>
{/if}
</div>
</div>
</div>
</WizardStep>
src/lib/pages/domains/wizard/store.ts
+8
View File
@@ -0,0 +1,8 @@
import type { Models } from '@appwrite.io/console';
import { writable } from 'svelte/store';
import type { ProxyTypes } from '../index.svelte';
import type { Dependencies } from '$lib/constants';
export const domain = writable<Partial<Models.ProxyRule>>({ $id: '', domain: '' });
export const typeStore = writable<ProxyTypes>();
export const dependencyStore = writable<Dependencies>();
src/lib/sdk/project.ts
-31
View File
@@ -1,31 +0,0 @@
import type { Models, Payload } from '@appwrite.io/console';
import { Service } from './service';
export class Project extends Service {
/**
* Get usage stats for a project
*
*
* @param {string} range
* @throws {AppwriteException}
* @returns {Promise}
*/
async getUsage(range?: string): Promise<Models.UsageProject> {
const path = '/project/usage';
const payload: Payload = {};
if (typeof range !== 'undefined') {
payload['range'] = range;
}
const uri = new URL(this.client.config.endpoint + path);
return await this.client.call(
'get',
uri,
{
'content-type': 'application/json'
},
payload
);
}
}
src/lib/sdk/service.ts
-28
View File
@@ -1,28 +0,0 @@
import type { Client, Payload } from '@appwrite.io/console';
export class Service {
static CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
client: Client;
constructor(client: Client) {
this.client = client;
}
static flatten(data: Payload, prefix = ''): Payload {
let output: Payload = {};
for (const key in data) {
const value = data[key];
const finalKey = prefix ? `${prefix}[${key}]` : key;
if (Array.isArray(value)) {
output = Object.assign(output, this.flatten(value, finalKey));
} else {
output[finalKey] = value;
}
}
return output;
}
}
src/lib/stores/logs.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { writable } from 'svelte/store';
export const log = writable<{
show: boolean;
func: Models.Function;
data: Models.Execution | Models.Deployment;
data: Models.Execution;
}>({
show: false,
func: null,
src/lib/stores/marketplace.ts
+701
View File
@@ -0,0 +1,701 @@
export const marketplace = [
{
icon: 'icon-lightning-bolt',
id: 'starter',
name: 'Starter function',
tagline:
'A simple function to get started. Edit this function to explore endless possibilities with Appwrite Functions. 🚀',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/starter'
},
{
name: 'php-8.0',
commands: 'composer install',
entrypoint: 'src/index.php',
providerRootDirectory: 'php/starter'
},
{
name: 'ruby-3.0',
commands: 'bundle install',
entrypoint: 'lib/main.rb',
providerRootDirectory: 'ruby/starter'
},
{
name: 'python-3.9',
commands: 'pip install -r requirements.txt',
entrypoint: 'src/main.py',
providerRootDirectory: 'python/starter'
},
{
name: 'dart-2.17',
commands: 'dart pub get',
entrypoint: 'lib/main.dart',
providerRootDirectory: 'dart/starter'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/starter">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'APPWRITE_API_KEY',
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: false
}
]
},
{
icon: 'icon-open-ai',
id: 'prompt-chatgpt',
name: 'Prompt ChatGPT',
tagline: 'Ask questions and let OpenAI GPT-3.5-turbo answer.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/prompt-chatgpt'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/prompt-chatgpt">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'OPENAI_API_KEY',
description: `A unique key used to authenticate with the OpenAI API. This is a paid service and you will be charged for each request made to the API. <a class="u-bold" target="_blank" href="https://platform.openai.com/docs/quickstart/add-your-api-key">Learn more</a>.`,
value: '',
placeholder: 'sk-wzG...vcy',
required: true
},
{
name: 'OPENAI_MAX_TOKENS',
description: `The maximum number of tokens that the OpenAI response should contain. Be aware that OpenAI models read and write a maximum number of tokens per API call, which varies depending on the model. For GPT-3.5-turbo, the limit is 4096 tokens. <a class="u-bold" target="_blank" href="https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them">Learn more</a>.`,
value: '512',
placeholder: '512',
required: false
}
]
},
{
icon: 'icon-perspective-api',
id: 'analyze-with-perspectiveapi',
name: 'Analyze with PerspectiveAPI',
tagline: 'Automate moderation by getting toxicity of messages.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/analyze-with-perspectiveapi'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/analyze-with-perspectiveapi">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'PERSPECTIVE_API_KEY',
description: `Google Perspective API key. It authenticates your function, allowing it to interact with the API. <a class="u-bold" target="_blank" href="https://developers.google.com/codelabs/setup-perspective-api">Learn more</a>.`,
value: '',
placeholder: 'AIzaS...fk-fuM',
required: true
}
]
},
{
icon: 'icon-pangea',
id: 'censor-with-redact',
name: 'Censor with Redact',
tagline:
'Censor sensitive information from a provided text string using Redact API by Pangea.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/censor-with-redact'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/censor-with-redact">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'PANGEA_REDACT_TOKEN',
description: `Access token for the Pangea Redact API. <a class="u-bold" target="_blank" href="https://pangea.cloud/docs/redact/getting-started/configuration">Learn more</a>.`,
value: '',
placeholder: 'pts_7p4...5wl4',
required: true
}
]
},
{
icon: 'icon-document',
id: 'generate-pdf',
name: 'Generate PDF',
tagline: 'Document containing sample invoice in PDF format.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/generate-pdf'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/generate-pdf">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: []
},
{
icon: 'icon-discord',
id: 'discord-command-bot',
name: 'Discord command bot',
tagline: 'Simple command using Discord Interactions.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install && npm run setup',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/discord-command-bot'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/discord-command-bot">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'DISCORD_PUBLIC_KEY',
description: `Discord Public Key to verify request signature. <a class="u-bold" target="_blank" href="https://discord.com/developers/docs/tutorials/hosting-on-cloudflare-workers#creating-an-app-on-discord">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
}
]
},
{
icon: 'icon-github',
id: 'github-issue-bot',
name: 'GitHub issue bot',
tagline:
'Automate the process of responding to newly opened issues in a GitHub repository.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/github-issue-bot'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/github-issue-bot">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'GITHUB_TOKEN',
description: `A personal access token from GitHub with the necessary permissions to post comments on issues. <a class="u-bold" target="_blank" href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token">Learn more</a>.`,
value: '',
placeholder: 'ghp_1...',
required: true
},
{
name: 'GITHUB_WEBHOOK_SECRET',
description: `The secret used to verify that the webhook request comes from GitHub. <a class="u-bold" target="_blank" href="https://docs.github.com/en/developers/webhooks-and-events/securing-your-webhooks">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
}
]
},
{
icon: 'icon-bookmark',
id: 'url-shortener',
name: 'URL shortener',
tagline: 'Generate URL with short ID and redirect to the original URL when visited.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/url-shortener'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/url-shortener">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'APPWRITE_API_KEY',
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
},
{
name: 'APPWRITE_ENDPOINT',
description: `The URL endpoint of the Appwrite server. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: 'https://cloud.appwrite.io/v1',
placeholder: 'https://cloud.appwrite.io/v1',
required: false
},
{
name: 'APPWRITE_DATABASE_ID',
description: `The ID of the database to store the short URLs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/databases">Learn more</a>.`,
value: 'urlShortener',
placeholder: 'urlShortener',
required: false
},
{
name: 'APPWRITE_COLLECTION_ID',
description: `The ID of the collection to store the short URLs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/collections">Learn more</a>.`,
value: 'urls',
placeholder: 'urls',
required: false
}
]
},
{
icon: 'icon-algolia',
id: 'sync-with-algolia',
name: 'Sync with Algolia',
tagline: 'Intuitive search bar for any data in Appwrite Databases.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/sync-with-algolia'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/sync-with-algolia">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'APPWRITE_API_KEY',
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
},
{
name: 'APPWRITE_DATABASE_ID',
description: `The ID of the Appwrite database that contains the collection to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/databases">Learn more</a>.`,
placeholder: '64a55...7b912',
required: true
},
{
name: 'APPWRITE_COLLECTION_ID',
description: `The ID of the collection in the Appwrite database to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/collections">Learn more</a>.`,
placeholder: '7c3e8...2a9f1',
required: true
},
{
name: 'ALGOLIA_ADMIN_API_KEY',
description: `The admin API Key for your Algolia service. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/guides/security/api-keys/">Learn more</a>.`,
placeholder: 'fd0aa...136a8',
required: true
},
{
name: 'ALGOLIA_INDEX_ID',
description: `The ID of the index in Algolia where the documents are to be synced. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/api-client/methods/indexing/">Learn more</a>.`,
placeholder: 'appwrite_index',
required: true
},
{
name: 'ALGOLIA_SEARCH_API_KEY',
description: `The search API Key for your Algolia service. This key is used for searching the synced index. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/guides/security/api-keys/">Learn more</a>.`,
placeholder: 'bf2f5...df733',
required: true
},
{
name: 'APPWRITE_ENDPOINT',
description: `The URL endpoint of the Appwrite server. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: 'https://cloud.appwrite.io/v1',
placeholder: 'https://cloud.appwrite.io/v1',
required: false
}
]
},
{
icon: 'icon-meilisearch',
id: 'sync-with-meilisearch',
name: 'Sync with Meilisearch',
tagline: 'Intuitive search bar for any data in Appwrite Databases.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/sync-with-meilisearch'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/sync-with-meilisearch">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'APPWRITE_API_KEY',
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
},
{
name: 'APPWRITE_DATABASE_ID',
description: `The ID of the Appwrite database that contains the collection to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/databases">Learn more</a>.`,
placeholder: '64a55...7b912',
required: true
},
{
name: 'APPWRITE_COLLECTION_ID',
description: `The ID of the collection in the Appwrite database to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/collections">Learn more</a>.`,
placeholder: '7c3e8...2a9f1',
required: true
},
{
name: 'MEILISEARCH_ENDPOINT',
description: `The host URL of the Meilisearch server. <a class="u-bold" target="_blank" href="https://www.meilisearch.com/docs/learn/getting_started/quick_start/">Learn more</a>.`,
placeholder: 'http://127.0.0.1:7700',
required: true
},
{
name: 'MEILISEARCH_ADMIN_API_KEY',
description: `The admin API key for Meilisearch. <a class="u-bold" target="_blank" href="https://docs.meilisearch.com/reference/api/keys/">Learn more</a>.`,
placeholder: 'masterKey1234',
required: true
},
{
name: 'MEILISEARCH_SEARCH_API_KEY',
description: `API Key for Meilisearch search operations. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/guides/security/api-keys/">Learn more</a>.`,
placeholder: 'searchKey1234',
required: true
},
{
name: 'MEILISEARCH_INDEX_NAME',
description: `Name of the Meilisearch index to which the documents will be synchronized. <a class="u-bold" target="_blank" href="https://www.meilisearch.com/docs/learn/core_concepts/indexes/">Learn more</a>.`,
placeholder: 'appwrite_index',
required: true
},
{
name: 'APPWRITE_ENDPOINT',
description: `The URL endpoint of the Appwrite server. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: 'https://cloud.appwrite.io/v1',
placeholder: 'https://cloud.appwrite.io/v1',
required: false
}
]
},
{
icon: 'icon-vonage',
id: 'whatsapp-with-vonage',
name: 'WhatsApp with Vonage',
tagline: 'Simple bot to answer WhatsApp messages.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/whatsapp-with-vonage'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/whatsapp-with-vonage">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'VONAGE_API_KEY',
description: `API Key to use the Vonage API. <a class="u-bold" target="_blank" href="https://api.support.vonage.com/hc/en-us/articles/204014493-How-do-I-find-my-Voice-API-key-and-API-secret-">Learn more</a>.`,
value: '',
placeholder: '62...97',
required: true
},
{
name: 'VONAGE_API_SECRET',
description: `Secret to use the Vonage API. <a class="u-bold" target="_blank" href="https://api.support.vonage.com/hc/en-us/articles/204014493-How-do-I-find-my-Voice-API-key-and-API-secret-">Learn more</a>.`,
placeholder: 'Zjc...5PH',
required: true
},
{
name: 'VONAGE_API_SIGNATURE_SECRET',
description: `Secret to verify the JWT token sent by Vonage. <a class="u-bold" target="_blank" href="https://developer.vonage.com/en/getting-started/concepts/signing-messages">Learn more</a>.`,
placeholder: 'NXOi3...IBHDa',
required: true
},
{
name: 'VONAGE_WHATSAPP_NUMBER',
description: `Vonage WhatsApp number to send messages from. <a class="u-bold" target="_blank" href="https://api.support.vonage.com/hc/en-us/articles/4431993282580-Where-do-I-find-my-WhatsApp-Number-Certificate-">Learn more</a>.`,
placeholder: '+14000000102',
required: true
}
]
},
{
icon: 'icon-bell',
id: 'push-notification-with-fcm',
name: 'Push notification with FCM',
tagline: 'Send push notifications to your users using Firebase Cloud Messaging (FCM).',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/push-notification-with-fcm'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/push-notification-with-fcm">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'FCM_PROJECT_ID',
description: `A unique identifier for your FCM project. <a class="u-bold" target="_blank" href="https://firebase.google.com/docs/projects/learn-more#project-id">Learn more</a>.`,
value: '',
placeholder: 'mywebapp-f6e57',
required: true
},
{
name: 'FCM_CLIENT_EMAIL',
description: `Your FCM service account email. <a class="u-bold" target="_blank" href="https://github.com/appwrite/templates/tree/main/node/push-notification-with-fcm#:~:text=Documentation-,FCM%3A%20SDK%20Setup,-FCM_PRIVATE_KEY">Learn more</a>.`,
placeholder: 'fcm-adminsdk-2f0de@test-f7q57.iam.gserviceaccount.com',
required: true
},
{
name: 'FCM_PRIVATE_KEY',
description: `A unique private key used to authenticate with FCM. <a class="u-bold" target="_blank" href="https://github.com/appwrite/templates/tree/main/node/push-notification-with-fcm#:~:text=Documentation-,FCM%3A%20SDK%20Setup,-FCM_DATABASE_URL">Learn more</a>.`,
placeholder: '0b683...75675',
required: true
},
{
name: 'FCM_DATABASE_URL',
description: `URL of your FCM database. <a class="u-bold" target="_blank" href="https://firebase.google.com/docs/admin/setup#initialize_the_sdk_in_non-google_environments">Learn more</a>.`,
placeholder: 'https://my-app-f298e.firebaseio.com',
required: true
}
]
},
{
icon: 'icon-mail',
id: 'email-contact-form',
name: 'Email contact form',
tagline: 'Sends an email with the contents of a HTML form.',
permissions: ['any'],
events: [],
cron: '',
timeout: 15,
usecases: ['placeholder'],
runtimes: [
{
name: 'node-18.0',
commands: 'npm install',
entrypoint: 'src/main.js',
providerRootDirectory: 'node/email-contact-form'
}
],
instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/email-contact-form">file</a>.`,
vcsProvider: 'github',
providerRepositoryId: 'templates',
providerOwner: 'appwrite',
providerBranch: 'main',
variables: [
{
name: 'SMTP_HOST',
description: `The address of your SMTP server. Many STMP providers will provide this information in their documentation. Some popular providers include: Mailgun, SendGrid, and Gmail.`,
value: '',
placeholder: 'smtp.mailgun.org',
required: true
},
{
name: 'SMTP_PORT',
description: `The port of your STMP server. Commnly used ports include 25, 465, and 587.`,
placeholder: '25',
required: true
},
{
name: 'SMTP_USERNAME',
description: `The username for your SMTP server. This is commonly your email address.`,
placeholder: 'no-reply@mywebapp.org',
required: true
},
{
name: 'SMTP_PASSWORD',
description: `The password for your SMTP server.`,
placeholder: '5up3r5tr0ngP4ssw0rd',
required: true
},
{
name: 'SUBMIT_EMAIL',
description: `The email address to send form submissions to.`,
placeholder: 'me@mywebapp.org',
required: true
},
{
name: 'ALLOWED_ORIGINS',
description: `An optional comma-separated list of allowed origins for CORS (defaults to *). This is an important security measure to prevent malicious users from abusing your function.`,
value: '',
placeholder: 'https://mywebapp.org,https://mywebapp.com',
required: false
}
]
}
];
export type Runtime = {
name: string;
commands: string;
entrypoint: string;
providerRootDirectory: string;
};
export type Variable = {
name: string;
description: string;
value?: string;
placeholder: string;
required: boolean;
};
export type MarketplaceTemplate = {
icon: string;
id: string;
name: string;
tagline: string;
permissions: string[];
events: string[];
cron: string;
timeout: number;
usecases: string[];
runtimes: Runtime[];
instructions: string;
vcsProvider: string;
providerRepositoryId: string;
providerOwner: string;
providerBranch: string;
variables: Variable[];
};
/*
Template:
{
"icon": "algolia",
"id": "sync-with-algolia",
"name": "Sync with Algolia",
"tagline": "Search your Appwrite Database with Algolia.",
"permissions": ["any"],
"events": [ "users.*.create" ],
"cron": "0 * * * *",
"timeout": 15,
"runtimes": [
{
"name": "node-18",
"entrypoint": "src/main.js",
"commands": "npm install"
}
],
"instructions": "# Some markdown stuff",
"vcsProvider": "github",
"vcsRepositoryName": "templates-for-node",
"vcsOwnerName": "loks0n",
"vcsRootDirectory": "sync-with-algolia",
"variables": [
{
"name": "ALGOLIA_API_KEY",
"description": "Algolia read-write API key.",
"value": "",
"placeholder": "sk_1df...h9jef",
"required": true
}
]
}
*/
src/lib/stores/migration.ts
+1
View File
@@ -20,6 +20,7 @@ const initialFormData = {
root: false
}
};
export type MigrationFormData = typeof initialFormData;
export const createMigrationFormStore = () => {

Some files were not shown because too many files have changed in this diff Show More