From 78ff0d1dee42565978cec3c9427a8e194b94667e Mon Sep 17 00:00:00 2001 From: Subhajit-2023-44 Date: Sat, 2 Nov 2024 00:08:44 +0530 Subject: [PATCH] done --- index.html | 20 +++++++++ script.js | 66 ++++++++++++++++++++++++++++++ style.css | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 202 insertions(+) diff --git a/index.html b/index.html index 71a1524..21577ca 100644 --- a/index.html +++ b/index.html @@ -754,6 +754,26 @@

Feedback Form

+ + +
+
+

What type of Gaming Accessory are you Most Interested in?

+
+ + + + + + +
+ +

+
+
+ + + diff --git a/script.js b/script.js index 1875905..1784318 100644 --- a/script.js +++ b/script.js @@ -520,3 +520,69 @@ function displayVisitorCount() { // Call the display function when the page loads document.addEventListener('DOMContentLoaded', displayVisitorCount); + +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}
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!"); +}); + + diff --git a/style.css b/style.css index e7a1df4..ebeedab 100644 --- a/style.css +++ b/style.css @@ -2252,3 +2252,119 @@ button { font-size: 18px; } } + + + +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; + +} + +.poll-button { + + background-color: rgba(16, 22, 26, .4); /* Green */ + +} + +.poll-button:hover { + + background-color: #be264c; /* Darker green */ + border: none; + +} + +.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; + +} +