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
129 changed files with 10341 additions and 379 deletions
--- a/README.md
+++ b/README.md
@@ -1,31 +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>Bootstrap 5 Tutorial </h2>
- <p>Если получится то использовать его для фронта</p>
-     https://www.w3schools.com/bootstrap5/
-</body>
-</html>
- 
+![team](https://cdn.discordapp.com/attachments/1175674631684898866/1208428357952348170/Group_92.png?ex=65e33f9c&is=65d0ca9c&hm=9279223a5486b16e30267bced4fd1f7cc63ff59292cb5e29d741914b5902e5e0&)
--- a/luckydiamond/deploy.sh
+++ b/luckydiamond/deploy.sh
@@ -2,26 +2,26 @@

 # abort on errors
 set -e
-
 # build
 npm run build

 # navigate into the build output directory
 cd dist
+# git checkout main

 # if you are deploying to a custom domain
 # echo 'www.example.com' > CNAME

-git init
+# git init
 git add -A
 git commit -m 'deploy'

 # if you are deploying to https://<USERNAME>.github.io
-# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
+git push -f git@github.com:danilt2000/danilt2000.github.io.git main

 # if you are deploying to https://<USERNAME>.github.io/<REPO>
 # git pull origin
-git push -f git@github.com:danilt2000/LuckyDiamond.git main:gh-pages
+# git push -f git@github.com:danilt2000/LuckyDiamond.git main:gh-pages
 # git subtree push --prefix dist origin gh-pages

 cd -
--- a/luckydiamond/dist/index.html
+++ b/luckydiamond/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/LuckyDiamond/favicon.ico"><link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><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=Montserrat:wght@400;500;700&family=Poppins:wght@400;600&family=Press+Start+2P&display=swap" rel="stylesheet"><title>luckydiamond</title><script defer="defer" src="/LuckyDiamond/js/chunk-vendors.9ebc3acb.js"></script><script defer="defer" src="/LuckyDiamond/js/app.d5fdf871.js"></script><link href="/LuckyDiamond/css/app.bc469998.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but luckydiamond doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><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=Montserrat:wght@400;500;700&family=Poppins:wght@400;600&family=Press+Start+2P&display=swap" rel="stylesheet"><title>luckydiamond</title><script defer="defer" src="/js/chunk-vendors.9ebc3acb.js"></script><script defer="defer" src="/js/app.f8938cd1.js"></script><link href="/css/app.bc469998.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but luckydiamond doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
--- a/luckydiamond/dist/js/app.d5fdf871.js.map
+++ b/luckydiamond/dist/js/app.d5fdf871.js.map
--- a/luckydiamond/dist/js/app.f8938cd1.js
+++ b/luckydiamond/dist/js/app.f8938cd1.js
--- a/luckydiamond/dist/js/app.f8938cd1.js.map
+++ b/luckydiamond/dist/js/app.f8938cd1.js.map
--- a/luckydiamond/package-lock.json
+++ b/luckydiamond/package-lock.json
--- a/luckydiamond/package.json
+++ b/luckydiamond/package.json
@@ -9,9 +9,22 @@
    "deploy": "sh deploy.sh"
  },
  "dependencies": {
+    "@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-router": "^4.2.5"
+    "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": {
    "@babel/core": "^7.12.16",
--- a/luckydiamond/public/Idicon.png
+++ b/luckydiamond/public/Idicon.png
--- a/luckydiamond/public/index.html
+++ b/luckydiamond/public/index.html
@@ -1,21 +1,42 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
+
+<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-      <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+  <link rel="icon" href="<%= BASE_URL %>ldicon.png">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
  <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=Montserrat:wght@400;500;700&family=Poppins:wght@400;600&family=Press+Start+2P&display=swap" rel="stylesheet">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Poppins:wght@400;600&family=Press+Start+2P&display=swap"
+    rel="stylesheet">
+  <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>
+
+<body>
  <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
  </noscript>
+<!--  <div class="g-recaptcha" id="rcaptcha" data-callback="get_action" data-sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8"></div>-->
  <div id="app"></div>
+
  <!-- built files will be auto injected -->
-  </body>
+</body>
+<script src='https://www.google.com/recaptcha/api.js'></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
+<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/public/ldicon.png
+++ b/luckydiamond/public/ldicon.png
--- a/luckydiamond/public/sounds/correct-click.mp3
+++ b/luckydiamond/public/sounds/correct-click.mp3
--- a/luckydiamond/public/sounds/incorrect-sound.mp3
+++ b/luckydiamond/public/sounds/incorrect-sound.mp3
--- a/luckydiamond/public/sounds/start-game.mp3
+++ b/luckydiamond/public/sounds/start-game.mp3
--- a/luckydiamond/src/assets/LD.png
+++ b/luckydiamond/src/assets/LD.png
--- a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
@@ -0,0 +1,88 @@
+/* Header */
+
+.header-mobile {
+    grid-area: header-mobile;
+    border-radius: 20px;
+    background: #17181C;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    height: 45%;
+}
+
+.header-mobile__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-mobile__logo {
+    padding: 6% 0 2.5% 4%;
+}
+
+.header-mobile__logo img {
+    width: 85%;
+}
+
+.header-mobile__end {
+    display: flex;
+    align-items: center;
+}
+
+.header-mobile__balance--content {
+    display: flex;
+    align-items: center;
+}
+
+.header-mobile__card {
+    border-radius: 7px;
+    background: #22252F;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.card-display h2 {
+    display: flex;
+    align-items: flex-end;
+    padding: 13% 15px 13% 6%;
+}
+
+.card-img img {
+    width: 35%;
+    height: 100%;
+}
+
+.card-text {
+    color: #FFF;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.btn-card {
+    border-radius: 13px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    text-align: center;
+    padding: 4px;
+}
+
+.btn-card img {
+
+    width: 90%;
+    height: 40px;
+}
+
+.btn-card__margin {
+    margin-left: -1%;
+}
+
+.header-mobile__user-icon {
+    display: flex;
+    align-items: center;
+}
+
+.user-icon img {
+    width: 70%;
+    margin-left: 15px;
+}
+
+/* /Header */
--- a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css
@@ -0,0 +1,41 @@
+/* Footer */
+
+.footer-mobile {
+    grid-area: footer-mobile;
+    width: 100%;
+    height: 10%;
+    background: #17181C;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    position: fixed;
+    bottom: 0;
+}
+
+.footer-mobile__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2%;
+}
+
+.icons-size img {
+    width: 10%;
+}
+
+.footer-mobile__icons  {
+    margin: 2% 0;
+    width: 100%;
+}
+
+.icon-start {
+    margin-left: 8%;
+}
+
+.icon-end {
+    margin-left: 9%;
+}
+
+.icon-center {
+    margin-left: 9%;
+}
+
+/* /Footer */
--- a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css
@@ -0,0 +1,200 @@
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input:focus {
+    outline: none;
+}
+
+.root-mobile {
+    position: absolute;
+    top: 15%;
+    left: 10%;
+    background: #22252F;
+    border-radius: 25px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 80%;
+    height: 455px;
+    max-width: 400px;
+}
+
+.margin-mobile___payments {
+    margin-left: 10px;
+}
+
+.payments-modal-mobile {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.text-style-mobile h1 {
+    font-size: 22px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+}
+
+.padding-elements__mobile h1,
+.padding-elements__mobile img {
+    padding: 3% 3%;
+}
+
+.icon-close__mobile {
+    margin-top: 2%;
+}
+
+.payments-modal-mobile__content h2 {
+    color: #44C6EF54;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    line-height: 31px;
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.payments-modal-mobile__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.payments-modal__btns-mobile ul {
+    display: flex;
+}
+
+.input-style__mobile input {
+    border-radius: 15px;
+    border: 2px solid #2B3458;
+    background: #22252F;
+    width: 250px;
+}
+
+.input-mobile__number {
+    padding-left: 15px;
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+}
+
+.img-style img {
+    position: absolute;
+    width: 22px;
+    height: 22px;
+}
+
+.button-style__mobile li button {
+    padding: 6px 12px;
+    background: #252C47;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 6px;
+    border: none;
+    margin: 5px 0 5px 5px;
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+}
+
+.payments-modal__agree {
+    display: flex;
+}
+
+.payments-modal__agree h3 {
+    color: #44C6EF54;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    line-height: 31px;
+    font-weight: 700;
+    font-size: 9px;
+    margin-left: 5px;
+    line-height: unset;
+}
+
+.payments-modal__submit {
+    display: flex;
+    width: 95%;
+    margin: 0 auto;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    margin-top: 20%;
+}
+
+.payments-modal__submit p {
+    color: #949494F2;
+    font-family: Montserrat Alternates;
+    font-size: 8px;
+    font-weight: 700;
+}
+
+.payments-modal__submit button {
+    margin-top: 10px;
+    border-radius: 10px;
+    background: #EF4444;
+    border: none;
+    padding: 20px 20px;
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.payments-modal__promocode {
+    margin-top: 10px;
+}
+
+.payments-modal__promocode input {
+    height: 25px;
+    width: 250px;
+}
+
+.payments-modal__promocode input[placeholder] {
+    color: rgba(148, 148, 148, 0.95);
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+    padding-left: 10px;
+}
+
+.payments-modal__agree {
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+}
+
+.captcha-mobile {
+    top: 25px;
+    left: -10px;
+}
+
+/* Media */
+
+@media screen and (max-width: 600px) and (min-width: 420px) {
+    .root-mobile {
+        left: 12%;
+    }
+    .input-style__mobile input {
+        width: 300px !important;
+    }
+    .button-style__mobile li button {
+        padding: 8px 14px;
+    }
+    .payments-modal__agree h3 {
+        font-size: 10.5px;
+    }
+}
+
+@media screen and (max-width: 340px) {
+    .input-style__mobile input {
+        width: 225px;
+    }
+    .button-style__mobile li button {
+        padding: 6px 8px;
+    }
+    .checkbox-styles input[type="checkbox"] {
+        width: 15px;
+        height: 15px;
+    }
+    input[type="checkbox"]:checked::before {
+        font-size: 10px;
+        line-height: unset;
+    }
+}
--- 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));
@@ -31,6 +72,36 @@
    border-radius: 20px;
 }

+.menu__content--slots-icon {
+    margin-left: 5px
+}
+
+.menu__content--cruch-icon {
+    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;
+    width: 100%;
+    height: 100%;
+    transition: 250ms;
+}
+
+.menu__content--bomb-icon:hover {
+    margin-left: 0px;
+    width: 125%;
+    height: 125%;
+}
+
 .menu__content--gamemodes {
    display: flex;
    text-align: center;
@@ -46,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
@@ -1,5 +1,24 @@
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #121212;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #EF4444;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #b30000;
+}
+
 .chat {
-    margin: 1% 1.2% 0 0;
+    margin: 1% 3.2% 0 0;
+    word-break: break-all;
 }

 .chat__content {
@@ -22,15 +41,39 @@
    font-size: 18px;
    font-weight: 700;
 }
-
-.content p {
+.chat__mute-button {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
+/* .content p {
    width: 80%;
    word-wrap: break-word;
    margin: 0 auto;
+} */
+
+.content p {
+    display: block;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    overflow: hidden;
 }

 .chat__content--users {
-    height: 70%;
+    /* height: 590px; */
+    height: 70vh;
+    width: auto;
+    overflow-y: auto;
+    overflow-x: auto;
+}
+
+.chat__content,
+.chat__content--users {
+    box-sizing: border-box;
+}
+
+.chat__content--users {
+    margin: 0;
 }

 .card__user {
@@ -38,10 +81,13 @@
    display: flex;
 }

-.fade-enter-active, .fade-leave-active {
-    transition: opacity 0.5s, transform 0.5s;
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.1s, transform 0.1s;
 }
-.fade-enter, .fade-leave-to {
+
+.fade-enter,
+.fade-leave-to {
    opacity: 0;
    transform: translateY(20px);
 }
@@ -72,7 +118,8 @@
    bottom: 0;
    margin: 24% 87% 6% 6%;
    user-select: none;
-    width: 50%;
+    /* width: 50%; */
+    width: 90%;
 }

 .write__content {
@@ -81,13 +128,46 @@
 }

 .write__content input {
-    padding: 14px 35% 14px 12px;
+    padding: 14px 25% 14px 12px;
    border-radius: 13px;
    background: #22252F;
    color: #A9A99D;
    border: none;
 }

+/* .write__content textarea {
+    padding: 14px 25% 14px 12px;
+    border-radius: 13px;
+    background: #22252F;
+    color: #A9A99D;
+    border: none;
+} */
+/* .write__content textarea {
+    padding: 14px 12px;
+    border-radius: 13px;
+    background: #22252F;
+    color: #A9A99D;
+    border: none;
+    width: 600px;
+    box-sizing: border-box;
+    resize: vertical;
+} */
+
+.write__content textarea {
+    padding: 14px 12px;
+    border-radius: 13px;
+    background: #22252F;
+    color: #A9A99D;
+    border: none;
+    width: 600px;
+    box-sizing: border-box;
+    resize: none;
+}
+
+.write__content textarea:focus {
+    outline: none;
+}
+
 .write__content input::placeholder {
    color: #A9A99D;
    font-weight: 800;
@@ -97,7 +177,8 @@

 .write__content button {
    padding: 8px 9px;
-    margin-left: -15%;
+    /* margin-left: -20%; */
+    margin-right: -5%;
    border-radius: 6px;
    background: #3D3F48;
    border: none;
@@ -107,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
@@ -14,17 +14,26 @@
    padding: 1.8% 0 1.2% 2.6%;
 }

+.header__logo img {
+    cursor: pointer;
+}
+
 .header__nav nav a {
-    margin-right: 30%;
    text-decoration: none;
    font-family: Montserrat Alternates;
    font-weight: 700;
+    font-size: 18px;
+    margin-right: 3em;
+    transition: 250ms;
+}
+
+.header__nav nav a:hover {
+    color: #EF4444;
 }

 .header__nav--now {
    color: #EF4444;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    font-size: 18px;
    position: relative;
 }

@@ -40,6 +49,10 @@
    z-index: 1;
 }

+.header__balance {
+    width: 120px;
+}
+
 .header__content--balance {
    display: flex;
    align-items: center;
@@ -76,6 +89,7 @@
    padding: 20px 23px 20px 23px;
    text-decoration: none;
    margin-left: -15%;
+    transition: 200ms;
 }

 .header__auth--discord {
@@ -111,6 +125,7 @@
    background: #30323E;
    text-decoration: none;
    padding: 6px 2px 6px 2px;
+    width: 75px;
 }

 .discord__card--name a span img {
@@ -131,9 +146,9 @@
    display: flex;
    align-items: center;
    border-radius: 13px;
-    background: #5865F2;
+    background: #5865f2;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    color: #000;
+    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: Montserrat;
@@ -143,5 +158,5 @@
 }

 .auth__card--content a span img {
-    margin-right: 5px;
+    margin: 8% 5px 0 0;
 }
--- 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
@@ -0,0 +1,293 @@
+.payment-modal {
+    position: absolute;
+    top: 20%;
+    left: 35%;
+    border-radius: 25px;
+    background: #22252F;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 390px;
+    height: 420px;
+}
+
+.payments-modal__content {
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+.close-modal__icon img {
+    margin: 21px 22px 0 0;
+    cursor: pointer;
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+.text-styles__margin h1 {
+    margin: 16px 0 0 26px;
+}
+
+.payments-modal__content h1 {
+    color: #fff;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 20px;
+}
+
+.payments-modal__deposit {
+    margin-left: 26px;
+}
+
+.deposit-text h3 {
+    color: rgba(68, 198, 239, 0.33);
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    margin-top: -10px;
+}
+
+.deposit-icon-diamond img {
+    position: absolute;
+    top: 16%;
+    left: 10%;
+}
+
+.deposit-icon__input .promo-input,
+.deposit-icon__input .deposit-amount__input,
+.withdraw-input .with-input{
+    width: 350px;
+    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;
+}
+.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;
+}
+
+.btns-style-diamonds button {
+    border-radius: 10px;
+    background: #252C47;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #FFF;
+    font-weight: 700;
+    line-height: 31px;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    border: none;
+    margin-right: 6px;
+    padding: 4px 19px;
+    
+}
+
+.deposit-promocode {
+    margin-top: 15px;
+}
+
+.deposit-promocode__padding--input input {
+    padding-left: 15px;
+}
+
+.deposit-checkbox {
+    display: flex;
+    margin-top: 11px;
+}
+
+.withdraw-checkbox {
+    display: flex;
+    align-items: center;
+    margin-top: 11px;
+}
+
+.withdraw-checkbox h3 {
+    margin: 0 0 0 5px;
+}
+
+.checkbox-styles input[type="checkbox"] {
+    background: #22252F;
+    border-radius: 8px;
+    border: 2px solid #2B3458;
+    width: 25px;
+    height: 25px;
+    outline: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+}
+
+input[type="checkbox"]:checked::before {
+    content: '\2713';
+    font-weight: 700;
+    font-size: 16px;
+    display: block;
+    text-align: center;
+    line-height: 22px;
+    color: #fff;
+}
+
+.deposit-checkbox h3 {
+    margin: 0 0 0 10px;
+}
+
+.btn-deposit,
+.btn-withdraw {
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    margin: 10% 6% 0 0;
+}
+
+.btn-display-deposit {
+    display: flex;
+    flex-direction: column;
+}
+
+.btn-text-style p {
+    color: #949494F2;
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 7.5px;
+    margin: 5px 0;
+}
+
+.btn-style-payments button {
+    border-radius: 10px;
+    background: #EF4444;
+    Font-family: Montserrat Alternates;
+    font-size: 16px;
+    color: #fff;
+    font-weight: 700;
+    line-height: 19px;
+    padding: 22px 120px;
+    border: none;
+}
+
+.btn-style-payments button:disabled {
+    background: #3d3a3a;
+}
+
+.btn-click {
+    border-radius: 10px !important;
+    background: #EF4444 !important;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
+}
+
+/* Withdraw */
+
+.withdraw-modal {
+    height: 520px;
+}
+
+.payments-modal__withdraw {
+    margin-left: 26px;
+}
+
+.error-checkbox {
+    position: absolute;
+}
+
+.error-checkbox h2 {
+    font-size: 13px;
+    font-weight: 700;
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+}
+
+.error-promocode {
+    position: absolute;
+    left: 49%;
+    top: 35%;
+}
+
+.error-promocode .error-text__promocode {
+    font-size: 11px;
+    font-weight: 700;
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    margin-left: 55px;
+}
+
+.error-promocode .correct-text__promocode {
+    font-size: 11px;
+    font-weight: 700;
+    color: #3BA44C;
+    font-family: "Montserrat Alternates";
+}
+
+.checkbox-styles input:disabled:hover {
+    animation: shake 0.6s cubic-bezier(.36, .07, .19, .97);
+}
+
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-4px);
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(4px);
+    }
+}
+
+.number-card {
+    margin-top: 15px;
+}
+
+.btn-withdraw {
+    margin-top: 15%;
+}
+
+/* /Withdraw */
+
+/* Captcha Styles */
+
+.captcha-withdraw {
+    position: relative;
+    left: 20px;
+    top: 15px;
+}
+
+/* /Captcha Styles */
--- 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/adaptive-pages/homemobile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
@@ -0,0 +1,96 @@
+body {
+    overflow-y: scroll;
+}
+
+.content-grid__mobile-home {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(7, 1fr);
+    grid-template-areas:
+    "header-mobile header-mobile header-mobile header-mobile"
+    "main-mobile main-mobile main-mobile main-mobile"
+    "main-mobile main-mobile main-mobile main-mobile"
+    "footer-mobile footer-mobile footer-mobile footer-mobile";
+    height: 100%;
+    width: 100%;
+}
+
+.main-mobile {
+    grid-area: main-mobile;
+    width: 100%;
+    height: 100%;
+}
+
+/* Main */
+
+.main-mobile__content {
+    margin-top: 6%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.bg-mobile {
+    border-radius: 10px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    height: 10em;
+}
+
+.main-mobile__first-line {
+    display: flex;
+    width: 100%;
+}
+
+.main-mobile__two-line {
+    display: flex;
+    width: 100%;
+}
+
+.card-mobile__content { /* text display */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.card-first {
+    margin: 0 2.5% 0 3%;
+}
+
+.card-game__text h2 {
+    color: #FFF;
+    font-weight: 700;
+    font-size: 41px;
+    text-align: center;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    text-transform: uppercase;
+}
+
+.card-two {
+    margin: 5.1% 2.5% 0 3%;
+}
+
+.card-mobile__btn a {
+    text-decoration: none;
+    color: #000;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 30px;
+    border-radius: 21px;
+    background: #FFF;
+    padding: 6px 11px;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.card-mobile__btn span {
+    font-size: 29px;
+    color: #000;
+}
+
+/* /Main */
--- a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css
@@ -0,0 +1,95 @@
+body {
+    overflow-y: scroll;
+}
+
+.header-mobile {
+    height: 70%;
+}
+
+.profile-mobile {
+    grid-area: profile-mobile;
+    width: 100%;
+    height: 100%;
+}
+
+.profile-mobile__btns-payments {
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-mobile__btns-payments a {
+    color: #17181C;
+    border-radius: 10px;
+    font-family: Montserrat Alternates;
+    font-size: 18px;
+    font-weight: 700;
+    text-decoration: none;
+    padding: 20px 20px;
+    margin: 0 0 2% 0
+}
+
+.profile-mobile__btns-payments .deposit-button {
+    background: #62D4B2;
+    margin-top: 4%;
+}
+
+.withdraw-button {
+    background: #EF4444;
+}
+
+.text-default-mobile h2, h3 {
+    font-weight: 700;
+    color: #fff;
+}
+
+.macroinfo-profile {
+    margin: 5% 10% 0 10%;
+    text-align: center;
+}
+
+.macroinfo-profile img {
+    width: 45%;
+    height: 100%;
+}
+
+.img-margin img {
+    margin-top: 15px;
+}
+
+.macroinfo-profile h2 {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 33px;
+}
+
+.header-off {
+    pointer-events: none !important;
+    filter: blur(15px) !important;
+}
+
+.info-profile {
+    margin: 6% 10% 0 10%;
+    text-align: center;
+}
+
+.info-profile .text-nickname-user {
+    font-family: Montserrat;
+    font-size: 2em;
+}
+
+.info-profile .balance-border {
+    border-radius: 20px;
+    width: 100%;
+    background: #22252F;
+}
+
+.info-profile .balance-display {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.info-profile .balance-text {
+    font-family: Montserrat Alternates;
+    font-size: 28px;
+}
--- 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
@@ -0,0 +1,696 @@
+.saper {
+    display: flex;
+    padding-top: 10%;
+    border-radius: 20px;
+    background: #17181C;
+    backdrop-filter: blur(100px);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.bg {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 250px;
+    transform: rotate(180deg);
+    left: 200px;
+    width: 40%;
+    height: 55%;
+    z-index: -1;
+}
+
+.bg-two {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 220px;
+    transform: rotate(330deg);
+    left: 600px;
+    width: 60%;
+    height: 35%;
+    z-index: -1;
+}
+
+.saper-start {
+    z-index: 1;
+    margin-left: 5%;
+    border-radius: 20px;
+    background: #22252F;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 27%;
+    height: 480px;
+    margin-top: 2.6%;
+}
+
+.padding-elements {
+    padding-left: 5%;
+}
+
+.title-saper h2 {
+    padding: 16px 0 5px 0;
+    color: #FFF;
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 26px;
+}
+
+.saper-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;
+}
+
+.crystals h3,
+.diamonds h3 {
+    color: #44C6EF54;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 31px;
+}
+
+.crystals .crystals__choises input,
+.diamonds .diamonds__choises input {
+    width: 110px;
+    height: 38px;
+    color: #FFF;
+    font-weight: 700;
+    line-height: 31px;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    border-radius: 10px;
+    padding-left: 25px;
+    border: 2px solid #2B3458;
+    background: #22252F;
+}
+
+.crystals__choises {
+    display: flex;
+    align-items: center;
+}
+
+.crystals .crystals__choises input:focus,
+.diamonds .diamonds__choises input:focus {
+    outline: none;
+}
+
+.crystals-input__margin {
+    margin-left: -5.5%;
+}
+
+.btn-click {
+    border-radius: 10px !important;
+    background: #EF4444 !important;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
+}
+
+.crystals-btns__choices button,
+.btn-style__diamonds button {
+    margin-left: 5px;
+    border-radius: 10px;
+    background: #252C47;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border: none;
+    color: #FFF;
+    font-weight: 700;
+    line-height: 31px;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    padding: 4px 23px;
+}
+
+.crystal-icon,
+.diamond-icon {
+    position: relative;
+    left: 25px;
+    top: 2px;
+}
+
+.crystals-btns__display {
+    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: 37vh;
+    height: 4vh;
+}
+
+.diamonds h3 {
+    margin: 1.2% 0 0 5.8%;
+}
+
+.diamonds-input__margin {
+    margin-left: -5.6%;
+}
+
+.diamonds .diamonds__choises input {
+    padding-left: 35px;
+}
+
+.diamond-icon {
+    top: 12px;
+    left: 35px;
+}
+
+.diamonds__btns {
+    margin: 2.5% 0 0 5.5%;
+}
+
+.diamonds-btns__display {
+    display: flex;
+    margin-left: -1%;
+}
+
+.btn-style__diamonds button {
+    padding: 4px 20px;
+}
+
+#max-button {
+    text-transform: uppercase;
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 700;
+    padding: 4px 13px;
+}
+
+.saper-start__btns {
+    margin: 3.7% 2.7% 0 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.saper-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;
+
+}
+
+.btn-start {
+    border-radius: 10px;
+    background: #EF4444;
+}
+
+.btn-claim {
+    border-radius: 10px;
+    background: #252C47;
+}
+
+.saper-start__steps {
+    margin-top: 1%;
+}
+
+.steps-btns__display span {
+    display: flex;
+    justify-content: center;
+    font-size: 10px;
+    color: #adadad;
+}
+
+.steps-btns__display {
+    display: flex;
+}
+
+.btns-style__steps button {
+    border-radius: 10px;
+    background: #252C47;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border: none;
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    width: 100px;
+    height: 40px;
+}
+
+.error-block {
+    position: absolute;
+    top: 445px;
+}
+
+.error-block h2 {
+    color: #982f2f;
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 10px;
+}
+
+.animate-start-btn {
+    animation: shake 0.6s cubic-bezier(.36, .07, .19, .97);
+    opacity: 50%;
+}
+
+/* Saper Game */
+
+.start-game {
+    position: absolute;
+    top: 15%;
+    left: 45%;
+    background: #262C48;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+.saper-game {
+    margin: -2.75% 0 0 5.1%;
+}
+
+.saper-game__content {
+    display: flex;
+    border-radius: 20px;
+    background: #22252F;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 85%;
+    height: 580px;
+}
+
+.square {
+    border-radius: 10px;
+    background: #252C47;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 95px;
+    height: 95px;
+    cursor: pointer;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.square-fliper {
+    transform: rotateY(180deg);
+}
+
+.square h2 {
+    transition: .2s;
+    opacity: 1;
+    user-select: none;
+}
+
+.square-text {
+    color: #303751;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 33px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+    padding-top: 25px;
+}
+
+.game {
+    pointer-events: none;
+}
+
+.game-end {
+    pointer-events: none;
+    user-select: none;
+    filter: blur(5px);
+}
+
+.img-style-click {
+    position: relative;
+    width: 110px;
+    height: 110px;
+    top: -70px;
+    user-select: none;
+}
+
+.crystal-img {
+    left: -5px;
+}
+
+.game-start {
+    pointer-events: unset !important;
+}
+
+.game-start__menu-off .crystals,
+.game-start__menu-off .diamonds,
+.game-start__menu-off .saper-start__btns .btn-start {
+    pointer-events: none;
+}
+
+.hidden {
+    opacity: 0 !important;
+}
+
+.display-lines {
+    display: flex;
+}
+
+.margin-lines .firstline {
+    margin-top: 5%;
+}
+
+.margin-lines {
+    padding-left: 4%;
+}
+
+.margin-lines li {
+    margin: 2% 10px 1% 0;
+}
+
+.info-emeralds {
+    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: 250px;
+}
+
+.text-style__subtitle h2 {
+    margin: 8% 0 6px 6.3%;
+    color: #FFF;
+    font-weight: 800;
+    line-height: 18px;
+    text-transform: uppercase;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 17px;
+}
+
+.text-style__comment p {
+    margin-left: 6.3%;
+    color: #9CA5C7;
+    font-weight: 400;
+    line-height: 13px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.info-crystals {
+    margin: 13.5% 0 0 10.5%;
+}
+
+.circles__content {
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    left: 17px;
+}
+
+.circles {
+    position: absolute;
+}
+
+.circles-1 {
+    top: 125px;
+}
+
+.circles-2 {
+    top: 235px;
+}
+
+.circles-3 {
+    top: 345px;
+}
+
+.circles-4 {
+    top: 455px;
+}
+
+/* /Saper Game */
+
+/* Media */
+
+@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
+    .saper-game__content {
+        width: auto;
+    }
+
+    .error-block {
+        top: 425px;
+    }
+
+    .saper-start {
+        width: 30%;
+        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 {
+        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;
+    }
+}
+
+@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
+    .bg-two {
+        left: 300px;
+    }
+
+    .error-block {
+        top: 410px;
+    }
+
+    .saper-game__content {
+        width: auto;
+    }
+
+    .saper-start {
+        width: 30%;
+        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 {
+        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;
+    }
+}
+
+/* /Media */
+
+/* Swiper */
+
+.swiper {
+    user-select: none;
+    width: 100%;
+    height: 100%;
+    margin-top: 18px;
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+}
+
+.swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.swiper-button-prev:after,
+.swiper-button-next:after {
+    font-size: 30px;
+    color: rgb(210 31 31 / 62%);
+}
+
+/* /Swiper */
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -69,7 +69,7 @@
 /* GameMode */

 .gamemode__content--text h2 {
-    margin: 2% 0 .5% 10%;
+    margin: 1.2% 0 .5% 8%;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -79,14 +79,14 @@
 }

 .gamemode__content--text div {
-    width: 80%;
-    margin: 0 auto;
+    width: 82%;
+    margin-left: 8%;
    border: 1px solid #fff;
 }

 .gamemode__content--card {
    display: flex;
-    margin-top: 1.8%;
+    margin-top: 1.2%;
 }

 .bg-card {
@@ -95,6 +95,12 @@
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }

+.bg-early{
+    border-radius: 40px;
+    background: #969B9E;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
 .gamemode__main {
    width: 32%;
    height: 100%;
@@ -117,21 +123,38 @@
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
-    font-size: 91px;
+    font-size:91px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
 }

+.title-jackpot {
+    color: #fff;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size:80px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+    padding: 0px 0px 0px 28px;
+}
+
 .line__footer {
    display: flex;
    justify-content: center;
    align-items: center;
-    padding-top: 12%;
+    padding-top: 5.5%;
+}
+
+.line__content .line__btn--main .line__btn {
+    top: 2.5em;
+    left: -2em;
+    width: 100%;
 }

 .line__footer img {
-    width: 60%;
+    margin-bottom: 5%;
 }

 .gamemode__lines {
@@ -146,10 +169,42 @@
 }

 .line__img {
-    float: right;
+    display: flex;
    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;
@@ -160,17 +215,128 @@
    font-family: Montserrat Alternates;
    font-size: 36px;
    font-weight: 700;
-    padding: 11px 11px;
+    padding: 11px 0px 11px 11px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    bottom: 5%;
    left: 2%;
+    transition: 250ms;
 }

+.line__btn span:after {
+    content: '\00bb';
+    opacity: 0;
+    transition: 250ms;
+    right: 20;
+  }
+
+.line__btn:hover span:after {
+    opacity: 1;
+    right: 0;
+    padding-right: 0px;
+  }
+
+.line__btn:hover {
+    padding:11px 11px 11px 22px ;
+  }
+
+.line__btn:active {
+    left: 5%;
+  }
+
+.line__btn--crash {
+    border-radius: 21px;
+    background: #FFF;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #000;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 36px;
+    font-weight: 700;
+    padding: 11px 0px 11px 11px;
+    text-decoration: none;
+    text-transform: uppercase;
+    position: relative;
+    bottom: 5%;
+    left: 2%;
+    transition: 250ms;   
+}
+
+.line__btn--crash span:after {
+    content: '\00bb';
+    opacity: 0;
+    transition: 250ms;
+    right: 20;
+  }
+
+.line__btn--crash:hover span:after {
+    opacity: 1;
+    right: 0;
+    padding-right: 0px;
+  }
+
+.line__btn--crash:hover {
+    padding:11px 11px 11px 22px ;
+  }
+
+.line__btn--crash:active {
+    left: 5%;
+  }
+
+.line__btn__jackpot {
+    border-radius: 21px;
+    background: #FFF;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #000;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 36px;
+    font-weight: 700;
+    padding: 11px 0px 11px 11px;
+    text-decoration: none;
+    text-transform: uppercase;
+    position: relative;
+    bottom: 4%;
+    left: 6%;
+    transition: 250ms;
+}
+
+.line__btn__jackpot span:after {
+    content: '\00bb';
+    opacity: 0;
+    transition: 250ms;
+  }
+
+.line__btn__jackpot:hover span:after {
+    opacity: 1;
+    right: 0;
+    padding-right: 0px;
+  }
+
+.line__btn__jackpot:hover {
+    padding:11px 11px 11px 22px ;
+  }
+
+  .line__btn__jackpot:active {
+    left: 10%;
+  }
+
 .line__btn--elm {
    color: #000;
-    font-size: 38px;
+    font-size: 38px ;
+}
+
+.line__btn--elm--saper {
+    color: #000;
+    font-size: 4vh !important;
+}
+
+@media (max-width: 1590px) {
+    .line__btn--elm--saper {
+        font-size: 2vh !important;
+        display: none;
+    }
 }

 .linecontent-2 {
@@ -190,7 +356,7 @@

 .gamemode__twoline--first__element {
    width: 100%;
-    margin: 3% 3.6% 0 5.5%;
+    margin: 2% 3.6% 0 5.5%;
    min-height: 180px;
 }

@@ -204,9 +370,10 @@
    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%;
 }

 .gamemode__twoline--first__element .container {
@@ -218,10 +385,11 @@
 .gamemode__twoline--first__element .container a {
    margin-right: 10%;
    padding: 12px 10px;
+    margin-bottom: 3%;
 }

 .gamemode__twoline--two__element {
-    margin-top: 3%;
+    margin-top: 2%;
    width: 100%;
    min-height: 180px;
 }
@@ -235,4 +403,187 @@
    margin-right: 10%;
 }

+.cumming_soon--img {
+    margin-bottom: 4%;
+}
+
 /* /GameMode */
+
+/* Media */
+
+@media only screen and (max-width:1800px) {
+    .line__img__jackpot {
+        width: 150px;
+        height: 150px;
+    }
+
+    .line__footer img {
+        width: 55%;
+        margin-bottom: 5%;
+    }
+}
+
+@media only screen and (max-width:1700px) {
+    .title-jackpot {
+        font-size:60px;
+        padding: 0px 0px 0px 28px;
+    }
+
+    .title-twoline {
+        font-size: 60px;
+    }
+
+    .line__img__jackpot {
+        height: 150px;
+        width: 150px;
+    }
+
+    .line__footer img {
+        width: 40%;
+        margin-bottom: 5%;
+    }
+
+    .line__content {
+        width: 100%;
+        height: 100%;
+    }
+
+    .line__btn {
+        border-radius: 16px;
+        font-size: 30px;
+        padding: 11px 11px 11px 11px;
+    }
+
+    .main__content h1 {
+        font-size: 70px;
+    }
+
+    .title-firstline {
+        font-size:80px;
+    }
+
+    .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 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
@@ -0,0 +1,400 @@
+.profile__content {
+    width: 30%;
+    margin-left: 3%;
+}
+.profile__content .profile__user--img {
+    margin: 17.6% 8.4% 1% 0;
+    background: #969C8D;
+    padding-top: 10px;
+    border-radius: 20px;
+}
+
+.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;
+    width: 60%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    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;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    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%;
+}
+
+.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;
+    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;
+    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;
+}
+.user-name__text p {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 20px;
+}
+.data-info {
+    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-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 {
+    font-weight: 500;
+    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%;
+    }
+    .btn-margin {
+        padding-right: 56%;
+    }
+    .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%;
+    }
+    .btn-margin {
+        padding-right: 66%;
+    }
+    .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) 1.2fr;
+    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,9 +55,76 @@ 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: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-auto-columns: 1fr;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat";
+    grid-gap: 0.625rem;
+    height: 100%;
+}
+
+.content-grid--saper {
+    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 saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat";
+    grid-gap: 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 */

@@ -46,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;
 }

@@ -59,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;
 }

@@ -71,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 */
@@ -84,9 +172,9 @@ body, html {

 .main {
    grid-area: main;
-    width: 80%;
+    width: 82%;
    height: 90%;
-    margin: 2.7% auto 0;
+    margin: 2% auto 0 8%;
 }

 /* /Main */
@@ -100,3 +188,134 @@ body, html {
 }

 /* /GameMode */
+
+/* Profile */
+
+.profile {
+    display: flex;
+    grid-area: profile;
+    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;
+}
+
+.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 */
+
+.saper {
+    grid-area: saper;
+    /*height: 96.2%;*/
+}
+
+/* /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-adaptive/home-adaptive/icon-chat-menu.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-chat-menu.png
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-home-menu.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-home-menu.png
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-info-menu.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-info-menu.png
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-menu.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-menu.png
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M40.5352 9.64286H7.03125C6.25781 9.64286 5.625 8.91964 5.625 8.03571C5.625 7.15179 6.25781 6.42857 7.03125 6.42857H40.7812C41.5547 6.42857 42.1875 5.70536 42.1875 4.82143C42.1875 2.1596 40.2979 0 37.9688 0H5.625C2.52246 0 0 2.88281 0 6.42857V38.5714C0 42.1272 2.52246 45 5.625 45H40.5352C42.9961 45 45 42.8404 45 40.1786V14.4643C45 11.8025 42.9961 9.64286 40.5352 9.64286ZM36.5625 30.5357C35.0068 30.5357 33.75 29.0993 33.75 27.3214C33.75 25.5435 35.0068 24.1071 36.5625 24.1071C38.1182 24.1071 39.375 25.5435 39.375 27.3214C39.375 29.0993 38.1182 30.5357 36.5625 30.5357Z" fill="white"/>
+</svg>
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet.svg
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M36.0312 8.57143H6.25C5.5625 8.57143 5 7.92857 5 7.14286C5 6.35714 5.5625 5.71429 6.25 5.71429H36.25C36.9375 5.71429 37.5 5.07143 37.5 4.28571C37.5 1.91964 35.8203 0 33.75 0H5C2.24219 0 0 2.5625 0 5.71429V34.2857C0 37.4464 2.24219 40 5 40H36.0312C38.2188 40 40 38.0804 40 35.7143V12.8571C40 10.4911 38.2188 8.57143 36.0312 8.57143ZM32.5 27.1429C31.1172 27.1429 30 25.8661 30 24.2857C30 22.7054 31.1172 21.4286 32.5 21.4286C33.8828 21.4286 35 22.7054 35 24.2857C35 25.8661 33.8828 27.1429 32.5 27.1429Z" fill="white"/>
+</svg>
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/logo.svg
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/logo.svg
--- 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-games/saper-game/bg-saper.png
+++ b/luckydiamond/src/assets/icons-games/saper-game/bg-saper.png
--- a/luckydiamond/src/assets/icons-games/saper-game/circles.png
+++ b/luckydiamond/src/assets/icons-games/saper-game/circles.png
--- a/luckydiamond/src/assets/icons-games/saper-game/icon-crystall-info-saper.svg
+++ b/luckydiamond/src/assets/icons-games/saper-game/icon-crystall-info-saper.svg
@@ -0,0 +1,92 @@
+<svg width="207" height="204" viewBox="0 0 207 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_291_5)">
+<g filter="url(#filter1_d_291_5)">
+<rect x="45.7563" y="68.2073" width="88.9238" height="84.8552" rx="17" transform="rotate(-15 45.7563 68.2073)" stroke="url(#paint0_linear_291_5)" stroke-width="6" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_d_291_5)">
+<rect x="1.07377" y="4.00737" width="53.2329" height="53.2329" rx="9" transform="matrix(0.876765 0.480919 -0.518841 0.85487 91.295 58.1855)" stroke="#954DBB" stroke-width="6" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_d_291_5)">
+<rect x="-3.03331" y="3.03205" width="64.5948" height="67.324" rx="12" transform="matrix(-0.011161 0.999938 -0.999942 0.0107455 136.702 68.0248)" stroke="#5F277D" stroke-width="6" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_d_291_5)">
+<rect x="-1.08514" y="4.05317" width="52.7983" height="55.0715" rx="9" transform="matrix(0.509634 0.860391 -0.871348 0.490665 114.308 60.4024)" stroke="#BE95D4" stroke-width="6" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_d_291_5)">
+<rect width="14.6307" height="15.1963" rx="4" transform="matrix(0.509634 0.860391 -0.871348 0.490665 102.576 87.6599)" fill="#FF8D8D"/>
+<rect x="0.904284" y="-3.37764" width="19.6307" height="20.1963" rx="6.5" transform="matrix(0.509634 0.860391 -0.871348 0.490665 100.076 85.1615)" stroke="#CE0624" stroke-width="5"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_291_5" x="0.572021" y="0.0078125" width="206.224" height="203.348" 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="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.152941 0 0 0 0 0.490196 0 0 0 0.85 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_291_5"/>
+<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="22.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.584314 0 0 0 0 0.301961 0 0 0 0 0.733333 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_291_5" result="effect2_dropShadow_291_5"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_291_5" result="shape"/>
+</filter>
+<filter id="filter1_d_291_5" x="42.572" y="46.0078" width="114.224" height="111.348" 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 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_291_5"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
+</filter>
+<filter id="filter2_d_291_5" x="58.8711" y="62.3774" width="81.6257" height="78.6085" 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 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_291_5"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
+</filter>
+<filter id="filter3_d_291_5" x="58.7964" y="62.1525" width="81.7747" height="79.0577" 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 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_291_5"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
+</filter>
+<filter id="filter4_d_291_5" x="58.5505" y="61.7294" width="82.2671" height="79.9052" 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 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_291_5"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
+</filter>
+<filter id="filter5_d_291_5" x="81.7722" y="84.1483" width="35.8225" height="35.0674" 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 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_291_5"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_291_5" x1="89.5439" y1="66.0859" x2="68.5897" y2="154.588" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#B8B8B8"/>
+</linearGradient>
+</defs>
+</svg>
--- a/luckydiamond/src/assets/icons-games/saper-game/icon-crystall-saper.svg
+++ b/luckydiamond/src/assets/icons-games/saper-game/icon-crystall-saper.svg
@@ -0,0 +1,82 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#208;&#186;&#209;&#128;&#208;&#184;&#209;&#129;&#209;&#130;&#208;&#176;&#208;&#187;">
+<g id="Rectangle 106" filter="url(#filter0_d_1028_3685)">
+<rect y="1.41421" width="18.6091" height="17.9178" rx="3" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 18.2559 27.4142)" stroke="url(#paint0_linear_1028_3685)" stroke-width="2" shape-rendering="crispEdges"/>
+</g>
+<g id="Rectangle 107" filter="url(#filter1_d_1028_3685)">
+<mask id="path-2-inside-1_1028_3685" fill="white">
+<rect width="10.3706" height="10.3706" rx="1" transform="matrix(0.021246 -0.999774 -0.999774 0.021246 22.574 18.574)"/>
+</mask>
+<rect width="10.3706" height="10.3706" rx="1" transform="matrix(0.021246 -0.999774 -0.999774 0.021246 22.574 18.574)" stroke="#954DBB" stroke-width="4" shape-rendering="crispEdges" mask="url(#path-2-inside-1_1028_3685)"/>
+</g>
+<g id="Rectangle 109" filter="url(#filter2_d_1028_3685)">
+<rect x="1.38039" y="-0.370165" width="12.8778" height="13.2856" rx="2" transform="matrix(-0.871387 -0.490597 -0.509008 0.860762 27.5064 11.937)" stroke="#5F277D" stroke-width="2" shape-rendering="crispEdges"/>
+</g>
+<g id="Rectangle 108" filter="url(#filter3_d_1028_3685)">
+<mask id="path-4-inside-2_1028_3685" fill="white">
+<rect width="7.47011" height="7.75018" rx="1" transform="matrix(-0.490597 -0.871387 -0.860762 0.509008 22.6675 14.7822)"/>
+</mask>
+<rect width="7.47011" height="7.75018" rx="1" transform="matrix(-0.490597 -0.871387 -0.860762 0.509008 22.6675 14.7822)" stroke="#BE95D4" stroke-width="4" shape-rendering="crispEdges" mask="url(#path-4-inside-2_1028_3685)"/>
+</g>
+<g id="Rectangle 110" filter="url(#filter4_d_1028_3685)">
+<rect width="1.11041" height="1.15204" rx="0.3" transform="matrix(-0.490597 -0.871387 -0.860762 0.509008 18.2681 13.6904)" fill="#FF8D8D"/>
+<rect x="0.675679" y="0.181189" width="2.11041" height="2.15204" rx="0.8" transform="matrix(-0.490597 -0.871387 -0.860762 0.509008 19.4312 14.3682)" stroke="#CE0624"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1028_3685" x="0.828613" y="0.828369" width="33.3433" height="33.3433" 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 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_1028_3685"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1028_3685" result="shape"/>
+</filter>
+<filter id="filter1_d_1028_3685" x="8.22681" y="8.22681" width="18.5464" height="18.5464" 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 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_1028_3685"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1028_3685" result="shape"/>
+</filter>
+<filter id="filter2_d_1028_3685" x="4.24084" y="4.35327" width="26.5182" height="26.2937" 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 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_1028_3685"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1028_3685" result="shape"/>
+</filter>
+<filter id="filter3_d_1028_3685" x="8.69214" y="8.64404" width="17.615" height="17.7119" 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 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_1028_3685"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1028_3685" result="shape"/>
+</filter>
+<filter id="filter4_d_1028_3685" x="11.8489" y="11.825" width="11.302" height="11.3499" 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 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_1028_3685"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1028_3685" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1028_3685" x1="8.30453" y1="-2.28723e-07" x2="4.62908" y2="15.5034" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#B8B8B8"/>
+</linearGradient>
+</defs>
+</svg>
--- a/luckydiamond/src/assets/icons-games/saper-game/icon-diamond-ore-saper.png
+++ b/luckydiamond/src/assets/icons-games/saper-game/icon-diamond-ore-saper.png
--- a/luckydiamond/src/assets/icons-games/saper-game/icon-emeralds-saper.svg
+++ b/luckydiamond/src/assets/icons-games/saper-game/icon-emeralds-saper.svg
@@ -0,0 +1,66 @@
+<svg width="208" height="198" viewBox="0 0 208 198" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bddf_290_4)">
+<path d="M51.9315 77.9679L71.7926 53.7515C73.4352 51.7486 75.791 50.4613 78.3638 50.1606L83.7001 49.5369C86.3034 49.2327 88.922 49.9626 90.9925 51.5697L115.385 70.5021C117.543 72.1778 118.923 74.6642 119.201 77.3829L121.923 103.962C122.185 106.52 121.452 109.081 119.875 111.112L100.84 135.636C99.1944 137.756 96.7662 139.126 94.1009 139.437L88.9216 140.043C86.3178 140.347 83.6986 139.617 81.628 138.009L56.6139 118.587C54.4948 116.942 53.1257 114.514 52.8143 111.849L49.7312 85.4702C49.4162 82.7745 50.2104 80.0665 51.9315 77.9679Z" fill="url(#paint0_linear_290_4)"/>
+<path d="M51.9315 77.9679L71.7926 53.7515C73.4352 51.7486 75.791 50.4613 78.3638 50.1606L83.7001 49.5369C86.3034 49.2327 88.922 49.9626 90.9925 51.5697L115.385 70.5021C117.543 72.1778 118.923 74.6642 119.201 77.3829L121.923 103.962C122.185 106.52 121.452 109.081 119.875 111.112L100.84 135.636C99.1944 137.756 96.7662 139.126 94.1009 139.437L88.9216 140.043C86.3178 140.347 83.6986 139.617 81.628 138.009L56.6139 118.587C54.4948 116.942 53.1257 114.514 52.8143 111.849L49.7312 85.4702C49.4162 82.7745 50.2104 80.0665 51.9315 77.9679Z" stroke="url(#paint1_linear_290_4)" stroke-width="6"/>
+</g>
+<g filter="url(#filter1_bddf_290_4)">
+<path d="M103.594 84.5815L120.124 72.3178C122.206 70.7734 124.806 70.0976 127.376 70.433L129.065 70.6533C131.665 70.9926 134.028 72.34 135.645 74.4052L148.12 90.3416C149.804 92.4923 150.535 95.238 150.143 97.9409L147.667 115.01C147.298 117.553 145.964 119.857 143.942 121.443L127.886 134.037C125.774 135.694 123.083 136.432 120.421 136.085L118.889 135.885C116.288 135.546 113.924 134.198 112.308 132.132L99.4654 115.721C97.8131 113.61 97.0778 110.923 97.4247 108.265L99.6358 91.3189C99.9868 88.6293 101.415 86.1976 103.594 84.5815Z" fill="url(#paint2_linear_290_4)"/>
+<path d="M103.594 84.5815L120.124 72.3178C122.206 70.7734 124.806 70.0976 127.376 70.433L129.065 70.6533C131.665 70.9926 134.028 72.34 135.645 74.4052L148.12 90.3416C149.804 92.4923 150.535 95.238 150.143 97.9409L147.667 115.01C147.298 117.553 145.964 119.857 143.942 121.443L127.886 134.037C125.774 135.694 123.083 136.432 120.421 136.085L118.889 135.885C116.288 135.546 113.924 134.198 112.308 132.132L99.4654 115.721C97.8131 113.61 97.0778 110.923 97.4247 108.265L99.6358 91.3189C99.9868 88.6293 101.415 86.1976 103.594 84.5815Z" stroke="url(#paint3_linear_290_4)" stroke-width="6"/>
+</g>
+<defs>
+<filter id="filter0_bddf_290_4" x="0.663574" y="0.469299" width="178.312" height="196.641" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_290_4"/>
+<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="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.360784 0 0 0 0 0.745098 0 0 0 0 0.458824 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_290_4" result="effect2_dropShadow_290_4"/>
+<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="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00392157 0 0 0 0 0.262745 0 0 0 0 0.00392157 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_290_4" result="effect3_dropShadow_290_4"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_290_4" result="shape"/>
+<feGaussianBlur stdDeviation="0.15" result="effect4_foregroundBlur_290_4"/>
+</filter>
+<filter id="filter1_bddf_290_4" x="48.3406" y="21.3489" width="158.906" height="171.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_290_4"/>
+<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="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.360784 0 0 0 0 0.745098 0 0 0 0 0.458824 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_290_4" result="effect2_dropShadow_290_4"/>
+<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="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00392157 0 0 0 0 0.262745 0 0 0 0 0.00392157 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_290_4" result="effect3_dropShadow_290_4"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_290_4" result="shape"/>
+<feGaussianBlur stdDeviation="0.15" result="effect4_foregroundBlur_290_4"/>
+</filter>
+<linearGradient id="paint0_linear_290_4" x1="58.8031" y1="64.025" x2="115.998" y2="139.899" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B6FFD0"/>
+<stop offset="1" stop-color="#007B18"/>
+</linearGradient>
+<linearGradient id="paint1_linear_290_4" x1="80.8093" y1="49.8748" x2="91.3149" y2="139.763" gradientUnits="userSpaceOnUse">
+<stop stop-color="#458845"/>
+<stop offset="1" stop-color="#255125"/>
+</linearGradient>
+<linearGradient id="paint2_linear_290_4" x1="110.003" y1="76.6239" x2="136.997" y2="140.424" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B6FFD0"/>
+<stop offset="1" stop-color="#007B18"/>
+</linearGradient>
+<linearGradient id="paint3_linear_290_4" x1="128.065" y1="70.5229" x2="119.526" y2="135.968" gradientUnits="userSpaceOnUse">
+<stop stop-color="#458845"/>
+<stop offset="1" stop-color="#255125"/>
+</linearGradient>
+</defs>
+</svg>
--- a/luckydiamond/src/assets/icons-header/discord-icon.png
+++ b/luckydiamond/src/assets/icons-header/discord-icon.png
--- a/luckydiamond/src/assets/icons-header/discord-icon.svg
+++ b/luckydiamond/src/assets/icons-header/discord-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></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-other/icon-payments-modal-close.svg
+++ b/luckydiamond/src/assets/icons-other/icon-payments-modal-close.svg
@@ -0,0 +1,17 @@
+<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#208;&#154;&#209;&#128;&#208;&#181;&#209;&#129;&#209;&#130;&#208;&#184;&#208;&#186;" filter="url(#filter0_d_1064_8)">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M6.853 0.617653C6.51189 0.276538 5.95883 0.276538 5.61772 0.617653C5.2766 0.958768 5.2766 1.51182 5.61772 1.85294L13.7647 9.99994L4.61765 19.147C4.27654 19.4881 4.27654 20.0412 4.61765 20.3823C4.95877 20.7234 5.51182 20.7234 5.85294 20.3823L15 11.2352L24.147 20.3822C24.4881 20.7233 25.0412 20.7233 25.3823 20.3822C25.7234 20.0411 25.7234 19.4881 25.3823 19.1469L16.2353 9.99994L24.3822 1.85301C24.7233 1.51189 24.7233 0.958835 24.3822 0.61772C24.0411 0.276605 23.4881 0.276605 23.1469 0.61772L15 8.76466L6.853 0.617653Z" fill="#30364F"/>
+</g>
+<defs>
+<filter id="filter0_d_1064_8" x="0.361816" y="0.361816" width="29.2764" height="28.2764" 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 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_1064_8"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1064_8" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/luckydiamond/src/assets/icons-profile/icon-deposit.svg
+++ b/luckydiamond/src/assets/icons-profile/icon-deposit.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M18.0156 4.28571H3.125C2.78125 4.28571 2.5 3.96429 2.5 3.57143C2.5 3.17857 2.78125 2.85714 3.125 2.85714H18.125C18.4688 2.85714 18.75 2.53571 18.75 2.14286C18.75 0.959821 17.9102 0 16.875 0H2.5C1.12109 0 0 1.28125 0 2.85714V17.1429C0 18.7232 1.12109 20 2.5 20H18.0156C19.1094 20 20 19.0402 20 17.8571V6.42857C20 5.24554 19.1094 4.28571 18.0156 4.28571ZM16.25 13.5714C15.5586 13.5714 15 12.933 15 12.1429C15 11.3527 15.5586 10.7143 16.25 10.7143C16.9414 10.7143 17.5 11.3527 17.5 12.1429C17.5 12.933 16.9414 13.5714 16.25 13.5714Z" fill="#17181C"/>
+</svg>
--- a/luckydiamond/src/assets/icons-profile/icon-diamond-ore.png
+++ b/luckydiamond/src/assets/icons-profile/icon-diamond-ore.png
--- a/luckydiamond/src/assets/icons-profile/icon-withdraw.png
+++ b/luckydiamond/src/assets/icons-profile/icon-withdraw.png
--- a/luckydiamond/src/assets/icons-profile/icon-withdraw.svg
+++ b/luckydiamond/src/assets/icons-profile/icon-withdraw.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="3" viewBox="0 0 23 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="3" width="3" height="22.2619" rx="1.5" transform="rotate(-90 0 3)" fill="#D9D9D9"/>
+</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/icons-test/person-icon-profile.png
+++ b/luckydiamond/src/assets/icons-test/person-icon-profile.png
--- a/luckydiamond/src/assets/js/authentication/AuthService.js
+++ b/luckydiamond/src/assets/js/authentication/AuthService.js
@@ -0,0 +1,12 @@
+import { Post } from '../rest/RestMethods.js';
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+
+export async function LogIn(authCode) {
+    try {
+        const response = await Post(BackendApiUrl + "/Authorize/LogIn", { code: authCode });
+
+        return response;
+    } catch (error) {
+        console.error('Error in LogIn:', error);
+    }
+}
--- a/luckydiamond/src/assets/js/authentication/LoggingMiddleware.js
+++ b/luckydiamond/src/assets/js/authentication/LoggingMiddleware.js
@@ -0,0 +1,10 @@
+export function
+    GetAuthCodeFromCurrentPath() {
+    const currentPath = window.location.pathname;
+
+    const parts = currentPath.split('/');
+
+    const code = parts[parts.length - 1];
+
+    return code
+}
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -0,0 +1,86 @@
+import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
+import { eventBus } from "@/main";
+import {
+    GetCookie
+} from "@/assets/js/storage/CookieStorage.js";
+
+let webSocket;
+
+export function ConnectToChat() {
+    try {
+
+        if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+            return;
+        }
+
+        webSocket = new WebSocket(BackendWebSocketUrl);
+
+        webSocket.onopen = function () {
+            console.log('Connection established');
+        };
+
+        webSocket.onmessage = function (event) {
+
+            try {
+                const dataObject = JSON.parse(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 () {
+
+            webSocket = new WebSocket(BackendWebSocketUrl);
+
+            console.log('Connection closed and reconnected');
+        };
+
+        webSocket.onerror = function (event) {
+            console.error('WebSocket Error:', event);
+        };
+    } catch (error) {
+        console.error('Error in ConnectToChat:', error);
+    }
+}
+
+export function SendMessageToChat(message) {
+    try {
+
+        if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
+            return;
+        }
+
+        const userCredentials = {
+            SearchToken: GetCookie("SearchToken"),
+            AUTHTOKEN: GetCookie("AUTHTOKEN")
+        };
+
+        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/games/saper/SaperAPI.js
+++ b/luckydiamond/src/assets/js/games/saper/SaperAPI.js
@@ -0,0 +1,118 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+
+export async function GetPercentageSteps(CrystalsCount) {
+    const data = {
+        minesCount: CrystalsCount
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameMines/GetMultiplierPercentage`, {
+            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 GetUserData(AUTHTOKEN, SearchToken) {
+
+    const data = {
+        AUTHTOKEN: AUTHTOKEN,
+        SearchToken: SearchToken
+    };
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameMines/GetCurrentData`, {
+            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')
+    }
+}
+
+export async function ClickCirclePlay(InfoUser, ClickedCell) {
+    const data = {
+        PuttedMoney: InfoUser.PuttedMoney,
+        MinesCount: InfoUser.MinesCount,
+        UserCredentials: {
+            SearchToken: InfoUser.SearchToken,
+            AUTHTOKEN: InfoUser.AUTHTOKEN
+        },
+        ClickedCell: {
+            X: ClickedCell.X,
+            y: ClickedCell.Y
+        }
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameMines/Play`, {
+            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.error('Fetch error')
+    }
+}
+
+export async function GetWinningAmount(UserInfo) {
+    const data = {
+        SearchToken: UserInfo.SearchToken,
+        AuthToken: UserInfo.AuthToken
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameMines/TransferMoneyFromGameToWallet`, {
+            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/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
@@ -0,0 +1,64 @@
+// import { Post } from '../rest/RestMethods.js';
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+import {GetCookie} from "@/assets/js/storage/CookieStorage";
+
+export async function GettingMoneyOperation(amount) {
+    const data = {
+        Amount: amount,
+        UserCredentials: {
+            searchToken: GetCookie('SearchToken'),
+            authtoken: GetCookie('AUTHTOKEN')
+        }
+    };
+    try {
+        const response = await fetch(`${BackendApiUrl}/payment/donate`, {
+            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:", error);
+    }
+}
+
+export async function WithdrawMoneyOperation(amount, card, captchaToken) {
+    const data = {
+        amount: amount,
+        card: card,
+        reCaptchaToken: captchaToken,
+        userCredentials: {
+            searchToken: GetCookie('SearchToken'),
+            authtoken: GetCookie('AUTHTOKEN')
+        }
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/payment/TransferMoneyToSpWorlds`, {
+            method: 'POST',
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data),
+            redirect: "follow"
+        })
+
+        if (!response.ok) {
+            console.log("fetch error withdrawmoney operation status:", response.status)
+        }
+
+        console.log(response)
+        return await response.json()
+    }
+    catch (error) {
+        console.log(`fetch error withdrawmoney operation - ${error}`)
+    }
+}
--- a/luckydiamond/src/assets/js/rest/RestMethods.js
+++ b/luckydiamond/src/assets/js/rest/RestMethods.js
@@ -0,0 +1,104 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+import { DeleteAllCookie } from "@/assets/js/storage/CookieStorage";
+
+export async function Post(url = "", data = {}) {
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+      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);
+  }
+}
+
+export async function GetCurrentMoney(authToken, searchToken) {
+
+  const data = {
+    AUTHTOKEN: authToken,
+    SearchToken: searchToken
+  };
+  try {
+    const response = await fetch(`${BackendApiUrl}/Payment/UserMoney`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      redirect: "follow"
+    });
+
+    if (!response.ok) {
+      
+      DeleteAllCookie()
+      
+      console.log("Fetch error:", response.status);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.log("Fetch error:", error);
+  }
+}
+
+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/CookieStorage.js
+++ b/luckydiamond/src/assets/js/storage/CookieStorage.js
@@ -0,0 +1,34 @@
+export function SetCookie(name, value, years = 10) {
+    var expires = "";
+    if (value) {
+        var date = new Date();
+        date.setTime(date.getTime() + (years * 365 * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+export function DeleteCookie(name) {
+    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;';
+}
+
+export function DeleteAllCookie() {
+    const cookies = document.cookie.split(';');
+
+    for (let cookie of cookies) {
+        const eqPos = cookie.indexOf('=');
+        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+        document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;';
+    }
+}
+
+export function GetCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+}
--- 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
@@ -2,36 +2,33 @@
  <aside class="menu">
    <div class="menu__content">
      <div class="menu__btn--home">
-        <a href="#"><img width="73" height="73" src="../assets/icons-menu/home-icon.svg"></a>
+        <a href="#" @click="$router.push({ name: 'home' })"><img width="73" height="73" src="../assets/icons-menu/home-icon.svg"></a>
      </div>
      <div class="menu__btns--gamemodes">
        <div class="menu__content--gamemodes">
-          <a href="#"><img src="../assets/icons-menu/slots-icon.svg"></a>
-          <a href="#"><img src="../assets/icons-menu/crush-icon.svg"></a>
-          <a href="#"><img src="../assets/icons-menu/case-icon.png"></a>
-          <a href="#"><img src="../assets/icons-menu/bomb-icon.svg"></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/CaptchaComponent.vue
+++ b/luckydiamond/src/components/CaptchaComponent.vue
@@ -0,0 +1,45 @@
+<template>
+  <vue-recaptcha class="captcha-withdraw" v-show="showcaptcha" sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8"
+                 size="normal"
+                 theme="dark"
+                 hl="tr"
+                 :loading-timeout="loadingTimeout"
+                 @verify="recaptchaVerified"
+                 @expire="eventCloseModal"
+                 @fail="eventCloseModal"
+                 @error="eventCloseModal"
+                 ref="vueRecaptcha">
+  </vue-recaptcha>
+</template>
+
+<script>
+import vueRecaptcha from 'vue3-recaptcha2';
+
+export default {
+  name: 'app',
+  components: {
+    vueRecaptcha
+  },
+  props: {
+    showcaptcha: Boolean,
+  },
+  data() {
+    return {
+      loadingTimeout: 30000,
+      captchaToken: ''
+    }
+  },
+  methods: {
+    recaptchaVerified(vueRecaptcha) {
+      this.captchaToken = vueRecaptcha
+
+      return this.$emit('captchatokendata', this.captchaToken)
+    },
+    eventCloseModal() {
+      setTimeout(() => {
+        return this.$emit("captchadata");
+      }, 1000)
+    }
+  }
+};
+</script>
--- 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,38 +31,107 @@
      </ul>
    </div>
    <writechat-component @send="ClaimDatamsg"></writechat-component>
+    <!-- <div class="chat__mute-button">
+      <button @click="muteChat">Mute</button>
+    </div> -->
  </aside>
 </template>

 <script>
-import '@/assets/css/ComponentsStyles/chat.css'
+import "@/assets/css/ComponentsStyles/chat.css";
+import { GetChatHistory } from "@/assets/js/rest/RestMethods.js";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+
 import WritechatComponent from "@/components/WritechatComponent.vue";
+import { SendMessageToChat } from "@/assets/js/chat/ChatLogic.js";
+import { eventBus } from "@/main";

 export default {
  components: { WritechatComponent },
+  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]);
+        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) => {
+      try {
+        const dataObject = JSON.parse(dataFromServer);
+
+        let imageUrl =
+          "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
+
        const MsgUser = {
          id: this.id + 1,
-        msg: msg[0],
-        username: msg[1],
-        icon: msg[2]
+          msg: dataObject.Message,
+          username: dataObject.SpUserName,
+          icon: imageUrl,
+        };
+
+        if (MsgUser.username === "🛠️ System") {
+          MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
        }

-      this.array.push(MsgUser)
+        this.array.push(MsgUser);

-      if(this.array.length > 7) {
-        this.array.shift()
+        this.ScrollToBottom();
+      } catch (error) {
+        console.error("Error parsing JSON data:", error);
      }
+    });
+  },
+  created() {
+    GetChatHistory().then((response) => {
+      if (response && response.length) {
+        response.forEach((element) => {
+          let imageUrl =
+            "https://avatar.spworlds.ru/face/55/" + element.userName;
+
+          const MsgUser = {
+            id: this.id + 1,
+            msg: element.message,
+            username: element.userName,
+            icon: imageUrl,
+          };
+
+          if (MsgUser.username === "🛠️ System") {
+            MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
          }
+
+          this.array.push(MsgUser);
+        });
+        this.ScrollToBottom();
      }
-}
+    });
+  },
+};
 </script>

 <style scoped>
--- a/luckydiamond/src/components/DevelopComponent.vue
+++ b/luckydiamond/src/components/DevelopComponent.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="info">
+    <div class="top_card">
+    <div class="Rafael1209_card">
+      <div class="Rafael1209_text_2">
+        <div class="Rafael1209_aboutinfo_2">
+          <p>Бэкендер</p>
+          <h1>Rafael1209</h1>
+        </div>
+        <div class="Rafael1209_whatjob_2">
+          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
+          <p>ASP, .NET, MongoDB</p>
+        </div>
+        <div class="Rafael1209_whatjob2_2">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        </div>
+        <div class="Rafael1209_skin_2">
+          <div class="Rafael1209_skin_2_skin">
+            
+            <div class="Rafael1209_skinicons1">
+            <a href="https://t.me/RafaelloChas" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/773259384095768657" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="https://github.com/rafael1209" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="Hepatir_card">
+      <div class="text_2">
+        <div class="aboutinfo_2">
+          <p>Бэкендер</p>
+          <h1>Hepatir</h1>
+        </div>
+        <div class="whatjob_2">
+          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
+          <p>ASP, .NET, MongoDB</p>
+        </div>
+        <div class="whatjob2_2">
+          <img src="@/assets/icons-developcard/sql-logo.png" alt="html">
+          <p>SQL</p>
+        </div>
+        </div>
+        <div class="skin_2">
+          <div class="skin_2_skin">
+            <div class="skinicons1">
+            <a href="https://t.me/Hepatacor" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/293977705815343105" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="https://github.com/danilt2000/" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="Ckutls__card">
+      <div class="Ckutls__text_2">
+        <div class="Ckutls__aboutinfo_2">
+          <p>Фронтэндер</p>
+          <h1>Ckutls_</h1>
+        </div>
+        <div class="Ckutls__whatjob_1">
+          <img src="@/assets/icons-developcard/html.png" alt="html">
+          <p>HTML 5,CSS</p>
+        </div>
+        <div class="Ckutls__whatjob_2">
+          <img src="@/assets/icons-developcard/js.png" alt="html">
+          <p>JavaScript</p>
+        </div>
+        <div class="Ckutls__whatjob_3">
+          <img src="@/assets/icons-developcard/Vue.png" alt="html">
+          <p>Vue 3</p>
+        </div>
+        </div>
+        <div class="Ckutls__skin_2">
+          <div class="Ckutls__skin_2_skin">
+            
+            <div class="Ckutls__skinicons1">
+            <a href="https://t.me/Ckutls" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/531420425255911424" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="https://github.com/CkutlsGit" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+      
+    </div>
+    <div class="FUpir_card">
+      <div class="FUpir_text_2">
+        <div class="FUpir_aboutinfo_2">
+          <p>Дизайнер</p>
+          <h1>FUpir</h1>
+        </div>
+        <div class="FUpir_whatjob_1">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        </div>
+        <div class="FUpir_skin_2">
+          <div class="FUpir_skin_2_skin">
+            
+            <div class="FUpir_skinicons1">
+            <a href="https://t.me/Ykropmaha" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/1126752682183503942" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+           
+            </div>
+          </div>
+        </div>
+      
+    </div>
+  </div>
+  <div class="bottom_card">
+    <div class="megatntmega_card">
+      <div class="megatntmega_text">
+        <div class="megatntmega_aboutinfo">
+          <p>Дизайнер</p>
+          <h1>megatntmega</h1>
+        </div>
+        <div class="megatntmega_whatjob">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        <div class="megatntmega_icons">
+          <a href="https://t.me/random_ak" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="https://discordapp.com/users/531420425255911424" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+        </div>
+      </div>
+      <div class="megatntmega_skin">
+        
+        </div>
+    </div>
+    <div class="busha888_card">
+      <div class="text">
+        <div class="aboutinfo">
+          <p>Фронтэндер</p>
+          <h1>busha888</h1>
+        </div>
+        <div class="whatjob">
+          <img src="@/assets/icons-developcard/html.png" alt="html">
+          <p>HTML 5,CSS</p>
+        </div>
+        <div class="icons">
+          <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" ><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
+          <a href="https://t.me/Slayyyyyyyyyyyyyyyyy" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="https://www.youtube.com/@busha1/featured" target="_blank" ><img src="@/assets/icons-developcard/like.png" alt=""></a>
+          <a href="https://github.com/Madara0330E" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+        </div>
+      </div>
+      <div class="skin">
+        <img src="https://avatar.spworlds.ru/front/212/busha888.png" alt="">
+        </div>
+    </div>
+    <div class="CLARFFY_card">
+      <div class="CLARFFY_text">
+        <div class="CLARFFY_aboutinfo">
+          <p>Дизайнер</p>
+          <h1>CLARFFY</h1>
+        </div>
+        <div class="CLARFFY_whatjob">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        <div class="CLARFFY_icons">
+          <a href="https://t.me/LDpoko" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="https://discordapp.com/users/784873585852284938" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+        </div>
+      </div>
+      <div class="CLARFFY_skin">
+        <img src="https://avatar.spworlds.ru/front/212//CLARFFY.png" alt="">
+        </div>
+    </div>
+  </div>
+  </div>
+
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/developer.css'
+
+export default {
+
+}
+</script>
--- a/luckydiamond/src/components/HeaderComponent.vue
+++ b/luckydiamond/src/components/HeaderComponent.vue
@@ -1,58 +1,206 @@
+
 <script>
-import '@/assets/css/ComponentsStyles/header.css'
-// import { myFunction } from '@/assets/js/AuthService.js';
+import "@/assets/css/ComponentsStyles/header.css";
+import { LogIn } from "@/assets/js/authentication/AuthService.js";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods.js";
+
+import { eventBus } from "@/main";
+
+import {
+  SetCookie,
+  GetCookie,
+  DeleteAllCookie,
+} from "@/assets/js/storage/CookieStorage.js";

 export default {
-  name: 'Header-Element-page',
+  name: "Header-Element-page",
+  methods: {
+    logout() {
+      this.auth = false;
+      this.balance = 0;
+      this.authtoken = "";
+      DeleteAllCookie();
+    },
+    updateBalanceMethod() {
+      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
+        (response) => {
+          this.balance = response.currentMoney;
+        }
+      );
+      eventBus.emit("Updatebalance-saper");
+    },
+  },
  data() {
    return {
-      balance: 25000,
-      auth: false
+      balance: 0,
+      auth: false,
+      authtoken: "",
+      imageUrl: "https://avatar.spworlds.ru/face/55/",
+      userName: "",
+    };
+  },
+  mounted() {
+    eventBus.on("Updatebalance", () => {
+      this.updateBalanceMethod();
+    });
+  },
+  created() {
+    try {
+      let authCode = this.$route.query.code;
+
+      if (authCode) {
+        LogIn(authCode)
+          .then((response) => {
+            SetCookie("UserId", response.userId);
+            SetCookie("SpUserName", response.spUserName);
+            SetCookie("AUTHTOKEN", response.authtoken);
+            SetCookie("SearchToken", response.searchToken);
+
+            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;
+              })
+              .catch((error) => {
+                console.error(error);
+              });
+          })
+          .catch(() => {
+            let currentUserName = GetCookie("SpUserName");
+            GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+              .then((response) => {
+                this.balance = response.currentMoney;
+                console.log(response);
+              })
+              .catch((error) => {
+                console.error(error);
+              });
+
+            if (currentUserName) {
+              this.imageUrl = this.imageUrl + `${currentUserName}.png`;
+              this.userName = GetCookie("SpUserName");
+              this.auth = true;
+              this.authtoken = GetCookie("AUTHTOKEN");
+            } else {
+              this.auth = false;
+              this.balance = 0;
+            }
+          });
+      } else {
+        let currentUserName = GetCookie("SpUserName");
+        GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+          .then((response) => {
+            this.balance = response.currentMoney;
+          })
+          .catch((error) => {
+            // Обработка ошибки
+            console.error(error);
+          });
+
+        if (currentUserName) {
+          this.imageUrl = this.imageUrl + `${currentUserName}.png`;
+          this.userName = GetCookie("SpUserName");
+          this.auth = true;
+          this.authtoken = GetCookie("AUTHTOKEN");
+        } else {
+          this.auth = false;
+          this.balance = 0;
        }
      }
-}
+    } catch (error) {
+      console.error("Auth Code error:", error);
+    }
+  },
+};
 </script>
 <template>
  <header class="header">
    <div class="header__content">
      <div class="header__logo">
-        <img src="../assets/logo.svg" alt="">
+        <img
+          @click="$router.push({ name: 'home' })"
+          src="../assets/logo.svg"
+          alt=""
+        />
      </div>
      <div class="header__nav">
        <nav>
-          <a href="#" class="header__nav--now">Главная</a>
-          <a href="#">Профиль</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">{{ balance }}</h2>
+            <h2>
+              <img src="../assets/icons-header/diamond-ore-icon.png" />{{
+                balance
+              }}
+            </h2>
          </div>
          <div class="header__btn--wallet">
-            <a href="">кошелёк</a>
+            <a href="#" @click="$router.push({ name: 'profile' })">кошелёк</a>
          </div>
        </div>
      </div>
      <div class="header__auth--discord">
        <div v-if="auth" class="header__card--discord">
          <div class="discord__card--name">
-            <h2>Artemka</h2>
-            <a href="#" @click="auth = false">Выход<span><img src="../assets/icons-header/exit-icon.png"></span></a>
+            <h2>{{ userName }}</h2>
+            <a href="#" @click="logout"
+              >Выход<span
+                ><img src="../assets/icons-header/exit-icon.png" /></span
+            ></a>
          </div>
-          <img src="../assets/icons-test/person-icon.svg" alt="test-ico">
+          <img :src="imageUrl" alt="test-ico" />
+          <!-- <img src="../assets/icons-test/person-icon.svg" alt="test-ico"> -->
        </div>
        <div v-else class="header__card--auth">
+          <!-- <div class="header__card--auth">  -->
          <div class="auth__card--content">
-            <a href="#" @click="auth = true"><span><img width="30" height="30" src="../assets/icons-header/discord-icon.png"></span>Вход</a>
+            <a
+              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
+                  width="30"
+                  height="30"
+                  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>
    </div>
  </header>
 </template>
-
 <style scoped>
-
 </style>
--- 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,11 +1,9 @@
 <template>
-  <transition name="fade">
-    <div class="notification" v-if="isAnimationOn">
+  <div class="notification" v-if="notification">
    <div class="notification__content">
-        <h3>Анимации выключены</h3>
+      <h3>Операция вывода отправлена</h3>
    </div>
  </div>
-  </transition>
 </template>

 <script>
@@ -13,18 +11,18 @@ import '@/assets/css/ComponentsStyles/notification.css'

 export default {
  props: {
-    isAnimationOn: Boolean
+    notification: Boolean
  },
-  emits: ['animationchange'],
+  emits: ['notificationremove'],
  methods: {
    NotificationsTimer() {
      setTimeout(() => {
-        this.$emit('animationchange', false)
+        this.$emit('notificationremove')
      }, 4000)
    }
  },
  watch: {
-    isAnimationOn(newVal, oldVal) {
+    notification(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.NotificationsTimer()
      }
--- a/luckydiamond/src/components/PaymentsModal.vue
+++ b/luckydiamond/src/components/PaymentsModal.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="payment-modal withdraw-modal">
+    <div class="payments-modal__content close-modal__icon text-styles__margin">
+      <h1>{{ payments ? "Пополнить" : "Вывод" }}</h1>
+      <img
+        @click="closeModal"
+        src="@/assets/icons-other/icon-payments-modal-close.svg"
+      />
+    </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="{ '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, index) in PaymentsModalNumbers" :key="index">
+              <button
+                @click="clickedBtnChoice(index, number.diamonds)"
+                :class="{
+                  'btn-click': clickedBtn === index,
+                  [number]: clickedBtn === number,
+                }"
+              >
+                {{ number.diamonds }}
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div v-if="showPromocodeStatus" class="error-promocode">
+          <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>
+          <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"
+            :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"
+        >
+          <p>
+            Вы подтверждаете правильность введенных данных при создании вывода.
+          </p>
+          <button type="submit" @click="RedirectedMethodDep">Пополнить</button>
+          <p>
+            Перед пополнение прочитайте политику конфиденциальности и
+            пользовательское соглашение.
+          </p>
+        </div>
+      </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="{ '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="{ 'animate-start-btn': errorCard }"
+          class="with-input"
+          v-model="card"
+          type="text"
+        />
+      </div>
+      <div class="error-checkbox" v-if="errorAgree">
+        <h2>Подтвердите согласие!</h2>
+      </div>
+      <div class="withdraw-checkbox checkbox-styles">
+        <input @click="agreeUser = !agreeUser" type="checkbox" />
+        <h3>Я согласен с пользовательским соглашением.</h3>
+      </div>
+      <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" @click="RedirectedMethodTransferMoneyToSp">
+          Вывод
+        </button>
+        <p>
+          Перед выводом прочитайте политику конфиденциальности и
+          пользовательское соглашение.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "@/assets/css/ComponentsStyles/payments-modal.css";
+import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
+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: 0,
+      balance: 0,
+      card: "",
+      promocode: "",
+      promocodeBase: ["ANTI-GRIF"],
+      errorPromocode: false,
+      showPromocodeStatus: false,
+      errorAgree: false,
+      errorDeposit: false,
+      errorCard: false,
+      errorCaptcha: false,
+      captchaToken: null,
+      clickedBtn: "",
+      url: "",
+      completeValidtaion: {
+        amountsaving: true,
+        cardsaving: false,
+        agreesaving: 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(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;
+        }
+        this.clickedBtnChoice(index, DepositCount);
+      }
+    },
+    completeValidtaion: {
+      handler() {
+        this.completeValidationCheck();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    closeModal() {
+      return this.$emit("closemodal");
+    },
+    // checkValidationPromocode() {
+    //   this.errorPromocode = !this.promocodeBase.includes(this.promocode);
+    //   this.showPromocodeStatus = true
+    // },
+    completeValidationCheck() {
+      this.offBtn = true;
+
+      if (
+        this.completeValidtaion.amountsaving &&
+        this.completeValidtaion.cardsaving &&
+        this.completeValidtaion.agreesaving &&
+        this.completeValidtaion.captchatokensaving
+      ) {
+        this.offBtn = false;
+      }
+    },
+    claimCaptchaToken(Token) {
+      this.captchaToken = Token;
+      this.completeValidtaion.captchatokensaving = true;
+    },
+    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() {
+      this.v$.$touch();
+
+      if (this.v$.amountWithdraw.$error) {
+        this.errorDeposit = true;
+
+        setTimeout(() => {
+          this.errorDeposit = false;
+        }, 1500);
+      }
+      if (this.v$.card.$error) {
+        this.errorCard = true;
+
+        setTimeout(() => {
+          this.errorCard = false;
+        }, 1500);
+      }
+      if (this.agreeUser !== true) {
+        this.errorAgree = true;
+
+        setTimeout(() => {
+          this.errorAgree = false;
+        }, 1500);
+      }
+      if (this.captchaToken === null) {
+        this.errorCaptcha = true;
+
+        setTimeout(() => {
+          this.errorCaptcha = false;
+        }, 1500);
+      }
+      if (
+        !this.v$.amountWithdraw.$error &&
+        !this.v$.card.$error &&
+        this.agreeUser === true &&
+        this.captchaToken !== null
+      ) {
+        WithdrawMoneyOperation(
+          this.amountWithdraw,
+          this.card.toString(),
+          this.captchaToken
+        ).then(async (response) => {
+          try {
+            console.log("work", response);
+          } catch (e) {
+            console.error(e);
+          }
+          await this.$emit("notifacetionmoney");
+          eventBus.emit("Updatebalance");
+        });
+      }
+    },
+    clickedBtnChoice(index, content) {
+      this.clickedBtn = index;
+      this.amount = content;
+      console.log(index);
+    },
+  },
+};
+</script>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>