Add a pop up dialog box for Polls/Survey done !

index.html

@@ -846,7 +846,28 @@ <h2>Feedback Form</h2>
 
     </script>
     </div>
-
+ poll
+
+    <!-- Poll Pop-up -->
+<div class="popups" id="pollPopup">
+    <div class="popups-content">
+        <h2 class="uppercase">What type of Gaming Accessory are you Most Interested in?</h2>
+        <div id="pollOptions">
+            <button class="poll-button" data-value="Game Controllers">Game Controllers</button>
+            <button class="poll-button" data-value="VR Accessories">VR Accessories</button>
+            <button class="poll-button" data-value="Gaming Keyboard">Gaming Keyboard</button>
+            <button class="poll-button" data-value="Gaming Headphones">Gaming Headphones</button>
+            <button class="poll-button" style="display: none;" data-value="Option4">Option4</button>
+            <button class="poll-button" style="display: none;" data-value="Option5">Option5</button>
+        </div>
+        <button id="voteButton" class="vote-button">Vote</button>
+        <p id="result"></p> <!-- Result display -->
+    </div>
+</div>
+
+<script src="script.js"></script> <!-- Link to the JavaScript file -->
+
+main
 </body>
 
 

script.js

@@ -520,15 +520,71 @@ function displayVisitorCount() {
 // Call the display function when the page loads
 document.addEventListener('DOMContentLoaded', displayVisitorCount);
 
-//Name validation function on index page , Contact us section
+poll
 
-const nameInput = document.getElementById('name');
+document.addEventListener('DOMContentLoaded', function() {
+  // Check if the user has already voted in this session
+  const hasVoted = sessionStorage.getItem('hasVoted');
 
-nameInput.addEventListener('input', () => {
-    const name = nameInput.value.trim();
-    if (!/^[a-zA-Z ]+$/.test(name)) {
-        nameInput.setCustomValidity('Numbers and symbols are not allowed');
-    } else {
-        nameInput.setCustomValidity('');
-    }
-});
+  // Show the poll popup after a delay, only if the user hasn't voted
+  function checkAndDisplayPollPopup() {
+      if (!hasVoted) {
+          document.getElementById('pollPopup').style.display = 'flex'; // Show poll
+      }
+  }
+
+  // Set timeout for poll display
+  setTimeout(checkAndDisplayPollPopup, 10000);
+
+  // Manage user selections and votes
+  const pollButtons = document.querySelectorAll('.poll-button[data-value]');
+  let selectedValue = '';
+
+  // Handle clicks on poll buttons
+  pollButtons.forEach(button => {
+      button.addEventListener('click', function() {
+          pollButtons.forEach(btn => btn.classList.remove('selected')); // Clear previous selections
+          button.classList.add('selected'); // Highlight selected button
+          selectedValue = button.getAttribute('data-value'); // Store selected value
+      });
+  });
+
+  // Handle voting process
+  document.getElementById('voteButton').addEventListener('click', function() {
+      if (selectedValue) {
+          document.getElementById('result').innerHTML = `You voted for: ${selectedValue}<br>Thank you!`; // Show result
+          sessionStorage.setItem('hasVoted', 'true'); // Save voting status
+          setTimeout(() => {
+              document.getElementById('pollPopup').style.display = 'none'; // Hide poll
+          }, 2000);
+      } else {
+          alert("Please select an option!"); // Alert if no option is selected
+      }
+  });
+
+  // Function to manage button focus for accessibility
+  function handleFocus(event) {
+      event.target.style.border = '2px solid #0058ff'; // Optional highlight effect
+  }
+
+  // Attach focus event for accessibility improvement
+  pollButtons.forEach(button => {
+      button.addEventListener('focus', handleFocus);
+  });
+
+  // Function to remove focus style
+  function handleBlur(event) {
+      event.target.style.border = ''; // Remove highlight effect
+  }
+
+  // Attach blur event for accessibility improvement
+  pollButtons.forEach(button => {
+      button.addEventListener('blur', handleBlur);
+  });
+
+  // Log when the script has loaded
+  console.log("Poll script initialized and ready!");
+});
+
+
+ main

style.css

@@ -2260,62 +2260,122 @@ button {
   }
 }
 
-.most-loved-products {
-  text-align: center;
-  padding: 2rem;
-  background: linear-gradient(120deg, #f7562d, #f533a4, rgb(235, 235, 82));
-  color: #0a0a0a;
-  overflow: hidden; /* Hide overflow for sliding effect */
+
+
+
+body {
+
+    font-family: Arial, sans-serif;
+
 }
 
-.most-loved-products h2 {
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
-  color: #000;
+
+/* Polls Popup Styles */
+.popups {
+
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+    justify-content: center; /* Center the popup */
+    align-items: center; /* Center the popup */
+    z-index: 1000; /* Sit on top */
+
 }
 
-.product-slider {
-  display: flex;
-  gap: 1.5rem;
-  animation: slide 20s linear infinite;
+.popups-content {
+
+    background: linear-gradient(#ff459f, #ff9532);
+    padding: 20px;
+    border-radius: 5px;
+    max-width: 400px;
+    text-align: center;
+
 }
 
-.product-card {
-  min-width: 150px; /* Ensures each card is the same width */
-  background-color: #2b2b2b;
-  padding: 1rem;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+/* Set poll options to stack vertically */
+#pollOptions {
+
+    display: flex;
+    flex-direction: column; /* Stack buttons vertically */
+    align-items: center; /* Center the buttons */
+
 }
 
-.product-card:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+.poll-button,
+.vote-button {
+
+    display: block; /* Change to block for full-width */
+    margin: 5px 0; /* Add vertical margin */
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    width: 100%; /* Full width */
+    text-align: center;
+    font-size: 15px;
+    background: #1c525f;
+
 }
 
-.product-card img {
-  width: 100%;
-  height: auto;
-  border-radius: 4px;
-  margin-bottom: 0.5rem;
+.poll-button {
+
+    background-color: rgba(16, 22, 26, .4); /* Green */
+
 }
 
-.product-card h3 {
-  font-size: 1rem;
-  color: #ffffff;
-  margin: 0.5rem 0 0;
-  font-weight: 600;
+.poll-button:hover {
+
+    background-color: #be264c; /* Darker green */
+    border: none;  
+
 }
 
-/* Keyframes for sliding effect */
-@keyframes slide {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  50% {
-    transform: translateX(calc(-40px * 7)); /* Adjust based on the total width of all items */
-  }
+.poll-button.selected {
+
+    background-color: #b92248; /* Blue for selected */
+    border: 1px solid black !important;     /* 1px black border when selected */
+    outline: none !important;    
+
+}
+
+.vote-button {
+
+    background: linear-gradient(135deg, #c7c400, #ff393d, #ff3c76, #f5f100b9);
+    border: 1px solid #000000;
+
 }
 
+
+.vote-button:hover {
+
+    background-color: #d32f2f; /* Darker red */
+
+}
+
+.uppercase {
+
+
+    font-size: 18px;
+    color: #000000;
+
+}
+
+#result {
+
+    margin-top: 10px; /* Space above result text */
+    word-wrap: break-word; /* Allow long text to wrap */
+    overflow: hidden; /* Prevent overflow */
+    max-height: 50px; /* Limit height */
+    color: #000000; /* Text color */
+    text-align: center; /* Center align the text */
+    font-size: 15px;
+
+}
+
+