Travel Poll - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Poll</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .poll-container {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: 500px;
            width: 100%;
            text-align: left;
            animation: slideIn 1s ease-out;
        }
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .poll-header {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        .poll-question {
            font-size: 20px;
            margin-bottom: 15px;
        }
        .poll-options {
            list-style: none;
            padding: 0;
        }
        .poll-options li {
            margin-bottom: 10px;
        }
        .poll-options input[type="radio"] {
            display: none;
        }
        .poll-options label {
            display: block;
            padding: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
            font-size: 18px;
            background: #b3e0db;
            color: #555;
        }
        .poll-options input[type="radio"]:checked + label {
            background: #2c7d76;
            color: #fff;
            transform: scale(1.05);
        }
        .poll-options input[type="radio"] + label:hover {
            background: #9cd5d1;
        }
        .poll-buttons {
            margin-top: 20px;
        }
        .poll-buttons button {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
            margin: 5px;
        }
        .poll-buttons .submit-btn {
            background: #27846b;
            color: #fff;
        }
        .poll-buttons .submit-btn:hover {
            background: #1f6c57;
        }
        .poll-buttons .reset-btn {
            background: #757575;
            color: #fff;
        }
        .poll-buttons .reset-btn:hover {
            background: #616161;
        }
        .result-container {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
        .result-container h2 {
            margin-bottom: 15px;
            color: #333;
        }
        .result-bar {
            width: 100%;
            background: #d1efed;
            border-radius: 8px;
            margin-bottom: 10px;
            position: relative;
        }
        .result-bar .bar {
            height: 30px;
            border-radius: 8px;
            background: #2c7d76;
            text-align: center;
            line-height: 30px;
            color: #fff;
            position: relative;
            z-index: 1;
        }
        .result-bar .bar::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.2);
            animation: barAnim 2s infinite;
        }
        @keyframes barAnim {
            from {
                left: -100%;
            }
            to {
                left: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="poll-container">
        <div class="poll-header">✈️ Travel Poll ✈️</div>
        <div class="poll-question">What is your dream travel destination?</div>
        <ul class="poll-options">
            <li>
                <input type="radio" id="destination1" name="poll" value="Paris">
                <label for="destination1">Paris <span>🗼</span></label>
            </li>
            <li>
                <input type="radio" id="destination2" name="poll" value="Bali">
                <label for="destination2">Bali <span>🌴</span></label>
            </li>
            <li>
                <input type="radio" id="destination3" name="poll" value="Tokyo">
                <label for="destination3">Tokyo <span>🗾</span></label>
            </li>
            <li>
                <input type="radio" id="destination4" name="poll" value="New York">
                <label for="destination4">New York <span>🗽</span></label>
            </li>
        </ul>
        <div class="poll-buttons">
            <button class="submit-btn" onclick="submitPoll()">Submit</button>
            <button class="reset-btn" onclick="resetPoll()">Reset</button>
        </div>
        <div class="result-container">
            <h2>Results</h2>
            <div id="result1" class="result-bar"><div class="bar" style="width: 0%;">Paris</div></div>
            <div id="result2" class="result-bar"><div class="bar" style="width: 0%;">Bali</div></div>
            <div id="result3" class="result-bar"><div class="bar" style="width: 0%;">Tokyo</div></div>
            <div id="result4" class="result-bar"><div class="bar" style="width: 0%;">New York</div></div>
        </div>
    </div>
    <script>
        const results = {
            Paris: 0,
            Bali: 0,
            Tokyo: 0,
            New York: 0
        };
        let totalVotes = 0;
        function submitPoll() {
            const selectedOption = document.querySelector('input[name="poll"]:checked');
            if (selectedOption) {
                const value = selectedOption.value;
                results[value]++;
                totalVotes++;
                displayResults();
            } else {
                alert('Please select an option.');
            }
        }
        function resetPoll() {
            document.querySelectorAll('input[name="poll"]').forEach(input => input.checked = false);
            document.querySelector('.result-container').style.display = 'none';
            document.querySelector('.poll-options').style.display = 'block';
            document.querySelector('.poll-buttons').style.display = 'block';
        }
        function displayResults() {
            document.querySelector('.result-container').style.display = 'block';
            document.querySelector('.poll-options').style.display = 'none';
            document.querySelector('.poll-buttons').style.display = 'none';
            Object.keys(results).forEach((key, index) => {
                const percentage = (results[key] / totalVotes) * 100;
                document.querySelector(`#result${index + 1} .bar`).style.width = `${percentage}%`;
                document.querySelector(`#result${index + 1} .bar`).innerText = `${key} (${Math.round(percentage)}%)`;
            });
        }
    </script>
</body>
</html>