Merge pull request #14 from Swino4ka/Swino4ka

110% hotfix
150% laptop fix
2025-12-10 12:19:31 +02:00 · 2024-03-10 01:41:18 +01:00 · 2024-03-10 00:54:00 +01:00 · 2024-03-10 00:12:09 +01:00 · 2024-03-10 00:02:38 +01:00 · 2024-03-10 00:01:29 +01:00
78 changed files with 5870 additions and 644 deletions
--- a/README.md
+++ b/README.md
@@ -1,30 +1,44 @@
 ![Lucky Diamond](https://github.com/danilt2000/LuckyDiamond/assets/96600211/26167263-51c4-4ae6-96e9-c941943c913f)
 # Проект "Lucky Diamond Casino"
 Сайт Онлайн-Казино на игровую валюту Майнкрафт сервера СПМ.
 ## Вклад и Разработка
 Если вы хотите дополнить или улучшить визуал нашего сайта, то сделайте pull запрос к этому репозиторию.
 ### Запуск Проекта
 - Переход к папке проекта:
 `cd LuckyDiamond/luckydiamond`
 - Установка всех зависимостей проекта:
 `npm i`
 - Запуск локального сервера:
 `npm run serve`
 ### Добавление Куки-Файлов для локального сервера
 - Зайти на vercel страницу
 - Нажать сочетание клавиш ctrl + shift + i
 - Перейти в Application(Приложение)
 - Кликнуть на файлы Куки
 - Нажать на нашу ссылку и скопировать AUTHTOKEN, SearchToken, SpUserName
 - Вставить значения и названия на Локальный хост
 - Обновить страницу
 ## Важные ссылки
 [Документация SPWorlds](https://github.com/sp-worlds/api-docs)
 [DiscordAPI](https://discord.com/developers/docs/topics/oauth2#oauth2)
-<!DOCTYPE html>
+[Отображение Скинов](https://visage.surgeplay.com/index.html)
 <html>
 <head>
    <meta charset="UTF-8">
-</head>
+[Вдохновление](https://cs.fail/en/)
 <body>
 ## Наша Команда
-<h1>Важные ссылки</h1> 
+![team](https://cdn.discordapp.com/attachments/1175674631684898866/1208428357952348170/Group_92.png?ex=65e33f9c&is=65d0ca9c&hm=9279223a5486b16e30267bced4fd1f7cc63ff59292cb5e29d741914b5902e5e0&)
 <h2>Отображение головы</h2>
 https://visage.surgeplay.com/index.html
   ![image](https://visage.surgeplay.com/head/512/Hepatir.png)
 <h2>Sp api</h2>
 https://github.com/sp-worlds/api-docs
 <h2>Discord api </h2>
     https://discord.com/developers/docs/topics/oauth2#oauth2
 <h2>Откуда берём вдохновление </h2>
     https://cs.fail/en/
 </body>
 </html>
--- a/luckydiamond/package-lock.json
+++ b/luckydiamond/package-lock.json
@@ -11,14 +11,18 @@
        "@popperjs/core": "^2.11.8",
        "@vuelidate/core": "^2.0.3",
        "@vuelidate/validators": "^2.0.4",
        "axios": "^1.6.7",
        "bootstrap": "^5.3.2",
        "core-js": "^3.8.3",
        "howler": "^2.2.4",
        "mitt": "^3.0.1",
        "save": "^2.9.0",
        "swiper": "^11.0.5",
        "vue": "^3.2.13",
        "vue-chart-3": "^3.1.8",
        "vue-recaptcha": "^3.0.0-alpha.6",
        "vue-router": "^4.2.5",
        "vue3-carousel": "^0.3.1",
        "vue3-recaptcha2": "^1.8.0"
      },
      "devDependencies": {
@@ -3810,6 +3814,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",
@@ -3856,6 +3865,16 @@
        "postcss": "^8.1.0"
      }
    },
    "node_modules/axios": {
      "version": "1.6.7",
      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
      "dependencies": {
        "follow-redirects": "^1.15.4",
        "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",
@@ -4305,6 +4324,12 @@
        "node": ">=4"
      }
    },
    "node_modules/chart.js": {
      "version": "3.9.1",
      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
      "peer": true
    },
    "node_modules/chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4576,6 +4601,17 @@
      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
    },
    "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",
@@ -5357,6 +5393,14 @@
      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.3.tgz",
      "integrity": "sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ=="
    },
    "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",
@@ -5521,8 +5565,7 @@
    "node_modules/duplexer": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
      "dev": true
    },
    "node_modules/easy-stack": {
      "version": "1.0.1",
@@ -6309,6 +6352,20 @@
        "node": ">=4.0.0"
      }
    },
    "node_modules/event-stream": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
      "dependencies": {
        "duplexer": "^0.1.1",
        "from": "^0.1.7",
        "map-stream": "0.0.7",
        "pause-stream": "^0.0.11",
        "split": "^1.0.1",
        "stream-combiner": "^0.2.2",
        "through": "^2.3.8"
      }
    },
    "node_modules/eventemitter3": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -6596,10 +6653,9 @@
      "dev": true
    },
    "node_modules/follow-redirects": {
-      "version": "1.15.3",
+      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
      "dev": true,
      "funding": [
        {
          "type": "individual",
@@ -6615,6 +6671,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",
@@ -6646,6 +6715,11 @@
        "node": ">= 0.6"
      }
    },
    "node_modules/from": {
      "version": "0.1.7",
      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
    },
    "node_modules/fs-extra": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -7788,6 +7862,16 @@
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
      "dev": true
    },
    "node_modules/lodash-es": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
    },
    "node_modules/lodash.assign": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8111,6 +8195,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/map-stream": {
      "version": "0.0.7",
      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ=="
    },
    "node_modules/mdn-data": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -8204,7 +8293,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"
      }
@@ -8213,7 +8301,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"
      },
@@ -8230,6 +8317,11 @@
        "node": ">=6"
      }
    },
    "node_modules/mingo": {
      "version": "6.4.10",
      "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.4.10.tgz",
      "integrity": "sha512-/pOGeZKcZrKKw8YkCMKn9+XPiUYeNhkfaVbTn9tqvZvfccxf1idk8ezSulecZmPdKJLibNDtp4UBfDK3nzvMrQ=="
    },
    "node_modules/mini-css-extract-plugin": {
      "version": "2.7.6",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -9048,6 +9140,14 @@
      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q=="
    },
    "node_modules/pause-stream": {
      "version": "0.0.11",
      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
      "dependencies": {
        "through": "~2.3"
      }
    },
    "node_modules/perfect-debounce": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -9768,6 +9868,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",
@@ -10194,6 +10299,22 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
    "node_modules/save": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
      "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
      "dependencies": {
        "async": "^3.2.2",
        "event-stream": "^4.0.1",
        "lodash.assign": "^4.2.0",
        "mingo": "^6.1.0"
      }
    },
    "node_modules/save/node_modules/async": {
      "version": "3.2.5",
      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
    },
    "node_modules/schema-utils": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -10647,6 +10768,17 @@
        "wbuf": "^1.7.3"
      }
    },
    "node_modules/split": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
      "dependencies": {
        "through": "2"
      },
      "engines": {
        "node": "*"
      }
    },
    "node_modules/sprintf-js": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -10692,6 +10824,15 @@
      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.6.0.tgz",
      "integrity": "sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg=="
    },
    "node_modules/stream-combiner": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
      "dependencies": {
        "duplexer": "~0.1.1",
        "through": "~2.3.4"
      }
    },
    "node_modules/string_decoder": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -11115,6 +11256,11 @@
        "url": "https://opencollective.com/webpack"
      }
    },
    "node_modules/through": {
      "version": "2.3.8",
      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
    },
    "node_modules/thunky": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -11478,6 +11624,21 @@
        }
      }
    },
    "node_modules/vue-chart-3": {
      "version": "3.1.8",
      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.8.tgz",
      "integrity": "sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==",
      "dependencies": {
        "@vue/runtime-core": "latest",
        "@vue/runtime-dom": "latest",
        "csstype": "latest",
        "lodash-es": "latest"
      },
      "peerDependencies": {
        "chart.js": "=> ^3.1.0",
        "vue": ">= 3"
      }
    },
    "node_modules/vue-demi": {
      "version": "0.14.6",
      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
@@ -11782,6 +11943,14 @@
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
      "dev": true
    },
    "node_modules/vue3-carousel": {
      "version": "0.3.1",
      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
      "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
      "peerDependencies": {
        "vue": "^3.2.0"
      }
    },
    "node_modules/vue3-recaptcha2": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/vue3-recaptcha2/-/vue3-recaptcha2-1.8.0.tgz",
--- a/luckydiamond/package.json
+++ b/luckydiamond/package.json
@@ -12,14 +12,18 @@
    "@popperjs/core": "^2.11.8",
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.4",
    "axios": "^1.6.7",
    "bootstrap": "^5.3.2",
    "core-js": "^3.8.3",
    "howler": "^2.2.4",
    "mitt": "^3.0.1",
    "save": "^2.9.0",
    "swiper": "^11.0.5",
    "vue": "^3.2.13",
    "vue-chart-3": "^3.1.8",
    "vue-recaptcha": "^3.0.0-alpha.6",
    "vue-router": "^4.2.5",
    "vue3-carousel": "^0.3.1",
    "vue3-recaptcha2": "^1.8.0"
  },
  "devDependencies": {
--- a/luckydiamond/public/index.html
+++ b/luckydiamond/public/index.html
@@ -17,6 +17,9 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
  <link rel="stylesheet" href="dist/css/bootstrap-grid.min.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/bootstrap-grid-css@4.1.3/dist/css/bootstrap-grid.min.css" />
  <title>LuckyDiamond</title>
 </head>
@@ -35,5 +38,5 @@
 <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/core"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/validators"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </html>
--- a/luckydiamond/src/assets/css/ComponentsStyles/Help.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/Help.css
@@ -0,0 +1,109 @@
 .box_help {
    margin-left: 36px;
    margin-top: 35px;
 }
 .Heading_p1 {
    font-size: 18px ;
    font-family: Montserrat Alternates;
    text-decoration: none;
 }
 .heding2 {
 }
 .heding2_text {
    width: 949px;
    height: 132px;
    margin-top: 17px;
    margin-bottom: 17px;
 }
 .Heading_p1 a {
    color: #5865F2 ;
    font-family: Montserrat Alternates;
    text-decoration: none;
 }
 .questions {
    font-size: 18px ;
    font-family: Montserrat Alternates;
    text-decoration: none;
 }
 .questions1  {
    font-size: 18px ;
    font-family: Montserrat Alternates;
    text-decoration: none;
    background-color:#3f3f3f;
    width: 426px;
    height: 30px;
    border-radius: 8px ;
    justify-content: center;
    align-content: center;
    display: flex;
 }
 .questions1 b {
    margin-top: 4.3px;
 }
 .questions1 img {
   margin-left: 30px;
   width: 16px;
   margin-top: 6px;
 }
 .text_questions {
    width: 840px;
    height: 132px;
    font-size: 18px ;
    font-family: Montserrat Alternates;
    text-decoration: none;
 }
 .text_questions p {
    font-size: 18px ;
    font-family: Montserrat Alternates;
    text-decoration: none;
 }
 .questions2 {
    font-size: 18px ;
    font-family: Montserrat Alternates;
    text-decoration: none;
    width: 544px;
    height: 27px;
    align-items: flex-start;
    display: flex;
 }
 .questions2 img {
 margin-left: 10px;
 width: 16px;
 margin-top: 3.5px;
 }
 .Social1text  {
    margin-top: 0.5vh;
    font-family: Montserrat Alternates;
 }
 .Social1where {
    flex-direction: row;
    width: 400px;
    display: flex;
    justify-content: space-around;
    align-content: center;
    margin-top: 3vh;
 }
@media (max-height: 879px) {
    .Social1where {
        margin-top: 0; 
    }
 }
 .questions_box {
    margin-bottom: 24px;
 }
 .text_questions {
    margin-left: 110px;
 }
 .questions1 {
    margin-bottom: 20px;
 }
 .questions2 {
    margin-top: 25px;
    margin-right:40px ;
 }
--- a/luckydiamond/src/assets/css/ComponentsStyles/asidebar.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/asidebar.css
@@ -9,6 +9,33 @@
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 12%;
 }
 .menu__content--jackpot-icon{
    margin-left: -5px;
    transition: 250ms;
    width: 125%;
    height: 125%;
 }
 .menu__content--jackpot-icon:hover {
    margin-left: -15px;
    width: 175%;
    height: 175%;
 }
 .menu__content--chest-icon {
    margin-left: -1px;
    transition: 250ms;
    width: 100%;
    height: 100%;
 }
 .menu__content--chest-icon:hover {
    margin-left: -5px;
    height: 125%;
    width: 125%;
 }
 .menu__btn--home {
@@ -19,8 +46,22 @@
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
 }
 .fotosloti {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.1vh;
 }
 .fotosloti a img {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;
    max-height: 100%;
 }
 .menu__content--gamemodes {
    background: rgba(217, 217, 217, 0.12);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
@@ -36,11 +77,29 @@
 }
 .menu__content--cruch-icon {
-    margin-left: 6px
+    margin-left: 6px;
    transition: 250ms;
    width: 100%;
    height: 100%;
 }
 .menu__content--cruch-icon:hover {
    margin-left: 0px;
    width: 125%;
    height: 125%;
 }
 .menu__content--bomb-icon {
-    margin-left: 6px
+    margin-left: 6px;
    width: 100%;
    height: 100%;
    transition: 250ms;
 }
 .menu__content--bomb-icon:hover {
    margin-left: 0px;
    width: 125%;
    height: 125%;
 }
 .menu__content--gamemodes {
@@ -58,8 +117,6 @@
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;
    max-height: 100%;
 }
 .menu__btn--settings {
--- a/luckydiamond/src/assets/css/ComponentsStyles/chat.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/chat.css
@@ -18,6 +18,7 @@
 .chat {
    margin: 1% 3.2% 0 0;
    word-break: break-all;
 }
 .chat__content {
@@ -40,7 +41,11 @@
    font-size: 18px;
    font-weight: 700;
 }
-
+.chat__mute-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
 /* .content p {
    width: 80%;
    word-wrap: break-word;
@@ -55,7 +60,8 @@
 }
 .chat__content--users {
-    height: 590px;
+    /* height: 590px; */
    height: 70vh;
    width: auto;
    overflow-y: auto;
    overflow-x: auto;
@@ -153,9 +159,9 @@
    background: #22252F;
    color: #A9A99D;
    border: none;
-    width: 600px; /* или другое значение, которое вы хотите использовать */
+    width: 600px;
    box-sizing: border-box;
-    resize: none; /* Убирает ручку изменения размера */
+    resize: none;
 }
 .write__content textarea:focus {
@@ -182,3 +188,11 @@
 .write__content button:disabled {
    cursor: not-allowed;
 }
 .system-message {
    background-color: rgb(1, 56, 74);
 }
 .mention-message {
    background-color: rgb(169, 113, 0);
 }
--- a/luckydiamond/src/assets/css/ComponentsStyles/developer.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
@@ -0,0 +1,728 @@
 .info {
    flex-direction: column;
    align-items: center;
    display: flex;
    justify-content: center;
    width: 1332px;
    height: 732px;
    margin-top: 10px;
    margin-left: 65px;
 }
 .bottom_card {
    width: 1332px;
    height: 269px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 295px;
 }
 .top_card {
    width: 1204px;
    height: 443px;
    display: flex;
    justify-content: space-between;
    margin-left: 287px;
 }
 /*beginning Hepatir_card-2 2*/
 .Hepatir_card {
    width: 250px;
    height: 443px;
    background-color: #413C3B;
    border: 3px solid #595959 ;
    border-color: #595959;
    border-radius: 22px;
 }
 .text_2 {
    width: 244px;
    height: 220px;
    display: inline-block;
    flex-flow: column-reverse;
 }
 .aboutinfo_2 {
    margin-top: 30px;
    margin-left: 19px;
 }
 .aboutinfo_2 p {
    font-family: 'Montserrat';
    color: white;
    font-size: 14px;
    width: 79px;
    height: 19px;
    margin-left: 4px;
 }
 .aboutinfo_2 h1 {
    font-family: 'Montserrat';
    color: white;
    font-size: 32px;
    width: 177px;
    height: 37px;
    line-height: 30px;
 }
 .whatjob_2 p {
    margin-left: 3px;
 }
 .whatjob2_2 p {
    margin-left: 3px;
 }
 .whatjob_2 {
    display: flex;
    width: 206px;
    height: 16px;
    margin-left: 22px;
    font-family: 'Montserrat';
    margin-top: 30px;
 }
 .whatjob_2 img {
    width: 21px;
    height: 21px;
 }
 .whatjob2_2 {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 22px;
    font-family: 'Montserrat';
    margin-top: 10px;
 }
 .whatjob2_2 img {
    width: 21px;
    height: 21px;
 }
 .skin_2 {
    width: 244px;
    height: 221.5px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .skin_2_skin {
    width: 212px;
    height: 212px;
    background-image: url(https://avatar.spworlds.ru/front/212/Hepatir.png);
    justify-content: space-around;
    display: flex;
    align-items: flex-end;
 }
 .skinicons1 {
   justify-content: space-around;
    display: flex;
 }
 /*the and Hepatir_card 1*/
 /*beginning Rafael1209_card 2*/
 .Rafael1209_card {
    width: 250px;
    height: 443px;
    background-color: #636363;
    border: 3px solid #595959 ;
    border-color: #595959;
    border-radius: 22px;
 }
 .Rafael1209_text_2 {
    width: 244px;
    height: 220px;
    display: inline-block;
    flex-flow: column-reverse;
 }
 .Rafael1209_aboutinfo_2 {
    margin-top: 30px;
    margin-left: 19px;
 }
 .Rafael1209_aboutinfo_2 p {
    font-family: 'Montserrat';
    color: white;
    font-size: 14px;
    width: 79px;
    height: 19px;
    margin-left: 4px;
 }
 .Rafael1209_aboutinfo_2 h1 {
    font-family: 'Montserrat';
    color: white;
    font-size: 32px;
    width: 177px;
    height: 37px;
    line-height: 30px;
 }
 .Rafael1209_whatjob_2 {
    display: flex;
    width: 206px;
    height: 16px;
    margin-left: 22px;
    font-family: 'Montserrat';
    margin-top: 30px;
 }
 .Rafael1209_whatjob_2 img {
    width: 21px;
    height: 21px;
 }
 .Rafael1209_whatjob_2 p {
    margin-left: 3px;
 }
 .Rafael1209_whatjob2_2 p {
    margin-left: 3px;
 }
 .Rafael1209_whatjob2_2 {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 19px;
    font-family: 'Montserrat';
    margin-top: 10px;
 }
 .Rafael1209_whatjob2_2 img {
    width: 25px;
    height: 24px;
 }
 .Rafael1209_skin_2 {
    width: 244px;
    height: 221.5px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .Rafael1209_skin_2_skin {
    width: 212px;
    height: 212px;
    background-image: url(https://avatar.spworlds.ru/front/212/rafael1209.png);
    justify-content: space-around;
    display: flex;
    align-items: flex-end;
 }
 .Rafael1209_skinicons1 {
   justify-content: space-around;
    display: flex;
 }
 /*the and Rafael1209_card 1*/
 /*beginning Ckutls_card 2*/
 .Ckutls__card {
    width: 250px;
    height: 443px;
    background-color: #B88484;
    border: 3px solid #595959 ;
    border-color: #595959;
    border-radius: 22px;
 }
 .Ckutls__text_2 {
    width: 244px;
    height: 219.7px;
    display: inline-block;
    flex-flow: column-reverse;
 }
 .Ckutls__aboutinfo_2 {
    margin-top: 30px;
    margin-left: 19px;
 }
 .Ckutls__aboutinfo_2 p {
    font-family: 'Montserrat';
    color: white;
    font-size: 14px;
    width: 79px;
    height: 19px;
    margin-left: 4px;
 }
 .Ckutls__aboutinfo_2 h1 {
    font-family: 'Montserrat';
    color: white;
    font-size: 32px;
    width: 177px;
    height: 37px;
    line-height: 30px;
 }
 .Ckutls__whatjob_1 {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 19px;
    font-family: 'Montserrat';
    margin-top: 30px;
 }
 .Ckutls__whatjob_1 img {
    width: 15px;
    height: 17px;
 }
 .Ckutls__whatjob_1 p {
    margin-left: 3px;
 }
 .Ckutls__whatjob_2 {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 19px;
    font-family: 'Montserrat';
    margin-top: 10px;
 }
 .Ckutls__whatjob_2 img {
    width: 15px;
    height: 17px;
 }
 .Ckutls__whatjob_2 p {
    margin-left: 3px;
 }
 .Ckutls__whatjob_3 {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 19px;
    font-family: 'Montserrat';
    margin-top: 9px;
 }
 .Ckutls__whatjob_3 img {
    width: 17px;
    height: 15px;
 }
 .Ckutls__whatjob_3 p {
    margin-left: 3px;
 }
 .Ckutls__skin_2 {
    width: 244px;
    height: 221px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
 }
 .Ckutls__skin_2_skin {
    width: 212px;
    height: 212px;
    background-image: url(https://avatar.spworlds.ru/front/212/Ckutls_.png);
    justify-content: space-around;
    display: flex;
    align-items: flex-end;
 }
 .Ckutls__skinicons1 {
   justify-content: space-around;
    display: flex;
 }
 /*the and Ckutls_card 1*/
 /*beginning FUpir_card 2*/
 .FUpir_card {
    width: 250px;
    height: 443px;
    background-color: #C58E74;
    border: 3px solid #595959 ;
    border-color: #595959;
    border-radius: 22px;
 }
 .FUpir_text_2 {
    width: 244px;
    height: 221.5px;
    display: inline-block;
    flex-flow: column-reverse;
 }
 .FUpir_aboutinfo_2 {
    margin-top: 30px;
    margin-left: 19px;
 }
 .FUpir_aboutinfo_2 p {
    font-family: 'Montserrat';
    color: white;
    font-size: 14px;
    width: 79px;
    height: 19px;
    margin-left: 4px;
 }
 .FUpir_aboutinfo_2 h1 {
    font-family: 'Montserrat';
    color: white;
    font-size: 32px;
    width: 177px;
    height: 37px;
    line-height: 30px;
 }
 .FUpir_whatjob_1 {
    display: flex;
    width: 206px;
    height: 24px;
    margin-left: 19px;
    font-family: 'Montserrat';
    margin-top: 24px;
 }
 .FUpir_whatjob_1 img {
    width: 25px;
    height: 24px;
 }
 .FUpir_whatjob_1 p {
    margin-left: 3px;
    margin-top: 4px;
 }
 .FUpir_skin_2 {
    width: 244px;
    height: 221.5px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .FUpir_skin_2_skin {
    width: 212px;
    height: 212px;
    background-image: url(https://avatar.spworlds.ru/front/212/FUpir.png);
    justify-content: space-around;
    display: flex;
    align-items: flex-end;
    margin-bottom: 3px;
 }
 .FUpir_skinicons1 {
   justify-content: space-around;
    display: flex;
 }
 /*the and FUpir_card 1*/
 /*beginning busha888_card 1*/
 .busha888_card {
    width: 422px;
    height: 269px;
    flex-shrink: 0;
    border-radius: 22px;
    border: 3px solid #595959 ;
    border-color: #595959;
    background-color: #742271;
    display: flex;
    flex-direction: row;
 }
 .text {
    width: 211px;
    height: 269px;
 }
 .aboutinfo {
    margin-top: 30px;
    margin-left: 15px;
 }
 .aboutinfo p {
    font-family: 'Montserrat';
    color: white;
    font-size: 14px;
    width: 97px;
    height: 16px;
 }
 .aboutinfo h1 {
    font-family: 'Montserrat';
    color: white;
    font-size: 32px;
 }
 .whatjob {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 15px;
    font-family: 'Montserrat';
    margin-top: 30px;
 }
 .whatjob p {
    margin-left: 3px;
 }
 .whatjob img {
    width: 15px;
    height: 17px;
 }
 .icons {
    width: 162px;
    height: 36px; 
    justify-content: space-around;
    display: flex;
    margin-top: 95px;
    margin-left: 27px;
    margin-bottom: 11px;
 }
 .icons img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
 }
 .skin {
    margin-right: 13px;
    margin-top: 51px;
    margin-bottom: 3px;
 }
 .skin img {
    width: 212px;
    height: 212px;
 }
 /*the and busha888_card 1*/
 /*beginning megatntmega_card 1*/
 .megatntmega_card {
    width: 422px;
    height: 269px;
    border-radius: 22px;
    border: 3px solid #595959 ;
    border-color: #595959;
    background-color: #393A3A;
    display: flex;
 }
 .megatntmega_text {
    width: 211px;
    height: 269px;
 }
 .megatntmega_aboutinfo {
    margin-top: 30px;
    margin-left: 15px;
 }
 .megatntmega_aboutinfo p {
    font-family: 'Montserrat';
    color: white;
    font-size: 14px;
    height: 16px;
 }
 .megatntmega_aboutinfo h1 {
    font-family: 'Montserrat';
    color: white;
    font-size: 32px;
 }
 .megatntmega_whatjob {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 15px;
    font-family: 'Montserrat';
    margin-top: 30px;
 }
 .megatntmega_whatjob p {
    margin-left: 3px;
    margin-top: 3px;
 }
 .megatntmega_whatjob img {
    width: 25px;
    height: 24px;
 }
 .megatntmega_icons {
    width: 79px;
    height: 36px; 
    justify-content: space-around;
    display: flex;
    margin-top: 95px;
    margin-left: 72px;
    margin-bottom: 11px;
 }
 .megatntmega_icons img {
    width: 36px;
    height: 36px;
 }
 .megatntmega_skin {
    margin-top: 51px;
    margin-bottom: 3px;
    display: flex;
    width: 212px;
    height: 212px;
    background-image: url(https://avatar.spworlds.ru/front/212/megatntmega.png);
 }
 .megatntmega_skin img {
    width: 212px;
    height: 212px;
 }
 /*the and megatntmega_card 1*/
 /*beginning CLARFFY_card 1*/
 .CLARFFY_card {
    width: 422px;
    height: 269px;
    flex-direction: row;
    border-radius: 22px;
    border: 3px solid #595959 ;
    border-color: #595959;
    background-color: #E2B374;
    display: flex;
 }
 .CLARFFY_text {
    width: 211px;
    height: 269px;
 }
 .CLARFFY_aboutinfo {
    margin-top: 30px;
    margin-left: 15px;
 }
 .CLARFFY_aboutinfo p {
    font-family: 'Montserrat';
    color: white;
    font-size: 14px;
    width: 97px;
    height: 16px;
 }
 .CLARFFY_aboutinfo h1 {
    font-family: 'Montserrat';
    color: white;
    font-size: 32px;
 }
 .CLARFFY_whatjob {
    display: flex;
    width: 183px;
    height: 16px;
    margin-left: 15px;
    font-family: 'Montserrat';
    margin-top: 30px;
 }
 .CLARFFY_whatjob p {
    margin-left: 3px;
    margin-top: 3px;
 }
 .CLARFFY_whatjob img {
    width: 25px;
    height: 24px;
 }
 .CLARFFY_icons {
    width: 79px;
    height: 36px; 
    justify-content: space-around;
    display: flex;
    margin-top: 95px;
    margin-left: 72px;
    margin-bottom: 11px;
 }
 .CLARFFY_icons img {
    width: 36px;
    height: 36px;
 }
 .CLARFFY_skin {
    margin-right: 13px;
    margin-top: 51px;
    margin-bottom: 3px;
    display: flex;
    width: 212px;
    height: 212px;
 }
 .CLARFFY_skin img {
    width: 212px;
    height: 212px;
 }
 /*the and CLARFFY_card 1*/
@media only screen and (min-width: 2048px) { 
    .info {
        flex-direction: column;
        align-items: center;
        display: flex;
        justify-content: center;
        width: 1332px;
        height: 732px;
        margin-top: 80px;
        margin-left: 142px;
    }
 }
@media (max-width: 1700px) {
    .info {
        flex-direction: column;
        align-items: center;
        display: flex;
        justify-content: center;
        width: 1332px;
        height: 732px;
        margin-top: 10px;
        margin-left: 1px;
        /* overflow-y: auto; */
    }
    .bottom_card {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 865px;
        margin-right: 470px;
        }
        .megatntmega_card {
        margin: 0 auto;
        }
        .busha888_card {
        margin: 0 auto;
        }
        .CLARFFY_card {
        margin: 0 auto;
        margin-top: 15px;
        }
    .top_card {
        width: 1200px;
        height: 443px;
        display: flex;
        justify-content: center;
        margin-right: 450px;
    }
    .Hepatir_card {
        margin-left: 10px;
        margin-right: 10px;
    }
    .FUpir_card {
        margin-left: 10px;
        margin-right: 10px;
    }
    }
--- a/luckydiamond/src/assets/css/ComponentsStyles/header.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/header.css
@@ -24,6 +24,11 @@
    font-weight: 700;
    font-size: 18px;
    margin-right: 3em;
    transition: 250ms;
 }
 .header__nav nav a:hover {
    color: #EF4444;
 }
 .header__nav--now {
@@ -84,6 +89,7 @@
    padding: 20px 23px 20px 23px;
    text-decoration: none;
    margin-left: -15%;
    transition: 200ms;
 }
 .header__auth--discord {
--- a/luckydiamond/src/assets/css/ComponentsStyles/notification.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/notification.css
@@ -2,10 +2,12 @@
    position: absolute;
    top: 0%;
    left: 34%;
-    background: #000;
+    background: #232630;
    width: 20%;
    height: 5%;
    z-index: 1000;
    border-radius: 10px;
    font-family: Montserrat Alternates;
 }
 .notification__content  {
--- a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
@@ -1,13 +1,3 @@
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
 }
 input:focus {
    outline: none;
 }
 .payment-modal {
    position: absolute;
    top: 20%;
@@ -77,7 +67,41 @@ input:focus {
    font-size: 12px;
    padding-left: 40px;
 }
-
+.promo-input {
    width: 284px;
    height: 44px;
    border-radius: 15px;
    border: 2px solid #2B3458;
    background: #22252F;
    color: rgba(148, 148, 148, 0.95);
    font-weight: 700;
    font-family: Montserrat Alternates;
    font-size: 12px;
    padding-left: 40px;
    flex: 3.5;
    font-weight: 700px;
 }
 .vvod_promocoda {
    flex: 1;
    width: 52px;
    height: 44px;
    background-color: #EF4444;
    margin-left: 10px;
    margin-right: 16px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 10px;
    font-family: Montserrat Alternates;
    font-weight: 600;
    font-size: 19px;
    color: #fff;
    border: none;
 }
 .promokods {
    display: flex;
    flex-wrap: nowrap;
 }
 .display-btns {
    display: flex;
    margin-top: 10px;
@@ -95,6 +119,7 @@ input:focus {
    border: none;
    margin-right: 6px;
    padding: 4px 19px;
 }
 .deposit-promocode {
@@ -170,7 +195,7 @@ input[type="checkbox"]:checked::before {
 .btn-style-payments button {
    border-radius: 10px;
    background: #EF4444;
-    ont-family: Montserrat Alternates;
+    Font-family: Montserrat Alternates;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
--- a/luckydiamond/src/assets/css/PagesStyles/BanPage.css
+++ b/luckydiamond/src/assets/css/PagesStyles/BanPage.css
@@ -0,0 +1,29 @@
 .banpage--body {
    background-color: rgb(17, 14, 32);
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    padding: 0px;
    margin: 0;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-size:25px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
 }
 .banpage--video {
    border-radius: 10px;
 }
 .banpage--block {
    width: 50%;
    height: 100%;
    display: block;
    background-color: #ef4444;
    margin: auto;
    margin-top: 100px;
    padding-top: 50px;
    padding-bottom: 100px;
    border-radius: 10px;
    box-shadow: 12px 12px 2px 1px rgba(92, 12, 12, 0.2);
 }
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/crash.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/crash.css
@@ -0,0 +1,442 @@
 .crash-content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0.625rem; /* 10px в рем */
    grid-auto-flow: row;
    grid-template-areas:
    "crashgame crashgame crashgame crashgame crashgame crashgame"
    "crashgame crashgame crashgame crashgame crashgame crashgame"
    "crashgame crashgame crashgame crashgame crashgame crashgame"
    "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers"
    "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers";
    background: #17181C;
    box-shadow: 0 0.25rem #00000040;
    border-radius: 1.25rem;
 .grid-crash .chat {
    height: 96.8%;
 }
 .crash-game {
    background: #22252F;
    border-radius: 1.25rem;
    box-shadow: 0.25rem 0.25rem 0.25rem 0px #00000040;
    width: 95%;
    height: 29.6875rem;
    margin: 2.5625rem auto 0 auto;
 }
 .crash-game__content {
    display: flex;
 }
 /* Crash-Window */
 .crash-game__start-window {
    margin-left: 30px;
    height: 0;
 }
 .crash-game__start-window .crash__game-name {
    margin: 62px 0 2px 0;
    font-family: 'Montserrat Alternates';
    font-weight: 700;
    font-size: 26px;
    color: #fff;
    box-shadow: 1px 1px 1px 0px #00000001;
 }
 .crash-game__start-window p {
    font-family: 'Montserrat Alternates';
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF85;
 }
 .crash-game-window__inputs {
    margin-top: 29px;
 }
 .crash-label {
    font-family: 'Montserrat Alternates';
    font-weight: 700;
    font-size: 13px;
    color: #44C6EF54;
    margin: 0 0 4px 4px;
 }
 .input-style-crash {
    width: 347px;
    height: 40px;
    border: 2px solid #2B3458;
    border-radius: 15px;
    background: #22252F;
 }
 .diamond-input-crash {
    margin-left: -25px;
 }
 .input-style-crash__text {
    font-family: 'Montserrat Alternates';
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    padding-left: 35px;
 }
 .crash-input-deposit .diamonds-btns__display {
    margin: 8px 0 19px -22px;
 }
 .crash-input-deposit #max-button {
    padding: 4px 10px;
 }
 .crash-input-deposit .diamond-icon {
    left: 12px;
 }
 .crash-game-window__btn-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 23px;
 }
 .crash-game-window__btn-start button {
    margin-bottom: 5px;
    background: #EF4444;
    border: unset;
    border-radius: 10px;
    width: 300px;
    height: 60px;
    font-family: 'Inter';
    font-weight: 700;
    font-size: 18px;
 }
 .claim-btn-crash__prize {
    background: #4E5EF2 !important;
 }
 .waiting-btn-crash {
    background: #3D3F48 !important;
 }
 .crash-window__line {
    display: flex;
    flex-direction: row-reverse;
 }
 .line-crash {
    width: 2px;
    height: 474px;
    background: #30364F;
    position: relative;
    top: -342px;
    left: 10%;
    z-index: 1;
 }
 .crash-game__content .error-block {
    top: 425px;
 }
 /* /Crash-Window */
 /* Crash-Graph */
 .crash-game__graph {
    width: 800px;
    top: 200px;
    left: 600px;
    position: fixed;
 }
 .chart-container canvas {
    background-color: transparent !important;
    width: 800px !important;
    height: 400px !important;
    transition: .3s ease;
 }
 .lost-ratio {
    color: #EF4444;
    font-weight: 700;
 }
 /* /Crash-Graph */
 /* Crash-Players */
 .user-crash {
    display: flex;
    justify-content: end;
    margin-left: 400px;
 }
 .user-list {
    overflow-y: auto;
    height: 300px;
 }
 .user-crash-content {
    background: linear-gradient(90deg, rgba(34, 37, 47, 0.8) -0.54%, rgba(34, 37, 47, 0.8) 83.03%, rgba(73, 59, 74, 0.64) 103.54%);
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(5, 50px) 100px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "username username bid bid ... status";
    margin: 10px auto;
    width: 90%;
    height: 70px;
    border-radius: 18px;
 }
 .user-crash-content__lose {
    background: linear-gradient(90deg, #22252F -0.54%, #322733 83.25%, #B53938 103.54%) !important;
 }
 .user-crash-content__win {
    background: linear-gradient(90deg, #22252F -0.54%, #22252F 84.17%, rgba(42, 110, 57, 0.87) 103.54%);
 }
 .user-name-crash {
    display: flex;
    align-items: center;
    margin: 10px;
    grid: 'username';
 }
 .user-name-crash h2 {
    margin-left: 8px;
    color: #61647F;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 20px;
 }
 .user-name-crash img {
    width: 50px;
 }
 .user-bid-crash {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: bid;
 }
 .user-bid-crash h2 {
    color: #848484;
    font-weight: 700;
    font-family: 'Montserrat';
    font-size: 24px;
 }
 .user-bid-crash img {
    margin: 5px 0 0 5px;
 }
 .user-game-status-crash {
    display: flex;
    align-items: center;
    grid-area: status;
 }
 .user-game-status-crash h2 {
    font-size: 20px;
 }
 .wingame__win-bid-crash {
    color: #28BD49 !important;
 }
 .ingame-crash {
    color: #61647F;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 12px;
    background: #22252F;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 5px;
    width: 70px;
    height: 24px;
 }
 .lostgame-crash {
    color: #fff;
    font-weight: 700;
    font-family: 'Montserrat';
    background: #EF4847;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 5px;
    margin-left: -26px;
    padding: 4px;
 }
 .wingame-crash {
    box-shadow: 0px 4px 4px 0px #00000040;
    font-family: 'Montserrat';
    font-weight: 700;
    color: #28BD49;
    border: 1px solid #28BD49;
    border-radius: 5px;
    padding: 6px;
 }
 .ratio {
    position: relative;
    left: 50%;
    top: -390px;
    font-size: 34px;
    font-weight: 700;
    font-family: 'Montserrat';
 }
 .time {
    position: relative;
    left: 50%;
    font-size: 34px;
    font-weight: 700;
    font-family: 'Montserrat';
 }
 /* /Crash-Players */
 /* Notification */
 .notification-crash {
    text-align: center;
    top: 20%;
    left: 50%;
    position: absolute;
    background: #000;
    width: 200px;
    height: 40px;
 }
 /* /Notification */
 /* Media */
@media screen and (max-width: 1740px) and (min-width: 1400px) {
    .crash-game__content .error-block{
        top: 407px !important;
    }
    .crash-game__graph {
        width: 500px;
        height: 500px;
        top: 190px;
        left: 570px;
    }
    .crash-input-deposit .btn-style__diamonds button {
        padding: 4px 18px !important;
    }
    .chart-container {
        width: 500px !important;
        height: 500px !important;
    }
 }
@media screen and (max-width: 1400px) and (min-width: 1200px) {
    .header__nav nav a {
        font-size: 16px;
    }
    .crash-game__content .error-block{
        top: 405px !important;
    }
    .crash-game__graph {
        width: 400px;
        height: 400px;
        top: 180px;
        left: 550px;
    }
    .chart-container {
        width: 400px !important;
        height: 400px !important;
    }
    .crash-input-deposit .btn-style__diamonds button {
        padding: 4px 18px !important;
    }
 }
@media screen and (max-height: 950px) and (min-height: 915px) {
    .grid-crash .chat {
        height: 92.5%;
    }
    .crash-game__players {
        height: 270px;
    }
    .crash-game-players__content {
        height: 230px;
    }
    .ratio {
        top: -380px;
    }
    .time {
        left: 45%;
    }
 }
@media screen and (max-height: 915px) and (min-height: 890px) {
    .grid-crash .chat {
        height: 100%;
    }
    .chat__content--users {
        height: 58vh;
    }
    .crash-game {
        height: 40vh;
    }
    .crash-game__players {
        height: 290px;
    }
    .crash-game-players__content {
        height: 250px;
    }
    .crash-game__graph {
        height: 100px !important;
        top: 200px;
    }
    #line-chart {
        height: 300px !important;
    }
    .ratio {
        top: -320px;
    }
    .time {
        left: 40%;
    }
    .line-crash {
        height: 366px;
    }
 }}
@media screen and (min-height: 950px) {
  .chat {
    height: 88vh !important;
  }
 }
 /*.crash-game__graph {*/
 /*    width: 800px;*/
 /*    top: 200px;*/
 /*    left: 600px;*/
 /*    position: fixed;*/
 /*}*/
 /*.chart-container canvas {*/
 /*    background-color: transparent !important;*/
 /*    width: 800px !important;*/
 /*    height: 400px !important;*/
 /*    transition: .3s ease;*/
 /*}*/
 /* /Media */
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
@@ -0,0 +1,386 @@
 .jackpot-start {
    z-index: 1;
    /* margin-left: 5%; */
    border-radius: 20px;
    background: #1D223E;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 42vh;
    /* height: 480px; */
    height: 32vh;
    border: 1px solid #262C55;
    /* margin-top: 2.6%; */
    margin: 2.6%;
 }
 .jackpot-loading-bar {
    z-index: 1;
    /* margin-left: 5%; */
    border-radius: 20px;
    background: #1D223E;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    /* height: 480px; */
    /* height: 100%; */
    border: 1px solid #262C55;
    height: 100%;
    /* margin-top: 2.6%; */
    /* margin: 2.6%; */
 }
 .jackpot-carousel {
    z-index: 1;
    position: relative;
    /* margin-left: 5%; */
    border-radius: 10px;
    background: #1D223E;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    margin-top: 1%;
    /* height: 480px; */
    /* height: 100%; */
    border: 1px solid #262C55;
    height: 95%;
 }
 .carousel-arrow {
    position: absolute;
    bottom: -20px;
    /* Регулируйте положение стрелки относительно нижнего края карусели */
    left: 50%;
    /* Центрирование стрелки по горизонтали */
    transform: translateX(-50%);
    /* Дополнительное центрирование, чтобы точка указывала точно на центр */
    color: #728DF8;
    /* Цвет стрелки */
    font-size: 24px;
    /* Размер стрелки */
    /* Добавьте любые дополнительные стили, такие как цвет фона, границы и т.д. */
 }
 .jackpot-useringame-list{
    margin-top: 3.5%;
    overflow-y: auto;
    height: 62vh
 }
 .jackpot-carousel-user {
    z-index: 1;
    position: relative;
    /* margin-left: 5%; */
    border-radius: 10px;
    background: #1F2543;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    margin-bottom: 1%;
    /* height: 480px; */
    /* height: 100%; */
    border: 1px solid #262C55;
 }
 .jackpot-game {
    z-index: 1;
    /* margin-left: 5%; */
    border-radius: 20px;
    /* background: #1D223E; */
    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
    width: 69%;
    /* height: 480px; */
    height: 94%;
    /* border: 1px solid #262C55; */
    margin-top: 2.6%;
 }
 .jackpot-main-elements {
    z-index: 1;
 }
 .jackpot-start__content p {
    color: #FFFFFF84;
    font-weight: 700;
    line-height: 31px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-size: 13px;
 }
 .padding-elements-jackpot {
    padding-left: 1vh;
    padding-right: 1vh;
 }
 .jackpot-start__btns {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
 }
 .jackpot-start__btns button {
    width: 100%;
    padding: 12px;
    margin-bottom: 5px;
    border: none;
    color: #FFF;
    font-weight: 700;
    line-height: 19px;
    font-style: normal;
    font-family: Inter;
    font-size: 16px;
 }
 .bank-container {
    display: flex;
    align-items: center;
    /* background-color: #000066; */
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    /* Choose your font */
 }
 .shield img {
    width: 35px;
    /* Adjust based on your shield size */
    height: auto;
    margin-left: 10px;
    margin-bottom: -10px;
 }
 .bank-info {
    display: flex;
    flex-direction: column;
    text-align: left;
 }
 .jackpot-last-game-bar-container {
    /* margin-bottom: 3%; */
    padding-top: 10px;
 }
 .jackpot-last-game-bar-container img {
    /* margin-bottom: 3%; */
    width: 3vh;
    height: 3vh;
 }
 .jackpot-last-game-bar-container-text {
    padding: 0px 0 5px 0;
    color: #FFF;
    font-weight: 200;
    line-height: 15px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
    font-family: Montserrat Alternates;
    font-size: 8px;
 }
 .jackpot-last-game-bar {
    z-index: 1;
    /* margin-left: 5%; */
    border-radius: 20px;
    background: #1D223E;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    /* height: 480px; */
    /* height: 100%; */
    border: 1px solid #262C55;
    height: 100%;
    /* margin-top: 2.6%; */
    /* margin: 2.6%; */
 }
 .bank-value {
    font-size: 24px;
    /* Large text size */
    font-weight: bold;
    margin-left: 1%;
    font-family: Montserrat;
    font-weight: bold;
    color: #FFFFFF84;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* Make the number bold */
 }
 .bank-name {
    font-size: 24px;
    font-family: Montserrat;
    font-weight: bold;
    /* Smaller text size for 'БАНК' */
 }
 .progress-text {
    transition: opacity 0.5s ease;
    opacity: 1;
 }
 .progress-bar {
    width: 95%;
    background-color: #D9D9D9;
    /* Navy blue background */
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-left: 2vh;
    margin-bottom: 3%;
 }
 .progress {
    height: 40px;
    background-color: #E13F3F;
    /* Red for the progress */
    border-radius: 10px;
    /* Rounded corners on the left side */
    line-height: 40px;
    /* Same as height to vertically center text */
    color: white;
    text-align: start;
    text-indent: 20px;
    padding-right: 10px;
    /* Add some padding to the right of the text */
    transition: width 0.25s ease-in-out;
 }
 .no-pointer-events {
    pointer-events: none;
 }
 .jackpot-player-info {
    display: flex;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    color: white;
    font-family: Arial, sans-serif;
 }
 .jackpot-player-avatar img {
    width: 48px;
    /* Adjust size as needed */
    height: 48px;
    margin-right: 10px;
    margin-left: 1vh;
 }
 .jackpot-player-data {
    display: flex;
    flex-direction: column;
 }
 .jackpot-player-name {
    font-size: 16px;
    /* Adjust font size as needed */
    font-weight: bold;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat;
    font-weight: bold;
    color: #515D83;
 }
 .jackpot-player-gems {
    font-size: 15px;
    /* Adjust font size as needed */
    display: flex;
    align-items: start;
    color: #FFFFFF84;
    /* font-weight: 700; */
    /* line-height: 31px; */
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-weight: bold;
    /* font-size: 13px; */
 }
 .jackpot-gems-icon {
    margin-left: 5px;
    height: 1vh;
 }
 .jackpot-gems-icon-extension{
    margin-bottom: -10px !important;
 }
 .jackpot-player-chance {
    background-color: #27345C;
    /* Adjust background color as needed */
    border-radius: 5px;
    font-size: 14px;
    /* Adjust font size as needed */
    padding-left: 5px !important;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 5px;
    margin-left: 10%;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat;
    font-weight: bold;
 }
 .jackpot-chance-value {
    color: #EF4444; /* Или любой другой оттенок красного, который вам нужен */
  }
  .jackpot-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1e2749; /* Dark blue background */
    padding: 5px;
    border-radius: 5px;
    color: white;
    font-family: Montserrat;
    font-weight: bold;
  }
  .jackpot-content {
    display: flex;
    align-items: center;
  }
  .jackpot-avatar {
    width: 48px; /* Adjust based on your preference */
    height: 48px;
    margin-right: 10px;
  }
  .jackpot-info {
    display: flex;
    flex-direction: column;
  }
  .jackpot-name {
    font-size: 16px;
    font-weight: bold;
    color: #515D83;
  }
  .jackpot-gems {
    font-size: 14px;
    color: #FFFFFF84;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-weight: bold;
  }
  .jackpot-chance {
    font-size: 16px;
    background-color: transparent; /* Adjust if you want a different background */
  }
  .jackpot-percentage {
    color: #EF4444; /* Adjust if you want a different color */
  }
@media (max-width: 1415px) {
    .padding-elements-jackpot {
        padding-left: 0;
        padding-right: 0;
    }
 }
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -1,21 +1,3 @@
 #chat {
    height: 95.65%;
 }
 button {
    cursor: pointer;
 }
 button:focus {
    outline: none;
 }
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
 }
 .saper {
    display: flex;
    padding-top: 10%;
@@ -56,7 +38,7 @@ input[type="number"]::-webkit-outer-spin-button {
    background: #22252F;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 27%;
-    height: 74%;
+    height: 480px;
    margin-top: 2.6%;
 }
@@ -144,7 +126,7 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 .crystal-icon,
-.diamond-icon  {
+.diamond-icon {
    position: relative;
    left: 25px;
    top: 2px;
@@ -154,9 +136,22 @@ input[type="number"]::-webkit-outer-spin-button {
    display: flex;
 }
 #diamonds-input-saper {
    width: 37vh;
    height: 4vh;
 }
@media (max-width: 1630px) {
    #diamonds-input-saper {
        width: 30vh !important;
    }
 }
 #diamonds-input {
-    width: 347px;
+    /* width: 347px;
-    height: 38px;
+    height: 38px; */
    width: 37vh;
    height: 4vh;
 }
 .diamonds h3 {
@@ -194,7 +189,7 @@ input[type="number"]::-webkit-outer-spin-button {
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
-    padding: 4px 15px;
+    padding: 4px 13px;
 }
 .saper-start__btns {
@@ -257,7 +252,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .error-block {
    position: absolute;
-    top: 440px;
+    top: 445px;
 }
 .error-block h2 {
@@ -278,8 +273,9 @@ input[type="number"]::-webkit-outer-spin-button {
    position: absolute;
    top: 15%;
    left: 45%;
-    background: #000;
+    background: #262C48;
    padding: 20px;
    border-radius: 10px;
 }
 .saper-game {
@@ -292,7 +288,7 @@ input[type="number"]::-webkit-outer-spin-button {
    background: #22252F;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 85%;
-    height: 90%;
+    height: 580px;
 }
 .square {
@@ -342,6 +338,7 @@ input[type="number"]::-webkit-outer-spin-button {
    width: 110px;
    height: 110px;
    top: -70px;
    user-select: none;
 }
 .crystal-img {
@@ -352,7 +349,8 @@ input[type="number"]::-webkit-outer-spin-button {
    pointer-events: unset !important;
 }
-.game-start__menu-off .crystals, .game-start__menu-off .diamonds,
+.game-start__menu-off .crystals,
 .game-start__menu-off .diamonds,
 .game-start__menu-off .saper-start__btns .btn-start {
    pointer-events: none;
 }
@@ -381,13 +379,46 @@ input[type="number"]::-webkit-outer-spin-button {
    margin: 13.5% 0 0 10.5%;
 }
 .info-crystals__count {
    position: relative;
 }
 .card-style-count {
    width: 40%;
    text-align: center;
    font-family: "Montserrat Alternates";
    font-size: 18px;
    font-weight: 700;
    padding: 1% 1%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    opacity: 0;
 }
 .on-element-card {
    opacity: 1 !important;
    transition: opacity .4s ease;
 }
 .emeralds-bg {
    background: #6BC884;
    top: -22%;
    left: 12%;
 }
 .crystals-bg {
    background: #EF4444;
    top: -20%;
    left: 12%;
 }
 .card-info {
    border-radius: 15px;
    border: 1px solid #2B4D6C;
    background: linear-gradient(180deg, #252C47 0%, #252C47 8.33%, rgba(37, 44, 71, 0.00) 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 85%;
-    height: 100%;
+    height: 250px;
 }
 .text-style__subtitle h2 {
@@ -420,7 +451,7 @@ input[type="number"]::-webkit-outer-spin-button {
    display: flex;
    justify-content: center;
    position: relative;
-    left: 7px;
+    left: 17px;
 }
 .circles {
@@ -451,54 +482,83 @@ input[type="number"]::-webkit-outer-spin-button {
    .saper-game__content {
        width: auto;
    }
    .error-block {
        top: 425px;
    }
    .saper-start {
        width: 30%;
-        height: 80%;
+        height: 500px;
    }
    .btns-style__steps button {
        width: 60px;
        height: 50px;
    }
    .swiper-slide {
        margin-right: 29px !important;
    }
    .steps-btns__display {
        justify-content: center;
    }
    .margin-lines .firstline {
        margin-top: 2%;
    }
    .info-emeralds {
        margin-top: 6.5%;
    }
    .info-crystals {
        margin-top: 6.5%;
    }
-    .crystals-btns__choices button, .btn-style__diamonds button {
+
    .crystals-btns__choices button,
    .btn-style__diamonds button {
        padding: 4px 13px;
    }
    .diamond-icon {
        top: 12px;
        left: 35px;
    }
    #diamonds-input {
        width: 60%;
    }
    .btns-style__steps button {
        padding: 6px 9px;
    }
    .emeralds-bg {
        top: -23%;
    }
    .crystals-bg {
        top: -21%;
    }
    .card-info img {
        width: 100%;
    }
    .circles-1 {
        top: 110px;
    }
    .circles-2 {
        top: 220px;
    }
    .circles-3 {
        top: 330px;
    }
    .circles-4 {
        top: 440px;
    }
@@ -508,63 +568,95 @@ input[type="number"]::-webkit-outer-spin-button {
    .bg-two {
        left: 300px;
    }
    .error-block {
        top: 410px;
    }
    .saper-game__content {
        width: auto;
    }
    .saper-start {
        width: 30%;
-        height: 75%;
+        height: 510px;
    }
    .steps-btns__display {
        justify-content: center;
    }
    .btns-style__steps button {
        width: 60px;
        height: 50px;
    }
    .swiper-slide {
        margin-right: 30px !important;
    }
    .margin-lines .firstline {
        margin-top: 2%;
    }
    .square {
        width: 75px;
    }
    .img-style-click {
        left: -15px;
    }
    .info-emeralds {
        margin-top: 6.5%;
    }
    .info-crystals {
        margin-top: 6.5%;
    }
    .text-style__subtitle h2 {
        font-size: 11px;
    }
    .text-style__comment p {
        font-size: 11px;
    }
-    .crystals-btns__choices button, .btn-style__diamonds button {
+
    .crystals-btns__choices button,
    .btn-style__diamonds button {
        padding: 4px 7px;
    }
    .diamonds-btns__display {
        margin-left: 3%;
    }
    .diamond-icon {
        top: 12px;
        left: 35px;
    }
    #diamonds-input {
        width: 60%;
    }
    .btns-style__steps button {
        padding: 6px 4px;
    }
    .emeralds-bg {
        top: -24%;
    }
    .crystals-bg {
        top: -22%;
    }
    .card-info img {
        width: 100%;
    }
    .circles__content {
        display: none;
    }
@@ -595,7 +687,8 @@ input[type="number"]::-webkit-outer-spin-button {
    object-fit: cover;
 }
-.swiper-button-prev:after, .swiper-button-next:after {
+.swiper-button-prev:after,
 .swiper-button-next:after {
    font-size: 30px;
    color: rgb(210 31 31 / 62%);
 }
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -95,6 +95,12 @@
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 .bg-early{
    border-radius: 40px;
    background: #969B9E;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 .gamemode__main {
    width: 32%;
    height: 100%;
@@ -117,17 +123,28 @@
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
-    font-size: 91px;
+    font-size:91px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
 }
 .title-jackpot {
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-size:80px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 0px 0px 0px 28px;
 }
 .line__footer {
    display: flex;
    justify-content: center;
    align-items: center;
-    padding-top: 4.7%;
+    padding-top: 5.5%;
 }
 .line__content .line__btn--main .line__btn {
@@ -137,7 +154,6 @@
 }
 .line__footer img {
    width: 60%;
    margin-bottom: 5%;
 }
@@ -157,10 +173,39 @@
    margin:  1% 6.6% 1% 4.7%;
 }
 .line__img__jackpot {
    display: flex;
    margin:  1% 6.6% 1% 0%;
 }
 .display-firstline {
    display: flex;
 }
 .cumming_soon_btn {
    border-radius: 21px;
    background: #FFF;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #000;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-size: 36px;
    font-weight: 700;
    padding: 11px 0px 11px 11px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    bottom: 5%;
    left: 2%;
    transition: 250ms;
    cursor: default;
 }
 .cumming_soon_btn:hover {
    background-color: #525252;
    opacity: 0.75;
 }
 .line__btn {
    border-radius: 21px;
    background: #FFF;
@@ -170,17 +215,128 @@
    font-family: Montserrat Alternates;
    font-size: 36px;
    font-weight: 700;
-    padding: 11px 11px;
+    padding: 11px 0px 11px 11px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    bottom: 5%;
    left: 2%;
    transition: 250ms;
 }
 .line__btn span:after {
    content: '\00bb';
    opacity: 0;
    transition: 250ms;
    right: 20;
  }
 .line__btn:hover span:after {
    opacity: 1;
    right: 0;
    padding-right: 0px;
  }
 .line__btn:hover {
    padding:11px 11px 11px 22px ;
  }
 .line__btn:active {
    left: 5%;
  }
 .line__btn--crash {
    border-radius: 21px;
    background: #FFF;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #000;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-size: 36px;
    font-weight: 700;
    padding: 11px 0px 11px 11px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    bottom: 5%;
    left: 2%;
    transition: 250ms;   
 }
 .line__btn--crash span:after {
    content: '\00bb';
    opacity: 0;
    transition: 250ms;
    right: 20;
  }
 .line__btn--crash:hover span:after {
    opacity: 1;
    right: 0;
    padding-right: 0px;
  }
 .line__btn--crash:hover {
    padding:11px 11px 11px 22px ;
  }
 .line__btn--crash:active {
    left: 5%;
  }
 .line__btn__jackpot {
    border-radius: 21px;
    background: #FFF;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #000;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
    font-size: 36px;
    font-weight: 700;
    padding: 11px 0px 11px 11px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    bottom: 4%;
    left: 6%;
    transition: 250ms;
 }
 .line__btn__jackpot span:after {
    content: '\00bb';
    opacity: 0;
    transition: 250ms;
  }
 .line__btn__jackpot:hover span:after {
    opacity: 1;
    right: 0;
    padding-right: 0px;
  }
 .line__btn__jackpot:hover {
    padding:11px 11px 11px 22px ;
  }
  .line__btn__jackpot:active {
    left: 10%;
  }
 .line__btn--elm {
    color: #000;
-    font-size: 38px;
+    font-size: 38px ;
 }
 .line__btn--elm--saper {
    color: #000;
    font-size: 4vh !important;
 }
@media (max-width: 1590px) {
    .line__btn--elm--saper {
        font-size: 2vh !important;
        display: none;
    }
 }
 .linecontent-2 {
@@ -214,7 +370,7 @@
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
-    font-size: 87px;
+    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4.5% 2.2%;
@@ -247,162 +403,187 @@
    margin-right: 10%;
 }
 .cumming_soon--img {
    margin-bottom: 4%;
 }
 /* /GameMode */
 /* Media */
-@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
+@media only screen and (max-width:1800px) {
-    .header__auth--discord {
+    .line__img__jackpot {
-        width: 14%;
+        width: 150px;
-    }
+        height: 150px;
    .header__balance {
        width: auto;
    }
    .main {
        width: 75% !important;
    }
    .main__content h1 {
        font-size: 4.5em;
    }
    .gamemode__content--text div {
        width: 75%;
    }
    .gamemode__main {
        height: auto;
        width: 25%;
    }
    .title-firstline {
        font-size: 4.1em;
    }
    .line__footer {
        flex-direction: column;
    }
    .line__footer img {
-        margin-top: -2em;
+        width: 55%;
-    }
+        margin-bottom: 5%;
    .line__content .line__btn--main .line__btn {
        left: 0;
        top: -.4em;
    }
    .line__img {
        margin: 1% -8% 0 30%;
    }
    .gamemode__firstline img {
        width: 60%;
    }
    .gamemode__firstline .title-firstline {
        font-size: 3.2em;
    }
    .gamemode__twolines img {
        display: none;
    }
    .gamemode__twolines .title-twoline {
        font-size: 3.238em;
    }
    .line__btn {
        font-size: 28px;
        padding: 6px 11px;
    }
    .gamemode__twoline--first__element .container a {
        padding: 6px 11px;
    }
    .write {
        position: static;
        margin: -45% 87% 6% 2%;
    }
    .write__content input {
        padding: 0.625em 1% 14px 0.75em;
    }
    .write__content input::placeholder {
        font-size: 11.5px;
    }
    .write__content button {
        margin-left: -15%;
        padding: 0.375em 0.375em;
    }
 }
-@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
+@media only screen and (max-width:1700px) {
-    .header__auth--discord {
+    .title-jackpot {
-        width: 14%;
+        font-size:60px;
        padding: 0px 0px 0px 28px;
    }
-    .header__balance {
+
-        width: auto;
+    .title-twoline {
        font-size: 60px;
    }
-    .main__content h1 {
+
-        font-size: 4.5em;
+    .line__img__jackpot {
-    }
+        height: 150px;
-    .main {
+        width: 150px;
        width: 78% !important;
    }
    .gamemode__main {
        height: auto;
        width: 28.5%;
    }
    .gamemode__content--text div {
        width: 78%;
    }
    .title-firstline {
        font-size: 4.1em;
    }
    .line__footer {
        flex-direction: column;
    }
    .line__footer img {
-        margin-top: -2em;
+        width: 40%;
        margin-bottom: 5%;
    }
-    .line__content .line__btn--main .line__btn {
+
-        left: 0;
+    .line__content {
-        top: -.4em;
+        width: 100%;
-    }
+        height: 100%;
    .line__img {
        margin: 1% -8% 0 15%;
    }
    .gamemode__firstline img {
        width: 60%;
    }
    .gamemode__firstline .title-firstline {
        font-size: 3.2em;
    }
    .gamemode__twolines img {
        display: none;
    }
    .gamemode__twolines .title-twoline {
        font-size: 3.238em;
    }
    .line__btn {
-        font-size: 28px;
+        border-radius: 16px;
-        padding: 6px 11px;
+        font-size: 30px;
        padding: 11px 11px 11px 11px;
    }
    .gamemode__twoline--first__element .container a {
        padding: 6px 11px;
    }
    .write {
        position: static;
        margin: -45% 87% 6% 2%;
    }
    .write__content input {
        padding: 0.625em 1% 14px 0.75em;
    }
    .write__content input::placeholder {
        font-size: 11.5px;
    }
    .write__content button {
        margin-left: -15%;
        padding: 0.375em 0.375em;
    }
 }
@media screen and (max-width: 1100px) {
    .main__content h1 {
-        font-size: 3.5em;
+        font-size: 70px;
    }
    .title-firstline {
-        font-size: 3.4em;
+        font-size:80px;
    }
-    .line__img {
+
-        margin: -1% -18% 0 2%;
+    .cumming_soon_btn {
        font-size: 30px;
        border-radius: 16px;
    }
    .cumming_soon--img {
        height: 40px;
        width: 80px;
    }
    .gamemode__twoline--first__element .container a {
        margin-right: 10%;
        padding: 2px 11px 11px 11px;
        margin-bottom: 3%;
    }
    .line__btn__jackpot {
        border-radius: 16px;
        font-size: 30px;
    }
    .line__btn--crash {
        border-radius: 16px;
        font-size: 30px;
        padding: 7px 0px 11px 11px;
    }
    .crash--img {
        height: 60px;
        width: 60px;
    }
    .line__content {
        height: 354px;
    }
 }
-/* /Media */
+@media only screen and (max-width:1300px) {
    .title-jackpot {
        font-size:40px;
        padding: 0px 0px 0px 28px;
    }
    .title-twoline {
        font-size: 40px;
    }
    .line__img__jackpot {
        height: 125px;
        width: 125px;
    }
    .line__footer img {
        width: 40%;
        margin-bottom: 5%;
    }
    .line__content {
        width: 100%;
        height: 100%;
    }
    .line__btn {
        border-radius: 10px;
        font-size: 20px;
        padding: 11px 11px 11px 11px;
    }
    .main__content h1 {
        font-size: 40px;
    }
    .title-firstline {
        font-size:60px;
    }
    .cumming_soon_btn {
        font-size: 20px;
        border-radius: 10px;
        height: 50px;
    }
    .cumming_soon--img {
        height: 40px;
        width: 80px;
    }
    .gamemode__twoline--first__element .container a {
        margin-right: 10%;
        padding: 2px 11px 11px 11px;
        margin-bottom: 3%;
    }
    .line__btn__jackpot {
        border-radius: 10px;
        font-size: 20px;
    }
    .line__btn--crash {
        border-radius: 10px;
        font-size: 20px;
        padding: 0px 0px 0px 16px;
    }
    .crash--img {
        height: 50px;
        width: 50px;
    }
    .line__content {
        height: 265px;
    }
    .gamemode__twoline--first__element {
        width: 100%;
        margin: 0 3.6% 0 5.5%;
        min-height: 60px;
    }
    .gamemode__twoline--two__element {
        margin-top: 0;
        width: 100%;
        min-height: 60px;
    }
 }
--- a/luckydiamond/src/assets/css/PagesStyles/profile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/profile.css
@@ -1,12 +1,7 @@
 #chat-profile {
    height: 95.6%;
 }
 .profile__content {
    width: 30%;
    margin-left: 3%;
 }
 .profile__content .profile__user--img {
    margin: 17.6% 8.4% 1% 0;
    background: #969C8D;
@@ -17,15 +12,20 @@
 .profile__card {
    display: flex;
    flex-direction: column;
 }.hisorypaymond {
     /* height: 590px; */
     height: 70vh;
     width: auto;
     overflow-y: auto;
     overflow-x: auto;
     overflow-y: auto;
 }
 .profile__card h1 {
    color: #FFF;
    font-weight: 700;
    font-family: Montserrat;
    font-size: 40px;
 }
 .profile__card h2 {
    border-radius: 20px;
    background: #22252F;
@@ -39,47 +39,38 @@
    font-size: 28px;
    padding-left: 11px;
 }
 .profile__card h2 img {
    margin-right: 4.4%;
 }
 .profile__btns--payments {
    margin-top: 7.9%;
    display: flex;
    flex-direction: column;
 }
 .icon-diamond h2 img {
    width: 33px;
    height: 33px;
 }
 .deposit-icon {
    margin: 3px 0 0 10px;
 }
 .withdraw-icon {
    margin-left: 33px;
 }
 .btn-bg {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 36%;
 }
 .btn-margin {
    padding: 3.8% 46% 3% 14%;
    margin-bottom: 11px;
    background: #62D4B2;
 }
 .btn-display {
    display: flex;
 }
 .text-btn {
    text-decoration: none;
    color: #000;
@@ -89,16 +80,23 @@
    font-size: 18px;
    margin-left: 4px;
 }
 .icon-margin-deposit-withdraw {
    margin-right: 4px;
 }
 .withdraw {
    padding: 3.8% 46% 3% 14%;
    background: #EF4444;
 }
 .playerandvid {
    margin-right: 10vh;
 }
 .data1 {
    margin-right: 20vh;
 }
 .summa {
    margin-right: 10vh;
 }
 .payments {
    margin: 2% 0 0 -4.25%;
@@ -106,41 +104,47 @@
 .types {
    display: flex;
 }
 .types-margin h3 {
    margin-right: 7.813em;
 }
 }
 .types-text h3 {
    color: #ABABB4;
    font-weight: 600;
    font-family: Montserrat;
    font-size: 14px;
 }
 .types-line {
    flex-grow: 1; /* Add this line */
    margin-top: 2.1%;
    background: #38383E;
    width: 86%;
    height: 3px;
    width: 100vh;
 }
 .payments__card {
    margin-top: 4.9%;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: space-between;
 }
 .user-info {
    display: flex;
    align-items: center; /* Center vertically */
    margin-right: 1em; /* Add margin for spacing */
    width: 15vh;
 }
 .user-name {
    display: flex;
    flex-direction: column;
    margin-left: 0.625em;
    align-items: center; /* Center horizontally */
    margin-top: -0.5em; /* Adjust this value as needed */
 }
 .user-name__text h3 {
    color: #FFF;
    font-weight: 700;
@@ -148,26 +152,51 @@
    font-size: 20px;
 }
 .user-name1 {
    display: flex;
    flex-direction: column;
    margin-left: 0.625em;
    align-items: center; /* Center horizontally */
    margin-top: -0.5em; /* Adjust this value as needed */
 }
 .user-name1__text h3 {
    color: #FFF;
    font-weight: 700;
    font-family: Montserrat;
    font-size: 20px;
 }
 .user-name__text p {
    color: #A9A9A9;
    font-weight: 400;
    font-family: Montserrat;
    font-size: 20px;
 }
 .data-info {
-    margin-left: 10%;
+    margin-left: 20vh; /* Push to the right */
    margin-right: auto; /* Push to the left */
 }
 .data-info__text h3 {
    color: #A9A9A9;
    font-weight: 400;
    font-family: Montserrat;
    font-size: 17px;
 }
 .transaction-info {
-    margin-left: 7%;
+    margin-right: 10em; /* Add margin for spacing */
    margin-right: 6em; /* Add margin for spacing */
    display: flex;
    justify-content: center;
    align-content: center;
    width: 1vh;
    margin-right: 13.5vh;
 }
 .transaction-info__text {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 13vh;
 }
 .transaction-info__text h3 {
@@ -175,17 +204,56 @@
    font-family: Montserrat;
    font-size: 22px;
 }
 .deposit-color h3 {
    color: #32C966;
 }
 .withdraw-color h3 {
    color: #EA3D38;
    margin-right: 1vh;
 }
 .withdraw-color1 {
    margin-left: 1.35em;
 }
 .error-deposit {
    position: absolute;
    left: 190px;
    top: 52px;
 }
 .error-deposit h2 {
    color: #BA3636;
    font-family: "Montserrat Alternates";
    font-weight: 700;
    font-size: 11px;
 }
 .error-card {
    position: absolute;
    top: 130px;
    left: 210px;
 }
 .error-card h2 {
    color: #BA3636;
    font-family: "Montserrat Alternates";
    font-weight: 700;
    font-size: 11px;
 }
 .error-checkbox h2 {
    color: #BA3636;
    font-family: "Montserrat Alternates";
    font-weight: 700;
    font-size: 11px;
 }
 .error-captcha {
    top: 235px;
    left: 45px;
    position: absolute;
 }
 .error-captcha h2 {
    color: #BA3636;
    font-family: "Montserrat Alternates";
    font-weight: 700;
    font-size: 13px;
 }
 /* Media */
@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
    .profile__card h2 {
        width: 72%;
@@ -196,8 +264,66 @@
    .withdraw {
        padding-right: 56%;
    }
-}
+    .withdraw-color h3 {
        color: #EA3D38;
        margin-right: 1vh;
    }
    .transaction-info {
        margin-right: 10em; /* Add margin for spacing */
        margin-right: 6em; /* Add margin for spacing */
        display: flex;
        justify-content: center;
        align-content: center;
        width: 1vh;
        margin-right: 8.5vh;
    }
    .transaction-info__text {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 13vh;
    }
    .user-name {
        display: flex;
        flex-direction: column;
        margin-left: 0.625em;
        align-items: center; /* Center horizontally */
        margin-top: -0.5em; /* Adjust this value as needed */
    }
    .user-name__text h3 {
        color: #FFF;
        font-weight: 700;
        font-family: Montserrat;
        font-size: 20px;
    }
    .user-name1 {
        display: flex;
        flex-direction: column;
        margin-left: 0.625em;
        align-items: center; /* Center horizontally */
        margin-top: -0.5em; /* Adjust this value as needed */
    }
    .user-name1__text h3 {
        color: #FFF;
        font-weight: 700;
        font-family: Montserrat;
        font-size: 20px;
    }
    .data-info {
        margin-left: 22.5vh; /* Push to the right */
        margin-right: auto; /* Push to the left */
    }
    .data-info__text h3 {
        color: #A9A9A9;
        font-weight: 400;
        font-family: Montserrat;
        font-size: 17px;
    }
    .withdraw-color1 {
        margin-left: 1.35em;
    }
 }
@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
    .profile__card h2 {
        width: 80%;
@@ -208,6 +334,67 @@
    .withdraw {
        padding-right: 66%;
    }
 }
 }
@media screen and (min-device-width: 1921px) {
    .withdraw-color h3 {
        color: #EA3D38;
        margin-right: 1vh;
    }
    .transaction-info {
        margin-right: 10em; /* Add margin for spacing */
        margin-right: 6em; /* Add margin for spacing */
        display: flex;
        justify-content: center;
        align-content: center;
        width: 1vh;
        margin-right: 20vh;
    }
    .transaction-info__text {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 13vh;
    }
    .user-name {
        display: flex;
        flex-direction: column;
        margin-left: 0.625em;
        align-items: center; /* Center horizontally */
        margin-top: -0.5em; /* Adjust this value as needed */
    }
    .user-name__text h3 {
        color: #FFF;
        font-weight: 700;
        font-family: Montserrat;
        font-size: 20px;
    }
    .user-name1 {
        display: flex;
        flex-direction: column;
        margin-left: 0.625em;
        align-items: center; /* Center horizontally */
        margin-top: -0.5em; /* Adjust this value as needed */
    }
    .user-name1__text h3 {
        color: #FFF;
        font-weight: 700;
        font-family: Montserrat;
        font-size: 20px;
    }
    .data-info {
        margin-left: 17vh; /* Push to the right */
        margin-right: auto; /* Push to the left */
    }
    .data-info__text h3 {
        color: #A9A9A9;
        font-weight: 400;
        font-family: Montserrat;
        font-size: 17px;
    }
    .withdraw-color1 {
        margin-left: 1.35em;
    }
 }
 /* /Media */
--- a/luckydiamond/src/assets/css/PagesStyles/settings.css
+++ b/luckydiamond/src/assets/css/PagesStyles/settings.css
@@ -0,0 +1,78 @@
 .settings {
    /* display: flex; */
    grid-area: profile;
    /* height: 86vh; */
    /* width: 86vh; */
    border-radius: 50px;
    background: #17181C;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin: 10px 39px 18px 13px;
 }
 #volume-control {
  margin: 5vh;
    /* display: flex; */
    /* align-items: center; */
    /* top: 0; 
    left: 0; */
    /* z-index: 1000; */
  }
  .volume-section{
  margin: 5vh;
  }
  .volume-text{
    text-decoration: none;
    font-family: Montserrat Alternates;
    font-weight: 700;
    font-size: 25px;
  }
  .volume-text--grey{
    text-decoration: none;
    font-family: Montserrat Alternates;
    font-weight: 700;
    font-size: 25px;
    color: #3D3F48;
  }
 /* Стилизация трека ползунка */
 #volumeControl {
  -webkit-appearance: none; /* Убирает стандартный стиль для Webkit браузеров */
  width: 40vh;
  height: 8px; /* Можно изменить для изменения высоты трека */
  background: #EF4444; /* Цвет фона трека */
  outline: none; /* Убирает контур при выборе */
  opacity: 1; /* Можно изменить для изменения прозрачности трека */
  -webkit-transition: .2s; /* Плавное изменение для Webkit браузеров */
  transition: opacity .2s;
  border-radius: 10px;
 }
 /* Стилизация тумблера ползунка */
 #volumeControl::-webkit-slider-thumb {
  -webkit-appearance: none; /* Убирает стандартный стиль для Webkit браузеров */
  appearance: none;
  width: 15px; /* Ширина тумблера */
  height: 15px; /* Высота тумблера */
  background: #fff; /* Цвет фона тумблера */
  cursor: pointer; /* Курсор в виде указателя */
  border-radius: 60%; /* Круглый тумблер */
 }
 #volumeControl::-moz-range-thumb {
  width: 25px; /* Ширина тумблера */
  height: 25px; /* Высота тумблера */
  background: #fff; /* Цвет фона тумблера */
  cursor: pointer; /* Курсор в виде указателя */
  border-radius: 50%; /* Круглый тумблер */
  border: 2px solid red; /* Граница тумблера */
 }
 #volumeControl::-moz-range-track {
  background: red; /* Цвет фона трека для Firefox */
  height: 8px; /* Высота трека для Firefox */
 }
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -11,68 +11,120 @@ ul {
    list-style: none;
 }
-body, html {
+body,
 html {
    background: #121212;
    height: 100%;
    margin: 0;
    overflow-y: hidden;
 }
 input[type="number"] {
    -moz-appearance: textfield;
 }
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
 }
 button:focus {
    outline: none;
 }
 button {
    cursor: pointer;
 }
 /* /Global Settings */
 /* Content Grid */
 .content-grid {
    display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
-    "menu header header header header header header"
+        "menu header header header header header header"
-    "menu main main main main main chat"
+        "menu main main main main main chat"
-    "menu main main main main main chat"
+        "menu main main main main main chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat";
+        "menu gamemode gamemode gamemode gamemode gamemode chat";
    height: 100%;
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
 }
 .content__grid-profile {
    display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
-    "menu header header header header header header"
+        "menu header header header header header header"
-    "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat";
+        "menu profile profile profile profile profile chat"
-    grid-gap: 10px;
+        "menu profile profile profile profile profile chat";
    grid-gap: 0.625rem;
    height: 100%;
 }
 .content-grid--saper {
    display: grid;
    grid-auto-columns: 1fr;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
-    "menu header header header header header header"
+        "menu header header header header header header"
-    "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat";
+        "menu saper saper saper saper saper chat";
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
 }
 .content-grid--jackpot {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat"
        "menu jackpot jackpot jackpot jackpot jackpot chat";
    grid-gap: 0.625rem;
 }
 .grid-crash {
    display: grid;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    gap: 0.625rem;
    grid-auto-flow: row;
    grid-template-areas:
        "menu header header header header header header"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat"
        "menu crash crash crash crash crash chat";
 }
 /* /Content Grid */
@@ -80,9 +132,9 @@ body, html {
 .header {
    grid-area: header;
-    border-radius: 20px;
+    border-radius: 1.25rem;
    background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    align-self: start;
 }
@@ -93,8 +145,8 @@ body, html {
 .menu {
    grid-area: menu;
    background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
-    border-radius: 20px;
+    border-radius: 1.25rem;
    align-self: start;
 }
@@ -105,11 +157,13 @@ body, html {
 .chat {
    grid-area: chat;
    background: #16171B;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
-    border-radius: 20px;
+    border-radius: 15px;
-    height: 90%;
+    /* height: 100%; */
    height: 86vh;
    position: relative;
    z-index: 3;
 }
 /* /Chat */
@@ -141,12 +195,28 @@ body, html {
    display: flex;
    grid-area: profile;
    height: 95%;
-    border-radius: 50px;
+    border-radius: 3.125rem;
    background: #17181C;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
-    margin: 10px 39px 18px 13px;
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
 }
 .jackpot {
    display: flex;
    grid-area: jackpot;
    /* height: 95%;
    border-radius: 3.125rem;
    background: #17181C;
    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
 }
 .about {
    grid-area: about;
 }
 /* /Profile */
 /* Saper */
@@ -158,6 +228,94 @@ body, html {
 /* /Saper */
 /* Crash */
 .crash-content {
    grid-area: crash;
 }
 .crash-game {
    grid-area: crashgame;
 }
 .crash-game__players {
    grid-area: crashplayers;
 }
 .content-grid--about {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat"
        "menu about about about about about chat";
    grid-gap: 0.625rem;
 }
 .content-grid--help {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
        "menu header header header header header header"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat"
        "menu help help help help help chat";
    grid-gap: 0.625rem;
 }
 .help {
    grid-area: help;
    display: flex;
    /* height:99%; */
    height:86vh;
    border-radius: 3.125rem;
    background: #17181C;
    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
    /*height: 96.2%;*/
    width: 1000px;
    margin: 0 auto;
 }
 .bg-gradient-left {
    background: #293561;
    filter: blur(120px);
    position: absolute;
    top: 250px;
    transform: rotate(180deg);
    left: 200px;
    width: 40%;
    height: 55%;
    z-index: 0;
 }
 .bg-two-gradient-right {
    background: #293561;
    filter: blur(120px);
    position: absolute;
    top: 220px;
    transform: rotate(330deg);
    left: 600px;
    width: 60%;
    height: 35%;
    z-index: 0;
 }
 /* /Crash */
 /* Media */
 /* /Media */
--- a/luckydiamond/src/assets/icons-developcard/CLARFFY.png
+++ b/luckydiamond/src/assets/icons-developcard/CLARFFY.png
--- a/luckydiamond/src/assets/icons-developcard/Ckutls_.png
+++ b/luckydiamond/src/assets/icons-developcard/Ckutls_.png
--- a/luckydiamond/src/assets/icons-developcard/FUpir.png
+++ b/luckydiamond/src/assets/icons-developcard/FUpir.png
--- a/luckydiamond/src/assets/icons-developcard/Figma.png
+++ b/luckydiamond/src/assets/icons-developcard/Figma.png
--- a/luckydiamond/src/assets/icons-developcard/Hepatir.png
+++ b/luckydiamond/src/assets/icons-developcard/Hepatir.png
--- a/luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png
+++ b/luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png
--- a/luckydiamond/src/assets/icons-developcard/Vue.png
+++ b/luckydiamond/src/assets/icons-developcard/Vue.png
--- a/luckydiamond/src/assets/icons-developcard/busha888.png
+++ b/luckydiamond/src/assets/icons-developcard/busha888.png
--- a/luckydiamond/src/assets/icons-developcard/discord.png
+++ b/luckydiamond/src/assets/icons-developcard/discord.png
--- a/luckydiamond/src/assets/icons-developcard/github.png
+++ b/luckydiamond/src/assets/icons-developcard/github.png
--- a/luckydiamond/src/assets/icons-developcard/html.png
+++ b/luckydiamond/src/assets/icons-developcard/html.png
--- a/luckydiamond/src/assets/icons-developcard/js.png
+++ b/luckydiamond/src/assets/icons-developcard/js.png
--- a/luckydiamond/src/assets/icons-developcard/like.png
+++ b/luckydiamond/src/assets/icons-developcard/like.png
--- a/luckydiamond/src/assets/icons-developcard/megatntmega.png
+++ b/luckydiamond/src/assets/icons-developcard/megatntmega.png
--- a/luckydiamond/src/assets/icons-developcard/odniclasniki.png
+++ b/luckydiamond/src/assets/icons-developcard/odniclasniki.png
--- a/luckydiamond/src/assets/icons-developcard/rafael1209.png
+++ b/luckydiamond/src/assets/icons-developcard/rafael1209.png
--- a/luckydiamond/src/assets/icons-developcard/ramkabusha888.png
+++ b/luckydiamond/src/assets/icons-developcard/ramkabusha888.png
--- a/luckydiamond/src/assets/icons-developcard/sql-logo.png
+++ b/luckydiamond/src/assets/icons-developcard/sql-logo.png
--- a/luckydiamond/src/assets/icons-developcard/telegram.png
+++ b/luckydiamond/src/assets/icons-developcard/telegram.png
--- a/luckydiamond/src/assets/icons-gamemodes/jackpot_icon.svg
+++ b/luckydiamond/src/assets/icons-gamemodes/jackpot_icon.svg
--- a/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg
+++ b/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg
--- a/luckydiamond/src/assets/icons-menu/jackpot-icon.svg
+++ b/luckydiamond/src/assets/icons-menu/jackpot-icon.svg
@@ -0,0 +1,21 @@
 <svg width="57" height="36" viewBox="0 0 57 36" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g filter="url(#filter0_i_3187_2)">
 <rect width="56.8" height="36" fill="url(#pattern0)"/>
 </g>
 <defs>
 <filter id="filter0_i_3187_2" x="0" y="0" width="56.7998" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="4"/>
 <feGaussianBlur stdDeviation="2"/>
 <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
 <feBlend mode="normal" in2="shape" result="effect1_innerShadow_3187_2"/>
 </filter>
 <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
 <use xlink:href="#image0_3187_2" transform="matrix(0.00195312 0 0 0.0030816 0 -0.288889)"/>
 </pattern>
 <image id="image0_3187_2" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA70RE4n0h2gAAAAJ0Uk5TAP9bkSK1AAAKQUlEQVR4nO2cPc7mthGARahgF14gAK+RKrxSyhQBKMPFlnsEH8XqXO4RVqlcRkYKC7AgRvwZckiR1N9nG3Y4wL58X4l6RA5nOORI+3VdkyZNmjRp0qRJkyZNmjRp0qRJkyZNmjRp0qRJk0TY9BIgt3fX90oNrwBUqekVgCu1vAIIpdZXAKnUOy2qXd5cTzRg+D0BvQaMLwD0QwDTCwD7EMD8AsA/BPDGGYTa5EvAyl950357/sqbpJrZK4DSgDfuuFsRfQMgFjC8AYyv5uXeAsbHAN188gGA6THADOEHAJ67ozFj+RYgXrij0J74GvDGn81k8g4w66F47s/qJYAZG6KPDaFXAHjoDS4u9k/XCAIDHgyEiWp6LjFrhAdqUDHgdif6cJn9Nt4EsBRwtw8mrFoTkupJiJUp4O44qHCVCKzrQg6Am8PgAKbj3I/oDemR6tmTcaT2ogl9fwQY9HeCYJeF4WvoU4AfenHfFFk8cPcBPNZa/wQQXcCuOgPdAJCYrl9vniiTu4bz9IZwoD9pCYRinnaZuQtPogSBrhYBou5VPQx+ESDrXkXB74uAE6egYD5FJZ7YNAMHOsR0t8wgJxbFA+BgB+a6M5P0FsxTZasAqBmCAABLlE0cgF4ATA4w4hM9AtQmeIkAEz5Bw/FTANwp9UYPqNmyQoCoqzwot2rLPhb0SUvFNQDxAJK0FFxA1EMMCVNpciP4KdQvNcDe8K/uzrHX+QZJDRhrgC+upkgn1dUBfqoBdt1/9u6IDcEPitKA6XhlqEcDABkCg1/71TUAM4DBfUWGAO0hBlB2x33GhH0mjQwBNKL3gLUtEDcAU7WPDAHGpDeAsjvuOxQS7hXHxs61a6htgfQWB3SELc6bgQWU3VG3DgASjbc3A72RrG2BNAB0JNBweTPQcamSEzFjL4PfeW2zMCNulUBNzWQgXH9xPTAD42qsFBqIXQgJ59E0Boy2VzuAljxaWAB3C6o+XiMNbq212CKjR+IWg9ydJzEA7rC4NeixCdQdtws802EE2Dq3/p7dnY5a4BFg0GOKACusfufiHkq4O1PXlU5gwIKWm8rPnJHICDBFAVrYLTAGHLVoDm+hpfsFMYBD06SrWQWYJiPAlAIOwYFAw/wXlgAEaNd/yQO6OqArAXzLcwCz5PJd933JACa4wVYA6EO0AtDtYh6wHAGT13cKQElwkQcE88lm3NHihxQBMPgiD/C2wYy2+REwdOEW0xEw+B8yDwjXpEsoCwg/+gRgehNdI+stoLo7RwBy4YMOeKQWt9mdk9/BhUnqj0RFauF5QLikT42ZRvVhw58Ctrj+hAA8bqHMA4KaWVzf3TK0UBUAvtE8rp9OMiQF0BQgovqHXJPLPkTBNXYgGfcIrhiS+hpAp+QA6qNvUJRuQF3W9fmCANAnkjQoTXJwBDAPbQEAeu+TBsEt4YAIABLCKtI7TZScWp4MAOqTmljvB9Pm8QEVAFyFsBj0zlOAiFoIZgBBBAGGXP1wYItUpAHEFugI7mMAQKcjFenqzsk8YIr6uB0AA6hoNgf9csUDZujjFq+Flc3iuxa6CU8DLHmvvAUwLJ9EBJjDzg6+7J9gcRbg1229+YIfgZlb+plW2L7sF4LBEAPoUWCZ42nY3JIigFXM6MZ7tS3w6zYK60C4nkAGGwAulTqBci2gQ4AxBQx2OxMDfgLlf4EjHmDrx4AuAFZbHcmGTrjeHwHSA5Y8gHvAlgUID5gDYJPBapkHrAdAdwRYB1k4BixVgMwBJnoHMHa2q7MtjHtYa1xiwFEHJcDmdBEB+msACF/cu+ETwIQDKb8MWGxPVXhEcgmgYkAP9qOVMKKmXQUQ0B2HuSoAjqZsAQMG+NQhSjJeA6D06eBOr9cB/8AJXDdvR6leXgf0Gx5uF+uYU46xcRstigBm/rk7C6gAv02ImEsA49TaI1m8BAwCJysAk5iuAvSMSzJTmvukNkFQASgbLkoAYzM1QG/DRBEg7RRSBpiUaBlg84m0lCSBSFEGGAfcKoB/21iZB+zds7PYpzLgBxsriwArP5YBX+0Ma/y2DCgmflGo+f0BVR08BZAPBBQs8RLgawUg9LlfigC7fCwlujxgMtW6EmAN6fWjcHNvUQWYfGINsPlHDLnQBsm4Qt6XKUjG5QFCQSZrKgMml5bMAbjPI415AFWQR1qyAL9KLz1AcAt0V+8IsAtQ3ZD89brxS+eXtEdAD5xi2ldCGmjIAjprQKQ0irpxpnNiw1ehr+7VYj6UAL0LmnMBcE8aoAEa4E8N+Bd86iX51JmS6vLvMCWjOTsDIG5q3Ce/fVGs5zc52mSaCzgTfnSeAVAz5enPfd7mmz6xL45XV5qwxF1gzAPsvoDpxfCyX2B3DHJzpQGYyDqWAZP91G+rSL39MKVu1GxjN34vKAPgNoOoAasBULWYIGBLHZdkiP5ZwBwANpEF5UIQYD0FUPfoFEoWA7YzwGwvnEsAdRGwdABKAcM9wPIUsHZQpoDxGmDroATA6gDTNYB6DRgABIDlJmAEEABmByitD0qAEQDjTcAEpQXoKjrPUgf8DQF8GQPCu00ZAFEIsOQBvAbYp6MAWAF0A8B0IhUAG4BiAKsBdl8+ArYbAKEZAFBQwjBOVwALAnxy5WdkSCcAqf/fiQf8kACWc8DeYQT40ZVfkDPVR0FnkjOA/0SAmiH9Nwb87EqFJpQRXpbMAn7ea30XACoHIDVf0PK1Dqh7o5VfHzBdA3zvAN8/BXx3AKyn03oE+OwA370FfPaA5TQyRYBPDvDJA+bT4BoBvnWAbz1gOg3vEeCbBKCrnAO+BMDgAN+kgMoSR5l0GwCk8qAIUFni2PamAHmnCwQBhPJlBKiNwoYi0h4hfBkDKnaAQ9oelCNACK5jGWBsDQBUeVBsSFMZYF4rA0CvPAjNyrw6H0yGkgB67EwjqwJGk6NxAKJ8iQDw4DMP0AtrD+iUL9Gk2p8AegSQOQCpAswPDxAehONCDWDfXzsAxOXAYjZasLgazAFbYkAttOkzIuxYmAHYpy4BUF3ixAC71YkBGluyA+b2TCNstnKbrsH8ygNotO0z+8bZlGHbxw12KgKGLmw8zTtq6caTGexYANitr/7ct7xMawpKMxJmG2bGqSsA9nWuln/u3dgLfZu/7Cd1q/5qU+/uaFcE3JIGaIAGqAN0gr23UxuS1Z2h8ylA6Pd0/AuvXvQZ/dx7PQXItXPTWSRDOHMCsP9DOXp259YUuh9SXQLIPGC7AiC2monSWKZw5gygOpc/OwBUeEehAX7VUXhtByeWKM4Br31B+9wrb2RjcT4YL80Hl+VPBxj+3wHdoz8v0EeA6T6ARoAHfyIhfs20+Ky6LPg/Rj36M0wy867uTXkNOLyv/JsDDu9s/+aAYDzsvHIdQM8r52TygP68ck5GDyDnlXMyBLN8Bojs+oFg/xFPANiDH40jnkMeDcOIAE+0GE8hD/rw5g94NWnSpEmTJk2aNGnSpEmTJk2aNGnSpEmTJk2a/LHlf/vs4b0MR/1wAAAAAElFTkSuQmCC"/>
 </defs>
 </svg>
--- a/luckydiamond/src/assets/icons-menu/slots-icon.svg
+++ b/luckydiamond/src/assets/icons-menu/slots-icon.svg
@@ -1,21 +0,0 @@
 <svg width="73" height="44" viewBox="0 0 73 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="sadasdad 1" filter="url(#filter0_d_644_4)">
 <rect width="65" height="36" fill="url(#pattern0)" shape-rendering="crispEdges"/>
 </g>
 <defs>
 <filter id="filter0_d_644_4" x="0" y="0" width="73" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dx="4" dy="4"/>
 <feGaussianBlur stdDeviation="2"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_644_4"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_644_4" result="shape"/>
 </filter>
 <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
 <use xlink:href="#image0_644_4" transform="matrix(0.00193643 0 0 0.00354004 0 -0.40625)"/>
 </pattern>
 <image id="image0_644_4" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAZQTFRFAAAA70RE4n0h2gAAAAJ0Uk5TAP9bkSK1AAAET0lEQVR4nO3bTZKbMBAFYCgWLH2DcBQdDY7GUTgCSy8oFGP+W0J0q41xUu8tUnkV+qsZLH4mA0mCIAiCIAiCIAiCIAiCIAiCIAiCIAiC/JMpe918Zm2tAgprnyqgtFb1PaT2lUoB5APQKIDHALQKoBgAzV40A9ApgHIANB+DfSd+Ph2BKhrIRqCOBvIRaO4DHiMQv5LUQDEC8UtRDZgRiF/LaqAcgfiDYTihqU5qr+Em1wDDcZBpDsfhSEyVwPRHNNC/d8SdQPdeTQDuBe5fB+qlrAd0R6P6hPIC2ocS0J1U778uqIH7L67332Co75HUt3nqG001oL5X1t+tG91K/sBPLOofujLdMkjGj0EzP+xFzT58H06aHxvfe7EBAAAAAAAfB6bbHVYqD5AK5reXkgWQfAHbq+ECGBHQuoBofvM9zEAmA3oHyGXA+jnMQCEEagoYIdBQoBQCLQWE8+uN2QSI1uGQTgv0BBAuA7vemU2AdBk4gOxQGlJpgXoPFN8Hmj1gvg+0HwZKu79pp7fg+z6tGgK0xwNOL9fdsAJNYID24g10G8CSHx5PgMf6PaxAaID2aSdU0UC2roUF6EMDB0AbDUznn+cWCA4cAL0WsPcB81Wg0gK1FmhuB1ot8Lwd6H4OMMtBet7no2kHLCyrFw6QrQcpp+cOMN8kMPv4K7ItMF/jK15PD4Ga2R2gIBuc9fIIaJhdDRgKGHeDsw7gMqDm94uAit8vAgT9GqAXdAcYzlO9pDtAvjkLczo9H+w2OOte4EEGQt0D9MMGT253gAfZ4Kw7QD5er1pu9wBPMhDuDpC+/s0IugMkr78aQXeBP++LRc3tLpCQgZPuBcbDndcvAeZfxLP6VUCfcLsPyMhAsB8AXcLtPiAnA8F+CTAd7rw+n+Y/DbQJt/uAggwE+wHQJNzuAwwZCPYDoE64/RKgJAPBfgBUCbf7AEsGgv0ASBJuvwKYTzi8/jGgXjfIyEC4+4GODAT6DFQfBPL5v+1ZfQbYAwdArwW257zlcQZWN+uHEA0kc6YNiumEw+s/CcxnLF7/VaDidw9QkoFwvwgQdA9gyUC4XwP0gu4CKRk46dcAnaD/IpAtv4xldRcoyMBJdwFLFs5Jd4DN61Ws7gD5fLFn9s8Dm/ezWN0BiuVKx+s/CJhhg07U/zvg659CeTtgtceCAwiPxtQBNg/ucnq+/VVxzBnp4QCbV0453bpAIuh2XZb/NPC8HWgFA9cAjRaotUAVC6SfAiRfsg/o2QMHQLfdIPYxkjhg8yTMskHMszj1DqjkwG6D/WsQJ0BB96H0gSZDDiX3Df4w4Hl/prTy7B7iMrrxGKDZA8X3gXoPxD+fGA1UeyD/PrCflz9mSl+iin9Sdo4UeFKg1AJGCDQUKIRATQHpSqooIF0IdF76OTqfovRj8LzGVYgAZx8KF7P3bcBS9x0gCIIgCIIgCIIgCIIgCIIgCIIgCIIgt+UvVBu5EERv1u4AAAAASUVORK5CYII="/>
 </defs>
 </svg>
--- a/luckydiamond/src/assets/icons-test/lest.png
+++ b/luckydiamond/src/assets/icons-test/lest.png
--- a/luckydiamond/src/assets/icons-test/person-icon-profile-userinfo.png
+++ b/luckydiamond/src/assets/icons-test/person-icon-profile-userinfo.png
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -8,6 +8,11 @@ let webSocket;
 export function ConnectToChat() {
    try {
        if (webSocket && webSocket.readyState === WebSocket.OPEN) {
            return;
        }
        webSocket = new WebSocket(BackendWebSocketUrl);
        webSocket.onopen = function () {
@@ -16,9 +21,28 @@ export function ConnectToChat() {
        webSocket.onmessage = function (event) {
-            eventBus.emit('dataChat', event.data)
+            try {
                const dataObject = JSON.parse(event.data);
-            console.log('Message from Server:', event.data);
+                if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
                    eventBus.emit('dataChat', event.data);
                    return;
                }
                if (dataObject.MessageType == "CrashGameState") {
                    eventBus.emit('crash', event.data);
                    return;
                }
                if (Array.isArray(dataObject.CurrentGame.PlayerList)) {
                    eventBus.emit('jackpotGameTik', event.data);
                    return;
                }
            } catch (error) {
                void(error);
            }
        };
        webSocket.onclose = function () {
@@ -43,12 +67,18 @@ export function SendMessageToChat(message) {
            return;
        }
-        const data = {
+        const userCredentials = {
-            SpUserName: GetCookie("SpUserName"),
+            SearchToken: GetCookie("SearchToken"),
-            Message: message
+            AUTHTOKEN: GetCookie("AUTHTOKEN")
        };
-        webSocket.send(JSON.stringify(data));
+        const messageObject = {
            UserCredentials: userCredentials,
            Message: message,
            MessageType: "Chat"
        };
        webSocket.send(JSON.stringify(messageObject));
    } catch (error) {
        console.error('Error in ConnectToChat:', error);
--- a/luckydiamond/src/assets/js/games/crash/CrashAPI.js
+++ b/luckydiamond/src/assets/js/games/crash/CrashAPI.js
@@ -0,0 +1,63 @@
 import { BackendApiUrl } from '@/properties/Сonfig.js';
 export async function JoinCrashGame(userData, amount) {
    const data = {
        userCredentials: {
            searchToken: userData.searchToken,
            authtoken: userData.authtoken
        },
        bid: amount
    }
    try {
        const response = await fetch(`${BackendApiUrl}/GameCrash/JoinCrashGame`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data),
            redirect: 'follow'
        })
        if (!response.ok) {
            console.log('Fetch error:', response.status)
        }
        console.log(response)
        return await response.json()
    }
    catch (error) {
        console.log('Fetch error')
    }
 }
 export async function ExitAndTakeMoneyFromCrashGame(userData) {
    const data = {
        exitUserCredentials: {
            searchToken: userData.searchToken,
            authtoken: userData.authtoken
        }
    }
    try {
        const response = await fetch(`${BackendApiUrl}/GameCrash/ExitAndTakeMoneyFromCrashGame`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data),
            redirect: 'follow'
        })
        if (!response.ok) {
            console.log('Fetch error:', response.status)
        }
        console.log(response)
        return await response.json()
    }
    catch (error) {
        console.log('Fetch error')
    }
 }
--- a/luckydiamond/src/assets/js/jackpot/JackpotLogic.js
+++ b/luckydiamond/src/assets/js/jackpot/JackpotLogic.js
@@ -0,0 +1,87 @@
 // import { BackendWebSocketJackpotUrl } from '@/properties/Сonfig.js';
 import { BackendApiUrl } from '@/properties/Сonfig.js';
 // import { eventBus } from "@/main";
 // import {
 //     GetCookie
 // } from "@/assets/js/storage/CookieStorage.js";
 // let webSocket;
 // export function ConnectToJackpotSocket() {
 //     try {
 //         if (webSocket && webSocket.readyState === WebSocket.OPEN) {
 //             console.log('WebSocket connection already established.');
 //             return; 
 //         }
 //         webSocket = new WebSocket(BackendWebSocketJackpotUrl);
 //         webSocket.onopen = function () {
 //             console.log('Connection established');
 //         };
 //         webSocket.onmessage = function (event) {
 //             // const dataObject = JSON.parse(event.data);
 //             eventBus.emit('jackpotGameTik', event.data);
 //             // console.log(dataObject)
 //             // if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
 //             //     eventBus.emit('dataChat', event.data);
 //             //     console.log('CHAT')
 //             // }
 //             // else {
 //             //     eventBus.emit('crash', event.data)
 //             // }
 //         };
 //         webSocket.onclose = function () {
 //             webSocket = new WebSocket(BackendWebSocketJackpotUrl);
 //             console.log('Connection closed and reconnected');
 //         };
 //         webSocket.onerror = function (event) {
 //             webSocket = new WebSocket(BackendWebSocketJackpotUrl);
 //             console.error('WebSocket Error:', event);
 //         };
 //     } catch (error) {
 //         console.error('Error in ConnectToChat:', error);
 //     }
 // }
 export async function JoinJackpotGame(userData, amount) {
    const data = {
        userCredentials: {
            searchToken: userData.searchToken,
            authtoken: userData.authtoken
        },
        bid: amount
    }
    try {
        const response = await fetch(`${BackendApiUrl}/GameJackpot/JoinJackpotGame`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data),
            redirect: 'follow'
        })
        if (!response.ok) {
            console.log('Fetch error:', response.status)
        }
        console.log(response)
        return await response.json()
    }
    catch (error) {
        console.log('Fetch error')
    }
 }
--- a/luckydiamond/src/assets/js/moneyoperation/Claimmoney.js
+++ b/luckydiamond/src/assets/js/moneyoperation/Claimmoney.js
@@ -4,7 +4,11 @@ import {GetCookie} from "@/assets/js/storage/CookieStorage";
 export async function GettingMoneyOperation(amount) {
    const data = {
-        Amount: amount
+        Amount: amount,
        UserCredentials: {
            searchToken: GetCookie('SearchToken'),
            authtoken: GetCookie('AUTHTOKEN')
        }
    };
    try {
        const response = await fetch(`${BackendApiUrl}/payment/donate`, {
--- a/luckydiamond/src/assets/js/rest/RestMethods.js
+++ b/luckydiamond/src/assets/js/rest/RestMethods.js
@@ -1,5 +1,5 @@
 import { BackendApiUrl } from '@/properties/Сonfig.js';
-
+import { DeleteAllCookie } from "@/assets/js/storage/CookieStorage";
 export async function Post(url = "", data = {}) {
  try {
@@ -40,6 +40,9 @@ export async function GetCurrentMoney(authToken, searchToken) {
    });
    if (!response.ok) {
      DeleteAllCookie()
      console.log("Fetch error:", response.status);
    }
@@ -49,6 +52,53 @@ export async function GetCurrentMoney(authToken, searchToken) {
  }
 }
 export async function GetChatHistory() {
  try {
    const response = await fetch(`${BackendApiUrl}/Chat/GetChatHistory`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: "",
      redirect: "follow"
    });
    if (!response.ok) {
      console.log("Fetch error:", response.status);
    }
    return await response.json();
  } catch (error) {
    console.log("Fetch error:", error);
  }
 }
 export async function ApplyPromoCode(authToken, searchToken, promoCode) {
  const data = {
    userCredentials: {
      searchToken: searchToken,
      authtoken: authToken
    },
    promoCode: promoCode
  };
  try {
    const response = await fetch(`${BackendApiUrl}/PromoCode/ApplyPromo`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
      redirect: "follow"
    });
    if (!response.ok) {
      console.log("Fetch error:", response.status);
    }
    return await response.json();
  } catch (error) {
    console.log("Fetch error:", error);
  }
 }
--- a/luckydiamond/src/assets/js/storage/LocalStorage.js
+++ b/luckydiamond/src/assets/js/storage/LocalStorage.js
@@ -0,0 +1,15 @@
 export function SaveToLocalStorage(key, value) {
    localStorage.setItem(key, value);
 }
 export function GetFromLocalStorage(key) {
    return localStorage.getItem(key);
 }
 export function RemoveFromLocalStorage(key) {
    localStorage.removeItem(key);
 }
 export function ClearLocalStorage() {
    localStorage.clear();
 }
--- a/luckydiamond/src/components/AsidebarComponent.vue
+++ b/luckydiamond/src/components/AsidebarComponent.vue
@@ -6,32 +6,29 @@
      </div>
      <div class="menu__btns--gamemodes">
        <div class="menu__content--gamemodes">
-          <a href="#"><img class="menu__content--slots-icon" src="../assets/icons-menu/slots-icon.svg"></a>
+          <!-- <div class="fotosloti"><a href="#"><img  src="../assets/icons-menu/slots-icon.svg" ></a></div> -->
-          <a href="#"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
+          <a href="#" @click="$router.push({ name: 'jackpot' })"><img  class="menu__content--jackpot-icon" src="../assets/icons-menu/jackpot-icon.svg"></a>
-          <a href="#"><img  src="../assets/icons-menu/case-icon.png"></a>
+          <a href="#" @click="$router.push({ name: 'crash' })"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
          <a href="#"><img class="menu__content--chest-icon" src="../assets/icons-menu/case-icon.png"></a>
           <!-- <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a> -->
          <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
        </div>
      </div>
      <div class="menu__btn--settings">
-        <a @click="ChangeAnimation" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
+        <a @click="$router.push({ name: 'settings' })" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
      </div>
    </div>
  </aside>
 </template>
 <script>
 // import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import '@/assets/css/ComponentsStyles/asidebar.css'
 export default {
  name: 'AsideBar-Element',
-  // components: { NotiicationwindowComponent },
+ 
  data() {
    return {
      AnimationOff: false
    }
  },
  // emits: ['animationchange'],
  methods: {
    ChangeAnimation() {
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/luckydiamond/src/components/ChatComponent.vue
@@ -10,13 +10,16 @@
    <div class="chat__content--users">
      <ul>
        <transition-group name="fade">
-          <li
+          <li v-for="msg in array" :key="msg">
-              v-for="msg in array"
+            <div
-              :key="msg"
+              class="card__user"
-          >
+              :class="{
-            <div class="card__user">
+                'mention-message': isCurrentUser(msg),
                'system-message': msg.username === '🛠️ System',
              }"
            >
              <div class="user__icon">
-                <img :src="msg.icon">
+                <img :src="msg.icon" />
              </div>
              <div class="content">
                <h1>{{ msg.username }}</h1>
@@ -28,56 +31,107 @@
      </ul>
    </div>
    <writechat-component @send="ClaimDatamsg"></writechat-component>
    <!-- <div class="chat__mute-button">
      <button @click="muteChat">Mute</button>
    </div> -->
  </aside>
 </template>
 <script>
-import '@/assets/css/ComponentsStyles/chat.css'
+import "@/assets/css/ComponentsStyles/chat.css";
 import { GetChatHistory } from "@/assets/js/rest/RestMethods.js";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import WritechatComponent from "@/components/WritechatComponent.vue";
 import { SendMessageToChat } from "@/assets/js/chat/ChatLogic.js";
-import {eventBus} from "@/main";
+import { eventBus } from "@/main";
 export default {
  components: { WritechatComponent },
-  inject: [ 'eventBus' ],
+  inject: ["eventBus"],
  data() {
    return {
      array: [],
      id: 0,
-    }
+      lastMsgTime: null,
    };
  },
  methods: {
    ScrollToBottom() {
      this.$nextTick(() => {
        const chatContent = this.$el.querySelector(".chat__content--users");
        chatContent.scrollTop = chatContent.scrollHeight;
      });
    },
    isCurrentUser(msg) {
      return msg.msg.includes(GetCookie("SpUserName"));
    },
    ClaimDatamsg(msg) {
-
+      const now = Date.now();
-      SendMessageToChat(msg[0]);
+      if (!this.lastMsgTime || now - this.lastMsgTime >= 2000) {
-
+        SendMessageToChat(msg[0]);
-      // if(this.array.length > 7) {
+        this.lastMsgTime = now;
-      //   this.array.shift()
+      } else {
-      // }
+        alert("Вы не можете отправлять сообщения чаще, чем раз в 2 секунды.");
-    }
+      }
    },
    muteChat() {
      // Mute the chat by disabling the event listener for incoming messages.
      this.eventBus.$off("dataChat");
    },
  },
  mounted() {
-    eventBus.on('dataChat', (dataFromServer) => {
+    eventBus.on("dataChat", (dataFromServer) => {
      try {
-      // Attempt to parse the JSON string
+        const dataObject = JSON.parse(dataFromServer);
      const dataObject = JSON.parse(dataFromServer);
      let imageUrl = "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
-      const MsgUser = {
+        let imageUrl =
-        id: this.id + 1,
+          "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
        msg: dataObject.Message,
        username: dataObject.SpUserName,
        icon: imageUrl
      };
-      this.array.push(MsgUser);
+        const MsgUser = {
-    } catch (error) {
+          id: this.id + 1,
-      console.error('Error parsing JSON data:', error);
+          msg: dataObject.Message,
-    }
+          username: dataObject.SpUserName,
-    })
+          icon: imageUrl,
-  }
+        };
-}
+
        if (MsgUser.username === "🛠️ System") {
          MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
        }
        this.array.push(MsgUser);
        this.ScrollToBottom();
      } catch (error) {
        console.error("Error parsing JSON data:", error);
      }
    });
  },
  created() {
    GetChatHistory().then((response) => {
      if (response && response.length) {
        response.forEach((element) => {
          let imageUrl =
            "https://avatar.spworlds.ru/face/55/" + element.userName;
          const MsgUser = {
            id: this.id + 1,
            msg: element.message,
            username: element.userName,
            icon: imageUrl,
          };
          if (MsgUser.username === "🛠️ System") {
            MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
          }
          this.array.push(MsgUser);
        });
        this.ScrollToBottom();
      }
    });
  },
 };
 </script>
 <style scoped>
--- a/luckydiamond/src/components/DevelopComponent.vue
+++ b/luckydiamond/src/components/DevelopComponent.vue
@@ -0,0 +1,181 @@
 <template>
  <div class="info">
    <div class="top_card">
    <div class="Rafael1209_card">
      <div class="Rafael1209_text_2">
        <div class="Rafael1209_aboutinfo_2">
          <p>Бэкендер</p>
          <h1>Rafael1209</h1>
        </div>
        <div class="Rafael1209_whatjob_2">
          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
          <p>ASP, .NET, MongoDB</p>
        </div>
        <div class="Rafael1209_whatjob2_2">
          <img src="@/assets/icons-developcard/Figma.png" alt="html">
          <p>Designer</p>
        </div>
        </div>
        <div class="Rafael1209_skin_2">
          <div class="Rafael1209_skin_2_skin">
            <div class="Rafael1209_skinicons1">
            <a href="https://t.me/RafaelloChas" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
            <a href="https://discordapp.com/users/773259384095768657" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
            <a href="https://github.com/rafael1209" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
            </div>
          </div>
        </div>
    </div>
    <div class="Hepatir_card">
      <div class="text_2">
        <div class="aboutinfo_2">
          <p>Бэкендер</p>
          <h1>Hepatir</h1>
        </div>
        <div class="whatjob_2">
          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
          <p>ASP, .NET, MongoDB</p>
        </div>
        <div class="whatjob2_2">
          <img src="@/assets/icons-developcard/sql-logo.png" alt="html">
          <p>SQL</p>
        </div>
        </div>
        <div class="skin_2">
          <div class="skin_2_skin">
            <div class="skinicons1">
            <a href="https://t.me/Hepatacor" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
            <a href="https://discordapp.com/users/293977705815343105" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
            <a href="https://github.com/danilt2000/" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
            </div>
          </div>
        </div>
    </div>
    <div class="Ckutls__card">
      <div class="Ckutls__text_2">
        <div class="Ckutls__aboutinfo_2">
          <p>Фронтэндер</p>
          <h1>Ckutls_</h1>
        </div>
        <div class="Ckutls__whatjob_1">
          <img src="@/assets/icons-developcard/html.png" alt="html">
          <p>HTML 5,CSS</p>
        </div>
        <div class="Ckutls__whatjob_2">
          <img src="@/assets/icons-developcard/js.png" alt="html">
          <p>JavaScript</p>
        </div>
        <div class="Ckutls__whatjob_3">
          <img src="@/assets/icons-developcard/Vue.png" alt="html">
          <p>Vue 3</p>
        </div>
        </div>
        <div class="Ckutls__skin_2">
          <div class="Ckutls__skin_2_skin">
            <div class="Ckutls__skinicons1">
            <a href="https://t.me/Ckutls" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
            <a href="https://discordapp.com/users/531420425255911424" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
            <a href="https://github.com/CkutlsGit" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
            </div>
          </div>
        </div>
    </div>
    <div class="FUpir_card">
      <div class="FUpir_text_2">
        <div class="FUpir_aboutinfo_2">
          <p>Дизайнер</p>
          <h1>FUpir</h1>
        </div>
        <div class="FUpir_whatjob_1">
          <img src="@/assets/icons-developcard/Figma.png" alt="html">
          <p>Designer</p>
        </div>
        </div>
        <div class="FUpir_skin_2">
          <div class="FUpir_skin_2_skin">
            <div class="FUpir_skinicons1">
            <a href="https://t.me/Ykropmaha" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
            <a href="https://discordapp.com/users/1126752682183503942" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
            </div>
          </div>
        </div>
    </div>
  </div>
  <div class="bottom_card">
    <div class="megatntmega_card">
      <div class="megatntmega_text">
        <div class="megatntmega_aboutinfo">
          <p>Дизайнер</p>
          <h1>megatntmega</h1>
        </div>
        <div class="megatntmega_whatjob">
          <img src="@/assets/icons-developcard/Figma.png" alt="html">
          <p>Designer</p>
        </div>
        <div class="megatntmega_icons">
          <a href="https://t.me/random_ak" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
          <a href="https://discordapp.com/users/531420425255911424" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
        </div>
      </div>
      <div class="megatntmega_skin">
        </div>
    </div>
    <div class="busha888_card">
      <div class="text">
        <div class="aboutinfo">
          <p>Фронтэндер</p>
          <h1>busha888</h1>
        </div>
        <div class="whatjob">
          <img src="@/assets/icons-developcard/html.png" alt="html">
          <p>HTML 5,CSS</p>
        </div>
        <div class="icons">
          <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" ><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
          <a href="https://t.me/Slayyyyyyyyyyyyyyyyy" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
          <a href="https://www.youtube.com/@busha1/featured" target="_blank" ><img src="@/assets/icons-developcard/like.png" alt=""></a>
          <a href="https://github.com/Madara0330E" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
        </div>
      </div>
      <div class="skin">
        <img src="https://avatar.spworlds.ru/front/212/busha888.png" alt="">
        </div>
    </div>
    <div class="CLARFFY_card">
      <div class="CLARFFY_text">
        <div class="CLARFFY_aboutinfo">
          <p>Дизайнер</p>
          <h1>CLARFFY</h1>
        </div>
        <div class="CLARFFY_whatjob">
          <img src="@/assets/icons-developcard/Figma.png" alt="html">
          <p>Designer</p>
        </div>
        <div class="CLARFFY_icons">
          <a href="https://t.me/LDpoko" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
          <a href="https://discordapp.com/users/784873585852284938" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
        </div>
      </div>
      <div class="CLARFFY_skin">
        <img src="https://avatar.spworlds.ru/front/212//CLARFFY.png" alt="">
        </div>
    </div>
  </div>
  </div>
 </template>
 <script>
 import '@/assets/css/ComponentsStyles/developer.css'
 export default {
 }
 </script>
--- a/luckydiamond/src/components/HeaderComponent.vue
+++ b/luckydiamond/src/components/HeaderComponent.vue
@@ -4,7 +4,7 @@ import "@/assets/css/ComponentsStyles/header.css";
 import { LogIn } from "@/assets/js/authentication/AuthService.js";
 import { GetCurrentMoney } from "@/assets/js/rest/RestMethods.js";
-import {eventBus} from "@/main";
+import { eventBus } from "@/main";
 import {
  SetCookie,
@@ -18,27 +18,31 @@ export default {
    logout() {
      this.auth = false;
      this.balance = 0;
      this.authtoken = "";
      DeleteAllCookie();
    },
    updateBalanceMethod() {
-      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
-          .then(response => {
+        (response) => {
-            this.balance = response.currentMoney
+          this.balance = response.currentMoney;
-          })
+        }
-    }
+      );
      eventBus.emit("Updatebalance-saper");
    },
  },
  data() {
    return {
      balance: 0,
      auth: false,
      authtoken: "",
      imageUrl: "https://avatar.spworlds.ru/face/55/",
      userName: "",
    };
  },
  mounted() {
-    eventBus.on('Updatebalance', () => {
+    eventBus.on("Updatebalance", () => {
-      this.updateBalanceMethod()
+      this.updateBalanceMethod();
-    })
+    });
  },
  created() {
    try {
@@ -47,7 +51,6 @@ export default {
      if (authCode) {
        LogIn(authCode)
          .then((response) => {
            console.log("Auth Data:", response);
            SetCookie("UserId", response.userId);
            SetCookie("SpUserName", response.spUserName);
            SetCookie("AUTHTOKEN", response.authtoken);
@@ -56,10 +59,10 @@ export default {
            this.imageUrl = this.imageUrl + `${response.spUserName}.png`;
            this.userName = response.spUserName;
            this.auth = true;
            this.authtoken = response.authtoken;
            GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
              .then((response) => {
                this.balance = response.currentMoney;
                console.log(response);
              })
              .catch((error) => {
                console.error(error);
@@ -80,6 +83,7 @@ export default {
              this.imageUrl = this.imageUrl + `${currentUserName}.png`;
              this.userName = GetCookie("SpUserName");
              this.auth = true;
              this.authtoken = GetCookie("AUTHTOKEN");
            } else {
              this.auth = false;
              this.balance = 0;
@@ -90,7 +94,6 @@ export default {
        GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
          .then((response) => {
            this.balance = response.currentMoney;
            console.log(response);
          })
          .catch((error) => {
            // Обработка ошибки
@@ -101,6 +104,7 @@ export default {
          this.imageUrl = this.imageUrl + `${currentUserName}.png`;
          this.userName = GetCookie("SpUserName");
          this.auth = true;
          this.authtoken = GetCookie("AUTHTOKEN");
        } else {
          this.auth = false;
          this.balance = 0;
@@ -116,17 +120,43 @@ export default {
  <header class="header">
    <div class="header__content">
      <div class="header__logo">
-        <img @click="$router.push({ name: 'home' })" src="../assets/logo.svg" alt="" />
+        <img
          @click="$router.push({ name: 'home' })"
          src="../assets/logo.svg"
          alt=""
        />
      </div>
      <div class="header__nav">
        <nav>
-          <a href="#" @click="$router.push({ name: 'home' })" :class="{ 'header__nav--now' : $route.name === 'home' }">Главная</a>
+          <a
-          <a href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : $route.name === 'profile' }">Профиль</a>
+            href="#"
-          <a href="#">Помощь</a>
+            @click="$router.push({ name: 'home' })"
            :class="{ 'header__nav--now': $route.name === 'home' }"
            >Главная</a
          >
          <a
            v-if="authtoken !== ''"
            href="#"
            @click="$router.push({ name: 'profile' })"
            :class="{ 'header__nav--now': $route.name === 'profile' }"
            >Профиль</a
          >
          <a
            href="#"
            @click="$router.push({ name: 'help' })"
            :class="{ 'header__nav--now': $route.name === 'help' }"
            >Помощь</a
          >
          <a
            href="#"
            @click="$router.push({ name: 'about' })"
            :class="{ 'header__nav--now': $route.name === 'about' }"
            >О нас</a
          >
        </nav>
      </div>
      <div class="header__balance">
-        <div class="header__content--balance">
+        <div class="header__content--balance" v-if="authtoken">
          <div class="header__card--balance">
            <h2>
              <img src="../assets/icons-header/diamond-ore-icon.png" />{{
@@ -155,7 +185,7 @@ export default {
          <!-- <div class="header__card--auth">  -->
          <div class="auth__card--content">
            <a
-              href="https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify"
+              href="https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify"
              @click="auth = true"
              ><span
                ><img
@@ -164,6 +194,8 @@ export default {
                  src="../assets/icons-header/discord-icon.svg" /></span
              >Вход</a
            >
            <!-- https://media.discordapp.net/attachments/1175674631684898866/1214143880073842698/Undwadtitled.png?ex=65f80a9a&is=65e5959a&hm=9cb0ffffa2bfc6ee9302f8d96be7f8c3049dc04df478dd05cdd94f697c662e1d&=&format=webp&quality=lossless -->
            <!-- https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify-->
          </div>
        </div>
      </div>
--- a/luckydiamond/src/components/HelpComponent.vue
+++ b/luckydiamond/src/components/HelpComponent.vue
@@ -0,0 +1,56 @@
 <template>
    <div class="box_help">
        <div class="Heading_p1">
        <div class="heding2"><h3>Добро пожаловать на Lucky Diamond Casino</h3></div>
        <div class="heding2_text">
        <p><b>Проект "Lucky Diamond Casino" - Представляет собой сайт онлайн-казино на игровую валюту Майнкрафт сервера СПМ.
          В дальнейшем времени возможно будет и на сервере СП.</b></p>
          </div>
        </div>
          <div class="Heading_p1">
            <div class="heding2"><h3>Поддержка</h3></div>
            <div class="heding2_text">
            <p><b>При вопросах или проблемах на сайте обращайтесь в поддержку которая находиться в <a href="https://discord.gg/4ybrEqFzYh">Discord</a></b></p>
                </div>
                <div class="heding2"><h3>Спасибо за помощь</h3></div>
            <div class="heding2_text">
            <p><b>Отдельно хочется выразить благодарность Tsybry и всем кто помогал нам в этом не легком пути</b></p>
            <p><b></b></p>
                </div>
            </div>
              <!-- <div class="questions">
                <div class="questions_box">
                <h3>Спасибо за помощь</h3>
              </div> -->
                <!-- <div class="questions1">
                  <b>Вилкой в глаз, или маму твою ебал?</b>
                  <img src="@\assets\icons-test\lest.png" alt="">
                </div> -->
                <!-- <div class="text_questions">
                 <p><b>Отдельно хочется выразить благодарность всем кто помогал нам в этом не легком пути</b></p> 
                </div> -->
                <!-- <div class="questions2">
                  <b>Вилкой в глаз, или маму твою ебал?</b>
                  <img src="@\assets\icons-test\lest.png" alt="">
                </div> -->
                <div class="Social1where">
                  <div class="Social1text">
                    <b>Наши соц-сети:</b>
                  </div>
                  <div class="Social1icons">
                    <a href="https://t.me/lucky_diamond_spm" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
                    <a href="https://discord.gg/4HhZFY2PEv" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
                  </div>
                </div>
              </div>
 </template>
 <script>
 import '@/assets/css/ComponentsStyles/Help.css'
 export default {
 }
 </script>
--- a/luckydiamond/src/components/NotiicationwindowComponent.vue
+++ b/luckydiamond/src/components/NotiicationwindowComponent.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="notification" v-if="notification">
    <div class="notification__content">
-      <h3>Успешный вывод!</h3>
+      <h3>Операция вывода отправлена</h3>
    </div>
  </div>
 </template>
--- a/luckydiamond/src/components/PaymentsModal.vue
+++ b/luckydiamond/src/components/PaymentsModal.vue
@@ -8,19 +8,27 @@
      />
    </div>
    <div v-if="payments" class="payments-modal__deposit">
      <div class="error-deposit" v-if="errorDeposit">
        <h2>Ошибка с суммой депозита</h2>
      </div>
      <div
        class="deposit-input deposit-text deposit-icon-diamond deposit-icon__input"
      >
        <h3>Сумма пополнения</h3>
        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input class="deposit-amount__input" v-model="amount" type="number" />
+        <input
          :class="{ 'animate-start-btn': errorDeposit }"
          class="deposit-amount__input"
          v-model="amount"
          type="number"
        />
        <div class="deposit-btns">
          <ul class="display-btns btns-style-diamonds">
-            <li v-for="number in PaymentsModalNumbers" :key="number">
+            <li v-for="(number, index) in PaymentsModalNumbers" :key="index">
              <button
-                @click="clickedBtnChoice(number, number.diamonds)"
+                @click="clickedBtnChoice(index, number.diamonds)"
                :class="{
-                  'btn-click': clickedBtn === number,
+                  'btn-click': clickedBtn === index,
                  [number]: clickedBtn === number,
                }"
              >
@@ -30,16 +38,37 @@
          </ul>
        </div>
        <div v-if="showPromocodeStatus" class="error-promocode">
-          <h2 v-if="errorPromocode" class="error-text__promocode">Промокод не найден</h2>
+          <h2 v-if="errorPromocode" class="error-text__promocode">
-          <h2 v-else class="correct-text__promocode">Промокод успешно применён</h2>
+            {{ promoResponse }}
          </h2>
          <h2 v-else class="correct-text__promocode">
            Промокод успешно применён
          </h2>
        </div>
        <div class="deposit-promocode deposit-promocode__padding--input">
          <h3>Промокод</h3>
-          <input @focusout="checkValidationPromocode" v-model="promocode" class="promo-input" type="text" />
+          <div class="promokods">
            <input
              @focusout="checkValidationPromocode"
              v-model="promocode"
              class="promo-input"
              type="text"
            />
            <button class="vvod_promocoda" @click="handleApplyPromoCode">
              Ввод
            </button>
          </div>
        </div>
        <div class="error-checkbox" v-if="errorAgree">
          <h2>Подтвердите согласие!</h2>
        </div>
        <div class="deposit-checkbox checkbox-styles">
-          <input @click="agreeUser = !agreeUser" type="checkbox" />
+          <input
-          <h3>Я согласен с пользовательским соглашением.</h3>
+            @click="agreeUser = !agreeUser"
            type="checkbox"
            :class="{ 'animate-start-btn': errorAgree }"
          />
          <h3>Я согласен с <a href="https://docs.google.com/document/d/1lU_zTWJdD1lcMlIAFDIVz-DlZAoq3a-OFkoO8WBIkzo/edit?usp=sharing">пользовательским соглашением</a></h3>
        </div>
        <div
          class="btn-deposit btn-text-style btn-display-deposit btn-style-payments"
@@ -47,13 +76,7 @@
          <p>
            Вы подтверждаете правильность введенных данных при создании вывода.
          </p>
-          <button
+          <button type="submit" @click="RedirectedMethodDep">Пополнить</button>
            type="submit"
            :disabled="checkOffBtn"
            @click="RedirectedMethodDep"
          >
            Пополнить
          </button>
          <p>
            Перед пополнение прочитайте политику конфиденциальности и
            пользовательское соглашение.
@@ -62,30 +85,53 @@
      </div>
    </div>
    <div v-else class="payments-modal__withdraw deposit-text withdraw-input">
      <div class="error-deposit" v-if="errorDeposit">
        <h2>Ошибка с суммой депозита</h2>
      </div>
      <div class="count-withdraw deposit-icon-diamond">
        <h3>Сумма вывода</h3>
        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input class="with-input" v-model="amountWithdraw" type="number" />
+        <input
          :class="{ 'animate-start-btn': errorDeposit }"
          class="with-input"
          v-model="amountWithdraw"
          type="number"
        />
      </div>
      <div class="error-card" v-if="errorCard">
        <h2>Ошибка с вводом карты</h2>
      </div>
      <div class="number-card deposit-promocode__padding--input">
        <h3>Введите номер карты</h3>
-        <input class="with-input" v-model="card" type="text" />
+        <input
          :class="{ 'animate-start-btn': errorCard }"
          class="with-input"
          v-model="card"
          type="text"
        />
      </div>
-      <div v-if="offAgree" class="error-checkbox">
+      <div class="error-checkbox" v-if="errorAgree">
-        <h2 v-show="errorAgree">Введите сначало карту</h2>
+        <h2>Подтвердите согласие!</h2>
      </div>
      <div class="withdraw-checkbox checkbox-styles">
-        <input :disabled="offAgree" @mouseover="errorAgree = true" @mouseleave="errorAgree = false" @click="agreeUser = !agreeUser" type="checkbox"/>
+        <input @click="agreeUser = !agreeUser" type="checkbox" />
        <h3>Я согласен с пользовательским соглашением.</h3>
      </div>
-      <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser" @captchadata="closeModal"></captcha-component>
+      <div class="error-captcha" v-if="errorCaptcha && agreeUser === true">
        <h2>Пройдите проверку!</h2>
      </div>
      <captcha-component
        @captchatokendata="claimCaptchaToken"
        :showcaptcha="agreeUser"
      ></captcha-component>
      <!-- <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser" @captchadata="closeModal"></captcha-component> -->
      <div
        class="btn-withdraw btn-text-style btn-display-deposit btn-style-payments"
      >
        <p>
          Вы подтверждаете правильность введенных данных при создании вывода.
        </p>
-        <button type="submit" :disabled="checkOffBtn" @click="RedirectedMethodTransferMoneyToSp">
+        <button type="submit" @click="RedirectedMethodTransferMoneyToSp">
          Вывод
        </button>
        <p>
@@ -100,141 +146,268 @@
 <script>
 import "@/assets/css/ComponentsStyles/payments-modal.css";
 import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
-import { GettingMoneyOperation, WithdrawMoneyOperation } from "@/assets/js/moneyoperation/Claimmoney";
+import {
  GettingMoneyOperation,
  WithdrawMoneyOperation,
 } from "@/assets/js/moneyoperation/Claimmoney";
 import CaptchaComponent from "@/components/CaptchaComponent.vue";
 import { eventBus } from "@/main";
 import { useVuelidate } from "@vuelidate/core";
 import {
  maxValue,
  minValue,
  required,
  numeric,
  integer,
  minLength,
  maxLength,
 } from "@vuelidate/validators";
 import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import { ApplyPromoCode } from "@/assets/js/rest/RestMethods.js"; // Замените на правильный путь к файлу с функцией ApplyPromoCode
 export default {
  components: { CaptchaComponent },
  props: ["payments"],
  data() {
    return {
      amount: 0,
-      amountWithdraw: 1,
+      amountWithdraw: 0,
-      amountSave: 1,
+      balance: 0,
-      card: '',
+      card: "",
-      promocode: '',
+      promocode: "",
-      promocodeBase: ['ANTI-GRIF'],
+      promocodeBase: ["ANTI-GRIF"],
      errorPromocode: false,
      showPromocodeStatus: false,
      errorAgree: false,
      errorDeposit: false,
      errorCard: false,
      errorCaptcha: false,
      captchaToken: null,
      clickedBtn: "",
      url: "",
      offBtn: true,
      offAgree: true,
      completeValidtaion: {
        amountsaving: true,
        cardsaving: false,
        agreesaving: false,
-        captchatokensaving: false
+        captchatokensaving: false,
      },
      agreeUser: false,
      PaymentsModalNumbers,
    };
  },
  created() {
    GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
      (response) => {
        this.balance = response.currentMoney;
      }
    );
  },
  setup() {
    return { v$: useVuelidate() };
  },
  validations() {
    return {
      amount: { required, numeric, minValue: minValue(1), integer },
      amountWithdraw: {
        required,
        numeric,
        minValue: minValue(1),
        maxValue: maxValue(this.balance),
        integer,
      },
      card: {
        required,
        numeric,
        minLength: minLength(5),
        maxLength: maxLength(5),
        integer,
      },
    };
  },
  watch: {
-    amount(newAmount) {
+    amount(DepositCount) {
-      this.offBtn = true;
+      console.log(DepositCount);
-      if (this.amount > 0 && this.amount !== "") {
+      if (![1, 5, 10, 50, 100, 1000].includes(DepositCount)) {
-        setTimeout(() => {
+        this.clickedBtn = null;
-          try {
+      } else {
-            GettingMoneyOperation(newAmount).then((response) => {
+        let index;
-              console.log("Payments Modal Working!: ", response);
+        switch (DepositCount) {
-              this.url = response;
+          case 1:
-              this.offBtn = false;
+            index = 0;
-            });
+            break;
-          } catch (e) {
+          case 5:
-            console.error("Error in PaymentModal!", e);
+            index = 1;
-          }
+            break;
-        }, 2000);
+          case 10:
-      }
+            index = 2;
-    },
+            break;
-    amountWithdraw(newAmount) {
+          case 50:
-      this.completeValidtaion.amountsaving = false
+            index = 3;
-      if (newAmount > 0) {
+            break;
-        this.amountSave = newAmount
+          case 100:
-        this.completeValidtaion.amountsaving = true
+            index = 4;
-        console.log(this.completeValidtaion)
+            break;
-      }
+          case 1000:
-    },
+            index = 5;
-    card(newAmount) {
+            break;
-      this.completeValidtaion.cardsaving = false
+        }
-      const cardPattern = /^\d{5}$/;
+        this.clickedBtnChoice(index, DepositCount);
      if(cardPattern.test(newAmount)) {
        this.offAgree = false
        this.completeValidtaion.cardsaving = true
      }
    },
    agreeUser(newAgree) {
      this.completeValidtaion.agreesaving = false
      if (newAgree !== false) {
        this.completeValidtaion.agreesaving = true
      }
    },
    completeValidtaion: {
      handler() {
-        this.completeValidationCheck()
+        this.completeValidationCheck();
      },
-      deep: true
+      deep: true,
    }
  },
  computed: {
    checkOffBtn() {
      return this.checkBtn();
    },
  },
  methods: {
    closeModal() {
      return this.$emit("closemodal");
    },
-    checkValidationPromocode() {
+    // checkValidationPromocode() {
-      this.errorPromocode = !this.promocodeBase.includes(this.promocode);
+    //   this.errorPromocode = !this.promocodeBase.includes(this.promocode);
-      this.showPromocodeStatus = true
+    //   this.showPromocodeStatus = true
-    },
+    // },
    completeValidationCheck() {
-      this.offBtn = true
+      this.offBtn = true;
      if (
-          this.completeValidtaion.amountsaving &&
+        this.completeValidtaion.amountsaving &&
-          this.completeValidtaion.cardsaving &&
+        this.completeValidtaion.cardsaving &&
-          this.completeValidtaion.agreesaving &&
+        this.completeValidtaion.agreesaving &&
-          this.completeValidtaion.captchatokensaving
+        this.completeValidtaion.captchatokensaving
      ) {
-        this.offBtn = false
+        this.offBtn = false;
      }
    },
    claimCaptchaToken(Token) {
-      this.captchaToken = Token
+      this.captchaToken = Token;
-      this.completeValidtaion.captchatokensaving = true
+      this.completeValidtaion.captchatokensaving = true;
    },
-    RedirectedMethodDep() {
+    async handleApplyPromoCode() {
-      console.log(`From /profile to - ${this.url} url`)
+      const authToken = GetCookie("AUTHTOKEN");
-      window.location.href = this.url
+      const searchToken = GetCookie("SearchToken");
      try {
        const response = await ApplyPromoCode(
          authToken,
          searchToken,
          this.promocode
        );
        console.log(response);
        if (response === "Promo dont exist.") {
          this.showPromocodeStatus = true;
          this.errorPromocode = true;
          this.promoResponse = "Промокод не найден";
        } else if (response === "promotional code has expired") {
          this.showPromocodeStatus = true;
          this.errorPromocode = true;
          this.promoResponse = "Не действителен";
        } else if (response === "User is alredy use the promo") {
          this.showPromocodeStatus = true;
          this.errorPromocode = true;
          this.promoResponse = "Уже использован";
        } else {
          this.showPromocodeStatus = true;
          this.errorPromocode = false;
          this.promoResponse = response;
        }
      } catch (error) {
        console.error("Ошибка при применении промокода:", error);
      }
    },
-    async RedirectedMethodTransferMoneyToSp() {
+    async RedirectedMethodDep() {
-      setTimeout(async () => {
+      this.v$.$touch();
      if (this.v$.amount.$error) {
        this.errorDeposit = true;
        setTimeout(() => {
          this.errorDeposit = false;
        }, 1500);
      }
      if (this.agreeUser !== true) {
        this.errorAgree = true;
        setTimeout(() => {
          this.errorAgree = false;
        }, 1500);
      }
      if (!this.v$.amount.$error && this.agreeUser === true) {
        try {
-          WithdrawMoneyOperation(this.amountSave, this.card.toString(), this.captchaToken).then((response) => {
+          GettingMoneyOperation(this.amount).then((response) => {
-            console.log(`work withdraw - ${response}`)
+            console.log("Payments Modal Working!: ", response);
-          })
+            this.url = response;
-        }
+            this.offBtn = false;
-        catch (e) {
+
-          console.error(`Error in wihdrawmoney operation - ${e}`)
+            window.location.href = this.url;
-        }
+          });
-        await this.$emit('notifacetionmoney')
+        } catch (e) {
-      }, 4000)
+          console.error("Error in PaymentModal!", e);
    },
    checkBtn() {
      if (this.offBtn === false) {
        if (this.agreeUser !== false) {
          return false;
        }
      }
-      return true;
+    },
    async RedirectedMethodTransferMoneyToSp() {
      this.v$.$touch();
      if (this.v$.amountWithdraw.$error) {
        this.errorDeposit = true;
        setTimeout(() => {
          this.errorDeposit = false;
        }, 1500);
      }
      if (this.v$.card.$error) {
        this.errorCard = true;
        setTimeout(() => {
          this.errorCard = false;
        }, 1500);
      }
      if (this.agreeUser !== true) {
        this.errorAgree = true;
        setTimeout(() => {
          this.errorAgree = false;
        }, 1500);
      }
      if (this.captchaToken === null) {
        this.errorCaptcha = true;
        setTimeout(() => {
          this.errorCaptcha = false;
        }, 1500);
      }
      if (
        !this.v$.amountWithdraw.$error &&
        !this.v$.card.$error &&
        this.agreeUser === true &&
        this.captchaToken !== null
      ) {
        WithdrawMoneyOperation(
          this.amountWithdraw,
          this.card.toString(),
          this.captchaToken
        ).then(async (response) => {
          try {
            console.log("work", response);
          } catch (e) {
            console.error(e);
          }
          await this.$emit("notifacetionmoney");
          eventBus.emit("Updatebalance");
        });
      }
    },
    clickedBtnChoice(index, content) {
      this.clickedBtn = index;
      this.amount = content;
      console.log(index);
    },
  },
 };
--- a/luckydiamond/src/components/WritechatComponent.vue
+++ b/luckydiamond/src/components/WritechatComponent.vue
@@ -42,18 +42,21 @@ export default {
      }
    },
    SendmsgData() {
-      const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
+      // const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
-      this.$emit("send", [formattedWord, this.username, this.icon]);
+      this.$emit("send", [this.msg, this.username, this.icon]);
      this.msg = "";
    },
-    InsertSpaceEvery24Chars(word) {
+    // InsertSpaceEvery24Chars(text) {
-      let result = "";
+    //   let result = "";
-      for (let i = 0; i < word.length; i += 22) {
+    //   for (let i = 0; i < text.length; i++) {
-        result += word.substring(i, i + 22) + " ";
+    //     if (i > 0 && i % 24 === 0) {
-      }
+    //       result += " ";
-      return result.trim();
+    //     }
-    },
+    //     result += text[i];
    //   }
    //   return result;
    // },
  },
 };
 </script>
--- a/luckydiamond/src/components/adaptive-components/@/assets/icons-adaptive/home-adaptive/icon-home-menu.png
+++ b/luckydiamond/src/components/adaptive-components/@/assets/icons-adaptive/home-adaptive/icon-home-menu.png
--- a/luckydiamond/src/components/games-components/CrashGraphComponent.vue
+++ b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
@@ -0,0 +1,131 @@
 <template>
  <div class="time" v-if="crashdata.Status === 'WaitingForPlayers'">
    <h2>
      {{ crashdata.WaitingTime ? crashdata.WaitingTime.toFixed(1) : "" }} сек.
    </h2>
  </div>
  <LineChart :chart-data="data" :options="options" v-else />
  <h2 class="ratio" :class="{ 'lost-ratio': crashdata.Status === 'GameEnd' }">
    {{ crashdata.CurrentX ? crashdata.CurrentX.toFixed(2) : "" }}x
  </h2>
 </template>
 <script>
 import { LineChart } from "vue-chart-3";
 import {
  Chart,
  LineController,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
 } from "chart.js";
 Chart.register(
  LineController,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement
 );
 export default {
  components: { LineChart },
  props: {
    crashdata: Object,
  },
  mounted() {
    this.data = this.chartData;
    this.updateData();
  },
  data() {
    return {
      dataValues: [],
      numberGraph: 1,
      labels: [" "],
      data: null,
      options: {
        plugins: {
          title: {
            text: "Line",
          },
        },
        scales: {
          x: {
            grid: {
              display: false,
            },
          },
          y: {
            grid: {
              display: false,
            },
          },
        },
        animation: false,
      },
    };
  },
  computed: {
    chartData() {
      return {
        labels: this.labels,
        datasets: [
          {
            label: "Foo",
            data: this.dataValues,
            borderColor: "#4E5EF2",
            pointStyle: "circle",
            pointRadius: 0,
            pointHoverRadius: 2,
          },
        ],
      };
    },
  },
  watch: {
    crashdata: {
      handler: "updateData",
      immediate: true,
    },
  },
  methods: {
    updateData() {
      let nextDataValue;
      if (this.crashdata.Status === "WaitingForPlayers") {
        this.data = this.chartData;
        this.labels = [""];
        this.dataValues = [this.numberGraph, this.numberGraph];
      } else if (this.crashdata.Status === "InGame") {
        if (this.dataValues.length === 0) {
          this.dataValues = [this.crashdata.CurrentX, this.crashdata.CurrentX];
          nextDataValue = this.crashdata.CurrentX;
          this.numberGraph = this.crashdata.CurrentX;
          this.data = this.chartData;
          this.labels.push("");
          this.dataValues.push(nextDataValue);
        }
        this.numberGraph = this.numberGraph + 0.01;
        nextDataValue = this.numberGraph;
        this.data = this.chartData;
        this.labels.push("");
        this.dataValues.push(nextDataValue);
      } else if (this.crashdata.Status === "GameEnd") {
        this.dataValues = [];
        this.numberGraph = 1;
      } else {
        console.log("Error game");
      }
    },
  },
 };
 </script>
 <style>
 </style>
--- a/luckydiamond/src/mocks/DevelopersOptions.js
+++ b/luckydiamond/src/mocks/DevelopersOptions.js
@@ -0,0 +1,66 @@
 export default [
    {
        id: 1,
        username: "Rafael1209",
        userRole: "Бэкендер",
        background: "#636363",
        technologyText: ["ASP,.NET,MongoDB", "Designer"],
        technologyIcons: ["csharp-logo", "figma"],
        socialIcons: ["telegram", "discord", "github"],
    },
    {
        id: 2,
        username: "Hepatir",
        userRole: "Бэкендер",
        background: "#413C3B",
        technologyText: ["ASP,.NET,MongoDB", "SQL"],
        technologyIcons: ["csharp-logo", "sql-logo"],
        socialIcons: ["telegram", "discord", "github"],
    },
    {
        id: 3,
        username: "Ckutls_",
        userRole: "Фронтэндер",
        background: "#B88484",
        technologyText: ["html 5, css", "JavaScript", "Vue 3"],
        technologyIcons: ["html", "js", "vue"],
        socialIcons: ["telegram", "discord", "github"],
    },
    {
        id: 4,
        username: "FUpir",
        userRole: "Дизайнер",
        background: "#C58E74",
        technologyText: ["Designer"],
        technologyIcons: ["figma"],
        socialIcons: ["telegram", "discord"],
    },
    {
        id: 5,
        username: "megatntmega",
        userRole: "Дизайнер",
        background: "#393A3A",
        technologyText: ["Designer"],
        technologyIcons: ["figma"],
        socialIcons: ["telegram", "discord"]
    },
    {
        id: 6,
        username: "busha888",
        userRole: "Фронтэндер",
        background: "#742271",
        technologyText: ["html 5, css"],
        technologyIcons: ["html"],
        socialIcons: ["odniclasniki", "telegram", "like", "github"],
    },
    {
        id: 7,
        username: "CLARFFY",
        userRole: "Дизайнер",
        background: "#E2B374",
        technologyText: ["Designer"],
        technologyIcons: ["figma"],
        socialIcons: ["telegram", "discord"]
    }
 ]
--- a/luckydiamond/src/mocks/GameModes.js
+++ b/luckydiamond/src/mocks/GameModes.js
@@ -6,7 +6,7 @@ export default [
    },
    {
        id: 2,
-        title: 'кейсы',
+        title: 'джекпот',
        players: 0
    },
    {
--- a/luckydiamond/src/mocks/JackpotNumbers.js
+++ b/luckydiamond/src/mocks/JackpotNumbers.js
@@ -0,0 +1,20 @@
 export default [
    {
        diamonds: 1,
    },
    {
        diamonds: 5,
    },
    {
        diamonds: 10,
    },
    {
        diamonds: 50,
    },
    {
        diamonds: 100,
    },
    {
        diamonds: 'max',
    }
 ]
--- a/luckydiamond/src/pages/AboutPage.vue
+++ b/luckydiamond/src/pages/AboutPage.vue
@@ -0,0 +1,37 @@
 <template>
  <div class="content-grid--about">
    <aside-bar-component></aside-bar-component>
    <section class="about">
    <develop-component></develop-component>
    </section>
    <header-component></header-component>
  </div>
 </template>
 <script>
 import DevelopComponent from "@/components/DevelopComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 export default {
  data() {
    return {
      Object: {
        bg: "value",
        nickname: "value",
        icons: {},
        textTacholgy: { text1: "text2" },
      },
    };
  },
  name: "HelpPage",
  components: {
    HeaderComponent,
    AsideBarComponent,
    DevelopComponent,
  },
 };
 </script>
--- a/luckydiamond/src/pages/BanPage.vue
+++ b/luckydiamond/src/pages/BanPage.vue
@@ -0,0 +1,20 @@
 <template>
 <body class="banpage--body">
    <div class="banpage--block">
    <center><h1>Вы были заблокированны на проекте LuckyDiamond</h1></center>
    <center><iframe class="banpage--video" width="560" height="315" src="https://www.youtube.com/embed/XeoS-zsGVCs?si=zLlKqDQIzvqOzFjW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
 </div>
 </body>
 </template>
  <script>
  import '@/assets/css/PagesStyles/BanPage.css'
  </script>
  <style scoped>
  </style>
--- a/luckydiamond/src/pages/HelpPage.vue
+++ b/luckydiamond/src/pages/HelpPage.vue
@@ -0,0 +1,47 @@
 <template>
  <div class="content-grid--help">
    <aside-bar-component></aside-bar-component>
    <header-component></header-component>
    <section class="help">
      <Help-component></Help-component>
    </section>
    <chat-component></chat-component>
  </div>
 </template>
  <script>
 import HelpComponent from "@/components/HelpComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 export default {
  data() {
    return {
      Object: {
        bg: "value",
        nickname: "value",
        icons: {},
        textTacholgy: { text1: "text2" },
      },
    };
  },
  components: {
    HeaderComponent,
    AsideBarComponent,
    HelpComponent,
    ChatComponent,
  },
 };
 </script>
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -11,7 +11,16 @@
      <div class="main__content">
        <h3>онлайн-казино</h3>
        <h1>lucky diamond</h1>
-        <h4>minecraft casino - <span :class="{ 'animate__text--main__block': !AnimationOff, 'default__text--main__block': AnimationOff }">spm</span></h4>
+        <h4>
          minecraft casino -
          <span
            :class="{
              'animate__text--main__block': !AnimationOff,
              'default__text--main__block': AnimationOff,
            }"
            >spm</span
          >
        </h4>
      </div>
    </main>
@@ -23,16 +32,18 @@
      <div class="gamemode__content--card">
        <div class="gamemode__main bg-card">
          <ul>
-            <li
+            <li v-for="mode in mainGameMode" :key="mode.id">
                v-for="mode in mainGameMode"
                :key="mode.id"
            >
              <div class="line__content">
                <h3 class="title-firstline">{{ mode.title }}</h3>
                <div class="line__footer">
-                  <img src="../assets/icons-gamemodes/bomb-icon.svg">
+                  <img src="../assets/icons-gamemodes/bomb-icon.svg" />
-                  <div class="line__btn--main">
+                  <div>
-                    <a href="#" @click="$router.push({ name: 'saper' })" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <a
                      href="#"
                      @click="$router.push({ name: 'saper' })"
                      class="line__btn"
                      >play <span class="line__btn--elm--saper"></span></a
                    >
                  </div>
                </div>
              </div>
@@ -43,58 +54,66 @@
          <div class="gamemode__firstline bg-card">
            <ul>
              <li
-                  v-for="mode in firstlineGameMode"
+                v-for="mode in firstlineGameMode"
-                  :key="mode.id"
+                :key="mode.id"
-                  class="display-firstline"
+                class="display-firstline"
              >
                <div :class="'linecontent-' + mode.id">
                  <div class="container">
-                    <h1 class="title-firstline">{{ mode.title }}</h1>
+                    <h1 class="title-jackpot">{{ mode.title }}</h1>
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
                    <a
                      href="#"
                      @click="$router.push({ name: 'jackpot' })"
                      class="line__btn__jackpot"
                      >   play <span class="line__btn--elm"></span></a
                    >
                  </div>
                </div>
-                <div class="line__img">
+                <div class="line__img__jackpot">
-                  <img src="@/assets/icons-gamemodes/case-icon.png">
+                  <img src="@/assets/icons-gamemodes/jackpot_icon.svg" />
                </div>
              </li>
            </ul>
          </div>
          <div class="gamemode__twolines">
-            <div class="gamemode__twoline--first__element bg-card">
+            <div class="gamemode__twoline--first__element bg-early">
              <ul>
-                <li
+                <li v-for="mode in twolinefirstelementGameMode" :key="mode">
                    v-for="mode in twolinefirstelementGameMode"
                    :key="mode"
                >
                  <div :class="'linecontent-' + mode.id">
-                    <h3 class="title-twoline">{{ mode.title }}</h3>
+                    <h3 class="title-twoline">скоро</h3>
                  </div>
                  <div class="container">
-                    <a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a>
+                    <a href="#" class="cumming_soon_btn"
-                    <img src="@/assets/icons-gamemodes/slots-icon.png">
+                      >play <span class="line__btn--elm"></span></a
                    >
                    <img src="@/assets/icons-gamemodes/slots-icon.png" class="cumming_soon--img" />
                  </div>
                </li>
              </ul>
            </div>
            <div class="gamemode__twoline--two__element bg-card">
              <ul>
-                <li
+                <li v-for="mode in twolinetwoelementGameMode" :key="mode.id">
                    v-for="mode in twolinetwoelementGameMode"
                    :key="mode.id"
                >
                  <div :class="'linecontent-' + mode.id">
                    <h3 class="title-twoline">{{ mode.title }}</h3>
                  </div>
                  <div class="container">
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
-                    <img src="@/assets/icons-gamemodes/crush-icon.svg">
+                    <a
                      href="#"
                      @click="$router.push({ name: 'crash' })"
                      class="line__btn--crash"
                      >play <span class="line__btn--elm"></span></a
                    >
                    <img class="crash--img" src="@/assets/icons-gamemodes/crush-icon.svg" />
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
-        </div>
+      </div>
    </section>
  </div>
 </template>
@@ -102,20 +121,25 @@
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import GameModes from "@/mocks/GameModes";
-import '@/assets/css/PagesStyles/home.css'
+import "@/assets/css/PagesStyles/home.css";
 export default {
-  name: 'HomePage',
+  name: "HomePage",
-  components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
+  components: {
    AsideBarComponent,
    HeaderComponent,
    ChatComponent,
    HomemobilePage,
  },
  data() {
    return {
      GameModes,
      AnimationOff: false,
      mobile: false,
-    }
+    };
  },
  methods: {
    // claimSettings(value) {
@@ -128,30 +152,29 @@ export default {
    // }
  },
  mounted() {
-    this.checkWindowSize()
+    this.checkWindowSize();
-    this.AddWindowListener()
+    this.AddWindowListener();
  },
  beforeUnmount() {
-    this.RemoveWindowListener()
+    this.RemoveWindowListener();
  },
  computed: {
    mainGameMode() {
-      return this.GameModes.filter(mode => [1].includes(mode.id))
+      return this.GameModes.filter((mode) => [1].includes(mode.id));
    },
    firstlineGameMode() {
-      return this.GameModes.filter(mode => [2].includes(mode.id))
+      return this.GameModes.filter((mode) => [2].includes(mode.id));
    },
    twolinefirstelementGameMode() {
-      return this.GameModes.filter(mode => [3].includes(mode.id))
+      return this.GameModes.filter((mode) => [3].includes(mode.id));
    },
    twolinetwoelementGameMode() {
-      return this.GameModes.filter(mode => [4].includes(mode.id))
+      return this.GameModes.filter((mode) => [4].includes(mode.id));
-    }
+    },
-  }
+  },
-}
+};
 </script>
 <style scoped>
 </style>
--- a/luckydiamond/src/pages/ProfilePage.vue
+++ b/luckydiamond/src/pages/ProfilePage.vue
@@ -2,11 +2,8 @@
  <profilemobile-page v-if="mobile"></profilemobile-page>
  <div class="content__grid-profile" v-else>
    <aside-bar-component></aside-bar-component>
-
+    <chat-component></chat-component>
    <chat-component id="chat-profile"></chat-component>
    <header-component></header-component>
  <section class="profile">
    <div class="profile__content">
      <img class="profile__user--img" :src="imageUrl">
@@ -23,19 +20,28 @@
      <div class="payments__content">
        <div class="payments__types">
          <div class="types types-margin types-text">
-            <h3>Игрок и вид транзакции</h3>
+            <div class="playerandvid">
            <h3>Вид транзакции</h3>
          </div>
            <div class="data1">
            <h3>Дата</h3>
          </div>
            <div class="summa1">
            <h3>Сумма</h3>
          </div>
          </div>
          <div class="types-line"></div>
        </div>
        <div class="hisorypaymond">
        <div class="payments__history">
          <div class="payments__card" v-for="payment in arrayHistory" :key="payment.id">
            <div class="user-info">
              <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
-              <div class="user-name user-name__text">
+              <div class="user-name user-name__text" :class="{ 'withdraw-color1': payment.name }">
                <h3>{{ payment.name }}</h3>
-                <p>{{ payment.comment }}</p>
+              </div>
              <div class="user-name1 user-name1__text">
                <h3>{{ payment.name1 }}</h3>
              </div>
            </div>
            <div class="data-info data-info__text">
@@ -45,7 +51,9 @@
              <h3>{{ payment.amount }} АР</h3>
            </div>
          </div>
-        </div>
+          </div>
      </div>
      </div>
    </div>
  </section>
@@ -53,19 +61,17 @@
    <notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
  </div>
 </template>
 <script>
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import axios from 'axios';
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import PaymentsModal from "@/components/PaymentsModal.vue";
 import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
 import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import '@/assets/css/PagesStyles/profile.css'
 import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
 export default {
  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
  data() {
@@ -80,18 +86,35 @@ export default {
      arrayHistory: [],
    }
  },
  emits: ['notificationremove'],
  mounted() {
    this.checkWindowSize()
    this.AddWindowListener()
  },
  beforeUnmount() {
    this.RemoveWindowListener()
  },
  created() {
    axios.post('https://spsystemcore20231122004605.azurewebsites.net/api/Payment/GetPaymentHistory', {
      searchToken: GetCookie('SearchToken'),
      authtoken: GetCookie('AUTHTOKEN')
    })
    .then(response => {
      // Обработка полученных данных
      const paymentHistory = response.data.paymentHistory;
      paymentHistory.forEach(payment => {
        if (payment.amount > 0) {
          this.claimDataDeposit(payment.amount,payment.utcDate); // Добавление депозита в историю
        } else {
          this.claimDataWithdraw(-payment.amount,payment.utcDate); // Добавление вывода в историю
        }
      });
    })
    .catch(error => {
      console.error('Error fetching hisorypaymond:', error);
    });
    this.username = GetCookie('SpUserName')
    GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
        .then((response) => {
          this.balance = response.currentMoney
@@ -100,7 +123,6 @@ export default {
        .catch((error) => {
          console.error('error in profile, get money', error)
        })
    this.imageUrl = `https://avatar.spworlds.ru/front/256/${this.username}`
  },
  methods: {
@@ -118,34 +140,63 @@ export default {
    },
    NotificationMethod() {
      this.notification = false
    },
    formatNumber(number) {
      return number < 10 ? `0${number}` : number;
    },
    getCurrentFormattedDate() {
      const currentDate = new Date();
      return `${this.formatNumber(currentDate.getDate())}.${this.formatNumber(currentDate.getMonth() + 1)}.${currentDate.getFullYear()}, ${this.formatNumber(currentDate.getHours())}:${this.formatNumber(currentDate.getMinutes())}`;
    },
    claimDataDeposit(amount, utcDate) {
  const historyPayments = {
    name1: 'Пополнение',
    data: this.formatTime(utcDate),
    amount: amount
  }
  this.arrayHistory.unshift(historyPayments);
 },
 claimDataWithdraw(amount, utcDate) {
  const historyPayments = {
    name: 'Вывод',
    data: this.formatTime(utcDate),
    amount: -amount
  }
  this.arrayHistory.unshift(historyPayments);
 },
 formatTime(utcDate) {
  const dateUTC = new Date(utcDate);
  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const currentTime = new Date();
  const diffTime = currentTime - dateUTC;
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
  const diffMinuts = Math.floor(diffTime/(1000*60));
  if (diffDays < 7)
  {
    if (diffDays > 0)
    {
      return `${diffDays} ${diffDays === 1 ? 'день' : 'дня'} назад`;
    }
-    // formatNumber(number) {
+    else if(diffHours >0)
-    //   return number < 10 ? `0${number}` : number;
+    {
-    // },
+      return `${diffHours} ${diffHours === 1 ? 'час' : 'часа'} назад`;
-    // getCurrentFormattedDate() {
+    }
-    //   const currentDate = new Date();
+    else{
-    //   return `${this.formatNumber(currentDate.getDate())}.${this.formatNumber(currentDate.getMonth() + 1)}.${currentDate.getFullYear()}, ${this.formatNumber(currentDate.getHours())}:${this.formatNumber(currentDate.getMinutes())}`;
+      return `${diffMinuts} ${diffMinuts === 1 ? 'минута' : 'минут'} назад`;
-    // },
+    }
-    // claimDataDeposit(amount) {
+  }
-    //   const historyPayments = {
+  else
-    //     name: 'TEST USER',
+  {
-    //     comment: 'test',
+    return dateUTC.toLocaleString('ru-RU', { timeZone: userTimeZone });
-    //     data: this.getCurrentFormattedDate(),
+  }
-    //     amount: amount
+}
-    //   }
+
    //
    //   this.arrayHistory.unshift(historyPayments)
    // },
    // claimDataWithdraw(amount) {
    //   const historyPayments = {
    //     name: 'TEST USER',
    //     comment: 'test',
    //     data: this.getCurrentFormattedDate(),
    //     amount: -amount
    //   }
    //
    //   this.arrayHistory.unshift(historyPayments)
    // }
  }
 }
 </script>
--- a/luckydiamond/src/pages/SettingsPage.vue
+++ b/luckydiamond/src/pages/SettingsPage.vue
@@ -0,0 +1,69 @@
 <template>
  <div class="content__grid-profile">
    <aside-bar-component></aside-bar-component>
    <chat-component></chat-component>
    <header-component></header-component>
    <section class="settings">
      <!-- <div id="volume-control">
    <button id="volume-up" @click="volumeUp">+</button>
    <button id="volume-down" @click="volumeDown">-</button>
  </div>
     -->
      <div class="volume-section">
        <h1 class="volume-text">Звук</h1>
        <input
          id="volumeControl"
          type="range"
          min="0"
          max="10"
          v-model="volume"
          @input="handleVolumeChange"
          ref="volumeControl"
        />
        <h1 class="volume-text--grey">Данная страница находится в разработке, и будет полностью переделанна</h1>
      </div>
    </section>
  </div>
 </template>
 <script>
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import {
  SaveToLocalStorage,
  GetFromLocalStorage,
 } from "@/assets/js/storage/LocalStorage";
 import "@/assets/css/PagesStyles/settings.css";
 export default {
  components: {
    ChatComponent,
    HeaderComponent,
    AsideBarComponent,
  },
  data() {
    return {
      volume: 5, // Значение по умолчанию, на случай, если в LocalStorage ничего нет
    };
  },
  methods: {
    handleVolumeChange() {
      const volume = this.$refs.volumeControl.value;
      SaveToLocalStorage("volume", volume);
      // Транслировать изменение громкости глобально
    },
  },
  created() {
    const storedVolume = GetFromLocalStorage("volume"); // Убедитесь, что этот метод существует и правильно работает
    if (storedVolume !== null) {
      this.volume = storedVolume;
    }
  },
 };
 </script>
--- a/luckydiamond/src/pages/games-pages/CrashgamePage.vue
+++ b/luckydiamond/src/pages/games-pages/CrashgamePage.vue
@@ -0,0 +1,321 @@
 <template>
  <div class="grid-crash">
    <aside-bar-component></aside-bar-component>
    <chat-component></chat-component>
    <header-component></header-component>
    <div class="crash-content">
      <section class="crash-game">
        <div class="crash-game__content">
          <div class="crash-game__start-window">
            <h2 class="crash__game-name">Краш</h2>
            <p>Жди момента и забирай выигрыш</p>
            <div class="crash-game-window__inputs">
              <div class="crash-deposit">
                <h3 class="crash-label">Сумма депозита</h3>
                <div class="crash-input-deposit">
                  <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
                  <input class="input-style-crash input-style-crash__text diamond-input-crash" type="number" v-model="amountDeposit">
                  <div class="diamonds__btns btn-style__diamonds">
                    <ul class="diamonds-btns__display">
                      <li v-for="(item, index) in SaperNumbers" :key="index">
                        <button @click="clickedBtnChoice(index, item.diamonds)" :class="{ 'btn-click': clickedBtn === index, [index]: clickedBtn === index }" :id="item.diamonds === 'max' ? 'max-button' : null" v-if="item.diamonds !== undefined">{{ item.diamonds }}</button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="error-block" v-if="ErrorClick">
              <h2>{{ textError }}</h2>
            </div>
            <div class="crash-game-window__btn-start">
              <button v-if="startGame && crashObject.Status !== 'WaitingForPlayers'" @click="clickClaimDep" class="claim-btn-crash__prize">Забрать {{ getUserPrize.toFixed(2) }} АР</button>
              <button v-if="startGame && crashObject.Status === 'WaitingForPlayers'" class="waiting-btn-crash">Ожидание игроков...</button>
              <button v-if="!startGame" :disabled="offBtn" @click="clickPlayBtn" :class="{ 'animate-start-btn': ErrorClick }">Начать игру</button>
            </div>
            <div class="crash-window__line">
              <div class="line-crash">
              </div>
            </div>
          </div>
          <div class="crash-game__graph">
            <crash-graph-component :crashdata="crashObject"></crash-graph-component>
          </div>
        </div>
      </section>
      <section class="crash-game__players" v-if="crashObject && crashObject.Players">
        <div class="crash-game-players__content">
          <ul class="user-list" v-if="crashObject.Players.length">
            <li class="user-crash" v-for="(player, index) in crashObject.Players.sort((a, b) => b.Bid - a.Bid)" :key="index">
              <div class="user-crash-content" :class="{ 'user-crash-content__lose' : crashObject.Status === 'GameEnd' && player.WinningX <= 0, 'user-crash-content__win' : player.WinningX >= 1 }">
                <div class="user-name-crash">
                  <img class="user-crash__icon" :src="`https://avatar.spworlds.ru/face/55/${player.UserName}`">
                  <h2>{{ player.UserName }}</h2>
                </div>
                <div class="user-bid-crash">
                  <h2 v-if="player.WinningMoney >= 1" class="wingame__win-bid-crash">{{ player.WinningMoney.toFixed(2) }}</h2>
                  <h2 v-else>{{ player.Bid }}</h2>
                  <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
                </div>
                <div class="user-game-status-crash">
                  <h2 class="ingame-crash" v-if="crashObject.Status === 'WaitingForPlayers' && player.WinningX <= 1 || crashObject.Status === 'InGame' && player.WinningX <= 0">В&nbsp;игре</h2>
                  <h2 class="lostgame-crash" v-if="crashObject.Status === 'GameEnd' && player.WinningX <= 0">Проиграл</h2>
                  <h2 class="wingame-crash" v-if="player.WinningX >= 1">{{ player.WinningX.toFixed(2) }}x</h2>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
 </template>
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
 import { useVuelidate } from '@vuelidate/core'
 import { maxValue, minValue, required, numeric, integer } from "@vuelidate/validators";
 import '@/assets/css/PagesStyles/games-pages/crash.css'
 import SaperNumbers from "@/mocks/SaperNumbers";
 import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
 import {GetCookie} from "@/assets/js/storage/CookieStorage";
 import {eventBus} from "@/main";
 import {ExitAndTakeMoneyFromCrashGame, JoinCrashGame} from "@/assets/js/games/crash/CrashAPI";
 export default {
  components: { HeaderComponent, AsideBarComponent, ChatComponent, CrashGraphComponent },
  data() {
    return {
      SaperNumbers,
      clickedBtn: null,
      ErrorClick: false,
      ErrorJoin: false,
      balance: 0,
      amountDeposit: 0,
      crashObject: '',
      textError: '',
      startGame: false,
      offBtn: false
    }
  },
  setup() {
    return { v$: useVuelidate() }
  },
  computed: {
    getUserPrize() {
      let User = this.crashObject.Players.find(player => player.UserName === GetCookie('SpUserName'))
      if (User) {
        return User.Bid * this.crashObject.CurrentX
      }
      return 0
    }
  },
  mounted() {
    eventBus.on('crash', (dataCrash) => {
      try {
        const dataCrashParse = JSON.parse(dataCrash)
        this.crashObject = dataCrashParse
        // console.log(this.crashObject)
      }
      catch (e) {
       console.error(e)
      }
      if (this.crashObject.Status === 'GameEnd' && this.startGame === true && this.crashObject.Players.some(player => player.UserName === GetCookie('SpUserName'))) {
        this.startGame = false
        this.updateUserMoney()
      }
      if (
          this.crashObject.Players.some(player =>
              player.UserName === GetCookie('SpUserName') && player.UserGameState !== 'Win'
          ) &&
          this.startGame === false &&
          this.crashObject.Status !== 'GameEnd'
      ) {
        this.startGame = true
        let User = this.crashObject.Players.find(player => player.UserName === GetCookie('SpUserName'))
        if (User) {
          this.amountDeposit = User.Bid
          User = null
        }
      }
    })
  },
  validations() {
    return {
      amountDeposit: { required, numeric, minValue: minValue(1), maxValue: maxValue(this.balance), integer },
    }
  },
  watch: {
    amountDeposit(DepositCount) {
      if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) {
        this.clickedBtn = null
      }
      else {
        let index
        switch (DepositCount) {
          case 1:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 0
            }
            break
          case 5:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 1
            }
            break
          case 10:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 2
            }
            break
          case 50:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 3
            }
            break
          case 100:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 4
            }
            break
          case parseInt(this.balance):
            index = 5
            break
        }
        this.clickedBtnChoice(index, DepositCount)
      }
    },
  },
  async created() {
    if (GetCookie('AUTHTOKEN') && GetCookie('SearchToken')) {
      await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
          .then((response) => {
            this.balance = response.currentMoney
          })
    }
  },
  methods: {
    async updateUserMoney() {
      if (GetCookie('AUTHTOKEN') && GetCookie('SearchToken')) {
        await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
            .then((response) => {
              this.balance = response.currentMoney
              return eventBus.emit('Updatebalance')
            })
      }
    },
    async clickPlayBtn() {
      this.v$.$touch()
      this.offBtn = true
      if (this.v$.amountDeposit.$error) {
        this.textError = 'Ошибка введении данных'
        this.offBtn = false
        this.errorPlayButton()
      }
      if (!this.v$.amountDeposit.$error) {
        const userData = {
          searchToken: GetCookie('SearchToken'),
          authtoken: GetCookie('AUTHTOKEN')
        }
        await JoinCrashGame(userData, this.amountDeposit)
            .then((response) => {
              if (response === `You can't join to started or ended game` || response === 'Player alredy in the game.') {
                this.offBtn = false
                if (response === `You can't join to started or ended game`) {
                  this.textError = 'Игра уже началась или только закончилась!'
                  this.errorPlayButton()
                }
                else if (response === 'Player alredy in the game.') {
                  this.textError = 'Вы уже в игре!'
                  this.errorPlayButton()
                }
                return
              }
              if (response.ok) {
                this.offBtn = false
                this.startGame = true
              }
            })
        this.offBtn = false
      }
    },
    errorPlayButton() {
      this.ErrorClick = true
      setTimeout(() => {
        this.ErrorClick = false
        this.textError = ''
      }, 2000)
    },
    async clickClaimDep() {
      if (this.startGame === true) {
        const userData = {
          searchToken: GetCookie('SearchToken'),
          authtoken: GetCookie('AUTHTOKEN')
        }
        await ExitAndTakeMoneyFromCrashGame(userData)
            .then((response) => {
              console.log(response)
              this.startGame = false
              this.updateUserMoney()
            })
      }
    },
    async clickedBtnChoice(index, content) {
      this.clickedBtn = index
      if (content === 'max') {
        await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
            .then((response) => {
              const responseBalance = response.currentMoney
              if (responseBalance === this.balance) {
                this.amountDeposit = parseInt(responseBalance)
              }
            })
      }
      else {
        this.amountDeposit = content
      }
    },
  }
 }
 </script>
--- a/luckydiamond/src/pages/games-pages/JackpotPage.vue
+++ b/luckydiamond/src/pages/games-pages/JackpotPage.vue
@@ -0,0 +1,842 @@
 <template>
  <div class="content-grid--jackpot">
    <aside-bar-component></aside-bar-component>
    <chat-component></chat-component>
    <header-component></header-component>
    <div class="bg-gradient-left"></div>
    <!-- <div class="bootstrap-wrapper">
      <div class="container">
          <div class="row hidden-sm-down"> 
              <div class="col-md-1">.</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
              <div class="col-md-1">.col-</div>
          </div>
      </div>
  </div> -->
    <!-- <section class="crash-game"> -->
    <!-- <div class="jackpot-main-elements"> -->
    <!-- <div class="bootstrap-wrapper">
        <div class="container">
          <div class="row hidden-sm-down">
            <div class="col-md-1">.</div>
            <div class="col-md-1">.col-</div>
            <div class="col-md-1">.col-</div>
            <div class="col-md-1">.col-</div>
          </div>
        </div>
      </div> -->
    <section class="jackpot">
      <div class="jackpot-start">
        <div
          class="jackpot-start__content title-saper padding-elements-jackpot"
        >
          <h2>Джекпот</h2>
          <p>Больше ставь, больше побеждай!</p>
          <div class="saper-start__choises diamonds diamonds-input__margin">
            <h3>Сумма депозита</h3>
            <div class="diamonds__choises">
              <img
                class="diamond-icon"
                src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
              />
              <input
                v-model="amountDeposit"
                type="number"
                id="diamonds-input"
              />
              <div class="diamonds__btns btn-style__diamonds">
                <ul class="diamonds-btns__display">
                  <li v-for="(item, index) in JackpotNumbers" :key="index">
                    <button
                      @click="clickedBtnChoice(index, item.diamonds)"
                      :class="{
                        'btn-click': clickedBtn === index,
                        [index]: clickedBtn === index,
                      }"
                      :id="item.diamonds === 'max' ? 'max-button' : null"
                      v-if="item.diamonds !== undefined"
                    >
                      {{ item.diamonds }}
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="jackpot-start__btns">
            <div class="error-block" v-if="ErrorClick">
              <h2>Ошибка при заполнении</h2>
            </div>
            <button
              class="btn-start"
              :class="{ 'animate-start-btn': ErrorClick }"
              @click="clickPlayBtn"
            >
              Начать игру
            </button>
            <!-- <button class="btn-claim" v-if="winningAmount === 0">Забрать {{ winningAmount }} АР</button>
          <button class="btn-claim" @click="claimWinningAmount()" v-else>Забрать {{ winningAmount.toFixed(2) }} АР</button> -->
          </div>
        </div>
      </div>
      <!-- <div><h1>gfdgfd</h1></div>
      <div><h1>gfdgfd</h1></div>
       -->
      <div class="jackpot-game">
        <div class="bootstrap-wrapper">
          <div class="container">
            <div class="row">
              <div class="col-md-10">
                <div class="jackpot-loading-bar">
                  <div class="bank-container">
                    <!-- <div class="bank-info"> -->
                    <div class="bank-name">БАНК:</div>
                    <h1></h1>
                    <div class="bank-value" v-text="winStake"></div>
                    <!-- </div> -->
                    <div class="shield">
                      <img
                        src="@/assets/icons-header/diamond-ore-icon.png"
                        alt="Shield"
                      />
                    </div>
                  </div>
                  <div class="progress-bar">
                    <div
                      class="progress"
                      :style="{ width: progressBarWidth + '%' }"
                    >
                      <span class="progress-text">{{
                        remainingSeconds >= 0 ? remainingSeconds + " " : ""
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-2">
                <div class="jackpot-last-game-bar">
                  <div
                    class="bootstrap-wrapper jackpot-last-game-bar-container"
                  >
                    <div class="container">
                      <div class="row">
                        <div class="col-md-2">
                          <img
                            src="@/assets/icons-gamemodes/last-game-icon.svg"
                          />
                        </div>
                        <div
                          class="col-md-8 jackpot-last-game-bar-container-text"
                        >
                          <h2>Последняя игра</h2>
                        </div>
                        <div class="jackpot-player-info">
                          <div class="jackpot-player-avatar">
                            <img :src="player.avatarUrl" alt="Player Avatar" />
                          </div>
                          <div class="jackpot-player-data">
                            <div class="jackpot-player-gems">
                              {{ player.gems }}
                              <span class="jackpot-gems-icon">
                                <img
                                  src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
                                />
                              </span>
                            </div>
                            <div class="jackpot-player-name">
                              {{ player.name }}
                            </div>
                          </div>
                        </div>
                        <div class="jackpot-player-chance">
                          ШАНС
                          <span class="jackpot-chance-value">{{
                            player.chance
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="jackpot-carousel">
                  <div class="carousel-arrow">▲</div>
                  <Carousel
                    @slide-start="handleSlideStart"
                    ref="carousel"
                    :itemsToShow="10"
                    :autoplay="autoplay"
                    :transition="150"
                    :wrapAround="true"
                    class="no-pointer-events"
                  >
                    <Slide v-for="(slide, index) in slides" :key="index">
                      <div class="carousel__item">
                        <img
                          :src="slide.img"
                          onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
                        />
                      </div>
                    </Slide>
                  </Carousel>
                </div>
              </div>
              <div class="col-md-12">
                <div class="jackpot-useringame-list">
                  <div
                    class="jackpot-carousel-user"
                    v-for="(user, index) in users"
                    :key="index"
                  >
                    <div class="jackpot-banner">
                      <div class="jackpot-content">
                        <img
                          :src="user.avatarUrl"
                          alt="Player Avatar"
                          class="jackpot-avatar"
                        />
                        <div class="jackpot-info">
                          <span class="jackpot-name">{{ user.name }}</span>
                          <span class="jackpot-gems"
                            >{{ user.gems
                            }}<span class="jackpot-gems-icon">
                              <img
                                class="jackpot-gems-icon-extension"
                                src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
                            /></span>
                          </span>
                        </div>
                      </div>
                      <div class="jackpot-chance">
                        ШАНС
                        <span class="jackpot-percentage"
                          >{{ user.chance }}%</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- </div> -->
    <!-- </section> -->
    <!-- <div class="crash-content"> -->
    <!-- </div> -->
    <!-- <section class="jackpot">
  </section> -->
  </div>
 </template>
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
 import "@/assets/css/PagesStyles/games-pages/jackpot.css";
 import "@/assets/css/global.css";
 import JackpotNumbers from "@/mocks/JackpotNumbers";
 import {
  // ConnectToJackpotSocket,
  JoinJackpotGame,
 } from "@/assets/js/jackpot/JackpotLogic.js";
 import { useVuelidate } from "@vuelidate/core";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import {
  maxValue,
  minValue,
  required,
  numeric,
  integer,
 } from "@vuelidate/validators";
 import { eventBus } from "@/main";
 export default {
  components: {
    HeaderComponent,
    AsideBarComponent,
    ChatComponent,
    Carousel,
    Slide,
    // Pagination
    // ProgressBar,
  },
  validations() {
    return {
      amountDeposit: {
        required,
        numeric,
        minValue: minValue(1),
        maxValue: maxValue(this.balance),
        integer,
      },
    };
  },
  inject: ["eventBus"],
  setup() {
    const v$ = useVuelidate();
    return { v$ };
  },
  data() {
    return {
      JackpotNumbers,
      autoplay: 0,
      player: {
        name: "",
        gems: 100,
        avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir",
        chance: "100%",
        // name: "FUpir",
        // gems: 500,
        // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png",
        // chance: "15.55%"
      },
      users: [
        // {
        //   name: "FUpir",
        //   gems: 500,
        //   avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png",
        //   chance: 16.55
        // },
        // {
        //   name: "FUpir",
        //   gems: 500,
        //   avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png",
        //   chance: 16.55
        // },
        // {
        //   name: "FUpir",
        //   gems: 500,
        //   avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png",
        //   chance: 16.55
        // },
      ],
      // Добавьте других пользователей по аналогии
      // slides: [
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
      //     nickname: "Hepatir",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
      //     nickname: "Hepatir",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
      //     nickname: "Ckutls_",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
      //     nickname: "Ckutls_",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
      //     nickname: "Ckutls_",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
      //     nickname: "Hepagfdtir",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
      //     nickname: "Ckutls_",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
      //     nickname: "Ckutls_",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
      //     nickname: "Ckutls_",
      //   },
      //   {
      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
      //     nickname: "Hepgdfatir",
      //   },
      // ],
      slides: [],
      currentSlide: 0,
      value: 0,
      max: 100,
      offBtn: false,
      amountDeposit: 0,
      targetNickname: "",
      isStopButtonPressed: false,
      isGameTimerStarted: false,
      remainingSeconds: 0,
      progressBarWidth: 0,
      idCurrentGame: "",
      lastUserWinerGameId: " ",
      lastUserWinner: "",
      firstStartOfPage: false,
      winStake: 0,
      // lastIdGame: "",
    };
  },
  methods: {
    async clickedBtnChoice(index, content) {
      this.clickedBtn = index;
      if (content === "max") {
        await GetCurrentMoney(
          GetCookie("AUTHTOKEN"),
          GetCookie("SearchToken")
        ).then((response) => {
          const responseBalance = response.currentMoney;
          if (responseBalance === this.balance) {
            this.amountDeposit = parseInt(responseBalance);
          }
        });
      } else {
        this.amountDeposit = content;
      }
    },
    errorPlayButton() {
      this.ErrorClick = true;
      setTimeout(() => {
        this.ErrorClick = false;
        this.textError = "";
      }, 2000);
    },
    async clickPlayBtn() {
      this.v$.$touch();
      this.offBtn = true;
      if (
        this.balance < this.amountDeposit ||
        !Number.isInteger(Number(this.amountDeposit))
      ) {
        this.textError = "Некорректное значение. Введите целое число.";
        this.offBtn = false;
        this.errorPlayButton();
      }
      const userData = {
        searchToken: GetCookie("SearchToken"),
        authtoken: GetCookie("AUTHTOKEN"),
      };
      await JoinJackpotGame(userData, this.amountDeposit).then((response) => {
        if (
          response === `You can't join to started or ended game` ||
          response === "Player alredy in the game."
        ) {
          this.offBtn = false;
          if (response === `You can't join to started or ended game`) {
            this.textError = "Игра уже началась или только закончилась!";
            this.errorPlayButton();
          } else if (response === "Player alredy in the game.") {
            this.textError = "Вы уже в игре!";
            this.errorPlayButton();
          }
          return;
        }
        if (response.ok) {
          this.offBtn = false;
          this.startGame = true;
        }
      });
      this.offBtn = false;
    },
    updatePlayerInfo(newName, newGems, newChance) {
      this.player.name = newName;
      this.player.avatarUrl =
        "https://avatar.spworlds.ru/face/55/" + newName + ".png";
      this.player.gems = newGems;
      this.player.chance = parseFloat(newChance).toFixed(2) + "%";
    },
    mapPlayersToSlides(players, inGamePlayersBided) {
      this.slides = [];
      this.users = [];
      inGamePlayersBided.forEach((player) => {
        this.users.push({
          avatarUrl: `https://avatar.spworlds.ru/face/55/${player.UserName}.png`, // Предполагаем структуру URL из имени пользователя
          name: player.UserName,
          chance: parseFloat(player.WinningPercentage).toFixed(2) + "",
          gems: player.Bid,
        });
      });
      players.forEach((player) => {
        const numberOfCards = player.WinningPercentage / 7; // Предполагаем, что 10% это 1 карточка
        // const numberOfCards = player.WinningPercentage / 10; // Предполагаем, что 10% это 1 карточка
        for (let i = 0; i < numberOfCards; i++) {
          if (i == 0) {
            // if (this.firstStartOfPage) {
            //   this.slides.push({
            //     img: `https://avatar.spworlds.ru/face/55/${this.player.name}.png`, // Предполагаем структуру URL из имени пользователя
            //     nickname: this.player.name,
            //   });
            //   this.firstStartOfPage = false;
            // } else {
            this.slides.push({
              img: `https://avatar.spworlds.ru/face/55/${player.UserName}.png`, // Предполагаем структуру URL из имени пользователя
              nickname: player.UserName,
            });
            // }
          }
          this.slides.push({
            img: `https://avatar.spworlds.ru/face/55/${player.UserName}.png`, // Предполагаем структуру URL из имени пользователя
            nickname: player.UserName,
          });
        }
      });
    },
    checkGameEnd(endGameUtc) {
      const endTime = new Date(endGameUtc).getTime();
      const currentTime = new Date().getTime();
      const timeLeft = endTime - currentTime;
      if (timeLeft > 0) {
        // Устанавливаем таймер, который сработает, когда игра должна закончиться
        setTimeout(() => {
          eventBus.emit("gameEnded"); // Транслируем событие окончания игры
        }, timeLeft);
      } else {
        console.log("Game has already ended");
      }
    },
    resetLoadingBar() {
      const progressBarElement = document.querySelector(".progress");
      if (progressBarElement) {
        const progressText = progressBarElement.querySelector(".progress-text");
        setTimeout(() => {
          progressBarElement.style.width = `1%`; // Устанавливаем ширину в 1%
          if (progressText) {
            progressText.textContent = `0`; // Устанавливаем текст
            // Если вы хотите изменить прозрачность текста, раскомментируйте следующую строку
            // progressText.style.opacity = "1"; // Устанавливаем прозрачность текста
          }
        }, 1500);
      }
    },
    startAutoScroll() {
      this.interval = setInterval(() => {
        this.$refs.carousel.next();
      }, 1);
    },
    startGameTimer(startGameUtc) {
      if (!this.isGameTimerStarted) {
        this.isGameTimerStarted = true;
        const startTime = new Date(startGameUtc).getTime();
        const updateTimer = () => {
          if (this.timerInterval == null) {
            return;
          }
          const currentTime = new Date().getTime();
          const diff = startTime - currentTime;
          this.remainingSeconds = Math.max(0, Math.floor(diff / 1000));
          if (diff <= 0) {
            this.remainingSeconds = 0;
            this.progressBarWidth = 100; // Полный прогресс
            // Действия после окончания таймера, если необходимо
          } else {
            this.remainingSeconds = Math.floor(diff / 1000); // Обновляем оставшееся время в секундах
            const totalDuration = 30; // Допустим, обратный отсчет идет с 10 секунд1
            this.progressBarWidth =
              ((totalDuration - this.remainingSeconds) / totalDuration) * 100;
          }
          const progressBarElement = document.querySelector(".progress");
          if (progressBarElement) {
            const progressText =
              progressBarElement.querySelector(".progress-text");
            if (progressText) {
              progressText.style.opacity = "0";
              setTimeout(() => {
                progressBarElement.style.width = `${this.progressBarWidth}%`;
                if (this.remainingSeconds > 8) {
                  progressText.textContent = `${this.remainingSeconds}`;
                } else {
                  if (this.remainingSeconds != 0) {
                    progressText.textContent = `${this.remainingSeconds} СЕК`;
                  }
                }
                progressText.style.opacity = "1";
              }, 500); // Задержка должна соответствовать продолжительности анимации
            }
          }
        };
        // Запускаем таймер
        this.timerInterval = setInterval(updateTimer, 1000);
        updateTimer(); // Вызываем сразу для инициализации
      }
    },
    handleSlideStart(data) {
      try {
        let { slidingToIndex, currentSlideIndex } = data;
        if (
          this.slides[slidingToIndex] &&
          this.slides[slidingToIndex].nickname
        ) {
          if (
            this.isStopButtonPressed &&
            this.idCurrentGame == this.lastUserWinerGameId
          ) {
            if (
              this.slides[currentSlideIndex].nickname == this.targetNickname
            ) {
              // this.$refs.carousel.slideTo(this.currentSlideIndex);
              // if (this.slides[this.currentSlideIndex].nickname == this.targetNickname) {
              this.stopAutoplay();
            }
          }
        }
      } catch (error) {
        console.error("Error in handleSlideStart:", error);
      }
    },
    stopCarousel() {
      this.isStopButtonPressed = true;
      this.autoplay = 200;
      setTimeout(() => {
        if (this.isStopButtonPressed) {
          this.autoplay = 500;
        }
      }, 1000);
    },
    stopAutoplay() {
      this.targetNickname = "";
      this.autoplay = 0;
      this.isGameTimerStarted = false;
      this.isStopButtonPressed = false;
      this.lastUserWinerGameId = " ";
      this.idCurrentGame = "";
      this.lastUserWinner = "";
      this.resetLoadingBar();
      clearInterval(this.timerInterval);
      this.timerInterval = null;
    },
    changeLastFiveImages() {
      const newImage = "https://avatar.spworlds.ru/face/55/Hepatir.png";
      this.slides[9].img = newImage;
    },
    stopOnTarget(targetNickname) {
      if (this.slides[this.currentSlide].nickname === targetNickname) {
        this.autoplay = 0;
        return true; // Возвращаем true, если нашли нужный слайд
      }
      return false; // Возвращаем false, если нужный слайд не найден
    },
  },
  mounted() {
    // ConnectToJackpotSocket();
    eventBus.on("jackpotGameTik", (data) => {
      try {
        if (data) {
          const dataObject = JSON.parse(data);
          this.winStake = dataObject.CurrentGame.WinStake;
          if (dataObject.CurrentGame.GameState == "WaitingForPlayers") {
            // if (dataObject.CurrentGame.GameState != "Running") {
            // }
            this.lastUserWinner = dataObject.LastGame.WinnerUserName;
            this.lastUserWinerGameId = dataObject.LastGame.Id;
            if (this.lastUserWinerGameId == this.idCurrentGame) {
              this.targetNickname = this.lastUserWinner;
              this.stopCarousel();
            }
            if (this.idCurrentGame == "") {
              this.mapPlayersToSlides(
                dataObject.LastGame.PlayerList,
                dataObject.CurrentGame.PlayerList
              );
              // this.mapPlayersToSlides(dataObject.CurrentGame.PlayerList);
            }
          }
          if (dataObject.CurrentGame.GameState == "StartGameTimer") {
            if (!this.isGameTimerStarted) {
              this.idCurrentGame = dataObject.CurrentGame.Id;
            }
            this.mapPlayersToSlides(
              dataObject.CurrentGame.PlayerList,
              dataObject.CurrentGame.PlayerList
            );
            this.startGameTimer(dataObject.CurrentGame.StartGameUtc);
          }
          if (dataObject.CurrentGame.GameState == "Running") {
            this.autoplay = 20;
            if (this.idCurrentGame == "") {
              this.firstStartOfPage = true;
              this.idCurrentGame = dataObject.CurrentGame.Id;
              this.mapPlayersToSlides(
                dataObject.CurrentGame.PlayerList,
                dataObject.CurrentGame.PlayerList
              );
            }
          }
          if (this.idCurrentGame == "") {
            this.updatePlayerInfo(
              dataObject.LastGame.WinnerUserName,
              dataObject.LastGame.WinStake,
              dataObject.LastGame.WinnerPercentage
            );
          }
        } else {
          // Если данные не определены или пусты, выводим соответствующее сообщение в консоль
        }
        // console.log(dataFromServer);
      } catch (error) {
        console.log(error);
      }
    });
    eventBus.on("gameEnded", () => {
      setTimeout(() => {
        if (!this.isStopButtonPressed) {
          // if (this.idCurrentGame == this.lastUserWinerGameId) {
          this.targetNickname = this.lastUserWinner;
          this.stopCarousel();
          // }
        }
      }, 1000);
    });
  },
  watch: {},
  async created() {
    this.firstStartOfPage = true;
    if (GetCookie("AUTHTOKEN") && GetCookie("SearchToken")) {
      await GetCurrentMoney(
        GetCookie("AUTHTOKEN"),
        GetCookie("SearchToken")
      ).then((response) => {
        this.balance = response.currentMoney;
      });
    }
  },
  amountDeposit(DepositCount) {
    if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) {
      this.clickedBtn = null;
    } else {
      let index;
      switch (DepositCount) {
        case 1:
          if (parseInt(this.balance) === DepositCount) {
            index = 5;
          } else {
            index = 0;
          }
          break;
        case 5:
          if (parseInt(this.balance) === DepositCount) {
            index = 5;
          } else {
            index = 1;
          }
          break;
        case 10:
          if (parseInt(this.balance) === DepositCount) {
            index = 5;
          } else {
            index = 2;
          }
          break;
        case 50:
          if (parseInt(this.balance) === DepositCount) {
            index = 5;
          } else {
            index = 3;
          }
          break;
        case 100:
          if (parseInt(this.balance) === DepositCount) {
            index = 5;
          } else {
            index = 4;
          }
          break;
        case parseInt(this.balance):
          index = 5;
          break;
      }
      this.clickedBtnChoice(index, DepositCount);
    }
  },
 };
 </script>
 <style scoped>
 .carousel__slide {
  padding: 5px;
 }
 .carousel__viewport {
  perspective: 2000px;
 }
 .carousel__track {
  transform-style: preserve-3d;
 }
 .carousel__slide--sliding {
  transition: 0.5s;
 }
 .carousel__slide {
  opacity: 0.9;
  transform: rotateY(-20deg) scale(0.9);
 }
 .carousel__slide--active ~ .carousel__slide {
  transform: rotateY(20deg) scale(0.9);
 }
 .carousel__slide--prev {
  opacity: 1;
  transform: rotateY(-10deg) scale(0.95);
 }
 .carousel__slide--next {
  opacity: 1;
  transform: rotateY(10deg) scale(0.95);
 }
 .carousel__slide--active {
  opacity: 1;
  transform: rotateY(0) scale(1.1);
 }
 </style>
--- a/luckydiamond/src/pages/games-pages/SapergamePage.vue
+++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue
@@ -4,7 +4,7 @@
    <header-element-page></header-element-page>
-    <chat-component id="chat"></chat-component>
+    <chat-component></chat-component>
    <section class="saper" :class="{ 'game-end' : ValidationPlay.endGame }">
      <div class="bg"></div>
@@ -29,7 +29,7 @@
            <h3>Сумма депозита</h3>
            <div class="diamonds__choises">
              <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
-              <input v-model="amountDeposit" type="number" id="diamonds-input">
+              <input v-model="amountDeposit" type="number" id="diamonds-input-saper">
              <div class="diamonds__btns btn-style__diamonds">
                <ul class="diamonds-btns__display">
                  <li v-for="(item, index) in SaperNumbers" :key="index">
@@ -132,6 +132,9 @@
                  <h2>Изумруды</h2>
                  <p>Открывай ячейки с изумрудами</p>
                  <img src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" width="170" height="170">
                  <div class="info-crystals__count card-style-count emeralds-bg" :class="{ 'on-element-card' : gameStart === true }">
                    <h3>{{ this.emeraldsAmount }}</h3>
                  </div>
                </div>
              </div>
              <div class="info-crystals">
@@ -139,6 +142,9 @@
                  <h2>кристаллы</h2>
                  <p>Остерегайся кристаллов, чтобы не проиграть</p>
                  <img src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" width="170" height="170">
                  <div class="info-crystals__count card-style-count crystals-bg" :class="{ 'on-element-card' : gameStart === true }">
                    <h3>{{ this.amountCrystals }}</h3>
                  </div>
                </div>
              </div>
            </div>
@@ -165,6 +171,8 @@ import HeaderElementPage from "@/components/HeaderComponent.vue";
 import { GetPercentageSteps, GetUserData, ClickCirclePlay, GetWinningAmount } from "@/assets/js/games/saper/SaperAPI";
 import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import {GetFromLocalStorage} from "@/assets/js/storage/LocalStorage";
 import { Howl } from 'howler';
 import {eventBus} from "@/main";
@@ -191,9 +199,11 @@ export default {
      clickedBtn: '',
      clickedBtnCrystal : '',
      amountCrystals: 0,
      emeraldsAmount: 0,
      balance: 0,
      winningAmount: 0,
      gamesCircle: 0,
      gameTurn: 0,
      ErrorClick: '',
      gameStart: false,
      offEventPointers: false,
@@ -220,35 +230,107 @@ export default {
    }
  },
  watch: {
-    async amountCrystals(CrystalsCount) {
+    amountDeposit(DepositCount) {
-      this.PercentageGameSteps = []
+      if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) {
-      if (CrystalsCount >= 1 && CrystalsCount <= 24) {
+        this.clickedBtn = null
-        try {
+      }
-            await GetPercentageSteps(this.amountCrystals)
+      else {
-              .then((response) => {
+        let index
-                response.forEach((item) => {
+        switch (DepositCount) {
-                  if (item !== 'Infinity' && item !== '-Infinity') {
+          case 1:
-                    this.PercentageGameSteps.push(Number(item))
+            if (parseInt(this.balance) === DepositCount) {
-                  }
+              index = 5
-                })
+            }
-              })
+            else {
-        }
+              index = 0
-        catch (e) {
+            }
-            console.error('Error in Percantage', e)
+            break
          case 5:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 1
            }
            break
          case 10:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 2
            }
            break
          case 50:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 3
            }
            break
          case 100:
            if (parseInt(this.balance) === DepositCount) {
              index = 5
            }
            else {
              index = 4
            }
            break
          case parseInt(this.balance):
            index = 5
            break
        }
        this.clickedBtnChoice(index, DepositCount)
      }
    },
    async amountCrystals(CrystalsCount) {
      this.PercentageGameSteps = [];
      if (CrystalsCount >= 1 && CrystalsCount <= 24) {
        try {
          const response = await GetPercentageSteps(CrystalsCount);
          response.forEach((item) => {
            if (item !== 'Infinity' && item !== '-Infinity') {
              this.PercentageGameSteps.push(Number(item));
            }
          });
        } catch (e) {
          //console.error('Error in Percentage', e);
        }
      }
      let index;
      switch (CrystalsCount) {
        case 1:
          index = 0;
          break;
        case 5:
          index = 1;
          break;
        case 10:
          index = 2;
          break;
        case 24:
          index = 3;
          break;
        default:
          return
      }
      this.clickedBtnCrystals(index, CrystalsCount);
    },
    flippedCards: {
     async handler(value) {
       if (value.length < 1 || this.ValidationPlay.endGame === true) return
-       const maxCircles = 25 - this.amountCrystals
+       const maxCircles = 25 - this.amountCrystals - this.gameTurn
       console.log(`MAXCIRLES - ${maxCircles} VALUE: ${value} GAMECIRCLE - ${this.gamesCircle}`)
       if (this.gameStart !== false) {
         this.offEventPointers = false
         let AnswerServer
-         let LimitClicked = this.amountCrystals
+         //let LimitClicked = this.amountCrystals
         let DepositDiamonds = this.amountDeposit
         const X_Cordinates = value[this.gamesCircle]
@@ -283,11 +365,10 @@ export default {
               })
         }
         catch (e) {
-           console.error(e)
+           //console.error(e)
         }
-         console.log('---------ANSWER SERVER-----------', AnswerServer)
+         //console.log(LimitClicked, DepositDiamonds, X_Cordinates)
         console.log(LimitClicked, DepositDiamonds, X_Cordinates)
         this.gamesCircle = this.gamesCircle + 1
         this.offEventPointers = true
         if (AnswerServer === 'You dead') {
@@ -296,9 +377,11 @@ export default {
           this.gameStart = false
           this.gamesCircle = 0
           this.winningAmount = 0
           this.gameTurn = 0
           const SoundCorrect = new Howl({
             src: ['/sounds/incorrect-sound.mp3'],
-             volume: 0.5
+             volume: GetFromLocalStorage("volume")/100
            //  volume: 0.5
           })
           SoundCorrect.play()
@@ -311,17 +394,19 @@ export default {
         }
         const SoundUncorrect = new Howl({
           src: ['/sounds/correct-click.mp3'],
-           volume: 0.5
+          //  volume: 0.5
           volume: GetFromLocalStorage("volume")/100
         })
         this.CorrectsClick.push(X_Cordinates)
         SoundUncorrect.play()
         this.emeraldsAmount--
       }
       if (this.gamesCircle === maxCircles) {
         this.offEventPointers = false
         this.gameStart = false
         this.gamesCircle = 0
-         this.flippedCards = []
+         this.gameTurn = 0
         this.claimWinningAmount()
@@ -343,7 +428,6 @@ export default {
      try {
         GetUserData(AUTHTOKEN, SEARCHTOKEN)
            .then(response => {
              console.log(response)
              if (response) {
                this.gameStart = true
                this.offEventPointers = true
@@ -353,25 +437,40 @@ export default {
                this.amountCrystals = response.MinesCount
                this.amountDeposit = response.PuttedMoney
                this.winningAmount = response.WinningMoney
                this.emeraldsAmount = 25 - this.amountCrystals - response.CurrentUserTurn
                this.gameTurn = response.CurrentUserTurn
                const soundStartGame = new Howl({
                  src: ['/sounds/start-game.mp3'],
-                  volume: 5.0
+                  volume: GetFromLocalStorage("volume")/25
                })
                soundStartGame.play()
                console.log(this.flippedCards.length)
                setTimeout(() => {
                  this.ValidationPlay.startGame = false
                }, 2000)
              }
              else {
                this.amountCrystals = 5
              }
            })
        this.getBalanceUser()
      }
      catch (e) {
-        console.error('Error in GetData', e)
+        //console.error('Error in GetData', e)
      }
    }
    else {
      this.amountCrystals = 5
    }
  },
  mounted() {
    eventBus.on('Updatebalance-saper', () => {
      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
          .then(response => {
            this.balance = response.currentMoney
          })
    })
  },
  methods: {
    clickPlayButton() {
@@ -380,10 +479,10 @@ export default {
      if (this.v$.amountDeposit.$error) {
        this.errorPlayButton()
      }
-      else if (this.v$.amountCrystals.$error) {
+      if (this.v$.amountCrystals.$error) {
        this.errorPlayButton()
      }
-      else {
+      if (!this.v$.amountCrystals.$error && !this.v$.amountDeposit.$error) {
        this.flippedCards = []
        this.unCorrectClick = []
        this.CorrectsClick = []
@@ -392,10 +491,12 @@ export default {
        this.offEventPointers = true
        const soundStartGame = new Howl({
          src: ['/sounds/start-game.mp3'],
-          volume: 5.0
+          volume: GetFromLocalStorage("volume")/100
          // volume: 5.0
        })
        soundStartGame.play()
        this.emeraldsAmount = 25 - this.amountCrystals
      }
    },
    getBalanceUser() {
@@ -406,7 +507,7 @@ export default {
            })
      }
      catch (e) {
-        console.error(e)
+        //console.error(e)
      }
    },
    async claimWinningAmount() {
@@ -414,16 +515,20 @@ export default {
        try {
          this.offEventPointers = false
          this.gameStart = false
          this.flippedCards = []
          this.unCorrectClick = []
          this.CorrectsClick = []
          this.gamesCircle = 0
          this.gameTurn = 0
          await GetWinningAmount({ SearchToken: GetCookie('SearchToken'), AuthToken: GetCookie('AUTHTOKEN') })
          this.winningAmount = 0
          this.ValidationPlay.winGame = true
          setTimeout(() => {
            this.ValidationPlay.winGame = false
          }, 1500)
          return eventBus.emit('Updatebalance')
        }
        catch (e) {
-          console.error(e)
+          //console.error(e)
        }
      }
    },
@@ -472,7 +577,11 @@ export default {
      if (content === 'max') {
        await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
            .then((response) => {
-              this.amountDeposit = parseInt(response.currentMoney)
+              const responseBalance = response.currentMoney
              if (responseBalance === this.balance) {
                this.amountDeposit = parseInt(responseBalance)
              }
            })
      }
      else {
--- a/luckydiamond/src/properties/Сonfig.js
+++ b/luckydiamond/src/properties/Сonfig.js
@@ -2,4 +2,6 @@ export const BackendApiUrl  = 'https://spsystemcore20231122004605.azurewebsites.
 export const BackendWebSocketUrl  = 'wss://spsystemcore20231122004605.azurewebsites.net';
 export const BackendWebSocketJackpotUrl  = 'wss://spsystemcore20231122004605.azurewebsites.net/jackpot';
 // export const BackendApiUrl = 'https://localhost:7062/api';
--- a/luckydiamond/src/router/router.js
+++ b/luckydiamond/src/router/router.js
@@ -3,12 +3,22 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
 import SettingsPage from "@/pages/SettingsPage.vue";
 import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
 import JackpotPage from "@/pages/games-pages/JackpotPage.vue";
 import AboutPage from "@/pages/AboutPage.vue";
 import HelpPage from "@/pages/HelpPage.vue" ;
 export default createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: HomePage, name: 'home' },
        { path: '/profile', component: ProfilePage, name: 'profile' },
-        { path: '/game/saper', component: SapergamePage, name: 'saper' }
+        { path: '/game/saper', component: SapergamePage, name: 'saper' },
        { path: '/game/crash', component: CrashGamePage, name: 'crash' },
        { path: '/game/jackpot', component: JackpotPage, name: 'jackpot' },
        { path: '/settings', component: SettingsPage, name: 'settings' },
        { path: '/about', component: AboutPage, name: 'about' },
        { path: '/help', component: HelpPage, name: 'help' },
    ]
 })
--- a/luckydiamond/vue.config.js
+++ b/luckydiamond/vue.config.js
@@ -15,7 +15,8 @@ const path = require('path');
 module.exports = {
  // Установка базового URL-адреса для проекта
  publicPath: '/',
-
+  // productionSourceMap: true,
  productionSourceMap: false,
  // Настройка Webpack
  configureWebpack: {
    resolve: {
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,6 @@
 {
  "name": "LuckyDiamond",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {}
 }
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -72,6 +72,12 @@
    font-family: Montserrat Alternates;
    font-size: 18px;
    font-weight: 700;
    transition: 250ms;
 }
 .header_other_text_menu:hover {
    color: #EF4444;
 }
 .flex-container {