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 pull request #421 from appwrite/feat/cloud-beta-card

Browse Source 
Feat/cloud beta card
This commit is contained in:
Christy Jacob
2023-04-29 02:08:05 +05:30
committed by GitHub
parent 513b6c31c5 5017dbbfb8
commit 1d579ca79c
26 changed files with 2157 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+6
View File
@@ -19,6 +19,7 @@
"logrocket": "^3.0.1",
"pretty-bytes": "^6.1.0",
"prismjs": "^1.29.0",
"svelte-confetti": "^1.2.2",
"tippy.js": "^6.3.7",
"web-vitals": "^3.1.1"
},
@@ -8011,6 +8012,11 @@
"node": ">=12.20"
}
},
"node_modules/svelte-confetti": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-1.2.2.tgz",
"integrity": "sha512-LkvWO732jRNmYykWi0IOK7xoBX241p+p+tC7Ef1EcO3TK9b9lpB/vYqKkcwVya+onG2SgQsX2g+JVbVKxq5ixQ=="
},
"node_modules/svelte-hmr": {
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
package.json
+1
View File
@@ -30,6 +30,7 @@
"logrocket": "^3.0.1",
"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/lib/elements/forms/button.svelte
+17
View File
@@ -3,6 +3,7 @@
export let submit = false;
export let secondary = false;
export let github = false;
export let text = false;
export let danger = false;
export let disabled = false;
@@ -38,6 +39,7 @@
class="button"
class:is-only-icon={round}
class:is-secondary={secondary}
class:is-github={github}
class:is-text={text}
class:is-danger={danger}
class:is-full-width={fullWidth}
@@ -53,6 +55,7 @@
class="button"
class:is-only-icon={round}
class:is-secondary={secondary}
class:is-github={github}
class:is-danger={danger}
class:is-text={text}
class:is-full-width={fullWidth}
@@ -62,3 +65,17 @@
<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/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.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/header.svelte
+94 -10
View File
@@ -5,24 +5,25 @@
DropList,
DropListItem,
DropListLink,
FeedbackGeneral
FeedbackGeneral,
FeedbackNPS
} from '$lib/components';
import { app, feedback } from '$lib/stores/app';
import { user } from '$lib/stores/user';
import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
import LightMode from '$lib/images/mode/light-mode.svg';
import DarkMode from '$lib/images/mode/dark-mode.svg';
import LightMode from '$lib/images/mode/light-mode.svg';
import SystemMode from '$lib/images/mode/system-mode.svg';
import { FeedbackNPS } from '$lib/components';
import { app, feedback } from '$lib/stores/app';
import { newOrgModal, organization, organizationList } from '$lib/stores/organization';
import { user } from '$lib/stores/user';
let showFeedback = false;
import { slide } from 'svelte/transition';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { Submit, trackEvent } from '$lib/actions/analytics';
import { sdkForConsole } from '$lib/stores/sdk';
import { goto } from '$app/navigation';
import { slide } from 'svelte/transition';
import { isCloud } from '$lib/system';
let showFeedback = false;
let showDropdown = false;
let droplistElement: HTMLDivElement;
@@ -52,6 +53,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} />
@@ -113,7 +125,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">
@@ -201,9 +213,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/unauthenticated.svelte
+264 -51
View File
@@ -1,10 +1,16 @@
<script lang="ts">
import AppwriteLogo from '$lib/images/appwrite.svg';
import { app } from '$lib/stores/app';
import { base } from '$app/paths';
import { user } from '$lib/stores/user';
import LoginLight from '$lib/images/login/login-light-mode.svg';
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 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,57 +28,134 @@
'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-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>
<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-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>
<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})`}>
<div class="container u-flex u-flex-vertical u-main-center u-cross-center full-height">
{#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>
{/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">
@@ -84,11 +167,141 @@
</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" />
{#if isCloud}
<div class="is-only-mobile u-margin-block-start-auto theme-dark">
<div class="mobile-beta">Public <span>beta</span></div>
</div>
{/if}
</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);
}
}
.full-height {
block-size: 100vh;
block-size: 100lvh;
}
.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: 6.25rem;
margin-block-end: 3rem;
}
.mobile-beta {
font-size: 0.75rem;
margin-block-end: 2rem;
> span {
background: hsl(var(--color-neutral-120));
padding: 0.25rem 0.375rem 0.25rem 0.5rem;
}
}
@media (max-width: 767px) {
.main-cloud {
background-color: hsl(var(--color-neutral-500));
}
.is-cloud {
background: var(--url);
background-position: center -150px;
background-repeat: no-repeat;
}
.cloud-section {
display: none;
}
}
</style>
src/lib/stores/windowFocus.ts
+29
View File
@@ -0,0 +1,29 @@
import { readable, type Readable } from 'svelte/store';
function isCurrentWindowFocused(): boolean {
if (!window) return false;
if (!window.document) return false;
if (typeof window.document.hasFocus !== 'function') return false;
return window.document.hasFocus();
}
export function windowFocusStore(): Readable<boolean> {
const visibility = readable(isCurrentWindowFocused(), (set) => {
function handler() {
set(isCurrentWindowFocused());
}
if (window) {
window.addEventListener('focus', handler);
window.addEventListener('blur', handler);
return () => {
window.removeEventListener('focus', handler);
window.removeEventListener('blur', handler);
};
}
});
return visibility;
}
src/routes/+layout.svelte
+32 -2
View File
@@ -60,11 +60,12 @@
* Handle initial load.
*/
if (!$page.url.pathname.startsWith('/auth')) {
const acceptedRoutes = ['/login', '/register', '/recover', '/invite'];
const acceptedRoutes = ['/login', '/register', '/recover', '/invite', '/card'];
if ($user) {
if (
!$page.url.pathname.startsWith('/console') &&
!$page.url.pathname.startsWith('/invite')
!$page.url.pathname.startsWith('/invite') &&
!$page.url.pathname.startsWith('/card')
) {
await goto(`${base}/console`, {
replaceState: true
@@ -142,4 +143,33 @@
border-right-color: hsl(var(--p-tooltip--bg-color));
}
}
.theme-dark .with-separators {
--separator-color: hsl(var(--color-neutral-200));
--separator-text: hsl(var(--color-neutral-100));
}
.with-separators {
--separator-color: hsl(var(--color-neutral-5));
--separator-text: hsl(var(--color-neutral-50));
}
.with-separators {
display: flex;
align-items: center;
gap: 1rem;
text-transform: uppercase;
width: 100%;
color: var(--separator-text);
&::before,
&::after {
content: '';
flex: 1;
height: 1px;
background: var(--separator-color);
}
}
</style>
src/routes/+layout.ts
+2 -1
View File
@@ -31,7 +31,8 @@ export const load: LayoutLoad = async ({ depends, url }) => {
'/invite',
'/auth/magic-url',
'/auth/oauth2/success',
'/auth/oauth2/failure'
'/auth/oauth2/failure',
'/card'
];
if (!acceptedRoutes.some((n) => url.pathname.startsWith(n))) {
src/routes/card/+page.svelte
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
import Display from './display.svelte';
export let data;
</script>
<Display userId={data.account.$id} variant="owner" />
src/routes/card/+page.ts
+8
View File
@@ -0,0 +1,8 @@
import { isCloud } from '$lib/system';
import { redirect } from '@sveltejs/kit';
export async function load({ parent }) {
if (!isCloud) throw redirect(303, '/');
const { account } = await parent();
if (!account) throw redirect(303, '/login');
}
src/routes/card/Card.svelte
+434
View File
@@ -0,0 +1,434 @@
<script lang="ts" context="module">
// Helpers
const round = (num: number, fix = 3) => parseFloat(num.toFixed(fix));
const clamp = (num: number, min = -20, max = 20) => Math.min(Math.max(num, min), max);
function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent {
return e.type === 'touchmove';
}
</script>
<script lang="ts">
import { windowFocusStore } from '$lib/stores/windowFocus';
import { spring } from 'svelte/motion';
import { getCardImgUrls } from './helpers';
let cardEl: HTMLDivElement | undefined;
export let active = false;
export let isFlipped = false;
export let userId: string;
let interacting = false;
const springR = { stiffness: 0.066, damping: 0.25 };
const springD = { stiffness: 0.03, damping: 0.45 };
const THICKNESS = 3;
let springRotate = spring({ x: 0, y: 0 }, springR);
let springGlare = spring({ x: 50, y: 50, o: 0.25 }, springR);
let springBackground = spring({ x: 50, y: 50 }, springR);
let springRotateDelta = spring({ x: 0, y: 0 }, springD);
let springTranslate = spring({ x: 0, y: 0 }, springD);
let springScale = spring(1, springD);
let angle = 0;
let centerProximity = spring(0, springR);
let springRotateZ = spring(-15, springD);
// Events
const interact = (e: MouseEvent | TouchEvent) => {
if (!active) return;
interacting = true;
const clientX = isTouchEvent(e) ? e.touches[0].clientX : e.clientX;
const clientY = isTouchEvent(e) ? e.touches[0].clientY : e.clientY;
const el = e.target as HTMLElement;
const rect = el.getBoundingClientRect(); // get element's current size/position
const absolute = {
x: clientX - rect.left, // get mouse position from left
y: clientY - rect.top // get mouse position from right
};
const percent = {
x: round((100 / rect.width) * absolute.x),
y: round((100 / rect.height) * absolute.y)
};
const center = {
x: percent.x - 50,
y: (percent.y - 50) * (isFlipped ? -1 : 1)
};
springBackground.stiffness = springR.stiffness;
springBackground.damping = springR.damping;
springBackground.set({
x: round(50 + percent.x / 4 - 12.5),
y: round(50 + percent.y / 3 - 16.67)
});
springRotate.stiffness = springR.stiffness;
springRotate.damping = springR.damping;
springRotate.set({
x: round(-(center.x / 3.5)),
y: round(center.y / 2)
});
springGlare.stiffness = springR.stiffness;
springGlare.damping = springR.damping;
springGlare.set({
x: percent.x,
y: percent.y,
o: 1
});
// get angle of mouse position relative to center of element
angle = Math.atan2(center.y, center.x) * (180 / Math.PI);
// get proximity to center of element. 0 = center, 1 = edge
$centerProximity = Math.sqrt(center.x * center.x + center.y * center.y) / 50 - 0.1;
};
const interactEnd = (_: unknown, delay = 500) => {
if (!active) return;
setTimeout(function () {
const snapStiff = 0.01;
const snapDamp = 0.06;
interacting = false;
springRotate.stiffness = snapStiff;
springRotate.damping = snapDamp;
springRotate.set({ x: 0, y: 0 });
springGlare.stiffness = snapStiff;
springGlare.damping = snapDamp;
springGlare.set({ x: 50, y: 50, o: 0 });
springBackground.stiffness = snapStiff;
springBackground.damping = snapDamp;
springBackground.set({ x: 50, y: 50 });
$centerProximity = 0;
}, delay);
};
const setCenter = () => {
if (!cardEl) return;
const rect = cardEl.getBoundingClientRect(); // get element's size/position
const view = document.documentElement; // get window/viewport size
const delta = {
x: round(view.clientWidth / 2 - rect.x - rect.width / 2),
y: round(view.clientHeight / 2 - rect.y - rect.height / 2)
};
springTranslate.set({
x: delta.x,
y: delta.y
});
};
const popover = () => {
if (!cardEl) return;
const rect = cardEl.getBoundingClientRect(); // get element's size/position
let delay = 100;
let scaleW = (window.innerWidth / rect.width) * 0.9;
let scaleH = (window.innerHeight / rect.height) * 0.9;
let scaleF = 1.75;
setCenter();
delay = 1000;
springRotateDelta.set({
x: 360,
y: 0
});
springRotateZ.set(0);
springScale.set(Math.min(scaleW, scaleH, scaleF));
interactEnd(null, delay);
};
const retreat = () => {
springScale.set(1);
springTranslate.set({ x: 0, y: 0 });
springRotateDelta.set({ x: 0, y: 0 });
springRotate.set({ x: 0, y: 0 });
springGlare.set({ x: 50, y: 50, o: 0 });
$centerProximity = 0;
springRotateZ.set(-15);
};
const handleClick = () => {
active = !active;
};
const windowKeyDown = (e: KeyboardEvent) => {
if (e.key === 'q') {
springRotateDelta.update((old) => {
return {
...old,
x: old.x + 360
};
});
}
if (!active) return;
if (e.key === 'q') {
isFlipped = !isFlipped;
} else if (e.key === 'Escape') {
active = false;
}
};
$: if (!active) {
isFlipped = false;
} else {
springRotateDelta.update((old) => ({
x: isFlipped ? 180 : 360,
y: old.y
}));
}
// Reactive
$: if (active) {
popover();
interacting = true;
} else {
retreat();
}
windowFocusStore().subscribe((focused) => {
if (focused) {
active = false;
springScale.set(1, { hard: true });
springTranslate.set({ x: 0, y: 0 }, { hard: true });
springRotateDelta.set({ x: 0, y: 0 }, { hard: true });
springRotate.set({ x: 0, y: 0 }, { hard: true });
springRotateZ.set(-15, { hard: true });
centerProximity.set(0, { hard: true });
}
});
$: styles = `
--mx: ${$springGlare.x}%;
--my: ${$springGlare.y}%;
--tx: ${$springTranslate.x}px;
--ty: ${$springTranslate.y}px;
--s: ${$springScale};
--o: ${$springGlare.o};
--rx: ${$springRotate.x + $springRotateDelta.x}deg;
--ry: ${$springRotate.y + $springRotateDelta.y}deg;
--rz: ${$springRotateZ}deg;
--pos: ${$springBackground.x}% ${$springBackground.y}%;
--posx: ${$springBackground.x}%;
--posy: ${$springBackground.y}%;
--hyp: ${clamp(
Math.sqrt(
($springGlare.y - 50) * ($springGlare.y - 50) +
($springGlare.x - 50) * ($springGlare.x - 50)
) / 50,
0,
1
)};
--angle: ${angle}deg;
--center: ${$centerProximity};
`;
const { frontImg, backImg } = getCardImgUrls(userId);
</script>
<svelte:window on:keydown={windowKeyDown} />
<div class="cb-card" class:active class:interacting style={styles} bind:this={cardEl}>
<div class="card__translater">
<button
class="card__rotator"
aria-label="Expand the Card"
tabindex="0"
on:pointermove={interact}
on:mouseout={interactEnd}
on:click={handleClick}
on:blur={() => {
/* noop */
}}>
<div class="card__back">
<img
src={backImg}
alt="The back of the Card"
loading="lazy"
width="450"
height="274" />
<div class="card__glare" />
</div>
{#each new Array(THICKNESS) as _, i (i)}
<div class="card__thick" style:--i={i + 1} />
{/each}
<div class="card__front" style:--thickness={THICKNESS}>
<img src={frontImg} alt="The front of the card" />
<div class="card__glare" />
</div>
</button>
</div>
</div>
<style lang="scss">
@media (prefers-reduced-motion: reduce) {
.cb-card,
.cb-card * {
transition: none !important;
animation: none !important;
pointer-events: none !important;
}
}
:root {
--mx: 50%;
--my: 50%;
--s: 1;
--o: 0;
--tx: 0px;
--ty: 0px;
--rx: 0deg;
--ry: 0deg;
--pos: 50% 50%;
--posx: 50%;
--posy: 50%;
--hyp: 0;
}
:global(.theme-dark) .cb-card {
--shadow-clr: transparent;
}
.cb-card {
--radius: 12px;
--shadow-clr: hsl(var(--color-neutral-30));
z-index: calc(var(--s) * 100);
transform: translate3d(0, 0, 0.1px);
-webkit-transform: translate3d(0, 0, 0.1px);
will-change: transform, visibility;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
&.interacting {
z-index: calc(var(--s) * 120);
}
}
.cb-card.active .card__translater,
.cb-card.active .card__rotator {
touch-action: none;
}
.card__translater,
.card__rotator {
display: grid;
perspective: 600px;
transform-origin: center;
-webkit-transform-origin: center;
will-change: transform;
}
.card__translater {
width: auto;
position: relative;
transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
-webkit-transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
}
.card__rotator {
transform: rotateY(var(--rx)) rotateX(var(--ry)) rotateZ(var(--rz));
transform-style: preserve-3d;
-webkit-transform: rotateY(var(--rx)) rotateX(var(--ry)) rotateZ(var(--rz));
-webkit-transform-style: preserve-3d;
box-shadow: 0px 10px 20px -5px var(--shadow-clr);
border-radius: var(--radius);
outline: none;
appearance: none;
-webkit-appearance: none;
border: none;
background: top;
padding: 0;
:global(*) {
width: 100%;
display: grid;
grid-area: 1/1;
border-radius: var(--radius);
image-rendering: optimizeQuality;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
img {
outline: 1px solid transparent;
height: auto;
}
}
.card__thick {
background-color: transparent;
position: absolute;
width: 100%;
height: 100%;
transform: translateZ(calc(var(--i) * 1px));
}
.card__back {
transform: rotateY(180deg) translateZ(0px);
-webkit-transform: rotateY(180deg) translateZ(0px);
backface-visibility: hidden;
&::before {
--resolved-angle: calc(calc(var(--angle) * -1) + 60deg);
}
}
.card__front {
opacity: 1;
transition: opacity 0.33s ease-out;
transform: translateZ(calc(var(--thickness) * 1px));
position: relative;
backface-visibility: hidden;
* {
backface-visibility: hidden;
}
&::before {
--resolved-angle: calc(var(--angle) + 65deg);
}
}
.card__front::before,
.card__back::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(
from var(--resolved-angle),
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 7.5%,
rgba(255, 255, 255, 0) 15%
);
scale: 1.01;
border-radius: calc(var(--radius) * 1.2);
opacity: var(--center);
}
.card__glare {
border-radius: calc(var(--radius) + 3px);
transform: translateZ(1px);
z-index: 4;
background: radial-gradient(
farthest-corner circle at var(--mx) var(--my),
rgba(255, 255, 255, 0.8) 10%,
rgba(255, 255, 255, 0.65) 20%,
rgba(0, 0, 0, 0.5) 90%
);
mix-blend-mode: overlay;
opacity: calc(var(--o) * 0.5);
}
</style>
src/routes/card/[uid]/+page.svelte
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
import Display from '../display.svelte';
export let data;
</script>
<Display userId={data.userId} variant="external" />
src/routes/card/[uid]/+page.ts
+19
View File
@@ -0,0 +1,19 @@
import { redirect } from '@sveltejs/kit';
import { getCardImgUrls } from '../helpers.js';
export const prerender = true;
export const ssr = true;
export async function load({ params }) {
const userId = params.uid;
const { frontImg } = getCardImgUrls(userId);
const res = await fetch(frontImg);
if (!res.ok) {
throw redirect(303, '/');
}
return {
userId: params.uid
};
}
src/routes/card/display.svelte
+512
View File
@@ -0,0 +1,512 @@
<script lang="ts">
import { Confetti } from 'svelte-confetti';
import Card from './Card.svelte';
import { fade } from 'svelte/transition';
import { getCardImgUrls } from './helpers';
import { copy } from '$lib/helpers/copy';
import { addNotification } from '$lib/stores/notifications';
import { Modal } from '$lib/components';
import Code from '$lib/components/code.svelte';
import Button from '$lib/elements/forms/button.svelte';
import { browser } from '$app/environment';
export let userId: string;
export let variant: 'owner' | 'external';
let triggerConfettiKey = 1;
const confettiColors = [
'hsl(var(--color-primary-100))',
'hsl(var(--color-primary-200))',
'hsl(var(--color-primary-300))',
'#F05088',
'#FF86BB',
'#FFFFFF80'
];
let cardActive = false;
let cardIsFlipped = false;
let showEmbedCode = false;
const { frontImg, ogImg } = getCardImgUrls(userId);
$: title = variant === 'owner' ? 'Welcome to the cloud' : 'Join the Appwrite Cloud';
$: shareableLink =
typeof window !== 'undefined' ? `${window.location.origin}/card/${userId}` : '';
$: embedCode = [
`<a href="${shareableLink}">`,
`\t<img src="${frontImg}" alt="Appwrite Cloud Card" />`,
`</a>`
].join('\n');
$: twitterText = encodeURIComponent(
[`Check out my Appwrite Cloud card at ${shareableLink}!`].join('\n')
);
function copyShareableLink() {
copy(shareableLink);
addNotification({
title: 'Link copied',
message: 'Share your card with everyone you know!',
type: 'success'
});
}
function copyEmbedCode() {
copy(embedCode);
addNotification({
title: 'Embed code copied',
message: 'Paste this code to embed your card!',
type: 'success'
});
showEmbedCode = false;
}
const seo = {
title: 'Appwrite Cloud Card',
description:
'Cloud is live in public beta, create your Cloud account and unlock your exclusive card!'
};
</script>
<svelte:head>
<!-- HTML Meta Tags -->
<title>{seo.title}</title>
<meta name="description" content={seo.description} />
<!-- Facebook Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content={seo.title} />
<meta property="og:description" content={seo.description} />
<meta property="og:image" content={ogImg} />
<!-- Twitter Meta Tags -->
<meta name="twitter:title" content={seo.title} />
<meta name="twitter:description" content={seo.description} />
<meta name="twitter:image" content={ogImg} />
</svelte:head>
<div class="wrapper">
<div class="card">
<h3 class="heading-level-3 u-flex u-cross-center u-gap-8">
{title}
<button class="confetti-btn" on:click={() => triggerConfettiKey++}>
🎉
{#each Array(triggerConfettiKey) as _, i (i)}
<Confetti
delay={i === 0 ? [500, 500] : [0, 100]}
x={[0.5, 2]}
y={[0, 1.5]}
amount="30"
fallDistance="50px"
colorArray={confettiColors} />
{/each}
</button>
</h3>
<div class="content">
{#if variant === 'owner'}
<div class="hoodie-container">
<img
src="/images/hoodies-bg.png"
alt="red background"
aria-hidden="true"
class="bg" />
<img src="/images/hoodie-1.png" class="hoodie" alt="Cloud Beta hoodies" />
<img src="/images/hoodie-2.png" class="hoodie" alt="Cloud Beta hoodies" />
</div>
{/if}
<div>
<div class="u-flex u-cross-center u-gap-8">
<h4 class="eyebrow-heading-1">Cloud is live in public</h4>
<h4 class="eyebrow-heading-1 beta-tag">Beta</h4>
</div>
<p class="u-margin-block-start-8">
{#if variant === 'owner'}
Share your Cloud card and you may win an exclusive Cloud hoodie!
{:else}
Create your Cloud account and unlock your exclusive card!
{/if}
</p>
</div>
</div>
<img
class="card-preview"
src={getCardImgUrls(userId).frontImg}
alt="The front of the card" />
<ul class="buttons-list u-margin-block-start-32">
<li class="buttons-list-item">
<a
class="button is-text"
href="https://twitter.com/intent/tweet?text={twitterText}"
target="_blank">
<span class="icon-twitter" aria-hidden="true" />
<span class="text">Tweet it</span>
</a>
</li>
{#if variant === 'owner'}
<li class="buttons-list-item">
<button class="button is-text" on:click={() => (showEmbedCode = true)}>
<span class="icon-code" aria-hidden="true" />
<span class="text">Get embed code</span>
</button>
</li>
{/if}
<li class="buttons-list-item">
<button class="button is-text" on:click={copyShareableLink}>
<span class="icon-link" aria-hidden="true" />
<span class="text">Get a link</span>
</button>
</li>
</ul>
<div class="card-footer">
{#if variant === 'owner'}
<a href="/console" class="button">Go to console</a>
{:else}
<a href="/card" class="button">Claim your card</a>
{/if}
</div>
</div>
<div class="cbc-wrapper">
{#if !cardActive}
<div transition:fade>
<Confetti
x={[-1.75, 1.85]}
y={[-1.875, 1]}
amount={100}
size="10"
infinite
delay={[2000, 7000]}
colorArray={confettiColors}
fallDistance="50px" />
</div>
{/if}
{#if browser}
<Card bind:active={cardActive} bind:isFlipped={cardIsFlipped} {userId} />
{/if}
</div>
{#if cardActive}
<div
class="overlay"
on:click={() => (cardActive = false)}
on:keydown={() => {
/* no-op */
}}
transition:fade />
{/if}
<div class="controls" class:invisible={!cardActive}>
<button
class="button is-text"
on:click={() => (cardIsFlipped = !cardIsFlipped)}
aria-label="Rotate card">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 11C2 8.2 6.5 6 12 6C17.5 6 22 8.2 22 11C22 12.8414 20.0779 14.3752 17.2449 15.2644C16.615 15.4621 16 14.9707 16 14.3105C16 13.8351 16.3283 13.4267 16.7816 13.2837C18.8093 12.6442 20 11.6237 20 11C20 9.9 17 8 12 8C7 8 4 9.9 4 11C4 11.7821 6.79551 13.1137 9.91054 13.7336C10.0265 13.7566 10.1405 13.7886 10.2509 13.8305C10.308 13.8187 10.3669 13.8125 10.4273 13.8125L9.26357 12.6004C8.9121 12.2343 8.9121 11.6407 9.26357 11.2746C9.61504 10.9085 10.1849 10.9085 10.5364 11.2746L13.2364 14.0871C13.4051 14.2629 13.5 14.5013 13.5 14.75C13.5 14.9986 13.4051 15.2371 13.2364 15.4129L10.5364 18.2254C10.1849 18.5915 9.61504 18.5915 9.26357 18.2254C8.9121 17.8593 8.9121 17.2657 9.26357 16.8996L10.2838 15.8369C6.24683 15.1056 2 13.1614 2 11Z"
fill="currentColor" />
</svg>
<span class="text">Spin</span>
</button>
</div>
</div>
<Modal bind:show={showEmbedCode}>
<svelte:fragment slot="header">Get Embed Code</svelte:fragment>
<div class="u-overflow-hidden">
HTML Code
<Code language="html" code={embedCode} noMargin />
</div>
<svelte:fragment slot="footer">
<Button on:click={copyEmbedCode}>Copy</Button>
</svelte:fragment>
</Modal>
<style lang="scss">
:global(.theme-dark) .wrapper {
--glow: hsl(var(--color-primary-100));
--beta-bg: hsl(var(--color-neutral-120));
--beta-fg: hsl(var(--color-neutral-0));
--sep-clr: hsl(var(--color-neutral-150));
}
.wrapper {
--glow: transparent;
--beta-bg: rgba(240, 46, 101, 0.16);
--beta-fg: rgba(240, 46, 101, 0.8);
--sep-clr: hsl(var(--color-neutral-10));
display: grid;
place-items: center;
justify-content: center;
flex-grow: 1;
position: relative;
grid-template-columns: 600px 400px;
padding-block: 4rem;
gap: max(4rem, 10vw);
overflow: hidden;
min-height: 100vh;
}
.card {
max-width: 660px;
.content {
display: flex;
align-items: center;
gap: 1.5rem;
margin-block-start: 2.5rem;
.beta-tag {
background-color: var(--beta-bg);
color: var(--beta-fg);
padding-inline: 0.75rem; // 12px
padding-block: 0.25rem; // 4px
border-radius: 0.375rem; // 6px
}
p {
font-size: 1rem;
}
.hoodie-container {
position: relative;
flex-shrink: 0;
.bg {
display: block;
width: 9.9375rem; // 159px
height: 7.375rem; // 118px
aspect-ratio: 358 / 265.69;
background-color: #ec2f65;
border-radius: 12px;
transition: 300ms ease;
}
.hoodie {
display: block;
position: absolute;
object-fit: contain;
width: 5.8125rem; // 93px
height: 5.8125rem; // 93px
transition: 300ms ease;
&:nth-child(2) {
top: 1rem;
left: 0.1875rem;
}
&:nth-child(3) {
top: 0.5625rem; // 9px
right: 0.1875rem; // 3px
}
}
&:hover {
.bg {
box-shadow: 0 0 30px var(--glow);
}
.hoodie:nth-child(2) {
scale: 1.5;
rotate: -5deg;
translate: -1rem 1rem;
}
.hoodie:nth-child(3) {
scale: 1.5;
rotate: 5deg;
translate: 1rem -1rem;
}
}
}
}
.card-preview {
display: none;
}
.card-footer {
display: flex;
justify-content: flex-end;
border-top: 1px solid var(--sep-clr);
margin-block-start: 2rem;
padding-block-start: 2rem;
margin-inline: -2rem;
padding-inline: 2rem;
}
}
.cbc-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes shake {
0% {
translate: 0;
}
25% {
translate: 0 -4px;
}
50% {
translate: 0 0px;
}
75% {
translate: 0 0px;
}
100% {
translate: 0 0px;
}
}
.confetti-btn {
animation: shake 2000ms ease infinite;
user-select: none;
display: grid;
place-items: center;
position: relative;
:global(.confetti-holder) {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.controls {
display: flex;
align-items: center;
gap: 0.5rem;
position: absolute;
top: 80%;
left: 50%;
translate: -50% -50%;
transition: opacity 250ms ease;
&.invisible {
opacity: 0;
}
}
.buttons-list-item:first-child .button {
padding-inline-start: 0;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: hsl(var(--p-body-bg-color));
backdrop-filter: blur(80px);
opacity: 0.5;
}
@media (max-width: 1024px) {
.wrapper {
display: block;
padding-block: 2rem;
max-width: min(100%, 500px);
margin: 0 auto;
}
.card {
background-color: transparent;
border: none;
padding-inline: 1rem;
padding-block: 0;
.content {
flex-direction: column;
align-items: stretch;
margin-block-start: 1rem;
padding-block-end: 2rem;
border-block-end: 1px solid var(--sep-clr);
.hoodie-container {
.bg {
width: 100%;
height: auto;
}
.hoodie {
width: 65%;
height: auto;
&:nth-child(2) {
top: 10%;
left: 0;
}
&:nth-child(3) {
top: 0%;
right: 0;
}
}
&:hover {
.hoodie:nth-child(2) {
scale: 1.25;
}
.hoodie:nth-child(3) {
scale: 1.25;
}
}
}
}
.card-preview {
display: block;
margin-block-start: 2rem;
}
.buttons-list {
flex-wrap: wrap;
justify-content: center;
.buttons-list-item {
border: none !important;
}
}
.card-footer {
border: none;
padding-block-start: 0;
.button {
display: grid;
place-items: center;
text-align: center;
width: 100%;
}
}
}
.confetti-btn {
display: none;
}
.cbc-wrapper {
display: none;
}
}
</style>
src/routes/card/helpers.ts
+9
View File
@@ -0,0 +1,9 @@
import { VARS } from '$lib/system';
export function getCardImgUrls(userId: string) {
const frontImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud?userId=${userId}`;
const backImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud-back?userId=${userId}`;
const ogImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud-og?userId=${userId}`;
return { frontImg, backImg, ogImg };
}
src/routes/console/+layout.svelte
+1
View File
@@ -50,6 +50,7 @@
showSideNavigation={$page.url.pathname !== '/console' &&
!$page?.params.organization &&
!$page.url.pathname.includes('/console/account') &&
!$page.url.pathname.includes('/console/card') &&
!$page.url.pathname.includes('/console/onboarding')}>
<Header slot="header" />
<SideNavigation slot="side" />
src/routes/login/+page.svelte
+16
View File
@@ -37,6 +37,15 @@
trackError(error, Submit.AccountCreate);
}
}
function onGithubLogin() {
sdkForConsole.account.createOAuth2Session(
'github',
window.location.origin,
window.location.origin,
['read:user', 'user:email']
);
}
</script>
<svelte:head>
@@ -66,6 +75,13 @@
<FormItem>
<Button fullWidth submit {disabled}>Sign in</Button>
</FormItem>
<span class="with-separators eyebrow-heading-3">or</span>
<FormItem>
<Button github fullWidth on:click={onGithubLogin} {disabled}>
<span class="icon-github" aria-hidden="true" />
<span class="text">Sign in with GitHub</span>
</Button>
</FormItem>
</FormList>
</Form>
</svelte:fragment>
src/routes/register/+page.svelte
+22 -10
View File
@@ -16,11 +16,6 @@
import FormList from '$lib/elements/forms/formList.svelte';
import { Dependencies } from '$lib/constants';
import { trackEvent } from '$lib/actions/analytics';
import LoginLight from '$lib/images/login/login-light-mode.svg';
import LoginDark from '$lib/images/login/login-dark-mode.svg';
let imgLight = LoginLight;
let imgDark = LoginDark;
let name: string, mail: string, pass: string, disabled: boolean;
let terms = false;
@@ -41,13 +36,22 @@
});
}
}
function onGithubLogin() {
sdkForConsole.account.createOAuth2Session(
'github',
window.location.origin,
window.location.origin,
['read:user', 'user:email']
);
}
</script>
<svelte:head>
<title>Sign up - Appwrite</title>
</svelte:head>
<Unauthenticated {imgLight} {imgDark}>
<Unauthenticated>
<svelte:fragment slot="title">Sign up</svelte:fragment>
<svelte:fragment>
<Form on:submit={register}>
@@ -56,20 +60,21 @@
id="name"
label="Name"
placeholder="Your name"
autofocus={true}
autofocus
required
bind:value={name} />
<InputEmail
id="email"
label="Email"
placeholder="Your email"
required={true}
required
bind:value={mail} />
<InputPassword
id="password"
label="Password"
placeholder="Your password"
required={true}
showPasswordButton={true}
required
showPasswordButton
bind:value={pass} />
<InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
By registering, you agree that you have read, understand, and acknowledge our <a
@@ -88,6 +93,13 @@
<FormItem>
<Button fullWidth submit {disabled}>Sign up</Button>
</FormItem>
<span class="with-separators eyebrow-heading-3">or</span>
<FormItem>
<Button github fullWidth on:click={onGithubLogin} {disabled}>
<span class="icon-github" aria-hidden="true" />
<span class="text">Sign up with GitHub</span>
</Button>
</FormItem>
</FormList>
</Form>
</svelte:fragment>
static/images/cloud-beta-hoodies.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

static/images/hoodie-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

static/images/hoodie-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

static/images/hoodies-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB