working on jackpot page

luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css

@@ -2,12 +2,46 @@
     z-index: 1;
     /* margin-left: 5%; */
     border-radius: 20px;
-    background: #22252F;
+    background: #1D223E;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     width: 42vh;
     /* height: 480px; */
     height: 32vh;
+    border: 1px solid #262C55;
     /* margin-top: 2.6%; */
+    margin: 2.6%;
+}
+
+.jackpot-loading-bar {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+
+    /* height: 480px; */
+    height: 100%;
+    border: 1px solid #262C55;
+    /* margin-top: 2.6%; */
+    /* margin: 2.6%; */
+}
+
+.jackpot-game {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    /* background: #1D223E; */
+    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
+    width: 69%;
+    /* height: 480px; */
+    height: 94%;
+    /* border: 1px solid #262C55; */
+    margin-top: 2.6%;
+}
+
+.jackpot-main-elements {
+    z-index: 1;
 }
 
 .jackpot-start__content p {
@@ -29,6 +63,7 @@
     display: flex;
     flex-direction: column;
 }
+
 .jackpot-start__btns button {
     width: 100%;
     padding: 12px;
@@ -41,3 +76,63 @@
     font-family: Inter;
     font-size: 16px;
 }
+
+.bank-container {
+    display: flex;
+    align-items: center;
+    /* background-color: #000066; */
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    font-family: Arial, sans-serif; /* Choose your font */
+}
+
+.shield img {
+    width: 35px; /* Adjust based on your shield size */
+    height: auto;
+    margin-left: 10px;
+}
+
+.bank-info {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.bank-value {
+    font-size: 24px; /* Large text size */
+    font-weight: bold; /* Make the number bold */
+}
+
+.bank-name {
+    font-size: 14px; /* Smaller text size for 'БАНК' */
+}
+
+.progress-bar {
+    width: 95%;
+    background-color: #D9D9D9; /* Navy blue background */
+    border-radius: 10px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+    margin-left: 2vh;
+    margin-bottom: 3%;
+}
+
+.progress {
+    height: 40px;
+    background-color: #E13F3F; /* Red for the progress */
+    border-radius: 10px ; /* Rounded corners on the left side */
+    line-height: 40px; /* Same as height to vertically center text */
+    color: white;
+    text-align: start; 
+    text-indent: 20px;
+    padding-right: 10px; /* Add some padding to the right of the text */
+    transition: width 0.25s ease-in-out;
+}
+
+
+@media (max-width: 1415px) {
+    .padding-elements-jackpot {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

luckydiamond/src/assets/css/global.css

@@ -203,11 +203,11 @@ button {
 .jackpot {
     display: flex;
     grid-area: jackpot;
-    height: 95%;
+    /* height: 95%;
     border-radius: 3.125rem;
     background: #17181C;
     box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
-    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
 }
 
 .about {

luckydiamond/src/pages/games-pages/JackpotPage.vue

@@ -27,37 +27,115 @@
   </div> -->
     <!-- <section class="crash-game"> -->
 
-    <div class="jackpot-start">
+    <!-- <div class="jackpot-main-elements"> -->
-      <div class="jackpot-start__content title-saper padding-elements-jackpot">
+    <!-- <div class="bootstrap-wrapper">
-        <h2>Джекпот</h2>
+        <div class="container">
-        <p>Больше ставь, больше побеждай!</p>
+          <div class="row hidden-sm-down">
+            <div class="col-md-1">.</div>
+            <div class="col-md-1">.col-</div>
+            <div class="col-md-1">.col-</div>
+            <div class="col-md-1">.col-</div>
+          </div>
+        </div>
+      </div> -->
+    <section class="jackpot">
+      <div class="jackpot-start">
+        <div
+          class="jackpot-start__content title-saper padding-elements-jackpot"
+        >
+          <h2>Джекпот</h2>
+          <p>Больше ставь, больше побеждай!</p>
 
-        <div class="saper-start__choises diamonds diamonds-input__margin">
+          <div class="saper-start__choises diamonds diamonds-input__margin">
-          <h3>Сумма депозита</h3>
+            <h3>Сумма депозита</h3>
 
-          <div class="diamonds__choises">
+            <div class="diamonds__choises">
-            <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+              <img
-            <input v-model="amountDeposit" type="number" id="diamonds-input">
+                class="diamond-icon"
-            <div class="diamonds__btns btn-style__diamonds">
+                src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
-              <ul class="diamonds-btns__display">
+              />
-                <li v-for="(item, index) in JackpotNumbers" :key="index">
+              <input
-                  <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>
+                v-model="amountDeposit"
-                </li>
+                type="number"
-              </ul>
+                id="diamonds-input"
+              />
+              <div class="diamonds__btns btn-style__diamonds">
+                <ul class="diamonds-btns__display">
+                  <li v-for="(item, index) in JackpotNumbers" :key="index">
+                    <button
+                      @click="clickedBtnChoice(index, item.diamonds)"
+                      :class="{
+                        'btn-click': clickedBtn === index,
+                        [index]: clickedBtn === index,
+                      }"
+                      :id="item.diamonds === 'max' ? 'max-button' : null"
+                      v-if="item.diamonds !== undefined"
+                    >
+                      {{ item.diamonds }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="jackpot-start__btns">
+            <div class="error-block" v-if="ErrorClick">
+              <h2>Ошибка при заполнении</h2>
+            </div>
+            <button
+              class="btn-start"
+              :class="{ 'animate-start-btn': ErrorClick }"
+              @click="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>
+      </div>
+      <!-- <div><h1>gfdgfd</h1></div>
+      <div><h1>gfdgfd</h1></div>
+       -->
+      <div class="jackpot-game">
+        <div class="bootstrap-wrapper">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-10">
+                <div class="jackpot-loading-bar">
+                  <div class="bank-container">
+                    <div class="bank-info">
+                      <div class="bank-value">3500</div>
+                      <div class="bank-name">БАНК</div>
+                    </div>
+                    <div class="shield">
+                      <img
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                        alt="Shield"
+                      />
+                    </div>
+                  </div>
+                  <!-- <progress class="progress is-primary" value="39" max="100">
+                    15%
+                  </progress> -->
+                  <div class="progress-bar">
+                    <div class="progress" style="width: 70%">15.00 СЕК</div>
+                  </div>
+                
+                  
+
+                </div>
+              </div>
+              <div class="col-md-2">
+                <div class="jackpot-loading-bar"></div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="jackpot-start__btns">
-          <div class="error-block" v-if="ErrorClick">
-            <h2>Ошибка при заполнении</h2>
-          </div>
-          <button class="btn-start" :class="{ 'animate-start-btn' : ErrorClick }" @click="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>
-    </div>
+    </section>
-    <h1>gfdgfd</h1>
+
+    <!-- </div> -->
     <!-- </section> -->
 
     <!-- <div class="crash-content"> -->
@@ -78,11 +156,16 @@ import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
 import "@/assets/css/PagesStyles/games-pages/jackpot.css";
 import "@/assets/css/global.css";
 import JackpotNumbers from "@/mocks/JackpotNumbers";
-
+// import ProgressBar from "vue-bulma-progress-bar";
 
 // import '@/assets/css/PagesStyles/games-pages/jackpot.css'
 export default {
-  components: { HeaderComponent, AsideBarComponent, ChatComponent },
+  components: {
+    HeaderComponent,
+    AsideBarComponent,
+    ChatComponent,
+    // ProgressBar,
+  },
   data() {
     return {
       JackpotNumbers,
@@ -90,14 +173,19 @@ export default {
       //   ErrorClick: false,
       //   ErrorJoin: false,
       //   balance: 0,
-        amountDeposit: 0,
+      value: 0,
+      max: 100,
+      amountDeposit: 0,
+    
       //   crashObject: '',
       //   textError: '',
       //   startGame: false,
       //   offBtn: false
     };
   },
+  methods: {
    
+  },
   watch: {
     amountDeposit(DepositCount) {
       if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) {