Merge branch 'main' into Button-hoverings

ChromeGaming · Jul 1, 2024 · ec08079 · ec08079
2 parents 9956125 + 5c40890
commit ec08079
Show file tree

Hide file tree

Showing 10 changed files with 348 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 ![Community](https://github.com/GameSphere-MultiPlayer/Physi-c-Tech/assets/98798977/e79af9da-814e-487e-8a9a-85947384d3b2)
-
+ <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />
 # About Our Project 💻
 <div align="center">
 <img src="https://forthebadge.com/images/badges/built-with-love.svg" />
@@ -18,8 +18,21 @@
   <img src="https://img.shields.io/github/contributors/GameSphere-MultiPlayer/Community-Page?style=for-the-badge" />
   <img src="https://img.shields.io/github/last-commit/GameSphere-MultiPlayer/Community-Page?style=for-the-badge" />
   </div>
+ <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />
+
+# 💻 Tech Stack Uses
+<!-- jQuery -->
+<img src="https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white" alt="jQuery logo">
+
+<!-- Bootstrap -->
+<img src="https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white" alt="Bootstrap logo">
+
+<!-- JavaScript -->
+<img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript logo">
 
-   # How to initialise the Project in your local environment
+ <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />
+
+ # How to initialise the Project in your local environment
 
   1. Fork the repo
   2. Clone it using ``git clone <url>`` command
@@ -38,8 +51,10 @@
 
      ### If Nodemon is not installed , run 
           npm install nodemon -g
-     
-  # How to make a PR in a Project 🟢
+
+ <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />     
+
+# How to make a PR in a Project 🟢
 
 If you are interested to contribute in this project how to start contribute
 <!-- in detail -->
@@ -92,8 +107,9 @@ To push your changes, run the following command in your terminal:
 9. Create a PR.
 
 __________________________________________________________________________________________________________________________________________________________________
+ <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />
 
-## Alternatively Using GitHub Desktop
+# Alternatively Using GitHub Desktop
 
 1. Open GitHub Desktop and log in to your GitHub account.
 
@@ -113,6 +129,8 @@ ________________________________________________________________________________
 
 **Note:** In order to create a pull request, you must have a fork of the original repository in your GitHub account and you must have made the changes in that forked repository.
 
+ <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />
+ 
 <br>
 <br>
 <div>
@@ -129,4 +147,4 @@ ________________________________________________________________________________
 <a href="https://github.com/ChromeGaming/Community-Page/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=ChromeGaming/Community-Page" />
 </a>
-</center>
+</center>
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -469,12 +469,35 @@ body {
   background-size: cover;
   transition: transform 0.4s ease; /* Slower transition duration */
 }
-
+.social-links {
+  font-size: 2rem; /* Adjust initial size here */
+}
 .small-screen-social {
   display: none;
 }
+.social-links {
+  display: flex; 
+  gap: 15px; 
+}
 
-/* Individual social media icons styling. */
+.social-icon {
+  width: 40px;
+  height: 40px;
+  background-size: contain; 
+  background-repeat: no-repeat;
+}
+.footer-column {
+position: absolute; 
+bottom: 3rem; 
+right: 8rem; 
+}
+.social-links a {
+margin-top: 1rem; 
+}
+.gmail-icon {
+  position: relative; 
+  top: -5px;
+}
 .youtube {
   background-image: url("https://cdn-icons-png.flaticon.com/128/3670/3670147.png");
 }
@@ -494,7 +517,9 @@ body {
 .instagram {
   background-image: url("https://cdn-icons-png.flaticon.com/128/3955/3955024.png");
 }
-
+.discord {
+  background-image: url("https://cdn.discordapp.com/brand/logos/Discord_Logo_Color.png");
+}
 /* Toggler button styles */
 .toggler {
   display: block;
@@ -1437,7 +1462,7 @@ h3 {
 }
 
 .share-button {
-  position: absolute;
+  position: fixed;
   border: none;
   cursor: pointer;
   z-index: 2;
@@ -1455,7 +1480,7 @@ h3 {
 
 .active .share-button,
 .share-button:hover {
-  background-color: var(#00c896);
+  background-color: var(--green);
   transform: scale(1.03);
 }
 
@@ -1866,3 +1891,94 @@ section.image {
   font-size: 14px;
   box-shadow:0px 2px 10px 6px #999999;
 }
+
+.rateus-modal {
+  display: none; /* Hidden by default */
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
+}
+
+.rateus-container {
+  max-width: 600px;
+  margin: 100px auto; /* Position the container a bit lower */
+  padding: 20px;
+  background-color: #333;
+  border-radius: 10px;
+  text-align: center;
+}
+
+.rating-slider {
+  margin: 20px 0;
+  position: relative;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.rating-slider input[type="range"] {
+  width: 100%;
+  height: 15px;
+  background: linear-gradient(90deg, #ffcc00 60%, #ddd 60%);
+  border-radius: 10px;
+  outline: none;
+  opacity: 0.9;
+  -webkit-transition: opacity .15s ease-in-out;
+  transition: opacity .15s ease-in-out;
+}
+
+.rating-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #ffcc00;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.rating-slider input[type="range"]::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #ffcc00;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+textarea {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #444; /* Darker background */
+  color: white; /* Text color */
+}
+
+
+.close {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+  color: #ffcc00;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#feedback-message {
+  margin-top: 10px;
+  color: #ffcc00; /* Feedback message color */
+}
diff --git a/public/images/envelope.png b/public/images/envelope.png
diff --git a/public/js/script.js b/public/js/script.js
@@ -295,4 +295,48 @@ subscriptionForm.addEventListener("submit", function (event) {
   } else {
     success();
   }
-});
+});
+
+// Function to update the displayed slider value
+function updateSliderValue(value) {
+  document.getElementById('slider-value').textContent = value;
+  const slider = document.getElementById('rating');
+  const color = `linear-gradient(90deg, #ffcc00 ${value * 20}%, #ddd ${value * 20}%)`;
+  slider.style.background = color;
+}
+
+// Function to handle feedback submission
+function submitFeedback(event) {
+  event.preventDefault(); // Prevent form submission from refreshing the page
+
+  const rating = document.getElementById('rating').value;
+  const feedback = document.getElementById('feedback').value;
+  const feedbackMessage = document.getElementById('feedback-message');
+
+  if (rating && feedback) {
+      // Show feedback message
+      feedbackMessage.textContent = "You have submitted the rating";
+      feedbackMessage.style.display = 'block';
+
+      // Close the Rate Us modal after submission
+      closeRateUs();
+
+      // Optional: Reset form fields
+      document.getElementById('feedback').value = '';
+      document.getElementById('rating').value = 3; // Reset slider to default value
+      updateSliderValue(3); // Reset displayed value
+
+  } else {
+      feedbackMessage.textContent = "Please select a rating and provide feedback before submitting.";
+      feedbackMessage.style.display = 'block';
+  }
+}
+
+function openRateUs() {
+  document.getElementById('rateus-modal').style.display = 'block';
+}
+
+// Function to close the Rate Us modal
+function closeRateUs() {
+  document.getElementById('rateus-modal').style.display = 'none';
+}
diff --git a/server/views/about.ejs b/server/views/about.ejs
@@ -71,6 +71,7 @@
 			<li><a href="/products" class=" links-hover">Products</a></li>
 			<li><a href="/about" class=" links-hover-currentpage">About Us</a></li>
 			<li><a href="https://chromegaming.github.io/Chrome-Gaming-Certification/" class=" links-hover">Certificate</a></li>
+			<li><a class="links-hover" onclick="openRateUs()">Rate Us</a></li>
 			<li>
 				<div class="small-screen-social">
 					<a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
@@ -99,6 +100,9 @@
 		</div>
 	</nav>
 
+	<%- include('partials/rateus') %>
+    <script src="/js/script.js"></script>
+
 	<div class="social-icons">
 		<button class="toggler"><img src="/images/social1.webp" alt=""></button>
 		<a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
@@ -250,6 +254,18 @@
 					<button id="submitButton" type="submit">SUBSCRIBE</button>
 				</form>
 
+
+				<div class="footer-column">
+					<h4>Follow us</h4>
+					<div class="social-links">
+						<a href="mailto:[email protected]" target="_blank" class="gmail-icon"><i class="fab fa-google"></i></a>
+						<a href="https://www.linkedin.com/company/chromegaming" target="_blank" <i class="fab fa-linkedin"></i></a>
+						<a href="https://discord.com/" target="_blank" class="discord-icon fab fa-discord"></a>
+						<a href="https://www.medium.com/" target="_blank" class="fab fa-medium"></a>
+						<a href="https://www.instagram.com/chromegamingon/" target="_blank" class="fab fa-instagram"></a>
+					</div>
+				</div>
+
 				<div id="customAlert" class="alert">
 					<span id="alertText"></span>
 					<button id="closeAlert">&times;</button>