dev #13995

первоначальная верстка

angular/README.md

@@ -1,4 +1,4 @@
-# FashionLogica
+# CoffeeLike
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.6.
 

angular/angular.json

@@ -4,7 +4,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "fashion-logica": {
+    "coffee-like": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -19,7 +19,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "/var/www/html/lk.crm4retail.ru/fashion-logica",
+            "outputPath": "/var/www/html/lk.crm4retail.ru/coffee-like",
             "baseHref": "/",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -35,6 +35,7 @@
               "src/sw-custom.js"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/primeng/resources/primeng.min.css",
@@ -83,10 +84,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "fashion-logica:build:production"
+              "browserTarget": "coffee-like:build:production"
             },
             "development": {
-              "browserTarget": "fashion-logica:build:development"
+              "browserTarget": "coffee-like:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -94,7 +95,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "fashion-logica:build"
+            "browserTarget": "coffee-like:build"
           }
         },
         "test": {
@@ -112,6 +113,7 @@
               "src/manifest.webmanifest"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": []

angular/package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "fashion-logica",
+  "name": "coffee-like",
-  "version": "0.0.4",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "fashion-logica",
+      "name": "coffee-like",
-      "version": "0.0.4",
+      "version": "0.0.1",
       "dependencies": {
         "@angular/animations": "^14.0.0",
         "@angular/cdk": "^14.2.1",
@@ -15,6 +15,7 @@
         "@angular/core": "^14.0.0",
         "@angular/fire": "^7.4.1",
         "@angular/forms": "^14.0.0",
+        "@angular/material": "^14.2.1",
         "@angular/platform-browser": "^14.0.0",
         "@angular/platform-browser-dynamic": "^14.0.0",
         "@angular/router": "^14.0.0",
@@ -25,11 +26,11 @@
         "@fortawesome/free-solid-svg-icons": "^6.2.0",
         "@types/uuid": "^8.3.4",
         "angular-moment-timezone": "^1.7.1",
-        "angularx-qrcode": "^14.0.0",
         "barcode-2-svg": "^0.3.3",
         "firebase": "^9.9.3",
         "google-libphonenumber": "^3.2.30",
         "jsbarcode": "^3.11.5",
+        "ng-qrcode": "^7.0.0",
         "ngx-sharebuttons": "^11.0.0",
         "primeicons": "^5.0.0",
         "primeng": "^14.0.1",
@@ -665,6 +666,23 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.1.tgz",
+      "integrity": "sha512-e7DkKJTuqrSpKPhxahrqkZt6AeU5ld5/aSeCamq2dcdqfZ8otmgiajzN0cXZGwSCT2Lth6c+QV3yn8ufTJQpTw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^14.0.0 || ^15.0.0",
+        "@angular/cdk": "14.2.1",
+        "@angular/common": "^14.0.0 || ^15.0.0",
+        "@angular/core": "^14.0.0 || ^15.0.0",
+        "@angular/forms": "^14.0.0 || ^15.0.0",
+        "@angular/platform-browser": "^14.0.0 || ^15.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "14.1.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.1.3.tgz",
@@ -2444,20 +2462,6 @@
         "node": ">=0.1.90"
       }
     },
-    "node_modules/@cordobo/qrcode": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@cordobo/qrcode/-/qrcode-1.5.0.tgz",
-      "integrity": "sha512-aZ5n3MYw10t4v68EGvRGE1DL7iWfAiTUy4MSZRoqjHTRYdjX40sYgJf48NZa6zZeXVuJOEB/1Ni9KzS+C/EC0w==",
-      "dependencies": {
-        "dijkstrajs": "^1.0.1",
-        "encode-utf8": "^1.0.3",
-        "pngjs": "^5.0.0",
-        "yargs": "^17.3.1"
-      },
-      "bin": {
-        "qrcode": "bin/qrcode"
-      }
-    },
     "node_modules/@csstools/postcss-cascade-layers": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.5.tgz",
@@ -4480,18 +4484,6 @@
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.29.tgz",
       "integrity": "sha512-mla2acNCMkWXBD+c+yeUrBUrzOxYMNFdQ6FGfigGGtEVBPJx07BQeJekjt9DmH1FtZek4E9rE1eRR9qQpxACOQ=="
     },
-    "node_modules/angularx-qrcode": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-14.0.0.tgz",
-      "integrity": "sha512-PfWPz6YpKnTeIYzBjLniKXy/Y4/id0v/dDASQi4756+WYLu94cUMYFndGTFigjeBuk8i5BG0Q8ePHgYYvHbk2w==",
-      "dependencies": {
-        "@cordobo/qrcode": "1.5.0",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "^14.0.0"
-      }
-    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -5027,7 +5019,6 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5845,6 +5836,14 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -7070,7 +7069,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -8916,7 +8914,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -9626,6 +9623,19 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
+    "node_modules/ng-qrcode": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ng-qrcode/-/ng-qrcode-7.0.0.tgz",
+      "integrity": "sha512-Mx7nf8rtGMVYxGe2qfy8/JNiCnxKD7uFsqpP2Hm5eJSQrOEapQl9FR0yuK0I4MMQorJ7s8mZZDxmszQiH8R2Kg==",
+      "dependencies": {
+        "qrcode": "^1.5.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=14 <15",
+        "@angular/core": ">=14 <15"
+      }
+    },
     "node_modules/ngx-sharebuttons": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/ngx-sharebuttons/-/ngx-sharebuttons-11.0.0.tgz",
@@ -10264,7 +10274,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -10279,7 +10288,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -10328,7 +10336,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -10459,7 +10466,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -11367,6 +11373,114 @@
         "node": ">=0.9"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.1.tgz",
+      "integrity": "sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.10.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
@@ -11601,6 +11715,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -12174,8 +12293,7 @@
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
-      "dev": true
     },
     "node_modules/setimmediate": {
       "version": "1.0.5",
@@ -13563,6 +13681,11 @@
         "which": "bin/which"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
+    },
     "node_modules/wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -13708,6 +13831,7 @@
       "version": "17.4.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.1.tgz",
       "integrity": "sha512-WSZD9jgobAg3ZKuCQZSa3g9QOJeCCqLoLAykiWgmXnDo9EPnn4RPf5qVTtzgOx66o6/oqhcA5tHtJXpG8pMt3g==",
+      "dev": true,
       "dependencies": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -13725,6 +13849,7 @@
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -14157,6 +14282,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.1.tgz",
+      "integrity": "sha512-e7DkKJTuqrSpKPhxahrqkZt6AeU5ld5/aSeCamq2dcdqfZ8otmgiajzN0cXZGwSCT2Lth6c+QV3yn8ufTJQpTw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "14.1.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.1.3.tgz",
@@ -15391,17 +15524,6 @@
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
       "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ=="
     },
-    "@cordobo/qrcode": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@cordobo/qrcode/-/qrcode-1.5.0.tgz",
-      "integrity": "sha512-aZ5n3MYw10t4v68EGvRGE1DL7iWfAiTUy4MSZRoqjHTRYdjX40sYgJf48NZa6zZeXVuJOEB/1Ni9KzS+C/EC0w==",
-      "requires": {
-        "dijkstrajs": "^1.0.1",
-        "encode-utf8": "^1.0.3",
-        "pngjs": "^5.0.0",
-        "yargs": "^17.3.1"
-      }
-    },
     "@csstools/postcss-cascade-layers": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.5.tgz",
@@ -16999,15 +17121,6 @@
         }
       }
     },
-    "angularx-qrcode": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-14.0.0.tgz",
-      "integrity": "sha512-PfWPz6YpKnTeIYzBjLniKXy/Y4/id0v/dDASQi4756+WYLu94cUMYFndGTFigjeBuk8i5BG0Q8ePHgYYvHbk2w==",
-      "requires": {
-        "@cordobo/qrcode": "1.5.0",
-        "tslib": "^2.3.0"
-      }
-    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -17399,8 +17512,7 @@
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-      "dev": true
     },
     "caniuse-lite": {
       "version": "1.0.30001378",
@@ -18002,6 +18114,11 @@
         "ms": "2.1.2"
       }
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -18846,7 +18963,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "requires": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -20196,7 +20312,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "requires": {
         "p-locate": "^4.1.0"
       }
@@ -20738,6 +20853,15 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
+    "ng-qrcode": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ng-qrcode/-/ng-qrcode-7.0.0.tgz",
+      "integrity": "sha512-Mx7nf8rtGMVYxGe2qfy8/JNiCnxKD7uFsqpP2Hm5eJSQrOEapQl9FR0yuK0I4MMQorJ7s8mZZDxmszQiH8R2Kg==",
+      "requires": {
+        "qrcode": "^1.5.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "ngx-sharebuttons": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/ngx-sharebuttons/-/ngx-sharebuttons-11.0.0.tgz",
@@ -21210,7 +21334,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -21219,7 +21342,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "requires": {
         "p-limit": "^2.2.0"
       }
@@ -21254,8 +21376,7 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-      "dev": true
     },
     "pacote": {
       "version": "13.3.0",
@@ -21361,8 +21482,7 @@
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-      "dev": true
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -21916,6 +22036,92 @@
       "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
       "dev": true
     },
+    "qrcode": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.1.tgz",
+      "integrity": "sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.10.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
@@ -22096,6 +22302,11 @@
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
     },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -22531,8 +22742,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
-      "dev": true
     },
     "setimmediate": {
       "version": "1.0.5",
@@ -23541,6 +23751,11 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
+    },
     "wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -23647,6 +23862,7 @@
       "version": "17.4.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.1.tgz",
       "integrity": "sha512-WSZD9jgobAg3ZKuCQZSa3g9QOJeCCqLoLAykiWgmXnDo9EPnn4RPf5qVTtzgOx66o6/oqhcA5tHtJXpG8pMt3g==",
+      "dev": true,
       "requires": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -23660,7 +23876,8 @@
     "yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true
     },
     "zone.js": {
       "version": "0.11.8",

angular/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "fashion-logica",
+  "name": "coffee-like",
-  "version": "0.0.4",
+  "version": "0.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --host 192.168.0.14",
@@ -17,6 +17,7 @@
     "@angular/core": "^14.0.0",
     "@angular/fire": "^7.4.1",
     "@angular/forms": "^14.0.0",
+    "@angular/material": "^14.2.1",
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
@@ -27,11 +28,11 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@types/uuid": "^8.3.4",
     "angular-moment-timezone": "^1.7.1",
-    "angularx-qrcode": "^14.0.0",
     "barcode-2-svg": "^0.3.3",
     "firebase": "^9.9.3",
     "google-libphonenumber": "^3.2.30",
     "jsbarcode": "^3.11.5",
+    "ng-qrcode": "^7.0.0",
     "ngx-sharebuttons": "^11.0.0",
     "primeicons": "^5.0.0",
     "primeng": "^14.0.1",

angular/src/app/app-routing.module.ts

@@ -1,7 +1,22 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { MainComponent } from './pages/main/main.component';
+import { GuestCardComponent } from './pages/guest-card/guest-card.component';
+import { LoginComponent } from './pages/login/login.component';
+import { AuthGuard } from './guards/auth-guard.guard';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+      path: '',
+      component: GuestCardComponent,
+      canActivate: [AuthGuard]
+  },
+  {
+    path: 'login',
+    component: LoginComponent
+  }
+  // { path: '**', component: NotFoundComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

angular/src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<app-footer></app-footer>

angular/src/app/app.component.spec.ts

@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'fashion-logica'`, () => {
+  it(`should have as title 'coffee-like'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('fashion-logica');
+    expect(app.title).toEqual('coffee-like');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('fashion-logica app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain('coffee-like app is running!');
   });
 });

angular/src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Fashionlogica';
+  title = 'Coffee Like';
 }

angular/src/app/app.module.ts

@@ -28,12 +28,20 @@ import { MessageService } from 'primeng/api';
 import { FooterButtonsComponent } from './components/footer-buttons/footer-buttons.component';
 import { UserDataComponent } from './pages/account/user-data/user-data.component';
 import { RefSystemComponent } from './pages/account/ref-system/ref-system.component';
-import { QRCodeModule } from 'angularx-qrcode';
 import { ShareButtonsModule   } from 'ngx-sharebuttons/buttons';
 import { ShareIconsModule } from 'ngx-sharebuttons/icons';
 import { MessagingService } from './services/messaging.service';
 import { NotFoundComponent } from './pages/not-found/not-found.component';
 import { DownloadAppDirective } from './directives/download-app.directive';
+import {MatIconModule} from '@angular/material/icon';
+import { GuestCardComponent } from './pages/guest-card/guest-card.component';
+import { QrCodeModule } from 'ng-qrcode';
+import { AccordionComponent } from './components/accordion/accordion.component';
+import { LastOrderComponent } from './components/last-order/last-order.component';
+import { InviteFriendsComponent } from './components/invite-friends/invite-friends.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { SocialMediaButtonsComponent } from './components/social-media-buttons/social-media-buttons.component';
+import { LoginComponent } from './pages/login/login.component';
 
 @NgModule({
   declarations: [
@@ -51,18 +59,18 @@ import { DownloadAppDirective } from './directives/download-app.directive';
     UserDataComponent,
     RefSystemComponent,
     NotFoundComponent,
-    DownloadAppDirective
+    DownloadAppDirective,
+    GuestCardComponent,
+    AccordionComponent,
+    LastOrderComponent,
+    InviteFriendsComponent,
+    FooterComponent,
+    SocialMediaButtonsComponent,
+    LoginComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    RouterModule.forRoot([
-      {
-          path: '**',
-          component: MainComponent
-      },
-      // { path: '**', component: NotFoundComponent }
-    ]),
     InputMaskModule,
     ProgressSpinnerModule,
     FormsModule,
@@ -79,11 +87,12 @@ import { DownloadAppDirective } from './directives/download-app.directive';
     AngularFireMessagingModule,
     ToastModule,
     ReactiveFormsModule,
-    QRCodeModule,
     ShareButtonsModule.withConfig({
       debug: true
     }),
-    ShareIconsModule
+    ShareIconsModule,
+    MatIconModule,
+    QrCodeModule
   ],
   providers: [DialogService, MessageService, MessagingService ],
   bootstrap: [AppComponent]

angular/src/app/components/accordion/accordion.component.html

@@ -0,0 +1,7 @@
+<div class="tab">
+  <input [id]="'tab-' + guid" type="checkbox" name="tabs" />
+  <label [for]="'tab-' + guid">{{ header }}</label>
+  <div class="tab-content">
+    <ng-content></ng-content>
+  </div>
+</div>

angular/src/app/components/accordion/accordion.component.scss

@@ -0,0 +1,85 @@
+:host {
+  width: 100%;
+}
+
+.tab {
+  position: relative;
+  margin-bottom: 1px;
+  width: 100%;
+  color: #fff;
+  overflow: hidden;
+  border-bottom: solid 1px #bdbdbd;
+}
+.tab input {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+}
+.tab label {
+  display: block;
+  padding: 20px 26px;
+  position: relative;
+  background: #ffffff00;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  letter-spacing: -0.5px;
+  cursor: pointer;
+}
+// .tab label:before {
+//     display: block;
+//     content: " ";
+//     padding-top: 5px;
+//   }
+.tab-content {
+  max-height: 0;
+  overflow: hidden;
+  background: #292929;
+  -webkit-transition: all 0.35s;
+  -o-transition: all 0.35s;
+  transition: all 0.35s;
+  border-top: solid 1px #bdbdbd;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  
+  p {
+    margin: 0;
+  }
+}
+.tab-content p {
+  margin: 1em;
+}
+/* :checked */
+.tab input:checked ~ .tab-content {
+  padding: 16px 26px;
+  max-height: 100vh;
+}
+
+/* Icon */
+.tab label::after {
+  position: absolute;
+  right: 0;
+  top: 0;
+  line-height: 3;
+  text-align: center;
+  -webkit-transition: all 0.35s;
+  -o-transition: all 0.35s;
+  transition: all 0.35s;
+  height: 100%;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+}
+.tab input[type="checkbox"] + label::after {
+  content: "+";
+}
+.tab input[type="radio"] + label::after {
+  content: "\25BC";
+}
+.tab input[type="checkbox"]:checked + label::after {
+  transform: rotate(315deg);
+}
+.tab input[type="radio"]:checked + label::after {
+  transform: rotateX(180deg);
+}

angular/src/app/components/accordion/accordion.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+  let component: AccordionComponent;
+  let fixture: ComponentFixture<AccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AccordionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/accordion/accordion.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface IAccordionData {
+  header: string;
+  body: string;
+}
+
+@Component({
+  selector: 'app-accordion[header]',
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss']
+})
+export class AccordionComponent implements OnInit {
+  @Input() header!: string
+  public guid: string = uuidv4()
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/components/exit/exit.component.scss

@@ -2,7 +2,7 @@ button {
     margin-right: 1rem;
     padding: 4px 21px;
     margin-top: 8px;
-    background-color: #09467f;
+    background-color: var(--main-color);
     color: #fff;
     border-radius: 3px;
     border: none;

angular/src/app/components/footer-buttons/footer-buttons.component.scss

@@ -15,7 +15,7 @@
       align-items: center;
       width: 60px;
       height: 60px;
-      background: #09467f;
+      background: var(--main-color);
       border: solid #fff 1px !important;
       color: #fff;
       border-radius: 100%;

angular/src/app/components/footer/footer.component.html

@@ -0,0 +1,4 @@
+<img src="/assets/logo.svg" alt="Логотип">
+<h3>Горячая линия</h3>
+<a class="phone-number" href="tel:88003334130">8 (800) 333-41-30</a>
+<app-social-media-buttons></app-social-media-buttons>

angular/src/app/components/footer/footer.component.scss

@@ -0,0 +1,27 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding-bottom: 100px;
+  h3 {
+    margin: 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 20px;
+    text-align: center;
+    letter-spacing: -0.24px;
+    color: #6a737c;
+  }
+  .phone-number {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: -0.408px;
+    color: #d9d9d9;
+    text-decoration: none;
+  }
+}

angular/src/app/components/footer/footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/components/invite-friends/invite-friends.component.html

@@ -0,0 +1,15 @@
+<h2>Пригласи друзей!</h2>
+<div class="container">
+  <p>
+    Пригласи друзей зарегистрироваться в приложении по твоему уникальному коду и
+    получи бонусы, когда они совершат первую покупку.
+  </p>
+  <button class="share">
+    <mat-icon
+      aria-hidden="false"
+      aria-label="Share"
+      fontIcon="share"
+      style="color: #fff;"
+    ></mat-icon>
+  </button>
+</div>

angular/src/app/components/invite-friends/invite-friends.component.scss

@@ -0,0 +1,33 @@
+:host {
+    padding: 16px;
+  h2 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 22px;
+    letter-spacing: -0.408px;
+  }
+
+  & .container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: #ffffff;
+    }
+
+    .share {
+      width: 72px;
+      height: 48px;
+      background: #28af49;
+      padding: 8px 26px;
+      border: none;
+    }
+  }
+}

angular/src/app/components/invite-friends/invite-friends.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InviteFriendsComponent } from './invite-friends.component';
+
+describe('InviteFriendsComponent', () => {
+  let component: InviteFriendsComponent;
+  let fixture: ComponentFixture<InviteFriendsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InviteFriendsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InviteFriendsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/invite-friends/invite-friends.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-invite-friends',
+  templateUrl: './invite-friends.component.html',
+  styleUrls: ['./invite-friends.component.scss']
+})
+export class InviteFriendsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/components/last-order/last-order.component.html

@@ -0,0 +1,11 @@
+<h2>Ваш предыдущий заказ</h2>
+<div class="info-order">
+  <p><span>Дата: </span>25 марта 2023 года</p>
+  <p><span>На сумму: </span>230 ₽</p>
+</div>
+<button class="evaluate-order">Оценить заказ</button>
+<p class="info">
+  Списание бонусов возможно на любые категории. Бонусами можно оплатить 100%
+  суммы покупки. Бонусы начисляются только на напитки с учётом добавок.
+  Неиспользованные бонусы сгорают в течение 90 дней.
+</p>

angular/src/app/components/last-order/last-order.component.scss

@@ -0,0 +1,45 @@
+:host {
+  padding: 24px 16px 56px;
+
+  & > h2 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 15px;
+    line-height: 20px;
+    letter-spacing: -0.24px;
+  }
+
+  & > .info-order {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    span {
+      color: #828282;
+    }
+  }
+
+  .evaluate-order {
+    margin: 24px 0;
+    width: 100%;
+    padding: 12px;
+    text-align: center;
+    border: 2px solid #28af49;
+    border-radius: 6px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 22px;
+    letter-spacing: -0.408px;
+    background-color: transparent;
+    color: #28af49;
+  }
+
+  .info {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: rgba(255, 255, 255, 0.5);
+  }
+}

angular/src/app/components/last-order/last-order.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LastOrderComponent } from './last-order.component';
+
+describe('LastOrderComponent', () => {
+  let component: LastOrderComponent;
+  let fixture: ComponentFixture<LastOrderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LastOrderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LastOrderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/last-order/last-order.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-last-order',
+  templateUrl: './last-order.component.html',
+  styleUrls: ['./last-order.component.scss']
+})
+export class LastOrderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/components/navbar/navbar.component.html

@@ -1,3 +1,5 @@
 <div class="container">
-    <img src="./assets/logo.svg" alt="Логотип">
+    <mat-icon aria-hidden="false" aria-label="Назад" fontIcon="arrow_back_ios" class="back-arrow"></mat-icon>
+    <h1 class="title">{{title}}</h1>
+    <div class="plug"></div>
 </div>

angular/src/app/components/navbar/navbar.component.scss

@@ -1,14 +1,29 @@
 .container {
-    box-sizing: border-box;
+  box-sizing: border-box;
-    padding: 7px 0 0 5px;
+  padding: 12px 16px;
-    width: 100%;
+  width: 100%;
-    height: 39px;
+  background: #231f20;
-    background: #09467F;
+  box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
-    color: #fff;
+  color: #fff;
-}
+  display: flex;
-
+  align-items: center;
-.title {
+  justify-content: space-between;
-    font-weight: 400;
+  .back-arrow {
-    font-size: 18px;
+    font-size: 16px;
-    margin-left: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .plug {
+    height: 24px;
+    width: 24px;
+    visibility: hidden;
+  }
+  .title {
+    font-family: "Gotham Pro", sans-serif;
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 22px;
+    margin: 0;
+  }
 }

angular/src/app/components/navbar/navbar.component.ts

@@ -1,11 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-navbar',
+  selector: 'app-navbar[title]',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss']
 })
 export class NavbarComponent implements OnInit {
+  @Input() title: string = 'Название не задано'
 
   constructor() { }
 

angular/src/app/components/social-media-buttons/social-media-buttons.component.html

@@ -0,0 +1,3 @@
+<a *ngFor="let link of links" [href]="link.url" target="_blank">
+  <img [src]="link.imgUrl" [alt]="link.label" />
+</a>

angular/src/app/components/social-media-buttons/social-media-buttons.component.scss

@@ -0,0 +1,15 @@
+:host {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    justify-content: space-between;
+    a {
+        width: 48px;
+        height: 48px;
+        border-radius: 100%;
+        background: #333333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

angular/src/app/components/social-media-buttons/social-media-buttons.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SocialMediaButtonsComponent } from './social-media-buttons.component';
+
+describe('SocialMediaButtonsComponent', () => {
+  let component: SocialMediaButtonsComponent;
+  let fixture: ComponentFixture<SocialMediaButtonsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SocialMediaButtonsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SocialMediaButtonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/social-media-buttons/social-media-buttons.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+export interface ISocialMediaLink {
+  url: string;
+  imgUrl: string;
+  label: string;
+}
+
+@Component({
+  selector: 'app-social-media-buttons',
+  templateUrl: './social-media-buttons.component.html',
+  styleUrls: ['./social-media-buttons.component.scss']
+})
+export class SocialMediaButtonsComponent implements OnInit {
+  public links: ISocialMediaLink[] = [
+    {
+      label: 'Инстаграм',
+      url: 'https://www.instagram.com/',
+      imgUrl: '/assets/social-media-icons/instagram.svg'
+    },
+    {
+      label: 'ВК',
+      url: 'https://vk.com/coffeelike_com',
+      imgUrl: '/assets/social-media-icons/vk.svg'
+    },
+    {
+      label: 'Youtube',
+      url: 'https://www.youtube.com/c/coffeelikeru',
+      imgUrl: '/assets/social-media-icons/youtube.svg'
+    }
+  ]
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/guards/auth-guard.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth-guard.guard';
+
+describe('AuthGuardGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

angular/src/app/guards/auth-guard.guard.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  CanActivateChild,
+  Router,
+  RouterStateSnapshot,
+  UrlTree,
+} from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { CookiesService } from '../services/cookies.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanActivate, CanActivateChild {
+  constructor(private cookiesService: CookiesService, private router: Router) {}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ):
+    | Observable<boolean | UrlTree>
+    | Promise<boolean | UrlTree>
+    | boolean
+    | UrlTree 
+  {
+    if (this.cookiesService.getItem('token')) {
+      return of(true);
+    } else {
+      this.router.navigate(['/login']);
+      return of(false);
+    }
+  }
+
+  canActivateChild(
+    childRoute: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ):
+    | boolean
+    | UrlTree
+    | Observable<boolean | UrlTree>
+    | Promise<boolean | UrlTree>
+  {
+    return this.canActivate(childRoute, state);
+  }
+}

angular/src/app/pages/account/account.component.html

@@ -4,7 +4,7 @@
     'auth-page': currentPage.code === PageCode.Auth
   }"
 >
-  <div
+  <!-- <div
     *ngIf="currentPage.code !== PageCode.Auth"
     class="top-left-attribute"
   ></div>
@@ -68,7 +68,7 @@
           />
           <div class="menu-item-info">
             <a href="#">Установить приложение</a>
-            <!-- <p>{{ page.description }}</p> -->
+            <p>{{ page.description }}</p>
           </div>
         </div>
       </li>
@@ -84,7 +84,7 @@
         </div>
       </li>
     </ul>
-  </nav>
+  </nav> -->
   <span
     class="version"
     [ngClass]="{

angular/src/app/pages/account/account.component.scss

@@ -36,7 +36,7 @@
           border-radius: 15px;
 
           &.is-active {
-            border: solid #09467f 1px;
+            border: solid var(--main-color) 1px;
             // display: none;
           }
 
@@ -87,10 +87,10 @@
     .top-left-attribute {
       width: 10px;
       height: 5px;
-      background: #09467f;
+      background: var(--main-color);
       left: 0;
       position: absolute;
-      top: 69px;
+      top: 103px;
     }
 
     .version {

angular/src/app/pages/account/bonus-program/bonus-program.component.scss

@@ -8,6 +8,10 @@
       font-weight: 700;
       font-size: 20px;
       line-height: 24px;
+      max-width: 400px;
+      width: 100%;
+      margin: 0 auto;
+      text-align: center;
     }
 
     & > p {
@@ -19,7 +23,7 @@
     }
 
     .card-container {
-      background: #09467f;
+      background: var(--main-color);
       box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
       border-radius: 15px;
       height: 466px;
@@ -67,7 +71,7 @@
       }
 
       &__content {
-        background-color: #09467f;
+        background-color: var(--main-color);
         color: #fff;
 
         .info {
@@ -200,8 +204,8 @@
     .add-to-wallet {
       height: 36px;
       border-radius: 8px;
-      background: #09467f;
+      background: var(--main-color);
-      border-color: #09467f;
+      border-color: var(--main-color);
       color: #fff;
       max-width: 400px;
       width: 100%;

angular/src/app/pages/account/orders/orders.component.scss

@@ -1,7 +1,7 @@
 .show-more-orders {
   text-align: center;
   cursor: pointer;
-  color: #09467f;
+  color: var(--main-color);
   margin-top: 16px;
 }
 .woocommerce-MyAccount-content {

angular/src/app/pages/account/ref-system/ref-system.component.html

@@ -1,10 +1,10 @@
 <div class="ref-system">
-  <qrcode
+  <!-- <qrcode
     *ngIf="!loading"
     [qrdata]="refUrl"
     [width]="256"
     [errorCorrectionLevel]="'M'"
-  ></qrcode>
+  ></qrcode> -->
   <p-progressSpinner
     *ngIf="loading"
     [style]="{ width: '100%' }"

angular/src/app/pages/account/ref-system/ref-system.component.scss

@@ -8,7 +8,7 @@
             margin: 0 auto;
             .share {
                 width: 50px;
-                background-color: #09467f;
+                background-color: var(--main-color);
                 border-radius: 8px;
                 display: flex;
                 justify-content: center;
@@ -19,7 +19,7 @@
                 }
             }
             .copy {
-                background-color: #09467f;
+                background-color: var(--main-color);
                 color: #fff;
                 border-radius: 8px;
                 width: calc(100% - 66px);

angular/src/app/pages/account/ref-system/ref-system.component.ts

@@ -40,7 +40,7 @@ export class RefSystemComponent implements OnInit {
     if (navigator.share) {
       navigator.share({
         title: document.title,
-        text: "Fashionlogica",
+        text: "Coffee Like",
         url: this.refUrl
       })
         .then(() => console.log('Successful share'))

angular/src/app/pages/guest-card/guest-card.component.html

@@ -0,0 +1,134 @@
+<app-navbar title="Карта гостя"></app-navbar>
+<div class="guest-card">
+  <div class="guest-card__qr" (click)="qrCodeClick()">
+    <qr-code
+      value="9917997225"
+      [margin]="0"
+      [size]="qrCodeSize"
+      errorCorrectionLevel="M"
+    ></qr-code>
+  </div>
+  <div class="guest-card__user-description">
+    За период с 11.01.2023 по 31.03.2023 вам начислено <span>360 бонусов</span>
+  </div>
+  <app-accordion header="Условия начисления бонусов">
+    <p>
+      Расчет начисления бонусов - 10% от суммы покупок за период с 11.01.2023г.
+      по 31.03.2023 г.
+    </p>
+    <p>
+      За период с 11.01.2023г. по 31.03.2023 г. сумма ваших покупок составила
+      3700 руб.
+    </p>
+    <p>Начисляемый бонус 10% от суммы покупок</p>
+  </app-accordion>
+  <app-accordion header="Условия «оплаты» покупки бонусами">
+    <p>
+      Участник может использовать Бонусы для «оплаты» до 100% стоимости любой
+      покупки.
+    </p>
+    <p>
+      Списание Бонусов происходит из расчета 1:1 (один Бонус дает скидку 1
+      российский рубль / 1 тенге / 1 белорусский рубль. Скидка, предоставляемая
+      Участнику при списании Бонусов, уменьшает цену товаров в заказе в
+      соответствии с условиями ПЛ.
+    </p>
+    <p>
+      Для списания Бонусов Участник должен попросить об этом в кофе-баре сети
+      «COFFEE LIKE» кассира до момента пробития фискального чека, после чего им
+      будет проверена возможность списания Бонусов.
+    </p>
+    <p>
+      Для всех Участников возможно списание без использования мобильного
+      приложения.
+    </p>
+    <p>Полученные Бонусы не подлежат обмену на денежные средства.</p>
+  </app-accordion>
+  <app-accordion header="Особые условия">
+    <p>
+      Начисленные на счет бонусы сгорают по прошествии 90 дней с момента
+      совершения последней покупки с начислением или списанием бонусов.
+    </p>
+
+    <ul>
+      Возврат покупки, за которую бонусы были начислены:
+      <li>
+        В случае, если бонусов на счету достаточно для списания, бонусы
+        списываются в полном ранее начисленном за возвращаемый товар объеме.
+      </li>
+      <li>
+        В случае, если бонусов на счету недостаточно, формируется минусовой
+        баланс.
+      </li>
+    </ul>
+
+    <ul>
+      Возврат покупки, которая была оплачена бонусами:
+      <li>
+        В случае предъявления Участником кассового или товарного чека, сумма
+        бонусов, списанная для оплаты возвращаемого товара, зачисляется на счет
+        участника.
+      </li>
+      <li>
+        В случае возврата товара с применением оплаты бонусами, клиенту
+        возвращается денежная сумма в размере, внесенном Участником в оплату
+        товара при покупке, за вычетом суммы, оплаченной бонусами.
+      </li>
+    </ul>
+  </app-accordion>
+
+  <div class="guest-card__purchases-description">
+    Сумма ваших покупок за период с 01.04.2023г. - <span>1200 руб.</span>
+  </div>
+  <app-accordion header="Узнать % начисляемых бонусов">
+    <p>
+      Начисление Бонусных баллов происходит по дифференцированной шкале в
+      зависимости от уровня:
+    </p>
+
+    <ul>
+      <span style="color: #f2c94c">Уровень 1</span>
+      <li>Сумма покупок за предыдущий период 0-1600 руб.</li>
+      <li>Начисляемый бонус 3% от суммы покупки</li>
+    </ul>
+    <br />
+    <ul>
+      <span style="color: #f2994a">Уровень 2</span>
+      <li>Сумма покупок за предыдущий период 1601-3600 руб.</li>
+      <li>Начисляемый бонус 6% от суммы покупки</li>
+    </ul>
+    <br />
+    <ul>
+      <span style="color: #6fcf97">Уровень 3</span>
+      <li>Сумма покупок за предыдущий период  3601-8600 руб.</li>
+      <li>Начисляемый бонус 10% от суммы покупки</li>
+    </ul>
+    <br />
+    <ul>
+      <span style="color: #6fcf97">Уровень 4</span>
+      <li>Сумма покупок за предыдущий период — от 8601 руб.</li>
+      <li>Начисляемый бонус, в % от суммы покупки - 15%</li>
+    </ul>
+  </app-accordion>
+
+  <div class="guest-card__level-info">
+    <h2>
+      До следующего уровня за период с 01.04.2023 по 30.06.2023г осталось
+      совершить покупки на 401 рублей
+    </h2>
+    <input type="range" [(ngModel)]="discountLevel" [min]="3" [max]="6" [step]="0.1" [ngStyle]="{
+      'background-size': (discountLevel - 3) / (6 - 3) * 100 + '% 100%'
+    }">
+
+    <p class="show-more">Узнать условия начисления бонусов</p>
+  </div>
+  <hr>
+  <app-last-order></app-last-order>
+  <hr>
+  <app-invite-friends></app-invite-friends>
+  <hr>
+  <div class="guest-card__download-app">
+    <img src="/assets/download-app.svg" alt="Скачай приложение">
+  </div>
+  <a class="guest-card__loyalty-program" routerLink="loyalty-program">Подробнее о правилах <br> Программы лояльности</a>
+</div>

angular/src/app/pages/guest-card/guest-card.component.scss

@@ -0,0 +1,191 @@
+:host {
+  .guest-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 0 0;
+    max-width: 600px;
+    margin: 0 auto;
+
+    &__qr {
+      padding: 10px;
+      width: fit-content;
+      background-image: linear-gradient(
+          #fff 33%,
+          transparent 0px,
+          transparent 67%,
+          #fff 0px
+        ),
+        linear-gradient(
+          90deg,
+          #ffe 33%,
+          transparent 0px,
+          transparent 66%,
+          #fff 0px
+        ),
+        linear-gradient(#fff 33%, transparent 0px, transparent 67%, #fff 0),
+        linear-gradient(90deg, #fff 33%, transparent 0, transparent 66%, #fff 0);
+      background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
+      background-position: 0 0, 0 0, 100% 100%, 100% 100%;
+      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+      cursor: pointer;
+    }
+
+    &__user-description {
+      margin: 18px 0 0;
+      padding: 14px 24px;
+      width: 100%;
+      text-align: left;
+      border-top: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+      //   font-family: "Goldman";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: -0.5px;
+
+      span {
+        color: #f2994a;
+      }
+    }
+
+    &__purchases-description {
+      margin: 0;
+      padding: 14px 24px;
+      width: 100%;
+      text-align: left;
+      border-bottom: 1px solid #fff;
+      //   font-family: "Goldman";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: -0.5px;
+
+      span {
+        color: #219653;
+      }
+    }
+
+    &__level-info {
+      padding: 36px;
+
+      h2 {
+        font-style: normal;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        text-align: center;
+        letter-spacing: -0.408px;
+      }
+
+      input[type="range"] {
+        -webkit-appearance: none;
+        width: 100%;
+        height: 6px;
+        border-radius: 5px;
+        display: block;
+        position: relative;
+        background: #231f20;
+        box-shadow: 0px 0px 3px #f2c94c59;
+        background-image: linear-gradient(#f2c94c, #f2c94c);
+        background-size: 70% 100%;
+        background-repeat: no-repeat;
+
+        &::before,
+        &::after {
+          content: " ";
+          display: block;
+          width: 16px;
+          height: 16px;
+          border-radius: 100%;
+          position: absolute;
+          top: -5px;
+        }
+
+        &::before {
+          background-color: #f2c94c;
+          left: 0px;
+        }
+
+        &::after {
+          background-color: #f2c94c;
+          right: 0px;
+        }
+
+        &::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          background: #f2c94c;
+          width: 16px;
+          height: 16px;
+          border-radius: 100%;
+        }
+
+        &::-ms-thumb {
+          -webkit-appearance: none;
+          height: 20px;
+          width: 20px;
+          border-radius: 50%;
+          background: #f2c94c;
+          cursor: ew-resize;
+          box-shadow: 0 0 2px 0 #555;
+          transition: background 0.3s ease-in-out;
+        }
+
+        &::-moz-range-thumb {
+          -webkit-appearance: none;
+          height: 20px;
+          width: 20px;
+          border-radius: 50%;
+          background: #f2c94c;
+          cursor: ew-resize;
+          box-shadow: 0 0 2px 0 #555;
+          transition: background 0.3s ease-in-out;
+        }
+      }
+
+      & > .show-more {
+        margin-top: 42px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        text-align: center;
+        color: #28af49;
+      }
+    }
+
+    &__download-app {
+      width: 100%;
+      position: relative;
+      margin-top: 32px;
+      display: flex;
+      justify-content: flex-end;
+      img {
+        width: 100%;
+        max-width: calc(100% - 16px);
+      }
+    }
+
+    &__loyalty-program {
+      text-align: center;
+      color: rgba(255, 255, 255, 0.5);
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      text-decoration: none;
+      margin: 17px 0 22px;
+    }
+  }
+}
+
+app-accordion {
+  ul {
+    li {
+      list-style-type: disc;
+      margin-left: 16px;
+    }
+  }
+}

angular/src/app/pages/guest-card/guest-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuestCardComponent } from './guest-card.component';
+
+describe('GuestCardComponent', () => {
+  let component: GuestCardComponent;
+  let fixture: ComponentFixture<GuestCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GuestCardComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GuestCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/pages/guest-card/guest-card.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { IAccordionData } from 'src/app/components/accordion/accordion.component';
+
+@Component({
+  selector: 'app-guest-card',
+  templateUrl: './guest-card.component.html',
+  styleUrls: ['./guest-card.component.scss'],
+})
+export class GuestCardComponent implements OnInit {
+  public qrCodeSize: number = 85;
+  private isQrCodeClicked: boolean = false;
+
+  public discountLevel: number = 4.2;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  qrCodeClick() {
+    this.isQrCodeClicked = !this.isQrCodeClicked;
+    this.qrCodeSize = this.isQrCodeClicked ? 180 : 85;
+  }
+}

angular/src/app/pages/login/login.component.html

@@ -0,0 +1,26 @@
+<h1>Участвуй в программе лояльности COFFEE LIKE</h1>
+<p class="description">Начни получать бонусы прямо сейчас</p>
+<form *ngIf="isShowNumber; else smsCode" (ngSubmit)="submitNumber()" action="">
+  <div class="input-container">
+    <label for="name">Ваше имя</label>
+    <input id="name" type="text" placeholder="Введите ваше имя" />
+  </div>
+  <div class="input-container">
+    <label for="number">Номер телефона</label>
+    <input id="number" type="text" placeholder="Введите номер" />
+  </div>
+  <p class="offer">
+    Используя приложение, вы принимаете условия в <span>соглашениях</span> и
+    соглашаетесь на получение рекламно-информационных сообщений
+  </p>
+  <button>Принять участие</button>
+</form>
+
+<ng-template #smsCode>
+  <h2>Введите код из SMS</h2>
+  <form class="code-form" action="" (ngSubmit)="submitCode()">
+    <input type="text" placeholder="Код" />
+    <button>Войти</button>
+  </form>
+  <p class="resend-code" >Не пришло SMS?<br>Отправим повторно через секунд</p>
+</ng-template>

angular/src/app/pages/login/login.component.scss

@@ -0,0 +1,137 @@
+:host {
+  padding-top: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto 52px;
+
+  h1 {
+    width: 302px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: -0.408px;
+  }
+
+  h2 {
+    margin-top: 44px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 24px;
+    text-align: center;
+    letter-spacing: 0.38px;
+  }
+
+  .description {
+    width: 180px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 20px;
+    text-align: center;
+    letter-spacing: -0.24px;
+    margin-top: 16px;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 35px;
+
+    .offer {
+      margin-top: 10px;
+      padding: 0 16px;
+      font-family: "Gowun Dodum";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 17px;
+      text-align: center;
+      span {
+        color: #13a538;
+      }
+    }
+
+    .input-container {
+      position: relative;
+      width: 100%;
+
+      label {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: #6a737c;
+        text-align: left;
+        position: absolute;
+        top: 10px;
+        left: 16px;
+      }
+
+      input {
+        width: 100%;
+        padding: 24px 16px 8px;
+        background-color: #252323;
+        margin-bottom: 16px;
+        border: none;
+        border-top: solid #6a737c 1px;
+        border-bottom: solid #6a737c 1px;
+        color: #6a737c;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 22px;
+        line-height: 28px;
+      }
+    }
+
+    button {
+      height: 46px;
+      width: calc(100% - 32px);
+      padding: 10px 24px;
+      background: #28af49;
+      border-radius: 6px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      border: none;
+      letter-spacing: -0.408px;
+      color: #ffffff;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 17px;
+      line-height: 22px;
+    }
+  }
+
+  .code-form {
+    width: 100%;
+    input {
+      width: 100%;
+      padding: 24px 16px 8px;
+      background-color: #252323;
+      margin-bottom: 16px;
+      border: none;
+      border-top: solid #6a737c 1px;
+      border-bottom: solid #6a737c 1px;
+      color: #6a737c;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 22px;
+      line-height: 28px;
+    }
+  }
+
+  .resend-code {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+  }
+}

angular/src/app/pages/login/login.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/pages/login/login.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CookiesService } from 'src/app/services/cookies.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent implements OnInit {
+  isShowNumber: boolean = true;
+
+  constructor(private cookiesService: CookiesService, private router: Router) {}
+
+  ngOnInit(): void {}
+
+  submitNumber() {
+    this.isShowNumber = false;
+  }
+
+  submitCode() {
+    this.cookiesService.setCookie('token', 'test')
+    this.router.navigate(['/'])
+  }
+}

angular/src/app/pages/main/main.component.html

@@ -1,5 +1,5 @@
 <div class="main-container">
-    <app-navbar></app-navbar>
+    <!-- <app-navbar></app-navbar> -->
     <p-toast position="top-center"></p-toast>
     <app-footer-buttons [token]="token"
         [isPermissionNotifications]="isPermissionNotifications"

angular/src/app/pages/not-found/not-found.component.html

@@ -1,5 +1,5 @@
 <div class="not-found-page">
-  <app-navbar></app-navbar>
+  <!-- <app-navbar></app-navbar> -->
   <div class="not-found-page__container">
     <h1>404</h1>
     <p>Упс, что-то пошло не так!</p>

angular/src/app/pages/not-found/not-found.component.scss

@@ -6,14 +6,14 @@
       h1 {
         font-size: 108px;
         font-weight: 600;
-        color: #09467f;
+        color: var(--main-color);
       }
       p {
         margin: 16px 0;
         font-size: 14px;
       }
       button {
-        background-color: #09467f;
+        background-color: var(--main-color);
         color: #fff;
         border-radius: 8px;
         display: flex;

angular/src/assets/social-media-icons/instagram.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 1.63059C11.3929 1.63059 11.6894 1.63059 12.6424 1.67294C13.5106 1.71529 13.9976 1.86353 14.3153 1.99059C14.7388 2.16 15.0353 2.35059 15.3529 2.66824C15.6706 2.98588 15.8612 3.28235 16.0306 3.70588C16.1576 4.02353 16.3059 4.48941 16.3482 5.37882C16.3906 6.33177 16.3906 6.60706 16.3906 9.02118C16.3906 11.4353 16.3906 11.7106 16.3482 12.6635C16.3059 13.5318 16.1576 14.0188 16.0306 14.3365C15.8612 14.76 15.6706 15.0565 15.3529 15.3741C15.0353 15.6918 14.7388 15.8824 14.3153 16.0518C13.9976 16.1788 13.5318 16.3271 12.6424 16.3694C11.6894 16.4118 11.4141 16.4118 9 16.4118C6.60706 16.4118 6.31059 16.4118 5.35765 16.3694C4.48941 16.3271 4.00235 16.1788 3.68471 16.0518C3.26118 15.8824 2.96471 15.6918 2.64706 15.3741C2.32941 15.0565 2.13882 14.76 1.96941 14.3365C1.84235 14.0188 1.69412 13.5529 1.65176 12.6635C1.60941 11.7106 1.60941 11.4353 1.60941 9.02118C1.60941 6.60706 1.60941 6.33177 1.65176 5.37882C1.69412 4.51059 1.84235 4.02353 1.96941 3.70588C2.13882 3.28235 2.32941 2.98588 2.64706 2.66824C2.96471 2.35059 3.26118 2.16 3.68471 1.99059C4.00235 1.86353 4.46824 1.71529 5.35765 1.67294C6.31059 1.63059 6.60706 1.63059 9 1.63059ZM9 0C6.56471 0 6.24706 3.78665e-08 5.29412 0.0635295C4.34118 0.105882 3.68471 0.254118 3.11294 0.487059C2.52 0.72 2.01176 1.01647 1.52471 1.52471C1.01647 2.01176 0.698824 2.52 0.487059 3.11294C0.254118 3.68471 0.105882 4.34118 0.0635295 5.29412C0.0211765 6.24706 0 6.56471 0 9C0 11.4353 3.78665e-08 11.7529 0.0635295 12.7059C0.105882 13.6588 0.254118 14.3153 0.487059 14.8871C0.72 15.48 1.01647 15.9882 1.52471 16.4753C2.03294 16.9835 2.52 17.28 3.11294 17.5129C3.68471 17.7459 4.34118 17.8941 5.29412 17.9365C6.24706 17.9788 6.56471 18 9 18C11.4353 18 11.7529 18 12.7059 17.9365C13.6588 17.8941 14.3153 17.7459 14.8871 17.5129C15.48 17.28 15.9882 16.9835 16.4753 16.4753C16.9835 15.9671 17.28 15.48 17.5129 14.8871C17.7459 14.3153 17.8941 13.6588 17.9365 12.7059C17.9788 11.7529 18 11.4353 18 9C18 6.56471 18 6.24706 17.9365 5.29412C17.8941 4.34118 17.7459 3.68471 17.5129 3.11294C17.28 2.52 16.9835 2.01176 16.4753 1.52471C15.9671 1.01647 15.48 0.72 14.8871 0.487059C14.3153 0.254118 13.6588 0.105882 12.7059 0.0635295C11.7529 0.0211765 11.4565 0 9 0Z" fill="white"/>
+<path d="M9.00002 4.375C6.45884 4.375 4.38354 6.45029 4.38354 8.99147C4.38354 11.5326 6.45884 13.6079 9.00002 13.6079C11.5624 13.6079 13.6165 11.5326 13.6165 8.99147C13.6165 6.45029 11.5624 4.375 9.00002 4.375ZM9.00002 11.9985C7.34825 11.9985 5.99296 10.6644 5.99296 8.99147C5.99296 7.31853 7.32707 5.98441 9.00002 5.98441C10.673 5.98441 12.0071 7.33971 12.0071 8.99147C12.0071 10.6432 10.673 11.9985 9.00002 11.9985Z" fill="white"/>
+<path d="M13.8071 5.285C14.4035 5.285 14.8871 4.80147 14.8871 4.205C14.8871 3.60853 14.4035 3.125 13.8071 3.125C13.2106 3.125 12.7271 3.60853 12.7271 4.205C12.7271 4.80147 13.2106 5.285 13.8071 5.285Z" fill="white"/>
+</svg>

angular/src/assets/social-media-icons/vk.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.73588 11.588H10.8738C10.8738 11.588 11.2176 11.5512 11.3954 11.3546C11.5613 11.1702 11.5495 10.8384 11.5495 10.8384C11.5495 10.8384 11.5258 9.25318 12.237 9.0197C12.9364 8.78621 13.8372 10.5558 14.7855 11.2317C15.5086 11.7478 16.0539 11.6372 16.0539 11.6372L18.6024 11.6003C18.6024 11.6003 19.93 11.5143 19.3018 10.4329C19.2543 10.3469 18.9343 9.63413 17.4052 8.15949C15.8049 6.6234 16.0183 6.86917 17.9504 4.21481C19.124 2.5927 19.5862 1.6096 19.444 1.1795C19.3018 0.773968 18.4483 0.884566 18.4483 0.884566L15.5797 0.909144C15.5797 0.909144 15.3664 0.884566 15.2123 0.982876C15.0582 1.08119 14.9633 1.30238 14.9633 1.30238C14.9633 1.30238 14.5129 2.55583 13.9084 3.62495C12.6282 5.87378 12.1185 5.99667 11.9169 5.84921C11.4309 5.5297 11.5495 4.5466 11.5495 3.84615C11.5495 1.67104 11.8695 0.761679 10.9331 0.528194C10.613 0.417595 10.376 0.368441 9.58178 0.356152C8.56237 0.343863 7.69705 0.356152 7.1992 0.614215C6.8673 0.773968 6.61837 1.15492 6.77247 1.16721C6.96213 1.19178 7.38886 1.29009 7.61408 1.6096C7.91042 2.02742 7.89856 2.94907 7.89856 2.94907C7.89856 2.94907 8.06451 5.51741 7.50739 5.83692C7.11622 6.05812 6.59466 5.60343 5.45672 3.56351C4.87589 2.51897 4.4373 1.36383 4.4373 1.36383C4.4373 1.36383 4.35433 1.14263 4.20023 1.03203C4.02243 0.896855 3.76165 0.8477 3.76165 0.8477L1.03531 0.859989C1.03531 0.859989 0.620433 0.872278 0.478189 1.05661C0.335946 1.22865 0.466336 1.57273 0.466336 1.57273C0.466336 1.57273 2.59999 6.74628 5.01813 9.35149C7.22291 11.7478 9.73588 11.588 9.73588 11.588Z" fill="white"/>
+</svg>

angular/src/assets/social-media-icons/youtube.svg

@@ -0,0 +1,11 @@
+<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_63_3193)">
+<path d="M19.8765 15.8256C19.8765 15.8256 13.5962 16 11.5 16C9.40378 16 3.12346 15.8256 3.12346 15.8256C1.50327 15.8256 0.175381 14.5054 0.175381 12.8947C0.175381 12.8947 0 9.2247 0 8.00415C0 6.7836 0.175381 3.11365 0.175381 3.11365C0.175381 1.49455 1.50327 0.174364 3.12346 0.174364C3.12346 0.174364 9.40378 0 11.5 0C13.5962 0 19.8765 0.174364 19.8765 0.174364C21.4967 0.174364 22.8246 1.49455 22.8246 3.10535C22.8246 3.10535 23 6.7753 23 7.99585C23 9.2164 22.8246 12.8864 22.8246 12.8864C22.8246 14.5054 21.4967 15.8256 19.8765 15.8256Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29529 11.5744V4.42542L15.1079 8.00404L9.29529 11.5744Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_63_3193">
+<rect width="23" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

angular/src/environments/environment.prod.ts

@@ -7,7 +7,7 @@ export const environment = {
   appWPEndpoint: 'http://213.239.210.240:4500/wp-json/woofood/v1/',
   hasBonusProgram: true,
   systemId: 'g6zyv8tj53w28ov7cl',
-  defaultUrl: 'https://fashionlogica.lk.crm4retail.ru',
+  defaultUrl: 'https://coffee-like.lk.crm4retail.ru',
   firebase: {
     apiKey: "AIzaSyCnKvln5itnrBj62POCPHxshAN_Vmd0zds",
     authDomain: "fashionlogicanotification.firebaseapp.com",
@@ -20,5 +20,5 @@ export const environment = {
   version: packageJson.version,
   appleWalletEndpoint: 'https://apple-push-notifications.it-retail.tech/apns/api',
   appleWalletSecret: 'Token F5mbzEERAznGKVbB6l',
-  clientName: 'fashionlogica'
+  clientName: 'coffeeLike'
 }

angular/src/environments/environment.ts

@@ -20,5 +20,5 @@ export const environment = {
   version: packageJson.version,
   appleWalletEndpoint: 'http://192.168.0.179:4200/apns/api',
   appleWalletSecret: 'Token F5mbzEERAznGKVbB6l',
-  clientName: 'fashionlogica'
+  clientName: 'coffeeLike'
 };

angular/src/index.html

@@ -2,7 +2,7 @@
 <html lang="ru">
 <head>
   <meta charset="utf-8">
-  <title>Fashionlogica</title>
+  <title>Coffee Like</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="apple-touch-icon" href="./assets/icons/apple-icon-180x180.png">
@@ -13,8 +13,11 @@
   <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#1976d2">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>

angular/src/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "Fashionlogica",
+  "name": "Coffee Like",
-  "short_name": "Fashionlogica",
+  "short_name": "Coffee Like",
   "theme_color": "#1976d2",
   "background_color": "#fafafa",
   "display": "standalone",

angular/src/styles.scss

@@ -1,15 +1,37 @@
 // Сброс стилей
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle}
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
-html{height:100%;color:#000;}
+html{height:100%;color:#fff;}
 body{line-height:1}
 ol,ul{list-style:none}
 blockquote,q{quotes:none}
 blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
 table{border-collapse:collapse;border-spacing:0}
 
+// @import url('./app/styles/_fonts.scss');
+@import url('https://fonts.cdnfonts.com/css/gotham-pro');
+                
+
 * {
-    font-family: 'Raleway', sans-serif;
+    font-family: 'Gotham Pro';
+}
+
+body {
+    background-color: #231F20;
+}
+
+:root {
+    --main-color: #00b26b;
+    --main-border-radius: 35px;
+}
+
+hr {
+    width: 100%;
+    border-top: 1px solid#BDBDBD;
+}
+
+qr-code canvas {
+    transition: all 0.3s ease 0s;
 }
 
 .p-inputtext {
@@ -38,11 +60,11 @@ button {
 
 .p-toast-message-custom {
     background-color: #fff;
-    border: solid #09467F;
+    border: solid var(--main-color);
     border-width: 0 0 0 6px;
     color: #000;
     .p-toast-icon-close {
-        color: #09467F;
+        color: var(--main-color);
     }
 }
 
@@ -64,3 +86,6 @@ button {
 input::-webkit-date-and-time-value {
     text-align: left;
 }
+
+html, body { height: 100%; }
+body { margin: 0; }