From 8cbae666f07266396a9ba849634b1ff37a3972e6 Mon Sep 17 00:00:00 2001
From: Solanki Sarkar <158484284+solanki505@users.noreply.github.com>
Date: Sat, 8 Jun 2024 11:38:35 +0530
Subject: [PATCH] [New Feature]: adding amodal feedback form in home page #56

---
 index.html | 109 +++++++++++++++++++-
 style.css  | 298 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 406 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d44b3c3..efd4327 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,10 @@
 	<meta property="og:url" content="http://www.foumartgames.com/games/FormationAbsent/" />
 	<meta property="og:description"
 		content="Formation Absent is turn-based puzzler made for js13k games competition 2017." />
-
+		<link
+		rel="stylesheet"
+		href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+	  />
 	<meta name="twitter:card" content="summary" />
 	<meta name="twitter:title" content="Formation Absent by FoumartGames" />
 	<meta name="twitter:description"
@@ -55,6 +58,110 @@
 			<div id="titlediv" class="c">
 				<div id="logo" style="top:12%;left:50%;margin-left:-225px;"></div>
 				<div id="levelsbtns" class="c"></div>
+				<button id="CommentBtn" aria-label="Toggle Comment Form"><i class="fas fa-comment"></i></button>
+				<!-- Comment form -->
+			
+				<!-- Modal background -->
+				<div id="modalBackground">
+				  <!-- Comment form -->
+				  <div id="commentForm">
+					<form id="feedback-form">
+					  <label for="userComment" style="color: rgb(229, 230, 239);">Your Feedback:</label>
+					  <div class="form-group">
+						<div class="icon" >
+						  <i class="fas fa-user"></i>
+						</div>
+						<input type="text" id="name" onfocus="changeColor()" placeholder="Your Name" name="name" required style="
+						width: 250px;
+					">
+					  </div>
+					  <div class="form-group">
+						<div class="icon">
+						  <i class="fas fa-envelope"></i>
+						</div>
+						<input type="email" id="email" onfocus="changeColor()" placeholder="Email Id" required style="
+						width: 250px;
+					">
+					  </div>
+					  <div class="form-group">
+						<textarea cols="30" rows="5" placeholder="Your Feedback" required></textarea>
+					  </div>
+					  <div class="rating">
+						<h2>Rate us:</h2>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+					  </div>
+					  <button id="ll" style="color: blue;">Submit</button>
+					</form>
+				  </div>
+				</div>
+			
+				<script>
+				   const ratingStars = [...document.getElementsByClassName("rating__star")];
+			
+			function executeRating(stars) {
+			  const starClassActive = "rating__star fas fa-star";
+			  const starClassInactive = "rating__star far fa-star";
+			  const starsLength = stars.length;
+			  let i;
+			  stars.map((star) => {
+				star.onclick = () => {
+				  i = stars.indexOf(star);
+			
+				  if (star.className===starClassInactive) {
+					for (i; i >= 0; --i) stars[i].className = starClassActive;
+				  } else {
+					for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
+				  }
+				};
+			  });
+			}
+			executeRating(ratingStars);
+			  
+			 
+				  const ratingInputs = document.querySelectorAll('input[name="rating"]');
+			  ratingInputs.forEach((input) => {
+				input.addEventListener("click", function() {
+				  const value = parseInt(input.value);
+				  for (let i = 1; i <= value; i++) {
+					document.getElementById(`star${i}`).checked = true;
+				  }
+				  for (let i = value + 1; i <= 5; i++) {
+					document.getElementById(`star${i}`).checked = false;
+				  }
+				});
+			  });
+				  document.getElementById("CommentBtn").addEventListener("click", function () {
+					document.getElementById("modalBackground").style.display = "flex";
+				  });
+				 
+				  // Close the form when clicking outside of it (optional)
+				  document.getElementById("modalBackground").addEventListener("click", function (event) {
+					if (event.target === this) {
+					  this.style.display = "none";
+					}
+				  });
+				  let commentForm = document.getElementById("commentForm");
+			let modalBackground = document.getElementById("modalBackground");
+			
+			document.getElementById("CommentBtn").addEventListener("click", function(event) {
+			  if (commentForm.style.display === "none") {
+				commentForm.style.display = "block";
+				modalBackground.style.display = "flex";
+			  } else {
+				commentForm.style.display = "none";
+				modalBackground.style.display = "none";
+			  }
+			});
+			
+			document.getElementById("ll").addEventListener("click", function(event) {
+			  commentForm.style.display = "none";
+			  modalBackground.style.display = "none";
+			});
+				</script>
 				<button class="y bb i" onClick="messSelect(103)" style="bottom:7%;left:15px;">
 					<div id="soundbtn" style="position:relative; right:10px;"></div>
 				</button>
diff --git a/style.css b/style.css
index 9fd3fd9..9756195 100644
--- a/style.css
+++ b/style.css
@@ -467,3 +467,301 @@ img {
 }
 
 /* Preloader Css Ends */
+.contact h2 {
+  margin-bottom: 3rem;
+}
+
+.contact form {
+  max-width: 70rem;
+  margin: 1rem auto;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+.contact form .input-box {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.contact form .input-box input,
+.contact form textarea {
+  width: 100%;
+  padding: 1.5rem;
+  font-size: 1.6rem;
+  color: rgb(206, 255, 206);
+  background: var(--second-color);
+  border-radius: 0.8rem;
+  margin: 0.7rem 0;
+  border-radius: 20px;
+  background: #053314;
+  box-shadow: inset 23px 23px 21px #04240e, inset -23px -23px 21px #07421a;
+}
+.contact form .input-box input::placeholder,
+.contact form textarea::placeholder {
+  color: rgb(206, 255, 206);
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.contact form .input-box input {
+  width: 49%;
+}
+
+.contact form textarea {
+  resize: none;
+}
+.contact form .btn {
+  margin-top: 2rem;
+  cursor: pointer;
+}
+
+#review-btn{
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px 0 0 5px;
+  background-color:  #B19222;
+  color: white;
+  font-size: 16px;
+  writing-mode: vertical-rl;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  position: absolute;
+  right: 0; /* Attach to the right edge */
+  top: 50%; /* Vertically center */
+  transform: translateY(-50%); /* Adjust for centering */
+  white-space: nowrap; /* Prevent text from wrapping */
+  
+  
+
+}
+#review-btn:hover{
+  background-color:#B19222 ;
+}
+.button-container {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 200; /* Ensure it stays on top */
+}
+
+/* Modal styles */
+.modal {
+  
+  display: none;
+  flex-direction: column;
+  /* flex-wrap: nowrap; */
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 101;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  /*overflow: auto;*/
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.modal-content {
+  background-color: #ffffff;
+  /* margin: 10% auto; */
+  padding: 50px;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  position: relative;
+    text-align: center;
+}
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.close:hover,
+.close:focus {
+  color: #000;
+}
+.modal-content h2 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  text-align: center;
+  color:black;
+  font-size: 24px;
+}
+
+.form-group {
+  position: relative;
+  margin-bottom: 20px;
+}
+.form-group .icon {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  background-color: #8a2be2;
+  background-color: rgb(75, 179, 75);
+  color: white;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 10px 10px 10px 40px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 14px;
+}
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+    color: #bbb;
+}
+.form-group textarea {
+  height: 80px;
+  padding: 10px;
+}
+
+.modal-content button[type="submit"] {
+  background: linear-gradient(to right, #8a2be2, #f163ed);
+  background: linear-gradient(to right, rgb(75, 179, 75), rgb(42, 228, 42));
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 16px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.modal-content button[type="submit"]:hover {
+  background: linear-gradient(to right, #f55ef0, #8a2be2);
+  background: linear-gradient(to right, rgb(63, 220, 63), rgb(20, 124, 20));
+}
+
+
+.modal-content button[type="submit"]:focus {
+  outline: none;
+}
+.close:hover {
+  color: #000;
+}
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+/* rating stars */
+.rating {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  bottom: 10px;
+}
+.rating h2 {
+  margin: 0;
+  margin-right: 10px;
+  font-size: 18px;
+}
+.rating__star {
+  font-size: 24px;
+  margin: 0 5px;
+  cursor: pointer;
+  color: #dabd18b2;
+}
+.rating__star:hover,
+.rating__star.active {
+    color: #ffc107;
+}
+/* comment */
+#CommentBtn {
+  position: fixed;
+  bottom: 140px;
+  right: 50px;
+  width: 40px;
+  height: 40px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 24px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.4;
+  transition: 500ms;
+}
+
+#CommentBtn:hover {
+  background-color: #0056b3;
+  opacity: 1;
+}
+
+
+/* Style for the modal background */
+#modalBackground {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* Style for the comment form */
+#commentForm {
+  max-width: 500px;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  background-color: rgb(61, 61, 235);
+  z-index: 1001;
+}
+
+#commentForm label {
+  display: block;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+#commentForm textarea {
+  width: 96%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  resize: vertical;
+}
+
+#commentForm button[type="submit"] {
+  background-color: #28a745;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+#commentForm button[type="submit"]:hover {
+  background-color: #218838;
+}
+#ll{
+  bottom: 5px;
+}