diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 00000000..d1d13ddd Binary files /dev/null and b/public/.DS_Store differ diff --git a/public/images/clouds.svg b/public/images/clouds.svg index 5d4bca34..2e9142d6 100644 --- a/public/images/clouds.svg +++ b/public/images/clouds.svg @@ -9,6 +9,9 @@ id="svg5" inkscape:version="1.2 (dc2aeda, 2022-05-15)" sodipodi:docname="clouds.svg" + inkscape:export-filename="../../../../../Pictures/clouds.png" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" @@ -25,15 +28,15 @@ inkscape:deskcolor="#505050" inkscape:document-units="px" showgrid="false" - inkscape:zoom="0.63169479" - inkscape:cx="1247.4379" - inkscape:cy="868.29908" + inkscape:zoom="0.4890458" + inkscape:cx="918.11442" + inkscape:cy="436.56443" inkscape:window-width="1440" inkscape:window-height="847" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="1" - inkscape:current-layer="g875" + inkscape:current-layer="svg5" showguides="false"> + + + + + + + + + + + + + + + + @@ -1693,17 +1744,6 @@ x2="-135.27721" y2="290.15317" gradientUnits="userSpaceOnUse" /> - - - - - - - - - - - - - - + + + + + + + + + + + + + + + d="M 202.80799 23.032013 C 202.33969 23.4738 201.38666 24.371809 201.38666 24.371809 L 201.38693 84.151176 C 201.38693 84.151176 207.40897 88.722407 208.64547 92.331241 C 209.88197 95.940072 207.86213 104.25826 207.86213 104.25826 L 201.38699 152.68953 C 201.38699 152.77343 201.45429 152.84093 201.53816 152.84093 L 321.73004 152.84084 C 321.81394 152.84084 321.88136 152.77324 321.88136 152.68936 L 321.88127 24.157961 L 321.87429 24.256464 C 321.87429 24.172584 320.4867 22.729207 320.4028 22.729207 L 320.40576 22.674718 L 303.98792 22.674818 L 300.78425 23.846496 L 296.58058 22.759432 L 289.87956 24.071925 L 277.77033 22.674606 L 270.18339 22.674704 C 269.66029 23.025914 268.71422 22.295341 267.38381 23.493312 C 266.65071 24.15343 266.37824 25.477026 265.34334 26.711897 C 261.67144 31.093312 258.63355 26.326224 256.9795 23.323392 C 256.76328 22.930851 255.97056 22.767417 255.15281 22.704248 L 243.41541 23.602382 L 232.85647 22.674638 L 230.76264 22.674654 L 214.63098 23.452894 L 202.80799 23.032013 z M 255.27929 22.694605 L 258.81907 22.674791 L 255.5402 22.674583 L 255.27929 22.694605 z " + transform="rotate(14.384203)" /> + d="M 233.88124 84.031103 C 233.70718 86.8755 233.55135 90.887217 233.73962 94.465111 C 233.54073 96.708988 233.44086 99.12785 233.7557 100.38725 C 234.43944 103.12218 236.29531 103.41538 236.39299 106.05264 C 236.49069 108.68988 234.43952 112.20619 231.80227 111.81549 C 229.16502 111.42478 227.30901 113.96418 227.30901 113.96418 L 230.63014 112.30377 C 230.63014 112.30377 241.21494 115.03766 237.73986 104.41147 C 241.48878 107.259 247.11559 108.99722 247.49286 112.14132 C 247.99898 116.359 249.01134 125.46914 247.99913 130.36165 C 246.98689 135.25412 248.33643 136.26644 251.03574 136.26644 C 253.73506 136.26644 256.77173 134.74818 256.60303 132.04886 C 256.43433 129.34959 250.86704 127.32505 251.03574 123.95091 C 251.20446 120.57677 248.50526 111.29785 249.18008 108.93595 C 249.85492 106.57409 252.04819 99.488434 255.25363 96.620424 C 256.82069 95.218327 258.99134 92.68751 260.70358 90.269302 L 256.08036 89.083612 C 255.48647 89.293461 254.75156 88.351297 253.1655 89.181079 C 252.29139 89.638384 251.69866 90.852801 250.38943 91.791868 C 245.74422 95.123751 243.98579 89.751421 243.12956 86.431817 C 243.01803 85.999393 242.29675 85.643929 241.52341 85.379868 L 233.88124 84.031103 z M 241.63886 85.400371 L 245.06124 86.257701 L 241.89656 85.445792 L 241.63886 85.400371 z M 234.35659 99.460528 C 234.49291 100.0396 234.65272 100.56057 234.83983 101.00675 C 234.91018 101.17451 234.98875 101.33846 235.07451 101.49913 C 234.65767 101.09071 234.34177 100.56264 234.34177 99.898971 C 234.34177 99.768745 234.34707 99.620965 234.35659 99.460528 z " /> + + + + + + + https://www.dreamstime.com/vector-blue-https://www.dreamstime.com/vector-blue-sky-clouds-anime-clean-style-background-sky-clouds-anime-clean-style-background-design-vector-blue-sky-white-clouds-anime-design-vector-blue-sky-white-clouds-anime-clean-style-background-design-clean-style-background-design-image171922573 + id="tspan14233">image171922573 + + + + style="opacity:1;fill:#1d222b;fill-opacity:1;stroke-width:1.05833" + d="m 335.49095,134.28423 c -1.95772,-0.0526 -4.33916,0.19952 -7.28172,0.85427 -15.18521,3.37886 -9.28558,16.51789 -10.00837,28.80518 -0.72276,12.28729 -4.28536,15.9704 -7.89927,19.58431 -3.61392,3.6139 -6.47602,20.3284 -6.83741,29.36317 -0.36139,9.03477 7.71139,24.15948 7.71139,24.15948 l 9.2664,16.09746 4.25766,8.6276 0.33836,2.51726 -36.44043,13.70462 -12.37543,14.38742 2.23808,43.4642 -7.14516,37.11111 -12.4786,17.76957 6.18619,18.75735 13.03851,-4.769 18.61624,-9.43633 26.60808,-73.43471 25.12108,-4.74321 4.71893,-1.52947 -0.81785,19.49023 55.41174,-0.86792 7.7263,-41.1715 0.047,-18.73764 -0.58569,0.0668 0.79053,-0.95745 -7.64587,-22.67512 c -3.38121,-22.47608 -8.79926,-57.28094 -11.47109,-66.75386 -3.97532,-14.09424 -27.8604,-12.97109 -35.44962,-18.03055 -7.58919,-5.05948 -6.80012,-15.37524 -13.05823,-21.79659 -3.58663,-3.6802 -4.09833,-9.62853 -12.58178,-9.85665 z" + sodipodi:nodetypes="sssssccccccccccccccccccccccssss" /> + sodipodi:nodetypes="ccccccccccccccccc" /> + + - - - - - + id="g5893" + transform="translate(3.1075124)"> + style="fill:#383a4a;fill-opacity:1;stroke:none;stroke-width:1.55376;stroke-dasharray:none" + d="m 225.64645,238.07162 20.15208,2.74802 v 4.80904 l -13.96905,1.60301 15.80108,0.916 0.91602,3.20602 -13.7401,2.97702 h 14.42709 l 0.45805,3.20602 -13.51116,2.97702 h 9.38912 l -2.51903,2.97702 -9.16009,-0.687 -8.47302,-11.22108 z" + id="path9172" + sodipodi:nodetypes="ccccccccccccccc" /> - - - - + d="m 418.68297,115.11442 c -9.5404,1.04378 -19.4316,2.1142 -23.69416,12.78372 -5.5157,13.80615 -3.49399,16.09103 -7.3949,34.67901 l 0.15503,-0.006 -13.16716,10.61486 c 0,0 -13.01806,4.65383 -18.95284,10.23813 -5.9348,5.58432 -2.84893,-4.4078 -8.41396,12.34034 -5.37379,16.17254 -4.04159,85.21611 -3.94291,89.98572 l 129.10165,-10.39343 c -0.33587,-4.11407 20.9771,1.18917 20.72021,-5.08521 -0.76298,-18.63525 -2.21867,-53.37707 -4.59869,-59.9674 -2.38001,-6.59036 -3.05857,-38.36167 -18.35495,-38.49998 -6.02751,-0.0545 -15.31004,-5.281 -24.34322,-11.62513 l 0.0961,-0.004 c -4.41422,-15.23306 -3.68634,-19.01965 -8.28218,-34.25269 -4.9031,-4.94441 -7.34825,-8.53387 -18.92804,-10.80761 z" + transform="translate(3.1750001)" + sodipodi:nodetypes="cscccssccsssccccc" /> + + + + + - + id="path4213" /> + id="path4221" /> + id="path4223" /> + + + + + + + + + + + + + + + + - + transform="matrix(1.160889,0.52966695,-0.52966695,1.160889,383.20941,-116.34702)"> + style="fill:#917c6f;stroke-width:2.91395" + d="m 184.18003,135.17672 43.51181,-1.79247 -0.90032,-2.87289 -43.0468,2.81168 z" + id="path4253" /> - - - - - - + style="fill:#917c6f;stroke-width:2.91395" + d="m 191.55575,160.33841 42.72507,-0.81782 -0.34295,-2.10106 -42.64756,0.98769 z" + id="path4257" /> + style="fill:none;stroke:#917c6f;stroke-width:1.45697;stroke-dasharray:none" + d="m 202.16189,170.52644 c 0,0 8.06264,-7.87463 17.01654,-6.13218 8.95383,1.74248 10.56081,8.58536 16.83993,5.48734 6.27912,-3.09802 5.19493,-12.62708 5.19493,-12.62708" + id="path4259" /> + style="opacity:1;fill:url(#linearGradient5676);fill-opacity:1;stroke:none;stroke-width:1.49296" + d="m 210.55057,166.92819 -10.72707,-2.68177 -16.38857,-51.84748 11.91897,-13.110864 17.87844,5.065564 14.8987,53.33735 -9.23721,7.15138 1.1919,5.06556 13.70682,-10.72707 -15.19668,-57.80696 -23.83792,-8.641252 -16.68655,17.282492 17.2825,59.59481 16.98451,2.97974 z" + id="path4261" /> + style="opacity:1;fill:#1f1c24;fill-opacity:1;stroke-width:1.49296" + d="m 256.00406,327.25205 -28.05184,-96.92286 -7.36663,-29.70228 -11.8217,-38.03843 4.65172,-2.90732 5.81466,2.61659 19.47907,70.64804 26.8889,93.43408 z" + id="path4263" + sodipodi:nodetypes="ccccccccc" /> + style="fill:#6c5d53;stroke-width:2.91395" + d="m 191.0186,158.37524 30.68781,-50.52707 0.49344,2.10132 -30.61676,51.1926 z" + id="path4265" /> + style="fill:#6c5d53;stroke-width:2.91395" + d="m 221.63171,108.03791 -43.51112,6.23008 0.62934,1.79404 43.58257,-6.07348 z" + id="path4267" /> + style="fill:#6c5d53;stroke-width:2.91395" + d="m 200.30083,170.50923 26.73805,-39.90551 0.83769,2.28579 -25.84415,38.26627 z" + id="path4269" /> + style="fill:#6c5d53;stroke-width:2.91395" + d="m 183.34235,132.89094 23.04872,-37.19607 1.22199,0.879062 -23.58804,38.263058 z" + id="path4271" /> + style="fill:#6c5d53;stroke-width:2.91395" + d="m 210.42869,97.417469 -2.55554,6.663341 1.21891,0.23273 2.57134,-6.509174 z" + id="path4273" + sodipodi:nodetypes="ccccc" /> + style="fill:#6c5d53;stroke-width:2.91395" + d="m 212.60886,105.16293 4.15237,-5.396368 0.80664,0.701958 -4.54787,5.38228 z" + id="path4275" /> + style="fill:none;stroke:#6c5d53;stroke-width:1.45697;stroke-dasharray:none" + d="m 219.19963,105.17459 c 0,0 5.33426,-7.212576 10.495,-6.886438 5.16066,0.326161 10.79229,4.749978 16.24174,-1.699259 5.44939,-6.449207 5.48729,-16.839903 5.48729,-16.839903" + id="path4277" /> + + + + - diff --git a/public/images/clouds__bg.svg b/public/images/clouds__bg.svg new file mode 100644 index 00000000..6006a90a --- /dev/null +++ b/public/images/clouds__bg.svg @@ -0,0 +1,1255 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/clouds__cloud.svg b/public/images/clouds__cloud.svg new file mode 100644 index 00000000..1057fa16 --- /dev/null +++ b/public/images/clouds__cloud.svg @@ -0,0 +1,1902 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/clouds__cube.svg b/public/images/clouds__cube.svg new file mode 100644 index 00000000..8c911ac8 --- /dev/null +++ b/public/images/clouds__cube.svg @@ -0,0 +1,1337 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/clouds__dudes.svg b/public/images/clouds__dudes.svg new file mode 100644 index 00000000..fcef9104 --- /dev/null +++ b/public/images/clouds__dudes.svg @@ -0,0 +1,2074 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/clouds__trash.svg b/public/images/clouds__trash.svg new file mode 100644 index 00000000..c25b840e --- /dev/null +++ b/public/images/clouds__trash.svg @@ -0,0 +1,3652 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/auth/login/LoginScene/index.tsx b/src/components/auth/login/LoginScene/index.tsx index 8da5b5de..a4dbee40 100644 --- a/src/components/auth/login/LoginScene/index.tsx +++ b/src/components/auth/login/LoginScene/index.tsx @@ -1,14 +1,87 @@ -import React, { FC, useState } from "react"; +import React, { + FC, + memo, + MouseEventHandler, + useCallback, + useEffect, + useRef, + useState, +} from "react"; import styles from "./styles.module.scss"; interface LoginSceneProps {} -const LoginScene: FC = () => { +interface Layer { + src: string; + velocity: number; + width: number; + height: number; +} + +const layers: Layer[] = [ + { + src: "/images/clouds__bg.svg", + velocity: -0.3, + width: 3840, + height: 1080, + }, + { + src: "/images/clouds__cube.svg", + velocity: -0.1, + width: 3840, + height: 1080, + }, + { + src: "/images/clouds__cloud.svg", + velocity: 0.2, + width: 3840, + height: 1080, + }, + { + src: "/images/clouds__dudes.svg", + velocity: 0.5, + width: 3840, + height: 1080, + }, + { + src: "/images/clouds__trash.svg", + velocity: 0.8, + width: 3840, + height: 1080, + }, +]; + +const LoginScene: FC = memo(() => { + const ref = useRef(null); const [loaded, setLoaded] = useState(false); + const onMouseMove = useCallback( + (event: MouseEvent): any => { + if (!ref.current) { + return; + } + + const { x, width } = ref.current.getBoundingClientRect(); + const middle = (width - x) / 2; + const shift = event.pageX / middle / 2 - 0.5; + + layers.map((it, index) => { + document.getElementById( + `LoginScene__${index}`, + )?.style.transform = `translate(${shift * it.velocity * 200}px, 0)`; + }); + }, + [ref], + ); + + useEffect(() => { + document.addEventListener("mousemove", onMouseMove); + return () => document.removeEventListener("mousemove", onMouseMove); + }, []); + return ( -
+
= () => { fill="url(#fallbackGradient)" /> - setLoaded(true)} - className={styles.image} - /> + {layers.map((it, index) => ( + setLoaded(true)} + className={styles.image} + /> + ))}
); -}; +}); export { LoginScene }; diff --git a/src/components/auth/login/LoginScene/styles.module.scss b/src/components/auth/login/LoginScene/styles.module.scss index ef5035b6..eacda5ab 100644 --- a/src/components/auth/login/LoginScene/styles.module.scss +++ b/src/components/auth/login/LoginScene/styles.module.scss @@ -10,6 +10,7 @@ .image { transition: opacity 1s; + will-change: opacity, transform; @include tablet { display: none;