CASINOHACK

index.html

@@ -60,6 +60,12 @@
   </form>
     <div class="posts"><p>ловим текст сюда</p></div>
   </div>
-  <script src="script/js.js"></script>
-</body>
+  
+  <div class="casino">
+    <p class="casino_text">ВЗЛАМЫВАЕМ КАЗИНО</p>
+    <p class="cash"> </p>
+    <div class="casino_bar"><div class="percent">0</div><div class="casino__success"></div>
+    <button class="getmoney">забрать деньги</button>
+  </div>
+</body><script src="script/js.js"></script>
 </html>

script/js.js

@@ -0,0 +1,39 @@
+const button1 = document.querySelector('.getmoney');
+const succesBar = document.querySelector('.casino__success');
+const overlay = document.querySelector('.casino');
+const perc = document.querySelector('.percent');
+const cash = document.querySelector('.cash');
+cash.textContent="НАЧИНАЕМ"
+const hidder = function() {
+    overlay.classList.add('hidden');
+}
+button1.addEventListener('click', hidder)
+
+let i =0;
+const plus = function () {
+    i=i+1;
+    succesBar.setAttribute('style', `width:${i}%`)
+    if (i>100) {i=100}
+    perc.textContent=`${i}%`
+    cash.textContent=`Выкачано ${3792300/100*i}$ из 3792300$`
+}
+let timer = setInterval(plus, 500);
+
+
+// const progressBar = function () {
+//     for (let k=0; k<=100; k++) 
+//     {succesBar.setAttribute('style', `width:${k}%`)};
+//     }
+
+// setTimeout(()=>{for (let k=0; k<=100; k=k+1) {succesBar.setAttribute('style', `width:${k}%`)}}, 1000)
+// const test = function(i) {
+//     succesBar.setAttribute('style', `width:${i}%`)
+// }
+
+// const progressBar = function (i) {
+    
+//     for (i; i<=100; i++) {
+//         setInterval(test, 1000);
+//     }
+// }
+// progressBar(0)

styles/style.css

@@ -132,3 +132,68 @@ ul {
     margin-right: auto;
     text-align: center;
 }
+.casino {
+    position: absolute;
+    right: 35%;
+    top: 15%;
+    width: 550px;
+    height: 350px;
+    background-color: #636262;
+    border-radius: 15px;
+    border: 3px solid white;
+    padding-bottom: 10px;
+}
+.casino_text {
+    text-align: center;
+    font-size: 22px;
+    font-weight: 700;
+}
+.casino_bar {
+    width: 450px;
+    height: 30px;
+    background-color: white;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 90px;
+}
+.casino__success {background-color: greenyellow;
+width: 0%;
+height: 100%;
+}
+.getmoney {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 70px;
+    width: 200px;
+    height: 50px;
+    border-radius: 5px;
+    border: none;
+    background-color: black;
+    color: white;
+    font-size: 20px;
+}
+.getmoney:hover {
+    background-color: rgba(0, 0, 0, 0.685);
+}
+.hidden {
+    display: none;
+}
+.percent {
+    left: 50%;
+    text-align: center;
+    position: absolute;
+    display: block;
+    font-weight: 600;
+    font-size: 25px;
+}
+.cash {
+    font-weight: 500;
+    text-align: center;
+    width: 250px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #afacac;
+    border-radius: 10px;
+    padding: 10px;
+}