index.html

<!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" />
		<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>


<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" />
	<script src="./js/emoji.js"></script>
	<title>Dots & Boxes Game</title>
</head>

<body>
	<script src="./js/global.js"></script>
	<script src="./js/nav.footer.js"></script>

	<audio id="background-music" autoplay loop>
		<source src="./assets/sounds/bgMusic.mp3" type="audio/mpeg" />
	</audio>

	<video autoplay muted class="video" loop id="myVideo">
		<source src="./assets/videos/1.mp4" type="video/mp4" />
	</video>

	<div id="home-nav-placeholder"></div>

	<div class="settings">
		<div class="whole-background">

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

				<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="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>

		<!-- Floating Social Media Icon -->
		 <div class="floating-social">
			<a href="https://twitter.com" target="_blank" class="social-icon"><i class="fab fa-twitter"></i></a>
			<a href="https://instagram.com" target="_blank" class="social-icon"><i class="fab fa-instagram"></i></a>
			<a href="https://facebook.com" target="_blank" class="social-icon"><i class="fab fa-facebook"></i></a>
			<a href="https://linkedin.com" target="_blank" class="social-icon"><i class="fab fa-linkedin"></i></a>
    <!-- Add more icons as needed -->
	</div>

		<!-- <div class="flex">
			<div class="board"></div>
			<div class="score">
				<div class="players"></div>
				<video autoplay muted class="video" loop id="myVideo2">
					<source src="/assets/videos/2.mp4" type="video/mp4" />
				</video>
				<div class="player-turn">
					<div class="bg"><span class="name">PlayerX</span>'s turn</div>
				</div>
				<div class="flex-btn">
					<button class="mute-btn button">Mute</button>
					<button class="restart-btn button">Restart</button>
				</div>
			</div>
		</div> -->

	</div>
	<div id="footer-placeholder"></div>

	<script src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js" async></script>

	<script src="https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js"></script>
</body>

</html>