Add styles for chat element

Merge branch 'main' of https://github.com/danilt2000/LuckyDiamond
Add formating word for chat
2025-12-10 12:19:31 +02:00 · 2024-01-27 02:09:54 +01:00 · 2024-01-27 01:30:41 +01:00 · 2024-01-27 01:30:40 +01:00 · 2024-01-26 15:51:04 +03:00 · 2024-01-26 15:50:57 +03:00
81 changed files with 4980 additions and 244 deletions
--- a/README.md
+++ b/README.md
@@ -23,9 +23,8 @@ https://github.com/sp-worlds/api-docs
     https://discord.com/developers/docs/topics/oauth2#oauth2


-<h2>Bootstrap 5 Tutorial </h2>
- <p>Если получится то использовать его для фронта</p>
-     https://www.w3schools.com/bootstrap5/
+<h2>Откуда берём вдохновление </h2>
+     https://cs.fail/en/
 </body>
 </html>
 
--- 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,18 @@
    "deploy": "sh deploy.sh"
  },
  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
+    "bootstrap": "^5.3.2",
    "core-js": "^3.8.3",
+    "howler": "^2.2.4",
+    "mitt": "^3.0.1",
+    "swiper": "^11.0.5",
    "vue": "^3.2.13",
-    "vue-router": "^4.2.5"
+    "vue-recaptcha": "^3.0.0-alpha.6",
+    "vue-router": "^4.2.5",
+    "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,39 @@
 <!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">
+  <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>
+
 </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/asidebar.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/asidebar.css
@@ -31,6 +31,18 @@
    border-radius: 20px;
 }

+.menu__content--slots-icon {
+    margin-left: 5px
+}
+
+.menu__content--cruch-icon {
+    margin-left: 6px
+}
+
+.menu__content--bomb-icon {
+    margin-left: 6px
+}
+
 .menu__content--gamemodes {
    display: flex;
    text-align: center;
--- a/luckydiamond/src/assets/css/ComponentsStyles/chat.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/chat.css
@@ -1,5 +1,23 @@
+::-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;
 }

 .chat__content {
@@ -23,14 +41,33 @@
    font-weight: 700;
 }

-.content p {
+/* .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;
+    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 +75,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 +112,8 @@
    bottom: 0;
    margin: 24% 87% 6% 6%;
    user-select: none;
-    width: 50%;
+    /* width: 50%; */
+    width: 90%;
 }

 .write__content {
@@ -81,13 +122,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 +171,8 @@

 .write__content button {
    padding: 8px 9px;
-    margin-left: -15%;
+    /* margin-left: -20%; */
+    margin-right: -5%;
    border-radius: 6px;
    background: #3D3F48;
    border: none;
--- a/luckydiamond/src/assets/css/ComponentsStyles/header.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/header.css
@@ -14,17 +14,21 @@
    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;
 }

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

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

+.header__balance {
+    width: 120px;
+}
+
 .header__content--balance {
    display: flex;
    align-items: center;
@@ -111,6 +119,7 @@
    background: #30323E;
    text-decoration: none;
    padding: 6px 2px 6px 2px;
+    width: 75px;
 }

 .discord__card--name a span img {
@@ -131,9 +140,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 +152,5 @@
 }

 .auth__card--content a span img {
-    margin-right: 5px;
+    margin: 8% 5px 0 0;
 }
--- a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
@@ -0,0 +1,268 @@
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input:focus {
+    outline: none;
+}
+
+.payment-modal {
+    position: absolute;
+    top: 20%;
+    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;
+}
+
+.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;
+    ont-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/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/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -0,0 +1,603 @@
+#chat {
+    height: 95.65%;
+}
+
+button {
+    cursor: pointer;
+}
+
+button:focus {
+    outline: none;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.saper {
+    display: flex;
+    padding-top: 10%;
+    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: 74%;
+    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 {
+    width: 347px;
+    height: 38px;
+}
+
+.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 15px;
+}
+
+.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: 440px;
+}
+
+.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: #000;
+    padding: 20px;
+}
+
+.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: 90%;
+}
+
+.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;
+}
+
+.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%;
+}
+
+.card-info {
+    border-radius: 15px;
+    border: 1px solid #2B4D6C;
+    background: linear-gradient(180deg, #252C47 0%, #252C47 8.33%, rgba(37, 44, 71, 0.00) 100%);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 85%;
+    height: 100%;
+}
+
+.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: 7px;
+}
+
+.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;
+    }
+    .saper-start {
+        width: 30%;
+        height: 80%;
+    }
+    .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;
+    }
+    .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;
+    }
+    .saper-game__content {
+        width: auto;
+    }
+    .saper-start {
+        width: 30%;
+        height: 75%;
+    }
+    .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;
+    }
+    .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 {
@@ -127,11 +127,18 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    padding-top: 12%;
+    padding-top: 4.7%;
+}
+
+.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 +153,13 @@
 }

 .line__img {
-    float: right;
+    display: flex;
    margin:  1% 6.6% 1% 4.7%;
 }

+.display-firstline {
+    display: flex;
+}

 .line__btn {
    border-radius: 21px;
@@ -190,7 +200,7 @@

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

@@ -207,6 +217,7 @@
    font-size: 87px;
    font-weight: 700;
    text-transform: uppercase;
+    padding: 4.5% 2.2%;
 }

 .gamemode__twoline--first__element .container {
@@ -218,10 +229,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;
 }
@@ -236,3 +248,161 @@
 }

 /* /GameMode */
+
+/* Media */
+
+@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
+    .header__auth--discord {
+        width: 14%;
+    }
+    .header__balance {
+        width: auto;
+    }
+    .main {
+        width: 75% !important;
+    }
+    .main__content h1 {
+        font-size: 4.5em;
+    }
+    .gamemode__content--text div {
+        width: 75%;
+    }
+    .gamemode__main {
+        height: auto;
+        width: 25%;
+    }
+    .title-firstline {
+        font-size: 4.1em;
+    }
+    .line__footer {
+        flex-direction: column;
+    }
+    .line__footer img {
+        margin-top: -2em;
+    }
+    .line__content .line__btn--main .line__btn {
+        left: 0;
+        top: -.4em;
+    }
+    .line__img {
+        margin: 1% -8% 0 30%;
+    }
+    .gamemode__firstline img {
+        width: 60%;
+    }
+    .gamemode__firstline .title-firstline {
+        font-size: 3.2em;
+    }
+    .gamemode__twolines img {
+        display: none;
+    }
+    .gamemode__twolines .title-twoline {
+        font-size: 3.238em;
+    }
+    .line__btn {
+        font-size: 28px;
+        padding: 6px 11px;
+    }
+    .gamemode__twoline--first__element .container a {
+        padding: 6px 11px;
+    }
+    .write {
+        position: static;
+        margin: -45% 87% 6% 2%;
+    }
+    .write__content input {
+        padding: 0.625em 1% 14px 0.75em;
+    }
+    .write__content input::placeholder {
+        font-size: 11.5px;
+    }
+    .write__content button {
+        margin-left: -15%;
+        padding: 0.375em 0.375em;
+    }
+}
+
+@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
+    .header__auth--discord {
+        width: 14%;
+    }
+    .header__balance {
+        width: auto;
+    }
+    .main__content h1 {
+        font-size: 4.5em;
+    }
+    .main {
+        width: 78% !important;
+    }
+    .gamemode__main {
+        height: auto;
+        width: 28.5%;
+    }
+    .gamemode__content--text div {
+        width: 78%;
+    }
+    .title-firstline {
+        font-size: 4.1em;
+    }
+    .line__footer {
+        flex-direction: column;
+    }
+    .line__footer img {
+        margin-top: -2em;
+    }
+    .line__content .line__btn--main .line__btn {
+        left: 0;
+        top: -.4em;
+    }
+    .line__img {
+        margin: 1% -8% 0 15%;
+    }
+    .gamemode__firstline img {
+        width: 60%;
+    }
+    .gamemode__firstline .title-firstline {
+        font-size: 3.2em;
+    }
+    .gamemode__twolines img {
+        display: none;
+    }
+    .gamemode__twolines .title-twoline {
+        font-size: 3.238em;
+    }
+    .line__btn {
+        font-size: 28px;
+        padding: 6px 11px;
+    }
+    .gamemode__twoline--first__element .container a {
+        padding: 6px 11px;
+    }
+    .write {
+        position: static;
+        margin: -45% 87% 6% 2%;
+    }
+    .write__content input {
+        padding: 0.625em 1% 14px 0.75em;
+    }
+    .write__content input::placeholder {
+        font-size: 11.5px;
+    }
+    .write__content button {
+        margin-left: -15%;
+        padding: 0.375em 0.375em;
+    }
+}
+
+@media screen and (max-width: 1100px) {
+    .main__content h1 {
+        font-size: 3.5em;
+    }
+    .title-firstline {
+        font-size: 3.4em;
+    }
+    .line__img {
+        margin: -1% -18% 0 2%;
+    }
+}
+
+/* /Media */
--- a/luckydiamond/src/assets/css/PagesStyles/profile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/profile.css
@@ -0,0 +1,213 @@
+#chat-profile {
+    height: 95.6%;
+}
+
+.profile__content {
+    width: 30%;
+    margin-left: 3%;
+}
+
+.profile__content .profile__user--img {
+    margin: 17.6% 8.4% 1% 0;
+    background: #969C8D;
+    padding-top: 10px;
+    border-radius: 20px;
+}
+
+.profile__card {
+    display: flex;
+    flex-direction: column;
+}
+
+.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;
+}
+
+
+.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 {
+    margin-top: 2.1%;
+    background: #38383E;
+    width: 86%;
+    height: 3px;
+}
+
+.payments__card {
+    margin-top: 4.9%;
+    display: flex;
+}
+
+.user-info {
+    display: flex;
+}
+
+.user-name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0.625em;
+}
+
+.user-name__text h3 {
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat;
+    font-size: 20px;
+}
+
+.user-name__text p {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 20px;
+}
+
+.data-info {
+    margin-left: 10%;
+}
+
+.data-info__text h3 {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 17px;
+}
+
+.transaction-info {
+    margin-left: 7%;
+}
+
+.transaction-info__text h3 {
+    font-weight: 500;
+    font-family: Montserrat;
+    font-size: 22px;
+}
+
+.deposit-color h3 {
+    color: #32C966;
+}
+
+.withdraw-color h3 {
+    color: #EA3D38;
+}
+
+/* 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%;
+    }
+}
+
+@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 */
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -24,7 +24,7 @@ body, html {

 .content-grid {
    display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1.2fr;
+    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
@@ -39,6 +39,40 @@ body, html {
    grid-gap: 10px;
 }

+.content__grid-profile {
+    display: grid;
+    grid-template-columns: .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";
+    grid-gap: 10px;
+    height: 100%;
+}
+
+.content-grid--saper {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: .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: 10px;
+}
+

 /* /Content Grid */

@@ -84,9 +118,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 +134,30 @@ body, html {
 }

 /* /GameMode */
+
+/* Profile */
+
+.profile {
+    display: flex;
+    grid-area: profile;
+    height: 95%;
+    border-radius: 50px;
+    background: #17181C;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin: 10px 39px 18px 13px;
+}
+
+/* /Profile */
+
+/* Saper */
+
+.saper {
+    grid-area: saper;
+    /*height: 96.2%;*/
+}
+
+/* /Saper */
+
+/* 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-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-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/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/AuthService.js
+++ b/luckydiamond/src/assets/js/AuthService.js
--- 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,56 @@
+import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
+import { eventBus } from "@/main";
+import {
+    GetCookie
+} from "@/assets/js/storage/CookieStorage.js";
+
+let webSocket;
+
+export function ConnectToChat() {
+    try {
+        webSocket = new WebSocket(BackendWebSocketUrl);
+
+        webSocket.onopen = function () {
+            console.log('Connection established');
+        };
+
+        webSocket.onmessage = function (event) {
+
+            eventBus.emit('dataChat', event.data)
+
+            console.log('Message from Server:', event.data);
+        };
+
+        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 data = {
+            SpUserName: GetCookie("SpUserName"),
+            Message: message
+        };
+
+        webSocket.send(JSON.stringify(data));
+
+    } catch (error) {
+        console.error('Error in ConnectToChat:', 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/moneyoperation/Claimmoney.js
+++ b/luckydiamond/src/assets/js/moneyoperation/Claimmoney.js
@@ -0,0 +1,60 @@
+// 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
+    };
+    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,54 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+
+
+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) {
+      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/components/AsidebarComponent.vue
+++ b/luckydiamond/src/components/AsidebarComponent.vue
@@ -2,14 +2,14 @@
  <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 class="menu__content--slots-icon" src="../assets/icons-menu/slots-icon.svg"></a>
+          <a href="#"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
          <a href="#"><img  src="../assets/icons-menu/case-icon.png"></a>
-          <a href="#"><img 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/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
@@ -33,10 +33,14 @@

 <script>
 import '@/assets/css/ComponentsStyles/chat.css'
+
 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: [],
@@ -45,19 +49,33 @@ export default {
  },
  methods: {
    ClaimDatamsg(msg) {
+
+      SendMessageToChat(msg[0]);
+
+      // if(this.array.length > 7) {
+      //   this.array.shift()
+      // }
+    }
+  },
+  mounted() {
+    eventBus.on('dataChat', (dataFromServer) => {
+      try {
+      // Attempt to parse the JSON string
+      const dataObject = JSON.parse(dataFromServer);
+      let imageUrl = "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
+
      const MsgUser = {
        id: this.id + 1,
-        msg: msg[0],
-        username: msg[1],
-        icon: msg[2]
-      }
+        msg: dataObject.Message,
+        username: dataObject.SpUserName,
+        icon: imageUrl
+      };

-      this.array.push(MsgUser)
-
-      if(this.array.length > 7) {
-        this.array.shift()
-      }
+      this.array.push(MsgUser);
+    } catch (error) {
+      console.error('Error parsing JSON data:', error);
    }
+    })
  }
 }
 </script>
--- a/luckydiamond/src/components/HeaderComponent.vue
+++ b/luckydiamond/src/components/HeaderComponent.vue
@@ -1,58 +1,174 @@
+
 <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;
+      DeleteAllCookie();
+    },
+    updateBalanceMethod() {
+      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+          .then(response => {
+            this.balance = response.currentMoney
+          })
+    }
+  },
  data() {
    return {
-      balance: 25000,
-      auth: false
+      balance: 0,
+      auth: false,
+      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) => {
+            console.log("Auth Data:", 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;
+            GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+              .then((response) => {
+                this.balance = response.currentMoney;
+                console.log(response);
+              })
+              .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;
+            } else {
+              this.auth = false;
+              this.balance = 0;
+            }
+          });
+      } else {
+        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;
+        } 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="#" @click="$router.push({ name: 'home' })" :class="{ 'header__nav--now' : $route.name === 'home' }">Главная</a>
+          <a href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : $route.name === 'profile' }">Профиль</a>
          <a href="#">Помощь</a>
        </nav>
      </div>
      <div class="header__balance">
        <div class="header__content--balance">
          <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/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify"
+              @click="auth = true"
+              ><span
+                ><img
+                  width="30"
+                  height="30"
+                  src="../assets/icons-header/discord-icon.svg" /></span
+              >Вход</a
+            >
          </div>
        </div>
      </div>
    </div>
  </header>
 </template>
-
 <style scoped>
-
 </style>
--- 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,241 @@
+<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="deposit-input deposit-text deposit-icon-diamond deposit-icon__input"
+      >
+        <h3>Сумма пополнения</h3>
+        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
+        <input class="deposit-amount__input" v-model="amount" type="number" />
+        <div class="deposit-btns">
+          <ul class="display-btns btns-style-diamonds">
+            <li v-for="number in PaymentsModalNumbers" :key="number">
+              <button
+                @click="clickedBtnChoice(number, number.diamonds)"
+                :class="{
+                  'btn-click': clickedBtn === number,
+                  [number]: clickedBtn === number,
+                }"
+              >
+                {{ number.diamonds }}
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div v-if="showPromocodeStatus" class="error-promocode">
+          <h2 v-if="errorPromocode" class="error-text__promocode">Промокод не найден</h2>
+          <h2 v-else class="correct-text__promocode">Промокод успешно применён</h2>
+        </div>
+        <div class="deposit-promocode deposit-promocode__padding--input">
+          <h3>Промокод</h3>
+          <input @focusout="checkValidationPromocode" v-model="promocode" class="promo-input" type="text" />
+        </div>
+        <div class="deposit-checkbox checkbox-styles">
+          <input @click="agreeUser = !agreeUser" type="checkbox" />
+          <h3>Я согласен с пользовательским соглашением.</h3>
+        </div>
+        <div
+          class="btn-deposit btn-text-style btn-display-deposit btn-style-payments"
+        >
+          <p>
+            Вы подтверждаете правильность введенных данных при создании вывода.
+          </p>
+          <button
+            type="submit"
+            :disabled="checkOffBtn"
+            @click="RedirectedMethodDep"
+          >
+            Пополнить
+          </button>
+          <p>
+            Перед пополнение прочитайте политику конфиденциальности и
+            пользовательское соглашение.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div v-else class="payments-modal__withdraw deposit-text withdraw-input">
+      <div class="count-withdraw deposit-icon-diamond">
+        <h3>Сумма вывода</h3>
+        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
+        <input class="with-input" v-model="amountWithdraw" type="number" />
+      </div>
+      <div class="number-card deposit-promocode__padding--input">
+        <h3>Введите номер карты</h3>
+        <input class="with-input" v-model="card" type="text" />
+      </div>
+      <div v-if="offAgree" class="error-checkbox">
+        <h2 v-show="errorAgree">Введите сначало карту</h2>
+      </div>
+      <div class="withdraw-checkbox checkbox-styles">
+        <input :disabled="offAgree" @mouseover="errorAgree = true" @mouseleave="errorAgree = false" @click="agreeUser = !agreeUser" type="checkbox"/>
+        <h3>Я согласен с пользовательским соглашением.</h3>
+      </div>
+      <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser" @captchadata="closeModal"></captcha-component>
+      <div
+        class="btn-withdraw btn-text-style btn-display-deposit btn-style-payments"
+      >
+        <p>
+          Вы подтверждаете правильность введенных данных при создании вывода.
+        </p>
+        <button type="submit" :disabled="checkOffBtn" @click="RedirectedMethodTransferMoneyToSp">
+          Вывод
+        </button>
+        <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";
+
+export default {
+  components: { CaptchaComponent },
+  props: ["payments"],
+  data() {
+    return {
+      amount: 0,
+      amountWithdraw: 1,
+      amountSave: 1,
+      card: '',
+      promocode: '',
+      promocodeBase: ['ANTI-GRIF'],
+      errorPromocode: false,
+      showPromocodeStatus: false,
+      errorAgree: false,
+      captchaToken: null,
+      clickedBtn: "",
+      url: "",
+      offBtn: true,
+      offAgree: true,
+      completeValidtaion: {
+        amountsaving: true,
+        cardsaving: false,
+        agreesaving: false,
+        captchatokensaving: false
+      },
+      agreeUser: false,
+      PaymentsModalNumbers,
+    };
+  },
+  watch: {
+    amount(newAmount) {
+      this.offBtn = true;
+      if (this.amount > 0 && this.amount !== "") {
+        setTimeout(() => {
+          try {
+            GettingMoneyOperation(newAmount).then((response) => {
+              console.log("Payments Modal Working!: ", response);
+              this.url = response;
+              this.offBtn = false;
+            });
+          } catch (e) {
+            console.error("Error in PaymentModal!", e);
+          }
+        }, 2000);
+      }
+    },
+    amountWithdraw(newAmount) {
+      this.completeValidtaion.amountsaving = false
+      if (newAmount > 0) {
+        this.amountSave = newAmount
+        this.completeValidtaion.amountsaving = true
+        console.log(this.completeValidtaion)
+      }
+    },
+    card(newAmount) {
+      this.completeValidtaion.cardsaving = false
+      const cardPattern = /^\d{5}$/;
+      if(cardPattern.test(newAmount)) {
+        this.offAgree = false
+        this.completeValidtaion.cardsaving = true
+      }
+    },
+    agreeUser(newAgree) {
+      this.completeValidtaion.agreesaving = false
+      if (newAgree !== false) {
+        this.completeValidtaion.agreesaving = true
+      }
+    },
+    completeValidtaion: {
+      handler() {
+        this.completeValidationCheck()
+      },
+      deep: true
+    }
+  },
+  computed: {
+    checkOffBtn() {
+      return this.checkBtn();
+    },
+  },
+  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
+    },
+    RedirectedMethodDep() {
+      console.log(`From /profile to - ${this.url} url`)
+      window.location.href = this.url
+    },
+    async RedirectedMethodTransferMoneyToSp() {
+      setTimeout(async () => {
+        try {
+          WithdrawMoneyOperation(this.amountSave, this.card.toString(), this.captchaToken).then((response) => {
+            console.log(`work withdraw - ${response}`)
+          })
+        }
+        catch (e) {
+          console.error(`Error in wihdrawmoney operation - ${e}`)
+        }
+        await this.$emit('notifacetionmoney')
+      }, 4000)
+    },
+    checkBtn() {
+      if (this.offBtn === false) {
+        if (this.agreeUser !== false) {
+          return false;
+        }
+      }
+      return true;
+    },
+    clickedBtnChoice(index, content) {
+      this.clickedBtn = index;
+      this.amount = content;
+    },
+  },
+};
+</script>
--- a/luckydiamond/src/components/WritechatComponent.vue
+++ b/luckydiamond/src/components/WritechatComponent.vue
@@ -1,40 +1,62 @@
 <template>
  <div class="write">
    <div class="write__content">
-      <input type="text" v-model.trim="msg" placeholder="Напишите сообщение..." maxlength="22">
-      <button
-          :disabled="CheckerforBtn()"
-          type="submit"
-          @click="SendmsgData"
-      >
-        <img src="@/assets/icons-chat/sendmsg-icon.png">
+      <!-- <input
+        type="text"
+        @keyup.enter="sendmsgDataEnter"
+        v-model.trim="msg"
+        placeholder="Напишите сообщение..."
+        maxlength="200"
+      /> -->
+
+      <textarea
+        @keyup.enter="sendmsgDataEnter"
+        v-model.trim="msg"
+        placeholder="Напишите сообщение..."
+        maxlength="200"
+        rows="3"
+      ></textarea>
+      <button :disabled="CheckerforBtn()" type="submit" @click="SendmsgData">
+        <img src="@/assets/icons-chat/sendmsg-icon.png" />
      </button>
    </div>
  </div>
 </template>

 <script>
-
 export default {
  data() {
    return {
-      msg: '',
-      username: 'TEST USER',
-      icon: require('../assets/icons-test/person-icon-chat.png'),
-    }
+      msg: "",
+      username: "TEST USER",
+      icon: require("../assets/icons-test/person-icon-chat.png"),
+    };
  },
  methods: {
    CheckerforBtn() {
-      return this.msg === ''
+      return this.msg === "";
+    },
+    sendmsgDataEnter() {
+      if (this.msg !== "") {
+        this.SendmsgData();
+      }
    },
    SendmsgData() {
-      this.$emit('send', [this.msg, this.username, this.icon])
-      this.msg = ''
+      const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
+      this.$emit("send", [formattedWord, this.username, this.icon]);
+      this.msg = "";
+    },
+    
+    InsertSpaceEvery24Chars(word) {
+      let result = "";
+      for (let i = 0; i < word.length; i += 22) {
+        result += word.substring(i, i + 22) + " ";
      }
-  }
-}
+      return result.trim();
+    },
+  },
+};
 </script>

 <style>
-
 </style>
--- a/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
+++ b/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
@@ -0,0 +1,35 @@
+<template>
+  <header class="header-mobile">
+    <div class="header-mobile__content">
+      <div class="header-mobile__logo">
+        <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
+      </div>
+      <div class="header-mobile__end">
+        <div class="header-mobile__balance">
+          <div class="header-mobile__balance--content">
+            <div class="header-mobile__card card-display card-text card-img">
+              <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
+            </div>
+            <div class="header-mobile__btn--balance btn-card btn-card__margin">
+              <a href="#" @click="$router.push({ name: 'profile' })"><img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg"></a>
+            </div>
+          </div>
+        </div>
+        <div class="header-mobile__user-icon user-icon">
+          <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css'
+export default {
+
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue
+++ b/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue
@@ -0,0 +1,24 @@
+<template>
+  <footer class="footer-mobile">
+    <div class="footer-mobile__content">
+      <div class="footer-mobile__icons icons-size">
+        <a href="#"><img class="icon-start" src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></a>
+        <a href="#" @click="$router.push({ name: 'profile' })"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg"></a>
+        <a href="#"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-chat-menu.png"></a>
+        <a href="#"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-info-menu.png"></a>
+        <a href="#"><img class="icon-end" src="@/assets/icons-adaptive/home-adaptive/icon-menu.png"></a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css'
+export default {
+
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/luckydiamond/src/components/adaptive-components/PaymentsMobile.vue
+++ b/luckydiamond/src/components/adaptive-components/PaymentsMobile.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="root-mobile">
+    <div class="payments-modal-mobile text-style-mobile padding-elements__mobile">
+      <h1>{{ payments.paymentsView ? 'Пополнить' : 'Вывод' }}</h1>
+      <img
+          src="@/assets/icons-other/icon-payments-modal-close.svg"
+          class="icon-close__mobile"
+          @click="closeModal()"
+      >
+    </div>
+    <div class="payments-modal-mobile__content margin-mobile___payments">
+      <h2>Сумма {{ payments.paymentsView ? 'пополнения' : 'вывода' }}</h2>
+      <div class="payments-modal__input input-style__mobile img-style">
+        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+        <input type="number" v-model="number" class="input-mobile__number">
+        <div class="payments-modal__btns-mobile">
+          <ul class="button-style__mobile">
+            <li v-for="number in PaymentsModalNumbers" :key="number">
+              <button>{{ number.diamonds }}</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="payments-modal__promocode input-style__mobile" v-if="payments.paymentsView === true">
+        <input type="text" placeholder="Введите промокод">
+      </div>
+      <div class="payments-modal__agree checkbox-styles">
+        <input v-if="!payments.paymentsView" type="checkbox" v-model="agreeUser">
+        <input v-else type="checkbox">
+        <h3>Я согласен с пользовательским соглашением.</h3>
+      </div>
+      <captcha-component class="captcha-mobile" :showcaptcha="agreeUser"></captcha-component>
+      <div class="payments-modal__submit">
+        <p>Вы подтверждаете правильность введенных данных при создании вывода.</p>
+        <button @click="closeModal()">{{ payments.paymentsView ? 'Пополнить' : 'Вывод' }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
+import CaptchaComponent from "@/components/CaptchaComponent.vue";
+
+import '@/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css'
+
+export default {
+  components: { CaptchaComponent },
+  props: [ 'payments' ],
+  data() {
+    return {
+      PaymentsModalNumbers,
+      agreeUser: false,
+      number: 0
+    }
+  },
+  methods: {
+    closeModal() {
+      return this.$emit('closemodal')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
--- a/luckydiamond/src/main.js
+++ b/luckydiamond/src/main.js
@@ -2,10 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'

 import router from "@/router/router";
-
+import mitt from 'mitt'
+import { Mixins } from "@/mixins/mixin";
+import {
+    ConnectToChat
+} from "@/assets/js/chat/ChatLogic.js";
 import '@/assets/css/global.css'

+export const eventBus = mitt()
+
 const app = createApp(App)
+
 app.use(router)
+app.mixin(Mixins)

 app.mount('#app')
+app.provide(eventBus)
+
+ConnectToChat();
--- a/luckydiamond/src/mixins/mixin.js
+++ b/luckydiamond/src/mixins/mixin.js
@@ -0,0 +1,13 @@
+export const Mixins = {
+    methods: {
+        checkWindowSize() {
+            this.mobile = window.innerWidth <= 600
+        },
+        AddWindowListener() {
+            window.addEventListener('resize', this.checkWindowSize)
+        },
+        RemoveWindowListener() {
+            window.removeEventListener('resize', this.checkWindowSize)
+        }
+    }
+}
--- a/luckydiamond/src/mocks/PaymentsModalNumbers.js
+++ b/luckydiamond/src/mocks/PaymentsModalNumbers.js
@@ -0,0 +1,20 @@
+export default [
+    {
+        diamonds: 1,
+    },
+    {
+        diamonds: 5,
+    },
+    {
+        diamonds: 10,
+    },
+    {
+        diamonds: 50,
+    },
+    {
+        diamonds: 100,
+    },
+    {
+        diamonds: 1000,
+    },
+]
--- a/luckydiamond/src/mocks/SaperNumbers.js
+++ b/luckydiamond/src/mocks/SaperNumbers.js
@@ -0,0 +1,30 @@
+export default [
+    {
+        crystals: 1,
+        diamonds: 1,
+        steps: 'x1.2'
+    },
+    {
+        crystals: 5,
+        diamonds: 5,
+        steps: 'x1.5'
+    },
+    {
+        crystals: 10,
+        diamonds: 10,
+        steps: 'x1.8'
+    },
+    {
+        crystals: 24,
+        diamonds: 50,
+        steps: 'x2'
+    },
+    {
+        diamonds: 100,
+        steps: 'x2.2'
+    },
+    {
+        diamonds: 'max',
+        steps: 'x2.5'
+    }
+]
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -1,11 +1,11 @@
-<link rel="stylesheet" href="../assets/css/PagesStyles/home.css">
 <template>
-  <div class="content-grid">
-    <aside-bar-element @animationchange="claimSettings"></aside-bar-element>
+  <homemobile-page v-if="mobile"></homemobile-page>
+  <div class="content-grid" v-else>
+    <aside-bar-component></aside-bar-component>

-    <chat-element></chat-element>
+    <chat-component></chat-component>

-    <header-element-page></header-element-page>
+    <header-component></header-component>

    <main class="main">
      <div class="main__content">
@@ -32,7 +32,7 @@
                <div class="line__footer">
                  <img src="../assets/icons-gamemodes/bomb-icon.svg">
                  <div class="line__btn--main">
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <a href="#" @click="$router.push({ name: 'saper' })" class="line__btn">play <span class="line__btn--elm">></span></a>
                  </div>
                </div>
              </div>
@@ -45,16 +45,17 @@
              <li
                  v-for="mode in firstlineGameMode"
                  :key="mode.id"
+                  class="display-firstline"
              >
-                <div class="line__img">
-                  <img src="@/assets/icons-gamemodes/case-icon.png">
-                </div>
                <div :class="'linecontent-' + mode.id">
                  <div class="container">
                    <h1 class="title-firstline">{{ mode.title }}</h1>
                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
                  </div>
                </div>
+                <div class="line__img">
+                  <img src="@/assets/icons-gamemodes/case-icon.png">
+                </div>
              </li>
            </ul>
          </div>
@@ -99,25 +100,40 @@
 </template>

 <script>
-import HeaderElementPage from "@/components/HeaderComponent.vue";
-import AsideBarElement from "@/components/AsidebarComponent.vue";
-import ChatElement from "@/components/ChatComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
 import GameModes from "@/mocks/GameModes";
 import '@/assets/css/PagesStyles/home.css'

 export default {
  name: 'HomePage',
-  components: {AsideBarElement, HeaderElementPage, ChatElement },
+  components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
  data() {
    return {
      GameModes,
-      AnimationOff: false
+      AnimationOff: false,
+      mobile: false,
    }
  },
  methods: {
-    claimSettings(value) {
-      this.AnimationOff = value
-    }
+    // claimSettings(value) {
+    //   this.AnimationOff = value
+    // },
+    // checkWindowSize() {
+    //   this.mobile = window.innerWidth <= 600
+    //
+    //   this.currentPage = this.mobile ? 'Mobile' : 'Desktop'
+    // }
+  },
+  mounted() {
+    this.checkWindowSize()
+
+    this.AddWindowListener()
+  },
+  beforeUnmount() {
+    this.RemoveWindowListener()
  },
  computed: {
    mainGameMode() {
--- a/luckydiamond/src/pages/ProfilePage.vue
+++ b/luckydiamond/src/pages/ProfilePage.vue
@@ -0,0 +1,151 @@
+<template>
+  <profilemobile-page v-if="mobile"></profilemobile-page>
+  <div class="content__grid-profile" v-else>
+    <aside-bar-component></aside-bar-component>
+
+    <chat-component id="chat-profile"></chat-component>
+
+    <header-component></header-component>
+
+  <section class="profile">
+    <div class="profile__content">
+      <img class="profile__user--img" :src="imageUrl">
+      <div class="profile__card icon-diamond">
+        <h1>{{ username }}</h1>
+        <h2><img src="@/assets/icons-profile/icon-diamond-ore.png">{{ balance }}</h2>
+      </div>
+      <div class="profile__btns--payments">
+        <a href="#" class="text-btn btn-bg btn-margin btn-display" @click="depositClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
+        <a href="#" class="withdraw text-btn btn-bg btn-display" @click="withdrawClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
+      </div>
+    </div>
+    <div class="payments">
+      <div class="payments__content">
+        <div class="payments__types">
+          <div class="types types-margin types-text">
+            <h3>Игрок и вид транзакции</h3>
+            <h3>Дата</h3>
+            <h3>Сумма</h3>
+          </div>
+          <div class="types-line"></div>
+        </div>
+        <div class="payments__history">
+          <div class="payments__card" v-for="payment in arrayHistory" :key="payment.id">
+            <div class="user-info">
+              <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+              <div class="user-name user-name__text">
+                <h3>{{ payment.name }}</h3>
+                <p>{{ payment.comment }}</p>
+              </div>
+            </div>
+            <div class="data-info data-info__text">
+              <h3>{{ payment.data }}</h3>
+            </div>
+            <div class="transaction-info transaction-info__text" :class="{ 'withdraw-color': payment.amount < 0, 'deposit-color': payment.amount > 0 }">
+              <h3>{{ payment.amount }} АР</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+    <payments-modal v-if="openModal" @notifacetionmoney="NotificationEventListener" @closemodal="openModal = false" :payments="payments"></payments-modal>
+    <notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
+  </div>
+</template>
+
+<script>
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import PaymentsModal from "@/components/PaymentsModal.vue";
+import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
+import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
+
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+import '@/assets/css/PagesStyles/profile.css'
+import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+
+export default {
+  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
+  data() {
+    return {
+      username: 'Artemka',
+      imageUrl: '',
+      notification: false,
+      balance: 0,
+      mobile: false,
+      openModal: false,
+      payments: true,
+      arrayHistory: [],
+    }
+  },
+  emits: ['notificationremove'],
+  mounted() {
+    this.checkWindowSize()
+
+    this.AddWindowListener()
+  },
+  beforeUnmount() {
+    this.RemoveWindowListener()
+  },
+  created() {
+    this.username = GetCookie('SpUserName')
+
+    GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+        .then((response) => {
+          this.balance = response.currentMoney
+          console.log('balance in profile', this.balance)
+        })
+        .catch((error) => {
+          console.error('error in profile, get money', error)
+        })
+
+    this.imageUrl = `https://avatar.spworlds.ru/front/256/${this.username}`
+  },
+  methods: {
+    depositClick() {
+      this.openModal = true
+      this.payments = true
+    },
+    withdrawClick() {
+      this.openModal = true
+      this.payments = false
+    },
+    NotificationEventListener() {
+      this.notification = true
+      this.openModal = false
+    },
+    NotificationMethod() {
+      this.notification = false
+    }
+    // formatNumber(number) {
+    //   return number < 10 ? `0${number}` : number;
+    // },
+    // getCurrentFormattedDate() {
+    //   const currentDate = new Date();
+    //   return `${this.formatNumber(currentDate.getDate())}.${this.formatNumber(currentDate.getMonth() + 1)}.${currentDate.getFullYear()}, ${this.formatNumber(currentDate.getHours())}:${this.formatNumber(currentDate.getMinutes())}`;
+    // },
+    // claimDataDeposit(amount) {
+    //   const historyPayments = {
+    //     name: 'TEST USER',
+    //     comment: 'test',
+    //     data: this.getCurrentFormattedDate(),
+    //     amount: amount
+    //   }
+    //
+    //   this.arrayHistory.unshift(historyPayments)
+    // },
+    // claimDataWithdraw(amount) {
+    //   const historyPayments = {
+    //     name: 'TEST USER',
+    //     comment: 'test',
+    //     data: this.getCurrentFormattedDate(),
+    //     amount: -amount
+    //   }
+    //
+    //   this.arrayHistory.unshift(historyPayments)
+    // }
+  }
+}
+</script>
--- a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
@@ -0,0 +1,57 @@
+<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
+<template>
+  <div class="content-grid__mobile-home">
+    <header-mobile-component></header-mobile-component>
+    <main class="main-mobile">
+      <div class="main-mobile__content">
+        <div class="main-mobile__first-line">
+          <div class="card-mobile__content bg-mobile card-first card-game__text" v-for="mode in firstlineGameMode" :key="mode">
+            <h2>{{ mode.title }}</h2>
+            <div class="card-mobile__btn">
+              <a href="#">Play <span>></span></a>
+            </div>
+          </div>
+        </div>
+        <div class="main-mobile__two-line">
+          <div class="card-mobile__content bg-mobile card-two card-game__text" v-for="mode in twolineGameMode" :key="mode">
+            <h2>{{ mode.title }}</h2>
+            <div class="card-mobile__btn">
+              <a href="#">Play <span>></span></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <menu-mobile-component></menu-mobile-component>
+  </div>
+</template>
+
+<script>
+import '@/assets/css/PagesStyles/adaptive-pages/homemobile.css'
+import '@/mocks/GameModes'
+import GameModes from "@/mocks/GameModes";
+
+import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
+import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
+
+export default {
+  components: { HeaderMobileComponent, MenuMobileComponent },
+  data() {
+    return {
+      GameModes
+    }
+  },
+  computed: {
+    firstlineGameMode() {
+      return this.GameModes.filter(mode => [1, 2].includes(mode.id))
+    },
+    twolineGameMode() {
+      return this.GameModes.filter(mode => [3, 4].includes(mode.id))
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
--- a/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="content-mobile__profile">
+    <header-mobile-component></header-mobile-component>
+
+    <main class="profile-mobile" :class="{ 'header-off' : payments.paymentsWindow }">
+      <div class="profile-mobile__content">
+        <div class="macroinfo-profile text-default-mobile img-margin">
+          <h2>Профиль</h2>
+          <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+        </div>
+        <div class="info-profile">
+          <h3 class="text-nickname-user">Artmeka</h3>
+          <h3 class="balance-border balance-display balance-text"><img src="@/assets/icons-profile/icon-diamond-ore.png">999</h3>
+          <div class="profile-mobile__btns-payments">
+            <a href="#" @click="paymetsCall('dep')" class="deposit-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
+            <a href="#" @click="paymetsCall('with')" class="withdraw-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
+          </div>
+        </div>
+      </div>
+    </main>
+    <menu-mobile-component></menu-mobile-component>
+    <payments-mobile @closemodal="paymentsClose" :payments="payments" v-if="payments.paymentsWindow"></payments-mobile>
+  </div>
+</template>
+
+<script>
+import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
+import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
+import PaymentsMobile from "@/components/adaptive-components/PaymentsMobile.vue";
+
+import '@/assets/css/PagesStyles/adaptive-pages/profilemobile.css'
+
+export default {
+  components: { HeaderMobileComponent, MenuMobileComponent, PaymentsMobile },
+  data () {
+    return {
+      payments: {
+        paymentsWindow: false,
+        paymentsView: false
+      },
+    }
+  },
+  methods: {
+    paymetsCall(view) {
+      this.payments.paymentsWindow = true
+      this.payments.paymentsView = view === 'dep'
+    },
+    paymentsClose() {
+      this.payments.paymentsWindow = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/luckydiamond/src/pages/games-pages/SapergamePage.vue
+++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue
@@ -0,0 +1,492 @@
+<template>
+  <div class="content-grid--saper">
+    <aside-bar-element></aside-bar-element>
+
+    <header-element-page></header-element-page>
+
+    <chat-component id="chat"></chat-component>
+
+    <section class="saper" :class="{ 'game-end' : ValidationPlay.endGame }">
+      <div class="bg"></div>
+      <div class="bg-two"></div>
+      <div class="saper-start" :class="{ 'game-start__menu-off' : gameStart }">
+        <div class="saper-start__content title-saper padding-elements">
+          <h2>Сапёр</h2>
+          <p>Находи изумруды на поле и избегай кристалы</p>
+          <div class="saper-start__choises crystals">
+            <h3>Количество кристалов</h3>
+            <div class="crystals__choises crystals-input__margin crystals-btns__choices">
+              <img class="crystal-icon" width="25" height="25" src="@/assets/icons-games/saper-game/icon-crystall-saper.svg">
+              <input v-model="amountCrystals" type="number">
+              <ul class="crystals-btns__display">
+                <li v-for="(item, index) in SaperNumbers" :key="index">
+                  <button @click="clickedBtnCrystals(index, item.crystals)" :class="{ 'btn-click': clickedBtnCrystal === index, [index]: clickedBtnCrystal === index }" :id="item.crystals === 'max' ? 'max-button' : null" v-if="item.crystals !== undefined">{{ item.crystals }}</button>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="saper-start__choises diamonds diamonds-input__margin">
+            <h3>Сумма депозита</h3>
+            <div class="diamonds__choises">
+              <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+              <input v-model="amountDeposit" type="number" id="diamonds-input">
+              <div class="diamonds__btns btn-style__diamonds">
+                <ul class="diamonds-btns__display">
+                  <li v-for="(item, index) in SaperNumbers" :key="index">
+                    <button @click="clickedBtnChoice(index, item.diamonds)" :class="{ 'btn-click': clickedBtn === index, [index]: clickedBtn === index }" :id="item.diamonds === 'max' ? 'max-button' : null" v-if="item.diamonds !== undefined">{{ item.diamonds }}</button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="saper-start__btns">
+            <div class="error-block" v-if="ErrorClick">
+              <h2>Ошибка при заполнении</h2>
+            </div>
+            <button class="btn-start" :class="{ 'animate-start-btn' : ErrorClick }" @click="clickPlayButton">Начать игру</button>
+            <button class="btn-claim" v-if="winningAmount === 0">Забрать {{ winningAmount }} АР</button>
+            <button class="btn-claim" @click="claimWinningAmount()" v-else>Забрать {{ winningAmount.toFixed(2) }} АР</button>
+          </div>
+          <div class="saper-start__steps btns-style__steps">
+            <swiper v-if="PercentageGameSteps.length" :key="PercentageGameSteps[0]" :spaceBetween="30" :slides-per-view="4" :centeredSlides="false" :navigation="true" :modules="modules">
+              <template v-for="(item, index) in PercentageGameSteps" :key="index">
+                <swiper-slide>
+                  <div class="steps-btns__display">
+                    <button>x{{ item.toFixed(2) }} <span>{{ index + 1 }} {{ stepsEndOfWord(index + 1) }}</span></button>
+                  </div>
+                </swiper-slide>
+              </template>
+            </swiper>
+          </div>
+        </div>
+      </div>
+      <div class="saper-game">
+        <div class="saper-game__content">
+          <div class="game" :class="{ 'game-start' : offEventPointers }">
+            <div class="circles__content">
+              <img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-1">
+              <img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-2">
+              <img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-3">
+              <img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-4">
+            </div>
+            <div class="game-firstline">
+              <ul class="display-lines margin-lines">
+                <li class="firstline" v-for="index in 5" :key="index">
+                  <div @click="flipCard(index)" :class="[ 'square', `square-${index}`, { 'square-fliper' : flippedCards.includes(index) } ]">
+                    <h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index) }">ld</h2>
+                    <img class="img-style-click" v-if="CorrectsClick.includes(index)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
+                    <img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="game-default-line">
+              <ul class="display-lines margin-lines">
+                <li v-for="index in 5" :key="index">
+                  <div @click="flipCard(index + 5)" :class="[ 'square', `square-${index + 5}`, { 'square-fliper' : flippedCards.includes(index + 5) } ]">
+                    <h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 5) }">ld</h2>
+                    <img class="img-style-click" v-if="CorrectsClick.includes(index + 5)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
+                    <img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 5)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="game-default-line">
+              <ul class="display-lines margin-lines">
+                <li v-for="index in 5" :key="index">
+                  <div @click="flipCard(index + 10)" :class="[ 'square', `square-${index + 10}`, { 'square-fliper' : flippedCards.includes(index + 10) } ]">
+                    <h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 10) }">ld</h2>
+                    <img class="img-style-click" v-if="CorrectsClick.includes(index + 10)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
+                    <img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 10)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="game-default-line">
+              <ul class="display-lines margin-lines">
+                <li v-for="index in 5" :key="index">
+                  <div @click="flipCard(index + 15)" :class="[ 'square', `square-${index + 15}`, { 'square-fliper' : flippedCards.includes(index + 15) } ]">
+                    <h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 15) }">ld</h2>
+                    <img class="img-style-click" v-if="CorrectsClick.includes(index + 15)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
+                    <img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 15)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="game-default-line">
+              <ul class="display-lines margin-lines">
+                <li v-for="index in 5" :key="index">
+                  <div @click="flipCard(index + 20)" :class="[ 'square', `square-${index + 20}`, { 'square-fliper' : flippedCards.includes(index + 20) } ]">
+                    <h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 20) }">ld</h2>
+                    <img class="img-style-click" v-if="CorrectsClick.includes(index + 20)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
+                    <img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 20)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="game-info">
+            <div class="game-info__content text-style__subtitle text-style__comment">
+              <div class="info-emeralds">
+                <div class="info-emeralds__content card-info">
+                  <h2>Изумруды</h2>
+                  <p>Открывай ячейки с изумрудами</p>
+                  <img src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" width="170" height="170">
+                </div>
+              </div>
+              <div class="info-crystals">
+                <div class="info-crystals__content card-info">
+                  <h2>кристаллы</h2>
+                  <p>Остерегайся кристаллов, чтобы не проиграть</p>
+                  <img src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" width="170" height="170">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div class="start-game" v-if="ValidationPlay.startGame === true">
+    <h2>Игра началась!</h2>
+  </div>
+  <div class="start-game" v-if="ValidationPlay.endGame === true">
+    <h2>Вы подорвались! Игра закончена</h2>
+  </div>
+  <div class="start-game" v-if="ValidationPlay.winGame === true">
+    <h2>Игра успешно закончена! Приз забран.</h2>
+  </div>
+</template>
+
+<script>
+import ChatComponent from "@/components/ChatComponent.vue";
+import AsideBarElement from "@/components/AsidebarComponent.vue";
+import HeaderElementPage from "@/components/HeaderComponent.vue";
+import { GetPercentageSteps, GetUserData, ClickCirclePlay, GetWinningAmount } from "@/assets/js/games/saper/SaperAPI";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+
+import { Howl } from 'howler';
+import {eventBus} from "@/main";
+
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import "swiper/css/navigation";
+import SwiperCore from 'swiper/core';
+import {Navigation } from "swiper/modules";
+
+import { useVuelidate } from '@vuelidate/core'
+import { maxValue, minValue, required, numeric, integer } from "@vuelidate/validators";
+
+SwiperCore.use([Navigation]);
+
+import '@/assets/css/PagesStyles/games-pages/saper.css'
+import SaperNumbers from "@/mocks/SaperNumbers";
+
+export default {
+  components: {ChatComponent, HeaderElementPage, AsideBarElement, Swiper, SwiperSlide },
+  data() {
+    return {
+      SaperNumbers,
+      clickedBtn: '',
+      clickedBtnCrystal : '',
+      amountCrystals: 0,
+      balance: 0,
+      winningAmount: 0,
+      gamesCircle: 0,
+      ErrorClick: '',
+      gameStart: false,
+      offEventPointers: false,
+      amountDeposit: 0,
+      flippedCards: [],
+      PercentageGameSteps: [],
+      CorrectsClick: [],
+      unCorrectClick: [],
+      ValidationPlay: {
+        startGame: false,
+        endGame: false,
+        winGame: false,
+      },
+      modules: [ Navigation ]
+    }
+  },
+  setup () {
+    return{ v$: useVuelidate() }
+  },
+  validations() {
+    return {
+      amountCrystals: { required, numeric, minValue: minValue(1), maxValue: maxValue(24), integer },
+      amountDeposit: { required, numeric, minValue: minValue(1), maxValue: maxValue(this.balance), integer }
+    }
+  },
+  watch: {
+    async amountCrystals(CrystalsCount) {
+      this.PercentageGameSteps = []
+      if (CrystalsCount >= 1 && CrystalsCount <= 24) {
+        try {
+            await GetPercentageSteps(this.amountCrystals)
+              .then((response) => {
+                response.forEach((item) => {
+                  if (item !== 'Infinity' && item !== '-Infinity') {
+                    this.PercentageGameSteps.push(Number(item))
+                  }
+                })
+              })
+        }
+        catch (e) {
+            console.error('Error in Percantage', e)
+        }
+      }
+    },
+    flippedCards: {
+     async handler(value) {
+       if (value.length < 1 || this.ValidationPlay.endGame === true) return
+       const maxCircles = 25 - this.amountCrystals
+       console.log(`MAXCIRLES - ${maxCircles} VALUE: ${value} GAMECIRCLE - ${this.gamesCircle}`)
+
+       if (this.gameStart !== false) {
+         this.offEventPointers = false
+         let AnswerServer
+
+         let LimitClicked = this.amountCrystals
+         let DepositDiamonds = this.amountDeposit
+
+         const X_Cordinates = value[this.gamesCircle]
+         let findIndex, findX, findY
+
+         if (X_Cordinates > 5) {
+           findIndex = Math.ceil(X_Cordinates / 5) * 5
+           findY = Math.ceil(findIndex / 5) - 1
+           findX = X_Cordinates - findIndex + 4
+         }
+         else if (X_Cordinates <= 5) {
+           findX = X_Cordinates - 1
+           findY = 0
+         }
+
+         const UserObject = {
+           PuttedMoney: DepositDiamonds,
+           MinesCount: this.amountCrystals,
+           SearchToken: GetCookie('SearchToken'),
+           AUTHTOKEN: GetCookie('AUTHTOKEN')
+         }
+         const ClickedSquare = {
+           X: findX,
+           Y: findY
+         }
+
+         try {
+           await ClickCirclePlay(UserObject, ClickedSquare)
+               .then(response => {
+                 AnswerServer = response
+                 this.winningAmount = response.Item1.WinningMoney
+               })
+         }
+         catch (e) {
+           console.error(e)
+         }
+
+         console.log('---------ANSWER SERVER-----------', AnswerServer)
+         console.log(LimitClicked, DepositDiamonds, X_Cordinates)
+         this.gamesCircle = this.gamesCircle + 1
+         this.offEventPointers = true
+         if (AnswerServer === 'You dead') {
+           this.unCorrectClick.push(X_Cordinates)
+           this.offEventPointers = false
+           this.gameStart = false
+           this.gamesCircle = 0
+           this.winningAmount = 0
+           const SoundCorrect = new Howl({
+             src: ['/sounds/incorrect-sound.mp3'],
+             volume: 0.5
+           })
+
+           SoundCorrect.play()
+
+           this.ValidationPlay.endGame = true
+           setTimeout(() => {
+             this.ValidationPlay.endGame = false
+           }, 1200)
+           return eventBus.emit('Updatebalance')
+         }
+         const SoundUncorrect = new Howl({
+           src: ['/sounds/correct-click.mp3'],
+           volume: 0.5
+         })
+         this.CorrectsClick.push(X_Cordinates)
+
+         SoundUncorrect.play()
+       }
+       if (this.gamesCircle === maxCircles) {
+         this.offEventPointers = false
+         this.gameStart = false
+         this.gamesCircle = 0
+         this.flippedCards = []
+
+         this.claimWinningAmount()
+
+         this.ValidationPlay.winGame = true
+
+         setTimeout(() => {
+           this.ValidationPlay.winGame = false
+         }, 1500)
+       }
+      },
+      deep: true
+    }
+  },
+   created() {
+    const AUTHTOKEN = GetCookie('AUTHTOKEN')
+    const SEARCHTOKEN = GetCookie('SearchToken')
+
+    if (AUTHTOKEN !== null && SEARCHTOKEN !== null) {
+      try {
+         GetUserData(AUTHTOKEN, SEARCHTOKEN)
+            .then(response => {
+              console.log(response)
+              if (response) {
+                this.gameStart = true
+                this.offEventPointers = true
+
+                this.ValidationPlay.startGame = true
+
+                this.amountCrystals = response.MinesCount
+                this.amountDeposit = response.PuttedMoney
+                this.winningAmount = response.WinningMoney
+
+                const soundStartGame = new Howl({
+                  src: ['/sounds/start-game.mp3'],
+                  volume: 5.0
+                })
+
+                soundStartGame.play()
+                console.log(this.flippedCards.length)
+                setTimeout(() => {
+                  this.ValidationPlay.startGame = false
+                }, 2000)
+              }
+            })
+        this.getBalanceUser()
+      }
+      catch (e) {
+        console.error('Error in GetData', e)
+      }
+    }
+  },
+  methods: {
+    clickPlayButton() {
+      this.v$.$touch()
+
+      if (this.v$.amountDeposit.$error) {
+        this.errorPlayButton()
+      }
+      else if (this.v$.amountCrystals.$error) {
+        this.errorPlayButton()
+      }
+      else {
+        this.flippedCards = []
+        this.unCorrectClick = []
+        this.CorrectsClick = []
+        this.playNotification()
+        this.gameStart = true
+        this.offEventPointers = true
+        const soundStartGame = new Howl({
+          src: ['/sounds/start-game.mp3'],
+          volume: 5.0
+        })
+
+        soundStartGame.play()
+      }
+    },
+    getBalanceUser() {
+      try {
+        GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+            .then(response => {
+              this.balance = response.currentMoney
+            })
+      }
+      catch (e) {
+        console.error(e)
+      }
+    },
+    async claimWinningAmount() {
+      if (this.winningAmount >= 1) {
+        try {
+          this.offEventPointers = false
+          this.gameStart = false
+          this.flippedCards = []
+          this.unCorrectClick = []
+          this.CorrectsClick = []
+          this.gamesCircle = 0
+          await GetWinningAmount({ SearchToken: GetCookie('SearchToken'), AuthToken: GetCookie('AUTHTOKEN') })
+          this.winningAmount = 0
+          return eventBus.emit('Updatebalance')
+        }
+        catch (e) {
+          console.error(e)
+        }
+      }
+    },
+    playNotification() {
+      this.ValidationPlay.startGame = true
+      setTimeout(() => {
+        this.ValidationPlay.startGame = false
+      }, 1500)
+    },
+    errorPlayButton() {
+      this.ErrorClick = true
+      setTimeout(() => {
+        this.ErrorClick = false
+      }, 2000)
+    },
+    flipCard(index) {
+      if (this.flippedCards.includes(index)) {
+        return eventBus.emit('Updatebalance')
+      } else {
+        this.flippedCards.push(index);
+      }
+    },
+    stepsEndOfWord(index) {
+      const indexString = String(index)
+      let lastNumber = indexString
+      if (indexString >= 10) {
+        lastNumber = indexString.slice(1)
+      }
+      return this.checkLastNumber(lastNumber)
+    },
+    checkLastNumber(number) {
+      let word = ''
+      if (number === '1') {
+        word = 'шаг'
+      }
+      else if (['2', '3', '4'].includes(number)) {
+        word = 'шага'
+      }
+      else {
+        word = 'шагов'
+      }
+      return word
+    },
+    async clickedBtnChoice(index, content) {
+      this.clickedBtn = index
+      if (content === 'max') {
+        await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+            .then((response) => {
+              this.amountDeposit = parseInt(response.currentMoney)
+            })
+      }
+      else {
+        this.amountDeposit = content
+      }
+    },
+    clickedBtnCrystals(index, content) {
+      this.clickedBtnCrystal = index
+      this.amountCrystals = content
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/luckydiamond/src/properties/Сonfig.js
+++ b/luckydiamond/src/properties/Сonfig.js
@@ -0,0 +1,5 @@
+export const BackendApiUrl  = 'https://spsystemcore20231122004605.azurewebsites.net/api';
+
+export const BackendWebSocketUrl  = 'wss://spsystemcore20231122004605.azurewebsites.net';
+ 
+ // export const BackendApiUrl = 'https://localhost:7062/api';
--- a/luckydiamond/src/router/router.js
+++ b/luckydiamond/src/router/router.js
@@ -1,9 +1,14 @@
 import { createRouter, createWebHistory } from "vue-router";

 import HomePage from "../pages/HomePage.vue";
+import ProfilePage from "@/pages/ProfilePage.vue";
+import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
+
 export default createRouter({
    history: createWebHistory(),
    routes: [
-        { path: '/', component: HomePage, name: 'home' }
+        { path: '/', component: HomePage, name: 'home' },
+        { path: '/profile', component: ProfilePage, name: 'profile' },
+        { path: '/game/saper', component: SapergamePage, name: 'saper' }
    ]
 })
--- a/luckydiamond/vue.config.js
+++ b/luckydiamond/vue.config.js
@@ -1,7 +1,27 @@
 // vue.config.js file to be placed in the root of your repository

+// module.exports = {
+//   publicPath: process.env.NODE_ENV === 'production'
+//     ? '/luckydiamond/'
+//     : '/'
+// }
+
+// module.exports = {
+//   publicPath: '/'
+// }
+
+const path = require('path');
+
 module.exports = {
-  publicPath: process.env.NODE_ENV === 'production'
-    ? '/LuckyDiamond/'
-    : '/'
-}
+  // Установка базового URL-адреса для проекта
+  publicPath: '/',
+
+  // Настройка Webpack
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src/'), // Настройка алиаса '@' для каталога 'src/'
+      }
+    }
+  }
+};
				`@@ -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>