Merge branch 'main' into AditiPrabhakar

ChromeGaming · Jun 13, 2024 · 9f6a3aa · 9f6a3aa
2 parents a73a531 + 7184968
commit 9f6a3aa
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 12 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404:Page not found</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
+</head>
+<style>
+    body{
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background: linear-gradient(to bottom right, #FFEA7E, #FFA500); /* Default background gradient */
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-size: cover;
+        height: 100vh;
+        overflow: hidden;
+    }
+    .center {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 90vh;
+
+    }
+    .pic{
+        width: 550px;
+        height: 550px;
+        animation: updown 2s ease-in-out infinite alternate;
+        transition: all 0.3s ease-in-out;
+    }
+    .pic:hover{
+        filter: drop-shadow(0 0 10px #fffdef);
+    }
+    @keyframes updown {
+        from{
+            transform: translateY(0);
+        }
+        to{
+            transform: translateY(20px);
+        }
+    }
+    a{
+        text-decoration: none;
+        color: #353535;
+    }
+    .btn{
+        position: absolute;
+        padding: 10px 20px;
+        background-color: #32ddaac9;
+        border-radius: 5px;
+        font-size: 20px;
+        font-weight: bold;
+        border: none;
+        top: 600px;
+    }
+    @media screen and (max-width: 600px) {
+        .pic{
+            width: 300px;
+            height: 300px;
+        }
+        .btn{
+            top: 500px;
+        }
+    }
+</style>
+<body>
+    <div class="center">
+        <img src="404pic2.png" alt="404 pic" class="pic">
+        <button class="btn"><a href="index.html">Home</a></button>
+    </div>
+    <script src="game.js"></script>
+</body>
+</html>
diff --git a/404pic2.png b/404pic2.png
diff --git a/game.js b/game.js
@@ -3914,3 +3914,10 @@ function applyGradient() {
 	document.querySelector('.content').style.background = `linear-gradient(${direction}, ${color1}, ${color2})`;
 	toggleGradientSelector(); // Close the selector container after applying the gradient
 }
+
+// Function to display instructions 
+
+document.querySelector('.instructions').addEventListener('click', () => {
+	const instructionsBox = document.getElementById('instructionsBox');
+	instructionsBox.style.display = instructionsBox.style.display === 'none' || instructionsBox.style.display === '' ? 'block' : 'none';
+});
diff --git a/index.html b/index.html
@@ -1,9 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <title>PACKABUNCHAS</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
         .c {
             position: fixed;
@@ -30,7 +35,8 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            background: linear-gradient(to bottom right, #FFEA7E, #FFA500); /* Default background gradient */
+            background: linear-gradient(to bottom right, #FFEA7E, #FFA500);
+            /* Default background gradient */
             overflow: hidden;
             position: relative;
         }
@@ -39,11 +45,13 @@
             width: auto;
             height: auto;
             max-width: 100%;
-            max-height: 100%; /* Adjusting to full available height */
+            max-height: 100%;
+            /* Adjusting to full available height */
             touch-action: none;
         }
 
-        body, html {
+        body,
+        html {
             margin: 0;
             padding: 0;
             height: 100%;
@@ -57,7 +65,7 @@
             position: absolute;
             top: 10px;
             right: 10px;
-            background-color: rgba(0,0,0,0.4);
+            background-color: rgba(0, 0, 0, 0.4);
             padding: 10px;
             border-radius: 30px;
             display: none;
@@ -74,7 +82,7 @@
             margin: 5px 0;
             font-weight:800;
         }
-
+      
         .color_input {
         width: 30%;
         display: flex;
@@ -110,16 +118,33 @@
         select:hover{
             background-color: whitesmoke;
         }
-
-        .gradient-button {
+
+
+        .controls-container {
             position: absolute;
             top: 10px;
             right: 10px;
+            display: flex;
+            align-items: center;
+            background-color:rgb(126, 198, 181);
+            padding: 10px;
+            border-radius: 8px;
+        }
+
+        .instructions {
+            cursor: pointer;
+            font-size: 24px;
+            color: black;
+            margin-right: 10px;
+        }
+
+        .gradient-button {
             padding: 10px;
             background-color: transparent;
             border: none;
             cursor: pointer;
             font-size: 24px;
+            color: whitesmoke;
         }
 
         .gradient-button:focus {
@@ -141,12 +166,29 @@
             height: 35px;
         }
 
+        .instructions-box {
+            position: absolute;
+            top: 50px;
+            right: 10px;
+            background-color: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            display: none;
+            max-width: 300px;
+            z-index: 10;
+        }
+
     </style>
 </head>
 <body>
 <div class="content">
     <canvas id="v" width="1080" height="1920"></canvas>
-    <button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
+    <canvas id="v" width="1080" height="1920"></canvas>
+    <div class="controls-container">
+        <div class="instructions"><i class="fa-regular fa-lightbulb"></i></div>
+        <button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
+    </div>
     <div class="gradient-selector-container" id="gradientSelectorContainer">
         <label for="color1" class="color">Color 1:</label>
         <input type="color" id="color1" name="color1" value="#FFEA7E" class="color_input">
@@ -166,8 +208,16 @@
         </select>
         <button onclick="applyGradient()" class="gradbtn">Apply Gradient</button>
     </div>
-
-</div>
+    <div class="instructions-box" id="instructionsBox">
+        <h2>Game Instructions</h2>
+        <p>Welcome to the game! Here are the instructions:</p>
+        <ul>
+            <li>Drag the puzzle pieces.</li>
+            <li>You can change thier direction by double clicking on it.</li>
+            <li>Adjust the puzzle pieces to completely occupy the given space.</li>
+            <li>Have fun!</li>
+        </ul>
+    </div>
 <script src="game.js"></script>
 </body>
-</html>
+</html>