diff --git a/package-lock.json b/package-lock.json
index c939f36..517a925 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,16 @@
       "name": "mines",
       "version": "0.1.0",
       "dependencies": {
+        "@mdi/font": "5.9.55",
+        "axios": "^1.6.8",
         "core-js": "^3.8.3",
+        "roboto-fontface": "*",
+        "sweetalert2": "^11.10.8",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
-        "vuex": "^4.0.0"
+        "vuetify": "^3.0.0-beta.0",
+        "vuex": "^4.0.2",
+        "webfontloader": "^1.0.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -25,7 +31,9 @@
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-vue": "^8.0.3",
-        "prettier": "^2.4.1"
+        "prettier": "^2.4.1",
+        "vue-cli-plugin-vuetify": "~2.5.8",
+        "webpack-plugin-vuetify": "^2.0.0-alpha.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1940,7 +1948,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -1954,7 +1962,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1963,7 +1971,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1972,7 +1980,7 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -1987,7 +1995,7 @@
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1999,6 +2007,11 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "dev": true
     },
+    "node_modules/@mdi/font": {
+      "version": "5.9.55",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-5.9.55.tgz",
+      "integrity": "sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg=="
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -2224,7 +2237,7 @@
       "version": "8.56.9",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.9.tgz",
       "integrity": "sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -2234,7 +2247,7 @@
       "version": "3.7.7",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -2244,7 +2257,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/express": {
       "version": "4.17.21",
@@ -2295,7 +2308,7 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/mime": {
       "version": "1.3.5",
@@ -2313,7 +2326,7 @@
       "version": "20.12.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
       "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -3194,11 +3207,25 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "node_modules/@vuetify/loader-shared": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz",
+      "integrity": "sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==",
+      "devOptional": true,
+      "dependencies": {
+        "find-cache-dir": "^3.3.2",
+        "upath": "^2.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0",
+        "vuetify": "^3.0.0-beta.4"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
       "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.6",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
@@ -3208,25 +3235,25 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
       "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
       "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
       "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
       "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.6",
         "@webassemblyjs/helper-api-error": "1.11.6",
@@ -3237,13 +3264,13 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
       "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
       "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-buffer": "1.12.1",
@@ -3255,7 +3282,7 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
       "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -3264,7 +3291,7 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
       "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -3273,13 +3300,13 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
       "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
       "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-buffer": "1.12.1",
@@ -3295,7 +3322,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
       "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
@@ -3308,7 +3335,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
       "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-buffer": "1.12.1",
@@ -3320,7 +3347,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
       "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-api-error": "1.11.6",
@@ -3334,7 +3361,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
       "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@xtuc/long": "4.2.2"
@@ -3344,13 +3371,13 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/accepts": {
       "version": "1.3.8",
@@ -3369,7 +3396,7 @@
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3381,7 +3408,7 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
       "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -3417,7 +3444,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3472,7 +3499,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -3609,6 +3636,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3655,6 +3687,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -3772,7 +3814,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "*"
       }
@@ -3896,7 +3938,7 @@
       "version": "4.23.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
       "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3952,7 +3994,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/bytes": {
       "version": "3.0.0",
@@ -3982,6 +4024,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsite": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+      "integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==",
+      "devOptional": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4029,7 +4080,7 @@
       "version": "1.0.30001610",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz",
       "integrity": "sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4108,7 +4159,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -4321,6 +4372,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -4334,7 +4396,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -4909,6 +4971,15 @@
         }
       }
     },
+    "node_modules/decache": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/decache/-/decache-4.6.2.tgz",
+      "integrity": "sha512-2LPqkLeu8XWHU8qNCS3kcF6sCcb5zIzvWaAHYSvPfwhdd7mHuah29NssMzrTYyHN4F5oFy2ko9OBYxegtU0FEw==",
+      "devOptional": true,
+      "dependencies": {
+        "callsite": "^1.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5109,6 +5180,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5293,7 +5372,7 @@
       "version": "1.4.737",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.737.tgz",
       "integrity": "sha512-QvLTxaLHKdy5YxvixAw/FfHq2eWLUL9KvsPjp0aHK1gI5d3EDuDgITkvj0nFO2c6zUY3ZqVAJQiBYyQP9tQpfw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -5305,7 +5384,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">= 4"
       }
@@ -5332,7 +5411,7 @@
       "version": "5.16.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
       "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -5408,13 +5487,13 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.0.tgz",
       "integrity": "sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
       "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -5599,7 +5678,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -6060,7 +6139,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -6072,7 +6151,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -6081,7 +6160,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -6128,7 +6207,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -6212,7 +6291,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -6252,7 +6331,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -6305,6 +6384,58 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "devOptional": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "devOptional": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "devOptional": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -6354,7 +6485,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
       "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "commondir": "^1.0.1",
         "make-dir": "^3.0.2",
@@ -6371,7 +6502,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -6413,7 +6544,6 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6429,6 +6559,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6601,7 +6744,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/globals": {
       "version": "11.12.0",
@@ -6648,7 +6791,7 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/gzip-size": {
       "version": "6.0.0",
@@ -7084,6 +7227,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -7295,7 +7447,7 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -7309,7 +7461,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -7318,7 +7470,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -7398,13 +7550,13 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -7416,7 +7568,7 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -7514,7 +7666,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -7549,7 +7701,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -7846,7 +7998,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -7903,7 +8055,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -7952,7 +8104,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7961,7 +8112,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8189,7 +8339,7 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/nice-try": {
       "version": "1.0.5",
@@ -8240,7 +8390,7 @@
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
@@ -8317,6 +8467,58 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/null-loader": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
+      "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==",
+      "devOptional": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/null-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "devOptional": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/null-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "devOptional": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -8562,7 +8764,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -8577,7 +8779,7 @@
       "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,
+      "devOptional": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -8602,7 +8804,7 @@
       "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,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -8691,7 +8893,7 @@
       "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,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -8756,7 +8958,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
       "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "find-up": "^4.0.0"
       },
@@ -9452,6 +9654,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -9472,7 +9679,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -9516,7 +9723,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -9621,6 +9828,18 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "dev": true,
+      "dependencies": {
+        "resolve": "^1.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -9823,6 +10042,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -9850,7 +10074,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -9913,7 +10137,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -9967,7 +10191,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -10130,6 +10354,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "bin": {
+        "shjs": "bin/shjs"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
@@ -10242,7 +10483,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10259,7 +10500,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -10517,6 +10758,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.8",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.8.tgz",
+      "integrity": "sha512-oAkYROBfXBY+4sVbQEIcN+ZxAx69lsmz5WEBwdEpyS4m59vOBNlRU5/fJpAI1MVfiDwFZiGwVzB/KBpOyfLNtg==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/table": {
       "version": "6.8.2",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
@@ -10559,7 +10809,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -10568,7 +10818,7 @@
       "version": "5.30.3",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
       "integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -10586,7 +10836,7 @@
       "version": "5.3.10",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
       "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.20",
         "jest-worker": "^27.4.5",
@@ -10620,7 +10870,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -10638,7 +10888,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/text-table": {
       "version": "0.2.0",
@@ -10817,7 +11067,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
@@ -10877,11 +11127,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
       "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10911,7 +11171,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -10991,6 +11251,61 @@
         }
       }
     },
+    "node_modules/vue-cli-plugin-vuetify": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.5.8.tgz",
+      "integrity": "sha512-uqi0/URJETJBbWlQHD1l0pnY7JN8Ytu+AL1fw50HFlGByPa8/xx+mq19GkFXA9FcwFT01IqEc/TkxMPugchomg==",
+      "dev": true,
+      "dependencies": {
+        "null-loader": "^4.0.1",
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "sass-loader": {
+          "optional": true
+        },
+        "vuetify-loader": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-cli-plugin-vuetify/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vue-cli-plugin-vuetify/node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vue-cli-plugin-vuetify/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -11236,22 +11551,55 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuetify": {
+      "version": "3.5.15",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.15.tgz",
+      "integrity": "sha512-4v+t3yjgZ5M4+YKRK2eOxymWU34/Sg8YP6Dqi4ZMYFjchiwijOns1WW4ywYlYXih0TSPVeAeQpCzztDu89nTyg==",
+      "engines": {
+        "node": "^12.20 || >=14.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": ">=1.0.0",
+        "vue": "^3.3.0",
+        "vue-i18n": "^9.0.0",
+        "webpack-plugin-vuetify": ">=2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
       "dependencies": {
         "@vue/devtools-api": "^6.0.0-beta.11"
       },
       "peerDependencies": {
-        "vue": "^3.2.0"
+        "vue": "^3.0.2"
       }
     },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
       "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -11278,6 +11626,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -11288,7 +11641,7 @@
       "version": "5.91.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
       "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
@@ -11615,11 +11968,61 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/webpack-plugin-vuetify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/webpack-plugin-vuetify/-/webpack-plugin-vuetify-2.0.1.tgz",
+      "integrity": "sha512-vopDoL1Il9lhDReAYdhToMi/OkFqV8BebEEyviZqMwFvQ3XnsRIdPyDDvee336h46QzCg3utp/FL5h2DhqeqAw==",
+      "devOptional": true,
+      "dependencies": {
+        "@vuetify/loader-shared": "^1.7.1",
+        "decache": "^4.6.0",
+        "file-loader": "^6.2.0",
+        "find-cache-dir": "^3.3.2",
+        "loader-utils": "^2.0.0",
+        "mkdirp": "^1.0.4",
+        "null-loader": "^4.0.1",
+        "upath": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "^3.2.6",
+        "vuetify": "^3.0.0-beta.4",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/webpack-plugin-vuetify/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "devOptional": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/webpack-plugin-vuetify/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "devOptional": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -11634,7 +12037,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
diff --git a/package.json b/package.json
index a9afb3a..297a5d5 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,16 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@mdi/font": "5.9.55",
+    "axios": "^1.6.8",
     "core-js": "^3.8.3",
+    "roboto-fontface": "*",
+    "sweetalert2": "^11.10.8",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
+    "vuetify": "^3.0.0-beta.0",
+    "vuex": "^4.0.2",
+    "webfontloader": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -25,7 +31,9 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
-    "prettier": "^2.4.1"
+    "prettier": "^2.4.1",
+    "vue-cli-plugin-vuetify": "~2.5.8",
+    "webpack-plugin-vuetify": "^2.0.0-alpha.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/index.html b/public/index.html
index 3e5a139..4123528 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/App.vue b/src/App.vue
index e0d60f4..5b76f23 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,17 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view />
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
 </template>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+<script>
+export default {
+  name: "App",
 
-nav {
-  padding: 30px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>
+  data: () => ({
+    //
+  }),
+};
+</script>
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..73961b9
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1,6 @@
+<svg width="488" height="424" viewBox="0 0 488 424" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M249.126 95.017L151.843 263.694L243.959 423.473L365.966 211.973L487.918 0.473206H303.629L249.126 95.017Z" fill="#1697F6"/>
+<path d="M122.007 211.973L128.396 223.096L219.402 65.2635L256.793 0.473206H243.959H0L122.007 211.973Z" fill="#AEDDFF"/>
+<path d="M303.629 0.473206C349.743 152.355 243.959 423.473 243.959 423.473L151.843 263.694L303.629 0.473206Z" fill="#1867C0"/>
+<path d="M256.793 0.473206C62.5042 0.473206 128.397 223.096 128.397 223.096L256.793 0.473206Z" fill="#7BC6FF"/>
+</svg>
diff --git a/src/components/Board.vue b/src/components/Board.vue
new file mode 100644
index 0000000..9c80a5b
--- /dev/null
+++ b/src/components/Board.vue
@@ -0,0 +1,227 @@
+<!-- eslint-disable -->
+<template>
+  <div id="app">
+    <div
+      v-for="(row, rowIndex) in localNumberOfRows"
+      :key="`row-${rowIndex}`"
+      class="row"
+    >
+      <div
+        v-for="(col, colIndex) in localNumberOfCols"
+        :key="`col-${colIndex}`"
+        class="cell"
+        @click="isCorrect(rowIndex, colIndex)"
+        :data-value="getCellSymbol(rowIndex, colIndex)"
+        :class="{ revealed: isCellRevealed(rowIndex, colIndex) }"
+      >
+        {{ getCellSymbol(rowIndex, colIndex) }}
+      </div>
+    </div>
+    <v-btn @click="startGame()">save</v-btn>
+  </div>
+</template>
+<!-- eslint-disable -->
+<script>
+import Swal from "sweetalert2";
+import { Minesweeper, EndGame, Play } from "./Game";
+
+export default {
+  data: function () {
+    return {
+      localNumberOfRows: null,
+      localNumberOfCols: null,
+      minesweeperGrid: null,
+    };
+  },
+  name: "Board",
+  props: {
+    numberOfRows: Number,
+    numberOfCols: Number,
+  },
+  methods: {
+    isCellRevealed(row, col) {
+    if (
+      this.minesweeperGrid &&
+      row < this.localNumberOfRows &&
+      col < this.localNumberOfCols
+    ) {
+      let cell = this.minesweeperGrid.board.board[row][col];
+      if (cell) {
+        return cell.isRevealed;
+      }
+    }
+    return false; // return false when minesweeperGrid is null or the cell doesn't exist
+  },
+    isCorrect(row, col) {
+      if (this.minesweeperGrid.board.board[row][col].isRevealed === false) {
+        this.play = new Play();
+        if (this.minesweeperGrid.board.board[row][col].isMine === false) {
+          this.minesweeperGrid.board.numberToWin = JSON.parse(
+            localStorage.getItem("numberToWin")
+          );
+          if (this.minesweeperGrid.board.numberToWin > 1) {
+            this.play.onClick(row, col);
+          } else {
+            Swal.fire({
+              title: "you win",
+              text: "Do you want to continue",
+              icon: "success",
+              showCancelButton: true,
+              confirmButtonText: "replay",
+              cancelButtonText: "Do nothing",
+            }).then((result) => {
+              if (result.isConfirmed) {
+                this.$router.push("/");
+              }
+            });
+          }
+        } else {
+          Swal.fire({
+            title: "you lose",
+            text: "Do you want to continue",
+            icon: "error",
+            showCancelButton: true,
+            confirmButtonText: "replay",
+            cancelButtonText: "Do nothing",
+          }).then((result) => {
+            if (result.isConfirmed) {
+              this.$router.push("/");
+            }
+          });
+        }
+        this.minesweeperGrid = JSON.parse(
+          localStorage.getItem("minesweeperGrid")
+        );
+        this.getCellSymbol(row, col);
+      }
+    },
+    startGame() {
+      this.$store.dispatch("writeOnFile", {
+        name: "yazan",
+        board: this.minesweeperGrid.board.board,
+        rows: this.localNumberOfRows,
+        cols: this.localNumberOfCols,
+      });
+    },
+    getCellSymbol(row, col) {
+      if (
+        this.minesweeperGrid &&
+        row < this.localNumberOfRows &&
+        col < this.localNumberOfCols
+      ) {
+        let cell = this.minesweeperGrid.board.board[row][col];
+        if (cell) {
+          if (cell.isFlagged === 1) {
+            return " F";
+          } else if (cell.isRevealed === true) {
+            return String(cell.nearbyMines); // Convert to string before returning
+          } else if (!cell.isRevealed) {
+            return "#";
+          }
+        }
+      }
+      return "gg"; // return an empty string or some default value when minesweeperGrid is null or the cell doesn't exist
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.localNumberOfRows = parseInt(localStorage.getItem("numberOfRows"));
+      this.localNumberOfCols = parseInt(localStorage.getItem("numberOfCols"));
+      this.numberOfMines = parseInt(localStorage.getItem("numberOfMines"));
+      this.minesweeperGrid = new Minesweeper(
+        this.localNumberOfRows,
+        this.localNumberOfCols,
+        this.numberOfMines
+      );
+      localStorage.setItem(
+        "minesweeperGrid",
+        JSON.stringify(this.minesweeperGrid)
+      );
+      localStorage.setItem(
+        "numberToWin",
+        JSON.stringify(this.minesweeperGrid.board.numberToWin)
+      );
+      return this.minesweeperGrid;
+    });
+  },
+};
+</script>
+<!-- eslint-disable -->
+<style>
+#app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background-color: #f5f5f5;
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+.cell {
+  width: 30px;
+  height: 30px;
+  border: 1px solid #333;
+  margin: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: #ccc;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.cell:hover {
+  background-color: #aaa;
+}
+
+.v-btn {
+  margin-top: 20px;
+  align-self: center;
+}
+
+/* Unique colors for each number */
+.cell[data-value="1"] {
+  background-color: blue;
+}
+.cell[data-value="2"] {
+    background-color: green;
+}
+.cell[data-value="3"] {
+    background-color: red;
+}
+.cell[data-value="4"] {
+    background-color: purple;
+}
+.cell[data-value="5"] {
+    background-color: maroon;
+}
+.cell[data-value="6"] {
+    background-color: turquoise;
+}
+.cell[data-value="7"] {
+    background-color: black;
+}
+.cell[data-value="8"] {
+    background-color: gray;
+}
+
+/* Animation when a cell is revealed */
+@keyframes reveal {
+  0% {
+    background-color: #ccc;
+  }
+  100% {
+    background-color: #eee;
+  }
+}
+
+.cell.revealed {
+  animation: reveal 0.3s ease;
+}
+</style>
diff --git a/src/components/Data.js b/src/components/Data.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Game.js b/src/components/Game.js
new file mode 100644
index 0000000..a533b2c
--- /dev/null
+++ b/src/components/Game.js
@@ -0,0 +1,376 @@
+/*eslint-disable*/
+// const readline = require("readline");
+// var fs = require("fs");
+// module.exports = {
+//   resolve: {
+//     fallback: {
+//       fs: false,
+//     },
+//   },
+// };
+// const { start } = require("repl");
+// const { log } = require("console");
+// const rl = readline.createInterface({
+//   input: process.stdin,
+//   output: process.stdout,
+// });
+import minesweeperGrid from "./Board.vue";
+
+class Cell {
+  constructor() {
+    this.isMine = false;
+    this.isRevealed = false;
+    this.isFlagged = 0;
+    this.nearbyMines = 0;
+    this.isHint = false;
+  }
+}
+class Board {
+  constructor(numberOfRows, numberOfCols, numberOfMines) {
+    this.numberOfRows = numberOfRows;
+    this.numberOfCols = numberOfCols;
+    this.numberOfMines = numberOfMines;
+    this.numberOfFlags = this.numberOfMines;
+    this.board = Array.from({ length: numberOfRows }, () =>
+      Array.from({ length: numberOfCols }, () => new Cell())
+    );
+    this.numberToWin =
+      this.numberOfRows * this.numberOfCols - this.numberOfMines;
+    // console.log(this.numberOfRows, "tt");
+    // console.log(this.numberOfCols, "tt");
+    // console.log(this.numberOfMines, "tt");
+    // console.log(this.numberOfFlags, "tt");
+    // console.log(this.numberToWin, "tt");
+    this.putMine(this.numberOfMines);
+  }
+  putMine(numberOfMines) {
+    for (let i = 0; i < numberOfMines; ) {
+      let row = Math.floor(Math.random() * this.numberOfRows);
+      let col = Math.floor(Math.random() * this.numberOfCols);
+      if (!this.board[row][col].isMine) {
+        this.board[row][col].isMine = true;
+        i++;
+      }
+    }
+    this.goAroundTheArray(this.numberOfRows, this.numberOfCols);
+  }
+  goAroundTheArray(boardSize_row, boardSize_col) {
+    for (let j = 0; j < boardSize_col; j++) {
+      for (let i = 0; i < boardSize_row; i++) {
+        this.makeNumberInBlock(i, j);
+      }
+    }
+    // console.log(this.board);
+  }
+  makeNumberInBlock(row, col) {
+    let theNumberOfMines = 0;
+    // console.log();
+    if (this.board[row][col].isMine === false) {
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const newRow = row + dy;
+          const newCol = col + dx;
+          if (
+            newRow >= 0 &&
+            newRow < this.numberOfRows &&
+            newCol >= 0 &&
+            newCol < this.numberOfCols &&
+            this.board[newRow][newCol].isMine
+          ) {
+            theNumberOfMines++;
+          }
+        }
+      }
+      this.board[row][col].nearbyMines = theNumberOfMines;
+    } else {
+      this.board[row][col].nearbyMines = "##";
+    }
+  }
+}
+
+export class EndGame extends Board {
+  savingFunction() {
+    rl.question("enter your name: \n", (answer) => {
+      let name = answer;
+      this.writeOnFile(name);
+      rl.close();
+    });
+  }
+
+  writeOnFile(name, board, rows, cols) {
+    console.log("Writing into a file");
+    let dataForGame = {
+      playerName: JSON.stringify(name),
+      item: JSON.stringify(board),
+      rows: JSON.stringify(rows),
+      cols: JSON.stringify(cols),
+    };
+    fs.readFile("games.json", "utf8", (err, data) => {
+      if (err) {
+        console.error(err);
+        data = '{"games": []}';
+      }
+      let allGames = JSON.parse(data);
+      allGames.games.push(dataForGame);
+      fs.writeFile(
+        "newGames.json",
+        JSON.stringify(allGames, null, 2),
+        (err) => {
+          if (err) {
+            return console.error(err);
+          }
+          console.log("Data written to file");
+        }
+      );
+    });
+  }
+
+  finishAndGameOver() {
+    for (let i = 0; i < this.numberOfRows; i++) {
+      let row = "";
+      for (let j = 0; j < this.numberOfCols; j++) {
+        if (this.board[i][j].isFlagged === 1) {
+          row += "F";
+        } else if (this.board[i][j].isMine) {
+          row += "M";
+        } else if (this.board[i][j].isRevealed) {
+          row += this.board[i][j].isMine ? "M" : this.board[i][j].nearbyMines;
+        } else {
+          row += "#";
+        }
+        row += " ";
+      }
+      console.log(row);
+    }
+    console.log("Game Over");
+    end = new Date().getTime();
+    time = Math.ceil((end - timeForStart) / 1000) + timeInFile;
+    // console.log("end", end);
+    // console.log("startTime", startTime);
+    // console.log("start", timeForStart);
+    // console.log("timeInFile", timeInFile);
+    // console.log("time", time);
+    console.log("the time you spend in this game is : " + time + " second");
+  }
+}
+export class Play extends EndGame {
+  replay() {
+    rl.question(
+      'do you want to play again (0 for no 1 for yes) ex"0": \n',
+      (answer) => {
+        const [playAgain] = answer.split(" ").map(Number);
+        if (playAgain === 0) {
+          rl.close();
+        } else if (playAgain === 1) {
+          startGame.makeSizeOfGame();
+        }
+      }
+    );
+  }
+  printBoard() {
+    for (let i = 0; i < this.numberOfRows; i++) {
+      let row = "";
+      for (let j = 0; j < this.numberOfCols; j++) {
+        if (this.board[i][j].isFlagged === 1) {
+          row += "F";
+        } else if (this.board[i][j].isRevealed) {
+          row += this.board[i][j].nearbyMines;
+        } else {
+          row += "#";
+        }
+        row += " ";
+      }
+      console.log(row);
+    }
+    // this.game();
+  }
+  game() {
+    rl.question(
+      'Enter row and col number and a bool flag(1 for true/0 for false) you want to open or write "save" for save this game ex "1 1 0": \n',
+      (answer) => {
+        if (answer === "exit") {
+          rl.close();
+        } else if (answer === "save") {
+          this.savingFunction();
+        } else {
+          const [row, col, isFlagged] = answer.split(" ").map(Number);
+          if (isFlagged === 0) {
+            if (this.board[row - 1][col - 1].isMine === true) {
+              this.finishAndGameOver();
+              this.replay();
+            } else {
+              // console.log(this.numberToWin);
+              if (this.numberToWin > 1) {
+                this.onClick(row - 1, col - 1);
+                this.printBoard();
+                this.game();
+              } else {
+                this.onClick(row - 1, col - 1);
+                this.printBoard();
+                end = new Date().getTime();
+                time = Math.ceil((end - timeForStart) / 1000) + timeInFile;
+                console.log(
+                  "the time you spend in this game is : " + time + " second"
+                );
+                console.log("you win");
+                this.replay();
+                // rl.close();
+              }
+            }
+          } else if (isFlagged === 1) {
+            this.doFlagged(row - 1, col - 1);
+            this.printBoard();
+            this.game();
+          }
+        }
+      }
+    );
+  }
+  doFlagged(row, col) {
+    if (!this.board[row][col].isRevealed && this.numberOfFlags > 0) {
+      if (this.board[row][col].isFlagged === 0) {
+        this.numberOfFlags -= 1;
+        this.board[row][col].isFlagged = 1;
+      } else if (this.board[row][col].isFlagged === 1) {
+        this.numberOfFlags += 1;
+        this.board[row][col].isFlagged = 0;
+      }
+    } else {
+      console.log("i cannot put the flag");
+    }
+  }
+  onClick(row, col) {
+    this.board = JSON.parse(localStorage.getItem("minesweeperGrid"));
+    this.numberToWin = JSON.parse(localStorage.getItem("numberToWin"));
+
+    let queue = [[row, col]];
+
+    while (queue.length > 0) {
+      let [row, col] = queue.shift();
+
+      if (
+        row >= 0 &&
+        col >= 0 &&
+        row < this.board.board.board.length &&
+        col < this.board.board.board[0].length &&
+        this.board.board.board[row][col].isRevealed === false
+      ) {
+        this.board.board.board[row][col].isRevealed = true;
+        this.numberToWin = this.numberToWin - 1;
+        // console.log(this.numberToWin, "this is number to win");
+        localStorage.setItem("numberToWin", JSON.stringify(this.numberToWin));
+        // console.log(this.board.board.board[row][col].nearbyMines, "hello");
+
+        if (this.board.board.board[row][col].nearbyMines === 0) {
+          for (let j = col - 1; j <= col + 1; j++) {
+            for (let i = row - 1; i <= row + 1; i++) {
+              if (
+                i >= 0 &&
+                j >= 0 &&
+                i < this.board.board.board.length &&
+                j < this.board.board.board[0].length &&
+                this.board.board.board[i][j].isRevealed === false
+              ) {
+                queue.push([i, j]);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    localStorage.setItem("minesweeperGrid", JSON.stringify(this.board));
+  }
+}
+export class Minesweeper {
+  constructor(numberOfRows, numberOfCols, numberOfMines) {
+    this.board = new Board(numberOfRows, numberOfCols, numberOfMines);
+    this.board.putMine();
+    this.board.goAroundTheArray(numberOfRows, numberOfCols);
+    this.play = new Play(numberOfRows, numberOfCols);
+    this.timeInFile = 0;
+  }
+  start() {
+    startTime = new Date().getTime();
+    timeForStart = startTime;
+    this.play.printBoard();
+    this.play.game();
+  }
+}
+// class StartGame {
+//   startTabel() {
+//     rl.question("1) start game \n2) load game \n", (answer) => {
+//       if (answer === "1") {
+//         this.makeSizeOfGame();
+//       } else if (answer === "2") {
+//         this.loadGame();
+//       } else {
+//         console.log("enter the correct number");
+//         startTabel();
+//       }
+//     });
+//   }
+//   async loadGame() {
+//     try {
+//       const answer = await new Promise((resolve) => {
+//         rl.question("Enter your name to get your game:\n", (input) => {
+//           resolve(input);
+//         });
+//       });
+//       let oldName = answer;
+//       this.readFromFile(oldName);
+//     } catch (error) {
+//       console.error("Error:", error.message);
+//     }
+//   }
+//   async readFromFile(oldName) {
+//     try {
+//       let data = await fs.promises.readFile("games.json", "utf8");
+//       let parsedData = JSON.parse(data);
+//       let oldGame = parsedData.games.find(
+//         (oldGame) => JSON.parse(oldGame.playerName) === oldName
+//       );
+//       if (!oldGame) {
+//         console.error("No game found for player:", oldName);
+//         rl.close();
+//         return;
+//       }
+//       let name = JSON.parse(oldGame.playerName);
+//       console.log("hello " + name + " this is your game");
+//       this.numberOfRows = JSON.parse(oldGame.rows);
+//       this.numberOfCols = JSON.parse(oldGame.cols);
+//       const game = new Minesweeper(this.numberOfRows, this.numberOfCols);
+//       this.board = JSON.parse(oldGame.item);
+//       timeInFile = JSON.parse(oldGame.timeInGame);
+//       this.play = new Play(this.numberOfRows, this.numberOfCols);
+//       startTime = new Date().getTime();
+//       timeForStart = startTime;
+//       this.play.printBoard();
+//       this.play.game();
+//     } catch (err) {
+//       console.error(err);
+//     }
+//   }
+//   makeSizeOfGame() {
+//     rl.question(
+//       'Enter row and col and number  you want to play ex "1 1 ": ',
+//       (answer) => {
+//         const [row, col] = answer.split(" ").map(Number);
+//         if (row > 1 && col > 1 && row < 15 && col < 15) {
+//           const game = new Minesweeper(row, col);
+//           game.start();
+//         } else {
+//           console.log("the board is not in the rang from 2 to 15");
+//           this.makeSizeOfGame();
+//         }
+//       }
+//     );
+//   }
+// }
+let time = 0,
+  timeInFile = 0;
+var startTime = 0;
+let timeForStart = 0;
+let end = 0;
+// const startGame = new StartGame();
+// startGame.startTabel();
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 7c23e36..ca1c985 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,130 +1,92 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
+  <v-container>
+    <v-text-field
+      label="number of rows"
+      v-model="numberOfRows"
+      type="number"
+    ></v-text-field>
+    <v-text-field
+      label="number of cols"
+      v-model="numberOfCols"
+      type="number"
+    ></v-text-field>
+    <v-text-field
+      label="number of mines"
+      v-model="numberOfMines"
+      type="number"
+    ></v-text-field>
+    <v-btn @click="startGame">start</v-btn>
+    <v-btn @click="loadGame">load</v-btn>
+    <input
+      type="file"
+      ref="fileInput"
+      @change="handleFileUpload"
+      style="display: none"
+    />
+  </v-container>
 </template>
-
 <script>
 export default {
   name: "HelloWorld",
-  props: {
-    msg: String,
+  data: () => ({
+    numberOfCols: 2,
+    numberOfRows: 2,
+    numberOfMines: 2,
+  }),
+  methods: {
+    loadGame() {
+      this.$refs.fileInput.click();
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.addEventListener("change", (event) => {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.addEventListener("load", (event) => {
+          const gameData = JSON.parse(event.target.result);
+          console.log(gameData);
+        });
+
+        reader.readAsText(file);
+      });
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      const reader = new FileReader();
+
+      reader.onload = (event) => {
+        const gameData = JSON.parse(event.target.result);
+        this.$store.commit("SET_GAME_DATA", gameData);
+        // Assuming the gameData has numberOfRows and numberOfCols properties
+        if (gameData.rows && gameData.cols) {
+          this.numberOfRows = gameData.rows;
+          this.numberOfCols = gameData.cols;
+
+          // Store the number of rows and columns in local storage
+          localStorage.setItem("numberOfRows", this.numberOfRows);
+          localStorage.setItem("numberOfCols", this.numberOfCols);
+          localStorage.setItem("numberOfMines", this.numberOfMines);
+
+          // Create the board after the data is loaded
+          this.createBoard();
+        }
+      };
+
+      reader.readAsText(file);
+      this.$router.push("/game");
+    },
+    startGame() {
+      // Store the number of rows and columns in local storage
+      localStorage.setItem("numberOfRows", this.numberOfRows);
+      localStorage.setItem("numberOfCols", this.numberOfCols);
+      localStorage.setItem("numberOfMines", this.numberOfMines);
+
+      // Create the board
+      this.createBoard();
+    },
+    createBoard() {
+      // Add your board creation logic here
+      this.$router.push("/game");
+    },
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index 89ba0ea..8850766 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,11 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import Vuex from "vuex";
 import router from "./router";
 import store from "./store";
+import vuetify from "./plugins/vuetify";
+import { loadFonts } from "./plugins/webfontloader";
 
-createApp(App).use(store).use(router).mount("#app");
+loadFonts();
+
+createApp(App).use(Vuex).use(router).use(store).use(vuetify).mount("#app");
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..8968900
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,9 @@
+// Styles
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+// Vuetify
+import { createVuetify } from "vuetify";
+
+export default createVuetify();
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
diff --git a/src/plugins/webfontloader.js b/src/plugins/webfontloader.js
new file mode 100644
index 0000000..e86aa7d
--- /dev/null
+++ b/src/plugins/webfontloader.js
@@ -0,0 +1,17 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts() {
+  const webFontLoader = await import(
+    /* webpackChunkName: "webfontloader" */ "webfontloader"
+  );
+
+  webFontLoader.load({
+    google: {
+      families: ["Roboto:100,300,400,500,700,900&display=swap"],
+    },
+  });
+}
diff --git a/src/result.txt b/src/result.txt
new file mode 100644
index 0000000..e69de29
diff --git a/src/router/index.js b/src/router/index.js
index 76687a1..ab00eee 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,6 +16,16 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
+  {
+    path: "/game",
+    name: "Board",
+    // props: true,
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../components/Board.vue"),
+  },
 ];
 
 const router = createRouter({
diff --git a/src/store/index.js b/src/store/index.js
index 100073a..a6612ce 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,9 +1,36 @@
+/* eslint-disable */
 import { createStore } from "vuex";
+import axios from "axios";
 
 export default createStore({
-  state: {},
-  getters: {},
-  mutations: {},
-  actions: {},
-  modules: {},
+  state: {
+    gameData: {},
+  },
+  mutations: {
+    SET_GAME_DATA(state, payload) {
+      state.gameData = payload;
+    },
+  },
+  actions: {
+    writeOnFile({ commit }, { name, board, rows, cols }) {
+      let dataForGame = {
+        playerName: JSON.stringify(name),
+        item: JSON.stringify(board),
+        rows: JSON.stringify(rows),
+        cols: JSON.stringify(cols),
+      };
+
+      // Create a downloadable file
+      const blob = new Blob([JSON.stringify(dataForGame, null, 2)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "gameData.json";
+      link.click();
+
+      commit("SET_GAME_DATA", dataForGame);
+    },
+  },
 });
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 318e397..79f6be9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
+  <HelloWorld />
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import { defineComponent } from "vue";
 
-export default {
+// Components
+import HelloWorld from "../components/HelloWorld.vue";
+
+export default defineComponent({
   name: "HomeView",
+
   components: {
     HelloWorld,
   },
-};
+});
 </script>
diff --git a/vue.config.js b/vue.config.js
index 0aed899..61e4020 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,25 @@
+const fs = require("fs");
+const webpack = require("webpack");
 const { defineConfig } = require("@vue/cli-service");
+
+const someFileContents = fs.readFileSync("./src/components/Game.js");
+
 module.exports = defineConfig({
+  lintOnSave: true,
+
+  configureWebpack: {
+    plugins: [
+      new webpack.DefinePlugin({
+        somevar: JSON.stringify(someFileContents),
+      }),
+    ],
+  },
+
   transpileDependencies: true,
+
+  pluginOptions: {
+    vuetify: {
+      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
+    },
+  },
 });