Images and Some demos fixed
This commit is contained in:
Bahadır Sofuoğlu
46
src/assets/layout/images/asset-access.svg
Normal file
46
src/assets/layout/images/asset-access.svg
Normal file
@@ -0,0 +1,46 @@
|
||||
<svg width="440" height="316" viewBox="0 0 440 316" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1404_1811)">
|
||||
<path opacity="0.1" d="M433.033 212.258C422.828 233.31 402.106 247.387 380.632 256.67C351.721 269.172 319.884 274.131 288.485 272.034C282.982 271.668 277.496 271.083 272.027 270.279C253.031 267.507 234.512 262.115 216.998 254.254C211.944 251.978 206.992 249.493 202.142 246.799C194.042 242.31 186.28 237.234 178.92 231.612C177.069 230.199 175.243 228.75 173.443 227.265C172.195 226.235 170.958 225.183 169.702 224.161C167.052 222.006 164.325 219.959 161.283 218.427C160.365 217.964 159.424 217.549 158.463 217.182C148.83 213.518 137.723 214.901 127.694 217.758C120.066 219.932 112.63 222.909 105.01 225.033C101.62 226.007 98.1665 226.741 94.674 227.23C86.8766 228.217 78.9581 227.522 71.452 225.19L70.8106 224.991C69.7352 224.653 68.6687 224.283 67.6112 223.881L66.9697 223.635C65.9455 223.241 64.943 222.817 63.9623 222.364L63.3209 222.072C62.2967 221.595 61.2942 221.092 60.3135 220.562C59.9601 220.378 59.6106 220.178 59.2649 219.99C53.6852 216.874 48.6132 212.925 44.224 208.279C44.0973 208.152 43.9782 208.022 43.8399 207.895C43.2292 207.234 42.6301 206.562 42.0501 205.875C41.835 205.621 41.6199 205.368 41.4087 205.107C40.7199 204.267 40.0554 203.408 39.4152 202.529C39.3192 202.403 39.227 202.272 39.1349 202.145C36.5121 198.517 34.3378 194.585 32.6591 190.434C32.6054 190.308 32.5554 190.177 32.5093 190.05C31.9972 188.732 31.5299 187.391 31.1074 186.029C30.9346 185.46 30.7694 184.877 30.6235 184.308C30.5735 184.139 30.5274 183.966 30.4852 183.797C28.365 175.451 28.123 166.774 28.123 158.148C28.123 157.142 28.123 156.137 28.123 155.133C28.1845 141.179 28.3996 126.987 30.4583 113.225C30.4583 113.129 30.4852 113.033 30.5006 112.941C31.1896 108.308 32.1268 103.715 33.3082 99.1826C34.5447 94.4268 36.1249 89.7671 38.0364 85.2402C42.7722 74.1017 49.6589 63.9656 57.3061 54.5708C76.5681 30.9301 101.83 11.0843 131.397 3.65602C163.257 -4.34454 198.666 3.32187 224.365 23.7823C232.201 30.0198 239.241 37.4059 248.04 42.1878C255.722 46.3513 264.714 48.0758 272.941 44.7996C279.739 42.0917 284.164 40.7474 291.8 41.1584C307.607 42.0527 323.191 45.3167 338.029 50.8413C338.628 51.0602 339.227 51.2868 339.822 51.5134C378.504 66.3123 411.754 95.7143 429.038 133.497C429.497 134.496 429.941 135.502 430.371 136.516C440.676 160.587 444.402 188.798 433.033 212.258Z" fill="#F79530"/>
|
||||
<path opacity="0.1" d="M46.2061 285.915C64.9326 285.915 80.1135 283.476 80.1135 280.468C80.1135 277.461 64.9326 275.022 46.2061 275.022C27.4796 275.022 12.2988 277.461 12.2988 280.468C12.2988 283.476 27.4796 285.915 46.2061 285.915Z" fill="#F79530"/>
|
||||
<path d="M404.822 41.9265H49.4057C46.7562 41.9265 44.6084 44.0743 44.6084 46.7238V243.896C44.6084 246.545 46.7562 248.693 49.4057 248.693H404.822C407.471 248.693 409.619 246.545 409.619 243.896V46.7238C409.619 44.0743 407.471 41.9265 404.822 41.9265Z" fill="url(#paint0_linear_1404_1811)"/>
|
||||
<path d="M404.283 44.8341H49.9848C47.3353 44.8341 45.1875 46.9819 45.1875 49.6314V243.208C45.1875 245.857 47.3353 248.005 49.9848 248.005H404.283C406.933 248.005 409.08 245.857 409.08 243.208V49.6314C409.08 46.9819 406.933 44.8341 404.283 44.8341Z" fill="white"/>
|
||||
<path d="M404.283 44.8341H49.9848C47.3353 44.8341 45.1875 46.9819 45.1875 49.6314V243.208C45.1875 245.857 47.3353 248.005 49.9848 248.005H404.283C406.933 248.005 409.08 245.857 409.08 243.208V49.6314C409.08 46.9819 406.933 44.8341 404.283 44.8341Z" fill="white"/>
|
||||
<path opacity="0.04" d="M404.283 44.8341H49.9848C47.3353 44.8341 45.1875 46.9819 45.1875 49.6314V243.208C45.1875 245.857 47.3353 248.005 49.9848 248.005H404.283C406.933 248.005 409.08 245.857 409.08 243.208V49.6314C409.08 46.9819 406.933 44.8341 404.283 44.8341Z" fill="white"/>
|
||||
<path d="M407.233 42.5027H47.035C46.545 42.5027 46.0751 42.6973 45.7286 43.0438C45.3821 43.3903 45.1875 43.8602 45.1875 44.3502V52.1587H409.065V44.3502C409.065 43.8628 408.873 43.3952 408.529 43.0492C408.186 42.7032 407.72 42.5067 407.233 42.5027Z" fill="#5A5773"/>
|
||||
<path d="M52.4546 49.8273C53.8334 49.8273 54.9512 48.7095 54.9512 47.3307C54.9512 45.9519 53.8334 44.8341 52.4546 44.8341C51.0758 44.8341 49.958 45.9519 49.958 47.3307C49.958 48.7095 51.0758 49.8273 52.4546 49.8273Z" fill="white"/>
|
||||
<path d="M59.1763 49.8273C60.5551 49.8273 61.6728 48.7095 61.6728 47.3307C61.6728 45.9519 60.5551 44.8341 59.1763 44.8341C57.7974 44.8341 56.6797 45.9519 56.6797 47.3307C56.6797 48.7095 57.7974 49.8273 59.1763 49.8273Z" fill="white"/>
|
||||
<path d="M65.8979 49.8273C67.2768 49.8273 68.3945 48.7095 68.3945 47.3307C68.3945 45.9519 67.2768 44.8341 65.8979 44.8341C64.5191 44.8341 63.4014 45.9519 63.4014 47.3307C63.4014 48.7095 64.5191 49.8273 65.8979 49.8273Z" fill="white"/>
|
||||
<path opacity="0.2" d="M172.813 70.3184H75.1582V78.607H172.813V70.3184Z" fill="#F79530"/>
|
||||
<path opacity="0.1" d="M379.11 103.553H75.1582V231.055H379.11V103.553Z" fill="#5A5773"/>
|
||||
<path opacity="0.1" d="M253.125 111.869H247.921V101.76C247.921 90.3524 238.826 80.8693 227.418 80.6965C224.668 80.6676 221.938 81.1833 219.388 82.214C216.837 83.2447 214.516 84.77 212.558 86.7019C210.599 88.6338 209.043 90.9341 207.978 93.4704C206.912 96.0066 206.36 98.7286 206.351 101.479V111.869H201.158C198.863 111.876 196.664 112.791 195.042 114.414C193.419 116.036 192.504 118.235 192.497 120.53V162.096C192.504 164.391 193.419 166.59 195.042 168.213C196.664 169.836 198.863 170.75 201.158 170.757H253.125C255.42 170.75 257.618 169.835 259.241 168.213C260.863 166.59 261.777 164.391 261.783 162.096V120.53C261.777 118.236 260.863 116.037 259.241 114.414C257.618 112.791 255.42 111.876 253.125 111.869ZM230.176 138.89V153.777C230.181 154.565 229.886 155.326 229.352 155.905C228.817 156.484 228.082 156.838 227.295 156.896C226.885 156.915 226.475 156.851 226.09 156.707C225.705 156.563 225.353 156.343 225.056 156.059C224.759 155.775 224.522 155.434 224.36 155.057C224.199 154.679 224.115 154.272 224.115 153.861V138.882C222.71 138.197 221.579 137.056 220.906 135.645C220.233 134.234 220.058 132.636 220.409 131.113C220.761 129.59 221.618 128.231 222.842 127.257C224.065 126.284 225.582 125.754 227.146 125.754C228.709 125.754 230.226 126.284 231.45 127.257C232.673 128.231 233.53 129.59 233.882 131.113C234.234 132.636 234.059 134.234 233.386 135.645C232.713 137.056 231.581 138.197 230.176 138.882V138.89ZM241.868 111.869H212.412V101.479C212.412 97.5749 213.963 93.8303 216.724 91.0694C219.485 88.3085 223.23 86.7574 227.134 86.7574C231.039 86.7574 234.783 88.3085 237.544 91.0694C240.305 93.8303 241.856 97.5749 241.856 101.479L241.868 111.869Z" fill="black"/>
|
||||
<path d="M253.125 111.101H247.921V100.992C247.921 89.5843 238.826 80.1011 227.418 79.9283C224.668 79.8994 221.938 80.4151 219.388 81.4458C216.837 82.4765 214.516 84.0018 212.558 85.9337C210.599 87.8656 209.043 90.1659 207.978 92.7022C206.912 95.2384 206.36 97.9604 206.351 100.711V111.101H201.158C198.863 111.108 196.664 112.023 195.042 113.646C193.419 115.268 192.504 117.467 192.497 119.762V161.328C192.504 163.623 193.419 165.822 195.042 167.445C196.664 169.067 198.863 169.982 201.158 169.989H253.125C255.42 169.982 257.618 169.067 259.241 167.444C260.863 165.822 261.777 163.623 261.783 161.328V119.762C261.777 117.468 260.863 115.269 259.241 113.646C257.618 112.023 255.42 111.108 253.125 111.101ZM230.176 138.121V153.009C230.181 153.797 229.886 154.558 229.352 155.137C228.817 155.716 228.082 156.07 227.295 156.128C226.885 156.147 226.475 156.083 226.09 155.939C225.705 155.795 225.353 155.575 225.056 155.291C224.759 155.007 224.522 154.666 224.36 154.288C224.199 153.911 224.115 153.504 224.115 153.093V138.114C222.71 137.429 221.579 136.287 220.906 134.876C220.233 133.465 220.058 131.868 220.409 130.345C220.761 128.821 221.618 127.462 222.842 126.489C224.065 125.516 225.582 124.986 227.146 124.986C228.709 124.986 230.226 125.516 231.45 126.489C232.673 127.462 233.53 128.821 233.882 130.345C234.234 131.868 234.059 133.465 233.386 134.876C232.713 136.287 231.581 137.429 230.176 138.114V138.121ZM241.868 111.101H212.412V100.711C212.412 96.8067 213.963 93.0621 216.724 90.3012C219.485 87.5403 223.23 85.9892 227.134 85.9892C231.039 85.9892 234.783 87.5403 237.544 90.3012C240.305 93.0621 241.856 96.8067 241.856 100.711L241.868 111.101Z" fill="#F79530"/>
|
||||
<path opacity="0.1" d="M379.11 91.2819H348.345V98.545H379.11V91.2819Z" fill="#5A5773"/>
|
||||
<path opacity="0.1" d="M332.006 174.556C331.978 175.074 331.904 175.588 331.787 176.092C331.787 175.95 331.787 175.87 331.756 175.858C331.641 175.827 331.779 175.24 332.006 174.556Z" fill="black"/>
|
||||
<g opacity="0.1">
|
||||
<path opacity="0.1" d="M339.112 109.607C339.161 108.977 339.074 108.345 338.858 107.752C338.685 107.357 338.537 106.952 338.417 106.538C338.4 106.602 338.387 106.668 338.378 106.734C338.313 107.337 338.651 107.886 338.858 108.474C338.993 108.838 339.078 109.219 339.112 109.607Z" fill="black"/>
|
||||
<path opacity="0.1" d="M368.456 107.583C368.276 108.673 367.392 109.699 367.304 110.847C367.283 111.044 367.283 111.242 367.304 111.439C367.496 110.098 368.683 108.911 368.456 107.583Z" fill="black"/>
|
||||
<path opacity="0.1" d="M363.705 115.368C363.609 114.669 362.764 114.385 362.319 113.832C362.045 113.468 361.897 113.026 361.896 112.572C361.865 113.286 361.877 114.016 362.319 114.554C362.76 115.092 363.432 115.322 363.647 115.875C363.702 115.712 363.721 115.539 363.705 115.368Z" fill="black"/>
|
||||
</g>
|
||||
<path d="M47.2969 176.142H45.1152V225.267H47.2969V176.142Z" fill="#535461"/>
|
||||
<path d="M61.0089 225.117L60.8706 227.33L60.6786 230.452L60.5979 231.754L60.4059 234.881L60.3214 236.183L60.1293 239.306L57.9285 274.822C57.8346 276.351 57.1613 277.786 56.0458 278.835C54.9303 279.884 53.4566 280.468 51.9252 280.468H40.4871C38.9561 280.468 37.4829 279.884 36.368 278.835C35.2531 277.786 34.5805 276.35 34.4876 274.822L32.2753 239.306L32.0832 236.183L32.0026 234.881L31.8144 231.747L31.7337 230.445L31.5417 227.322L31.4034 225.11C31.3772 224.685 31.4382 224.26 31.5827 223.86C31.7272 223.459 31.9521 223.093 32.2436 222.783C32.5351 222.473 32.887 222.227 33.2776 222.058C33.6681 221.889 34.0891 221.802 34.5145 221.803H57.9016C58.3276 221.802 58.7491 221.889 59.14 222.059C59.5309 222.228 59.8829 222.475 60.1742 222.786C60.4655 223.097 60.6899 223.464 60.8335 223.865C60.9771 224.266 61.0368 224.692 61.0089 225.117Z" fill="#3F3D56"/>
|
||||
<path d="M60.8699 227.33L60.6779 230.452H31.7292L31.5371 227.33H60.8699Z" fill="#9D9CB5"/>
|
||||
<path d="M60.598 231.755L60.4059 234.881H32.0064L31.8105 231.755H60.598Z" fill="#9D9CB5"/>
|
||||
<path d="M60.3212 236.183L60.1292 239.306H32.2828L32.0869 236.183H60.3212Z" fill="#9D9CB5"/>
|
||||
<path d="M28.2074 194.556C40.913 203.747 46.2058 218.127 46.2058 218.127C46.2058 218.127 30.8922 217.601 18.1673 208.41C5.44248 199.218 0.168945 184.838 0.168945 184.838C0.168945 184.838 15.4979 185.364 28.2074 194.556Z" fill="#F79530"/>
|
||||
<path d="M0.188477 184.838C0.188477 184.838 16.082 193.672 21.1789 200.97C26.2758 208.268 46.2061 218.131 46.2061 218.131" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
|
||||
<path d="M36.4075 176.054C43.3211 181.047 46.2056 188.883 46.2056 188.883C46.2056 188.883 37.8709 188.598 30.9534 183.594C24.036 178.589 21.1592 170.765 21.1592 170.765C21.1592 170.765 29.4939 171.03 36.4075 176.054Z" fill="#F79530"/>
|
||||
<path d="M21.1592 170.746C21.1592 170.746 29.8088 175.547 32.582 179.522C35.3551 183.498 46.2056 188.863 46.2056 188.863" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
|
||||
<path d="M56.2571 188.468C48.3103 197.198 46.6318 208.605 46.6318 208.605C46.6318 208.605 57.8318 205.859 65.7748 197.129C73.7177 188.399 75.4 176.987 75.4 176.987C75.4 176.987 64.2 179.734 56.2571 188.468Z" fill="#F79530"/>
|
||||
<path d="M75.4 176.987C75.4 176.987 65.0527 185.937 62.4217 192.105C59.7907 198.273 46.6318 208.621 46.6318 208.621" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1404_1811" x1="227.112" y1="248.693" x2="227.112" y2="41.9265" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#808080" stop-opacity="0.25"/>
|
||||
<stop offset="0.54" stop-color="#808080" stop-opacity="0.12"/>
|
||||
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1404_1811">
|
||||
<rect width="440" height="314.918" fill="white" transform="translate(0 0.541016)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
9
src/assets/layout/images/logo-blue.svg
Normal file
9
src/assets/layout/images/logo-blue.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z" fill="#2196F3"/>
|
||||
<mask id="mask0_1413_1551" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
|
||||
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1413_1551)">
|
||||
<path d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z" fill="#2196F3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
16
src/assets/layout/images/logo-orange.svg
Normal file
16
src/assets/layout/images/logo-orange.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg width="82" height="61" viewBox="0 0 82 61" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1404_1719)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2459 29.411C26.2351 29.646 26.2297 29.8824 26.2297 30.1202C26.2297 38.5664 33.0807 45.4135 41.5321 45.4135C49.9833 45.4135 56.8344 38.5664 56.8344 30.1202C56.8344 29.8768 56.8288 29.6348 56.8176 29.3943C58.3428 29.1611 59.8641 28.893 61.3802 28.5901L61.5392 28.5583C61.5789 29.0737 61.5991 29.5945 61.5991 30.1202C61.5991 41.1964 52.6148 50.1754 41.5321 50.1754C30.4493 50.1754 21.465 41.1964 21.465 30.1202C21.465 29.602 21.4846 29.0883 21.5233 28.5801L21.5732 28.5901C23.1257 28.9003 24.6837 29.174 26.2459 29.411ZM50.4928 17.7217C47.9742 15.9003 44.8785 14.8267 41.5321 14.8267C38.1795 14.8267 35.0789 15.9042 32.5578 17.7315C30.512 17.5258 28.4716 17.2491 26.4403 16.9016C30.1182 12.7106 35.516 10.0648 41.5321 10.0648C47.5402 10.0648 52.9317 12.7037 56.6093 16.885C54.5784 17.2348 52.5383 17.5138 50.4928 17.7217ZM66.2393 27.6187C66.3217 28.4414 66.3638 29.2759 66.3638 30.1202C66.3638 43.8263 55.2463 54.9373 41.5321 54.9373C27.8178 54.9373 16.7003 43.8263 16.7003 30.1202C16.7003 29.2832 16.7417 28.4561 16.8226 27.6404L12.131 26.7026C12.0019 27.824 11.9355 28.9643 11.9355 30.1202C11.9355 46.4563 25.1864 59.6992 41.5321 59.6992C57.8778 59.6992 71.1285 46.4563 71.1285 30.1202C71.1285 28.9568 71.0614 27.8093 70.9307 26.681L66.2393 27.6187ZM66.8921 14.8622L61.8629 15.8674C57.3703 9.47833 49.9391 5.30292 41.5321 5.30292C33.1165 5.30292 25.6787 9.48679 21.1876 15.8868L16.16 14.8819C21.3382 6.28869 30.7636 0.541016 41.5321 0.541016C52.2923 0.541016 61.7115 6.27988 66.8921 14.8622Z" fill="#F57C00"/>
|
||||
<mask id="mask0_1404_1719" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="13" width="82" height="16">
|
||||
<path d="M41 28.0889C16.2672 29.3327 0.5 13.8744 0.5 13.8744C0.5 13.8744 25.2765 22.4209 41 22.4209C56.7235 22.4209 81.5 13.8744 81.5 13.8744C81.5 13.8744 65.7328 26.8451 41 28.0889Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1404_1719)">
|
||||
<path d="M0.500296 13.8744L6.09662 -2.3304L-11.5117 26.112L0.500296 13.8744ZM41.0003 28.0889L40.1383 10.9677L41.0003 28.0889ZM81.5003 13.8744L92.4014 27.1101L75.904 -2.3304L81.5003 13.8744ZM0.500296 13.8744C-11.5117 26.112 -11.5067 26.1169 -11.5016 26.1218C-11.4999 26.1236 -11.4948 26.1286 -11.4912 26.1321C-11.4841 26.1391 -11.4767 26.1462 -11.4691 26.1536C-11.4539 26.1685 -11.4376 26.1843 -11.4202 26.2011C-11.3856 26.2346 -11.3468 26.2719 -11.3038 26.313C-11.2179 26.3951 -11.1153 26.4919 -10.9962 26.6026C-10.7581 26.8237 -10.4537 27.1005 -10.0843 27.4242C-9.34664 28.0709 -8.34457 28.9099 -7.09097 29.8713C-4.59368 31.7861 -1.03827 34.2319 3.47055 36.6096C12.4685 41.3548 25.6588 46.025 41.8623 45.2101L40.1383 10.9677C31.609 11.3966 24.5493 8.95957 19.4804 6.28647C16.9559 4.95512 15.0237 3.61409 13.7917 2.66943C13.1807 2.20091 12.7577 1.84202 12.5365 1.64815C12.4264 1.55161 12.368 1.49747 12.363 1.49285C12.3606 1.49058 12.3717 1.50081 12.3964 1.52446C12.4088 1.53629 12.4246 1.55149 12.4439 1.57017C12.4536 1.5795 12.4641 1.58972 12.4754 1.60081C12.4811 1.60636 12.4871 1.61213 12.4932 1.61813C12.4963 1.62112 12.5011 1.62579 12.5026 1.62728C12.5074 1.632 12.5123 1.63678 0.500296 13.8744ZM41.8623 45.2101C57.0359 44.4471 69.4127 40.0936 77.9907 35.9492C82.2948 33.8697 85.71 31.8109 88.1282 30.2087C89.34 29.4057 90.3099 28.7119 91.0245 28.1796C91.3821 27.9134 91.6766 27.6868 91.9064 27.5066C92.0213 27.4165 92.1202 27.3378 92.2027 27.2715C92.2439 27.2383 92.2812 27.2082 92.3143 27.1814C92.3309 27.1678 92.3464 27.1552 92.3609 27.1433C92.3681 27.1374 92.3752 27.1316 92.3819 27.1261C92.3853 27.1234 92.3901 27.1194 92.3918 27.1179C92.3966 27.114 92.4014 27.1101 81.5003 13.8744C70.5992 0.638688 70.6039 0.63489 70.6085 0.631143C70.6099 0.629959 70.6144 0.626256 70.6172 0.623886C70.623 0.619143 70.6286 0.61459 70.6339 0.610227C70.6446 0.601501 70.6544 0.59353 70.6633 0.586305C70.6811 0.571855 70.6953 0.560381 70.7059 0.551796C70.7273 0.53463 70.7345 0.528983 70.728 0.53415C70.7147 0.544532 70.6464 0.597905 70.5245 0.688674C70.2802 0.870619 69.8251 1.19985 69.1722 1.63239C67.8611 2.50105 65.7889 3.76259 63.0595 5.08126C57.5707 7.73313 49.6975 10.487 40.1383 10.9677L41.8623 45.2101ZM81.5003 13.8744C75.904 -2.33039 75.9054 -2.3309 75.9068 -2.33137C75.9071 -2.33148 75.9083 -2.33192 75.909 -2.33215C75.9103 -2.33261 75.9113 -2.33293 75.9119 -2.33313C75.9131 -2.33354 75.9128 -2.33343 75.911 -2.33282C75.9075 -2.33162 75.8981 -2.32842 75.8832 -2.32329C75.8531 -2.31303 75.8003 -2.29506 75.7259 -2.26989C75.5767 -2.21954 75.3411 -2.14049 75.027 -2.03683C74.3982 -1.82936 73.4584 -1.5244 72.2725 -1.15442C69.8917 -0.411748 66.5645 0.578588 62.7991 1.56456C54.8229 3.65318 46.5108 5.27805 41.0003 5.27805V39.5637C51.2133 39.5637 63.1512 36.9154 71.4941 34.7308C75.8883 33.5801 79.7379 32.4338 82.4941 31.574C83.8766 31.1428 84.9953 30.78 85.783 30.5201C86.177 30.39 86.489 30.2855 86.7106 30.2107C86.8214 30.1733 86.9097 30.1433 86.9743 30.1212C87.0067 30.1101 87.0331 30.1011 87.0536 30.094C87.0638 30.0905 87.0724 30.0876 87.0797 30.0851C87.0832 30.0838 87.0864 30.0827 87.0893 30.0817C87.0907 30.0813 87.0925 30.0806 87.0932 30.0804C87.095 30.0797 87.0966 30.0792 81.5003 13.8744ZM41.0003 5.27805C35.4898 5.27805 27.1777 3.65318 19.2015 1.56456C15.4361 0.578588 12.1089 -0.411748 9.72812 -1.15442C8.54214 -1.5244 7.60238 -1.82936 6.97362 -2.03683C6.65951 -2.14049 6.42385 -2.21954 6.27479 -2.26989C6.20028 -2.29506 6.14748 -2.31303 6.11744 -2.32329C6.10241 -2.32842 6.09308 -2.33162 6.08956 -2.33282C6.08781 -2.33343 6.0875 -2.33354 6.08867 -2.33313C6.08927 -2.33293 6.09022 -2.33261 6.09155 -2.33215C6.0922 -2.33192 6.09348 -2.33148 6.0938 -2.33137C6.09517 -2.3309 6.09662 -2.33039 0.500296 13.8744C-5.09603 30.0792 -5.09438 30.0797 -5.09265 30.0804C-5.09194 30.0806 -5.09011 30.0813 -5.08869 30.0817C-5.08586 30.0827 -5.08264 30.0838 -5.07904 30.0851C-5.07186 30.0876 -5.06315 30.0905 -5.05294 30.094C-5.03251 30.1011 -5.00607 30.1101 -4.97373 30.1212C-4.90907 30.1433 -4.82081 30.1733 -4.71002 30.2107C-4.48847 30.2855 -4.17645 30.39 -3.78237 30.5201C-2.99475 30.78 -1.87602 31.1428 -0.493517 31.574C2.26265 32.4338 6.11224 33.5801 10.5065 34.7308C18.8494 36.9154 30.7872 39.5637 41.0003 39.5637V5.27805Z" fill="#F57C00"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1404_1719">
|
||||
<rect width="81" height="60" fill="white" transform="translate(0.5 0.541016)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
212
src/layout/BlockViewer.vue
Normal file
212
src/layout/BlockViewer.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="block-section">
|
||||
<div class="block-header">
|
||||
<span class="block-title">
|
||||
<span>{{header}}</span>
|
||||
<span class="badge-new" v-if="recent">New</span>
|
||||
</span>
|
||||
<div class="block-actions">
|
||||
<a tabindex="0" :class="{'block-action-active': blockView === BlockView.PREVIEW}" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
|
||||
<a :tabindex="'0'" :class="{'block-action-active': blockView === BlockView.CODE}" @click="activateView($event, BlockView.CODE)">
|
||||
<span>Code</span>
|
||||
</a>
|
||||
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)"
|
||||
v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-content">
|
||||
<div :class="containerClass" :style="previewStyle" v-if="blockView == BlockView.PREVIEW">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-if="blockView === BlockView.CODE">
|
||||
<pre v-code><code>{{code}}
|
||||
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
code: null,
|
||||
recent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
containerClass: null,
|
||||
previewStyle: null
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
BlockView: {
|
||||
PREVIEW: 0,
|
||||
CODE: 1
|
||||
},
|
||||
blockView: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activateView(event, blockView) {
|
||||
this.blockView = blockView;
|
||||
event.preventDefault();
|
||||
},
|
||||
async copyCode(event) {
|
||||
await navigator.clipboard.writeText(this.code);
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.block-section {
|
||||
margin-bottom: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.block-header {
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--surface-section);
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border:1px solid var(--surface-d);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.block-title {
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.badge-free {
|
||||
border-radius: 4px;
|
||||
padding: .25rem .5rem;
|
||||
background-color: var(--orange-500);
|
||||
color: white;
|
||||
margin-left: 1rem;
|
||||
font-weight: 700;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.block-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
margin-left: 1rem;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .75rem;
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color .2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:not(.block-action-disabled):hover {
|
||||
background-color: var(--surface-c);
|
||||
}
|
||||
|
||||
&.block-action-active {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&.block-action-copy {
|
||||
i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.block-action-disabled {
|
||||
opacity: .6;
|
||||
cursor: auto !important;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-content {
|
||||
padding: 0;
|
||||
border:1px solid var(--surface-d);
|
||||
border-top: 0 none;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
margin: 0 !important;
|
||||
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
code {
|
||||
border-left: 0 none !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-e) !important;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
padding: 0 2rem !important;
|
||||
|
||||
.token {
|
||||
&.tag,
|
||||
&.keyword {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-name,
|
||||
&.attr-string {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: #4CAF50 !important;
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.string {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.block-header {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
.block-actions {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +1,32 @@
|
||||
export default class CustomerService {
|
||||
|
||||
getCustomersSmall() {
|
||||
return fetch('data/customers-small.json').then(res => res.json()).then(d => d.data);
|
||||
getCustomersSmall () {
|
||||
return fetch('/data/customers-small.json')
|
||||
.then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomersMedium() {
|
||||
return fetch('data/customers-medium.json').then(res => res.json()).then(d => d.data);
|
||||
getCustomersMedium () {
|
||||
return fetch('/data/customers-medium.json')
|
||||
.then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomersLarge() {
|
||||
return fetch('data/customers-large.json').then(res => res.json()).then(d => d.data);
|
||||
getCustomersLarge () {
|
||||
return fetch('/data/customers-large.json')
|
||||
.then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomersXLarge() {
|
||||
return fetch('data/customers-xlarge.json').then(res => res.json()).then(d => d.data);
|
||||
getCustomersXLarge () {
|
||||
return fetch('/data/customers-xlarge.json')
|
||||
.then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomers(params) {
|
||||
const queryParams = Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
|
||||
return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
|
||||
getCustomers (params) {
|
||||
const queryParams = Object.keys(params)
|
||||
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
|
||||
.join('&');
|
||||
return fetch('https://www.primefaces.org//data/customers?' + queryParams).then(res => res.json());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -101,6 +101,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||
import VirtualScroller from 'primevue/virtualscroller';
|
||||
|
||||
import CodeHighlight from '@/layout/AppCodeHighlight';
|
||||
import BlockViewer from '@/layout/BlockViewer.vue';
|
||||
|
||||
import '@/assets/styles.scss';
|
||||
|
||||
@@ -208,4 +209,6 @@ app.component('TreeTable', TreeTable);
|
||||
app.component('TriStateCheckbox', TriStateCheckbox);
|
||||
app.component('VirtualScroller', VirtualScroller);
|
||||
|
||||
app.component('BlockViewer', BlockViewer);
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
@@ -95,7 +95,7 @@ const router = createRouter({
|
||||
component: () => import('@/views/uikit/Misc.vue')
|
||||
},
|
||||
{
|
||||
path: '/utilities/blocks',
|
||||
path: '/blocks',
|
||||
name: 'blocks',
|
||||
component: () => import('@/views/utilities/Blocks.vue')
|
||||
},
|
||||
@@ -114,6 +114,11 @@ const router = createRouter({
|
||||
name: 'empty',
|
||||
component: () => import('@/views/pages/Empty.vue')
|
||||
},
|
||||
{
|
||||
path: '/pages/crud',
|
||||
name: 'crud',
|
||||
component: () => import('@/views/pages/Crud.vue')
|
||||
},
|
||||
{
|
||||
path: '/documentation',
|
||||
name: 'documentation',
|
||||
@@ -135,7 +140,7 @@ const router = createRouter({
|
||||
{
|
||||
path: '/auth/login',
|
||||
name: 'login',
|
||||
component: () => import('@/views/pages/Landing.vue')
|
||||
component: () => import('@/views/pages/Login.vue')
|
||||
},
|
||||
{
|
||||
path: '/auth/access',
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<Column header="Image" headerStyle="width:14%; min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Image</span>
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
|
||||
@@ -92,7 +92,7 @@
|
||||
</DataTable>
|
||||
|
||||
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
|
||||
<img :src="'images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
|
||||
<img :src="'/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
|
||||
@@ -187,122 +187,131 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { FilterMatchMode } from 'primevue/api';
|
||||
import ProductService from '../service/ProductService';
|
||||
import { ref, onMounted, onBeforeMount } from 'vue';
|
||||
import ProductService from '@/layout/service/ProductService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
productDialog: false,
|
||||
deleteProductDialog: false,
|
||||
deleteProductsDialog: false,
|
||||
product: {},
|
||||
selectedProducts: null,
|
||||
filters: {},
|
||||
submitted: false,
|
||||
statuses: [
|
||||
{ label: 'INSTOCK', value: 'instock' },
|
||||
{ label: 'LOWSTOCK', value: 'lowstock' },
|
||||
{ label: 'OUTOFSTOCK', value: 'outofstock' }
|
||||
]
|
||||
};
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
this.initFilters();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProducts().then((data) => (this.products = data));
|
||||
},
|
||||
methods: {
|
||||
formatCurrency(value) {
|
||||
if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
return;
|
||||
},
|
||||
openNew() {
|
||||
this.product = {};
|
||||
this.submitted = false;
|
||||
this.productDialog = true;
|
||||
},
|
||||
hideDialog() {
|
||||
this.productDialog = false;
|
||||
this.submitted = false;
|
||||
},
|
||||
saveProduct() {
|
||||
this.submitted = true;
|
||||
if (this.product.name.trim()) {
|
||||
if (this.product.id) {
|
||||
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
|
||||
this.products[this.findIndexById(this.product.id)] = this.product;
|
||||
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
|
||||
} else {
|
||||
this.product.id = this.createId();
|
||||
this.product.code = this.createId();
|
||||
this.product.image = 'product-placeholder.svg';
|
||||
this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
|
||||
this.products.push(this.product);
|
||||
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
|
||||
}
|
||||
this.productDialog = false;
|
||||
this.product = {};
|
||||
}
|
||||
},
|
||||
editProduct(product) {
|
||||
this.product = { ...product };
|
||||
this.productDialog = true;
|
||||
},
|
||||
confirmDeleteProduct(product) {
|
||||
this.product = product;
|
||||
this.deleteProductDialog = true;
|
||||
},
|
||||
deleteProduct() {
|
||||
this.products = this.products.filter((val) => val.id !== this.product.id);
|
||||
this.deleteProductDialog = false;
|
||||
this.product = {};
|
||||
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
|
||||
},
|
||||
findIndexById(id) {
|
||||
let index = -1;
|
||||
for (let i = 0; i < this.products.length; i++) {
|
||||
if (this.products[i].id === id) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return index;
|
||||
},
|
||||
createId() {
|
||||
let id = '';
|
||||
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
for (var i = 0; i < 5; i++) {
|
||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return id;
|
||||
},
|
||||
exportCSV() {
|
||||
this.$refs.dt.exportCSV();
|
||||
},
|
||||
confirmDeleteSelected() {
|
||||
this.deleteProductsDialog = true;
|
||||
},
|
||||
deleteSelectedProducts() {
|
||||
this.products = this.products.filter((val) => !this.selectedProducts.includes(val));
|
||||
this.deleteProductsDialog = false;
|
||||
this.selectedProducts = null;
|
||||
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
|
||||
},
|
||||
initFilters() {
|
||||
this.filters = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
|
||||
};
|
||||
const toast = useToast();
|
||||
|
||||
const products = ref(null);
|
||||
const productDialog = ref(false);
|
||||
const deleteProductDialog = ref(false);
|
||||
const deleteProductsDialog = ref(false);
|
||||
const product = ref({});
|
||||
const selectedProducts = ref(null);
|
||||
const dt = ref(null);
|
||||
const filters = ref({});
|
||||
const submitted = ref(false);
|
||||
const statuses = ref([
|
||||
{ label: 'INSTOCK', value: 'instock' },
|
||||
{ label: 'LOWSTOCK', value: 'lowstock' },
|
||||
{ label: 'OUTOFSTOCK', value: 'outofstock' }
|
||||
]);
|
||||
|
||||
const productService = new ProductService();
|
||||
|
||||
onBeforeMount(() => {
|
||||
initFilters();
|
||||
});
|
||||
onMounted(() => {
|
||||
productService.getProducts().then((data) => (products.value = data));
|
||||
});
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
|
||||
const openNew = () => {
|
||||
product.value = {};
|
||||
submitted.value = false;
|
||||
productDialog.value = true;
|
||||
};
|
||||
|
||||
const hideDialog = () => {
|
||||
productDialog.value = false;
|
||||
submitted.value = false;
|
||||
};
|
||||
|
||||
const saveProduct = () => {
|
||||
submitted.value = true;
|
||||
if (product.value.name.trim()) {
|
||||
if (product.value.id) {
|
||||
product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
|
||||
product.value[findIndexById(product.value.id)] = product.value;
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
|
||||
} else {
|
||||
product.value.id = createId();
|
||||
product.value.code = createId();
|
||||
product.value.image = 'product-placeholder.svg';
|
||||
product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
|
||||
products.value.push(product);
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
|
||||
}
|
||||
productDialog.value = false;
|
||||
product.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const editProduct = (editProduct) => {
|
||||
product.value = { ...editProduct };
|
||||
console.log(product);
|
||||
productDialog.value = true;
|
||||
};
|
||||
|
||||
const confirmDeleteProduct = (editProduct) => {
|
||||
product.value = editProduct;
|
||||
deleteProductDialog.value = true;
|
||||
};
|
||||
|
||||
const deleteProduct = () => {
|
||||
products.value = products.value.filter((val) => val.id !== product.value.id);
|
||||
deleteProductDialog.value = false;
|
||||
product.value = {};
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
|
||||
};
|
||||
|
||||
const findIndexById = (id) => {
|
||||
let index = -1;
|
||||
for (let i = 0; i < products.value.length; i++) {
|
||||
if (products.value[i].id === id) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return index;
|
||||
};
|
||||
|
||||
const createId = () => {
|
||||
let id = '';
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
for (let i = 0; i < 5; i++) {
|
||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return id;
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.value.exportCSV();
|
||||
};
|
||||
|
||||
const confirmDeleteSelected = () => {
|
||||
deleteProductsDialog.value = true;
|
||||
};
|
||||
const deleteSelectedProducts = () => {
|
||||
products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
|
||||
deleteProductsDialog.value = false;
|
||||
selectedProducts.value = null;
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
|
||||
};
|
||||
|
||||
const initFilters = () => {
|
||||
filters.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../assets/demo/badges.scss';
|
||||
@import '@/assets/demo/styles/badges.scss';
|
||||
</style>
|
||||
@@ -41,7 +41,7 @@
|
||||
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
||||
<Button label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
|
||||
</div>
|
||||
<img src="layout/images/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
|
||||
<img src="@/assets/demo/images/landing/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
|
||||
</div>
|
||||
|
||||
<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8" id="features">
|
||||
@@ -166,7 +166,7 @@
|
||||
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width: 800px">
|
||||
“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
|
||||
</p>
|
||||
<img src="layout/images/peak-logo.svg" class="mt-4" alt="" />
|
||||
<img src="@/assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,7 +180,7 @@
|
||||
|
||||
<div class="grid mt-8 pb-2 md:pb-8">
|
||||
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius: 8px">
|
||||
<img src="layout/images/mockup.png" class="w-11" alt="mockup mobile" />
|
||||
<img src="@/assets/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end lg:text-right align-items-center text-center">
|
||||
@@ -206,7 +206,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius: 8px">
|
||||
<img src="layout/images/mockup-desktop.png" class="w-11 pt-4" alt="mockup" />
|
||||
<img src="@/assets/demo/images/landing/mockup-desktop.svg" class="w-11 pt-4" alt="mockup" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -221,7 +221,7 @@
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||
<div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
|
||||
<h3 class="text-900 text-center">Free</h3>
|
||||
<img src="layout/images/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
|
||||
<img src="@/assets/demo/images/landing/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||
<span class="text-600">per month</span>
|
||||
@@ -252,7 +252,7 @@
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
|
||||
<h3 class="text-900 text-center">Startup</h3>
|
||||
<img src="layout/images/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
|
||||
<img src="@/assets/demo/images/landing/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||
<span class="text-600">per month</span>
|
||||
@@ -283,7 +283,7 @@
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
|
||||
<h3 class="text-900 text-center">Enterprice</h3>
|
||||
<img src="layout/images/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
|
||||
<img src="@/assets/demo/images/landing/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||
<span class="text-600">per month</span>
|
||||
@@ -317,7 +317,7 @@
|
||||
<div class="grid justify-content-between">
|
||||
<div class="col-12 md:col-2" style="margin-top: -1.5rem">
|
||||
<div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
|
||||
<img :src="'layout/images/logo-' + logoColor + '.svg'" alt="footer sections" width="50" height="50" class="mr-2" />
|
||||
<img :src="logoUrl()" alt="footer sections" width="50" height="50" class="mr-2" />
|
||||
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
|
||||
</div>
|
||||
</div>
|
||||
@@ -343,7 +343,7 @@
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="layout/images/new-badge.svg" class="ml-2" /></a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="@/assets/demo/images/landing/new-badge.svg" class="ml-2" /></a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
||||
<img src="@/assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
|
||||
|
||||
@@ -1,45 +1,100 @@
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<h4>Timeline</h4>
|
||||
|
||||
<h5>Custom Timeline</h5>
|
||||
<Timeline :value="customEvents" align="alternate" class="customized-timeline">
|
||||
<template #marker="slotProps">
|
||||
<span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }">
|
||||
<i :class="slotProps.item.icon"></i>
|
||||
</span>
|
||||
</template>
|
||||
<h5>Left Align</h5>
|
||||
<Timeline :value="customEvents">
|
||||
<template #content="slotProps">
|
||||
<Card>
|
||||
<template #title>
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
<template #subtitle>
|
||||
{{ slotProps.item.date }}
|
||||
</template>
|
||||
<template #content>
|
||||
<img v-if="slotProps.item.image" :src="'images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
|
||||
cupiditate neque quas!
|
||||
</p>
|
||||
<Button label="Read more" class="p-button-text"></Button>
|
||||
</template>
|
||||
</Card>
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<h5 style="margin-top: 5em">Horizontal - Alternate Align</h5>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item }}
|
||||
</template>
|
||||
<template #opposite> </template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<h5>Right Align</h5>
|
||||
<Timeline :value="customEvents" align="right">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<h5>Alternate Align</h5>
|
||||
<Timeline :value="customEvents" align="alternate">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<h5>Opposite Content</h5>
|
||||
<Timeline :value="customEvents">
|
||||
<template #opposite="slotProps">
|
||||
<small class="p-text-secondary">{{ slotProps.item.date }}</small>
|
||||
</template>
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5>Custom Timeline</h5>
|
||||
<Timeline :value="customEvents" align="alternate" class="customized-timeline">
|
||||
<template #marker="slotProps">
|
||||
<span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }">
|
||||
<i :class="slotProps.item.icon"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template #content="slotProps">
|
||||
<Card>
|
||||
<template #title>
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
<template #subtitle>
|
||||
{{ slotProps.item.date }}
|
||||
</template>
|
||||
<template #content>
|
||||
<img v-if="slotProps.item.image" :src="'/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
|
||||
neque quas!
|
||||
</p>
|
||||
<Button label="Read more" class="p-button-text"></Button>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
<div class="card mt-3">
|
||||
<h5>Horizontal</h5>
|
||||
<h6>Top Align</h6>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item }}
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<h6>Bottom Align</h6>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item }}
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<h6>Alternate Align</h6>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
|
||||
<template #opposite> </template>
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
||||
<img src="@/assets/layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
|
||||
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
|
||||
<img src="layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%" />
|
||||
<img src="@/assets/layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%" />
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
||||
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
||||
|
||||
@@ -62,10 +62,10 @@
|
||||
<div class="card">
|
||||
<h5>Templating</h5>
|
||||
<Button type="button" class="mr-2 mb-2 px-3">
|
||||
<img alt="logo" src="images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
</Button>
|
||||
<Button type="button" class="p-button-outlined p-button-success mr-2 mb-2">
|
||||
<img alt="logo" src="images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
<span class="ml-2 text-bold">PrimeVue</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<template #list="slotProps">
|
||||
<div class="col-12">
|
||||
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
|
||||
<div class="mb-3">{{ slotProps.data.description }}</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
|
||||
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
|
||||
<div class="mb-3">{{ slotProps.data.description }}</div>
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="mb-3">
|
||||
<img :src="'images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
|
||||
<img :src="'/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1">
|
||||
@@ -34,10 +34,10 @@
|
||||
<h5>Galleria</h5>
|
||||
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
<img :src="'/' + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
<img :src="'/' + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<div class="flex justify-content-center">
|
||||
<Image src="images/galleria/galleria11.jpg" alt="Image" width="250" preview />
|
||||
<Image src="/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,16 +68,17 @@ const toast = useToast();
|
||||
const message = ref([]);
|
||||
const username = ref(null);
|
||||
const email = ref(null);
|
||||
const count = ref(0);
|
||||
|
||||
const addMessage = (type) => {
|
||||
if (type === 'success') {
|
||||
this.message = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: this.count++ }];
|
||||
message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
|
||||
} else if (type === 'info') {
|
||||
this.message = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: this.count++ }];
|
||||
message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
|
||||
} else if (type === 'warn') {
|
||||
this.message = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: this.count++ }];
|
||||
message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
|
||||
} else if (type === 'error') {
|
||||
this.message = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: this.count++ }];
|
||||
message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -16,21 +16,21 @@
|
||||
</div>
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-6">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div>
|
||||
<Button type="button" label="Image" @click="toggle" class="p-button-success" />
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="images/nature/nature9.jpg" alt="Nature 9" />
|
||||
<img src="/images/nature/nature9.jpg" alt="Nature 9" />
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div>
|
||||
<Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
|
||||
<OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
|
||||
<Column field="name" header="Name" :sortable="true" headerStyle="min-width:10rem;"></Column>
|
||||
<Column header="Image" headerStyle="min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
|
||||
|
||||
@@ -162,34 +162,22 @@
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
<div class="grid">
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<SplitterPanel :size="40" :minSize="10" style="overflow: scroll">
|
||||
<p class="col m-3">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur pariatur recusandae rerum atque nisi ipsum fuga numquam distinctio obcaecati quibusdam repellat, est assumenda quam perferendis reprehenderit,
|
||||
blanditiis, excepturi facilis! Voluptatem.
|
||||
</p>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="60" style="overflow: scroll">
|
||||
<Splitter layout="vertical">
|
||||
<SplitterPanel :size="15">
|
||||
<p class="col m-3">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
|
||||
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
|
||||
cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="85">
|
||||
<p class="col m-3">
|
||||
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
|
||||
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus
|
||||
luctus odio.
|
||||
</p>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<SplitterPanel :size="30" :minSize="10" style="overflow: scroll">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 1</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="70" style="overflow: scroll">
|
||||
<Splitter layout="vertical">
|
||||
<SplitterPanel :size="15">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 2</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="50">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 3</div>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<img :alt="data.representative.name" :src="'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<img :alt="data.representative.name" :src="'/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
@@ -132,7 +132,6 @@
|
||||
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2" scrollDirection="both" class="mt-3">
|
||||
<Column field="name" header="Name" :style="{ width: '150px' }" frozen></Column>
|
||||
<Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></Column>
|
||||
<Column field="name" header="Name" :style="{ width: '200px' }"></Column>
|
||||
<Column field="country.name" header="Country" :style="{ width: '200px' }">
|
||||
<template #body="{ data }">
|
||||
<img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
|
||||
@@ -180,7 +179,7 @@
|
||||
</Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true">
|
||||
@@ -264,7 +263,7 @@
|
||||
</Column>
|
||||
<Column field="date" header="Date" style="min-width: 200px"></Column>
|
||||
<template #groupheader="slotProps">
|
||||
<img :alt="slotProps.data.representative.name" :src="'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<img :alt="slotProps.data.representative.name" :src="'/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 overflow-hidden">
|
||||
<img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
|
||||
<img src="/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
@@ -325,7 +325,7 @@
|
||||
<BlockViewer header="Sign-In" :code="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
|
||||
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
|
||||
<div class="text-center mb-5">
|
||||
<img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
|
||||
<img src="/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
|
||||
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
|
||||
Reference in New Issue
Block a user