Skip to content

Commit

Permalink
Merge branch 'main' into w1
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayush-848
ayush-848 authored Jul 25, 2024
2 parents 9f4c9d9 + 6e5af4e commit 8fa3830
Show file tree
Hide file tree
Showing 12 changed files with 1,445 additions and 503 deletions.
201 changes: 177 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<script src="./js/emoji.js"></script>
<title>Dots & Boxes Game</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&family=Rancho&display=swap');
.sticky-button {
/* position: fixed;
top: 50%;
Expand All @@ -34,13 +35,16 @@
border-radius: 50%;
font-size: 16px;
cursor: pointer; */
font-family: "Rancho", cursive;
font-weight: 400;
font-style: normal;


transform: rotate(-90deg);
padding: 12px;

position: fixed;
left: 0px;
font-family: verdana;

font-size: 15px;
color: rgb(255, 255, 255);
background: rgb(245, 146, 2);
Expand Down Expand Up @@ -72,7 +76,7 @@
.form-content {
position: relative;
cursor: move;
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #ffecd2);
background: lightblue;
padding: 20px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
Expand All @@ -82,7 +86,7 @@
overflow-y: auto;
color: #333;
border: 5px solid transparent;
border-image: linear-gradient(45deg, #ff9a9e, #fad0c4, #ffecd2, #ff9a9e);
border-image: lightblue;
border-image-slice: 1;
animation: formAppear 0.5s ease-out;
}
Expand Down Expand Up @@ -196,6 +200,12 @@
.stars label:hover {
transform: scale(1.2) rotate(15deg);
}
a{
font-family: "Rancho", cursive;
font-weight: 400;
font-style: normal;
font-size: 25px;
}

#star-1:hover ~ .content .stars .star-1,
#star-1:checked ~ .content .stars .star-1,
Expand Down Expand Up @@ -236,6 +246,35 @@
from { transform: scale(1); }
to { transform: scale(1.1); }
}
/* <---Class in instructions section---> */
.Font{

font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;
padding:10px;



}
.button-container{
font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;
}
.de{
font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;

}
select{
font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;

}

.footer {
border-top: 2px dashed #ff6b6b;
Expand All @@ -253,7 +292,9 @@
font-size: 14px;
font-weight: 600;
color: #333;
font-family: 'Comic Sans MS', cursive, sans-serif;
font-family: "Rancho", cursive;
font-weight: 400;
font-style: normal;
}

input[type="radio"] {
Expand Down Expand Up @@ -295,6 +336,9 @@
}

.button {
font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;
background: linear-gradient(45deg, #4ecdc4, #45b7aa);
color: #fff;
border: none;
Expand All @@ -304,7 +348,7 @@
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
font-family: 'Comic Sans MS', cursive, sans-serif;

}

.button:hover {
Expand Down Expand Up @@ -366,6 +410,19 @@
user-select: none;
cursor: grabbing;
}
.form-item{
font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;
align-self: center;
}
.main-form{
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;

}

/* Responsive adjustments */
@media (max-width: 480px) {
Expand All @@ -385,6 +442,9 @@
.button {
font-size: 14px;
padding: 8px 12px;
font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;
}
}
.button1 {
Expand All @@ -393,6 +453,9 @@
padding: 12px;
height: 56.5px;
margin-top: 6.4px;
font-family: "Arsenal SC", sans-serif;
font-weight: 700;
font-style: normal;
}

.circle {
Expand All @@ -414,7 +477,7 @@
pointer-events: none;
z-index: 9999;
}

@media (max-width : 768px){
.circle-container{
display: none;
Expand All @@ -427,20 +490,27 @@
overflow: visible;
gap: 30px;
top: 25vh;

}
body{
overflow: visible !important;

}
.settings .form{
padding: 1rem 6rem;
margin: 4px 13rem;
left: 15%;
position: relative;
padding: 300px;
margin: auto;
left: 15%;
position: relative;
}
label{
outline: none;
border:none;

}
.settings{
top: -33px;
}

}
</style>
</head>
Expand All @@ -463,7 +533,7 @@
<li><a href="./pages/about.html">About Us</a></li>
<li><a href="./pages/FAQs.html">FAQs</a></li>
<li><a href="./pages/contributors.html">Contributors</a></li>
<li><a href="./pages/game.html" target="_blank">Let's Go</a></li>
<li><a href="./pages/game.html">Let's Go</a></li>
</ul>
<div class="hamburger">
<i class="fas fa-bars"></i>
Expand Down Expand Up @@ -510,6 +580,7 @@ <h5>Feedback Form</h5>
<label for="star-5" class="star-5 fas fa-star"></label>
</div>
</div>

<div class="footer">
<span class="text"></span>
<span class="numb"></span>
Expand Down Expand Up @@ -599,21 +670,100 @@ <h3>Thank You!</h3>
}
</script>


<div class="PlayerTextBox" style="display: none;">
<h1 class="heading"
style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:rgb(52, 76, 100);">
▂ ▄ █ <span >Enter player names!!!</span> █ ▄ ▂
</h1>

<div class="playerNameField" style="display: none;">
<label for="player1" >Player 1 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player1" maxlength="30" value="Player 1"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player2" >Player 2 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player2" maxlength="30" value="Player 2"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player3" >Player 3 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player3" maxlength="30" value="Player 3"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player4" >Player 4 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player4" maxlength="30" value="Player 4"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player5" >Player 5 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player5" maxlength="30" value="Player 5"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player6" >Player 6 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player6" maxlength="30" value="Player 6"/>
</div>

<button id="true-start-btn" class="true-start-btn" onclick="startGame()">START</button>


</div>

<style>
.settings .info {
display: flex;
flex-direction: column;
gap: 1.4rem;
width: 100%;
max-width: 550px;
padding: 1rem;
font-size: 20px;
padding-left: 7%;
}

.settings .PlayerTextBox {
display: flex;
flex-direction: column;
gap: 1.4rem;
width: 100%;
max-width: 550px;
padding: 1rem;
font-size: 20px;
padding-left: 7%;
}

</style>

<div class="form" id="instructions">

<div class="main-form">
<div class="form">

<!-- <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1> -->
<h1 class="heading">▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂</h1>
<h3 class="instructions-heading">Instructions</h3>
<p class="instructions">
<div class="Font">
<h3 class="instructions-heading" style="font-size: 35px ;">Instructions</h3>
<p class="instructions" style="font-size: 20px;">
1. Select the number of rows, columns and players. <br />
2. The player who has maximum number of boxes on board is the
winner. <br />
3. Players will switch after every turn. But the player who has
filled the last box, will get one extra chance consecutively. <br />
</p>
<a href="./pages/howtoplay.html" class="button">Read Detailed Instructions</a>
</div>
<div class="form">
<div class="right-background">
<a href="./pages/howtoplay.html" class="de">Read Detailed Instructions</a>

</div>
<div class="form" style="border-radius: 30px; width:500px; height:500px; display: flex; justify-content: center; align-content: center;">
<div class="right-background" style="display: flex; flex-flow: column; margin:auto; padding:30px;">
<div class="form-item">
<label for="theme-select">Select Theme:</label>
<select id="theme-select">
Expand Down Expand Up @@ -643,12 +793,15 @@ <h3 class="instructions-heading">Instructions</h3>
</div>

<div class="button-container">
<a href="./pages/game.html" target="_blank" class="start-btn button1" id="start-btn" aria-label="START">

<a href="./pages/game.html" style=" font-family: Arsenal SC, sans-seri;font-weight: 700;font-style: normal;" class="start-btn button1" id="start-btn" aria-label="START">

START
</a>
</a> -->
<button class="ready-btn" onclick="showPlayerTextBox()">READY</button>
<button class="reset-btn button1" id="reset-btn">RESET</button>
<button id="music-toggle" onclick="toggleMusic()">
Music Off
<button id="music-toggle" style=" font-family: Arsenal SC, sans-seri;font-weight: 700;font-style: normal;" onclick="toggleMusic()">
MUSIC OFF
</button>
</div>
</div>
Expand Down Expand Up @@ -695,10 +848,10 @@ <h3 class="instructions-heading">Instructions</h3>
var button = document.getElementById("music-toggle");
if (isPlaying) {
audio.pause();
button.textContent = "Music On";
button.textContent = "MUSIC ON";
} else {
audio.play();
button.textContent = "Music Off";
button.textContent = "MUSIC OFF";
}
isPlaying = !isPlaying;
}
Expand All @@ -707,7 +860,7 @@ <h3 class="instructions-heading">Instructions</h3>
var audio = document.getElementById("background-music");
audio.play();
var button = document.getElementById("music-toggle");
button.textContent = "Music Off";
button.textContent = "MUSIC OFF";
};
</script>

Expand Down
Loading

0 comments on commit 8fa3830

Please sign in to comment.