From 5d0f7f82dd189de5aa3a4ac3fbf1af0e2cd7b301 Mon Sep 17 00:00:00 2001
From: Durgesh kumar prajapati <98798977+Durgesh4993@users.noreply.github.com>
Date: Mon, 17 Jun 2024 22:43:07 +0530
Subject: [PATCH] Revert "sidebar created"

---
 index.html | 310 ++++++++++++++++++++++++-----------------------------
 1 file changed, 143 insertions(+), 167 deletions(-)
diff --git a/index.html b/index.html
index 44bb44b..f503b4d 100644
--- a/index.html
+++ b/index.html
@@ -4,73 +4,30 @@
 <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="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" />
+    <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>
-        body, html {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        .navbar {
+        .c {
             position: fixed;
             top: 0;
             right: 0;
-            height: 100%;
-            width: 200px;
+            bottom: 0;
+            left: 0;
             display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-            /* background: linear-gradient(to bottom right, #FFEA7E, #FFA500); */
-            background-color: #333;
-            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-            z-index: 1000;
-        }
-
-        .nav-links {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-        }
-
-        .nav-link {
-            color: white;
-            text-decoration: none;
-            padding: 15px;
-            text-align: center;
-            transition: background-color 0.3s, color 0.3s;
-        }
-
-        .nav-link:hover {
-            background-color: #575757;
-            color: #fff;
-        }
-
-        .nav-icons {
-            display: flex;
-            flex-direction: column;
+            justify-content: center;
             align-items: center;
-            gap: 20px;
-            margin-top: auto;
-            margin-bottom: 20px;
-        }
-
-        .icon-button {
-            padding: 10px;
-            background-color: transparent;
-            border: none;
-            cursor: pointer;
-            font-size: 24px;
-            color: whitesmoke;
+            background-color: #FFEA7E;
+            touch-action: none;
         }
 
-        .icon-button:focus {
-            outline: none;
+        .c canvas {
+            object-fit: contain;
+            max-height: 100%;
+            max-width: 100%;
+            touch-action: none;
         }
 
         .content {
@@ -79,9 +36,9 @@
             justify-content: center;
             align-items: center;
             background: linear-gradient(to bottom right, #FFEA7E, #FFA500);
+            /* Default background gradient */
             overflow: hidden;
             position: relative;
-            padding-right: 200px;
         }
 
         .content canvas {
@@ -89,14 +46,25 @@
             height: auto;
             max-width: 100%;
             max-height: 100%;
+            /* Adjusting to full available height */
             touch-action: none;
         }
 
+        body,
+        html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
         /* Gradient selector styles */
         .gradient-selector-container {
             position: absolute;
-            top: 400px;
-            right: 220px;
+            top: 10px;
+            right: 10px;
             background-color: rgba(0, 0, 0, 0.4);
             padding: 10px;
             border-radius: 30px;
@@ -112,136 +80,144 @@
         .gradient-selector-container select,
         .gradient-selector-container input {
             margin: 5px 0;
-            font-weight: 800;
+            font-weight:800;
         }
-
+      
         .color_input {
-            width: 100%;
-            height: 30px;
-            border-radius: 6px;
-            background-color: #5d4d54;
-            color: #5d4d54;
-            font-size: 12px;
-            font-family: Arial, sans-serif;
-            box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
-            transition: box-shadow 0.3s, background-color 0.3s;
+        width: 30%;
+        display: flex;
+        flex-direction: column ;
+        height: 30px;
+        border-radius: 6px;
+        background-color: #5d4d54;
+        color: #5d4d54;
+        font-size: 12px;
+        font-family: Arial, sans-serif;
+        box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
+        transition: box-shadow 0.3s, background-color 0.3s;
         }
 
         .gradient-selector-container select {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            padding: 0.5em;
-            padding-left: 0.5em;
-            border: 4px solid #5d4d54;
-            border-radius: 6px;
-            font-weight: 520;
-            font-family: Verdana, Geneva, Tahoma, sans-serif;
-            font-size: 15px;
-            color: #5d4d54;
-            background-color: #dfdccfe2;
-        }
-
-        select:hover {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        padding: 0.5em;
+        /* Add padding for the text */
+        padding-left: 0.5em;
+        /* Add a border for the placeholder */
+        border: 4px solid #5d4d54;
+        border-radius: 6px;  
+        font-weight:520;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 15px;
+        border-radius: 10px;
+        color: #5d4d54; 
+        background-color: #dfdccfe2; 
+        }
+            
+        select:hover{
             background-color: whitesmoke;
         }
 
-        .instructions-box {
+        
+        .controls-container {
             position: absolute;
-            top: 400px;
-            right: 220px;
-            background-color: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 20px;
+            top: 10px;
+            right: 10px;
+            display: flex;
+            align-items: center;
+            background-color:rgb(126, 198, 181);
+            padding: 10px;
             border-radius: 8px;
-            display: none;
-            max-width: 300px;
-            z-index: 10;
         }
 
+        .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 {
+            outline: none;
+        }
+        
+        #v{
+            border-radius: 0px 0px 25px 25px;
+        }
+        
         .gradient-selector-container button {
             font-family: Verdana, Geneva, Tahoma, sans-serif;
         }
 
-        .gradbtn {
+        .gradbtn{
             font-family: Verdana, Geneva, Tahoma, sans-serif;
             border-radius: 10px;
-            width: 100%;
+            width: 200px;
             height: 35px;
         }
-        .navbar h1 a{
+
+        .instructions-box {
+            position: absolute;
+            top: 50px;
+            right: 10px;
+            background-color: rgba(0, 0, 0, 0.8);
             color: white;
-            font-size: 20px;
-            margin-top: 20px;
-            cursor: pointer;
+            padding: 20px;
+            border-radius: 8px;
+            display: none;
+            max-width: 300px;
+            z-index: 10;
         }
+
     </style>
 </head>
-
 <body>
-    <nav class="navbar">
-        <h1><a href="/PACKABUNCHAS/home.html">PACKABUNCHAS</a></h1>
-        <div class="nav-links">
-            <a href="home.html" class="nav-link">Home</a>
-            <!-- <a href="#services" class="nav-link">Services</a> -->
-            <a href="https://github.com/ChromeGaming/PACKABUNCHAS" target="_blank" class="nav-link">About</a>
-            <a href="https://www.linkedin.com/in/durgesh4993/" target="_blank" class="nav-link">Contact</a>
-            <a href="/PACKABUNCHAS/home.html#modes" target="_blank" class="nav-link">Modes</a>
-            <a href="/PACKABUNCHAS/home.html#leaderboard" target="_blank" class="nav-link">Gameplay</a>
-        </div>
-        <div class="nav-icons">
-            <div class="icon-button" onclick="toggleInstructionsBox()"><i class="fa-regular fa-lightbulb"></i></div>
-            <button class="icon-button" onclick="toggleGradientSelector()">🎨</button>
-        </div>
-    </nav>
-
-    <div class="content">
-        <canvas id="v" width="1080" height="1920"></canvas>
-        <canvas id="v" width="1080" height="1920"></canvas>
-
-        <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">
-            <label for="color2" class="color">Color 2:</label>
-            <input type="color" id="color2" name="color2" value="#FFA500" class="color_input">
-            <label for="direction" class="direction">Direction:</label>
-            <select id="direction" class="custom-select" name="direction">
-                <option disabled selected value="select direction">Select direction</option>
-                <option value="to bottom right">To Bottom Right</option>
-                <option value="to bottom left">To Bottom Left</option>
-                <option value="to top right">To Top Right</option>
-                <option value="to top left">To Top Left</option>
-                <option value="to bottom">To Bottom</option>
-                <option value="to top">To Top</option>
-                <option value="to left">To Left</option>
-                <option value="to right">To Right</option>
-            </select>
-            <button onclick="applyGradient()" class="gradbtn">Apply Gradient</button>
-        </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 their direction by double-clicking on them.</li>
-                <li>Adjust the puzzle pieces to completely occupy the given space.</li>
-                <li>Have fun!</li>
-            </ul>
-        </div>
+<div class="content">
+    <canvas id="v" width="1080" height="1920"></canvas>
+    <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>
-    <script>
-        function toggleGradientSelector() {
-            const gradientSelector = document.getElementById('gradientSelectorContainer');
-            gradientSelector.style.display = gradientSelector.style.display === 'none' ? 'flex' : 'none';
-        }
-
-        function toggleInstructionsBox() {
-            const instructionsBox = document.getElementById('instructionsBox');
-            instructionsBox.style.display = instructionsBox.style.display === 'none' ? 'block' : 'none';
-        }
-    </script>
-    <script src="game.js"></script>
-
+    <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">
+        <label for="color2" class="color">Color 2:</label>
+        <input type="color" id="color2" name="color2" value="#FFA500" class="color_input">
+        <label for="direction" class="direction">Direction:</label>
+        <select id="direction" class="custom-select" name="direction">
+            <option disabled selected value="select direction">Select direction</option>
+            <option value="to bottom right">To Bottom Right</option>
+            <option value="to bottom left">To Bottom Left</option>
+            <option value="to top right">To Top Right</option>
+            <option value="to top left">To Top Left</option>
+            <option value="to bottom">To Bottom</option>
+            <option value="to top">To Top</option>
+            <option value="to left">To Left</option>
+            <option value="to right">To Right</option>
+        </select>
+        <button onclick="applyGradient()" class="gradbtn">Apply Gradient</button>
+    </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>
\ No newline at end of file
