new update

Prince-GH · Sep 2, 2024 · 2b723b9 · 2b723b9
1 parent d91b464
commit 2b723b9
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 8 deletions.
diff --git a/170514-843367955.mp4 b/170514-843367955.mp4
diff --git a/ground.png b/ground.png
diff --git a/index.html b/index.html
@@ -7,10 +7,40 @@
     <title>Brain Game</title>
 </head>
 <body>
+    <div class="back-vid">
+        <div class="cloud c1">
+            <div class="cloud-block cloud-block-1"></div>
+            <div class="cloud-block cloud-block-2"></div>
+        </div>    
+        <div class="cloud c2">
+            <div class="cloud-block cloud-block-1"></div>
+            <div class="cloud-block cloud-block-2"></div>
+        </div>    
+        <div class="cloud c3">
+            <div class="cloud-block cloud-block-1"></div>
+            <div class="cloud-block cloud-block-2"></div>
+        </div>    
+        <div class="cloud c3">
+            <div class="cloud-block cloud-block-1"></div>
+            <div class="cloud-block cloud-block-2"></div>
+        </div>    
+        <div class="cloud c1">
+            <div class="cloud-block cloud-block-1"></div>
+            <div class="cloud-block cloud-block-2"></div>
+        </div>    
+        <div class="cloud c2">
+            <div class="cloud-block cloud-block-1"></div>
+            <div class="cloud-block cloud-block-2"></div>
+        </div>    
+        <div class="cloud c3">
+            <div class="cloud-block cloud-block-1"></div>
+            <div class="cloud-block cloud-block-2"></div>
+        </div>    
+    </div>
     <div class="headder">
         <div class="logo">Decode.Me</div>
         <a href="https://github.com/Prince-GH">
-            <img src="github.png" alt="github" width="30px" height="30px">
+            <img src="github.png" alt="github" width="40px" height="40px">
         </a>
     </div>
     <div class="message"></div>
@@ -26,6 +56,8 @@
         <div class="box"><div class="num"></div></div>
         <div class="box"><div class="num"></div></div>
     </div>
+    <footer>
+    </footer>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,6 +1,8 @@
-document.getElementById('startButton').addEventListener('click', startGame);
+const start = document.getElementById('startButton');
+start.addEventListener('click', startGame);
 
 function startGame() {
+    document.getElementById('startButton').style.display = 'none';
     const boxes = document.querySelectorAll('.box');
     const numbers = shuffle(Array.from({ length: 9 }, (_, i) => i + 1));
     const message = document.querySelector('.message');
@@ -26,11 +28,14 @@ function startGame() {
                     currentIndex++;
                     if (currentIndex > 9) {
                         message.textContent = 'Congratulations! You won!';
+                        start.style.display = 'block';
                     }
                 } else {
                     message.textContent = 'Wrong sequence! Try again!';
                     boxes.forEach(b => b.classList.remove('flipped'));
                     currentIndex = 1;
+                    start.textContent = "Try Again";
+                    start.style.display = 'block';
                 }
             });
         });

diff --git a/style.css b/style.css
@@ -21,6 +21,70 @@ body {
     background-color: #f0f0f0;
 }
 
+/* cloud */
+.cloud {
+    position: relative;
+    width: 100px;
+    height: 60px;
+}
+
+.cloud-block {
+    background-color: #FFFFFF;
+    position: absolute;
+}
+
+.cloud-block-1 {
+    width: 50px;
+    height: 30px;
+    top: -10px;
+    left: -20px;
+    background: rgb(176, 210, 238);
+}
+
+.cloud-block-2 {
+    width: 100px;
+    height: 50px;
+    top: 20px;
+    left: 0;
+    background: rgb(142, 198, 235);
+}
+
+.back-vid{
+    width: 100%;
+    height:100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+    position: absolute;
+    top: -160px;
+    gap: 200px;
+    overflow: hidden;
+    & .c1{
+        top:100px
+    }
+    & .c2{
+        top:-100px;
+    }
+    & .c3{
+        top: 280px;
+    }
+    animation: move 20s linear infinite;
+
+}
+
+@keyframes move{
+    from{
+        transform: translateX(0%);
+    }to{
+        transform: translateX(-50%);
+    }
+}
+
+
+
+
+
 .headder{
     width: 100%;
     display: flex;
@@ -49,42 +113,58 @@ body {
 .box {
     width: 100px;
     height: 100px;
-    background-color: #3735c2;
+    background-color: #407aa194;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 5px;
     cursor: pointer;
     color: white;
     font-size: 24px;
-
+    border-radius:5px;
+    box-shadow: inset 0px 0px 20px 2px rgb(110, 163, 247);
 }
 
 .num {
     display: none;
     font-size:60px;
+    color:#134d5c;
 }
 
 .flipped .num {
     display: block;
 }
 
 .flipped {
-    background-color: #FF6347;
+    background-color: #47c5ff7a;
 }
 
 button {
     padding: 10px 20px;
     font-size: 30px;
     letter-spacing:3px;
     cursor: pointer;
-    border-radius: 20px;
-    background: #134d5c;
+    background: #134d5cec;
     border: none;
     color: white;
+    border-radius: 5px;
 }
 
 .message {
     font-size: 30px;
     margin-bottom: 10px;
+    color: #134d5c;
 }
+
+footer{
+    width: 100%;
+    height: 100px;
+    overflow: hidden;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    background-image: url(/ground.png);
+    background-size:auto;
+    background-repeat: repeat-x;
+}