Commit dbe6dd03 by Иван Кубота

wait till DOM is ready for slider draw

parents f79c0f13 2211acd2
<svg width="280" height="224" viewBox="0 0 280 224" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M140.151 211.447C200.398 211.447 249.237 169.044 249.237 116.738C249.237 64.4319 200.398 22.0292 140.151 22.0292C79.9047 22.0292 31.0653 64.4319 31.0653 116.738C31.0653 169.044 79.9047 211.447 140.151 211.447Z" fill="#F6F6F6"/>
<path d="M219.652 67.5683H195.205C190.283 67.5683 186.29 62.9276 186.29 57.3041C186.29 51.6261 190.283 47.04 195.205 47.04H219.652C224.574 47.04 228.566 51.6807 228.566 57.3041C228.621 62.9276 224.574 67.5683 219.652 67.5683Z" fill="white"/>
<path d="M263.816 169.048H235.541C229.853 169.048 225.259 163.534 225.259 156.764C225.259 149.994 229.908 144.48 235.541 144.48H263.816C269.504 144.48 274.098 149.994 274.098 156.764C274.152 163.534 269.504 169.048 263.816 169.048Z" fill="white"/>
<path d="M78.4237 67.5061H35.0539C26.3581 67.5061 19.1936 60.4085 19.1936 51.6731C19.1936 42.9922 26.3034 35.84 35.0539 35.84H78.4237C87.1195 35.84 94.284 42.9376 94.284 51.6731C94.1746 60.4085 87.0648 67.5061 78.4237 67.5061Z" fill="white"/>
<path d="M51.464 136.592H13.7821C6.23474 136.592 0 130.423 0 122.834C0 115.3 6.18005 109.076 13.7821 109.076H51.464C59.0113 109.076 65.246 115.245 65.246 122.834C65.1913 130.423 59.0113 136.592 51.464 136.592Z" fill="white"/>
<path d="M243.493 91.6046H215.218C209.53 91.6046 204.936 86.9639 204.936 81.3404C204.936 75.6623 209.585 71.0762 215.218 71.0762H243.493C249.181 71.0762 253.775 75.7169 253.775 81.3404C253.83 86.9093 249.181 91.6046 243.493 91.6046Z" fill="white"/>
<path d="M152.886 195.775H138.338V198.014H152.886V195.775Z" fill="#FCC900"/>
<path d="M113.947 195.775H99.3988V198.014H113.947V195.775Z" fill="#FCC900"/>
<path d="M126.361 106.782C122.314 106.782 118.869 104.216 117.611 100.613H135.112C133.854 104.216 130.408 106.782 126.361 106.782Z" fill="white"/>
<path d="M165.738 128.075L165.301 130.095L163.222 130.587L165.301 131.023L165.738 133.098L166.23 131.023L168.309 130.587L166.285 130.15L165.738 128.075Z" fill="#F9E011"/>
<path d="M233.132 211H48.8682C41.2243 211 35 205.839 35 199.5C35 193.161 41.2243 188 48.8682 188L233.132 188C240.776 188 247 193.161 247 199.5C246.945 205.839 240.721 211 233.132 211Z" fill="white"/>
<g filter="url(#filter0_d)">
<path d="M105.329 140.451L94.2253 140.402V176.948C94.2253 183.955 105.197 187.41 111.542 182.495L105.395 177.386V140.451H105.329Z" fill="#FFDECC"/>
<path d="M169.707 143.225L180.811 143.177V179.722C180.811 186.73 169.839 190.185 163.494 185.27L169.641 180.16V143.225H169.707Z" fill="#FFDECC"/>
<path d="M154.166 112.258C141.965 115.239 133.335 113.451 121.431 111.066C109.528 108.682 115.48 92.588 115.48 92.588H160.713C160.713 92.588 166.367 109.278 154.166 112.258Z" fill="#231E1A"/>
<path d="M128.554 118.191C131.476 115.315 130.918 105.292 130.273 100.64C132.207 101.345 136.677 102.839 139.083 103.178C141.49 103.516 144.957 101.627 146.389 100.64C145.458 108.112 146.647 122.843 158.852 121.997C174.109 120.94 178.003 123.266 180.999 126.226C185.036 130.216 184.638 149.275 182.704 154.984C180.77 160.693 164.796 154.35 143.308 154.984C121.82 155.618 99.9538 154.032 98.2347 151.494C96.5156 148.957 92.8835 137.856 95.0323 129.609C97.1811 121.363 105.562 121.997 110.934 121.997C116.306 121.997 124.901 121.786 128.554 118.191Z" fill="url(#paint0_linear)"/>
<g filter="url(#filter1_d)">
<path d="M95.0336 128.457C97.1824 120.328 105.563 120.954 110.935 120.954C115.201 120.954 125.746 131.715 138.019 131.715C147.838 131.715 157.901 122.783 166.577 120.954C178.85 120.954 178.753 121.615 181.748 124.533C185.785 128.466 184.543 144.355 183.533 151.464C182.641 157.748 183.533 171.214 168.362 171.214C159.393 171.008 121.297 171.025 114.816 171.214C97.86 171.214 96.0754 164.032 94.2905 151.464C93.2706 144.283 92.8848 136.586 95.0336 128.457Z" fill="#AFCA0B"/>
</g>
<path d="M114.68 58.0852C114.68 46.7532 124.651 37.5668 136.951 37.5668H139.92C152.22 37.5668 162.19 46.7532 162.19 58.0852V85.443C162.19 92.9686 157.361 100.302 150.366 105.381C143.38 110.454 133.774 109.881 126.595 105.084C118.513 99.6841 115.348 93.4729 114.68 85.443V58.0852Z" fill="url(#paint1_linear)"/>
<path d="M136.662 97.6068C135.65 97.9544 135.363 97.8543 133.71 97.6068C134.153 97.89 135.339 98.6087 136.135 98.6087C137.13 98.6087 137.662 99.0335 138.822 99.0335V97.6068C138.822 97.6068 137.653 97.2664 136.662 97.6068Z" fill="#E98484"/>
<path d="M140.718 97.6078C141.73 97.9553 142.017 97.8553 143.67 97.6078C143.228 97.891 142.042 98.6097 141.245 98.6097C140.25 98.6097 139.719 99.0345 138.558 99.0345V97.6078C138.558 97.6078 139.727 97.2673 140.718 97.6078Z" fill="#E98484"/>
<path d="M138.918 98.8314C136.189 98.8314 134.309 97.8709 133.71 97.3906C134.369 98.0843 136.332 99.4718 138.918 99.4718C141.504 99.4718 142.989 98.0843 143.408 97.3906C143.049 97.8709 141.648 98.8314 138.918 98.8314Z" fill="#E98484" stroke="#E98484" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M153.185 53.1594C146.023 60.1854 134.917 68.5137 117.233 72.8578C116.376 77.8585 116.046 92.5042 121.587 111.082L104.332 107.644C101.891 92.779 99.7788 60.4453 109.119 46.142C120.403 28.8636 136.307 28.4751 151.652 36.4443C155.53 36.1708 161.866 37.1829 165.321 42.032C172.643 52.3072 177.171 71.5958 173.806 90.5022C170.893 104.173 171.426 101.232 169.081 108.616L154.041 112.315C156.482 107.657 161.126 94.6827 160.176 80.0506C159.3 66.55 155.436 57.0266 153.185 53.1594Z" fill="url(#paint2_linear)"/>
<path d="M120.92 76.5116C119.06 76.6598 117.432 76.5736 116.967 76.3267C117.665 77.3143 118.806 78.734 120.222 78.734C123.245 78.734 124.639 77.8081 126.964 77.9933C128.824 78.1414 130.994 79.0426 131.847 79.4747C131.847 79.2896 131.196 78.3635 128.592 76.8821C125.337 75.0303 123.245 76.3265 120.92 76.5116Z" fill="#28292B"/>
<path d="M155.272 76.4094C157.132 76.5329 158.759 76.461 159.224 76.2553C158.527 77.0783 157.386 78.2614 155.97 78.2614C152.947 78.2614 151.552 77.4898 149.227 77.6441C147.367 77.7676 145.197 78.5186 144.345 78.8786C144.345 78.7243 144.996 77.9526 147.6 76.7181C150.855 75.1749 152.947 76.2551 155.272 76.4094Z" fill="#28292B"/>
<path d="M115.581 75.1504V77.1205H116.726V81.5859C116.726 84.738 119.337 87.2335 122.485 87.2335H129.249C132.262 87.2335 134.673 84.8694 134.673 81.9143V77.7771H142.039V81.5859C142.039 84.738 144.651 87.2335 147.799 87.2335H154.562C157.576 87.2335 159.987 84.8694 159.987 81.9143V77.1861H161.068V75.1504H115.581ZM133.535 81.98C133.535 84.2784 131.592 86.1828 129.249 86.1828H122.485C119.94 86.1828 117.864 84.147 117.864 81.6516V76.2668H133.535V81.98ZM158.848 81.98C158.848 84.2784 156.906 86.1828 154.562 86.1828H147.799C145.254 86.1828 143.178 84.147 143.178 81.6516V76.2668H158.848V81.98Z" fill="black"/>
<path d="M138.677 91.1433C137.993 91.1433 137.31 91.0685 136.626 90.844C136.284 90.7691 136.132 90.395 136.246 90.0957C136.36 89.7964 136.664 89.6467 136.968 89.7589C138.069 90.0957 139.247 90.0957 140.386 89.7589C140.69 89.6841 140.994 89.8338 141.108 90.0957C141.222 90.395 141.07 90.7691 140.728 90.8814C140.044 91.0685 139.361 91.1433 138.677 91.1433Z" fill="#E9AB84"/>
<path d="M163.848 43.5686H114.251L130.558 20.0017C131.296 18.9474 132.65 18.6994 133.696 19.3816L135.973 21.5522C137.511 22.9786 139.911 23.0406 141.449 21.6142L143.849 19.4436C144.895 18.7614 146.249 19.0095 146.987 20.0017L163.848 43.5686Z" fill="#006C43"/>
<path d="M167.171 47.2969L140.108 52.9389C138.915 53.1668 137.659 53.1668 136.529 52.9389L108.713 47.2399L116.687 35.3291L137.973 32.0237L161.633 35.3291L167.171 47.2969Z" fill="#AFCA0B"/>
<path d="M169.702 50.0156L140.555 56.0167C139.27 56.2592 137.917 56.2592 136.7 56.0167L106.74 49.9549L115.329 37.2858L138.255 33.77L162.534 37.2858L169.702 50.0156Z" fill="black"/>
<path d="M169.634 48.5013L140.577 54.0165C139.296 54.2393 137.948 54.2393 136.734 54.0165L106.869 48.4456L115.431 36.8024L138.285 33.5713L162.488 36.8024L169.634 48.5013Z" fill="#006C43"/>
<path d="M150.777 79.0412C152.827 79.0412 154.488 79.8726 154.488 78.8248C154.488 77.7771 152.827 76.9277 150.777 76.9277C148.728 76.9277 147.066 77.7771 147.066 78.8248C147.066 79.8726 148.728 79.0412 150.777 79.0412Z" fill="black"/>
<path d="M124.492 79.0412C126.287 79.0412 127.743 79.8726 127.743 78.8248C127.743 77.7771 126.287 76.9277 124.492 76.9277C122.696 76.9277 121.24 77.7771 121.24 78.8248C121.24 79.8726 122.696 79.0412 124.492 79.0412Z" fill="black"/>
<path d="M92.9393 169.447H106.671L109.971 124.411C109.971 122.523 108.454 120.995 106.581 120.995C95.7892 120.995 92.9393 129.664 92.9393 140.541V169.447Z" fill="#AFCA0B"/>
<path d="M110.041 165.418H91V171.46H110.041V165.418Z" fill="#AFCA0B"/>
<path d="M186.738 169.447H173.007L169.707 124.411C169.707 122.523 171.223 120.995 173.096 120.995C183.888 120.995 186.738 129.664 186.738 140.541V169.447Z" fill="#AFCA0B"/>
<path d="M169.635 165.418H188.676V171.46H169.635V165.418Z" fill="#AFCA0B"/>
<path d="M172.882 195.797C172.882 181.297 170.828 194.05 169.991 189.769C168.925 183.848 168.621 141.331 168.621 141.331V121.143C168.621 121.143 159.184 121.071 158.956 121L140.7 145.217H138.062L118.166 121.143H108.881V141.331C108.881 141.331 109.186 183.848 108.12 189.769C107.359 194.05 105 187.112 105 187.611L105 195.797H172.882Z" fill="#006C43"/>
<path d="M137.864 136.24H140.861V194.5H137.864V136.24Z" fill="#AFCA0B"/>
<path d="M127.991 73.9429H123.371C122.843 73.9429 122.384 73.4809 122.384 72.9478C122.384 72.4147 122.843 71.9527 123.371 71.9527H127.991C128.52 71.9527 128.978 72.4147 128.978 72.9478C128.978 73.4809 128.555 73.9429 127.991 73.9429Z" fill="#4C3F3F"/>
<path d="M127.99 73.2673H123.371C122.947 73.2673 122.595 72.983 122.454 72.592C122.419 72.6987 122.383 72.8053 122.383 72.9119C122.383 73.445 122.842 73.907 123.371 73.907H127.99C128.519 73.907 128.977 73.445 128.977 72.9119C128.977 72.8053 128.942 72.6631 128.907 72.592C128.801 72.983 128.448 73.2673 127.99 73.2673Z" fill="#2B2727"/>
<path d="M151.968 73.9429H147.348C146.819 73.9429 146.361 73.4809 146.361 72.9478C146.361 72.4147 146.819 71.9527 147.348 71.9527H151.968C152.496 71.9527 152.955 72.4147 152.955 72.9478C152.955 73.4809 152.532 73.9429 151.968 73.9429Z" fill="#4C3F3F"/>
<path d="M151.968 73.2673H147.348C146.925 73.2673 146.573 72.983 146.431 72.592C146.396 72.6987 146.361 72.8053 146.361 72.9119C146.361 73.445 146.819 73.907 147.348 73.907H151.968C152.496 73.907 152.955 73.445 152.955 72.9119C152.955 72.8053 152.92 72.6631 152.884 72.592C152.779 72.983 152.426 73.2673 151.968 73.2673Z" fill="#2B2727"/>
<ellipse cx="155.882" cy="146.228" rx="2.1157" ry="2.13231" fill="#AFCA0B"/>
<path d="M161.992 146.583H149.419C148.314 146.583 147.419 147.478 147.419 148.583V155.244C147.419 156.349 148.314 157.244 149.419 157.244H161.992C163.096 157.244 163.992 156.349 163.992 155.244V148.583C163.992 147.478 163.096 146.583 161.992 146.583Z" fill="white"/>
<g filter="url(#filter2_d)">
<path d="M154.218 114.964L154.438 115.038C157.527 116.228 160.983 114.592 162.086 111.469L166.572 99.3458C167.749 96.2222 166.131 92.7267 163.042 91.6111L162.822 91.5367C159.733 90.3467 156.277 91.9829 155.174 95.1066L150.688 107.229C149.585 110.279 151.129 113.774 154.218 114.964Z" fill="#FFDECC"/>
</g>
<g filter="url(#filter3_d)">
<path d="M121.679 112.896L121.467 112.968C118.506 114.124 115.192 112.535 114.134 109.5L109.833 97.724C108.705 94.6896 110.256 91.2939 113.218 90.2102L113.429 90.138C116.391 88.982 119.704 90.5714 120.762 93.6058L125.063 105.382C126.121 108.344 124.569 111.74 121.679 112.896Z" fill="#FFDECC"/>
</g>
<path d="M112.465 178.689L125.791 112.844C126.499 109.402 124.433 106.161 121.203 105.466C117.969 104.843 114.789 107.054 114.081 110.496L100.759 176.269C100.052 179.711 102.117 182.951 105.347 183.646C108.577 184.342 111.834 182.063 112.465 178.689Z" fill="#FFDECC"/>
<path d="M163.219 182.077L148.852 115.844C148.083 112.39 150.267 109.029 153.622 108.347C156.976 107.664 160.301 109.82 161.071 113.274L175.362 179.512C176.132 182.965 173.947 186.327 170.593 187.009C167.244 187.765 163.914 185.536 163.219 182.077Z" fill="#FFDECC"/>
</g>
<path d="M225.62 76.472C239.217 76.472 250.24 65.4327 250.24 51.815C250.24 38.1973 239.217 27.158 225.62 27.158C212.023 27.158 201 38.1973 201 51.815C201 65.4327 212.023 76.472 225.62 76.472Z" fill="#EFEEEE"/>
<path d="M225.62 70.3514C237.288 70.3514 246.747 60.878 246.747 49.1919C246.747 37.5058 237.288 28.0323 225.62 28.0323C213.951 28.0323 204.492 37.5058 204.492 49.1919C204.492 60.878 213.951 70.3514 225.62 70.3514Z" fill="white"/>
<path d="M225.62 51.2027C226.729 51.2027 227.628 50.3024 227.628 49.1917C227.628 48.081 226.729 47.1807 225.62 47.1807C224.511 47.1807 223.612 48.081 223.612 49.1917C223.612 50.3024 224.511 51.2027 225.62 51.2027Z" fill="#1A1A1A"/>
<path d="M225.62 29.955C236.184 29.955 244.827 38.6111 244.827 49.1909C244.827 59.7707 236.184 68.4269 225.62 68.4269C215.056 68.4269 206.413 59.7707 206.413 49.1909C206.413 38.6111 215.056 29.955 225.62 29.955ZM225.62 26.0203C212.874 26.0203 202.485 36.4252 202.485 49.1909C202.485 61.9566 212.874 72.3615 225.62 72.3615C238.367 72.3615 248.756 61.9566 248.756 49.1909C248.756 36.4252 238.454 26.0203 225.62 26.0203Z" fill="#AFCA0B"/>
<path opacity="0.15" d="M242.035 32.7544C233.042 23.7485 218.375 23.7485 209.295 32.7544C200.216 41.7604 200.303 56.4497 209.295 65.543" fill="white"/>
<path d="M225.622 32.3168V33.8906" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M225.621 64.406V65.9799" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M234.003 34.5911L233.304 35.9026" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M218.026 62.3964L217.24 63.708" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M240.198 40.7113L238.889 41.4982" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M212.436 56.7996L211.127 57.5865" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M242.47 49.1922H240.898" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M210.428 49.1919H208.857" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M240.2 57.5864L238.89 56.7995" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M212.438 41.4979L211.128 40.7109" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M234.003 63.7079L233.305 62.3963" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M218.026 35.9023L217.24 34.5908" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M225.62 49.1929V36.0775" stroke="#1A1A1A" stroke-width="0.8553" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M225.62 49.1917L237.144 42.634" stroke="#1A1A1A" stroke-width="0.1426" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M225.619 49.1919L216.54 54.4381" stroke="#1A1A1A" stroke-width="0.8553" stroke-miterlimit="10" stroke-linecap="round"/>
<rect x="27.0968" y="183.249" width="225.806" height="8.58707" fill="#C4C4C4"/>
<rect x="40.1871" y="191.836" width="199.626" height="5.28435" fill="url(#paint3_linear)"/>
<defs>
<filter id="filter0_d" x="89" y="7" width="117.676" height="196.797" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="8" dy="-2"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.2625 0 0 0 0 0.234062 0 0 0 0 0.234062 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="83.47" y="114.942" width="111.069" height="70.2713" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="146.333" y="89.1474" width="20.6242" height="28.2804" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="-2"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929167 0 0 0 0 0.425868 0 0 0 0 0.425868 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="109.464" y="87.7598" width="19.9316" height="27.5866" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="2"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929167 0 0 0 0 0.425868 0 0 0 0 0.425868 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="139.245" y1="100.64" x2="138.003" y2="149.669" gradientUnits="userSpaceOnUse">
<stop offset="0.192708" stop-color="#ECC5A0"/>
<stop offset="0.369792" stop-color="#FDE1CE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="138.435" y1="37.5668" x2="138.435" y2="111.091" gradientUnits="userSpaceOnUse">
<stop stop-color="#F7EBD6"/>
<stop offset="1" stop-color="#FFDDCB"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="137.864" y1="32.0935" x2="138.615" y2="102.515" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C3F3F"/>
<stop offset="1" stop-color="#564637"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="140" y1="191.836" x2="140" y2="197.12" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A7A7"/>
<stop offset="0.484375" stop-color="#DCDCDC"/>
</linearGradient>
</defs>
</svg>
<svg width="450" height="360" viewBox="0 0 450 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M79.9084 168.453H133.056C138.569 168.453 143.092 163.919 143.092 158.394V152.443C143.092 113.34 174.755 81.7463 213.627 81.7463H271.863C277.376 81.7463 281.899 77.2126 281.899 71.6872C281.899 53.5525 296.6 38.818 314.551 38.818H381.411C400.21 38.818 415.335 53.9775 415.335 72.8206V312.398C415.335 320.19 408.974 326.565 401.2 326.565H43.2983C38.7751 326.565 35.1 322.882 35.1 318.348V213.365C34.9586 188.571 55.0305 168.453 79.9084 168.453Z" fill="white"/>
<g filter="url(#filter0_d)">
<path d="M191.07 219.672L173.948 219.597V275.949C173.948 286.754 190.866 292.081 200.65 284.503L191.172 276.624V219.672H191.07Z" fill="#FFDECC"/>
<path d="M290.337 223.95L307.459 223.875V280.226C307.459 291.031 290.541 296.359 280.757 288.78L290.235 280.902V223.95H290.337Z" fill="#FFDECC"/>
<path d="M266.373 176.2C247.559 180.796 234.252 178.038 215.897 174.362C197.543 170.685 206.72 145.869 206.72 145.869H276.468C276.468 145.869 285.186 171.604 266.373 176.2Z" fill="#231E1A"/>
<path d="M226.881 185.348C231.387 180.913 230.526 165.459 229.532 158.285C232.514 159.372 239.405 161.676 243.116 162.198C246.827 162.72 252.173 159.807 254.382 158.285C252.946 169.806 254.78 192.521 273.6 191.217C297.125 189.586 303.13 193.173 307.748 197.738C313.973 203.89 313.36 233.278 310.378 242.081C307.396 250.885 282.765 241.103 249.631 242.081C216.497 243.059 182.781 240.613 180.13 236.7C177.479 232.788 171.878 215.671 175.192 202.955C178.505 190.239 191.427 191.217 199.711 191.217C207.994 191.217 221.248 190.891 226.881 185.348Z" fill="url(#paint0_linear)"/>
<g filter="url(#filter1_d)">
<path d="M175.194 201.178C178.508 188.644 191.43 189.608 199.713 189.608C206.291 189.608 222.551 206.201 241.476 206.201C256.616 206.201 272.133 192.429 285.511 189.608C304.436 189.608 304.286 190.628 308.905 195.128C315.13 201.192 313.214 225.692 311.657 236.654C310.281 246.344 311.657 267.107 288.263 267.107C274.434 266.789 215.691 266.816 205.698 267.107C179.552 267.107 176.801 256.033 174.048 236.654C172.476 225.58 171.881 213.712 175.194 201.178Z" fill="#AFCA0B"/>
</g>
<path d="M205.488 92.6675C205.488 75.1941 220.863 61.0291 239.828 61.0291H244.407C263.372 61.0291 278.746 75.1941 278.746 92.6675V134.852C278.746 148.533 268.397 161.802 254.427 169.448C246.853 173.593 237.64 172.921 230.038 168.83C212.96 159.64 206.673 149.104 205.488 134.852V92.6675Z" fill="url(#paint1_linear)"/>
<path d="M239.382 153.61C237.822 154.146 237.379 153.991 234.831 153.61C235.513 154.046 237.342 155.155 238.569 155.155C240.104 155.155 240.924 155.81 242.714 155.81V153.61C242.714 153.61 240.911 153.085 239.382 153.61Z" fill="#E98484"/>
<path d="M245.637 153.61C247.198 154.146 247.64 153.991 250.188 153.61C249.507 154.046 247.678 155.155 246.45 155.155C244.916 155.155 244.096 155.81 242.306 155.81V153.61C242.306 153.61 244.109 153.085 245.637 153.61Z" fill="#E98484"/>
<path d="M242.861 155.497C238.652 155.497 235.754 154.015 234.831 153.275C235.846 154.345 238.874 156.484 242.861 156.484C246.849 156.484 249.138 154.345 249.784 153.275C249.23 154.015 247.07 155.497 242.861 155.497Z" fill="#E98484" stroke="#E98484" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M264.861 85.0721C253.817 95.9059 236.691 108.748 209.424 115.446C208.102 123.157 207.593 145.74 216.137 174.386L189.531 169.085C185.767 146.164 182.511 96.3066 196.913 74.2517C214.312 47.6091 238.835 47.0101 262.496 59.2982C268.477 58.8765 278.246 60.4372 283.574 67.9142C294.864 83.7581 301.845 113.5 296.658 142.653C292.166 163.732 292.987 159.197 289.372 170.584L266.181 176.288C269.944 169.105 277.105 149.099 275.64 126.537C274.289 105.72 268.331 91.0353 264.861 85.0721Z" fill="url(#paint2_linear)"/>
<path d="M215.109 121.08C212.241 121.309 209.732 121.176 209.015 120.795C210.09 122.318 211.849 124.507 214.034 124.507C218.694 124.507 220.845 123.079 224.43 123.365C227.298 123.593 230.644 124.983 231.958 125.649C231.958 125.364 230.954 123.936 226.939 121.651C221.92 118.796 218.694 120.795 215.109 121.08Z" fill="#28292B"/>
<path d="M268.079 120.923C270.946 121.113 273.456 121.002 274.173 120.685C273.097 121.954 271.338 123.778 269.154 123.778C264.494 123.778 262.343 122.588 258.758 122.826C255.89 123.017 252.544 124.175 251.23 124.73C251.23 124.492 252.233 123.302 256.248 121.398C261.267 119.019 264.494 120.685 268.079 120.923Z" fill="#28292B"/>
<path d="M206.877 118.981V122.019H208.642V128.905C208.642 133.765 212.669 137.613 217.522 137.613H227.952C232.598 137.613 236.316 133.968 236.316 129.411V123.032H247.674V128.905C247.674 133.765 251.702 137.613 256.555 137.613H266.984C271.631 137.613 275.348 133.968 275.348 129.411V122.12H277.017V118.981H206.877ZM234.56 129.512C234.56 133.056 231.566 135.993 227.952 135.993H217.522C213.599 135.993 210.397 132.854 210.397 129.006V120.703H234.56V129.512ZM273.593 129.512C273.593 133.056 270.598 135.993 266.984 135.993H256.555C252.631 135.993 249.43 132.854 249.43 129.006V120.703H273.593V129.512Z" fill="black"/>
<path d="M242.49 143.642C241.436 143.642 240.382 143.526 239.328 143.18C238.801 143.065 238.567 142.488 238.742 142.026C238.918 141.565 239.386 141.334 239.855 141.507C241.553 142.026 243.369 142.026 245.126 141.507C245.594 141.392 246.063 141.622 246.238 142.026C246.414 142.488 246.18 143.065 245.653 143.238C244.599 143.526 243.544 143.642 242.49 143.642Z" fill="#E9AB84"/>
<path d="M281.303 70.2837H204.826L229.97 33.9446C231.109 32.3189 233.197 31.9364 234.81 32.9883L238.32 36.3353C240.692 38.5348 244.393 38.6304 246.765 36.431L250.465 33.0839C252.078 32.032 254.166 32.4145 255.305 33.9446L281.303 70.2837Z" fill="#006C43"/>
<path d="M286.427 76.0325L244.697 84.7322C242.858 85.0837 240.921 85.0837 239.179 84.7322L196.287 75.9446L208.583 57.5786L241.405 52.4819L277.887 57.5786L286.427 76.0325Z" fill="#AFCA0B"/>
<path d="M290.33 80.2247L245.385 89.4782C243.404 89.8521 241.318 89.8521 239.441 89.4782L193.245 80.1312L206.489 60.5959L241.84 55.1747L279.276 60.5959L290.33 80.2247Z" fill="black"/>
<path d="M290.225 77.8894L245.421 86.3935C243.446 86.7371 241.366 86.7371 239.495 86.3935L193.443 77.8035L206.646 59.8502L241.886 54.868L279.206 59.8502L290.225 77.8894Z" fill="#006C43"/>
<path d="M261.149 124.981C264.309 124.981 266.871 126.263 266.871 124.647C266.871 123.032 264.309 121.722 261.149 121.722C257.989 121.722 255.427 123.032 255.427 124.647C255.427 126.263 257.989 124.981 261.149 124.981Z" fill="black"/>
<path d="M220.617 124.981C223.386 124.981 225.63 126.263 225.63 124.647C225.63 123.032 223.386 121.722 220.617 121.722C217.848 121.722 215.604 123.032 215.604 124.647C215.604 126.263 217.848 124.981 220.617 124.981Z" fill="black"/>
<path d="M171.965 264.382H193.138L198.226 194.939C198.226 192.028 195.888 189.672 193 189.672C176.359 189.672 171.965 203.04 171.965 219.811V264.382Z" fill="#AFCA0B"/>
<path d="M198.335 258.17H168.975V267.486H198.335V258.17Z" fill="#AFCA0B"/>
<path d="M316.599 264.382H295.426L290.337 194.939C290.337 192.028 292.675 189.672 295.563 189.672C312.204 189.672 316.599 203.04 316.599 219.811V264.382Z" fill="#AFCA0B"/>
<path d="M290.226 258.17H319.587V267.486H290.226V258.17Z" fill="#AFCA0B"/>
<path d="M295.709 326.565L295.71 313.944C295.71 313.174 292.541 302.284 291.251 295.684C289.608 286.554 289.138 220.994 289.138 220.994V189.865C289.138 189.865 274.588 189.755 274.236 189.645L246.086 226.987H242.018L211.339 189.865H197.023V220.994C197.023 220.994 197.492 286.554 195.85 295.684C194.676 302.284 191.038 313.174 191.038 313.944L191.038 326.565H295.709Z" fill="#006C43"/>
<path d="M241.237 213.178H245.859V321.68H241.237V213.178Z" fill="#AFCA0B"/>
<path d="M226.012 117.119H218.89C218.074 117.119 217.367 116.407 217.367 115.585C217.367 114.763 218.074 114.05 218.89 114.05H226.012C226.828 114.05 227.535 114.763 227.535 115.585C227.535 116.407 226.882 117.119 226.012 117.119Z" fill="#4C3F3F"/>
<path d="M226.011 116.078H218.889C218.236 116.078 217.692 115.639 217.475 115.037C217.421 115.201 217.366 115.365 217.366 115.53C217.366 116.352 218.073 117.064 218.889 117.064H226.011C226.827 117.064 227.534 116.352 227.534 115.53C227.534 115.365 227.479 115.146 227.425 115.037C227.262 115.639 226.718 116.078 226.011 116.078Z" fill="#2B2727"/>
<path d="M262.984 117.119H255.861C255.046 117.119 254.339 116.407 254.339 115.585C254.339 114.763 255.046 114.05 255.861 114.05H262.984C263.8 114.05 264.506 114.763 264.506 115.585C264.506 116.407 263.854 117.119 262.984 117.119Z" fill="#4C3F3F"/>
<path d="M262.984 116.078H255.861C255.209 116.078 254.665 115.639 254.448 115.037C254.393 115.201 254.339 115.365 254.339 115.53C254.339 116.352 255.046 117.064 255.861 117.064H262.984C263.8 117.064 264.506 116.352 264.506 115.53C264.506 115.365 264.452 115.146 264.398 115.037C264.235 115.639 263.691 116.078 262.984 116.078Z" fill="#2B2727"/>
<ellipse cx="269.019" cy="228.579" rx="3.26231" ry="3.28793" fill="#AFCA0B"/>
<path d="M279.524 229.127H257.97C256.865 229.127 255.97 230.022 255.97 231.127V243.566C255.97 244.671 256.865 245.566 257.97 245.566H279.524C280.629 245.566 281.524 244.671 281.524 243.566V231.127C281.524 230.022 280.629 229.127 279.524 229.127Z" fill="white"/>
<g filter="url(#filter2_d)">
<path d="M266.454 180.372L266.794 180.487C271.556 182.322 276.886 179.799 278.586 174.982L285.503 156.289C287.317 151.473 284.823 146.083 280.06 144.363L279.72 144.248C274.958 142.413 269.629 144.936 267.928 149.753L261.011 168.446C259.31 173.147 261.691 178.537 266.454 180.372Z" fill="#FFDECC"/>
</g>
<g filter="url(#filter3_d)">
<path d="M216.28 177.183L215.954 177.295C211.388 179.077 206.278 176.626 204.647 171.947L198.015 153.789C196.276 149.11 198.668 143.874 203.234 142.203L203.56 142.091C208.126 140.309 213.236 142.76 214.867 147.439L221.499 165.597C223.129 170.165 220.738 175.401 216.28 177.183Z" fill="#FFDECC"/>
</g>
<path d="M202.073 278.633L222.621 177.103C223.712 171.795 220.527 166.799 215.547 165.727C210.56 164.766 205.656 168.175 204.565 173.483L184.023 274.901C182.932 280.209 186.117 285.205 191.097 286.277C196.078 287.349 201.1 283.836 202.073 278.633Z" fill="#FFDECC"/>
<path d="M280.333 283.857L258.18 181.729C256.993 176.404 260.362 171.22 265.534 170.168C270.707 169.117 275.834 172.44 277.021 177.766L299.057 279.902C300.244 285.227 296.876 290.411 291.703 291.462C286.539 292.629 281.404 289.19 280.333 283.857Z" fill="#FFDECC"/>
</g>
<path d="M321.942 156.484L319.891 165.727L310.663 167.78L319.891 169.834L321.942 178.948L323.865 169.834L333.093 167.78L324.249 165.983L321.942 156.484Z" fill="#F9E011"/>
<path d="M145.646 186.436L144.19 192.632L137.636 194.01L144.19 195.387L145.646 201.411L147.103 195.387L153.657 194.01L147.285 192.805L145.646 186.436Z" fill="#F9E011"/>
<rect x="103.766" y="304.102" width="268.846" height="13.9893" rx="3" fill="#C4C4C4"/>
<rect x="119.35" y="318.092" width="237.675" height="8.60886" fill="url(#paint3_linear)"/>
<path d="M374.96 125.168C391.594 125.168 405.079 111.663 405.079 95.0029C405.079 78.343 391.594 64.8375 374.96 64.8375C358.325 64.8375 344.84 78.343 344.84 95.0029C344.84 111.663 358.325 125.168 374.96 125.168Z" fill="#EFEEEE"/>
<path d="M374.96 117.68C389.235 117.68 400.807 106.091 400.807 91.7939C400.807 77.4971 389.235 65.9073 374.96 65.9073C360.685 65.9073 349.112 77.4971 349.112 91.7939C349.112 106.091 360.685 117.68 374.96 117.68Z" fill="white"/>
<path d="M374.96 94.2539C376.316 94.2539 377.416 93.1524 377.416 91.7936C377.416 90.4348 376.316 89.3333 374.96 89.3333C373.603 89.3333 372.503 90.4348 372.503 91.7936C372.503 93.1524 373.603 94.2539 374.96 94.2539Z" fill="#1A1A1A"/>
<path d="M374.96 68.2586C387.884 68.2586 398.458 78.8485 398.458 91.7918C398.458 104.735 387.884 115.325 374.96 115.325C362.037 115.325 351.463 104.735 351.463 91.7918C351.463 78.8485 362.037 68.2586 374.96 68.2586ZM374.96 63.4449C359.366 63.4449 346.656 76.1743 346.656 91.7918C346.656 107.409 359.366 120.139 374.96 120.139C390.554 120.139 403.264 107.409 403.264 91.7918C403.264 76.1743 390.661 63.4449 374.96 63.4449Z" fill="#AFCA0B"/>
<path opacity="0.15" d="M395.04 71.6843C384.039 60.6665 366.095 60.6665 354.987 71.6843C343.879 82.7022 343.986 100.673 354.987 111.798" fill="white"/>
<path d="M374.962 71.1488V73.0742" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M374.961 110.407V112.332" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M385.215 73.9313L384.36 75.5358" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M365.669 107.948L364.708 109.553" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M392.794 81.4186L391.192 82.3813" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M358.831 101.101L357.229 102.064" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M395.574 91.7942H393.651" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M356.375 91.7939H354.452" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M392.796 102.064L391.194 101.101" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M358.833 82.3811L357.23 81.4183" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M385.216 109.553L384.361 107.948" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M365.669 75.5354L364.708 73.9308" stroke="#E0D1BF" stroke-width="0.5702" stroke-miterlimit="10"/>
<path d="M374.96 91.7951V75.7498" stroke="#1A1A1A" stroke-width="0.8553" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M374.96 91.7936L389.059 83.7709" stroke="#1A1A1A" stroke-width="0.1426" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M374.96 91.7939L363.852 98.212" stroke="#1A1A1A" stroke-width="0.8553" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M59.6639 125.035H120.865C127.273 125.035 132.507 119.794 132.507 113.375C132.507 106.957 127.273 101.716 120.865 101.716H59.5571C53.1487 101.716 47.9151 106.957 47.9151 113.375C48.0219 119.794 53.2555 125.035 59.6639 125.035Z" fill="white"/>
<path d="M124.604 93.1584H153.015C158.569 93.1584 163.055 88.6657 163.055 83.1033C163.055 77.5409 158.569 73.0482 153.015 73.0482H124.604C119.05 73.0482 114.564 77.5409 114.564 83.1033C114.564 88.6657 119.05 93.1584 124.604 93.1584Z" fill="white"/>
<path d="M132.729 75.1876L131.873 78.9288L128.021 79.7839L131.873 80.7459L132.729 84.4871L133.585 80.7459L137.436 79.7839L133.799 79.0357L132.729 75.1876Z" fill="#F9E011"/>
<defs>
<filter id="filter0_d" x="166.975" y="27.4" width="170.613" height="314.165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="8" dy="5"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.2625 0 0 0 0 0.234062 0 0 0 0 0.234062 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="162.783" y="183.591" width="160.424" height="97.5162" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="256.463" y="141.648" width="29.6339" height="41.4392" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="-2"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929167 0 0 0 0 0.425868 0 0 0 0 0.425868 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="197.446" y="139.508" width="28.5658" height="40.3695" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="2"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929167 0 0 0 0 0.425868 0 0 0 0 0.425868 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="243.365" y1="158.285" x2="241.451" y2="233.885" gradientUnits="userSpaceOnUse">
<stop offset="0.192708" stop-color="#ECC5A0"/>
<stop offset="0.369792" stop-color="#FDE1CE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="242.117" y1="61.0291" x2="242.117" y2="174.4" gradientUnits="userSpaceOnUse">
<stop stop-color="#F7EBD6"/>
<stop offset="1" stop-color="#FFDDCB"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="241.236" y1="52.5895" x2="242.394" y2="161.177" gradientUnits="userSpaceOnUse">
<stop stop-color="#675654"/>
<stop offset="1" stop-color="#131313"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="238.187" y1="318.092" x2="238.187" y2="326.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A7A7"/>
<stop offset="0.484375" stop-color="#DCDCDC"/>
</linearGradient>
</defs>
</svg>
......@@ -30,8 +30,8 @@ store.sub(['navigation.current', 'loaded.cards'], async function(page, loaded) {
});
tmpStore.sub([
'isMobile', 'navigation.current'
], (is, page)=>{
if(!is && page === 'Profile')
'isMobile', 'navigation.current', 'loaded'
], (is, page, loaded)=>{
if(!is && page === 'Profile' && loaded)
store.set('navigation.current', 'Account');
});
\ No newline at end of file
......@@ -81,3 +81,8 @@ const tmpStore = new Store({
width: window.innerWidth
});
let lastNav = null;
store.sub('navigation.current', function(val) {
console.log('APP:navigation', lastNav,'→', val);
lastNav = val;
});
\ No newline at end of file
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.9999 26.9895H5.06652V21.0438C5.06652 20.3758 4.53319 19.8413 3.86651 19.8413C3.19984 19.8413 2.6665 20.3758 2.6665 21.0438V28.192C2.6665 28.8601 3.19984 29.3945 3.86651 29.3945H10.9999C11.6666 29.3945 12.1999 28.8601 12.1999 28.192C12.1999 27.524 11.6666 26.9895 10.9999 26.9895Z" fill="#4591A9"/>
<path d="M3.86651 12.2256C4.53319 12.2256 5.06652 11.6911 5.06652 11.0231V5.07737H10.9999C11.6666 5.07737 12.1999 4.54293 12.1999 3.87487C12.1999 3.20681 11.6666 2.67236 10.9999 2.67236H3.86651C3.19984 2.67236 2.6665 3.20681 2.6665 3.87487V11.0231C2.6665 11.6911 3.19984 12.2256 3.86651 12.2256Z" fill="#4591A9"/>
<path d="M20.9998 5.07737H26.9332V11.0231C26.9332 11.6911 27.4665 12.2256 28.1332 12.2256C28.7999 12.2256 29.3332 11.6911 29.3332 11.0231V3.87487C29.3332 3.20681 28.7999 2.67236 28.1332 2.67236H20.9998C20.3331 2.67236 19.7998 3.20681 19.7998 3.87487C19.7998 4.54293 20.3331 5.07737 20.9998 5.07737Z" fill="#4591A9"/>
<path d="M28.1332 19.8413C27.4665 19.8413 26.9332 20.3758 26.9332 21.0438V26.9895H20.9998C20.3331 26.9895 19.7998 27.524 19.7998 28.192C19.7998 28.8601 20.3331 29.3945 20.9998 29.3945H28.1332C28.7999 29.3945 29.3332 28.8601 29.3332 28.192V21.0438C29.3332 20.3758 28.7999 19.8413 28.1332 19.8413Z" fill="#4591A9"/>
<path d="M30.7333 14.7642H26.4C25.6666 14.7642 25.1333 15.3654 25.1333 16.0335C25.1333 16.7683 25.7333 17.3028 26.4 17.3028H30.7333C31.4667 17.3028 32 16.7015 32 16.0335C32 15.2986 31.4 14.7642 30.7333 14.7642Z" fill="#4591A9"/>
<path d="M6.93339 16.0335C6.93339 15.2986 6.33339 14.7642 5.66671 14.7642H1.26668C0.600005 14.7642 0 15.2986 0 16.0335C0 16.7683 0.600005 17.3028 1.26668 17.3028H5.60005C6.33339 17.3028 6.93339 16.7683 6.93339 16.0335Z" fill="#4591A9"/>
<path d="M16.0001 25.1191C15.2667 25.1191 14.7334 25.7204 14.7334 26.3885V30.7308C14.7334 31.4657 15.3334 32.0001 16.0001 32.0001C16.7334 32.0001 17.2668 31.3989 17.2668 30.7308V26.3885C17.2668 25.7204 16.7334 25.1191 16.0001 25.1191Z" fill="#4591A9"/>
<path d="M16.0001 6.9478C16.7334 6.9478 17.2668 6.34655 17.2668 5.67849V1.26931C17.2668 0.601252 16.7334 0 16.0001 0C15.2667 0 14.7334 0.601252 14.7334 1.26931V5.61169C14.7334 6.34655 15.2667 6.9478 16.0001 6.9478Z" fill="#4591A9"/>
<path d="M15.4446 10.6108L7.67444 13.7392C7.39693 13.8783 7.39693 14.2954 7.67444 14.3649L10.8658 15.6163L10.9351 15.1296C11.0045 14.3649 11.4902 13.7392 12.2533 13.4611L15.514 12.4183C15.7221 12.3488 15.8609 12.3488 16.069 12.3488C16.2771 12.3488 16.4159 12.3488 16.624 12.4183L18.4278 12.9745V11.445C18.4278 11.3755 18.4278 11.3755 18.4278 11.306L16.624 10.5413C16.2078 10.4717 15.7915 10.4717 15.4446 10.6108Z" fill="#4591A9"/>
<path d="M21.1342 15.6165L24.3255 14.3651C24.603 14.2261 24.603 13.8089 24.3255 13.7394L20.5098 12.21V13.948C20.8566 14.2261 21.0648 14.7127 21.0648 15.1298L21.1342 15.6165Z" fill="#4591A9"/>
<path d="M18.3592 13.7394L16.3473 13.1137C16.1392 13.0441 15.8617 13.0441 15.6535 13.1137L12.3928 14.1565C11.9072 14.2955 11.6297 14.7126 11.5603 15.1993L11.144 21.039C11.144 21.3866 11.4909 21.6647 11.8378 21.5257L15.5148 20.1353C15.7923 20.0657 16.1392 20.0657 16.4167 20.1353L20.0936 21.5257C20.4405 21.6647 20.7874 21.3866 20.7874 21.039L20.5793 18.1192H18.0817L18.2898 16.4507C18.1511 16.2421 18.0123 15.964 18.0123 15.6859C18.0123 15.4079 18.0817 15.0602 18.2898 14.8517V13.7394H18.3592Z" fill="#4591A9"/>
<path d="M19.0529 16.2422L18.8448 17.4241H20.0242L19.8854 16.2422C20.0242 16.1032 20.1629 15.8946 20.1629 15.686C20.1629 15.4775 20.0242 15.2689 19.8854 15.1299V11.5148C19.8854 11.3062 19.6773 11.0977 19.4692 11.0977C19.261 11.0977 19.0529 11.3062 19.0529 11.5148V15.1299C18.8448 15.2689 18.7754 15.4775 18.7754 15.686C18.7754 15.8946 18.8448 16.1032 19.0529 16.2422Z" fill="#4591A9"/>
</svg>
<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33 10.3659C33 9.11707 32.1805 8.06341 31.0488 7.75122C30.8927 4.00488 27.8098 1 24.0244 1H9.97561C6.1122 1 2.95122 4.16098 2.95122 8.02439V17.1171C1.81951 17.4683 1 18.4829 1 19.7317C1 20.9805 1.81951 22.0341 2.95122 22.3463C3.10732 26.0927 6.19024 29.0976 9.97561 29.0976H24.0244C27.8878 29.0976 31.0488 25.9366 31.0488 22.0732V12.9805C32.1805 12.6293 33 11.6146 33 10.3659ZM9.97561 2.56098H24.0244C26.9512 2.56098 29.3317 4.86341 29.4878 7.75122C28.3561 8.10244 27.5366 9.11707 27.5366 10.3659C27.5366 10.7561 27.6146 11.1073 27.7707 11.4585L23.9073 16.2195C23.4 15.5171 22.5805 15.0488 21.6829 15.0488C20.5902 15.0488 19.6537 15.7122 19.1854 16.6488L14.9707 14.5415C14.7756 13.2927 13.6439 12.3171 12.3171 12.3171C10.9122 12.3171 9.78049 13.3707 9.62439 14.6976L6.03415 18.2878C5.68293 17.7415 5.13659 17.3122 4.5122 17.1171V8.02439C4.51219 5.01951 6.97073 2.56098 9.97561 2.56098ZM12.3171 16.2195C11.6537 16.2195 11.1463 15.7122 11.1463 15.0488C11.1463 14.3854 11.6537 13.878 12.3171 13.878C12.9805 13.878 13.4878 14.3854 13.4878 15.0488C13.4878 15.7122 12.9805 16.2195 12.3171 16.2195ZM13.0976 17.6634C13.839 17.4293 14.4634 16.8829 14.8146 16.1805L19.0293 18.2878C19.2244 19.3024 19.9659 20.122 20.9415 20.3951V27.5366H13.0976V17.6634ZM21.6829 18.9512C21.0195 18.9512 20.5122 18.4439 20.5122 17.7805C20.5122 17.1171 21.0195 16.6098 21.6829 16.6098C22.3463 16.6098 22.8537 17.1171 22.8537 17.7805C22.8537 18.4439 22.3463 18.9512 21.6829 18.9512ZM2.56098 19.7317C2.56098 19.0683 3.06829 18.561 3.73171 18.561C4.39512 18.561 4.90244 19.0683 4.90244 19.7317C4.90244 20.3951 4.39512 20.9024 3.73171 20.9024C3.06829 20.9024 2.56098 20.3951 2.56098 19.7317ZM4.5122 22.3463C5.52683 22.0341 6.26829 21.1756 6.42439 20.0829L10.0146 16.4927C10.3659 17.039 10.9122 17.4683 11.5366 17.6634V27.5366H9.97561C7.04878 27.5366 4.66829 25.2341 4.5122 22.3463ZM24.0244 27.5366H22.4634V20.3951C23.5171 20.0829 24.2585 19.1854 24.4146 18.0927L28.8244 12.6683C29.0195 12.7854 29.2537 12.9024 29.5268 12.9805V22.0732C29.4878 25.078 27.0293 27.5366 24.0244 27.5366ZM30.2683 11.5366C29.6049 11.5366 29.0976 11.0293 29.0976 10.3659C29.0976 9.70244 29.6049 9.19512 30.2683 9.19512C30.9317 9.19512 31.439 9.70244 31.439 10.3659C31.439 11.0293 30.9317 11.5366 30.2683 11.5366Z" fill="#C10A78" stroke="#C10A78" stroke-width="0.6"/>
</svg>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 23V2H21.7276C22.4903 2 23.2237 2.32009 23.7752 2.89373L31.083 10.4939C32.3425 11.8038 32.2986 14.008 30.9882 15.2573L29.6863 13.638C30.1231 13.2216 30.1377 12.4869 29.7179 12.0502L22.4101 4.45008C22.2263 4.25887 21.9818 4.15217 21.7276 4.15217H3.97646V20.8478H21.7522C21.9917 20.8478 22.223 20.7531 22.4032 20.5814L29.6863 13.638L30.9882 15.2573L23.7051 22.2006C23.1646 22.7159 22.4706 23 21.7522 23H2Z" fill="#34BE5B"/>
<path d="M2 1.03125C2 0.461707 2.43372 0 2.96875 0H3.03125C3.56627 0 4 0.461706 4 1.03125V30H2L2 1.03125Z" fill="#34BE5B"/>
<path d="M0.0322266 30.0605C0.0322266 29.525 0.466375 29.0908 1.00192 29.0908H6.28834C6.82388 29.0908 7.25803 29.525 7.25803 30.0605C7.25803 30.5961 6.82388 31.0302 6.28834 31.0302H1.00192C0.466375 31.0302 0.0322266 30.5961 0.0322266 30.0605Z" fill="#34BE5B"/>
<path d="M0 31C0 30.4477 0.308426 30 0.688889 30H21.3111C21.6916 30 22 30.4477 22 31C22 31.5523 21.6916 32 21.3111 32H0.688887C0.308425 32 0 31.5523 0 31Z" fill="#34BE5B"/>
<path d="M15.5 19C19.0901 19 22 16.0901 22 12.5C22 8.90988 19.0901 6 15.5 6C11.9099 6 9 8.90988 9 12.5C9.03779 16.0901 11.9477 19 15.5 19ZM15.5 7.73837C18.1453 7.73837 20.2616 9.89244 20.2616 12.5C20.2616 15.1453 18.1076 17.2616 15.5 17.2616C12.8924 17.2616 10.7384 15.1076 10.7384 12.5C10.7384 9.89244 12.8924 7.73837 15.5 7.73837Z" fill="#34BE5B"/>
<path d="M14.3502 14.6215C14.4959 14.7926 14.7145 14.8611 14.9695 14.8611C15.1881 14.8611 15.4067 14.7584 15.5889 14.6215L17.9206 12.26C18.2485 11.952 18.212 11.4386 17.8841 11.1648C17.5562 10.8568 17.0098 10.891 16.7183 11.199L14.9695 12.9445L14.3502 12.2942C14.0223 11.9862 13.5122 11.952 13.1843 12.26C12.8564 12.568 12.82 13.0472 13.1479 13.3552L14.3502 14.6215Z" fill="#34BE5B"/>
</svg>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 17C19.314 17 22 14.314 22 11C22 7.68605 19.314 5 16 5C12.686 5 10 7.68605 10 11C10.0349 14.314 12.7209 17 16 17ZM16 6.60465C18.4419 6.60465 20.3953 8.59302 20.3953 11C20.3953 13.4419 18.407 15.3953 16 15.3953C13.593 15.3953 11.6047 13.407 11.6047 11C11.6047 8.59302 13.593 6.60465 16 6.60465Z" fill="#EC7B3F"/>
<path d="M15.3228 12.786C15.4575 12.9625 15.6596 13.0331 15.8954 13.0331C16.0975 13.0331 16.2996 12.9272 16.4681 12.786L18.6239 10.3507C18.927 10.0331 18.8933 9.50368 18.5902 9.22132C18.287 8.90368 17.7818 8.93897 17.5123 9.25662L15.8954 11.0566L15.3228 10.386C15.0196 10.0684 14.5481 10.0331 14.2449 10.3507C13.9418 10.6684 13.9081 11.1625 14.2112 11.4801L15.3228 12.786Z" fill="#EC7B3F"/>
<path d="M30.5853 20.3412H25.4653V1.44706C25.4653 0.670588 24.8589 0 24.0842 0H2.89684C2.12211 0 1.48211 0.670588 1.48211 1.44706V6.29412H0.774737C0.336842 6.29412 0 6.64706 0 7.10588C0 7.56471 0.336842 7.91765 0.774737 7.91765H1.51579V12.2235H0.774737C0.336842 12.2235 0 12.5765 0 13.0353C0 13.4941 0.336842 13.8471 0.774737 13.8471H1.51579V18.1529H0.774737C0.336842 18.1529 0 18.5059 0 18.9647C0 19.4235 0.336842 19.7765 0.774737 19.7765H1.51579V24.0824H0.774737C0.336842 24.0824 0 24.4353 0 24.8941C0 25.3529 0.336842 25.7059 0.774737 25.7059H1.51579V30.5176C1.51579 31.3294 2.15579 32 2.93053 32H24.0842C24.8589 32 25.4653 31.3294 25.4653 30.5176V26.5176H30.5853C31.36 26.5176 32 25.8471 32 25.0353V21.8588C32 21.0118 31.36 20.3412 30.5853 20.3412ZM14.3158 24.8588L12.1263 23.4118L14.2821 21.9647H15.4274V24.8941H14.3158V24.8588ZM16.9768 21.9294L27.0484 21.8588V24.8588H16.9768V21.9294ZM3.03158 25.6353H3.77263C4.21053 25.6353 4.54737 25.2824 4.54737 24.8235C4.54737 24.3647 4.21053 24.0118 3.77263 24.0118H3.03158V19.7412H3.77263C4.21053 19.7412 4.54737 19.3882 4.54737 18.9294C4.54737 18.4706 4.21053 18.1176 3.77263 18.1176H3.03158V13.8118H3.77263C4.21053 13.8118 4.54737 13.4588 4.54737 13C4.54737 12.5412 4.21053 12.1882 3.77263 12.1882H3.03158V7.88235H3.77263C4.21053 7.88235 4.54737 7.52941 4.54737 7.07059C4.54737 6.61176 4.21053 6.25882 3.77263 6.25882H3.03158V1.58824H6.1979V30.3059H3.03158V25.6353ZM23.9495 30.3412H7.78105V1.58824H23.9495V20.3412H14.2821C14.0126 20.3412 13.7432 20.4118 13.5411 20.5529L11.1495 22.1412C10.7453 22.4235 10.4758 22.8824 10.4758 23.4118C10.4758 23.9412 10.7116 24.4 11.1495 24.6824L13.5411 26.2706C13.7768 26.4118 14.0126 26.4824 14.2821 26.4824H23.9158V30.3412H23.9495ZM28.5979 24.8588V21.8235H30.4505L30.5853 24.8588H28.5979Z" fill="#EC7B3F"/>
</svg>
import Button from '../../cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import IconTest from '/svg/icon-testing.svg';
import IconTrial from '/svg/icon-trial.svg';
import IconBase from '/svg/icon-base.svg';
import IconResult from '/svg/icon-result.svg';
import './accountNavigation.scss';
const AccountNavigation = D.declare('view.block.AccountNavigation', () => {
return <div class="account-navigation">
<h2 class="account-navigation__title">Сегодня вы можете:</h2>
<ul className="account-navigation__list">
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconTest width="32" height="32"/>
<span>Пройти итоговое тестирование</span>
<Arr width="17" height="11"/>
</Button>
</li>
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconTrial width="32" height="32"/>
<span>Пройти пробное тестирование</span>
<Arr width="17" height="11"/>
</Button>
</li>
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconBase width="32" height="32"/>
<span>Посмотреть базу знаний</span>
<Arr width="17" height="11"/>
</Button>
</li>
<li className="account-navigation__item">
<Button class={"button button--secondary account-navigation__button"}>
<IconResult width="32" height="32"/>
<span>Все результаты моих тестов</span>
<Arr width="17" height="11"/>
</Button>
</li>
</ul>
</div>
})
export default AccountNavigation;
export {AccountNavigation};
.account-navigation__title {
@include lesserHeadline;
margin: 0 0 20px;
padding-left: 4px;
@media (max-width: $mobile) {
display: none;
}
}
.account-navigation__list {
@include list-reset;
}
.account-navigation__item {
margin-bottom: 30px;
width: 430px;
@media (max-width: $mobile) {
margin-bottom: 21px;
width: 100%;
}
}
.account-navigation__item:last-child {
margin-bottom: 0;
}
.account-navigation__item .account-navigation__button {
padding-left: 70px;
width: 100%;
text-align: left;
@media (max-width: $mobile) {
padding-left: 60px;
padding-right: 10px;
font-size: 16px;
letter-spacing: 0.35px;
svg:last-child {
display: none;
}
}
@media (max-width: 359px) {
font-size: 15px;
letter-spacing: 0;
}
}
......@@ -86,10 +86,11 @@
}
.button--secondary {
padding: 5px 44px;
padding: 6px 45px;
min-width: 200px;
color: #030303;
background-color: $bg-main;
border-width: 1px;
border-color: $bg-main;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
......@@ -106,10 +107,8 @@
}
&:focus {
padding: 6px 45px;
color: #030303;
background-color: $bg-main;
border-width: 1px;
border-color: $accent-main;
outline: none;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
......
......@@ -196,3 +196,8 @@ button.card__button {
filter: grayscale(100%);
opacity: 0.5;
}
.card--disabled img {
object-fit: contain;
object-position: center;
}
......@@ -112,7 +112,7 @@ const CardSlider = (function(){
waitTimeout = setTimeout(tuneScrollPosition, 80);
};
let dom;
let theDOM = <div class={D.cls('card-slider', {'card-slider__no-arrow-next': rightButtonDisabled})}>
let theDOM = <div class={D.cls('card-slider', {'card-slider--no-arrow-next': rightButtonDisabled})}>
<button class={D.cls(
'button',
'button--round',
......
......@@ -15,8 +15,8 @@
}
@media (max-width: $mobile) {
margin: 0 -20px;
padding: 7px 0;
margin: 0 -20px -5px;
padding: 7px 0 0;
width: calc(100% + 40px);
}
}
......@@ -86,3 +86,10 @@
display: none;
}
.card-slider--no-arrow-next {
&::before {
opacity: 0;
}
}
import './infoCard.scss';
import Button from "../button/Button";
import ProductCard from '../productCard/ProductCard.jsx';
import Back from '/svg/arr-back.svg';
import Arr from '/svg/arr.svg';
import Info from '/svg/info.svg';
const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
return <div class="info-card">
......@@ -15,25 +15,7 @@ const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
</div>
</div>
<div className="info-card__body">
<div className="info-card__image">
<img src="/uploads/images/product1.jpg" alt=""/>
</div>
<div className="info-card__list">
<h2>Ингредиенты</h2>
<ul>
<li>Вареная сгущенка </li>
<li>Мука </li>
<li>Масло сливочное </li>
<li>Сахар </li>
<li>Ингредиент</li>
</ul>
</div>
<div className="info-card__text">
<Info width="30" height="30"/>
<p><b>Важно знать.</b>Информация о&nbsp;продукте. Все, что вы&nbsp;хотели знать, но&nbsp;боялись спросить.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl. </p>
<p>Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl.</p>
</div>
<ProductCard/>
</div>
<div className="info-card__footer">
<Button class={"button info-card__link"}><Back width="17" height="11"/><span>Предыдущая карточка</span></Button>
......
......@@ -60,10 +60,7 @@
}
.info-card__body {
display: flex;
flex-wrap: wrap;
margin-bottom: 25px;
padding: 34px 40px 54px;
background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
border-radius: 6px;
......@@ -73,164 +70,13 @@
}
@media (max-width: $mobile) {
flex-direction: column;
margin-bottom: 14px;
padding: 0;
background-color: transparent;
border-radius: 0;
box-shadow: none;
}
}
.info-card__image {
flex: none;
margin: 6px 48px 52px 0;
width: 330px;
height: 190px;
background-image: linear-gradient(139.56deg, #F3F3F3 29.84%, #D1D1D1 102.3%);
border-radius: 10px;
overflow: hidden;
@media (max-width: $tablet) {
margin-right: 20px;
}
@media (max-width: $mobile) {
position: relative;
margin: 0 0 23px;
padding-top: 58%;
width: 100%;
height: 0;
border-radius: 6px;
overflow: hidden;
}
}
.info-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
@media (max-width: $mobile) {
position: absolute;
top: 0;
left: 0;
}
}
.info-card__list {
max-width: calc(100% - 350px);
@media (max-width: $mobile) {
box-sizing: border-box;
padding: 0 10px;
max-width: 100%;
}
}
.info-card__list h2 {
@include lesserHeadline;
margin: 0 0 17px;
@media (max-width: $mobile) {
margin-bottom: 3px;
}
}
.info-card__list ul {
@include list-reset;
@include subtitle;
margin-bottom: 50px;
font-weight: 500;
@media (max-width: $mobile) {
margin-bottom: 27px;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.info-card__list li {
position: relative;
margin-bottom: 5px;
padding-left: 21px;
@media (max-width: $mobile) {
margin-bottom: 3px;
padding-left: 9px;
}
}
.info-card__list li::before {
content: "";
position: absolute;
top: 8px;
left: 4px;
width: 5px;
height: 5px;
background-color: $accent-main;
border-radius: 50%;
@media (max-width: $mobile) {
top: 6px;
left: 1px;
width: 3px;
height: 3px;
}
}
.info-card__text {
@include bodyText;
position: relative;
padding-left: 55px;
@media (max-width: $mobile) {
padding: 8px 10px 0;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.info-card__text svg {
position: absolute;
top: 0;
left: 0;
color: $accent-main;
@media (max-width: $mobile) {
left: 10px;
}
}
.info-card__text p {
margin: 0;
}
.info-card__text b {
display: inline-block;
vertical-align: top;
margin-bottom: 2px;
margin-right: 4px;
@media (max-width: $mobile) {
display: block;
margin-bottom: 14px;
padding-left: 38px;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
color: $text-main;
}
}
.info-card__footer {
display: flex;
justify-content: space-between;
......
import './productCard.scss';
import Info from "/svg/info.svg";
const ProductCard = D.declare('view.cmp.ProductCard', () => {
return <div class="product-card">
<div className="product-card__image">
<img src="/uploads/images/product1.jpg" alt=""/>
</div>
<div className="product-card__list">
<h2>Ингредиенты</h2>
<ul>
<li>Вареная сгущенка </li>
<li>Мука </li>
<li>Масло сливочное </li>
<li>Сахар </li>
<li>Ингредиент</li>
</ul>
</div>
<div className="product-card__text">
<Info width="30" height="30"/>
<p><b>Важно знать.</b>Информация о&nbsp;продукте. Все, что вы&nbsp;хотели знать, но&nbsp;боялись спросить.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl. </p>
<p>Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl.</p>
</div>
</div>
})
export default ProductCard;
export {ProductCard};
.product-card {
display: flex;
flex-wrap: wrap;
padding: 34px 40px 54px;
@media (max-width: $tablet) {
padding: 20px 30px 40px;
}
@media (max-width: $mobile) {
flex-direction: column;
padding: 0;
}
}
.product-card__image {
flex: none;
margin: 6px 48px 52px 0;
width: 330px;
height: 190px;
background-image: linear-gradient(139.56deg, #F3F3F3 29.84%, #D1D1D1 102.3%);
border-radius: 10px;
overflow: hidden;
@media (max-width: $tablet) {
margin-right: 20px;
}
@media (max-width: $mobile) {
position: relative;
margin: 0 0 23px;
padding-top: 58%;
width: 100%;
height: 0;
border-radius: 6px;
overflow: hidden;
}
}
.product-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
@media (max-width: $mobile) {
position: absolute;
top: 0;
left: 0;
}
}
.product-card__list {
max-width: calc(100% - 350px);
@media (max-width: $mobile) {
box-sizing: border-box;
padding: 0 10px;
max-width: 100%;
}
}
.product-card__list h2 {
@include lesserHeadline;
margin: 0 0 17px;
@media (max-width: $mobile) {
margin-bottom: 3px;
}
}
.product-card__list ul {
@include list-reset;
@include subtitle;
margin-bottom: 50px;
font-weight: 500;
@media (max-width: $mobile) {
margin-bottom: 27px;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.product-card__list li {
position: relative;
margin-bottom: 5px;
padding-left: 21px;
@media (max-width: $mobile) {
margin-bottom: 3px;
padding-left: 9px;
}
}
.product-card__list li::before {
content: "";
position: absolute;
top: 8px;
left: 4px;
width: 5px;
height: 5px;
background-color: $accent-main;
border-radius: 50%;
@media (max-width: $mobile) {
top: 6px;
left: 1px;
width: 3px;
height: 3px;
}
}
.product-card__text {
@include bodyText;
position: relative;
padding-left: 55px;
@media (max-width: $mobile) {
padding: 8px 10px 0;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.product-card__text svg {
position: absolute;
top: 0;
left: 0;
color: $accent-main;
@media (max-width: $mobile) {
left: 10px;
}
}
.product-card__text p {
margin: 0;
}
.product-card__text b {
display: inline-block;
vertical-align: top;
margin-bottom: 2px;
margin-right: 4px;
@media (max-width: $mobile) {
display: block;
margin-bottom: 14px;
padding-left: 38px;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
color: $text-main;
}
}
......@@ -4,6 +4,7 @@ import {AsyncAuthAjax} from "../../../controller/Ajax";
import {API} from "../../../dict/Consts";
import Card from "../../cmp/card/Card";
import CardSlider from "../../cmp/cardSlider/CardSlider";
import AccountNavigation from "../../block/accountNav/AccountNavigation";
const Account = D.declare('view.page.Account', () => {
let Slider = new CardSlider( {
......@@ -19,13 +20,12 @@ const Account = D.declare('view.page.Account', () => {
[
'loaded.cards',
'navigation.current',
tmpStore.bind( 'loaded' ),
tmpStore.bind( 'afterNavigation.to' ),
tmpStore.bind( 'newCardsLoaded' ),
],
function( loadedCards, page, loaded, newCardsLoaded ){
console.log( loadedCards, page, loaded, newCardsLoaded )
function( loadedCards, to, newCardsLoaded ){
if( newCardsLoaded !== loadedCards ){
if( loadedCards && page === 'Account' && loaded ){
if( loadedCards && to === 'Account' ){
_( cards
.getArray()
.filter( card => card.seen === false )
......@@ -52,6 +52,32 @@ const Account = D.declare('view.page.Account', () => {
<div class="account-page__cards">
<h2 class="account-page__title">Новые карточки для вашей должности:</h2>
{Slider}
<div className="account-page__no-cards">
<div className="account-page__no-cards-info">
<div className="account-page__no-cards-item">
<Card
type={'product'}
disabled
title={'Карточек нет'}
image={'/uploads/images/card-disabled.png'}
/>
</div>
<div className="account-page__no-cards-text">
<p>Вы&nbsp;просмотрели все новые карточки этого месяца.</p>
<p>Так держать!</p>
</div>
</div>
<div className="account-page__no-cards-image">
<picture>
<source srcset="uploads/images/assistant-nocards-mob.svg" media={"(max-width: 767px"}/>
<img src="uploads/images/assistant-nocards.svg" alt=""/>
</picture>
</div>
</div>
<div className="account-page__nav">
<AccountNavigation/>
</div>
</div>
</div>
......
......@@ -94,3 +94,95 @@
@include headline;
margin: 0 0 10px;
}
.account-page__no-cards {
display: flex;
align-items: flex-start;
margin-top: 37px;
max-width: 940px;
@media (max-width: $mobile) {
flex-direction: column;
margin-top: 0;
max-width: 100%;
}
}
.account-page__no-cards-info {
display: flex;
align-items: flex-start;
}
.account-page__no-cards-item {
flex: none;
margin-right: 38px;
margin-bottom: 30px;
@media (max-width: $desktopMin) {
margin-right: 20px;
}
@media (max-width: $mobile) {
display: none;
}
}
.account-page__no-cards-text {
@include mainBodyText;
flex: none;
padding-top: 25px;
width: 255px;
@media (max-width: $desktopMin) {
width: 200px;
}
@media (max-width: $mobile) {
padding-top: 0;
width: auto;
max-width: 100%;
}
}
.account-page__no-cards-text p {
margin: 0 0 23px;
@media (max-width: $mobile) {
margin-bottom: 10px;
}
}
.account-page__no-cards-image {
transform: translateY(-11%);
margin: 0 0 -103px auto;
max-width: calc(100% - 453px);
@media (max-width: $desktopMin) {
max-width: calc(100% - 385px);
}
@media (max-width: $mobile) {
transform: none;
margin: 0 0 14px;
width: 100%;
max-width: 100%;
}
}
.account-page__no-cards-image img {
display: block;
width: 100%;
height: auto;
@media (max-width: $mobile) {
margin: 0 auto;
width: 88%;
}
}
.account-page__nav {
@media (max-width: $mobile) {
margin: 0 -10px;
width: calc(100% + 20px);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment