From 05954e2724ac1fff5b81930a6da805b70c1d8006 Mon Sep 17 00:00:00 2001 From: Pankaj Date: Wed, 3 Jul 2024 00:18:45 +0530 Subject: [PATCH] added back button to game.html and FAQ page --- pages/FAQs.html | 113 +++++++++++++------- pages/about.html | 75 +++++++++----- pages/game.html | 74 ++++++++----- styles/about.css | 175 +++++++++++++++---------------- styles/index.style.css | 230 ++++++++++++++++++++--------------------- 5 files changed, 376 insertions(+), 291 deletions(-) diff --git a/pages/FAQs.html b/pages/FAQs.html index 835a671..33416b7 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -1,94 +1,137 @@ + - - + + + - - + + FAQs - - - + - -
- -
- +
+ +
+
-

FAQs

+

FAQs

- How do I win the game? + + How do I + win the game? -

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. +

+ 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.

- How do I set up the game? + + How do I + set up the game? -

Choose your desired grid size to customize the game's difficulty. Start by connecting the dots on the grid, taking turns with your opponent. +

+ Choose your desired grid size to customize the game's difficulty. + Start by connecting the dots on the grid, taking turns with your + opponent.

- What happens if I complete a box? + + What + happens if I complete a box? -

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. - +

+ 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.

- When does the game end? + + When + does the game end? -

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. +

+ 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.

- Is there a strategy involved in playing this game? - + + Is there + a strategy involved in playing this game? -

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. - +

+ 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.

- What if I need help or have more questions about gameplay? - + + What if + I need help or have more questions about gameplay? -

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! +

+ 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!

+ - - + \ No newline at end of file diff --git a/pages/about.html b/pages/about.html index 9253b27..8036ede 100644 --- a/pages/about.html +++ b/pages/about.html @@ -1,18 +1,28 @@ - + About Us + + - - - - - + + + + + + + + +
-

🕹️ About Us 🕹️

+

🕹️ About Us 🕹️

-

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.

+

+ 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.

- +

History and Origin:

- 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.

+ 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.

Functionalities🕹️

@@ -59,18 +75,31 @@

Functionalities🕹️

How to Play🎮

-
    -
  • - Objective: Capture more boxes than your opponent by drawing lines between adjacent dots.
    • -
  • Setup: Choose your grid size and start connecting the dots.
    • -
  • Rules: Take turns drawing lines. Complete a box to score a point and get an extra turn. The player with the most boxes wins.
    • +
      +
    • + Objective: Capture more boxes than your opponent by drawing lines between adjacent dots.
      • +
    • Setup: Choose your grid size and start connecting the dots.
      • +
    • Rules: Take turns drawing lines. Complete a box to score a point and get an extra turn. The player with the + most boxes wins.
    • Scoring: Each box is worth one point. The game ends when all boxes are claimed.
      • -
    +
- - +
+
+ HowToPlay? + TermsOfService + PrivacyPolicy +
+

+ Created with ❤️ by Chrome + Gaming +

+ +
- + + \ No newline at end of file diff --git a/pages/game.html b/pages/game.html index 0919aa1..077eeba 100644 --- a/pages/game.html +++ b/pages/game.html @@ -2,43 +2,65 @@ - - + + - - - + + + - - - - - + + + + + - - - + + + + - - Dots & Boxes Game + + Dots & Boxes Game - -
+ +
-
-
- PlayerX's turn -
+
+
+ PlayerX's turn
+
- -
- - - + +
+ + \ No newline at end of file diff --git a/styles/about.css b/styles/about.css index 3291b16..78ec803 100644 --- a/styles/about.css +++ b/styles/about.css @@ -1,83 +1,80 @@ +body { + margin: 0; + padding: 0; + background-color: #e7b537; /* Orange background */ +} +.about-header { + font-family: "Anton", sans-serif; + background-color: transparent; + color: #0e0e0e; /* White text */ + padding: 20px; + text-shadow: 2px 2px 10px white; + text-align: center; + font-size: 2.1rem; /* Larger heading size */ + transition: background-color 0.3s ease; /* Smooth transition on hover */ +} - body { - - margin: 0; - padding: 0; - background-color: #e7b537; /* Orange background */ - } - .about-header { - font-family: "Anton", sans-serif; - background-color: transparent; - color: #0e0e0e; /* White text */ - padding: 20px; - text-shadow: 2px 2px 10px white; - text-align: center; - font-size: 2.1rem; /* Larger heading size */ - transition: background-color 0.3s ease; /* Smooth transition on hover */ - } - - .about-header:hover { - background-color: #e59253; /* Light orange on hover */ - } - - h1 { - margin: 0; - } - - main { - padding: 20px; - display: flex; - justify-content: space-between; - align-items: center; - - } - - p { - color: #333; - line-height: 1.5; - text-align: justify; - max-width: 700px; - margin: 0 auto; - } - - .functionalities, - .how-to-play { - flex: 1; - width: 250px; - height: 300px; - margin: 10px; - background-color: #3370e2; /* Light background for sections */ - border-radius: 10px; /* Rounded corners for a softer look */ - /* padding: 20px; */ - /* Add space between sections */ - - box-shadow: 2px 2px 10px white; /* Subtle shadow for depth */ - transition: transform 0.3s ease; /* Smooth scale on hover */ - } - - .functionalities:hover, - .how-to-play:hover { - transform: scale(1.05); /* Slightly scale up on hover */ - } - - h2 { - margin-bottom: 10px; /* Add space below section headers */ - text-align: center; - } - - ul { - list-style: none; /* Remove default bullet points */ - padding: 0; - margin: 0; - text-align: center; - } - - li { - margin-bottom: 10px; - line-height: 1.5; - } - - .about-footer { +.about-header:hover { + background-color: #e59253; /* Light orange on hover */ +} + +h1 { + margin: 0; +} + +main { + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +p { + color: #333; + line-height: 1.5; + text-align: justify; + max-width: 700px; + margin: 0 auto; +} + +.functionalities, +.how-to-play { + flex: 1; + width: 250px; + height: 300px; + margin: 10px; + background-color: #3370e2; /* Light background for sections */ + border-radius: 10px; /* Rounded corners for a softer look */ + /* padding: 20px; */ + /* Add space between sections */ + + box-shadow: 2px 2px 10px white; /* Subtle shadow for depth */ + transition: transform 0.3s ease; /* Smooth scale on hover */ +} + +.functionalities:hover, +.how-to-play:hover { + transform: scale(1.05); /* Slightly scale up on hover */ +} + +h2 { + margin-bottom: 10px; /* Add space below section headers */ + text-align: center; +} + +ul { + list-style: none; /* Remove default bullet points */ + padding: 0; + margin: 0; + text-align: center; +} + +li { + margin-bottom: 10px; + line-height: 1.5; +} + +/* .about-footer { background-color: transparent; color: #fff; @@ -86,21 +83,21 @@ font-size: 20px; } .about-footer p{ text-align: center; color: white; -} +} */ /* .about-footer p:hover{ color: #3370e2; } */ -.functionalities ul{ - color: wheat; +.functionalities ul { + color: wheat; } -.how-to-play p{ - color: wheat; - font-family: "Tiny5", sans-serif; +.how-to-play p { + color: wheat; + font-family: "Tiny5", sans-serif; } - + /* Footer Styles */ .about-footer { background-color: #333; @@ -123,10 +120,10 @@ font-size: 20px; } @keyframes scroll { from { - transform: translateX(0); /* Starts at the leftmost part of the text */ + transform: translateX(0); /* Starts at the leftmost part of the text */ } to { - transform: translateX(-100%); /* Moves the text all the way to the left */ + transform: translateX(-100%); /* Moves the text all the way to the left */ } } .navbar { @@ -152,7 +149,7 @@ font-size: 20px; } display: inline-flex; margin-right: 30px; margin-top: 12px; - gap:30px; + gap: 30px; } .navlinks a { text-decoration: none; diff --git a/styles/index.style.css b/styles/index.style.css index 2b31cdb..a4a9c1d 100644 --- a/styles/index.style.css +++ b/styles/index.style.css @@ -1,131 +1,128 @@ body { - position: relative; - /* font-family: monospace; */ - background-color: #fdfdfd; - background-size: 8px 8px, 8px 8px; - background-position: center, center; - background-image: linear-gradient(#ebf4f9 1px, transparent 1px), linear-gradient(90deg, #ebf4f9 1px, transparent 1px); - width: 100vw; - min-height: 100vh; + position: relative; + /* font-family: monospace; */ + background-color: #fdfdfd; + background-size: 8px 8px, 8px 8px; + background-position: center, center; + background-image: linear-gradient(#ebf4f9 1px, transparent 1px), + linear-gradient(90deg, #ebf4f9 1px, transparent 1px); + width: 100vw; + min-height: 100vh; } .settings { - min-height: calc(100vh - 20vh); - width: 100%; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap-reverse; - top: -80px; + min-height: calc(100vh - 20vh); + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap-reverse; + top: -80px; } h1 { - position: sticky; - top: 0; - display: grid; - place-items: center; - grid-auto-flow: column; - height: 15vh; - width: 100%; - padding: 0 10rem; - background-color: white; - color: #111; - white-space: nowrap; - overflow-x: auto; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); - scroll-snap-type: x mandatory; - pointer-events: none; + position: sticky; + top: 0; + display: grid; + place-items: center; + grid-auto-flow: column; + height: 15vh; + /* width: 100%; */ + padding: 0 10rem; + background-color: white; + color: #111; + white-space: nowrap; + overflow-x: auto; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); + scroll-snap-type: x mandatory; + pointer-events: none; } h1 b { - scroll-snap-align: center; - padding: 0 1rem; + scroll-snap-align: center; + padding: 0 1rem; } h1::-webkit-scrollbar { - display: none; - height: 0; - width: 0; + display: none; + height: 0; + width: 0; } .settings .form { - display: flex; - flex-direction: column; - gap: 1rem; - max-width: 500px; - padding: 2rem 3rem; - margin: 0 1rem; - font-size: 20px; - line-height: 2rem; + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 500px; + padding: 2rem 3rem; + margin: 0 1rem; + font-size: 20px; + line-height: 2rem; } .settings .form-item { - display: flex; - flex-direction: column; - gap: 0.2rem; + display: flex; + flex-direction: column; + gap: 0.2rem; } .settings .form-item input { - border-radius: 4px; - padding: .4rem .6rem; - font-weight: bold; - font-size: large; + border-radius: 4px; + padding: 0.4rem 0.6rem; + font-weight: bold; + font-size: large; } .settings .form-item .details { - font-style: italic; - color: #070707; - font-size: 15px; - + font-style: italic; + color: #070707; + font-size: 15px; } .settings a { - margin-top: 0.4rem; - border-radius: 4px; - padding: 0.8rem; - font-weight: bold; - background: #333; - color: #fff; - cursor: pointer; - letter-spacing: 4px; - text-align: center; + margin-top: 0.4rem; + border-radius: 4px; + padding: 0.8rem; + font-weight: bold; + background: #333; + color: #fff; + cursor: pointer; + letter-spacing: 4px; + text-align: center; } .settings a:hover { - background: rgb(75, 75, 75); + background: rgb(75, 75, 75); } .settings a:active { - background: rgb(70, 70, 70); + background: rgb(70, 70, 70); } - .instructions li { - hyphens: auto; - text-align: justify; - letter-spacing: 0.8px; - word-spacing: -1.8px; + hyphens: auto; + text-align: justify; + letter-spacing: 0.8px; + word-spacing: -1.8px; } -input:out-of-range{ - border:5px solid red; +input:out-of-range { + border: 5px solid red; } -input:out-of-range + .error::after{ - content:"Please enter value between 5 and 30"; - font-size:12px; - font-style:italic; - font-family: sans-serif; - color:hsl(0, 100%, 40%); +input:out-of-range + .error::after { + content: "Please enter value between 5 and 30"; + font-size: 12px; + font-style: italic; + font-family: sans-serif; + color: hsl(0, 100%, 40%); } -input:out-of-range + .player::after{ - content:"Please enter value between 2 and 6"; - font-size:12px; - font-style:italic; - font-family: sans-serif; - color:hsl(0, 100%, 40%); +input:out-of-range + .player::after { + content: "Please enter value between 2 and 6"; + font-size: 12px; + font-style: italic; + font-family: sans-serif; + color: hsl(0, 100%, 40%); } - - /* .author { position: sticky; bottom: 0; @@ -136,16 +133,15 @@ input:out-of-range + .player::after{ background-color: white; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); } */ -.author{ - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - /* bottom: 0; */ - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 10px; - +.author { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + /* bottom: 0; */ + background: linear-gradient(to right, #00093c, #2d0b00); + color: #fff; + padding: 10px; } /* .author p{ align-items: center; @@ -154,36 +150,34 @@ input:out-of-range + .player::after{ font-size: 20px; } */ -.author .fotbar{ - display: flex; - gap: 20px; +.author .fotbar { + display: flex; + gap: 20px; } .author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - background-color: transparent; + color: white; + text-decoration: none; + padding: 10px; + border-radius: 5px; + background-color: transparent; } -.author p{ - color: white; - padding: 10px; - margin-right: 40px; - font-size: 20px; - font-weight: 600; +.author p { + color: white; + padding: 10px; + margin-right: 40px; + font-size: 20px; + font-weight: 600; } .author .social-icons { - display: flex; - gap: 10px; - margin-right: 200px; + display: flex; + gap: 10px; + margin-right: 200px; } .author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; + color: white; + text-decoration: none; + font-size: 20px; } - -