diff --git a/package.json b/package.json index ab76a07..77e19c3 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js", "dev": "cross-env NODE_ENV=development webpack-dev-server", - "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" + "build": "cross-env NODE_ENV=production webpack --hide-modules" }, "author": "", "license": "ISC", diff --git a/public/assets/fonts/vinlottis-icons/selection.json b/public/assets/fonts/vinlottis-icons/selection.json deleted file mode 100644 index c78d18d..0000000 --- a/public/assets/fonts/vinlottis-icons/selection.json +++ /dev/null @@ -1 +0,0 @@ -{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M27.014 461.303h1578.188v105.8h-1578.188v-105.8z","M1256.94 86.596l-70.533 74.942 374.709 352.668-374.709 352.668 70.533 74.942 458.468-427.61z"],"attrs":[{},{}],"width":1720,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["Arrow-long-Digital-black"]},"attrs":[{},{}],"properties":{"order":79,"id":76,"name":"arrow-long-right","prevSize":32,"code":59655},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M1692.974 545.061h-1578.163v-105.799h1578.163v105.799z","M463.067 919.765l70.531-74.941-374.703-352.662 374.703-348.253-70.531-79.349-458.46 427.603z"],"attrs":[],"width":1720,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-long-left"],"colorPermutations":{}},"attrs":[],"properties":{"order":80,"id":75,"name":"arrow-long-left","prevSize":32,"code":59656},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M39.406 458.643h1062.069v121.96h-1062.069v-121.96z","M705.103 26.701l-86.389 86.389 437.024 406.533-437.024 406.533 86.389 86.389 528.493-492.922z"],"attrs":[{},{}],"width":1233,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["Arrow-short-Digital-black"]},"attrs":[{},{}],"properties":{"order":81,"id":74,"name":"arrow-right","prevSize":32,"code":59657},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M1193.594 565.357h-1062.068v-121.96h1062.068v121.96z","M527.897 997.299l86.389-86.389-437.024-406.533 437.024-406.533-86.389-86.389-528.493 492.922z"],"attrs":[{},{}],"width":1233,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-left"]},"attrs":[{},{}],"properties":{"order":156,"id":77,"prevSize":32,"name":"arrow-left","code":59648},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M270.94 413.017c-17.834-67.772 1.784-139.111 51.722-189.049l30.319 30.319c-39.237 39.237-53.504 94.525-39.237 148.029l-42.803 10.701z","M511.711 907.041v-42.803c99.875 0 117.71-55.288 135.545-103.443 3.566-10.701 7.135-19.618 10.701-26.753 19.618-44.586 48.154-82.041 82.041-115.927l28.536 30.319c-30.319 28.536-55.288 64.206-73.122 103.443-3.566 5.35-5.35 14.268-8.919 23.186-16.051 48.154-44.586 131.979-174.782 131.979z","M511.711 907.041c-108.793 0-151.596-96.308-176.565-148.029-3.566-5.35-5.35-12.485-7.135-16.051-17.834-35.671-41.019-65.989-67.772-92.742l28.536-30.319c32.103 30.319 58.854 65.989 78.474 105.227 1.784 5.35 5.35 10.701 8.919 17.834 23.186 49.938 55.288 123.060 137.328 123.060v41.019h-1.784z","M144.312 380.913c-3.566-98.091 32.103-190.832 99.875-263.956s158.731-112.359 256.821-115.927c99.875-3.566 192.616 32.103 265.74 99.875 71.338 67.772 114.142 158.731 115.927 256.821 0 7.135 0 16.051 0 23.186l-42.803-1.784c0-7.135 0-14.268 0-21.403-3.566-87.391-39.237-167.647-103.443-228.287-64.206-58.854-146.246-90.958-233.636-87.391s-167.647 39.237-228.287 103.443c-58.854 64.206-90.958 146.246-87.391 233.636l-42.803 1.784z","M260.24 648.436c-73.122-69.556-115.927-167.647-115.927-267.522h42.803c0 89.176 37.453 176.565 101.66 237.204l-28.536 30.319z","M766.75 648.436l-28.536-30.319c64.206-60.639 101.66-148.029 101.66-237.204h42.803c0 99.875-41.019 197.967-115.927 267.522z","M590.183 1024.751h-42.803c0-8.919-14.268-30.319-32.103-49.938-17.834 19.618-32.103 41.019-32.103 49.938h-42.803c0-35.671 46.369-82.041 60.639-96.308l14.268-14.268 14.268 14.268c14.268 14.268 60.639 60.639 60.639 96.308z"],"attrs":[{},{},{},{},{},{},{}],"width":1013,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["ballon"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":83,"id":72,"name":"ballon","prevSize":32,"code":59659},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M50.027 1009.221h-44.28v-450.175h142.063v42.434h-97.784z","M813.849 1009.221h-44.28v-736.146h142.063v42.434h-97.784z","M431.937 1009.221h-44.28v-594.083h142.063v44.28h-97.784z","M505.737 273.075l-284.126-188.187-177.117 177.117-31.364-31.364 202.947-202.947 289.662 191.877 321.026-219.553 23.984 35.054z","M859.973 156.842h-42.434v-127.303h-127.303v-42.434h169.739z","M959.602 271.23h44.28v739.836h-44.28v-739.836z","M577.692 413.294h44.28v595.928h-44.28v-595.928z","M197.626 557.202h44.28v452.019h-44.28v-452.019z"],"attrs":[{},{},{},{},{},{},{},{}],"width":1022,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["bars"]},"attrs":[{},{},{},{},{},{},{},{}],"properties":{"order":84,"id":71,"name":"bars","prevSize":32,"code":59660},"setIdx":0,"setId":2,"iconIdx":5},{"icon":{"paths":["M449 1018.977h-307.909v-494.087h41.532v452.555h226.277v-452.555h40.1z","M218.425 443.258l-28.643-30.075c22.914-21.482 35.804-50.125 35.804-81.632v-8.593h41.532v8.593c0 42.964-17.185 83.063-48.693 111.706z","M374.529 443.258c-31.507-30.075-48.693-68.742-48.693-111.706v-8.593h41.532v8.593c0 31.507 12.889 60.149 35.804 81.632l-28.643 30.075z","M450.432 524.889h-41.532c0-31.507-12.889-60.149-35.804-81.632l28.643-30.075c31.507 28.643 48.693 70.175 48.693 111.706z","M182.622 524.889h-41.532c0-42.964 17.185-83.063 48.693-111.706l28.643 30.075c-22.914 21.482-35.804 50.125-35.804 81.632z","M225.586 136.78h41.532v187.61h-41.532v-187.61z","M325.836 136.78h41.532v187.61h-41.532v-187.61z","M221.29 65.173h141.782v41.532h-141.782v-41.532z","M218.425-5.001h144.646v41.532h-144.646v-41.532z"],"attrs":[{},{},{},{},{},{},{},{},{}],"width":571,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["bottle"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":85,"id":70,"name":"bottle","prevSize":32,"code":59661},"setIdx":0,"setId":2,"iconIdx":6},{"icon":{"paths":["M458.341 1004.346c-22.295 0-46.448-1.857-68.742-5.574-120.764-18.579-224.807-81.748-297.266-180.217-70.601-96.611-100.327-217.376-81.748-336.282 29.727-195.081 180.217-347.429 375.297-379.014l7.432 42.732c-174.644 29.727-312.129 167.212-338.139 341.855-33.443 222.948 118.906 432.892 343.713 468.193 222.948 33.443 432.892-118.906 468.193-343.713l42.732 7.432c-37.159 224.807-230.38 384.586-451.472 384.586z","M1010.14 452.547h-453.33v-453.33h22.295c237.811 0 431.035 193.222 431.035 431.035v22.295zM601.399 407.957h364.15c-11.148-195.081-169.070-353.003-364.15-364.15v364.15z","M915.386 573.311h-479.34v-477.482h44.589v432.892h434.751z"],"attrs":[{},{},{}],"width":1021,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cake-chart"]},"attrs":[{},{},{}],"properties":{"order":87,"id":68,"name":"cake-chart","prevSize":32,"code":59663},"setIdx":0,"setId":2,"iconIdx":7},{"icon":{"paths":["M618.798 771.392l-165.156-198.187v-351.686h44.689v334.199l155.441 184.586z","M471.129 998.725c-242.877 0-439.121-196.245-439.121-439.121s196.245-439.121 439.121-439.121 439.121 196.245 439.121 439.121-196.245 439.121-439.121 439.121zM471.129 167.115c-215.674 0-392.489 176.814-392.489 392.489s176.814 392.489 392.489 392.489 392.489-176.814 392.489-392.489-174.872-392.489-392.489-392.489z","M447.812-11.642h46.632v170.985h-46.632v-170.985z","M317.631-25.243h308.939v46.632h-308.939v-46.632z"],"attrs":[{},{},{},{}],"width":933,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["stopwatch"]},"attrs":[{},{},{},{}],"properties":{"order":89,"id":66,"name":"stopwatch","prevSize":32,"code":59665},"setIdx":0,"setId":2,"iconIdx":8},{"icon":{"paths":["M373.421 873.923h1049.578v66.816h-1049.578v-66.816z","M256.492 937.956c-119.713-11.136-217.154-100.225-242.21-217.154-30.624-147.554 61.249-295.106 206.017-331.299 0-125.282 83.521-236.642 208.803-264.482 144.769-36.193 295.106 52.896 331.299 200.45l-64.033 16.704c-27.84-111.361-139.202-178.178-250.562-153.121-103.009 25.056-169.825 119.713-155.905 222.723l2.783 30.624-44.545 8.352c-116.929 25.056-192.098 139.202-167.041 258.913 19.489 89.089 91.872 155.905 183.745 167.041l-8.352 61.249z","M1420.215 940.74l-2.783-66.816c72.385-8.352 130.848-64.033 147.554-133.634 19.489-94.658-41.761-186.53-133.634-206.017l-41.761-8.352 2.783-30.624c11.136-83.521-41.761-158.689-122.497-178.178h-5.568c-86.304-19.489-175.393 33.408-197.666 122.497l-64.033-16.704c30.624-122.497 155.905-200.45 278.402-169.825h5.568c103.009 25.056 172.61 116.929 172.61 219.937 119.713 33.408 194.881 155.905 169.825 278.402-22.272 103.009-105.792 178.178-208.803 189.313z","M690.8 317.119c-22.272-94.658 25.056-194.881 111.361-236.642 103.009-50.113 228.29-5.568 278.402 97.441l-58.465 27.84c-33.408-69.6-119.713-100.225-189.313-66.816-61.249 27.84-91.872 97.441-77.952 161.473l-64.033 16.704z"],"attrs":[{},{},{},{}],"width":1655,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cloud"]},"attrs":[{},{},{},{}],"properties":{"order":90,"id":65,"name":"cloud","prevSize":32,"code":59666},"setIdx":0,"setId":2,"iconIdx":9},{"icon":{"paths":["M459.718 839.010v0c-143.177 0-259.84-116.662-258.073-259.84 0-143.177 116.662-258.073 258.073-258.073v0c44.19 0 88.381 12.374 127.268 33.583l-21.213 35.354c-31.816-17.675-68.937-28.282-106.058-28.282v0c-120.199 0-217.417 97.219-217.417 217.417s97.219 217.417 217.417 217.417v0c120.199 0 217.417-97.219 217.417-217.417 0-37.121-10.606-76.007-28.282-107.825l35.354-21.213c22.98 38.888 35.354 84.845 35.354 129.036-1.767 143.177-118.431 259.84-259.84 259.84z","M459.718 1010.468c-134.34 0-266.91-61.866-349.988-178.529-141.408-194.437-97.219-464.884 95.451-604.525 153.782-109.592 358.826-109.592 509.074 3.534l-22.98 33.583c-137.874-102.52-321.706-102.52-459.58-3.534-174.995 125.5-213.881 369.432-88.381 544.425s369.432 213.881 544.425 88.381c84.845-60.098 139.641-150.248 157.318-254.536 15.908-102.52-7.071-205.044-68.937-289.889l33.583-24.747c67.17 93.684 93.684 208.578 76.007 321.706s-79.543 213.881-173.227 281.051c-77.776 56.563-166.156 83.078-252.769 83.078z","M493.941 515.253l315.015-314.925 29.993 30.002-315.015 314.925-29.993-30.002z","M892.784 246.857c-12.374 0-24.747 0-37.121-1.767s-26.514-1.767-40.655-3.534l-17.675-1.767v-17.675c-1.767-14.141-3.534-26.514-3.534-38.888-1.767-24.747-1.767-49.494 0-76.007 0-21.213 10.606-40.655 26.514-56.563 12.374-14.141 31.816-21.213 53.029-19.444 28.282 1.767 53.029 21.213 61.866 47.724v3.534c1.767 7.071 1.767 12.374 1.767 19.444 7.071 0 14.141 1.767 21.213 3.534 19.444 5.302 35.354 19.444 42.423 35.354 3.534 7.071 7.071 17.675 7.071 26.514 0 19.444-7.071 38.888-19.444 54.796-15.908 15.908-37.121 24.747-60.098 24.747-10.606 0-22.98 0-35.354 0zM836.22 200.899c7.071 0 14.141 1.767 22.98 1.767 22.98 1.767 45.957 1.767 68.937 0h3.534c10.606 0 22.98-5.302 30.049-12.374 5.302-5.302 8.839-14.141 8.839-22.98 0-3.534-1.767-7.071-3.534-10.606-3.534-7.071-8.839-12.374-15.908-14.141-8.839-1.767-17.675-1.767-28.282 0l-26.514 3.534 1.767-26.514c0-10.606 0-19.444-1.767-30.049-3.534-10.606-14.141-17.675-24.747-17.675-8.839 0-15.908 3.534-22.98 8.839-7.071 7.071-12.374 17.675-12.374 28.282-1.767 22.98-1.767 45.957 0 68.937-1.767 8.839-1.767 15.908 0 22.98z","M459.718 672.854c-51.262 0-91.917-40.655-91.917-91.917s40.655-91.917 91.917-91.917 91.917 40.655 91.917 91.917-40.655 91.917-91.917 91.917zM459.718 529.675c-28.282 0-51.262 22.98-51.262 51.262s22.98 51.262 51.262 51.262 51.262-22.98 51.262-51.262-22.98-51.262-51.262-51.262z"],"attrs":[{},{},{},{},{}],"width":1013,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["dart"]},"attrs":[{},{},{},{},{}],"properties":{"order":92,"id":63,"name":"dart","prevSize":32,"code":59668},"setIdx":0,"setId":2,"iconIdx":10},{"icon":{"paths":["M1534.010 599.298h-91.094l-11.387-22.774c-68.321-117.664-167.006-216.348-284.669-284.669-371.967-216.348-850.211-87.298-1066.56 284.669l-79.707-45.547c239.122-417.515 774.299-557.952 1188.019-318.829 125.254 72.116 227.735 174.597 303.647 296.056h41.752v91.094z","M1499.849 508.204h204.962v91.094h-204.962v-91.094z","M786.278 880.172c-148.028 0-269.487-121.46-269.487-269.487s121.46-269.487 269.487-269.487 269.487 121.46 269.487 269.487-121.46 269.487-269.487 269.487zM786.278 432.293c-98.685 0-178.392 79.707-178.392 178.392s79.707 178.392 178.392 178.392 178.392-79.707 178.392-178.392-79.707-178.392-178.392-178.392z"],"attrs":[{},{},{}],"width":1739,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-1"]},"attrs":[{},{},{}],"properties":{"order":97,"id":58,"name":"eye-1","prevSize":32,"code":59673},"setIdx":0,"setId":2,"iconIdx":11},{"icon":{"paths":["M1068.604 775.642h-62.959l-7.87-15.74c-47.219-81.322-115.425-149.528-196.747-196.747-257.084-149.528-587.619-60.335-737.147 196.747l-55.089-31.48c165.269-285.94 535.152-385.624 821.092-220.357 86.569 49.842 157.398 120.671 209.864 204.617h28.856c0 0 0 62.959 0 62.959z","M1044.994 712.683h141.658v62.959h-141.658v-62.959z","M549.19 969.765c-102.309 0-186.254-83.946-186.254-186.254s83.946-186.254 186.254-186.254 186.254 83.946 186.254 186.254-83.946 186.254-186.254 186.254zM549.19 660.216c-68.206 0-123.296 55.089-123.296 123.296s55.089 123.296 123.296 123.296 123.296-55.089 123.296-123.296c0-68.206-55.089-123.296-123.296-123.296z","M528.204 33.248h62.959v173.137h-62.959v-173.137z","M836.173 307.076l102.334-129.768 49.435 38.985-102.334 129.768-49.435-38.985z","M137.111 215.925l50.071-38.165 98.595 129.351-50.071 38.165-98.595-129.351z"],"attrs":[{},{},{},{},{},{}],"width":1198,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-2"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":98,"id":57,"name":"eye-2","prevSize":32,"code":59674},"setIdx":0,"setId":2,"iconIdx":12},{"icon":{"paths":["M697.122 444.84v0c-262.241 0-505.296-140.716-636.418-364.58l67.16-38.378c118.327 201.48 335.8 329.402 569.258 329.402v0c233.46 0 450.93-124.725 569.258-329.402l67.16 38.378c-131.122 223.867-374.175 364.58-636.418 364.58z","M633.162 783.835h76.753v211.072h-76.753v-211.072z","M149.619 771.033l124.696-158.24 60.283 47.503-124.696 158.24-60.283-47.503z","M1006.499 664.923l61.042-46.529 120.197 157.694-61.042 46.529-120.197-157.694z"],"attrs":[{},{},{},{}],"width":1337,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-3"]},"attrs":[{},{},{},{}],"properties":{"order":99,"id":56,"name":"eye-3","prevSize":32,"code":59675},"setIdx":0,"setId":2,"iconIdx":13},{"icon":{"paths":["M693.748 1030.634c-65.084 0-117.964-52.88-117.964-117.964s52.88-117.964 117.964-117.964 117.964 52.88 117.964 117.964-52.88 117.964-117.964 117.964zM693.748 888.265c-12.203 0-24.407 12.203-24.407 24.407s12.203 24.407 24.407 24.407c12.203 0 24.407-12.203 24.407-24.407s-12.203-24.407-24.407-24.407z","M644.936 62.517h97.625v349.823h-97.625v-349.823z","M1086.422 558.12l206.769-261.739 76.607 60.518-206.769 261.739-76.607-60.518z","M22.445 353.369l77.612-59.22 199.866 261.94-77.612 59.22-199.866-261.94z","M87.658 839.452l-85.422-48.813c69.151-122.032 170.845-219.657 292.875-292.875 183.047-105.761 398.636-134.235 602.023-81.354 203.386 56.948 378.298 187.115 484.058 370.162l-85.422 48.813c-93.558-162.709-244.063-276.605-423.043-325.418s-370.162-24.407-528.804 69.151c-105.761 69.151-195.25 154.573-256.267 260.334z"],"attrs":[{},{},{},{},{}],"width":1379,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-4"]},"attrs":[{},{},{},{},{}],"properties":{"order":100,"id":55,"name":"eye-4","prevSize":32,"code":59676},"setIdx":0,"setId":2,"iconIdx":14},{"icon":{"paths":["M512.41 1017.338c-223.412 0-404.27-180.859-404.27-404.27s180.859-406.931 406.931-406.931c223.412 0 406.931 180.859 406.931 406.931s-186.178 404.27-409.59 404.27zM512.41 269.969c-188.836 0-343.099 154.262-343.099 343.099s154.262 343.099 343.099 343.099 343.099-154.262 343.099-343.099c0-191.498-154.262-343.099-343.099-343.099z","M515.070 695.519c-45.215 0-82.452-37.236-82.452-82.452s37.236-82.452 82.452-82.452 82.452 37.236 82.452 82.452-37.236 82.452-82.452 82.452zM515.070 591.79c-10.639 0-21.278 7.979-21.278 21.278s7.979 21.278 21.278 21.278 18.617-10.639 18.617-21.278-7.979-21.278-18.617-21.278z","M480.494-6.637h63.834v255.331h-63.834v-255.331z","M799.409 353.584l150.084-189.873 50.077 39.584-150.084 189.873-50.077-39.584z","M29.206 202.12l50.721-38.753 145.322 190.205-50.721 38.753-145.322-190.205z"],"attrs":[{},{},{},{},{}],"width":1020,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-5"]},"attrs":[{},{},{},{},{}],"properties":{"order":101,"id":54,"name":"eye-5","prevSize":32,"code":59677},"setIdx":0,"setId":2,"iconIdx":15},{"icon":{"paths":["M509.725 725.959c-46.895 0-87.929-38.103-87.929-87.929s38.103-87.929 87.929-87.929 87.929 38.103 87.929 87.929-38.103 87.929-87.929 87.929zM509.725 620.445c-8.793 0-17.585 8.793-17.585 17.585s8.793 17.585 17.585 17.585c8.793 0 17.585-8.793 17.585-17.585s-5.862-17.585-17.585-17.585z","M474.553 13.739h70.343v257.924h-70.343v-257.924z","M797.941 375.875l152.62-193.193 55.198 43.605-152.62 193.193-55.198-43.605z","M15.553 227.295l55.909-42.691 147.64 193.35-55.909 42.691-147.64-193.35z","M512.656 1019.055c-202.236 0-398.61-105.514-509.986-293.096l61.55-35.172c143.617 246.2 460.16 331.197 706.359 187.58 79.135-43.964 143.617-111.376 187.58-187.58l61.55 35.172c-52.757 87.929-126.032 161.202-213.959 213.959-93.791 55.688-193.443 79.135-293.096 79.135z","M958.161 585.273c-70.343-120.169-181.72-205.167-313.612-240.339s-272.578-17.585-392.747 52.757c-79.135 43.964-143.617 111.376-190.512 190.512l-61.55-35.172c52.757-87.929 126.032-164.133 213.959-213.959 278.44-161.202 638.947-64.481 800.15 213.959l-55.688 32.241z"],"attrs":[{},{},{},{},{},{}],"width":1020,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-6"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":102,"id":53,"name":"eye-6","prevSize":32,"code":59678},"setIdx":0,"setId":2,"iconIdx":16},{"icon":{"paths":["M699.992 577.187h100.935v370.096h-100.935v-370.096z","M39.886 642.919l218.641-277.46 79.275 62.469-218.641 277.46-79.275-62.469z","M1168.077 424.973l80.254-61.217 211.71 277.543-80.254 61.217-211.71-277.543z","M750.46 594.010c-4.205 0-4.205 0 0 0-302.805 0-580.376-159.814-731.779-420.562l88.318-50.467c130.374 227.104 378.507 370.096 643.461 370.096v0c264.954 0 508.881-142.992 643.461-370.096l88.318 50.467c-155.609 260.75-433.179 420.562-731.779 420.562z"],"attrs":[{},{},{},{}],"width":1492,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-7"]},"attrs":[{},{},{},{}],"properties":{"order":103,"id":52,"name":"eye-7","prevSize":32,"code":59679},"setIdx":0,"setId":2,"iconIdx":17},{"icon":{"paths":["M500.604 711.443c-45.588 0-85.476-37.040-85.476-85.476s37.040-85.476 85.476-85.476c48.436 0 85.476 37.040 85.476 85.476s-37.040 85.476-85.476 85.476z","M534.794 19.093h-68.38v250.726h68.38v-250.726z","M929.448 182.772l-148.362 187.803 53.66 42.39 148.362-187.803-53.66-42.39z","M74.194 185.253l-54.349 41.502 143.521 187.955 54.347-41.502-143.52-187.955z","M503.453 996.36c-196.592 0-387.487-102.571-495.756-284.916l59.832-34.19c139.608 239.332 447.321 321.957 686.651 182.348 76.929-42.737 139.608-108.267 182.348-182.348l59.832 34.19c-51.284 85.476-122.514 156.704-207.991 207.991-91.173 54.135-188.045 76.929-284.916 76.929z","M936.528 574.682c-68.38-116.818-176.649-199.443-304.862-233.632s-264.973-17.094-381.789 51.284c-76.929 42.737-139.608 108.267-185.196 185.196l-59.832-34.19c51.284-85.476 122.514-159.555 207.991-207.991 270.673-156.704 621.121-62.682 777.825 207.991l-54.135 31.341z"],"attrs":[{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-8"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":104,"id":51,"name":"eye-8","prevSize":32,"code":59680},"setIdx":0,"setId":2,"iconIdx":18},{"icon":{"paths":["M847.49 274.312c-23.283 0-40.746-17.463-40.746-40.746s17.463-40.746 40.746-40.746c23.283 0 40.746 17.463 40.746 40.746 1.94 23.283-17.463 40.746-40.746 40.746zM847.49 227.747c-1.94 0-5.822 1.94-5.822 5.822 0 5.822 9.702 5.822 9.702 0 1.94-3.879 0-5.822-3.879-5.822z","M244.056 375.207c-36.867 0-73.73-9.702-106.717-29.105s-58.209-44.625-77.612-77.612l40.746-23.283c15.524 25.224 34.924 46.568 60.149 60.149 79.552 46.568 182.388 19.403 228.956-60.149l40.746 23.283c-40.746 67.911-112.536 106.717-186.267 106.717z","M824.206 6.552h46.568v89.254h-46.568v-89.254z","M937.966 126.682l51.661-65.511 36.566 28.834-51.661 65.511-36.566-28.834z","M669.986 87.077l36.975-28.309 50.721 66.246-36.975 28.309-50.721-66.246z","M546.743 708.941c-85.371 0-155.223-69.851-155.223-155.223h46.568c0 60.149 48.508 110.597 110.597 110.597 60.149 0 110.597-48.508 110.597-110.597h46.568c-3.879 85.371-73.73 155.223-159.105 155.223z","M523.461 879.685h46.568v102.835h-46.568v-102.835z","M288.562 871.556l61.264-77.709 36.57 28.828-61.264 77.709-36.57-28.828z","M710.636 823.901l37.021-28.252 58.859 77.128-37.021 28.252-58.859-77.128z","M849.43 377.15c-19.403 0-36.867-1.94-56.27-7.762-54.327-15.524-100.895-50.447-128.061-98.955l40.746-23.283c21.343 38.806 58.209 65.971 100.895 77.612s87.314 5.822 126.12-15.524c25.224-15.524 46.568-36.867 62.089-62.089l40.746 23.283c-19.403 32.984-46.568 60.149-79.552 79.552-34.924 17.463-69.851 27.165-106.717 27.165z","M993.011 219.985c-46.568-79.552-147.464-108.657-227.015-62.089-25.224 15.524-46.568 36.867-62.089 62.089l-40.746-23.283c19.403-32.984 46.568-60.149 79.552-79.552 102.835-58.209 232.836-23.283 291.045 79.552l-40.746 23.283z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"width":1103,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["face-1"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":106,"id":49,"name":"face-1","prevSize":32,"code":59682},"setIdx":0,"setId":2,"iconIdx":19},{"icon":{"paths":["M636.961 897.624h-261.201v-40.593h218.843v-47.652h42.358z","M462.24 948.806h67.066v42.358h-67.066v-42.358z","M769.326 258.741c-21.179 0-37.061-15.885-37.061-37.061s15.885-37.061 37.061-37.061c21.179 0 37.061 15.885 37.061 37.061 1.765 21.179-15.885 37.061-37.061 37.061zM769.326 216.383c-1.765 0-5.294 1.765-5.294 5.294 0 5.294 8.824 5.294 8.824 0 1.765-3.529 0-5.294-3.529-5.294z","M89.849 209.324l-37.061-21.179c52.946-93.539 171.194-125.307 264.731-72.361 30.002 17.649 54.711 42.358 72.361 72.361l-37.061 21.179c-14.12-22.944-33.532-42.358-56.475-56.475-72.361-40.593-165.897-15.885-206.491 56.475z","M495.772 629.364c-33.532 0-67.066-8.824-97.068-26.473s-52.946-40.593-70.595-70.595l37.061-21.179c14.12 22.944 31.768 42.358 54.711 54.711 35.297 21.179 75.89 26.473 114.716 15.885s72.361-35.297 91.774-70.595l37.061 21.179c-26.473 44.122-67.066 77.655-118.248 90.007-15.885 5.294-33.532 7.059-49.417 7.059z","M748.15 15.187h42.358v81.184h-42.358v-81.184z","M851.709 124.346l46.992-59.588 33.26 26.227-46.992 59.588-33.26-26.227z","M607.928 88.387l33.632-25.749 46.134 60.255-33.632 25.749-46.134-60.255z","M638.726 209.324l-37.061-21.179c17.649-30.002 40.593-52.946 70.595-70.595 44.122-26.473 97.068-33.532 146.485-19.415s91.774 45.888 118.248 90.007l-37.061 21.179c-21.179-35.297-52.946-60.005-91.774-70.595s-79.419-5.294-114.716 15.885c-22.944 12.353-42.358 31.768-54.711 54.711z","M220.451 258.741c-21.179 0-37.061-15.885-37.061-37.061s15.885-37.061 37.061-37.061 37.061 15.885 37.061 37.061c1.765 21.179-15.885 37.061-37.061 37.061zM220.451 216.383c-1.765 0-5.294 1.765-5.294 5.294 0 5.294 8.824 5.294 8.824 0 1.765-3.529 0-5.294-3.529-5.294z"],"attrs":[{},{},{},{},{},{},{},{},{},{}],"width":1013,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["face-2"]},"attrs":[{},{},{},{},{},{},{},{},{},{}],"properties":{"order":107,"id":48,"name":"face-2","prevSize":32,"code":59683},"setIdx":0,"setId":2,"iconIdx":20},{"icon":{"paths":["M226.738 357.76c-79.377 0-142.517-64.943-142.517-142.517s64.943-142.517 142.517-142.517 144.32 63.141 144.32 142.517-64.943 142.517-144.32 142.517zM226.738 114.218c-55.924 0-101.024 45.101-101.024 101.024s46.904 101.024 101.024 101.024 101.024-45.101 101.024-101.024-45.101-101.024-101.024-101.024z","M787.782 357.76c-79.377 0-142.517-64.943-142.517-142.517s64.943-142.517 142.517-142.517 142.517 64.943 142.517 142.517-63.141 142.517-142.517 142.517zM787.782 114.218c-55.924 0-101.024 45.101-101.024 101.024s45.101 101.024 101.024 101.024 101.024-45.101 101.024-101.024-45.101-101.024-101.024-101.024z","M486.516 897.154h43.295v82.986h-43.295v-82.986z","M508.163 631.965c-19.845 0-39.687-7.217-54.121-21.647l-95.613-95.613 30.667-30.667 95.613 95.613c12.628 12.628 36.081 12.628 48.708 0l95.613-95.613 30.667 30.667-95.613 95.613c-16.237 14.43-36.081 21.647-55.924 21.647z","M789.586 253.127c-21.647 0-37.884-16.237-37.884-37.884s16.237-37.884 37.884-37.884c21.647 0 37.884 16.237 37.884 37.884s-18.039 37.884-37.884 37.884zM789.586 209.832c-1.803 0-5.412 1.803-5.412 5.412 0 5.412 9.020 5.412 9.020 0 0-3.608-1.803-5.412-3.608-5.412z","M508.163 907.978c-32.473 0-66.749-9.020-97.416-25.256-30.667-18.039-55.924-43.295-73.963-73.963l37.884-21.647c14.43 23.453 34.275 43.295 57.729 57.729 73.963 43.295 169.575 16.237 211.069-57.729l37.884 21.647c-37.884 63.141-104.633 99.218-173.184 99.218z","M766.135 4.174h43.295v82.986h-43.295v-82.986z","M871.904 115.86l48.034-60.908 33.997 26.809-48.034 60.908-33.997-26.809z","M622.752 79.037l34.375-26.321 47.156 61.591-34.375 26.321-47.156-61.591z","M226.738 253.127c-21.647 0-37.884-16.237-37.884-37.884s16.237-37.884 37.884-37.884 37.884 16.237 37.884 37.884c1.803 21.647-16.237 37.884-37.884 37.884zM226.738 209.832c-1.803 0-5.412 1.803-5.412 5.412 0 5.412 9.020 5.412 9.020 0 1.803-3.608 0-5.412-3.608-5.412z"],"attrs":[{},{},{},{},{},{},{},{},{},{}],"width":1013,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["face-3"]},"attrs":[{},{},{},{},{},{},{},{},{},{}],"properties":{"order":108,"id":47,"name":"face-3","prevSize":32,"code":59684},"setIdx":0,"setId":2,"iconIdx":21},{"icon":{"paths":["M408.161 991.548l-25.575-34.709c38.362-29.231 76.726-60.287 104.129-85.861 63.94-51.152 122.4-109.611 175.376-171.724 38.362-47.499 54.806-89.515 51.152-135.189-1.827-43.845-20.095-84.036-51.152-113.264-14.614-12.788-32.885-23.748-52.979-29.231-36.538-12.788-78.554-9.134-113.264 9.134-14.614 9.134-27.402 18.268-40.192 31.055l-29.231-31.055c14.614-14.614 31.055-27.402 49.323-38.362 45.67-23.748 98.65-27.402 147.974-10.961 25.575 7.307 47.499 20.095 67.594 38.362 40.192 36.538 63.94 89.515 65.767 142.496 3.654 56.633-16.441 109.611-62.113 166.244-54.806 63.94-115.093 124.225-180.858 177.205-27.402 21.921-65.767 54.806-105.957 85.861z","M371.624 12.357h43.845v96.822h-43.845v-96.822z","M545.217 162.137l56.64-71.658 34.395 27.187-56.64 71.658-34.395-27.187z","M151.153 117.386l34.866-26.587 55.391 72.634-34.866 26.587-55.391-72.634z","M322.296 947.706c-10.961-9.134-25.575-21.921-38.362-32.885l-14.614-12.788c-63.94-52.979-126.053-113.264-179.030-177.205-45.67-56.633-65.767-107.786-62.113-166.244 1.827-54.806 25.575-105.957 65.767-142.496 20.095-18.268 42.016-31.055 67.594-38.362 47.499-16.441 100.475-12.788 146.149 10.961 40.192 25.575 73.074 56.633 100.475 93.168l-32.885 27.402c-23.748-32.885-52.979-60.287-87.69-82.208-32.885-18.268-74.901-20.095-111.439-7.307-20.095 7.307-36.538 16.441-52.979 29.231-31.055 29.231-49.323 69.42-51.152 113.264-1.827 47.499 12.788 89.515 51.152 137.014 52.979 62.113 111.439 118.746 173.551 171.724l14.614 12.788c12.788 10.961 27.402 23.748 36.538 31.055l-25.575 32.885z","M389.891 1004.336l-27.402-34.709 18.268-14.614c32.885-25.575 67.594-52.979 105.957-85.861 63.94-51.152 122.4-109.611 175.376-171.724 38.362-47.499 54.806-89.515 51.152-135.189l43.845-1.827c3.654 56.633-16.441 109.611-62.113 166.244-54.806 63.94-115.093 124.225-180.858 177.205-38.362 32.885-73.074 62.113-105.957 85.861l-18.268 14.614z"],"attrs":[{},{},{},{},{},{}],"width":771,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["heart-sparks"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":112,"id":43,"name":"heart-sparks","prevSize":32,"code":59688},"setIdx":0,"setId":2,"iconIdx":22},{"icon":{"paths":["M402.133 836.083l-23.669-32.772c38.235-29.131 76.469-60.083 103.778-85.572 63.724-50.98 121.985-109.241 174.785-171.145 38.235-47.337 54.621-89.215 50.98-134.731-1.82-43.696-20.028-83.75-50.98-112.883-14.566-12.746-32.772-23.669-52.8-29.131-36.414-12.746-78.289-9.103-112.883 9.103-14.566 9.103-27.309 18.207-40.055 30.952l-29.131-30.952c14.566-14.566 30.952-27.309 49.159-38.235 45.516-23.669 98.316-27.309 147.476-10.925 25.489 7.281 47.337 20.028 67.364 38.235 40.055 36.414 63.724 89.215 65.544 142.013 3.641 56.441-16.386 109.241-61.903 165.682-54.621 63.724-114.704 123.805-180.247 176.607-27.309 21.848-67.364 52.8-107.421 83.75z","M318.383 794.206c-10.925-9.103-25.489-21.848-38.235-32.772l-14.566-12.746c-63.724-52.8-125.627-112.883-178.427-176.607-45.516-56.441-65.544-107.421-61.903-165.682 1.82-54.621 25.489-105.599 65.544-142.013 20.028-18.207 41.875-30.952 67.364-38.235 47.337-16.386 100.138-12.746 145.654 10.925 40.055 25.489 72.827 56.441 100.138 92.855l-32.772 27.309c-23.669-32.772-52.8-60.083-87.392-81.93-32.772-18.207-74.649-20.028-111.063-7.281-20.028 7.281-36.414 16.386-52.8 29.131-30.952 29.131-49.159 69.187-50.98 112.883-1.82 47.337 12.746 89.215 50.98 136.551 52.8 61.903 111.063 118.344 172.965 171.145l14.566 12.746c12.746 10.925 27.309 23.669 36.414 30.952l-25.489 32.772z","M385.748 850.647l-27.309-34.594 18.207-14.566c32.772-25.489 67.364-52.8 105.599-85.572 63.724-50.98 121.985-109.241 174.785-171.145 38.235-47.337 54.621-89.215 50.98-134.731l43.696-1.82c3.641 56.441-16.386 109.241-61.903 165.682-54.621 63.724-114.704 123.805-180.247 176.607-38.235 32.772-72.827 61.903-105.599 85.572l-18.207 14.566z"],"attrs":[{},{},{}],"width":764,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["heart"]},"attrs":[{},{},{}],"properties":{"order":113,"id":42,"name":"heart","prevSize":32,"code":59689},"setIdx":0,"setId":2,"iconIdx":23},{"icon":{"paths":["M710.019 1022.954l-42.286-5.287c3.523-37 12.334-74 26.429-109.238l5.287-15.857 15.857 1.762c37 5.287 74 15.857 107.476 31.713l-17.619 38.762c-26.429-10.57-52.856-19.381-79.285-26.429-5.287 28.19-12.334 56.381-15.857 84.572z","M507.929 809.653l36.619-21.148 103.092 178.52-36.619 21.148-103.092-178.52z","M694.354 717.108l36.627-21.126 96.827 167.878-36.627 21.126-96.827-167.878z","M181.446 1022.954c-3.523-28.19-8.81-56.381-17.619-82.809-28.19 5.287-54.619 14.096-81.049 26.429l-17.619-38.762c35.239-15.857 70.475-26.429 107.476-31.713l15.857-1.762 5.287 15.857c14.096 35.239 22.906 72.238 26.429 109.238l-38.762 3.523z","M244.322 965.182l103.135-178.478 36.611 21.156-103.135 178.478-36.611-21.156z","M64.86 863.556l96.809-167.898 36.632 21.121-96.809 167.898-36.632-21.121z","M424.588 215.999h42.286v95.142h-42.286v-95.142z","M546.724 345.623l56.795-71.893 33.182 26.213-56.795 71.893-33.182-26.213z","M255.658 299.573l33.618-25.65 54.507 71.436-33.618 25.65-54.507-71.436z","M445.73 765.715c-202.62 0-366.477-163.857-366.477-366.477s163.857-368.24 366.477-368.24 366.477 163.857 366.477 366.477-163.857 368.24-366.477 368.24zM445.73 73.284c-179.714 0-324.191 146.237-324.191 324.191 0 179.714 146.237 324.191 324.191 324.191 179.714 0 324.191-146.237 324.191-324.191 1.762-177.953-144.477-324.191-324.191-324.191z"],"attrs":[{},{},{},{},{},{},{},{},{},{}],"width":907,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["medal"]},"attrs":[{},{},{},{},{},{},{},{},{},{}],"properties":{"order":126,"id":29,"name":"medal","prevSize":32,"code":59702},"setIdx":0,"setId":2,"iconIdx":24},{"icon":{"paths":["M301.758 939.688v-57.992c38.66 0 77.321-14.499 103.902-43.493 26.58-26.58 43.493-65.24 43.493-103.902h57.992c-2.415 113.567-94.236 205.387-205.387 205.387z","M67.374 736.718v-439.771l195.721 77.321-21.747 53.159-118.4-45.911v270.628l118.4-48.327 21.747 53.159z","M937.251 975.934l-620.994-299.625v-309.288l620.994-299.625v908.538zM371.832 640.066l507.427 246.465v-727.313l-507.427 244.048v236.8z","M1319.030 492.668h147.395v57.992h-147.395v-57.992z","M1200.19 801.147l35.956-45.501 109.96 86.892-35.956 45.501-109.96-86.892z","M1201.794 243.305l109.592-83.423 35.124 46.143-109.592 83.423-35.124-46.143z"],"attrs":[{},{},{},{},{},{}],"width":1473,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["megaphone"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":127,"id":28,"name":"megaphone","prevSize":32,"code":59703},"setIdx":0,"setId":2,"iconIdx":25},{"icon":{"paths":["M691.62 189.974l-71.318 71.317 32.296 32.294 71.317-71.317-32.294-32.294z","M801.738 417.211l-94.503 11.057 5.308 45.361 94.503-11.057-5.308-45.361z","M455.681 109.054l-12.29 92.436 45.274 6.019 12.29-92.436-45.274-6.019z","M696.313 953.495c-1.902 0-5.709 0-7.611 0-390.114-9.516-669.856-287.353-681.274-675.565 0-1.902 0-49.478 17.127-79.926 17.127-32.351 68.508-72.315 78.024-79.926 26.642-24.739 66.606-24.739 93.248 1.902l114.179 114.179c26.642 26.642 26.642 68.508 0 93.248l-55.187 57.090c-9.516 9.516-9.516 22.836 0 32.351l293.062 293.062c9.516 9.516 22.836 9.516 32.351 0l55.187-55.187c26.642-26.642 68.508-26.642 93.248 0l114.179 114.179c24.739 24.739 26.642 66.606 1.902 93.248-7.611 9.516-49.478 62.799-79.926 79.926-30.448 11.418-53.284 11.418-68.508 11.418zM148.249 144.721c-5.709 0-11.418 1.902-15.224 5.709l-1.902 1.902c-15.224 11.418-55.187 45.672-68.508 66.606-9.516 15.224-11.418 45.672-9.516 57.090 9.516 363.472 272.128 624.184 639.407 633.698 11.418 0 28.544 0 53.284-11.418 17.127-9.516 49.478-45.672 64.701-66.606l1.902-1.902c9.516-9.516 9.516-22.836 0-32.351l-114.179-114.179c-7.611-7.611-22.836-7.611-32.351 0l-55.187 55.187c-26.642 26.642-68.508 26.642-93.248 0l-294.965-291.16c-26.642-26.642-26.642-68.508 0-93.248l55.187-55.187c9.516-9.516 9.516-22.836 0-32.351l-114.179-114.179c-3.807-5.709-9.516-7.611-15.224-7.611z"],"attrs":[{},{},{},{}],"width":871,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["phone"]},"attrs":[{},{},{},{}],"properties":{"order":130,"id":25,"name":"phone","prevSize":32,"code":59706},"setIdx":0,"setId":2,"iconIdx":26},{"icon":{"paths":["M530.601 42.357h-102.298v943.933h102.298v-943.933z","M953.743 465.501h-943.933v102.298h943.933v-102.298z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["plus"]},"attrs":[{},{}],"properties":{"order":134,"id":21,"name":"plus","prevSize":32,"code":59710},"setIdx":0,"setId":2,"iconIdx":27},{"icon":{"paths":["M861.919 163.252h181.462v368.595h-181.462v-368.595z","M1518.035 721.241l214.328-271.506 142.43 112.434-214.328 271.506-142.43-112.434z","M35.557 561.282l144.244-110.094 209.865 274.966-144.244 110.094-209.865-274.966z"],"attrs":[{},{},{}],"width":1883,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["spark"]},"attrs":[{},{},{}],"properties":{"order":142,"id":13,"name":"spark","prevSize":32,"code":59718},"setIdx":0,"setId":2,"iconIdx":28},{"icon":{"paths":["M490.344 969.609l-447.874-447.874v-356.353h356.353l440.085 440.085-29.209 29.209-428.4-426.454h-295.987v295.987l405.033 405.033 258.989-260.936 31.156 31.156-290.145 290.145z","M274.196 480.844c-44.787 0-81.786-36.998-81.786-81.786s36.998-81.786 81.786-81.786c44.787 0 81.786 36.998 81.786 81.786s-36.998 81.786-81.786 81.786zM274.196 352.325c-25.313 0-48.682 21.42-48.682 48.682 0 25.313 21.42 48.682 48.682 48.682s48.682-21.42 48.682-48.682c0-27.263-23.367-48.682-48.682-48.682z"],"attrs":[{},{}],"width":844,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["tag"]},"attrs":[{},{}],"properties":{"order":145,"id":10,"name":"tag","prevSize":32,"code":59721},"setIdx":0,"setId":2,"iconIdx":29},{"icon":{"paths":["M343.903 1043.22v-214.003h45.452v115.524l238.623-208.322h7.575c172.339 0 303.014-140.143 303.014-327.633 0-179.914-145.825-325.739-325.739-327.633h-227.26c-179.914 0-325.739 145.825-327.633 325.739 0 181.808 147.719 327.633 327.633 327.633v0 45.452c-206.427 0-373.084-166.656-373.084-371.19 1.894-206.427 168.551-373.084 373.084-373.084v0h227.26c204.534 0 371.19 166.656 371.19 371.19 0 208.322-145.825 367.404-340.89 371.19l-299.226 265.137z"],"attrs":[{}],"width":987,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["talk"]},"attrs":[{}],"properties":{"order":147,"id":8,"name":"talk","prevSize":32,"code":59723},"setIdx":0,"setId":2,"iconIdx":30},{"icon":{"paths":["M579.952 652.714l76.888-76.997 343.281 342.795-76.888 76.997-343.281-342.795z","M-0.049 72.342l76.943-76.943 343.038 343.038-76.943 76.943-343.038-343.038z","M0.721 921.957l923.318-923.318 76.943 76.943-923.318 923.318-76.943-76.943z"],"attrs":[{},{},{}],"width":1017,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cross"]},"attrs":[{},{},{}],"properties":{"order":154,"id":1,"name":"cross","prevSize":32,"code":59730},"setIdx":0,"setId":2,"iconIdx":31}],"height":1024,"metadata":{"name":"vinlottis-icons"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon--","metadata":{"fontFamily":"vinlottis-icons","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":false,"showSelector":true,"selector":"class","classSelector":".icon","cssVars":true,"cssVarsFormat":"scss","includeMetadata":false,"showMetadata":false,"showVersion":false,"noie8":true,"ie7":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"name":"icomoon","classSelector":".icon"},"historySize":50,"quickUsageToken":{"Vinlottis":"Yjk5NmI5NjM4NTVkYmE4OGMwYjhmODVmNmIzZWJhMDQjMSMxNjAzMTEwOTM4IyMj"},"showLiga":true,"gridSize":16}} \ No newline at end of file diff --git a/public/assets/fonts/vinlottis-icons/vinlottis-icons.svg b/public/assets/fonts/vinlottis-icons/vinlottis-icons.svg index a8f3889..3be4df8 100644 --- a/public/assets/fonts/vinlottis-icons/vinlottis-icons.svg +++ b/public/assets/fonts/vinlottis-icons/vinlottis-icons.svg @@ -1,6 +1,46 @@ +<<<<<<< HEAD +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +======= @@ -55,4 +95,5 @@ <glyph unicode="&#xe949;" glyph-name="tag" data-tags="tag" horiz-adv-x="844" d="M490.344-9.609l-447.874 447.874v356.353h356.353l440.085-440.085-29.209-29.209-428.4 426.454h-295.987v-295.987l405.033-405.033 258.989 260.936 31.156-31.156-290.145-290.145zM274.196 479.156c-44.787 0-81.786 36.998-81.786 81.786s36.998 81.786 81.786 81.786c44.787 0 81.786-36.998 81.786-81.786s-36.998-81.786-81.786-81.786zM274.196 607.675c-25.313 0-48.682-21.42-48.682-48.682 0-25.313 21.42-48.682 48.682-48.682s48.682 21.42 48.682 48.682c0 27.263-23.367 48.682-48.682 48.682z" /> <glyph unicode="&#xe94b;" glyph-name="talk" data-tags="talk" horiz-adv-x="987" d="M343.903-83.22v214.003h45.452v-115.524l238.623 208.322h7.575c172.339 0 303.014 140.143 303.014 327.633 0 179.914-145.825 325.739-325.739 327.633h-227.26c-179.914 0-325.739-145.825-327.633-325.739 0-181.808 147.719-327.633 327.633-327.633v0-45.452c-206.427 0-373.084 166.656-373.084 371.19 1.894 206.427 168.551 373.084 373.084 373.084v0h227.26c204.534 0 371.19-166.656 371.19-371.19 0-208.322-145.825-367.404-340.89-371.19l-299.226-265.137z" /> <glyph unicode="&#xe952;" glyph-name="cross" data-tags="cross" horiz-adv-x="1017" d="M579.952 307.286l76.888 76.997 343.281-342.795-76.888-76.997-343.281 342.795zM-0.049 887.658l76.943 76.943 343.038-343.038-76.943-76.943-343.038 343.038zM0.721 38.043l923.318 923.318 76.943-76.943-923.318-923.318-76.943 76.943z" /> +>>>>>>> 627f96b4205143f053a77c3948f846e8864282b6 </font></defs></svg> \ No newline at end of file diff --git a/public/assets/fonts/vinlottis-icons/vinlottis-icons.ttf b/public/assets/fonts/vinlottis-icons/vinlottis-icons.ttf index 2c846ef..d9e5f2f 100644 Binary files a/public/assets/fonts/vinlottis-icons/vinlottis-icons.ttf and b/public/assets/fonts/vinlottis-icons/vinlottis-icons.ttf differ diff --git a/public/assets/fonts/vinlottis-icons/vinlottis-icons.woff b/public/assets/fonts/vinlottis-icons/vinlottis-icons.woff index 5e61c8a..cca62d7 100644 Binary files a/public/assets/fonts/vinlottis-icons/vinlottis-icons.woff and b/public/assets/fonts/vinlottis-icons/vinlottis-icons.woff differ diff --git a/src/Vinlottis.vue b/src/Vinlottis.vue index d4d391b..c468a14 100644 --- a/src/Vinlottis.vue +++ b/src/Vinlottis.vue @@ -2,6 +2,7 @@ <div class="app-container"> <banner :routes="routes"/> <router-view /> + <Footer /> <UpdateToast v-if="showToast" :text="toastText" @@ -14,11 +15,12 @@ <script> import ServiceWorkerMixin from "@/mixins/ServiceWorkerMixin"; import banner from "@/ui/Banner"; +import Footer from "@/ui/Footer"; import UpdateToast from "@/ui/UpdateToast"; export default { name: "vinlottis", - components: { banner, UpdateToast }, + components: { banner, UpdateToast, Footer }, props: {}, data() { return { @@ -102,9 +104,16 @@ body { } </style> -<style scoped> +<style lang="scss" scoped> .app-container { background-color: white; min-height: 100vh; + display: grid; + grid-template-rows: 80px auto 100px; + + .main-container{ + height: 100%; + width: 100%; + } } </style> diff --git a/src/components/AllRequestedWines.vue b/src/components/AllRequestedWines.vue index 44c3ce3..67a54a0 100644 --- a/src/components/AllRequestedWines.vue +++ b/src/components/AllRequestedWines.vue @@ -57,9 +57,8 @@ h1 { } .requested-wines-container{ - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: flex-start; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 2rem; } </style> \ No newline at end of file diff --git a/src/components/PersonalHighscorePage.vue b/src/components/PersonalHighscorePage.vue index a925112..0d3116b 100644 --- a/src/components/PersonalHighscorePage.vue +++ b/src/components/PersonalHighscorePage.vue @@ -14,14 +14,14 @@ <h4 class="margin-bottom-0">Vinnende farger:</h4> <div class="raffle-container el-spacing"> - <div class="raffle-element" :class="color + `-raffle`" v-for="[color, occurences] in Object.entries(winningColors)"> + <div class="raffle-element" :class="color + `-raffle`" v-for="[color, occurences] in Object.entries(winningColors)" :key="color"> {{ occurences }} </div> </div> <h4 class="el-spacing">Flasker vunnet:</h4> - <div v-for="win in winner.highscore"> + <div v-for="win in winner.highscore" :key="win._id"> <router-link :to="winDateUrl(win.date)" class="days-ago"> {{ humanReadableDate(win.date) }} - {{ daysAgo(win.date) }} dager siden </router-link> diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue index 22fa042..81dd7c8 100644 --- a/src/components/RequestWine.vue +++ b/src/components/RequestWine.vue @@ -106,7 +106,6 @@ h1{ text-align: center; } - .main-container{ margin: auto; max-width: 1200px; diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue index e683a12..c095e1a 100644 --- a/src/components/VinlottisPage.vue +++ b/src/components/VinlottisPage.vue @@ -1,31 +1,68 @@ <template> - <div class="outer"> - <div class="container"> - <section class="header-and-notification"> - <h1 @click="startCountdown">Vinlotteri</h1> - <img - src="/public/assets/images/notification.svg" - alt="Notification-bell" - @click="requestNotificationAccess" - class="notification-request-button" - role="button" - v-if="notificationAllowed" - /> - </section> - <div class="to-lottery-container"> - <a href="#/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></a> + <main class="main-container"> + + <section class="top-container"> + + <div class="want-to-win"> + <h1> + Vil du også vinne? + </h1> + <img + src="/public/assets/images/notification.svg" + alt="Notification-bell" + @click="requestNotificationAccess" + class="notification-request-button" + role="button" + v-if="notificationAllowed" + /> </div> + + <router-link to="/lottery/game" class="participate-button"> + <i class="icon icon--arrow-right"></i> + <p>Trykk her for å delta</p> + </router-link> + + <router-link to="/lottery/generate" class="see-details-link"> + Se vipps detaljer og QR-kode + </router-link> + + <div class="icons-container"> + <i class="icon icon--heart-sparks"></i> + <i class="icon icon--face-1"></i> + <i class="icon icon--face-3"></i> + <i class="icon icon--ballon"></i> + + <i class="icon icon--bottle"></i> + <i class="icon icon--bottle"></i> + <i class="icon icon--bottle"></i> + <i class="icon icon--bottle"></i> + <i class="icon icon--bottle"></i> + </div> + + </section> + + <section class="content-container"> + + <div class="scroll-info"> + <i class ="icon icon--arrow-long-right"></i> + <p>Scroll for å se vinnere og annen gøy statistikk</p> + </div> + + <Highscore class="highscore"/> + <TotalBought class="total-bought" /> + <section class="chart-container"> <PurchaseGraph class="purchase" /> <WinGraph class="win" /> </section> - <TotalBought class="total-bought" /> - <Vipps class="vipps-icon" /> - <Highscore class="highscore"/> + <Wines class="wines-container" /> - </div> + + </section> + <Countdown :hardEnable="hardStart" @countdown="changeEnabled" /> - </div> + + </main> </template> <script> @@ -95,9 +132,180 @@ export default { <style lang="scss" scoped> @import "../styles/media-queries.scss"; +@import "../styles/variables.scss"; + +.top-container { + height: 30em; + background-color: $primary; + width: 100vw; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(12, 1fr); + align-items: center; + justify-items: start; + + @include mobile{ + padding-bottom: 2em; + height: 15em; + grid-template-rows: repeat(7, 1fr); + } + + .want-to-win { + grid-row: 2 / 4; + grid-column: 2 / -1; + display: flex; + + h1{ + font-size: 2em; + font-weight: 400; + } + + @include tablet { + h1{ + font-size: 3em; + } + grid-row: 2 / 4; + grid-column: 3 / -3; + } + } + + .notification-request-button{ + cursor: pointer; + } + + .participate-button { + grid-row: 4 / 6; + grid-column: 2 / -1; + + background: inherit; + border: 4px solid black; + padding: 0 1em 0 1em; + display: flex; + width: 12.5em; + column-gap: 15px; + align-items: center; + text-decoration: none; + color: black; + + i { + color: $link-color; + margin-left: 5px; + } + + p { + font-size: 16px; + } + + @include tablet { + grid-row: 4 / 6; + grid-column: 3 / -3; + } + } + + .see-details-link { + grid-row: 6 / 8; + grid-column: 2 / -1; + + @include tablet { + grid-row: 6 / 8; + grid-column: 2 / 10; + } + + @include tablet { + grid-column: 3 / -3; + } + + font-weight: bold; + color: black; + font-weight: 200; + font-size: 1.3em; + + text-decoration: underline; + text-decoration-color: $link-color; + text-underline-position: under; + } + + .icons-container { + grid-column: 1 / -1; + grid-row: 7 / -1; + @include mobile{ + margin-top: 2em; + display: none; + } + + @include tablet { + grid-row: 6 / -1; + grid-column: 7 / -1; + } + + @include desktop{ + grid-row: 4 / -3; + grid-column: 7 / 11; + } + + @include widescreen { + grid-column: 6 / 10; + } + + width: 100%; + min-width: 375px; + height: 100%; + display: grid; + grid: repeat(6, 1fr) / repeat(12, 1fr); + + i { + font-size: 5em; + + &.icon--heart-sparks{ + grid-column: 2 / 4; + grid-row: 2 / 4; + align-self: center; + justify-self: center; + + } + &.icon--face-1{ + grid-column: 4 / 7; + grid-row: 2 / 4; + justify-self: center; + + } + &.icon--face-3{ + grid-column: 7 / 10; + grid-row: 1 / 4; + align-self: center; + } + &.icon--ballon{ + grid-column: 9 / 11; + grid-row: 3 / 5; + + } + &.icon--bottle{ + grid-row: 4 / -1; + + &:nth-of-type(5) { + grid-column: 4 / 5; + align-self: center; + } + &:nth-of-type(6) { + grid-column: 5 / 6; + } + &:nth-of-type(7) { + grid-column: 6 / 7; + align-self: center; + } + &:nth-of-type(8) { + grid-column: 7 / 8; + } + &:nth-of-type(9){ + grid-column: 8 / 9; + align-self: center; + } + } + } + } -.outer { - margin: 1em; } h1 { @@ -113,130 +321,63 @@ h1 { margin-bottom: 0; } -.container{ - display: flex; - flex-direction: column; +.content-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + row-gap: 5em; - .header-and-notification{ - display: flex; - flex-direction: row; - margin: auto; + .scroll-info { + display: flex; + align-items: center; + column-gap: 10px; + grid-column: 2 / -2; } - .vipps-icon{ - margin: 1em; + .chart-container { + display: flex; + width: 100%; + flex-direction: column; + grid-column: 2 / -2; + } + .total-bought { + grid-column: 2 / -2; + } + + .highscore { + grid-column: 2 / -2; + } + + .wines-container { + grid-column: 2 / -2; + } + + .icon--arrow-long-right { + rotate: 90deg; + color: $link-color; } @include tablet { - margin: .5em; - .chart-container { - display: flex; - width: 100%; - } - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: auto-flow min-content; - grid-template-areas: "top-top top-top top-top" - "top-bot top-bot top-bot" - "middle-top middle-top middle-top" - "middle-bot-left middle-bot-left middle-bot-right" - "bot-left bot-right bot-right"; - - .header-and-notification { - grid-area: top-top; - } - - .to-lottery-container{ - grid-area: top-bot; + .scroll-info{ + grid-column: 3 / -3; } .chart-container { - grid-area: middle-top; + grid-column: 3 / -3; + flex-direction: row; } .total-bought { - grid-area: middle-bot-left; + grid-column: 3 / -3; } .highscore { - border-top: 1px solid rgb(237, 237, 237); - grid-area: bot-left; - align-self: baseline; + grid-column: 3 / -3; } .wines-container { - border-top: 1px solid rgb(237, 237, 237); - padding-left: 1em; - border-left: 1px solid rgb(237, 237, 237); - grid-area: bot-right; - } - - .vipps-icon { - padding-left: 1em; - align-self: center; - grid-area: middle-bot-right; - border-left: 1px solid rgb(237, 237, 237); - } - } - - @include desktop { - - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: auto-flow min-content; - grid-template-areas: "top-top top-top top-top top-top" - "top-bot top-bot top-bot top-bot" - "middle-top middle-top middle-top middle-top" - "middle-bot middle-bot middle-bot aside" - "bot-left bot-right bot-right aside"; - grid-gap: 1em; - align-items: center; - - .header-and-notification { - grid-area: top-top; - } - - .to-lottery-container { - grid-area: top-bot; - } - - .chart-container { - grid-area: middle-top; - } - - .total-bought { - grid-area: middle-bot; - border-bottom: 1px solid rgb(237, 237, 237); - } - - .highscore { - border: none; - grid-area: bot-left; - } - - .wines-container { - border: none; - grid-area: bot-right; - } - - .vipps-icon { - grid-area: aside; - padding-left: 3em; - border-left: 1px solid rgb(237, 237, 237); - } - } - - @include widescreen { - width: 70%; - max-width: 1800px; - margin: auto; - - .vipps-icon { - padding-left: 6em; + grid-column: 3 / -3; } } } - - </style> diff --git a/src/styles/global.scss b/src/styles/global.scss index eabf453..4f2d978 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -296,6 +296,28 @@ textarea { } } +@mixin raffle { + padding-bottom: 50px; + &::before, &::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 25px; + height: 50px; + background: radial-gradient(closest-side, #fff, #fff 50%, transparent 50%); + background-size: 50px 50px; + background-position: 0 25px; + background-repeat: repeat-x; + } + &::after{ + background: radial-gradient(closest-side, transparent, transparent 50%, #fff 50%); + background-size: 50px 50px; + background-position: 25px -25px; + bottom: -25px + } +} + .desktop-only { @include mobile { display: none; diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue index 9a53fa8..a79f78a 100644 --- a/src/ui/Banner.vue +++ b/src/ui/Banner.vue @@ -1,5 +1,5 @@ <template> - <div class="top-banner"> + <header class="top-banner"> <!-- Mobile --> <router-link to="/" class="company-logo"> <img src="/public/assets/images/knowit.svg" alt="knowit logo" /> @@ -26,7 +26,7 @@ </h2> <h2 v-if="twoMinutesLeft || tenMinutesOver">Lotteriet er i gang!</h2> </div> - </div> + </header> </template> <script> diff --git a/src/ui/Footer.vue b/src/ui/Footer.vue new file mode 100644 index 0000000..5790e65 --- /dev/null +++ b/src/ui/Footer.vue @@ -0,0 +1,32 @@ +<template> + <footer> + <router-link to="/" class="company-logo"> + <img src="/public/assets/images/knowit.svg" alt="knowit logo"> + </router-link> + </footer> +</template> + +<script> +export default { + name: 'WineFooter' +} +</script> + +<style lang="scss" scoped> + +footer { + width: 100%; + height: 100px; + display: flex; + justify-content: flex-end; + align-items: center; + background: #f4f4f4; + .company-logo{ + padding: 0 5em 0 0; + img{ + width: 100px; + } + } +} + +</style> \ No newline at end of file diff --git a/src/ui/Highscore.vue b/src/ui/Highscore.vue index eb71897..dad0e7f 100644 --- a/src/ui/Highscore.vue +++ b/src/ui/Highscore.vue @@ -1,13 +1,19 @@ <template> <div class="highscores" v-if="highscore.length > 0"> - <h3> - <router-link to="highscore"> - Topp 10 vinnere <span class="vin-link">Se alle &gt;</span> + + <section class="heading"> + <h3> + Topp 5 vinnere + </h3> + <router-link to="highscore" class=""> + <span class="vin-link">Se alle vinnere</span> </router-link> - </h3> - <ol> - <li v-for="person in highscore" :key="person"> - <b>{{ person.rank }}.</b> {{ person.name }} - {{ person.wins.length }} + </section> + <ol class="winner-list-container"> + <li v-for="(person, index) in highscore" :key="person._id" class="single-winner"> + <span class="placement">{{index + 1}}.</span> + <i class="icon icon--medal"></i> + <p class="winner-name">{{ person.name }}</p> </li> </ol> </div> @@ -24,7 +30,7 @@ export default { async mounted() { let response = await highscoreStatistics(); response.sort((a, b) => a.wins.length < b.wins.length ? 1 : -1) - this.highscore = this.generateScoreBoard(response.slice(0, 10)); + this.highscore = this.generateScoreBoard(response.slice(0, 5)); }, methods: { generateScoreBoard(highscore=this.highscore) { @@ -48,43 +54,66 @@ export default { </script> <style lang="scss" scoped> -@import "../styles/media-queries.scss"; -div { - margin: 0; - font-family: Arial; - display: inline-flex; - flex-direction: column; +@import "../styles/variables.scss"; +.heading { + display: flex; + justify-content: space-between; + align-items: center; } -h3 { - text-align: left; +a { + text-decoration: none; + color: #333333; - & a { + &:focus, + &:active, + &:visited { text-decoration: none; color: #333333; - - &:focus, - &:active, - &:visited { - text-decoration: none; - color: #333333; - } } } ol { - padding-left: 1.375rem !important; + list-style-type: none; margin-left: 0; - margin: 0 0 1.5em; padding: 0; - counter-reset: item; - & > li { - padding: 2.5px 0; - margin: 0 0 0 -1.25rem; - list-style-type: none; +} - @include mobile { - padding: 5px 0; +.winner-list-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr)); + gap: 5%; + + .single-winner { + box-sizing: border-box; + width: 100%; + background: $primary; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + padding: 1em; + + i { + font-size: 3em; + width: max-content; + justify-self: end; + } + + .placement { + grid-row: 1; + grid-column: 1 / 3; + font-size: 3em; + } + + .winner-name { + grid-row: 2; + grid-column: 1 / -1; + } + + + .winner-icon { + grid-row: 1; + grid-column: 3; } } } diff --git a/src/ui/RaffleGenerator.vue b/src/ui/RaffleGenerator.vue index 83ccadb..455f755 100644 --- a/src/ui/RaffleGenerator.vue +++ b/src/ui/RaffleGenerator.vue @@ -35,11 +35,10 @@ type="number" placeholder="Antall lodd" @keyup.enter="generateColors" - v-model="numberOfBallots" + v-model="numberOfRaffles" /> <button class="vin-button" @click="generateColors">Generer</button> </div> - <div class="colors"> <div v-for="color in colors" @@ -69,7 +68,7 @@ export default { }, data() { return { - numberOfBallots: 4, + numberOfRaffles: 4, colors: [], blue: 0, red: 0, @@ -85,14 +84,14 @@ export default { }; }, beforeMount() { - this.$emit("numberOfBallots", this.numberOfBallots); + this.$emit("numberOfRaffles", this.numberOfRaffles); if (this.generateOnInit) { this.generateColors(); } }, watch: { - numberOfBallots: function() { - this.$emit("numberOfBallots", this.numberOfBallots); + numberOfRaffles: function() { + this.$emit("numberOfRaffles", this.numberOfRaffles); this.generateColors(); } }, @@ -102,7 +101,7 @@ export default { if (time == 5) { this.generating = false; this.generated = true; - if (this.numberOfBallots > 1 && + if (this.numberOfRaffles > 1 && [this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true).length == 1) { return } @@ -117,7 +116,7 @@ export default { return; } this.$ga.event({ - eventCategory: "Ballots", + eventCategory: "Raffles", eventAction: "Generate", eventValue: JSON.stringify(this.colors) }); @@ -148,8 +147,8 @@ export default { alert("Du må velge MINST 1 farge"); return; } - if (this.numberOfBallots > 0) { - for (let i = 0; i < this.numberOfBallots; i++) { + if (this.numberOfRaffles > 0) { + for (let i = 0; i < this.numberOfRaffles; i++) { let color = randomArray[Math.floor(Math.random() * randomArray.length)]; this.colors.push(color); diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue index 4d1f936..7b69dd5 100644 --- a/src/ui/TotalBought.vue +++ b/src/ui/TotalBought.vue @@ -1,6 +1,15 @@ <template> - <div class="outer-bought"> + <section class="outer-bought"> <h3>Loddstatistikk</h3> + + <div class="total-raffles"> + Totalt&nbsp; + <span class="total">{{ total }}</span> + &nbsp;kjøpte og&nbsp; + <span>{{ totalWin }}&nbsp;vinn</span> + </div> + + <div class="bought-container"> <div v-for="color in colors" @@ -8,34 +17,19 @@ color.name + '-container ' + color.name + - '-raffle inner-bought-container raffle-element' + '-raffle raffle-element-local' " :key="color.name" - > - <div class="number-container"> - <span class="color-total bought-number-span"> - {{ color.total }} - </span> - <span>kjøpte</span> - </div> - <div class="inner-text-container"> - <div>{{ color.win }} vinn</div> - <div>{{ color.totalPercentage }}% vinn</div> - </div> - </div> - - <div class="inner-bought-container total-raffles"> - <div class="total-container"> - Totalt&nbsp; - <div> - <span class="total">{{ total }}</span> kjøpte - </div> - <div>{{ totalWin }} vinn</div> - <div>{{ stolen }} stjålet</div> - </div> + > + <p class="winner-chance"> + {{translate(color.name)}} vinnersjanse + </p> + <span class="win-percentage">{{ color.totalPercentage }}% </span> + <p class="total-bought-color">{{ color.total }} kjøpte</p> + <p class="amount-of-wins"> {{ color.win }} vinn </p> </div> </div> - </div> + </section> </template> <script> import { colorStatistics } from "@/api"; @@ -60,11 +54,13 @@ export default { }, async mounted() { let response = await colorStatistics(); + this.red = response.red; this.blue = response.blue; this.green = response.green; this.yellow = response.yellow; this.total = response.total; + this.totalWin = this.red.win + this.yellow.win + this.blue.win + this.green.win; this.stolen = response.stolen; @@ -114,119 +110,106 @@ export default { this.colors = this.colors.sort((a, b) => (a.win > b.win ? -1 : 1)); }, methods: { + translate(color){ + switch(color) { + case "blue": + return "Blå" + break; + case "red": + return "Rød" + break; + case "green": + return "Grønn" + break; + case "yellow": + return "Gul" + break; + break; + } + }, getPercentage: function(win, total) { return this.round(win == 0 ? 0 : (win / total) * 100); }, round: function(number) { - return Math.round(number * 100) / 100; + + //this can make the odds added together more than 100%, maybe rework? + let actualPercentage = Math.round(number * 100) / 100; + let rounded = actualPercentage.toFixed(0); + return rounded; } } }; </script> <style lang="scss" scoped> -@import "../styles/global.scss"; @import "../styles/variables.scss"; @import "../styles/media-queries.scss"; +@import "../styles/global.scss"; -.inner-bought-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.raffle-element { - width: 140px; - height: 150px; - margin: 20px 0; -} - -.number-container { - display: flex; - align-items: flex-end; - - & span:last-child { - padding-bottom: 5px; - padding-left: 5px; - } -} - -.inner-text-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - // TODO fix styling for displaying in columns - @include mobile { - & div { - padding: 0 5px; - } +@include mobile{ + section { + margin-top: 5em; } } .total-raffles { - width: 150px; - height: 150px; - margin: 20px 0; -} - -.total-container { - align-items: flex-start; -} - -@include mobile { - .total-container { - > div:nth-of-type(2) { - margin-top: auto; - padding-bottom: 4px; - padding-left: 5px; - } - } -} - -.bought-number-span { - display: inline-flex; -} - -.outer-bought { - @include mobile { - padding: 0 20px; - } + display: flex; } .bought-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - padding-bottom: 3rem; - max-width: 1400px; - margin: auto; - justify-content: space-between; - font-family: Arial; + margin-top: 2em; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 50px; - @include mobile { - padding-bottom: 0px; - } -} + .raffle-element-local { + height: 250px; + width: 100%; + display: flex; + flex-direction: column; + position: relative; + @include raffle; + + .win-percentage { + margin-left: 30px; + font-size: 50px; + } -.color-total, -.total { - font-size: 2rem; - font-weight: bold; -} + p { + margin-left: 30px; + &.winner-chance { + margin-top: 40px; + } -.small { - font-weight: bold; - font-size: 1.25rem; - display: inline-block; -} + &.total-bought-color{ + font-weight: bold; + margin-top: 25px; + } -@include mobile { - .bought-container { - flex-wrap: wrap; + &.amount-of-wins { + font-weight: bold; + } + } + + h3 { + margin-left: 15px; + } + + &.green-raffle { + background-color: $light-green; + } + + &.blue-raffle { + background-color: $light-blue; + } + + &.yellow-raffle { + background-color: $light-yellow; + } + + &.red-raffle { + background-color: $light-red; + } } } </style> diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue index db24cec..78118c0 100644 --- a/src/ui/Wine.vue +++ b/src/ui/Wine.vue @@ -10,8 +10,8 @@ </div> <div class="wine-details"> - <h2 v-if="wine.name">{{ wine.name }}</h2> - <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }} rating</span> + <span v-if="wine.name" class="wine-name">{{ wine.name }}</span> + <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }}</span> <span v-if="wine.price"><b>Pris:</b> {{ wine.price }} NOK</span> <span v-if="wine.country"><b>Land:</b> {{ wine.country }}</span> </div> @@ -66,8 +66,8 @@ export default { @import "./src/styles/variables"; .wine { - padding: 2rem; - margin: 1rem 0rem; + padding: 1rem; + box-sizing: border-box; position: relative; -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15); @@ -76,13 +76,13 @@ export default { @include tablet { width: 250px; height: 100%; - margin: 1rem 2rem; } } .wine-image { display: flex; justify-content: center; + margin-top: 10px; img { height: 250px; @@ -97,6 +97,7 @@ export default { } } + .wine-details { display: flex; flex-direction: column; @@ -106,6 +107,11 @@ export default { } } +.wine-name{ + font-size: 20px; + margin: 1em 0; +} + .wine-details { display: flex; flex-direction: column; diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue index c211a3c..dab7cbf 100644 --- a/src/ui/Wines.vue +++ b/src/ui/Wines.vue @@ -1,21 +1,25 @@ <template> - <div v-if="wines.length > 0"> - <h3> - <router-link to="viner" - >Topp 10 viner <span class="vin-link">Se alle &gt;</span></router-link - > - </h3> - <ol class="list-container"> - <li v-for="(wine, index) in wines" :key="wine" class="single-item"> - <span class="wine-occurences">{{ index + 1}}.</span> - <span class="wine-name">{{ wine.name }}</span> - <span class="wine-win-info"> {{ wine.occurences }} {{amount(wine.occurences)}}</span> - <a - class="wine-link" - :href="wine.vivinoLink" - >Les mer</a> - </li> - </ol> + <div v-if="wines.length > 0" class="wines-main-container"> + <div class="info-and-link"> + <h3> + Topp 5 viner + </h3> + <router-link to="viner"> + <span class="vin-link">Se alle viner </span> + </router-link> + </div> + <div class="wine-container"> + <Wine v-for="wine in wines" :key="wine" :wine="wine"> + <template v-slot:top> + <div class="flex justify-end"> + <div class="requested-count cursor-pointer"> + <span> {{ wine.occurences }} </span> + <i class="icon icon--heart" /> + </div> + </div> + </template> + </Wine> + </div> </div> </template> @@ -29,7 +33,10 @@ export default { Wine }, data() { - return { wines: [], clickedWine: null, wineOpen: false }; + return { + wines: [], + clickedWine: null, + }; }, async mounted() { let response = await overallWineStatistics(); @@ -49,12 +56,9 @@ export default { } ) ); - this.wines = response.slice(0, 10); + this.wines = response.slice(0, 5); }, methods: { - amount(occurences){ - return occurences > 1 ? "ganger" : "gang"; - }, predicate: function() { var fields = [], n_fields = arguments.length, @@ -124,40 +128,40 @@ export default { @import "./src/styles/global.scss"; @import "../styles/media-queries.scss"; -h3 { - & a { - text-decoration: none; - color: #333333; - } +.wines-main-container { + margin-bottom: 10em; } -.list-container{ +.info-and-link{ + display: flex; + justify-content: space-between; +} + +.wine-container { display: grid; - grid: auto-flow min-content / 1fr; - row-gap: 5px; - padding: 0; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 2rem; - .single-item{ - display: grid; - grid: 1fr / .1fr 1fr .3fr .3fr; + .requested-count { + display: flex; + align-items: center; + margin-top: -0.5rem; + background-color: rgb(244,244,244); + border-radius: 1.1rem; + padding: 0.25rem 1rem; + font-size: 1.25em; - .wine-occurences{ - font-weight: bold; + span { + padding-right: 0.5rem; + line-height: 1.25em; } - - .wine-name{ - display: inline-block; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - .wine-link { - color: #333333; - text-decoration: underline 1px solid $link-color; - font-weight: bold; - cursor: pointer; + .icon--heart{ + font-size: 1.5rem; + color: $link-color; } } } + + + </style>