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>
-<html>
-<head>
-    <meta charset="UTF-8">
+[Отображение Скинов](https://visage.surgeplay.com/index.html)

-</head>
-<body>
+[Вдохновление](https://cs.fail/en/)

+## Наша Команда

-<h1>Важные ссылки</h1> 
-<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>
- 
+![team](https://cdn.discordapp.com/attachments/1175674631684898866/1208428357952348170/Group_92.png?ex=65e33f9c&is=65d0ca9c&hm=9279223a5486b16e30267bced4fd1f7cc63ff59292cb5e29d741914b5902e5e0&)
--- 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==",
-      "dev": true
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
    },
    "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",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
-      "dev": true,
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
      "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%;
 }

@@ -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;
-    height: 38px;
+    /* width: 347px;
+    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%;
@@ -123,11 +129,22 @@
    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,12 +215,111 @@
    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 {
@@ -183,6 +327,18 @@
    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 {
    display: flex;
    padding: 0.6% 0.6%;
@@ -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) {
-    .header__auth--discord {
-        width: 14%;
-    }
-    .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;
+@media only screen and (max-width:1800px) {
+    .line__img__jackpot {
+        width: 150px;
+        height: 150px;
    }
+
    .line__footer img {
-        margin-top: -2em;
-    }
-    .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;
+        width: 55%;
+        margin-bottom: 5%;
    }
 }

-@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
-    .header__auth--discord {
-        width: 14%;
+@media only screen and (max-width:1700px) {
+    .title-jackpot {
+        font-size:60px;
+        padding: 0px 0px 0px 28px;
    }
-    .header__balance {
-        width: auto;
+
+    .title-twoline {
+        font-size: 60px;
    }
-    .main__content h1 {
-        font-size: 4.5em;
-    }
-    .main {
-        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__img__jackpot {
+        height: 150px;
+        width: 150px;
    }
+
    .line__footer img {
-        margin-top: -2em;
+        width: 40%;
+        margin-bottom: 5%;
    }
-    .line__content .line__btn--main .line__btn {
-        left: 0;
-        top: -.4em;
-    }
-    .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__content {
+        width: 100%;
+        height: 100%;
    }
+
    .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;
-    }
+        border-radius: 16px;
+        font-size: 30px;
+        padding: 11px 11px 11px 11px;
    }

-@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,20 +11,39 @@ 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;
@@ -36,12 +55,12 @@ body, html {
        "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;
@@ -52,15 +71,16 @@ body, html {
        "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;
+    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"
@@ -70,9 +90,41 @@ body, html {
        "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);
-    border-radius: 20px;
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    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));
-    border-radius: 20px;
-    height: 90%;
+    filter: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
+    border-radius: 15px;
+    /* 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);
-    margin: 10px 39px 18px 13px;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    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 = {
-            SpUserName: GetCookie("SpUserName"),
-            Message: message
+        const userCredentials = {
+            SearchToken: GetCookie("SearchToken"),
+            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>
-          <a href="#"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
-          <a href="#"><img  src="../assets/icons-menu/case-icon.png"></a>
+          <!-- <div class="fotosloti"><a href="#"><img  src="../assets/icons-menu/slots-icon.svg" ></a></div> -->
+          <a href="#" @click="$router.push({ name: 'jackpot' })"><img  class="menu__content--jackpot-icon" src="../assets/icons-menu/jackpot-icon.svg"></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
-              v-for="msg in array"
-              :key="msg"
+          <li v-for="msg in array" :key="msg">
+            <div
+              class="card__user"
+              :class="{
+                'mention-message': isCurrentUser(msg),
+                'system-message': msg.username === '🛠️ System',
+              }"
            >
-            <div class="card__user">
              <div class="user__icon">
-                <img :src="msg.icon">
+                <img :src="msg.icon" />
              </div>
              <div class="content">
                <h1>{{ msg.username }}</h1>
@@ -28,11 +31,16 @@
      </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";
@@ -40,44 +48,90 @@ 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();
+      if (!this.lastMsgTime || now - this.lastMsgTime >= 2000) {
        SendMessageToChat(msg[0]);
-
-      // if(this.array.length > 7) {
-      //   this.array.shift()
-      // }
+        this.lastMsgTime = now;
+      } 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);
-      let imageUrl = "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
+
+        let imageUrl =
+          "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;

        const MsgUser = {
          id: this.id + 1,
          msg: dataObject.Message,
          username: dataObject.SpUserName,
-        icon: imageUrl
+          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);
+        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
@@ -18,27 +18,31 @@ export default {
    logout() {
      this.auth = false;
      this.balance = 0;
+      this.authtoken = "";
      DeleteAllCookie();
    },
    updateBalanceMethod() {
-      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
-          .then(response => {
-            this.balance = response.currentMoney
-          })
+      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
+        (response) => {
+          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', () => {
-      this.updateBalanceMethod()
-    })
+    eventBus.on("Updatebalance", () => {
+      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 href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : $route.name === 'profile' }">Профиль</a>
-          <a href="#">Помощь</a>
+          <a
+            href="#"
+            @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-else class="correct-text__promocode">Промокод успешно применён</h2>
+          <h2 v-if="errorPromocode" class="error-text__promocode">
+            {{ 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" />
-          <h3>Я согласен с пользовательским соглашением.</h3>
+          <input
+            @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
-            type="submit"
-            :disabled="checkOffBtn"
-            @click="RedirectedMethodDep"
-          >
-            Пополнить
-          </button>
+          <button type="submit" @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">
-        <h2 v-show="errorAgree">Введите сначало карту</h2>
+      <div class="error-checkbox" v-if="errorAgree">
+        <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,99 +146,134 @@
 <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,
-      amountSave: 1,
-      card: '',
-      promocode: '',
-      promocodeBase: ['ANTI-GRIF'],
+      amountWithdraw: 0,
+      balance: 0,
+      card: "",
+      promocode: "",
+      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) {
-      this.offBtn = true;
-      if (this.amount > 0 && this.amount !== "") {
-        setTimeout(() => {
-          try {
-            GettingMoneyOperation(newAmount).then((response) => {
-              console.log("Payments Modal Working!: ", response);
-              this.url = response;
-              this.offBtn = false;
-            });
-          } catch (e) {
-            console.error("Error in PaymentModal!", e);
+    amount(DepositCount) {
+      console.log(DepositCount);
+      if (![1, 5, 10, 50, 100, 1000].includes(DepositCount)) {
+        this.clickedBtn = null;
+      } else {
+        let index;
+        switch (DepositCount) {
+          case 1:
+            index = 0;
+            break;
+          case 5:
+            index = 1;
+            break;
+          case 10:
+            index = 2;
+            break;
+          case 50:
+            index = 3;
+            break;
+          case 100:
+            index = 4;
+            break;
+          case 1000:
+            index = 5;
+            break;
        }
-        }, 2000);
-      }
-    },
-    amountWithdraw(newAmount) {
-      this.completeValidtaion.amountsaving = false
-      if (newAmount > 0) {
-        this.amountSave = newAmount
-        this.completeValidtaion.amountsaving = true
-        console.log(this.completeValidtaion)
-      }
-    },
-    card(newAmount) {
-      this.completeValidtaion.cardsaving = false
-      const cardPattern = /^\d{5}$/;
-      if(cardPattern.test(newAmount)) {
-        this.offAgree = false
-        this.completeValidtaion.cardsaving = true
-      }
-    },
-    agreeUser(newAgree) {
-      this.completeValidtaion.agreesaving = false
-      if (newAgree !== false) {
-        this.completeValidtaion.agreesaving = true
+        this.clickedBtnChoice(index, DepositCount);
      }
    },
    completeValidtaion: {
      handler() {
-        this.completeValidationCheck()
+        this.completeValidationCheck();
      },
-      deep: true
-    }
-  },
-  computed: {
-    checkOffBtn() {
-      return this.checkBtn();
+      deep: true,
    },
  },
  methods: {
    closeModal() {
      return this.$emit("closemodal");
    },
-    checkValidationPromocode() {
-      this.errorPromocode = !this.promocodeBase.includes(this.promocode);
-      this.showPromocodeStatus = true
-    },
+    // checkValidationPromocode() {
+    //   this.errorPromocode = !this.promocodeBase.includes(this.promocode);
+    //   this.showPromocodeStatus = true
+    // },
    completeValidationCheck() {
-      this.offBtn = true
+      this.offBtn = true;

      if (
        this.completeValidtaion.amountsaving &&
@@ -200,41 +281,133 @@ export default {
        this.completeValidtaion.agreesaving &&
        this.completeValidtaion.captchatokensaving
      ) {
-        this.offBtn = false
+        this.offBtn = false;
      }
    },
    claimCaptchaToken(Token) {
-      this.captchaToken = Token
-      this.completeValidtaion.captchatokensaving = true
+      this.captchaToken = Token;
+      this.completeValidtaion.captchatokensaving = true;
    },
-    RedirectedMethodDep() {
-      console.log(`From /profile to - ${this.url} url`)
-      window.location.href = this.url
+    async handleApplyPromoCode() {
+      const authToken = GetCookie("AUTHTOKEN");
+      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 RedirectedMethodDep() {
+      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 {
+          GettingMoneyOperation(this.amount).then((response) => {
+            console.log("Payments Modal Working!: ", response);
+            this.url = response;
+            this.offBtn = false;
+
+            window.location.href = this.url;
+          });
+        } catch (e) {
+          console.error("Error in PaymentModal!", e);
+        }
+      }
    },
    async RedirectedMethodTransferMoneyToSp() {
-      setTimeout(async () => {
+      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 {
-          WithdrawMoneyOperation(this.amountSave, this.card.toString(), this.captchaToken).then((response) => {
-            console.log(`work withdraw - ${response}`)
-          })
+            console.log("work", response);
+          } catch (e) {
+            console.error(e);
          }
-        catch (e) {
-          console.error(`Error in wihdrawmoney operation - ${e}`)
+          await this.$emit("notifacetionmoney");
+          eventBus.emit("Updatebalance");
+        });
      }
-        await this.$emit('notifacetionmoney')
-      }, 4000)
-    },
-    checkBtn() {
-      if (this.offBtn === false) {
-        if (this.agreeUser !== false) {
-          return false;
-        }
-      }
-      return true;
    },
    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);
-      this.$emit("send", [formattedWord, this.username, this.icon]);
+      // const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
+      this.$emit("send", [this.msg, this.username, this.icon]);
      this.msg = "";
    },

-    InsertSpaceEvery24Chars(word) {
-      let result = "";
-      for (let i = 0; i < word.length; i += 22) {
-        result += word.substring(i, i + 22) + " ";
-      }
-      return result.trim();
-    },
+    // InsertSpaceEvery24Chars(text) {
+    //   let result = "";
+    //   for (let i = 0; i < text.length; i++) {
+    //     if (i > 0 && i % 24 === 0) {
+    //       result += " ";
+    //     }
+    //     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
-                v-for="mode in mainGameMode"
-                :key="mode.id"
-            >
+            <li 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">
-                  <div class="line__btn--main">
-                    <a href="#" @click="$router.push({ name: 'saper' })" class="line__btn">play <span class="line__btn--elm">></span></a>
+                  <img src="../assets/icons-gamemodes/bomb-icon.svg" />
+                  <div>
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'saper' })"
+                      class="line__btn"
+                      >play <span class="line__btn--elm--saper"></span></a
+                    >
                  </div>
                </div>
              </div>
@@ -49,45 +60,53 @@
              >
                <div :class="'linecontent-' + mode.id">
                  <div class="container">
-                    <h1 class="title-firstline">{{ mode.title }}</h1>
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <h1 class="title-jackpot">{{ mode.title }}</h1>
+                    <!-- <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">
-                  <img src="@/assets/icons-gamemodes/case-icon.png">
+                <div class="line__img__jackpot">
+                  <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
-                    v-for="mode in twolinefirstelementGameMode"
-                    :key="mode"
-                >
+                <li 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>
-                    <img src="@/assets/icons-gamemodes/slots-icon.png">
+                    <a href="#" class="cumming_soon_btn"
+                      >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
-                    v-for="mode in twolinetwoelementGameMode"
-                    :key="mode.id"
-                >
+                <li 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>
-                    <img src="@/assets/icons-gamemodes/crush-icon.svg">
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                    <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>
@@ -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',
-  components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
+  name: "HomePage",
+  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 id="chat-profile"></chat-component>
-
+    <chat-component></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">
@@ -46,6 +52,8 @@
            </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
  }
-    // 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) {
-    //   const historyPayments = {
-    //     name: 'TEST USER',
-    //     comment: 'test',
-    //     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)
-    // }
+
+  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 ? 'день' : 'дня'} назад`;
+    }
+    else if(diffHours >0)
+    {
+      return `${diffHours} ${diffHours === 1 ? 'час' : 'часа'} назад`;
+    }
+    else{
+      return `${diffMinuts} ${diffMinuts === 1 ? 'минута' : 'минут'} назад`;
+    }
+  }
+  else
+  {
+    return dateUTC.toLocaleString('ru-RU', { timeZone: userTimeZone });
+  }
+}
+
  }
 }
 </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) {
-      this.PercentageGameSteps = []
-      if (CrystalsCount >= 1 && CrystalsCount <= 24) {
-        try {
-            await GetPercentageSteps(this.amountCrystals)
-              .then((response) => {
-                response.forEach((item) => {
-                  if (item !== 'Infinity' && item !== '-Infinity') {
-                    this.PercentageGameSteps.push(Number(item))
+    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
            }
-        catch (e) {
-            console.error('Error in Percantage', e)
+            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 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
-       console.log(`MAXCIRLES - ${maxCircles} VALUE: ${value} GAMECIRCLE - ${this.gamesCircle}`)
+       const maxCircles = 25 - this.amountCrystals - this.gameTurn

       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 {