1 -> New Way of Localizations
2 -> Implementing Login Page 3 -> New way to achieve responsive designmain_design2.0
parent
3b3de831f0
commit
ca673787f1
@ -0,0 +1,53 @@
|
||||
<svg width="192" height="62" viewBox="0 0 192 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_676_3693" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="192" height="62">
|
||||
<path d="M192 0H0V61.1606H192V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_676_3693)">
|
||||
<path d="M60.5477 42.3658L57.2239 42.337L67.0643 16.2395L70.3369 16.2679L79.7231 42.5322L76.3994 42.5033L68.767 20.3965L68.5624 20.3947L60.5477 42.3658ZM61.8636 32.1496L75.2608 32.2658L75.2364 35.0782L61.8392 34.962L61.8636 32.1496ZM79.5135 19.1601L79.5379 16.3477L99.1736 16.5181L99.1492 19.3305L90.9165 19.2591L90.7138 42.6275L87.5435 42.6L87.7462 19.2316L79.5135 19.1601ZM124.953 29.8331C124.929 32.5944 124.41 34.9763 123.395 36.979C122.381 38.9816 121 40.5208 119.252 41.5966C117.503 42.6724 115.513 43.2006 113.28 43.1812C111.047 43.1618 109.066 42.5992 107.337 41.4932C105.608 40.3873 104.254 38.8243 103.274 36.8044C102.294 34.7845 101.816 32.3939 101.84 29.6326C101.864 26.8714 102.384 24.4894 103.398 22.4868C104.413 20.4841 105.794 18.9449 107.542 17.8691C109.29 16.7933 111.281 16.2651 113.513 16.2845C115.746 16.3039 117.727 16.8665 119.456 17.9725C121.186 19.0784 122.54 20.6414 123.52 22.6613C124.499 24.6812 124.977 27.0718 124.953 29.8331ZM121.885 29.8065C121.905 27.5395 121.542 25.623 120.797 24.0568C120.061 22.4907 119.053 21.3015 117.773 20.4892C116.501 19.677 115.073 19.264 113.488 19.2503C111.903 19.2365 110.463 19.6246 109.169 20.4146C107.884 21.2046 106.855 22.3761 106.083 23.9291C105.32 25.4822 104.928 27.3923 104.909 29.6592C104.889 31.9262 105.247 33.8427 105.984 35.4088C106.729 36.975 107.737 38.1642 109.008 38.9764C110.288 39.7887 111.721 40.2017 113.306 40.2154C114.891 40.2292 116.326 39.841 117.612 39.051C118.905 38.2611 119.934 37.0896 120.698 35.5365C121.47 33.9834 121.865 32.0735 121.885 29.8065ZM130.398 16.7889L134.181 16.8218L142.89 38.6311L143.197 38.6337L152.283 16.9788L156.067 17.0116L155.84 43.1924L152.874 43.1667L153.047 23.2754L152.791 23.2732L144.437 43.0935L141.573 43.0687L133.564 23.1064L133.309 23.1042L133.136 42.9955L130.17 42.9698L130.398 16.7889ZM176.685 23.7361C176.542 22.4394 175.929 21.4284 174.844 20.703C173.76 19.9777 172.425 19.6081 170.84 19.5944C169.681 19.5843 168.665 19.763 167.792 20.1305C166.928 20.498 166.25 21.0078 165.759 21.6598C165.276 22.3119 165.031 23.0555 165.024 23.8907C165.018 24.5895 165.179 25.1918 165.507 25.6975C165.843 26.1948 166.274 26.6119 166.8 26.9488C167.325 27.2773 167.877 27.5505 168.455 27.7686C169.032 27.9782 169.564 28.149 170.048 28.281L172.701 29.02C173.381 29.2049 174.138 29.4586 174.97 29.7812C175.811 30.1038 176.613 30.5412 177.375 31.0933C178.146 31.6369 178.779 32.3328 179.275 33.1808C179.77 34.0289 180.013 35.0666 180.002 36.2938C179.99 37.7085 179.608 38.9837 178.856 40.1192C178.114 41.2549 177.032 42.1532 175.611 42.8142C174.199 43.4753 172.488 43.7971 170.476 43.7796C168.601 43.7634 166.981 43.4468 165.614 42.8298C164.255 42.2128 163.189 41.3598 162.414 40.2707C161.648 39.1816 161.22 37.9207 161.13 36.4881L164.403 36.5165C164.479 37.5058 164.805 38.3268 165.379 38.9796C165.961 39.6238 166.698 40.1075 167.591 40.4306C168.491 40.7453 169.461 40.9071 170.501 40.9161C171.711 40.9266 172.8 40.74 173.766 40.3563C174.733 39.9641 175.5 39.4168 176.069 38.7143C176.637 38.0033 176.926 37.1706 176.934 36.2161C176.942 35.3468 176.705 34.6373 176.224 34.0877C175.743 33.538 175.108 33.0893 174.318 32.7415C173.528 32.3938 172.674 32.088 171.756 31.8244L168.543 30.876C166.502 30.2702 164.89 29.4167 163.707 28.3155C162.523 27.2143 161.939 25.7816 161.954 24.0175C161.967 22.5516 162.374 21.2767 163.176 20.1927C163.987 19.1003 165.068 18.2573 166.42 17.6639C167.78 17.0621 169.296 16.7684 170.966 16.7829C172.654 16.7975 174.151 17.1131 175.458 17.7295C176.765 18.3375 177.798 19.1647 178.556 20.2111C179.323 21.2575 179.721 22.4414 179.753 23.7628L176.685 23.7361Z" fill="#163A51"/>
|
||||
<path d="M37.7238 28.7006L37.0934 28.082C38.3695 26.7816 40.8731 24.2085 41.2151 23.785L41.9004 24.3425C41.4481 24.9 37.8753 28.5428 37.7238 28.6961" fill="#307CAB"/>
|
||||
<path d="M26.7455 54.3136L26.1439 53.6667C27.4782 52.4229 30.0983 49.9719 30.4596 49.5676L31.1177 50.1556C30.6394 50.6911 26.9043 54.166 26.7455 54.3136Z" fill="#307CAB"/>
|
||||
<path d="M41.5221 37.596C40.9635 37.1436 37.3071 33.5873 37.1522 33.4358L37.7679 32.8031C39.0739 34.0741 41.6555 36.5686 42.0773 36.9096L41.5221 37.596Z" fill="#307CAB"/>
|
||||
<path d="M31.7 59.0444C31.1115 58.6333 27.2164 55.3388 27.0508 55.1997L27.6213 54.5251C29.0127 55.7023 31.7617 58.0102 32.2061 58.3212L31.7 59.0444Z" fill="#307CAB"/>
|
||||
<path d="M21.6128 36.8118C21.0423 36.3753 17.2943 32.9145 17.1349 32.7675L17.7336 32.1184C19.0725 33.3549 21.7186 35.781 22.1494 36.1101L21.6128 36.8118Z" fill="#307CAB"/>
|
||||
<path d="M14.175 13.8069C13.6046 13.3704 9.85655 9.9096 9.69711 9.7626L10.2964 9.11353C11.6347 10.35 14.2808 12.7762 14.7116 13.1052L14.175 13.8069Z" fill="#307CAB"/>
|
||||
<path d="M40.492 20.4006C39.8887 20.0099 35.8806 16.8545 35.7098 16.7205L36.2566 16.0267C37.6882 17.1541 40.5168 19.3626 40.972 19.6588L40.492 20.4006Z" fill="#307CAB"/>
|
||||
<path d="M6.19675 36.2248C5.62626 35.7884 1.87825 32.3276 1.71881 32.1806L2.317 31.5315C3.65529 32.768 6.30134 35.1941 6.73218 35.5232L6.19675 36.2248Z" fill="#307CAB"/>
|
||||
<path d="M4.51299 44.0794L3.8707 43.4738C5.12135 42.148 7.57404 39.5279 7.90819 39.1011L8.60419 39.6444C8.16205 40.2098 4.66225 43.9222 4.51355 44.0805" fill="#307CAB"/>
|
||||
<path d="M48.049 22.3959C48.049 23.3035 47.7799 24.1906 47.2757 24.9453C46.7715 25.6999 46.0548 26.288 45.2163 26.6353C44.3778 26.9826 43.4552 27.0735 42.5651 26.8965C41.6749 26.7194 40.8573 26.2824 40.2155 25.6406C39.5738 24.9989 39.1368 24.1812 38.9597 23.2911C38.7826 22.401 38.8735 21.4783 39.2208 20.6398C39.5681 19.8014 40.1563 19.0847 40.9109 18.5805C41.6655 18.0763 42.5527 17.8071 43.4603 17.8071C44.0629 17.8071 44.6596 17.9258 45.2163 18.1564C45.773 18.387 46.2789 18.725 46.705 19.1511C47.1311 19.5772 47.4691 20.0831 47.6997 20.6398C47.9303 21.1966 48.049 21.7933 48.049 22.3959Z" fill="#92D9F8"/>
|
||||
<path d="M48.049 39.87C48.049 40.7776 47.7799 41.6648 47.2757 42.4194C46.7715 43.174 46.0548 43.7621 45.2163 44.1095C44.3778 44.4568 43.4552 44.5476 42.5651 44.3706C41.6749 44.1935 40.8573 43.7565 40.2155 43.1147C39.5738 42.473 39.1368 41.6554 38.9597 40.7652C38.7826 39.8751 38.8735 38.9524 39.2208 38.114C39.5681 37.2755 40.1563 36.5588 40.9109 36.0546C41.6655 35.5504 42.5527 35.2812 43.4603 35.2812C44.6773 35.2812 45.8445 35.7647 46.705 36.6253C47.5656 37.4858 48.049 38.653 48.049 39.87Z" fill="#92D9F8"/>
|
||||
<path d="M12.0209 23.2117C12.0209 25.2471 10.578 26.9004 8.79813 26.9004C7.01827 26.9004 5.57538 25.2488 5.57538 23.2117C5.57538 21.1746 7.01827 19.5231 8.79813 19.5231C10.578 19.5231 12.0209 21.1746 12.0209 23.2117Z" fill="#5CB1DB"/>
|
||||
<path d="M4.28118 30.9452C4.28118 32.9806 3.32283 34.6338 2.14059 34.6338C0.958346 34.6338 0 32.9823 0 30.9452C0 28.908 0.958346 27.2588 2.14059 27.2588C3.32283 27.2588 4.28118 28.9103 4.28118 30.9474" fill="#226187"/>
|
||||
<path d="M5.1044 19.0521C3.97021 20.7393 2.49962 21.7366 1.82058 21.2798C1.14154 20.823 1.51018 19.0849 2.64493 17.3978C3.77968 15.7106 5.24914 14.7133 5.92874 15.1701C6.60835 15.627 6.23915 17.365 5.1044 19.0521Z" fill="#226187"/>
|
||||
<path d="M37.3303 2.646C37.3303 4.00295 35.6703 5.10547 33.6224 5.10547C31.5745 5.10547 29.9151 4.00408 29.9151 2.646C29.9151 1.28791 31.5745 0.186523 33.6218 0.186523C35.6691 0.186523 37.3303 1.28791 37.3303 2.646Z" fill="#92D9F8"/>
|
||||
<path d="M25.2902 56.4943C23.2547 56.4943 21.6027 55.2278 21.6027 53.6673C21.6027 52.1068 23.2536 50.8403 25.2902 50.8403C27.3267 50.8403 28.9777 52.1068 28.9777 53.6673C28.9777 55.2278 27.3267 56.4943 25.2902 56.4943Z" fill="#5CB1DB"/>
|
||||
<path d="M33.9594 61.1623C31.8912 61.1623 30.2148 60.1333 30.2148 58.8628C30.2148 57.5924 31.8912 56.5634 33.9594 56.5634C36.0276 56.5634 37.704 57.5924 37.704 58.8628C37.704 60.1333 36.0276 61.1623 33.9594 61.1623Z" fill="#5CB1DB"/>
|
||||
<path d="M34.2833 11.0206C33.8097 11.0546 33.3342 11.0529 32.8608 11.0156C31.6859 10.8346 29.8393 10.077 29.0823 7.20931C28.9612 6.49075 28.6405 5.82072 28.1567 5.27581C27.6729 4.7309 27.0456 4.33308 26.3464 4.12783C25.6472 3.92258 24.9044 3.91817 24.2029 4.11511C23.5013 4.31205 22.8693 4.70239 22.379 5.24152C21.8888 5.78065 21.5602 6.44682 21.4306 7.1639C21.3011 7.88098 21.3759 8.62004 21.6465 9.29661C21.9172 9.97318 22.3727 10.56 22.961 10.9899C23.5493 11.4199 24.2467 11.6756 24.9735 11.728C26.3927 12.0191 29.6471 13.0352 30.6507 16.3173L30.6597 16.302C30.9142 16.9623 31.3442 17.5406 31.9033 17.9743C32.4624 18.4081 33.1294 18.6809 33.8322 18.7633C34.5351 18.8457 35.2471 18.7346 35.8914 18.4419C36.5356 18.1492 37.0878 17.6861 37.4881 17.1026C37.8884 16.5191 38.1217 15.8373 38.1629 15.1308C38.204 14.4244 38.0515 13.7201 37.7216 13.0941C37.3917 12.468 36.8971 11.9439 36.2912 11.5784C35.6852 11.2129 34.991 11.0204 34.2833 11.0206Z" fill="#92D9F8"/>
|
||||
</g>
|
||||
<mask id="mask1_676_3693" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="9" width="25" height="42">
|
||||
<path d="M12.0729 14.5402C12.073 15.7571 12.5566 16.9242 13.4171 17.7846C14.2776 18.645 15.4447 19.1284 16.6616 19.1284C16.6616 19.1284 20.1021 18.9995 20.1897 22.376C20.1924 22.6865 20.1322 22.9942 20.0127 23.2807C19.6595 23.9693 19.1547 24.5688 18.5364 25.0343C17.918 25.4997 17.2023 25.819 16.4428 25.968C15.9886 26.0584 15.5278 26.1125 15.065 26.1297C15.065 26.1297 15.0695 26.1382 15.0701 26.1405C13.9025 26.2085 12.8051 26.7201 12.0024 27.5706C11.1996 28.4211 10.7522 29.5461 10.7516 30.7156C10.752 30.8811 10.7612 31.0464 10.7793 31.2109C10.797 31.579 10.7781 31.948 10.7227 32.3123C10.5034 33.0535 9.87463 34.1216 8.09137 34.601L8.09872 34.6067C7.44017 34.8197 6.85053 35.2049 6.39085 35.7224C5.93117 36.2399 5.61815 36.8708 5.4842 37.5498C5.35026 38.2289 5.40025 38.9314 5.62901 39.5847C5.85777 40.238 6.25698 40.8182 6.78531 41.2654L6.76382 41.2761L6.84185 41.314C7.52475 41.8723 8.37801 42.1803 9.26005 42.187C9.66579 42.2436 10.0589 42.3691 10.4225 42.5579C11.4442 43.1232 12.506 44.3496 12.649 47.0081C12.649 47.0143 12.649 47.0205 12.649 47.0267C12.649 47.0505 12.653 47.0731 12.6541 47.0969L12.6592 47.0912C12.7469 47.8206 13.0397 48.5102 13.5034 49.0799C13.9672 49.6496 14.5831 50.0762 15.2795 50.3101C15.9759 50.544 16.7244 50.5756 17.438 50.4013C18.1517 50.2269 18.8013 49.8539 19.3115 49.3253C19.8217 48.7967 20.1715 48.1342 20.3204 47.4148C20.4694 46.6955 20.4112 45.9486 20.1528 45.2609C19.8944 44.5732 19.4463 43.9729 18.8605 43.5296C18.2747 43.0862 17.5752 42.8181 16.8431 42.7563L16.8477 42.7473C16.415 42.7097 15.9938 42.5882 15.6077 42.3894C14.6144 41.7872 13.8879 40.829 13.5763 39.71C13.301 38.9925 13.2637 38.2056 13.47 37.4653C13.787 36.7302 14.3144 36.1052 14.9858 35.6691V35.6742C15.3167 35.4515 15.6929 35.3051 16.0872 35.2456V35.2411C17.0429 35.0834 17.9242 34.6272 18.6048 33.9379C19.2853 33.2485 19.7301 32.3614 19.8754 31.4037L19.885 31.4088C19.9136 30.8921 20.0356 30.3848 20.2451 29.9116C20.741 29.109 21.4214 28.4363 22.2297 27.9496C23.0379 27.463 23.9507 27.1763 24.8921 27.1135L24.8802 27.1028C26.0835 27.0708 27.226 26.5671 28.0613 25.7003C28.8966 24.8335 29.3577 23.6732 29.3451 22.4695C29.3326 21.2659 28.8474 20.1154 27.9943 19.2662C27.1411 18.417 25.9884 17.9373 24.7847 17.9303C24.692 17.9303 24.6004 17.9388 24.5088 17.9439L24.5161 17.936C24.5161 17.936 21.9424 18.0491 21.2838 15.1164C21.2563 14.9482 21.2437 14.7779 21.2459 14.6075C21.2459 14.586 21.2493 14.5645 21.2493 14.5425C21.2493 13.3255 20.7658 12.1583 19.9053 11.2977C19.0447 10.4372 17.8775 9.95374 16.6605 9.95374C15.4435 9.95374 14.2763 10.4372 13.4158 11.2977C12.5552 12.1583 12.0718 13.3255 12.0718 14.5425" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_676_3693)">
|
||||
<path d="M29.3757 10.2314L29.0054 9.95154H29.3542L29.3757 9.96793V10.2314Z" fill="#50A2CE"/>
|
||||
<path d="M29.3757 10.4954L28.6565 9.95264H29.0054L29.3757 10.2325V10.4954Z" fill="#51A3CE"/>
|
||||
<path d="M29.3752 10.7578L28.3071 9.95154H28.6554L29.3746 10.4943L29.3752 10.7578Z" fill="#52A4CF"/>
|
||||
<path d="M29.3757 11.0213L27.9588 9.95154H28.3077L29.3757 10.7578V11.0213Z" fill="#52A5D0"/>
|
||||
<path d="M29.3757 11.2869L27.61 9.95374H27.9588L29.3757 11.024V11.2869Z" fill="#53A6D1"/>
|
||||
<path d="M29.3757 11.5482L27.2611 9.95154H27.61L29.3757 11.287V11.5482Z" fill="#54A6D2"/>
|
||||
<path d="M29.3757 11.8117L26.9123 9.95154H27.2606L29.3752 11.5482L29.3757 11.8117Z" fill="#54A7D3"/>
|
||||
<path d="M29.3757 12.0746L26.5634 9.95093H26.9123L29.3757 11.8111V12.0746Z" fill="#55A8D3"/>
|
||||
<path d="M29.3757 12.338L26.2146 9.95093H26.5634L29.3757 12.0746V12.338Z" fill="#56A9D4"/>
|
||||
<path d="M29.3752 12.6015L25.8652 9.95154H26.214L29.3752 12.3386V12.6015Z" fill="#57AAD5"/>
|
||||
<path d="M29.3757 12.865L25.5197 9.95154H25.868L29.378 12.6015L29.3757 12.865Z" fill="#57ABD6"/>
|
||||
<path d="M29.3757 13.1285L25.1686 9.95154H25.5175L29.3757 12.865V13.1285Z" fill="#58ACD7"/>
|
||||
<path d="M29.3757 13.392L24.8198 9.95154H25.1686L29.3757 13.1285V13.392Z" fill="#59ADD8"/>
|
||||
<path d="M29.3757 13.6554L24.4709 9.95154H24.8197L29.3757 13.392V13.6554Z" fill="#59AED9"/>
|
||||
<path d="M29.3751 13.9188L24.1215 9.95203H24.4698L29.3746 13.6559L29.3751 13.9188Z" fill="#5AAFDA"/>
|
||||
<path d="M29.3757 14.1818L23.7732 9.95154H24.1226L29.3763 13.9184L29.3757 14.1818Z" fill="#5BB0DA"/>
|
||||
<path d="M29.3757 14.4453L23.4249 9.95154H23.7738L29.3763 14.1818L29.3757 14.4453Z" fill="#5CB1DB"/>
|
||||
<path d="M29.3758 38.3515L20.1937 50.5109H5.40921V19.3655L12.5174 9.95166H23.4222L29.3758 14.4454V38.3515Z" fill="#5CB1DB"/>
|
||||
</g>
|
||||
<path d="M19.7968 55.5733C19.0406 55.119 18.1946 54.8352 17.3175 54.7416H17.3209C17.2898 54.7416 17.2643 54.7382 17.2355 54.7365H17.1846C16.9042 54.7329 16.6258 54.6877 16.3586 54.6025C15.8372 54.3155 15.3808 53.9238 15.018 53.452C14.6551 52.9802 14.3938 52.4385 14.2502 51.8609C14.0012 50.8136 13.4475 49.8636 12.6592 49.1306C11.1892 47.6605 9.3799 47.0782 8.62679 47.8341C7.87368 48.5901 8.45208 50.3954 9.92324 51.8665C10.4937 52.4531 11.1737 52.922 11.9247 53.2467C11.9247 53.2467 12.7163 53.5344 12.9866 53.6735C13.7465 54.11 15.1814 55.0757 15.4692 56.2647C15.6637 57.1343 16.5587 58.1758 17.8631 58.9289C19.6656 59.9698 21.5597 60.0631 22.094 59.137C22.6283 58.2108 21.6004 56.6181 19.7979 55.575" fill="#226187"/>
|
||||
<path d="M39.092 30.6925C39.092 29.4755 38.6086 28.3083 37.748 27.4478C36.8875 26.5872 35.7203 26.1038 34.5033 26.1038C33.2863 26.1038 32.1191 26.5872 31.2585 27.4478C30.398 28.3083 29.9145 29.4755 29.9145 30.6925C29.9145 30.6925 29.7489 33.8497 24.6281 34.4094L24.636 34.4168C23.5424 34.4926 22.5123 34.9578 21.7323 35.7281C20.9523 36.4984 20.4742 37.5226 20.3847 38.6151C20.2952 39.7077 20.6002 40.7961 21.2444 41.6831C21.8886 42.57 22.8293 43.1967 23.8959 43.4495V43.4586C23.8959 43.4586 27.2419 44.6182 28.4603 49.2646C28.6195 50.0843 28.9993 50.845 29.5588 51.4647C30.1184 52.0845 30.8364 52.5398 31.6356 52.7816C32.4348 53.0234 33.2848 53.0425 34.0941 52.837C34.9033 52.6314 35.6411 52.2089 36.228 51.615C36.8149 51.021 37.2286 50.2782 37.4245 49.4666C37.6204 48.6549 37.5911 47.8052 37.3398 47.009C37.0885 46.2127 36.6246 45.5002 35.9983 44.948C35.3719 44.3959 34.6067 44.0252 33.7852 43.8759L33.7886 43.8719C33.7886 43.8719 33.7598 43.8719 33.7078 43.864C33.6558 43.8561 33.5896 43.8442 33.5297 43.8368C32.7901 43.7028 30.6592 43.0498 29.7777 40.0227C29.5782 39.3105 29.5979 38.5547 29.8342 37.8538C30.0135 37.4843 30.2248 37.1313 30.4658 36.7988C31.2534 36.0183 32.2603 35.4966 33.3521 35.3033C33.6812 35.2622 34.0135 35.2527 34.3444 35.275C34.3976 35.275 34.4507 35.2824 34.5038 35.2824C35.7208 35.2822 36.8879 34.7987 37.7484 33.9382C38.6089 33.0777 39.0925 31.9106 39.0926 30.6936" fill="#307CAB"/>
|
||||
<path d="M21.2408 0.538203C20.6415 -0.346077 18.7587 -0.117091 17.0359 1.04989C16.2933 1.53407 15.666 2.17545 15.1984 2.9287L15.1933 2.92078C15.1933 2.92078 15.1797 2.95188 15.1537 3.00333C15.1464 3.0169 15.1402 3.0299 15.1328 3.04347C14.985 3.31715 14.8067 3.57321 14.6013 3.80676C13.9649 4.5891 13.1402 5.19704 12.2046 5.57362L12.1368 5.59115C12.1068 5.59906 12.0768 5.60415 12.0469 5.61093C11.8875 5.64133 11.7261 5.66022 11.564 5.66747L11.5674 5.67087C10.6888 5.7438 9.54839 6.41832 8.59966 7.51462C7.23762 9.08812 6.79039 10.9307 7.59608 11.6301C8.40177 12.3295 10.163 11.6211 11.525 10.047C12.1221 9.38204 12.5641 8.5928 12.8192 7.73626C12.8492 7.62318 12.8803 7.52197 12.9119 7.42868C13.2459 6.87997 13.6934 6.40906 14.2244 6.04756C14.7554 5.68606 15.3576 5.44234 15.9905 5.33276C16.068 5.32258 16.1409 5.30845 16.2223 5.30166C17.2976 5.25484 18.335 4.89068 19.2037 4.25512C20.9264 3.08757 21.8373 1.42474 21.2391 0.539899" fill="#226187"/>
|
||||
<path d="M6.62642 42.4471C7.64414 44.2077 7.751 46.0487 6.86728 46.5587C5.98357 47.0686 4.444 46.0549 3.42741 44.2937C2.41083 42.5325 2.30284 40.6927 3.18656 40.1827C4.07027 39.6727 5.60984 40.6865 6.62642 42.4471Z" fill="#5CB1DB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,9 @@
|
||||
{
|
||||
"login" : "تسجيل الدخول",
|
||||
"enterCredsToLogin" : "أدخل بياناتك الخاصة لتسجيل الدخول",
|
||||
"forgotPassword" : "نسيت كلمة السر",
|
||||
"password": "كلمة السر",
|
||||
"username" : "اسم المستخدم",
|
||||
"requiredField" : "الحقل مطلوب",
|
||||
"passwordLengthMessage" : "كلمة السر أقل من 6 خانات"
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"login" : "Login",
|
||||
"enterCredsToLogin" : "Enter you credential to login",
|
||||
"forgotPassword" : "Forgot Password",
|
||||
"password" : "Password",
|
||||
"username" : "Username",
|
||||
"requiredField" : "Required Field",
|
||||
"passwordLengthMessage" : "Password length is less than 6 characters"
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:localization/localization.dart';
|
||||
|
||||
import '../models/enums/translation_keys.dart';
|
||||
|
||||
extension BuildContextExtension on BuildContext {
|
||||
String translate(TranslationKeys translationKey) {
|
||||
return translationKey.name.i18n([Localizations.localeOf(this).toString()]);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,18 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:test_sa/views/app_style/colors.dart';
|
||||
import 'package:test_sa/new_views/app_style/app_color.dart';
|
||||
|
||||
import '../models/size_config.dart';
|
||||
|
||||
extension IntExtensions on int {
|
||||
Widget get height => SizedBox(height: toDouble());
|
||||
Widget get height => SizedBox(height: toScreenHeight);
|
||||
|
||||
Widget get width => SizedBox(width: toScreenWidth);
|
||||
|
||||
Widget get divider => Divider(height: toScreenHeight, thickness: toScreenHeight, color: AppColor.neutral30);
|
||||
|
||||
Widget get width => SizedBox(width: toDouble());
|
||||
Widget get makeItSquare => SizedBox(width: toScreenWidth, height: toScreenWidth);
|
||||
|
||||
Widget get divider => Divider(height: toDouble(), thickness: toDouble(), color: AColors.greyEF);
|
||||
double get toScreenHeight => (this / 932) * SizeConfig.screenHeight;
|
||||
|
||||
Widget get makeItSquare => SizedBox(width: toDouble(), height: toDouble());
|
||||
double get toScreenWidth => (this / 430) * SizeConfig.screenWidth;
|
||||
}
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
enum TranslationKeys {
|
||||
login,
|
||||
enterCredsToLogin,
|
||||
forgotPassword,
|
||||
password,
|
||||
username,
|
||||
requiredField,
|
||||
passwordLengthMessage,
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
abstract class SizeConfig {
|
||||
static MediaQueryData _mediaQueryData;
|
||||
static double screenWidth;
|
||||
static double screenHeight;
|
||||
static double defaultSize;
|
||||
|
||||
/// Call this method to save the height and width of the available layout
|
||||
static void init(BuildContext context) {
|
||||
_mediaQueryData = MediaQuery.of(context);
|
||||
screenWidth = _mediaQueryData.size.width;
|
||||
screenHeight = _mediaQueryData.size.height;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:test_sa/extensions/context_extension.dart';
|
||||
import 'package:test_sa/models/enums/translation_keys.dart';
|
||||
|
||||
class AppFilledButton extends StatelessWidget {
|
||||
final VoidCallback onPressed;
|
||||
final TranslationKeys label;
|
||||
const AppFilledButton({
|
||||
@required this.onPressed,
|
||||
@required this.label,
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 20,
|
||||
),
|
||||
child: ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
),
|
||||
onPressed: onPressed,
|
||||
child: Text(context.translate(label)),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,20 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:test_sa/views/app_style/sizing.dart';
|
||||
|
||||
import 'app_loading.dart';
|
||||
import '../../views/widgets/loaders/app_loading.dart';
|
||||
|
||||
class ALazyLoading extends StatelessWidget {
|
||||
const ALazyLoading({Key key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Center(
|
||||
child: Container(
|
||||
height: 36 * AppStyle.getScaleFactor(context),
|
||||
width: 36 * AppStyle.getScaleFactor(context),
|
||||
padding: EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(color: Colors.white, shape: BoxShape.circle, boxShadow: [AppStyle.boxShadow]),
|
||||
child: ALoading(),
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle, boxShadow: [AppStyle.boxShadow]),
|
||||
child: const ALoading(),
|
||||
),
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,119 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:test_sa/extensions/context_extension.dart';
|
||||
import 'package:test_sa/extensions/int_extensions.dart';
|
||||
import 'package:test_sa/models/enums/translation_keys.dart';
|
||||
import 'package:test_sa/new_views/app_style/app_color.dart';
|
||||
import 'package:test_sa/views/app_style/sizing.dart';
|
||||
|
||||
class AppTextFormField extends StatefulWidget {
|
||||
final Function(String) onSaved;
|
||||
final Function(String) validator;
|
||||
final Function(String) onChange;
|
||||
final bool obscureText;
|
||||
final VoidCallback showPassword;
|
||||
final TranslationKeys hintText;
|
||||
final TranslationKeys labelText;
|
||||
final TextInputType textInputType;
|
||||
final String initialValue;
|
||||
final TextStyle style;
|
||||
final bool enable;
|
||||
final TextAlign textAlign;
|
||||
final FocusNode node;
|
||||
final Widget suffixIcon;
|
||||
final IconData prefixIconData;
|
||||
final double prefixIconSize;
|
||||
final TextEditingController controller;
|
||||
final TextInputAction textInputAction;
|
||||
final VoidCallback onAction;
|
||||
|
||||
const AppTextFormField({
|
||||
Key key,
|
||||
this.onSaved,
|
||||
this.validator,
|
||||
this.node,
|
||||
this.onChange,
|
||||
this.obscureText,
|
||||
this.showPassword,
|
||||
this.hintText,
|
||||
this.labelText,
|
||||
this.textInputType = TextInputType.text,
|
||||
this.initialValue,
|
||||
this.enable = true,
|
||||
this.style,
|
||||
this.textAlign,
|
||||
this.suffixIcon,
|
||||
this.prefixIconData,
|
||||
this.prefixIconSize,
|
||||
this.controller,
|
||||
this.textInputAction,
|
||||
this.onAction,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<AppTextFormField> createState() => _AppTextFormFieldState();
|
||||
}
|
||||
|
||||
class _AppTextFormFieldState extends State<AppTextFormField> {
|
||||
@override
|
||||
void initState() {
|
||||
if (widget.controller != null) widget.controller.text = widget.initialValue;
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
alignment: Alignment.topCenter,
|
||||
children: [
|
||||
Container(
|
||||
height: widget.textInputType == TextInputType.multiline ? null : 56.toScreenHeight,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth),
|
||||
child: TextFormField(
|
||||
focusNode: widget.node,
|
||||
enabled: widget.enable,
|
||||
onSaved: widget.onSaved,
|
||||
initialValue: widget.controller != null ? null : widget.initialValue,
|
||||
validator: widget.validator,
|
||||
onChanged: widget.onChange,
|
||||
textAlign: TextAlign.left,
|
||||
obscureText: widget.obscureText ?? false,
|
||||
keyboardType: widget.textInputType,
|
||||
maxLines: widget.textInputType == TextInputType.multiline ? null : 1,
|
||||
obscuringCharacter: "*",
|
||||
controller: widget.controller,
|
||||
textInputAction: widget.textInputType == TextInputType.multiline ? null : widget.textInputAction ?? TextInputAction.next,
|
||||
onEditingComplete: widget.onAction ?? () => FocusScope.of(context).nextFocus(),
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
decoration: InputDecoration(
|
||||
border: InputBorder.none,
|
||||
suffixIconConstraints: const BoxConstraints(minWidth: 0),
|
||||
disabledBorder: InputBorder.none,
|
||||
focusedBorder: InputBorder.none,
|
||||
enabledBorder: InputBorder.none,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(),
|
||||
errorStyle: Theme.of(context).textTheme.bodySmall?.copyWith(color: AppColor.red60, height: 0.7),
|
||||
floatingLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(color: AppColor.neutral20, fontWeight: FontWeight.w500),
|
||||
hintText: widget.hintText != null ? context.translate(widget.hintText) : null,
|
||||
labelText: widget.labelText != null ? context.translate(widget.labelText) : null,
|
||||
suffixIcon: widget.prefixIconData == null
|
||||
? null
|
||||
: Icon(
|
||||
widget.prefixIconData,
|
||||
size: widget.prefixIconSize == null ? 20 * AppStyle.getScaleFactor(context) : (widget.prefixIconSize - 10) * AppStyle.getScaleFactor(context),
|
||||
color: const Color(0xff2e303a),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,28 +1,131 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:fluttertoast/fluttertoast.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:test_sa/extensions/context_extension.dart';
|
||||
import 'package:test_sa/extensions/int_extensions.dart';
|
||||
import 'package:test_sa/models/enums/translation_keys.dart';
|
||||
import 'package:test_sa/new_views/app_style/app_color.dart';
|
||||
import 'package:test_sa/new_views/common_widgets/app_lazy_loading.dart';
|
||||
|
||||
class LoginPage extends StatelessWidget {
|
||||
import '../../controllers/providers/api/user_provider.dart';
|
||||
import '../../controllers/providers/settings/setting_provider.dart';
|
||||
import '../../controllers/validator/validator.dart';
|
||||
import '../../models/user.dart';
|
||||
import '../common_widgets/app_filled_button.dart';
|
||||
import '../common_widgets/app_text_form_field.dart';
|
||||
|
||||
class LoginPage extends StatefulWidget {
|
||||
static const String routeName = "/login_page";
|
||||
const LoginPage({Key key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<LoginPage> createState() => _LoginPageState();
|
||||
}
|
||||
|
||||
class _LoginPageState extends State<LoginPage> {
|
||||
final User _user = User();
|
||||
UserProvider _userProvider;
|
||||
SettingProvider _settingProvider;
|
||||
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Image.asset("assets/images/logo.png", height: 60),
|
||||
Text(
|
||||
"Login",
|
||||
style: Theme.of(context).textTheme.displayMedium?.copyWith(color: AppColor.neutral50),
|
||||
_userProvider = Provider.of<UserProvider>(context);
|
||||
_settingProvider = Provider.of<SettingProvider>(context);
|
||||
|
||||
return Form(
|
||||
key: _formKey,
|
||||
child: Scaffold(
|
||||
body: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
right: 16.toScreenWidth,
|
||||
left: 16.toScreenWidth,
|
||||
bottom: 150.toScreenHeight,
|
||||
top: MediaQuery.of(context).viewPadding.top,
|
||||
),
|
||||
Text(
|
||||
"Enter you credential to login",
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(color: AppColor.neutral20),
|
||||
child: Center(
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Hero(
|
||||
tag: "logo",
|
||||
child: SvgPicture.asset("assets/images/logo.svg", height: 64.toScreenHeight),
|
||||
),
|
||||
64.height,
|
||||
Text(
|
||||
context.translate(TranslationKeys.login),
|
||||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(color: AppColor.neutral50, fontWeight: FontWeight.w600),
|
||||
),
|
||||
Text(
|
||||
context.translate(TranslationKeys.enterCredsToLogin),
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(color: AppColor.neutral20, fontWeight: FontWeight.w500),
|
||||
),
|
||||
32.height,
|
||||
AppTextFormField(
|
||||
initialValue: _user?.userName,
|
||||
validator: (value) => Validator.hasValue(value) ? null : context.translate(TranslationKeys.requiredField),
|
||||
labelText: TranslationKeys.username,
|
||||
textInputType: TextInputType.name,
|
||||
onSaved: (value) {
|
||||
_user.userName = value;
|
||||
},
|
||||
),
|
||||
16.height,
|
||||
AppTextFormField(
|
||||
initialValue: _user?.password,
|
||||
labelText: TranslationKeys.password,
|
||||
obscureText: true,
|
||||
validator: (value) => Validator.isValidPassword(value)
|
||||
? null
|
||||
: value.isEmpty
|
||||
? context.translate(TranslationKeys.requiredField)
|
||||
: context.translate(TranslationKeys.passwordLengthMessage),
|
||||
onSaved: (value) {
|
||||
_user.password = value;
|
||||
},
|
||||
),
|
||||
16.height,
|
||||
Align(
|
||||
alignment: AlignmentDirectional.centerEnd,
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
/// TODO [zaid] : push to another screen
|
||||
},
|
||||
child: Text(
|
||||
"${context.translate(TranslationKeys.forgotPassword)}?",
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: AppColor.primary50, fontWeight: FontWeight.w500),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
|
||||
floatingActionButton: SizedBox(
|
||||
width: double.infinity,
|
||||
child: AppFilledButton(label: TranslationKeys.login, onPressed: _login),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _login() async {
|
||||
if (!_formKey.currentState.validate()) return;
|
||||
_formKey.currentState.save();
|
||||
showDialog(context: context, barrierDismissible: false, builder: (context) => const ALazyLoading());
|
||||
int status = await _userProvider.login(user: _user);
|
||||
Navigator.pop(context);
|
||||
if (status >= 200 && status < 300 && _userProvider.user.isAuthenticated ?? false) {
|
||||
_settingProvider.setUser(_userProvider.user);
|
||||
|
||||
/// TODO [zaid] : push to home page
|
||||
} else {
|
||||
Fluttertoast.showToast(msg: _userProvider.user.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue