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

src/index.html

@@ -13,55 +13,119 @@
   <style>
 
 
+
+body {
+
+font-family: Arial, sans-serif;
 
-    /* General Body Styling */
+}
 
-    body {
+/* Polls Popup Styles */
+.popups {
 
-cursor: none; /* Hide the default cursor */
+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 {
 
-/* Cursor Tail Effect - the small dots trailing behind */
-.cursor-tail {
+background: linear-gradient(#7ff1bc, #dee7e3), url(your-image-url.jpg);
+padding: 20px;
+border-radius: 5px;
+max-width: 400px;
+text-align: center;
 
-position: absolute;
-width: 11px;  /* Small dot */
-height: 11px;
-background-color: rgba(184, 0, 235, 0.8); /* Neon green tail */
-border-radius: 50%;
-pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
-z-index: 9999;
-transform: translate(-50%, -50%);
-animation: trail 0.5s forwards;
+}
+
+/* Set poll options to stack vertically */
+#pollOptions {
+
+display: flex;
+flex-direction: column; /* Stack buttons vertically */
+align-items: center; /* Center the buttons */
 
 }
 
+.poll-button {
+
+display: block; /* Change to block for full-width */
+margin: 5px 0; /* Add vertical margin */
+padding: 10px 15px;
+border: none;
+border-radius: 5px;
+background-color: rgba(16,22,26,.4); /* Green */
+color: white;
+cursor: pointer;
+transition: background-color 0.3s;
+width: 100%; /* Full width */
+text-align: center;
+font-size: 15px;
 
-/* Tail Effect Animation - Fades and shrinks */
-@keyframes trail {
+}
+
+.poll-button:hover {
+
+background-color: #45a049; /* Darker green */
 
-0% {
-  transform: scale(1) translate(-50%, -50%);
-  opacity: 1;
 }
-100% {
-  transform: scale(0) translate(-50%, -50%);
-  opacity: 0;
+
+.poll-button.selected {
+
+background-color: #2476ae; /* Blue for selected */
+
 }
 
+/* New Vote Button Styles */
+.vote-button {
+
+display: block; /* Change to block for full-width */
+margin: 5px 0; /* Add vertical margin */
+padding: 10px 15px;
+border: none;
+border-radius: 5px;
+background-color: #f44336; /* Red */
+color: white;
+cursor: pointer;
+transition: background-color 0.3s;
+width: 100%; /* Full width */
+text-align: center;
+
 }
 
+.vote-button:hover {
 
-/* Sample content to make sure scrolling works */
-.content {
+background-color: #d32f2f; /* Darker red */
+
+}
+
+.uppercase {
+
+text-transform: uppercase;
+font-size: 16px;
+text-align: center;
+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 */
+    color: #000000;
 
-height: 200vh; /* Make the page taller to enable scrolling */
-display: flex;
-flex-direction: column;
-align-items: center;
-justify-content: center;
 
 }
 
@@ -1374,45 +1438,92 @@ <h2>Contact Us</h2>
     <!-- Testimonials Section -->
 
 
-
 
-    <script>
 
+    <!-- Poll Pop-up -->
 
-      // Create a trailing dot element dynamically
-      function createTrailDot(x, y) {
-        const trailDot = document.createElement('div');
-        trailDot.classList.add('cursor-tail');
-        trailDot.style.left = `${x}px`;
-        trailDot.style.top = `${y}px`;
-        document.body.appendChild(trailDot);
+  <div class="popups" id="pollPopup">
+    <div class="popups-content">
+      <h2 class="uppercase">Have you ever implemented a graph algorithm in code before?</h2>
+      <div id="pollOptions">
+        <button class="poll-button" data-value="Yes">Yes, I’ve worked with DFS and BFS.</button>
+        <button class="poll-button" data-value="No">No, but I’m learning!</button>
+        <button class="poll-button" data-value="Not yet">Not yet, but I’m interested.</button>
 
 
-        // Remove the trail dot after the animation completes (0.5s)
-        setTimeout(() => {
-          trailDot.remove();
-        }, 500); // Match the duration of the animation in CSS
+        <!-- Additional buttons (hidden) -->
+        <button class="poll-button hidden" style="display: none;" data-value="Option4">Option4</button>
+        <button class="poll-button hidden" style="display: none;" data-value="Option5">Option5</button>
+      </div>
+      <button id="voteButton" class="vote-button">Vote</button>
+      <p id="result" style="text-align: center;"></p> <!-- Result display -->
+    </div>
+
+  </div>
+
+  <script>
 
+    // 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
       }
+    }
 
 
-      // Function to move the cursor and generate trailing dots
-      function moveCursor(event) {
+    // Set timeout for poll display
+    setTimeout(checkAndDisplayPollPopup, 10000);
 
-        const x = event.pageX;
-        const y = event.pageY;
 
-        // Create a new trail dot at the cursor position
-        createTrailDot(x, y);
+    // 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
+        }
+    });
 
 
-      // Listen to mousemove event to trigger the cursor and trail
-      document.addEventListener('mousemove', moveCursor);
+    // Function to log the voting action
+    function logVoteAction() {
+        console.log("User has voted for: " + selectedValue); // Log selected value
+    }
+
+
+    // Event listener for the vote button to log action
+    document.getElementById('voteButton').addEventListener('click', logVoteAction);
+
+
+    // Log when the script has loaded
+    console.log("Poll script initialized and ready!");
+
+
+  </script>
 
-
-    </script>
 
 
   </body>