From 43fbbeb9203772c4ec86b7d5910b8e31731b5dbe Mon Sep 17 00:00:00 2001
From: SWARAJ DAS <151845349+swaraj-das@users.noreply.github.com>
Date: Sun, 10 Nov 2024 13:14:28 +0530
Subject: [PATCH] Revert "Add a pop up dialog box for Polls/Survey done !"

---
 index.html |  23 +--------
 script.js  |  76 ++++------------------------
 style.css  | 146 ++++++++++++++++-------------------------------------
 3 files changed, 54 insertions(+), 191 deletions(-)

diff --git a/index.html b/index.html
index 3d42abb..8dc5692 100644
--- a/index.html
+++ b/index.html
@@ -846,28 +846,7 @@ <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>
 
 
diff --git a/script.js b/script.js
index daaba1b..f1bb11d 100644
--- a/script.js
+++ b/script.js
@@ -525,71 +525,15 @@ function displayVisitorCount() {
 // Call the display function when the page loads
 document.addEventListener('DOMContentLoaded', displayVisitorCount);
 
-poll
+//Name validation function on index page , Contact us section
 
-document.addEventListener('DOMContentLoaded', function() {
-  // Check if the user has already voted in this session
-  const hasVoted = sessionStorage.getItem('hasVoted');
-
-  // 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
-      }
-  });
+const nameInput = document.getElementById('name');
 
-  // 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
+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('');
+    }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index c191e14..46d51f1 100644
--- a/style.css
+++ b/style.css
@@ -2259,122 +2259,62 @@ button {
   }
 }
 
-
-
-
-body {
-
-    font-family: Arial, sans-serif;
-
-}
-
-
-/* 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 */
-
-}
-
-.popups-content {
-
-    background: linear-gradient(#ff459f, #ff9532);
-    padding: 20px;
-    border-radius: 5px;
-    max-width: 400px;
-    text-align: center;
-
-}
-
-/* Set poll options to stack vertically */
-#pollOptions {
-
-    display: flex;
-    flex-direction: column; /* Stack buttons vertically */
-    align-items: center; /* Center the buttons */
-
-}
-
-.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;
-
+.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 */
 }
 
-.poll-button {
-
-    background-color: rgba(16, 22, 26, .4); /* Green */
-
+.most-loved-products h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  color: #000;
 }
 
-.poll-button:hover {
-
-    background-color: #be264c; /* Darker green */
-    border: none;  
-
+.product-slider {
+  display: flex;
+  gap: 1.5rem;
+  animation: slide 20s linear infinite;
 }
 
-.poll-button.selected {
-
-    background-color: #b92248; /* Blue for selected */
-    border: 1px solid black !important;     /* 1px black border when selected */
-    outline: none !important;    
-
+.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;
 }
 
-.vote-button {
-
-    background: linear-gradient(135deg, #c7c400, #ff393d, #ff3c76, #f5f100b9);
-    border: 1px solid #000000;
-
+.product-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
 }
 
-
-.vote-button:hover {
-
-    background-color: #d32f2f; /* Darker red */
-
+.product-card img {
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
 }
 
-.uppercase {
-
-
-    font-size: 18px;
-    color: #000000;
-
+.product-card h3 {
+  font-size: 1rem;
+  color: #ffffff;
+  margin: 0.5rem 0 0;
+  font-weight: 600;
 }
 
-#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;
-
+/* 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 */
+  }
 }
 
-