Merge pull request #11 from Swino4ka/Swino4ka

Added ban page, fixed animation

luckydiamond/src/assets/css/ComponentsStyles/asidebar.css

@@ -9,11 +9,31 @@
     display: flex;
     align-items: center;
     flex-direction: column;
+    margin-top: 12%;
 }
 
 .menu__content--jackpot-icon{
-    width: 16vh;
+    width: 10vh;
     height: -4vh;
+    transition: 250ms;
+}
+
+.menu__content--jackpot-icon:hover {
+    width: 11vh;
+    height: -4vh;
+}
+
+.menu__content--chest-icon {
+    margin-left: -1px;
+    transition: 250ms;
+    width: 100%;
+    height: 100%;
+}
+
+.menu__content--chest-icon:hover {
+    margin-left: -5px;
+    height: 125%;
+    width: 125%;
 }
 
 .menu__btn--home {
@@ -54,11 +74,29 @@
 }
 
 .menu__content--cruch-icon {
-    margin-left: 6px
+    margin-left: 6px;
+    transition: 250ms;
+    width: 100%;
+    height: 100%;
+}
+
+.menu__content--cruch-icon:hover {
+    margin-left: 0px;
+    width: 125%;
+    height: 125%;
 }
 
 .menu__content--bomb-icon {
-    margin-left: 6px
+    margin-left: 6px;
+    width: 100%;
+    height: 100%;
+    transition: 250ms;
+}
+
+.menu__content--bomb-icon:hover {
+    margin-left: 0px;
+    width: 125%;
+    height: 125%;
 }
 
 .menu__content--gamemodes {
@@ -76,8 +114,6 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    max-width: 100%;
-    max-height: 100%;
 }
 
 .menu__btn--settings {

luckydiamond/src/assets/css/PagesStyles/BanPage.css

@@ -0,0 +1,29 @@
+.banpage--body {
+    background-color: rgb(17, 14, 32);
+    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
+    padding: 0px;
+    margin: 0;
+    color: #fff;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size:25px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+}
+.banpage--video {
+    border-radius: 10px;
+}
+
+.banpage--block {
+    width: 50%;
+    height: 100%;
+    display: block;
+    background-color: #ef4444;
+    margin: auto;
+    margin-top: 100px;
+    padding-top: 50px;
+    padding-bottom: 100px;
+    border-radius: 10px;
+    box-shadow: 12px 12px 2px 1px rgba(92, 12, 12, 0.2);
+}

luckydiamond/src/assets/css/PagesStyles/home.css

@@ -204,6 +204,7 @@
 
 .cumming_soon_btn:hover {
     background-color: #525252;
+    opacity: 0.75;
 }
 
 .line__btn {
@@ -228,6 +229,7 @@
     content: '\00bb';
     opacity: 0;
     transition: 250ms;
+    right: 20;
   }
 
 .line__btn:hover span:after {
@@ -240,6 +242,10 @@
     padding:11px 11px 11px 22px ;
   }
 
+.line__btn:active {
+    left: 5%;
+  }
+
 .line__btn__jackpot {
     border-radius: 21px;
     background: #FFF;
@@ -274,6 +280,10 @@
     padding:11px 11px 11px 22px ;
   }
 
+  .line__btn__jackpot:active {
+    left: 10%;
+  }
+
 .line__btn--elm {
     color: #000;
     font-size: 38px ;
@@ -322,7 +332,7 @@
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-family: Montserrat Alternates;
-    font-size: 87px;
+    font-size: 80px;
     font-weight: 700;
     text-transform: uppercase;
     padding: 4.5% 2.2%;

luckydiamond/src/components/AsidebarComponent.vue

@@ -9,7 +9,7 @@
           <!-- <div class="fotosloti"><a href="#"><img  src="../assets/icons-menu/slots-icon.svg" ></a></div> -->
           <a href="#" @click="$router.push({ name: 'jackpot' })"><img  class="menu__content--jackpot-icon" src="../assets/icons-menu/jackpot-icon.svg"></a>
           <a href="#" @click="$router.push({ name: 'crash' })"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
-          <a href="#"><img  src="../assets/icons-menu/case-icon.png"></a>
+          <a href="#"><img class="menu__content--chest-icon" src="../assets/icons-menu/case-icon.png"></a>
            <!-- <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a> -->
           <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
         </div>

luckydiamond/src/pages/BanPage.vue

@@ -0,0 +1,20 @@
+<template>
+
+<body class="banpage--body">
+    <div class="banpage--block">
+    <center><h1>Вы были заблокированны на проекте LuckyDiamond</h1></center>
+    <center><iframe class="banpage--video" width="560" height="315" src="https://www.youtube.com/embed/XeoS-zsGVCs?si=zLlKqDQIzvqOzFjW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+</div>
+</body>
+
+</template>
+  
+  
+  <script>
+  import '@/assets/css/PagesStyles/BanPage.css'
+  </script>
+  
+  <style scoped>
+  
+  </style>
+