cryagent/celestia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initv1

Browse Source
This commit is contained in:
Reihan 2025-03-01 00:02:52 +07:00
parent 3e1ab16101
commit ca28120f3c
34 changed files with 27485 additions and 25413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/audio/bg-ambient.mp3 Normal file
View File

Binary file not shown.

BIN
public/assets/audio/selection-sound.mp3 Normal file
View File

Binary file not shown.

777
public/dev.svg Normal file
View File

@ -0,0 +1,777 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 130" width="200" height="130" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
<defs>
<clipPath id="__lottie_element_95">
<rect width="200" height="130" x="0" y="0"></rect>
</clipPath>
<g id="__lottie_element_99">
<g transform="matrix(-0.07937642931938171,-0.05102217569947243,-0.015582544729113579,0.08837300539016724,143.1018524169922,39.17967224121094)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(17.248016357421875,0,0,17.72298812866211,51.79583740234375,51.44256591796875)">
<path fill="rgb(1,7,40)" fill-opacity="1" d=" M30.89946937561035,0 C30.89946937561035,0 0,0 0,0 C0,0 0,21.97295570373535 0,21.97295570373535 C0,21.97295570373535 30.89946937561035,21.97295570373535 30.89946937561035,21.97295570373535 C30.89946937561035,21.97295570373535 30.89946937561035,0 30.89946937561035,0z"></path>
</g>
</g>
</g>
<linearGradient id="__lottie_element_112" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-14.902325630187988" y1="15.124655723571777" x2="24.40859031677246" y2="15.124655723571777">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
</linearGradient>
<linearGradient id="__lottie_element_113" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-14.902325630187988" y1="15.124655723571777" x2="24.40859031677246" y2="15.124655723571777">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
</linearGradient>
<linearGradient id="__lottie_element_114" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-14.902325630187988" y1="15.124655723571777" x2="24.40859031677246" y2="15.124655723571777">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
</linearGradient>
<linearGradient id="__lottie_element_115" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-14.902325630187988" y1="15.124655723571777" x2="24.40859031677246" y2="15.124655723571777">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
</linearGradient>
<linearGradient id="__lottie_element_116" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-14.902325630187988" y1="15.124655723571777" x2="24.40859031677246" y2="15.124655723571777">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
</linearGradient>
<linearGradient id="__lottie_element_117" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-14.902325630187988" y1="15.124655723571777" x2="24.40859031677246" y2="15.124655723571777">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
</linearGradient>
<linearGradient id="__lottie_element_118" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="58.0168571472168" y1="736.1390380859375" x2="991.4862670898438" y2="736.1390380859375">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0.30000001192092896"></stop>
</linearGradient>
<mask id="__lottie_element_99_1" mask-type="alpha">
<use xlink:href="#__lottie_element_99"></use>
</mask>
</defs>
<g clip-path="url(#__lottie_element_95)">
<g transform="matrix(1.1727010011672974,0,0,1.1727010011672974,-17.52361297607422,-9.573005676269531)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1.0277440547943115,0,0,1.0277440547943115,-15.605575561523438,4.192066192626953)">
<g opacity="1" transform="matrix(0.8899999856948853,0,0,0.8899999856948853,150.77674865722656,43.49359130859375)">
<path fill="url(#__lottie_element_112)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.6030309796333313,0,0,0.6030309796333313,27.652389526367188,-152.19296264648438)">
<g opacity="1" transform="matrix(1,0,0,1,0,0)"><g opacity="1" transform="matrix(1,0,0,1,0,117.91035461425781)">
<g opacity="1" transform="matrix(0.9348480105400085,0.5955638885498047,0,0.21355199813842773,182.3061981201172,146.00790405273438)">
<path fill="rgb(128,161,170)" fill-opacity="1" d=" M-0.15258200466632843,70.53523254394531 C-0.15258200466632843,70.53523254394531 31.193363189697266,70.1609878540039 31.193363189697266,70.1609878540039 C31.193363189697266,70.1609878540039 31.08125114440918,302.4053039550781 31.08125114440918,302.4053039550781 C31.08125114440918,302.4053039550781 -0.15258200466632843,302.3388671875 -0.15258200466632843,302.3388671875 C-0.15258200466632843,302.3388671875 -0.15258200466632843,70.53523254394531 -0.15258200466632843,70.53523254394531"></path>
</g>
<g opacity="1" transform="matrix(-0.0930740013718605,-0.0592946782708168,0,3.513979911804199,185.10427856445312,150.53675842285156)">
<path fill="rgb(36,51,54)" fill-opacity="1" d=" M-263.37493896484375,4.301459789276123 C-263.37493896484375,4.301459789276123 14.1271333694458,4.25002908706665 14.1271333694458,4.25002908706665 C14.1271333694458,4.25002908706665 14.1271333694458,16.830034255981445 14.1271333694458,16.830034255981445 C14.1271333694458,16.830034255981445 4.631783962249756,16.724512100219727 4.631783962249756,16.724512100219727 C4.631783962249756,16.724512100219727 -262.5654296875,8.223922729492188 -262.5654296875,8.223922729492188 C-262.5654296875,8.223922729492188 -262.5654296875,8.010250091552734 -262.5654296875,8.010250091552734 C-262.5654296875,8.010250091552734 -263.37493896484375,4.301459789276123 -263.37493896484375,4.301459789276123"></path>
</g>
<g opacity="1" transform="matrix(1.8269139528274536,1.1638725996017456,0,0.10354399681091309,183.80857849121094,207.09689331054688)">
<path fill="rgb(52,72,77)" fill-opacity="1" d=" M14.085890769958496,-282.83349609375 C14.085890769958496,-282.83349609375 14.1271333694458,16.830034255981445 14.1271333694458,16.830034255981445 C14.1271333694458,16.830034255981445 0,16.830034255981445 0,16.830034255981445"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,68.54904174804688,154.30860900878906)">
<g opacity="1" transform="matrix(0.4094409942626953,-0.2608426809310913,0,0.5016899704933167,140.54124450683594,178.52748107910156)">
<path fill="rgb(21,49,54)" fill-opacity="1" d=" M-4.065619945526123,16.041175842285156 C-4.065619945526123,16.041175842285156 -3.943308115005493,-4.416314125061035 -3.943308115005493,-4.416314125061035 C-3.943308115005493,-4.416314125061035 59.22319793701172,1.426406979560852 59.22319793701172,1.426406979560852 C59.22319793701172,1.426406979560852 63.40745544433594,5.744653224945068 63.40745544433594,5.744653224945068 C63.40745544433594,5.744653224945068 63.40745544433594,26.48379898071289 63.40745544433594,26.48379898071289 C63.40745544433594,26.48379898071289 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 -4.065619945526123,16.041175842285156 -4.065619945526123,16.041175842285156"></path>
</g>
<g opacity="1" transform="matrix(1,0.6370702385902405,0,1,-0.037353515625,-73.08854675292969)">
<g opacity="1" transform="matrix(0.4094409942626953,0,0,0.5016899704933167,114.75135040283203,162.0974578857422)">
<path fill="rgb(42,86,96)" fill-opacity="1" d=" M0,0 C0,0 4.558399200439453,-4.512773036956787 4.558399200439453,-4.512773036956787 C4.558399200439453,-4.512773036956787 67.6463394165039,-4.66641902923584 67.6463394165039,-4.66641902923584 C67.6463394165039,-4.66641902923584 63.034915924072266,0 63.034915924072266,0 C63.034915924072266,0 63.034915924072266,20.739145278930664 63.034915924072266,20.739145278930664 C63.034915924072266,20.739145278930664 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 0,0 0,0"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,-1.66571044921875)">
<g opacity="1" transform="matrix(1,0,0,1,115.65491485595703,164.85104370117188)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M17.254833221435547,4.76837158203125e-7 C17.254833221435547,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,5.559891700744629 0,5.559891700744629 C0,5.559891700744629 17.254833221435547,5.559891700744629 17.254833221435547,5.559891700744629 C17.254833221435547,5.559891700744629 17.254833221435547,4.76837158203125e-7 17.254833221435547,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,165.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,166.7194366455078)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,167.8697509765625)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.58335876464844,169.0200653076172)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1,0,0,0.8223720192909241,115.6549072265625,169.4480743408203)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M17.254833221435547,5.960464477539062e-7 C17.254833221435547,5.960464477539062e-7 0,5.960464477539062e-7 0,5.960464477539062e-7 C0,5.960464477539062e-7 0,2.875805377960205 0,2.875805377960205 C0,2.875805377960205 17.254833221435547,2.875805377960205 17.254833221435547,2.875805377960205 C17.254833221435547,2.875805377960205 17.254833221435547,5.960464477539062e-7 17.254833221435547,5.960464477539062e-7z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,117.87708282470703,170.10202026367188)">
<path fill="rgb(246,100,93)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,120.75288391113281,170.10202026367188)">
<path fill="rgb(209,219,237)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,116.38166809082031,170.10202026367188)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,119.35332489013672,170.10202026367188)">
<path fill="rgb(209,219,237)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,130.18185424804688,170.62179565429688)">
<path fill="rgb(246,100,93)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,128.6508331298828,170.61317443847656)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,131.6498260498047,170.60800170898438)">
<path fill="rgb(209,219,237)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(0,1,-1.1057020425796509,0,139.28872680664062,163.06443786621094)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M8.914997100830078,7.152557373046875e-7 C8.914997100830078,7.152557373046875e-7 4.76837158203125e-7,7.152557373046875e-7 4.76837158203125e-7,7.152557373046875e-7 C4.76837158203125e-7,7.152557373046875e-7 4.76837158203125e-7,4.7930097579956055 4.76837158203125e-7,4.7930097579956055 C4.76837158203125e-7,4.7930097579956055 8.914997100830078,4.7930097579956055 8.914997100830078,4.7930097579956055 C8.914997100830078,4.7930097579956055 8.914997100830078,7.152557373046875e-7 8.914997100830078,7.152557373046875e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,138.7610321044922,163.54933166503906)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,137.64906311035156,163.54933166503906)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,136.42205810546875,163.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,135.2525634765625,163.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,173.5363006591797,128.94479370117188)">
<path fill="rgb(38,75,84)" fill-opacity="1" d=" M-33.01993942260742,19.49199676513672 C-33.01993942260742,19.49199676513672 -7.058328151702881,36.0271110534668 -7.058328151702881,36.0271110534668 C-7.058328151702881,36.0271110534668 -33.01993942260742,49.61100387573242 -33.01993942260742,49.61100387573242 C-33.01993942260742,49.61100387573242 -58.822296142578125,33.14933395385742 -58.822296142578125,33.14933395385742 C-58.822296142578125,33.14933395385742 -33.01993942260742,19.49199676513672 -33.01993942260742,19.49199676513672"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0.0000152587890625,146.5846405029297)">
<g opacity="1" transform="matrix(0.4111599922180176,0.26193779706954956,0,0.14183400571346283,183.79769897460938,165.63551330566406)">
<path fill="rgb(70,98,105)" fill-opacity="1" d=" M0,0 C0,0 4.0638298988342285,-11.340658187866211 4.0638298988342285,-11.340658187866211 C4.0638298988342285,-11.340658187866211 67.04137420654297,-11.852648735046387 67.04137420654297,-11.852648735046387 C67.04137420654297,-11.852648735046387 63.034915924072266,0 63.034915924072266,0 C63.034915924072266,0 63.034915924072266,20.739145278930664 63.034915924072266,20.739145278930664 C63.034915924072266,20.739145278930664 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 0,0 0,0"></path>
</g>
<g opacity="1" transform="matrix(0.4111599922180176,0.26193779706954956,0,0.14183400571346283,187.8308563232422,164.03355407714844)">
<path fill="rgb(54,73,77)" fill-opacity="1" d=" M50.4127197265625,-172.344482421875 C50.4127197265625,-172.344482421875 128.37550354003906,-176.6173553466797 128.37550354003906,-176.6173553466797 C128.37550354003906,-176.6173553466797 63.034915924072266,29.796716690063477 63.034915924072266,29.796716690063477 C63.034915924072266,29.796716690063477 -9.782752990722656,29.36140251159668 -9.782752990722656,29.36140251159668 C-9.782752990722656,29.36140251159668 50.4127197265625,-172.344482421875 50.4127197265625,-172.344482421875"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,68.57991027832031,139.0646209716797)">
<g opacity="1" transform="matrix(0.4094409942626953,-0.2608426809310913,0,0.5016899704933167,140.54124450683594,178.52748107910156)">
<path fill="rgb(21,49,54)" fill-opacity="1" d=" M-4.065619945526123,16.041175842285156 C-4.065619945526123,16.041175842285156 -3.943308115005493,-4.416314125061035 -3.943308115005493,-4.416314125061035 C-3.943308115005493,-4.416314125061035 59.22319793701172,1.426406979560852 59.22319793701172,1.426406979560852 C59.22319793701172,1.426406979560852 63.40745544433594,5.744653224945068 63.40745544433594,5.744653224945068 C63.40745544433594,5.744653224945068 63.40745544433594,26.48379898071289 63.40745544433594,26.48379898071289 C63.40745544433594,26.48379898071289 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 -4.065619945526123,16.041175842285156 -4.065619945526123,16.041175842285156"></path>
</g>
<g opacity="1" transform="matrix(1,0.6370702385902405,0,1,-0.037353515625,-73.08854675292969)">
<g opacity="1" transform="matrix(0.4094409942626953,0,0,0.5016899704933167,114.75135040283203,162.0974578857422)">
<path fill="rgb(42,86,96)" fill-opacity="1" d=" M0,0 C0,0 4.558399200439453,-4.512773036956787 4.558399200439453,-4.512773036956787 C4.558399200439453,-4.512773036956787 67.6463394165039,-4.66641902923584 67.6463394165039,-4.66641902923584 C67.6463394165039,-4.66641902923584 63.034915924072266,0 63.034915924072266,0 C63.034915924072266,0 63.034915924072266,20.739145278930664 63.034915924072266,20.739145278930664 C63.034915924072266,20.739145278930664 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 0,0 0,0"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,-1.66571044921875)">
<g opacity="1" transform="matrix(1,0,0,1,115.65491485595703,164.85104370117188)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M17.254833221435547,4.76837158203125e-7 C17.254833221435547,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,5.559891700744629 0,5.559891700744629 C0,5.559891700744629 17.254833221435547,5.559891700744629 17.254833221435547,5.559891700744629 C17.254833221435547,5.559891700744629 17.254833221435547,4.76837158203125e-7 17.254833221435547,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,165.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,166.7194366455078)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,167.8697509765625)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.58335876464844,169.0200653076172)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1,0,0,0.8223720192909241,115.6549072265625,169.4480743408203)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M17.254833221435547,5.960464477539062e-7 C17.254833221435547,5.960464477539062e-7 0,5.960464477539062e-7 0,5.960464477539062e-7 C0,5.960464477539062e-7 0,2.875805377960205 0,2.875805377960205 C0,2.875805377960205 17.254833221435547,2.875805377960205 17.254833221435547,2.875805377960205 C17.254833221435547,2.875805377960205 17.254833221435547,5.960464477539062e-7 17.254833221435547,5.960464477539062e-7z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,117.87708282470703,170.10202026367188)">
<path fill="rgb(246,100,93)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,120.75288391113281,170.10202026367188)">
<path fill="rgb(209,219,237)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,116.38166809082031,170.10202026367188)">
<path fill="rgb(246,100,93)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,119.35332489013672,170.10202026367188)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,130.18185424804688,170.62179565429688)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,128.6508331298828,170.61317443847656)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,131.6498260498047,170.60800170898438)">
<path fill="rgb(209,219,237)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(0,1,-1.1057020425796509,0,139.28872680664062,163.06443786621094)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M8.914997100830078,7.152557373046875e-7 C8.914997100830078,7.152557373046875e-7 4.76837158203125e-7,7.152557373046875e-7 4.76837158203125e-7,7.152557373046875e-7 C4.76837158203125e-7,7.152557373046875e-7 4.76837158203125e-7,4.7930097579956055 4.76837158203125e-7,4.7930097579956055 C4.76837158203125e-7,4.7930097579956055 8.914997100830078,4.7930097579956055 8.914997100830078,4.7930097579956055 C8.914997100830078,4.7930097579956055 8.914997100830078,7.152557373046875e-7 8.914997100830078,7.152557373046875e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,138.7610321044922,163.54933166503906)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,137.64906311035156,163.54933166503906)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,136.42205810546875,163.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,135.2525634765625,163.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,173.5363006591797,128.94479370117188)">
<path fill="rgb(38,75,84)" fill-opacity="1" d=" M-33.01993942260742,19.49199676513672 C-33.01993942260742,19.49199676513672 -7.058328151702881,36.0271110534668 -7.058328151702881,36.0271110534668 C-7.058328151702881,36.0271110534668 -33.01993942260742,49.61100387573242 -33.01993942260742,49.61100387573242 C-33.01993942260742,49.61100387573242 -58.822296142578125,33.14933395385742 -58.822296142578125,33.14933395385742 C-58.822296142578125,33.14933395385742 -33.01993942260742,19.49199676513672 -33.01993942260742,19.49199676513672"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0.0000152587890625,131.39015197753906)">
<g opacity="1" transform="matrix(0.4111599922180176,0.26193779706954956,0,0.14183400571346283,183.79769897460938,165.63551330566406)">
<path fill="rgb(70,98,105)" fill-opacity="1" d=" M0,0 C0,0 4.0638298988342285,-11.340658187866211 4.0638298988342285,-11.340658187866211 C4.0638298988342285,-11.340658187866211 67.04137420654297,-11.852648735046387 67.04137420654297,-11.852648735046387 C67.04137420654297,-11.852648735046387 63.034915924072266,0 63.034915924072266,0 C63.034915924072266,0 63.034915924072266,20.739145278930664 63.034915924072266,20.739145278930664 C63.034915924072266,20.739145278930664 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 0,0 0,0"></path>
</g>
<g opacity="1" transform="matrix(0.4111599922180176,0.26193779706954956,0,0.14183400571346283,187.8308563232422,164.03355407714844)">
<path fill="rgb(54,73,77)" fill-opacity="1" d=" M50.4127197265625,-172.344482421875 C50.4127197265625,-172.344482421875 128.37550354003906,-176.6173553466797 128.37550354003906,-176.6173553466797 C128.37550354003906,-176.6173553466797 63.034915924072266,29.796716690063477 63.034915924072266,29.796716690063477 C63.034915924072266,29.796716690063477 -9.782752990722656,29.36140251159668 -9.782752990722656,29.36140251159668 C-9.782752990722656,29.36140251159668 50.4127197265625,-172.344482421875 50.4127197265625,-172.344482421875"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,68.49771118164062,124.38825988769531)">
<g opacity="1" transform="matrix(0.4094409942626953,-0.2608426809310913,0,0.5016899704933167,140.54124450683594,178.52748107910156)">
<path fill="rgb(21,49,54)" fill-opacity="1" d=" M-4.065619945526123,16.041175842285156 C-4.065619945526123,16.041175842285156 -3.943308115005493,-4.416314125061035 -3.943308115005493,-4.416314125061035 C-3.943308115005493,-4.416314125061035 59.22319793701172,1.426406979560852 59.22319793701172,1.426406979560852 C59.22319793701172,1.426406979560852 63.40745544433594,5.744653224945068 63.40745544433594,5.744653224945068 C63.40745544433594,5.744653224945068 63.40745544433594,26.48379898071289 63.40745544433594,26.48379898071289 C63.40745544433594,26.48379898071289 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 -4.065619945526123,16.041175842285156 -4.065619945526123,16.041175842285156"></path>
</g>
<g opacity="1" transform="matrix(1,0.6370702385902405,0,1,-0.037353515625,-73.08854675292969)">
<g opacity="1" transform="matrix(0.4094409942626953,0,0,0.5016899704933167,114.75135040283203,162.0974578857422)">
<path fill="rgb(42,86,96)" fill-opacity="1" d=" M0,0 C0,0 4.558399200439453,-4.512773036956787 4.558399200439453,-4.512773036956787 C4.558399200439453,-4.512773036956787 67.6463394165039,-4.66641902923584 67.6463394165039,-4.66641902923584 C67.6463394165039,-4.66641902923584 63.034915924072266,0 63.034915924072266,0 C63.034915924072266,0 63.034915924072266,20.739145278930664 63.034915924072266,20.739145278930664 C63.034915924072266,20.739145278930664 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 0,0 0,0"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,-1.66571044921875)">
<g opacity="1" transform="matrix(1,0,0,1,115.65491485595703,164.85104370117188)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M17.254833221435547,4.76837158203125e-7 C17.254833221435547,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,5.559891700744629 0,5.559891700744629 C0,5.559891700744629 17.254833221435547,5.559891700744629 17.254833221435547,5.559891700744629 C17.254833221435547,5.559891700744629 17.254833221435547,4.76837158203125e-7 17.254833221435547,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,165.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,166.7194366455078)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.52584838867188,167.8697509765625)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
<g opacity="1" transform="matrix(0.3454180061817169,0,0,0.3454180061817169,116.58335876464844,169.0200653076172)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M44.403099060058594,0 C44.403099060058594,0 0,0 0,0 C0,0 0,1.9426360130310059 0,1.9426360130310059 C0,1.9426360130310059 44.403099060058594,1.9426360130310059 44.403099060058594,1.9426360130310059 C44.403099060058594,1.9426360130310059 44.403099060058594,0 44.403099060058594,0z"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1,0,0,0.8223720192909241,115.6549072265625,169.4480743408203)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M17.254833221435547,5.960464477539062e-7 C17.254833221435547,5.960464477539062e-7 0,5.960464477539062e-7 0,5.960464477539062e-7 C0,5.960464477539062e-7 0,2.875805377960205 0,2.875805377960205 C0,2.875805377960205 17.254833221435547,2.875805377960205 17.254833221435547,2.875805377960205 C17.254833221435547,2.875805377960205 17.254833221435547,5.960464477539062e-7 17.254833221435547,5.960464477539062e-7z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,117.87708282470703,170.10202026367188)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,120.75288391113281,170.10202026367188)">
<path fill="rgb(246,100,93)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,116.38166809082031,170.10202026367188)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.6520860195159912,0,0,1.1969209909439087,119.35332489013672,170.10202026367188)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M1.6888619661331177,0.20000047981739044 C1.6888619661331177,0.08962047845125198 1.5992419719696045,4.76837158203125e-7 1.4888619184494019,4.76837158203125e-7 C1.4888619184494019,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 0.20000000298023224,4.76837158203125e-7 C0.08962000161409378,4.76837158203125e-7 0,0.08962047845125198 0,0.20000047981739044 C0,0.20000047981739044 0,0.6918755173683167 0,0.6918755173683167 C0,0.8022555112838745 0.08962000161409378,0.8918755054473877 0.20000000298023224,0.8918755054473877 C0.20000000298023224,0.8918755054473877 1.4888619184494019,0.8918755054473877 1.4888619184494019,0.8918755054473877 C1.5992419719696045,0.8918755054473877 1.6888619661331177,0.8022555112838745 1.6888619661331177,0.6918755173683167 C1.6888619661331177,0.6918755173683167 1.6888619661331177,0.20000047981739044 1.6888619661331177,0.20000047981739044z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,130.18185424804688,170.62179565429688)">
<path fill="rgb(246,100,93)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,128.6508331298828,170.61317443847656)">
<path fill="rgb(209,219,237)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
<g opacity="1" transform="matrix(0.22615399956703186,0,0,0.22615399956703186,131.6498260498047,170.60800170898438)">
<path fill="rgb(61,244,168)" fill-opacity="1" d=" M0,-2.6684319972991943 C1.4727076292037964,-2.6684319972991943 2.6684319972991943,-1.4727076292037964 2.6684319972991943,0 C2.6684319972991943,1.4727076292037964 1.4727076292037964,2.6684319972991943 0,2.6684319972991943 C-1.4727076292037964,2.6684319972991943 -2.6684319972991943,1.4727076292037964 -2.6684319972991943,0 C-2.6684319972991943,-1.4727076292037964 -1.4727076292037964,-2.6684319972991943 0,-2.6684319972991943z"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(0,1,-1.1057020425796509,0,139.28872680664062,163.06443786621094)">
<path fill="rgb(17,40,45)" fill-opacity="1" d=" M8.914997100830078,7.152557373046875e-7 C8.914997100830078,7.152557373046875e-7 4.76837158203125e-7,7.152557373046875e-7 4.76837158203125e-7,7.152557373046875e-7 C4.76837158203125e-7,7.152557373046875e-7 4.76837158203125e-7,4.7930097579956055 4.76837158203125e-7,4.7930097579956055 C4.76837158203125e-7,4.7930097579956055 8.914997100830078,4.7930097579956055 8.914997100830078,4.7930097579956055 C8.914997100830078,4.7930097579956055 8.914997100830078,7.152557373046875e-7 8.914997100830078,7.152557373046875e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,138.7610321044922,163.54933166503906)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,137.64906311035156,163.54933166503906)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,136.42205810546875,163.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
<g opacity="1" transform="matrix(0,0.4165929853916168,-0.3281860053539276,0,135.2525634765625,163.56910705566406)">
<path fill="rgb(61,100,110)" fill-opacity="1" d=" M19.426355361938477,4.76837158203125e-7 C19.426355361938477,4.76837158203125e-7 0,4.76837158203125e-7 0,4.76837158203125e-7 C0,4.76837158203125e-7 0,2.2201554775238037 0,2.2201554775238037 C0,2.2201554775238037 19.426355361938477,2.2201554775238037 19.426355361938477,2.2201554775238037 C19.426355361938477,2.2201554775238037 19.426355361938477,4.76837158203125e-7 19.426355361938477,4.76837158203125e-7z"></path>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,173.5363006591797,128.94479370117188)">
<path fill="rgb(38,75,84)" fill-opacity="1" d=" M-33.01993942260742,19.49199676513672 C-33.01993942260742,19.49199676513672 -7.058328151702881,36.0271110534668 -7.058328151702881,36.0271110534668 C-7.058328151702881,36.0271110534668 -33.01993942260742,49.61100387573242 -33.01993942260742,49.61100387573242 C-33.01993942260742,49.61100387573242 -58.822296142578125,33.14933395385742 -58.822296142578125,33.14933395385742 C-58.822296142578125,33.14933395385742 -33.01993942260742,19.49199676513672 -33.01993942260742,19.49199676513672"></path>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,117.91035461425781)">
<g opacity="1" transform="matrix(0.4111599922180176,0.26193779706954956,0,0.14183400571346283,183.79769897460938,164.54197692871094)">
<path fill="rgb(70,98,105)" fill-opacity="1" d=" M0,0 C0,0 63.034915924072266,0 63.034915924072266,0 C63.034915924072266,0 63.034915924072266,20.739145278930664 63.034915924072266,20.739145278930664 C63.034915924072266,20.739145278930664 0,20.739145278930664 0,20.739145278930664 C0,20.739145278930664 0,0 0,0"></path>
</g>
<g opacity="1" transform="matrix(0.9360650181770325,0.5963391661643982,0,0.21360400319099426,200.32888793945312,125.0456314086914)">
<path fill="rgb(128,161,170)" fill-opacity="1" d=" M14.94782829284668,220.63449096679688 C14.94782829284668,220.63449096679688 14.947830200195312,428.2574768066406 14.947830200195312,428.2574768066406 C14.947830200195312,428.2574768066406 11.787158966064453,454.28277587890625 11.787158966064453,454.28277587890625 C11.787158966064453,454.28277587890625 9.923188209533691,441.5577392578125 9.923188209533691,441.5577392578125 C9.923188209533691,441.5577392578125 9.923186302185059,235.5083465576172 9.923186302185059,235.5083465576172 C9.923186302185059,235.5083465576172 -17.648679733276367,234.60507202148438 -17.648679733276367,234.60507202148438 C-17.648679733276367,234.60507202148438 -19.40606689453125,222.40687561035156 -19.40606689453125,222.40687561035156 C-19.40606689453125,222.40687561035156 -16.091825485229492,206.2506561279297 -16.091825485229492,206.2506561279297 C-16.091825485229492,206.2506561279297 14.94782829284668,206.0468292236328 14.94782829284668,206.0468292236328 C14.94782829284668,206.0468292236328 14.94782829284668,220.63449096679688 14.94782829284668,220.63449096679688"></path>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,117.83540344238281)">
<g opacity="1" transform="matrix(0.9348480105400085,-0.4908061921596527,0,0.21355199813842773,211.36244201660156,164.74041748046875)">
<path fill="rgb(112,153,161)" fill-opacity="1" d=" M-0.000009000000318337698,61.959373474121094 C-0.000009000000318337698,61.959373474121094 29.14432716369629,62.08649826049805 29.14432716369629,62.08649826049805 C29.14432716369629,62.08649826049805 31.3459415435791,70.06300354003906 31.3459415435791,70.06300354003906 C31.3459415435791,70.06300354003906 31.289886474609375,301.265625 31.289886474609375,301.265625 C31.289886474609375,301.265625 7.4068098068237305,301.2475280761719 7.4068098068237305,301.2475280761719 C7.4068098068237305,301.2475280761719 -0.000009000000318337698,301.3674621582031 -0.000009000000318337698,301.3674621582031 C-0.000009000000318337698,301.3674621582031 -0.000009000000318337698,61.959373474121094 -0.000009000000318337698,61.959373474121094"></path>
</g>
<g opacity="1" transform="matrix(1.5593119859695435,-0.8186571002006531,0,1.4335360527038574,214.99996948242188,183.12283325195312)">
<path fill="rgb(79,112,119)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.03815700113773346,-0.02003287337720394,0,1.4329489469528198,236.48953247070312,171.84054565429688)">
<path fill="rgb(49,73,77)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(1.559311032295227,-0.8186566233634949,0,0.04030400142073631,214.99998474121094,206.56947326660156)">
<path fill="rgb(66,100,107)" fill-opacity="1" d=" M0,0 C0,0 13.820996284484863,1.8652340173721313 13.820996284484863,1.8652340173721313 C13.820996284484863,1.8652340173721313 14.1271333694458,16.830034255981445 14.1271333694458,16.830034255981445 C14.1271333694458,16.830034255981445 0,16.830034255981445 0,16.830034255981445 C0,16.830034255981445 0,0 0,0"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(0.7558580040931702,-0.3968343138694763,0,0.13850699365139008,215.336181640625,210.33934020996094)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.705394983291626,-0.37034064531326294,0,0.13850699365139008,227.06336975097656,204.36956787109375)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.705394983291626,-0.37034064531326294,0,0.13850699365139008,227.06336975097656,208.15103149414062)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.705394983291626,-0.37034064531326294,0,0.13850699365139008,227.06336975097656,211.9324951171875)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.705394983291626,-0.37034064531326294,0,0.13850699365139008,227.06336975097656,215.57119750976562)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.7558580040931702,-0.3968343138694763,0,0.13850699365139008,215.336181640625,221.5409698486328)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.7558580040931702,-0.3968343138694763,0,0.13850699365139008,215.336181640625,217.9022674560547)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
<g opacity="1" transform="matrix(0.7558580040931702,-0.3968343138694763,0,0.13850699365139008,215.336181640625,214.1208038330078)">
<path fill="rgb(29,49,54)" fill-opacity="1" d=" M14.127134323120117,0 C14.127134323120117,0 4.76837158203125e-7,0 4.76837158203125e-7,0 C4.76837158203125e-7,0 4.76837158203125e-7,16.830034255981445 4.76837158203125e-7,16.830034255981445 C4.76837158203125e-7,16.830034255981445 14.127134323120117,16.830034255981445 14.127134323120117,16.830034255981445 C14.127134323120117,16.830034255981445 14.127134323120117,0 14.127134323120117,0z"></path>
</g>
</g>
<g opacity="1" transform="matrix(1.4882019758224487,0,0,1.4881900548934937,204.2914581298828,140.15794372558594)">
<path fill="rgb(163,207,218)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.717916965484619,26.51717758178711 4.717916965484619,26.51717758178711 C4.717916965484619,26.51717758178711 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,-14.286334991455078,20.71163558959961)">
<g opacity="1" transform="matrix(0.5699999928474426,0,0,0.5699999928474426,53.571292877197266,34.28070068359375)">
<path fill="url(#__lottie_element_113)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.38171300292015076,0,0,0.38171300292015076,-24.419212341308594,-24.515846252441406)">
<g opacity="1" transform="matrix(0.9348480105400085,0.5955638885498047,0,0.21355199813842773,182.25379943847656,146.10284423828125)">
<path fill="rgb(223,177,165)" fill-opacity="1" d=" M-0.09652800112962723,-0.3234440088272095 C-0.09652800112962723,-0.3234440088272095 1.5008889436721802,-8.048053741455078 1.5008889436721802,-8.048053741455078 C1.5008889436721802,-8.048053741455078 31.193363189697266,-7.974112033843994 31.193363189697266,-7.974112033843994 C31.193363189697266,-7.974112033843994 34.064998626708984,3.6011600494384766 34.064998626708984,3.6011600494384766 C34.064998626708984,3.6011600494384766 31.193359375,31.193359375 31.193359375,31.193359375 C31.193359375,31.193359375 -0.09652700275182724,30.696794509887695 -0.09652700275182724,30.696794509887695 C-0.09652700275182724,30.696794509887695 -0.09652800112962723,-0.3234440088272095 -0.09652800112962723,-0.3234440088272095"></path>
</g>
<g opacity="1" transform="matrix(0.9348480105400085,-0.4908061921596527,0,0.21355199813842773,211.36244201660156,164.68048095703125)">
<path fill="rgb(225,170,156)" fill-opacity="1" d=" M-0.000009000000318337698,-7.974215984344482 C-0.000009000000318337698,-7.974215984344482 29.14432716369629,-7.847092151641846 29.14432716369629,-7.847092151641846 C29.14432716369629,-7.847092151641846 31.3459415435791,0.12940900027751923 31.3459415435791,0.12940900027751923 C31.3459415435791,0.12940900027751923 31.3459415435791,31.21710205078125 31.3459415435791,31.21710205078125 C31.3459415435791,31.21710205078125 7.462864875793457,31.19900131225586 7.462864875793457,31.19900131225586 C7.462864875793457,31.19900131225586 0,31.193359375 0,31.193359375 C0,31.193359375 -0.000009000000318337698,-7.974215984344482 -0.000009000000318337698,-7.974215984344482"></path>
</g>
<g opacity="1" transform="matrix(1.4882019758224487,0,0,1.4881900548934937,204.34121704101562,125.14436340332031)">
<path fill="rgb(255,189,174)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.19620348513126373,0.1258637011051178,-0.2391418218612671,0.12353604286909103,211.4183807373047,133.3463134765625)">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(188,114,94)" fill-opacity="1" d=" M75.62999725341797,0 C75.62999725341797,0 61.439998626708984,24.579999923706055 61.439998626708984,24.579999923706055 C61.439998626708984,24.579999923706055 47.25,0 47.25,0 C47.25,0 0,0 0,0 C0,0 61.439998626708984,106.41999816894531 61.439998626708984,106.41999816894531 C61.439998626708984,106.41999816894531 122.87999725341797,0 122.87999725341797,0 C122.87999725341797,0 75.62999725341797,0 75.62999725341797,0 C75.62999725341797,0 75.62999725341797,0 75.62999725341797,0z"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(105,65,54)" fill-opacity="1" d=" M75.62999725341797,0 C75.62999725341797,0 61.439998626708984,24.579999923706055 61.439998626708984,24.579999923706055 C61.439998626708984,24.579999923706055 47.25,0 47.25,0 C47.25,0 24.579999923706055,0 24.579999923706055,0 C24.579999923706055,0 61.439998626708984,63.849998474121094 61.439998626708984,63.849998474121094 C61.439998626708984,63.849998474121094 98.30000305175781,0 98.30000305175781,0 C98.30000305175781,0 75.62999725341797,0 75.62999725341797,0 C75.62999725341797,0 75.62999725341797,0 75.62999725341797,0z"></path>
</g>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(0.5699999928474426,0,0,0.5699999928474426,155.72882080078125,79.45333099365234)">
<path fill="url(#__lottie_element_114)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.38171300292015076,0,0,0.38171300292015076,77.73831939697266,21.81188201904297)">
<g opacity="1" transform="matrix(0.9348480105400085,0.5955638885498047,0,0.21355199813842773,182.25379943847656,146.10284423828125)">
<path fill="rgb(223,181,170)" fill-opacity="1" d=" M-0.09652800112962723,-0.3234440088272095 C-0.09652800112962723,-0.3234440088272095 1.5008889436721802,-8.048053741455078 1.5008889436721802,-8.048053741455078 C1.5008889436721802,-8.048053741455078 31.193363189697266,-7.974112033843994 31.193363189697266,-7.974112033843994 C31.193363189697266,-7.974112033843994 34.064998626708984,3.6011600494384766 34.064998626708984,3.6011600494384766 C34.064998626708984,3.6011600494384766 31.193359375,31.193359375 31.193359375,31.193359375 C31.193359375,31.193359375 -0.09652700275182724,30.696794509887695 -0.09652700275182724,30.696794509887695 C-0.09652700275182724,30.696794509887695 -0.09652800112962723,-0.3234440088272095 -0.09652800112962723,-0.3234440088272095"></path>
</g>
<g opacity="1" transform="matrix(0.9348480105400085,-0.4908061921596527,0,0.21355199813842773,211.36244201660156,164.68048095703125)">
<path fill="rgb(225,170,156)" fill-opacity="1" d=" M-0.000009000000318337698,-7.974215984344482 C-0.000009000000318337698,-7.974215984344482 29.14432716369629,-7.847092151641846 29.14432716369629,-7.847092151641846 C29.14432716369629,-7.847092151641846 31.3459415435791,0.12940900027751923 31.3459415435791,0.12940900027751923 C31.3459415435791,0.12940900027751923 31.3459415435791,30.895082473754883 31.3459415435791,30.895082473754883 C31.3459415435791,30.895082473754883 0,31.193359375 0,31.193359375 C0,31.193359375 -0.000009000000318337698,-7.974215984344482 -0.000009000000318337698,-7.974215984344482"></path>
</g>
<g opacity="1" transform="matrix(1.4882019758224487,0,0,1.4881900548934937,204.34121704101562,125.14436340332031)">
<path fill="rgb(255,189,174)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.7148333191871643,0.45856255292892456,-0.8712717294692993,0.45008212327957153,182.92686462402344,13.4903564453125)">
<g opacity="1" transform="matrix(1,0,0,1,180.00869750976562,114.69927215576172)">
<path fill="rgb(105,65,54)" fill-opacity="1" d=" M0,-2.784311056137085 C1.5366612672805786,-2.784311056137085 2.784311056137085,-1.5366612672805786 2.784311056137085,0 C2.784311056137085,1.5366612672805786 1.5366612672805786,2.784311056137085 0,2.784311056137085 C-1.5366612672805786,2.784311056137085 -2.784311056137085,1.5366612672805786 -2.784311056137085,0 C-2.784311056137085,-1.5366612672805786 -1.5366612672805786,-2.784311056137085 0,-2.784311056137085z"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(105,65,54)" stroke-opacity="1" stroke-width="2" d=" M180.02098083496094,109.22576904296875 C178.8927001953125,109.22576904296875 175.39767456054688,109.32295227050781 171.89767456054688,110.16295623779297 C167.6976776123047,111.08295440673828 165.0962371826172,112.68315124511719 165.0962371826172,114.74846649169922 C165.0962371826172,116.89192199707031 167.79978942871094,118.33169555664062 171.785400390625,119.36632537841797 C176.9757537841797,120.4643325805664 179.05560302734375,120.30970764160156 180.0235595703125,120.30970764160156 C180.99560546875,120.30970764160156 184.58251953125,120.27687072753906 188.38661193847656,119.25271606445312 C192.5025177001953,118.25686645507812 194.92556762695312,116.78648376464844 194.92556762695312,114.74846649169922 C194.92556762695312,112.68816375732422 192.42295837402344,111.2018051147461 188.23611450195312,110.1871566772461 C185.12295532226562,109.3218002319336 181.07269287109375,109.22576904296875 180.02098083496094,109.22576904296875"></path>
</g>
<g opacity="1" transform="matrix(0.5166252255439758,0.8562116026878357,-0.8562116026878357,0.5166252255439758,185.28125,-98.64986419677734)">
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(105,65,54)" stroke-opacity="1" stroke-width="2" d=" M180.02098083496094,109.22576904296875 C178.8927001953125,109.22576904296875 175.39767456054688,109.32295227050781 171.89767456054688,110.16295623779297 C167.6976776123047,111.08295440673828 165.0962371826172,112.68315124511719 165.0962371826172,114.74846649169922 C165.0962371826172,116.89192199707031 167.79978942871094,118.33169555664062 171.785400390625,119.36632537841797 C176.9757537841797,120.4643325805664 179.05560302734375,120.30970764160156 180.0235595703125,120.30970764160156 C180.99560546875,120.30970764160156 184.58251953125,120.27687072753906 188.38661193847656,119.25271606445312 C192.5025177001953,118.25686645507812 194.92556762695312,116.78648376464844 194.92556762695312,114.74846649169922 C194.92556762695312,112.68816375732422 192.42295837402344,111.2018051147461 188.23611450195312,110.1871566772461 C185.12295532226562,109.3218002319336 181.07269287109375,109.22576904296875 180.02098083496094,109.22576904296875"></path>
</g>
<g opacity="1" transform="matrix(-0.5212479829788208,0.853405237197876,-0.853405237197876,-0.5212479829788208,371.78765869140625,20.97339630126953)">
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(105,65,54)" stroke-opacity="1" stroke-width="2" d=" M180.02098083496094,109.22576904296875 C178.8927001953125,109.22576904296875 175.39767456054688,109.32295227050781 171.89767456054688,110.16295623779297 C167.6976776123047,111.08295440673828 165.0962371826172,112.68315124511719 165.0962371826172,114.74846649169922 C165.0962371826172,116.89192199707031 167.79978942871094,118.33169555664062 171.785400390625,119.36632537841797 C176.9757537841797,120.4643325805664 179.05560302734375,120.30970764160156 180.0235595703125,120.30970764160156 C180.99560546875,120.30970764160156 184.58251953125,120.27687072753906 188.38661193847656,119.25271606445312 C192.5025177001953,118.25686645507812 194.92556762695312,116.78648376464844 194.92556762695312,114.74846649169922 C194.92556762695312,112.68816375732422 192.42295837402344,111.2018051147461 188.23611450195312,110.1871566772461 C185.12295532226562,109.3218002319336 181.07269287109375,109.22576904296875 180.02098083496094,109.22576904296875"></path>
</g>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,37.251487731933594,-1.494110107421875)">
<g opacity="1" transform="matrix(0.5699999928474426,0,0,0.5699999928474426,94.73890686035156,102.98835754394531)">
<path fill="url(#__lottie_element_115)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.38171300292015076,0,0,0.38171300292015076,16.768417358398438,44.939842224121094)">
<g opacity="1" transform="matrix(0.9348480105400085,0.5955638885498047,0,0.21355199813842773,182.25379943847656,146.10284423828125)">
<path fill="rgb(223,177,165)" fill-opacity="1" d=" M-0.09652800112962723,-0.3234440088272095 C-0.09652800112962723,-0.3234440088272095 1.5008889436721802,-8.048053741455078 1.5008889436721802,-8.048053741455078 C1.5008889436721802,-8.048053741455078 31.193363189697266,-7.974112033843994 31.193363189697266,-7.974112033843994 C31.193363189697266,-7.974112033843994 34.064998626708984,3.6011600494384766 34.064998626708984,3.6011600494384766 C34.064998626708984,3.6011600494384766 31.193359375,31.193359375 31.193359375,31.193359375 C31.193359375,31.193359375 -0.09652700275182724,30.696794509887695 -0.09652700275182724,30.696794509887695 C-0.09652700275182724,30.696794509887695 -0.09652800112962723,-0.3234440088272095 -0.09652800112962723,-0.3234440088272095"></path>
</g>
<g opacity="1" transform="matrix(0.9348480105400085,-0.4908061921596527,0,0.21355199813842773,211.36244201660156,164.68048095703125)">
<path fill="rgb(225,170,156)" fill-opacity="1" d=" M-0.000009000000318337698,-7.974215984344482 C-0.000009000000318337698,-7.974215984344482 29.14432716369629,-7.847092151641846 29.14432716369629,-7.847092151641846 C29.14432716369629,-7.847092151641846 31.3459415435791,0.12940900027751923 31.3459415435791,0.12940900027751923 C31.3459415435791,0.12940900027751923 31.34593963623047,31.133108139038086 31.34593963623047,31.133108139038086 C31.34593963623047,31.133108139038086 0,31.193359375 0,31.193359375 C0,31.193359375 -0.000009000000318337698,-7.974215984344482 -0.000009000000318337698,-7.974215984344482"></path>
</g>
<g opacity="1" transform="matrix(1.4882019758224487,0,0,1.4881900548934937,204.34121704101562,125.14436340332031)">
<path fill="rgb(255,189,174)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.07763834297657013,0.04980466887354851,-0.0946291834115982,0.04888360574841499,214.8173370361328,134.32650756835938)">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(105,65,54)" fill-opacity="1" d=" M116.50399780273438,3.5799999237060547 C123.46600341796875,-0.4050000011920929 132.53399658203125,-0.4230000078678131 139.49000549316406,3.5799999237060547 C174.48500061035156,23.354000091552734 209.49099731445312,43.09700012207031 244.47999572753906,62.882999420166016 C251.06100463867188,66.58999633789062 255.46299743652344,73.91400146484375 255.39599609375,81.49700164794922 C255.39599609375,81.49700164794922 255.39599609375,200.46499633789062 255.39599609375,200.46499633789062 C255.44500732421875,208.36199951171875 250.60800170898438,215.86099243164062 243.6649932861328,219.48399353027344 C208.78500366210938,239.1490020751953 173.92300415039062,258.8380126953125 139.0489959716797,278.50299072265625 C131.9429931640625,282.5660095214844 122.69300079345703,282.25299072265625 115.80899810791016,277.85699462890625 C105.35199737548828,271.7950134277344 94.87699890136719,265.76300048828125 84.41899871826172,259.7070007324219 C82.28199768066406,258.4330139160156 79.87300109863281,257.41900634765625 78.36399841308594,255.3470001220703 C79.697998046875,253.5489959716797 82.08300018310547,253.3249969482422 84.02100372314453,252.5399932861328 C88.38600158691406,251.15199279785156 92.3949966430664,248.9239959716797 96.40499877929688,246.76199340820312 C97.41899871826172,246.0679931640625 98.65699768066406,246.33399963378906 99.62899780273438,246.9550018310547 C108.57099914550781,252.08200073242188 117.43399810791016,257.3580017089844 126.40599822998047,262.4360046386719 C128.32000732421875,263.5409851074219 130.25799560546875,262.0740051269531 131.8939971923828,261.1619873046875 C166.1219940185547,241.81700134277344 200.39199829101562,222.5449981689453 234.61399841308594,203.19400024414062 C235.8820037841797,202.58399963378906 236.58299255371094,201.23800659179688 236.47999572753906,199.8489990234375 C236.50399780273438,160.60400390625 236.48599243164062,121.35199737548828 236.49200439453125,82.10700225830078 C236.63699340820312,80.53099822998047 235.72500610351562,79.08200073242188 234.3000030517578,78.43699645996094 C199.54100036621094,58.86199951171875 164.8000030517578,39.25699996948242 130.0469970703125,19.677000045776367 C128.8145294189453,18.829692840576172 127.18794250488281,18.827308654785156 125.9530029296875,19.67099952697754 C91.19999694824219,39.25699996948242 56.46500015258789,58.880001068115234 21.711999893188477,78.4540023803711 C20.29199981689453,79.0999984741211 19.339000701904297,80.5250015258789 19.507999420166016,82.10700225830078 C19.513999938964844,121.35199737548828 19.507999420166016,160.60400390625 19.507999420166016,199.85499572753906 C19.38457679748535,201.24305725097656 20.138771057128906,202.5611114501953 21.398000717163086,203.1580047607422 C30.672000885009766,208.41700744628906 39.95800018310547,213.63900756835938 49.237998962402344,218.8800048828125 C54.465999603271484,221.69400024414062 60.8849983215332,223.36599731445312 66.6449966430664,221.2100067138672 C71.72799682617188,219.38699340820312 75.29100036621094,214.1999969482422 75.19400024414062,208.80299377441406 C75.24199676513672,169.78700256347656 75.16999816894531,130.76499938964844 75.2300033569336,91.75499725341797 C75.10299682617188,90.02300262451172 76.74600219726562,88.59200286865234 78.43000030517578,88.75499725341797 C82.88600158691406,88.7249984741211 87.3479995727539,88.69499969482422 91.80400085449219,88.76699829101562 C93.66400146484375,88.7249984741211 94.94400024414062,90.58999633789062 94.71399688720703,92.33499908447266 C94.69599914550781,131.59800720214844 94.76200103759766,170.86199951171875 94.68399810791016,210.125 C94.69599914550781,220.58900451660156 90.39700317382812,231.97500610351562 80.71800231933594,237.09500122070312 C68.79399871826172,243.27200317382812 54.055999755859375,241.96200561523438 42.2760009765625,236.03900146484375 C32.077999114990234,230.94900512695312 22.34600067138672,224.94200134277344 12.329000473022461,219.48899841308594 C5.368000030517578,215.88600158691406 0.5550000071525574,208.35699462890625 0.6039999723434448,200.46600341796875 C0.6039999723434448,200.46600341796875 0.6039999723434448,81.49700164794922 0.6039999723434448,81.49700164794922 C0.531000018119812,73.75700378417969 5.107999801635742,66.30000305175781 11.894000053405762,62.64699935913086 C46.768001556396484,42.965999603271484 81.63600158691406,23.270000457763672 116.50399780273438,3.5799999237060547"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(105,65,54)" fill-opacity="1" d=" M146.92799377441406,85.98999786376953 C162.13800048828125,85.01100158691406 178.42100524902344,85.41000366210938 192.10800170898438,92.90299987792969 C202.7050018310547,98.6449966430664 208.5800018310547,110.69599914550781 208.76699829101562,122.46900177001953 C208.4709930419922,124.05699920654297 206.81100463867188,124.93299865722656 205.2949981689453,124.8239974975586 C200.8820037841797,124.81800079345703 196.46800231933594,124.88400268554688 192.05499267578125,124.79399871826172 C190.18299865722656,124.86599731445312 189.09500122070312,123.13999938964844 188.86000061035156,121.48500061035156 C187.5919952392578,115.85199737548828 184.52000427246094,110.27300262451172 179.21800231933594,107.55599975585938 C171.07899475097656,103.48100280761719 161.64199829101562,103.68599700927734 152.76699829101562,103.77100372314453 C146.28799438476562,104.11499786376953 139.3209991455078,104.6760025024414 133.83200073242188,108.48600006103516 C129.6179962158203,111.37200164794922 128.33799743652344,117.197998046875 129.8419952392578,121.88999938964844 C131.25999450683594,125.25900268554688 135.1490020751953,126.34600067138672 138.33099365234375,127.3479995727539 C156.66099548339844,132.14199829101562 176.0850067138672,131.6649932861328 194.06500244140625,137.9739990234375 C201.50900268554688,140.54600524902344 208.79100036621094,145.54600524902344 211.33900451660156,153.33999633789062 C214.6719970703125,163.78599548339844 213.21099853515625,176.27200317382812 205.7790069580078,184.6580047607422 C199.7519989013672,191.5590057373047 190.9739990234375,195.31500244140625 182.218994140625,197.35499572753906 C170.57200622558594,199.95199584960938 158.48500061035156,200.01800537109375 146.65699768066406,198.86500549316406 C135.53500366210938,197.5970001220703 123.96099853515625,194.6750030517578 115.375,187.0970001220703 C108.03299713134766,180.7220001220703 104.4469985961914,170.78900146484375 104.8030014038086,161.20199584960938 C104.88800048828125,159.58299255371094 106.5,158.45399475097656 108.0510025024414,158.58700561523438 C112.49500274658203,158.55099487304688 116.93900299072266,158.53900146484375 121.38300323486328,158.59300231933594 C123.15799713134766,158.46600341796875 124.4739990234375,160 124.56500244140625,161.67300415039062 C125.38500213623047,167.0399932861328 127.4020004272461,172.67300415039062 132.08200073242188,175.85499572753906 C141.11399841308594,181.6820068359375 152.44700622558594,181.2830047607422 162.78900146484375,181.4459991455078 C171.35699462890625,181.0659942626953 180.97500610351562,180.9510040283203 187.9669952392578,175.28799438476562 C191.656005859375,172.05799865722656 192.74899291992188,166.6540069580078 191.7519989013672,162.0050048828125 C190.6719970703125,158.0800018310547 186.5659942626953,156.25100708007812 183.0399932861328,155.05499267578125 C164.94500732421875,149.33099365234375 145.3040008544922,151.4080047607422 127.38400268554688,144.93499755859375 C120.10900115966797,142.36399841308594 113.0739974975586,137.5030059814453 110.27899932861328,130.0290069580078 C106.37899780273438,119.45099639892578 108.16600036621094,106.36699676513672 116.37699890136719,98.26399993896484 C124.38300323486328,90.2040023803711 135.94000244140625,87.0999984741211 146.92799377441406,85.98899841308594 C146.92799377441406,85.98899841308594 146.92799377441406,85.98999786376953 146.92799377441406,85.98999786376953"></path>
</g>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,-17.178062438964844,15.101215362548828)">
<g opacity="1" transform="matrix(0.5699999928474426,0,0,0.5699999928474426,91.84361267089844,17.515222549438477)">
<path fill="url(#__lottie_element_116)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.38171300292015076,0,0,0.38171300292015076,13.853111267089844,-39.99816131591797)">
<g opacity="1" transform="matrix(0.9348480105400085,0.5955638885498047,0,0.21355199813842773,182.25379943847656,146.10284423828125)">
<path fill="rgb(223,177,165)" fill-opacity="1" d=" M-0.09652800112962723,-0.3234440088272095 C-0.09652800112962723,-0.3234440088272095 1.5008889436721802,-8.048053741455078 1.5008889436721802,-8.048053741455078 C1.5008889436721802,-8.048053741455078 31.193363189697266,-7.974112033843994 31.193363189697266,-7.974112033843994 C31.193363189697266,-7.974112033843994 34.064998626708984,3.6011600494384766 34.064998626708984,3.6011600494384766 C34.064998626708984,3.6011600494384766 31.193359375,31.193359375 31.193359375,31.193359375 C31.193359375,31.193359375 -0.09652700275182724,30.696794509887695 -0.09652700275182724,30.696794509887695 C-0.09652700275182724,30.696794509887695 -0.09652800112962723,-0.3234440088272095 -0.09652800112962723,-0.3234440088272095"></path>
</g>
<g opacity="1" transform="matrix(0.9348480105400085,-0.4908061921596527,0,0.21355199813842773,211.36244201660156,164.68048095703125)">
<path fill="rgb(225,170,156)" fill-opacity="1" d=" M-0.000009000000318337698,-7.974215984344482 C-0.000009000000318337698,-7.974215984344482 29.14432716369629,-7.847092151641846 29.14432716369629,-7.847092151641846 C29.14432716369629,-7.847092151641846 31.3459415435791,0.12940900027751923 31.3459415435791,0.12940900027751923 C31.3459415435791,0.12940900027751923 31.3459415435791,31.21710205078125 31.3459415435791,31.21710205078125 C31.3459415435791,31.21710205078125 7.462864875793457,31.19900131225586 7.462864875793457,31.19900131225586 C7.462864875793457,31.19900131225586 0,31.193359375 0,31.193359375 C0,31.193359375 -0.000009000000318337698,-7.974215984344482 -0.000009000000318337698,-7.974215984344482"></path>
</g>
<g opacity="1" transform="matrix(1.4882019758224487,0,0,1.4881900548934937,204.34121704101562,125.14436340332031)">
<path fill="rgb(255,189,174)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.7082487344741821,0.45433855056762695,-0.8632461428642273,0.4459362328052521,207.06251525878906,130.8187713623047)">
<g opacity="1" transform="matrix(2.600053071975708,0,0,2.600053071975708,1.8375415802001953,8.975322723388672)">
<path fill="rgb(105,65,54)" fill-opacity="1" d=" M1.51398503780365,1.1205370426177979 C1.51398503780365,1.1205370426177979 5.875424861907959,-0.6372720003128052 5.875424861907959,-0.6372720003128052 C5.875424861907959,-0.6372720003128052 5.883117198944092,0.8473129868507385 5.883117198944092,0.8473129868507385 C5.883117198944092,0.8473129868507385 3.098557949066162,1.8165229558944702 3.098557949066162,1.8165229558944702 C3.098557949066162,1.8165229558944702 5.883114814758301,2.801115036010742 5.883114814758301,2.801115036010742 C5.883114814758301,2.801115036010742 5.875418186187744,4.254929065704346 5.875418186187744,4.254929065704346 C5.875418186187744,4.254929065704346 1.51398503780365,2.5242040157318115 1.51398503780365,2.5242040157318115 C1.51398503780365,2.5242040157318115 1.51398503780365,1.1205370426177979 1.51398503780365,1.1205370426177979"></path>
</g>
<g opacity="1" transform="matrix(-2.600053071975708,0,0,2.600053071975708,44.80925369262695,8.975322723388672)">
<path fill="rgb(105,65,54)" fill-opacity="1" d=" M1.51398503780365,1.1205370426177979 C1.51398503780365,1.1205370426177979 5.875424861907959,-0.6372720003128052 5.875424861907959,-0.6372720003128052 C5.875424861907959,-0.6372720003128052 5.883117198944092,0.8473129868507385 5.883117198944092,0.8473129868507385 C5.883117198944092,0.8473129868507385 3.098557949066162,1.8165229558944702 3.098557949066162,1.8165229558944702 C3.098557949066162,1.8165229558944702 5.883114814758301,2.801115036010742 5.883114814758301,2.801115036010742 C5.883114814758301,2.801115036010742 5.875418186187744,4.254929065704346 5.875418186187744,4.254929065704346 C5.875418186187744,4.254929065704346 1.51398503780365,2.5242040157318115 1.51398503780365,2.5242040157318115 C1.51398503780365,2.5242040157318115 1.51398503780365,1.1205370426177979 1.51398503780365,1.1205370426177979"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,22.27936363220215,0.679107666015625)">
<path fill="rgb(105,65,54)" fill-opacity="1" d=" M1.7486040592193604,3.010611057281494 C1.7486040592193604,3.010611057281494 5.2774977684021,3.010611057281494 5.2774977684021,3.010611057281494 C5.2774977684021,3.010611057281494 0.3378489911556244,21.74285888671875 0.3378489911556244,21.74285888671875 C0.3378489911556244,21.74285888671875 -3.2810440063476562,21.742860794067383 -3.2810440063476562,21.742860794067383 C-3.2810440063476562,21.742860794067383 1.7486040592193604,3.010611057281494 1.7486040592193604,3.010611057281494"></path>
</g>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0.7458572387695312,16.793380737304688)">
<g opacity="1" transform="matrix(0.5699999928474426,0,0,0.5699999928474426,42.425445556640625,77.43665313720703)">
<path fill="url(#__lottie_element_117)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(0.38171300292015076,0,0,0.38171300292015076,-35.565059661865234,20.64568328857422)">
<g opacity="1" transform="matrix(0.9348480105400085,0.5955638885498047,0,0.21355199813842773,182.25379943847656,146.10284423828125)">
<path fill="rgb(223,177,165)" fill-opacity="1" d=" M31.193359375,0 C31.193359375,0 0,0 0,0 C0,0 0,31.193359375 0,31.193359375 C0,31.193359375 31.193359375,31.193359375 31.193359375,31.193359375 C31.193359375,31.193359375 31.193359375,0 31.193359375,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9348480105400085,-0.4908061921596527,0,0.21355199813842773,211.4148406982422,164.68048095703125)">
<path fill="rgb(225,170,156)" fill-opacity="1" d=" M31.193359375,0 C31.193359375,0 0,0 0,0 C0,0 0,31.193359375 0,31.193359375 C0,31.193359375 31.193359375,31.193359375 31.193359375,31.193359375 C31.193359375,31.193359375 31.193359375,0 31.193359375,0z"></path>
</g>
<g opacity="1" transform="matrix(1.4882019758224487,0,0,1.4881900548934937,204.34121704101562,125.14436340332031)">
<path fill="rgb(255,189,174)" fill-opacity="1" d=" M-14.902325630187988,14.044679641723633 C-14.902325630187988,14.044679641723633 4.753125190734863,3.682729959487915 4.753125190734863,3.682729959487915 C4.753125190734863,3.682729959487915 24.40859031677246,16.247238159179688 24.40859031677246,16.247238159179688 C24.40859031677246,16.247238159179688 4.753125190734863,26.56658172607422 4.753125190734863,26.56658172607422 C4.753125190734863,26.56658172607422 -14.902325630187988,14.044679641723633 -14.902325630187988,14.044679641723633"></path>
</g>
<g opacity="1" transform="matrix(2.0779459476470947,1.332993507385254,-2.53269624710083,1.3083418607711792,-4.91009521484375,-169.19146728515625)">
<g opacity="1" transform="matrix(1,0,0,1,-0.1285247802734375,-0.2019500732421875)">
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(105,65,54)" stroke-opacity="1" stroke-width="1.5" d=" M178.603271484375,60.01042938232422 C178.603271484375,60.01042938232422 178.65249633789062,63.924320220947266 178.65249633789062,63.924320220947266 C178.65249633789062,63.924320220947266 178.5537567138672,65.5856704711914 177.21376037597656,65.5856704711914 C175.87376403808594,65.5856704711914 175.7832794189453,64.41043090820312 175.7832794189453,64.07042694091797"></path>
</g>
<g opacity="1" transform="matrix(0.20601600408554077,0,0,0.20600900053977966,144.576171875,49.95379638671875)">
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(105,65,54)" stroke-opacity="1" stroke-width="6" d=" M191.91029357910156,57.36440658569336 C191.91029357910156,57.36440658569336 191.96534729003906,51.33961486816406 183.6267547607422,51.11053466796875 C175.2881622314453,50.88145065307617 175.05908203125,56.28778839111328 175.05908203125,56.28778839111328 C175.05908203125,56.28778839111328 174.7841796875,60.5487174987793 179.82398986816406,61.73994445800781 C184.86380004882812,63.38933563232422 187.7044219970703,64.21403503417969 187.7044219970703,64.21403503417969 C187.7044219970703,64.21403503417969 191.36973571777344,65.5885238647461 191.23228454589844,69.25383758544922 C191.09483337402344,72.91915130615234 189.26217651367188,74.6601791381836 185.96339416503906,75.07252502441406 C182.66461181640625,75.48487091064453 175.09246826171875,75.48487091064453 175.09246826171875,67.69608306884766"></path>
</g>
</g>
</g>
</g>
<g opacity="1" transform="matrix(1.2036950588226318,0,0,1.2036950588226318,-27.574203491210938,-3.9759902954101562)">
<g opacity="1" transform="matrix(-0.06260599941015244,0,-0.0110391266644001,0.06260599941015244,64.0025405883789,-19.42633628845215)">
<g opacity="1" transform="matrix(1,0,0,1,-1387.8221435546875,788.4508056640625)">
<path fill="url(#__lottie_element_118)" fill-opacity="1" d=" M991.4862670898438,700.021484375 C991.4862670898438,700.021484375 462.228271484375,1005.5921020507812 462.228271484375,1005.5921020507812 C448.64453125,1013.4630737304688 424.77777099609375,1012.4474487304688 408.908935546875,1003.4339599609375 C408.908935546875,1003.4339599609375 61.825382232666016,802.8516845703125 61.825382232666016,802.8516845703125 C46.08348083496094,793.838134765625 44.30617141723633,780.0005493164062 58.0168571472168,772.1295776367188 C58.0168571472168,772.1295776367188 587.1478881835938,466.6858825683594 587.1478881835938,466.6858825683594 C600.8585815429688,458.81494140625 624.725341796875,459.70361328125 640.4672241210938,468.84405517578125 C640.4672241210938,468.84405517578125 987.677734375,669.4263305664062 987.677734375,669.4263305664062 C1003.4196166992188,678.3129272460938 1005.0700073242188,692.2775268554688 991.4862670898438,700.021484375"></path>
</g>
</g>
<g opacity="1" transform="matrix(-0.06260599941015244,0,-0.0110391266644001,0.06260599941015244,140.44046020507812,16.771160125732422)">
<g opacity="1" transform="matrix(11.444931030273438,-6.641504287719727,0.03267722576856613,14.784995079040527,21.843093872070312,330.38885498046875)">
<path fill="rgb(153,161,202)" fill-opacity="1" d=" M50.20165252685547,2.0000009536743164 C50.20165252685547,0.896200954914093 49.30545425415039,9.5367431640625e-7 48.20165252685547,9.5367431640625e-7 C48.20165252685547,9.5367431640625e-7 2,9.5367431640625e-7 2,9.5367431640625e-7 C0.8962000012397766,9.5367431640625e-7 0,0.896200954914093 0,2.0000009536743164 C0,2.0000009536743164 0,29.68979263305664 0,29.68979263305664 C0,30.793594360351562 0.8962000012397766,31.68979263305664 2,31.68979263305664 C2,31.68979263305664 48.20165252685547,31.68979263305664 48.20165252685547,31.68979263305664 C49.30545425415039,31.68979263305664 50.20165252685547,30.793594360351562 50.20165252685547,29.68979263305664 C50.20165252685547,29.68979263305664 50.20165252685547,2.0000009536743164 50.20165252685547,2.0000009536743164z"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,-5.733642578125,2.634552001953125)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M588.9251708984375,477.6036682128906 C588.9251708984375,477.6036682128906 59.66721725463867,783.30126953125 59.66721725463867,783.30126953125 C46.08348083496094,790.9182739257812 35.16571044921875,782.66650390625 35.16571044921875,764.2586059570312 C35.16571044921875,764.2586059570312 35.16571044921875,363.4748840332031 35.16571044921875,363.4748840332031 C35.16571044921875,345.3209228515625 46.21043014526367,324.1201171875 59.79417037963867,316.2491760253906 C59.79417037963867,316.2491760253906 588.9251708984375,10.805495262145996 588.9251708984375,10.805495262145996 C602.5089111328125,2.934544086456299 613.6806030273438,11.313298225402832 613.6806030273438,29.467266082763672 C613.6806030273438,29.467266082763672 613.6806030273438,430.3779602050781 613.6806030273438,430.3779602050781 C613.6806030273438,448.65887451171875 602.5089111328125,469.73272705078125 588.9251708984375,477.6036682128906"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,-5.733642578125,2.634521484375)">
<path fill="rgb(49,56,86)" fill-opacity="1" d=" M591.0833740234375,438.1219482421875 C591.0833740234375,438.1219482421875 57.509056091308594,746.2316284179688 57.509056091308594,746.2316284179688 C57.509056091308594,746.2316284179688 57.509056091308594,355.7308654785156 57.509056091308594,355.7308654785156 C57.509056091308594,355.7308654785156 591.0833740234375,47.74818420410156 591.0833740234375,47.74818420410156 C591.0833740234375,47.74818420410156 591.0833740234375,437.9949951171875 591.0833740234375,437.9949951171875 C591.0833740234375,437.9949951171875 591.0833740234375,438.1219482421875 591.0833740234375,438.1219482421875"></path>
</g>
<g opacity="0.9999997901187837" transform="matrix(0.9999998211860657,-0.5773501396179199,0,0.9999997615814209,0.40911865234375,336.54595947265625)">
<g opacity="1" transform="matrix(17.248016357421875,0,0,17.72298812866211,51.79583740234375,51.44256591796875)">
<path fill="rgb(1,7,40)" fill-opacity="1" d=" M30.89946937561035,0 C30.89946937561035,0 0,0 0,0 C0,0 0,21.97295570373535 0,21.97295570373535 C0,21.97295570373535 30.89946937561035,21.97295570373535 30.89946937561035,21.97295570373535 C30.89946937561035,21.97295570373535 30.89946937561035,0 30.89946937561035,0z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
<g mask="url(#__lottie_element_99_1)" style="display: block;">
<g transform="matrix(-0.07937642931938171,-0.05102217569947243,-0.015582544729113579,0.08837300539016724,143.1018524169922,39.17967224121094)" opacity="1">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1,0,0,1,-2.214141845703125,-246.64794921875)">
<g opacity="1" transform="matrix(-1,0,0,-1,652.5324096679688,464.3983154296875)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(61,244,168)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 286.64642333984375,27.196046829223633 286.64642333984375,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,652.47021484375,511.8749084472656)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(209,219,237)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 152.01185607910156,27.196046829223633 152.01185607910156,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,653.105712890625,559.947509765625)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(246,91,52)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 286.64642333984375,27.196046829223633 286.64642333984375,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,653.5377807617188,606.9735717773438)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(61,244,168)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 421.2809753417969,27.196046829223633 421.2809753417969,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,654.1832275390625,655.856201171875)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(246,91,52)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 196.89004516601562,27.196046829223633 196.89004516601562,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,654.683349609375,704.1476440429688)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(61,244,168)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 286.64642333984375,27.196046829223633 286.64642333984375,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,654.9918823242188,751.5968627929688)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(209,219,237)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 196.89004516601562,27.196046829223633 196.89004516601562,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,649.5770874023438,177.82888793945312)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(209,219,237)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 152.01185607910156,27.196046829223633 152.01185607910156,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,650.212646484375,225.9014434814453)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(246,91,52)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 286.64642333984375,27.196046829223633 286.64642333984375,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,650.6446533203125,272.9274597167969)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(61,244,168)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 421.2809753417969,27.196046829223633 421.2809753417969,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,651.2901000976562,321.81011962890625)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(246,91,52)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 196.89004516601562,27.196046829223633 196.89004516601562,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,651.7902221679688,370.1015625)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(61,244,168)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 286.64642333984375,27.196046829223633 286.64642333984375,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,652.0988159179688,417.55078125)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(209,219,237)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 196.89004516601562,27.196046829223633 196.89004516601562,27.196046829223633"></path>
</g>
<g opacity="1" transform="matrix(-1,0,0,-1,649.6392822265625,130.35226440429688)">
<path stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke="rgb(61,244,168)" stroke-opacity="1" stroke-width="25" d=" M107.13365936279297,27.196046829223633 C107.13365936279297,27.196046829223633 286.64642333984375,27.196046829223633 286.64642333984375,27.196046829223633"></path>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="matrix(1.1727010011672974,0,0,1.1727010011672974,-17.52361297607422,-9.573005676269531)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<g opacity="1" transform="matrix(1.2036950588226318,0,0,1.2036950588226318,-27.574203491210938,-3.9759902954101562)">
<g opacity="1" transform="matrix(-0.06260599941015244,0,-0.0110391266644001,0.06260599941015244,140.44046020507812,16.771160125732422)">
<g opacity="1" transform="matrix(11.433996200561523,-6.635158538818359,12.820520401000977,7.364198207855225,29.57161521911621,800.9136352539062)">
<path fill="rgb(153,161,202)" fill-opacity="1" d=" M50.20165252685547,2.0000009536743164 C50.20165252685547,0.896200954914093 49.30545425415039,9.5367431640625e-7 48.20165252685547,9.5367431640625e-7 C48.20165252685547,9.5367431640625e-7 2,9.5367431640625e-7 2,9.5367431640625e-7 C0.8962000012397766,9.5367431640625e-7 0,0.896200954914093 0,2.0000009536743164 C0,2.0000009536743164 0,29.68979263305664 0,29.68979263305664 C0,30.793594360351562 0.8962000012397766,31.68979263305664 2,31.68979263305664 C2,31.68979263305664 48.20165252685547,31.68979263305664 48.20165252685547,31.68979263305664 C49.30545425415039,31.68979263305664 50.20165252685547,30.793594360351562 50.20165252685547,29.68979263305664 C50.20165252685547,29.68979263305664 50.20165252685547,2.0000009536743164 50.20165252685547,2.0000009536743164z"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(181,189,235)" fill-opacity="1" d=" M991.4862670898438,700.021484375 C991.4862670898438,700.021484375 462.228271484375,1005.5921020507812 462.228271484375,1005.5921020507812 C448.64453125,1013.4630737304688 424.77777099609375,1012.4474487304688 408.908935546875,1003.4339599609375 C408.908935546875,1003.4339599609375 61.825382232666016,802.8516845703125 61.825382232666016,802.8516845703125 C46.08348083496094,793.838134765625 44.30617141723633,780.0005493164062 58.0168571472168,772.1295776367188 C58.0168571472168,772.1295776367188 587.1478881835938,466.6858825683594 587.1478881835938,466.6858825683594 C600.8585815429688,458.81494140625 624.725341796875,459.70361328125 640.4672241210938,468.84405517578125 C640.4672241210938,468.84405517578125 987.677734375,669.4263305664062 987.677734375,669.4263305664062 C1003.4196166992188,678.3129272460938 1005.0700073242188,692.2775268554688 991.4862670898438,700.021484375"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(153,161,202)" fill-opacity="1" d=" M811.977783203125,778.7310180664062 C811.977783203125,778.7310180664062 598.446533203125,901.873291015625 598.446533203125,901.873291015625 C592.2258911132812,905.5548706054688 581.4351196289062,905.0470581054688 574.3258666992188,900.9846801757812 C574.3258666992188,900.9846801757812 460.7048645019531,835.35107421875 460.7048645019531,835.35107421875 C453.5956115722656,831.2886352539062 452.83392333984375,825.0680541992188 458.92755126953125,821.386474609375 C458.92755126953125,821.386474609375 672.4588623046875,698.2442016601562 672.4588623046875,698.2442016601562 C678.806396484375,694.5626220703125 689.47021484375,695.0704345703125 696.5794677734375,699.1328735351562 C696.5794677734375,699.1328735351562 810.3274536132812,764.7664184570312 810.3274536132812,764.7664184570312 C817.4366455078125,768.955810546875 818.1983642578125,775.0494384765625 811.977783203125,778.7310180664062"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(153,161,202)" fill-opacity="1" d=" M777.1932373046875,623.9779663085938 C777.1932373046875,623.9779663085938 330.45330810546875,881.8150634765625 330.45330810546875,881.8150634765625 C324.10577392578125,885.4966430664062 313.1880187988281,884.9888305664062 305.9518127441406,880.7994995117188 C305.9518127441406,880.7994995117188 123.52348327636719,775.4302978515625 123.52348327636719,775.4302978515625 C116.28728485107422,771.2409057617188 115.52558135986328,765.0203247070312 121.87312316894531,761.3387451171875 C121.87312316894531,761.3387451171875 568.359130859375,503.50164794921875 568.359130859375,503.50164794921875 C574.7067260742188,499.820068359375 585.6244506835938,500.3278503417969 592.8606567382812,504.5172424316406 C592.8606567382812,504.5172424316406 775.2890014648438,609.8864135742188 775.2890014648438,609.8864135742188 C782.5252075195312,614.0758056640625 783.2869262695312,620.42333984375 777.0662841796875,623.9779663085938 C777.0662841796875,623.9779663085938 777.1932373046875,623.9779663085938 777.1932373046875,623.9779663085938"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M604.9210205078125,521.6555786132812 C604.9210205078125,521.6555786132812 154.62643432617188,781.65087890625 154.62643432617188,781.65087890625 C151.93258666992188,782.8673706054688 148.82005310058594,782.7258911132812 146.2476806640625,781.27001953125 C146.2476806640625,781.27001953125 130.2518768310547,772.0026245117188 130.2518768310547,772.0026245117188 C127.71286010742188,770.7330932617188 127.4589614868164,768.447998046875 129.61712646484375,767.178466796875 C129.61712646484375,767.178466796875 579.9116821289062,507.1831970214844 579.9116821289062,507.1831970214844 C582.6055297851562,505.9667053222656 585.7180786132812,506.1081848144531 588.2904663085938,507.5640563964844 C588.2904663085938,507.5640563964844 604.2862548828125,516.8314819335938 604.2862548828125,516.8314819335938 C606.8252563476562,518.1009521484375 607.0791625976562,520.3861083984375 604.9210205078125,521.6555786132812"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,-6.1588134765625,1.37701416015625)">
<path fill="rgb(153,161,202)" fill-opacity="1" d=" M757.135009765625,824.1793823242188 C757.135009765625,824.1793823242188 675.1248168945312,871.5320434570312 675.1248168945312,871.5320434570312 C668.7772827148438,875.213623046875 668.7772827148438,881.1802978515625 675.1248168945312,884.8618774414062 C675.1248168945312,884.8618774414062 675.886474609375,885.2427368164062 675.886474609375,885.2427368164062 C675.886474609375,885.2427368164062 781.0017700195312,824.5602416992188 781.0017700195312,824.5602416992188 C781.0017700195312,824.5602416992188 780.2400512695312,824.1793823242188 780.2400512695312,824.1793823242188 C773.8925170898438,820.3709106445312 763.6094970703125,820.3709106445312 757.261962890625,824.1793823242188 C757.261962890625,824.1793823242188 757.135009765625,824.1793823242188 757.135009765625,824.1793823242188"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M129.49017333984375,739.884033203125 C129.49017333984375,739.884033203125 561.7576904296875,490.2987365722656 561.7576904296875,490.2987365722656 C561.7576904296875,490.2987365722656 554.0137329101562,485.85546875 554.0137329101562,485.85546875 C554.0137329101562,485.85546875 121.61921691894531,735.4407958984375 121.61921691894531,735.4407958984375 C121.61921691894531,735.4407958984375 129.49017333984375,739.884033203125 129.49017333984375,739.884033203125"></path>
</g>
<g opacity="1" transform="matrix(0.8535019755363464,0,0,0.8535019755363464,759.77734375,662.8109130859375)">
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-693.0552368164062,143.76040649414062)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-656.2100219726562,122.71769714355469)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-619.44287109375,101.48150634765625)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-582.822265625,80.3312759399414)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-546.0043334960938,59.106815338134766)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-509.43890380859375,38.04121780395508)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-472.8077087402344,16.763038635253906)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-436.1878662109375,-4.394382476806641)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-399.42755126953125,-25.4710636138916)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-362.82562255859375,-46.58913040161133)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-326.1490173339844,-67.89771270751953)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-289.6365661621094,-89.06140899658203)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-252.91937255859375,-110.25193786621094)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-194.06982421875,-98.6803970336914)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-156.9719696044922,-120.11192321777344)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-230.78701782226562,-77.4898681640625)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-267.2994689941406,-56.326171875)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-303.97607421875,-35.0175895690918)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-340.5780029296875,-13.899521827697754)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-377.33831787109375,7.177159786224365)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-413.9581604003906,28.33458137512207)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-450.58935546875,49.612762451171875)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-487.15478515625,70.67835998535156)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-523.9727172851562,91.90281677246094)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-560.5933227539062,113.05305480957031)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-597.3604736328125,134.2892303466797)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(1.580840826034546,-0.9174718856811523,0.9062033295631409,0.5204678177833557,-653.1787719726562,166.85435485839844)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(1.7547959089279175,-1.0184301137924194,0.9062033295631409,0.5204678177833557,-616.9609375,188.29278564453125)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(2.4455835819244385,-1.419342279434204,0.9062033295631409,0.5204678177833557,-579.4505615234375,209.80470275878906)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(1.5969313383102417,-0.9168770909309387,0.9037652611732483,0.5246900320053101,-217.26405334472656,-130.77291870117188)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(1.951420783996582,-1.120406985282898,0.9037652611732483,0.5246900320053101,-152.6072235107422,-80.04650115966797)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-189.041259765625,-58.76203536987305)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-225.5537109375,-37.59834289550781)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-262.2303161621094,-16.28976058959961)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-298.83221435546875,4.828307628631592)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-335.592529296875,25.904987335205078)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-372.21240234375,47.06241226196289)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-408.8435974121094,68.34059143066406)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-445.40899658203125,89.40618896484375)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-482.2269592285156,110.63064575195312)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-518.8475952148438,131.7808837890625)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-555.6146850585938,153.01705932617188)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(2.4445743560791016,-1.4035507440567017,0.9037652611732483,0.5246900320053101,-129.11375427246094,-50.32905578613281)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-165.3048553466797,-29.486408233642578)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-201.98147583007812,-8.177824974060059)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-238.58338928222656,12.940242767333984)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-275.34368896484375,34.01692581176758)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-311.9635314941406,55.174346923828125)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-348.5947265625,76.45252227783203)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-385.16015625,97.51811981201172)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-421.97808837890625,118.74258422851562)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-458.5987243652344,139.892822265625)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-495.3658447265625,161.12899780273438)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-148.16839599609375,6.200565338134766)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-113.7689208984375,-13.476497650146484)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-78.94477081298828,-33.861366271972656)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-43.271240234375,-54.38779830932617)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(7.967068195343018,-4.574286937713623,0.9037652611732483,0.5246900320053101,-397.82965087890625,149.58189392089844)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-432.2974548339844,170.38792419433594)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9042345881462097,-0.5191656947135925,0.9037652611732483,0.5246900320053101,-468.0848693847656,191.0398712158203)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-504.70550537109375,212.1901092529297)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
<g opacity="1" transform="matrix(0.9018025398254395,-0.5233787298202515,0.9062033295631409,0.5204678177833557,-539.6614379882812,232.40257263183594)">
<path fill="rgb(22,28,59)" fill-opacity="1" d=" M30.313060760498047,0 C30.313060760498047,0 0,0 0,0 C0,0 0,30.313060760498047 0,30.313060760498047 C0,30.313060760498047 30.313060760498047,30.313060760498047 30.313060760498047,30.313060760498047 C30.313060760498047,30.313060760498047 30.313060760498047,0 30.313060760498047,0z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 976 KiB

BIN
public/pf.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

25002
src/components/MyScene/Chunk/chunkmap.json
View File

File diff suppressed because it is too large Load Diff

18
src/components/MyScene/Chunk/chunkutils.ts
View File

@ -1,7 +1,17 @@
export function getChunkCoordinates3D(x: number, y: number, z: number, chunkSize:number, scale:number) {
import * as THREE from 'three'
import { UNIT, CHUNK_SIZE } from "@/lib/constants";
export function getChunkCoordinates3D(x: number, y: number, z: number) {
return {
chunkX: Math.floor(x / (chunkSize * scale)),
chunkY: Math.floor(y / (chunkSize * scale)),
chunkZ: Math.floor(z / (chunkSize * scale)),
chunkX: (x>0?1:-1) * (Math.floor((Math.abs(x) - 0.5 * UNIT) / UNIT)+1),
chunkY: (y>0?1:-1) * (Math.floor((Math.abs(y) - 0.5 * UNIT) / UNIT)+1),
chunkZ: (z>0?1:-1) * (Math.floor((Math.abs(z) - 0.5 * UNIT) / UNIT)+1),
};
}
export function offset(index:number) {
const _size = 0.5 * UNIT/CHUNK_SIZE
return new THREE.Vector3 (((index % 7)-3.5)*_size, ((index % 3)-1.5)*_size, ((index % 11)-5.5)*_size)
return new THREE.Vector3 (0, 0, 0)
}

25342
src/components/MyScene/Chunk/data.json Normal file
View File

File diff suppressed because it is too large Load Diff

180
src/components/MyScene/Chunk/index.tsx
View File

@ -1,60 +1,57 @@
import { useEffect, useMemo, useState } from "react";
import { useEffect, useState } from "react";
import * as THREE from "three"
import { useFrame, useThree } from "@react-three/fiber";
import { getChunkCoordinates3D } from "./chunkutils"
import { getChunkCoordinates3D, offset } from "./chunkutils"
import useStore from "@/lib/store";
import maps from "./chunkmap.json"
import { supabase } from "@/lib/supabaseClient";
import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/Addons.js";
import { UNIT, CHUNK_SIZE, RADIUS } from "@/lib/constants";
import starData from "./data.json"
export default function Chunks() {
const { scene, camera } = useThree()
const focus = useStore((s)=>s.focus)
const [chunk, setChunk] = useState({chunkX: 0,chunkY: 0,chunkZ: 0})
const names = useStore((s)=>s.names)
const StarCount = useStore((s)=>s.count)
const chunkMap :any= maps
const [chunk, setChunk] = useState({chunkX: 0,chunkY: 0,chunkZ: 0})
const update = useStore((s)=>s.update)
const colors = [0xf9c54b, 0xa891fb, 0xff9933, 0x00ccff, 0xccb0e9]
const [loaded] = useState({data:new Map()})
const [labelRenderer] = useState(new CSS2DRenderer())
const chunkMap = starData.chunkMap
const names = starData.names
const createStar = (pos:THREE.Vector3, data:any, constellationIndex?:number) => {
const createStar = (pos:THREE.Vector3, data:any, constellationIndex:number, chunkIndex:number) => {
const _rr = data? Math.cbrt( data.amount * 0.239 ) / 5000 : 0.2
const rr = (_rr>2.5)?2.5:(_rr<0.2)?0.2:_rr
const color = colors[Math.floor(Math.random() * 4.5)]
const material = new THREE.MeshLambertMaterial({color:color})
const geometry = new THREE.SphereGeometry(rr, 16, 16)
const mesh = new THREE.Mesh(geometry, material)
if(data) data.constellation = constellationIndex
if(data) {
data.constellationIndex = constellationIndex
data.chunkIndex = chunkIndex
}
mesh.name = data ? data.transaction_signature : undefined
mesh.userData = data ? data : undefined
mesh.position.copy(pos)
return mesh
}
const createConstellation =(_size:number, data:any[], constellationIndex:number) =>{
const group = new THREE.Group()
const createConstellation =(_size:number, data:any[], constellationIndex:number, chunkIndex:number) =>{
// constellationIndex=== 1 && console.log(constellationIndex, data)
const starGroup = new THREE.Group()
const points = []
for (let i = 0; i<5 ; i++){
while(1){
const pos = new THREE.Vector3(Math.random() *10 -5, Math.random() *10 -5, Math.random() *10 -5)
let j
for (j = 0; j<points.length; j++){
if(pos.distanceTo(points[j])<4)
break
}
if(j === points.length){
const star = createStar(pos, data[i], constellationIndex)
starGroup.add(star)
points.push(pos)
break
}
const points: any[] = []
data.map((item)=>{
if(item){
const pos = new THREE.Vector3(item.x, item.y, item.z)
const star = createStar(pos, item, constellationIndex, chunkIndex)
starGroup.add(star)
points.push(pos)
}
}
points.push(points[0])
})
if (points.length>0)
points.push(points[0])
const material = new THREE.LineBasicMaterial({
color: 0x888888
});
@ -63,70 +60,71 @@ export default function Chunks() {
line.name = "line"
line.userData = {constellation:constellationIndex}
starGroup.add(line)
starGroup.scale.setScalar(1.5)
starGroup.position.set(Math.random() *_size - 0.5*_size, Math.random() *_size - 0.5*_size, Math.random() *_size - 0.5*_size)
// const text = document.createElement( 'div' );
// text.className = 'scene-label';
// text.textContent = names[constellationIndex % names.length];
// starGroup.scale.setScalar(1.5)
const label = document.createElement('div');
label.className = "scene-label"
label.textContent = names[constellationIndex % names.length];
const labelObject = new CSS2DObject(label);
labelObject.name = `constellation${constellationIndex}_label`
starGroup.add( labelObject );
group.add(starGroup)
return group
starGroup.name = `constellation${constellationIndex}`
const mesh = new THREE.Mesh(new THREE.BoxGeometry(UNIT/CHUNK_SIZE, UNIT/CHUNK_SIZE, UNIT/CHUNK_SIZE), new THREE.MeshBasicMaterial({color:0x990000, wireframe:true}))
// starGroup.add(mesh)
return starGroup
}
const createChunk = async (chunkX:number, chunkY:number, chunkZ:number, chunkSize:number, scale:number) =>{
const chunkKey = `${chunkX},${chunkY},${chunkZ}`; // Unique key for the chunk
if (loaded.data.has(chunkKey)) return;
// const _oldElement = scene.getObjectByName(chunkKey)
// if(_oldElement){
// return null
// }
loaded.data.set(chunkKey, true);
const newChunk = new THREE.Group(); // Each chunk is a Group (or Object3D)
newChunk.name = chunkKey
newChunk.userData = {index:chunkMap[chunkKey]}
// Add geometry or objects to the chunk
const _size = scale/chunkSize
const high = StarCount-(chunkMap[chunkKey]-1)*8*5+1
const low = high-8*5-1
// const data :any = []
const { data, error } = await supabase.from('transaction-data-updated').select('*').gt('transaction_id', low).lt('transaction_id', high).order('transaction_id', { ascending: false });
if (error) {
console.error('Error fetching data:', error);
return null
}
let _index = 0
for (let x = 0; x < chunkSize; x++) {
for (let y = 0; y < chunkSize; y++) {
for (let z = 0; z < chunkSize; z++) {
const constellationIndex = (chunkMap[chunkKey]-1) * 8 + _index
const createChunk = async (chunkX:number, chunkY:number, chunkZ:number, chunkKey:string) =>{
const newChunk = new THREE.Group(); // Each chunk is a Group (or Object3D)
newChunk.name = chunkKey
const chunkIndex = chunkMap[chunkKey as keyof typeof chunkMap]
newChunk.userData = {index:chunkIndex}
// Add geometry or objects to the chunk
const _size = UNIT/CHUNK_SIZE
const low = (chunkIndex-1)*8*5
const high = low + 40 + 1
const { data, error } = await supabase.from('transaction-data-updated').select('*').gt('transaction_id', low).lt('transaction_id', high).order('transaction_id', { ascending: true });
if (error) {
console.error('Error fetching data:', error);
return null
}
let _index = 0
for (let x = 0; x < CHUNK_SIZE; x++) {
for (let y = 0; y < CHUNK_SIZE; y++) {
for (let z = 0; z < CHUNK_SIZE; z++) {
if(data[_index*5]){
const constellationIndex = (chunkMap[chunkKey as keyof typeof chunkMap]-1) * 8 + _index
const newArray = [data[_index*5], data[_index*5+1], data[_index*5+2], data[_index*5+3], data[_index*5+4]]
const constellation = createConstellation(_size, newArray, constellationIndex)
constellation.position.set((x-0.5)*_size, (y-0.5)*_size, (z-0.5)*_size);
constellation.scale.setScalar(0.8)
newChunk.add(constellation);
_index ++
const constellation = createConstellation(_size, newArray, constellationIndex, chunkIndex)
const _offset = offset(constellationIndex)
constellation.position.set((x-0.5)*_size + _offset.x, (y-0.5)*_size + _offset.y, (z-0.5)*_size + _offset.z);
newChunk.add(constellation);
}
_index ++
}
}
newChunk.position.set(chunkX*scale, chunkY*scale, chunkZ*scale)
return newChunk
}
newChunk.position.set(chunkX*UNIT, chunkY*UNIT, chunkZ*UNIT)
const mesh = new THREE.Mesh(new THREE.BoxGeometry(UNIT, UNIT, UNIT), new THREE.MeshBasicMaterial({color:0x227722, transparent:true, opacity:0.5}))
// newChunk.add(mesh)
return newChunk
}
const updateChunks = async (chunkX: number, chunkY: number, chunkZ: number, chunkSize: number, scale: number) =>{
const updateChunks = async (chunkX: number, chunkY: number, chunkZ: number) =>{
// Load chunks in a grid around the camera
const network = scene.getObjectByName("network")
if(network){
const radius = 1; // Number of chunks to load around the camera
for (let x = -radius; x <= radius; x++) {
for (let y = -radius; y <= radius; y++) {
for (let z = -radius; z <= radius; z++) {
const chunk = await createChunk(chunkX + x, chunkY + y, chunkZ + z, chunkSize, scale);
for (let x = -RADIUS; x <= RADIUS; x++) {
for (let y = -RADIUS; y <= RADIUS; y++) {
for (let z = -RADIUS; z <= RADIUS; z++) {
const chunkKey = `${chunkX + x},${chunkY + y},${chunkZ + z}`; // Unique key for the chunk
if (loaded.data.has(chunkKey))
continue;
loaded.data.set(chunkKey, true);
const chunk = await createChunk(chunkX + x, chunkY + y, chunkZ + z, chunkKey);
if(chunk) network.add(chunk)
}
}
@ -135,7 +133,7 @@ export default function Chunks() {
const removeGroup : any = []
for (const chunkKey of loaded.data.keys()) {
const [x, y, z] = chunkKey.split(",").map(Number);
if ( Math.abs(x - chunkX) > radius || Math.abs(y - chunkY) > radius || Math.abs(z - chunkZ) > radius ) {
if ( Math.abs(x - chunkX) > RADIUS || Math.abs(y - chunkY) > RADIUS || Math.abs(z - chunkZ) > RADIUS ) {
removeGroup.push(chunkKey)
loaded.data.delete(chunkKey); // Free memory
}
@ -143,30 +141,29 @@ export default function Chunks() {
removeGroup.map((item:string)=>{
const _obj = scene.getObjectByName(item)
if(_obj){
_obj.traverse((child:any)=>{
if(child?.isCSS2DObject){
if (child.element && child.element.parentNode) {
child.element.parentNode.removeChild(child.element);
}
_obj?.children.map((item)=>{
const name = item.name
const child:any =_obj.getObjectByName(`${name}_label`)
if(child && child.element && child.element.parentNode){
child.element.parentNode.removeChild(child.element);
}
})
network.remove(_obj)
}
})
update.flag = false
}
}
useEffect(()=>{
if(names?.length>0){
const chunkSize = 2, scale = 100
const { chunkX, chunkY, chunkZ } = getChunkCoordinates3D(focus.x, focus.y, focus.z, chunkSize, scale/2);
if(chunk.chunkX !== chunkX || chunk.chunkY !== chunkY || chunk.chunkZ !== chunkZ){
setChunk({ chunkX, chunkY, chunkZ })
updateChunks(chunkX, chunkY, chunkZ, chunkSize, scale)
}
const { chunkX, chunkY, chunkZ } = getChunkCoordinates3D(focus.x, focus.y, focus.z);
if(chunk.chunkX !== chunkX || chunk.chunkY !== chunkY || chunk.chunkZ !== chunkZ){
// update.flag = true
setChunk({ chunkX, chunkY, chunkZ })
updateChunks(chunkX, chunkY, chunkZ)
}
},[focus, names])
},[focus])
useEffect(()=>{
labelRenderer.setSize( window.innerWidth, window.innerHeight );
@ -180,6 +177,9 @@ export default function Chunks() {
if(dom){
dom.appendChild( labelRenderer.domElement );
}
const { chunkX, chunkY, chunkZ } = getChunkCoordinates3D(focus.x, focus.y, focus.z);
update.flag = true
updateChunks(chunkX, chunkY, chunkZ)
},[])
useFrame(()=>{

65
src/components/MyScene/data.json
View File

@ -1,65 +0,0 @@
{
"metadata": {
"version": 4.6,
"type": "Material",
"generator": "Material.toJSON"
},
"uuid": "70d0e491-6240-4079-b06e-18b0acede21f",
"type": "MeshLambertMaterial",
"name": "AdditiveNebula06",
"color": 16777215,
"emissive": 0,
"map": "e45d9d5d-634c-4f70-9025-51e5d86afbf9",
"envMapRotation": [
0,
0,
0,
"XYZ"
],
"reflectivity": 1,
"refractionRatio": 0.98,
"blendColor": 0,
"textures": [
{
"uuid": "e45d9d5d-634c-4f70-9025-51e5d86afbf9",
"name": "",
"image": "e10f94ed-4864-4b30-9c6a-c3d3e24ba112",
"mapping": 300,
"channel": 0,
"repeat": [
1,
1
],
"offset": [
0,
0
],
"center": [
0,
0
],
"rotation": 0,
"wrap": [
1000,
1000
],
"format": 1023,
"internalFormat": null,
"type": 1009,
"colorSpace": "srgb",
"minFilter": 1008,
"magFilter": 1006,
"anisotropy": 1,
"flipY": true,
"generateMipmaps": true,
"premultiplyAlpha": false,
"unpackAlignment": 4
}
],
"images": [
{
"uuid": "e10f94ed-4864-4b30-9c6a-c3d3e24ba112",
"url": "data:image/png;base64,... ..."
}
]
}

204
src/components/MyScene/index.tsx
View File

@ -7,21 +7,64 @@ import useStore from '@/lib/store'
import gsap from 'gsap'
import { Bloom, EffectComposer } from '@react-three/postprocessing'
import Chunks from './Chunk'
import starData from "./Chunk/data.json"
import { UNIT, CHUNK_SIZE } from "@/lib/constants"
import { offset } from './Chunk/chunkutils'
import usePlayerControls from '@/hooks/usePlayerControls'
export default function MyScene() {
const {camera, scene} = useThree()
const focus = useStore((s)=>s.focus)
const [raycaster] = useState(new THREE.Raycaster());
const [pointer] = useState(new THREE.Vector2())
const [bgAmbientMusic, setAmbientMusic] = useState<THREE.Audio | null>(null)
const { forward, backward, left, right} = usePlayerControls()
const focus = useStore((s)=>s.focus)
const update = useStore((s)=>s.update)
const choose = useStore((s) => s.choose)
const muted = useStore((s) => s.muted)
const chunkMap = starData.chunkMap
const controlsRef :any = useRef(null);
const focusRef :any = useRef(null);
useEffect(()=>{
camera.position.set(0, 50, 200)
// Main audio logic init
const listener = new THREE.AudioListener();
camera.add(listener);
const audioLoader = new THREE.AudioLoader();
const bgAmbientMusic = new THREE.Audio(listener);
const selectionSound = new THREE.Audio(listener);
audioLoader.load('assets/audio/bg-ambient.mp3', function(buffer) {
bgAmbientMusic.setBuffer(buffer);
bgAmbientMusic.setVolume(1.0); // Set volume between 0 and 1
bgAmbientMusic.loop = true;
});
audioLoader.load('assets/audio/selection-sound.mp3', function(buffer) {
selectionSound.setBuffer(buffer);
selectionSound.setVolume(0.4);
});
setAmbientMusic(bgAmbientMusic)
const controls = controlsRef.current;
if(controls && focusRef.current)
controls.target = focusRef.current.position
const handleChange = () => {
if(!update.flag){
if(Number(controls.target.x.toFixed(0)) !== focus.x || Number(controls.target.y.toFixed(0)) !== focus.y || Number(controls.target.z.toFixed(0)) !== focus.z){
useStore.setState({focus:new THREE.Vector3(Number(controls.target.x?.toFixed(0)), Number(controls.target.y?.toFixed(0)), Number(controls.target.z?.toFixed(0)))})
}
}
};
const handleMouseMove = (event: MouseEvent) => {
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
const handleMouseClick = (event: MouseEvent) => {
const px = ( event.clientX / window.innerWidth ) * 2 - 1;
const py = - ( event.clientY / window.innerHeight ) * 2 + 1;
@ -32,27 +75,49 @@ export default function MyScene() {
if(intersects.length>0 && intersects[ 0 ].object.type === "Mesh"){
const data = intersects[0].object.userData
data && useStore.setState({choose:data})
if(selectionSound.isPlaying){
selectionSound.stop();
}
selectionSound.play();
}
}
};
// Add the event listener to the window object
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("click", handleMouseClick);
// Cleanup event listener on component unmount
if(controls) {
controls.addEventListener('end', handleChange);
}
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("click", handleMouseClick);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("click", handleMouseMove);
if(controls)
controls.removeEventListener('end', handleChange);
};
},[])
useFrame(({clock})=>{
if(controlsRef.current){
const target = controlsRef.current.target as THREE.Vector3;
const element = scene.getObjectByName('space')
element && element.position.set(target.x, target.y, target.z)
if(Number(target.x.toFixed(0)) !== focus.x || Number(target.y.toFixed(0)) !== focus.y || Number(target.z.toFixed(0)) !== focus.z){
useStore.setState({focus:new THREE.Vector3(Number(target.x.toFixed(0)), Number(target.y.toFixed(0)), Number(target.z.toFixed(0)))})
useEffect(()=>{
if(bgAmbientMusic){
if(muted){
if(bgAmbientMusic.isPlaying){
bgAmbientMusic.stop();
}
}else{
if(!bgAmbientMusic.isPlaying){
bgAmbientMusic.play();
}
}
}
},[muted, bgAmbientMusic])
useFrame(({clock})=>{
if(controlsRef.current){
// const domElement = document.getElementById("update-flag")
// if(domElement)
// domElement.innerHTML = `${String(update.flag)}, ${controlsRef.current.target.x}, ${controlsRef.current.target.y}, ${controlsRef.current.target.z}`
// const target = controlsRef.current.target as THREE.Vector3;
const element = scene.getObjectByName('space')
element && element.position.set(controlsRef.current.target.x, controlsRef.current.target.y, controlsRef.current.target.z)
const network = scene.getObjectByName('network')
if(network){
raycaster.setFromCamera( pointer, camera );
@ -75,36 +140,73 @@ export default function MyScene() {
}else if(child.type === "Mesh"){
const brightness = (choose && choose?.transaction_signature === child.name)
?(Math.sin(time*2+id) * 0.25 + 0.5):(Math.sin(time * 2 + id) * 0.1 - 0.1); // Range: 0 to 1
child.material.emissive.setScalar(brightness);
child.material?.emissive?.setScalar(brightness);
}
})
}
if(backward || forward){
const direction = new THREE.Vector3()
const frontVector = new THREE.Vector3(0, 0, Number(backward) - Number(forward))
const sideVector = new THREE.Vector3(Number(left) - Number(right), 0, 0)
direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(10).applyEuler(camera.rotation)
controlsRef.current.target.x += direction.x
controlsRef.current.target.y += direction.y
controlsRef.current.target.z += direction.z
camera.position.x += direction.x
camera.position.y += direction.y
camera.position.z += direction.z
}
}
})
const choose = useStore((s) => s.choose)
const controlsRef :any = useRef(null);
useEffect(()=>{
if(choose){
if(controlsRef.current){
controlsRef.current.maxDistance = 50
let flag = false
scene.traverse((child) => {
if (child?.name === choose.transaction_signature) {
const pos = new THREE.Vector3()
child.getWorldPosition(pos)
gsap.to(controlsRef.current?.target, {x:pos.x, y:pos.y, z:pos.z, duration:2.0, ease: "power4.out"})
flag = true
}
if(controlsRef.current){
// controlsRef.current.maxDistance = 70
if(choose){
const focusElement = scene.getObjectByName(choose.transaction_signature)
if(focusElement){
const pos = new THREE.Vector3()
focusElement.getWorldPosition(pos)
gsap.to(focusRef.current?.position, {x:pos.x, y:pos.y, z:pos.z, duration:2.0, ease: "power4.out"})
}else{
const transactionIndex = choose.transaction_id
const constellationIndex = Math.floor((transactionIndex-1) / 5)
const chunkIndex = Math.floor((constellationIndex-1)/(CHUNK_SIZE * CHUNK_SIZE * CHUNK_SIZE))+1
let chunkKey =""
for (const item of Object.keys(chunkMap)){
if(chunkMap[item as keyof typeof chunkMap]===chunkIndex){
chunkKey = item; break;
}
}
const [x, y, z] = chunkKey.split(",").map(Number);
const cIndexInChunk = constellationIndex % 8
const cx = Math.floor(cIndexInChunk/4), cy = Math.floor((cIndexInChunk%4)/2), cz = cIndexInChunk % 2
const _size = UNIT/CHUNK_SIZE
const _offset = offset(constellationIndex)
const pos = new THREE.Vector3(
x*UNIT + ((cx-0.5)*_size + _offset.x) + choose.x,
y*UNIT + ((cy-0.5)*_size + _offset.y) + choose.y,
z*UNIT + ((cz-0.5)*_size + _offset.z) + choose.z
)//chunk constellation
gsap.to(focusRef.current?.position, {x:pos.x, y:pos.y, z:pos.z, duration:2.0, ease: "power4.out"})
useStore.setState({focus:pos})
}
gsap.to(controlsRef.current, {
maxDistance: 30, // Target maxDistance value
duration: 1, // Duration of the animation in seconds
ease: "power2.out", // Optional easing function
onUpdate: () => controlsRef.current?.update(), // Update the controls
});
}else{
gsap.to(focusRef.current?.position, {x:0, y:0, z:0, duration:2.0})
gsap.to(controlsRef.current, {
maxDistance: 300, // Target maxDistance value
duration: 1, // Duration of the animation in seconds
ease: "power2.out", // Optional easing function
onUpdate: () => controlsRef.current?.update(), // Update the controls
});
if(!flag){
}
}
}else{
controlsRef.current.maxDistance = 50
gsap.to(controlsRef.current?.target, {x:0, y:0, z:0, duration:2.0})
}
},[choose])
@ -112,15 +214,41 @@ export default function MyScene() {
<React.Fragment>
<ambientLight color={"#aaaaaa"} intensity={5}/>
<Chunks/>
<Environment files={['assets/textures/starry.hdr']} background blur={0.35}/>
<Environment files={['assets/textures/starry.hdr']} background blur={0.35}/>
<Space name='space'/>
<OrbitControls ref={controlsRef}
<mesh name='focus' ref={focusRef} visible={false}>
<boxGeometry args={[2, 2, 2]}/>
<meshBasicMaterial transparent opacity={0.1}/>
</mesh>
<OrbitControls ref={controlsRef}
makeDefault
target0={new THREE.Vector3(3, 0, 0)}
enablePan = {true}
enableRotate = {true}
enableZoom = {true}
panSpeed = {0.5}
minDistance={1}
maxDistance={300}
autoRotate={false} autoRotateSpeed={-0.5}/>
{/* <axesHelper args={[10]}/> */}
autoRotate={false}
autoRotateSpeed={-0.5}
// keys = {{
// LEFT: 'ArrowLeft', //left arrow
// UP: 'ArrowUp', // up arrow
// RIGHT: 'ArrowRight', // right arrow
// BOTTOM: 'ArrowDown' // down arrow
// }}
// keyPanSpeed={100}
/>
{/* <axesHelper args={[100]} position={[-200, 0, 0]}/>
<axesHelper args={[100]} position={[-100, 0, 0]}/>
<axesHelper args={[100]} position={[0, 0, 0]}/>
<axesHelper args={[100]} position={[100, 0, 0]}/>
<axesHelper args={[100]} position={[200, 0, 0]}/>
<axesHelper args={[100]} position={[0, -200, 0]}/>
<axesHelper args={[100]} position={[0, -100, 0]}/>
<axesHelper args={[100]} position={[0, 0, 0]}/>
<axesHelper args={[100]} position={[0, 100, 0]}/>
<axesHelper args={[100]} position={[0, 200, 0]}/> */}
<EffectComposer>
<Bloom
luminanceThreshold={0.05}

80
src/components/html/BottomPanel.tsx
View File

@ -1,80 +0,0 @@
import useStore from '@/lib/store';
import React, { useEffect, useRef, useState } from 'react'
import Styles from "./styles.module.scss"
import { supabase } from '@/lib/supabaseClient';
import SearchResults from './SearchResults';
export default function BottomPanel({flag, changeFlag}:{flag:boolean, changeFlag(value:boolean):void}) {
const [results, setResults] = useState<any[] | undefined>(undefined)
const ref = useRef<HTMLDivElement>(null);
const fetchTableData = async (tableName: string, filter?: string) => {
try {
const { data, error } = await supabase.from(tableName).select('*').or(`transaction_signature.eq.${filter}, from_address.eq.${filter}`);
// 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1
if (error) {
throw new Error(error.message);
}
return data;
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
};
const handleKeyDown = async (event: any) => {
if (event.key === 'Enter') {
if(event.target.value !== ""){
const data = await fetchTableData('transaction-data-updated', event.target.value)
setResults(data)
}
}
};
const changeInput = async (value: string) => {
if(value === ""){
setResults(undefined)
useStore.setState({choose:undefined})
}
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
changeFlag(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<React.Fragment>
<div ref={ref} className={flag?`${Styles.bottomPanel} ${Styles.activePanel}`:Styles.bottomPanel}>
<div className='relative w-full h-fit'>
<div className={Styles.tabs}>
<div className={Styles.tab} onClick={()=>changeFlag(!flag)}>
<div className={Styles.text}>
Search
</div>
</div>
</div>
<div className='flex justify-end p-4'>
<div className={Styles.search}>
<div className={Styles.inputContainter}>
<input type='search' placeholder='transaction signature | wallet address' onKeyDown={handleKeyDown} onChange={(e)=>changeInput(e.target.value)}/>
</div>
</div>
</div>
</div>
<SearchResults results={results} setResults={setResults}/>
</div>
</React.Fragment>
)
}

37
src/components/html/BottomPanel/Notifications.tsx Normal file
View File

@ -0,0 +1,37 @@
import React, { useEffect, useState } from 'react'
import Popup from './Popup';
import useStore from '@/lib/store';
export default function Notifications({data}:{data:string[]}) {
const [isPopup1Open, setIsPopup1Open] = useState(true);
const [isPopup2Open, setIsPopup2Open] = useState(true);
const [isPopup3Open, setIsPopup3Open] = useState(true);
const [isPopup4Open, setIsPopup4Open] = useState(true);
const tutorial = useStore((s)=>s.tutorial)
useEffect(()=>{
if(!tutorial){
setTimeout(()=>{
setIsPopup1Open(false)
setIsPopup2Open(false)
setIsPopup3Open(false)
setIsPopup4Open(false)
}, 5000)
}
}, [tutorial])
return (
<React.Fragment>
<div id='notifications' className='absolute bottom-[104px] left-4 z-5'>
<div className='flex flex-col gap-2 w-[200px] h-auto'>
<Popup isOpen={isPopup1Open} onClose={setIsPopup1Open}><div>{data[0]}</div></Popup>
<Popup isOpen={isPopup2Open} onClose={setIsPopup2Open}><div>{data[1]}</div></Popup>
<Popup isOpen={isPopup3Open} onClose={setIsPopup3Open}><div>{data[2]}</div></Popup>
{/* <Popup isOpen={isPopup4Open} onClose={setIsPopup4Open}><div>{data[3]}</div></Popup> */}
</div>
</div>
</React.Fragment>
)
}

37
src/components/html/BottomPanel/Popup.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from 'react';
interface PopupProps {
isOpen: boolean;
onClose: (value:boolean) => void;
children: React.ReactNode;
}
const Popup: React.FC<PopupProps> = ({ isOpen, onClose, children }) => {
if (!isOpen) return null;
return (
<div className='relative border border-[#0c67a1] p-2 shadow-md bg-[#000000] bg-opacity-90 text-[16px] leading-[16px]'
onClick={(e) => e.stopPropagation()} // Prevent closing on content click
>
<div className='text-[10px] leading-[10px] mb-1'>New constellation</div>
{children}
<button
style={{
position: 'absolute',
top: '15px',
right: '10px',
background: 'transparent',
border: 'none',
fontSize: '12px',
cursor: 'pointer',
}}
onClick={()=>onClose(false)}
>
✖
</button>
</div>
);
};
export default Popup;

57
src/components/html/BottomPanel/RecentTXNs.tsx Normal file
View File

@ -0,0 +1,57 @@
import React from 'react'
import Styles from "./styles.module.scss"
import Link from 'next/link'
import { formatDateTime, getConstellation } from '@/lib/utils'
export default function RecentTXNs({tabs, data, setTabs}:{tabs:number, data:any[] | undefined, setTabs(value:any):void}) {
return (
<React.Fragment>
<div className={tabs===2?`${Styles.recentTXNs}`:`${Styles.recentTXNs} ${Styles.hidden}`}>
<div className={Styles.head}>
Stellar Births
<svg className='absolute top-2.5 right-2.5 cursor-pointer' onClick={()=>setTabs(0)}
width={28} height={28} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M7 17L16.8995 7.10051" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path>
<path d="M7 7.00001L16.8995 16.8995" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path>
</g>
</svg>
</div>
<div className='w-full bg-[#010913F3] border-l border-t border-[#0c67a1]'>
<div className='grid grid-cols-5 bg-[#010913F3]'>
<div className={Styles.th}>Name</div>
<div className={`${Styles.td} col-span-2`}>Constellation Name</div>
<div className={`${Styles.td} col-span-2`}>Creation Time</div>
</div>
<div className='max-h-[338px] overflow-y-auto'
style={{
scrollbarWidth: "none"
}}
>
{
data?.map((item, index )=><Item key={index} data={item}/>)
}
</div>
</div>
<div className={Styles.footer}/>
</div>
</React.Fragment>
)
}
const Item = ({data}:any) =>{
return (
<Link target='_blank' href={`https://solscan.io/tx/${data.transaction_signature}`}>
<div className='grid grid-cols-5 cursor-pointer'>
<div className={Styles.td}><strong>{data.star_name}</strong></div>
<div className={`${Styles.td} capitalize col-span-2`}>{getConstellation(data.transaction_id)}</div>
<div className={`${Styles.td} capitalize col-span-2`}>{formatDateTime(data.time)}</div>
</div>
</Link>
)
}

0
src/components/html/SearchResults.tsx → src/components/html/BottomPanel/SearchResults.tsx
View File

183
src/components/html/BottomPanel/index.tsx Normal file
View File

@ -0,0 +1,183 @@
import useStore from '@/lib/store';
import React, { useEffect, useRef, useState } from 'react'
import Styles from "./styles.module.scss"
import { supabase } from '@/lib/supabaseClient';
import SearchResults from './SearchResults';
import RecentTXNs from './RecentTXNs';
import starData from "@/components/MyScene/Chunk/data.json"
import Notifications from './Notifications';
export default function BottomPanel({flag, changeFlag}:{flag:boolean, changeFlag(value:boolean):void}) {
const [results, setResults] = useState<any[] | undefined>(undefined)
const ref = useRef<HTMLDivElement>(null);
const [Observatory, setObservatory] = useState({stars:0, constellations:0, wallets:0})
const [recentTXNs, setRecentTXNs] = useState<any[] | undefined>(undefined)
const [latestConstellations, setLatestConstellations] = useState<string[]>([])
const names = starData.names
const tutorial = useStore((s)=>s.tutorial)
const tabs = useStore((s)=>s.tabs)
const fetchTableData = async (tableName: string, filter?: string) => {
try {
const { data, error } = await supabase.from(tableName).select('*').or(`transaction_signature.eq.${filter}, from_address.eq.${filter}`);
// 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1
if (error) {
throw new Error(error.message);
}
return data;
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
};
const handleKeyDown = async (event: any) => {
if (event.key === 'Enter') {
if(event.target.value !== ""){
const data = await fetchTableData('transaction-data-updated', event.target.value)
setResults(data)
}
}
};
const changeInput = async (value: string) => {
if(value === ""){
setResults(undefined)
useStore.setState({choose:undefined})
}
};
const fetchDataForObservatory = async () =>{
try {
const { data, error } = await supabase.from("transaction-data-updated").select('*').order('transaction_id', { ascending: false });
// 5Q544fKrFoe6tsEbD7S8EmxGTJYAKtTVhAW5Q5pge4j1
if (error) {
console.log(error.message)
throw new Error(error.message);
}
if(data.length>0){
const stars = data.length
const constellations = Math.floor((stars-1)/5)+1
const temp : string[] = []
setRecentTXNs(data.slice(0, 15))
data.map((item)=>{
if(!temp.includes(item["from_address"]))
temp.push(item["from_address"])
})
const wallets = temp.length
setObservatory({stars, constellations, wallets})
const tempLatestConstellations : string[] = []
data.slice(0, 15).map((item)=>{
const k = Math.floor((item.transaction_id-1)/5)
if(!tempLatestConstellations.includes(names[k])){
tempLatestConstellations.push(names[k])
}
})
setLatestConstellations(tempLatestConstellations)
}
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
}
useEffect(() => {
fetchDataForObservatory()
}, []);
useEffect(()=>{
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
!tutorial && useStore.setState({tabs:0});
}
};
if(!tutorial){
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}
},[tutorial])
const changeTabs = (value:number) =>{
useStore.setState({tabs:value})
}
return (
<React.Fragment>
<div ref={ref} className={(tabs === 1 || tabs === 3)?`${Styles.bottomPanel} ${Styles.activePanel}`:Styles.bottomPanel}>
<div className='relative w-full h-fit'>
<div className={Styles.tabs}>
<div className={tabs===1?`${Styles.tab} ${Styles.active}`:Styles.tab} onClick={()=>changeTabs(1)}>
<div className={Styles.text}>
Search
</div>
</div>
<div className={tabs===2?`${Styles.tab} ${Styles.active}`:Styles.tab} onClick={()=>changeTabs(2)}>
<div className={Styles.text}>
Stellar Births
</div>
</div>
<div className={tabs===3?`${Styles.tab} ${Styles.active}`:Styles.tab} onClick={()=>changeTabs(3)}>
<div className={Styles.text}>
Celestial Observatory
</div>
</div>
</div>
<div className='flex justify-end p-4'>
{
tabs === 1 ?
<div className={Styles.wrapper}>
<div className={Styles.inputContainter}>
<input type='search' placeholder='transaction signature | wallet address' onKeyDown={handleKeyDown} onChange={(e)=>changeInput(e.target.value)}/>
</div>
</div>
: tabs === 3 ?
<div className='flex gap-12'>
<div className={Styles.wrapper}>
<div className={Styles.inputContainter}>
<p>
{Observatory.stars} Stars
</p>
</div>
</div>
<div className={Styles.wrapper}>
<div className={Styles.inputContainter}>
<p>
{Observatory.constellations} Constellations
</p>
</div>
</div>
<div className={Styles.wrapper}>
<div className={Styles.inputContainter}>
<p>
{Observatory.wallets} Cosmic Nurturers
</p>
</div>
</div>
</div>
:
<div className={`${Styles.wrapper} hidden`}>
<div className={Styles.inputContainter}>
<div>
</div>
</div>
</div>
}
</div>
{
latestConstellations?.length>0 && <Notifications data={latestConstellations}/>
}
</div>
<SearchResults results={results} setResults={setResults}/>
<RecentTXNs tabs={tabs} data={recentTXNs} setTabs={changeTabs}/>
</div>
</React.Fragment>
)
}

239
src/components/html/styles.module.scss → src/components/html/BottomPanel/styles.module.scss
View File

@ -1,10 +1,10 @@
.bottomPanel {
// padding: 15px 0;
pointer-events: all;
background-color: rgba(0, 0, 0, .95);
background-color: rgba(0, 0, 0, 1.0);
background-position: 1px -1px;
background-image: url('/assets/textures/texture.png');
border-bottom: 1px solid #0c67a1;
border-top: 1px solid #0c67a1;
color: #0a5688;
// height: 40px;
width: 100%;
@ -12,38 +12,39 @@
bottom:0;
transform: translateY(100%);
transition: all 0.5s;
transition-timing-function: ease-in-out;
// transition-timing-function: ease-in-out;
z-index: 5;
.tabs{
width: 100%;
height: 40px;
position: absolute;
top: -40px;
// transform: translateX(100%);
border-bottom: 1px solid #0c67a1;
right: -2px;
bottom: calc(100% + 3px);
display: flex;
justify-content: end;
.tab{
height: 40px;
background-color: rgba(0, 0, 0, .95);
height: 39px;
background-color: rgba(0, 0, 0, 1);
display: inline-block;
vertical-align: top;
text-align: left;
border-top: 1px solid #0c67a1;
border-bottom: 1px solid #0c67a1;
position: relative;
pointer-events: auto;
margin-top: 4px;
cursor: pointer;
transition: all 0.5s;
// transition: all 0.5s;
&::before{
content: '';
position: absolute;
top: auto;
left: -41px;
bottom: 4px;
bottom: 0px;
right: auto;
z-index: 2;
width: 6px;
height: 36px;
height: 38px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
-webkit-transform-origin: bottom left;
@ -54,49 +55,93 @@
display: block;
width: 100%;
height: 36px;
padding: 10px 51px 15px 15px;
padding: 10px 40px 15px 15px;
font-family: Orbitron, sans-serif;
font-size: 9px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #248bcf;
text-align: center;
transition: all 0.5s;
&::before {
content: '';
position: absolute;
top: auto;
left: -36px;
bottom: 0;
border-style: solid;
border-width: 0 36px 36px 0;
border-color: transparent rgba(0, 0, 0, 1) transparent transparent;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
opacity: 1 !important;
}
&::after{
content: '';
position: absolute;
top: auto;
left: -36px;
bottom: 0;
right: 0;
width: 36px;
height: 36px;
background: url('/assets/textures/texture-corner.png') no-repeat;
opacity: 0;
// border-bottom: 1px solid #0c67a1;
}
}
}
.active{
height: 44px !important;
bottom:4px;
background-position: 1px 1px;
background-image: url('/assets/textures/texture.png');
border-right: 1px solid #0c67a1;
border-bottom: none !important;
z-index: 3;
&::before{
background-color: #42edf8 !important;
height: 42px;
bottom: 2px;
box-shadow: 4px 4px 10px rgba(0, 112, 202, .6), -4px -4px 10px rgba(0, 112, 202, .6), -4px 4px 10px rgba(0, 112, 202, .6), 4px -4px 10px rgba(0, 112, 202, .6);
}
.text{
font-weight: 700;
font-size: 12px;
color: #fee5a1;
opacity: .8;
padding: 10px 15px 15px 15px;
text-shadow: 4px 4px 10px rgba(255, 54, 0, .35), -4px -4px 10px rgba(255, 54, 0, .35), -4px 4px 10px rgba(255, 54, 0, .35), 4px -4px 10px rgba(255, 54, 0, .35);
&::before{
content: '';
top: auto;
left: -36px;
bottom: 0;
right: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 36px 36px 0;
border-color: transparent rgba(0, 0, 0, .95) transparent transparent;
border-color: transparent rgba(0, 0, 0, 1) transparent transparent;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
&::after{
content: '';
position: absolute;
top: auto;
left: -36px;
bottom: 0;
right: auto;
width: 36px;
height: 36px;
background: url('/assets/textures/texture-corner.png') no-repeat;
opacity: 0;
position: absolute;
right: 0 !important;
background-position: 1px 1px;
// background: url('/assets/textures/texture-corner.png') no-repeat;
opacity: 1 !important;
}
}
}
}
.search{
.wrapper{
display: inline-block;
vertical-align: top;
position: relative;
height: 60px;
// height: 60px;
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
-webkit-transform-origin: bottom right;
@ -105,7 +150,7 @@
-webkit-transition: background-color 150ms ease-out, color 150ms ease-out;
transition: background-color 150ms ease-out, color 150ms ease-out;
text-align: left;
padding: 17px 40px;
padding: 14px 30px;
.inputContainter{
display: inline-block;
vertical-align: top;
@ -130,52 +175,32 @@
display: block;
outline: none;
}
p{
padding: 4px 18px 3px 4px;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-radius: 0;
background: 0 0;
font-family: Electrolize, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #42edf8;
width: 200px;
transform: skewX(-45deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
display: block;
outline: none;
}
}
}
}
.activePanel{
transform: translateY(0px);
.tabs{
.tab{
background-color: rgba(0, 0, 0, .95);
background-position: 1px 1px;
background-image: url('/assets/textures/texture.png');
&::before{
background-color: #42edf8 !important;
box-shadow: 4px 4px 10px rgba(0, 112, 202, .6), -4px -4px 10px rgba(0, 112, 202, .6), -4px 4px 10px rgba(0, 112, 202, .6), 4px -4px 10px rgba(0, 112, 202, .6);
}
.text{
font-weight: 700;
font-size: 12px;
color: #fee5a1;
opacity: .8;
text-shadow: 4px 4px 10px rgba(255, 54, 0, .35), -4px -4px 10px rgba(255, 54, 0, .35), -4px 4px 10px rgba(255, 54, 0, .35), 4px -4px 10px rgba(255, 54, 0, .35);
&::before{
content: '';
position: absolute;
top: auto;
left: -36px;
bottom: 0;
right: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 36px 36px 0;
border-color: transparent rgba(0, 0, 0, .95) transparent transparent;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
&::after{
width: 36px;
height: 36px;
background-position: 1px 1px;
background: url('/assets/textures/texture-corner.png') no-repeat;
opacity: 1 !important;
}
}
}
}
}
.searchResults{
@ -212,6 +237,88 @@
text-overflow: ellipsis !important;
}
}
.recentTXNs{
width: 500px;
height: auto;
position: absolute;
right: 0;
bottom: 150px;
color: #066c93;
// background-color: #010913F3;// rgba(1, 9, 19, .95);
// border: 1px solid #0c67a1;
text-align: left;
text-transform: uppercase;
padding-top: 3px;
min-width: 500px;
font-size: 11px;
font-family: Electrolize, sans-serif;
font-weight: 700;
transform: translateX(-10%);
transition: transform 0.5s;
.head{
position: relative;
width: 100%;
padding: 8px 0;
border-color: #0c67a1;
border-right: 1px solid;
font-size: 20px;
text-align: center;
z-index: 1;
overflow: hidden;
&::before{
content: '';
position: absolute;
width: 100%;
height: 47px;
border: solid 1px #0c67a1;
left: 23px;
bottom: -1px;
background-color: #010913F3;
z-index: -1;
transform: skewX(-45deg);
}
}
.th{
padding: 10px 15px;
border-right: 1px solid #0c67a1;
border-bottom: 1px solid #00304e;
}
.td{
padding: 10px 15px;
border-right: 1px solid #0c67a1;
strong{
color: #14ccfa;
}
border-bottom: 1px solid #00304e;
overflow: hidden;
text-overflow: ellipsis !important;
}
.footer{
position: relative;
width: 100%;
height: 20px;
border-color: #0c67a1;
border-left: 1px solid;
z-index: 1;
overflow: hidden;
&::before{
content: '';
position: absolute;
width: 100%;
height: 21px;
border: solid 1px #0c67a1;
left: -10px;
top: -1px;
background-color: #010913F3;
z-index: -1;
transform: skewX(-45deg);
}
}
}
.hidden{
transform: translateX(100%);
}

39
src/components/html/MyContent.tsx
View File

@ -1,12 +1,17 @@
import React, { useEffect, useState } from 'react'
import SearchInput from './SearchInput'
import StarDetails from './StarDetails'
import BottomPanel from './BottomPanel'
import TopPanel from './TopPanel'
import Link from 'next/link'
import Image from 'next/image'
import TutorialPopup from './TutorialPopup'
import useStore from '@/lib/store'
export default function MyContent() {
const [searchFlag, setSearchFlag] = useState(false)
const [searchFlag, setSearchFlag] = useState(true)
const tabs = useStore((s)=>s.tabs)
const changeFlag = (value:boolean) =>{
setSearchFlag(value)
@ -19,9 +24,39 @@ export default function MyContent() {
fill='#000000ea' stroke='#0c67a1' strokeWidth='2'
/>
</svg> */}
{/* <div className='absolute top-0 left-0 bg-white text-black p-4'>
<div id='update-flag'/>
</div> */}
<div className='w-screen h-screen overflow-hidden'>
<TopPanel/>
<BottomPanel flag={searchFlag} changeFlag={changeFlag}/>
<StarDetails/>
<div id='social' className='fixed left-6 bottom-6 flex gap-8'
style={{zIndex:(tabs === 1 || tabs === 3)?'10':'4'}}
>
<Link href="#" target='_blank' className='cursor-pointer pointer-events-auto'>
<svg role="img" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 stroke-[#bbbbbb] hover:stroke-white">
<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path>
</svg>
</Link>
<Link href="https://pump.fun/board" target='_blank' className='cursor-pointer pointer-events-auto'>
<div className='relative w-8 h-8'>
<Image src={"/pf.png"} layout="fill" alt="pump.fun"/>
</div>
</Link>
<Link href="#" target='_blank' className='cursor-pointer pointer-events-auto'>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-file-text w-8 h-8 stroke-[#aaaaaa] hover:stroke-white">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M10 9H8"></path>
<path d="M16 13H8"></path>
<path d="M16 17H8"></path>
</svg>
</Link>
</div>
<TutorialPopup/>
</div>
</React.Fragment>
)

32
src/components/html/SearchInput.tsx
View File

@ -1,32 +0,0 @@
import useStore from '@/lib/store';
import React, { useEffect } from 'react'
export default function SearchInput({changeFlag}:{changeFlag():void}) {
const handleKeyDown = (event: any) => {
if (event.key === 'Enter') {
useStore.setState({search:event.target.value})
}
};
return (
<React.Fragment>
<div className='flex items-center gap-4 text-[18px] text-white'>
<svg
onClick={()=>changeFlag()}
width={20} height={20} fill="#ffffff" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72" enableBackground="new 0 0 72 72" xmlSpace="preserve">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g>
<path d="M28.131,10.632c-6.262,0-12.141,3.348-15.342,8.738c-0.282,0.474-0.126,1.089,0.349,1.37 c0.16,0.096,0.336,0.141,0.51,0.141c0.342,0,0.674-0.174,0.861-0.489c2.843-4.786,8.062-7.76,13.622-7.76c0.553,0,1-0.447,1-1 C29.131,11.079,28.684,10.632,28.131,10.632z"></path> <path d="M11.967,23.646c-0.537-0.124-1.075,0.208-1.201,0.746c-0.299,1.276-0.468,2.067-0.468,3.487c0,0.553,0.448,1,1,1 c0.553,0,1-0.447,1-1c0-1.205,0.135-1.834,0.415-3.032C12.839,24.309,12.505,23.772,11.967,23.646z"></path> <path d="M66.613,57.793L50.471,41.652c-0.393-0.393-0.788-0.672-1.17-0.877c2.113-3.62,3.33-7.825,3.33-12.311 c0-13.51-10.99-24.5-24.5-24.5c-13.509,0-24.5,10.99-24.5,24.5s10.991,24.499,24.5,24.499c4.81,0,9.296-1.398,13.084-3.801 c0.205,0.339,0.462,0.666,0.77,0.974l16.142,16.143c1.136,1.133,2.64,1.756,4.244,1.756c1.603,0,3.108-0.623,4.243-1.756 c1.133-1.133,1.756-2.641,1.756-4.242C68.369,60.434,67.746,58.928,66.613,57.793z M7.631,28.465c0-11.304,9.196-20.5,20.5-20.5 c11.305,0,20.5,9.196,20.5,20.5c0,11.305-9.197,20.499-20.5,20.499C16.827,48.964,7.631,39.77,7.631,28.465z M63.784,63.451 c-0.757,0.754-2.074,0.754-2.83,0L44.813,47.309c-0.14-0.139-0.192-0.232-0.199-0.232c0.003-0.043,0.058-0.455,1.201-1.596 c1.14-1.143,1.552-1.195,1.565-1.203c0.026,0.008,0.119,0.06,0.263,0.203l16.14,16.141c0.379,0.379,0.586,0.881,0.586,1.416 C64.368,62.57,64.161,63.072,63.784,63.451z"></path>
</g>
</g>
</svg>
<div>
<input type='text' placeholder='transaction signature' className='outline-none bg-transparent px-1 w-80 shadow-md' onKeyDown={handleKeyDown}/>
</div>
</div>
</React.Fragment>
)
}

41
src/components/html/StarDetails.module.scss Normal file
View File

@ -0,0 +1,41 @@
.head{
position: relative;
width: 100%;
height: 20px;
border-right: 1px solid #0c67a1;
z-index: 1;
overflow: hidden;
&::before{
content: '';
position: absolute;
width: 100%;
height: 21px;
border: solid 1px #0c67a1;
left: 10px;
bottom: -1px;
background-color: #010913F3;
z-index: -1;
transform: skewX(-45deg);
}
}
.footer{
position: relative;
width: 100%;
height: 15px;
border-left:1px solid #0c67a1;
z-index: 1;
overflow: hidden;
&::before{
content: '';
position: absolute;
width: 100%;
height: 16px;
border: solid 1px #0c67a1;
left: -8px;
top: -1px;
background-color: #010913F3;
z-index: -1;
transform: skewX(-45deg);
}
}

49
src/components/html/StarDetails.tsx
View File

@ -1,17 +1,18 @@
import useStore from '@/lib/store';
import Link from 'next/link';
import React, { useEffect } from 'react'
import Styles from "./StarDetails.module.scss"
import { formatDateTime, getConstellation } from '@/lib/utils';
export default function StarDetails() {
const choose = useStore(s => s.choose)
const valueClass = "text-[#14ccfa] text-semibold text-[14px] capitalize leading-[16px] truncate"
return (
<React.Fragment>
<div className={`absolute left-0 bottom-28 bg-black bg-opacity-[95%] p-2 overflow-hidden transition-transform ${choose?"translate-x-[20px]":"-translate-x-full"}`}
style={{border:"1px solid #0c67a1"}}
>
<div className='relative flex flex-col gap-3 max-w-[300px] overflow-hidden text-[#0a5688] text-[10px] uppercase font-semibold' style={{fontFamily:'Electrolize'}}>
<button className='absolute top-0 right-0 w-4 h-4 pointer-events-auto'
<div className={`absolute left-0 bottom-28 overflow-hidden transition-transform ${choose?"translate-x-[20px]":"-translate-x-full"}`}>
<div className='relative'>
<button className='absolute z-10 top-2 right-2 w-4 h-4 pointer-events-auto'
onClick={()=>useStore.setState({choose:undefined})}
>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -22,22 +23,30 @@ export default function StarDetails() {
</g>
</svg>
</button>
<div>
<div>Name</div>
<div className={valueClass}>{choose?.star_name}</div>
<div className={Styles.head}></div>
<div className='relative min-w-[200px] border-x border-[#0c67a1] bg-[#010913F3] px-3 flex flex-col gap-3 max-w-[300px] overflow-hidden text-[#0a5688] text-[10px] uppercase font-semibold' style={{fontFamily:'Electrolize'}}>
<div>
<div>Name</div>
<div className={valueClass}>
<Link className='pointer-events-auto cursor-pointer underline' target='_blank' href={`https://solscan.io/tx/${choose?.transaction_signature}`}>
{choose?.star_name}
</Link>
</div>
</div>
<div>
<div>Constellation Name</div>
<div className={valueClass}>
{choose && getConstellation(choose.transaction_id)}
</div>
</div>
<div>
<div>Creation Time</div>
<div className={valueClass}>
{choose && formatDateTime(choose.time)}
</div>
</div>
</div>
<div>
<div>Signature</div>
<div className={valueClass}>{choose?.transaction_signature}</div>
</div>
<div>
<div>From</div>
<div className={valueClass}>{choose?.from_address}</div>
</div>
<div>
<div>Amount</div>
<div className={valueClass}>{choose?.amount}</div>
</div>
<div className={Styles.footer}></div>
</div>
</div>
</React.Fragment>

82
src/components/html/TopPanel/index.tsx Normal file
View File

@ -0,0 +1,82 @@
import useStore from '@/lib/store';
import React from 'react'
import Styles from "./top.module.scss"
import Image from 'next/image';
export default function TopPanel() {
const fullScreen = useStore((s)=>s.fullScreen)
const muted = useStore((s)=>s.muted)
const handleFullscreen = () => {
const element = document.documentElement; // Fullscreen the entire document
if (document.fullscreenElement) {
// Exit fullscreen
document.exitFullscreen();
useStore.setState({fullScreen:false})
} else {
// Request fullscreen
if (element.requestFullscreen) {
element.requestFullscreen();
} else if ((element as any).webkitRequestFullscreen) {
(element as any).webkitRequestFullscreen(); // Safari support
} else if ((element as any).msRequestFullscreen) {
(element as any).msRequestFullscreen(); // IE support
}
useStore.setState({fullScreen:true})
}
}
return (
<React.Fragment>
<div className="absolute top-0 left-0 w-full">
<div className={Styles.top}>
<div className={Styles.left}>
<div className={Styles.leftContent}>
<div className='relative w-[46px] h-[46px]'>
<Image src={"/logo.png"} layout='fill' alt='logo'/>
</div>
<p className='text-[#248bcf] text-[44px] leading-[44px] pl-2 pt-1'>
CELESTIA
</p>
</div>
</div>
<div className={Styles.right}>
<div className={Styles.rightContent}>
<div className={!muted?`${Styles.item} ${Styles.active}`:Styles.item} onClick={()=>useStore.setState({muted:!muted})}>
<svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="#000000">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title>sound-quiet-filled</title>
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="icon" transform="translate(42.666667, 85.333333)">
<path d="M276.914133,274.101547 L243.589973,247.442773 C283.38304,204.875093 283.38432,138.998827 243.588693,96.4311467 L276.912853,69.77216 C329.118507,127.992107 329.118507,215.880107 276.914133,274.101547 Z M191.749973,1.42108547e-14 L80.8957867,87.2292267 L7.10542736e-15,87.2292267 L7.10542736e-15,257.895893 L81.0208,257.895893 L191.749973,343.35424 L191.749973,1.42108547e-14 L191.749973,1.42108547e-14 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>
</div>
<div className={fullScreen?`${Styles.item} ${Styles.active}`:Styles.item} onClick={()=>handleFullscreen()}>
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="fullscreen" enableBackground="new 0 0 32 32" xmlSpace="preserve">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M9 23h14V9H9V23zM11 11h10v10H11V11z"></path>
<polygon points="7,21 5,21 5,27 11,27 11,25 7,25 "></polygon>
<polygon points="7,7 11,7 11,5 5,5 5,11 7,11 "></polygon>
<polygon points="25,25 21,25 21,27 27,27 27,21 25,21 "></polygon>
<polygon points="21,5 21,7 25,7 25,11 27,11 27,5 "></polygon>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
)
}

63
src/components/html/TopPanel/top.module.scss Normal file
View File

@ -0,0 +1,63 @@
.top{
display: flex;
justify-content: space-between;
.left{
// border-bottom: 1px solid #0c67a1;
// border-right: 6px solid #0c67a1;
// transform: skewX(-45deg);
pointer-events: all;
// background-color: rgba(0, 0, 0, 0.9);
// margin-right: -24px;
// margin-left: -25px;
user-select: none;
.leftContent{
// transform: skewX(45deg);
display: flex;
align-items: center;
// padding: 10px 30px 10px 50px;
font-family: "Electrolize";
padding: 20px 20px;
}
}
.right{
// width: 100px;
height: 46px;
border-bottom: 1px solid #0c67a1;
border-left: 6px solid #0c67a1;
transform: skewX(45deg);
pointer-events: all;
background-color: rgba(0, 0, 0, 0.9);
margin-right: -24px;
user-select: none;
.rightContent{
// transform: skewX(-45deg);
display: flex;
justify-content: end;
padding-left: 20px;
padding-right: 30px;
.item{
// transform: skewX(-45deg);
padding: 8px 10px 2px;
cursor: pointer;
svg{
transform: skewX(-45deg);
width: 26px;
height: 26px;
fill: #0c67a1;
g{
fill: #0c67a1;
}
}
// border-bottom: solid 2px #0c67a1;
}
.active{
svg{
fill: #14f2fa;
g{
fill: #14f2fa;
}
}
}
}
}
}

66
src/components/html/TutorialPopup.module.scss Normal file
View File

@ -0,0 +1,66 @@
.head{
position: relative;
width: 100%;
height: 20px;
border-right: 1px solid #0c67a1;
z-index: 1;
overflow: hidden;
&::before{
content: '';
position: absolute;
width: 100%;
height: 21px;
border: solid 1px #0c67a1;
left: 10px;
bottom: -1px;
background-color: #010913F3;
z-index: -1;
transform: skewX(-45deg);
}
}
.footer{
position: relative;
width: 100%;
height: 15px;
border-left:1px solid #0c67a1;
z-index: 1;
overflow: hidden;
&::before{
content: '';
position: absolute;
width: 100%;
height: 16px;
border: solid 1px #0c67a1;
left: -8px;
top: -1px;
background-color: #010913F3;
z-index: -1;
transform: skewX(-45deg);
}
}
.element{
border:1px solid #0c67a1;
padding: 12px;
position: relative;
display: flex;
align-items: center;
gap: 8px;
div:nth-child(1){
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
svg{
width: 20px;
height: 20px;
}
}
div:nth-child(2){
width: auto;
text-align: start;
div:nth-child(1){
}
}
}

136
src/components/html/TutorialPopup.tsx Normal file
View File

@ -0,0 +1,136 @@
import React, { useEffect, useState } from 'react'
import Styles from "./TutorialPopup.module.scss"
import useStore from '@/lib/store'
export default function TutorialPopup() {
const tutorial = useStore((s)=>s.tutorial)
return (
<React.Fragment>
<div className={`absolute left-0 top-0 w-full h-full min-h-screen overflow-hidden pointer-events-auto ${tutorial?"block":"hidden"}`}>
<div className='relative bg-black bg-opacity-80 h-full flex items-center justify-center z-50'>
<div className='relative w-full mx-4 md:mx-0 sm:max-w-[520px] text-center text-[#248bcf] text-[12px] md:text-[14px] leading-[16px] md:leading-[20px] select-none'>
<button className='absolute z-10 top-2 right-2 md:top-4 md:right-4 w-4 h-4 pointer-events-auto'
onClick={(e)=>{useStore.setState({tutorial:false}), e.stopPropagation()}}
>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="#0c67a1"></path>
</g>
</svg>
</button>
<div className={Styles.head}></div>
<div className='relative border-x border-[#0c67a1] bg-[#010913F3] px-3 flex flex-col gap-4' style={{fontFamily:'Electrolize'}}>
<h1 className='text-[#42edf8] text-[24px] sm:text-[34px] leading-[24px] sm:leading-[34px] font-bold'>Welcome to Celestia</h1>
<p>Navigate, explore, and search the stars and constellations.</p>
<div className='grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4'>
<div className={Styles.element}>
<div>
<svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="#000000">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="drop" fill="#42edf8" transform="translate(42.666667, 42.666667)">
<path d="M234.666667,256 L234.666667,341.333333 L277.333333,341.333333 L213.333333,426.666667 L149.333333,341.333333 L192,341.333333 L192,256 L234.666667,256 Z M341.333333,149.333333 L426.666667,213.333333 L341.333333,277.333333 L341.333333,234.666667 L256,234.666667 L256,192 L341.333333,192 L341.333333,149.333333 Z M85.3333333,149.333333 L85.3333333,192 L170.666667,192 L170.666667,234.666667 L85.3333333,234.666667 L85.3333333,277.333333 L3.55271368e-14,213.333333 L85.3333333,149.333333 Z M213.333333,3.55271368e-14 L277.333333,85.3333333 L234.666667,85.3333333 L234.666667,170.666667 L192,170.666667 L192,85.3333333 L149.333333,85.3333333 L213.333333,3.55271368e-14 Z" id="Combined-Shape">
</path>
</g>
</g>
</g>
</svg>
</div>
<div>
<div className='text-[16px] md:text-[20px] font-bold'>Pan</div>
<div>Right-click and drag to move around the scene</div>
</div>
</div>
<div className={Styles.element}>
<div>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M20 20L14.9497 14.9498M14.9497 14.9498C16.2165 13.683 17 11.933 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C11.933 17 13.683 16.2165 14.9497 14.9498ZM7 10H13M10 7V13" stroke="#42edf8" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
</g>
</svg>
</div>
<div>
<div className='text-[16px] md:text-[20px] font-bold'>Zoom</div>
<div>Use mouse scroll wheel to zoom in and out</div>
</div>
</div>
<div className={Styles.element}>
<div>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M17.5689 10.205C17.6829 10.6032 18.0981 10.8336 18.4964 10.7196C18.8946 10.6056 19.125 10.1904 19.011 9.7922L17.5689 10.205ZM16.59 7.0486L17.1301 6.52824L17.1295 6.52764L16.59 7.0486ZM13.111 5.1336L13.2625 4.39907L13.2611 4.39878L13.111 5.1336ZM9.18996 5.5336L8.89453 4.84424L8.89379 4.84456L9.18996 5.5336ZM6.14396 8.1096L5.51365 7.70314L5.51364 7.70315L6.14396 8.1096ZM6.98796 16.9486L7.53029 16.4306L7.52996 16.4302L6.98796 16.9486ZM15.557 17.8196L15.984 18.4362L15.9841 18.4361L15.557 17.8196ZM18.7536 14.9554C18.907 14.5706 18.7195 14.1343 18.3347 13.9809C17.95 13.8275 17.5137 14.0151 17.3603 14.3998L18.7536 14.9554ZM17.5641 9.80996C17.4599 10.2109 17.7004 10.6203 18.1013 10.7245C18.5022 10.8287 18.9117 10.5881 19.0158 10.1872L17.5641 9.80996ZM19.7258 7.45525C19.83 7.05435 19.5895 6.6449 19.1886 6.54072C18.7877 6.43653 18.3783 6.67706 18.2741 7.07796L19.7258 7.45525ZM18.0902 10.7215C18.4894 10.8318 18.9025 10.5976 19.0129 10.1984C19.1232 9.79911 18.889 9.38602 18.4897 9.2757L18.0902 10.7215ZM15.8407 8.5437C15.4415 8.43337 15.0284 8.66759 14.918 9.06684C14.8077 9.46609 15.0419 9.87919 15.4412 9.98951L15.8407 8.5437ZM19.011 9.7922C18.6602 8.56683 18.0144 7.44613 17.1301 6.52824L16.0498 7.56897C16.764 8.31028 17.2856 9.21537 17.5689 10.205L19.011 9.7922ZM17.1295 6.52764C16.0842 5.44503 14.7364 4.70315 13.2625 4.39907L12.9594 5.86813C14.1375 6.11119 15.2148 6.7042 16.0504 7.56956L17.1295 6.52764ZM13.2611 4.39878C11.7942 4.09906 10.2707 4.25448 8.89453 4.84424L9.48538 6.22297C10.5807 5.75356 11.7933 5.62986 12.9608 5.86842L13.2611 4.39878ZM8.89379 4.84456C7.50796 5.44022 6.33115 6.43545 5.51365 7.70314L6.77426 8.51607C7.43013 7.49901 8.37429 6.70054 9.48612 6.22265L8.89379 4.84456ZM5.51364 7.70315C3.52854 10.7816 3.91413 14.8198 6.44595 17.467L7.52996 16.4302C5.47778 14.2845 5.16523 11.0113 6.77427 8.51605L5.51364 7.70315ZM6.44562 17.4666C8.95364 20.0923 12.9989 20.5035 15.984 18.4362L15.13 17.203C12.7516 18.8501 9.52855 18.5225 7.53029 16.4306L6.44562 17.4666ZM15.9841 18.4361C17.2293 17.5732 18.1926 16.3625 18.7536 14.9554L17.3603 14.3998C16.9084 15.5332 16.1326 16.5082 15.1298 17.2032L15.9841 18.4361ZM19.0158 10.1872L19.7258 7.45525L18.2741 7.07796L17.5641 9.80996L19.0158 10.1872ZM18.4897 9.2757L15.8407 8.5437L15.4412 9.98951L18.0902 10.7215L18.4897 9.2757Z" fill="#42edf8"></path>
</g>
</svg>
</div>
<div>
<div className='text-[16px] md:text-[20px] font-bold'>Rotate</div>
<div>Left-click and drag to rotate the view</div>
</div>
</div>
<div className={Styles.element}>
<div>
<svg className='scale-75' fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.228 512.228" xmlSpace="preserve">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g>
<g>
<path d="M509.862,481.179L275.195,11.845c-7.862-15.724-30.3-15.724-38.162,0L2.366,481.179 c-9.676,19.353,12.28,39.155,30.534,27.539l223.213-142.045l223.213,142.045C497.581,520.334,519.538,500.531,509.862,481.179z M267.567,323.388c-6.988-4.447-15.919-4.447-22.907,0L74.973,431.371L256.114,69.089l181.141,362.282L267.567,323.388z" fill="#42edf8"></path>
</g>
</g>
</g>
</svg>
</div>
<div>
<div className='text-[16px] md:text-[20px] font-bold'>Forward/backward</div>
<div>Press W/D to move forward and backward.</div>
</div>
</div>
<div className={`${Styles.element} md:col-span-2`}>
<div>
<svg className='scale-125' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M14.5776 14.5419C15.5805 13.53 16.2 12.1373 16.2 10.6C16.2 7.50721 13.6928 5 10.6 5C7.50721 5 5 7.50721 5 10.6C5 13.6928 7.50721 16.2 10.6 16.2C12.1555 16.2 13.5628 15.5658 14.5776 14.5419ZM14.5776 14.5419L19 19M8 11L9.5 12.5L13 9" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path>
</g>
</svg>
</div>
<div>
<div className='text-[16px] md:text-[20px] font-bold'>Search</div>
<div>Use the search box in the bottom-right corner to find specific stars</div>
</div>
</div>
</div>
<div>
<button
className='px-4 py-2 border text-[16px] md:text-[20px] leading-[16px] md:leading-[20px] border-[#0c67a1]'
onClick={(e)=>{useStore.setState({tutorial:false}), e.stopPropagation()}}
>
Start Exploring
</button>
</div>
</div>
<div className={Styles.footer}></div>
</div>
</div>
</div>
</React.Fragment>
)
}

109
src/hooks/usePlayerControls.ts Normal file
View File

@ -0,0 +1,109 @@
import { useEffect, useState, useRef } from 'react'
// import useStore from '../helpers/store'
const moveFieldByKey = (key: string) => {
const keys:any = {
ArrowUp: 'forward',
ArrowLeft: 'left',
ArrowDown: 'backward',
ArrowRight: 'right',
KeyW: 'forward',
KeyS: 'backward',
KeyA: 'left',
KeyD: 'right',
Space: 'jump',
ShiftLeft: 'speed'
}
return keys[key]
}
const usePlayerControls = () => {
const [movement, setMovement] = useState({
forward: false,
backward: false,
left: false,
right: false,
jump: false,
speed: 2.5
})
// const startWorld:boolean = useStore((s) => s.startWorld)
// const uiLockRef = useRef(startWorld)
useEffect(() => {
const handleKeyDown = (e: { code: string }) => {
// console.log(uiLockRef.current)
// if(!uiLockRef.current) return
switch (e.code) {
case 'ArrowUp':
case 'ArrowLeft':
case 'ArrowDown':
case 'ArrowRight':
case 'KeyW': //forward
case 'KeyA': // left
case 'KeyS': // backwards
case 'KeyD': // right
case 'Space': // jump
setMovement((m) => ({
...m,
[moveFieldByKey(e.code)]: true
}))
return
case 'ShiftLeft':
setMovement((m) => ({
...m,
[moveFieldByKey(e.code)]: 2.5
}))
return
default:
return
}
}
const handleKeyUp = (e: { code: string }) => {
// if(!uiLockRef.current) return
switch (e.code) {
case 'ArrowUp':
case 'ArrowLeft':
case 'ArrowDown':
case 'ArrowRight':
case 'KeyW': //forward
case 'KeyA': // left
case 'KeyS': // backwards
case 'KeyD': // right
case 'Space': // jump
setMovement((m) => ({
...m,
[moveFieldByKey(e.code)]: false
}))
return
case 'ShiftLeft':
setMovement((m) => ({
...m,
[moveFieldByKey(e.code)]: 2.5
}))
return
default:
return
}
}
document.addEventListener('keydown', handleKeyDown)
document.addEventListener('keyup', handleKeyUp)
return () => {
document.removeEventListener('keydown', handleKeyDown)
document.removeEventListener('keyup', handleKeyUp)
}
}, [])
return movement
}
export default usePlayerControls

3
src/lib/constants.ts Normal file
View File

@ -0,0 +1,3 @@
export const UNIT = 100;
export const CHUNK_SIZE = 2;
export const RADIUS = 1;

14
src/lib/store.ts
View File

@ -4,8 +4,12 @@ interface MyStore {
choose : any | undefined;
search : string;
count : number;
names : string[];
focus : Vector3,
update : {flag:boolean},
fullScreen : boolean,
muted : boolean,
tutorial : boolean,
tabs : number,
setChoose: (data: any) => void;
}
@ -13,8 +17,12 @@ const useStore = create<MyStore>((set) => ({
choose : undefined,
search : "",
count : 0,
names : [],
focus : new Vector3(-100, 0, 0),
focus : new Vector3(3, 0, 0),
update : {flag:false},
fullScreen : false,
muted : true,
tutorial : true,
tabs : 3,
setChoose : (data: any ) => set((state) => ({
choose: data,
}))

27
src/lib/utils.ts Normal file
View File

@ -0,0 +1,27 @@
import starData from "@/components/MyScene/Chunk/data.json"
export const formatDateTime = (value:string) =>{
const date = new Date(value)
function pad(number: number) {
if (number < 10) {
return '0' + number;
}
return number;
}
const day = pad(date.getDate());
const month = pad(date.getMonth() + 1); // Month is zero-indexed
const year = date.getFullYear();
const hours = pad(date.getHours());
const minutes = pad(date.getMinutes());
const seconds = pad(date.getSeconds());
return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
}
export const getConstellation = (value:number) =>{
const names = starData.names
const k = Math.floor((value-1)/5)
return names[k]
}

1
src/pages/api/stars-dataset.ts
View File

@ -18,6 +18,7 @@ export default function handler(
results.map((item)=>{
names.push(item["Name"])
})
names.sort(() => Math.random() - 0.5);
res.status(200).json({ names })
})
.on('error', (error) => {

14
src/pages/index.tsx
View File

@ -31,11 +31,7 @@ export default function Home() {
if (error) {
throw new Error(error.message);
}
const response= await axios.get('/api/stars-dataset')
const names = response.data.names
useStore.setState({count:Number(count), names:names})
useStore.setState({count:Number(count)})
return; // This is the total number of rows
} catch (error) {
console.error('Error fetching row count:', error);
@ -43,11 +39,9 @@ export default function Home() {
}
};
fetchRowCount();
// fetchRowCount();
},[])
const count = useStore((s)=>s.count)
return (
<React.Fragment>
<Head>
@ -57,9 +51,7 @@ export default function Home() {
{/* <link rel="icon" href="/logo.png" /> */}
</Head>
<Canvas id="canvas-wrapper" camera={{fov:90, near:0.5, far:1500}} linear>
{
count?<MyScene/>:<></>
}
<MyScene/>
</Canvas>
<div
className={`absolute top-0 left-0 w-screen h-screen overflow-hidden z-50 pointer-events-none ${geistSans.variable} ${geistMono.variable} font-[family-name:var(--font-geist-sans)]`}

1
src/styles/globals.scss
View File

@ -74,6 +74,7 @@ body {
// font-family: Orbitron;
// font-size: 200px;
// opacity: 0.3;
z-index: 1 !important;
.active{
color:#14ccfa;
font-weight: 700;