Skip to content

Commit

Permalink
Merge pull request #77 from AditiPrabhakar/AditiPrabhakar
Browse files Browse the repository at this point in the history 
Issue #57 Improved Styling of gradient color selector.
  • Loading branch information
@Durgesh4993
Durgesh4993 authored Jun 15, 2024
2 parents 7184968 + 9f6a3aa commit 6502113
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 42 deletions.
1 change: 1 addition & 0 deletions PACKABUNCHAS
Submodule PACKABUNCHAS added at 80f510
140 changes: 98 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,22 +67,59 @@
right: 10px;
background-color: rgba(0, 0, 0, 0.4);
padding: 10px;
border-radius: 8px;
border-radius: 30px;
display: none;
flex-direction: column;
color: whitesmoke
color: whitesmoke;
border: 5px solid #5d4d54;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
}

.gradient-selector-container label,
.gradient-selector-container select,
.gradient-selector-container input {
margin: 5px 0;
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;
}

.gradient-button:focus {
outline: none;
.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{
background-color: whitesmoke;
}


.controls-container {
position: absolute;
top: 10px;
Expand All @@ -109,6 +146,26 @@
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{
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 10px;
width: 200px;
height: 35px;
}

.instructions-box {
position: absolute;
top: 50px;
Expand All @@ -121,47 +178,46 @@
max-width: 300px;
z-index: 10;
}
#v {
border-radius: 0px 0px 25px 25px;
}

</style>
</head>
<body>
<div class="content">
<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">Color 1:</label>
<input type="color" id="color1" name="color1" value="#FFEA7E">
<label for="color2">Color 2:</label>
<input type="color" id="color2" name="color2" value="#FFA500">
<label for="direction">Direction:</label>
<select id="direction" name="direction">
<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()">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>
<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>
</div>
<script src="game.js"></script>
<script src="game.js"></script>
</body>
</html>

0 comments on commit 6502113

Please sign in to comment.