Merge pull request #3 from danilt2000/DevelopCkutls

Added home-mobile page, Profile page
2025-12-10 12:19:31 +02:00 · 2023-12-03 23:02:10 +01:00
parent 7fb400b559 0bc620d1bf
commit 77ee5b31f8
34 changed files with 1385 additions and 22 deletions
--- a/luckydiamond/package-lock.json
+++ b/luckydiamond/package-lock.json
@@ -8,6 +8,8 @@
      "name": "luckydiamond",
      "version": "0.1.0",
      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "bootstrap": "^5.3.2",
        "core-js": "^3.8.3",
        "vue": "^3.2.13",
        "vue-router": "^4.2.5"
@@ -2040,6 +2042,15 @@
      "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
      "dev": true
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@sideway/address": {
      "version": "4.1.4",
      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -3813,6 +3824,24 @@
      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
      "dev": true
    },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
--- a/luckydiamond/package.json
+++ b/luckydiamond/package.json
@@ -9,6 +9,8 @@
    "deploy": "sh deploy.sh"
  },
  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.2",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.2.5"
--- a/luckydiamond/src/assets/css/ComponentsStyles/chat.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/chat.css
@@ -97,7 +97,7 @@

 .write__content button {
    padding: 8px 9px;
-    margin-left: -15%;
+    margin-left: -20%;
    border-radius: 6px;
    background: #3D3F48;
    border: none;
--- a/luckydiamond/src/assets/css/ComponentsStyles/header.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/header.css
@@ -15,10 +15,10 @@
 }

 .header__nav nav a {
-    margin-right: 30%;
    text-decoration: none;
    font-family: Montserrat Alternates;
    font-weight: 700;
+    margin-right: 3em;
 }

 .header__nav--now {
--- a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
@@ -0,0 +1,51 @@
+.payment-modal {
+    position: absolute;
+    top: 20%;
+    left: 35%;
+    background: #000;
+    width: 400px;
+    height: 200px;
+}
+
+.payments-modal__content {
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+.payments-modal__content button {
+    background: #fff;
+    border: none;
+    color: #ff0000;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    cursor: pointer;
+}
+
+.payments__input--color input {
+    color: #000;
+}
+
+.payments__margin {
+    margin: 40px 0 0 20px;
+}
+
+.payments__margin input {
+    margin-left: 10px;
+}
+
+.payments__button .payments-modal__content--btn {
+    display: flex;
+    justify-content: center;
+    margin-top: 5%;
+}
+
+.payments__button .payments-modal__content--btn button {
+    background: #fff;
+    color: #000;
+    font-weight: 700;
+    padding: 10px 10px;
+    border: none;
+    cursor: pointer;
+}
--- a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
@@ -0,0 +1,208 @@
+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%;
+}
+
+.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%;
+}
+
+.main-mobile {
+    grid-area: main-mobile;
+    width: 100%;
+    height: 100%;
+}
+
+.footer-mobile {
+    grid-area: footer-mobile;
+    width: 100%;
+    height: 10%;
+    background: #17181C;
+    position: fixed;
+    bottom: 0;
+}
+
+/* Header */
+
+.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__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: 8% 15px 8% 7%;
+}
+
+.card-img img {
+    width: 100%;
+    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 img {
+    width: 90%;
+    height: 40px;
+}
+
+.btn-card__margin {
+    margin-left: -8%;
+}
+
+/* /Header */
+
+/* Main */
+
+.main-mobile__content {
+    margin-top: 12%;
+    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 */
+
+/* Footer */
+
+.footer-mobile__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2%;
+}
+.chat-icon a,
+.home-icon a,
+.settings-icon a {
+    background: #000;
+}
+
+.home-icon a img {
+    padding-left: 6px;
+}
+
+.settings-icon a img {
+    width: 75px;
+    height: 75px;
+    padding: 9px 0 0 6px;
+}
+
+.footer-mobile__block a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+    height: 4em;
+    background: #D9D9D91F;
+    border-radius: 20px;
+    margin: 0 .8em;
+}
+
+
+/* /Footer */
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -0,0 +1,243 @@
+#chat {
+    height: 95%;
+}
+
+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 {
+    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: 70%;
+}
+
+.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%;
+}
+
+.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;
+    justify-content: center;
+}
+
+.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: 2.8%;
+}
+
+.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;
+    line-height: 31px;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    padding: 6px 16px;
+    margin-right: 8px;
+}
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -127,7 +127,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    padding-top: 7.6%;
+    padding-top: 8.7%;
 }

 .line__content .line__btn--main .line__btn {
@@ -244,4 +244,79 @@
    margin-right: 10%;
 }

-/* /GameMode */
+/* /GameMode */
+
+/* Media */
+
+@media screen and (max-width: 1280px) {
+    .main__content h1 {
+        font-size: 4.5em;
+    }
+    .gamemode__main {
+        height: auto;
+    }
+    .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: .5em;
+    }
+    .line__img {
+        margin: 1% -15% 0 2%;
+    }
+    .gamemode__firstline img {
+        width: 60%;
+        height: 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,166 @@
+.profile__content {
+    width: 35%;
+    margin-left: 3%;
+}
+
+.profile__content .profile__user--img {
+    margin: 17.6% 8.4% 1% 0;
+}
+
+.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: 32%;
+    display: flex;
+    align-items: center;
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 28px;
+}
+
+.profile__card h2 img {
+    margin-right: 4.4%;
+}
+
+.profile__btns--payments {
+    margin-top: 7.9%;
+    display: flex;
+    flex-direction: column;
+}
+
+.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: 1.8% 0 2% 2%;
+    margin-bottom: 11px;
+}
+
+.btn-display {
+    display: flex;
+    align-items: center;
+}
+
+.text-btn {
+    text-decoration: none;
+    color: #FFF;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 18px;
+}
+
+.withdraw {
+    padding: 1.8% 0 2% 2%;
+}
+
+
+.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;
+    align-items: start;
+}
+
+.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: 13%;
+}
+
+.data-info__text h3 {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 17px;
+}
+
+.transaction-info {
+    margin-left: 13%;
+}
+
+.transaction-info__text h3 {
+    font-weight: 500;
+    font-family: Montserrat;
+    font-size: 22px;
+}
+
+.deposit-color h3 {
+    color: #32C966;
+}
+
+.withdraw-color h3 {
+    color: #EA3D38;
+}
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -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 */

@@ -99,4 +133,27 @@ body, html {
    width: 100%;
 }

-/* /GameMode */
+/* /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: 95.5%;
+}
+
+/* /Saper */
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-chat.svg
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-chat.svg
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-deposit.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-deposit.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.svg
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-home.svg
@@ -0,0 +1,17 @@
+<svg width="55" height="60" viewBox="0 0 55 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_901_125)">
+<path d="M5.78938 43.9217C5.78938 45.0263 6.68481 45.9217 7.78938 45.9217H12.4735C13.578 45.9217 14.4735 45.0263 14.4735 43.9217V30.7011C14.4735 29.5965 15.3689 28.7011 16.4735 28.7011H29.8416C30.9462 28.7011 31.8416 29.5965 31.8416 30.7011V43.9217C31.8416 45.0263 32.737 45.9217 33.8416 45.9217H38.5257C39.6303 45.9217 40.5257 45.0263 40.5257 43.9217V21.0959C40.5257 20.4635 40.2266 19.8683 39.7191 19.491L24.351 8.06275C23.6426 7.53594 22.6725 7.53594 21.9641 8.06275L6.59594 19.491C6.08847 19.8683 5.78938 20.4635 5.78938 21.0959V43.9217ZM2 51.6619C0.895433 51.6619 0 50.7665 0 49.6619V18.2257C0 17.5934 0.299091 16.9982 0.806553 16.6209L21.9641 0.887483C22.6725 0.360675 23.6426 0.360675 24.351 0.887483L45.5085 16.6209C46.016 16.9982 46.3151 17.5934 46.3151 18.2257V49.6619C46.3151 50.7665 45.4196 51.6619 44.3151 51.6619H28.0522C26.9477 51.6619 26.0522 50.7665 26.0522 49.6619V36.4413C26.0522 35.3367 25.1568 34.4413 24.0522 34.4413H22.2628C21.1583 34.4413 20.2628 35.3367 20.2628 36.4413V49.6619C20.2628 50.7665 19.3674 51.6619 18.2628 51.6619H2Z" fill="#EF4444"/>
+</g>
+<defs>
+<filter id="filter0_d_901_125" x="0" y="0.492188" width="54.3149" height="59.1699" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_901_125"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_901_125" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-notifications.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-notifications.png
--- a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-settings.png
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-settings.png
--- 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/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-profile/icon-deposit.svg
+++ b/luckydiamond/src/assets/icons-profile/icon-deposit.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.5 0C11.6716 0 11 0.671573 11 1.5V11H1.5C0.671573 11 0 11.6716 0 12.5C0 13.3284 0.671573 14 1.5 14H11V23.5C11 24.3284 11.6716 25 12.5 25C13.3284 25 14 24.3284 14 23.5V14H23.5C24.3284 14 25 13.3284 25 12.5C25 11.6716 24.3284 11 23.5 11H14V1.5C14 0.671573 13.3284 0 12.5 0Z" fill="#D9D9D9"/>
+</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.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/components/HeaderComponent.vue
+++ b/luckydiamond/src/components/HeaderComponent.vue
@@ -1,3 +1,4 @@
+
 <script>
 import "@/assets/css/ComponentsStyles/header.css";
 // import { GetAuthCodeFromCurrentPath } from '@/assets/js/authentication/LoggingMiddleware.js';
@@ -106,8 +107,8 @@ export default {
      </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 === 'home' }">Главная</a>
+          <a href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : route === 'profile' }">Профиль</a>
          <a href="#">Помощь</a>
        </nav>
      </div>
@@ -156,6 +157,5 @@ export default {
    </div>
  </header>
 </template>
-
 <style scoped>
 </style>
--- a/luckydiamond/src/components/archive/NotiicationwindowComponent.vue
+++ b/luckydiamond/src/components/archive/NotiicationwindowComponent.vue
--- a/luckydiamond/src/components/archive/PaymentsModal.vue
+++ b/luckydiamond/src/components/archive/PaymentsModal.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="payment-modal">
+    <div class="payments-modal__content">
+      <h1>{{ payments ? 'Пополнить' : 'Вывод' }}</h1>
+      <button @click="closeModal">X</button>
+    </div>
+    <div v-if="payments" class="payments-modal__deposit payments__input--color payments__margin payments__button">
+      <label>Введите сумму пополнения</label>
+      <input v-model="amount" type="number">
+      <div class="payments-modal__content--btn">
+        <button type="submit" @click="detectorMethod('dep')">Подтвердить</button>
+      </div>
+    </div>
+    <div v-else class="payments-modal__withdraw payments__input--color payments__margin payments__button">
+      <div class="count-withdraw">
+        <label>Введите сумму для снятия</label>
+        <input v-model="amount" type="number">
+      </div>
+      <div class="number-card">
+        <label>Введите номер карты</label>
+        <input v-model="card" type="number">
+      </div>
+      <div class="payments-modal__content--btn">
+        <button type="submit" @click="detectorMethod('with')">Подтвердить</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/payments-modal.css'
+
+export default {
+  props: [
+      'payments'
+  ],
+  data() {
+    return {
+      amount: 1,
+      card: 0,
+    }
+  },
+  methods: {
+    closeModal() {
+      return this.$emit('closemodal')
+    },
+    detectorMethod(method) {
+      this.closeModal()
+      if (method === 'dep') {
+        return this.$emit('deposit', this.amount)
+      }
+      else if (method === 'with') {
+        return this.$emit('withdraw', this.amount, this.card)
+      }
+      else {
+        console.log('Произошла ошибка при взаимодействие')
+        return
+      }
+    }
+  }
+}
+</script>
--- 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-if="!mobile">
+    <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>
@@ -99,26 +99,42 @@
 </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,
+      currentPage: 'Desktop'
    }
  },
  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()
+
+    window.addEventListener('resize', this.checkWindowSize)
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.checkWindowSize)
+  },
  computed: {
    mainGameMode() {
      return this.GameModes.filter(mode => [1].includes(mode.id))
--- a/luckydiamond/src/pages/ProfilePage.vue
+++ b/luckydiamond/src/pages/ProfilePage.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="content__grid-profile">
+    <aside-bar-component></aside-bar-component>
+
+    <chat-component></chat-component>
+
+    <header-component></header-component>
+
+  <section class="profile">
+    <div class="profile__content">
+      <img class="profile__user--img" src="@/assets/icons-test/person-icon-profile.png">
+      <div class="profile__card">
+        <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="deposit-icon" src="@/assets/icons-profile/icon-deposit.svg"></a>
+        <a href="#" class="withdraw text-btn btn-bg btn-display" @click="withdrawClick">Вывести <img class="withdraw-icon" src="@/assets/icons-profile/icon-withdraw.svg"></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" @deposit="claimDataDeposit" @withdraw="claimDataWithdraw" @closemodal="openModal = false" :payments="payments"></payments-modal>
+  </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/archive/PaymentsModal.vue";
+import '@/assets/css/PagesStyles/profile.css'
+
+export default {
+  components: { HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal },
+  data() {
+    return {
+      username: 'Artemka',
+      balance: 25000,
+      openModal: false,
+      payments: true,
+      arrayHistory: [],
+    }
+  },
+  methods: {
+    depositClick() {
+      this.openModal = true
+      this.payments = true
+    },
+    withdrawClick() {
+      this.openModal = true
+      this.payments = false
+    },
+    claimDataDeposit(amount) {
+      const historyPayments = {
+        name: 'TEST USER',
+        comment: 'test',
+        data: '5ч назад',
+        amount: amount
+      }
+
+      this.arrayHistory.push(historyPayments)
+    },
+    claimDataWithdraw(amount) {
+      const historyPayments = {
+        name: 'TEST USER',
+        comment: 'test',
+        data: '5ч назад',
+        amount: -amount
+      }
+
+      this.arrayHistory.push(historyPayments)
+    }
+  }
+}
+</script>
--- a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
@@ -0,0 +1,87 @@
+<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
+<template>
+  <div class="content-grid__mobile-home">
+    <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__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="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+    <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>
+    <footer class="footer-mobile">
+      <div class="footer-mobile__content">
+        <div class="footer-mobile__block chat-icon">
+          <a href="#">
+            <img src="@/assets/icons-adaptive/home-adaptive/icon-chat.svg">
+          </a>
+        </div>
+        <div class="footer-mobile__block home-icon">
+          <a href="#" @click="$router.push({ name: 'home' })">
+            <img src="@/assets/icons-adaptive/home-adaptive/icon-home.svg">
+          </a>
+        </div>
+        <div class="footer-mobile__block settings-icon">
+          <a href="#">
+            <img width="" src="@/assets/icons-adaptive/home-adaptive/icon-settings.png">
+          </a>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import '@/assets/css/PagesStyles/adaptive-pages/homemobile.css'
+import '@/mocks/GameModes'
+import GameModes from "@/mocks/GameModes";
+
+export default {
+  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/games-pages/SapergamePage.vue
+++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue
@@ -0,0 +1,78 @@
+<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">
+      <div class="bg"></div>
+      <div class="bg-two"></div>
+      <div class="saper-start">
+        <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 type="number">
+              <ul class="crystals-btns__display">
+                <li v-for="(item, index) in SaperNumbers" :key="index">
+                  <button 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 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 :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">
+            <button class="btn-start">Начать игру</button>
+            <button class="btn-claim">Забрать 15 АР</button>
+          </div>
+          <div class="saper-start__steps btns-style__steps">
+            <ul class="steps-btns__display">
+              <li v-for="(item, index) in SaperNumbers" :key="index">
+                <button v-if="item.steps !== undefined">{{ item.steps }}</button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import ChatComponent from "@/components/ChatComponent.vue";
+import AsideBarElement from "@/components/AsidebarComponent.vue";
+import HeaderElementPage from "@/components/HeaderComponent.vue";
+import '@/assets/css/PagesStyles/games-pages/saper.css'
+import SaperNumbers from "@/mocks/SaperNumbers";
+
+export default {
+  components: {ChatComponent, HeaderElementPage, AsideBarElement },
+  data() {
+    return {
+      SaperNumbers
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- 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' }
    ]
 })