<!DOCTYPE html> <html> <head> <style> .poll-container { max-width: 600px; margin: 20px auto; padding: 20px; font-family: Arial, sans-serif; } .poll-option { margin: 15px 0; } .vote-button { padding: 8px 20px; margin: 5px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; } .bar-container { width: 100%; background-color: #f0f0f0; border-radius: 4px; margin-top: 5px; } .bar { height: 25px; background-color: #2196F3; border-radius: 4px; text-align: right; padding-right: 5px; color: white; transition: width 0.5s ease-in-out; } </style> </head> <body> <div class="poll-container" id="pollContainer"></div> <script> function createPoll(options) { const container = document.getElementById('pollContainer'); let votes = new Array(options.length).fill(0); let totalVotes = 0; // Create poll elements options.forEach((option, index) => { const optionDiv = document.createElement('div'); optionDiv.className = 'poll-option'; // Create vote button const button = document.createElement('button'); button.className = 'vote-button'; button.textContent = option; button.onclick = () => handleVote(index); // Create bar graph container const barContainer = document.createElement('div'); barContainer.className = 'bar-container'; const bar = document.createElement('div'); bar.className = 'bar'; bar.id = `bar-${index}`; bar.textContent = '0%'; barContainer.appendChild(bar); optionDiv.appendChild(button); optionDiv.appendChild(barContainer); container.appendChild(optionDiv); }); function handleVote(optionIndex) { votes[optionIndex]++; totalVotes++; updateBars(); } function updateBars() { options.forEach((_, index) => { const percent = totalVotes > 0 ? (votes[index] / totalVotes * 100).toFixed(1) : 0; const bar = document.getElementById(`bar-${index}`); bar.style.width = `${percent}%`; bar.textContent = `${percent}%`; }); } } // Initialize poll with 2-4 options (modify this array as needed) createPoll(['Option 1', 'Option 2', 'Option 3', 'Option 4']); </script> </body> </html> <!DOCTYPE html> <html> <head> <style> .poll-container { max-width: 800px; margin: 20px auto; padding: 20px; font-family: Arial, sans-serif; } .poll-option { display: flex; align-items: center; margin: 15px 0; gap: 15px; } .option-content { width: 120px; display: flex; justify-content: center; align-items: center; } .option-content img { max-width: 100px; max-height: 60px; border-radius: 8px; object-fit: cover; } .vote-button { width: 40px; height: 40px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .vote-button:hover { transform: scale(1.1); } .bar-container { flex-grow: 1; background-color: #f0f0f0; border-radius: 20px; height: 40px; overflow: hidden; position: relative; } .bar { height: 100%; border-radius: 20px; display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; color: white; font-weight: bold; transition: width 0.5s ease-in-out; } </style> </head> <body> <div class="poll-container" id="pollContainer"></div> <script> function createPoll(options) { const container = document.getElementById('pollContainer'); let votes = new Array(options.length).fill(0); let totalVotes = 0; const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD']; options.forEach((option, index) => { const optionDiv = document.createElement('div'); optionDiv.className = 'poll-option'; // + Button const button = document.createElement('button'); button.className = 'vote-button'; button.innerHTML = '+'; button.onclick = () => handleVote(index); // Content (Text/Image) const content = document.createElement('div'); content.className = 'option-content'; if (option.image) { const img = document.createElement('img'); img.src = option.image; img.alt = option.text; content.appendChild(img); } else { content.textContent = option.text; } // Progress Bar const barContainer = document.createElement('div'); barContainer.className = 'bar-container'; const bar = document.createElement('div'); bar.className = 'bar'; bar.style.backgroundColor = colors[index % colors.length]; bar.textContent = '0%'; barContainer.appendChild(bar); optionDiv.appendChild(button); optionDiv.appendChild(content); optionDiv.appendChild(barContainer); container.appendChild(optionDiv); }); function handleVote(index) { votes[index]++; totalVotes++; updateBars(); } function updateBars() { options.forEach((_, index) => { const percentage = totalVotes > 0 ? ((votes[index] / totalVotes) * 100).toFixed(1) : 0; const bar = container.querySelectorAll('.bar')[index]; bar.style.width = `${percentage}%`; bar.textContent = `${percentage}%`; }); } } // Sample poll options (Modify as needed) createPoll([ { text: 'Beach Vacation', image: 'https://example.com/beach.jpg' }, { text: 'Mountain Trek' }, { text: 'City Tour', image: 'https://example.com/city.jpg' }, { text: 'Countryside Escape' } ]); </script> </body> </html>

A commitment to innovation and sustainability

Études is a pioneering firm that seamlessly merges creativity and functionality to redefine architectural excellence.

About us

A passion for creating spaces

Our comprehensive suite of professional services caters to a diverse clientele, ranging from homeowners to commercial developers.