From 087fb8cda37f807293fbcc92a578ff03c43a4110 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Fri, 9 Aug 2024 22:47:04 +0530
Subject: [PATCH 1/2] fixed validation

---
 js/validation.js       |  11 +-
 styles/index.style.css | 242 +++++++++++++++++++++++------------------
 2 files changed, 139 insertions(+), 114 deletions(-)

diff --git a/js/validation.js b/js/validation.js
index 8bb25d4..44dae07 100644
--- a/js/validation.js
+++ b/js/validation.js
@@ -1,6 +1,4 @@
 document.addEventListener("DOMContentLoaded", () => {
-	const rowsInput = document.getElementById("rows");
-	const columnsInput = document.getElementById("columns");
 	const playersInput = document.getElementById("players-count");
 	const startBtn = document.querySelector(".start-btn");
 	const validationMessage = document.getElementById("validation-message");
@@ -19,21 +17,19 @@ document.addEventListener("DOMContentLoaded", () => {
 	};
 
 	const validateAllInputs = () => {
-		const invalidRows = !validateInput(rowsInput, 5, 30);
-		const invalidColumns = !validateInput(columnsInput, 5, 30);
 		const invalidPlayers = !validateInput(playersInput, 2, 6);
 
-		if (invalidRows || invalidColumns || invalidPlayers) {
+		if (invalidPlayers) {
 			startBtn.disabled = true;
+			startBtn.classList.add("disabled");
 			showValidationMessage(true);
 		} else {
 			startBtn.disabled = false;
+			startBtn.classList.remove("disabled");
 			showValidationMessage(false);
 		}
 	};
 
-	rowsInput.addEventListener("input", validateAllInputs);
-	columnsInput.addEventListener("input", validateAllInputs);
 	playersInput.addEventListener("input", validateAllInputs);
 
 	startBtn.addEventListener("click", (event) => {
@@ -43,5 +39,6 @@ document.addEventListener("DOMContentLoaded", () => {
 	});
 
 	// Initial validation
+
 	validateAllInputs();
 });
diff --git a/styles/index.style.css b/styles/index.style.css
index 542edb7..33dea24 100644
--- a/styles/index.style.css
+++ b/styles/index.style.css
@@ -111,7 +111,7 @@ input:out-of-range {
 	border: 5px solid red;
 }
 
-input:out-of-range + .error::after {
+input:out-of-range+.error::after {
 	content: "Please enter value between 5 and 30";
 	font-size: 12px;
 	font-style: italic;
@@ -119,7 +119,7 @@ input:out-of-range + .error::after {
 	color: hsl(0, 100%, 40%);
 }
 
-input:out-of-range + .player::after {
+input:out-of-range+.player::after {
 	content: "Please enter value between 2 and 6";
 	font-size: 12px;
 	font-style: italic;
@@ -255,7 +255,7 @@ input:out-of-range + .player::after {
 	opacity: 1;
 }
 
-.difficulty:hover > :not(.d-type:hover) {
+.difficulty:hover> :not(.d-type:hover) {
 	transition: 300ms;
 	filter: blur(1px);
 	transform: scale(0.95, 0.95);
@@ -298,82 +298,90 @@ input:out-of-range + .player::after {
 	background-color: grey;
 }
 
-p,h3,h2{
+p,
+h3,
+h2 {
 	font-family: 'Press Start 2P', cursive !important;
 }
 
 
 /* Modal styles */
 .modal {
-display: none; 
-position: fixed; 
-z-index: 1000;
-left: 0;
-top: 0;
-width: 100%;
-height: 150%;
-overflow: auto; 
-background-color: rgba(0, 0, 0, 0.4); 
-backdrop-filter: blur(5px); 
+	display: none;
+	position: fixed;
+	z-index: 1000;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 150%;
+	overflow: auto;
+	background-color: rgba(0, 0, 0, 0.4);
+	backdrop-filter: blur(5px);
 }
 
 .modal-content {
-background-color: white;
-margin: 15% auto;
-padding: 20px;
-border-radius: 10px;
-width: 50%;
-max-width: 650px;
-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-animation: fadeIn 0.5s;
+	background-color: white;
+	margin: 15% auto;
+	padding: 20px;
+	border-radius: 10px;
+	width: 50%;
+	max-width: 650px;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+	animation: fadeIn 0.5s;
 }
 
 .close {
-color: #aaa;
-float: right;
-font-size: 28px;
-font-weight: bold;
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
-color: black;
-text-decoration: none;
-cursor: pointer;
+	color: black;
+	text-decoration: none;
+	cursor: pointer;
 }
 
 form {
-display: flex;
-flex-direction: column;
-gap: 15px;
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
 }
 
 .form-group {
-display: flex;
-flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .form-group label {
-margin-bottom: 5px;
-font-weight: bold;
-color: white;
-text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685);
+	margin-bottom: 5px;
+	font-weight: bold;
+	color: white;
+	text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685);
 }
+
 .form-group-1 {
-display: flex;
+	display: flex;
 }
 
 
 .submitbtn {
-display: flex;
-justify-content: space-between;
+	display: flex;
+	justify-content: space-between;
 }
 
 
 
 @keyframes fadeIn {
-from { opacity: 0; }
-to { opacity: 1; }
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
 }
 
 
@@ -406,7 +414,7 @@ to { opacity: 1; }
 	animation: formAppear 0.5s ease-out;
 }
 
-.right-background{
+.right-background {
 	font-family: 'Press Start 2P', cursive;
 }
 
@@ -414,8 +422,9 @@ to { opacity: 1; }
 	from {
 		opacity: 0;
 		transform: scale(0.8);
-		
+
 	}
+
 	to {
 		opacity: 1;
 		transform: scale(1);
@@ -434,9 +443,9 @@ to { opacity: 1; }
 	font-size: 27px;
 	color: #fffefe;
 	margin: 0;
-	font-family:Tahoma, Geneva, Verdana, sans-serif;
+	font-family: Tahoma, Geneva, Verdana, sans-serif;
 	text-align: center;
-	text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87),2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81);
+	text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87), 2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81);
 }
 
 .close-button {
@@ -445,8 +454,8 @@ to { opacity: 1; }
 	cursor: pointer;
 	transition: transform 0.3s ease;
 	position: relative;
-	bottom:16px;
-	left:6px
+	bottom: 16px;
+	left: 6px
 }
 
 .close-button:hover {
@@ -458,9 +467,9 @@ to { opacity: 1; }
 	/* border-radius: 15px; */
 	padding: 15px;
 	/* margin-bottom: 0px; */
-	max-width:400px;
+	max-width: 400px;
 	width: 100%;
-	
+
 	/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
 }
 
@@ -495,19 +504,19 @@ to { opacity: 1; }
 	width: 80%;
 }
 
-#star-2:checked ~ .content .emojis .slideImg {
+#star-2:checked~.content .emojis .slideImg {
 	margin-top: -135px;
 }
 
-#star-3:checked ~ .content .emojis .slideImg {
+#star-3:checked~.content .emojis .slideImg {
 	margin-top: -270px;
 }
 
-#star-4:checked ~ .content .emojis .slideImg {
+#star-4:checked~.content .emojis .slideImg {
 	margin-top: -405px;
 }
 
-#star-5:checked ~ .content .emojis .slideImg {
+#star-5:checked~.content .emojis .slideImg {
 	margin-top: -540px;
 }
 
@@ -528,36 +537,36 @@ to { opacity: 1; }
 	transform: scale(1.2) rotate(15deg);
 }
 
-#star-1:hover ~ .content .stars .star-1,
-#star-1:checked ~ .content .stars .star-1,
-#star-2:hover ~ .content .stars .star-1,
-#star-2:hover ~ .content .stars .star-2,
-#star-2:checked ~ .content .stars .star-1,
-#star-2:checked ~ .content .stars .star-2,
-#star-3:hover ~ .content .stars .star-1,
-#star-3:hover ~ .content .stars .star-2,
-#star-3:hover ~ .content .stars .star-3,
-#star-3:checked ~ .content .stars .star-1,
-#star-3:checked ~ .content .stars .star-2,
-#star-3:checked ~ .content .stars .star-3,
-#star-4:hover ~ .content .stars .star-1,
-#star-4:hover ~ .content .stars .star-2,
-#star-4:hover ~ .content .stars .star-3,
-#star-4:hover ~ .content .stars .star-4,
-#star-4:checked ~ .content .stars .star-1,
-#star-4:checked ~ .content .stars .star-2,
-#star-4:checked ~ .content .stars .star-3,
-#star-4:checked ~ .content .stars .star-4,
-#star-5:hover ~ .content .stars .star-1,
-#star-5:hover ~ .content .stars .star-2,
-#star-5:hover ~ .content .stars .star-3,
-#star-5:hover ~ .content .stars .star-4,
-#star-5:hover ~ .content .stars .star-5,
-#star-5:checked ~ .content .stars .star-1,
-#star-5:checked ~ .content .stars .star-2,
-#star-5:checked ~ .content .stars .star-3,
-#star-5:checked ~ .content .stars .star-4,
-#star-5:checked ~ .content .stars .star-5 {
+#star-1:hover~.content .stars .star-1,
+#star-1:checked~.content .stars .star-1,
+#star-2:hover~.content .stars .star-1,
+#star-2:hover~.content .stars .star-2,
+#star-2:checked~.content .stars .star-1,
+#star-2:checked~.content .stars .star-2,
+#star-3:hover~.content .stars .star-1,
+#star-3:hover~.content .stars .star-2,
+#star-3:hover~.content .stars .star-3,
+#star-3:checked~.content .stars .star-1,
+#star-3:checked~.content .stars .star-2,
+#star-3:checked~.content .stars .star-3,
+#star-4:hover~.content .stars .star-1,
+#star-4:hover~.content .stars .star-2,
+#star-4:hover~.content .stars .star-3,
+#star-4:hover~.content .stars .star-4,
+#star-4:checked~.content .stars .star-1,
+#star-4:checked~.content .stars .star-2,
+#star-4:checked~.content .stars .star-3,
+#star-4:checked~.content .stars .star-4,
+#star-5:hover~.content .stars .star-1,
+#star-5:hover~.content .stars .star-2,
+#star-5:hover~.content .stars .star-3,
+#star-5:hover~.content .stars .star-4,
+#star-5:hover~.content .stars .star-5,
+#star-5:checked~.content .stars .star-1,
+#star-5:checked~.content .stars .star-2,
+#star-5:checked~.content .stars .star-3,
+#star-5:checked~.content .stars .star-4,
+#star-5:checked~.content .stars .star-5 {
 	color: gold;
 	text-shadow: 0 0 5px #ff8800;
 	animation: starPulse 0.5s infinite alternate;
@@ -567,6 +576,7 @@ to { opacity: 1; }
 	from {
 		transform: scale(1);
 	}
+
 	to {
 		transform: scale(1.1);
 	}
@@ -588,7 +598,7 @@ to { opacity: 1; }
 	font-size: 18px;
 	font-weight: 600;
 	color: #eeeeee;
-	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 	text-shadow: 1px 1px 2px rgb(48, 158, 209), 0 0 1em rgb(7, 0, 109), 0 0 0.4em rgb(7, 0, 109);
 }
 
@@ -609,6 +619,7 @@ input[type="email"] {
 	font-size: 14px;
 	transition: all 0.3s ease;
 }
+
 textarea {
 	background-color: #fff;
 	border: 2px solid #0168ce;
@@ -627,7 +638,8 @@ input[type="email"]:focus {
 	border-color: #00438e;
 	outline: none;
 }
-.buttons { 
+
+.buttons {
 	/* background: linear-gradient(45deg, #4ecdc4, #45b7aa); */
 	background: linear-gradient(45deg, #cd4e4e, #fe165f);
 	color: #fff;
@@ -639,7 +651,7 @@ input[type="email"]:focus {
 	font-size: 16px;
 	font-weight: bold;
 	transition: all 0.3s ease;
-	
+
 }
 
 .buttons:hover {
@@ -690,43 +702,43 @@ input[type="email"]:focus {
 	content: "0 out of 5";
 }
 
-#star-1:checked ~ .footer .text::before {
+#star-1:checked~.footer .text::before {
 	content: "I just hate it 😣";
 }
 
-#star-1:checked ~ .footer .numb::before {
+#star-1:checked~.footer .numb::before {
 	content: "1 out of 5";
 }
 
-#star-2:checked ~ .footer .text::before {
+#star-2:checked~.footer .text::before {
 	content: "I don't like it 😓";
 }
 
-#star-2:checked ~ .footer .numb::before {
+#star-2:checked~.footer .numb::before {
 	content: "2 out of 5";
 }
 
-#star-3:checked ~ .footer .text::before {
+#star-3:checked~.footer .text::before {
 	content: "This is awesome 😄";
 }
 
-#star-3:checked ~ .footer .numb::before {
+#star-3:checked~.footer .numb::before {
 	content: "3 out of 5";
 }
 
-#star-4:checked ~ .footer .text::before {
+#star-4:checked~.footer .text::before {
 	content: "I just like it 😃";
 }
 
-#star-4:checked ~ .footer .numb::before {
+#star-4:checked~.footer .numb::before {
 	content: "4 out of 5";
 }
 
-#star-5:checked ~ .footer .text::before {
+#star-5:checked~.footer .text::before {
 	content: "I just love it ❤️";
 }
 
-#star-5:checked ~ .footer .numb::before {
+#star-5:checked~.footer .numb::before {
 	content: "5 out of 5";
 }
 
@@ -743,12 +755,14 @@ input[type="email"]:focus {
 		max-width: 300px;
 		max-height: 600px;
 	}
-	.emojis li img{
+
+	.emojis li img {
 		width: 60%;
 		height: 60%;
 		margin-left: 20%;
 	}
-	.stars{
+
+	.stars {
 		display: flex;
 	}
 
@@ -769,6 +783,7 @@ input[type="email"]:focus {
 		max-width: 100vw !important;
 		overflow-x: hidden !important;
 	}
+
 	.settings {
 		max-width: 100vw !important;
 	}
@@ -788,18 +803,21 @@ input[type="email"]:focus {
 		padding-left: 0px !important;
 		margin-right: 0px !important;
 	}
-     .footer .text, .footer .numb{
+
+	.footer .text,
+	.footer .numb {
 		display: flex;
 		margin-right: 15px;
 		font-size: 15px !important;
-	 }
-	 .form-group textarea{
+	}
+
+	.form-group textarea {
 		resize: none;
-	 }
+	}
 
 	.heading {
 		width: max-content;
-    	font-size: 1.2rem;
+		font-size: 1.2rem;
 	}
 
 	button.d-type {
@@ -811,7 +829,8 @@ input[type="email"]:focus {
 		width: 100% !important;
 		flex-wrap: wrap !important;
 	}
-	.button-container button{
+
+	.button-container button {
 		width: 100% !important;
 	}
 
@@ -819,7 +838,8 @@ input[type="email"]:focus {
 		margin-bottom: 300px !important;
 	}
 
-	.author, .author .fotbar {
+	.author,
+	.author .fotbar {
 		max-width: 100vw !important;
 		flex-wrap: wrap !important;
 	}
@@ -866,19 +886,27 @@ input[type="email"]:focus {
 		gap: 30px;
 		top: 25vh;
 	}
+
 	body {
 		overflow: visible !important;
 	}
+
 	.settings .form {
 		padding: 1rem 6rem;
 		margin: 4px 13rem;
 		left: 15%;
 		position: relative;
 	}
+
 	.settings {
 		top: -33px;
 	}
 }
+
 #copyright {
 	color: white;
 }
+
+.disabled {
+	opacity: 0.75;
+}
\ No newline at end of file

From 08ecbf74b1b5e18f31d4fc09de031f04187bdab3 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Fri, 9 Aug 2024 22:47:37 +0530
Subject: [PATCH 2/2] minor fixes

---
 index.html      | 435 +++++++++++++++++++++---------------------------
 pages/game.html | 427 +++++++++++++++++++++++------------------------
 2 files changed, 395 insertions(+), 467 deletions(-)

diff --git a/index.html b/index.html
index 9988a63..3185b04 100644
--- a/index.html
+++ b/index.html
@@ -1,270 +1,211 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" href="./styles/mainstyle.css" />
-		<link rel="stylesheet" href="./styles/default.style.css" />
-		<link rel="stylesheet" href="/styles/global.css" />
-		<link rel="stylesheet" href="./styles/index.style.css" />
-		<link
-			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-		/>
-		<!-- JavaScript files -->
-		<script defer src="./js/validation.js"></script>
-		<script defer src="./js/index.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" />
-		<link
-			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-		/>
-		<script src="./js/emoji.js"></script>
-		<title>Dots & Boxes Game</title>
-	</head>
 
-	<body>
-		<script src="/js/global.js"></script>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="stylesheet" href="./styles/mainstyle.css" />
+	<link rel="stylesheet" href="./styles/default.style.css" />
+	<link rel="stylesheet" href="/styles/global.css" />
+	<link rel="stylesheet" href="./styles/index.style.css" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+	<!-- JavaScript files -->
+	<script defer src="./js/validation.js"></script>
+	<script defer src="./js/index.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" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+	<script src="./js/emoji.js"></script>
+	<title>Dots & Boxes Game</title>
+</head>
 
-		<audio id="background-music" autoplay loop>
-			<source src="./assets/sounds/bgMusic.mp3" type="audio/mpeg" />
-		</audio>
-		<div class="settings">
-			<video autoplay muted class="video" loop id="myVideo">
-				<source src="/assets/videos/1.mp4" type="video/mp4" />
-			</video>
-			<div class="whole-background">
-				<nav class="navbarr">
-					<div class="logo">
-						<a href="#">Dots & Boxes ⚄</a>
-					</div>
-					<ul class="nav-links">
-						<li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
-						<li><a href="./pages/about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
-						<li><a href="./pages/FAQs.html"><i class="fas fa-question-circle"></i>FAQs</a></li>
-						<li><a href="./pages/contributors.html"><i class="fas fa-users"></i>Contributors</a></li>
-						<li><a href="./pages/testimonials.html"><i class="fas fa-users"></i>Testimonials</a></li>
-						<li><a href="./pages/game.html"><i class="fas fa-gamepad"></i>Let's Go</a></li>
-					</ul>
-					<div class="hamburger">
-						<i class="fas fa-bars"></i>
-					</div>
-				</nav>
-				
-				<button class="sticky-button" onclick="openForm()">Feedback</button>
-				<div class="feed-bg">
-					<div id="formContainer" class="form-container">
-						<div class="form-content">
-							<div class="sub">
-								<h5>We'd Love Your Feedback!</h5>
-								<span class="close-button" onclick="closeForm()">&times;</span>
-							</div>
-							<div class="wrapper">
-								<input type="radio" name="rate" id="star-1" />
-								<input type="radio" name="rate" id="star-2" />
-								<input type="radio" name="rate" id="star-3" />
-								<input type="radio" name="rate" id="star-4" />
-								<input type="radio" name="rate" id="star-5" />
-								<div class="content">
-									<div class="outer">
-										<div class="emojis">
-											<li class="slideImg">
-												<img
-													src="./assets/images/emojis/emoji-1-bg.png"
-													alt="emoji"
-												/>
-											</li>
-											<li>
-												<img
-													src="./assets/images/emojis/emoji-2-bg.png"
-													alt="emoji"
-												/>
-											</li>
-											<li>
-												<img
-													src="./assets/images/emojis/emoji-3.png"
-													alt="emoji"
-												/>
-											</li>
-											<li>
-												<img
-													src="./assets/images/emojis/emoji-4-bg.png"
-													alt="emoji"
-												/>
-											</li>
-											<li>
-												<img
-													src="./assets/images/emojis/emoji-5-bg.png"
-													alt="emoji"
-												/>
-											</li>
-										</div>
-									</div>
-									<div class="stars">
-										<label for="star-1" class="star-1 fas fa-star"></label>
-										<label for="star-2" class="star-2 fas fa-star"></label>
-										<label for="star-3" class="star-3 fas fa-star"></label>
-										<label for="star-4" class="star-4 fas fa-star"></label>
-										<label for="star-5" class="star-5 fas fa-star"></label>
+<body>
+	<script src="/js/global.js"></script>
+
+	<audio id="background-music" autoplay loop>
+		<source src="./assets/sounds/bgMusic.mp3" type="audio/mpeg" />
+	</audio>
+	<div class="settings">
+		<video autoplay muted class="video" loop id="myVideo">
+			<source src="/assets/videos/1.mp4" type="video/mp4" />
+		</video>
+		<div class="whole-background">
+			<nav class="navbarr">
+				<div class="logo">
+					<a href="#">Dots & Boxes ⚄</a>
+				</div>
+				<ul class="nav-links">
+					<li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
+					<li><a href="./pages/about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
+					<li><a href="./pages/FAQs.html"><i class="fas fa-question-circle"></i>FAQs</a></li>
+					<li><a href="./pages/contributors.html"><i class="fas fa-users"></i>Contributors</a></li>
+					<li><a href="./pages/testimonials.html"><i class="fas fa-users"></i>Testimonials</a></li>
+					<li><a href="./pages/game.html"><i class="fas fa-gamepad"></i>Let's Go</a></li>
+				</ul>
+				<div class="hamburger">
+					<i class="fas fa-bars"></i>
+				</div>
+			</nav>
+
+			<button class="sticky-button" onclick="openForm()">Feedback</button>
+			<div class="feed-bg">
+				<div id="formContainer" class="form-container">
+					<div class="form-content">
+						<div class="sub">
+							<h5>We'd Love Your Feedback!</h5>
+							<span class="close-button" onclick="closeForm()">&times;</span>
+						</div>
+						<div class="wrapper">
+							<input type="radio" name="rate" id="star-1" />
+							<input type="radio" name="rate" id="star-2" />
+							<input type="radio" name="rate" id="star-3" />
+							<input type="radio" name="rate" id="star-4" />
+							<input type="radio" name="rate" id="star-5" />
+							<div class="content">
+								<div class="outer">
+									<div class="emojis">
+										<li class="slideImg">
+											<img src="./assets/images/emojis/emoji-1-bg.png" alt="emoji" />
+										</li>
+										<li>
+											<img src="./assets/images/emojis/emoji-2-bg.png" alt="emoji" />
+										</li>
+										<li>
+											<img src="./assets/images/emojis/emoji-3.png" alt="emoji" />
+										</li>
+										<li>
+											<img src="./assets/images/emojis/emoji-4-bg.png" alt="emoji" />
+										</li>
+										<li>
+											<img src="./assets/images/emojis/emoji-5-bg.png" alt="emoji" />
+										</li>
 									</div>
 								</div>
-								<div class="footer">
-									<span class="text"></span>
-									<span class="numb"></span>
+								<div class="stars">
+									<label for="star-1" class="star-1 fas fa-star"></label>
+									<label for="star-2" class="star-2 fas fa-star"></label>
+									<label for="star-3" class="star-3 fas fa-star"></label>
+									<label for="star-4" class="star-4 fas fa-star"></label>
+									<label for="star-5" class="star-5 fas fa-star"></label>
 								</div>
 							</div>
+							<div class="footer">
+								<span class="text"></span>
+								<span class="numb"></span>
+							</div>
+						</div>
 
-							<form id="feedbackForm">
-								<div class="form-group-1">
-									<div class="form-group">
-										<label for="firstName">Name</label>
-										<input
-											type="text"
-											required
-											id="firstName"
-											name="firstName"
-											placeholder="Enter Name"
-										/>
-									</div>
-									<div class="form-group">
-										<label for="email">Email</label>
-										<input
-											type="email"
-											required
-											id="email"
-											name="email"
-											placeholder="Enter Email"
-										/>
-									</div>
-								</div>
+						<form id="feedbackForm">
+							<div class="form-group-1">
 								<div class="form-group">
-									<label for="feedback">Describe your feedback</label>
-									<textarea
-										id="feedback"
-										required
-										name="feedback"
-										rows="4"
-										placeholder="Tell us how we can improve ..."
-									></textarea>
+									<label for="firstName">Name</label>
+									<input type="text" required id="firstName" name="firstName"
+										placeholder="Enter Name" />
 								</div>
-								<div class="submitbtn">
-									<input type="submit" value="Submit" class="buttons" />
-									<input type="reset" value="Reset" class="buttons" />
+								<div class="form-group">
+									<label for="email">Email</label>
+									<input type="email" required id="email" name="email" placeholder="Enter Email" />
 								</div>
-							</form>
-						</div>
+							</div>
+							<div class="form-group">
+								<label for="feedback">Describe your feedback</label>
+								<textarea id="feedback" required name="feedback" rows="4"
+									placeholder="Tell us how we can improve ..."></textarea>
+							</div>
+							<div class="submitbtn">
+								<input type="submit" value="Submit" class="buttons" />
+								<input type="reset" value="Reset" class="buttons" />
+							</div>
+						</form>
 					</div>
 				</div>
-				<div id="thankYouPopup" class="popup hidden">
-					<div class="popup-content">
-						<span class="close-button" onclick="closeThankYouPopup()"
-							>&times;</span
-						>
-						<h3>Thank You!</h3>
-						<p>Your feedback has been submitted.</p>
-					</div>
+			</div>
+			<div id="thankYouPopup" class="popup hidden">
+				<div class="popup-content">
+					<span class="close-button" onclick="closeThankYouPopup()">&times;</span>
+					<h3>Thank You!</h3>
+					<p>Your feedback has been submitted.</p>
 				</div>
+			</div>
 
-				<div class="form">
-					<!-- <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1> -->
-					<h1 class="heading">▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂</h1>
-					<h3 class="instructions-heading" style="text-decoration: underline">
-						Instructions
-					</h3>
-					<p class="instructions">
-						1. 🧩 Select the number of rows, columns, and players. <br />
-						2. 🏆 The player who has the maximum number of boxes on the board is
-						the winner. <br />
-						3. 🔄 Players will switch after every turn. But the player who fills
-						the last box will get one extra chance consecutively. 🎉 <br />
-					</p>
+			<div class="form">
+				<!-- <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1> -->
+				<h1 class="heading">▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂</h1>
+				<h3 class="instructions-heading" style="text-decoration: underline">
+					Instructions
+				</h3>
+				<p class="instructions">
+					1. 🧩 Select the number of rows, columns, and players. <br />
+					2. 🏆 The player who has the maximum number of boxes on the board is
+					the winner. <br />
+					3. 🔄 Players will switch after every turn. But the player who fills
+					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">
-						<div class="form-item">
-							<label for="theme-select" style="text-decoration: underline"
-								>Select Theme:</label
-							>
-							<select id="theme-select">
-								<option value="1">Default</option>
-								<option value="2">Theme 1</option>
-								<option value="3">Theme 2</option>
-							</select>
-						</div>
-						<div class="form-item">
-							<label for="difficulty">Select Difficulty:</label>
-							<div class="difficulty">
-								<button class="d-type active easy">Easy</button>
-								<button class="d-type">Normal</button>
-								<button class="d-type">Hard</button>
-								<button class="d-type">Expert</button>
-							</div>
+				<a href="./pages/howtoplay.html" class="button">Read Detailed Instructions</a>
+			</div>
+			<div class="form">
+				<div class="right-background">
+					<div class="form-item">
+						<label for="theme-select" style="text-decoration: underline">Select Theme:</label>
+						<select id="theme-select">
+							<option value="1">Default</option>
+							<option value="2">Theme 1</option>
+							<option value="3">Theme 2</option>
+						</select>
+					</div>
+					<div class="form-item">
+						<label for="difficulty">Select Difficulty:</label>
+						<div class="difficulty">
+							<button class="d-type active easy">Easy</button>
+							<button class="d-type">Normal</button>
+							<button class="d-type">Hard</button>
+							<button class="d-type">Expert</button>
 						</div>
+					</div>
 
-						<div class="form-item">
-							<label for="players-count"
-								>Players : <span class="details">(between 2 and 6)</span></label
-							>
-							<input
-								type="number"
-								id="players-count"
-								min="2"
-								max="6"
-								value="2"
-							/>
-							<span class="player"></span>
-						</div>
+					<div class="form-item">
+						<label for="players-count">Players : <span class="details">(between 2 and 6)</span></label>
+						<input type="number" id="players-count" min="2" max="6" value="2" />
+						<span class="player"></span>
+					</div>
 
-						<div class="button-container">
-							<a
-								href="./pages/game.html"
-								class="start-btn button1"
-								id="start-btn"
-								aria-label="START"
-							>
-								START
-							</a>
-							<button class="reset-btn button1" id="reset-btn">RESET</button>
-							<button id="music-toggle" onclick="toggleMusic()">
-								Music Off
-							</button>
-						</div>
+					<div class="button-container">
+						<a href="./pages/game.html" class="start-btn button1" id="start-btn" aria-label="START">
+							START
+						</a>
+						<button class="reset-btn button1" id="reset-btn">RESET</button>
+						<button id="music-toggle" onclick="toggleMusic()">
+							Music Off
+						</button>
 					</div>
 				</div>
 			</div>
-			<div class="author">
-				<div class="fotbar">
-					<a href="./pages/howtoplay.html"><i class="fas fa-gamepad"></i> HowToPlay?</a>
-					<a href="./pages/termsofservice.html"><i class="fas fa-file-contract"></i> TermsOfService</a>
-					<a href="./pages/privacypolicy.html"><i class="fas fa-user-shield"></i> PrivacyPolicy</a>
-					<a href="./pages/licensing.html"><i class="fas fa-copyright"></i> Licensing</a>
-				</div>
-				<div id="copyright">
-					&copy;
-					<script>
-						document.write(new Date().getFullYear());
-					</script>
-					Made with ❤️ by
-				</div>
-				<a href="https://github.com/ChromeGaming">Chrome Gaming</a>
-				<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 class="author">
+			<div class="fotbar">
+				<a href="./pages/howtoplay.html"><i class="fas fa-gamepad"></i> HowToPlay?</a>
+				<a href="./pages/termsofservice.html"><i class="fas fa-file-contract"></i> TermsOfService</a>
+				<a href="./pages/privacypolicy.html"><i class="fas fa-user-shield"></i> PrivacyPolicy</a>
+				<a href="./pages/licensing.html"><i class="fas fa-copyright"></i> Licensing</a>
 			</div>
-				</div>
+			<div id="copyright">
+				&copy;
+				<script>
+					document.write(new Date().getFullYear());
+				</script>
+				Made with ❤️ by
+			</div>
+			<a href="https://github.com/ChromeGaming">Chrome Gaming</a>
+			<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>
-		<!-- <div class="flex">
+	</div>
+	</div>
+	<!-- <div class="flex">
 			<div class="board"></div>
 			<div class="score">
 				<div class="players"></div>
@@ -281,11 +222,9 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 			</div>
 		</div> -->
 
-		<script
-			src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js"
-			async
-		></script>
-	</body>
+	<script src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js" async></script>
+</body>
+
+<script src="https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js"></script>
 
-	<script src="https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js"></script>
-</html>
+</html>
\ No newline at end of file
diff --git a/pages/game.html b/pages/game.html
index 3f20291..0557df4 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -1,256 +1,245 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<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/global.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>
-
-		<!-- 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"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
-			integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
-			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		/>
-
-		<!-- Title of the game -->
-		<title>Dots & Boxes Game</title>
-	</head>
-
-	<body>
-		<script src="/js/global.js"></script>
-
-		<video autoplay muted class="video" loop id="myVideo">
-			<source src="/assets/videos/1.mp4" type="video/mp4" />
-		</video>
-
-		<div id="playerSetup">
-			<div id="playerForm">
-				<div id="playerInputs">
-					<!-- Player input fields will be added here -->
-				</div>
-				<div id="btn-contain">
-					<button id="play-btn">Play Now</button>
-
-					<a id="back-btn" href="../index.html">
-						<svg
-							height="16"
-							width="16"
-							xmlns="http://www.w3.org/2000/svg"
-							version="1.1"
-							viewBox="0 0 1024 1024"
-						>
-							<path
-								d="M874.690416 495.52477c0 11.2973-9.168824 20.466124-20.466124 20.466124l-604.773963 0 188.083679 188.083679c7.992021 7.992021 7.992021 20.947078 0 28.939099-4.001127 3.990894-9.240455 5.996574-14.46955 5.996574-5.239328 0-10.478655-1.995447-14.479783-5.996574l-223.00912-223.00912c-3.837398-3.837398-5.996574-9.046027-5.996574-14.46955 0-5.433756 2.159176-10.632151 5.996574-14.46955l223.019353-223.029586c7.992021-7.992021 20.957311-7.992021 28.949332 0 7.992021 8.002254 7.992021 20.957311 0 28.949332l-188.073446 188.073446 604.753497 0C865.521592 475.058646 874.690416 484.217237 874.690416 495.52477z"
-							></path>
-						</svg>
-						<span>Back</span>
-					</a>
-				</div>
+<head>
+	<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/global.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>
+
+	<!-- 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" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+		integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+		crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+	<!-- Title of the game -->
+	<title>Dots & Boxes Game</title>
+</head>
+
+<body>
+	<script src="/js/global.js"></script>
+
+	<video autoplay muted class="video" loop id="myVideo">
+		<source src="/assets/videos/1.mp4" type="video/mp4" />
+	</video>
+
+	<div id="playerSetup">
+		<div id="playerForm">
+			<div id="playerInputs">
+				<!-- Player input fields will be added here -->
 			</div>
-		</div>
-
-		<div id="avatarWindow">
-			<h2>Select Avatar</h2>
-			<div id="choices"></div>
-			<div id="buttons">
-				<button id="closeWindow">Cancel</button>
-				<button id="saveAvatar">
-					Save <i class="fa-solid fa-floppy-disk"></i>
-				</button>
+			<div id="btn-contain">
+				<button id="play-btn">Play Now</button>
+
+				<a id="back-btn" href="../index.html">
+					<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" version="1.1"
+						viewBox="0 0 1024 1024">
+						<path
+							d="M874.690416 495.52477c0 11.2973-9.168824 20.466124-20.466124 20.466124l-604.773963 0 188.083679 188.083679c7.992021 7.992021 7.992021 20.947078 0 28.939099-4.001127 3.990894-9.240455 5.996574-14.46955 5.996574-5.239328 0-10.478655-1.995447-14.479783-5.996574l-223.00912-223.00912c-3.837398-3.837398-5.996574-9.046027-5.996574-14.46955 0-5.433756 2.159176-10.632151 5.996574-14.46955l223.019353-223.029586c7.992021-7.992021 20.957311-7.992021 28.949332 0 7.992021 8.002254 7.992021 20.957311 0 28.949332l-188.073446 188.073446 604.753497 0C865.521592 475.058646 874.690416 484.217237 874.690416 495.52477z">
+						</path>
+					</svg>
+					<span>Back</span>
+				</a>
 			</div>
 		</div>
+	</div>
+
+	<div id="avatarWindow">
+		<h2>Select Avatar</h2>
+		<div id="choices"></div>
+		<div id="buttons">
+			<button id="closeWindow">Cancel</button>
+			<button id="saveAvatar">
+				Save <i class="fa-solid fa-floppy-disk"></i>
+			</button>
+		</div>
+	</div>
 
-		<div id="layout">
-			<!-- Menu -->
-			<div id="menu">
-				<div class="menu-header">
-					<h2>Settings</h2>
+	<div id="layout">
+		<!-- Menu -->
+		<div id="menu">
+			<div class="menu-header">
+				<h2>Settings</h2>
+			</div>
+			<div class="menu-body">
+				<div class="menu-links">
+					<a href="../index.html" id="home" class="link-btn">
+						<i class="fa-solid fa-house"></i> Home
+					</a>
+					<a href="../pages/404.html" id="leaderboard" class="link-btn">
+						<i class="fa-solid fa-people-group"></i> Leaderboard
+					</a>
+					<button id="help" class="link-btn">
+						Help <i class="fa-solid fa-circle-question"></i>
+					</button>
+					<button id="surrender" class="link-btn">
+						Surrender <i class="fa-solid fa-flag"></i>
+					</button>
 				</div>
-				<div class="menu-body">
-					<div class="menu-links">
-						<a href="../index.html" id="home" class="link-btn">
-							<i class="fa-solid fa-house"></i> Home
-						</a>
-						<a href="../pages/404.html" id="leaderboard" class="link-btn">
-							<i class="fa-solid fa-people-group"></i> Leaderboard
-						</a>
-						<button id="help" class="link-btn">
-							Help <i class="fa-solid fa-circle-question"></i>
-						</button>
-						<button id="surrender" class="link-btn">
-							Surrender <i class="fa-solid fa-flag"></i>
-						</button>
+				<div class="menu-buttons">
+					<div id="restart" class="icon-btn">
+						<i class="fa-solid fa-arrow-rotate-right"></i>
+					</div>
+					<div id="state" class="icon-btn">
+						<i class="fa-solid fa-play"></i>
 					</div>
-					<div class="menu-buttons">
-						<div id="restart" class="icon-btn">
-							<i class="fa-solid fa-arrow-rotate-right"></i>
-						</div>
-						<div id="state" class="icon-btn">
-							<i class="fa-solid fa-play"></i>
-						</div>
-						<div id="music-toggle" class="icon-btn">
-							<i class="fa-solid fa-volume-high"></i>
-						</div>
+					<div id="music-toggle" class="icon-btn">
+						<i class="fa-solid fa-volume-high"></i>
 					</div>
 				</div>
-				<i class="fas fa-xmark" id="close-menu"></i>
 			</div>
+			<i class="fas fa-xmark" id="close-menu"></i>
+		</div>
 
-			<!-- Game  -->
-			<div class="game-wrapper">
-				<!-- Players Turn-->
-				<div class="player-turn">
-					<div class="bg"><span class="name">PlayerX</span>'s turn</div>
-				</div>
-
-				<!-- Game Board -->
-				<div class="game-container">
-					<div class="board"></div>
-					<div id="setting-btn">Settings</div>
-				</div>
+		<!-- Game  -->
+		<div class="game-wrapper">
+			<!-- Players Turn-->
+			<div class="player-turn">
+				<div class="bg"><span class="name">PlayerX</span>'s turn</div>
 			</div>
 
-			<!-- Scoreboard -->
-			<div class="scoreboard-container">
-				<h2>Scoreboard</h2>
-				<div class="scoreboard">
-					<!-- Scoreboard content will be dynamically added here -->
-				</div>
+			<!-- Game Board -->
+			<div class="game-container">
+				<div class="board"></div>
+				<div id="setting-btn">Settings</div>
 			</div>
 		</div>
 
-		<!-- Winner Overlay -->
-		<div id="win-overlay" class="overlay">
-			<!-- Overlay content -->
-			<div class="overlay-content">
-				<a href="../index.html">Go Back to Home</a>
-				<a href="../pages/game.html">Play Again</a>
-				<a href="../pages/leaderboard.html">See Leaderboard</a>
+		<!-- Scoreboard -->
+		<div class="scoreboard-container">
+			<h2>Scoreboard</h2>
+			<div class="scoreboard">
+				<!-- Scoreboard content will be dynamically added here -->
 			</div>
 		</div>
-
-		<!-- Game Tour -->
-		<div id="tour-overlay">
-			<div class="overlay-content">
-				<div class="tour-step step-1">
-					<h3>Game Tour</h3>
-					<p>
-						Welcome to the Dot-box game presented by Chrome Gaming! <br /><br />
-						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.
-						Click the "Next" button to start the tour.
-					</p>
-					<div class="tour-controls">
-						<button id="next-step" class="button">Next</button>
-						<button id="skip-tour" class="button">Skip Tour</button>
-					</div>
+	</div>
+
+	<!-- Winner Overlay -->
+	<div id="win-overlay" class="overlay">
+		<!-- Overlay content -->
+		<div class="overlay-content">
+			<a href="../index.html">Go Back to Home</a>
+			<a href="../pages/game.html">Play Again</a>
+			<a href="../pages/leaderboard.html">See Leaderboard</a>
+		</div>
+	</div>
+
+	<!-- Game Tour -->
+	<div id="tour-overlay">
+		<div class="overlay-content">
+			<div class="tour-step step-1">
+				<h3>Game Tour</h3>
+				<p>
+					Welcome to the Dot-box game presented by Chrome Gaming! <br /><br />
+					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.
+					Click the "Next" button to start the tour.
+				</p>
+				<div class="tour-controls">
+					<button id="next-step" class="button">Next</button>
+					<button id="skip-tour" class="button">Skip Tour</button>
 				</div>
+			</div>
 
-				<div class="tour-step step-2">
-					<h3>Step 1</h3>
-					<p>
-						This is Game Board! This is where the game is displayed, Play here
-						by connecting the lines.
-					</p>
-					<div class="tour-controls">
-						<button id="prev-step" class="button">Previous</button>
-						<button id="next-step" class="button">Next</button>
-						<button id="skip-tour" class="button">Skip Tour</button>
-					</div>
+			<div class="tour-step step-2">
+				<h3>Step 1</h3>
+				<p>
+					This is Game Board! This is where the game is displayed, Play here
+					by connecting the lines.
+				</p>
+				<div class="tour-controls">
+					<button id="prev-step" class="button">Previous</button>
+					<button id="next-step" class="button">Next</button>
+					<button id="skip-tour" class="button">Skip Tour</button>
 				</div>
+			</div>
 
-				<div class="tour-step step-3">
-					<h3>Step 2</h3>
-					<p>
-						Here's where the player's score is displayed, Keep track of your
-						score as you play the game
-					</p>
-					<div class="tour-controls">
-						<button id="prev-step" class="button">Previous</button>
-						<button id="next-step" class="button">Next</button>
-						<button id="skip-tour" class="button">Skip Tour</button>
-					</div>
+			<div class="tour-step step-3">
+				<h3>Step 2</h3>
+				<p>
+					Here's where the player's score is displayed, Keep track of your
+					score as you play the game
+				</p>
+				<div class="tour-controls">
+					<button id="prev-step" class="button">Previous</button>
+					<button id="next-step" class="button">Next</button>
+					<button id="skip-tour" class="button">Skip Tour</button>
 				</div>
+			</div>
 
-				<div class="tour-step step-4">
-					<h3>Step 3</h3>
-					<p>Here you can see the player's turn indicator.</p>
-					<div class="tour-controls">
-						<button id="prev-step" class="button">Previous</button>
-						<button id="next-step" class="button">Next</button>
-						<button id="skip-tour" class="button">Skip Tour</button>
-					</div>
+			<div class="tour-step step-4">
+				<h3>Step 3</h3>
+				<p>Here you can see the player's turn indicator.</p>
+				<div class="tour-controls">
+					<button id="prev-step" class="button">Previous</button>
+					<button id="next-step" class="button">Next</button>
+					<button id="skip-tour" class="button">Skip Tour</button>
 				</div>
+			</div>
 
-				<div class="tour-step step-5">
-					<h3>Step 4</h3>
-					<p>
-						This is the live draggable scoreboard. Hold and move to your desired
-						place
-					</p>
-					<div class="tour-controls">
-						<button id="prev-step" class="button">Previous</button>
-						<button id="next-step" class="button">Next</button>
-						<button id="skip-tour" class="button">Skip Tour</button>
-					</div>
+			<div class="tour-step step-5">
+				<h3>Step 4</h3>
+				<p>
+					This is the live draggable scoreboard. Hold and move to your desired
+					place
+				</p>
+				<div class="tour-controls">
+					<button id="prev-step" class="button">Previous</button>
+					<button id="next-step" class="button">Next</button>
+					<button id="skip-tour" class="button">Skip Tour</button>
 				</div>
+			</div>
 
-				<div class="tour-step step-6">
-					<h3>Step 5</h3>
-					<p>
-						This is the home button. Click to go back to the homepage. Besides
-						it there is a 30s timer for each player turn, you have to make a
-						move before time gets up!
-					</p>
-					<div class="tour-controls">
-						<button id="prev-step" class="button">Previous</button>
-						<button id="next-step" class="button">Next</button>
-						<button id="skip-tour" class="button">Skip Tour</button>
-					</div>
+			<div class="tour-step step-6">
+				<h3>Step 5</h3>
+				<p>
+					This is the home button. Click to go back to the homepage. Besides
+					it there is a 30s timer for each player turn, you have to make a
+					move before time gets up!
+				</p>
+				<div class="tour-controls">
+					<button id="prev-step" class="button">Previous</button>
+					<button id="next-step" class="button">Next</button>
+					<button id="skip-tour" class="button">Skip Tour</button>
 				</div>
+			</div>
 
-				<div class="tour-step step-7">
-					<h3>Step 6</h3>
-					<p>
-						This is the sound toggle button. Click to mute/unmute the sound.
-						Besides it there is a reset/restart button.
-					</p>
-					<div class="tour-controls">
-						<button id="prev-step" class="button">Previous</button>
-						<button id="next-step" class="button">Next</button>
-						<button id="skip-tour" class="button">Skip Tour</button>
-					</div>
+			<div class="tour-step step-7">
+				<h3>Step 6</h3>
+				<p>
+					This is the sound toggle button. Click to mute/unmute the sound.
+					Besides it there is a reset/restart button.
+				</p>
+				<div class="tour-controls">
+					<button id="prev-step" class="button">Previous</button>
+					<button id="next-step" class="button">Next</button>
+					<button id="skip-tour" class="button">Skip Tour</button>
 				</div>
+			</div>
 
-				<div class="tour-step step-1">
-					<h3>Step 7</h3>
-					<p>Now you are ready to start the game. Have fun!</p>
-					<div class="tour-controls">
-						<button id="prev-step" class="button">Previous</button>
-						<button id="close-tour" class="button">Close Tour</button>
-					</div>
+			<div class="tour-step step-1">
+				<h3>Step 7</h3>
+				<p>Now you are ready to start the game. Have fun!</p>
+				<div class="tour-controls">
+					<button id="prev-step" class="button">Previous</button>
+					<button id="close-tour" class="button">Close Tour</button>
 				</div>
 			</div>
 		</div>
-		<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
-	</body>
-</html>
+	</div>
+	<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file