Skip to content

Commit

Permalink
Merge pull request #87 from JagjeetChauhan/add-navbar
Browse files Browse the repository at this point in the history 
sidebar created
  • Loading branch information
@Durgesh4993
Durgesh4993 authored Jun 17, 2024
2 parents 6502113 + 1c593ed commit dbbeba9
Showing 1 changed file with 167 additions and 143 deletions.
310 changes: 167 additions & 143 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,73 @@
<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>
.c {
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}

.navbar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 200px;
display: flex;
justify-content: center;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: #FFEA7E;
touch-action: none;
/* 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;
}

.c canvas {
object-fit: contain;
max-height: 100%;
max-width: 100%;
touch-action: none;
.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;
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;
}

.icon-button:focus {
outline: none;
}

.content {
Expand All @@ -36,35 +79,24 @@
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 {
width: auto;
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: 10px;
right: 10px;
top: 400px;
right: 220px;
background-color: rgba(0, 0, 0, 0.4);
padding: 10px;
border-radius: 30px;
Expand All @@ -80,144 +112,136 @@
.gradient-selector-container select,
.gradient-selector-container input {
margin: 5px 0;
font-weight:800;
font-weight: 800;
}

.color_input {
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;
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;
}

.gradient-selector-container select {
-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{
-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 {
background-color: whitesmoke;
}


.controls-container {
.instructions-box {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
background-color:rgb(126, 198, 181);
padding: 10px;
top: 400px;
right: 220px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
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: 200px;
width: 100%;
height: 35px;
}

.instructions-box {
position: absolute;
top: 50px;
right: 10px;
background-color: rgba(0, 0, 0, 0.8);
.navbar h1 a{
color: white;
padding: 20px;
border-radius: 8px;
display: none;
max-width: 300px;
z-index: 10;
font-size: 20px;
margin-top: 20px;
cursor: pointer;
}

</style>
</head>

<body>
<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>
<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>
<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>
<script src="game.js"></script>
<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>

</body>

</html>

0 comments on commit dbbeba9

Please sign in to comment.