pixflow-upgrade-planning 0.0.1 → 0.0.2

package/images/pixflow/tick.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.21997 3.51371L2.92639 5.22013L7.47685 0.669678" stroke="white" stroke-width="1.13761"/>
+</svg>

package/images/postpace/postpace-button-hover.svg

@@ -0,0 +1,21 @@
+<svg width="167" height="48" viewBox="0 0 167 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.1479 22.0703C52.0497 21.7622 51.9176 21.4863 51.7518 21.2426C51.5893 20.9954 51.3946 20.7855 51.1678 20.6129C50.941 20.4368 50.682 20.3031 50.3908 20.2117C50.1031 20.1203 49.7865 20.0746 49.4412 20.0746C48.8555 20.0746 48.3274 20.2253 47.8568 20.5266C47.3863 20.8279 47.0139 21.2697 46.7396 21.852C46.4688 22.4309 46.3334 23.1401 46.3334 23.9797C46.3334 24.8227 46.4705 25.5353 46.7447 26.1176C47.0189 26.6999 47.3947 27.1417 47.8721 27.443C48.3494 27.7443 48.8928 27.8949 49.5021 27.8949C50.0675 27.8949 50.5601 27.7798 50.9799 27.5496C51.4031 27.3194 51.7298 26.9944 51.96 26.5746C52.1936 26.1514 52.3104 25.6538 52.3104 25.0816L52.7166 25.1578H49.7408V23.8629H53.8287V25.0461C53.8287 25.9195 53.6425 26.6779 53.2701 27.3211C52.9011 27.9609 52.3899 28.4552 51.7365 28.8039C51.0865 29.1526 50.3417 29.327 49.5021 29.327C48.561 29.327 47.735 29.1103 47.024 28.677C46.3165 28.2436 45.7646 27.6292 45.3686 26.8336C44.9725 26.0346 44.7744 25.0867 44.7744 23.9898C44.7744 23.1604 44.8895 22.4156 45.1197 21.7555C45.3499 21.0953 45.6732 20.535 46.0896 20.0746C46.5094 19.6108 47.002 19.257 47.5674 19.0133C48.1361 18.7661 48.7574 18.6426 49.4311 18.6426C49.993 18.6426 50.5161 18.7255 51.0002 18.8914C51.4877 19.0573 51.921 19.2926 52.3002 19.5973C52.6827 19.902 52.9993 20.2642 53.2498 20.684C53.5003 21.1004 53.6696 21.5625 53.7576 22.0703H52.1479Z" fill="white"/>
+<path d="M59.0604 29.3422C58.292 29.3422 57.6301 29.178 57.0749 28.8496C56.5231 28.5178 56.0965 28.0523 55.7952 27.4531C55.4973 26.8505 55.3483 26.1447 55.3483 25.3355C55.3483 24.5366 55.4973 23.8324 55.7952 23.223C56.0965 22.6137 56.5163 22.138 57.0546 21.7961C57.5963 21.4542 58.2293 21.2832 58.9538 21.2832C59.3939 21.2832 59.8205 21.356 60.2335 21.5016C60.6465 21.6471 61.0172 21.8757 61.3456 22.1871C61.674 22.4986 61.933 22.9031 62.1226 23.4008C62.3121 23.8951 62.4069 24.496 62.4069 25.2035V25.7418H56.2065V24.6043H60.919C60.919 24.2048 60.8378 23.851 60.6753 23.543C60.5128 23.2315 60.2843 22.9861 59.9897 22.8066C59.6986 22.6272 59.3567 22.5375 58.964 22.5375C58.5374 22.5375 58.165 22.6424 57.8468 22.8523C57.5319 23.0589 57.2882 23.3297 57.1155 23.6648C56.9463 23.9966 56.8616 24.3572 56.8616 24.7465V25.6352C56.8616 26.1565 56.953 26.6 57.1358 26.9656C57.322 27.3312 57.581 27.6105 57.9128 27.8035C58.2446 27.9931 58.6322 28.0879 59.0757 28.0879C59.3634 28.0879 59.6258 28.0473 59.8628 27.966C60.0998 27.8814 60.3046 27.7561 60.4772 27.5902C60.6499 27.4243 60.7819 27.2195 60.8733 26.9758L62.3104 27.2348C62.1953 27.6579 61.9888 28.0286 61.6909 28.3469C61.3964 28.6617 61.0257 28.9072 60.5788 29.0832C60.1353 29.2559 59.6292 29.3422 59.0604 29.3422Z" fill="white"/>
+<path d="M67.7326 21.3848V22.6035H63.4721V21.3848H67.7326ZM64.6146 19.516H66.133V26.8945C66.133 27.1891 66.177 27.4108 66.265 27.5598C66.3531 27.7053 66.4665 27.8052 66.6053 27.8594C66.7475 27.9102 66.9015 27.9355 67.0674 27.9355C67.1893 27.9355 67.2959 27.9271 67.3873 27.9102C67.4787 27.8932 67.5498 27.8797 67.6006 27.8695L67.8748 29.1238C67.7868 29.1577 67.6615 29.1915 67.499 29.2254C67.3365 29.2626 67.1334 29.2829 66.8896 29.2863C66.4902 29.2931 66.1178 29.222 65.7725 29.073C65.4271 28.9241 65.1479 28.6939 64.9346 28.3824C64.7213 28.071 64.6146 27.6799 64.6146 27.2094V19.516Z" fill="white"/>
+<path d="M78.9908 21.5168C78.9367 21.0361 78.7132 20.6637 78.3205 20.3996C77.9278 20.1322 77.4335 19.9984 76.8377 19.9984C76.4111 19.9984 76.0421 20.0661 75.7307 20.2016C75.4192 20.3336 75.1771 20.5164 75.0045 20.75C74.8352 20.9802 74.7506 21.2426 74.7506 21.5371C74.7506 21.7842 74.8081 21.9975 74.9232 22.177C75.0417 22.3564 75.1958 22.507 75.3854 22.6289C75.5783 22.7474 75.7848 22.8473 76.0049 22.9285C76.2249 23.0064 76.4365 23.0707 76.6396 23.1215L77.6553 23.3855C77.987 23.4668 78.3273 23.5768 78.676 23.7156C79.0247 23.8544 79.348 24.0372 79.6459 24.2641C79.9438 24.4909 80.1842 24.7719 80.367 25.107C80.5532 25.4422 80.6463 25.8434 80.6463 26.3105C80.6463 26.8996 80.4939 27.4227 80.1893 27.8797C79.888 28.3367 79.4495 28.6973 78.874 28.9613C78.3019 29.2254 77.6096 29.3574 76.7971 29.3574C76.0184 29.3574 75.3447 29.2339 74.776 28.9867C74.2072 28.7396 73.762 28.3892 73.4404 27.9355C73.1188 27.4785 72.9411 26.9368 72.9072 26.3105H74.4814C74.5119 26.6863 74.6338 26.9995 74.8471 27.25C75.0637 27.4971 75.3396 27.6816 75.6748 27.8035C76.0133 27.922 76.3841 27.9812 76.7869 27.9812C77.2304 27.9812 77.6248 27.9118 77.9701 27.773C78.3188 27.6309 78.593 27.4345 78.7928 27.184C78.9925 26.9301 79.0924 26.6339 79.0924 26.2953C79.0924 25.9872 79.0044 25.735 78.8283 25.5387C78.6557 25.3423 78.4204 25.1798 78.1225 25.0512C77.8279 24.9225 77.4945 24.8091 77.1221 24.7109L75.8932 24.3758C75.0603 24.149 74.4002 23.8155 73.9127 23.3754C73.4286 22.9353 73.1865 22.353 73.1865 21.6285C73.1865 21.0293 73.349 20.5062 73.674 20.0594C73.999 19.6125 74.4391 19.2655 74.9943 19.0184C75.5495 18.7678 76.1758 18.6426 76.8732 18.6426C77.5774 18.6426 78.1986 18.7661 78.7369 19.0133C79.2786 19.2604 79.7051 19.6007 80.0166 20.034C80.3281 20.4639 80.4906 20.9582 80.5041 21.5168H78.9908Z" fill="white"/>
+<path d="M86.0405 21.3848V22.6035H81.78V21.3848H86.0405ZM82.9226 19.516H84.4409V26.8945C84.4409 27.1891 84.4849 27.4108 84.5729 27.5598C84.661 27.7053 84.7744 27.8052 84.9132 27.8594C85.0554 27.9102 85.2094 27.9355 85.3753 27.9355C85.4972 27.9355 85.6038 27.9271 85.6952 27.9102C85.7866 27.8932 85.8577 27.8797 85.9085 27.8695L86.1827 29.1238C86.0947 29.1577 85.9694 29.1915 85.8069 29.2254C85.6444 29.2626 85.4413 29.2829 85.1976 29.2863C84.7981 29.2931 84.4257 29.222 84.0804 29.073C83.7351 28.9241 83.4558 28.6939 83.2425 28.3824C83.0292 28.071 82.9226 27.6799 82.9226 27.2094V19.516Z" fill="white"/>
+<path d="M89.99 29.3574C89.4958 29.3574 89.0489 29.266 88.6494 29.0832C88.2499 28.897 87.9334 28.6279 87.6998 28.2758C87.4696 27.9237 87.3545 27.4921 87.3545 26.9809C87.3545 26.5408 87.4391 26.1785 87.6084 25.8941C87.7777 25.6098 88.0062 25.3846 88.2939 25.2188C88.5817 25.0529 88.9033 24.9276 89.2588 24.843C89.6143 24.7583 89.9765 24.694 90.3455 24.65C90.8127 24.5958 91.1919 24.5518 91.483 24.518C91.7742 24.4807 91.9857 24.4215 92.1178 24.3402C92.2498 24.259 92.3158 24.127 92.3158 23.9441V23.9086C92.3158 23.4651 92.1906 23.1215 91.94 22.8777C91.6929 22.634 91.3239 22.5121 90.833 22.5121C90.3218 22.5121 89.9189 22.6255 89.6244 22.8523C89.3333 23.0758 89.1318 23.3246 89.0201 23.5988L87.5932 23.2738C87.7624 22.7999 88.0096 22.4173 88.3346 22.1262C88.663 21.8316 89.0404 21.6184 89.467 21.4863C89.8936 21.3509 90.3421 21.2832 90.8127 21.2832C91.1242 21.2832 91.4542 21.3204 91.8029 21.3949C92.155 21.466 92.4834 21.598 92.7881 21.791C93.0962 21.984 93.3484 22.2599 93.5447 22.6188C93.7411 22.9742 93.8393 23.4363 93.8393 24.0051V29.1848H92.3564V28.1184H92.2955C92.1973 28.3147 92.0501 28.5077 91.8537 28.6973C91.6574 28.8868 91.4051 29.0443 91.0971 29.1695C90.789 29.2948 90.42 29.3574 89.99 29.3574ZM90.3201 28.1387C90.7399 28.1387 91.0988 28.0557 91.3967 27.8898C91.698 27.724 91.9265 27.5073 92.0822 27.2398C92.2413 26.969 92.3209 26.6796 92.3209 26.3715V25.366C92.2667 25.4202 92.1618 25.471 92.0061 25.5184C91.8537 25.5624 91.6794 25.6013 91.483 25.6352C91.2867 25.6656 91.0954 25.6944 90.9092 25.7215C90.723 25.7452 90.5673 25.7655 90.442 25.7824C90.1475 25.8197 89.8783 25.8823 89.6346 25.9703C89.3942 26.0583 89.2012 26.1853 89.0557 26.3512C88.9135 26.5137 88.8424 26.7303 88.8424 27.0012C88.8424 27.377 88.9812 27.6613 89.2588 27.8543C89.5364 28.0439 89.8902 28.1387 90.3201 28.1387Z" fill="white"/>
+<path d="M95.8616 29.1848V21.3848H97.3292V22.6238H97.4104C97.5526 22.204 97.8032 21.874 98.162 21.6336C98.5243 21.3898 98.9339 21.268 99.3909 21.268C99.4857 21.268 99.5974 21.2714 99.7261 21.2781C99.8581 21.2849 99.9614 21.2934 100.036 21.3035V22.7559C99.9749 22.7389 99.8666 22.7203 99.7108 22.7C99.5551 22.6763 99.3994 22.6645 99.2437 22.6645C98.8848 22.6645 98.5649 22.7406 98.2839 22.893C98.0063 23.0419 97.7862 23.2501 97.6237 23.5176C97.4612 23.7816 97.38 24.0829 97.38 24.4215V29.1848H95.8616Z" fill="white"/>
+<path d="M105.452 21.3848V22.6035H101.191V21.3848H105.452ZM102.334 19.516H103.852V26.8945C103.852 27.1891 103.896 27.4108 103.984 27.5598C104.072 27.7053 104.186 27.8052 104.324 27.8594C104.467 27.9102 104.621 27.9355 104.786 27.9355C104.908 27.9355 105.015 27.9271 105.106 27.9102C105.198 27.8932 105.269 27.8797 105.32 27.8695L105.594 29.1238C105.506 29.1577 105.381 29.1915 105.218 29.2254C105.056 29.2626 104.852 29.2829 104.609 29.2863C104.209 29.2931 103.837 29.222 103.492 29.073C103.146 28.9241 102.867 28.6939 102.654 28.3824C102.44 28.071 102.334 27.6799 102.334 27.2094V19.516Z" fill="white"/>
+<path d="M110.409 29.3422C109.641 29.3422 108.979 29.178 108.424 28.8496C107.872 28.5178 107.445 28.0523 107.144 27.4531C106.846 26.8505 106.697 26.1447 106.697 25.3355C106.697 24.5366 106.846 23.8324 107.144 23.223C107.445 22.6137 107.865 22.138 108.403 21.7961C108.945 21.4542 109.578 21.2832 110.303 21.2832C110.743 21.2832 111.169 21.356 111.582 21.5016C111.995 21.6471 112.366 21.8757 112.694 22.1871C113.023 22.4986 113.282 22.9031 113.471 23.4008C113.661 23.8951 113.756 24.496 113.756 25.2035V25.7418H107.555V24.6043H112.268C112.268 24.2048 112.187 23.851 112.024 23.543C111.862 23.2315 111.633 22.9861 111.338 22.8066C111.047 22.6272 110.705 22.5375 110.313 22.5375C109.886 22.5375 109.514 22.6424 109.196 22.8523C108.881 23.0589 108.637 23.3297 108.464 23.6648C108.295 23.9966 108.21 24.3572 108.21 24.7465V25.6352C108.21 26.1565 108.302 26.6 108.485 26.9656C108.671 27.3312 108.93 27.6105 109.262 27.8035C109.593 27.9931 109.981 28.0879 110.424 28.0879C110.712 28.0879 110.975 28.0473 111.212 27.966C111.449 27.8814 111.653 27.7561 111.826 27.5902C111.999 27.4243 112.131 27.2195 112.222 26.9758L113.659 27.2348C113.544 27.6579 113.338 28.0286 113.04 28.3469C112.745 28.6617 112.374 28.9072 111.928 29.0832C111.484 29.2559 110.978 29.3422 110.409 29.3422Z" fill="white"/>
+<path d="M118.36 29.3371C117.731 29.3371 117.169 29.1763 116.674 28.8547C116.183 28.5297 115.797 28.0676 115.517 27.4684C115.239 26.8658 115.1 26.143 115.1 25.3C115.1 24.457 115.241 23.7359 115.522 23.1367C115.806 22.5375 116.195 22.0788 116.69 21.7605C117.184 21.4423 117.744 21.2832 118.37 21.2832C118.855 21.2832 119.244 21.3645 119.538 21.527C119.836 21.6861 120.066 21.8723 120.229 22.0855C120.395 22.2988 120.524 22.4867 120.615 22.6492H120.706V18.7848H122.225V29.1848H120.742V27.9711H120.615C120.524 28.137 120.391 28.3266 120.219 28.5398C120.05 28.7531 119.816 28.9393 119.518 29.0984C119.22 29.2576 118.834 29.3371 118.36 29.3371ZM118.695 28.0422C119.132 28.0422 119.501 27.9271 119.802 27.6969C120.107 27.4633 120.337 27.14 120.493 26.727C120.652 26.3139 120.732 25.8332 120.732 25.2848C120.732 24.7431 120.654 24.2691 120.498 23.8629C120.342 23.4566 120.114 23.1401 119.813 22.9133C119.511 22.6865 119.139 22.573 118.695 22.573C118.238 22.573 117.858 22.6915 117.553 22.9285C117.248 23.1655 117.018 23.4888 116.862 23.8984C116.71 24.3081 116.634 24.7702 116.634 25.2848C116.634 25.8061 116.712 26.275 116.867 26.6914C117.023 27.1078 117.253 27.4379 117.558 27.6816C117.866 27.922 118.245 28.0422 118.695 28.0422Z" fill="white"/>
+<rect x="1" y="1" width="165" height="46" rx="23" stroke="url(#paint0_linear_3714_2189)" stroke-width="2"/>
+<defs>
+<linearGradient id="paint0_linear_3714_2189" x1="2.42114e-08" y1="31.1489" x2="156.257" y2="27.4582" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1A85E"/>
+<stop offset="0.255203" stop-color="#E284BC"/>
+<stop offset="0.588543" stop-color="#AB96D6"/>
+<stop offset="1" stop-color="#2891FF"/>
+</linearGradient>
+</defs>
+</svg>

package/images/postpace/postpace-button.svg

@@ -0,0 +1,21 @@
+<svg width="167" height="48" viewBox="0 0 167 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.1479 22.0703C52.0497 21.7622 51.9176 21.4863 51.7518 21.2426C51.5893 20.9954 51.3946 20.7855 51.1678 20.6129C50.941 20.4368 50.682 20.3031 50.3908 20.2117C50.1031 20.1203 49.7865 20.0746 49.4412 20.0746C48.8555 20.0746 48.3274 20.2253 47.8568 20.5266C47.3863 20.8279 47.0139 21.2697 46.7396 21.852C46.4688 22.4309 46.3334 23.1401 46.3334 23.9797C46.3334 24.8227 46.4705 25.5353 46.7447 26.1176C47.0189 26.6999 47.3947 27.1417 47.8721 27.443C48.3494 27.7443 48.8928 27.8949 49.5021 27.8949C50.0675 27.8949 50.5601 27.7798 50.9799 27.5496C51.4031 27.3194 51.7298 26.9944 51.96 26.5746C52.1936 26.1514 52.3104 25.6538 52.3104 25.0816L52.7166 25.1578H49.7408V23.8629H53.8287V25.0461C53.8287 25.9195 53.6425 26.6779 53.2701 27.3211C52.9011 27.9609 52.3899 28.4552 51.7365 28.8039C51.0865 29.1526 50.3417 29.327 49.5021 29.327C48.561 29.327 47.735 29.1103 47.024 28.677C46.3165 28.2436 45.7646 27.6292 45.3686 26.8336C44.9725 26.0346 44.7744 25.0867 44.7744 23.9898C44.7744 23.1604 44.8895 22.4156 45.1197 21.7555C45.3499 21.0953 45.6732 20.535 46.0896 20.0746C46.5094 19.6108 47.002 19.257 47.5674 19.0133C48.1361 18.7661 48.7574 18.6426 49.4311 18.6426C49.993 18.6426 50.5161 18.7255 51.0002 18.8914C51.4877 19.0573 51.921 19.2926 52.3002 19.5973C52.6827 19.902 52.9993 20.2642 53.2498 20.684C53.5003 21.1004 53.6696 21.5625 53.7576 22.0703H52.1479Z" fill="white"/>
+<path d="M59.0604 29.3422C58.292 29.3422 57.6301 29.178 57.0749 28.8496C56.5231 28.5178 56.0965 28.0523 55.7952 27.4531C55.4973 26.8505 55.3483 26.1447 55.3483 25.3355C55.3483 24.5366 55.4973 23.8324 55.7952 23.223C56.0965 22.6137 56.5163 22.138 57.0546 21.7961C57.5963 21.4542 58.2293 21.2832 58.9538 21.2832C59.3939 21.2832 59.8205 21.356 60.2335 21.5016C60.6465 21.6471 61.0172 21.8757 61.3456 22.1871C61.674 22.4986 61.933 22.9031 62.1226 23.4008C62.3121 23.8951 62.4069 24.496 62.4069 25.2035V25.7418H56.2065V24.6043H60.919C60.919 24.2048 60.8378 23.851 60.6753 23.543C60.5128 23.2315 60.2843 22.9861 59.9897 22.8066C59.6986 22.6272 59.3567 22.5375 58.964 22.5375C58.5374 22.5375 58.165 22.6424 57.8468 22.8523C57.5319 23.0589 57.2882 23.3297 57.1155 23.6648C56.9463 23.9966 56.8616 24.3572 56.8616 24.7465V25.6352C56.8616 26.1565 56.953 26.6 57.1358 26.9656C57.322 27.3312 57.581 27.6105 57.9128 27.8035C58.2446 27.9931 58.6322 28.0879 59.0757 28.0879C59.3634 28.0879 59.6258 28.0473 59.8628 27.966C60.0998 27.8814 60.3046 27.7561 60.4772 27.5902C60.6499 27.4243 60.7819 27.2195 60.8733 26.9758L62.3104 27.2348C62.1953 27.6579 61.9888 28.0286 61.6909 28.3469C61.3964 28.6617 61.0257 28.9072 60.5788 29.0832C60.1353 29.2559 59.6292 29.3422 59.0604 29.3422Z" fill="white"/>
+<path d="M67.7326 21.3848V22.6035H63.4721V21.3848H67.7326ZM64.6146 19.516H66.133V26.8945C66.133 27.1891 66.177 27.4108 66.265 27.5598C66.3531 27.7053 66.4665 27.8052 66.6053 27.8594C66.7475 27.9102 66.9015 27.9355 67.0674 27.9355C67.1893 27.9355 67.2959 27.9271 67.3873 27.9102C67.4787 27.8932 67.5498 27.8797 67.6006 27.8695L67.8748 29.1238C67.7868 29.1577 67.6615 29.1915 67.499 29.2254C67.3365 29.2626 67.1334 29.2829 66.8896 29.2863C66.4902 29.2931 66.1178 29.222 65.7725 29.073C65.4271 28.9241 65.1479 28.6939 64.9346 28.3824C64.7213 28.071 64.6146 27.6799 64.6146 27.2094V19.516Z" fill="white"/>
+<path d="M78.9908 21.5168C78.9367 21.0361 78.7132 20.6637 78.3205 20.3996C77.9278 20.1322 77.4335 19.9984 76.8377 19.9984C76.4111 19.9984 76.0421 20.0661 75.7307 20.2016C75.4192 20.3336 75.1771 20.5164 75.0045 20.75C74.8352 20.9802 74.7506 21.2426 74.7506 21.5371C74.7506 21.7842 74.8081 21.9975 74.9232 22.177C75.0417 22.3564 75.1958 22.507 75.3854 22.6289C75.5783 22.7474 75.7848 22.8473 76.0049 22.9285C76.2249 23.0064 76.4365 23.0707 76.6396 23.1215L77.6553 23.3855C77.987 23.4668 78.3273 23.5768 78.676 23.7156C79.0247 23.8544 79.348 24.0372 79.6459 24.2641C79.9438 24.4909 80.1842 24.7719 80.367 25.107C80.5532 25.4422 80.6463 25.8434 80.6463 26.3105C80.6463 26.8996 80.4939 27.4227 80.1893 27.8797C79.888 28.3367 79.4495 28.6973 78.874 28.9613C78.3019 29.2254 77.6096 29.3574 76.7971 29.3574C76.0184 29.3574 75.3447 29.2339 74.776 28.9867C74.2072 28.7396 73.762 28.3892 73.4404 27.9355C73.1188 27.4785 72.9411 26.9368 72.9072 26.3105H74.4814C74.5119 26.6863 74.6338 26.9995 74.8471 27.25C75.0637 27.4971 75.3396 27.6816 75.6748 27.8035C76.0133 27.922 76.3841 27.9812 76.7869 27.9812C77.2304 27.9812 77.6248 27.9118 77.9701 27.773C78.3188 27.6309 78.593 27.4345 78.7928 27.184C78.9925 26.9301 79.0924 26.6339 79.0924 26.2953C79.0924 25.9872 79.0044 25.735 78.8283 25.5387C78.6557 25.3423 78.4204 25.1798 78.1225 25.0512C77.8279 24.9225 77.4945 24.8091 77.1221 24.7109L75.8932 24.3758C75.0603 24.149 74.4002 23.8155 73.9127 23.3754C73.4286 22.9353 73.1865 22.353 73.1865 21.6285C73.1865 21.0293 73.349 20.5062 73.674 20.0594C73.999 19.6125 74.4391 19.2655 74.9943 19.0184C75.5495 18.7678 76.1758 18.6426 76.8732 18.6426C77.5774 18.6426 78.1986 18.7661 78.7369 19.0133C79.2786 19.2604 79.7051 19.6007 80.0166 20.034C80.3281 20.4639 80.4906 20.9582 80.5041 21.5168H78.9908Z" fill="white"/>
+<path d="M86.0405 21.3848V22.6035H81.78V21.3848H86.0405ZM82.9226 19.516H84.4409V26.8945C84.4409 27.1891 84.4849 27.4108 84.5729 27.5598C84.661 27.7053 84.7744 27.8052 84.9132 27.8594C85.0554 27.9102 85.2094 27.9355 85.3753 27.9355C85.4972 27.9355 85.6038 27.9271 85.6952 27.9102C85.7866 27.8932 85.8577 27.8797 85.9085 27.8695L86.1827 29.1238C86.0947 29.1577 85.9694 29.1915 85.8069 29.2254C85.6444 29.2626 85.4413 29.2829 85.1976 29.2863C84.7981 29.2931 84.4257 29.222 84.0804 29.073C83.7351 28.9241 83.4558 28.6939 83.2425 28.3824C83.0292 28.071 82.9226 27.6799 82.9226 27.2094V19.516Z" fill="white"/>
+<path d="M89.99 29.3574C89.4958 29.3574 89.0489 29.266 88.6494 29.0832C88.2499 28.897 87.9334 28.6279 87.6998 28.2758C87.4696 27.9237 87.3545 27.4921 87.3545 26.9809C87.3545 26.5408 87.4391 26.1785 87.6084 25.8941C87.7777 25.6098 88.0062 25.3846 88.2939 25.2188C88.5817 25.0529 88.9033 24.9276 89.2588 24.843C89.6143 24.7583 89.9765 24.694 90.3455 24.65C90.8127 24.5958 91.1919 24.5518 91.483 24.518C91.7742 24.4807 91.9857 24.4215 92.1178 24.3402C92.2498 24.259 92.3158 24.127 92.3158 23.9441V23.9086C92.3158 23.4651 92.1906 23.1215 91.94 22.8777C91.6929 22.634 91.3239 22.5121 90.833 22.5121C90.3218 22.5121 89.9189 22.6255 89.6244 22.8523C89.3333 23.0758 89.1318 23.3246 89.0201 23.5988L87.5932 23.2738C87.7624 22.7999 88.0096 22.4173 88.3346 22.1262C88.663 21.8316 89.0404 21.6184 89.467 21.4863C89.8936 21.3509 90.3421 21.2832 90.8127 21.2832C91.1242 21.2832 91.4542 21.3204 91.8029 21.3949C92.155 21.466 92.4834 21.598 92.7881 21.791C93.0962 21.984 93.3484 22.2599 93.5447 22.6188C93.7411 22.9742 93.8393 23.4363 93.8393 24.0051V29.1848H92.3564V28.1184H92.2955C92.1973 28.3147 92.0501 28.5077 91.8537 28.6973C91.6574 28.8868 91.4051 29.0443 91.0971 29.1695C90.789 29.2948 90.42 29.3574 89.99 29.3574ZM90.3201 28.1387C90.7399 28.1387 91.0988 28.0557 91.3967 27.8898C91.698 27.724 91.9265 27.5073 92.0822 27.2398C92.2413 26.969 92.3209 26.6796 92.3209 26.3715V25.366C92.2667 25.4202 92.1618 25.471 92.0061 25.5184C91.8537 25.5624 91.6794 25.6013 91.483 25.6352C91.2867 25.6656 91.0954 25.6944 90.9092 25.7215C90.723 25.7452 90.5673 25.7655 90.442 25.7824C90.1475 25.8197 89.8783 25.8823 89.6346 25.9703C89.3942 26.0583 89.2012 26.1853 89.0557 26.3512C88.9135 26.5137 88.8424 26.7303 88.8424 27.0012C88.8424 27.377 88.9812 27.6613 89.2588 27.8543C89.5364 28.0439 89.8902 28.1387 90.3201 28.1387Z" fill="white"/>
+<path d="M95.8616 29.1848V21.3848H97.3292V22.6238H97.4104C97.5526 22.204 97.8032 21.874 98.162 21.6336C98.5243 21.3898 98.9339 21.268 99.3909 21.268C99.4857 21.268 99.5974 21.2714 99.7261 21.2781C99.8581 21.2849 99.9614 21.2934 100.036 21.3035V22.7559C99.9749 22.7389 99.8666 22.7203 99.7108 22.7C99.5551 22.6763 99.3994 22.6645 99.2437 22.6645C98.8848 22.6645 98.5649 22.7406 98.2839 22.893C98.0063 23.0419 97.7862 23.2501 97.6237 23.5176C97.4612 23.7816 97.38 24.0829 97.38 24.4215V29.1848H95.8616Z" fill="white"/>
+<path d="M105.452 21.3848V22.6035H101.191V21.3848H105.452ZM102.334 19.516H103.852V26.8945C103.852 27.1891 103.896 27.4108 103.984 27.5598C104.072 27.7053 104.186 27.8052 104.324 27.8594C104.467 27.9102 104.621 27.9355 104.786 27.9355C104.908 27.9355 105.015 27.9271 105.106 27.9102C105.198 27.8932 105.269 27.8797 105.32 27.8695L105.594 29.1238C105.506 29.1577 105.381 29.1915 105.218 29.2254C105.056 29.2626 104.852 29.2829 104.609 29.2863C104.209 29.2931 103.837 29.222 103.492 29.073C103.146 28.9241 102.867 28.6939 102.654 28.3824C102.44 28.071 102.334 27.6799 102.334 27.2094V19.516Z" fill="white"/>
+<path d="M110.409 29.3422C109.641 29.3422 108.979 29.178 108.424 28.8496C107.872 28.5178 107.445 28.0523 107.144 27.4531C106.846 26.8505 106.697 26.1447 106.697 25.3355C106.697 24.5366 106.846 23.8324 107.144 23.223C107.445 22.6137 107.865 22.138 108.403 21.7961C108.945 21.4542 109.578 21.2832 110.303 21.2832C110.743 21.2832 111.169 21.356 111.582 21.5016C111.995 21.6471 112.366 21.8757 112.694 22.1871C113.023 22.4986 113.282 22.9031 113.471 23.4008C113.661 23.8951 113.756 24.496 113.756 25.2035V25.7418H107.555V24.6043H112.268C112.268 24.2048 112.187 23.851 112.024 23.543C111.862 23.2315 111.633 22.9861 111.338 22.8066C111.047 22.6272 110.705 22.5375 110.313 22.5375C109.886 22.5375 109.514 22.6424 109.196 22.8523C108.881 23.0589 108.637 23.3297 108.464 23.6648C108.295 23.9966 108.21 24.3572 108.21 24.7465V25.6352C108.21 26.1565 108.302 26.6 108.485 26.9656C108.671 27.3312 108.93 27.6105 109.262 27.8035C109.593 27.9931 109.981 28.0879 110.424 28.0879C110.712 28.0879 110.975 28.0473 111.212 27.966C111.449 27.8814 111.653 27.7561 111.826 27.5902C111.999 27.4243 112.131 27.2195 112.222 26.9758L113.659 27.2348C113.544 27.6579 113.338 28.0286 113.04 28.3469C112.745 28.6617 112.374 28.9072 111.928 29.0832C111.484 29.2559 110.978 29.3422 110.409 29.3422Z" fill="white"/>
+<path d="M118.36 29.3371C117.731 29.3371 117.169 29.1763 116.674 28.8547C116.183 28.5297 115.797 28.0676 115.517 27.4684C115.239 26.8658 115.1 26.143 115.1 25.3C115.1 24.457 115.241 23.7359 115.522 23.1367C115.806 22.5375 116.195 22.0788 116.69 21.7605C117.184 21.4423 117.744 21.2832 118.37 21.2832C118.855 21.2832 119.244 21.3645 119.538 21.527C119.836 21.6861 120.066 21.8723 120.229 22.0855C120.395 22.2988 120.524 22.4867 120.615 22.6492H120.706V18.7848H122.225V29.1848H120.742V27.9711H120.615C120.524 28.137 120.391 28.3266 120.219 28.5398C120.05 28.7531 119.816 28.9393 119.518 29.0984C119.22 29.2576 118.834 29.3371 118.36 29.3371ZM118.695 28.0422C119.132 28.0422 119.501 27.9271 119.802 27.6969C120.107 27.4633 120.337 27.14 120.493 26.727C120.652 26.3139 120.732 25.8332 120.732 25.2848C120.732 24.7431 120.654 24.2691 120.498 23.8629C120.342 23.4566 120.114 23.1401 119.813 22.9133C119.511 22.6865 119.139 22.573 118.695 22.573C118.238 22.573 117.858 22.6915 117.553 22.9285C117.248 23.1655 117.018 23.4888 116.862 23.8984C116.71 24.3081 116.634 24.7702 116.634 25.2848C116.634 25.8061 116.712 26.275 116.867 26.6914C117.023 27.1078 117.253 27.4379 117.558 27.6816C117.866 27.922 118.245 28.0422 118.695 28.0422Z" fill="white"/>
+<rect x="0.5" y="0.5" width="166" height="47" rx="23.5" stroke="url(#paint0_linear_3699_2122)"/>
+<defs>
+<linearGradient id="paint0_linear_3699_2122" x1="2.42114e-08" y1="31.1489" x2="156.257" y2="27.4582" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1A85E"/>
+<stop offset="0.255203" stop-color="#E284BC"/>
+<stop offset="0.588543" stop-color="#AB96D6"/>
+<stop offset="1" stop-color="#2891FF"/>
+</linearGradient>
+</defs>
+</svg>

package/index.js

@@ -1,163 +1,40 @@
-const price_details = require("pixflow-price-details");
-const PurchaseCodeActivate = require("pixflow-purchase-code-activate");
-var item_id = 13871;
+const parse = new DOMParser();
+const fs = require("fs");
+const path = require("path");
+
+class PixflowUpgradePlanning extends HTMLElement {
 
-class UpgradePlanning extends HTMLElement {
     constructor(){
         super();
+        self = this;
+        this.port = localStorage.getItem("port");
+    }
 
-        document.querySelector("#upgrade-plan-pixflow div.activate-code").addEventListener("click", function(){
-            pnlUpgradePlan.classList.remove("active");
-            block.style.display = "flex";
-            setTimeout(() => {
-                pcode.style.display = "flex";
-                setTimeout(() => {
-                    pnlUpgradePlan.style.display = "none";
-                    pcode.classList.add("active");
-                }, 310);
-            }, 310);
-        })
-        
-        document.getElementById("back-upgrade-plan").addEventListener("click", function(){
-            pcode.classList.remove("active");
-            setTimeout(() => {
-                pcode.style.display = "none";
-                pnlUpgradePlan.classList.add("active");
-            }, 300);
-        })
-
-        /* upgrade plan block pixflow */
-        document.querySelectorAll("#upgrade-plan-pixflow > div.plan > div > div").forEach(function(element){
-            element.addEventListener("click", function(){
-                document.querySelector("#upgrade-plan-pixflow > div.plan > div > div.active").classList.remove("active");
-                this.classList.add("active");
-            })
-        })
-
-        /* upgrade plan block postpace */
-        document.querySelectorAll("#upgrade-plan-postpace > div.plan > div > div").forEach(function(element){
-            element.addEventListener("click", function(){
-                document.querySelector("#upgrade-plan-postpace > div.plan > div > div.active").classList.remove("active");
-                this.classList.add("active");
-            })
-        })
-
-        /* go premium */
-        document.querySelector("#upgrade-plan-pixflow > button").addEventListener("click", function(){
-            var license = document.querySelector("#upgrade-plan-pixflow > div.plan > div > div.active").parentNode.className.split(" ")[0];
-            var link = "https://pixflow.net/product/px-crt/?active-license=free";
-            if(license != "free")
-                link = `https://pixflow.net/aff/crt-plugin-${license}/`;
-            window.cep.util.openURLInDefaultBrowser(link);
-        })
-
-        document.querySelector("#upgrade-plan-postpace > div.container-button > div").addEventListener("click", async function(){
-            var license = document.querySelector("#upgrade-plan-postpace > div.plan > div > div.active").parentNode.className.split(" ")[0];
-            window.cep.util.openURLInDefaultBrowser(`${await pixflow_auth.get_postpace_address()}/?showUpgradeModal=true&UpgradeModal=${license}`);
-        })
-
-        activate.addEventListener("click", async function(){
-            var $text = document.querySelector("div.pcode input[type=text]");
-            var $activate = document.querySelector("#activate");
-            var code = $text.value;
-            var oldcolor = $activate.style.backgroundColor;
-            var msg = document.querySelector("div.pcode p.message");
-            isActivate(false, $activate, oldcolor, $text);
-        
-            const purchase_code_activate = new PurchaseCodeActivate(code, "CRT", item_id);
-            const json_check_user_purchase_code = await purchase_code_activate.check_user_purchase_code();
-        
-            if(json_check_user_purchase_code.message == "true"){
-                const json_check_devices = await purchase_code_activate.check_devices();
-                try {
-                    if(!json_check_devices.error){
-                        localStorage.setItem("active", json_check_user_purchase_code.license_type);
-                        txtUpgradePlan.innerHTML = localStorage.getItem("active");
-                        msg.innerHTML = "Activation was successful.";
-                        setTimeout(function(){
-                            isActivate(true, $activate, oldcolor, $text);
-                            window.location.href = "./node_modules/pixflow-auth-hello-theme/index.html";
-                        }, 1500);
-                    } else {
-                        msg.innerHTML = json_check_devices.msg;
-                        isActivate(true, $activate, oldcolor, $text);
-                    }
-                    localStorage.setItem("unlock", json_check_devices.error >= 0 ? 1 : 0);
-                    unlock();    
-                } catch(e){
-                    msg.innerHTML = "Invalid purchase code!";
-                    isActivate(true, $activate, oldcolor, $text);            
-                }
-            } else {
-                msg.innerHTML = "Invalid purchase code!";
-                isActivate(true, $activate, oldcolor, $text);
-            }
-        })
-
-        document.querySelectorAll("img.postpace-close, img.pixflow-close, img.activate-close").forEach(function(element){
-            element.addEventListener("click", function(){
-                var $this = this;
-                $this.parentNode.classList.remove("active");
-                setTimeout(() => {
-                    $this.parentNode.style.display = "none";
-                    block.classList.remove("active");
-                    block.style.display = "none";
-                }, 300);
-            })
-        })
-
-        price_details_async();
-
-        
+    connectedCallback(){
+        const style = document.createElement("style");
+        style.textContent = fs.readFileSync(path.join(__dirname, "styles", `${this.port}.css`));
+        this.appendChild(style);
 
+        this.template = parse.parseFromString(fs.readFileSync(path.join(__dirname, "template.html")).toString("utf8"), "text/html");
+        this.appendChild(this.template.querySelector(`div.${this.port}`));
 
+        this.querySelector(`img.close`).addEventListener("click", this.close_click);
     }
 
-    upgradePlanClick(){
-        block.style.display = "flex";
-        var panel = port == "pixflow" ? pnlUpgradePlan : pnlUpgradePlanPostpace;
-        panel.style.display = "flex";
-        setTimeout(function(){
-            block.classList.add("active");
-            panel.classList.add("active");
-        }, 50);
-    };
-
-    activeNextLicense(){
-        var license;
-        document.querySelectorAll("#upgrade-plan-pixflow > div.plan > div").forEach(e => e.classList.remove("active"));
-        switch(localStorage.getItem("active")){
-            case "free":
-                license = "single";
-                break;
-            case "single":
-                license = "team";
-                break;
-        }
-        try { document.querySelector(`#upgrade-plan-pixflow div.plan > div.${license} > div`).classList.add("active"); } catch(e) {}
+    open(){
+        this.querySelector(`div.${this.port}`).classList.add("active");
     }
 
-    async price_details_async(){
-        let content_price_details = await price_details(item_id);
-        document.querySelectorAll("img.loading").forEach(function(element){
-            element.remove();
-        })
-        document.querySelector("#upgrade-plan-pixflow > div.plan > div.single > div > div:nth-child(2)").innerHTML = content_price_details.single;
-        document.querySelector("#upgrade-plan-pixflow > div.plan > div.team > div > div:nth-child(2)").innerHTML = content_price_details.team;
-    }    
+    close(){
+        this.querySelector(`div.${this.port}`).classList.remove("active");
+    }
 
-    function isActivate(flag, $activate, oldcolor, $text){
-        $activate.style.backgroundColor = !flag ? "#dbdbdb" : oldcolor;
-        $activate.style.cursor = !flag ? "default" : "pointer";
-        $activate.disabled = !flag;
-        $text.disabled = !flag;
+    close_click(e){
+        e.target.parentNode.parentNode.close();
     }
-    
-    
-    
 
 }
 
-customElements.define("upgrade-planning", UpgradePlanning);
+customElements.define("pixflow-upgrade-planning", PixflowUpgradePlanning);
 
-module.exports = UpgradePlanning;
+module.exports = PixflowUpgradePlanning;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixflow-upgrade-planning",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {

package/styles/pixflow.css

@@ -0,0 +1,247 @@
+@keyframes rotate-loading {
+    from {
+        transform: rotate(0);
+    }
+    to {
+        transform: rotate(-360deg);
+    }
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div, div.purchase-code button {
+    cursor: pointer;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) > img {
+    animation-name: rotate-loading;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) > img {
+    margin-top: 10px;
+}
+
+pixflow-upgrade-planning > div.pixflow {
+    position: fixed;
+    display: none;
+    width: calc(100% - 40px);
+    height: calc(100% - 25px);
+    border-radius: 17px 17px 0px 0px;
+    background-color: #0C0C0C;
+    top: calc(100vh + 10px);
+    left: 20px;
+    z-index: 3;
+    transition: top 300ms ease-in;
+    font-family: Inter;
+    font-size: 15px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(180deg, #005DFF -68.79%, #2273FF -10.25%, #0C0C0C 39.26%, rgba(221, 0, 27, 0) 39.27%, #0C0C0C 39.28%);
+    min-width: 440px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div:nth-child(1) {
+    margin-top: -9px;
+    background-color: #142251b3;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    height: 10px;
+    width: calc(100% - 50px);
+    left: calc((100% - 50px) / 2);
+}
+
+pixflow-upgrade-planning > div.pixflow > img:nth-child(3) {
+    margin: 100px 0 50px 0;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) > img {
+    width: 16px;
+    filter: invert(1);
+}
+
+pixflow-upgrade-planning > div.pixflow.active, pixflow-upgrade-planning > div.pixflow.active {
+    display: flex!important;
+    top: 25px;
+}
+
+pixflow-upgrade-planning > div.pixflow > p {
+    opacity: 0.8;
+    letter-spacing: normal;
+    text-align: center;
+    padding: 0 40px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+pixflow-upgrade-planning > div.pixflow > div > div > div:nth-child(2) {
+    font-weight: bold;
+    font-size: 13.5px;
+    margin-top: 10px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div > div > div:nth-child(3) {
+    font-size: 11.6px;
+    margin-top: 5px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div > div > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 12.5138px;
+    box-shadow: 0 10.2px 12.5px 0 rgba(0, 0, 0, 0.12);
+    border: solid 1.1px var(--path-4792-custom-style);
+    background-color: #1D1D1D;
+    width: 89.9px;
+    height: 89.9px;
+    transition: box-shadow 200ms;
+    margin: 5px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > div.active {
+    box-shadow: 0 0;
+    border: 2px solid #3C49B3;
+}
+
+div.activate-code-block {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: calc(100vh - 100px);
+    height: 100px;
+    width: 100%;
+    align-items: center;
+    background: linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,1) 34%, rgba(12,12,12,1) 100%);
+}
+
+pixflow-upgrade-planning > div.pixflow button {
+    width: 147px;
+    height: 34px;
+    border-radius: 17px;
+    background-color: #005dff;
+    color: #fff;
+    transition: filter 200ms;
+}
+
+pixflow-upgrade-planning > div.pixflow > div:nth-child(5) {
+    font-family: Inter;
+    font-size: 13px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    color: #005dff;
+    margin-top: 20px;
+    transition: filter 200ms;
+}
+
+pixflow-upgrade-planning > div.pixflow > button:hover {
+    background-color: #014CCE;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > div.active > div:nth-child(3) {
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    background-image: url("./node_modules/pixflow-upgrade-planning/images/pixflow/tick.svg");
+    background-color: #005dff;
+    border-radius: 6px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    margin: 5px 0 0 65px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) > del {
+    color: gray;
+    font-size: 10px;
+    margin-left: 5px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > div > img {
+    height: 57px
+}
+
+pixflow-upgrade-planning > div.pixflow > p:nth-child(4) {
+    font-size: 17px;
+    line-height: 22px;
+    color: #fff;
+    font-style: normal;
+    width: 363px;
+}
+
+
+pixflow-upgrade-planning > div.pixflow > p:nth-child(5) > img {
+    width: 10px;
+}
+
+pixflow-upgrade-planning > div.pixflow > p:nth-child(5) {
+    font-size: 11px;
+    color: white;
+}
+
+pixflow-upgrade-planning > div.pixflow div.activate-code {
+    color: #7C879A;
+    font-size: 13px;
+    margin: 15px 0;
+}
+
+a, .btn, button, ul > li > div, ul > li > img, ul > li > div.arrow.right, pixflow-upgrade-planning > div.pixflow > div.plan > div, #activate, #dashboard > div, #dashboard img, .apply, .unlock, #customize > div.params > div.header > div, pixflow-upgrade-planning > div.pixflow > div.activate-code, .view-details, body > div.right-side > div.header > div.views > img.view-small-icon {
+    cursor: pointer;
+}
+
+pixflow-upgrade-planning > div.pixflow div.activate-code {
+    color: #7C879A;
+    font-size: 13px;
+    cursor: pointer;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.plan > div > p, pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) {
+    color: #fff;
+    font-size: 12px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.container-button {
+    top: calc(100vh - 125px);
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100px;
+    align-items: center;
+    background: linear-gradient(0deg, #0C0C0C 0%, #0C0C0C 77%, #ffffff00 100%);
+}
+
+pixflow-upgrade-planning > div.pixflow > div.container-button > div.button {
+    cursor: pointer;
+    background-image: url(./images/postpace-button.svg);
+    width: 167px;
+    height: 48px;
+}
+
+pixflow-upgrade-planning > div.pixflow > div.container-button > div.button:hover {
+    background-image: url(./images/postpace-button-hover.svg);    
+}
+
+pixflow-upgrade-planning > div.pixflow > img:nth-child(2) {
+    margin-top: 12px;
+}
+
+div.close {
+    background-image: url(./images/drawer.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 73px;
+    height: 27px;
+}

package/styles/postpace.css

@@ -0,0 +1,227 @@
+#upgrade-plan-postpace > div.plan > div > div > div:nth-child(2) > img {
+    animation-name: rotate-loading;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+#upgrade-plan-postpace > div.plan > div > div > div:nth-child(2) > img {
+    margin-top: 10px;
+}
+
+#upgrade-plan-postpace {
+    position: fixed;
+    display: none;
+    width: calc(100% - 40px);
+    height: calc(100% - 25px);
+    border-radius: 17px 17px 0px 0px;
+    background-color: #0C0C0C;
+    top: calc(100vh + 10px);
+    left: 20px;
+    z-index: 3;
+    transition: top 300ms ease-in;
+    font-family: Inter;
+    font-size: 15px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    flex-direction: column;
+    align-items: center;
+    background-image: url(./images/postpace-bg.jpg);
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: cover;
+    min-width: 440px;
+}
+
+#upgrade-plan-postpace > div:nth-child(1), div.pcode > div:nth-child(1) {
+    margin-top: -9px;
+    background-color: #142251b3;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    height: 10px;
+    width: calc(100% - 50px);
+    left: calc((100% - 50px) / 2);
+}
+
+#upgrade-plan-postpace > img:nth-child(3) {
+    margin: 100px 0 50px 0;
+}
+
+#upgrade-plan-postpace > div.plan > div > div > div:nth-child(2) > img {
+    width: 16px;
+    filter: invert(1);
+}
+
+#upgrade-plan-postpace.active, #upgrade-plan-postpace.active {
+    display: flex!important;
+    top: 25px;
+}
+
+#upgrade-plan-postpace > p {
+    opacity: 0.8;
+    letter-spacing: normal;
+    text-align: center;
+    padding: 0 40px;
+}
+
+#upgrade-plan-postpace > div.plan {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+#upgrade-plan-postpace > div > div > div:nth-child(2) {
+    font-weight: bold;
+    font-size: 13.5px;
+    margin-top: 10px;
+}
+
+#upgrade-plan-postpace > div > div > div:nth-child(3) {
+    font-size: 11.6px;
+    margin-top: 5px;
+}
+
+#upgrade-plan-postpace > div > div > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 12.5138px;
+    box-shadow: 0 10.2px 12.5px 0 rgba(0, 0, 0, 0.12);
+    border: solid 1.1px var(--path-4792-custom-style);
+    background-color: #1D1D1D;
+    width: 89.9px;
+    height: 89.9px;
+    transition: box-shadow 200ms;
+    margin: 5px;
+}
+
+#upgrade-plan-postpace > div.plan > div > div.active {
+    box-shadow: 0 0;
+    border: 2px solid #3C49B3;
+}
+
+#upgrade-plan-postpace > button {
+    width: 147px;
+    height: 34px;
+    margin-top: 38px;
+    border-radius: 17px;
+    background-color: #005dff;
+    color: #fff;
+    transition: filter 200ms;
+}
+
+#upgrade-plan-postpace > div:nth-child(5) {
+    font-family: Inter;
+    font-size: 13px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    color: #005dff;
+    margin-top: 20px;
+    transition: filter 200ms;
+}
+
+#upgrade-plan-postpace > button:hover {
+    background-color: #014CCE;
+}
+
+#upgrade-plan-postpace > div.plan > div > div.active > div:nth-child(3) {
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    background-image: url("./images/tick.svg");
+    background-color: #005dff;
+    border-radius: 6px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    margin: 5px 0 0 65px;
+}
+
+#upgrade-plan-postpace > div.plan > div > div > div:nth-child(2) > del {
+    color: gray;
+    font-size: 10px;
+    margin-left: 5px;
+}
+
+#upgrade-plan-postpace > div.plan > div > div > img {
+    height: 57px
+}
+
+#upgrade-plan-postpace > p:nth-child(4) {
+    font-size: 17px;
+    line-height: 22px;
+    color: #fff;
+    font-style: normal;
+    width: 363px;
+}
+
+
+#upgrade-plan-postpace > p:nth-child(5) > img {
+    width: 10px;
+}
+
+#upgrade-plan-postpace > p:nth-child(5) {
+    font-size: 11px;
+    color: white;
+}
+
+#upgrade-plan-postpace > div.activate-code {
+    color: #7C879A;
+    font-size: 13px;
+    margin: 15px 0;
+}
+
+a, .btn, button, ul > li > div, ul > li > img, ul > li > div.arrow.right, #upgrade-plan-postpace > div.plan > div, #activate, #dashboard > div, #dashboard img, .apply, .unlock, #customize > div.params > div.header > div, #upgrade-plan-postpace > div.activate-code, .view-details, body > div.right-side > div.header > div.views > img.view-small-icon {
+    cursor: pointer;
+}
+
+#upgrade-plan-postpace > div.activate-code {
+    color: #7C879A;
+    font-size: 13px;
+    margin: 15px 0;
+}
+
+#upgrade-plan-postpace > div.plan > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#upgrade-plan-postpace > div.plan > div > p, #upgrade-plan-postpace > div.plan > div > div > div:nth-child(2) {
+    color: #fff;
+    font-size: 12px;
+}
+
+#upgrade-plan-postpace > div.container-button {
+    top: calc(100vh - 125px);
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100px;
+    align-items: center;
+    background: linear-gradient(0deg, #0C0C0C 0%, #0C0C0C 77%, #ffffff00 100%);
+}
+
+#upgrade-plan-postpace > div.container-button > div.button {
+    cursor: pointer;
+    background-image: url(./images/postpace-button.svg);
+    width: 167px;
+    height: 48px;
+}
+
+#upgrade-plan-postpace > div.container-button > div.button:hover {
+    background-image: url(./images/postpace-button-hover.svg);    
+}
+
+#upgrade-plan-postpace > img:nth-child(2) {
+    margin-top: 12px;
+}
+
+div.postpace-close {
+    background-image: url(./images/drawer.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 73px;
+    height: 27px;
+}

package/template.html

@@ -1,38 +1,41 @@
-<div id="upgrade-plan-pixflow">
+<div class="pixflow">
     <div></div>
-    <img src="./assets/images/drawer.svg" class="pixflow-close">
-    <img src="./assets/images/upgrade-planning-icon.svg" alt="">
+    <img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="close">
+    <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/upgrade-planning-icon.svg" alt="">
     <p>Pro Membership unlocks all the features and templates and in higher tier also lets you use the plugin with your team members.</p>
     <div class="plan">
         <div class="single">
-            <div>
-                <img src="./assets/images/single.png">
-                <div><img src="./assets/images/loading.png" class="loading"></div>
+            <div class="active">
+                <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/single.png">
+                <div><img src="./node_modules/pixflow-upgrade-planning/images/pixflow/loading.png" class="loading"></div>
                 <div></div>    
             </div>
             <p>Single</p>
         </div>
         <div class="team">
             <div>
-                <img src="./assets/images/team.png">
-                <div><img src="./assets/images/loading.png" class="loading"></div>
+                <img src="./node_modules/pixflow-upgrade-planning/images/team.png">
+                <div><img src="./node_modules/pixflow-upgrade-planning/images/pixflow/loading.png" class="loading"></div>
                 <div></div>    
             </div>
             <p>5 Users</p>
         </div>
     </div>
-    <button class="btn">Go premium <img src="./assets/images/outside-link.svg"></button>
-    <div class="activate-code">Do you have the purchase code?</div>
+    <div class="activate-code-block">
+        <button class="btn">Go premium <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/outside-link.svg"></button>
+        <div class="activate-code">Do you have the purchase code?</div>
+    </div>
 </div>
-<div id="upgrade-plan-postpace">
+
+<div class="postpace">
     <div></div>
-    <img src="./assets/images/drawer.svg" class="postpace-close">
-    <img src="./assets/images/postpace-one.svg">
+    <img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="postpace-close">
+    <img src="./node_modules/pixflow-upgrade-planning/images/postpace/postpace-one.svg">
     <p>Enjoy all Nle Plugins, live collaboration, cloud storage and secure project managing, Postpace One bundles up to six great services into one easy subscription.</p>
     <div class="plan">
         <div class="team">
             <div class="active">
-                <img src="./assets/images/team.png">
+                <img src="./node_modules/pixflow-upgrade-planning/images/team.png">
                 <div>Team</div>
                 <div></div>    
             </div>
@@ -40,7 +43,7 @@
         </div>
         <div class="studio">
             <div>
-                <img src="./assets/images/team.png">
+                <img src="./node_modules/pixflow-upgrade-planning/images/team.png">
                 <div>Studio</div>
                 <div></div>    
             </div>
@@ -51,15 +54,16 @@
         <div class="button"></div>
     </div>
 </div>
-<div class="pcode">
+
+<div class="purchase-code">
     <div></div>
-    <img src="assets/images/drawer.svg" class="activate-close">
-    <img src="assets/images/purchase-code.svg">
-    <p class="describe">Use your purchase code to activate account</p>
+    <img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="activate-close">
+    <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/purchase-code.svg">
+    <p class="describe">Use the code you received after the purchase process to activate the plugin</p>
     <form>
         <input type="text" spellcheck="false" placeholder="Purchase code">
         <p class="message"></p>
-        <input type="button" value="ACTIVATE" id="activate">
-        <div id="back-upgrade-plan">Purchase Pro Membership</div>
+        <button>ACTIVATE</button>
+        <div class="back-upgrade-plan">Purchase Pro Membership</div>
     </form>
 </div>