Skip to content

Commit

Permalink
Merge pull request #450 from PankajR007/pankaj-patch
Browse files Browse the repository at this point in the history
added back button to game.html and FAQ page
  • Loading branch information
ayush-t02 authored Jul 3, 2024
2 parents 8591dc8 + 05954e2 commit f43f1d0
Show file tree
Hide file tree
Showing 5 changed files with 376 additions and 291 deletions.
113 changes: 78 additions & 35 deletions pages/FAQs.html
Original file line number Diff line number Diff line change
@@ -1,94 +1,137 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->

<link rel="icon" href="../assets/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../styles/FAQs.css">
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../styles/FAQs.css" />
<title>FAQs</title>




<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
.attribution {
font-size: 11px;
text-align: center;
}

.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>

<body>

<div class="bottom-background">
<video autoplay muted loop >
<source src="../assets/videos/FAQ.mp4">
</video>
</div>
<!-- Your existing content -->
<div class="bottom-background">
<video autoplay muted loop>
<source src="../assets/videos/FAQ.mp4" />
</video>
</div>
<!-- Your existing content -->

<!--<img class="background" src="assets/images/background-pattern-desktop.svg">-->
<div class="faqcontainer">
<h1><img src="../assets/images/icon-star.svg">FAQs</h1>
<h1><img src="../assets/images/icon-star.svg" />FAQs</h1>

<div class="question">
<details>
<summary class = "drop"><img src="../assets/images/icon-plus.svg" class = "images"> How do I win the game?
<summary class="drop">
<img src="../assets/images/icon-plus.svg" class="images" /> How do I
win the game?
</summary>
<p>The objective is to capture more boxes than your opponent. Each box you complete by drawing lines between adjacent dots scores you a point. The player with the most points when all boxes are claimed wins the game.
<p>
The objective is to capture more boxes than your opponent. Each box
you complete by drawing lines between adjacent dots scores you a
point. The player with the most points when all boxes are claimed
wins the game.
</p>
</details>
</div>

<div class="question">
<details>
<summary class = "drop2"><img src="../assets/images/icon-plus.svg" class = "images2">How do I set up the game?
<summary class="drop2">
<img src="../assets/images/icon-plus.svg" class="images2" />How do I
set up the game?
</summary>
<p>Choose your desired grid size to customize the game's difficulty. Start by connecting the dots on the grid, taking turns with your opponent.
<p>
Choose your desired grid size to customize the game's difficulty.
Start by connecting the dots on the grid, taking turns with your
opponent.
</p>
</details>
</div>

<div class="question">
<details>
<summary class = "drop3"><img src="../assets/images/icon-plus.svg" class = "images3">What happens if I complete a box?
<summary class="drop3">
<img src="../assets/images/icon-plus.svg" class="images3" />What
happens if I complete a box?
</summary>
<p>Completing a box by drawing its final line scores you a point and grants you an extra turn. This strategic element adds depth to gameplay.

<p>
Completing a box by drawing its final line scores you a point and
grants you an extra turn. This strategic element adds depth to
gameplay.
</p>
</details>
</div>

<div class="question">
<details>
<summary class = "drop4"><img src="../assets/images/icon-plus.svg" class = "images4">When does the game end?
<summary class="drop4">
<img src="../assets/images/icon-plus.svg" class="images4" />When
does the game end?
</summary>
<p>The game ends when all boxes on the grid have been claimed by drawing lines. At this point, the player with the highest score, based on the number of boxes captured, wins.
<p>
The game ends when all boxes on the grid have been claimed by
drawing lines. At this point, the player with the highest score,
based on the number of boxes captured, wins.
</p>
</details>
</div>
<div class="question">
<details>
<summary class = "drop5"><img src="../assets/images/icon-plus.svg" class = "images5">Is there a strategy involved in playing this game?

<summary class="drop5">
<img src="../assets/images/icon-plus.svg" class="images5" />Is there
a strategy involved in playing this game?
</summary>
<p>Yes, strategic line selection is crucial. Thinking ahead to maximize the number of boxes you can capture while preventing your opponent from doing the same is key to winning.

<p>
Yes, strategic line selection is crucial. Thinking ahead to maximize
the number of boxes you can capture while preventing your opponent
from doing the same is key to winning.
</p>
</details>
</div>
<div class="question">
<details>
<summary class = "drop6"><img src="../assets/images/icon-plus.svg" class = "images6">What if I need help or have more questions about gameplay?

<summary class="drop6">
<img src="../assets/images/icon-plus.svg" class="images6" />What if
I need help or have more questions about gameplay?
</summary>
<p>If you have any more questions or need assistance with the rules, feel free to refer to the instructions or ask your opponent for clarification.You can also add suggestions in Feedback Form.Enjoy the game!
<p>
If you have any more questions or need assistance with the rules,
feel free to refer to the instructions or ask your opponent for
clarification.You can also add suggestions in Feedback
Form.Enjoy the game!
</p>
</details>
</div>
</div>

<button style="
background-color: grey;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
">
<a href="../index.html" style="color: white;text-decoration: none;">Back to Home</a>
</button>


<script src="../js/FAQs.js"></script>

</body>

</html>
75 changes: 52 additions & 23 deletions pages/about.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>

<link rel="stylesheet" href="../styles/index.style.css">
<link rel="stylesheet" href="../styles/about.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tiny5&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tiny5&display=swap" rel="stylesheet">

<style>
body {
background-image: none;
}
</style>

</head>

<body>
<nav class="navbar">
<div class="logo">
Expand All @@ -27,24 +37,30 @@
</ul>
<div class="hamburger ">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<header class="about-header">
<h1>🕹️ About Us 🕹️ </h1>
<h1>🕹️ About Us 🕹️ </h1>
</header>
<p style="font-size: 25px; font-family: EB Garamond,serif;font-weight: bolder; text-shadow: 2px 2px 3px white;"> Dot-Box is a game where players take turns drawing lines between dots to create boxes.
The player who completes the most boxes wins.It's a simple yet strategic game enjoyed by people of all ages.</p>
<p style="font-size: 25px; font-family: EB Garamond,serif;font-weight: bolder; text-shadow: 2px 2px 3px white;">
Dot-Box is a game where players take turns drawing lines between dots to create boxes.
The player who completes the most boxes wins.It's a simple yet strategic game enjoyed by people of all ages.</p>
<main>
<section class="about-description">
<p>

</p>
</section>

<section class="functionalities">
<h2>History and Origin:</h2>
<p style="color: white; padding: 12px;">
Dot and Boxes, also known as Dots and Boxes, is a classic pencil-and-paper game that has a charming history dating back to the late 19th century. It was first described by the French mathematician Édouard Lucas in the 1880s. Édouard Lucas is well-known for his contributions to mathematics, particularly for his work on the Fibonacci sequence and the Tower of Hanoi puzzle. He introduced Dot and Boxes as a recreational game in his book "Récréations Mathématiques" (Mathematical Recreations), where it captured the imagination of puzzle enthusiasts and gamers alike.</p>
Dot and Boxes, also known as Dots and Boxes, is a classic pencil-and-paper game that has a charming history
dating back to the late 19th century. It was first described by the French mathematician Édouard Lucas in the
1880s. Édouard Lucas is well-known for his contributions to mathematics, particularly for his work on the
Fibonacci sequence and the Tower of Hanoi puzzle. He introduced Dot and Boxes as a recreational game in his book
"Récréations Mathématiques" (Mathematical Recreations), where it captured the imagination of puzzle enthusiasts
and gamers alike.</p>
</section>
<section class="functionalities">
<h2>Functionalities🕹️</h2>
Expand All @@ -59,18 +75,31 @@ <h2>Functionalities🕹️</h2>

<section class="functionalities">
<h2>How to Play🎮</h2>
<ul>
<li>
Objective: Capture more boxes than your opponent by drawing lines between adjacent dots.</li>
<li>Setup: Choose your grid size and start connecting the dots.</li>
<li>Rules: Take turns drawing lines. Complete a box to score a point and get an extra turn. The player with the most boxes wins.</li>
<ul>
<li>
Objective: Capture more boxes than your opponent by drawing lines between adjacent dots.</li>
<li>Setup: Choose your grid size and start connecting the dots.</li>
<li>Rules: Take turns drawing lines. Complete a box to score a point and get an extra turn. The player with the
most boxes wins.</li>
<li>Scoring: Each box is worth one point. The game ends when all boxes are claimed.</li>
</ul>
</ul>
</section>
</main>

<footer class="about-footer">
<p style="font-size: 30px;">Made with ❤️ by ChromeGaming </p>
</footer>
<div class="author">
<div class="fotbar">
<a href="../pages/howtoplay.html">HowToPlay?</a>
<a href="../pages/termsofservice.html">TermsOfService</a>
<a href="../pages/privacypolicy.html">PrivacyPolicy</a>
</div>
<p>
Created with ❤️ by <a href="https://github.com/ChromeGaming" style="color: white; text-decoration: none;">Chrome
Gaming</a>
</p>
<div class="social-icons">
<a href="https://github.com/ChromeGaming/Dot-Box" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://discord.gg/2HTCFrSvPB" target="_blank"><i class="fab fa-discord"></i></a>
</div>
</div>
</body>
</html>

</html>
74 changes: 48 additions & 26 deletions pages/game.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,65 @@
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Stylesheet -->
<link rel="stylesheet" href="../styles/default.style.css">
<link rel="stylesheet" href="../styles/game.style.css" />
<!-- Stylesheet -->
<link rel="stylesheet" href="../styles/default.style.css" />
<link rel="stylesheet" href="../styles/game.style.css" />

<!-- JavaScript files -->
<script defer src="../js/edge.js"></script>
<script defer src="../js/box.js"></script>
<script defer src="../js/board.js"></script>
<script defer src="../js/game.js"></script>
<!-- JavaScript files -->
<script defer src="../js/edge.js"></script>
<script defer src="../js/box.js"></script>
<script defer src="../js/board.js"></script>
<script defer src="../js/game.js"></script>

<!-- Logo of the game -->
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon">
<!-- Logo of the game -->
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon" />
<style>
.back-home:visited {
color: white;
}
</style>

<!-- Title of the game -->
<title>Dots & Boxes Game</title>
<!-- Title of the game -->
<title>Dots & Boxes Game</title>
</head>

<body>
<!-- Players -->
<div class="players" style="margin-top: 50px;"></div>
<!-- Players -->
<div class="players" style="margin-top: 50px"></div>

<div class="player-turn">
<div class="bg" style="margin-top: 60px;">
<span class="name">PlayerX</span>'s turn
</div>
<div class="player-turn">
<div class="bg" style="margin-top: 60px">
<span class="name">PlayerX</span>'s turn
</div>
</div>

<!-- Game Page -->
<div class="board" style="margin-top: 154px;"></div>
<button id="sound-toggle" style="background-color: grey; color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer;">Sound Off</button>


<!-- Game Page -->
<div class="board" style="margin-top: 154px"></div>
<button id="sound-toggle" style="
background-color: grey;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
">
Sound Off
</button>

<button style="
background-color: grey;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
">
<a href="../index.html" class="back-home">Back to Home</a>
</button>
</body>

</html>
Loading

0 comments on commit f43f1d0

Please sign in to comment.