Merge pull request #1 from SyncrowIOT/app_layout

layout web
This commit is contained in:
mohammadnemer1
2024-07-18 15:15:17 +03:00
committed by GitHub
23 changed files with 1242 additions and 226 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

38
assets/images/Logo.svg Normal file
View File

@ -0,0 +1,38 @@
<svg width="244" height="170" viewBox="0 0 244 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Logo">
<g id="Group">
<path id="Vector" opacity="0.994" fill-rule="evenodd" clip-rule="evenodd" d="M88.4865 0C93.3554 0 98.2243 0 103.093 0C103.297 5.87195 105.878 10.3448 110.836 13.4187C116.54 16.4006 122.084 16.1366 127.467 12.6268C131.646 9.47548 133.816 5.26652 133.978 0C138.847 0 143.716 0 148.585 0C148.416 9.09403 144.97 16.6613 138.246 22.7019C138.187 22.7606 138.187 22.8192 138.246 22.8778C139.302 23.8165 140.299 24.8137 141.238 25.8696C147.311 19.0956 154.922 15.6346 164.071 15.4865C164.071 20.3554 164.071 25.2243 164.071 30.0932C158.685 30.2268 154.418 32.456 151.269 36.7805C148.468 41.0876 147.852 45.6926 149.421 50.5952C152.092 57.1491 156.975 60.6102 164.071 60.9783C164.071 65.8471 164.071 70.716 164.071 75.5849C154.944 75.4101 147.347 71.9491 141.282 65.2019C140.285 66.2714 139.244 67.2979 138.158 68.2816C138.099 68.3403 138.099 68.3989 138.158 68.4576C144.913 74.52 148.389 82.1166 148.585 91.2474C143.716 91.2474 138.847 91.2474 133.978 91.2474C133.669 84.8283 130.677 80.1501 125.003 77.2127C119.565 74.9302 114.403 75.4289 109.517 78.7086C105.388 81.8475 103.247 86.0271 103.093 91.2474C98.2243 91.2474 93.3554 91.2474 88.4865 91.2474C88.6521 82.1037 92.1278 74.5071 98.9136 68.4576C98.9722 68.3989 98.9722 68.3403 98.9136 68.2816C97.8273 67.2979 96.7861 66.2714 95.7899 65.2019C89.7121 71.9206 82.1155 75.3816 73 75.5849C73 70.716 73 65.8471 73 60.9783C79.3108 60.692 83.9597 57.7883 86.9467 52.2671C89.4059 46.7188 88.9366 41.4393 85.5388 36.4286C82.3891 32.3238 78.2094 30.212 73 30.0932C73 25.2243 73 20.3554 73 15.4865C82.1422 15.6518 89.7534 19.1129 95.8339 25.8696C96.2738 25.3709 96.7138 24.8724 97.1537 24.3737C97.7412 23.8595 98.3131 23.3315 98.8696 22.7899C92.1012 16.7305 88.6403 9.1338 88.4865 0ZM117.348 30.0932C123.083 29.8955 127.674 32.066 131.119 36.6046C134.686 42.1095 134.891 47.741 131.734 53.499C128.64 58.2444 124.241 60.7375 118.536 60.9783C112.831 60.7375 108.431 58.2444 105.337 53.499C102.381 48.238 102.351 42.9585 105.249 37.6605C108.071 33.2119 112.104 30.6895 117.348 30.0932Z" fill="#FEFFFE"/>
</g>
<g id="Group 172">
<g id="Group_2">
<path id="Vector_2" opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M26.8817 122.405C30.0418 122.319 33.2083 122.319 36.3806 122.405C39.2277 130.121 42.0934 137.827 44.9779 145.524C47.4296 137.803 49.8555 130.075 52.255 122.34C55.3462 122.319 58.4373 122.34 61.5285 122.405C57.3297 134.326 53.1115 146.24 48.874 158.146C47.6562 161.324 45.8209 164.083 43.3679 166.421C40.9735 168.444 38.2044 169.603 35.0604 169.899C33.9888 169.98 32.9153 170.013 31.8405 169.996C31.8405 167.312 31.8405 164.629 31.8405 161.946C33.8587 162.042 35.705 161.538 37.3788 160.432C38.1503 159.768 38.8052 159.006 39.343 158.146C39.8144 157.332 40.2117 156.484 40.5343 155.602C36.0071 144.521 31.4566 133.455 26.8817 122.405Z" fill="#FEFFFE"/>
</g>
<g id="Group_3">
<path id="Vector_3" opacity="0.994" fill-rule="evenodd" clip-rule="evenodd" d="M62.8802 122.34C65.757 122.34 68.633 122.34 71.5097 122.34C71.4988 123.886 71.5097 125.431 71.5419 126.977C73.338 124.484 75.7743 123.035 78.8512 122.63C81.5283 122.202 84.1262 122.481 86.6435 123.467C90.3517 125.223 92.6591 128.11 93.5665 132.129C93.7088 132.832 93.8163 133.54 93.8885 134.254C93.9831 142.088 94.0153 149.924 93.9851 157.76C91.1083 157.76 88.2323 157.76 85.3556 157.76C85.3665 150.762 85.3556 143.764 85.3234 136.766C85.1437 133.216 83.3083 131.145 79.8172 130.551C74.7001 130.271 71.9419 132.686 71.5419 137.796C71.5097 144.45 71.4988 151.105 71.5097 157.76C68.633 157.76 65.757 157.76 62.8802 157.76C62.8802 145.953 62.8802 134.147 62.8802 122.34Z" fill="#FEFFFE"/>
</g>
<g id="Group_4">
<path id="Vector_4" opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M131.724 122.34C134.6 122.34 137.476 122.34 140.353 122.34C140.342 124.53 140.353 126.719 140.385 128.909C141.3 126.534 142.921 124.828 145.247 123.789C146.907 123.052 148.646 122.697 150.464 122.727C150.464 125.925 150.464 129.124 150.464 132.322C147.747 132.019 145.278 132.652 143.058 134.222C141.617 135.418 140.769 136.952 140.514 138.826C140.453 139.232 140.41 139.64 140.385 140.05C140.353 145.953 140.342 151.856 140.353 157.76C137.476 157.76 134.6 157.76 131.724 157.76C131.724 145.953 131.724 134.147 131.724 122.34Z" fill="#FEFFFE"/>
</g>
<g id="Group_5">
<path id="Vector_5" opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M184.982 122.34C188.03 122.319 191.078 122.34 194.126 122.405C196.005 129.832 197.883 137.259 199.761 144.687C201.769 137.26 203.775 129.832 205.783 122.405C208.509 122.329 211.235 122.319 213.961 122.372C215.983 129.847 217.99 137.328 219.983 144.815C221.85 137.325 223.707 129.833 225.553 122.34C228.322 122.34 231.092 122.34 233.861 122.34C230.654 134.15 227.434 145.957 224.201 157.76C221.367 157.76 218.534 157.76 215.7 157.76C213.648 150.736 211.577 143.716 209.486 136.701C207.384 143.693 205.302 150.691 203.239 157.695C200.405 157.781 197.572 157.781 194.738 157.695C191.479 145.911 188.227 134.126 184.982 122.34Z" fill="#FEFFFE"/>
</g>
<g id="Group_6">
<path id="Vector_6" opacity="0.992" fill-rule="evenodd" clip-rule="evenodd" d="M13.1654 122.469C16.8452 122.181 20.2152 123.051 23.2761 125.077C24.9067 126.278 26.2159 127.759 27.2044 129.521C24.7946 130.903 22.3584 132.244 19.8951 133.546C18.3444 130.673 15.9726 129.632 12.779 130.422C11.974 130.67 11.3622 131.153 10.9436 131.871C10.4948 133.121 10.849 134.076 12.0062 134.737C12.6779 135.073 13.365 135.373 14.067 135.639C15.7729 136.172 17.4898 136.666 19.2189 137.12C20.5423 137.525 21.8303 138.019 23.0829 138.601C26.7298 140.796 28.3076 144.027 27.8162 148.293C27.5399 151.026 26.3054 153.205 24.1133 154.829C21.7691 156.434 19.1719 157.335 16.321 157.534C13.074 157.842 9.94029 157.391 6.91868 156.182C3.97435 154.804 1.82728 152.636 0.47876 149.678C2.95813 148.255 5.44844 146.849 7.94907 145.459C9.13079 148.419 11.3313 149.857 14.55 149.774C15.6068 149.789 16.6262 149.607 17.6089 149.227C19.0135 148.426 19.3677 147.299 18.6715 145.846C17.9754 145.138 17.1485 144.633 16.1922 144.332C14.0522 143.647 11.9058 142.982 9.75224 142.336C7.99865 141.824 6.40992 141.008 4.9867 139.889C2.88214 138.094 1.85175 135.808 1.89554 133.03C1.8949 129.241 3.50488 126.375 6.72548 124.433C8.72572 123.279 10.8728 122.624 13.1654 122.469Z" fill="#FEFFFE"/>
</g>
<g id="Group_7">
<path id="Vector_7" opacity="0.992" fill-rule="evenodd" clip-rule="evenodd" d="M113.049 122.469C117.971 122.132 122.308 123.538 126.057 126.687C127.445 127.924 128.562 129.362 129.406 131.002C129.389 131.083 129.346 131.147 129.277 131.195C126.862 132.585 124.458 133.991 122.064 135.413C120.148 132.179 117.293 130.709 113.499 131.002C110.157 131.389 107.763 133.096 106.319 136.122C105.46 138.382 105.353 140.679 105.997 143.012C107.461 146.891 110.274 148.909 114.433 149.066C117.188 149.062 119.463 148.031 121.259 145.975C121.554 145.535 121.834 145.084 122.097 144.622C124.565 146.039 127.034 147.456 129.503 148.873C129.546 148.937 129.546 149.001 129.503 149.066C126.885 153.44 123.075 156.177 118.072 157.277C114.056 158.017 110.192 157.545 106.48 155.86C101.019 152.94 97.8748 148.399 97.0453 142.24C96.3324 134.942 98.9618 129.221 104.934 125.077C107.431 123.552 110.136 122.682 113.049 122.469Z" fill="#FEFFFE"/>
</g>
<g id="Group_8">
<path id="Vector_8" opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M166.951 122.469C174.297 122.122 179.911 125.042 183.791 131.227C186.088 135.587 186.625 140.16 185.401 144.944C183.958 149.649 181.093 153.202 176.804 155.602C173.09 157.457 169.183 158.036 165.083 157.341C159.487 156.192 155.333 153.112 152.622 148.1C150.859 144.336 150.365 140.407 151.141 136.315C152.367 130.993 155.362 127.01 160.124 124.369C162.284 123.292 164.559 122.659 166.951 122.469ZM167.401 130.905C171.155 130.63 174.064 132.047 176.127 135.156C177.574 137.924 177.767 140.779 176.707 143.721C175.069 147.255 172.289 149.079 168.367 149.195C164.115 149.018 161.271 146.936 159.834 142.948C159.204 140.608 159.333 138.311 160.221 136.057C161.692 133.05 164.086 131.333 167.401 130.905Z" fill="#FEFFFE"/>
</g>
<g id="Group 173">
<g id="Group_9">
<path id="Vector_9" opacity="0.924" fill-rule="evenodd" clip-rule="evenodd" d="M236.887 122.34C237.767 122.34 238.647 122.34 239.527 122.34C239.527 122.576 239.527 122.812 239.527 123.048C239.226 123.048 238.926 123.048 238.626 123.048C238.626 123.972 238.626 124.895 238.626 125.818C238.347 125.818 238.067 125.818 237.788 125.818C237.788 124.895 237.788 123.972 237.788 123.048C237.488 123.048 237.188 123.048 236.887 123.048C236.887 122.812 236.887 122.576 236.887 122.34Z" fill="#FEFFFE"/>
</g>
<g id="Group_10">
<path id="Vector_10" opacity="0.932" fill-rule="evenodd" clip-rule="evenodd" d="M243.391 122.34C243.391 123.499 243.391 124.658 243.391 125.818C243.112 125.818 242.833 125.818 242.554 125.818C242.565 125.173 242.554 124.529 242.522 123.886C242.307 124.272 242.092 124.658 241.878 125.045C241.755 125.225 241.594 125.268 241.395 125.174C241.164 124.734 240.917 124.304 240.654 123.886C240.622 124.529 240.611 125.173 240.622 125.818C240.343 125.818 240.064 125.818 239.785 125.818C239.785 124.658 239.785 123.499 239.785 122.34C240.086 122.329 240.387 122.34 240.686 122.372C240.974 122.885 241.274 123.389 241.588 123.886C241.889 123.392 242.189 122.898 242.489 122.404C242.787 122.34 243.088 122.319 243.391 122.34Z" fill="#FEFFFE"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
assets/images/Vector.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@ -0,0 +1,12 @@
<svg width="500" height="102" viewBox="0 0 500 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.994" fill-rule="evenodd" clip-rule="evenodd" d="M17.2009 0C22.6088 0 28.0167 0 33.4246 0C33.6512 6.51932 36.5181 11.4853 42.025 14.8981C48.3604 18.2087 54.5175 17.9156 60.4965 14.0189C65.1381 10.5201 67.5489 5.84713 67.7287 0C73.1366 0 78.5445 0 83.9523 0C83.7652 10.0966 79.9374 18.4982 72.4688 25.2047C72.4036 25.2698 72.4036 25.3349 72.4688 25.4001C73.6415 26.4422 74.7491 27.5493 75.7917 28.7216C82.5371 21.2008 90.9909 17.3583 101.153 17.1939C101.153 22.5995 101.153 28.0052 101.153 33.4109C95.1707 33.5592 90.4306 36.0342 86.9332 40.8355C83.8225 45.6174 83.1384 50.7301 84.8808 56.1732C87.8474 63.4496 93.2715 67.2923 101.153 67.7009C101.153 73.1066 101.153 78.5123 101.153 83.9179C91.0153 83.7239 82.5776 79.8812 75.8405 72.3902C74.734 73.5776 73.5775 74.7173 72.371 75.8094C72.3058 75.8746 72.3058 75.9396 72.371 76.0048C79.8739 82.7356 83.7344 91.1697 83.9523 101.307C78.5445 101.307 73.1366 101.307 67.7287 101.307C67.3852 94.1804 64.0623 88.9864 57.76 85.7252C51.7201 83.1911 45.9864 83.7447 40.559 87.386C35.9732 90.871 33.595 95.5114 33.4246 101.307C28.0167 101.307 22.6088 101.307 17.2009 101.307C17.3849 91.1554 21.2453 82.7213 28.7823 76.0048C28.8474 75.9396 28.8474 75.8746 28.7823 75.8094C27.5758 74.7173 26.4193 73.5776 25.3128 72.3902C18.5622 79.8496 10.1246 83.6922 0 83.9179C0 78.5123 0 73.1066 0 67.7009C7.00945 67.3831 12.173 64.1593 15.4906 58.0294C18.2221 51.8694 17.7008 46.0078 13.9269 40.4447C10.4285 35.8875 5.78613 33.5428 0 33.4109C0 28.0052 0 22.5995 0 17.1939C10.1542 17.3774 18.6081 21.22 25.3616 28.7216C25.8503 28.168 26.3389 27.6145 26.8276 27.0608C27.4801 26.4899 28.1153 25.9038 28.7334 25.3024C21.2158 18.575 17.3717 10.1408 17.2009 0ZM49.2572 33.4109C55.6278 33.1914 60.7263 35.6012 64.5524 40.6401C68.5143 46.7519 68.7423 53.0043 65.2365 59.3971C61.7997 64.6657 56.913 67.4336 50.5766 67.7009C44.2402 67.4336 39.3536 64.6657 35.9167 59.3971C32.6333 53.5561 32.6008 47.6946 35.819 41.8124C38.9536 36.8734 43.4331 34.0729 49.2572 33.4109Z" fill="#FEFFFE"/>
<path opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M172.4 23.8369C177.196 23.7068 182.001 23.7068 186.816 23.8369C191.136 35.542 195.485 47.2326 199.863 58.9085C203.583 47.1967 207.265 35.4736 210.907 23.7392C215.598 23.7067 220.289 23.7392 224.98 23.8369C218.608 41.9211 212.206 59.9942 205.776 78.0563C203.928 82.8776 201.142 87.0622 197.42 90.6098C193.786 93.6783 189.583 95.4368 184.812 95.8852C183.186 96.0087 181.557 96.0576 179.925 96.0317C179.925 91.9611 179.925 87.8907 179.925 83.8201C182.988 83.9667 185.79 83.2014 188.33 81.5244C189.501 80.5171 190.495 79.3612 191.311 78.0563C192.027 76.8216 192.63 75.5353 193.119 74.1974C186.249 57.3867 179.343 40.5998 172.4 23.8369Z" fill="#FEFFFE"/>
<path opacity="0.994" fill-rule="evenodd" clip-rule="evenodd" d="M227.033 23.7397C231.399 23.7397 235.763 23.7397 240.129 23.7397C240.112 26.0845 240.129 28.4291 240.178 30.7735C242.904 26.9915 246.601 24.7934 251.271 24.1793C255.333 23.5306 259.276 23.954 263.096 25.4493C268.724 28.113 272.225 32.4929 273.603 38.5889C273.819 39.6555 273.982 40.7301 274.091 41.8128C274.235 53.6974 274.284 65.5833 274.238 77.4705C269.872 77.4705 265.507 77.4705 261.142 77.4705C261.158 66.8546 261.142 56.2386 261.093 45.6228C260.82 40.2388 258.035 37.0964 252.737 36.1955C244.971 35.7704 240.785 39.4339 240.178 47.1859C240.129 57.2807 240.112 67.3756 240.129 77.4705C235.763 77.4705 231.399 77.4705 227.033 77.4705C227.033 59.5603 227.033 41.6499 227.033 23.7397Z" fill="#FEFFFE"/>
<path opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M331.509 23.7397C335.875 23.7397 340.24 23.7397 344.606 23.7397C344.589 27.0614 344.606 30.3829 344.654 33.7043C346.042 30.1023 348.502 27.5134 352.033 25.9377C354.552 24.8188 357.191 24.2815 359.95 24.3258C359.95 29.1779 359.95 34.0299 359.95 38.882C355.826 38.4226 352.08 39.3832 348.71 41.7639C346.524 43.5779 345.237 45.9062 344.85 48.7489C344.758 49.3647 344.693 49.9835 344.654 50.6051C344.606 59.5602 344.589 68.5153 344.606 77.4705C340.24 77.4705 335.875 77.4705 331.509 77.4705C331.509 59.5603 331.509 41.6499 331.509 23.7397Z" fill="#FEFFFE"/>
<path opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M412.334 23.7392C416.961 23.7067 421.586 23.7392 426.212 23.8369C429.063 35.1036 431.913 46.3708 434.764 57.6386C437.81 46.3719 440.855 35.1047 443.902 23.8369C448.039 23.7229 452.176 23.7067 456.314 23.7881C459.381 35.1275 462.428 46.4762 465.452 57.8339C468.285 46.4711 471.103 35.1062 473.905 23.7392C478.108 23.7392 482.31 23.7392 486.513 23.7392C481.646 41.6552 476.759 59.5654 471.853 77.4702C467.553 77.4702 463.253 77.4702 458.952 77.4702C455.839 66.8147 452.696 56.1662 449.521 45.5247C446.331 56.1306 443.171 66.7465 440.041 77.3725C435.741 77.5027 431.441 77.5027 427.14 77.3725C422.194 59.4958 417.259 41.618 412.334 23.7392Z" fill="#FEFFFE"/>
<path opacity="0.992" fill-rule="evenodd" clip-rule="evenodd" d="M151.583 23.9344C157.167 23.4981 162.282 24.8169 166.927 27.8909C169.402 29.7129 171.389 31.9598 172.889 34.6317C169.232 36.7284 165.534 38.7637 161.796 40.7375C159.443 36.3793 155.843 34.8 150.997 35.9994C149.775 36.3753 148.847 37.108 148.211 38.1975C147.53 40.0936 148.068 41.5427 149.824 42.5448C150.843 43.0545 151.886 43.5103 152.951 43.9125C155.54 44.7222 158.146 45.4712 160.77 46.1595C162.778 46.7742 164.733 47.5231 166.634 48.4064C172.168 51.7368 174.563 56.6378 173.817 63.1091C173.398 67.2547 171.524 70.56 168.198 73.0249C164.64 75.4585 160.699 76.8262 156.372 77.128C151.444 77.5952 146.689 76.9113 142.103 75.0765C137.635 72.9867 134.376 69.6977 132.33 65.2095C136.092 63.0518 139.872 60.9188 143.667 58.8106C145.46 63.3003 148.8 65.4822 153.684 65.356C155.288 65.3793 156.835 65.1025 158.327 64.5257C160.458 63.3103 160.996 61.6006 159.939 59.3968C158.883 58.3225 157.628 57.5572 156.176 57.101C152.929 56.0615 149.671 55.052 146.403 54.0726C143.742 53.296 141.331 52.0585 139.171 50.3602C135.977 47.6374 134.413 44.1694 134.48 39.956C134.479 34.2075 136.922 29.8601 141.81 26.914C144.845 25.1626 148.104 24.1694 151.583 23.9344Z" fill="#FEFFFE"/>
<path opacity="0.992" fill-rule="evenodd" clip-rule="evenodd" d="M303.167 23.9349C310.638 23.4232 317.219 25.5561 322.909 30.3337C325.015 32.2094 326.71 34.3912 327.991 36.8791C327.966 37.0023 327.9 37.1 327.796 37.1722C324.131 39.2805 320.482 41.4134 316.85 43.571C313.941 38.6651 309.609 36.4345 303.851 36.8791C298.779 37.4671 295.146 40.056 292.954 44.6457C291.651 48.0743 291.489 51.5587 292.465 55.0988C294.688 60.9824 298.956 64.0434 305.268 64.2818C309.449 64.2755 312.902 62.7124 315.628 59.5926C316.076 58.9252 316.5 58.2413 316.899 57.5411C320.645 59.6903 324.392 61.8395 328.138 63.9888C328.203 64.0865 328.203 64.1841 328.138 64.2818C324.166 70.9181 318.383 75.07 310.79 76.7376C304.696 77.861 298.832 77.1445 293.198 74.5884C284.912 70.1581 280.139 63.2708 278.881 53.9264C277.799 42.8555 281.789 34.1772 290.853 27.8914C294.642 25.5772 298.747 24.2583 303.167 23.9349Z" fill="#FEFFFE"/>
<path opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M384.968 23.9349C396.117 23.409 404.637 27.8377 410.525 37.2211C414.011 43.8349 414.825 50.771 412.968 58.0296C410.779 65.1669 406.43 70.5562 399.921 74.1977C394.285 77.0106 388.356 77.8898 382.134 76.8354C373.641 75.0923 367.337 70.4194 363.223 62.8165C360.547 57.1063 359.797 51.1471 360.975 44.9388C362.837 36.8649 367.381 30.8242 374.608 26.8168C377.886 25.184 381.339 24.2233 384.968 23.9349ZM385.652 36.7326C391.349 36.3157 395.764 38.4649 398.895 43.1803C401.09 47.3799 401.383 51.7109 399.775 56.1734C397.288 61.5344 393.07 64.3023 387.118 64.4773C380.665 64.2094 376.348 61.0507 374.169 55.0011C373.212 51.4511 373.407 47.9668 374.755 44.548C376.988 39.9864 380.621 37.3813 385.652 36.7326Z" fill="#FEFFFE"/>
<path opacity="0.924" fill-rule="evenodd" clip-rule="evenodd" d="M490.129 24.5208C491.465 24.5208 492.8 24.5208 494.136 24.5208C494.136 24.879 494.136 25.2372 494.136 25.5954C493.68 25.5954 493.224 25.5954 492.768 25.5954C492.768 26.9956 492.768 28.396 492.768 29.7962C492.345 29.7962 491.921 29.7962 491.498 29.7962C491.498 28.396 491.498 26.9956 491.498 25.5954C491.041 25.5954 490.586 25.5954 490.129 25.5954C490.129 25.2372 490.129 24.879 490.129 24.5208Z" fill="#FEFFFE"/>
<path opacity="0.932" fill-rule="evenodd" clip-rule="evenodd" d="M500 24.5205C500 26.2789 500 28.0374 500 29.7959C499.577 29.7959 499.153 29.7959 498.729 29.7959C498.746 28.8183 498.729 27.8414 498.681 26.8651C498.355 27.4512 498.029 28.0374 497.703 28.6236C497.517 28.8974 497.272 28.9625 496.97 28.8189C496.62 28.1517 496.246 27.5004 495.846 26.8651C495.798 27.8414 495.781 28.8183 495.798 29.7959C495.374 29.7959 494.95 29.7959 494.527 29.7959C494.527 28.0374 494.527 26.2789 494.527 24.5205C494.984 24.5042 495.441 24.5206 495.895 24.5693C496.332 25.3473 496.788 26.1126 497.263 26.8651C497.72 26.1161 498.175 25.3672 498.632 24.6182C499.083 24.5211 499.54 24.4885 500 24.5205Z" fill="#FEFFFE"/>
</svg>

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

View File

@ -0,0 +1,323 @@
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1920 0H0V1080H1920V0Z" fill="white"/>
<g style="mix-blend-mode:multiply" opacity="0.1">
<circle cx="63" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="-37" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="763" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="363" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1163" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="63" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="263" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="163" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="863" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1063" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="963" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="463" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="663" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="563" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1263" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1363" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="-10" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="790" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="390" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="190" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="290" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="90" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="990" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="1090" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="890" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1463" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1563" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1963" cy="490" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1663" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1863" cy="590" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="690" r="50" stroke="#999999" stroke-width="33"/>
<circle cx="1763" cy="490" r="50" stroke="#999999" stroke-width="33"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1,126 +1,29 @@
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/auth/view/login_page.dart'; import 'package:syncrow_web/pages/home/view/home_page.dart';
void main() { void main() {
runApp(const MyApp()); runApp(const MyApp());
} }
class MyApp extends StatelessWidget { class MyApp extends StatelessWidget {
const MyApp({super.key}); const MyApp({super.key});
// This widget is the root of your application.
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: 'Flutter Demo', debugShowCheckedModeBanner: false,
scrollBehavior: const MaterialScrollBehavior().copyWith(
dragDevices: {
PointerDeviceKind.mouse,
PointerDeviceKind.touch,
PointerDeviceKind.stylus,
PointerDeviceKind.unknown
},
),
theme: ThemeData( theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a purple toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true, useMaterial3: true,
), ),
home: LoginPage(), home: const HomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
//
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
); );
} }
} }

View File

@ -0,0 +1,220 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/utils/assets.dart';
import 'package:syncrow_web/pages/auth/bloc/login_bloc.dart';
import 'package:syncrow_web/pages/auth/bloc/login_event.dart';
import 'package:syncrow_web/pages/auth/bloc/login_state.dart';
import 'package:syncrow_web/pages/home/view/home_page.dart';
class LoginMobilePage extends StatelessWidget {
const LoginMobilePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: BlocProvider(
create: (context) => LoginBloc(),
child: BlocConsumer<LoginBloc, LoginState>(
listener: (context, state) {
if (state is LoginSuccess) {
// Navigate to home screen after successful login
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
} else if (state is LoginFailure) {
// Show error message
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(state.error),
),
);
}
},
builder: (context, state) {
if (state is LoginLoading) {
return const Center(child: CircularProgressIndicator());
} else {
return _buildLoginForm(context);
}
},
),
),
);
}
Widget _buildLoginForm(BuildContext context) {
final loginBloc = BlocProvider.of<LoginBloc>(context);
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
return Center(
child: Stack(
children: [
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
Assets.background,
),
fit: BoxFit.cover,
),
),
),
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(Assets.vector),
fit: BoxFit.cover,
opacity: 0.9,
),
),
),
SingleChildScrollView(
child: Container(
margin: const EdgeInsets.all(50),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
borderRadius: const BorderRadius.all(Radius.circular(20))),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: SvgPicture.asset(
Assets.loginLogo,
),
),
Container(
margin: const EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.3),
borderRadius: const BorderRadius.all(Radius.circular(30))),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 15),
const Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 15),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Email",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
SizedBox(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Email',
labelStyle: TextStyle(color: Colors.white),
hintText: 'username@gmail.com',
hintStyle: TextStyle(color: Colors.grey),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(
vertical: 16.0, horizontal: 12.0),
),
style: TextStyle(color: Colors.black),
)),
],
),
const SizedBox(height: 15.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Password",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
SizedBox(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Password',
labelStyle: TextStyle(color: Colors.white),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.grey),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(
vertical: 16.0, horizontal: 12.0),
),
style: TextStyle(color: Colors.black),
)),
const SizedBox(height: 20.0),
const Text(
"Forgot Password?",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
],
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () async {
// Trigger login event
loginBloc.add(
LoginButtonPressed(
username: _usernameController.text,
password: _passwordController.text,
),
);
},
child: const Text('Login'),
),
],
),
),
),
],
),
),
),
],
),
);
}
}

View File

@ -1,100 +1,18 @@
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:syncrow_web/pages/auth/view/login_mobile_page.dart';
import 'package:syncrow_web/pages/auth/bloc/login_bloc.dart'; import 'package:syncrow_web/pages/auth/view/login_web_page.dart';
import 'package:syncrow_web/pages/auth/bloc/login_event.dart'; import 'package:syncrow_web/utils/responsive_layout.dart';
import 'package:syncrow_web/pages/auth/bloc/login_state.dart';
import 'package:syncrow_web/pages/home/view/home_page.dart';
class LoginPage extends StatelessWidget { class LoginPage extends StatelessWidget {
const LoginPage({super.key}); const LoginPage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return const ResponsiveLayout(
appBar: AppBar( desktopBody: LoginWebPage(),
title: const Text('Login'), mobileBody:LoginMobilePage()
),
body: BlocProvider(
create: (context) => LoginBloc(),
child: BlocConsumer<LoginBloc, LoginState>(
listener: (context, state) {
if (state is LoginSuccess) {
// Navigate to home screen after successful login
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
} else if (state is LoginFailure) {
// Show error message
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(state.error),
),
);
}
},
builder: (context, state) {
if (state is LoginLoading) {
return const Center(child: CircularProgressIndicator());
} else {
return _buildLoginForm(context);
}
},
),
),
);
}
Widget _buildLoginForm(BuildContext context) {
final loginBloc = BlocProvider.of<LoginBloc>(context);
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
return Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: MediaQuery.sizeOf(context).width * 0.4,
child: TextField(
controller: _usernameController,
decoration: const InputDecoration(
labelText: 'Username',
),
),
),
const SizedBox(height: 20.0),
SizedBox(
width: MediaQuery.sizeOf(context).width * 0.4,
child: TextField(
controller: _passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
),
),
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () async {
// Trigger login event
loginBloc.add(
LoginButtonPressed(
username: _usernameController.text,
password: _passwordController.text,
),
);
},
child: const Text('Login'),
),
],
),
),
); );
} }
} }

View File

@ -0,0 +1,230 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/utils/assets.dart';
import 'package:syncrow_web/pages/auth/bloc/login_bloc.dart';
import 'package:syncrow_web/pages/auth/bloc/login_event.dart';
import 'package:syncrow_web/pages/auth/bloc/login_state.dart';
import 'package:syncrow_web/pages/home/view/home_page.dart';
class LoginWebPage extends StatelessWidget {
const LoginWebPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// title: const Text('Login'),
// ),
body: BlocProvider(
create: (context) => LoginBloc(),
child: BlocConsumer<LoginBloc, LoginState>(
listener: (context, state) {
if (state is LoginSuccess) {
// Navigate to home screen after successful login
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
} else if (state is LoginFailure) {
// Show error message
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(state.error),
),
);
}
},
builder: (context, state) {
if (state is LoginLoading) {
return const Center(child: CircularProgressIndicator());
} else {
return _buildLoginForm(context);
}
},
),
),
);
}
Widget _buildLoginForm(BuildContext context) {
final loginBloc = BlocProvider.of<LoginBloc>(context);
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
return Center(
child: Stack(
children: [
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
child: SvgPicture.asset(
Assets.webBackground,
fit: BoxFit.cover,
),
),
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(Assets.vector),
fit: BoxFit.cover,
opacity: 0.9,
),
),
),
Container(
margin: const EdgeInsets.all(50),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
borderRadius: const BorderRadius.all(Radius.circular(20)),
),
child:Center(
child: ListView(
shrinkWrap: true,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
Expanded(
flex: 2,
child: SvgPicture.asset(
Assets.loginLogo,
),
),
const Spacer(),
Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.3),
borderRadius: const BorderRadius.all(Radius.circular(30)),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 15),
const Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 30),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Email",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
SizedBox(
width: MediaQuery.sizeOf(context).width * 0.2,
child: TextFormField(
controller: _usernameController,
decoration: InputDecoration(
labelText: 'Email',
labelStyle: const TextStyle(color: Colors.white),
hintText: 'username@gmail.com',
hintStyle: const TextStyle(color: Colors.grey),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: const BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: const BorderSide(color: Colors.white),
),
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.symmetric(
vertical: 16.0, horizontal: 12.0),
),
style: const TextStyle(color: Colors.black),
),
),
],
),
const SizedBox(height: 20.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Password",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
SizedBox(
width: MediaQuery.sizeOf(context).width * 0.2,
child: TextFormField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
labelStyle: const TextStyle(color: Colors.white),
hintText: 'Password',
hintStyle: const TextStyle(color: Colors.grey),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: const BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: const BorderSide(color: Colors.white),
),
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.symmetric(
vertical: 16.0, horizontal: 12.0),
),
style: const TextStyle(color: Colors.black),
),
),
const SizedBox(height: 20.0),
const Text(
"Forgot Password?",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
],
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () async {
// Trigger login event
loginBloc.add(
LoginButtonPressed(
username: _usernameController.text,
password: _passwordController.text,
),
);
},
child: const Text('Login'),
),
],
),
),
),
const Spacer(),
],
),
],
)),
),
],
),
);
}
}

View File

@ -2,16 +2,29 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/view/tree_page.dart'; import 'package:syncrow_web/pages/home/view/tree_page.dart';
import 'package:syncrow_web/utils/style.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';
class HomePage extends StatelessWidget { class HomePage extends StatelessWidget {
const HomePage({super.key}); const HomePage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return WebScaffold(
body: BlocProvider( appBarTitle: 'Space Management',
appBarBody:[
Text(
'Community structure',
style: appBarTextStyle,
),
Text(
'Community ',
style: appBarTextStyle
),
],
scaffoldBody: BlocProvider(
create: (context) => HomeBloc(), create: (context) => HomeBloc(),
child: const TreeWidget(), child: const TreeWidget(),
)); ),
);
} }
} }

View File

@ -29,11 +29,11 @@ class TreeWidget extends StatelessWidget {
if (state is HomeInitial) { if (state is HomeInitial) {
return Wrap( return Wrap(
children: [ children: [
Container( SizedBox(
width: 100, width: 100,
child: TextFormField( child: TextFormField(
decoration: decoration:
InputDecoration(labelText: "Subtree separation"), const InputDecoration(labelText: "Subtree separation"),
onChanged: (text) { onChanged: (text) {
firstNodeName = text; firstNodeName = text;
}, },
@ -55,7 +55,6 @@ class TreeWidget extends StatelessWidget {
onPressed: () { onPressed: () {
final node1 = Node.Id(firstNodeName); final node1 = Node.Id(firstNodeName);
final node2 = Node.Id(secondNodeName); final node2 = Node.Id(secondNodeName);
context.read<HomeBloc>().add(CreateNewNode( context.read<HomeBloc>().add(CreateNewNode(
sourceNode: node1, destinationNode: node2)); sourceNode: node1, destinationNode: node2));
}, },
@ -99,7 +98,6 @@ class TreeWidget extends StatelessWidget {
Widget rectangleWidget(String text, Node node, BuildContext blocContext) { Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
String nodeName = ''; String nodeName = '';
return InkWell( return InkWell(
onTap: () { onTap: () {
showDialog( showDialog(
@ -145,6 +143,7 @@ Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
BoxShadow(color: Colors.blue[100]!, spreadRadius: 1), BoxShadow(color: Colors.blue[100]!, spreadRadius: 1),
], ],
), ),
child: Text(text)), child: Text(text)
),
); );
} }

12
lib/utils/assets.dart Normal file
View File

@ -0,0 +1,12 @@
class Assets {
Assets._();
static const String background = "assets/images/Background.png";
static const String webBackground = "assets/images/web_Background.svg";
static const String blackLogo = "assets/images/black-logo.png";
static const String logo = "assets/images/Logo.svg";
static const String logoHorizontal = "assets/images/logo_horizontal.png";
static const String vector = "assets/images/Vector.png";
static const String loginLogo = "assets/images/login_logo.svg";
static const String whiteLogo = "assets/images/white-logo.png";
static const String window = "assets/images/Window.png";
}

View File

@ -0,0 +1,30 @@
import 'package:flutter/material.dart';
abstract class ColorsManager {
static const Color textPrimaryColor = Color(0xFF5D5D5D);
static const Color switchOffColor = Color(0x7F8D99AE);
static const Color primaryColor = Color(0xFF0030CB);//023DFE
static const Color secondaryTextColor = Color(0xFF848484);
static Color primaryColorWithOpacity = const Color(0xFF023DFE).withOpacity(0.6);
static const Color whiteColors = Colors.white;
static const Color secondaryColor = Color(0xFF023DFE);
static const Color onSecondaryColor = Color(0xFF023DFE);
static const Color primaryTextColor = Colors.black;
static const Color greyColor = Color(0xFFd5d5d5);
static const Color backgroundColor = Color(0xFFececec);
static const Color dozeColor = Color(0xFFFEC258);
static const Color relaxColor = Color(0xFFFBD288);
static const Color readingColor = Color(0xFFF7D69C);
static const Color energizingColor = Color(0xFFEDEDED);
static const Color dividerColor = Color(0xFFEBEBEB);
static const Color slidingBlueColor = Color(0x99023DFE);
static const Color blackColor = Color(0xFF000000);
static const Color lightGreen = Color(0xFF00FF0A);
static const Color grayColor = Color(0xFF999999);
static const Color red = Colors.red;
static const Color graysColor = Color(0xffEBEBEB);
static const Color textGray = Color(0xffD5D5D5);
}

View File

@ -0,0 +1,21 @@
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget {
final Widget desktopBody;
final Widget mobileBody;
const ResponsiveLayout({super.key,required this.desktopBody,required this.mobileBody});
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
if(constraints.maxWidth<600){
return mobileBody;
}else{
return desktopBody;
}
},
);
}
}

27
lib/utils/style.dart Normal file
View File

@ -0,0 +1,27 @@
import 'package:flutter/material.dart';
import 'color_manager.dart';
InputDecoration? textBoxDecoration = InputDecoration(
focusColor: ColorsManager.grayColor,
suffixIcon: const Icon(Icons.search),
hintText: 'Search',
filled: true, // Enable background filling
fillColor: Colors.grey.shade200, // Set the background color
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15), // Add border radius
borderSide: BorderSide.none, // Remove the underline
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(15), // Add border radius
borderSide: BorderSide.none, // Remove the underline
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(15), // Add border radius
borderSide: BorderSide.none, // Remove the underline
),
);
TextStyle appBarTextStyle =
const TextStyle(fontSize: 20, color: ColorsManager.whiteColors);

View File

@ -0,0 +1,56 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart';
class MenuSidebar extends StatelessWidget {
const MenuSidebar({super.key});
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(4, 0),
blurRadius: 10,
)
],
color: ColorsManager.whiteColors,
),
width: 200,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Community',style: TextStyle(fontSize: 20),),
CircleAvatar(
backgroundColor: Colors.grey.shade200,
child: IconButton(
color: ColorsManager.onSecondaryColor,
onPressed: () {},
icon: const Icon(Icons.add)
),
)
],
),
const SizedBox(height: 20,),
TextFormField(
controller: TextEditingController(),
decoration:textBoxDecoration
),
Container(height: 100,)
],
),
),
),
);
}
}

View File

@ -0,0 +1,63 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class WebAppBar extends StatelessWidget {
final String? title;
final List<Widget>? body;
const WebAppBar({super.key,this.title,this.body});
@override
Widget build(BuildContext context) {
return Container(
height: 120,
decoration: const BoxDecoration(color:ColorsManager.secondaryColor ),
padding: const EdgeInsets.all(10),
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
title!,style: const TextStyle(
fontSize: 30,
color: Colors.white),)
),
if (body != null)
Expanded(
flex: 2,
child: Wrap(
spacing: 15, // Adjust the spacing as needed
children: body!,
),
),
Row(
children: [
IconButton(onPressed: () {},
icon: const Icon(Icons.apps_sharp,color: Colors.white,)),
const SizedBox(width: 10,),
const SizedBox.square(
dimension: 40,
child: CircleAvatar(
backgroundColor: Colors.white,
child: SizedBox.square(
dimension: 35,
child: CircleAvatar(
backgroundColor: Colors.grey,
child: FlutterLogo(),
),
),
),
),
const SizedBox(width: 10,),
const Text('mohamamd alnemer ',style: TextStyle(fontSize: 16,color: Colors.white),),
],
)
],
),
) ,
);
}
// @override
// Size get preferredSize => Size.fromHeight(50.0);
}

View File

@ -0,0 +1,54 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/utils/assets.dart';
import 'package:syncrow_web/web_layout/web_app_bar.dart';
import 'menu_sidebar.dart';
class WebScaffold extends StatelessWidget {
final bool enableMenuSideba;
final String? appBarTitle;
final List<Widget>? appBarBody;
final Widget? scaffoldBody;
const WebScaffold({super.key,this.appBarTitle,this.appBarBody,this.scaffoldBody,this.enableMenuSideba=true});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
SizedBox(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
child: SvgPicture.asset(
Assets.webBackground,
fit: BoxFit.cover,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Opacity(
opacity: 0.6,
child: WebAppBar(
title: appBarTitle,
body: appBarBody,
)
),
Expanded(
child: Row(
children: [
if(enableMenuSideba)
const MenuSidebar(),
Expanded(
flex: 5,
child: scaffoldBody!
)
],
),
)
],
),
],
));
}
}

View File

@ -1,6 +1,14 @@
# Generated by pub # Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile # See https://dart.dev/tools/pub/glossary#lockfile
packages: packages:
args:
dependency: transitive
description:
name: args
sha256: "7cf60b9f0cc88203c5a190b4cd62a99feea42759a7fa695010eb5de1c0b2252a"
url: "https://pub.dev"
source: hosted
version: "2.5.0"
async: async:
dependency: transitive dependency: transitive
description: description:
@ -94,6 +102,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "3.0.2" version: "3.0.2"
flutter_svg:
dependency: "direct main"
description:
name: flutter_svg
sha256: "7b4ca6cf3304575fe9c8ec64813c8d02ee41d2afe60bcfe0678bcb5375d596a2"
url: "https://pub.dev"
source: hosted
version: "2.0.10+1"
flutter_test: flutter_test:
dependency: "direct dev" dependency: "direct dev"
description: flutter description: flutter
@ -107,30 +123,46 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.2.0" version: "1.2.0"
http:
dependency: transitive
description:
name: http
sha256: b9c29a161230ee03d3ccf545097fccd9b87a5264228c5d348202e0f0c28f9010
url: "https://pub.dev"
source: hosted
version: "1.2.2"
http_parser:
dependency: transitive
description:
name: http_parser
sha256: "2aa08ce0341cc9b354a498388e30986515406668dbcc4f7c950c3e715496693b"
url: "https://pub.dev"
source: hosted
version: "4.0.2"
leak_tracker: leak_tracker:
dependency: transitive dependency: transitive
description: description:
name: leak_tracker name: leak_tracker
sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa" sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "10.0.0" version: "10.0.4"
leak_tracker_flutter_testing: leak_tracker_flutter_testing:
dependency: transitive dependency: transitive
description: description:
name: leak_tracker_flutter_testing name: leak_tracker_flutter_testing
sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0 sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.0.1" version: "3.0.3"
leak_tracker_testing: leak_tracker_testing:
dependency: transitive dependency: transitive
description: description:
name: leak_tracker_testing name: leak_tracker_testing
sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47 sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.0.1" version: "3.0.1"
lints: lints:
dependency: transitive dependency: transitive
description: description:
@ -159,10 +191,10 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: meta name: meta
sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04 sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.11.0" version: "1.12.0"
nested: nested:
dependency: transitive dependency: transitive
description: description:
@ -179,6 +211,22 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.9.0" version: "1.9.0"
path_parsing:
dependency: transitive
description:
name: path_parsing
sha256: e3e67b1629e6f7e8100b367d3db6ba6af4b1f0bb80f64db18ef1fbabd2fa9ccf
url: "https://pub.dev"
source: hosted
version: "1.0.1"
petitparser:
dependency: transitive
description:
name: petitparser
sha256: c15605cd28af66339f8eb6fbe0e541bfe2d1b72d5825efc6598f3e0a31b9ad27
url: "https://pub.dev"
source: hosted
version: "6.0.2"
provider: provider:
dependency: transitive dependency: transitive
description: description:
@ -236,10 +284,42 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: test_api name: test_api
sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b" sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.6.1" version: "0.7.0"
typed_data:
dependency: transitive
description:
name: typed_data
sha256: facc8d6582f16042dd49f2463ff1bd6e2c9ef9f3d5da3d9b087e244a7b564b3c
url: "https://pub.dev"
source: hosted
version: "1.3.2"
vector_graphics:
dependency: transitive
description:
name: vector_graphics
sha256: "32c3c684e02f9bc0afb0ae0aa653337a2fe022e8ab064bcd7ffda27a74e288e3"
url: "https://pub.dev"
source: hosted
version: "1.1.11+1"
vector_graphics_codec:
dependency: transitive
description:
name: vector_graphics_codec
sha256: c86987475f162fadff579e7320c7ddda04cd2fdeffbe1129227a85d9ac9e03da
url: "https://pub.dev"
source: hosted
version: "1.1.11+1"
vector_graphics_compiler:
dependency: transitive
description:
name: vector_graphics_compiler
sha256: "12faff3f73b1741a36ca7e31b292ddeb629af819ca9efe9953b70bd63fc8cd81"
url: "https://pub.dev"
source: hosted
version: "1.1.11+1"
vector_math: vector_math:
dependency: transitive dependency: transitive
description: description:
@ -252,10 +332,26 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: vm_service name: vm_service
sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957 sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "13.0.0" version: "14.2.1"
web:
dependency: transitive
description:
name: web
sha256: d43c1d6b787bf0afad444700ae7f4db8827f701bc61c255ac8d328c6f4d52062
url: "https://pub.dev"
source: hosted
version: "1.0.0"
xml:
dependency: transitive
description:
name: xml
sha256: b015a8ad1c488f66851d762d3090a21c600e479dc75e68328c52774040cf9226
url: "https://pub.dev"
source: hosted
version: "6.5.0"
sdks: sdks:
dart: ">=3.3.1 <4.0.0" dart: ">=3.4.0 <4.0.0"
flutter: ">=1.17.0" flutter: ">=3.18.0-18.0.pre.54"

View File

@ -38,6 +38,7 @@ dependencies:
flutter_bloc: ^8.1.5 flutter_bloc: ^8.1.5
equatable: ^2.0.5 equatable: ^2.0.5
graphview: ^1.2.0 graphview: ^1.2.0
flutter_svg: ^2.0.10+1
dev_dependencies: dev_dependencies:
@ -63,9 +64,9 @@ flutter:
uses-material-design: true uses-material-design: true
# To add assets to your application, add an assets section, like this: # To add assets to your application, add an assets section, like this:
# assets: assets:
# - images/a_dot_burr.jpeg - assets/images/
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see # An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware # https://flutter.dev/assets-and-images/#resolution-aware